@import url('https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;500&display=swap');
:root{
  --bg:#0b0b0b; --bg2:#121212; --ink:#f3efe8; --mute:#a59f96; --line:#262626;
  --o:#f28c28; --o2:#ffb45e;
  --serif:"Rubik","Heebo",sans-serif; --sans:"Heebo",system-ui,sans-serif;
  --script:"Great Vibes",cursive; --latin:"Cormorant Garamond",serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--ink);font-family:var(--sans);font-weight:300;line-height:1.7;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
::selection{background:var(--o);color:#000}

/* nav */
.nav{position:fixed;inset:0 0 auto 0;z-index:50;display:flex;align-items:center;justify-content:space-between;padding:22px 5vw;transition:background .4s,padding .4s}
.nav.solid{background:rgba(11,11,11,.88);backdrop-filter:blur(10px);padding:14px 5vw;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:12px;direction:ltr}
.lens{width:34px;height:34px;position:relative;flex:none}
.lens i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--o)}
.lens i:nth-child(2){inset:7px;border-color:var(--o2);opacity:.8}
.lens i:nth-child(3){inset:13px;background:var(--o);border:0}
.brand .sig{font-family:var(--script);font-size:30px;line-height:1;color:var(--ink)}
.brand small{display:block;font-family:var(--latin);letter-spacing:.35em;font-size:10px;color:var(--mute);text-transform:uppercase;margin-top:2px}
.links{display:flex;gap:32px;font-size:15px}
.links a{position:relative;opacity:.85;transition:opacity .3s}
.links a:hover{opacity:1}
.links a::after{content:"";position:absolute;right:0;bottom:-4px;width:0;height:1px;background:var(--o);transition:width .35s}
.links a:hover::after{width:100%}
.links .cta{border:1px solid var(--o);padding:6px 18px;border-radius:40px;color:var(--o)}
.links .cta::after{display:none}
.burger{display:none;background:none;border:0;color:var(--ink);font-size:26px;cursor:pointer}

/* hero */
.hero{position:relative;height:100vh;min-height:620px;overflow:hidden;display:flex;align-items:flex-end}
.hero .bg{position:absolute;inset:-6% 0 0 0;background-size:cover;background-position:center 35%;animation:kb 18s ease-out forwards;will-change:transform}
@keyframes kb{from{transform:scale(1.15)}to{transform:scale(1)}}
.hero::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.35) 0%,rgba(0,0,0,0) 35%,rgba(0,0,0,.25) 60%,rgba(11,11,11,1) 100%)}
.hero .copy{position:relative;z-index:2;padding:0 5vw 13vh;max-width:900px}
.eyebrow{font-family:var(--latin);letter-spacing:.45em;text-transform:uppercase;font-size:13px;color:var(--o);direction:ltr;text-align:right}
.hero h1{font-family:var(--serif);font-weight:400;font-size:clamp(42px,7vw,96px);line-height:1.05;margin:14px 0 18px}
.hero h1 em{font-style:normal;color:var(--o)}
.hero p{font-size:clamp(16px,1.4vw,20px);color:#ddd6cc;max-width:560px}
.scroll{position:absolute;z-index:2;left:50%;bottom:28px;transform:translateX(-50%);width:24px;height:40px;border:1px solid rgba(255,255,255,.5);border-radius:14px}
.scroll::after{content:"";position:absolute;left:50%;top:8px;width:3px;height:8px;margin-left:-1.5px;background:var(--o);border-radius:2px;animation:sd 1.8s infinite}
@keyframes sd{0%{opacity:0;transform:translateY(0)}40%{opacity:1}100%{opacity:0;transform:translateY(14px)}}

/* sections */
section{position:relative}
.wrap{max-width:1240px;margin:0 auto;padding:0 5vw}
.pad{padding:14vh 0}
.h2{font-family:var(--serif);font-weight:400;font-size:clamp(32px,4.2vw,58px);line-height:1.15;margin:12px 0 22px}
.lead{color:var(--mute);font-size:18px;max-width:620px}

/* reveal */
.rv{opacity:0;transform:translateY(40px);transition:opacity 1.1s cubic-bezier(.2,.7,.2,1),transform 1.1s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
.rv.d1{transition-delay:.12s}.rv.d2{transition-delay:.24s}.rv.d3{transition-delay:.36s}

/* about */
.about{display:grid;grid-template-columns:1.05fr 1fr;gap:7vw;align-items:center}
.about .pic{position:relative}
.about .pic img{width:100%;aspect-ratio:4/5;object-fit:cover}
.about .pic::before{content:"";position:absolute;inset:24px -24px -24px 24px;border:1px solid var(--o);z-index:-1}
.about blockquote{font-family:var(--script);font-size:44px;color:var(--o);direction:ltr;text-align:right;margin-top:26px;line-height:1}
.stats{display:flex;gap:44px;margin-top:38px}
.stats b{display:block;font-family:var(--serif);font-weight:400;font-size:44px;color:var(--ink);line-height:1}
.stats span{font-size:14px;color:var(--mute)}

/* marquee */
.marquee{border-block:1px solid var(--line);overflow:hidden;padding:22px 0;direction:ltr}
.marquee .t{display:flex;gap:60px;white-space:nowrap;animation:mq 38s linear infinite;width:max-content}
.marquee span{font-family:var(--latin);font-style:italic;font-size:30px;color:#6f6a63}
.marquee span b{font-style:normal;color:var(--o);font-weight:400;margin:0 30px}
@keyframes mq{to{transform:translateX(-50%)}}

/* services */
.svc{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin-top:56px}
.svc article{background:var(--bg);padding:42px 30px 46px;transition:background .5s}
.svc article:hover{background:var(--bg2)}
.svc .n{font-family:var(--latin);color:var(--o);font-size:15px;letter-spacing:.2em;direction:ltr;text-align:right}
.svc h3{font-family:var(--serif);font-weight:400;font-size:26px;margin:18px 0 10px}
.svc p{color:var(--mute);font-size:15px}

/* parallax band */
.band{height:85vh;overflow:hidden;display:flex;align-items:center;justify-content:center;text-align:center}
.band .bg{position:absolute;inset:-15% 0;background-size:cover;background-position:center;will-change:transform}
.band::after{content:"";position:absolute;inset:0;background:rgba(0,0,0,.45)}
.band .q{position:relative;z-index:2;padding:0 6vw}
.band .q p{font-family:var(--serif);font-size:clamp(28px,4vw,56px);line-height:1.25}
.band .q span{display:block;margin-top:18px;font-family:var(--script);color:var(--o);font-size:38px;direction:ltr}

/* portfolio */
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-top:28px}
.filters button{background:none;border:1px solid var(--line);color:var(--mute);padding:8px 20px;border-radius:40px;font-family:var(--sans);font-size:14px;cursor:pointer;transition:.3s}
.filters button.on,.filters button:hover{border-color:var(--o);color:var(--o)}
.masonry{columns:3 320px;column-gap:14px;margin-top:40px}
.masonry figure{break-inside:avoid;margin-bottom:14px;overflow:hidden;position:relative;cursor:zoom-in;background:#151515}
.masonry img{width:100%;height:auto;transition:transform 1.2s cubic-bezier(.2,.7,.2,1),filter .6s}
.masonry figure:hover img{transform:scale(1.045)}
.masonry figure::after{content:"";position:absolute;inset:0;box-shadow:inset 0 0 0 0 var(--o);transition:box-shadow .4s}
.masonry figure:hover::after{box-shadow:inset 0 0 0 2px var(--o)}
.masonry figure.hide{display:none}

/* process */
.steps{display:grid;grid-template-columns:repeat(4,1fr);gap:34px;margin-top:56px;counter-reset:s}
.steps div{border-top:1px solid var(--line);padding-top:26px;position:relative}
.steps div::before{counter-increment:s;content:"0" counter(s);font-family:var(--latin);color:var(--o);font-size:40px;line-height:1;display:block;margin-bottom:14px;direction:ltr;text-align:right}
.steps h4{font-family:var(--serif);font-weight:400;font-size:22px;margin-bottom:6px}
.steps p{color:var(--mute);font-size:15px}

/* client cta */
.clients{display:grid;grid-template-columns:1fr 1fr;min-height:76vh}
.clients .img{background-size:cover;background-position:center}
.clients .box{background:var(--bg2);display:flex;flex-direction:column;justify-content:center;padding:8vh 6vw}
.btn{display:inline-flex;align-items:center;gap:10px;background:var(--o);color:#111;font-weight:500;padding:14px 32px;border-radius:40px;margin-top:30px;transition:transform .3s,background .3s;width:max-content;border:0;cursor:pointer;font-family:var(--sans);font-size:16px}
.btn:hover{background:var(--o2);transform:translateY(-2px)}
.btn.ghost{background:none;border:1px solid var(--ink);color:var(--ink)}
.btn.ghost:hover{border-color:var(--o);color:var(--o);background:none}

/* contact */
.contact{text-align:center}
.contact .h2{font-size:clamp(36px,5vw,72px)}
.contact .row{display:flex;gap:16px;justify-content:center;flex-wrap:wrap}
.foot{border-top:1px solid var(--line);padding:34px 5vw;display:flex;justify-content:space-between;align-items:center;color:var(--mute);font-size:13px;flex-wrap:wrap;gap:12px}

/* lightbox */
.lb{position:fixed;inset:0;z-index:100;background:rgba(5,5,5,.96);display:none;align-items:center;justify-content:center}
.lb.on{display:flex}
.lb img{max-width:92vw;max-height:88vh;object-fit:contain;box-shadow:0 30px 80px rgba(0,0,0,.6)}
.lb button{position:absolute;background:none;border:0;color:#fff;font-size:40px;cursor:pointer;opacity:.7;padding:16px}
.lb button:hover{opacity:1;color:var(--o)}
.lb .x{top:10px;left:16px;font-size:34px}.lb .pv{right:10px;top:50%;transform:translateY(-50%)}.lb .nx{left:10px;top:50%;transform:translateY(-50%)}
.lb .cnt{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);font-family:var(--latin);letter-spacing:.2em;color:var(--mute);direction:ltr}

/* client area pages */
.gate{min-height:100vh;display:grid;grid-template-columns:1fr 1fr}
.gate .img{background-size:cover;background-position:center}
.gate form{display:flex;flex-direction:column;justify-content:center;padding:10vh 7vw;gap:6px}
.gate input{background:transparent;border:0;border-bottom:1px solid #444;color:var(--ink);font-size:20px;padding:14px 2px;margin-top:26px;font-family:var(--sans);outline:none;transition:border-color .3s}
.gate input:focus{border-color:var(--o)}
.gate .err{color:#ff7b6b;font-size:14px;min-height:22px;margin-top:8px}
.ghead{padding:20vh 5vw 6vh;text-align:center}
.ghead .names{font-family:var(--script);font-size:clamp(54px,8vw,110px);color:var(--o);direction:ltr;line-height:1.1}
.gtools{display:flex;justify-content:center;gap:12px;flex-wrap:wrap;margin-top:22px}
.gtools button{background:none;border:1px solid var(--line);color:var(--mute);padding:8px 18px;border-radius:40px;cursor:pointer;font-family:var(--sans)}
.gtools button.on{border-color:var(--o);color:var(--o)}
.ggrid{columns:4 260px;column-gap:10px;padding:0 3vw 10vh}
.ggrid figure{break-inside:avoid;margin-bottom:10px;position:relative;overflow:hidden;cursor:zoom-in}
.ggrid img{width:100%;height:auto}
.ggrid .tools{position:absolute;inset:auto 0 0 0;display:flex;justify-content:space-between;padding:10px 12px;background:linear-gradient(transparent,rgba(0,0,0,.7));opacity:0;transition:opacity .3s}
.ggrid figure:hover .tools,.ggrid figure.fav .tools{opacity:1}
.ggrid .tools a,.ggrid .tools button{background:none;border:0;color:#fff;font-size:20px;cursor:pointer}
.ggrid figure.fav .heart{color:var(--o)}
.ggrid figure.hide{display:none}
.lb .dl{bottom:12px;left:24px;font-size:15px;border:1px solid #666;border-radius:30px;padding:8px 18px}

@media (max-width:900px){
  .links{position:fixed;inset:0;background:rgba(8,8,8,.98);flex-direction:column;align-items:center;justify-content:center;gap:28px;font-size:22px;transform:translateY(-100%);transition:transform .5s}
  .links.open{transform:none}
  .burger{display:block;z-index:60}
  .about,.clients,.gate{grid-template-columns:1fr}
  .about .pic::before{inset:14px -14px -14px 14px}
  .svc{grid-template-columns:1fr 1fr}
  .steps{grid-template-columns:1fr 1fr}
  .clients .img,.gate .img{min-height:46vh}
  .hero .copy{padding-bottom:16vh}
}
@media (max-width:560px){.svc,.steps{grid-template-columns:1fr}.stats{gap:26px}}

/* fixes v2 */
.hero::after{background:linear-gradient(180deg,rgba(0,0,0,.45) 0%,rgba(0,0,0,.05) 30%,rgba(0,0,0,.45) 58%,rgba(11,11,11,.96) 88%,#0b0b0b 100%)}
.hero p{text-shadow:0 2px 14px rgba(0,0,0,.7)}
.hero h1{text-shadow:0 4px 30px rgba(0,0,0,.5)}
@media (max-width:900px){
  .nav.solid{backdrop-filter:none;-webkit-backdrop-filter:none;background:rgba(11,11,11,.97)}
  .links{transform:none;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .4s,visibility .4s;height:100vh}
  .links.open{opacity:1;visibility:visible;pointer-events:auto}
}

/* headings v3 */
.hero h1,.h2,.svc h3,.steps h4,.band .q p,.stats b{font-weight:300;letter-spacing:-.01em}
.hero h1{font-weight:400;letter-spacing:-.02em}
/* logo v4 */
.brand img.mark{height:38px;width:auto;flex:none;filter:drop-shadow(0 2px 6px rgba(0,0,0,.4))}
.nav.solid .brand img.mark{height:32px}
.biglogo{display:block;width:min(320px,70vw);height:auto;margin:0 auto 34px}
.foot{position:relative}
.footlogo{display:block;width:150px;height:auto;margin:0 auto 18px;flex-basis:100%;max-width:150px}
.foot{justify-content:center;text-align:center}
.foot>span{flex-basis:auto}
/* foot v5 */
.foot{flex-direction:column;align-items:center;gap:6px;padding:46px 5vw 30px}
.footlogo{margin:0 0 10px}

/* hebrew labels v6 */
.eyebrow{letter-spacing:.08em;text-transform:none}

/* hebrew labels v7 */
.eyebrow{font-family:var(--sans);direction:rtl;text-align:right;font-weight:400;letter-spacing:.06em;font-size:14px}
.marquee span{font-family:var(--serif);font-style:normal;font-weight:300}

/* gallery cta v8 */
.gcta{text-align:center;padding:10vh 5vw 12vh;border-top:1px solid var(--line)}
.gcta p{color:var(--mute)}
.gcta h3{font-family:var(--serif);font-weight:300;font-size:clamp(26px,3.4vw,44px);margin:8px 0 4px}
.gcta .btn{margin:24px auto 0}

/* dlall v9 */
.dlall{text-align:center;padding:0 5vw 5vh}
.dlall p{color:var(--mute);font-size:15px}
.dlall .row{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
.dlall .btn{margin-top:14px;padding:10px 22px;font-size:14px}