@font-face{font-family:'Geist';src:url('/assets/fonts/Geist-Variable.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'Geist Mono';src:url('/assets/fonts/GeistMono-Variable.woff2') format('woff2-variations');font-weight:100 900;font-display:swap}
@font-face{font-family:'Apple Garamond';src:url('/assets/fonts/AppleGaramond-LightItalic.ttf') format('truetype');font-weight:300;font-style:italic;font-display:swap}
@font-face{font-family:'InterTight';src:url('/assets/fonts/InterTight-latin.woff2') format('woff2');font-weight:100 900;font-display:swap}
@font-face{font-family:'InterTight';src:url('/assets/fonts/InterTight-Italic-latin.woff2') format('woff2');font-weight:100 900;font-style:italic;font-display:swap}
:root{--bg:#0c0c0d;--raise:#141416;--panel:#1a1a1d;--ink:#f2f1ee;--ink2:#b4b2ac;--ink3:#8d8b86;--line:rgba(242,241,238,.16);--line2:rgba(242,241,238,.08);
 --brass:#c4ad82;--disp:'Geist','Helvetica Neue',Arial,sans-serif;--mono:'Geist Mono',ui-monospace,Menlo,monospace;--serif:'Apple Garamond','Times New Roman',serif;--logo:'InterTight','Geist',sans-serif;
 --gutter:clamp(1.25rem,4vw,3.5rem);--max:1240px;--navh:4.25rem;--ease:cubic-bezier(.22,1,.36,1)}
*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--disp);font-weight:420;line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img,video{display:block;max-width:100%;height:auto}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit}
::selection{background:var(--ink);color:var(--bg)}
:focus-visible{outline:2px solid var(--brass);outline-offset:3px}
.skip{position:absolute;left:-999px;top:0;background:var(--ink);color:var(--bg);padding:.75rem 1rem;z-index:9999}
.skip:focus{left:1rem;top:1rem}
.wrap{max-width:var(--max);margin:0 auto;padding:0 var(--gutter)}
.mono{font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);font-weight:500}
.lit{color:var(--ink2)}
.ser{color:var(--ink);font-weight:640}
.paper{background:#efede8;--ink:#141412;--ink2:#46453f;--ink3:#66645e;--line:rgba(20,20,18,.2);--line2:rgba(20,20,18,.1);--brass:#6f5d34;--panel:#e4e1da;color:var(--ink)}
.paper ::selection{background:var(--ink);color:#efede8}
/* animated mark + wordmark (Inter Tight Black + Light, the Marder logo) */
.mk{position:relative;display:inline-block;width:.64em;height:.95em;flex:none}
.mk img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:transform .7s var(--ease)}
.lg{display:inline-flex;align-items:center;gap:.5em;font-family:var(--logo);font-size:1.5rem;line-height:1;letter-spacing:-.02em;color:var(--ink);white-space:nowrap}
.lg__w{display:inline-flex}
.lg__w b{font-weight:900}
.lg__w>span{font-weight:300}
.lg .c{display:inline-block}
.js .lg .mk__a{animation:slabA 1.1s var(--ease) .1s both}
.js .lg .mk__b{animation:slabB 1.1s var(--ease) .2s both}
@keyframes slabA{from{transform:translateX(-140%);opacity:0}to{transform:none;opacity:1}}
@keyframes slabB{from{transform:translateX(140%);opacity:0}to{transform:none;opacity:1}}
.lg:hover .mk__a{transform:translateX(-16%)}
.lg:hover .mk__b{transform:translateX(16%)}
.lg:hover .c{animation:cw .65s var(--ease) both;animation-delay:calc(var(--i)*32ms)}
@keyframes cw{0%{transform:none}35%{transform:translateY(-.16em)}100%{transform:none}}
/* header */
.hd{position:fixed;inset:0 0 auto 0;z-index:100;height:var(--navh);transition:background .5s var(--ease)}
.hd.scrolled,.hd.solid{background:rgba(12,12,13,.78);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line2)}
.hd .in{height:100%;display:flex;align-items:center;justify-content:space-between;gap:1.5rem;padding:0 var(--gutter)}
.hd .lg{font-size:1.4rem}
.nav{display:flex;align-items:center;gap:clamp(1rem,2.2vw,2rem);list-style:none;margin:0;padding:0}
.nav a,.nav summary{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);cursor:pointer;list-style:none;padding:.5rem 0;transition:color .3s}
.nav summary::-webkit-details-marker{display:none}
.nav a:hover,.nav a[aria-current],.nav summary:hover{color:var(--ink)}
.nav details{position:relative}
.nav details[open] .sub{display:block}
.sub{display:none;position:absolute;top:100%;left:-1rem;min-width:11rem;background:#141416;border:1px solid var(--line);border-radius:10px;padding:.5rem 1rem;list-style:none;margin:0}
.sub li a{display:block;padding:.55rem 0}
.hd-right{display:flex;align-items:center;gap:1rem}
.hd-contact{display:flex;gap:1rem}
.hd-contact a{font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;color:var(--ink3);transition:color .3s}
.hd-contact a:hover{color:var(--ink)}
.lang{font-family:'PingFang HK','Noto Sans HK','Microsoft JhengHei','Heiti TC',var(--mono);font-size:.82rem;font-weight:500;color:var(--ink2);border:1px solid var(--line);border-radius:999px;padding:.3rem .75rem;min-width:2.4rem;text-align:center;transition:color .3s,border-color .3s}
.lang:hover{color:var(--ink);border-color:var(--ink)}
.pill{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-height:2.9rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;font-weight:600;color:var(--bg);background:var(--ink);border:1px solid var(--ink);border-radius:999px;padding:.85rem 1.65rem;cursor:pointer;transition:background .3s var(--ease),color .3s var(--ease),border-color .3s}
.pill:hover{background:var(--brass);border-color:var(--brass);color:#0c0c0d}
.pill--line{background:transparent;color:var(--ink)}
.pill--line:hover{background:var(--ink);color:var(--bg);border-color:var(--ink)}
.paper .pill{color:#efede8}
.paper .pill--line{color:var(--ink)}
.paper .pill--line:hover{color:#efede8}
.pill--sm{min-height:2.4rem;padding:.55rem 1.1rem;font-size:.66rem}
.burger{display:none;background:none;border:1px solid var(--line);border-radius:999px;color:var(--ink);font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase;padding:.55rem .9rem;min-height:2.6rem}
/* intro splash (first visit per session, desktop) */
.intro{display:none;position:fixed;inset:0;z-index:9999;pointer-events:all}
.has-intro .intro{display:block}
.intro__p{position:absolute;left:0;width:100%;height:50.5%;background:#0c0c0d;transition:transform .62s cubic-bezier(.76,0,.24,1)}
.intro__p--t{top:0}.intro__p--b{bottom:0}
.intro.split .intro__p--t{transform:translateY(-100%)}.intro.split .intro__p--b{transform:translateY(100%)}
.intro__lock{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:.42em;font-family:var(--logo);font-size:clamp(2.6rem,7.4vw,7.2rem);line-height:1;letter-spacing:-.02em;color:#f2f1ee;z-index:2;transition:opacity .3s}
.intro.split .intro__lock{opacity:0}
.intro .mk{height:1em;width:.68em}
.intro .mk__a{transform:translateX(-200%);opacity:0;transition:transform .85s var(--ease),opacity .5s}
.intro .mk__b{transform:translateX(200%);opacity:0;transition:transform .85s var(--ease) .1s,opacity .5s .1s}
.intro.go .mk__a,.intro.go .mk__b{transform:none;opacity:1}
.intro__w{display:inline-flex}
.intro__w .m{font-weight:900;display:inline-flex}
.intro__w .s{font-weight:300;display:inline-flex}
.intro__cw{display:inline-block;overflow:hidden;line-height:1.2}
.intro__c{display:inline-block;transform:translateY(118%);transition:transform .6s var(--ease)}
.intro.go .intro__c{transform:none}
/* hero (home) */
.hh{position:relative;min-height:min(100svh,980px);overflow:hidden;background:#000}
.hh__media{position:absolute;top:0;left:0;width:100%;height:112%;will-change:transform}
.hh__media img,.hh__media video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hh__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,13,.96) 0%,rgba(12,12,13,.5) 38%,rgba(12,12,13,.18) 62%,rgba(12,12,13,.55) 100%),linear-gradient(105deg,rgba(12,12,13,.55),rgba(12,12,13,0) 45%)}
.hh__grid{position:relative;min-height:inherit;display:flex;flex-direction:column;justify-content:flex-end;padding:calc(var(--navh) + 2rem) var(--gutter) clamp(1.5rem,5vh,3rem)}
.hh__tl,.hh__tr{position:absolute;top:calc(var(--navh) + clamp(1.25rem,3vh,2rem));color:var(--ink2)}
.hh__tl{left:var(--gutter)}.hh__tr{right:var(--gutter);display:flex;gap:.7rem;align-items:center}
.hh__h{font-size:clamp(2.5rem,6.3vw,6.3rem);font-weight:650;letter-spacing:-.045em;line-height:.96;max-width:15ch;margin:0}
.js .hh__h .w{display:inline-block;opacity:0;transform:translateY(.5em);transition:opacity .8s var(--ease),transform .8s var(--ease)}
.js .hh__h .w.in{opacity:1;transform:none}
.hh__mid{position:absolute;right:var(--gutter);top:50%;transform:translateY(-50%);text-align:right;max-width:22rem}
.hh__tag{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.5vw,2rem);line-height:1.2;color:var(--ink2);margin:0 0 1.4rem}
.hh__cta{display:flex;flex-wrap:wrap;gap:.7rem;justify-content:flex-end}
.pause{position:absolute;right:var(--gutter);bottom:clamp(1.5rem,5vh,3rem);z-index:3;background:rgba(12,12,13,.6);border:1px solid var(--line);border-radius:999px;color:var(--ink);font-family:var(--mono);font-size:.66rem;letter-spacing:.12em;text-transform:uppercase;padding:.6rem .95rem;min-height:2.5rem;cursor:pointer;transition:border-color .3s}
.pause:hover{border-color:var(--ink)}
/* sections */
.sec{padding:clamp(3.5rem,9vh,6.5rem) 0;border-top:1px solid var(--line2)}
.sec.nb{border-top:0}
.sec.paper{border-top:0}
.sh{display:flex;justify-content:space-between;align-items:baseline;flex-wrap:wrap;gap:.5rem 2rem;margin-bottom:clamp(1.5rem,3vw,2.4rem)}
.sh h2{font-size:clamp(1.9rem,4.6vw,3.4rem);font-weight:620;letter-spacing:-.04em;line-height:1;margin:0}
.sh h2::after{content:'.';color:var(--brass)}
.sh a.more{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);border-bottom:1px solid var(--line);padding-bottom:.2rem;transition:color .3s,border-color .3s}
.sh a.more:hover{color:var(--ink);border-color:var(--ink)}
p{margin:0 0 1rem;max-width:62ch;color:var(--ink2)}
p strong{color:var(--ink);font-weight:600}
a.tl{border-bottom:1px solid var(--line);color:var(--ink);transition:border-color .3s,color .3s}
a.tl:hover{border-color:var(--brass);color:var(--brass)}
.rt{color:var(--ink)}
.rt .rt__w{opacity:.16;transition:opacity .12s linear}
.rt .rt__w.lit{opacity:1}
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .9s var(--ease),transform .9s var(--ease)}
.js .rv.in{opacity:1;transform:none}
.stm{font-size:clamp(1.7rem,4.2vw,3.5rem);font-weight:560;letter-spacing:-.035em;line-height:1.14;max-width:24ch;margin:0}
.stm.wide{max-width:30ch}
/* showreel */
.reel__frame{position:relative;display:block;width:100%;padding:0;border:1px solid var(--line2);border-radius:14px;overflow:hidden;background:#000;aspect-ratio:2.39/1;cursor:pointer}
.reel__frame img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--ease)}
.reel__frame:hover img{transform:scale(1.035)}
.reel__frame::after{content:'';position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,13,.65),rgba(12,12,13,.05) 55%)}
.reel__ui{position:absolute;left:clamp(1rem,3vw,2rem);bottom:clamp(1rem,3vw,2rem);z-index:2;display:flex;align-items:center;gap:1rem}
.reel__play{display:grid;place-items:center;width:3.6rem;height:3.6rem;border-radius:50%;background:var(--ink);color:var(--bg);transition:transform .5s var(--ease),background .3s}
.reel__frame:hover .reel__play{transform:scale(1.1);background:var(--brass)}
.reel__play svg{width:1.1rem;height:1.1rem;margin-left:.15rem}
.reel__t{font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
/* featured (ported from jordanmarder.com) */
.feat{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,1fr);gap:clamp(1.5rem,4vw,3.5rem);align-items:center;margin-bottom:clamp(2.75rem,7vh,5rem)}
.feat:last-of-type{margin-bottom:0}
.feat--rev .feat__media{order:2}
.feat__media{position:relative;aspect-ratio:16/10;overflow:hidden;border:1px solid var(--line2);border-radius:12px;background:var(--panel)}
.feat__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(24%);transition:transform .7s var(--ease),filter .5s var(--ease)}
.feat:hover .feat__media img{transform:scale(1.04);filter:grayscale(0)}
.feat__tag{position:absolute;top:1rem;left:1rem;font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:#f2f1ee;background:rgba(12,12,13,.62);backdrop-filter:blur(5px);padding:.4rem .7rem;border-radius:999px}
.feat__title{font-size:clamp(1.5rem,2.6vw,2rem);font-weight:620;letter-spacing:-.025em;line-height:1.1;margin:0 0 1rem}
.feat__desc{font-weight:420;font-size:clamp(1.02rem,1.65vw,1.24rem);line-height:1.55;color:var(--ink2);margin:0 0 1.1rem;max-width:46ch}
.feat__more{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink3);transition:color .3s}
.feat:hover .feat__more{color:var(--ink)}
/* marquee */
.mq{overflow:hidden;padding:clamp(1.8rem,4.5vh,3rem) 0;border-top:1px solid var(--line2);border-bottom:1px solid var(--line2);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.mq__track{display:flex;align-items:center;gap:clamp(1.6rem,3vw,3rem);width:max-content;animation:mq 46s linear infinite}
.mq:hover .mq__track{animation-play-state:paused}
.mq__t{font-family:var(--logo);font-weight:800;font-size:clamp(2.4rem,6vw,5.2rem);letter-spacing:-.03em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(242,241,238,.5);transition:color .4s,-webkit-text-stroke-color .4s;white-space:nowrap}
.mq__t:hover{color:var(--ink);-webkit-text-stroke-color:var(--ink)}
.mq .mk{font-size:clamp(2rem,4.4vw,3.6rem);opacity:.9}
@keyframes mq{to{transform:translateX(-50%)}}
/* tiles */
.tiles{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.tile{border-top:2px solid var(--brass);padding-top:1.1rem}
.tile h3{font-size:1.5rem;font-weight:620;letter-spacing:-.03em;margin:.25rem 0 .5rem}
.tile .im{aspect-ratio:4/3;overflow:hidden;border-radius:12px;border:1px solid var(--line2);background:var(--panel);margin-bottom:1rem}
.tile .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(24%);transition:transform .7s var(--ease),filter .5s}
.tile:hover .im img{transform:scale(1.04);filter:grayscale(0)}
.tile.noimg .im{display:flex;align-items:flex-end;padding:1.1rem;background:transparent;border:1px solid var(--line)}
.tile.noimg .im span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.5rem;line-height:1.2;color:var(--ink2)}
/* people */
.ab{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,.85fr);gap:clamp(2rem,6vw,5rem);align-items:center}
.ab__body p{font-family:'InterTight',var(--disp);font-style:italic;font-weight:400;font-size:clamp(1.25rem,2.35vw,1.8rem);line-height:1.55;letter-spacing:-.005em;color:var(--ink2);margin:0 0 1.5rem;max-width:34ch}
.ab__link{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);transition:color .3s}
.ab__link:hover{color:var(--ink)}
.ab__img{border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.ab__img img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;aspect-ratio:4/5;filter:grayscale(100%)}
/* cities */
.cities{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2vw,1.6rem)}
.city{display:block;border-top:2px solid var(--brass);padding-top:1rem}
.city h3{font-size:1.7rem;font-weight:620;letter-spacing:-.035em;margin:.2rem 0 .5rem}
.city .im{aspect-ratio:16/10;overflow:hidden;border-radius:12px;border:1px solid var(--line2);background:var(--panel);margin-bottom:1rem}
.city .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:transform .8s var(--ease),filter .5s}
.city:hover .im img{transform:scale(1.04);filter:grayscale(0)}
.city .im.txt{display:flex;align-items:flex-end;padding:1rem;background:transparent;border:1px solid var(--line)}
.city .im.txt span{font-family:var(--serif);font-style:italic;font-weight:300;font-size:1.5rem;color:var(--ink2)}
/* let's work */
.lw{text-align:center;position:relative;overflow:hidden}
.lw>.mk{position:absolute;left:50%;top:50%;font-size:clamp(14rem,34vw,30rem);transform:translate(-50%,-50%);opacity:.05;pointer-events:none}
.lw .wrap{position:relative}
.lw__title{font-size:clamp(2.8rem,8vw,6.8rem);font-weight:640;letter-spacing:-.045em;line-height:.95;margin:0 0 1.1rem}
.lw__sub{font-family:var(--serif);font-style:italic;font-size:clamp(1.15rem,2.2vw,1.6rem);color:var(--ink2);margin:0 auto 2rem;max-width:34ch}
.lw__c{margin:1.6rem auto 0;color:var(--ink2)}
.lw__c a{color:var(--ink);border-bottom:1px solid var(--line)}
/* footer */
.ft{border-top:1px solid var(--line);padding:clamp(2.5rem,6vh,4rem) 0 6.5rem;overflow:hidden}
.ft__top{display:grid;grid-template-columns:1.3fr 1fr 1fr 1.3fr;gap:2rem;margin-bottom:clamp(2rem,6vh,4rem)}
.ft ul{list-style:none;margin:.6rem 0 0;padding:0}
.ft li{margin:.3rem 0}
.ft a{color:var(--ink2);transition:color .3s}
.ft a:hover{color:var(--ink)}
.ft__big{display:flex;align-items:center;gap:.28em;font-family:var(--logo);font-size:min(calc((100vw - 2 * var(--gutter)) / 7.2),calc((var(--max) - 2 * var(--gutter)) / 7.2));white-space:nowrap;line-height:.92;letter-spacing:-.045em;color:var(--ink);margin:0 0 clamp(1.5rem,4vh,2.5rem)}
.ft__big .mk{height:.84em;width:.57em}
.ft__big .m{font-weight:900;display:inline-flex}.ft__big .s{font-weight:300;display:inline-flex}
.ft__cw{display:inline-block;overflow:hidden;line-height:1.1;padding-bottom:.04em}
.ft__c{display:inline-block;transform:translateY(112%);transition:transform .9s var(--ease)}
.ft__big.in .ft__c{transform:none}
.ft__big .mk__a{transform:translateX(-160%);opacity:0;transition:transform 1s var(--ease),opacity .6s}
.ft__big .mk__b{transform:translateX(160%);opacity:0;transition:transform 1s var(--ease) .12s,opacity .6s .12s}
.ft__big.in .mk__a,.ft__big.in .mk__b{transform:none;opacity:1}
.ft__bot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:.5rem;border-top:1px solid var(--line2);padding-top:1.3rem}
/* inner page head */
.ph{padding:calc(var(--navh) + clamp(3rem,9vh,6rem)) 0 clamp(2rem,5vh,3.5rem)}
.ph h1{font-size:clamp(2.4rem,7vw,6rem);font-weight:640;letter-spacing:-.045em;line-height:.95;margin:.8rem 0 0}
.ph .lede{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,2.6vw,2rem);color:var(--ink2);margin-top:1rem;max-width:34ch}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(1.2rem,2.4vw,2rem)}
.card{display:block}
.card .im{overflow:hidden;border:1px solid var(--line2);border-radius:12px;background:var(--panel);aspect-ratio:16/10;position:relative}
.card .im img{width:100%;height:100%;object-fit:cover;filter:grayscale(24%);transition:transform .8s var(--ease),filter .5s}
.card:hover .im img{transform:scale(1.04);filter:grayscale(0)}
.card .im .feat__tag{top:.9rem;left:.9rem}
.card h3{font-size:1.5rem;font-weight:620;letter-spacing:-.03em;margin:1rem 0 .15rem;line-height:1.1}
.card p{margin:.4rem 0 0;font-size:.97rem}
.card.big{grid-column:1/-1}
.card.big .im{aspect-ratio:21/9}
/* case study hero */
.csh{position:relative;min-height:min(100svh,940px);display:flex;flex-direction:column;justify-content:flex-end;overflow:hidden;padding:calc(var(--navh) + 2rem) 0 clamp(2rem,5vh,3.5rem);background:#000}
.csh__bg{position:absolute;top:0;left:0;width:100%;height:114%;object-fit:cover;filter:grayscale(100%) brightness(.5);will-change:transform}
.csh__veil{position:absolute;inset:0;background:linear-gradient(to top,rgba(12,12,13,.94) 0%,rgba(12,12,13,.5) 45%,rgba(12,12,13,.7) 100%)}
.csh__in{position:relative;z-index:2}
.csh__brand{margin-bottom:1.6rem;display:block}
.csh__brand img{height:clamp(54px,7vw,92px);width:auto;border-radius:9px}
.csh__brand.bare img{border-radius:0}
.csh__brand.txt{font-family:var(--mono);font-size:.78rem;letter-spacing:.16em;text-transform:uppercase;color:var(--ink);border:1px solid var(--line);border-radius:999px;display:inline-block;padding:.65rem 1.1rem}
.csh__title{font-size:clamp(3rem,10vw,8.5rem);font-weight:660;letter-spacing:-.045em;line-height:.92;text-transform:uppercase;margin:.8rem 0 0}
.csh__sub{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.3rem,3vw,2.2rem);color:var(--ink2);margin-top:.75rem;letter-spacing:-.01em}
.csh__foot{display:flex;flex-wrap:wrap;gap:.6rem 2.5rem;justify-content:space-between;align-items:baseline;margin-top:clamp(1.75rem,5vh,3rem);border-top:1px solid var(--line);padding-top:1.1rem}
.csh__foot span b{display:block;font-weight:500;color:var(--ink);font-size:.95rem;letter-spacing:0;text-transform:none;font-family:var(--disp);margin-top:.2rem}
/* films */
.films{display:grid;gap:clamp(1.5rem,3vw,2.4rem)}
.film{position:relative;background:#000;aspect-ratio:16/9;border:1px solid var(--line2);border-radius:14px;overflow:hidden}
.film video{width:100%;height:100%;object-fit:contain;background:#000}
.film__cap{display:flex;justify-content:space-between;gap:1rem;padding-top:.7rem}
.slate{margin-top:clamp(1.5rem,4vh,2.4rem)}
.slate::before{content:'';display:block;height:7px;background:repeating-linear-gradient(135deg,var(--brass) 0 12px,transparent 12px 24px);opacity:.9;margin-bottom:.2rem}
.slate dl{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));margin:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.slate dl>div{padding:1rem 1.25rem 1rem 0;display:grid;gap:.45rem;align-content:start}
.slate dl>div+div{padding-left:1.25rem;border-left:1px solid var(--line2)}
.slate dt{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin:0}
.slate dd{margin:0;font-size:.97rem;font-weight:480;color:var(--ink)}
/* case blocks */
.blk{display:grid;grid-template-columns:minmax(140px,220px) minmax(0,1fr);gap:1.25rem clamp(1.5rem,4vw,3.5rem);padding-block:clamp(1.75rem,4vh,2.75rem);border-top:1px solid var(--line2)}
.blk:first-of-type{border-top:0}
.blk__h{font-size:clamp(1.5rem,2.4vw,2rem);font-weight:620;letter-spacing:-.035em;line-height:1.05;margin:0}
.blk__h::after{content:'.';color:var(--brass)}
.blk__b{max-width:64ch}
.blk__b p{color:var(--ink2);font-size:clamp(1rem,1.35vw,1.15rem)}
.stmt{padding-block:clamp(2.5rem,7vh,4.5rem);border-top:1px solid var(--line2)}
.stmt .mono{display:block;margin-bottom:1.5rem}
.stmt p{font-family:var(--serif);font-style:italic;font-weight:300;font-size:clamp(1.9rem,4.4vw,3.4rem);line-height:1.2;letter-spacing:-.01em;max-width:24ch;color:var(--ink)}
/* process accordion */
.acc{border-top:1px solid var(--line)}
.acc__item{border-bottom:1px solid var(--line)}
.acc__h{display:flex;align-items:center;gap:1.2rem;width:100%;text-align:left;background:none;border:0;cursor:pointer;padding:1.5rem 0}
.acc__n{font-family:var(--mono);font-size:.8rem;color:var(--ink3);min-width:2rem}
.acc__name{font-size:clamp(1.3rem,2.4vw,1.9rem);font-weight:600;letter-spacing:-.03em;color:var(--ink2);transition:color .3s}
.acc__h:hover .acc__name,.acc__h[aria-expanded="true"] .acc__name{color:var(--ink)}
.acc__meta{margin-left:auto;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.acc__chev{flex:none;width:18px;height:18px;color:var(--ink3);transition:transform .4s var(--ease)}
.acc__h[aria-expanded="true"] .acc__chev{transform:rotate(90deg)}
.acc__panel{display:grid;grid-template-rows:0fr;transition:grid-template-rows .5s var(--ease)}
.acc__h[aria-expanded="true"]+.acc__panel{grid-template-rows:1fr}
.acc__inner{overflow:hidden;min-height:0}
.acc__body{display:grid;gap:1.1rem;padding:.1rem 0 2.2rem 3.2rem}
.acc__body p{max-width:68ch;font-size:clamp(.98rem,1.3vw,1.08rem)}
.acc__media{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:.4rem}
.acc__media button{padding:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.acc__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:opacity .3s,transform .6s var(--ease)}
.acc__media button:hover img{opacity:.88;transform:scale(1.03)}
.acc__cap{font-family:var(--mono);font-size:.6rem;letter-spacing:.12em;text-transform:uppercase;color:var(--ink3)}
/* 3D folders (ported from case-study.css) */
.folders{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(1rem,2.5vw,2rem)}
.folder{--f-back:#3a3a3d;--f-front:#4a4a4e;--f-tab:#333;position:relative;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;padding:3.9rem 1rem 1.1rem;border:1px solid var(--line2);border-radius:14px;background:var(--raise);perspective:1000px;min-height:260px;transition:border-color .4s,box-shadow .4s}
.folder:hover,.folder.is-open{border-color:var(--line);box-shadow:0 22px 55px rgba(0,0,0,.45)}
.folder__stage{position:relative;width:200px;height:150px;margin-bottom:.65rem}
.folder__tab{position:absolute;left:calc(50% - 64px + 14px);top:26px;width:46px;height:14px;background:var(--f-tab);border-radius:6px 6px 0 0;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:1}
.folder__back{position:absolute;left:50%;top:38px;width:128px;height:94px;margin-left:-64px;background:var(--f-back);border-radius:10px;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:1}
.folder__cards{position:absolute;left:50%;top:66px;z-index:2}
.folder__card{position:absolute;width:76px;height:104px;left:-38px;top:-52px;border-radius:8px;overflow:hidden;background:var(--panel);border:1px solid var(--line2);box-shadow:0 12px 26px rgba(0,0,0,.55);padding:0;cursor:zoom-in;transform:translateY(0) scale(.5);opacity:0;pointer-events:none;transition:transform .6s cubic-bezier(.34,1.56,.64,1),opacity .4s}
.folder__card img{width:100%;height:100%;object-fit:cover}
.folder__front{position:absolute;left:50%;top:42px;width:128px;height:94px;margin-left:-64px;background:var(--f-front);border-radius:10px;transform-origin:bottom center;transition:transform .5s cubic-bezier(.34,1.56,.64,1);z-index:3;overflow:hidden}
.folder__front::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.28),transparent 55%)}
.folder:hover .folder__tab,.folder.is-open .folder__tab{transform:rotateX(-25deg) translateY(-2px)}
.folder:hover .folder__back,.folder.is-open .folder__back{transform:rotateX(-15deg)}
.folder:hover .folder__front,.folder.is-open .folder__front{transform:rotateX(28deg) translateY(9px)}
.folder:hover .folder__card,.folder.is-open .folder__card{opacity:1;pointer-events:auto}
.folder:hover .folder__card:nth-child(1),.folder.is-open .folder__card:nth-child(1){transform:translateY(-90px) translateX(-54px) rotate(-12deg) scale(1)}
.folder:hover .folder__card:nth-child(2),.folder.is-open .folder__card:nth-child(2){transform:translateY(-98px) translateX(0) rotate(0) scale(1)}
.folder:hover .folder__card:nth-child(3),.folder.is-open .folder__card:nth-child(3){transform:translateY(-90px) translateX(54px) rotate(12deg) scale(1)}
.folder__t{background:none;border:0;cursor:pointer;text-align:center;padding:.2rem .6rem}
.folder__label{display:block;font-weight:560;letter-spacing:-.01em;color:var(--ink)}
.folder__count{display:block;font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-top:.3rem}
/* stills */
.mas{columns:3;column-gap:14px}
.mas button{display:block;width:100%;padding:0;margin:0 0 14px;break-inside:avoid;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.mas img{width:100%;height:auto;transition:transform .7s var(--ease),filter .5s;filter:grayscale(18%)}
.mas button:hover img{transform:scale(1.03);filter:grayscale(0)}
.vert{display:grid;grid-template-columns:repeat(7,1fr);gap:12px}
.vert button{padding:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.vert img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/5;transition:transform .7s var(--ease)}
.vert button:hover img{transform:scale(1.04)}
.cred{width:100%;border-collapse:collapse}
.cred td{padding:.75rem 0;border-bottom:1px solid var(--line2);vertical-align:top;font-size:.98rem}
.cred td:first-child{font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);width:42%;padding-right:1rem}
.next{display:block;border-top:1px solid var(--line);padding:clamp(2.5rem,7vh,4.5rem) 0}
.next .t{font-size:clamp(2rem,5.5vw,4rem);font-weight:620;letter-spacing:-.04em;color:var(--ink3);transition:color .45s var(--ease)}
.next:hover .t{color:var(--ink)}
/* process + faq */
.steps{list-style:none;margin:0;padding:0;counter-reset:s}
.steps li{display:grid;grid-template-columns:5rem minmax(0,1fr);gap:1rem 2rem;padding:1.5rem 0;border-top:1px solid var(--line)}
.steps li::before{counter-increment:s;content:counter(s,decimal-leading-zero);font-family:var(--mono);font-size:.8rem;color:var(--ink3);padding-top:.5rem}
.steps h3{font-size:1.5rem;font-weight:620;letter-spacing:-.03em;margin:0 0 .35rem}
.steps p{margin:0}
.faq details{border-top:1px solid var(--line)}
.faq details:last-child{border-bottom:1px solid var(--line)}
.faq summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;gap:1.5rem;padding:1.3rem 0;font-size:1.2rem;font-weight:600;letter-spacing:-.02em;color:var(--ink)}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-family:var(--mono);color:var(--ink3);font-size:1.3rem;line-height:1}
.faq details[open] summary::after{content:'\2212'}
.faq .ans{padding:0 0 1.4rem;max-width:66ch}
.team{display:grid;grid-template-columns:repeat(3,1fr);gap:1.4rem;margin-top:2rem}
.member .im{aspect-ratio:4/5;background:transparent;border:1px dashed var(--line);border-radius:12px;display:flex;align-items:flex-end;padding:1rem}
.member h3{font-size:1.2rem;font-weight:620;letter-spacing:-.02em;margin:.9rem 0 .1rem}
.ret{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,5vw,4rem);align-items:center}
.ret img{border-radius:12px;border:1px solid var(--line2);max-width:340px}
.ret h2{font-size:clamp(1.7rem,3.4vw,2.6rem);font-weight:600;letter-spacing:-.035em;line-height:1.08;margin:.8rem 0 1rem;max-width:18ch}
/* form */
.form-wrap{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,7fr);gap:clamp(2rem,6vw,5rem)}
form .f{margin-bottom:1.2rem}
form label{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink2);margin-bottom:.45rem}
form input,form select,form textarea{width:100%;background:var(--raise);border:1px solid var(--line);color:var(--ink);font:inherit;font-size:1rem;padding:.9rem 1rem;min-height:3rem;border-radius:10px;-webkit-appearance:none;appearance:none}
form select{background-image:linear-gradient(45deg,transparent 50%,var(--ink2) 50%),linear-gradient(135deg,var(--ink2) 50%,transparent 50%);background-position:calc(100% - 1.2rem) 1.3rem,calc(100% - .85rem) 1.3rem;background-size:.4rem .4rem;background-repeat:no-repeat}
form textarea{min-height:9rem;resize:vertical}
form input:focus,form select:focus,form textarea:focus{border-color:var(--brass)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
.priv{font-size:.85rem;color:var(--ink3);max-width:none;margin-top:1rem}
.priv a{border-bottom:1px solid var(--line)}
.ok{display:none;border:1px solid var(--brass);border-radius:14px;padding:1.6rem;margin-top:1rem}
.ok.show{display:block}
.ok h3{margin:0 0 .4rem;font-size:1.5rem;letter-spacing:-.03em}
.err{color:#ffb4a8;font-size:.9rem;margin-top:.35rem;display:none}
.invalid .err{display:block}
.invalid input,.invalid select,.invalid textarea{border-color:#ffb4a8}
.demo-note{font-size:.8rem;color:var(--ink3);margin-top:.6rem}
/* lightbox + player modal */
.lb,.mv{position:fixed;inset:0;z-index:5000;display:none;align-items:center;justify-content:center;background:rgba(8,8,9,.94);padding:clamp(1rem,4vw,3rem)}
.lb.open,.mv.open{display:flex}
.lb img{max-width:100%;max-height:100%;object-fit:contain;border-radius:8px}
.mv video{width:min(1400px,100%);max-height:100%;background:#000;border-radius:12px}
.lb__x,.mv__x{position:absolute;top:1rem;right:1rem;background:rgba(242,241,238,.1);border:1px solid var(--line);border-radius:999px;color:#f2f1ee;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;padding:.65rem 1.1rem;cursor:pointer}
.lb__n{position:absolute;top:50%;transform:translateY(-50%);background:rgba(242,241,238,.1);border:1px solid var(--line);border-radius:50%;width:3rem;height:3rem;color:#f2f1ee;cursor:pointer;font-size:1.2rem}
.lb__n--p{left:1rem}.lb__n--n{right:1rem}
/* custom cursor (desktop pointers only) */
.cur{position:fixed;left:0;top:0;z-index:6000;pointer-events:none;width:14px;height:14px;margin:-7px 0 0 -7px;border:1px solid rgba(242,241,238,.7);border-radius:50%;display:none;align-items:center;justify-content:center;transition:width .35s var(--ease),height .35s var(--ease),margin .35s var(--ease),background .3s,border-color .3s}
.cur span{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;text-transform:uppercase;color:#0c0c0d;opacity:0;transition:opacity .2s}
.cur.on{display:flex}
.cur.big{width:78px;height:78px;margin:-39px 0 0 -39px;background:#f2f1ee;border-color:#f2f1ee}
.cur.big span{opacity:1}
/* breakpoints */
@media (max-width:1000px){
 .tiles,.cities,.team,.folders{grid-template-columns:1fr 1fr}
 .ft__top{grid-template-columns:1fr 1fr}
 .vert{grid-template-columns:repeat(4,1fr)}
 .mas{columns:2}
}
@media (max-width:820px){
 .feat,.feat--rev,.ab,.ret{grid-template-columns:1fr;gap:1.2rem}
 .feat--rev .feat__media{order:0}
 .hh__mid{position:static;transform:none;text-align:left;max-width:none;margin-top:1.4rem}
 .hh__cta{justify-content:flex-start}
 .hh__tr{display:none}
 .hh__h{max-width:none}
 .pause{bottom:auto;top:calc(var(--navh) + .8rem);padding:.4rem .7rem;min-height:2.2rem;font-size:.58rem}
 .hh__tl{letter-spacing:.08em;font-size:.56rem}
}
@media (max-width:760px){.hh__grid{padding-bottom:5rem}}
@media (max-width:760px){
 :root{--navh:3.6rem}
 .burger{display:inline-block}
 .hd-contact,.hd .pill{display:none}
 .nav{display:none;position:fixed;inset:var(--navh) 0 0 0;background:#0c0c0d;flex-direction:column;align-items:flex-start;gap:0;padding:1rem var(--gutter) 6rem;overflow:auto}
 .nav.open{display:flex}
 .nav li,.nav details{width:100%}
 .nav a,.nav summary{display:block;font-size:.9rem;padding:1rem 0;border-bottom:1px solid var(--line2)}
 .sub{position:static;display:block;border:0;background:none;padding:0 0 0 1rem;min-width:0}
 .tiles,.cities,.team,.folders,.row2,.two,.form-wrap,.grid2,.blk{grid-template-columns:1fr}
 .blk__h{margin-bottom:.2rem}
 .mas{columns:1}
 .vert{grid-template-columns:repeat(3,1fr)}
 .acc__body{padding-left:0}
 .acc__media{grid-template-columns:1fr}
 .acc__meta{display:none}
 .steps li{grid-template-columns:3rem minmax(0,1fr)}
 .reel__frame{aspect-ratio:16/9}
 .card.big .im{aspect-ratio:16/10}
}
.mbar{display:none;position:fixed;left:0;right:0;bottom:0;z-index:90;background:#0c0c0d;border-top:1px solid var(--line)}
.mbar a{flex:1;text-align:center;padding:.95rem .5rem;font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:#f2f1ee;border-right:1px solid var(--line2)}
.mbar a:last-child{border-right:0;background:#f2f1ee;color:#0c0c0d;font-weight:700}
@media (max-width:760px){.mbar{display:flex}}
/* Traditional Chinese: proper CJK typeface, no Latin tracking or caps */
.zh{--disp:'Noto Sans HK','PingFang HK','Microsoft JhengHei','Heiti TC','Hiragino Sans CNS',sans-serif;--mono:'Noto Sans HK','PingFang HK','Microsoft JhengHei','Heiti TC',sans-serif;--serif:'Noto Serif HK','Songti TC','PMingLiU',serif;line-height:1.85}
.zh *{letter-spacing:0!important;text-transform:none!important}
.zh .lg *,.zh .ft__big *,.zh .intro *,.zh .mq__t{font-family:var(--logo)}
.zh .mono,.zh .nav a,.zh .nav summary,.zh .pill,.zh .lang{font-size:.82rem;font-weight:500}
.zh h1,.zh h2,.zh h3,.zh .csh__title,.zh .lw__title,.zh .stm,.zh .hh__h{font-weight:600;line-height:1.25}
.zh .hh__tag,.zh .csh__sub,.zh .lede,.zh .stmt p,.zh .lw__sub,.zh .tile.noimg .im span,.zh .city .im.txt span{font-style:normal;font-family:var(--disp);font-weight:400}
.zh .ab__body p{font-style:normal;font-family:var(--disp)}
.zh .hh__h{font-size:clamp(2rem,5vw,4.4rem);max-width:15em}
.zh .sh h2::after,.zh .blk__h::after{content:''}
.zh p{max-width:34em}
/* motion preferences */
@media (prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}
 .hh__media video,.pause,.cur,.intro{display:none!important}
 .mq__track{animation:none}
 .js .rv,.js .hh__h .w{opacity:1!important;transform:none!important}
 .rt .rt__w{opacity:1!important}
 .ft__c,.ft__big .mk__a,.ft__big .mk__b{transform:none!important;opacity:1!important}
 .js .lg .mk__a,.js .lg .mk__b{animation:none}
 *{transition-duration:.01ms!important}
}

/* ===== v3: black and ivory, editorial serif, centred composition ===== */
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/InstrumentSerif-latin.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Instrument Serif';src:url('/assets/fonts/InstrumentSerif-Italic-latin.woff2') format('woff2');font-weight:400;font-style:italic;font-display:swap}
:root{--bg:#000;--raise:#0a0a09;--panel:#12120f;--ink:#f4ecdb;--ink2:#bdb6a6;--ink3:#8a8478;--line:rgba(244,236,219,.2);--line2:rgba(244,236,219,.1);
 --brass:#c4ad82;--serif:'Instrument Serif','Times New Roman',serif;--max:1180px}
body{font-size:1.02rem;font-weight:400}
::selection{background:var(--ink);color:#000}
.paper{background:#f4ecdb;--ink:#0d0c0a;--ink2:#47443c;--ink3:#6c685d;--line:rgba(13,12,10,.22);--line2:rgba(13,12,10,.1);--brass:#7a6639;--panel:#e8dfca}
.paper ::selection{background:#0d0c0a;color:#f4ecdb}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
em,.it{font-family:var(--serif);font-style:italic;font-weight:400;letter-spacing:0}
.mono{font-size:.7rem;letter-spacing:.12em}
.sec{padding:clamp(4rem,11vh,8rem) 0}
.sh{flex-direction:column;align-items:center;text-align:center;gap:.9rem;margin-bottom:clamp(2rem,5vw,3.5rem)}
.sh h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7vw,5.6rem);letter-spacing:-.01em;line-height:1}
.sh h2::after{content:''}
.sh .sub{font-family:var(--disp);color:var(--ink2);max-width:46ch;margin:0 auto}
.more-row{display:flex;justify-content:center;margin-top:clamp(2rem,5vw,3.5rem)}
p{max-width:64ch}
.ctr{margin-left:auto;margin-right:auto;text-align:center}
/* buttons: one calm pill style */
.pill{font-family:var(--disp);font-size:.98rem;font-weight:500;letter-spacing:0;text-transform:none;padding:.95rem 2rem;min-height:3.1rem;background:var(--ink);border-color:var(--ink);color:#000}
.pill:hover{background:var(--brass);border-color:var(--brass);color:#000}
.pill--line{background:transparent;color:var(--ink);border-color:var(--line)}
.pill--line:hover{background:var(--ink);color:#000;border-color:var(--ink)}
.pill--sm{font-size:.88rem;padding:.6rem 1.25rem;min-height:2.5rem}
.paper .pill{color:#f4ecdb;background:#0d0c0a;border-color:#0d0c0a}
.paper .pill:hover{background:var(--brass);border-color:var(--brass);color:#fff}
.tlink{display:inline-flex;align-items:center;gap:.6rem;font-size:.98rem;color:var(--ink);background:none;border:0;padding:.4rem 0;cursor:pointer;border-bottom:1px solid var(--line);transition:border-color .3s,color .3s}
.tlink:hover{border-color:var(--ink)}
.tlink svg{width:.85rem;height:.85rem}
/* header: logo left, nav centred, one call to action right */
.hd .in{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem}
.hd .lg{justify-self:start}
.nav{justify-self:center;gap:clamp(1.4rem,3vw,2.8rem)}
.nav a{font-family:var(--disp);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink2)}
.hd-right{justify-self:end}
.hd .pill{display:inline-flex}
.hd-contact,.mbar,.cur{display:none!important}
.lang{font-size:.8rem}
/* hero: the showreel loop, nothing on top of the picture but the way in */
.hh{min-height:100svh;height:100svh}
.hh__veil{background:linear-gradient(to top,rgba(0,0,0,.78) 0%,rgba(0,0,0,.18) 34%,rgba(0,0,0,0) 58%,rgba(0,0,0,.42) 100%)}
.hh__grid{align-items:center;justify-content:flex-end;padding-bottom:clamp(2.25rem,7vh,4.5rem)}
.hh__cta{display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.hh__cta .tlink{color:var(--ink);border-color:rgba(244,236,219,.4)}
.hh .pause{right:auto;left:var(--gutter);bottom:clamp(1.5rem,5vh,3rem);background:none;border:0;padding:.4rem 0;min-height:0;font-family:var(--disp);font-size:.85rem;letter-spacing:0;text-transform:none;color:var(--ink2);display:inline-flex;gap:.55rem;align-items:center}
.hh .pause::before{content:'';width:.7rem;height:.8rem;border-left:2px solid currentColor;border-right:2px solid currentColor}
.hh .pause[aria-pressed=true]::before{border:0;border-left:.7rem solid currentColor;border-top:.42rem solid transparent;border-bottom:.42rem solid transparent;width:0;height:0}
.hh .pause:hover{color:var(--ink);border:0}
/* statement */
.stm{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,4.8vw,4rem);line-height:1.12;letter-spacing:-.01em;max-width:24ch;margin:0 auto;text-align:center}
.stm.wide{max-width:27ch}
.ser{font-weight:400;font-style:italic;font-family:var(--serif)}
/* showreel frame */
.reel__frame{margin:0 auto;border-radius:18px}
.reel__t{font-family:var(--disp);font-size:.95rem;letter-spacing:0;text-transform:none}
/* work cards: image, then centred caption */
.wgrid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(2.25rem,5vw,4rem) clamp(1.2rem,2.4vw,2rem)}
.wk{display:block;text-align:center}
.wk.hide{display:none}
.wk__im{overflow:hidden;border-radius:16px;border:1px solid var(--line2);background:var(--panel);aspect-ratio:16/10}
.wk--big{grid-column:1/-1}
.wk--big .wk__im{aspect-ratio:21/9}
.wk__im img{width:100%;height:100%;object-fit:cover;filter:grayscale(30%);transition:transform .9s var(--ease),filter .6s var(--ease)}
.wk:hover .wk__im img{transform:scale(1.035);filter:grayscale(0)}
.wk__t{padding-top:1.2rem}
.wk__tag{display:block;font-size:.85rem;color:var(--ink3);margin-bottom:.25rem}
.wk h3{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.2vw,2.7rem);line-height:1.05;letter-spacing:-.005em;margin:0;transition:color .3s}
.wk:hover h3{color:var(--brass)}
.wk__meta{display:block;font-size:.92rem;color:var(--ink2);margin-top:.35rem}
.tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.4rem 1.8rem;margin:0 0 clamp(2rem,5vw,3.25rem)}
.tabs button{background:none;border:0;border-bottom:1px solid transparent;font-size:1rem;color:var(--ink3);padding:.4rem 0;cursor:pointer;transition:color .3s,border-color .3s}
.tabs button:hover{color:var(--ink)}
.tabs button[aria-pressed=true]{color:var(--ink);border-color:var(--ink)}
/* services rows (the old jordanmarder.com format) */
.svc{border-top:1px solid var(--line);max-width:1000px;margin:0 auto}
.svc__r{display:grid;grid-template-columns:3.5rem minmax(0,1fr) clamp(110px,16vw,190px);gap:1rem clamp(1rem,3vw,2.5rem);align-items:center;padding:clamp(1.4rem,3vw,2.2rem) 0;border-bottom:1px solid var(--line)}
.svc__n{font-family:var(--mono);font-size:.78rem;color:var(--ink3)}
.svc__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.05;margin:0 0 .5rem}
.svc__d{margin:0 0 .6rem;max-width:56ch}
.svc__get{font-size:.88rem;color:var(--ink3);margin:0}
.svc__get b{font-weight:500;color:var(--ink2)}
.svc__im{aspect-ratio:4/3;border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--panel)}
.svc__im img{width:100%;height:100%;object-fit:cover;filter:grayscale(40%);transition:filter .5s,transform .8s var(--ease)}
.svc__r:hover .svc__im img{filter:grayscale(0);transform:scale(1.05)}
/* behind the work: process strip */
.strip{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.strip__track{display:flex;gap:14px;width:max-content;animation:mq 90s linear infinite}
.strip:hover .strip__track{animation-play-state:paused}
.strip a{display:block;height:clamp(220px,32vw,340px);border-radius:12px;overflow:hidden;border:1px solid var(--line2);background:var(--panel);flex:none}
.strip img{height:100%;width:auto;max-width:none;filter:grayscale(25%);transition:filter .5s}
.strip a:hover img{filter:grayscale(0)}
/* map */
.map{position:relative;max-width:680px;margin:0 auto}
.map__svg{display:block;width:100%;height:auto;-webkit-mask-image:linear-gradient(90deg,transparent,#000 16%);mask-image:linear-gradient(90deg,transparent,#000 16%)}
.map__dots{stroke:rgba(244,236,219,.3);stroke-width:3.4;stroke-linecap:round;fill:none}
.map__arc{fill:none;stroke:var(--brass);stroke-width:1.3;stroke-dasharray:4 6;opacity:.7;stroke-dashoffset:600;transition:stroke-dashoffset 2.4s var(--ease)}
.map.in .map__arc{stroke-dashoffset:0}
.pin{position:absolute;transform:translate(-50%,-50%);background:none;border:0;padding:0;cursor:pointer;width:2.6rem;height:2.6rem;display:grid;place-items:center}
.pin i{position:relative;width:12px;height:12px;border-radius:50%;background:var(--brass);box-shadow:0 0 0 0 rgba(196,173,130,.6);animation:ping 2.6s infinite}
.pin--base i{background:var(--ink);width:14px;height:14px}
@keyframes ping{70%{box-shadow:0 0 0 14px rgba(196,173,130,0)}100%{box-shadow:0 0 0 0 rgba(196,173,130,0)}}
.pin__l{position:absolute;left:50%;top:100%;transform:translateX(-50%);margin-top:-.15rem;white-space:nowrap;font-size:.86rem;color:var(--ink);text-shadow:0 1px 8px #000;pointer-events:none}
.pin__l small{display:block;text-align:center;font-size:.72rem;color:var(--ink3);margin-top:-.1rem}
.pin--l .pin__l{left:auto;right:100%;top:50%;transform:translateY(-50%);margin:0 .1rem 0 0;text-align:right}
.pin--r .pin__l{left:100%;top:50%;transform:translateY(-50%);margin:0 0 0 .1rem;text-align:left}
.pin--l .pin__l small,.pin--r .pin__l small{text-align:inherit}
.hd.scrolled,.hd.solid{background:rgba(0,0,0,.9)}
.pin:hover i,.pin.on i,.pin:focus-visible i{transform:scale(1.5)}
.cc4{display:grid;grid-template-columns:repeat(4,1fr);gap:clamp(.8rem,2vw,1.4rem);max-width:var(--max);margin:clamp(1.5rem,4vw,2.5rem) auto 0}
.cc{border:1px solid var(--line2);border-radius:14px;padding:1.3rem 1.2rem 1.4rem;text-align:center;transition:border-color .4s,background .4s}
.cc.on{border-color:var(--brass);background:rgba(196,173,130,.06)}
.cc h3{font-family:var(--serif);font-weight:400;font-size:2rem;line-height:1;margin:0 0 .35rem}
.cc p{font-size:.92rem;margin:0 auto .9rem;color:var(--ink2)}
.cc .tlink{font-size:.9rem}
/* founder / people */
.founder{text-align:center}
.founder__img{width:min(300px,70vw);margin:0 auto clamp(1.5rem,4vw,2.25rem);border-radius:999px 999px 18px 18px;overflow:hidden;border:1px solid var(--line2)}
.founder__img img{width:100%;aspect-ratio:4/5;object-fit:cover;object-position:50% 20%;filter:grayscale(100%)}
.founder h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.5vw,4.4rem);line-height:1;margin:0 0 1.2rem}
.founder p{margin:0 auto 1.2rem;font-size:clamp(1.05rem,1.6vw,1.25rem);text-align:center}
/* closing call to action */
.lw__title{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,10vw,8.6rem);line-height:.92;letter-spacing:-.015em}
.lw__sub{font-family:var(--disp);font-style:normal;font-size:clamp(1.05rem,1.8vw,1.3rem);max-width:36ch}
/* footer: centred, nothing loud */
.ft{padding-bottom:3rem;text-align:center}
.ft__big{justify-content:center}
.ft__nav{display:flex;flex-wrap:wrap;justify-content:center;gap:.6rem 2rem;list-style:none;margin:0 0 2rem;padding:0}
.ft__nav a{font-size:.98rem}
.ft__bot{justify-content:center;text-align:center;flex-direction:column;align-items:center}
/* inner page head */
.ph{text-align:center}
.ph h1{font-family:var(--serif);font-weight:400;font-size:clamp(3.4rem,9vw,7.4rem);line-height:.95;letter-spacing:-.01em}
.ph .lede{font-family:var(--disp);font-style:normal;font-size:clamp(1.05rem,1.9vw,1.35rem);margin:1.2rem auto 0;max-width:42ch;color:var(--ink2)}
/* case study */
.csh{text-align:center;align-items:center}
.csh__bg{filter:grayscale(70%) brightness(.5)}
.csh__in{display:flex;flex-direction:column;align-items:center}
.csh__brand{margin-bottom:1.3rem}
.csh__brand.chip img{background:#f4ecdb;padding:.55rem .85rem;border-radius:10px;height:clamp(46px,6vw,72px)}
.csh__brand.inv img{filter:invert(1)}
.csh__title{font-family:var(--serif);font-weight:400;text-transform:none;font-size:clamp(3.4rem,11vw,9.5rem);line-height:.9;letter-spacing:-.015em}
.csh__foot{justify-content:center;text-align:center;border-top:0;width:100%;gap:.4rem 3rem}
.csh__foot span{font-family:var(--disp);font-size:.95rem;letter-spacing:0;text-transform:none;color:var(--ink2)}
.stmt{text-align:center}
.stmt p{font-family:var(--serif);font-style:normal;font-weight:400;font-size:clamp(2.2rem,5vw,4.2rem);line-height:1.08;max-width:22ch;margin:0 auto}
.ov{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:clamp(2rem,6vw,5rem);max-width:var(--max);margin:0 auto}
.ov__p p{color:var(--ink2);font-size:clamp(1.02rem,1.4vw,1.15rem)}
.ov__p p strong{color:var(--ink)}
.spec{margin:0;border-top:1px solid var(--line)}
.spec div{display:flex;justify-content:space-between;gap:1.2rem;padding:.8rem 0;border-bottom:1px solid var(--line2);font-size:.97rem}
.spec dt{color:var(--ink3);margin:0}
.spec dd{margin:0;text-align:right;color:var(--ink)}
.films{max-width:var(--max);margin:0 auto}
.films .film{border-radius:18px}
.film__cap{justify-content:center;text-align:center}
.film__cap .mono{font-family:var(--disp);font-size:.9rem;letter-spacing:0;text-transform:none;color:var(--ink3)}
.film--v{max-width:340px;margin:0 auto;aspect-ratio:9/16}
.film--v+.film__cap{max-width:340px;margin:0 auto}
.vf{position:absolute;inset:0;width:100%;height:100%;padding:0;border:0;background:#000;cursor:pointer;display:block}
.vf img{width:100%;height:100%;object-fit:cover;filter:brightness(.62);transition:transform 1s var(--ease),filter .5s}
.vf:hover img{transform:scale(1.03);filter:brightness(.78)}
.vf__p{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:4.4rem;height:4.4rem;border-radius:50%;background:var(--ink);color:#000;display:grid;place-items:center;transition:transform .5s var(--ease),background .3s}
.vf:hover .vf__p{transform:translate(-50%,-50%) scale(1.1);background:var(--brass)}
.vf__p svg{width:1.3rem;height:1.3rem;margin-left:.2rem}
.film iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.acc{max-width:1000px;margin:0 auto}
.acc__name{font-family:var(--serif);font-weight:400;font-size:clamp(1.7rem,3.2vw,2.6rem);letter-spacing:0}
.acc__body{padding-left:3.2rem}
.acc__media{grid-template-columns:repeat(3,1fr)}
.acc__media button{background:var(--panel)}
.acc__media img{aspect-ratio:auto;height:auto;object-fit:contain}
.acc__media button{display:flex;align-items:center;justify-content:center;min-height:120px}
.mas{max-width:var(--max);margin:0 auto}
.laurels{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;max-width:var(--max);margin:0 auto}
.laurels button{padding:0;border:1px solid var(--line2);border-radius:10px;overflow:hidden;background:var(--panel);cursor:zoom-in}
.laurels img{width:100%;height:100%;object-fit:cover}
.folders{max-width:var(--max);margin:0 auto}
.folder__t{text-decoration:none}
a.folder__t{display:block}
.next{text-align:center}
.next .t{font-family:var(--serif);font-weight:400;font-size:clamp(2.8rem,7vw,6rem)}
/* services extras */
.ret{max-width:var(--max);margin:0 auto;text-align:left}
.ret h2{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5vw,4rem);line-height:1;max-width:14ch}
.faq{max-width:860px;margin:0 auto}
.faq summary{font-family:var(--serif);font-weight:400;font-size:clamp(1.4rem,2.4vw,1.9rem);letter-spacing:0}
/* contact (jordanmarder.com format): huge uppercase line, underline inputs, italic aside */
.ct{padding:calc(var(--navh) + clamp(2.5rem,8vh,5rem)) 0 clamp(4rem,10vh,7rem)}
.ct__h{font-family:var(--disp);font-weight:700;text-transform:uppercase;font-size:clamp(3rem,11.5vw,10.5rem);line-height:.88;letter-spacing:-.045em;margin:0 0 clamp(2.5rem,7vw,5rem);text-align:center}
.ct__h em{font-family:var(--serif);font-weight:400;text-transform:none;letter-spacing:-.01em}
.ct__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(2.5rem,7vw,6rem);max-width:var(--max);margin:0 auto}
.ct form .f{margin-bottom:1.6rem}
.ct form label{font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3)}
.ct form input,.ct form select,.ct form textarea{background:transparent;border:0;border-bottom:1px solid var(--line);border-radius:0;padding:.7rem 0;font-size:1.1rem;min-height:2.9rem}
.ct form input:focus,.ct form select:focus,.ct form textarea:focus{border-color:var(--ink)}
.ct form select{background-position:calc(100% - .5rem) 1.15rem,calc(100% - .15rem) 1.15rem}
.ct form select option{background:#000;color:var(--ink)}
.ct form textarea{min-height:7rem}
.ct__aside p.ct__q{font-family:var(--serif);font-style:italic;font-weight:400;font-size:clamp(2rem,4vw,3.1rem);line-height:1.1;margin:0 0 2.2rem;color:var(--ink)}
.ct__d{border-top:1px solid var(--line2);padding:1rem 0}
.ct__d span{display:block;font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);margin-bottom:.35rem}
.ct__d div,.ct__d a{font-size:1.08rem;color:var(--ink)}
.ct__soc{display:flex;gap:1.6rem;flex-wrap:wrap;margin-top:1.4rem}
.ct__soc a{font-size:.95rem;color:var(--ink2);border-bottom:1px solid var(--line)}
.ct__soc a:hover{color:var(--ink)}
.demo-note{margin-top:1rem}
/* breakpoints */
@media (max-width:1000px){.cc4{grid-template-columns:repeat(2,1fr)}.laurels{grid-template-columns:repeat(2,1fr)}.acc__media{grid-template-columns:repeat(2,1fr)}}
@media (max-width:820px){
 .ov,.ct__grid{grid-template-columns:1fr}
 .wgrid{grid-template-columns:1fr}
 .wk--big .wk__im{aspect-ratio:16/10}
 .svc__r{grid-template-columns:2.5rem minmax(0,1fr)}
 .svc__im{grid-column:2;max-width:260px}
}
@media (max-width:760px){
 .hd .in{grid-template-columns:auto 1fr}
 .hd-right{justify-self:end}
 .hd .pill{display:none}
 .nav{justify-self:start}
 .hh__grid{padding-bottom:5.5rem}
 .acc__body{padding-left:0}
 .acc__media{grid-template-columns:1fr}
 .pin__l small{display:none}
}
.zh .sh h2,.zh .ph h1,.zh .csh__title,.zh .lw__title,.zh .wk h3,.zh .svc__name,.zh .founder h2,.zh .stm,.zh .stmt p,.zh .acc__name,.zh .cc h3,.zh .next .t{font-family:var(--disp);font-weight:600;line-height:1.2}
.zh em{font-family:var(--disp);font-style:normal}
@media (prefers-reduced-motion:reduce){.strip__track,.pin i{animation:none}.map__arc{stroke-dashoffset:0;transition:none}}