@font-face{font-family:"ZainPC";src:url(../fonts/ZainPC.ttf) format("truetype");font-weight:100 1000;font-display:swap}
/* Layout: a single dark burgundy stage. Hero = name on the right, gold arch holding the L'ART mark on the left; then marquee, about, services, filterable work grid, contact. */
:root{
  --wine-950:#14010550;
  --bg:#1a0207;
  --bg-2:#2a040d;
  --wine:#4a0814;
  --wine-light:#6d1124;
  --gold:#d8b36a;
  --gold-hi:#f4dfa6;
  --gold-lo:#9c7632;
  --ivory:#f5e9d0;
  --dim:rgba(245,233,208,.62);
  --line:rgba(216,179,106,.28);
  --f-ar:"ZainPC","Segoe UI",Tahoma,sans-serif;
  --f-lat:"Cormorant Garamond",Georgia,serif;
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ivory);font-family:var(--f-ar);font-size:18px;line-height:1.8;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));
  overflow-x:hidden;letter-spacing:0;direction:rtl;text-align:start}
body.lock{overflow:hidden}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--gold-hi);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;position:relative;z-index:2}
.lat{font-family:var(--f-lat);letter-spacing:.14em;text-transform:uppercase;direction:ltr;unicode-bidi:isolate}
.gold{background:linear-gradient(100deg,var(--gold-lo) 0%,var(--gold-hi) 30%,var(--gold) 50%,var(--gold-hi) 70%,var(--gold-lo) 100%);background-size:250% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;animation:shine 6s linear infinite}
@keyframes shine{to{background-position:-250% 0}}

/* background layers */
#dust{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.glow{position:fixed;z-index:0;inset:0;pointer-events:none;background:
  radial-gradient(60vmax 60vmax at 85% -10%,rgba(109,17,36,.7),transparent 60%),
  radial-gradient(50vmax 50vmax at -10% 70%,rgba(74,8,20,.8),transparent 60%)}
.grain{position:fixed;inset:0;z-index:50;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/></filter><rect width='160' height='160' filter='url(%23n)'/></svg>")}
#bar{position:fixed;top:0;right:0;height:3px;width:100%;transform-origin:right;transform:scaleX(0);background:linear-gradient(90deg,var(--gold-lo),var(--gold-hi));z-index:90}

/* cursor */
.cur,.cur-dot{position:fixed;top:0;left:0;pointer-events:none;z-index:95;border-radius:50%;display:none}
@media (hover:hover) and (pointer:fine){
  .cur,.cur-dot{display:block}
  .cur{width:42px;height:42px;border:1px solid var(--gold);margin:-21px 0 0 -21px;transition:width .25s,height .25s,margin .25s,background .25s}
  .cur-dot{width:6px;height:6px;background:var(--gold-hi);margin:-3px 0 0 -3px}
  .cur.big{width:84px;height:84px;margin:-42px 0 0 -42px;background:rgba(216,179,106,.14)}
}

/* preloader */
#pre{position:fixed;inset:0;z-index:100;display:grid;place-items:center}
#pre .half{position:absolute;left:0;right:0;height:50.5%;background:var(--bg);transition:transform 1s cubic-bezier(.77,0,.18,1) .15s}
#pre .top{top:0}#pre .bot{bottom:0}
#pre.done .top{transform:translateY(-101%)}#pre.done .bot{transform:translateY(101%)}
#pre .mid{position:relative;z-index:2;display:grid;place-items:center;gap:14px;transition:opacity .4s,transform .5s}
#pre.done .mid{opacity:0;transform:scale(.9)}
#pre svg{width:120px;height:200px;overflow:visible}
#pre rect{fill:none;stroke:var(--gold);stroke-width:1.6;stroke-dasharray:1;stroke-dashoffset:1;animation:draw 1.8s .1s cubic-bezier(.6,0,.2,1) forwards}
@keyframes draw{to{stroke-dashoffset:0}}
#pre .mono{position:absolute;top:62px;font-family:var(--f-lat);font-size:54px;font-weight:700;color:var(--gold-hi);letter-spacing:.04em;animation:fadeup 1s .5s both}
@keyframes fadeup{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
#pre .cnt{font-family:var(--f-lat);font-size:18px;letter-spacing:.3em;color:var(--gold);direction:ltr;font-variant-numeric:tabular-nums}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:60;padding:calc(14px + env(safe-area-inset-top,0px)) max(16px,env(safe-area-inset-left,0px)) 14px max(16px,env(safe-area-inset-right,0px));transition:background .4s,backdrop-filter .4s,transform .5s}
nav.solid{background:rgba(26,2,7,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
nav .in{max-width:1240px;margin:0 auto;display:flex;align-items:center;justify-content:space-between;gap:16px}
.brand{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:700}
.brand i{font-style:normal;font-family:var(--f-lat);font-size:18px;width:40px;height:40px;border:1px solid var(--gold);border-radius:20px;display:grid;place-items:center;color:var(--gold-hi);letter-spacing:.02em}
.links{display:flex;gap:30px;font-size:17px}
.links a{position:relative;padding:4px 0;color:var(--dim);transition:color .3s}
.links a::after{content:"";position:absolute;right:0;bottom:-2px;height:1px;width:0;background:var(--gold);transition:width .35s}
.links a:hover,.links a.on{color:var(--gold-hi)}
.links a:hover::after,.links a.on::after{width:100%}
.pill{display:inline-flex;align-items:center;gap:10px;padding:10px 24px;border:1px solid var(--gold);border-radius:99px;color:var(--gold-hi);font-weight:600;transition:background .3s,color .3s;position:relative;overflow:hidden;will-change:transform}
.pill:hover{background:var(--gold);color:var(--bg)}
.pill.solid{background:linear-gradient(120deg,var(--gold-lo),var(--gold),var(--gold-hi));color:#2a040d;border-color:transparent}
.pill.solid:hover{filter:brightness(1.1);color:#2a040d}
@media(max-width:760px){.links{display:none}}

section{padding-block:clamp(70px,10vw,140px)}
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:14px;margin-bottom:22px}
.eyebrow::before{content:"";width:46px;height:1px;background:var(--gold)}
h2{font-size:clamp(38px,6vw,76px);line-height:1.15;margin:0 0 22px;font-weight:800}

/* hero */
.hero{padding-top:clamp(120px,14vw,170px);padding-bottom:60px}
.hero .grid{display:grid;grid-template-columns:1.15fr .85fr;gap:48px;align-items:center}
.hello{display:flex;align-items:center;gap:14px;color:var(--gold);font-size:20px;margin-bottom:6px}
.hello::before{content:"";width:56px;height:1px;background:var(--gold)}
.mask{display:block;overflow:hidden;padding:.08em 0}
.mask>span{display:block;transform:translateY(115%);transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.loaded .mask>span{transform:none}
h1{margin:0;font-size:clamp(70px,13vw,190px);line-height:1.05;font-weight:900}
h1 .mask:nth-child(2)>span{transition-delay:.12s}
.role{font-size:clamp(24px,3.4vw,44px);font-weight:600;color:var(--ivory);margin:8px 0 0}
.role em{font-style:normal;color:var(--gold-hi)}
.sub{max-width:34ch;color:var(--dim);margin:22px 0 34px;font-size:20px}
.fade{opacity:0;transform:translateY(24px);transition:opacity 1s,transform 1s cubic-bezier(.19,1,.22,1)}
.loaded .fade{opacity:1;transform:none}
.d1{transition-delay:.5s}.d2{transition-delay:.7s}.d3{transition-delay:.9s}
.cta{display:flex;gap:14px;flex-wrap:wrap}
.stage{position:relative;display:grid;place-items:center;perspective:900px;min-height:420px}
.arch{position:relative;width:min(360px,78vw);aspect-ratio:.62;border-radius:999px;overflow:hidden;border:1.5px solid var(--gold);box-shadow:0 40px 90px rgba(0,0,0,.55),0 0 0 10px rgba(216,179,106,.06);transform-style:preserve-3d;clip-path:inset(100% 0 0 0 round 999px);transition:clip-path 1.6s cubic-bezier(.19,1,.22,1) .3s,transform .2s}
.loaded .arch{clip-path:inset(0 0 0 0 round 999px)}
.arch img{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.15);animation:slow 14s ease-in-out infinite alternate}
@keyframes slow{to{transform:scale(1.02)}}
.ring{position:absolute;width:min(360px,78vw);aspect-ratio:.62;border-radius:999px;border:1px solid var(--line);pointer-events:none}
.ring.a{animation:breathe 5s ease-in-out infinite}
.ring.b{animation:breathe 5s ease-in-out -2.5s infinite}
@keyframes breathe{0%,100%{transform:scale(1.06);opacity:.9}50%{transform:scale(1.22);opacity:0}}
.chip{position:absolute;padding:8px 18px;border:1px solid var(--line);border-radius:99px;background:rgba(42,4,13,.75);backdrop-filter:blur(8px);color:var(--gold-hi);font-size:14px;white-space:nowrap;animation:float 6s ease-in-out infinite}
.chip.c1{top:12%;right:-2%}.chip.c2{top:52%;left:-4%;animation-delay:-2s}.chip.c3{bottom:8%;right:4%;animation-delay:-4s}
@keyframes float{50%{transform:translateY(-14px)}}
.scroll{display:flex;align-items:center;gap:12px;color:var(--dim);font-size:14px;margin-top:60px}
.scroll b{width:1px;height:46px;background:linear-gradient(var(--gold),transparent);animation:drip 2s ease-in-out infinite;transform-origin:top}
@keyframes drip{0%{transform:scaleY(0)}60%{transform:scaleY(1)}100%{transform:scaleY(1);opacity:0}}
@media(max-width:860px){.hero .grid{grid-template-columns:1fr}.stage{order:-1;min-height:0;margin-bottom:20px}.arch,.ring{width:min(240px,64vw)}.chip.c1{right:2%}.chip.c2{left:0}}

/* marquee */
.marq{border-block:1px solid var(--line);background:rgba(74,8,20,.35);overflow:hidden;padding:20px 0;position:relative;z-index:2;margin-inline:calc(-1*max(16px,env(safe-area-inset-left,0px)))}
.track{display:flex;width:max-content;gap:0;animation:mq 28s linear infinite}
.marq.rev .track{animation-direction:reverse;animation-duration:34s}
.marq:hover .track{animation-play-state:paused}
.track span{font-size:clamp(28px,4.5vw,54px);font-weight:800;padding:0 28px;white-space:nowrap;display:flex;align-items:center;gap:56px}
.track span::after{content:"✦";font-size:.5em;color:var(--gold)}
.track span.o{color:transparent;-webkit-text-stroke:1px var(--gold)}
@keyframes mq{to{transform:translateX(50%)}}

/* reveal */
.js .rv{opacity:0;transform:translateY(46px);transition:opacity .9s,transform 1.1s cubic-bezier(.19,1,.22,1);transition-delay:var(--d,0s)}
.js .rv.in{opacity:1;transform:none}

.js .card.rv.in{transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,opacity .9s,border-color .4s;transition-delay:0s}
/* about */
.about .grid{display:grid;grid-template-columns:.8fr 1.2fr;gap:60px;align-items:start}
.scrub{font-size:clamp(24px,3vw,38px);line-height:1.7;font-weight:600;margin:0}
.scrub .w{color:rgba(245,233,208,.32);transition:color .5s}
.scrub .w.on{color:var(--ivory)}
.scrub .w.g.on{color:var(--gold-hi)}
.stats{display:flex;gap:40px;margin-top:44px;flex-wrap:wrap}
.stat{border-top:1px solid var(--gold);padding-top:14px;min-width:130px}
.stat b{display:block;font-family:var(--f-lat);font-size:68px;line-height:1;color:var(--gold-hi);font-weight:700;direction:ltr;text-align:right}
.stat span{color:var(--dim);font-size:17px}
@media(max-width:860px){.about .grid{grid-template-columns:1fr;gap:20px}}

/* services */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:18px;margin-top:50px}
.s{position:relative;padding:34px 26px 30px;border:1px solid var(--line);border-radius:28px;background:linear-gradient(160deg,rgba(74,8,20,.6),rgba(26,2,7,.4));overflow:hidden;transition:transform .5s cubic-bezier(.19,1,.22,1),border-color .4s;min-width:0}
.s::before{content:"";position:absolute;inset:auto -30% -60% -30%;height:90%;background:radial-gradient(closest-side,rgba(216,179,106,.35),transparent);opacity:0;transition:opacity .5s,transform .6s;transform:translateY(40%)}
.s:hover{transform:translateY(-10px);border-color:var(--gold)}
.s:hover::before{opacity:1;transform:none}
.s .ic{width:54px;height:54px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;margin-bottom:60px;color:var(--gold-hi);position:relative}
.s .ic svg{width:26px;height:26px;stroke:currentColor;fill:none;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.s h3{margin:0 0 8px;font-size:26px;position:relative}
.s p{margin:0;color:var(--dim);font-size:16px;line-height:1.7;position:relative}
@media(max-width:1000px){.svc{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.svc{grid-template-columns:1fr}.s .ic{margin-bottom:30px}}

/* work */
.head{display:flex;justify-content:space-between;align-items:end;gap:24px;flex-wrap:wrap;margin-bottom:40px}
.filters{display:flex;gap:10px;flex-wrap:wrap}
.f{background:none;border:1px solid var(--line);border-radius:99px;padding:8px 22px;font-size:16px;color:var(--dim);transition:all .3s}
.f:hover{border-color:var(--gold);color:var(--gold-hi)}
.f.on{background:var(--gold);border-color:var(--gold);color:#2a040d;font-weight:700}
.works{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}
.card{position:relative;border-radius:26px;overflow:hidden;aspect-ratio:1;cursor:pointer;border:1px solid var(--line);background:var(--wine);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .25s ease-out,border-color .4s,opacity .5s;padding:0;display:block;width:100%;min-width:0}
.card.hide{display:none}
.card.pop{animation:pop .7s cubic-bezier(.19,1,.22,1) both}
@keyframes pop{from{opacity:0;transform:scale(.88) translateY(30px)}}
.card:hover{border-color:var(--gold)}
.card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1.2s cubic-bezier(.19,1,.22,1)}
.card:hover img{transform:scale(1.08)}
.card .cap{position:absolute;inset:auto 0 0 0;padding:60px 20px 18px;text-align:right;background:linear-gradient(transparent,rgba(20,1,5,.92));transform:translateY(60%);opacity:0;transition:transform .6s cubic-bezier(.19,1,.22,1),opacity .5s}
.card:hover .cap,.card:focus-visible .cap{transform:none;opacity:1}
.cap small{display:block;color:var(--gold);font-size:14px}
.cap strong{font-size:22px;display:block;line-height:1.4}
.card .glare{position:absolute;inset:0;background:radial-gradient(circle at var(--gx,50%) var(--gy,50%),rgba(255,235,180,.28),transparent 45%);opacity:0;transition:opacity .3s;pointer-events:none}
.card:hover .glare{opacity:1}
@media(hover:none){.card .cap{transform:none;opacity:1;padding-top:40px}.cap strong{font-size:18px}}
@media(max-width:900px){.works{grid-template-columns:repeat(2,1fr);gap:14px}}
@media(max-width:480px){.works{gap:10px}.card{border-radius:18px}.card .cap{padding:30px 12px 10px}.cap strong{font-size:15px}.cap small{font-size:12px}}

/* lightbox */
#lb{position:fixed;inset:0;z-index:98;background:rgba(14,1,4,.94);backdrop-filter:blur(10px);display:none;align-items:center;justify-content:center;padding:24px}
#lb.open{display:flex;animation:fadeup .4s both}
#lb figure{margin:0;display:grid;gap:14px;justify-items:center;max-width:min(92vw,820px)}
#lb img{max-width:100%;max-height:78vh;border-radius:20px;border:1px solid var(--gold);box-shadow:0 30px 100px rgba(0,0,0,.6)}
#lb figcaption{text-align:center}
#lb figcaption small{color:var(--gold);display:block;font-size:15px}
#lb figcaption strong{font-size:24px}
.lbb{position:absolute;width:52px;height:52px;border-radius:50%;border:1px solid var(--gold);background:rgba(42,4,13,.7);display:grid;place-items:center;font-size:22px;color:var(--gold-hi);transition:background .3s}
.lbb:hover{background:var(--gold);color:#2a040d}
.lbb.x{top:calc(18px + env(safe-area-inset-top,0px));left:18px}
.lbb.p{right:18px;top:50%}.lbb.n{left:18px;top:50%}
@media(max-width:600px){.lbb.p,.lbb.n{top:auto;bottom:calc(18px + env(safe-area-inset-bottom,0px))}}

/* contact */
.contact{text-align:center;position:relative;overflow:hidden}
.contact .big{font-size:clamp(42px,8vw,112px);font-weight:900;line-height:1.1;margin:0}
.num{display:inline-block;direction:ltr;font-family:var(--f-lat);font-weight:700;font-size:clamp(40px,9vw,120px);letter-spacing:.04em;margin:30px 0 8px;line-height:1.1;user-select:all;font-variant-numeric:lining-nums;max-width:100%;overflow-wrap:anywhere}
.contact .cta{justify-content:center;margin-top:30px}
.orb{position:absolute;inset:50% auto auto 50%;width:min(720px,90vw);aspect-ratio:1;translate:-50% -50%;border-radius:50%;border:1px solid var(--line);z-index:-1;animation:spin 40s linear infinite}
.orb::after{content:"";position:absolute;top:-6px;left:50%;width:12px;height:12px;border-radius:50%;background:var(--gold-hi);box-shadow:0 0 24px 6px var(--gold)}
.orb.o2{width:min(520px,70vw);animation-direction:reverse;animation-duration:28s}
@keyframes spin{to{rotate:360deg}}
footer{border-top:1px solid var(--line);padding:26px 0 40px;display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;color:var(--dim);font-size:15px;position:relative;z-index:2}
.toast{position:fixed;bottom:calc(30px + env(safe-area-inset-bottom,0px));left:50%;translate:-50% 30px;opacity:0;background:var(--gold);color:#2a040d;padding:10px 26px;border-radius:99px;font-weight:700;z-index:99;transition:all .5s cubic-bezier(.19,1,.22,1);pointer-events:none}
.toast.show{opacity:1;translate:-50% 0}


/* ================= 3D design objects ================= */
section,header.hero{position:relative}
.d3{position:absolute;pointer-events:none;z-index:1;perspective:900px;will-change:transform}
.d3>*{transform-style:preserve-3d}
@media(max-width:760px){.d3{opacity:.8;scale:.72}}

/* cube */
.cube{--s:clamp(70px,9vw,120px);width:var(--s);height:var(--s);position:relative;animation:tumble 22s linear infinite}
.cube i{position:absolute;inset:0;border:1.5px solid var(--gold);background:linear-gradient(135deg,rgba(216,179,106,.16),rgba(74,8,20,.25));box-shadow:inset 0 0 26px rgba(216,179,106,.18)}
.cube i:nth-child(1){transform:translateZ(calc(var(--s)/2))}
.cube i:nth-child(2){transform:rotateY(180deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(3){transform:rotateY(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(4){transform:rotateY(-90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(5){transform:rotateX(90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(6){transform:rotateX(-90deg) translateZ(calc(var(--s)/2))}
.cube i:nth-child(1)::after{content:"";position:absolute;inset:22%;border:1px dashed rgba(244,223,166,.55);border-radius:50%}
@keyframes tumble{from{transform:rotateX(0) rotateY(0) rotateZ(0)}to{transform:rotateX(360deg) rotateY(720deg) rotateZ(360deg)}}

/* layers stack (Photoshop-like) */
.layers{width:clamp(90px,11vw,150px);aspect-ratio:1;position:relative;transform:rotateX(58deg) rotateZ(-42deg);animation:lspin 16s ease-in-out infinite}
.layers b{position:absolute;inset:0;border-radius:18px;border:1.5px solid var(--gold);animation:lift 4s ease-in-out infinite}
.layers b:nth-child(1){background:rgba(74,8,20,.85);--z:0px}
.layers b:nth-child(2){background:rgba(216,179,106,.22);--z:26px;animation-delay:-.4s}
.layers b:nth-child(3){background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi));--z:52px;animation-delay:-.8s;box-shadow:0 0 40px rgba(216,179,106,.35)}
.layers b:nth-child(3)::after{content:"";position:absolute;inset:26%;border-radius:50%;border:2px solid #2a040d}
@keyframes lift{0%,100%{transform:translateZ(var(--z))}50%{transform:translateZ(calc(var(--z)*1.8))}}
@keyframes lspin{0%,100%{transform:rotateX(58deg) rotateZ(-42deg)}50%{transform:rotateX(50deg) rotateZ(-62deg)}}

/* pantone swatch fan */
.fan{width:clamp(56px,6.5vw,84px);aspect-ratio:.42;position:relative;animation:sway 9s ease-in-out infinite}
.fan b{position:absolute;inset:0;border-radius:8px;background:#f5e9d0;transform-origin:50% 92%;box-shadow:0 8px 24px rgba(0,0,0,.45);overflow:hidden;animation:spread 6s ease-in-out infinite}
.fan b::before{content:"";position:absolute;inset:6px 6px 32%;border-radius:4px;background:var(--c)}
.fan b::after{content:"";position:absolute;left:8px;right:30%;bottom:16%;height:3px;border-radius:2px;background:rgba(42,4,13,.45);box-shadow:0 7px 0 rgba(42,4,13,.25)}
.fan b:nth-child(1){--c:#2a040d;--r:-48deg}
.fan b:nth-child(2){--c:#6d1124;--r:-24deg}
.fan b:nth-child(3){--c:#9c7632;--r:0deg}
.fan b:nth-child(4){--c:#d8b36a;--r:24deg}
.fan b:nth-child(5){--c:#f4dfa6;--r:48deg}
.fan b:nth-child(6)::before{background:radial-gradient(circle at 50% 92%,transparent 0 0)}
@keyframes spread{0%,100%{transform:rotate(calc(var(--r)*.25)) translateZ(0)}50%{transform:rotate(var(--r)) translateZ(calc(var(--r)*.3))}}
@keyframes sway{0%,100%{transform:rotateY(-25deg) rotateX(12deg)}50%{transform:rotateY(25deg) rotateX(-6deg)}}

/* pen nib (extruded) */
.nib{width:clamp(60px,7vw,96px);aspect-ratio:.7;position:relative;animation:spinY 10s linear infinite}
.nib svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.nib svg:nth-child(1){transform:translateZ(-6px)}.nib svg:nth-child(2){transform:translateZ(-4px)}
.nib svg:nth-child(3){transform:translateZ(-2px)}.nib svg:nth-child(4){transform:translateZ(0)}
.nib svg:nth-child(5){transform:translateZ(2px)}.nib svg:nth-child(6){transform:translateZ(4px)}
.nib svg:nth-child(-n+5) path{fill:#9c7632}
@keyframes spinY{to{transform:rotateY(360deg)}}

/* bezier pen path with handles */
.bez{width:clamp(150px,18vw,240px);aspect-ratio:1.6;animation:wob 12s ease-in-out infinite}
.bez svg{width:100%;height:100%;overflow:visible}
.bez .curve{fill:none;stroke:var(--gold-hi);stroke-width:2.5;stroke-dasharray:420;stroke-dashoffset:420;animation:drawc 6s ease-in-out infinite}
.bez .hdl{stroke:var(--gold);stroke-width:1;opacity:.8}
.bez .anc{fill:var(--bg);stroke:var(--gold-hi);stroke-width:1.6}
.bez .knob{fill:var(--gold-hi)}
@keyframes drawc{0%{stroke-dashoffset:420}45%,70%{stroke-dashoffset:0}100%{stroke-dashoffset:-420}}
@keyframes wob{0%,100%{transform:rotateX(30deg) rotateY(-25deg) rotateZ(-6deg)}50%{transform:rotateX(-12deg) rotateY(25deg) rotateZ(6deg)}}

/* RGB / CMYK orbit */
.orbit{width:clamp(110px,12vw,160px);aspect-ratio:1;position:relative;animation:orb3 14s linear infinite}
.orbit b{position:absolute;inset:18%;border-radius:50%;mix-blend-mode:screen;opacity:.75}
.orbit b:nth-child(1){background:radial-gradient(circle at 35% 30%,#ff8fa8,#6d1124 70%);transform:rotateY(0deg) translateZ(34px)}
.orbit b:nth-child(2){background:radial-gradient(circle at 35% 30%,#fff1c4,#9c7632 70%);transform:rotateY(120deg) translateZ(34px)}
.orbit b:nth-child(3){background:radial-gradient(circle at 35% 30%,#ffd9b0,#b0472f 70%);transform:rotateY(240deg) translateZ(34px)}
@keyframes orb3{from{transform:rotateX(-18deg) rotateY(0)}to{transform:rotateX(-18deg) rotateY(360deg)}}

/* extruded type "Aa" */
.type3{font-family:var(--f-lat);font-weight:700;font-size:clamp(80px,11vw,160px);line-height:1;color:var(--gold-hi);direction:ltr;
  text-shadow:1px 1px 0 #c79c4f,2px 2px 0 #b98d43,3px 3px 0 #a87d38,4px 4px 0 #976d2e,5px 5px 0 #855e26,6px 6px 0 #6d4b1d,7px 7px 0 #4a0814,10px 14px 28px rgba(0,0,0,.6);
  animation:tilt 8s ease-in-out infinite}
@keyframes tilt{0%,100%{transform:rotateY(-28deg) rotateX(8deg)}50%{transform:rotateY(22deg) rotateX(-6deg)}}

/* ================= reviews ================= */
#reviews .head{align-items:center}
.sound{display:inline-flex;align-items:center;gap:10px;background:none;border:1px solid var(--line);border-radius:99px;padding:9px 20px;color:var(--gold-hi);font-size:16px;transition:border-color .3s,background .3s}
.sound:hover{border-color:var(--gold)}
.sound svg{width:20px;height:20px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.sound .eq{display:inline-flex;gap:2px;align-items:end;height:14px}
.sound .eq i{width:3px;background:var(--gold);border-radius:2px;height:4px}
.sound.playing .eq i{animation:eq .8s ease-in-out infinite}
.sound.playing .eq i:nth-child(2){animation-delay:-.3s}.sound.playing .eq i:nth-child(3){animation-delay:-.55s}
@keyframes eq{50%{height:14px}}
.sound.off{color:var(--dim)}.sound.off .eq{display:none}
.shots{columns:3 300px;column-gap:22px;padding:22px 4px 10px}
.shot{break-inside:avoid;margin:0 0 22px!important;position:relative;border-radius:22px;padding:8px;background:linear-gradient(160deg,#3a0712,#14010a);border:1px solid var(--line);box-shadow:0 24px 60px rgba(0,0,0,.45);cursor:zoom-in;
  opacity:0;transform:translateY(40px) scale(.94);transform-origin:50% 100%;transition:opacity .5s,transform .7s cubic-bezier(.34,1.5,.5,1),border-color .4s,box-shadow .4s}
.shot.show{opacity:1;transform:none}
.shot.show:hover{border-color:var(--gold);transform:translateY(-6px);box-shadow:0 34px 80px rgba(0,0,0,.6),0 0 0 5px rgba(216,179,106,.08)}
.shot .scr{border-radius:15px;overflow:hidden;background:#0e0104}
.shot .scr img{width:100%;height:auto;display:block}
.shot .badge{position:absolute;top:-10px;right:-10px;width:30px;height:30px;border-radius:50%;background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi));color:#2a040d;font-weight:800;display:grid;place-items:center;font-size:14px;z-index:3;transform:scale(0);transition:transform .5s cubic-bezier(.34,1.8,.5,1) .2s;box-shadow:0 6px 18px rgba(0,0,0,.4)}
.shot.show .badge{transform:scale(1)}
.f small{font-size:.75em;opacity:.7;margin-inline-start:4px}
.tap{display:none;margin:6px auto 0;}
.tap.show{display:inline-flex}
#lb.noarrows .lbb.p,#lb.noarrows .lbb.n{display:none}

/* ================= work: logo-shaped arches ================= */
.arches{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(18px,3vw,44px);justify-items:center}
.ar{all:unset;box-sizing:border-box;cursor:pointer;display:grid;justify-items:center;gap:16px;width:100%;max-width:360px;text-align:center}
.ar:focus-visible .frame{outline:2px solid var(--gold-hi);outline-offset:6px}
.ar .frame{position:relative;width:100%;aspect-ratio:.62;border-radius:999px;overflow:hidden;border:1.5px solid var(--gold);background:var(--wine);
  box-shadow:0 40px 90px rgba(0,0,0,.5),0 0 0 9px rgba(216,179,106,.05);transform:perspective(900px) rotateX(var(--rx,0deg)) rotateY(var(--ry,0deg));transition:transform .3s ease-out,box-shadow .5s}
.ar:hover .frame{box-shadow:0 50px 110px rgba(0,0,0,.6),0 0 0 9px rgba(216,179,106,.14),0 0 60px rgba(216,179,106,.18)}
.ar .frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transform:scale(1.12);transition:opacity 1.2s ease,transform 6s ease-out}
.ar .frame img.on{opacity:1;transform:scale(1.02)}
.ar .frame::before{content:"";position:absolute;inset:0;z-index:2;background:linear-gradient(180deg,rgba(26,2,7,.05) 40%,rgba(20,1,5,.92));transition:opacity .5s}
.ar .inner{position:absolute;inset:7%;z-index:3;border-radius:999px;border:1px solid rgba(244,223,166,.7);transition:inset .6s cubic-bezier(.19,1,.22,1),border-color .4s}
.ar:hover .inner{inset:4.5%;border-color:var(--gold-hi)}
.ar .lbl{position:absolute;z-index:4;left:0;right:0;bottom:13%;display:grid;gap:4px;justify-items:center;padding:0 14%}
.ar .lbl b{font-family:var(--f-lat);font-weight:700;letter-spacing:.12em;font-size:clamp(20px,2.3vw,32px);line-height:1.1;color:var(--gold-hi);text-transform:uppercase}
.ar .lbl b.ar-t{font-family:var(--f-ar);letter-spacing:0;font-size:clamp(22px,2.4vw,34px)}
.ar .lbl small{color:var(--ivory);opacity:.8;font-size:14px}
.ar .open{position:absolute;z-index:4;top:12%;left:50%;translate:-50% 0;width:54px;height:54px;border-radius:50%;border:1px solid var(--gold);display:grid;place-items:center;background:rgba(26,2,7,.55);backdrop-filter:blur(6px);color:var(--gold-hi);opacity:0;transform:scale(.6);transition:all .5s cubic-bezier(.19,1,.22,1)}
.ar:hover .open,.ar:focus-visible .open{opacity:1;transform:none}
.ar .open svg{width:22px;height:22px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}
.ar .tag{font-size:15px;color:var(--dim)}
.ar:active .frame{scale:.97;transition:scale .15s}
@media(hover:none){.ar .open{opacity:1;transform:none;width:44px;height:44px}}
@media(max-width:900px){.arches{grid-template-columns:repeat(2,1fr)}}
@media(max-width:520px){.ar .lbl{bottom:12%}.ar .lbl small{font-size:12px}.ar{gap:8px}.ar .tag{font-size:13px}}

/* project viewer */
#lb{flex-direction:column;gap:14px}
#lb figure{max-width:min(92vw,900px)}
#lb img{max-height:66vh}
#lbc{letter-spacing:.06em}
#lbn2{font-family:var(--f-lat);color:var(--dim);font-size:15px;direction:ltr}
.thumbs{display:flex;gap:8px;overflow-x:auto;max-width:min(92vw,900px);padding:4px 2px 8px;scrollbar-width:thin;scrollbar-color:var(--gold-lo) transparent}
.thumbs button{flex:0 0 auto;width:58px;height:58px;padding:0;border-radius:12px;overflow:hidden;border:1px solid var(--line);background:none;opacity:.5;transition:opacity .3s,border-color .3s}
.thumbs button.on{opacity:1;border-color:var(--gold-hi)}
.thumbs img{width:100%!important;height:100%!important;object-fit:cover;border:0!important;border-radius:0!important;max-height:none!important;box-shadow:none!important}
#lb.noarrows .thumbs,#lb.noarrows #lbn2{display:none}

/* ================= reviews: flipping card + voice ================= */
.rbox{display:grid;justify-items:center;gap:22px;margin-top:10px}
.rstage{perspective:1600px;width:min(680px,100%)}
.rcard{position:relative;height:clamp(250px,46vw,440px);transform-style:preserve-3d;transition:transform 1s cubic-bezier(.6,.05,.25,1)}
.rface{position:absolute;inset:0;backface-visibility:hidden;-webkit-backface-visibility:hidden;border-radius:30px;padding:12px;border:1.5px solid var(--gold);
  background:linear-gradient(160deg,#3a0712,#14010a);box-shadow:0 40px 90px rgba(0,0,0,.55);cursor:zoom-in}
.rface.back{transform:rotateY(180deg)}
.rface .in{width:100%;height:100%;border-radius:20px;background:#0b141a;display:grid;place-items:center;overflow:hidden}
.rface img{max-width:100%;max-height:100%;object-fit:contain;display:block}
.rface .num{position:absolute;top:-14px;right:22px;padding:4px 14px;border-radius:99px;background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi));color:#2a040d;font:700 14px var(--f-lat);letter-spacing:.1em;direction:ltr;margin:0}
.quote{min-height:3.4em;max-width:640px;text-align:center;font-size:clamp(20px,2.4vw,28px);font-weight:700;color:var(--ivory);line-height:1.6;transition:opacity .4s}
.quote::before,.quote::after{color:var(--gold);font-family:var(--f-lat);font-size:1.4em;line-height:0;vertical-align:-.3em}
.quote::before{content:"”  "}.quote::after{content:"  “"}
.quote .wd{opacity:.3;transition:opacity .25s,color .25s}.quote .wd.on{opacity:1;color:var(--gold-hi)}
.rctrl{display:flex;align-items:center;gap:14px}
.rctrl .lbb{position:static;width:46px;height:46px;font-size:20px}
.dots{display:flex;gap:7px}
.dots i{width:8px;height:8px;border-radius:99px;background:var(--line);transition:all .4s;cursor:pointer}
.dots i.on{width:26px;background:var(--gold)}
.talk{display:inline-flex;gap:3px;align-items:center;height:18px;margin-inline-start:6px;vertical-align:middle;opacity:0;transition:opacity .3s}
.talk.on{opacity:1}
.talk i{width:3px;height:5px;border-radius:2px;background:var(--gold-hi);animation:eq .7s ease-in-out infinite}
.talk i:nth-child(2){animation-delay:-.2s}.talk i:nth-child(3){animation-delay:-.45s}.talk i:nth-child(4){animation-delay:-.3s}

/* voice-note card */
.vn{width:min(92%,520px);display:flex;align-items:center;gap:16px;padding:18px 20px;border-radius:22px;background:linear-gradient(135deg,#2a3942,#1f2c34);box-shadow:0 18px 40px rgba(0,0,0,.45);direction:ltr}
.vn-ic{flex:0 0 auto;width:62px;height:62px;border-radius:50%;display:grid;place-items:center;background:linear-gradient(135deg,var(--gold-lo),var(--gold-hi));color:#2a040d;position:relative}
.vn-ic svg{width:28px;height:28px;stroke:currentColor;fill:none;stroke-width:1.8;stroke-linecap:round}
.vn-ic::after{content:"";position:absolute;inset:-6px;border-radius:50%;border:2px solid var(--gold);opacity:0}
.vn.play .vn-ic::after{animation:ping 1.4s ease-out infinite}
@keyframes ping{0%{transform:scale(.9);opacity:.9}100%{transform:scale(1.35);opacity:0}}
.vn-body{flex:1;min-width:0;display:grid;gap:8px}
.vn-wave{display:flex;align-items:center;gap:2px;height:44px}
.vn-wave i{flex:1;border-radius:3px;background:rgba(233,237,239,.32);min-height:4px;transition:background .2s}
.vn-wave i.on{background:var(--gold-hi)}
.vn.play .vn-wave i.on:last-of-type{}
.vn-meta{display:flex;justify-content:space-between;font-size:14px;color:rgba(233,237,239,.7);font-family:var(--f-ar)}
.vn-meta .vn-t{font-family:var(--f-lat);direction:ltr}
.vn-meta .vn-l{direction:rtl}
@media(max-width:520px){.vn{gap:10px;padding:12px 12px}.vn-ic{width:46px;height:46px}.vn-ic svg{width:22px;height:22px}.vn-wave{height:34px}.vn-meta{font-size:12px}}