/* AFTERHOURS® Creative Lab — studio interface
   Near-black, acid lime, warm off-white. Archivo (variable width) + JetBrains Mono. */
@font-face{font-family:"Archivo";font-style:normal;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-wdth-normal.woff2) format("woff2")}
@font-face{font-family:"Archivo";font-style:italic;font-weight:100 900;font-stretch:62% 125%;font-display:swap;src:url(../fonts/archivo-latin-wdth-italic.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:normal;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Bodoni Moda";font-style:italic;font-weight:400 900;font-display:swap;src:url(../fonts/bodoni-moda-latin-wght-italic.woff2) format("woff2")}
@font-face{font-family:"JetBrains Mono";font-style:normal;font-weight:100 800;font-display:swap;src:url(../fonts/jetbrains-mono-latin-wght-normal.woff2) format("woff2")}
@font-face{font-family:"Pacifico";font-style:normal;font-weight:400;font-display:swap;src:url(../fonts/pacifico-latin-400-normal.woff2) format("woff2")}
@property --mx { syntax: "<percentage>"; inherits: true; initial-value: 68%; }
@property --my { syntax: "<percentage>"; inherits: true; initial-value: 40%; }
:root{
  --bg:#0B0B0B;--bg2:#141414;--fg:#EDEBE4;--mute:#8E8C85;--line:rgba(237,235,228,.16);--lime:#D7FF3F;--blue:#3D5AFE;--orange:#FF5A1F;
  --sans:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;--mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;--serif:"Bodoni Moda",Didot,Georgia,serif;--script:"Pacifico",cursive;
  --pad:clamp(16px,3.2vw,48px);--ease:cubic-bezier(.2,.7,.2,1);--foot-h:0px
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
html.calm{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--fg);font:400 16px/1.55 var(--sans);font-variation-settings:"wdth" 100;-webkit-font-smoothing:antialiased;overflow-x:hidden}
body.lock{overflow:hidden}
h1,h2,h3,p,ol,ul,dl,dd,figure{margin:0;padding:0}
ol,ul{list-style:none}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0;padding:0}
img{max-width:100%;display:block}
:focus-visible{outline:2px solid var(--lime);outline-offset:3px}
::selection{background:var(--lime);color:#000}
[hidden]{display:none!important}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--lime);color:#000;padding:8px 12px}
.skip:focus{left:8px}
.lbl{font:500 11.5px/1.4 var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute)}
.fine{font-size:13px;color:var(--mute);line-height:1.5}
.demo-flag{display:inline-block;font:600 10.5px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;padding:5px 8px;border:1px dashed currentColor;opacity:.8}

/* demo bar: identical across every portfolio demo */
.ad-demobar{display:flex;flex-wrap:wrap;align-items:center;justify-content:center;gap:4px 14px;background:#111;color:#E9E9E6;font:500 12.5px/1.4 system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;padding:7px 16px;text-align:center;position:relative;z-index:60;border-bottom:1px solid #222}
.ad-demobar a{color:#fff;font-weight:700;text-decoration:underline;text-underline-offset:3px}

/* links & buttons */
.pill-link{display:inline-flex;align-items:center;gap:.6em;border:1px solid currentColor;border-radius:999px;padding:.75em 1.35em;font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;transition:background .25s,color .25s,border-color .25s;min-height:44px}
.pill-link:hover,.pill-link.on{background:var(--lime);color:#000;border-color:var(--lime)}
.pill-link.big{font-size:15px;padding:1em 1.7em;min-height:54px}
.pill-link[disabled]{opacity:.6;cursor:progress}
.txt-link{font:500 13px/1.3 var(--mono);text-transform:uppercase;letter-spacing:.05em;text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:1px;min-height:32px;display:inline-flex;align-items:center}
.txt-link:hover{color:var(--lime)}
.txt-link.danger:hover{color:var(--orange)}

/* top bar */
.top{position:sticky;top:0;z-index:50;display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:24px;padding:14px var(--pad);background:var(--bg);border-bottom:1px solid var(--line)}
.logo{font:800 22px/1 var(--sans);font-variation-settings:"wdth" 75;text-decoration:none;letter-spacing:-.01em;transition:font-variation-settings .3s var(--ease)}
.logo:hover{font-variation-settings:"wdth" 125;color:var(--lime)}
.logo sup{font-size:.45em}
.top-meta{display:flex;gap:18px;font:500 11px/1 var(--mono);color:var(--mute);letter-spacing:.06em;text-transform:uppercase}
.top-nav{display:flex;gap:26px}
.top-nav a{font:600 13px/1 var(--sans);text-transform:uppercase;letter-spacing:.06em;text-decoration:none;position:relative;padding:6px 0}
.top-nav a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:left;transition:transform .3s var(--ease)}
.top-nav a:hover::after,.top-nav a[aria-current]::after{transform:none}
.top-nav a[aria-current]{color:var(--lime)}
.menu-btn{display:inline-flex;align-items:center;gap:10px;font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.08em;min-height:40px;padding:0 4px;position:relative;z-index:70}
.menu-btn i{width:22px;height:8px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transition:transform .3s}
.menu-btn[aria-expanded=true]{color:#000}
.menu-btn[aria-expanded=true] i{transform:scaleY(0)}
@media (max-width:1100px){.top-meta{display:none}.top{grid-template-columns:auto 1fr auto}}
@media (max-width:820px){.top-nav{display:none}.top{grid-template-columns:auto 1fr}.menu-btn{justify-self:end}}

/* oversized menu */
.menu{position:fixed;inset:0;z-index:65;background:var(--lime);color:#000;display:flex;flex-direction:column;justify-content:center;padding:90px var(--pad) 32px;clip-path:circle(0% at 96% 4%);transition:clip-path .55s var(--ease)}
.menu.open{clip-path:circle(150% at 96% 4%)}
.menu nav{display:flex;flex-direction:column}
.menu nav a{display:grid;grid-template-columns:48px 1fr auto;align-items:baseline;gap:12px;text-decoration:none;border-bottom:1.5px solid #000;padding:.06em 0;transform:translateY(30px);opacity:0;transition:transform .5s var(--ease) calc(var(--i)*50ms + .1s),opacity .5s calc(var(--i)*50ms + .1s)}
.menu.open nav a{transform:none;opacity:1}
.menu nav a span{font:900 clamp(52px,14vw,150px)/.9 var(--sans);font-variation-settings:"wdth" 62;letter-spacing:-.01em;transition:font-variation-settings .35s var(--ease)}
.menu nav a:hover span,.menu nav a:focus-visible span{font-variation-settings:"wdth" 125}
.menu nav small,.menu nav em{font:500 12px var(--mono);font-style:normal}
.menu :focus-visible{outline-color:#000}
.menu-ft{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:28px;font:500 12px var(--mono);text-transform:uppercase}

/* page wrap + footer curtain */
.page-wrap{position:relative;z-index:2;background:var(--bg)}
html.curtain .page-wrap{margin-bottom:var(--foot-h);box-shadow:0 30px 60px -20px rgba(0,0,0,.6)}
html.curtain .foot{position:fixed;left:0;right:0;bottom:0;z-index:1}
#main{outline:none;display:block}
.foot{background:var(--lime);color:#000;overflow:hidden}
.foot-in{padding:56px var(--pad) 20px}
.foot-cols{display:grid;grid-template-columns:1fr 1fr 1fr 1.4fr;gap:28px}
.foot .lbl{color:#000;opacity:.6;margin-bottom:10px}
.foot .fine{color:#000;opacity:.75}
.foot ul li{padding:2px 0}
.foot a{text-decoration:none}.foot a:hover{text-decoration:underline}
.foot :focus-visible{outline-color:#000}
.motion-btn{font:600 13px var(--mono);text-transform:uppercase;border:1.5px solid #000;border-radius:999px;padding:8px 14px;margin-bottom:8px;min-height:40px}
.motion-btn b{margin-left:6px}
.foot-wm{margin:30px -0.04em 0;font-size:min(17.4vw,330px);line-height:.8;white-space:nowrap}
.foot-base{display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px;margin-top:16px;padding-top:14px;border-top:1.5px solid #000;font:500 11.5px var(--mono);text-transform:uppercase}
@media (max-width:820px){.foot-cols{grid-template-columns:1fr 1fr}}
@media (max-width:480px){.foot-cols{grid-template-columns:1fr}}

/* wordmark */
.wm{display:inline-flex;align-items:flex-start;font-weight:850;letter-spacing:-.015em;white-space:nowrap}
.wm .ch{display:inline-block;font-variation-settings:"wdth" var(--w,72);font-weight:calc(780 + var(--k,0) * 120);transition:font-variation-settings .35s var(--ease),font-weight .35s,color .3s}
.wm .reg{font-size:.32em;margin-top:.12em;font-variation-settings:"wdth" 100}
html.calm .wm .ch{transition:none}

/* wipe transition */
.wipe{position:fixed;inset:0;z-index:80;background:var(--lime);color:#000;display:grid;place-items:center;pointer-events:none;transform:translateY(100%)}
.wipe b{font:900 clamp(40px,12vw,200px)/.85 var(--sans);font-variation-settings:"wdth" 62;text-align:center;padding:0 var(--pad);max-width:100%;overflow-wrap:anywhere}
.wipe.in{transform:none;transition:transform .38s cubic-bezier(.7,0,.3,1)}
.wipe.out{transform:translateY(-100%);transition:transform .42s cubic-bezier(.7,0,.3,1)}

/* cursor */
.cursor{position:fixed;inset:0;pointer-events:none;z-index:120;opacity:0;transition:opacity .2s}
.cursor.on{opacity:1}
.cursor.text{opacity:0}
.c-dot,.c-ring{position:fixed;left:0;top:0;will-change:transform}
.c-dot{width:6px;height:6px;margin:-3px 0 0 -3px;border-radius:50%;background:var(--lime);mix-blend-mode:difference}
.c-ring{--sz:36px;--p:1;width:calc(var(--sz) * var(--p));height:calc(var(--sz) * var(--p));margin:calc(var(--sz) * var(--p) / -2) 0 0 calc(var(--sz) * var(--p) / -2);border-radius:50%;border:1px solid var(--lime);display:grid;place-items:center;transition:width .3s var(--ease),height .3s var(--ease),margin .3s var(--ease),background .3s,border-color .3s}
.c-ring em{font:600 10px/1 var(--mono);font-style:normal;letter-spacing:.08em;color:#000;opacity:0;transition:opacity .2s}
.cursor.hover .c-ring{--sz:56px;background:rgba(215,255,63,.12)}
.cursor.label .c-ring{--sz:84px;background:var(--lime);border-color:var(--lime)}
.cursor.label .c-ring em{opacity:1}
.cursor.label .c-dot{opacity:0}
/* shrink in place while pressed (size, not scale, so the ring stays under the pointer) */
.cursor.press .c-ring{--p:.82}
html.has-cursor,html.has-cursor a,html.has-cursor button,html.has-cursor label,html.has-cursor summary,html.has-cursor [data-cursor]{cursor:none}
html.has-cursor input:not([type=checkbox]):not([type=radio]),html.has-cursor textarea,html.has-cursor select{cursor:auto}
html.calm .cursor{transition:none}

/* grain */
.grain{position:fixed;inset:-50%;z-index:110;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");animation:grain 1s steps(4) infinite}
@keyframes grain{0%{transform:translate(0,0)}25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
html.calm .grain{animation:none}

/* reveals */
.rv{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:var(--d,0ms)}
.rv.in{opacity:1;transform:none}
html.calm .rv{opacity:1;transform:none;transition:none}

/* sections */
.sec{padding:clamp(56px,9vw,130px) var(--pad)}
.sec-top{display:flex;justify-content:space-between;align-items:flex-end;flex-wrap:wrap;gap:16px 30px;margin-bottom:30px}
.sec-h{font:850 clamp(30px,4.6vw,64px)/.95 var(--sans);font-variation-settings:"wdth" 70;text-transform:uppercase;letter-spacing:-.01em}
.sec-h sup,.pg-title sup{font:500 .26em var(--mono);vertical-align:top;margin-left:.3em;letter-spacing:0;color:var(--lime)}
.pg{padding-top:clamp(40px,7vw,90px)}
.pg-head{margin-bottom:clamp(36px,6vw,80px);max-width:1200px}
.pg-title{font:850 clamp(56px,12vw,190px)/.86 var(--sans);font-variation-settings:"wdth" 66;text-transform:uppercase;letter-spacing:-.02em;margin-top:14px}
.pg-title em,.cta-big em,.man-h em{font-style:italic;font-weight:300;font-variation-settings:"wdth" 110;color:var(--lime);text-transform:none}
.pg-dek{max-width:58ch;margin-top:26px;font-size:clamp(16px,1.4vw,19px);color:#CFCDC6}
.pg-dek a{color:var(--lime)}

/* marquee */
.marquee{position:relative;border-block:1px solid var(--line);background:var(--lime);color:#000;overflow:hidden;display:flex;align-items:center}
.mq-track{display:flex;width:max-content;animation:mq 38s linear infinite}
.mq-track p{display:flex;align-items:center;white-space:nowrap;font:900 clamp(26px,4vw,54px)/1 var(--sans);font-variation-settings:"wdth" 62;padding:14px 0}
.mq-track span{padding:0 .4em}
.mq-track i{font-style:normal;font-size:.6em}
.marquee:hover .mq-track,.marquee.paused .mq-track,html.calm .mq-track{animation-play-state:paused}
@keyframes mq{to{transform:translateX(-50%)}}
.mq-btn{position:absolute;right:8px;top:50%;translate:0 -50%;background:#000;color:var(--lime);font:600 10.5px var(--mono);text-transform:uppercase;letter-spacing:.06em;padding:6px 10px;border-radius:999px;min-height:30px}

/* hero */
.hero{position:relative;min-height:calc(100svh - 104px);display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;overflow:hidden;padding:20px var(--pad) 26px;isolation:isolate}
.hero-dark{position:absolute;inset:0;z-index:-1;overflow:hidden;-webkit-mask-image:radial-gradient(circle 17vmax at var(--mx) var(--my),#000 25%,transparent 72%);mask-image:radial-gradient(circle 17vmax at var(--mx) var(--my),#000 25%,transparent 72%);animation:drift 14s ease-in-out infinite alternate}
.hero.lit .hero-dark,html.calm .hero-dark{animation:none}
@keyframes drift{0%{--mx:70%;--my:34%}50%{--mx:26%;--my:62%}100%{--mx:82%;--my:70%}}
.hero-notes{display:grid;align-content:space-around;height:100%;padding:4vh 0;transform:rotate(-4deg) scale(1.15)}
.hero-notes p{font:500 clamp(13px,1.5vw,20px)/1 var(--mono);color:var(--lime);white-space:nowrap;letter-spacing:.06em;opacity:.85}
.hero-notes p:nth-child(even){padding-left:12vw;color:var(--fg)}
.hero-spot{position:absolute;inset:0;z-index:-2;background:radial-gradient(circle 30vmax at var(--mx) var(--my),rgba(215,255,63,.13),transparent 70%);transition:opacity .4s}
.hero-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;flex-wrap:wrap}
.status{display:flex;align-items:center;gap:10px;font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.06em}
.status i{width:8px;height:8px;border-radius:50%;background:var(--lime);box-shadow:0 0 0 0 rgba(215,255,63,.6);animation:ping 2s infinite}
@keyframes ping{70%{box-shadow:0 0 0 10px rgba(215,255,63,0)}100%{box-shadow:0 0 0 0 rgba(215,255,63,0)}}
html.calm .status i{animation:none}
.hero-clock{display:flex;flex-direction:column;align-items:flex-end;gap:4px;font:500 11.5px var(--mono);text-transform:uppercase;color:var(--mute);text-align:right}
.hero-clock b{color:var(--fg);font-weight:600;margin-left:6px}
.hero-clock span:last-child{color:var(--lime)}
.hero-wm{align-self:center;font-size:min(18.6vw,400px);line-height:.78;margin:0 -0.05em;color:var(--fg);touch-action:pan-y}
.hero-wm .ch{color:color-mix(in srgb,var(--fg),var(--lime) calc(var(--k,0) * 100%))}
.hero-bot{display:grid;grid-template-columns:1fr 1.1fr auto;align-items:end;gap:30px;padding-right:28px}
.tagline{font:850 clamp(22px,2.6vw,40px)/.95 var(--sans);font-variation-settings:"wdth" 70;text-transform:uppercase;color:var(--lime)}
.hero-copy{max-width:46ch;color:#CFCDC6;font-size:15px}
.explore{display:inline-flex;align-items:center;gap:12px;font:850 clamp(18px,2vw,28px)/1 var(--sans);font-variation-settings:"wdth" 75;text-transform:uppercase;text-decoration:none;border-bottom:2px solid var(--lime);padding-bottom:6px;transition:font-variation-settings .3s var(--ease),color .3s}
.explore:hover{color:var(--lime);font-variation-settings:"wdth" 120}
.scroll-ind{position:absolute;right:calc(var(--pad) - 6px);bottom:150px;writing-mode:vertical-rl;font:500 10px var(--mono);letter-spacing:.2em;text-transform:uppercase;color:var(--mute);padding-bottom:22px}
.scroll-ind::after{content:"";position:absolute;left:50%;bottom:-2px;width:1px;height:16px;background:var(--lime);animation:sc 1.6s var(--ease) infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
html.calm .scroll-ind::after{animation:none}
@media (max-width:900px){.hero-bot{grid-template-columns:1fr}.hero-clock{align-items:flex-start;text-align:left}.hero{min-height:auto;row-gap:32px;padding-bottom:56px}.hero-wm{font-size:27vw;line-height:.82}.scroll-ind{display:none}}
.brk{display:none}
@media (max-width:600px){.hero-wm .wm{flex-wrap:wrap}.hero-wm .brk{display:block;flex-basis:100%;height:0}.hero-wm{font-size:29vw;line-height:.8}}

/* filters */
.filters{display:flex;flex-wrap:wrap;gap:8px}
.flt{font:600 12px/1 var(--mono);text-transform:uppercase;letter-spacing:.05em;border:1px solid var(--line);border-radius:999px;padding:10px 14px;text-decoration:none;min-height:38px;display:inline-flex;align-items:center;transition:background .2s,color .2s,border-color .2s}
.flt sup{font-size:.8em;margin-left:4px;opacity:.6}
.flt:hover{border-color:var(--fg)}
.flt.on{background:var(--lime);color:#000;border-color:var(--lime)}

/* work index rows */
.work-index{outline:none}
.rows{border-top:1px solid var(--line);margin-bottom:40px}
.row-li.pop{animation:pop .5s var(--ease)}
@keyframes pop{from{opacity:0;transform:translateY(14px)}}
html.calm .row-li.pop{animation:none}
.row{position:relative;display:grid;grid-template-columns:90px minmax(0,1fr) 220px 56px;align-items:center;gap:20px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;overflow:hidden;isolation:isolate}
.row::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--row-bg,#1a1a1a);transform:scaleY(0);transform-origin:bottom;transition:transform .45s var(--ease)}
.row:hover::before,.row:focus-visible::before{transform:none}
.r-id,.r-kind,.r-year{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.05em;color:var(--mute);transition:color .3s}
.r-year{text-align:right}
.r-title{font:850 clamp(36px,7.4vw,118px)/.92 var(--sans);font-variation-settings:"wdth" 72;letter-spacing:-.015em;min-width:0}
.r-title span{display:inline-block;transition:transform .45s var(--ease),color .3s,font-variation-settings .45s var(--ease),letter-spacing .45s}
.r-thumb,.r-concept{display:none}
.row:hover .r-id,.row:hover .r-kind,.row:hover .r-year,.row:focus-visible .r-kind{color:var(--row-fg,var(--fg))}
/* each row previews its project's universe on hover */
.row.u-rave{--row-bg:#120c2b;--row-fg:#D7FF3F}
.row.u-rave:hover .r-title span,.row.u-rave:focus-visible .r-title span{color:#D7FF3F;font-variation-settings:"wdth" 62;transform:scaleY(1.35);transform-origin:bottom}
.row.u-motel{--row-bg:#F5A3B5;--row-fg:#2B2523}
.row.u-motel:hover .r-title span,.row.u-motel:focus-visible .r-title span{font-family:var(--script);font-weight:400;color:#fff;text-shadow:3px 3px 0 #2B2523;letter-spacing:0;font-size:.8em}
.row.u-offgrid{--row-bg:#FF5A1F;--row-fg:#1C1D1A}
.row.u-offgrid:hover .r-title span,.row.u-offgrid:focus-visible .r-title span{color:#1C1D1A;font-variation-settings:"wdth" 62;letter-spacing:.06em}
.row.u-error{--row-bg:#EEF0FF;--row-fg:#121212}
.row.u-error:hover .r-title span,.row.u-error:focus-visible .r-title span{color:#121212;text-shadow:-6px 0 rgba(255,0,90,.55),6px 0 rgba(0,90,255,.55);font-variation-settings:"wdth" 125;font-size:.8em}
.row.u-sunday{--row-bg:#EFE5CF;--row-fg:#2E1C12}
.row.u-sunday:hover .r-title span,.row.u-sunday:focus-visible .r-title span{font-family:var(--serif);font-style:italic;font-weight:500;color:#2E1C12;letter-spacing:-.02em}
.row.u-objects{--row-bg:#F3F0EA;--row-fg:#111}
.row.u-objects:hover .r-title span,.row.u-objects:focus-visible .r-title span{font-family:var(--serif);font-weight:400;color:#111;font-size:.82em;letter-spacing:-.01em}
.peek{position:fixed;left:0;top:0;z-index:40;width:min(300px,24vw);pointer-events:none;opacity:0;scale:.85;transition:opacity .25s,scale .35s var(--ease)}
.peek.on{opacity:1;scale:1}
.peek-in{aspect-ratio:4/5;overflow:hidden;box-shadow:0 30px 60px -20px rgba(0,0,0,.8)}
.peek-meta{font:500 10.5px var(--mono);text-transform:uppercase;letter-spacing:.05em;background:#000;color:var(--lime);padding:6px 8px}
@media (hover:none),(pointer:coarse){.peek{display:none}}
@media (hover:none),(pointer:coarse),(max-width:760px){
  .row{grid-template-columns:minmax(0,1fr) 92px;grid-template-areas:"id thumb" "title thumb" "kind thumb" "concept concept";gap:4px 14px;padding:18px 0}
  .r-id{grid-area:id}.r-title{grid-area:title;font-size:clamp(34px,10vw,64px)}.r-kind{grid-area:kind}.r-year{display:none}
  .r-thumb{display:block;grid-area:thumb;align-self:center;aspect-ratio:4/5;overflow:hidden}
  .r-concept{display:block;grid-area:concept;font-size:14px;color:#CFCDC6;margin-top:8px}
  .row:hover .r-concept{color:var(--row-fg)}
}

/* wordmark dividers */
.wm-div{position:relative;overflow:hidden;padding:20px 0 8px;border-block:1px solid var(--line)}
.wm-div .wm{font-size:min(19vw,360px);line-height:.8;margin-left:-.04em}
.wm-outline .ch{color:transparent;-webkit-text-stroke:1.5px var(--lime)}
.wm-outline .ch{color:rgba(215,255,63,calc(var(--k,0)))}
.wm-stretch{padding:6vw 0}
.wm-stretch .wm{transform:scaleY(1.9);transform-origin:center;color:var(--fg)}
.wm-stretch .ch{color:color-mix(in srgb,var(--fg),var(--lime) calc(var(--k,0) * 100%))}
.wm-note{position:absolute;right:var(--pad);bottom:10px;font:500 10.5px var(--mono);letter-spacing:.08em;color:var(--mute);background:var(--bg);padding:3px 6px}

/* manifesto */
.manifesto{position:relative}
.man-h{font:850 clamp(40px,8.4vw,150px)/.9 var(--sans);font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:-.02em;margin:18px 0 50px;max-width:14ch}
.twice{position:relative;display:inline-block;color:var(--lime)}
.twice em{position:absolute;left:.06em;top:.06em;z-index:-1;color:transparent;-webkit-text-stroke:1px var(--lime);font-style:normal;font-weight:850;font-variation-settings:"wdth" 64;white-space:nowrap;transition:transform .5s var(--ease)}
.twice:hover em{transform:translate(.08em,.08em)}
.man-grid{position:relative;display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:24px}
.man-grid p{font-size:clamp(15px,1.3vw,18px);color:#D3D1CA}
.man-grid p:nth-of-type(1){grid-column:1/5}
.man-grid p:nth-of-type(2){grid-column:6/10;margin-top:70px}
.man-grid p:nth-of-type(3){grid-column:9/13;margin-top:150px}
.num{display:block;font:500 12px var(--mono);color:var(--lime);margin-bottom:8px}
.sticker{position:absolute;left:52%;top:-40px;rotate:-8deg;background:var(--orange);color:#000;font:700 12px var(--mono);text-transform:uppercase;padding:10px 14px;border-radius:999px}
.annot{position:absolute;font:500 11px var(--mono);color:var(--mute)}
.annot.a1{left:0;top:-26px}
@media (max-width:900px){.man-grid{grid-template-columns:1fr}.man-grid p:nth-of-type(n){grid-column:auto;margin-top:0}.sticker{position:static;display:inline-block;justify-self:start}.annot{display:none}}

/* services preview index */
.svx{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(24px,4vw,60px);align-items:start}
.svx-list{border-top:1px solid var(--line)}
.svx-list button{width:100%;display:grid;grid-template-columns:48px 1fr auto;align-items:center;gap:16px;text-align:left;padding:16px 0;border-bottom:1px solid var(--line);color:var(--mute);transition:color .3s,padding .4s var(--ease)}
.svx-list button span{font:850 clamp(26px,3.6vw,52px)/1 var(--sans);font-variation-settings:"wdth" 70;text-transform:uppercase;transition:font-variation-settings .4s var(--ease)}
.svx-list small{font:500 12px var(--mono)}
.svx-list i{font-style:normal;opacity:0;transform:translateX(-10px);transition:.3s}
.svx-list button.on{color:var(--fg);padding-left:14px}
.svx-list button.on span{font-variation-settings:"wdth" 110;color:var(--lime)}
.svx-list button.on i{opacity:1;transform:none;color:var(--lime)}
.svx-panel{position:sticky;top:100px;border:1px solid var(--line);background:var(--bg2);padding:22px;display:grid;gap:20px;min-height:430px}
.svx-art{aspect-ratio:16/10;background:#000;border:1px solid var(--line);overflow:hidden;container-type:inline-size}
.svx-tx{display:grid;gap:10px}
.svx-short{font:850 24px/1.05 var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase}
.svx-links{display:flex;flex-wrap:wrap;gap:16px;align-items:center;margin-top:8px}
@media (max-width:900px){.svx{grid-template-columns:1fr}.svx-panel{position:static;min-height:0}}

/* service preview animations */
.sv{position:relative;width:100%;height:100%;display:grid;place-items:center;font-family:var(--sans);color:var(--fg);overflow:hidden}
.sv-strategy span{position:absolute;font:900 13cqw/1 var(--sans);font-variation-settings:"wdth" 62;color:#333;animation:sw 4s infinite;opacity:0}
.sv-strategy span:nth-child(2){animation-delay:1s}.sv-strategy span:nth-child(3){animation-delay:2s}.sv-strategy span:nth-child(4){animation-delay:3s}
.sv-strategy b{position:relative;font:900 22cqw/1 var(--sans);font-variation-settings:"wdth" 125;color:var(--lime);animation:why 4s infinite}
@keyframes sw{0%{opacity:0;transform:translate(-30cqw,-12cqw)}20%{opacity:1}40%{opacity:0;transform:translate(30cqw,12cqw)}100%{opacity:0}}
@keyframes why{0%,100%{font-variation-settings:"wdth" 62}50%{font-variation-settings:"wdth" 125}}
.sv-identity{display:flex;gap:2cqw;align-items:center;justify-content:center}
.sv-identity b{font:900 26cqw/1 var(--sans);animation:idw 3s var(--ease) infinite alternate}
.sv-identity b:nth-child(2){color:var(--lime);animation-delay:.3s}.sv-identity b:nth-child(3){animation-delay:.6s}
.sv-identity i{position:absolute;left:20%;right:20%;bottom:18%;height:.8cqw;background:var(--lime);animation:bar 3s var(--ease) infinite alternate;transform-origin:left}
@keyframes idw{from{font-variation-settings:"wdth" 62}to{font-variation-settings:"wdth" 125}}
@keyframes bar{from{transform:scaleX(.1)}to{transform:scaleX(1)}}
.sv-win{width:70%;aspect-ratio:16/10;border:1px solid #444;background:#111;display:grid;grid-template-rows:12% 1fr 1fr;gap:4%;padding:4%}
.sv-win i{background:#262626}.sv-win i:first-child{background:#333;width:40%}.sv-win i:nth-child(2){background:var(--lime);animation:blk 3s infinite}
@keyframes blk{0%,40%{transform:scaleX(.6);transform-origin:left}60%,100%{transform:scaleX(1)}}
.sv-cur{position:absolute;left:60%;top:58%;width:0;height:0;border-left:3cqw solid #fff;border-bottom:3cqw solid transparent;animation:cur 3s var(--ease) infinite}
@keyframes cur{0%{transform:translate(20cqw,16cqw)}40%{transform:translate(-8cqw,-6cqw)}45%{transform:translate(-8cqw,-6cqw) scale(.8)}50%,100%{transform:translate(-8cqw,-6cqw)}}
.sv-subj{width:22cqw;aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 35% 30%,#F5A3B5,#5E1A1A)}
.sv-frame{position:absolute;width:34cqw;aspect-ratio:4/5;border:.4cqw solid var(--lime);animation:crop 4s var(--ease) infinite alternate}
.sv-artdir small{position:absolute;left:4cqw;bottom:4cqw;font:500 2.6cqw var(--mono);color:var(--lime)}
@keyframes crop{0%{transform:translate(-20cqw,-4cqw) scale(1.2)}100%{transform:translate(6cqw,2cqw) scale(.9)}}
.sv-motion{display:flex;gap:6cqw;align-items:flex-end;justify-content:center;padding-bottom:16%}
.sv-motion i{width:8cqw;aspect-ratio:1;border-radius:50%;background:var(--lime);animation:bounce 1.2s cubic-bezier(.3,0,.3,1) infinite alternate}
.sv-motion i:nth-child(2){animation-delay:.15s;background:var(--fg)}.sv-motion i:nth-child(3){animation-delay:.3s;background:var(--orange)}
.sv-motion span{position:absolute;left:15%;right:15%;bottom:16%;height:1px;background:#444}
@keyframes bounce{from{transform:translateY(0) scaleY(.85)}to{transform:translateY(-26cqw) scaleY(1.05)}}
.sv-campaign i{position:absolute;width:30cqw;aspect-ratio:3/4;display:grid;place-items:center;font:900 7cqw var(--sans);font-variation-settings:"wdth" 62;font-style:normal;border:1px solid #000;animation:fan 4s var(--ease) infinite alternate}
.sv-campaign i:nth-child(1){background:var(--fg);color:#000;--r:-14deg;--x:-18cqw}
.sv-campaign i:nth-child(2){background:var(--orange);color:#000;--r:0deg;--x:0cqw}
.sv-campaign i:nth-child(3){background:var(--lime);color:#000;--r:14deg;--x:18cqw}
@keyframes fan{0%,20%{transform:none}80%,100%{transform:translateX(var(--x)) rotate(var(--r))}}
html.calm .sv *{animation:none!important}
html.calm .sv-campaign i{transform:translateX(var(--x)) rotate(var(--r))}

/* clients */
.cl-flow{font:850 clamp(26px,5.4vw,84px)/1.06 var(--sans);overflow-wrap:anywhere;text-transform:uppercase;letter-spacing:-.01em}
.cl{position:relative;display:inline;transition:color .3s,font-variation-settings .4s var(--ease);outline-offset:4px}
.cl.w0{font-variation-settings:"wdth" 64}.cl.w1{font-variation-settings:"wdth" 110;font-weight:300}.cl.w2{font-variation-settings:"wdth" 80;font-style:italic}.cl.w3{font-variation-settings:"wdth" 70;color:transparent;-webkit-text-stroke:1px var(--fg)}
.cl sup{font:500 11px var(--mono);letter-spacing:.06em;color:var(--lime);vertical-align:top;margin-left:4px;opacity:0;transition:opacity .3s;-webkit-text-stroke:0}
.cl:hover,.cl:focus{color:var(--lime);-webkit-text-stroke-color:var(--lime)}
.cl:hover sup,.cl:focus sup{opacity:1}
.cl-flow i{font-style:normal;font-weight:200;color:var(--mute);margin:0 .2em}

/* CTA */
.cta-end{padding:clamp(70px,10vw,150px) var(--pad);border-top:1px solid var(--line);background:var(--bg)}
.cta-big{font:850 clamp(52px,11vw,200px)/.86 var(--sans);font-variation-settings:"wdth" 64;text-transform:uppercase;letter-spacing:-.02em;margin:16px 0 40px}
.cta-big em{display:inline-block;transition:font-variation-settings .5s var(--ease)}
.cta-big:hover em{font-variation-settings:"wdth" 125}
.cta-row{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;flex-wrap:wrap}
.cta-contacts{display:grid;gap:6px;text-align:right}
.cta-contacts>a{font:600 clamp(18px,2vw,26px) var(--sans);text-decoration:none;border-bottom:1px solid var(--line)}
.cta-contacts>a:hover{color:var(--lime)}
.socials{display:flex;gap:16px;flex-wrap:wrap;justify-content:flex-end;font:500 12px var(--mono);text-transform:uppercase}
.socials a{text-decoration:none;display:inline-flex;min-height:32px;align-items:center}
.socials a:hover{color:var(--lime)}
@media (max-width:700px){.cta-contacts{text-align:left}.socials{justify-content:flex-start}}

/* work page */
.work-tools{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px;margin-bottom:40px}
.sort{display:flex;align-items:center;gap:10px;font:500 12px var(--mono);text-transform:uppercase}
.sort select{background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:9px 14px;min-height:38px}
.wgrid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));gap:clamp(20px,3vw,44px) clamp(16px,2vw,28px);align-items:start}
.wcard{min-width:0}
.wcard.s0{grid-column:1/8}.wcard.s1{grid-column:9/13;margin-top:18vw}.wcard.s2{grid-column:2/6}.wcard.s3{grid-column:8/13;margin-top:-6vw}.wcard.s4{grid-column:1/6;margin-top:-2vw}.wcard.s5{grid-column:7/11;margin-top:8vw}
.wcard>a{position:relative;display:block;text-decoration:none;overflow:hidden}
.wc-art{aspect-ratio:4/5;overflow:hidden;background:#111}
.wc-art>.art{transition:transform .8s var(--ease)}
.wc-meta{position:absolute;inset:auto 0 0 0;padding:16px;background:rgba(0,0,0,.86);backdrop-filter:blur(6px);color:var(--fg);display:grid;gap:6px;font:500 11px var(--mono);text-transform:uppercase;letter-spacing:.04em;transform:translateY(101%);transition:transform .45s var(--ease)}
.wc-meta p{font:400 14px/1.45 var(--sans);text-transform:none;letter-spacing:0;color:#E2E0D9}
.wc-meta span:first-child{color:var(--lime)}
.wcard>a:hover .wc-meta,.wcard>a:focus-visible .wc-meta{transform:none}
.wc-cap{display:grid;grid-template-columns:1fr auto;gap:2px 14px;margin-top:14px;font:500 11.5px var(--mono);text-transform:uppercase;color:var(--mute)}
.wc-cap h2{grid-column:1/-1;font:850 clamp(26px,3vw,44px)/1 var(--sans);font-variation-settings:"wdth" 70;color:var(--fg);letter-spacing:-.01em}
.wc-cap span:last-child{grid-row:3;grid-column:2;text-align:right}
@media (hover:none),(pointer:coarse){.wc-meta{position:static;transform:none;background:var(--bg2)}}
@media (max-width:900px){.wcard[class*=" s"]{grid-column:1/-1;margin-top:0}.wcard.s1,.wcard.s3,.wcard.s5{grid-column:3/13}.wcard.s0,.wcard.s2,.wcard.s4{grid-column:1/11}}
@media (max-width:560px){.wcard[class*=" s"]{grid-column:1/-1!important}}

/* services page */
.sv-layout{display:grid;grid-template-columns:minmax(260px,.8fr) 2fr;gap:clamp(24px,4vw,64px);align-items:start}
.sv-index{position:sticky;top:96px;border-top:1px solid var(--line)}
.sv-index a{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:10px;padding:14px 0;border-bottom:1px solid var(--line);text-decoration:none;color:var(--mute);transition:color .25s,padding .35s var(--ease)}
.sv-index a span{font:850 clamp(20px,2.2vw,30px)/1 var(--sans);font-variation-settings:"wdth" 72;text-transform:uppercase;transition:font-variation-settings .35s var(--ease)}
.sv-index small{font:500 11px var(--mono)}
.sv-index a:hover{color:var(--fg)}
.sv-index a.on{color:var(--lime);padding-left:12px}
.sv-index a.on span{font-variation-settings:"wdth" 115}
.in-brief{font-style:normal;color:var(--orange);opacity:0;transition:opacity .2s}
.sv-index a.added .in-brief{opacity:1}
.svp{display:grid;gap:36px}
.svp-top{display:grid;grid-template-columns:1fr 1.1fr;gap:28px;align-items:center}
.svp-art{aspect-ratio:4/3;background:#000;border:1px solid var(--line);container-type:inline-size;overflow:hidden}
.svp h2{font:850 clamp(36px,5vw,76px)/.92 var(--sans);font-variation-settings:"wdth" 66;text-transform:uppercase;margin:6px 0 12px}
.svp-short{font:600 20px/1.2 var(--sans);color:var(--lime);margin-bottom:10px}
.svp-cols{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;border-top:1px solid var(--line);padding-top:24px}
.svp h3{font:500 11.5px var(--mono);text-transform:uppercase;letter-spacing:.08em;color:var(--mute);margin:0 0 10px}
.svp-cols h3+p+h3{margin-top:18px}
.svp-cols li{padding:6px 0;border-bottom:1px dashed var(--line);font-size:15px}
.svp-process ol{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px;counter-reset:s}
.svp-process li{background:var(--bg2);border:1px solid var(--line);padding:16px;display:grid;gap:6px;font-size:14px;color:#CFCDC6;position:relative}
.svp-process li b{font:850 18px var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase;color:var(--fg)}
.svp-process li::before{counter-increment:s;content:"0" counter(s);font:500 11px var(--mono);color:var(--lime)}
.svp-cta{display:flex;flex-wrap:wrap;gap:20px;align-items:center}
.brief-tray{position:fixed;left:50%;bottom:16px;translate:-50% 0;z-index:45;width:min(760px,calc(100% - 24px));display:flex;justify-content:space-between;align-items:center;gap:16px;background:var(--lime);color:#000;padding:14px 18px;box-shadow:0 20px 40px -10px rgba(0,0,0,.6);animation:up .4s var(--ease)}
.brief-tray .lbl,.brief-tray .fine{color:#000;opacity:.7}
.tray-list{font:850 18px/1.1 var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase}
.tray-act{display:flex;gap:14px;align-items:center;flex:none}
.brief-tray .pill-link{border-color:#000}.brief-tray .pill-link:hover{background:#000;color:var(--lime)}
.brief-tray :focus-visible{outline-color:#000}
@keyframes up{from{transform:translateY(30px);opacity:0}}
@media (max-width:1100px){.svp-cols{grid-template-columns:1fr 1fr}.svp-process ol{grid-template-columns:1fr 1fr}}
@media (max-width:900px){.sv-layout{grid-template-columns:1fr}.sv-index{position:static}.svp-top{grid-template-columns:1fr}.brief-tray{flex-direction:column;align-items:flex-start}}
@media (max-width:560px){.svp-cols,.svp-process ol{grid-template-columns:1fr}}

/* studio */
.principles ol{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);margin:30px 0 clamp(60px,9vw,120px)}
.principles li{display:grid;grid-template-columns:auto 1fr;gap:4px 20px;padding:26px 20px 26px 0;border-bottom:1px solid var(--line);outline-offset:-2px;transition:background .3s,color .3s,padding .4s var(--ease)}
.principles li:nth-child(odd){border-right:1px solid var(--line)}
.principles li:nth-child(even){padding-left:20px}
.pr-n{grid-row:span 2;font:850 clamp(40px,5vw,72px)/.9 var(--sans);font-variation-settings:"wdth" 62;color:var(--lime);transition:font-variation-settings .4s var(--ease)}
.principles b{font:850 clamp(20px,2vw,28px)/1.1 var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase}
.principles p{color:#CFCDC6}
.principles li:hover,.principles li:focus{background:var(--lime);color:#000}
.principles li:hover p,.principles li:focus p,.principles li:hover .pr-n,.principles li:focus .pr-n{color:#000}
.principles li:hover .pr-n,.principles li:focus .pr-n{font-variation-settings:"wdth" 125}
@media (max-width:760px){.principles ol{grid-template-columns:1fr}.principles li:nth-child(n){border-right:0;padding-left:0}}
.team-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;margin-bottom:clamp(60px,9vw,120px)}
.member h3{font:850 22px/1.1 var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase;margin-top:14px}
.member .role{font:500 11.5px var(--mono);text-transform:uppercase;color:var(--lime);margin:4px 0 8px}
.member p:last-child{font-size:14px;color:#CFCDC6}
.mono-art{position:relative;aspect-ratio:4/5;overflow:hidden;display:grid;place-items:center;container-type:inline-size;transition:transform .5s var(--ease)}
.mono-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle,rgba(0,0,0,.35) 30%,transparent 32%) 0 0/6px 6px;mix-blend-mode:multiply;opacity:.5}
.mono-art b{font:900 58cqw/.8 var(--sans);font-variation-settings:"wdth" 62;letter-spacing:-.04em;transition:font-variation-settings .5s var(--ease)}
.mono-art span{position:absolute;left:6cqw;bottom:6cqw;font:600 4.4cqw var(--mono);letter-spacing:.05em}
.member:hover .mono-art b{font-variation-settings:"wdth" 125}
.hue-lime{background:var(--lime);color:#0B0B0B}.hue-blue{background:#3D5AFE;color:#EDEBE4}.hue-orange{background:#FF5A1F;color:#0B0B0B}.hue-pink{background:#F5A3B5;color:#0B0B0B}
@media (max-width:900px){.team-grid{grid-template-columns:1fr 1fr}}
.desk-top{position:relative;height:clamp(520px,52vw,640px);background:#16201A;background-image:linear-gradient(rgba(215,255,63,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(215,255,63,.07) 1px,transparent 1px);background-size:40px 40px;border:1px solid var(--line);overflow:hidden;margin-bottom:clamp(60px,9vw,120px);touch-action:none}
.d-item{position:absolute;left:var(--x);top:var(--y);rotate:var(--r);cursor:grab;user-select:none;touch-action:none;transition:box-shadow .2s,scale .2s;box-shadow:0 10px 20px -8px rgba(0,0,0,.6)}
.d-item.lift{scale:1.04;box-shadow:0 26px 40px -10px rgba(0,0,0,.75);cursor:grabbing}
.d-item figcaption{position:absolute;left:0;top:calc(100% + 6px);font:500 10px var(--mono);text-transform:uppercase;color:var(--lime);white-space:nowrap;letter-spacing:.04em}
.d-print{width:150px;aspect-ratio:3/4;background:#F2F0EA;color:#000;display:grid;place-items:center}
.dp-in{display:grid;font:900 34px/.8 var(--sans);font-variation-settings:"wdth" 62}
.dp-in b:last-child{transform:scaleY(1.8);transform-origin:top}
.d-chips{background:#fff;padding:10px;width:190px}
.d-chips div{display:grid;grid-template-columns:repeat(5,1fr);gap:4px}
.d-chips i{aspect-ratio:1/1.6}
.d-polaroid{background:#fff;padding:10px 10px 34px;width:160px}
.po-img{aspect-ratio:1;background:#D9D2C5;position:relative;overflow:hidden}
.po-img .ob-vase{font-size:9px;left:50%;bottom:8px}
.d-note{width:140px;aspect-ratio:1;background:var(--lime);color:#000;padding:14px;font:600 15px/1.3 var(--mono)}
.d-receipt{width:130px;background:#F7F6F2;color:#222;padding:14px 10px 20px;font:500 11px/1.5 var(--mono);clip-path:polygon(0 0,100% 0,100% 100%,90% 97%,80% 100%,70% 97%,60% 100%,50% 97%,40% 100%,30% 97%,20% 100%,10% 97%,0 100%)}
.d-tag{background:transparent;box-shadow:none}
.d-tag .mo-tag{--t:12px;position:static}
@media (max-width:700px){.desk-top{height:720px}.d-item{scale:.85}}
.proc{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;margin:30px 0 clamp(60px,9vw,120px);border-top:1px solid var(--line)}
.proc li{padding:22px 20px 22px 0;border-right:1px solid var(--line);display:grid;gap:8px}
.proc li+li{padding-left:20px}.proc li:last-child{border-right:0}
.pc-n{font:850 64px/.8 var(--sans);font-variation-settings:"wdth" 62;color:transparent;-webkit-text-stroke:1px var(--lime)}
.proc b{font:850 22px var(--sans);font-variation-settings:"wdth" 80;text-transform:uppercase}
.proc p{color:#CFCDC6;font-size:14.5px}
@media (max-width:900px){.proc{grid-template-columns:1fr 1fr}.proc li:nth-child(n){border-right:0;padding-left:0;border-bottom:1px solid var(--line)}}
.two-col{display:grid;grid-template-columns:1fr 1.4fr;gap:30px}
.two-col p{font-size:clamp(16px,1.4vw,20px);color:#D3D1CA;margin-bottom:14px}
@media (max-width:800px){.two-col{grid-template-columns:1fr}}

/* journal */
.journal .filters{margin-bottom:36px}
.jgrid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:40px 24px}
.jcard{grid-column:span 2}
.jcard.j0{grid-column:span 4}
.jcard a{display:grid;gap:10px;text-decoration:none}
.j-art{aspect-ratio:16/10;overflow:hidden;background:#111;container-type:inline-size;transition:transform .5s var(--ease)}
.jcard a:hover .j-art{transform:rotate(-1deg) scale(.98)}
.jcard h2,.jcard h3{font:850 clamp(22px,2.2vw,32px)/1.02 var(--sans);font-variation-settings:"wdth" 74;text-transform:uppercase;transition:color .2s}
.jcard a:hover h2,.jcard a:hover h3{color:var(--lime)}
.jcard p:not(.j-meta){color:#CFCDC6;font-size:15px}
.j-meta{display:flex;flex-wrap:wrap;gap:6px 14px;font:500 11px var(--mono);text-transform:uppercase;color:var(--mute);align-items:center}
.j-meta span:first-child{color:var(--lime)}
.jgrid.two{grid-template-columns:1fr 1fr}.jgrid.two .jcard{grid-column:auto}
@media (max-width:900px){.jgrid{grid-template-columns:1fr 1fr}.jcard[class*=" j"]{grid-column:span 1}.jcard.j0{grid-column:1/-1}}
@media (max-width:560px){.jgrid,.jgrid.two{grid-template-columns:1fr}.jcard.j0{grid-column:auto}}
.ja{width:100%;height:100%;position:relative;overflow:hidden}
.ja-same{display:grid;grid-template-columns:repeat(3,1fr);gap:2cqw;padding:4cqw;background:#1a1a1a}
.ja-same span{display:grid;place-items:center;background:#2a2a2a;font:700 4cqw var(--sans);color:#555;border-radius:1cqw}
.ja-same .odd{background:var(--lime);color:#000;font-size:10cqw;font-weight:900;rotate:-6deg}
.ja-weird{background:var(--orange);display:grid;place-content:center;text-align:center;color:#000}
.ja-weird b{font:900 15cqw/.9 var(--sans);font-variation-settings:"wdth" 62}
.ja-weird b:last-child{font-variation-settings:"wdth" 125;letter-spacing:.2em;rotate:-4deg;font-weight:300;font-style:italic}
.ja-notice{background:#EDEBE4;color:#000;display:grid;place-items:center}
.ja-notice span{font:400 64cqw/.5 var(--serif);margin-top:30cqw}
.ja-notice small{position:absolute;left:4cqw;bottom:4cqw;font:500 3cqw var(--mono);text-transform:uppercase}
.ja-accident{background:#F2F0EA;display:grid;place-content:center;filter:contrast(1.4)}
.ja-accident b{font:900 22cqw/.75 var(--sans);font-variation-settings:"wdth" 62;color:#111;mix-blend-mode:multiply}
.ja-accident b:nth-child(2){color:var(--blue);translate:2cqw -1cqw;filter:blur(.3cqw);opacity:.8}
.ja-accident b:nth-child(3){color:#ff2d6f;translate:-1.5cqw -1cqw;opacity:.6}
.ja-grid{background:#0B0B0B;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:10cqw 10cqw}
.ja-grid i{position:absolute;left:30cqw;top:20cqw;width:30cqw;height:30cqw;background:var(--lime);rotate:9deg;translate:3cqw 2cqw}
.ja-grid b{position:absolute;left:34cqw;top:26cqw;font:900 14cqw/1 var(--sans);font-variation-settings:"wdth" 62;color:#000;rotate:9deg}
.article{max-width:980px;margin:0 auto}
.art-head{margin:30px 0}
.art-head h1{font:850 clamp(40px,7vw,104px)/.9 var(--sans);font-variation-settings:"wdth" 66;text-transform:uppercase;letter-spacing:-.015em;margin:16px 0}
.art-dek{font-size:clamp(18px,1.8vw,24px);color:#CFCDC6}
.art-cover{aspect-ratio:21/9;container-type:inline-size;overflow:hidden;margin-bottom:50px}
.art-body{max-width:66ch;margin:0 auto;font-size:clamp(17px,1.4vw,20px);line-height:1.7}
.art-body p+p{margin-top:1.1em}
.art-body p:first-child::first-letter{float:left;font:900 4.6em/.8 var(--sans);font-variation-settings:"wdth" 62;color:var(--lime);margin:.06em .1em 0 0}
.sig{font:500 13px var(--mono);color:var(--mute);text-transform:uppercase}
.related{margin-top:80px;border-top:1px solid var(--line);padding-top:24px}
.related .lbl{margin-bottom:20px}

/* contact */
.ct-grid{display:grid;grid-template-columns:1.6fr 1fr;gap:clamp(30px,5vw,80px);align-items:start}
.inq{display:grid;gap:22px}
.g2{display:grid;grid-template-columns:1fr 1fr;gap:22px}
.fld{display:grid;gap:8px;border:0;padding:0;margin:0;min-width:0}
.fld label,.fld legend{font:500 12px var(--mono);text-transform:uppercase;letter-spacing:.06em;color:#CFCDC6;padding:0}
.fld legend{margin-bottom:8px}
.req{color:var(--lime)}.opt{color:var(--mute);text-transform:none}
.fld input,.fld select,.fld textarea{width:100%;background:transparent;border:0;border-bottom:1.5px solid #3a3a3a;padding:12px 0;font-size:18px;color:var(--fg);border-radius:0;transition:border-color .2s;min-height:48px}
.fld select{background:var(--bg)}
.fld textarea{resize:vertical;line-height:1.5}
.fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--lime)}
.fld.bad input,.fld.bad select,.fld.bad textarea{border-color:var(--orange)}
.err{color:var(--orange);font:500 12.5px var(--mono);min-height:0}
.err:empty{display:none}
.count{justify-self:end;font:500 11px var(--mono);color:var(--mute)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative}
.chip input{position:absolute;opacity:0;inset:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:40px;padding:0 14px;border:1px solid var(--line);border-radius:999px;font-size:14px;transition:.2s}
.chip input:checked+span{background:var(--lime);color:#000;border-color:var(--lime)}
.chip input:focus-visible+span{outline:2px solid var(--lime);outline-offset:3px}
.fld.bad .chip span{border-color:rgba(255,90,31,.6)}
.check{display:flex;gap:12px;align-items:flex-start;text-transform:none!important;letter-spacing:0!important;font:400 15px/1.5 var(--sans)!important;color:var(--fg)!important}
.check input{width:20px;height:20px;min-height:0;accent-color:var(--lime);margin-top:2px;flex:none}
.privacy{font-size:14px;color:#CFCDC6;border-top:1px solid var(--line);padding-top:12px}
.privacy summary{font:500 12px var(--mono);text-transform:uppercase;cursor:pointer}
.privacy p{margin-top:8px}
.brief-note{font:500 12.5px var(--mono);text-transform:uppercase;color:var(--lime)}
.submit{justify-self:start}
.submit.loading{background:var(--lime);color:#000}
.form-state{font:500 13px var(--mono)}
.form-state:empty{display:none}
.form-state.bad{color:var(--orange)}
.ct-side{display:grid;gap:10px;border:1px solid var(--line);padding:22px;position:sticky;top:100px}
.ct-side p:not(.lbl){color:#CFCDC6;font-size:15px}
.ct-side .lbl{margin-top:10px}.ct-side .lbl:first-child{margin-top:0}
.ct-side a{color:var(--lime)}
.ct-side .socials{justify-content:flex-start}
.sent{display:grid;gap:18px;border:1px solid var(--lime);padding:clamp(22px,4vw,44px);outline:none}
.sent h2{font:850 clamp(34px,5vw,64px)/.95 var(--sans);font-variation-settings:"wdth" 68;text-transform:uppercase}
.sent p{color:#CFCDC6}
.sent-act{display:flex;flex-wrap:wrap;gap:18px;align-items:center}
@media (max-width:900px){.ct-grid{grid-template-columns:1fr}.ct-side{position:static}.g2{grid-template-columns:1fr}}

/* inbox */
.login-card{max-width:520px;margin:0 auto;border:1px solid var(--line);padding:clamp(22px,4vw,40px);display:grid;gap:18px}
.login-card h1{font:850 56px/.9 var(--sans);font-variation-settings:"wdth" 66;text-transform:uppercase}
.login-card form{display:grid;gap:20px}
.demo-acct{font:500 12px var(--mono);color:var(--mute)}
.demo-acct .txt-link{text-transform:none;color:var(--lime)}
.ib-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:8px}
.ib-head h1{font:850 clamp(48px,7vw,96px)/.9 var(--sans);font-variation-settings:"wdth" 66;text-transform:uppercase}
.inbox .filters{margin:20px 0}
.ib-list{border-top:1px solid var(--line)}
.ib-item{border-bottom:1px solid var(--line)}
.ib-item summary{display:grid;grid-template-columns:120px 1fr 1fr 120px 170px;gap:14px;align-items:center;padding:16px 0;cursor:pointer;list-style:none}
.ib-item summary::-webkit-details-marker{display:none}
.ib-id{font:500 11.5px var(--mono);color:var(--lime)}
.ib-item summary span,.ib-item time{font-size:14px;color:#CFCDC6}
.ib-item.st-replied .ib-id{color:var(--mute)}
.ib-item.st-new summary b::after{content:" ●";color:var(--lime);font-size:10px;vertical-align:middle}
.ib-item dl{display:grid;gap:10px;padding:0 0 16px 134px}
.ib-item dl div{display:grid;grid-template-columns:110px 1fr;gap:10px}
.ib-item dt{font:500 11px var(--mono);text-transform:uppercase;color:var(--mute)}
.pre{white-space:pre-wrap}
.ib-act{display:flex;gap:16px;align-items:center;padding:0 0 18px 134px}
.ib-empty{padding:50px 0;display:grid;gap:16px;justify-items:start;color:#CFCDC6}
@media (max-width:820px){.ib-item summary{grid-template-columns:1fr 1fr}.ib-item time{grid-column:1/-1}.ib-item dl,.ib-act{padding-left:0}.ib-item dl div{grid-template-columns:1fr}}

/* 404 */
.nf{min-height:70vh;display:grid;align-content:center;gap:20px;overflow:hidden}
.nf-h{font-size:min(19vw,360px);line-height:.8;margin-left:-.04em;color:transparent;-webkit-text-stroke:1px var(--lime)}
.nf-h .ch{color:rgba(215,255,63,calc(var(--k,0)))}
.nf-t{font:850 clamp(28px,4vw,56px)/1 var(--sans);font-variation-settings:"wdth" 70;text-transform:uppercase}
.nf .pill-link{justify-self:start}
/* keep the close button reachable above the open menu */
body.lock .top{z-index:70;background:transparent;border-color:transparent;color:#000}
body.lock .top .top-nav,body.lock .top .top-meta{visibility:hidden}
body.lock .logo{color:#000}

/* =========================================================
   Touch screens: no sticky hover fills after a tap
   ========================================================= */
@media (hover:none){
  .pill-link:hover:not(.on){background:transparent;color:inherit;border-color:currentColor}
  .brief-tray .pill-link:hover{background:transparent;color:inherit}
  .txt-link:hover,.txt-link.danger:hover,.socials a:hover,.cta-contacts>a:hover,.explore:hover,.cl:hover{color:inherit}
  .explore:hover{font-variation-settings:"wdth" 75}
  .principles li:hover{background:transparent;color:inherit}
  .principles li:hover p{color:#CFCDC6}.principles li:hover .pr-n{color:var(--lime);font-variation-settings:"wdth" 62}
  .jcard a:hover .j-art{transform:none}.jcard a:hover h2,.jcard a:hover h3{color:inherit}
  .member:hover .mono-art b{font-variation-settings:"wdth" 62}
  .flt:hover{border-color:var(--line)}.flt.on:hover{border-color:var(--lime)}
  .twice:hover em{transform:none}.cta-big:hover em{font-variation-settings:"wdth" 110}
  .logo:hover{font-variation-settings:"wdth" 75;color:inherit}
  a,button,summary,label{-webkit-tap-highlight-color:transparent}
}

/* =========================================================
   Phones: softer palette, comfortable margins, shorter pages
   ========================================================= */
@media (max-width:760px){
  :root{--bg:#121212;--bg2:#1A1A1A;--fg:#E3E0D7;--mute:#9A978F;--line:rgba(227,224,215,.13);--lime:#C6D58C;--orange:#E08A62;--pad:20px}
  html{scroll-behavior:auto}
  .grain,.hero-dark,.hero-spot{display:none}
  /* keep big type inside the screen edges */
  .hero{padding:16px var(--pad) 36px;row-gap:22px}
  .hero-wm{font-size:25vw;margin:0}
  .hero-clock{font-size:10.5px}
  .tagline{font-size:22px}
  .sec{padding:44px var(--pad)}
  .wm-div{display:none}
  .foot-wm{font-size:15vw;margin:22px 0 0}
  .cta-end{padding:48px var(--pad)}
  .cta-big{font-size:13.5vw;margin:12px 0 24px}
  .pg-title{font-size:15vw}
  .pg-head{margin-bottom:28px}
  .man-h{font-size:11vw;margin:12px 0 24px}
  .man-grid{gap:14px}
  .sticker{display:none}
  .cl-flow{font-size:22px}
  /* lime as an accent, not a wall */
  .marquee{background:var(--bg2);color:var(--lime)}
  .mq-track p{font-size:20px;padding:10px 0}
  .mq-btn{background:var(--bg);color:var(--fg)}
  .foot{background:var(--bg2);color:var(--fg);border-top:1px solid var(--line)}
  .foot .lbl{color:var(--mute);opacity:1}.foot .fine{color:var(--mute);opacity:1}
  .foot-in{padding:40px var(--pad) 20px}
  .foot-wm{color:var(--lime)}
  .foot-base{border-top:1px solid var(--line)}
  .motion-btn{border-color:var(--fg)}
  .foot :focus-visible,.menu :focus-visible,.brief-tray :focus-visible{outline-color:var(--lime)}
  html.curtain .page-wrap{margin-bottom:0;box-shadow:none}
  html.curtain .foot{position:static}
  .menu{background:#161616;color:var(--fg);transition:none}
  .menu nav a{border-bottom:1px solid var(--line);transition:none}
  .menu nav a span{font-size:13vw}
  .menu-btn[aria-expanded=true],body.lock .top,body.lock .logo{color:var(--fg)}
  .brief-tray{background:var(--bg2);color:var(--fg);border:1px solid var(--lime);bottom:10px;padding:12px 14px;gap:8px;animation:none}
  .brief-tray .lbl,.brief-tray .fine{color:var(--mute);opacity:1}
  .brief-tray .fine{display:none}
  .tray-list{font-size:15px}
  .brief-tray .pill-link{border-color:var(--lime);color:var(--lime)}
  .status i{box-shadow:none}
  /* home: tighter work list */
  .row{padding:14px 0}
  .r-title{font-size:9vw!important}
  .r-concept{display:none!important}
  .rows{margin-bottom:24px}
  /* services as an accordion: the open panel sits under its item */
  .svx-list li>.svx-panel,.sv-index li>.sv-panel{margin:4px 0 18px}
  .svx-panel{padding:16px;gap:14px;min-height:0}
  .svx-list button,.sv-index a{padding:12px 0}
  .svx-list button span{font-size:24px}
  .svx-list button.on{padding-left:0}
  .sv-index a.on{padding-left:0}
  .svp{gap:22px}
  .svp-top{gap:16px}
  .svp-art{aspect-ratio:16/9}
  .svp h2{font-size:34px}
  .svp-process li{padding:12px}
  /* studio */
  .principles li{padding:16px 0}
  .desk-top{height:560px;touch-action:pan-y}
  .team-grid{gap:14px}
  .member p:last-child{display:none}
  .proc li{padding:16px 0}
  /* journal + articles */
  .jgrid{gap:28px}
  .art-cover{margin-bottom:28px}
  /* contact */
  .ct-grid{gap:28px}
  .fld input,.fld select,.fld textarea{font-size:16px}
}