@font-face{font-family:'Oswald';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/oswald-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Oswald';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/oswald-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rubik-400-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:400;font-display:swap;src:url(fonts/rubik-400-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-500-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:500;font-display:swap;src:url(fonts/rubik-500-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-700-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rubik-700-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/rubik-800-hebrew.woff2) format('woff2');unicode-range:U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;}
@font-face{font-family:'Rubik';font-style:normal;font-weight:800;font-display:swap;src:url(fonts/rubik-800-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;}

:root{
  --paper:#FBF8F1; --paper-2:#F3EEE2; --ink:#2F2624; --ink-2:#4A3F3B; --mute:#6E625D;
  --yellow:#F5D800; --yellow-2:#E6CA00; --line:rgba(47,38,36,.14);
  --display:'Oswald','Rubik',Impact,'Arial Narrow',sans-serif;
  --body:'Rubik',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
  --wrap:1180px; --r:14px;
  --shadow:0 18px 50px -24px rgba(47,38,36,.45), 0 6px 14px -8px rgba(47,38,36,.25);
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{margin:0;font-family:var(--body);color:var(--ink);background:var(--paper);line-height:1.55;font-size:17px;overflow-x:hidden}
img{max-width:100%;height:auto;display:block}
a{color:inherit}
h1,h2,h3{margin:0;line-height:1.05}
p{margin:0 0 1em}
ul,ol{margin:0;padding:0;list-style:none}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:4px}
.wrap{width:min(var(--wrap),calc(100% - 40px));margin-inline:auto}
.skip{position:absolute;left:-999px;top:8px;background:var(--yellow);color:var(--ink);padding:10px 14px;font-weight:700;z-index:100}
.skip:focus{left:8px}

/* type */
.display{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:-.01em;line-height:.95}
h1.display{font-size:clamp(3.2rem,9.5vw,7.2rem)}
.display--md{font-size:clamp(2.1rem,4.6vw,3.6rem);line-height:1}
.display--lg{font-size:clamp(2.8rem,7vw,5.6rem)}
.eyebrow,.label{font-size:.85rem;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 18px}
.lede{font-size:clamp(1.05rem,1.6vw,1.3rem);color:var(--ink-2);max-width:34em;margin:22px 0 28px}
.sub{color:var(--mute);max-width:40em;font-size:1.05rem}
.section-head{margin-bottom:clamp(28px,5vw,56px)}
.section-head .display{margin-bottom:14px}
.section-head--row{display:flex;flex-wrap:wrap;gap:20px 40px;justify-content:space-between;align-items:flex-end}

/* tape motif */
.tape{display:inline-block;background:var(--yellow);color:var(--ink);padding:.28em .7em;font-weight:700;letter-spacing:.12em;text-transform:uppercase;font-size:.78rem;
  transform:rotate(-1.5deg);clip-path:polygon(0 8%,2% 0,98% 3%,100% 12%,99% 92%,97% 100%,3% 97%,0 90%);
  box-shadow:0 1px 0 rgba(0,0,0,.08) inset}
.tape--sm{font-size:.74rem}
.tape--onink{color:var(--ink)}
.hl{position:relative;display:inline-block;white-space:nowrap;z-index:0}
.hl::before{content:"";position:absolute;z-index:-1;left:-.12em;right:-.12em;top:.12em;bottom:.02em;background:var(--yellow);transform:rotate(-1.4deg);
  clip-path:polygon(0 10%,1.5% 0,98.5% 4%,100% 14%,99% 90%,98% 100%,2% 96%,0 88%)}
.hl--onink::before{background:var(--yellow)}
.copywall .hl{color:var(--ink)}

/* buttons */
.btn{display:inline-flex;align-items:center;gap:.5em;padding:.9em 1.4em;border-radius:999px;font-weight:700;text-decoration:none;font-size:1rem;line-height:1;border:2px solid transparent;transition:transform .15s ease,background .15s ease,color .15s ease}
.btn:hover{transform:translateY(-1px)}
.btn--yellow{background:var(--yellow);color:var(--ink)}
.btn--yellow:hover{background:var(--yellow-2)}
.btn--ink{background:var(--ink);color:var(--paper)}
.btn--ink:hover{background:#1f1816}
.btn--ghost{border-color:var(--ink);color:var(--ink)}
.btn--ghost:hover{background:var(--ink);color:var(--paper)}

/* header */
.top{position:sticky;top:0;z-index:50;background:rgba(251,248,241,.86);backdrop-filter:saturate(1.4) blur(10px);-webkit-backdrop-filter:saturate(1.4) blur(10px);border-bottom:1px solid var(--line)}
.top__row{display:flex;align-items:center;justify-content:space-between;gap:20px;min-height:68px}
.brand img{width:150px;height:auto}
.nav{display:flex;align-items:center;gap:28px}
.nav ul{display:flex;gap:22px}
.nav a:not(.btn){text-decoration:none;font-weight:500;font-size:.98rem;padding:6px 0;border-bottom:2px solid transparent}
.nav a:not(.btn):hover{border-bottom-color:var(--yellow)}
.nav__cta{padding:.7em 1.1em;font-size:.92rem}
.burger{display:none;width:44px;height:44px;flex-direction:column;justify-content:center;align-items:center;gap:6px;border-radius:10px}
.burger span{display:block;width:24px;height:3px;background:var(--ink);border-radius:2px;transition:transform .2s ease,opacity .2s ease}
.burger[aria-expanded="true"] span:first-child{transform:translateY(4.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:last-child{transform:translateY(-4.5px) rotate(-45deg)}
@media (max-width:860px){
  .burger{display:flex}
  .nav{position:absolute;left:0;right:0;top:100%;background:var(--paper);border-bottom:1px solid var(--line);flex-direction:column;align-items:stretch;gap:0;padding:12px 20px 20px;display:none;box-shadow:var(--shadow)}
  .nav.is-open{display:flex}
  .nav ul{flex-direction:column;gap:0}
  .nav ul a{display:block;padding:12px 0!important;font-size:1.1rem!important;border-bottom:1px solid var(--line)!important}
  .nav__cta{margin-top:14px;justify-content:center}
}

.taped{position:relative;margin:0;background:#fff;padding:10px;box-shadow:var(--shadow);border-radius:3px}
.taped::before{content:"";position:absolute;left:50%;top:-14px;width:120px;height:30px;margin-left:-60px;background:var(--yellow);opacity:.92;transform:rotate(-3deg);
  clip-path:polygon(0 15%,3% 0,97% 5%,100% 20%,98% 85%,96% 100%,4% 95%,0 80%);z-index:2}
.taped img{border-radius:2px}
.taped--c{width:100%;transform:rotate(-2deg)}

/* hero: a living wall of the work */
.hero{position:relative;overflow:hidden;min-height:calc(100vh - 68px);min-height:calc(100svh - 68px);display:flex;align-items:center;padding:clamp(40px,6vw,80px) 0;background:#1f1816;isolation:isolate}
.pwall{position:absolute;inset:0;overflow:hidden;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none;-webkit-touch-callout:none}
.pwall.is-dragging{cursor:grabbing}
.pwall__plane{position:absolute;inset:-12%;transform:rotate(-8deg) scale(1.08);transform-origin:50% 50%}
.pw-col{position:absolute;top:0;left:0;will-change:transform}
.pw-col__track{display:flex;flex-direction:column;gap:inherit}
.pwall--cols .pw-col__track{gap:12px}
.pw-tile{position:relative;flex:0 0 auto;border-radius:6px;overflow:hidden;background:#3a302c;box-shadow:0 10px 24px -14px rgba(0,0,0,.7);transition:transform .25s ease,box-shadow .25s ease}
.pw-tile img,.pw-tile video{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
@media (hover:hover){.pwall:not(.is-dragging) .pw-tile:hover{transform:scale(1.07) rotate(-1deg);z-index:3;box-shadow:0 24px 40px -16px rgba(0,0,0,.8),0 0 0 3px var(--yellow)}}
.pw-play{position:absolute;right:8px;bottom:8px;width:28px;height:28px;border-radius:50%;background:var(--yellow);color:var(--ink);display:grid;place-items:center;box-shadow:0 4px 10px rgba(0,0,0,.35)}
.pw-play svg{margin-left:2px}
.hero__shade{position:absolute;inset:0;pointer-events:none;background:linear-gradient(90deg,rgba(31,24,22,.55) 0%,rgba(31,24,22,.25) 45%,rgba(31,24,22,0) 70%),linear-gradient(0deg,rgba(31,24,22,.45),rgba(31,24,22,0) 30%)}
.hero__inner{position:relative;z-index:2;pointer-events:none}
.note{pointer-events:auto;position:relative;max-width:600px;background:var(--paper);border-radius:4px;padding:clamp(26px,3.6vw,44px) clamp(22px,3.4vw,44px) clamp(22px,3vw,34px);box-shadow:0 30px 70px -30px rgba(0,0,0,.75),0 8px 20px -10px rgba(0,0,0,.4);transform:rotate(-1.2deg)}
.note__tape{position:absolute;top:-16px;width:130px;height:34px;background:var(--yellow);opacity:.95;clip-path:polygon(0 15%,3% 0,97% 5%,100% 20%,98% 85%,96% 100%,4% 95%,0 80%);box-shadow:0 1px 0 rgba(0,0,0,.08) inset}
.note__tape--l{left:-22px;transform:rotate(-32deg)}
.note__tape--r{right:-22px;transform:rotate(28deg)}
.note .lede{margin:18px 0 24px}
.hero__actions{display:flex;flex-wrap:wrap;gap:12px;margin-bottom:28px}
.facts{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;border-top:1px solid var(--line);padding-top:20px}
.facts strong{display:block;font-family:var(--display);font-size:1.4rem;text-transform:uppercase;letter-spacing:.01em;line-height:1}
.facts span{display:block;font-size:.84rem;color:var(--mute);margin-top:6px;line-height:1.35}
.hero__hint{position:absolute;right:20px;bottom:18px;z-index:2;margin:0;pointer-events:none}
.hero__hint span{display:inline-block;background:var(--ink);color:var(--paper);font-size:.74rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;padding:7px 11px;border-radius:999px;opacity:.9}
h1.display{font-size:clamp(3rem,7.4vw,6.2rem)}
@media (max-width:720px){
  .hero{align-items:flex-end;min-height:0;padding:38vh 0 26px;padding:38svh 0 26px}
  .hero__shade{background:linear-gradient(0deg,rgba(31,24,22,.7) 0%,rgba(31,24,22,.2) 55%,rgba(31,24,22,0) 75%)}
  .note{transform:rotate(-.8deg);padding:26px 20px 20px}
  .note__tape{width:96px;height:28px;top:-13px}
  .note__tape--l{left:-14px}.note__tape--r{right:-14px}
  h1.display{font-size:clamp(2.7rem,13vw,3.6rem)}
  .note .lede{font-size:1rem;margin:14px 0 18px}
  .hero__actions{margin-bottom:20px}
  .hero__actions .btn{padding:.8em 1.15em;font-size:.95rem}
  .facts{grid-template-columns:1fr 1fr;gap:14px}
  .facts li:last-child{grid-column:1/-1}
  .facts strong{font-size:1.2rem}
  .hero__hint{top:14px;bottom:auto;right:12px}
  .hero__hint span{font-size:.66rem}
}
@media (prefers-reduced-motion:reduce){.pw-tile{transition:none}}

/* clients */
.clients{padding:22px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--paper-2)}
.clients__label{font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--mute);margin:0 0 14px}
.marquee{display:flex;overflow:hidden;gap:0;mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)}
.marquee__track{display:flex;flex-shrink:0;gap:48px;padding-right:48px;animation:slide 42s linear infinite;font-family:var(--display);text-transform:uppercase;font-size:1.35rem;letter-spacing:.04em;color:var(--ink-2);white-space:nowrap}
.marquee:hover .marquee__track{animation-play-state:paused}
@keyframes slide{to{transform:translateX(-100%)}}
@media (prefers-reduced-motion:reduce){.marquee{flex-wrap:wrap;mask-image:none;-webkit-mask-image:none}.marquee__track{flex-wrap:wrap;gap:14px 28px}.marquee__track[aria-hidden]{display:none}}

/* services */
.services{padding:clamp(48px,7vw,90px) 0;background:var(--ink);color:var(--paper)}
.services .label{color:rgba(251,248,241,.7);margin-bottom:clamp(20px,3vw,32px)}
.svc{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:rgba(251,248,241,.14);border:1px solid rgba(251,248,241,.14);border-radius:var(--r);overflow:hidden}
.svc__item{background:var(--ink);padding:22px 24px;display:flex;align-items:baseline;gap:16px;transition:background .2s ease}
.svc__item:hover{background:#3a2f2c}
.svc__num{font-family:var(--display);color:var(--yellow);font-size:.95rem;letter-spacing:.1em}
.svc h3{font-family:var(--display);text-transform:uppercase;font-size:clamp(1.25rem,2vw,1.55rem);font-weight:700}
@media (max-width:900px){.svc{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.svc{grid-template-columns:1fr}.svc__item{padding:16px 20px}}

/* work: the mirage */
.mirage{background:var(--paper-2);border-top:1px solid var(--line);padding-top:clamp(40px,6vw,90px)}
.mirage__head{padding-bottom:clamp(22px,3vw,34px)}
.mirage__head .label{margin-bottom:12px}
.mirage__run{position:relative;height:210vh}
.mirage__sticky{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:#1f1816}
.pwall--rows .pwall__plane{inset:-15% -10%;display:flex;flex-direction:column;justify-content:center;gap:14px;transform:rotate(-6deg) scale(1.14)}
.pw-row{position:relative;overflow:visible;flex:0 0 auto}
.pw-row__track{display:flex;gap:16px;height:100%;will-change:transform}
.pwall--rows .pw-tile{height:100%}
@media (max-width:720px){
  .mirage__run{height:190vh}
  .pwall--rows .pwall__plane{gap:10px}
  .pw-row__track{gap:10px}
}
@media (prefers-reduced-motion:reduce){.mirage__run{height:auto}.mirage__sticky{position:relative;height:80vh}}

/* contact */
.contact{padding:clamp(64px,10vw,130px) 0 clamp(56px,8vw,100px);text-align:center}
.contact .display{margin-bottom:34px}
.reach{list-style:none;margin:0 auto;padding:0;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:640px}
.reach__btn{display:flex;align-items:center;justify-content:center;gap:10px;min-height:64px;padding:14px 18px;border-radius:14px;background:var(--paper-2);border:2px solid var(--ink);color:var(--ink);text-decoration:none;font-weight:700;font-size:1.05rem;transition:transform .15s ease,background .15s ease}
.reach__btn:hover{transform:translateY(-2px);background:var(--yellow)}
.reach__btn--wa{background:var(--yellow);border-color:var(--yellow);box-shadow:0 10px 24px -12px rgba(47,38,36,.6)}
.reach__btn--wa:hover{background:var(--yellow-2)}
.reach__btn span{overflow-wrap:anywhere}
.ico{flex:0 0 auto}
.reach__btn .ico{width:1.15em;height:1.15em}
@media (max-width:560px){.reach{grid-template-columns:1fr}.reach__btn{font-size:1.1rem;min-height:60px}.reach__btn--wa{min-height:68px;font-size:1.2rem}}

/* CTA after the wall */
.wallcta{display:flex;flex-wrap:wrap;justify-content:center;gap:12px;padding:clamp(28px,4vw,44px) 20px;background:var(--paper-2)}
.btn--big{padding:1em 1.6em;font-size:1.08rem}
.btn .ico{margin-left:-.2em}
@media (max-width:560px){.wallcta .btn{flex:1 1 100%;justify-content:center;min-height:58px}}

/* floating contact */
.fab{position:fixed;z-index:60;right:16px;right:max(16px,env(safe-area-inset-right));bottom:16px;bottom:max(16px,env(safe-area-inset-bottom));display:inline-flex;align-items:center;gap:8px;padding:12px 18px 12px 14px;border-radius:999px;background:var(--ink);color:var(--yellow);font-weight:700;font-size:1rem;line-height:1;text-decoration:none;box-shadow:0 12px 28px -10px rgba(0,0,0,.6),0 0 0 2px var(--yellow);transition:opacity .2s ease,transform .2s ease}
.fab:hover{transform:translateY(-2px)}
.fab.is-hidden{opacity:0;transform:translateY(20px);pointer-events:none}
@media (min-width:721px){.hero__hint{bottom:86px}}
@media (max-width:720px){.fab{padding:12px 16px 12px 13px;font-size:.95rem}}
@media print{.fab{display:none}}

/* footer */
.foot{background:var(--ink);color:rgba(251,248,241,.75);padding:40px 0}
.foot__row{display:flex;flex-wrap:wrap;gap:16px 40px;align-items:center;justify-content:space-between}
.foot__logo{width:140px}
.foot p{margin:0;font-size:.95rem}
.foot a{color:var(--paper)}
.foot__sign{font-family:var(--display);text-transform:uppercase;color:var(--yellow);letter-spacing:.06em}

/* lightbox */
.lightbox{position:fixed;inset:0;border:0;padding:0;margin:0;background:rgba(24,18,16,.96);width:100%;height:100%;max-width:none;max-height:none;color:var(--paper);overflow:hidden}
.lightbox[open]{display:flex;flex-direction:column}
.lightbox::backdrop{background:rgba(31,24,22,.94)}
.lightbox__bar{display:flex;justify-content:space-between;align-items:center;padding:12px 14px 6px 18px;flex:0 0 auto}
.lightbox__count{font-size:.85rem;letter-spacing:.1em;color:rgba(251,248,241,.7)}
.lightbox__stage{margin:0;flex:1 1 auto;min-height:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:12px;padding:0 12px 16px}
.lightbox__media{flex:1 1 auto;min-height:0;width:100%;display:flex;align-items:center;justify-content:center}
.lightbox__media img,.lightbox__media video{max-width:100%;max-height:100%;width:auto;height:auto;border-radius:6px;background:#111;object-fit:contain}
.lightbox figcaption{color:var(--paper);font-size:.95rem;text-align:center;padding:0 10px;flex:0 0 auto}
.lightbox__close{width:44px;height:44px;border-radius:50%;background:var(--yellow);color:var(--ink);font-size:1.6rem;line-height:1;display:grid;place-items:center}
.lightbox__nav{position:absolute;top:50%;margin-top:-26px;width:48px;height:48px;border-radius:50%;background:rgba(251,248,241,.14);color:var(--paper);font-size:2rem;line-height:1;display:grid;place-items:center}
.lightbox__nav:hover{background:rgba(251,248,241,.26)}
.lightbox__nav--prev{left:12px}.lightbox__nav--next{right:12px}
.lightbox__nav[hidden]{display:none}
@media (max-width:720px){.lightbox__nav{top:auto;bottom:10px;margin:0;width:44px;height:44px}.lightbox__stage{padding-bottom:64px}}

.lightbox__media{position:relative}
.lightbox__media.is-loading::after{content:"";position:absolute;left:50%;top:50%;width:46px;height:46px;margin:-23px 0 0 -23px;border-radius:50%;border:4px solid rgba(251,248,241,.25);border-top-color:var(--yellow);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}

/* reveal */
.reveal{opacity:0;transform:translateY(16px);transition:opacity .5s ease,transform .5s ease}
.reveal.is-in{opacity:1;transform:none}