:root{
  --bg:#000; --text:#fff; --lime:#a3ff00; --muted:#a0a0a0; --dim:#575757;
  --cream:#efe6d8; --ink:#141414; --gold:#c89a45;
  --line:rgba(255,255,255,.13); --line-2:rgba(255,255,255,.06);
  --display:"Zalando Sans SemiExpanded","DM Sans",sans-serif;
  --body:"DM Sans","Helvetica Neue",Arial,sans-serif;
  --grid:"Bitcount Grid Single",monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{background:var(--bg);color:var(--text)}
/* hide body until JS applies the saved language, so AZ pages never flash English first (bg stays black) */
html.az-pending body{visibility:hidden}
/* the loader is baked into the HTML so it covers from the first paint (no content flash); hide it on internal navigation (quick wipe instead) */
html.navd .loader{display:none}
body{font-family:var(--body);line-height:1.5;-webkit-font-smoothing:antialiased;overflow-x:hidden}
a{color:inherit;text-decoration:none}
canvas{display:block}
::selection{background:var(--lime);color:#000}
@media(hover:hover){body{cursor:none}}

/* fixed layers */
#scene{position:fixed;inset:0;z-index:0;pointer-events:none}
.grain{position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.06;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(1000px 900px at 50% 55%,transparent 55%,rgba(0,0,0,.45))}
.content{position:relative;z-index:3}

/* cursor */
.cursor{position:fixed;top:0;left:0;width:10px;height:10px;border-radius:50%;background:var(--lime);transform:translate(-50%,-50%);pointer-events:none;z-index:9999;mix-blend-mode:difference;transition:width .3s,height .3s,background .3s}
.cursor.big{width:74px;height:74px;background:#fff}
.cursor .lbl{position:absolute;inset:0;display:grid;place-items:center;font-size:10px;font-weight:600;color:#000;opacity:0;transition:.3s;letter-spacing:.05em;text-transform:uppercase}
.cursor.view .lbl{opacity:1}
@media(hover:none){.cursor{display:none}}

.trans{position:fixed;inset:0;z-index:8000;background:var(--lime);transform:scaleY(0);transform-origin:bottom;pointer-events:none}

.loader{position:fixed;inset:0;z-index:9000;background:#000;display:flex;flex-direction:column;justify-content:flex-end;padding:6vw;animation:dvf-failsafe 0s linear 8s forwards}
@keyframes dvf-failsafe{to{opacity:0;visibility:hidden;pointer-events:none}}
.loader .big{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(40px,9vw,150px);line-height:.9;letter-spacing:-.02em}
.loader .big span{color:var(--lime)}
.loader .lrow{display:flex;justify-content:space-between;align-items:baseline;margin-top:20px;border-top:1px solid var(--line);padding-top:16px}
.loader .num{font-family:var(--grid);font-size:clamp(30px,7vw,90px);font-weight:600;color:var(--lime)}
.loader .tag{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--muted)}
.loader .lbar{width:100%;height:3px;margin-top:18px;background:rgba(255,255,255,.12);border-radius:2px;overflow:hidden}
.loader .lfill{height:100%;width:0;background:var(--lime);border-radius:2px}

/* nav */
nav{position:fixed;top:0;left:0;right:0;z-index:200;padding:26px 4vw;display:flex;align-items:center;gap:16px;transition:background .3s,padding .3s}
nav.small{background:rgba(0,0,0,.6);backdrop-filter:blur(10px);padding:16px 4vw}
.logo{font-family:var(--display);font-weight:700;font-size:24px;letter-spacing:-.01em;text-transform:uppercase}
.logo span{color:var(--lime)}
nav .links{display:flex;gap:30px;margin-left:56px}
nav .links a{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:var(--muted);transition:.25s}
nav .links a:hover,nav .links a.active{color:var(--lime)}
.menubtn{margin-left:auto;display:flex;align-items:center;gap:11px;font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:11px 20px;border-radius:100px;transition:.25s;background:none;color:#fff;font-family:var(--body);cursor:pointer}
.menubtn:hover{background:var(--lime);color:#000;border-color:var(--lime)}
.menubtn .bars{display:flex;flex-direction:column;gap:3px}.menubtn .bars i{width:16px;height:1.5px;background:currentColor;display:block}
@media(max-width:900px){nav .links{display:none}}

/* menu overlay */
.menu{position:fixed;inset:0;z-index:500;background:#050505;display:grid;grid-template-columns:1.2fr 1fr;clip-path:inset(0 0 100% 0);pointer-events:none;transition:clip-path .7s cubic-bezier(.76,0,.24,1)}
.menu.open{pointer-events:auto;clip-path:inset(0 0 0% 0)}
.menu .list{padding:14vh 4vw;display:flex;flex-direction:column;justify-content:center;gap:6px}
.menu .list a{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(38px,7vw,92px);line-height:1.04;letter-spacing:-.02em;color:#fff;display:flex;align-items:baseline;gap:20px;transition:color .3s,padding .3s;overflow:hidden}
.menu .list a .mi{display:inline-block;transform:translateY(110%);transition:transform .7s cubic-bezier(.76,0,.24,1)}
.menu.open .list a .mi{transform:translateY(0)}
.menu .list a:nth-child(1) .mi{transition-delay:.12s}
.menu .list a:nth-child(2) .mi{transition-delay:.18s}
.menu .list a:nth-child(3) .mi{transition-delay:.24s}
.menu .list a:nth-child(4) .mi{transition-delay:.30s}
.menu .list a:nth-child(5) .mi{transition-delay:.36s}
.menu .list a .idx{font-family:var(--grid);font-size:15px;color:var(--dim)}
.menu .list a:hover,.menu .list a.active{color:var(--lime);padding-left:24px}
.menu .prev{position:relative;border-left:1px solid var(--line-2);overflow:hidden}
.menu .prev .p{position:absolute;inset:0;display:grid;place-items:center;opacity:0;transition:opacity .5s}
.menu .prev .p.on{opacity:1}
.menu .prev .p .g{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,6vw,90px);color:rgba(255,255,255,.06);letter-spacing:-.02em}
.menu .close{position:absolute;top:26px;right:4vw;z-index:10;font-size:13px;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);cursor:pointer;background:none;border:none;font-family:var(--body);padding:8px 4px}
.menu .close:hover{color:var(--lime)}
.menu .meta{position:absolute;bottom:34px;left:4vw;font-family:var(--grid);font-size:12px;color:var(--dim)}
@media(max-width:900px){.menu{grid-template-columns:1fr}.menu .prev{display:none}}

/* helpers */
.ey{font-size:12px;letter-spacing:.18em;text-transform:uppercase;color:var(--lime)}
.mask{display:inline-block;overflow:hidden;vertical-align:top;padding-top:.14em;margin-bottom:-.14em}
.mask .i{display:inline-block}
.lab{display:flex;align-items:center;gap:14px;margin-bottom:40px;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--muted)}
.lab b{font-family:var(--grid);color:var(--lime)}
.lab::after{content:"";flex:1;height:1px;background:var(--line-2)}
.big-statement{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,5vw,72px);line-height:1.02;letter-spacing:-.015em;max-width:20ch}
.big-statement .lime{color:var(--lime)}

/* hero (home) */
.hero{min-height:100svh;display:flex;flex-direction:column;justify-content:center;position:relative;padding:120px 4vw 40px}
.hero .top{position:absolute;top:120px;left:4vw;right:4vw;display:flex;justify-content:space-between;font-size:12px;letter-spacing:.15em;text-transform:uppercase;color:var(--muted)}
.hero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(48px,12vw,200px);line-height:.9;letter-spacing:-.02em}
.hero h1 .l{display:block}.hero h1 .lime{color:var(--lime)}
.hero .sub{display:flex;justify-content:space-between;align-items:flex-end;gap:30px;margin-top:44px;flex-wrap:wrap}
.hero .sub p{font-size:17px;color:var(--muted);max-width:44ch;line-height:1.6}
.hero .cue{font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--dim);display:flex;align-items:center;gap:12px}
.hero .cue .d{width:7px;height:7px;border-radius:50%;background:var(--lime);animation:blink 2s infinite}
@keyframes blink{0%,100%{opacity:.3}50%{opacity:1}}

/* page hero (subpages) */
.phero{padding:220px 4vw 80px;position:relative;border-bottom:1px solid var(--line-2)}
.phero .ey{margin-bottom:24px;display:inline-block}
.phero h1{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(52px,11vw,180px);line-height:.9;letter-spacing:-.02em}
.phero h1 .lime{color:var(--lime)}
.phero .intro{margin-top:34px;font-size:18px;color:var(--muted);max-width:56ch;line-height:1.7}

/* marquee */
.marq{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:24px 0;overflow:hidden;white-space:nowrap}
.marq .track{display:inline-block;will-change:transform}
.marq .track span{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,4.4vw,64px);letter-spacing:-.01em;padding:0 30px}
.marq .track span i{color:var(--lime);font-style:normal}

.sec{padding:16vh 4vw;position:relative}
.two{display:grid;grid-template-columns:1fr 1fr;gap:60px;margin-top:60px;align-items:start}
.two p{color:var(--muted);font-size:16px;line-height:1.75}
@media(max-width:900px){.two{grid-template-columns:1fr;gap:26px}}

/* sectors ring */
.sectors{height:88vh;display:grid;place-items:center;position:relative;overflow:hidden;border-top:1px solid var(--line-2)}
.ring{position:relative;width:min(72vw,620px);aspect-ratio:1;animation:spin 70s linear infinite}
.ring span{position:absolute;left:50%;top:50%;font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(14px,1.7vw,26px);letter-spacing:.02em;color:var(--muted);white-space:nowrap}
.ring span:nth-child(odd){color:#fff}
.ring::before{content:"";position:absolute;inset:0;border:1px solid var(--line-2);border-radius:50%}
.ring::after{content:"";position:absolute;inset:22%;border:1px solid var(--line-2);border-radius:50%}
@keyframes spin{to{transform:rotate(360deg)}}
.sectors .core{position:absolute;text-align:center}
.sectors .core .t{font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--lime)}
.sectors .core .n{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(30px,5vw,64px);letter-spacing:-.02em;margin-top:6px}

/* disciplines / grid cards */
.disc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2);margin-top:20px}
.dc{background:#000;padding:40px 30px;min-height:230px;display:flex;flex-direction:column;transition:.35s}
.dc:hover{background:#0a0a0a}
.dc .n{font-family:var(--grid);color:var(--lime);font-size:14px;margin-bottom:auto}
.dc h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:26px;letter-spacing:-.01em;margin:26px 0 10px}
.dc p{color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.disc{grid-template-columns:1fr}}

/* light spotlight */
.spotlight{background:var(--cream);color:var(--ink);padding:18vh 4vw;position:relative;z-index:3}
.spotlight .lab{color:#6b6357}.spotlight .lab b{color:var(--gold)}.spotlight .lab::after{background:rgba(20,20,20,.12)}
.spotlight .grid{display:grid;grid-template-columns:1.05fr .95fr;gap:60px;align-items:center}
.spotlight h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,6.5vw,96px);line-height:.94;letter-spacing:-.02em}
.spotlight h2 .g{color:var(--gold)}
.spotlight p{color:#524b41;font-size:17px;line-height:1.7;margin:22px 0 30px;max-width:44ch}
.spotlight .go{display:inline-flex;align-items:center;gap:10px;background:var(--ink);color:var(--cream);font-weight:600;font-size:14px;letter-spacing:.05em;text-transform:uppercase;padding:15px 26px;border-radius:100px;transition:.3s}
.spotlight .go:hover{background:var(--gold);color:#1a1408}
.mock{background:#fff;border-radius:16px;box-shadow:0 40px 90px -30px rgba(60,40,10,.4);padding:18px;transform:rotate(-2deg)}
.mock .h{display:flex;align-items:center;gap:10px;margin-bottom:12px}
.mock .av{width:34px;height:34px;border-radius:9px;background:linear-gradient(135deg,#e8602c,#f4863f)}
.mock .nm{font-weight:700;font-size:13px;color:#1c1a16}.mock .nm small{display:block;color:#9c968b;font-weight:500}
.mock .b{font-size:13px;color:#5e584e;background:#f3ede2;border-radius:10px;padding:10px 13px;margin-top:7px}
.mock .b.out{background:#1c1a16;color:#efe6d8;text-align:right}
@media(max-width:900px){.spotlight .grid{grid-template-columns:1fr;gap:34px}}

/* work list */
.work .row{display:grid;grid-template-columns:60px 1fr auto auto;gap:26px;align-items:center;padding:34px 0;border-top:1px solid var(--line);transition:.4s;position:relative}
.work .row:last-child{border-bottom:1px solid var(--line)}
.work .row .no{font-family:var(--grid);color:var(--dim);font-size:15px}
.work .row .ti{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(28px,5vw,66px);line-height:1;letter-spacing:-.02em;transition:.4s}
.work .row .cat{font-size:13px;letter-spacing:.08em;text-transform:uppercase;color:var(--muted)}
.work .row .st{font-size:11px;letter-spacing:.1em;text-transform:uppercase;padding:5px 11px;border-radius:100px;border:1px solid var(--line)}
.work .row .st.live{color:#000;background:var(--lime);border-color:var(--lime)}
.work .row:hover{padding-left:24px}.work .row:hover .ti{color:var(--lime)}.work .row:hover .no{color:var(--lime)}
@media(max-width:900px){.work .row{grid-template-columns:40px 1fr;gap:10px}.work .row .cat,.work .row .st{grid-column:2}}

/* method */
.method{display:grid;grid-template-columns:repeat(4,1fr);gap:40px;margin-top:20px}
.mst .n{font-family:var(--grid);font-size:44px;color:var(--lime);line-height:1}
.mst h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:24px;margin:18px 0 10px}
.mst p{color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.method{grid-template-columns:1fr 1fr;gap:30px}}

/* about: values + team */
.values{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--line-2);border:1px solid var(--line-2)}
.val{background:#000;padding:44px 34px}
.val .n{font-family:var(--grid);color:var(--lime);font-size:14px}
.val h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:30px;margin:18px 0 10px}
.val p{color:var(--muted);font-size:15px;line-height:1.7;max-width:44ch}
@media(max-width:900px){.values{grid-template-columns:1fr}}
.team{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:20px}
.tm{border:1px solid var(--line-2);padding:34px}
.tm .role{font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--lime)}
.tm h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:34px;margin:10px 0 8px}
.tm p{color:var(--muted);font-size:14px;line-height:1.6}
@media(max-width:900px){.team{grid-template-columns:1fr}}

/* labs experiments */
.labs{display:grid;grid-template-columns:repeat(2,1fr);gap:24px;margin-top:20px}
.exp{border:1px solid var(--line-2);padding:38px 32px;transition:.35s;position:relative;overflow:hidden}
.exp:hover{border-color:var(--line);background:#070707}
.exp .tag{font-family:var(--grid);font-size:12px;color:var(--lime)}
.exp h3{font-family:var(--display);font-weight:600;text-transform:uppercase;font-size:clamp(26px,3vw,40px);margin:14px 0 12px;letter-spacing:-.01em}
.exp p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:52ch}
.exp .st{position:absolute;top:38px;right:32px;font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line-2);padding:4px 10px;border-radius:100px}
@media(max-width:900px){.labs{grid-template-columns:1fr}}

/* contact page */
.cwrap{display:grid;grid-template-columns:1.1fr .9fr;gap:70px;padding:0 4vw 16vh;align-items:start}
.cwrap .big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(40px,7vw,120px);line-height:.92;letter-spacing:-.02em}
.cwrap .big .lime{color:var(--lime)}
.cmail{display:inline-block;margin-top:30px;font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,40px);border-bottom:2px solid var(--lime);padding-bottom:6px;transition:.3s}
.cmail:hover{color:var(--lime)}
.cinfo{display:flex;flex-direction:column;gap:26px;padding-top:20px}
.cinfo .blk{display:flex;flex-direction:column;align-items:flex-start;gap:9px}
.cinfo .blk h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:2px}
.cinfo .blk p,.cinfo .blk a{color:var(--muted);font-size:16px;line-height:1.6}
.cinfo .blk a:hover{color:var(--lime)}
@media(max-width:900px){.cwrap{grid-template-columns:1fr;gap:40px}}

/* contact big cta (home) */
.contact{padding:20vh 4vw;text-align:center;position:relative}
.contact h2{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(44px,10vw,150px);line-height:.92;letter-spacing:-.02em}
.contact h2 .lime{color:var(--lime)}
.contact .mail{display:inline-block;margin-top:40px;font-family:var(--display);font-weight:500;font-size:clamp(20px,3vw,40px);border-bottom:2px solid var(--lime);padding-bottom:6px;transition:.3s}
.contact .mail:hover{color:var(--lime)}

/* footer */
footer{border-top:1px solid var(--line);padding:50px 4vw 40px;display:flex;flex-wrap:wrap;gap:30px;align-items:flex-end;position:relative;z-index:3}
footer .fcol{display:flex;flex-direction:column;gap:10px}
footer h5{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:6px}
footer a{color:var(--muted);font-size:14px}footer a:hover{color:var(--lime)}
footer .big{font-family:var(--display);font-weight:700;text-transform:uppercase;font-size:clamp(60px,17vw,280px);line-height:.78;letter-spacing:-.02em;width:100%;margin-top:26px}
footer .big span{color:var(--lime)}
footer .copy{font-family:var(--grid);font-size:12px;color:var(--dim);width:100%;margin-top:20px}

.wprev{position:fixed;top:0;left:0;width:230px;height:150px;border-radius:12px;overflow:hidden;pointer-events:none;z-index:400;opacity:0;transform:translate(-50%,-50%) scale(.9)}
.wprev .fill{width:100%;height:100%;display:grid;place-items:center;font-family:var(--display);font-weight:700;text-transform:uppercase;color:#000;font-size:20px;background:var(--lime)}

/* language toggle */
.langbtn{font-size:13px;letter-spacing:.08em;text-transform:uppercase;border:1px solid var(--line);padding:11px 15px;border-radius:100px;background:none;color:#fff;font-family:var(--body);cursor:pointer;transition:.25s}
.langbtn:hover{border-color:var(--lime);color:var(--lime)}
/* spotlight stat (replaces product mock) */
.spotstat{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(20,20,20,.12);border:1px solid rgba(20,20,20,.12)}
.spotstat .sq{background:var(--cream);padding:34px 28px}
.spotstat .qn{font-family:var(--display);font-weight:700;font-size:clamp(38px,5vw,64px);color:var(--ink);letter-spacing:-.02em;line-height:1}
.spotstat .ql{font-size:13px;letter-spacing:.06em;text-transform:uppercase;color:#6b6357;margin-top:8px}

/* micro-interactions: animated link underlines + work-row hover accent */
nav .links a,footer a,.cinfo .blk a{position:relative;display:inline-block}
footer a,.cinfo .blk a{align-self:flex-start}
nav .links a::after,footer a::after,.cinfo .blk a::after{content:"";position:absolute;left:0;bottom:-3px;width:100%;height:1px;background:var(--lime);transform:scaleX(0);transform-origin:right;transition:transform .38s cubic-bezier(.76,0,.24,1)}
nav .links a:hover::after,nav .links a.active::after,footer a:hover::after,.cinfo .blk a:hover::after{transform:scaleX(1);transform-origin:left}
.work .row::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--lime);transform:scaleY(0);transform-origin:bottom;transition:transform .4s cubic-bezier(.76,0,.24,1)}
.work .row:hover::before{transform:scaleY(1);transform-origin:top}