/* Velvet Rope Events: split screen, charcoal and lime, nightlife */
:root{
  --ground:#121412;--surface:#1C1F1B;--ink:#EDEFE6;--primary:#C6F432;--accent:#FF6B4A;--muted:#A3A89B;
  --line:rgba(237,239,230,.14);--raise:#252923;
  --fh:'Major Mono Display',ui-monospace,monospace;--fb:'Mulish',system-ui,sans-serif;
}
*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;background:var(--ground)}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
body{margin:0;background:var(--ground);color:var(--ink);font:400 1rem/1.7 var(--fb);overflow-x:hidden}
img{max-width:100%;display:block}
a{color:var(--primary);text-underline-offset:4px}
a:hover{color:#fff}
h1,h2,h3{font-family:var(--fh);font-weight:400;line-height:1.08;margin:0 0 .5em;letter-spacing:-.02em;text-transform:lowercase}
h1{font-size:clamp(2.6rem,5.6vw,5rem)}
h2{font-size:clamp(1.9rem,3.6vw,3rem)}
h3{font-size:1.35rem;letter-spacing:0}
h4{font:800 .78rem/1.3 var(--fb);letter-spacing:.18em;text-transform:uppercase;margin:0 0 8px;color:var(--muted)}
p{margin:0 0 1em}
:focus-visible{outline:3px solid var(--primary);outline-offset:3px}
.skip{position:absolute;left:-999px;top:60px;background:var(--primary);color:var(--ground);padding:10px 16px;z-index:100}
.skip:focus{left:16px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.small{font-size:.875rem;color:var(--muted)}
.lime{color:var(--primary)}
.tag{display:inline-flex;align-items:center;gap:10px;font:800 .74rem/1 var(--fb);letter-spacing:.22em;text-transform:uppercase;color:var(--primary);margin-bottom:20px}
.tag::before{content:"";width:28px;height:1px;background:currentColor}
.lead{font-size:1.15rem;color:#CDD1C4;max-width:56ch}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:12px;min-height:50px;padding:12px 26px;border-radius:999px;background:var(--primary);color:var(--ground);font:800 .86rem/1 var(--fb);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;border:0;cursor:pointer;transition:transform .2s,box-shadow .2s}
.btn:hover{color:var(--ground);transform:translateY(-2px);box-shadow:0 10px 30px -10px rgba(198,244,50,.6)}
.btn.out{background:transparent;color:var(--ink);box-shadow:inset 0 0 0 1.5px var(--ink)}
.btn.out:hover{background:var(--ink);color:var(--ground)}
.btn.sm{min-height:44px;padding:8px 18px;font-size:.76rem}
.btns{display:flex;flex-wrap:wrap;gap:12px}

/* top bar */
.top{position:fixed;top:0;left:0;right:0;z-index:50;transition:background .3s,backdrop-filter .3s}
.top.is-small{background:rgba(18,20,18,.82);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border-bottom:1px solid var(--line)}
.top-in{display:flex;align-items:center;gap:14px;padding:12px clamp(16px,3vw,40px)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:400 1.15rem/1 var(--fh);min-height:44px;text-transform:lowercase}
.logo svg{width:44px;height:28px;flex:none}
.chipck{margin-left:auto;display:inline-flex;align-items:center;gap:10px;text-decoration:none;color:var(--ink);font:700 .8rem var(--fb);background:var(--surface);border:1px solid var(--line);padding:6px 14px 6px 6px;border-radius:999px;min-height:44px}
.chipck svg{width:32px;height:32px}
.chipck:hover{color:var(--primary)}
.menubtn{min-height:44px;min-width:44px;padding:0 18px;border-radius:999px;background:var(--ink);color:var(--ground);border:0;font:800 .76rem var(--fb);letter-spacing:.16em;text-transform:uppercase;cursor:pointer;display:inline-flex;align-items:center;gap:10px}
.menubtn i{display:block;width:16px;height:2px;background:currentColor;box-shadow:0 5px 0 currentColor,0 -5px 0 currentColor}
.top .btn{display:inline-flex}
@media (max-width:760px){.top .btn,.chipck span{display:none}.chipck{padding:6px}}

/* overlay menu */
.menu{position:fixed;inset:48px 0 0 0;z-index:60;background:var(--ground);overflow:auto;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media (max-width:860px){.menu{grid-template-columns:minmax(0,1fr)}.menu .mvis{display:none}}
.menu .mvis{position:relative;background:var(--surface);overflow:hidden}
.menu .mvis .ph{position:absolute;inset:0;aspect-ratio:auto}
.menu-in{padding:24px clamp(16px,4vw,56px) 40px}
.menu-top{display:flex;justify-content:flex-end;margin-bottom:12px}
.menuclose{min-height:44px;padding:0 20px;border-radius:999px;border:1.5px solid var(--ink);background:none;color:var(--ink);font:800 .76rem var(--fb);letter-spacing:.16em;text-transform:uppercase;cursor:pointer}
.mlist{list-style:none;margin:0;padding:0;counter-reset:m}
.mlist li{counter-increment:m}
.mlist a{display:flex;align-items:baseline;gap:18px;padding:12px 0;border-bottom:1px solid var(--line);color:var(--ink);text-decoration:none;font:400 clamp(1.6rem,3.6vw,2.6rem)/1.1 var(--fh);text-transform:lowercase}
.mlist a::before{content:"0" counter(m);font:800 .74rem var(--fb);letter-spacing:.14em;color:var(--primary)}
.mlist a:hover{color:var(--primary);padding-left:8px;transition:padding .2s}
.menu-c{margin-top:24px;color:var(--muted)}

/* the split chapters */
.ch{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);position:relative;border-bottom:1px solid var(--line)}
.ch>.vis{position:sticky;top:48px;height:calc(100vh - 48px);overflow:hidden;background:var(--surface)}
.ch.flip>.vis{order:2}
.ch>.txt{padding:clamp(110px,12vh,150px) clamp(20px,5vw,80px) clamp(70px,10vh,110px);min-width:0;display:flex;flex-direction:column;justify-content:center;min-height:calc(100vh - 48px)}
.ch>.txt>*{max-width:620px;width:100%}
.ch.flip>.txt>*{margin-left:auto}
.vis .ph{position:absolute;inset:0;aspect-ratio:auto;border-radius:0}
.vis .ph img{transform-origin:50% 50%}
.vis::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(18,20,18,.15) 0%,rgba(18,20,18,.2) 45%,rgba(18,20,18,.88) 100%);pointer-events:none}
.vis .cap{position:absolute;left:clamp(16px,3vw,40px);right:clamp(16px,3vw,40px);bottom:clamp(20px,4vw,40px);z-index:2}
.vis .num{font:400 clamp(4.5rem,11vw,10rem)/.8 var(--fh);color:var(--primary);display:block;margin-bottom:10px}
.vis .cap p{margin:0;font:700 .82rem var(--fb);letter-spacing:.2em;text-transform:uppercase;color:#fff;text-shadow:0 1px 10px rgba(0,0,0,.6)}
.vis .prog{position:absolute;left:0;top:0;bottom:0;width:4px;background:rgba(255,255,255,.08);z-index:3}
.flip .vis .prog{left:auto;right:0}
.vis .prog i{display:block;width:100%;height:calc(var(--cp,0) * 100%);background:var(--primary)}
.ch.lime-bg>.vis{background:var(--primary)}
.ch.lime-bg>.vis::after{display:none}
@media (max-width:860px){
  .ch{grid-template-columns:minmax(0,1fr)}
  .ch>.vis{position:relative;top:0;height:42vh;min-height:280px}
  .vis .num{font-size:3.6rem}
  .ch.flip>.vis{order:0}
  .ch>.txt{min-height:0;padding:44px 16px 56px}
  .ch.first>.vis{height:46vh}
}

/* hero rope */
.rope{position:absolute;left:8%;right:8%;top:20%;z-index:2;height:auto}
.rope path.r{fill:none;stroke:var(--accent);stroke-width:7;stroke-linecap:round}
.rope .post{fill:#D9C27A}
.js .rope path.r{animation:swing 4.5s ease-in-out infinite;transform-origin:50% 0}
@keyframes swing{50%{d:path("M60 40 Q300 132 540 40")}}
.hero-h{font-size:clamp(3rem,6.6vw,6rem);line-height:1}
.hero-h .w{display:inline-block}
.js .hero-h .w{opacity:0;transform:translateY(30px);animation:hin .8s cubic-bezier(.2,.7,.2,1) forwards}
@keyframes hin{to{opacity:1;transform:translateY(0)}}
.ticker{display:flex;gap:28px;flex-wrap:wrap;margin-top:28px;padding-top:22px;border-top:1px solid var(--line)}
.ticker div b{display:block;font:400 2.2rem/1 var(--fh);color:var(--primary)}
.ticker div span{font-size:.85rem;color:var(--muted)}

/* lists and cards */
.svc{list-style:none;padding:0;margin:0}
.svc li{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:18px;align-items:baseline;padding:18px 0;border-bottom:1px solid var(--line)}
.svc li .n{font:400 .9rem var(--fh);color:var(--primary)}
.svc li h3{margin:0 0 4px}
.svc li p{margin:0;color:var(--muted);font-size:.95rem}
.svc li .p{font-weight:800;white-space:nowrap;color:var(--ink);font-size:.9rem}
@media (max-width:520px){.svc li{grid-template-columns:auto minmax(0,1fr)}.svc li .p{grid-column:2}}
.cards{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:560px){.cards{grid-template-columns:minmax(0,1fr)}}
.cardx{background:var(--surface);border:1px solid var(--line);border-radius:20px;padding:22px;transition:border-color .25s,transform .25s}
.cardx:hover{border-color:var(--primary);transform:translateY(-3px)}
.cardx h3{font-size:1.15rem}
.cardx p{color:var(--muted);margin:0;font-size:.95rem}
.cardx .k{font:400 2rem/1 var(--fh);color:var(--primary);display:block;margin-bottom:10px}
a.cardx{text-decoration:none;color:var(--ink);display:block}
.quote{margin:0 0 26px;padding:0 0 26px;border-bottom:1px solid var(--line)}
.quote p{font:500 1.25rem/1.5 var(--fb);color:#fff}
.quote footer{font:800 .74rem var(--fb);letter-spacing:.16em;text-transform:uppercase;color:var(--primary)}
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{counter-increment:s;position:relative;padding:0 0 26px 64px}
.steps li::before{content:counter(s,decimal-leading-zero);position:absolute;left:0;top:-4px;font:400 1.8rem var(--fh);color:var(--primary)}
.steps li h3{font-size:1.15rem;margin-bottom:4px}
.steps li p{color:var(--muted);margin:0}
.marq{overflow:hidden;white-space:nowrap;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--primary);color:var(--ground)}
.marq div{display:inline-flex;gap:40px;padding:14px 0;animation:mq 40s linear infinite;font:400 1.4rem var(--fh);text-transform:lowercase}
@keyframes mq{to{transform:translateX(-50%)}}
.ph{position:relative;overflow:hidden;background:linear-gradient(135deg,#2A2F27,#3A4130);aspect-ratio:4/3;border-radius:18px}
.ph img{width:100%;height:100%;object-fit:cover}
.ph.wide{aspect-ratio:16/9}.ph.sq{aspect-ratio:1}.ph.tall{aspect-ratio:3/4}

/* checklist (signature) */
.ck-set{background:var(--surface);border:1px solid var(--line);border-radius:22px;padding:20px;margin-bottom:18px}
.two{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:12px}
@media (max-width:560px){.two{grid-template-columns:minmax(0,1fr)}}
.types{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}
.types button,.fbar button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:700 .86rem var(--fb);cursor:pointer}
.types button[aria-pressed=true],.fbar button[aria-pressed=true]{background:var(--primary);color:var(--ground);border-color:var(--primary)}
.ck-head{display:flex;align-items:center;gap:18px;margin:6px 0 16px}
.ring{width:84px;height:84px;flex:none}
.ring circle{fill:none;stroke-width:8}
.ring .bg{stroke:var(--raise)}
.ring .fg{stroke:var(--primary);stroke-linecap:round;transform:rotate(-90deg);transform-origin:50% 50%;transition:stroke-dashoffset .5s}
.ring text{font:400 18px var(--fh);fill:var(--ink)}
.ck-head b{display:block;font:400 1.5rem/1.1 var(--fh)}
.fbar{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:12px}
.phase{margin-bottom:18px}
.phase h4{display:flex;justify-content:space-between;gap:12px;border-bottom:1px solid var(--line);padding-bottom:8px;margin-bottom:6px;color:var(--ink)}
.phase h4 span{color:var(--muted);font-weight:700}
.phase.late h4{color:var(--accent)}
.task{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:12px;align-items:start;padding:10px 4px;border-bottom:1px dashed var(--line)}
.task input{appearance:none;-webkit-appearance:none;width:26px;height:26px;border-radius:8px;border:2px solid var(--muted);margin:2px 0 0;cursor:pointer;display:grid;place-items:center;background:var(--ground)}
.task input:checked{background:var(--primary);border-color:var(--primary)}
.task input:checked::after{content:"";width:8px;height:13px;border:solid var(--ground);border-width:0 3px 3px 0;transform:rotate(45deg) translate(-1px,-1px)}
.task label{cursor:pointer;line-height:1.45}
.task.done label{color:var(--muted);text-decoration:line-through}
.task .who{font:800 .66rem var(--fb);letter-spacing:.14em;text-transform:uppercase;padding:4px 8px;border-radius:999px;border:1px solid var(--line);white-space:nowrap;color:var(--muted)}
.task .who.us{color:var(--ground);background:var(--primary);border-color:var(--primary)}
.task .x{background:none;border:0;color:var(--muted);cursor:pointer;min-width:44px;min-height:32px}
.addt{display:flex;gap:8px;margin-top:10px}
.addt input{flex:1;min-width:0}
.countdown{font:400 clamp(2.4rem,5vw,3.6rem)/1 var(--fh);color:var(--primary)}

/* budget */
.bud fieldset{border:0;padding:0;margin:0 0 20px;min-width:0}
.bud legend{font:800 .76rem var(--fb);letter-spacing:.18em;text-transform:uppercase;color:var(--muted);margin-bottom:10px}
.opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:8px}
.opt{position:relative}
.opt input{position:absolute;inset:0;opacity:0;margin:0;width:100%;height:100%;cursor:pointer}
.opt span{display:block;background:var(--raise);border:1.5px solid var(--line);border-radius:16px;padding:12px 14px;min-height:44px}
.opt span b{display:block;font-weight:800}
.opt span small{color:var(--muted)}
.opt input:checked+span{border-color:var(--primary);background:#2B3320}
.opt input:focus-visible+span{outline:3px solid var(--primary);outline-offset:2px}
.rng{display:flex;align-items:center;gap:14px}
.rng input{flex:1;accent-color:var(--primary);min-height:44px}
.rng output{font:400 1.8rem var(--fh);color:var(--primary);min-width:4ch;text-align:right}
.bill{background:var(--primary);color:var(--ground);border-radius:24px;padding:26px}
.bill h3{color:var(--ground)}
.bill dl{margin:0 0 12px}
.bill dl div{display:flex;justify-content:space-between;gap:12px;padding:7px 0;border-bottom:1px solid rgba(18,20,18,.18);font-size:.94rem}
.bill dd{margin:0;font-weight:800;white-space:nowrap}
.bill .tot{font:400 clamp(1.8rem,3.4vw,2.6rem)/1.1 var(--fh);margin:10px 0 4px}
.bill .small{color:#2E3A10}
.bill .btn{background:var(--ground);color:var(--primary)}

/* forms */
.form{background:var(--surface);border:1px solid var(--line);border-radius:24px;padding:clamp(20px,3vw,32px)}
.fld{margin-bottom:16px;min-width:0}
.fld label{display:block;font:800 .74rem var(--fb);letter-spacing:.16em;text-transform:uppercase;margin-bottom:8px;color:var(--muted)}
input,select,textarea{font:inherit}
.fld input,.fld select,.fld textarea,.addt input{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:14px;padding:10px 14px;font-size:1rem;background:var(--ground);color:var(--ink)}
.fld input:focus,.fld select:focus,.fld textarea:focus,.addt input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px rgba(198,244,50,.25)}
.fld .err{display:none;color:var(--accent);font-size:.86rem;margin:6px 0 0}
.fld.bad .err{display:block}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--accent)}
.thanks{background:var(--primary);color:var(--ground);border-radius:24px;padding:30px}
.thanks h3{color:var(--ground)}
.thanks a{color:var(--ground)}

/* faq */
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:14px;align-items:center;padding:16px 0;font:700 1.05rem/1.4 var(--fb);min-height:44px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"+";font:400 1.5rem var(--fh);color:var(--primary);flex:none;transition:transform .25s}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq details p{color:var(--muted);margin:0 0 16px}

/* portfolio gallery */
.gfil{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px}
.gfil button{min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--raise);color:var(--ink);font:700 .86rem var(--fb);cursor:pointer}
.gfil button[aria-pressed=true]{background:var(--primary);color:var(--ground)}
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
.gal a{display:block;position:relative;text-decoration:none;border-radius:18px;overflow:hidden}
.gal a:nth-child(3n+1){grid-column:span 2}
.gal a:nth-child(3n+1) .ph{aspect-ratio:16/9}
.gal a .ph{border-radius:0}
.gal a span{position:absolute;left:12px;bottom:12px;right:12px;font:700 .82rem/1.35 var(--fb);color:#fff;background:rgba(18,20,18,.78);padding:8px 12px;border-radius:12px}
.gal a:hover .ph img{transform:scale(1.05)}
.gal .ph img{transition:transform .6s}
.lb{position:fixed;inset:48px 0 0 0;z-index:70;background:rgba(10,11,10,.96);display:flex;align-items:center;justify-content:center;padding:64px 16px 24px}
.lb figure{margin:0;max-width:min(1100px,100%);text-align:center}
.lb img{max-height:72vh;width:auto;margin:0 auto;border-radius:14px;background:var(--surface);min-width:min(600px,90vw);min-height:300px;object-fit:contain}
.lb figcaption{color:var(--muted);margin-top:12px}
.lb button{position:absolute;min-width:48px;min-height:48px;border-radius:999px;border:0;background:var(--primary);color:var(--ground);font:800 .8rem var(--fb);letter-spacing:.12em;text-transform:uppercase;cursor:pointer}
.lb-x{top:12px;right:16px;padding:0 18px}
.lb-p{left:16px;top:50%}.lb-n{right:16px;top:50%}

/* article */
.art{font-size:1.06rem}
.art h2{font-size:1.7rem;margin-top:1.6em}
.art .pull{font:400 1.5rem/1.3 var(--fh);color:var(--primary);border-left:3px solid var(--primary);padding-left:18px;margin:1.4em 0;text-transform:lowercase}
.art ol li,.art ul li{margin-bottom:8px}
.byl{display:flex;flex-wrap:wrap;gap:8px 18px;font-size:.88rem;color:var(--muted);margin-bottom:22px}
.crumbs{font-size:.86rem;color:var(--muted);margin-bottom:16px}
.crumbs a{color:var(--muted)}
.mapbox{border-radius:20px;overflow:hidden;border:1px solid var(--line)}
.mapbox svg{display:block;width:100%;height:auto}
.team{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
@media (max-width:560px){.team{grid-template-columns:minmax(0,1fr)}}
.team .ph{aspect-ratio:3/4;margin-bottom:10px}
.team h3{font-size:1.05rem;margin:0}
.team p{font-size:.88rem;color:var(--muted);margin:0}

/* reveal */
.js .rv{opacity:0;transform:translateY(20px);transition:opacity .7s ease,transform .7s cubic-bezier(.2,.7,.2,1)}
.js .rv.in{opacity:1;transform:translateY(0)}
@media (prefers-reduced-motion:reduce){.js .rv{opacity:1;transform:none}.js .hero-h .w{opacity:1;transform:none}}

/* footer */
.ftr{background:var(--primary);color:var(--ground);padding:64px clamp(16px,4vw,56px) 110px}
.ftr a{color:var(--ground)}
.ftr .big{font:400 clamp(2.4rem,7vw,6rem)/.95 var(--fh);margin:0 0 36px;text-transform:lowercase}
.ftr-g{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;max-width:1320px}
@media (max-width:760px){.ftr-g{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}}
@media (max-width:440px){.ftr-g{grid-template-columns:minmax(0,1fr)}}
.ftr h2{font:800 .72rem var(--fb);letter-spacing:.2em;text-transform:uppercase;margin-bottom:12px}
.ftr-g a{display:block;padding:5px 0;text-decoration:none;font-weight:700}
.ftr-g a:hover{text-decoration:underline}
.ftr-bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px;border-top:1px solid rgba(18,20,18,.25);margin-top:36px;padding-top:18px;font-size:.86rem;max-width:1320px}
.wa{position:fixed;right:18px;bottom:20px;z-index:54;width:58px;height:58px;border-radius:50%;background:#1F7A4D;display:grid;place-items:center;box-shadow:0 10px 26px -8px rgba(0,0,0,.6)}
.wa svg{width:30px;height:30px;fill:#fff}

/* budget bill lives in the sticky half */
.billch .vis .bill{position:absolute;z-index:4;left:8%;right:8%;top:50%;transform:translateY(-50%);max-height:calc(100% - 48px);overflow:auto;box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
.billch .vis .cap{display:none}
@media (max-width:860px){.billch>.vis{order:2!important;height:auto;min-height:0;padding:0 16px 40px;background:var(--ground)}.billch>.vis::after,.billch>.vis .ph,.billch>.vis .prog{display:none}.billch .vis .bill{position:relative;transform:none;left:auto;right:auto;top:auto;max-height:none}}
