@font-face{font-family:Blauer;src:url(/wp-content/uploads/2025/10/BlauerNue-Thin.ttf) format("truetype");font-display:swap}
@font-face{font-family:Polin;src:url(/wp-content/uploads/2025/10/Polin-Light.woff2) format("woff2");font-weight:300 400;font-display:swap}
@font-face{font-family:Polin;src:url(/wp-content/uploads/2025/10/Polin-Bold.woff2) format("woff2");font-weight:600 800;font-display:swap}
:root{--ys:#FEFFB3;--y:#E7FF00;--m:#8d8d8d;--line:#232323;--g:5.333vw;--gf:5.333vw}
/* live site recordings in device frames */
.dv-stage{position:relative;margin-top:26px;display:flex;align-items:flex-end;justify-content:center;gap:4%;padding:5% 4% 6%;border-radius:28px;
  background:radial-gradient(ellipse 70% 70% at 50% 40%,color-mix(in srgb,var(--ac,#2563EB) 22%,var(--bg,#0b0b0c)),var(--bg,#0b0b0c) 75%);overflow:hidden}
.dv-mac{width:72%;position:relative}
.dv-mac .lid{background:#0b0b0d;border-radius:18px 18px 6px 6px;padding:2.2% 2.2% 3%;box-shadow:inset 0 0 0 2px #2c2d31,0 30px 70px rgba(0,0,0,.35)}
.dv-mac .lid::before{content:"";position:absolute;top:2.2%;left:50%;width:14%;height:3%;transform:translateX(-50%);background:#0b0b0d;border-radius:0 0 10px 10px;z-index:2}
.dv-mac video,.dv-ph video{display:block;width:100%;height:100%;object-fit:cover;object-position:top;background:#111}
.dv-mac .scr{border-radius:6px;overflow:hidden;aspect-ratio:16/9}
.dv-mac .base{height:clamp(10px,1.6vw,22px);margin:0 -7%;border-radius:0 0 18px 18px;background:linear-gradient(180deg,#3a3b40,#1d1e22 40%,#0f1013)}
.dv-ph{width:19%;aspect-ratio:9/19.5;border-radius:clamp(22px,3.4vw,52px);padding:.45%;background:linear-gradient(135deg,#f2f3f5,#a7a9ae 22%,#e1e2e5 45%,#8d8f94 70%,#d7d8db);box-shadow:0 30px 70px rgba(0,0,0,.35);position:relative;margin-bottom:2%}
.dv-ph .bz{background:#000;border-radius:inherit;padding:5%;height:100%}
.dv-ph .scr{border-radius:clamp(16px,2.6vw,42px);overflow:hidden;height:100%;position:relative}
.dv-ph .scr::before{content:"";position:absolute;top:2.5%;left:50%;width:32%;height:3.4%;transform:translateX(-50%);background:#000;border-radius:20px;z-index:2}
@media (max-width:700px){.dv-stage{flex-direction:column;align-items:center;gap:22px;padding:8% 5%}.dv-mac{width:100%}.dv-ph{width:58%}}

.cover.has-video{border:0;background:none}
.cover .dv-stage{border-radius:26px}
.w-full.has-video{height:auto}
.w-full.has-video .dv-stage{border-radius:0;padding:6% 8% 7%}
@media (min-width:900px){:root{--g:5vw;--gf:3vw}}
*{box-sizing:border-box;margin:0;padding:0}
html{background:#000;overflow-x:clip;scroll-behavior:smooth}
body{background:#000;color:#fff;font-family:Polin,system-ui,sans-serif;font-weight:300;-webkit-font-smoothing:antialiased;overflow-x:clip}
a{color:inherit;text-decoration:none}
.wrap{padding:0 var(--g)}
.top{display:flex;justify-content:space-between;align-items:center;padding:var(--gf) 0;direction:ltr;margin:0 calc(var(--gf) - var(--g))}
.top img{height:40px;width:auto}
.pill{background:var(--ys);color:#000;border-radius:999px;padding:10px 18px;font-weight:700;font-size:15px;direction:rtl}
.eyebrow{direction:ltr;text-align:left;font-family:Blauer;font-size:15px;letter-spacing:2px;color:var(--m);text-transform:uppercase;margin-top:36px}
h1{font-weight:700;font-size:clamp(34px,7vw,64px);line-height:1.1;margin-top:10px}
.message{margin-top:20px;color:#fff;border-right:2px solid var(--ys);padding:4px 18px 4px 0;font-weight:700;font-size:clamp(18px,3.4vw,24px);line-height:1.4}
.cover{margin-top:26px;border-radius:26px;overflow:hidden;border:1px solid var(--line)}
.cover img{width:100%;height:auto;display:block}
.sec{margin-top:56px}
.st{direction:ltr;display:flex;align-items:baseline;justify-content:space-between;font-family:Blauer;font-size:clamp(34px,6vw,64px);line-height:1;text-transform:uppercase}
.st small{font-family:Polin;font-weight:600;font-size:15px;color:var(--m);direction:rtl}
.line{height:1px;background:var(--line);margin:14px 0 6px}
.problem{font-size:clamp(18px,3vw,24px);line-height:1.55;margin-top:14px;color:#e8e8e8}
.steps{list-style:none;counter-reset:s}
.steps li{display:flex;gap:16px;padding:20px 0;border-bottom:1px solid #1a1a1a}
.steps .n{font-family:Blauer;font-size:30px;color:var(--m);width:48px;flex:none;direction:ltr}
.steps h3{font-weight:700;font-size:20px}.steps p{font-size:16px;color:#bdbdbd;margin-top:4px;line-height:1.5}
.human{margin-top:22px;font-weight:700;font-size:22px;color:#fff}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:16px}
.chips span{border:1px solid #333;border-radius:999px;padding:8px 14px;font-size:14px;color:#ddd}
.before{margin-top:18px;border-radius:18px;overflow:hidden;border:1px solid var(--line)}
.before img{width:100%;height:auto;display:block}
.story{margin-top:22px;border-right:2px solid #3a3a3a;padding:6px 18px 6px 0;font-size:18px;line-height:1.6;color:#e8e8e8}
.story.big{font-weight:700;font-size:clamp(22px,3.4vw,34px);line-height:1.3;color:#fff;border-right-color:var(--ys)}
.gallery{display:grid;gap:14px;margin-top:18px}
.gallery figure{border-radius:20px;overflow:hidden;border:1px solid var(--line);background:#0b0b0b}
.gallery img{width:100%;height:auto;display:block}
.gallery.two{grid-template-columns:1fr 1fr}
.result{margin-top:18px;font-family:Polin;font-weight:700;font-size:22px}
.ext{display:inline-block;margin-top:12px;border-bottom:1px solid #fff;color:#fff;font-weight:700;padding-bottom:2px}
.cta{margin:64px 0 0;background:linear-gradient(160deg,#161618,#0b0b0c);color:#fff;border:1px solid var(--line);border-radius:28px;padding:28px 24px}
.cta .eye{direction:ltr;text-align:left;font-family:Blauer;font-size:clamp(28px,5vw,48px);line-height:1.05;text-transform:uppercase}
.cta h2{font-weight:700;font-size:22px;margin-top:12px}
.btn{display:flex;justify-content:space-between;align-items:center;background:var(--ys);color:#000;border-radius:999px;padding:16px 22px;margin-top:18px;font-weight:700;font-size:17px}
.btn i{font-style:normal;font-family:Blauer;font-size:22px}
.more{display:grid;gap:12px;margin-top:18px}
.more a{display:flex;align-items:center;gap:14px;padding:16px;border:1px solid var(--line);border-radius:20px;background:#0d0d0d}
.more img{width:96px;height:60px;object-fit:cover;border-radius:10px;flex:none}
.more h3{font-weight:700;font-size:17px}.more p{font-size:14px;color:var(--m)}
footer{direction:ltr;text-align:center;font-family:Blauer;font-size:13px;color:var(--m);padding:50px 0 40px;letter-spacing:1px}
.reveal{opacity:0;transform:translateY(24px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.reveal.in{opacity:1;transform:none}
html.fx-on .reveal{opacity:1;transform:none;transition:none}
.cover{overflow:hidden}
@media (min-width:900px){
  .top{padding:2vw 0}.top img{height:72px}
  .layout{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:start}
  .more{grid-template-columns:repeat(3,1fr)}
  .gallery.grid{grid-template-columns:1fr 1fr}
  .gallery.two{max-width:760px}
  .more a{flex-direction:column;align-items:stretch}.more img{width:100%;height:150px}
  .cta{display:grid;grid-template-columns:1fr 1fr;gap:32px;align-items:end;padding:40px}
  .cta h2{margin-top:0}
}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}}
/* "WORK" stack at the bottom of every case, like the project pages on the main site:
   a huge WORK word stays behind while the other projects scroll over it */
.mw{position:relative;margin:16vh calc(-1 * var(--g)) 0;padding:0 var(--g)}
.mw-word{position:sticky;top:22vh;z-index:0;direction:ltr;text-align:center;font-family:Blauer;font-weight:400;font-size:24vw;line-height:.8;color:var(--fg,#fff);pointer-events:none;user-select:none}
.mw-list{position:relative;z-index:1;margin-top:-12vw;display:flex;flex-direction:column;align-items:center;gap:14vh;padding-bottom:18vh}
.mw-card{position:relative;display:block;width:min(100%,1180px);aspect-ratio:16/10;border-radius:24px;overflow:hidden;background:#111;box-shadow:0 40px 90px rgba(0,0,0,.45)}
.mw-card img{width:100%;height:100%;object-fit:cover;display:block;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.mw-card:hover img{transform:scale(1.04)}
.mw-btn{position:absolute;left:22px;top:22px;display:inline-flex;align-items:center;gap:8px;background:#FEFFB3;color:#000;border-radius:999px;padding:11px 20px;font-family:Polin,sans-serif;font-weight:600;font-size:16px;direction:ltr}
.mw-name{position:absolute;right:22px;bottom:18px;color:#fff;font-weight:700;font-size:clamp(18px,2vw,26px);text-shadow:0 2px 14px rgba(0,0,0,.6)}
@media (min-width:900px){.mw-card{width:72%}.mw-list .mw-card:nth-child(even){margin-left:16%}.mw-list .mw-card:nth-child(odd){margin-right:16%}}
/* site menu, same as the Elementor header: inline on desktop, MENU pill + full-screen sheet on mobile */
.site-nav{display:none;direction:rtl;gap:clamp(22px,2.6vw,48px);align-items:center}
.site-nav a{font-family:Polin,sans-serif;font-weight:300;font-size:clamp(15px,1.1vw,21px);color:#fff;transition:color .2s}
.site-nav a:hover,.site-nav a.on{color:var(--ys)}
body.work:not(.dark) .site-nav a{color:var(--fg)}
body.work:not(.dark) .site-nav a:hover,body.work:not(.dark) .site-nav a.on{color:var(--ac)}
.menu-btn{background:var(--ys);color:#000;border:0;border-radius:999px;padding:11px 20px;font-family:Blauer,sans-serif;font-size:14px;letter-spacing:1px;cursor:pointer}
body.work .menu-btn{background:var(--ac);color:var(--bg)}
.menu-sheet{position:fixed;inset:0;z-index:150;background:#FEFFB3;color:#000;display:flex;flex-direction:column;justify-content:center;gap:14px;padding:0 var(--g);transform:translateY(-100%);transition:transform .6s cubic-bezier(.7,0,.2,1);direction:rtl}
.menu-sheet.open{transform:none}
.menu-sheet a{font-family:Polin,sans-serif;font-weight:700;font-size:clamp(30px,9vw,56px);line-height:1.2}
.menu-sheet .close{position:absolute;top:var(--gf);left:var(--g);background:#000;color:#FEFFB3;border:0;border-radius:999px;padding:11px 20px;font-family:Blauer,sans-serif;font-size:14px;letter-spacing:1px;cursor:pointer}
.menu-sheet .wa2{margin-top:18px;font-size:18px;font-weight:700;border-bottom:2px solid #000;align-self:flex-start}
@media (min-width:900px){.site-nav{display:flex}.menu-btn{display:none}}