/* Afflux Studios — shared stylesheet for index, work, stage and faq. */

/* Layout: A24-style restraint. Full-bleed still with a stacked title list that swaps the image on hover,
   minimal Menu / logo / CTA header, big mixed-case grotesk, left-aligned sections, generous white space.
   Palette stays Afflux: ink / bone / acid. Acid rule: never text or icon on bone; ink on acid, acid on ink, or a wash. */
:root{
  --ink:#0b0b0a; --ink-2:#161614; --forest:#222820;
  --paper:#eee9de; --paper-bright:#f7f3e9;
  --acid:#d6ff38;
  --fog:#aaa69d; --muted:#5a574f;
  --line:rgba(11,11,10,.14); --line-dark:rgba(238,233,222,.16);
  --sans:"Inter Tight","Helvetica Neue",Helvetica,Arial,sans-serif;
  --serif:Georgia,"Times New Roman",serif;
  --mono:"IBM Plex Mono",ui-monospace,Menlo,monospace;
  --ease:cubic-bezier(.16,1,.3,1);
  --gutter:clamp(16px,3.4vw,52px);
  --space:clamp(80px,9.75vw,146px);
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--ink);color:var(--paper);font:400 1.02rem/1.6 var(--sans);-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
::selection{background:var(--acid);color:var(--ink)}
.wrap{padding-inline:var(--gutter);max-width:1440px;margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--acid);color:var(--ink);padding:.5rem 1rem;z-index:99;font-weight:600}
.skip:focus{left:8px}
:focus-visible{outline:2px solid var(--acid);outline-offset:3px}
.inquiry :focus-visible{outline-color:var(--ink)}
.dark :focus-visible,.hero :focus-visible,.top:not(.solid) :focus-visible,.menu :focus-visible,footer :focus-visible{outline-color:var(--acid)}
.dark{background:var(--ink);color:var(--paper)}

/* type */
.label{font:600 .7rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase;margin:0}
.muted{color:var(--fog)}
.dark .muted{color:var(--fog)}
.h-lg{font:500 clamp(2.6rem,6.2vw,5.6rem)/.94 var(--sans);letter-spacing:-.045em;margin:0;text-wrap:balance}
.h-md{font:500 clamp(1.5rem,2.2vw,2rem)/1.08 var(--sans);letter-spacing:-.03em;margin:0}
.wash{background:linear-gradient(transparent 10%,var(--acid) 10%,var(--acid) 92%,transparent 92%);color:var(--ink);padding-inline:.08em;-webkit-box-decoration-break:clone;box-decoration-break:clone}
.dark .acid{color:var(--acid)}
.sec-top{display:flex;justify-content:space-between;align-items:end;gap:1.5rem;flex-wrap:wrap;margin-bottom:clamp(36px,4.3vw,62px)}
.sec-top .label{margin-bottom:1.1rem}

/* A24-style arrow link */
.arrow{display:inline-flex;align-items:center;gap:1rem;font:600 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding-block:.6rem;cursor:pointer;background:none;border:0;color:inherit}
.arrow svg{width:40px;height:12px;flex:none;transition:width .45s var(--ease)}
.arrow:hover svg{width:58px}
.arrow-row{display:flex;flex-wrap:wrap;gap:.6rem 2.4rem}


/* ---------- color blocking ---------- */
.acidblk{background:var(--acid);color:var(--ink)}
.acidblk .muted,.acidblk .label.muted{color:rgba(11,11,10,.66)}
.acidblk :focus-visible{outline-color:var(--ink)}
.acidblk .wash{background:var(--ink);color:var(--acid);padding-inline:.12em}
.acidblk .acid{background:var(--ink);color:var(--acid);padding-inline:.1em}
.acidblk .arrow:hover{color:var(--ink)}

/* ---------- header ---------- */
.top{position:fixed;inset:0 0 auto 0;z-index:50;padding-top:env(safe-area-inset-top,0px);color:var(--paper);transition:background .35s,color .35s,border-color .35s;border-bottom:1px solid transparent}
.top .wrap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding-block:18px}
.top.solid{background:rgba(11,11,10,.94);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);color:var(--paper);border-color:var(--line-dark)}
.menu-btn{justify-self:start;display:inline-flex;align-items:center;gap:.7rem;background:none;border:0;color:inherit;cursor:pointer;font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.5rem 0}
.menu-btn .bars{display:grid;gap:5px;width:20px}
.menu-btn .bars i{height:1.5px;background:currentColor;transition:transform .35s var(--ease)}
.brand{justify-self:center;display:inline-flex;align-items:center;gap:.5rem;font:600 1.3rem/1 var(--sans);letter-spacing:-.04em}
.brand .logo{display:block;height:clamp(26px,2.4vw,34px);width:auto;aspect-ratio:1455/342}
.top .cta{justify-self:end}
@media (max-width:640px){.top .cta .txt{display:none}}

/* full-screen menu */
.menu{position:fixed;inset:0;z-index:60;background:var(--ink);color:var(--paper);display:flex;flex-direction:column;justify-content:space-between;padding:calc(env(safe-area-inset-top,0px) + 100px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 32px);clip-path:inset(0 0 100% 0);visibility:hidden;transition:clip-path .6s var(--ease),visibility 0s .6s}
.menu.open{clip-path:inset(0);visibility:visible;transition-delay:0s}
.menu nav{display:grid}
.menu nav a{font:500 clamp(2.8rem,9vw,7.5rem)/1 var(--sans);letter-spacing:-.05em;display:flex;align-items:baseline;gap:1.2rem;transition:color .2s,padding .4s var(--ease)}
.menu nav a span{font:600 .7rem/1 var(--sans);letter-spacing:.09em;color:var(--fog);width:2rem}
.menu nav a:hover{color:var(--acid);padding-left:.6rem}
.menu .close{position:absolute;top:calc(env(safe-area-inset-top,0px) + 18px);left:var(--gutter)}
.menu-foot{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;color:var(--fog)}

/* ---------- hero: full-bleed still + stacked title list ---------- */
.hero{position:relative;min-height:max(640px,100svh);background:var(--ink);color:var(--paper);overflow:hidden;display:flex;flex-direction:column;justify-content:flex-end}
.stills{position:absolute;inset:0;background:var(--forest)}
.stills iframe{position:absolute;border:0;width:177.78vh;min-width:100%;height:56.25vw;min-height:100%;left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none}
.still{position:absolute;inset:0;opacity:0;transition:opacity .7s ease}
.still.on{opacity:1}
.still img{width:100%;height:100%;object-fit:cover;transform:scale(1.04);transition:transform 6s linear}
.still.on img{transform:scale(1)}
.hero::after{content:"";position:absolute;inset:0;background:rgba(11,11,10,.5);pointer-events:none}
.hero-in{position:relative;z-index:2;width:100%;padding-block:130px clamp(36px,5vw,64px)}
.hero-in h1{margin:0;font-weight:inherit}
.hero-kicker{display:block;color:rgba(238,233,222,.75);margin-bottom:clamp(1rem,2vw,1.6rem)}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.hero-row{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem 3rem;margin-top:clamp(1.4rem,2.6vw,2.4rem)}
.hero-row p{margin:0;max-width:36rem;font:400 clamp(1.05rem,1.4vw,1.3rem)/1.45 var(--sans);color:rgba(238,233,222,.9)}
.doors{position:relative;z-index:2;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border-top:1px solid var(--line-dark);border-bottom:1px solid var(--ink)}
.door{display:grid;grid-template-columns:minmax(0,1fr) auto;align-content:start;gap:.55rem 1rem;padding:clamp(22px,2.4vw,34px) var(--gutter) clamp(26px,3vw,40px);background:var(--ink);color:var(--paper);transition:background .25s,color .25s}
.door+.door{border-left:1px solid var(--line-dark)}
.door .n{grid-column:1/-1;font:500 .74rem/1 var(--mono);letter-spacing:.06em;color:var(--acid);margin-bottom:.5rem}
.door b{font:500 clamp(1.5rem,2.3vw,2.2rem)/1.05 var(--sans);letter-spacing:-.035em}
.door .d{grid-column:1;color:var(--fog);font-size:.98rem;line-height:1.4}
.door .go{grid-column:2;grid-row:2/4;align-self:end;width:40px;height:12px;transition:width .45s var(--ease)}
.door:hover .go,.door:focus-visible .go{width:58px}
.door:hover,.door:focus-visible{background:var(--ink-2)}
.door.main,.door.main:hover,.door.main:focus-visible{background:var(--acid);color:var(--ink)}
.door.main .n,.door.main .d{color:var(--ink)}
.door.main .d{opacity:.72}
.hero .door.main:focus-visible{outline-color:var(--ink);outline-offset:-6px}
@media (max-width:860px){.doors{grid-template-columns:1fr}.door+.door{border-left:0;border-top:1px solid var(--line-dark)}.door{padding-block:20px 22px}.door .n{margin-bottom:.2rem}}

/* ---------- intro statement ---------- */
.intro{padding-block:var(--space) calc(var(--space)*.7)}
.statement{font:500 clamp(1.8rem,3.9vw,3.6rem)/1.08 var(--sans);letter-spacing:-.035em;margin:0;max-width:26ch;text-wrap:pretty}
.intro-grid{display:grid;gap:clamp(1.2rem,2vw,1.8rem)}
.facts{display:grid;grid-template-columns:repeat(3,1fr);margin:clamp(42px,5.75vw,80px) 0 0;border-top:1px solid currentColor}
.facts div{padding:1.1rem 1.2rem 0 0;min-width:0}
.facts dt{font:500 clamp(1.5rem,3.3vw,3.2rem)/1 var(--sans);letter-spacing:-.045em;white-space:nowrap}
.facts dd{margin:.6rem 0 0}
.intro .arrow-row{margin-top:2.4rem}
@media (max-width:760px){.intro-grid{grid-template-columns:1fr}.facts{grid-template-columns:1fr}.facts div{border-bottom:1px solid var(--line-dark);padding-bottom:1.1rem}}

/* ---------- marquee (from the first prototype) ---------- */
.mq{padding-block:1.3rem;overflow:hidden;border-block:1px solid var(--line-dark)}
.mq-label{margin:0 0 1rem;padding-inline:var(--gutter);color:var(--fog)}
.marquee{overflow:hidden}
.mq-track{display:flex;width:max-content;align-items:center;animation:marq 42s linear infinite}

.mq-track span{padding:0 .9rem;font:400 clamp(2.4rem,6vw,6.5rem)/1.05 var(--serif);letter-spacing:-.05em;white-space:nowrap;transition:color .3s}
.mq-track span:hover{color:var(--acid)}
.mq-track i{font-style:normal;color:var(--acid);font-size:clamp(1rem,2vw,2rem)}
@keyframes marq{to{transform:translateX(-50%)}}

/* ---------- work ---------- */
.work{padding-block:var(--space)}
.grid3{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:clamp(48px,5vw,72px) clamp(16px,1.8vw,28px);align-items:start}
.grid3 .film{grid-column:span 2}
.grid3 .frame{aspect-ratio:16/9}
.film{display:grid;gap:1rem;min-width:0}
.grid3 .film:nth-child(-n+2){grid-column:span 3}
.frame{position:relative;overflow:hidden;background:repeating-linear-gradient(135deg,transparent 0 14px,rgba(238,233,222,.04) 14px 15px),var(--forest);aspect-ratio:var(--ar,4/3);color:var(--fog)}
.frame::after{content:attr(data-label);position:absolute;left:14px;bottom:12px;right:14px;font:500 .68rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;filter:saturate(.75);transition:transform 1.2s var(--ease),filter .6s}
.film:hover .frame img{transform:scale(1.035);filter:saturate(1)}
.film .label .cat,.card .label .cat{color:var(--acid)}
.film .h-md{transition:transform .45s var(--ease)}
.film:hover .h-md{transform:translateX(6px)}
.grid3 .film:nth-child(-n+2) .h-md{font-size:clamp(1.7rem,2.6vw,2.4rem)}
@media (max-width:900px){.grid3{grid-template-columns:1fr 1fr}.grid3 .film,.grid3 .film:nth-child(-n+2){grid-column:auto}.grid3 .film.big{grid-column:1/-1}}
@media (max-width:560px){.grid3{grid-template-columns:1fr}}

/* ---------- services index ---------- */
.services{background:var(--ink-2)}
.svc-split{display:grid;grid-template-columns:minmax(0,4fr) minmax(0,8fr)}
.svc-panel{padding:var(--space) var(--gutter)}
.svc-panel-in{position:sticky;top:110px;display:grid;gap:1.4rem;justify-items:start}
.svc-lede{margin:0;max-width:30ch;font:500 clamp(1.1rem,1.5vw,1.35rem)/1.35 var(--sans);letter-spacing:-.015em}
.svc-body{padding:var(--space) var(--gutter)}
@media (max-width:900px){.svc-split{grid-template-columns:1fr}.svc-panel-in{position:static}}
.svc-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper)}
.svc{position:relative;isolation:isolate;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr) auto;gap:clamp(14px,3vw,48px);align-items:center;padding:clamp(20px,2.4vw,30px) 0;border-bottom:1px solid var(--line-dark)}
.svc::before{content:"";position:absolute;inset:0 calc(var(--gutter)*-1);z-index:-1;background:var(--acid);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.svc:hover::before,.svc:focus-visible::before{transform:scaleY(1)}
.svc-name{font:500 clamp(1.7rem,3.8vw,3.4rem)/1 var(--sans);letter-spacing:-.045em;display:flex;align-items:center;gap:1rem;flex-wrap:wrap}
.svc-desc{color:var(--fog);max-width:44ch}
.svc:hover,.svc:focus-visible{color:var(--ink)}
.svc:hover .svc-desc{color:var(--ink)}
.svc .arrow{padding:0}
.tag{font:600 .68rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;background:var(--acid);color:var(--ink);border-radius:0;padding:.45rem .7rem}
.svc:hover .tag{background:var(--ink);color:var(--acid)}
@media (max-width:760px){.svc{grid-template-columns:1fr}.svc .arrow{display:none}}

/* ---------- stage ---------- */
.stage{padding-block:var(--space)}
.stage-split{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:0;align-items:stretch}
.stage-split .frame{--ar:4/5}
.stage-copy{display:grid;gap:1.4rem;align-content:center;padding:clamp(28px,4vw,64px)}
.stage-split>.frame{aspect-ratio:auto;min-height:clamp(420px,46vw,760px)}
.stage-copy .h-lg{font-size:clamp(2.4rem,4.2vw,4.4rem)}
.stage-copy p{margin:0;max-width:44ch;font-size:1.08rem}
.spec{margin:0;border-top:1px solid currentColor}
.spec div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-dark)}
.acidblk .spec div{border-bottom-color:rgba(11,11,10,.22)}
.spec dt{color:var(--fog)}
.acidblk .spec dt{color:rgba(11,11,10,.66)}
.spec dd{margin:0;font-weight:500;font-variant-numeric:tabular-nums;text-align:right}
.uses{margin:0;font-size:.95rem}
.uses b{font-weight:600}
.plan-fig{margin:clamp(72px,9vw,128px) 0 0}
.plan-head{display:flex;justify-content:space-between;align-items:end;gap:1rem;flex-wrap:wrap;margin-bottom:1.6rem}
.plan{background:var(--forest);border:1px solid var(--line-dark);padding:clamp(10px,2vw,28px)}
.plan svg{display:block;width:100%;height:auto;max-height:640px}
.plan-cap{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;margin-top:.9rem;color:var(--fog);font:500 .7rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.plan-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px);align-items:center;margin-top:clamp(72px,9vw,128px)}
.plan-side{display:grid;gap:1.4rem;justify-items:start}
.plan-side p{margin:0;max-width:40ch;color:var(--fog);font-size:1.05rem}
.plan-row .plan svg{max-height:none}
@media (max-width:900px){.plan-row{grid-template-columns:1fr}}
.stage .small{margin:1.6rem 0 0;color:var(--fog);font-size:.92rem}
@media (max-width:900px){.stage-split{grid-template-columns:1fr}.stage-copy{position:static}}

/* ---------- process ---------- */
.process{padding-block:var(--space)}
.steps{list-style:none;margin:28px 0 0;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:0;counter-reset:s;border:1px solid var(--line-dark)}
.steps li{position:relative;counter-increment:s;padding:clamp(20px,2vw,30px);min-height:clamp(220px,20vw,300px);display:grid;gap:.6rem;align-content:space-between;background:var(--ink-2)}
.steps li:nth-child(odd){background:var(--acid);color:var(--ink)}
.steps li:nth-child(odd)::before,.steps li:nth-child(odd) p{color:var(--ink)}
.steps li>div{display:grid;gap:.5rem}
.steps li::before{content:counter(s,decimal-leading-zero);font:600 .7rem/1 var(--sans);font-size:clamp(2.2rem,3.4vw,3.2rem);font-weight:500;letter-spacing:-.04em;line-height:1;color:var(--acid)}
.steps h3{font:500 1.45rem/1.1 var(--sans);letter-spacing:-.03em;margin:0}
.steps p{margin:0;color:var(--fog);font-size:.95rem}
.clients{border-top:1px solid var(--line-dark)}
/* the green line: one segment per step, filled by js/site.js as the section scrolls in (--f = 0..1) */
.steps .seg{position:absolute;left:-1px;right:-1px;top:-20px;height:3px;background:linear-gradient(var(--acid),var(--acid)) no-repeat 0 0,var(--line-dark);background-size:calc(var(--f,1)*100%) 100%}
.steps .seg::before{content:"";position:absolute;left:0;top:-4px;width:11px;height:11px;background:var(--ink);border:1px solid rgba(238,233,222,.4);transition:background .3s,border-color .3s}
.steps li.on .seg::before,html:not(.steps-anim) .steps .seg::before{background:var(--acid);border-color:var(--acid)}
html.steps-anim .steps li{transition:opacity .5s var(--ease)}
html.steps-anim .steps li:not(.on){opacity:.4}
@media (max-width:1000px){
  .steps{grid-template-columns:1fr;margin:0 0 0 26px}
  .steps li{min-height:0;gap:1.2rem}
  .steps .seg{left:-27px;right:auto;top:-1px;bottom:-1px;width:3px;height:auto;background-size:100% calc(var(--f,1)*100%)}
  .steps .seg::before{left:-4px;top:-1px}
}

/* ---------- clients ---------- */
.clients{padding-block:var(--space) calc(var(--space)*.8)}
.clients .mq{margin-block:clamp(32px,4vw,56px) clamp(48px,6vw,80px)}
.clients .mq{padding-block:.9rem}
.clients .mq-track span{font-size:clamp(1.5rem,2.6vw,2.4rem);padding:0 .7rem}
.clients .mq-track i{font-size:clamp(.7rem,1vw,1rem)}
.client-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:clamp(20px,3vw,40px)}
.client-cols h3{margin:0 0 1.1rem;color:var(--fog)}
.client-cols ul{list-style:none;margin:0;padding:0;display:grid;gap:.3rem}
.client-cols li{font:500 1.15rem/1.3 var(--sans);letter-spacing:-.02em}
.client-cols li.more{font:400 .9rem/1.45 var(--sans);color:var(--fog);margin-top:.4rem;letter-spacing:0}
@media (max-width:900px){.client-cols{grid-template-columns:1fr 1fr}}

/* ---------- inquiry ---------- */
.inquiry{background:var(--acid);color:var(--ink);padding-block:var(--space)}
.inq-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.3fr);gap:clamp(32px,6vw,96px);align-items:start}
.inq-aside{display:grid;gap:1.4rem;align-content:start}
.inq-aside p{margin:0;max-width:36ch;font-size:1.08rem}
.contact-lines{display:grid;gap:.2rem;font:500 1.25rem/1.35 var(--sans);letter-spacing:-.02em}
form{display:grid;grid-template-columns:1fr 1fr;gap:2rem 1.6rem}
.field{display:flex;flex-direction:column;gap:.4rem;min-width:0}
.field.full{grid-column:1/-1}
.field label,.field legend{font:600 .66rem/1.2 var(--sans);letter-spacing:.09em;text-transform:uppercase}
input,select,textarea{font:500 1.25rem/1.3 var(--sans);letter-spacing:-.02em;color:var(--ink);background:transparent;border:0;border-bottom:1px solid var(--ink);padding:.55rem 0;border-radius:0;width:100%}
select{font-size:1.05rem}
textarea{min-height:110px;resize:vertical}
input::placeholder,textarea::placeholder{color:rgba(11,11,10,.42)}
input:focus,select:focus,textarea:focus{outline:none;border-bottom-width:2px}
input[aria-invalid=true],textarea[aria-invalid=true]{border-color:#8d1616}
fieldset{border:0;margin:0;padding:0}
.pills{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.pills input{position:absolute;opacity:0;width:1px;height:1px}
.pills label{font:600 .7rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);border-radius:0;padding:.72rem 1rem;cursor:pointer;transition:background .2s,color .2s}
.pills input:checked+label{background:var(--ink);color:var(--acid)}
.pills input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}
.err{font-size:.78rem;font-weight:600;color:#7b1111;min-height:1em}
.submit-row{grid-column:1/-1;display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.send{display:inline-flex;align-items:center;justify-content:space-between;gap:2rem;min-width:15rem;padding:1.2rem 1.3rem;background:var(--ink);color:var(--acid);border:0;cursor:pointer;font:600 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;transition:transform .3s var(--ease)}
.send:hover{transform:translateY(-3px)}
.send svg{width:40px;height:12px}
.note{font-size:.8rem}
.done{grid-column:1/-1;padding:1rem 0;border-top:1px solid var(--ink);font-weight:500}
@media (max-width:900px){.inq-grid{grid-template-columns:1fr}}
@media (max-width:560px){form{grid-template-columns:1fr}}

/* ---------- footer ---------- */
footer{background:var(--ink);color:var(--fog);padding-top:clamp(56px,6.75vw,95px);overflow:hidden}
.foot{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(3,minmax(0,1fr));gap:2rem}
.foot h3{margin:0 0 1rem;color:var(--paper)}
.foot ul{list-style:none;margin:0;padding:0;display:grid;gap:.35rem}
.foot a:hover{color:var(--acid)}
.foot .soc{display:flex;flex-wrap:wrap;gap:.6rem}
.foot .soc a{display:grid;place-items:center;width:44px;height:44px;border:1px solid rgba(238,233,222,.22);color:var(--paper);transition:background .25s,color .25s,border-color .25s}
.foot .soc svg{width:18px;height:18px}
.foot .soc a:hover,.foot .soc a:focus-visible{background:var(--acid);border-color:var(--acid);color:var(--ink)}
@media (max-width:560px){.foot .follow{grid-column:1/-1}}
.foot address{font-style:normal;font:500 clamp(1.3rem,2vw,1.8rem)/1.2 var(--sans);letter-spacing:-.03em;color:var(--paper)}
.legal{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;border-top:1px solid var(--line-dark);margin-top:56px;padding-top:18px}
.bigmark{display:block;width:calc(100% - var(--gutter)*2);max-width:1340px;height:auto;margin:clamp(40px,6vw,88px) auto 0;color:var(--acid);padding-bottom:clamp(28px,4vw,56px);box-sizing:content-box}
@media (max-width:900px){.foot{grid-template-columns:1fr 1fr}.foot address{grid-column:1/-1}}

@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}html{scroll-behavior:auto}}
[id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 80px)}
@media (max-width:1080px){.foot{grid-template-columns:1fr 1fr}.foot address{grid-column:1/-1}}
.submit-row .note{color:rgba(11,11,10,.72)}
.hp{display:none}
form.sent > :not(.done){display:none}
.done:focus{outline:none}
@media (prefers-reduced-motion:reduce){iframe[src*="background=1"]{display:none}}
/* ---------- Instagram strip ---------- */
.ig{background:var(--ink-2);padding-block:var(--space) calc(var(--space)*.85);overflow:hidden}
.ig-head{display:flex;justify-content:space-between;align-items:end;gap:1.2rem 2rem;flex-wrap:wrap;margin-bottom:clamp(24px,3vw,40px)}
.ig-actions{display:flex;align-items:center;gap:1rem 2rem;flex-wrap:wrap}
.ig-handle{transition:color .25s}
.ig-handle:hover,.ig-handle:focus-visible{color:var(--acid)}
.ig-toggle{background:none;border:1px solid var(--line-dark);color:var(--paper);padding:.65rem .9rem;font:600 .7rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;cursor:pointer;transition:border-color .2s}
.ig-toggle:hover{border-color:var(--paper)}
.ig-toggle[hidden]{display:none}
.ig-strip{overflow-x:auto;scrollbar-width:none;outline:0}
.ig-strip::-webkit-scrollbar{display:none}
.ig-track{list-style:none;margin:0;padding:0 var(--gutter,16px);display:flex;gap:12px;width:max-content}
.ig-track li{flex:none;width:clamp(200px,22vw,300px)}
.ig-track a{display:block;position:relative;aspect-ratio:1;background:var(--forest);overflow:hidden;outline-offset:-3px}
.ig-track img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .6s var(--ease)}
.ig-track a:hover img{transform:scale(1.04)}
.ig-cap{position:absolute;left:0;right:0;bottom:0;padding:.7rem .85rem;background:var(--acid);color:var(--ink);font:600 .7rem/1.35 var(--sans);letter-spacing:.06em;text-transform:uppercase;transform:translateY(101%);transition:transform .35s var(--ease)}
.ig-track a:hover .ig-cap,.ig-track a:focus-visible .ig-cap{transform:none}
.ig-strip.loop{overflow:hidden}
.ig-strip.loop .ig-track{padding:0;animation:ig-scroll calc(var(--n,8)*6s) linear infinite}
.ig-strip.loop:hover .ig-track,.ig-strip.loop:focus-within .ig-track,.ig.paused .ig-track{animation-play-state:paused}
@keyframes ig-scroll{to{transform:translateX(calc(-50% - 6px))}}
@media (prefers-reduced-motion:reduce){.ig-strip.loop .ig-track{animation:none}}

/* ===== work.html ===== */

/* ---------- work page ---------- */
.w-head{padding:calc(var(--space)*.9 + 40px) 0 clamp(40px,5vw,72px)}
.w-head h1{font:500 clamp(4rem,14vw,13rem)/.82 var(--sans);letter-spacing:-.06em;margin:.6rem 0 0}
.w-head-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:2rem;align-items:end}
.w-head .lede{margin:0;max-width:34ch;font:500 clamp(1.1rem,1.6vw,1.4rem)/1.35 var(--sans);letter-spacing:-.015em;color:var(--fog)}
.w-head .lede b{color:var(--paper);font-weight:500}
@media (max-width:760px){.w-head-grid{grid-template-columns:1fr}}

/* featured: split block */
.feat{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr)}
.feat-media{position:relative;display:block;width:100%;padding:0;border:0;background:var(--forest);cursor:pointer;min-height:clamp(320px,38vw,620px);color:var(--fog)}
.feat-media img{position:absolute;z-index:1;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.8);transition:transform 1.2s var(--ease),filter .6s}
.feat-media:hover img{transform:scale(1.03);filter:saturate(1)}
.feat-media .sq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%)}
.feat-media::after{content:"Pin Kings";position:absolute;z-index:0;left:16px;bottom:14px;font:500 .68rem/1.3 var(--mono);letter-spacing:.08em;text-transform:uppercase}
.feat-panel{padding:clamp(28px,4vw,64px);display:grid;gap:1.4rem;align-content:center}
.feat-panel h2{font:500 clamp(3rem,6vw,6rem)/.9 var(--sans);letter-spacing:-.055em;margin:0}
.badge{display:inline-block;background:var(--ink);color:var(--acid);font:600 .7rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.55rem .75rem;justify-self:start}
.meta{margin:0;border-top:1px solid currentColor}
.meta div{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid rgba(11,11,10,.22)}
.meta dt{color:rgba(11,11,10,.66)}
.meta dd{margin:0;font-weight:600;text-align:right}
@media (max-width:900px){.feat{grid-template-columns:1fr}.feat-media{min-height:0;aspect-ratio:16/9}}

/* filters */
.w-body [id]{scroll-margin-top:calc(env(safe-area-inset-top,0px) + 136px)}
.fbar{position:sticky;top:calc(env(safe-area-inset-top,0px) + 68px);z-index:20;background:var(--ink);border-bottom:1px solid var(--line-dark)}
.fbar .wrap{display:flex;gap:0;overflow-x:auto;scrollbar-width:none;padding-block:0}
.fbar .wrap::-webkit-scrollbar{display:none}
.w-body.filtered .feat,.w-body.filtered .trio{display:none}
.fbtn{flex:none;background:none;border:0;border-right:1px solid var(--line-dark);color:var(--fog);cursor:pointer;padding:1.15rem 1.3rem;font:600 .74rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;display:inline-flex;gap:.6rem;align-items:center;transition:background .2s,color .2s}
.fbtn:first-child{border-left:1px solid var(--line-dark)}
.fbtn span{font:500 .7rem/1 var(--mono);color:inherit;opacity:.8}
.fbtn:hover{color:var(--paper)}
.fbtn.on{background:var(--acid);color:var(--ink)}

/* grid */
.archive{padding-block:clamp(40px,5vw,72px) var(--space)}
.grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(40px,4.5vw,64px) clamp(16px,1.8vw,28px)}
.card{display:grid;gap:.75rem;align-content:start;min-width:0}
.card[hidden]{display:none}
.card-play{display:block;width:100%;padding:0;border:0;background:none;color:inherit;cursor:pointer;text-align:left}
div.card-play{cursor:default}
.card .frame{display:block;--ar:16/9}
.card .frame img{filter:saturate(.75)}
.card-play:hover .frame img,.card-play:focus-visible .frame img{transform:scale(1.035);filter:saturate(1)}
.sq{display:grid;place-items:center;width:64px;height:64px;background:var(--acid);z-index:2;opacity:0;transition:opacity .3s,transform .4s var(--ease)}
.sq::before{content:"";border-left:16px solid var(--ink);border-top:10px solid transparent;border-bottom:10px solid transparent;margin-left:5px}
.card .sq{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%) scale(.85)}
.card-play:hover .sq,.card-play:focus-visible .sq{opacity:1;transform:translate(-50%,-50%) scale(1)}
.feat-media .sq{opacity:1;width:clamp(84px,8vw,120px);height:clamp(84px,8vw,120px)}
.feat-media .sq::before{border-left-width:24px;border-top-width:15px;border-bottom-width:15px;margin-left:7px}
@media (hover:none){.card .sq{opacity:1;transform:translate(-50%,-50%) scale(.75)}}
div.card-play .sq{display:none}
.soon{position:absolute;z-index:2;top:12px;left:12px;background:var(--ink);color:var(--paper);font:600 .68rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.5rem .65rem;border:1px solid var(--line-dark)}
.card .fmt{margin:0;color:var(--fog);font-size:.92rem}
.card .h-md{transition:transform .45s var(--ease)}
.card:hover .h-md{transform:translateX(6px)}
.empty{padding:3rem 0;color:var(--fog)}
@media (max-width:900px){.grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.grid{grid-template-columns:1fr}}

/* featured trio */
.trio{background:var(--ink-2);padding-block:var(--space)}
.trio .grid{grid-template-columns:repeat(3,minmax(0,1fr))}
@media (max-width:900px){.trio .grid{grid-template-columns:1fr}}

/* cta block */
.cta-blk{padding-block:var(--space)}
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end}
.cta-grid p{margin:0;max-width:36ch;font-size:1.08rem}
@media (max-width:760px){.cta-grid{grid-template-columns:1fr}}

/* player */
.lb{position:fixed;inset:0;z-index:70;background:var(--ink);display:grid;grid-template-rows:auto 1fr;padding:calc(env(safe-area-inset-top,0px) + 16px) var(--gutter) calc(env(safe-area-inset-bottom,0px) + 24px);gap:16px}
.lb[hidden]{display:none}
.lb-top{display:flex;justify-content:space-between;align-items:center;gap:1rem}
.lb-close{background:var(--acid);color:var(--ink);border:0;cursor:pointer;font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;padding:.75rem 1rem}
.lb-stage{display:grid;place-items:center;min-height:0}
.lb-frame{position:relative;width:min(100%,calc((100svh - 140px)*1.7778));aspect-ratio:16/9;background:var(--forest);display:grid;place-items:center}
.lb-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.lb-frame p{margin:0;padding:1rem;text-align:center;color:var(--fog);font:500 .7rem/1.4 var(--mono);letter-spacing:.08em;text-transform:uppercase}

/* ===== stage.html ===== */

/* ---------- stage page ---------- */
.s-hero{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);min-height:max(600px,92svh)}
.s-hero-copy{padding:calc(var(--space)*.6 + 70px) var(--gutter) var(--gutter);display:flex;flex-direction:column;justify-content:flex-end;gap:1.6rem}
.s-hero h1{font:500 clamp(3.6rem,8.4vw,8.4rem)/.86 var(--sans);letter-spacing:-.06em;margin:0}
.s-hero h1 .n{color:var(--acid)}
.s-hero .lede{margin:0;max-width:34ch;font:500 clamp(1.08rem,1.5vw,1.3rem)/1.4 var(--sans);color:var(--fog)}
.s-hero .lede b{color:var(--paper);font-weight:500}
.s-hero .frame{aspect-ratio:auto;min-height:100%}
.numbers{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.numbers div{padding:clamp(22px,2.6vw,40px) var(--gutter);border-right:1px solid rgba(11,11,10,.25);min-width:0}
.numbers div:last-child{border-right:0}
.numbers dt{font:500 clamp(2rem,4.2vw,4rem)/1 var(--sans);letter-spacing:-.05em}
.numbers dd{margin:.6rem 0 0;color:rgba(11,11,10,.7);font-weight:500}
@media (max-width:860px){.s-hero{grid-template-columns:1fr}.s-hero .frame{min-height:0;aspect-ratio:4/3}.numbers{grid-template-columns:1fr 1fr}.numbers div:nth-child(2){border-right:0}.numbers div:nth-child(-n+2){border-bottom:1px solid rgba(11,11,10,.25)}}

.floor{padding-block:var(--space)}
.floor-grid{display:grid;grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:clamp(28px,4vw,72px);align-items:start}
.floor .plan{background:var(--forest);border:1px solid var(--line-dark);padding:clamp(10px,1.6vw,24px)}
.floor .plan svg{display:block;width:100%;height:auto}
.floor-side{position:sticky;top:110px;display:grid;gap:1.6rem}
.legend{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper)}
.legend li{display:grid;grid-template-columns:6.4rem 1fr;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line-dark);font-size:.95rem}
.legend b{font:500 .72rem/1.6 var(--mono);color:var(--acid);letter-spacing:.04em}
.note{margin:0;color:var(--fog);font-size:.9rem}
.setups{display:flex;flex-wrap:wrap;align-items:center;gap:.8rem 1.2rem;margin-bottom:1rem}
.sbtns{display:flex;flex-wrap:wrap;border-top:1px solid var(--line-dark);border-left:1px solid var(--line-dark)}
.sbtn{background:none;border:0;border-right:1px solid var(--line-dark);border-bottom:1px solid var(--line-dark);color:var(--fog);cursor:pointer;padding:.85rem 1rem;font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase;transition:background .2s,color .2s}
.sbtn:hover{color:var(--paper)}
.sbtn.on{background:var(--acid);color:var(--ink)}
.plan .setup{display:none}
.plan[data-show="music"] [data-setup="music"],.plan[data-show="commercial"] [data-setup="commercial"],.plan[data-show="con"] [data-setup="con"],.plan[data-show="tour"] [data-setup="tour"]{display:inline}
.plan[data-show]:not([data-show="empty"]) .plan-title{display:none}
.snotes .note:not([data-note="empty"]){color:rgba(238,233,222,.88);font-size:1rem}
.snotes .note b{color:var(--acid);font-weight:500}
@media (max-width:600px){.sbtn{padding:.8rem .75rem;font-size:.68rem}}
@media (max-width:900px){.floor-grid{grid-template-columns:1fr}.floor-side{position:static}}

.specs-sec{background:var(--ink-2);padding-block:var(--space)}
.spec-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(28px,3vw,48px) clamp(20px,2.4vw,40px)}
.spec-grp h3{margin:0 0 .9rem;color:var(--acid)}
.spec-grp dl{margin:0;border-top:1px solid var(--paper)}
.spec-grp dl div{display:flex;justify-content:space-between;gap:1rem;padding:.75rem 0;border-bottom:1px solid var(--line-dark)}
.spec-grp dt{color:var(--fog);flex:none}
.spec-grp dd{margin:0;font-weight:500;text-align:right}
@media (max-width:1000px){.spec-grid{grid-template-columns:1fr 1fr}}
@media (max-width:600px){.spec-grid{grid-template-columns:1fr}}

.uses-sec{padding-block:var(--space)}
.use-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--line-dark)}
.use-grid article{padding:clamp(22px,2.4vw,36px);min-height:clamp(200px,17vw,260px);display:grid;align-content:space-between;gap:1.4rem;background:var(--ink-2);color:var(--paper)}
.use-grid article:nth-child(odd){background:var(--acid);color:var(--ink)}
.use-grid h3{font:500 clamp(1.6rem,2.4vw,2.3rem)/1 var(--sans);letter-spacing:-.04em;margin:0}
.use-grid p{margin:0;font-size:.95rem;opacity:.8}
@media (max-width:900px){.use-grid{grid-template-columns:1fr 1fr}.use-grid article:nth-child(n){background:var(--ink-2);color:var(--paper)}.use-grid article:nth-child(4n+1),.use-grid article:nth-child(4n){background:var(--acid);color:var(--ink)}}
@media (max-width:560px){.use-grid{grid-template-columns:1fr}.use-grid article:nth-child(n){background:var(--ink-2);color:var(--paper)}.use-grid article:nth-child(odd){background:var(--acid);color:var(--ink)}}

.gallery{padding-block:0 var(--space)}
.gal{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));grid-auto-flow:dense;gap:clamp(10px,1.2vw,18px)}
.gal .frame{--ar:4/3}
.gal .wide{grid-column:span 2}
.gal .wide .frame{--ar:auto;height:100%;min-height:100%}
.gal .tall{grid-row:span 2}
.gal .tall .frame{--ar:auto;height:100%}
.gal figure{margin:0;min-width:0;display:grid}
@media (max-width:760px){.gal{grid-template-columns:1fr 1fr}.gal .tall{grid-row:auto}.gal .tall .frame,.gal .wide .frame{height:auto;--ar:4/3}}

.lot{padding-block:var(--space);border-top:1px solid var(--line-dark)}
.lot-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:clamp(28px,4vw,72px)}
.lot-note{margin:0;max-width:34ch;color:var(--fog);font-size:1.05rem}
.lot-list{list-style:none;margin:0;padding:0;border-top:1px solid var(--paper)}
.lot-list li{padding:.85rem 0;border-bottom:1px solid var(--line-dark);display:flex;gap:.9rem;align-items:baseline}
.lot-list li::before{content:"";width:8px;height:8px;background:var(--acid);flex:none;transform:translateY(-1px)}
@media (max-width:860px){.lot-grid{grid-template-columns:1fr}}

.book .checks{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.7rem}
.book .checks input{position:absolute;opacity:0;width:1px;height:1px}
.book .checks label{font:600 .7rem/1 var(--sans);letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--ink);padding:.72rem 1rem;cursor:pointer}
.book .checks input:checked+label{background:var(--ink);color:var(--acid)}
.book .checks input:focus-visible+label{outline:2px solid var(--ink);outline-offset:2px}

/* ===== faq.html ===== */
.cta-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end}.cta-grid p{margin:0;max-width:36ch;font-size:1.08rem}@media (max-width:760px){.cta-grid{grid-template-columns:1fr}}

/* ---------- faq page ---------- */
.q-head{padding:calc(var(--space)*.9 + 40px) 0 clamp(36px,5vw,64px)}
.q-head h1{font:500 clamp(3.6rem,12vw,11rem)/.84 var(--sans);letter-spacing:-.06em;margin:.6rem 0 0}
.q-head-grid{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:2rem;align-items:end}
.q-head .lede{margin:0;max-width:36ch;font:500 clamp(1.08rem,1.5vw,1.3rem)/1.4 var(--sans);color:var(--fog)}
.q-search{display:grid;grid-template-columns:auto 1fr auto;align-items:center;gap:1rem;padding:1rem var(--gutter);}
.q-search label{font:600 .72rem/1 var(--sans);letter-spacing:.09em;text-transform:uppercase}
.q-search input{font:500 clamp(1.2rem,2vw,1.7rem)/1.2 var(--sans);letter-spacing:-.02em;border:0;border-bottom:2px solid var(--ink);background:transparent;color:var(--ink);padding:.5rem 0;border-radius:0;width:100%}
.q-search input::placeholder{color:rgba(11,11,10,.45)}
.q-search input:focus{outline:none;border-bottom-width:3px}
.q-count{font:500 .7rem/1 var(--mono);letter-spacing:.06em;text-transform:uppercase}
.q-body{padding-block:clamp(40px,5vw,72px) var(--space)}
.q-grid{display:grid;grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:clamp(24px,4vw,72px);align-items:start}
.q-nav{position:sticky;top:110px;display:grid;gap:0;border-top:1px solid var(--paper)}
.q-nav a{display:flex;justify-content:space-between;gap:1rem;padding:.8rem 0;border-bottom:1px solid var(--line-dark);font:500 .95rem/1.2 var(--sans);color:var(--fog);transition:color .2s,padding .3s var(--ease)}
.q-nav a span{font:500 .7rem/1.6 var(--mono);color:var(--acid)}
.q-nav a:hover{color:var(--paper);padding-left:.4rem}
.q-sec{scroll-margin-top:100px;margin-bottom:clamp(48px,6vw,88px)}
.q-sec[hidden]{display:none}
.q-sec h2{font:500 clamp(2rem,3.6vw,3.2rem)/1 var(--sans);letter-spacing:-.045em;margin:0 0 1.2rem;display:flex;align-items:baseline;gap:1rem}
.q-sec h2 .label{color:var(--acid)}
.q-list{border-top:1px solid var(--paper)}
.q-list details{border-bottom:1px solid var(--line-dark)}
.q-list details[hidden]{display:none}
.q-list summary{list-style:none;cursor:pointer;display:grid;grid-template-columns:1fr auto;gap:1.5rem;align-items:center;padding:1.15rem 0;font:500 clamp(1.1rem,1.6vw,1.4rem)/1.25 var(--sans);letter-spacing:-.02em;transition:color .2s}
.q-list summary::-webkit-details-marker{display:none}
.q-list summary:hover{color:var(--acid)}
.q-list summary .pm{width:36px;height:36px;display:grid;place-items:center;border:1px solid var(--line-dark);position:relative;flex:none}
.q-list summary .pm::before,.q-list summary .pm::after{content:"";position:absolute;width:12px;height:1.5px;background:currentColor}
.q-list summary .pm::after{transform:rotate(90deg);transition:transform .3s var(--ease)}
.q-list details[open] summary .pm{background:var(--acid);border-color:var(--acid);color:var(--ink)}
.q-list details[open] summary .pm::after{transform:rotate(0)}
.q-list .a{padding:0 3.5rem 1.4rem 0;color:rgba(238,233,222,.82);max-width:68ch;font-size:1.02rem}
.q-list .a p{margin:0}
.q-list mark{background:var(--acid);color:var(--ink)}
.q-empty{padding:2rem 0;color:var(--fog)}
.q-empty[hidden]{display:none}
@media (max-width:900px){.q-grid{grid-template-columns:1fr}.q-nav{position:static;grid-template-columns:1fr 1fr;column-gap:1.5rem}.q-head-grid{grid-template-columns:1fr}}
@media (max-width:560px){.q-search{grid-template-columns:1fr}.q-nav{grid-template-columns:1fr}.q-list .a{padding-right:0}}
.q-cta{padding-block:var(--space)}