:root{
  --ink:#0A0A0A; --ink-2:#141317; --ink-3:#1B1826;
  --paper:#F7F7F5; --violet:#5F5199; --violet-soft:#8175B0;
  --gold:#FCCD00; --grey:#93929C;
  --rail:36px; --pad:clamp(20px,5vw,84px);
  --display:"Archivo Black","Arial Black",system-ui,sans-serif;
  --body:"Poppins",system-ui,-apple-system,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{background:var(--ink);color:var(--paper);font-family:var(--body);font-weight:300;overflow-x:hidden;-webkit-font-smoothing:antialiased}
::selection{background:var(--gold);color:var(--ink)}
a{color:inherit;text-decoration:none}
img,video,svg{display:block;max-width:100%}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--gold);outline-offset:3px}

/* ============ TYPE ============ */
.d1{font-family:var(--display);font-size:clamp(2.5rem,10vw,8.2rem);line-height:.88;letter-spacing:-.03em;text-transform:uppercase}
.d2{font-family:var(--display);font-size:clamp(1.95rem,6.6vw,5.1rem);line-height:.93;letter-spacing:-.025em;text-transform:uppercase}
.d3{font-family:var(--display);font-size:clamp(1.3rem,3.4vw,2.4rem);line-height:1;letter-spacing:-.02em;text-transform:uppercase}
.d4{font-family:var(--display);font-size:clamp(1rem,2vw,1.35rem);line-height:1.08;letter-spacing:-.01em;text-transform:uppercase}
.lede{font-size:clamp(.98rem,1.4vw,1.22rem);line-height:1.6;color:#c6c5cf;max-width:62ch;font-weight:300}
.body-t{font-size:clamp(.92rem,1.2vw,1.02rem);line-height:1.72;color:#b3b2bd;max-width:58ch}
.slate{font-size:.64rem;letter-spacing:.26em;color:var(--grey);font-weight:500;font-feature-settings:"tnum"}
.gold{color:var(--gold)} .vio{color:var(--violet-soft)}
.wrap{padding:clamp(64px,9vh,130px) var(--pad) clamp(64px,9vh,130px) calc(var(--pad) + var(--rail))}
.wrap-tight{padding-top:clamp(34px,5vh,64px)}
.paper{background:var(--paper);color:var(--ink)}
.paper .lede{color:#3f3e49} .paper .slate{color:#5c5b66} .paper .body-t{color:#4a4954}

/* ============ CHROME ============ */
.grain{position:fixed;inset:-120px;z-index:60;pointer-events:none;opacity:.15;mix-blend-mode:overlay;
 background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");
 animation:gm 1.1s steps(3) infinite}
@keyframes gm{0%{transform:translate(0,0)}33%{transform:translate(-14px,8px)}66%{transform:translate(9px,-11px)}100%{transform:translate(0,0)}}

#loader{position:fixed;inset:0;z-index:200;background:var(--ink);display:grid;place-items:center;overflow:hidden}
#loader .lmask{overflow:hidden;text-align:center}
#loader .lmark{font-family:var(--display);font-size:clamp(2.6rem,13vw,8rem);letter-spacing:-.04em;line-height:.9;transform:translateY(105%);animation:lup .9s cubic-bezier(.16,1,.3,1) .1s forwards}
@keyframes lup{to{transform:translateY(0)}}
#loader .lsub{margin-top:16px;opacity:0;animation:lf .6s ease .8s forwards;text-align:center}
@keyframes lf{to{opacity:1}}
#loader .lline{position:absolute;left:var(--pad);right:var(--pad);bottom:76px;height:1px;background:rgba(247,247,245,.16)}
#loader .lline i{position:absolute;inset:0 auto 0 0;width:0;background:var(--gold);display:block}
#loader .lbar{position:absolute;left:var(--pad);right:var(--pad);bottom:42px;display:flex;justify-content:space-between}
#loader.done{transform:translateY(-101%);transition:transform .95s cubic-bezier(.76,0,.24,1)}

#curtain{position:fixed;inset:0;z-index:150;pointer-events:none;display:flex}
#curtain .p{flex:1;background:var(--ink-3);transform:scaleY(0);transform-origin:bottom;transition:transform .5s cubic-bezier(.76,0,.24,1)}
#curtain .p:nth-child(2){transition-delay:.05s}#curtain .p:nth-child(3){transition-delay:.1s}
#curtain .p:nth-child(4){transition-delay:.15s}#curtain .p:nth-child(5){transition-delay:.2s}
#curtain.in .p{transform:scaleY(1);transform-origin:bottom}
#curtain.out .p{transform:scaleY(0);transform-origin:top}
#curtain .cmark{position:absolute;inset:0;display:grid;place-items:center;font-family:var(--display);font-size:clamp(1rem,3vw,2rem);
 letter-spacing:-.02em;color:var(--gold);opacity:0;transition:opacity .3s}
#curtain.in .cmark{opacity:1}

#rail{position:fixed;left:0;top:0;bottom:0;width:var(--rail);z-index:50;border-right:1px solid rgba(147,146,156,.18);
 display:flex;flex-direction:column;justify-content:space-between;align-items:center;padding:96px 0 22px;pointer-events:none;mix-blend-mode:difference}
#rail .tc{writing-mode:vertical-rl;font-size:.58rem;letter-spacing:.3em;color:var(--grey);font-feature-settings:"tnum"}
#rail .prog{flex:1;width:1px;background:rgba(147,146,156,.25);margin:18px 0;position:relative}
#rail .prog i{position:absolute;top:0;left:-1px;width:3px;background:var(--gold);height:0}
@media(max-width:900px){#rail{display:none}:root{--rail:0px}}

#cur,#curd{position:fixed;z-index:120;pointer-events:none;border-radius:50%;left:0;top:0}
#cur{width:6px;height:6px;background:var(--gold);margin:-3px 0 0 -3px}
#curd{width:38px;height:38px;border:1px solid rgba(247,247,245,.45);margin:-19px 0 0 -19px;transition:width .3s,height .3s,margin .3s,background .3s,border-color .3s}
#curd.grow{width:88px;height:88px;margin:-44px 0 0 -44px;background:rgba(252,205,0,.14);border-color:var(--gold)}
#curd .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:.54rem;letter-spacing:.16em;opacity:0;transition:opacity .25s;color:var(--gold);font-weight:600}
#curd.grow .lbl{opacity:1}
@media(hover:none),(max-width:900px){#cur,#curd{display:none}}

/* ============ NAV ============ */
header{position:fixed;top:0;left:var(--rail);right:0;z-index:90;padding:16px var(--pad);display:flex;align-items:center;justify-content:space-between;gap:20px;
 transition:transform .5s cubic-bezier(.16,1,.3,1),background .4s,border-color .4s;border-bottom:1px solid transparent}
header.hide{transform:translateY(-115%)}
header.solid{background:rgba(10,10,10,.74);backdrop-filter:blur(14px);border-bottom-color:rgba(147,146,156,.16)}
header.on-paper:not(.solid) .brand,header.on-paper:not(.solid) .links a{color:var(--ink)}
header.on-paper:not(.solid) .navcta{border-color:rgba(10,10,10,.4);color:var(--ink)}
header.on-paper:not(.solid) .burger{border-color:rgba(10,10,10,.35)}
header.on-paper:not(.solid) .burger i{background:var(--ink)}
.brand{font-family:var(--display);font-size:1.05rem;letter-spacing:-.02em;display:flex;align-items:center;gap:8px;transition:color .4s}
.brand .dot{width:7px;height:7px;background:var(--gold);border-radius:50%}
nav.links{display:flex;gap:24px;font-size:.72rem;letter-spacing:.16em;font-weight:500;color:#d6d5dc}
nav.links a{position:relative;padding:4px 0;transition:color .4s}
nav.links a::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:0;background:var(--gold);transition:width .35s cubic-bezier(.16,1,.3,1)}
nav.links a:hover::after,nav.links a.cur::after{width:100%}
nav.links a.cur{color:var(--gold)}
.navcta{border:1px solid rgba(247,247,245,.35);padding:11px 18px;font-size:.68rem;letter-spacing:.16em;font-weight:600;position:relative;overflow:hidden;isolation:isolate;transition:color .3s,border-color .3s}
.navcta::before{content:"";position:absolute;inset:0;background:var(--gold);transform:translateY(101%);transition:transform .45s cubic-bezier(.16,1,.3,1);z-index:-1}
.navcta:hover{color:var(--ink);border-color:var(--gold)}
.navcta:hover::before{transform:translateY(0)}
.burger{display:none;width:44px;height:44px;border:1px solid rgba(247,247,245,.3);background:none;color:var(--paper);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:5px;z-index:2}
.burger i{width:16px;height:1.5px;background:var(--paper);transition:.35s}
.burger.on i:nth-child(1){transform:translateY(3.2px) rotate(45deg)}
.burger.on i:nth-child(2){transform:translateY(-3.2px) rotate(-45deg)}
.burger.on{border-color:rgba(247,247,245,.3)!important}
.burger.on i{background:var(--paper)!important}

/* mobile nav */
#mnav{position:fixed;inset:0;z-index:85;background:var(--ink);transform:translateY(-101%);transition:transform .7s cubic-bezier(.76,0,.24,1);
 display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 30px;overflow-y:auto}
#mnav.open{transform:translateY(0)}
#mnav .mglow{position:absolute;right:-30vw;top:-10vh;width:90vw;height:90vw;border-radius:50%;background:radial-gradient(circle,rgba(95,81,153,.5),transparent 68%);filter:blur(24px)}
#mnav .ml{position:relative;display:block;font-family:var(--display);font-size:clamp(2rem,10vw,3.4rem);text-transform:uppercase;letter-spacing:-.03em;
 padding:10px 0;border-bottom:1px solid rgba(147,146,156,.18);overflow:hidden}
.alp-js #mnav .ml span{display:block;transform:translateY(110%);transition:transform .6s cubic-bezier(.16,1,.3,1)}
.alp-js #mnav.open .ml span{transform:translateY(0)}
#mnav.open .ml:nth-child(2) span{transition-delay:.06s}#mnav.open .ml:nth-child(3) span{transition-delay:.12s}
#mnav.open .ml:nth-child(4) span{transition-delay:.18s}#mnav.open .ml:nth-child(5) span{transition-delay:.24s}
#mnav.open .ml:nth-child(6) span{transition-delay:.3s}#mnav.open .ml:nth-child(7) span{transition-delay:.36s}
#mnav .ml em{font-style:normal;font-size:.6rem;letter-spacing:.2em;color:var(--gold);vertical-align:super;font-family:var(--body);margin-left:8px}
#mnav .mfoot{position:relative;margin-top:32px;display:grid;gap:14px}
#mnav .mfoot .btn{width:100%;justify-content:space-between}
#mnav .msoc{display:flex;gap:18px;font-size:.7rem;letter-spacing:.16em;color:var(--grey)}
@media(max-width:900px){nav.links,header .navcta{display:none}.burger{display:flex}}

/* ============ BUTTONS ============ */
.btn{display:inline-flex;align-items:center;gap:14px;background:var(--gold);color:var(--ink);font-family:var(--display);
 font-size:.82rem;letter-spacing:.02em;text-transform:uppercase;padding:19px 28px;position:relative;overflow:hidden;isolation:isolate;border:none;cursor:pointer}
.btn::before{content:"";position:absolute;inset:0;background:var(--violet);transform:translateY(101%);transition:transform .5s cubic-bezier(.16,1,.3,1);z-index:-1}
.btn:hover{color:var(--paper)}.btn:hover::before{transform:translateY(0)}
.arw{width:22px;height:1.6px;background:currentColor;position:relative;flex:0 0 auto}
.arw::after{content:"";position:absolute;right:-1px;top:-3.2px;width:8px;height:8px;border-top:1.6px solid currentColor;border-right:1.6px solid currentColor;transform:rotate(45deg)}
.btn-ghost{background:none;color:var(--paper);border:1px solid rgba(247,247,245,.32)}
.btn-ghost::before{background:var(--paper)}.btn-ghost:hover{color:var(--ink)}
.paper .btn-ghost{color:var(--ink);border-color:rgba(10,10,10,.3)}
.paper .btn-ghost::before{background:var(--ink)}.paper .btn-ghost:hover{color:var(--paper)}
.tlink{display:inline-flex;align-items:center;gap:10px;font-size:.72rem;letter-spacing:.16em;font-weight:500;color:var(--gold);padding:6px 0;position:relative}
.tlink::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:currentColor;transform:scaleX(.2);transform-origin:left;transition:transform .45s cubic-bezier(.16,1,.3,1)}
.tlink:hover::after{transform:scaleX(1)}

/* ============ SHARED BITS ============ */
.alp-js [data-r]{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .9s cubic-bezier(.16,1,.3,1)}
.alp-js [data-r].vis{opacity:1;transform:none}
.mask{overflow:hidden;display:block}
.alp-js .mask>span{display:block;transform:translateY(110%);opacity:0;transition:transform 1s cubic-bezier(.16,1,.3,1),opacity .7s}
.alp-js .reveal .mask>span{transform:translateY(0);opacity:1}
.alp-js .reveal .mask:nth-child(2)>span{transition-delay:.08s}.alp-js .reveal .mask:nth-child(3)>span{transition-delay:.16s}

.slot{position:relative;overflow:hidden;background:var(--ink-2)}
.slot i{position:absolute;inset:0;background:linear-gradient(150deg,rgba(95,81,153,.75),rgba(10,10,10,.94));transition:transform 1.2s cubic-bezier(.16,1,.3,1),filter .6s}
.slot i::before{content:"";position:absolute;inset:0;background:radial-gradient(62% 52% at 48% 40%,rgba(129,117,176,.6),transparent 72%)}
.slot b{position:absolute;left:12px;bottom:12px;font-size:.54rem;letter-spacing:.2em;color:rgba(247,247,245,.5);font-weight:400}
.slot.alt i{background:linear-gradient(210deg,rgba(129,117,176,.7),rgba(20,19,23,.96))}
.slot.warm i{background:linear-gradient(160deg,rgba(252,205,0,.3),rgba(10,10,10,.95))}
a:hover>.slot i,.hovz:hover .slot i{transform:scale(1.06)}

.pagehead{padding:clamp(120px,20vh,210px) var(--pad) clamp(30px,5vh,58px) calc(var(--pad) + var(--rail));position:relative;overflow:hidden}
.pagehead .halo{position:absolute;right:-18vw;top:-24vh;width:70vw;height:70vw;max-width:900px;max-height:900px;border-radius:50%;
 background:radial-gradient(circle,rgba(95,81,153,.42),transparent 66%);filter:blur(28px)}
.pagehead .in{position:relative}
.pagehead .crumb{display:flex;gap:12px;align-items:center;margin-bottom:20px}
.pagehead .crumb .ln{width:clamp(24px,5vw,64px);height:1px;background:var(--gold)}

.hr{height:1px;background:rgba(147,146,156,.22)}
.paper .hr{background:rgba(10,10,10,.16)}

.ticker{border-top:1px solid rgba(147,146,156,.22);border-bottom:1px solid rgba(147,146,156,.22);overflow:hidden;padding:13px 0;position:relative;z-index:3}
.ticker .track{display:flex;gap:38px;white-space:nowrap;width:max-content;animation:tick 34s linear infinite}
.ticker span{font-family:var(--display);font-size:.86rem;text-transform:uppercase;color:#8b8a94;display:flex;align-items:center;gap:38px}
.ticker span::after{content:"";width:6px;height:6px;background:var(--gold)}
@keyframes tick{to{transform:translateX(-50%)}}

/* CTA block */
.ctablock{padding:clamp(80px,14vh,170px) var(--pad);text-align:center;position:relative;overflow:hidden}
.ctablock .halo{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:120vw;height:70vh;background:radial-gradient(closest-side,rgba(95,81,153,.4),transparent 72%);filter:blur(24px)}
.ctablock .in{position:relative}
.ctablock h2{font-family:var(--display);font-size:clamp(2.1rem,9vw,6.6rem);line-height:.9;text-transform:uppercase;letter-spacing:-.035em}
.ctablock .btn{margin-top:clamp(24px,4vh,44px)}

/* footer */
footer{border-top:1px solid rgba(147,146,156,.22);padding:clamp(40px,7vh,72px) var(--pad) 26px calc(var(--pad) + var(--rail))}
footer .fg{display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:clamp(20px,4vw,50px)}
footer h4{font-size:.6rem;letter-spacing:.2em;color:var(--grey);margin-bottom:14px;font-weight:500}
footer ul{list-style:none;display:grid;gap:9px;font-size:.84rem;color:#bfbec8}
footer ul a:hover{color:var(--gold)}
footer .fbrand{font-family:var(--display);font-size:clamp(1.5rem,4vw,2.4rem);letter-spacing:-.03em;line-height:1}
footer .fbrand+p{font-size:.84rem;color:#a2a1ac;margin-top:12px;max-width:34ch;line-height:1.6}
footer .fbot{margin-top:clamp(30px,5vh,58px);padding-top:20px;border-top:1px solid rgba(147,146,156,.18);display:flex;flex-wrap:wrap;gap:14px;justify-content:space-between;font-size:.66rem;letter-spacing:.1em;color:#6f6e79}
@media(max-width:760px){footer .fg{grid-template-columns:1fr 1fr}footer .fbrand{grid-column:1/-1}}

/* ============ PAGE ROUTER ============ */
.page{display:none}
.page.active{display:block}

/* ============ HOME ============ */
#hero{min-height:100svh;padding:0 0 0 var(--rail);display:flex;flex-direction:column;justify-content:flex-end;position:relative;overflow:hidden}
#hero .bg{position:absolute;inset:0;background:radial-gradient(90% 70% at 78% 18%,rgba(95,81,153,.55),transparent 62%),linear-gradient(180deg,#131020,#0A0A0A 72%)}
#hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.42;filter:grayscale(.35) contrast(1.06)}
#hero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7) 0%,rgba(10,10,10,.22) 38%,rgba(10,10,10,.92) 88%)}
#hero .inner{position:relative;padding:clamp(90px,14vh,140px) var(--pad) clamp(26px,5vh,52px)}
#hero .eyeb{display:flex;align-items:center;gap:14px;margin-bottom:clamp(14px,3vh,28px)}
#hero .eyeb .ln{height:1px;width:clamp(28px,7vw,86px);background:var(--gold)}
#hero .promise{margin-top:clamp(16px,3vh,32px);display:flex;flex-wrap:wrap;align-items:center;gap:clamp(9px,2vw,22px);font-family:var(--display);font-size:clamp(.85rem,2.3vw,1.7rem);text-transform:uppercase}
#hero .promise .sep{width:6px;height:6px;background:var(--violet-soft)}
#hero .row{margin-top:clamp(24px,4.5vh,48px);display:flex;flex-wrap:wrap;gap:clamp(18px,4vw,60px);align-items:flex-end;justify-content:space-between}
.stats{display:flex;gap:clamp(20px,4vw,54px)}
.stats .n{font-family:var(--display);font-size:clamp(1.5rem,3.4vw,2.5rem);line-height:1;font-feature-settings:"tnum"}
.stats .n sup{font-size:.4em;vertical-align:super;color:var(--gold)}
.stats p{font-size:.64rem;letter-spacing:.16em;color:var(--grey);margin-top:7px;font-weight:500}
@media(max-width:900px){.stats{width:100%;justify-content:space-between;gap:10px}}

#manifesto .pinwrap{height:260vh;position:relative}
#manifesto .pin{position:sticky;top:0;height:100svh;display:flex;align-items:center;padding:0 var(--pad) 0 calc(var(--pad) + var(--rail));overflow:hidden}
#manifesto .glow{position:absolute;width:70vw;height:70vw;max-width:800px;max-height:800px;right:-16vw;top:-14vw;border-radius:50%;background:radial-gradient(circle,rgba(95,81,153,.42),transparent 66%);filter:blur(30px)}
#manifesto .txt{position:relative;max-width:20ch}
#manifesto h2{font-family:var(--display);font-size:clamp(2rem,7.6vw,5.8rem);line-height:.95;text-transform:uppercase;letter-spacing:-.03em}
.alp-js .w{color:rgba(247,247,245,.14);transition:color .28s}
.alp-js .w.on{color:var(--paper)} .alp-js .w.hi.on{color:var(--gold)}
#manifesto .note{margin-top:clamp(20px,4vh,38px);max-width:44ch;font-size:.98rem;line-height:1.62;color:#b9b8c2}
#manifesto .chaos{position:absolute;right:var(--pad);top:50%;transform:translateY(-50%);width:min(32vw,330px);display:grid;gap:9px}
#manifesto .chaos .v{border:1px solid rgba(147,146,156,.3);padding:11px 13px;font-size:.7rem;letter-spacing:.08em;color:#8b8a94;display:flex;justify-content:space-between;transition:.5s}
#manifesto .chaos.collapsed .v{opacity:.22;transform:translateX(16px) scale(.97)}
#manifesto .chaos .one{border-color:var(--gold);background:var(--gold);color:var(--ink);font-weight:600;opacity:0;transform:translateY(10px);transition:.6s .1s}
#manifesto .chaos.collapsed .one{opacity:1;transform:none}
@media(max-width:1100px){#manifesto .chaos{display:none}#manifesto .txt{max-width:none}}

/* ---- Selected Work: static curated grid (replaces the old pinned horizontal rail) ---- */
#selected-work .sp-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(14px,2vw,26px);
  padding:0 var(--pad) 0 calc(var(--pad) + var(--rail))}
.sp-card{position:relative;display:block}
.sp-card .slot{aspect-ratio:4/5}
.sp-card .idx{position:absolute;top:12px;left:12px;z-index:2;font-family:var(--display);font-size:.72rem;color:var(--gold)}
.sp-card .tag{position:absolute;top:12px;right:12px;z-index:2;font-size:.54rem;letter-spacing:.16em;color:#cfcdd6;border:1px solid rgba(247,247,245,.3);padding:5px 8px}
.sp-card .meta{padding-top:13px;margin-top:13px;border-top:1px solid rgba(147,146,156,.25);display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.sp-card .meta h3{font-family:var(--display);font-size:clamp(.92rem,1.6vw,1.15rem);text-transform:uppercase;letter-spacing:-.01em}
.sp-card .meta p{font-size:.6rem;letter-spacing:.1em;color:var(--grey);text-align:right;white-space:nowrap}
.sp-card .tlink{margin-top:9px;font-size:.64rem}
@media(max-width:1100px){#selected-work .sp-grid{grid-template-columns:repeat(3,1fr)}}
@media(max-width:900px){#selected-work .sp-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){#selected-work .sp-grid{grid-template-columns:1fr;gap:22px}.sp-card .slot{aspect-ratio:3/4}}

.svcgrid{display:grid;grid-template-columns:1fr minmax(260px,36%);gap:clamp(22px,5vw,66px);align-items:start}
.svc{border-top:1px solid rgba(147,146,156,.24);padding:clamp(16px,2.8vh,28px) 0;display:flex;align-items:center;gap:16px;cursor:pointer;transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.svc:last-of-type{border-bottom:1px solid rgba(147,146,156,.24)}
.svc .n{font-size:.6rem;letter-spacing:.2em;color:var(--grey);width:24px;flex:0 0 auto}
.svc h3{font-family:var(--display);font-size:clamp(1.15rem,3.3vw,2.3rem);text-transform:uppercase;letter-spacing:-.02em;color:rgba(247,247,245,.42);transition:color .4s}
.svc p{font-size:.76rem;color:var(--grey);margin-top:5px;display:none}
.svc.on{padding-left:clamp(10px,2vw,24px)}.svc.on h3{color:var(--paper)}.svc.on .n{color:var(--gold)}
.svc .mark{margin-left:auto;width:9px;height:9px;border-radius:50%;background:var(--gold);opacity:0;transform:scale(.4);transition:.4s}
.svc.on .mark{opacity:1;transform:scale(1)}
.svcview{position:sticky;top:110px;aspect-ratio:4/5;background:var(--ink-2);overflow:hidden}
.svcview .f{position:absolute;inset:0;opacity:0;transform:scale(1.08);transition:opacity .7s,transform 1.2s cubic-bezier(.16,1,.3,1)}
.svcview .f.on{opacity:1;transform:scale(1)}
.svcview .f i{position:absolute;inset:0;background:linear-gradient(160deg,rgba(95,81,153,.85),rgba(10,10,10,.9))}
.svcview .f b{position:absolute;left:16px;right:16px;bottom:16px;font-family:var(--display);font-size:1rem;text-transform:uppercase;line-height:1.15}
.svcview .f b em{display:block;font-family:var(--body);font-weight:300;font-size:.74rem;color:#cfcdd6;margin-top:7px;text-transform:none}
@media(max-width:900px){.svcgrid{grid-template-columns:1fr}.svcview{display:none}.svc{display:block;padding:18px 0}.svc h3{color:var(--paper);font-size:1.5rem}.svc p{display:block}.svc .mark{display:none}}

#once .big{font-family:var(--display);font-size:clamp(1.9rem,7vw,5.2rem);line-height:.92;text-transform:uppercase;letter-spacing:-.03em}
#once .big .k{color:var(--violet)}
#once svg{width:100%;height:auto;overflow:visible;margin-top:clamp(26px,5vh,52px)}
#once .node{font-family:var(--display);font-size:11px;text-transform:uppercase;fill:var(--ink)}
.outs{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:1px;background:rgba(10,10,10,.14);margin-top:clamp(24px,4vh,42px);border:1px solid rgba(10,10,10,.14)}
.outs div{background:var(--paper);padding:19px 17px;transition:.6s cubic-bezier(.16,1,.3,1)}.alp-js .outs div{opacity:0;transform:translateY(14px)}
.alp-js .outs div.on{opacity:1;transform:none}
.outs h4{font-family:var(--display);font-size:.9rem;text-transform:uppercase;margin-bottom:6px}
.outs p{font-size:.77rem;color:#55545f;line-height:1.5}

.why-row{display:grid;grid-template-columns:52px 1.05fr 1fr;gap:clamp(14px,3vw,38px);align-items:baseline;padding:clamp(18px,3vh,32px) 0;border-bottom:1px solid rgba(147,146,156,.24);position:relative;overflow:hidden}
.why-row:first-of-type{border-top:1px solid rgba(147,146,156,.24)}
.why-row .k{font-size:.6rem;letter-spacing:.2em;color:var(--gold)}
.why-row h3{font-family:var(--display);font-size:clamp(1rem,2.4vw,1.75rem);text-transform:uppercase}
.why-row p{font-size:.85rem;color:#a9a8b2;line-height:1.6}
.why-row::after{content:"";position:absolute;left:0;bottom:-1px;height:1px;width:0;background:var(--gold);transition:width .7s cubic-bezier(.16,1,.3,1)}
.why-row:hover::after{width:100%}
@media(max-width:760px){.why-row{grid-template-columns:34px 1fr;gap:12px}.why-row p{grid-column:2}}

.procsteps{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:rgba(147,146,156,.24);border-block:1px solid rgba(147,146,156,.24);margin-top:clamp(28px,5vh,50px)}
.procsteps .step{background:var(--ink);padding:clamp(18px,2.5vw,28px);position:relative;overflow:hidden}
.procsteps .bar{position:absolute;top:0;left:0;height:2px;width:100%;background:var(--gold);transition:width .9s cubic-bezier(.16,1,.3,1)}
.alp-js .procsteps .bar{width:0}.alp-js .procsteps .step.on .bar{width:100%}
.procsteps .n{font-family:var(--display);font-size:2.3rem;color:rgba(129,117,176,.5);line-height:1;margin-bottom:12px;transition:color .6s}
.alp-js .procsteps .n{color:rgba(247,247,245,.1)}.alp-js .procsteps .step.on .n{color:rgba(129,117,176,.5)}
.procsteps h3{font-family:var(--display);font-size:.95rem;text-transform:uppercase;margin-bottom:9px}
.procsteps p{font-size:.79rem;color:#a2a1ac;line-height:1.6}
.procsteps .t{font-size:.6rem;letter-spacing:.16em;color:var(--gold);margin-top:12px;display:block}
@media(max-width:900px){.procsteps{grid-template-columns:1fr}}

/* ============ OUR WORK ============ */
.filters-wrap{position:relative;max-width:1400px;margin-inline:auto}
.filters-wrap::after{content:"";position:absolute;top:0;right:0;bottom:0;width:44px;pointer-events:none;
 background:linear-gradient(to right,transparent,var(--ink) 78%);z-index:2}
.filters-wrap::before{content:"\2192";position:absolute;right:8px;top:18px;
 z-index:3;color:var(--grey);font-size:.95rem;pointer-events:none;animation:filtHint 1.6s ease-in-out infinite}
@keyframes filtHint{0%,100%{transform:translateX(0);opacity:.7}50%{transform:translateX(5px);opacity:1}}
.paper .filters-wrap::after{background:linear-gradient(to right,transparent,var(--paper) 78%)}
@media(min-width:761px){.filters-wrap::after,.filters-wrap::before{display:none}}
.filters-wrap.at-end::after,.filters-wrap.at-end::before{opacity:0;transition:opacity .25s}
.filters{display:flex;flex-wrap:nowrap;gap:8px;padding:0 var(--pad) clamp(26px,4vh,48px) calc(var(--pad) + var(--rail));overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.filters::-webkit-scrollbar{display:none}
.filt{border:1px solid rgba(147,146,156,.35);background:none;color:#c3c2cc;font-size:.7rem;letter-spacing:.12em;padding:10px 16px;cursor:pointer;transition:.3s;flex:0 0 auto;white-space:nowrap}
.filt:hover{border-color:var(--paper);color:var(--paper)}
.filt.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.viewtog{margin-left:auto;display:flex;gap:0;border:1px solid rgba(147,146,156,.35)}
.viewtog button{background:none;border:none;color:#8b8a94;font-size:.64rem;letter-spacing:.14em;padding:10px 14px;cursor:pointer}
.viewtog button.on{background:rgba(247,247,245,.1);color:var(--paper)}
@media(max-width:760px){.viewtog{display:none}}

.archive{padding:0 var(--pad) clamp(50px,8vh,90px) calc(var(--pad) + var(--rail));display:grid;gap:clamp(30px,6vh,86px);max-width:1400px;margin-inline:auto}
.pj{position:relative;display:block;min-width:0}
.pj.hidden{display:none}
.pj .slot b{font-size:.55rem}
/* Caption sits on the cover itself (photo or video), bottom-anchored, over its own gradient so
   it stays legible on any image. Tags on top, project name below, matching the reference card. */
.pj .cap{position:absolute;left:0;right:0;bottom:0;z-index:4;padding:28px 18px 18px;
 background:linear-gradient(180deg,rgba(10,10,10,0) 0%,rgba(10,10,10,.35) 45%,rgba(10,10,10,.88) 100%);
 transition:opacity .35s ease,transform .35s ease}
.pj .cap .tags{font-size:.62rem;letter-spacing:.14em;color:#d9d8de;text-transform:uppercase;margin-bottom:6px}
.pj .cap h3{font-family:var(--display);font-size:clamp(1.1rem,2vw,1.6rem);text-transform:uppercase;letter-spacing:-.02em;color:var(--paper)}
@media(hover:hover) and (pointer:fine){
 .pj .cap{opacity:1}
 .pj:hover .cap{opacity:0;transform:translateY(8px)}
}
/* uniform grid: every card the same 4:5 (1080x1350) shape, 3 up on desktop, 1 up on phones */
.archive{grid-template-columns:repeat(3,1fr);gap:clamp(24px,3vw,40px)}
.pj{grid-column:span 1}
.pj .slot{aspect-ratio:4/5}
@media(max-width:900px){
 .archive{grid-template-columns:1fr;gap:34px;padding-left:var(--pad);padding-right:var(--pad)}
 .filters{padding-left:var(--pad)}
}
/* index view: a plain text list (title + tags), no photos/videos */
.archive.index-view{display:block;border-top:1px solid rgba(147,146,156,.25)}
.archive.index-view .pj{display:block;padding:20px 0;border-bottom:1px solid rgba(147,146,156,.2)}
.archive.index-view .pj.hidden{display:none}
.archive.index-view .slot{position:static;display:contents}
.archive.index-view .slot img,.archive.index-view .slot video,.archive.index-view .slot i,.archive.index-view .slot .playbadge{display:none}
.archive.index-view .cap{position:static;background:none;padding:0;display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:12px 16px;opacity:1!important;transform:none!important}
.archive.index-view .cap h3{order:1;font-size:clamp(1.1rem,2.4vw,1.7rem)}
.archive.index-view .cap .tags{order:2;margin:0;text-align:right}

/* ============ PROJECT DETAIL ============ */
.pjhero{height:92svh;min-height:520px;position:relative;overflow:hidden;display:flex;align-items:flex-end}
.pjhero .slot{position:absolute;inset:0}
.pjhero .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.75),rgba(10,10,10,.15) 45%,rgba(10,10,10,.92))}
.pjhero .in{position:relative;padding:0 var(--pad) clamp(28px,5vh,58px) calc(var(--pad) + var(--rail));width:100%}
.pjmeta{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:1px;background:rgba(147,146,156,.25);border-block:1px solid rgba(147,146,156,.25)}
.pjmeta div{background:var(--ink);padding:18px clamp(16px,2vw,24px)}
.pjmeta span{display:block;font-size:.58rem;letter-spacing:.2em;color:var(--grey);margin-bottom:8px}
.pjmeta strong{font-family:var(--display);font-size:.9rem;font-weight:400;text-transform:uppercase;letter-spacing:-.01em}
.twocol{display:grid;grid-template-columns:minmax(200px,.7fr) 1.3fr;gap:clamp(22px,5vw,80px);align-items:start}
.twocol .sticky{position:sticky;top:120px}
@media(max-width:900px){.twocol{grid-template-columns:1fr;gap:18px}.twocol .sticky{position:static}}
.gal{display:grid;grid-template-columns:repeat(12,1fr);gap:clamp(10px,1.6vw,22px);padding:0 var(--pad) 0 calc(var(--pad) + var(--rail))}
.gal .g{grid-column:span 6}
.gal .g.full{grid-column:1/-1}
.gal .g.seven{grid-column:1/span 7}
.gal .g.five{grid-column:8/span 5;align-self:center}
.gal .g.four-off{grid-column:3/span 4}
.gal .g.six-off{grid-column:7/span 6}
.gal .cap{font-size:.6rem;letter-spacing:.16em;color:var(--grey);margin-top:10px}
@media(max-width:900px){.gal .g,.gal .g.seven,.gal .g.five,.gal .g.four-off,.gal .g.six-off{grid-column:1/-1}}
.delivs{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1px;background:rgba(147,146,156,.24);border:1px solid rgba(147,146,156,.24)}
.delivs div{background:var(--ink);padding:22px 20px}
.delivs .n{font-family:var(--display);font-size:1.9rem;line-height:1;color:var(--gold);font-feature-settings:"tnum"}
.delivs p{font-size:.76rem;color:#a5a4ae;margin-top:10px;letter-spacing:.06em}
.placeholder{border:1px dashed rgba(252,205,0,.5);padding:16px 18px;font-size:.76rem;color:var(--gold);letter-spacing:.04em;line-height:1.5}
.pjnext{display:flex;justify-content:space-between;align-items:center;gap:20px;padding:clamp(26px,4vh,44px) var(--pad) clamp(26px,4vh,44px) calc(var(--pad) + var(--rail));border-top:1px solid rgba(147,146,156,.22)}

/* ============ VIDEOS ============ */
.filmstage{position:relative;height:88svh;min-height:480px;overflow:hidden;display:flex;align-items:flex-end}
.filmstage video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
.filmstage .scrim{position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,10,10,.7),rgba(10,10,10,.1) 40%,rgba(10,10,10,.95))}
.filmstage .in{position:relative;padding:0 var(--pad) clamp(26px,5vh,56px) calc(var(--pad) + var(--rail));width:100%}
.playpill{display:inline-flex;align-items:center;gap:12px;border:1px solid rgba(247,247,245,.4);padding:12px 20px;font-size:.68rem;letter-spacing:.18em;margin-bottom:20px}
.playpill .tri{width:0;height:0;border-left:9px solid var(--gold);border-top:6px solid transparent;border-bottom:6px solid transparent}
.filmindex{position:relative}
.filmbg{position:fixed;inset:0;z-index:-1;opacity:0;transition:opacity .6s}
.filmbg.on{opacity:.26}
.filmbg video{width:100%;height:100%;object-fit:cover}
.frow{display:grid;grid-template-columns:52px 1.3fr 1fr auto;gap:clamp(12px,2.5vw,32px);align-items:center;padding:clamp(18px,3vh,30px) 0;border-bottom:1px solid rgba(147,146,156,.22);cursor:pointer;transition:padding-left .5s cubic-bezier(.16,1,.3,1)}
.frow:first-of-type{border-top:1px solid rgba(147,146,156,.22)}
.frow:hover{padding-left:clamp(8px,1.6vw,22px)}
.frow .k{font-size:.6rem;letter-spacing:.18em;color:var(--grey)}
.frow h3{font-family:var(--display);font-size:clamp(1.05rem,2.7vw,2rem);text-transform:uppercase;letter-spacing:-.02em;color:rgba(247,247,245,.62);transition:color .4s}
.frow:hover h3{color:var(--paper)}
.frow .fmt{font-size:.72rem;color:#a5a4ae}
.frow .dur{font-size:.66rem;letter-spacing:.14em;color:var(--gold);text-align:right}
.frow .thumb{display:none}
@media(max-width:900px){
 .frow{grid-template-columns:64px 1fr auto;gap:14px}
 .frow .fmt{grid-column:2;font-size:.68rem}
 .frow .thumb{display:block;grid-row:span 2;aspect-ratio:9/16;width:64px}
 .frow h3{color:var(--paper);font-size:1.1rem}
}
.reelstrip{display:flex;gap:12px;overflow-x:auto;padding:0 var(--pad) 6px calc(var(--pad) + var(--rail));scroll-snap-type:x mandatory}
.reelstrip::-webkit-scrollbar{display:none}
.reelstrip .r{flex:0 0 auto;width:clamp(170px,22vw,240px);scroll-snap-align:start}
.reelstrip .r .slot{aspect-ratio:9/16}
.reelstrip .r h4{font-family:var(--display);font-size:.86rem;text-transform:uppercase;margin-top:12px}
.reelstrip .r p{font-size:.68rem;color:var(--grey);margin-top:5px}

/* ============ SERVICES ============ */
.svcblock{display:grid;grid-template-columns:1fr 1fr;gap:clamp(20px,4vw,70px);align-items:center;padding:clamp(40px,7vh,90px) 0;border-bottom:1px solid rgba(10,10,10,.14)}
.svcblock:last-child{border-bottom:none}
.svcblock.flip .vis-col{order:2}
.svcblock .slot{aspect-ratio:4/3}
.svcblock .num{font-family:var(--display);font-size:clamp(2.4rem,7vw,5rem);line-height:1;color:rgba(10,10,10,.1);letter-spacing:-.04em}
.svcblock h3{font-family:var(--display);font-size:clamp(1.4rem,3.4vw,2.5rem);text-transform:uppercase;letter-spacing:-.025em;margin:8px 0 14px}
.svcblock .body-t{margin-bottom:20px}
.svcblock .kv{display:grid;gap:0;margin-bottom:22px}
.svcblock .kv div{display:grid;grid-template-columns:120px 1fr;gap:14px;padding:11px 0;border-top:1px solid rgba(10,10,10,.14);font-size:.82rem}
.svcblock .kv div:last-child{border-bottom:1px solid rgba(10,10,10,.14)}
.svcblock .kv span{font-size:.6rem;letter-spacing:.18em;color:#6d6c77;padding-top:3px}
@media(max-width:900px){.svcblock{grid-template-columns:1fr;gap:20px}.svcblock.flip .vis-col{order:0}.svcblock .kv div{grid-template-columns:1fr;gap:4px}}

/* ============ LEVELS / PACKAGES ============ */
.tabs{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:clamp(26px,4vh,46px)}
.tab{border:1px solid rgba(147,146,156,.35);background:none;color:#c3c2cc;font-size:.7rem;letter-spacing:.12em;padding:12px 18px;cursor:pointer;transition:.3s}
.tab.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.tabpane{display:none}.tabpane.on{display:block;animation:fadein .5s cubic-bezier(.16,1,.3,1)}
@keyframes fadein{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
.ladder{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:1px;background:rgba(147,146,156,.24);border:1px solid rgba(147,146,156,.24)}
.tier{background:var(--ink);padding:clamp(18px,2.6vw,28px);display:flex;flex-direction:column;transition:background .4s}
.tier:hover{background:#15131f}
.tier .lvl{display:flex;gap:4px;margin-bottom:14px}
.tier .lvl i{width:16px;height:3px;background:rgba(147,146,156,.32)}
.tier .lvl i.f{background:var(--gold)}
.tier h4{font-family:var(--display);font-size:1rem;text-transform:uppercase;margin-bottom:8px}
.tier .for{font-size:.72rem;color:var(--violet-soft);margin-bottom:14px;line-height:1.5}
.tier ul{list-style:none;display:grid;gap:7px;margin-bottom:18px}
.tier li{font-size:.78rem;color:#a9a8b2;line-height:1.45;padding-left:13px;position:relative}
.tier li::before{content:"";position:absolute;left:0;top:8px;width:5px;height:1px;background:var(--gold)}
.tier .tlink{margin-top:auto}
.disc{border-top:1px solid rgba(147,146,156,.24)}
.disc:last-of-type{border-bottom:1px solid rgba(147,146,156,.24)}
.dhead{width:100%;background:none;border:none;color:inherit;text-align:left;cursor:pointer;padding:clamp(18px,3vh,30px) 0;display:flex;align-items:center;gap:16px}
.dhead h3{font-family:var(--display);font-size:clamp(1.1rem,3vw,2.1rem);text-transform:uppercase;letter-spacing:-.02em;flex:1}
.dhead .cnt{font-size:.62rem;letter-spacing:.18em;color:var(--grey)}
.dhead .pm{width:24px;height:24px;position:relative;flex:0 0 auto}
.dhead .pm i{position:absolute;background:var(--gold);transition:.45s cubic-bezier(.16,1,.3,1)}
.dhead .pm i:first-child{left:0;right:0;top:11.5px;height:1.5px}
.dhead .pm i:last-child{top:0;bottom:0;left:11.5px;width:1.5px}
.disc.open .pm i:last-child{transform:scaleY(0)}
.dbody{display:grid;grid-template-rows:0fr;transition:grid-template-rows .6s cubic-bezier(.16,1,.3,1)}
.disc.open .dbody{grid-template-rows:1fr}
.dbody>div{overflow:hidden}
.dbody .ladder{margin-bottom:clamp(20px,3.5vh,34px)}

/* comparison table */
.cmp{width:100%;border-collapse:collapse;font-size:.82rem}
.cmp th,.cmp td{text-align:left;padding:15px 14px;border-bottom:1px solid rgba(147,146,156,.22);vertical-align:top}
.cmp thead th{font-family:var(--display);font-size:.8rem;text-transform:uppercase;letter-spacing:0;border-bottom-color:rgba(147,146,156,.4)}
.cmp tbody th{font-size:.6rem;letter-spacing:.16em;color:var(--grey);font-weight:500;width:130px}
.cmp td{color:#adacb6;line-height:1.5}
.cmp tr:hover td{color:var(--paper)}
.cmpwrap{overflow-x:auto}
.cmpwrap table{min-width:640px}

/* ============ ABOUT ============ */
.pull{font-family:var(--display);font-size:clamp(1.5rem,4.4vw,3.2rem);line-height:1.04;text-transform:uppercase;letter-spacing:-.025em}
.principles{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(147,146,156,.24);border:1px solid rgba(147,146,156,.24);margin-top:clamp(28px,5vh,52px)}
.principles div{background:var(--ink);padding:clamp(22px,3vw,34px)}
.principles h3{font-family:var(--display);font-size:1.05rem;text-transform:uppercase;margin-bottom:12px}
.principles p{font-size:.82rem;color:#a5a4ae;line-height:1.62}
.principles .k{font-size:.6rem;letter-spacing:.2em;color:var(--gold);display:block;margin-bottom:16px}
@media(max-width:900px){.principles{grid-template-columns:1fr}}
.factrow{display:flex;justify-content:space-between;gap:16px;padding:13px 0;border-bottom:1px solid rgba(147,146,156,.22);font-size:.82rem}
.factrow span:first-child{color:var(--grey);letter-spacing:.06em}
.paper .factrow{border-color:rgba(10,10,10,.16)}
.paper .factrow span:first-child{color:#6d6c77}

/* ============ CONTACT ============ */
.qgrid{display:grid;grid-template-columns:minmax(230px,.8fr) 1.2fr;gap:clamp(26px,5vw,76px);align-items:start}
.qform{border:1px solid rgba(147,146,156,.28);padding:clamp(20px,3.2vw,42px);background:rgba(10,10,10,.5)}
.qsteps{display:flex;gap:9px;margin-bottom:clamp(18px,3vh,28px)}
.qsteps i{height:2px;flex:1;background:rgba(147,146,156,.3);position:relative;overflow:hidden}
.qsteps i b{position:absolute;inset:0;background:var(--gold);transform:scaleX(0);transform-origin:left;transition:transform .6s cubic-bezier(.16,1,.3,1)}
.qsteps i.done b{transform:scaleX(1)}
.qpanel{display:none}.qpanel.on{display:block;animation:fadein .5s cubic-bezier(.16,1,.3,1)}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:20px}
.chip{border:1px solid rgba(147,146,156,.4);background:none;color:#cfcdd6;font-size:.75rem;padding:11px 14px;cursor:pointer;transition:.3s}
.chip:hover{border-color:var(--paper);color:var(--paper)}
.chip.on{background:var(--gold);border-color:var(--gold);color:var(--ink);font-weight:600}
.fields{display:grid;grid-template-columns:1fr 1fr;gap:15px}
.f-full{grid-column:1/-1}
.field label{display:block;font-size:.6rem;letter-spacing:.18em;color:var(--grey);margin-bottom:7px;font-weight:500}
.field input,.field select,.field textarea{width:100%;background:transparent;border:none;border-bottom:1px solid rgba(147,146,156,.4);color:var(--paper);font-family:inherit;font-size:.92rem;padding:10px 0;transition:border-color .3s}
.field select{background:var(--ink)}
.field textarea{resize:vertical;min-height:74px}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold)}
.field input::placeholder,.field textarea::placeholder{color:#5f5e69}
.qnav{display:flex;gap:12px;align-items:center;margin-top:24px;flex-wrap:wrap}
.qback{background:none;border:none;color:var(--grey);font-size:.72rem;letter-spacing:.14em;cursor:pointer;padding:10px 0}
.qback:hover{color:var(--paper)}
.qnote{font-size:.68rem;color:var(--grey);margin-top:14px;line-height:1.6}
.qdone{display:none}.qdone.on{display:block;animation:fadein .6s cubic-bezier(.16,1,.3,1)}
.qdone .tick{width:50px;height:50px;border:1.5px solid var(--gold);border-radius:50%;display:grid;place-items:center;margin-bottom:18px;color:var(--gold);font-size:1.25rem}
.wa{display:flex;align-items:center;gap:14px;border:1px solid rgba(147,146,156,.3);padding:16px 18px;margin-top:18px;transition:.35s}
.wa:hover{border-color:var(--gold)}
.wa .dot{width:8px;height:8px;border-radius:50%;background:var(--gold);flex:0 0 auto}
@media(max-width:900px){.qgrid{grid-template-columns:1fr}.fields{grid-template-columns:1fr}}

/* ============ REDUCED MOTION ============ */
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
 [data-r]{opacity:1;transform:none}.mask>span{transform:none;opacity:1}
 .grain{display:none}.w{color:var(--paper)}
 #manifesto .pinwrap,#homework .pinwrap{height:auto}
 #manifesto .pin,#homework .pin{position:static;height:auto;display:block;padding-block:70px}
 #homework .rail{overflow-x:auto;transform:none!important}
 .outs div{opacity:1;transform:none}
 #mnav .ml span{transform:none}
}

/* ============ WORDPRESS INTEGRATION (added) ============ */
/* dark page background even if the theme paints the body white */
html{background:var(--ink)}
html body.alp{background:var(--ink)!important;color:var(--paper)}
/* loader only when JS is on, and only once per browser session */
html:not(.alp-js) #loader,html.alp-seen #loader{display:none}
html:not(.alp-js) #curtain{display:none}
/* keep the page from flashing before the curtain script runs on navigation */
html.alp-arrive #curtain .p{transform:scaleY(1);transform-origin:bottom}
html.alp-arrive #curtain .cmark{opacity:1}
/* real images inside the prototype's image slots */
.slot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.16,1,.3,1)}
.slot.has-img i{opacity:.32;mix-blend-mode:multiply}
.slot.has-img b{display:none}
a:hover>.slot img,.hovz:hover .slot img{transform:scale(1.06)}
.svcview .f img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svcview .f.has-img i{opacity:.62}
.svcview .f b{z-index:2}
/* videos inside slots (reels) */
button.slot{display:block;width:100%;padding:0;border:none;cursor:pointer;color:inherit;font:inherit;text-align:left}
.slot video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.slot.playing i,.slot.playing b{opacity:0}
a.frow,a.pj{color:inherit}
.qerr{color:var(--gold);font-size:.8rem;margin-top:14px}
.qerr[hidden]{display:none}
.btn[disabled]{opacity:.6;cursor:wait}
.field select option{background:var(--ink);color:var(--paper)}
/* accessibility helpers */
.skip{position:fixed;left:12px;top:-60px;z-index:300;background:var(--gold);color:var(--ink);padding:12px 18px;font-family:var(--display);font-size:.8rem;text-transform:uppercase;transition:top .2s}
.skip:focus{top:12px}
.sr-only{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* WordPress admin bar */
.admin-bar header{top:32px}
@media(max-width:782px){.admin-bar header{top:46px}}
/* lighter effects on touch / small screens */
@media(hover:none),(max-width:900px){.grain{display:none}}

/* ============ v0.3 REFINEMENTS ============ */
/* Manifesto: static (no scroll pinning), gold highlight */
#manifesto .pinwrap{height:auto}
#manifesto .pin{position:static;height:auto;display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:clamp(24px,4vw,60px);
 padding:clamp(56px,9vh,110px) var(--pad) clamp(56px,9vh,110px) calc(var(--pad) + var(--rail))}
#manifesto .txt{max-width:none;flex:1 1 420px}
#manifesto h2{font-size:clamp(1.85rem,5.4vw,4.4rem);line-height:1.24}
.hl{background:var(--gold);color:var(--ink);padding:.06em .22em;box-decoration-break:clone;-webkit-box-decoration-break:clone}
#manifesto .chaos{position:static;transform:none;width:min(100%,330px);flex:0 0 auto}
#manifesto .chaos .one{opacity:1;transform:none}

/* Sharper project images: no dimming overlay, only a soft bottom fade; less crop-zoom on phones */
.slot.has-img i{opacity:1;mix-blend-mode:normal;background:linear-gradient(180deg,rgba(10,10,10,0) 60%,rgba(10,10,10,.4))!important}
.slot.has-img i::before{display:none}
/* Video thumbnails keep the richer violet tint (looks intentional, and hides letterbox-free
   crops consistently) instead of the plain bottom fade used for plain photos. */
.reelbtn.has-img i{background:linear-gradient(150deg,rgba(95,81,153,.55),rgba(10,10,10,.65))!important}
.reelbtn.has-img.previewing i{background:linear-gradient(150deg,rgba(95,81,153,.3),rgba(10,10,10,.4))!important}
@media(max-width:560px){.sp-card .slot{aspect-ratio:4/3}}

/* Videos hero: photo behind the film, and no tall empty block on phones */
.filmstage .poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.5}
@media(max-width:900px){.filmstage{height:auto;min-height:0;padding-top:clamp(120px,22vh,170px)}.filmstage .in{padding-top:0}}

/* Buttons in cards */
.btn-sm{padding:15px 22px;font-size:.74rem;gap:12px}
.svcblock .btn{margin-top:6px}
.tier .btn{margin-top:auto;align-self:flex-start}
/* Services detail rows: the value line inherited the row's grid, which doubled the lines */
.svcblock .kv div>div{display:block;grid-template-columns:none;border:0;padding:0;gap:0}
.svcblock .kv div>div:last-child{border:0}
.svcblock .kv span{font-size:.7rem;font-weight:600;color:#5c5b66}

/* Quote form: clearer, catchier fields */
.qform .slate{color:var(--gold);font-weight:600;font-size:.8rem}
.field label{font-size:.78rem;letter-spacing:.12em;color:var(--gold);font-weight:600;margin-bottom:9px}
.field input,.field select,.field textarea{border:1px solid rgba(247,247,245,.32);background:rgba(247,247,245,.06);padding:15px 16px;font-size:1rem;color:var(--paper);border-radius:0}
.field input::placeholder,.field textarea::placeholder{color:#9291a0}
.field input:focus,.field select:focus,.field textarea:focus{outline:none;border-color:var(--gold);background:rgba(252,205,0,.07)}
.chip{font-size:.86rem;padding:12px 16px;border-color:rgba(247,247,245,.42);color:#fff}
.field{margin-bottom:2px}

/* Project page */
.pjgal{columns:var(--cols-d,2);column-gap:clamp(12px,1.6vw,22px)}
.pjg{break-inside:avoid;margin:0 0 clamp(12px,1.6vw,22px)}
.pjg img{display:block;width:100%;height:auto;background:var(--ink-2)}
.pjg-video .slot{width:100%}
.ytbox{position:relative;width:100%;background:#000}
.ytbox iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
@media(max-width:900px) and (min-width:701px){.pjgal{columns:var(--cols-t,2)}}
@media(max-width:700px){.pjgal{columns:var(--cols-m,1)}}

/* keep bottom content clear of the floating call / WhatsApp buttons on phones */
@media(max-width:900px){footer{padding-bottom:110px}}

/* ============ v0.4 NEXT ============ */
/* Never let the page-change curtain trap a slow phone: it lifts by itself even if scripts are late */
@keyframes alpCurtainLift{to{transform:scaleY(0);transform-origin:top}}
@keyframes alpMarkOff{to{opacity:0}}
html.alp-arrive #curtain .p{animation:alpCurtainLift .5s cubic-bezier(.76,0,.24,1) 2.2s forwards}
html.alp-arrive #curtain .cmark{animation:alpMarkOff .2s linear 2.1s forwards}
@media(hover:none),(max-width:900px){#curtain{display:none}#loader.done{transition-duration:.45s}}

/* Play icon on every video thumbnail */
.playbadge{position:absolute;left:50%;top:50%;width:64px;height:64px;margin:-32px 0 0 -32px;border-radius:50%;z-index:3;
 background:rgba(10,10,10,.55);border:1.5px solid var(--gold);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);
 transition:transform .35s cubic-bezier(.16,1,.3,1),background .3s;pointer-events:none}
.playbadge::before{content:"";position:absolute;left:50%;top:50%;margin:-9px 0 0 -6px;border-left:17px solid var(--gold);border-top:10px solid transparent;border-bottom:10px solid transparent}
.reelbtn:hover .playbadge,.reelbtn:focus-visible .playbadge{transform:scale(1.12);background:rgba(252,205,0,.2)}
.slot video{z-index:1;background:var(--ink-2)}
.slot i{z-index:2}
.slot.previewing img{opacity:0;transition:opacity .4s}
/* A card whose cover is a video (not yet started, or paused off-screen) has no poster frame
   and would otherwise show as a stark black box; give it the same violet tint as other video
   thumbnails so it reads as a deliberate cover, not a broken/misaligned image. */
.slot.has-img:has(video) i{background:linear-gradient(150deg,rgba(95,81,153,.55),rgba(10,10,10,.65))!important}
.slot.has-img:has(video.previewing) i,.slot.has-img.previewing:has(video) i{background:linear-gradient(150deg,rgba(95,81,153,.28),rgba(10,10,10,.35))!important}
.slot .playbadge~b{display:none}
.slot[data-lb]{cursor:zoom-in}
.pjg a{display:block;cursor:zoom-in}
.pjg-video .slot,.reelstrip .slot{cursor:pointer}

/* Loader: the full name "ALP STUDIOS" always on one line, sized to fit any screen */
#loader .lmark{white-space:nowrap}
@media(max-width:700px){#loader .lmark{font-size:min(9.4vw,3rem)}#loader .lsub{font-size:.5rem;letter-spacing:.16em;padding:0 16px}}
#curtain .cmark{white-space:nowrap}

/* Project videos: crop thumbnails to the tall frame (not a small picture in a black box) */
.pjg-video .slot img,.reelstrip .slot img{width:100%;height:100%;object-fit:cover}
.slot iframe.ytprev{position:absolute;inset:0;width:100%;height:100%;border:0;pointer-events:none;z-index:1;background:#000}

/* Project gallery videos: real aspect ratio (landscape or vertical Shorts, exactly as uploaded),
   set by JS once the thumbnail's real size is known; 16:9 is only a placeholder before that. */
.pjg-video .slot{aspect-ratio:var(--ar,16/9)}
.pjg-video .slot img.poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}

/* Lightbox: blurred page behind, media at its real size */
#lb{position:fixed;inset:0;z-index:500;display:none;align-items:center;justify-content:center;flex-direction:column;
 background:rgba(10,10,10,.72);backdrop-filter:blur(18px) saturate(1.1);-webkit-backdrop-filter:blur(18px) saturate(1.1);
 opacity:0;transition:opacity .3s}
#lb.open{display:flex;opacity:1;animation:lbIn .3s ease}
@keyframes lbIn{from{opacity:0}to{opacity:1}}
#lb .lb-stage{max-width:94vw;max-height:84vh;display:flex;align-items:center;justify-content:center}
#lb .lb-stage img{display:block;max-width:94vw;max-height:84vh;width:auto;height:auto;object-fit:contain;box-shadow:0 20px 80px rgba(0,0,0,.6)}
#lb .lb-stage video{display:block;max-width:94vw;max-height:84vh;background:#000;box-shadow:0 20px 80px rgba(0,0,0,.6)}
#lb .lb-yt{width:min(94vw,calc(84vh * .5625));height:84vh;max-height:84vh;border:0;background:#000;box-shadow:0 20px 80px rgba(0,0,0,.6)}
@media(min-width:900px){#lb .lb-yt{width:min(94vw,calc(84vh * 1.7778));height:min(84vh,calc(94vw * .5625))}}
#lb .lb-cap{margin-top:14px;font-size:.7rem;letter-spacing:.2em;color:#c6c5cf;text-transform:uppercase;text-align:center;min-height:1em}
#lb button{position:absolute;background:rgba(10,10,10,.5);border:1px solid rgba(247,247,245,.35);color:var(--paper);cursor:pointer;z-index:2;
 width:48px;height:48px;font-size:1.7rem;line-height:1;display:grid;place-items:center;padding:0;transition:background .25s,border-color .25s}
#lb button:hover,#lb button:focus-visible{background:var(--gold);color:var(--ink);border-color:var(--gold)}
#lb .lb-x{top:18px;right:18px}
#lb .lb-p{left:14px;top:50%;margin-top:-24px}
#lb .lb-n{right:14px;top:50%;margin-top:-24px}
#lb .lb-p span,#lb .lb-n span{width:12px;height:12px;border-top:2px solid currentColor;border-left:2px solid currentColor}
#lb .lb-p span{transform:rotate(-45deg);margin-left:4px}
#lb .lb-n span{transform:rotate(135deg);margin-right:4px}
#lb.lb-loading .lb-stage::after{content:"";width:34px;height:34px;border:2px solid rgba(247,247,245,.25);border-top-color:var(--gold);border-radius:50%;animation:lbSpin .8s linear infinite;position:absolute}
@keyframes lbSpin{to{transform:rotate(360deg)}}
html.lb-on .grain,html.lb-on #cur,html.lb-on #curd{display:none}
@media(max-width:700px){#lb .lb-p,#lb .lb-n{top:auto;bottom:22px;margin:0}#lb .lb-p{left:18px}#lb .lb-n{right:18px}#lb .lb-cap{padding:0 70px}}

/* ============ MONTHLY RETAINER PAGE ============ */
.tier.rec{background:var(--ink-3);position:relative}
.tier .rectag{position:absolute;top:-1px;right:-1px;background:var(--gold);color:var(--ink);font-size:.6rem;letter-spacing:.14em;font-weight:700;padding:6px 12px}
.hsteps{display:grid;gap:1px;background:rgba(147,146,156,.24);border:1px solid rgba(147,146,156,.24);margin-top:clamp(28px,5vh,52px)}
.hstep{background:var(--ink);padding:clamp(20px,3vw,32px);display:flex;gap:clamp(18px,3vw,32px);align-items:flex-start}
.hstep .k{font-family:var(--display);font-size:clamp(1.6rem,3vw,2.2rem);color:var(--gold);line-height:1;flex:0 0 auto}
.hstep h3{font-family:var(--display);font-size:1rem;text-transform:uppercase;margin-bottom:6px}
.fitgrid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(147,146,156,.24);border:1px solid rgba(147,146,156,.24);margin-top:clamp(28px,5vh,52px)}
.fitcol{background:var(--ink);padding:clamp(22px,3.4vw,34px)}
.fitcol h4{font-family:var(--display);font-size:.86rem;text-transform:uppercase;margin-bottom:16px}
.fitcol.yes h4{color:var(--gold)}
.fitcol ul{list-style:none;display:grid;gap:11px}
.fitcol li{font-size:.85rem;line-height:1.5;color:#c6c5cf;padding-left:20px;position:relative}
.fitcol.yes li::before{content:"+";position:absolute;left:0;top:0;color:var(--gold);font-weight:700}
.fitcol.no li::before{content:"\2013";position:absolute;left:0;top:0;color:var(--grey)}
.fitcol.no li{color:#8b8a94}
@media(max-width:900px){.fitgrid{grid-template-columns:1fr}.hstep{gap:16px}}
.reassure{border:1px solid rgba(252,205,0,.4);background:rgba(252,205,0,.06);padding:clamp(20px,3vw,30px) clamp(22px,3.4vw,34px);margin-top:clamp(28px,5vh,48px)}
.reassure p{font-size:.92rem;line-height:1.65;color:#e7e6ee;max-width:70ch}
.reassure p strong{color:var(--gold);font-weight:600}