/* ============================================================
   NaNaNa — brand book implementation
   צהוב נה נה #FFE45C · שזיף לילה #2B1B2E · ורוד לשון #F2899E · קרם #FFF8E7
   יחס 60% צהוב/קרם · 30% שזיף · 10% ורוד
   ============================================================ */

:root{
  --yellow:#FFE45C;
  --yellow-deep:#F5D33F;
  --ink:#2B1B2E;
  --ink-2:#3C2A40;
  --ink-3:#4B3750;
  --pink:#F2899E;
  --pink-soft:#F9C3CF;
  --cream:#FFF8E7;
  --cream-2:#FBF0D8;
  --white:#fff;

  --f-display:'Varela Round', 'Rubik', system-ui, sans-serif;
  --f-latin:'Fredoka', 'Varela Round', sans-serif;
  --f-body:'Rubik', system-ui, -apple-system, sans-serif;

  --wrap:1280px;
  --gut:clamp(20px, 5vw, 64px);
  --r-sm:14px;
  --r:22px;
  --r-lg:34px;
  --r-xl:48px;

  --sh-1:0 2px 8px rgba(43,27,46,.06), 0 10px 30px rgba(43,27,46,.07);
  --sh-2:0 4px 14px rgba(43,27,46,.09), 0 24px 60px rgba(43,27,46,.13);
  --sh-3:0 30px 80px rgba(43,27,46,.22);

  --ease:cubic-bezier(.22,1,.36,1);
  --ease-s:cubic-bezier(.4,0,.2,1);
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth;-webkit-text-size-adjust:100%;overflow-x:clip}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{animation-duration:.01ms!important;transition-duration:.01ms!important}}

body{
  margin:0;
  background:var(--cream);
  color:var(--ink);
  font-family:var(--f-body);
  font-weight:400;
  font-size:clamp(15.5px,.42vw + 14px,17.5px);
  line-height:1.75;
  -webkit-font-smoothing:antialiased;
  overflow-x:clip;
}
img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;border:0;background:none;cursor:pointer}
h1,h2,h3{font-family:var(--f-display);font-weight:400;line-height:1.05;letter-spacing:-.01em;margin:0}
::selection{background:var(--ink);color:var(--yellow)}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px;border-radius:6px}

section[id]{scroll-margin-top:92px}
.wrap{width:100%;max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.skip{position:fixed;inset-inline-start:16px;top:-120px;background:var(--ink);color:var(--yellow);padding:12px 20px;z-index:200;border-radius:12px;transition:top .25s var(--ease)}
.skip:focus{top:14px}

/* ---------- reveal ---------- */
.reveal{opacity:0;transform:translateY(22px);transition:opacity .8s var(--ease), transform .8s var(--ease)}
.reveal.in{opacity:1;transform:none}
@media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none}}

[hidden]{display:none!important}

/* ============================================================ LOGO
   Official artwork (assets/brand/*.png). Measured geometry of logo.png:
   cap height = 44.86% of the image height, baseline at 47.27% from the top,
   so the tongue hangs 52.73% of the image height below the baseline.
   Sizes below are driven by the intended CAP height, not the image box. */
.logo{display:inline-flex;align-items:center;line-height:0}
.logo__img{height:50px;width:auto}          /* cap ≈ 22px */
.logo--foot .logo__img{height:76px}         /* cap ≈ 34px */

/* Inline wordmark inside a headline: the span reserves only the cap height and
   sits on the text baseline, so the hanging tongue never inflates the line box. */
.mark{
  position:relative;display:inline-block;vertical-align:baseline;
  width:3.914em;height:.78em;              /* .78em cap → 1.739em tall image */
}
.mark img{position:absolute;inset-inline:0;bottom:-.917em;width:100%;height:auto}

/* ============================================================ BUTTONS */
.btn{
  --bg:var(--ink);--fg:var(--yellow);
  display:inline-flex;align-items:center;justify-content:center;gap:10px;
  background:var(--bg);color:var(--fg);
  font-family:var(--f-body);font-weight:600;font-size:16px;line-height:1;
  padding:15px 28px;border-radius:999px;
  border:2px solid var(--ink);
  transition:transform .35s var(--ease), box-shadow .35s var(--ease), background .25s, color .25s;
  will-change:transform;white-space:nowrap;
}
.btn:hover{transform:translateY(-3px);box-shadow:0 12px 28px rgba(43,27,46,.28)}
.btn:active{transform:translateY(-1px)}
.btn--lg{padding:19px 36px;font-size:17px}
.btn--full{width:100%}
.btn--ghost{--bg:transparent;--fg:var(--ink)}
.btn--ghost:hover{--bg:var(--ink);--fg:var(--yellow)}
.btn--ghost.on-dark{--fg:var(--cream);border-color:rgba(255,248,231,.35)}

/* ============================================================ NAV */
.nav{position:fixed;inset-block-start:0;inset-inline:0;z-index:100;transition:all .45s var(--ease)}
/* The bar runs LTR so the logo sits on the physical left and the whole
   navigation group sits on the right; each label is still Hebrew/RTL inside. */
.nav__in{
  max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:26px;direction:ltr;
}
.nav__links{display:flex;gap:4px;margin-left:auto;direction:rtl;font-size:15.5px;font-weight:500}
.nav__links a{position:relative;padding:9px 15px;border-radius:999px;transition:background .25s,color .25s}
.nav__links a::after{
  content:'';position:absolute;inset-inline:15px;bottom:5px;height:2px;
  background:currentColor;transform:scaleX(0);transform-origin:100% 50%;
  transition:transform .4s var(--ease);border-radius:2px;
}
.nav__links a:hover::after,.nav__links a.active::after{transform:scaleX(1)}
.nav__cta{padding:12px 24px;font-size:15px;flex:none}
.nav.stuck{background:rgba(255,248,231,.95);backdrop-filter:saturate(1.4) blur(20px);-webkit-backdrop-filter:saturate(1.4) blur(20px);box-shadow:0 1px 0 rgba(43,27,46,.1), 0 10px 30px rgba(43,27,46,.07)}
.nav.stuck .nav__in{padding-block:11px}
.burger{display:none;width:44px;height:44px;border-radius:12px;flex-direction:column;justify-content:center;align-items:center;gap:5px;margin-left:auto}
.burger span{width:22px;height:2.5px;background:var(--ink);border-radius:2px;transition:transform .35s var(--ease),opacity .25s}
.burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

.mobilemenu{
  position:fixed;inset:0;z-index:99;background:var(--yellow);
  display:flex;flex-direction:column;justify-content:center;align-items:flex-start;gap:2px;padding:0 var(--gut);
  animation:mmIn .45s var(--ease);
}
@keyframes mmIn{from{opacity:0;transform:translateY(-12px)}to{opacity:1;transform:none}}
.mobilemenu a{font-family:var(--f-display);font-size:clamp(21px,5.2vw,27px);padding:9px 0;text-align:right}
.mobilemenu__cta{display:none;margin-top:20px;align-self:flex-start;background:var(--ink);color:var(--yellow);padding:13px 28px!important;border-radius:999px;font-size:18px!important}

/* ============================================================ HERO */
.hero{
  position:relative;background:var(--yellow);
  padding-top:clamp(108px,14vh,190px);
  min-height:clamp(540px,80vh,860px);
  display:flex;align-items:center;
  overflow:hidden;isolation:isolate;
}
.hero__blob{position:absolute;border-radius:50%;filter:blur(70px);opacity:.5;z-index:-1;pointer-events:none}
.hero__blob--a{width:46vw;height:46vw;background:#FFF0A8;top:-14vw;inset-inline-start:-10vw}
.hero__blob--b{width:34vw;height:34vw;background:var(--pink-soft);bottom:-6vw;inset-inline-end:-8vw;opacity:.42}
.hero__in{position:relative;text-align:center;padding-bottom:clamp(50px,8vh,90px)}

/* Selected work, scrolling faintly behind the headline. The radial mask opens a
   hole in the middle so the type never fights the imagery. */
.hero__bg{
  position:absolute;inset:0;z-index:-1;pointer-events:none;
  display:flex;flex-direction:column;justify-content:center;
  gap:clamp(10px,1.4vw,18px);opacity:.3;
  -webkit-mask-image:radial-gradient(ellipse 58% 42% at 50% 50%, transparent 38%, #000 88%);
  mask-image:radial-gradient(ellipse 58% 42% at 50% 50%, transparent 38%, #000 88%);
}
.hero__bg .strip__row{margin:0}
.strip__row--more{display:none}
.hero__bg a{pointer-events:none;box-shadow:none}
.hero__bg img{mix-blend-mode:multiply;filter:saturate(.85)}

.eyebrow{
  display:inline-block;font-weight:600;font-size:14px;letter-spacing:.02em;
  padding:9px 20px;border:2px solid var(--ink);border-radius:999px;margin-bottom:26px;
}
.eyebrow--yellow{color:var(--yellow);border-color:rgba(255,228,92,.45)}

.hero__h{font-size:clamp(40px,8.4vw,104px);letter-spacing:-.03em}
.hero__h .l1,.hero__h .l2{display:block}
.hero__h .l2{margin-top:.05em}

/* The line parts around the hanging tongue: "זה הזמן" to its right, the rest to
   its left. The gap's width and the row's offset are measured in JS against the
   logo artwork, so the split tracks the tongue at any size. */
.hero__sub{
  font-family:var(--f-display);font-size:clamp(19px,2.6vw,30px);
  color:#A83A57;margin:clamp(-18px,-1.2vh,-4px) auto 0;line-height:1.35;
}
.wordmark{font-family:var(--f-latin);font-style:normal;font-weight:600;letter-spacing:-.035em}

.hero__sub__in{display:flex;align-items:baseline;justify-content:center;flex-wrap:wrap}
.hero__sub__gap{flex:none;width:.3em}
/* The headline is set in type, not the logo artwork, so there is no hanging
   tongue left to clear here: just the ordinary space under a heading. The
   desktop rule pulls up against the big line box; at this size it must not. */
@media (max-width:619px){
  .hero__sub{margin-top:clamp(12px,1.9vh,20px)}
}

/* ticker */
.ticker{background:var(--ink);color:var(--yellow);overflow:hidden;padding:14px 0;border-top:3px solid var(--ink)}
.ticker__track{display:flex;gap:0;width:max-content;animation:scrollX 38s linear infinite}
.ticker i{
  font-family:var(--f-display);font-style:normal;font-size:clamp(17px,2vw,24px);
  padding-inline:26px;display:flex;align-items:center;gap:26px;white-space:nowrap;
}
.ticker i::after{content:'';width:9px;height:9px;border-radius:50%;background:var(--pink);flex:none}
@keyframes scrollX{to{transform:translateX(50%)}}
.marquee__track,.band__track{animation:scrollX 50s linear infinite}

/* ============================================================ LOGOS */
.logos{background:var(--cream);padding:clamp(56px,8vh,88px) 0 clamp(52px,7vh,78px)}
.logos__kicker{
  margin:0 0 clamp(26px,3.4vw,44px);text-align:center;
  font-family:var(--f-display);font-weight:400;
  font-size:clamp(26px,3.6vw,46px);letter-spacing:-.02em;
}
/* Flex, not grid: the row that doesn't fill centres itself, so the 13th logo is
   never stranded alone against one edge. ~7 per row on a full-width desktop. */
.logo-grid{
  display:flex;flex-wrap:wrap;justify-content:center;align-items:center;
  gap:clamp(8px,1.4vw,18px);
}
.lgo{
  flex:0 1 200px;display:grid;place-items:center;
  padding:20px 16px;min-height:132px;border-radius:var(--r-sm);
}
.lgo img{
  max-width:100%;max-height:84px;width:auto;height:auto;object-fit:contain;
  filter:saturate(.8);opacity:.85;
  transition:filter .4s var(--ease),opacity .4s var(--ease),transform .4s var(--ease);
}
.lgo:hover img{filter:saturate(1.05);opacity:1;transform:scale(1.07)}

/* The door to the portfolio, directly under the client logos: one row of real
   work, bordered like the pink band so it reads as part of the same system.
   The thumbnails are the sm/ tier the hero strip already pulls, so the row
   costs almost nothing on top of what the page fetches anyway. */
.peek{display:block;overflow:hidden;background:var(--cream);padding-block-start:clamp(46px,6.5vh,76px)}
.peek__row{display:flex;width:max-content;animation:scrollX 64s linear infinite;
  will-change:transform;backface-visibility:hidden}
/* half the works on phones and tablets, so half the distance to travel:
   same speed on screen. Must track the breakpoint app.js fills against. */
@media (max-width:1024px){.peek__row{animation-duration:32s}}
.peek__row img{
  flex:none;display:block;margin-inline-start:clamp(10px,1.2vw,16px);
  height:clamp(296px,32vw,408px);width:auto;border-radius:var(--r-sm);
}
/* the whole band is the link, so the images are clickable too; the button is
   only its visible handle and must not swallow the pointer itself */
.peek__foot{display:flex;justify-content:center;margin-top:clamp(24px,3.2vh,36px)}
.peek__cta{pointer-events:none}
.peek:hover .peek__cta{--bg:var(--ink);--fg:var(--yellow);transform:translateY(-3px);box-shadow:0 12px 28px rgba(43,27,46,.28)}

/* ============================================================ SECTION HEADS */
.sec-head{margin-bottom:clamp(38px,5vw,60px)}
.sec-head--row{display:flex;justify-content:space-between;align-items:flex-end;gap:40px;flex-wrap:wrap}
.sec-title{font-size:clamp(32px,5.2vw,64px);letter-spacing:-.025em;line-height:1.08}
.sec-title em{font-style:normal;color:var(--yellow)}
.sec-title--dark em{color:var(--pink)}
.sec-lede{max-width:40ch;margin:0;opacity:.7;font-size:16.5px}

/* ============================================================ SERVICES */
.services{background:var(--ink);color:var(--cream);padding:clamp(76px,11vh,132px) 0;border-radius:var(--r-xl) var(--r-xl) 0 0;margin-top:-1px}
.services .sec-title{color:var(--cream)}
.svc-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.svc{
  position:relative;background:var(--ink-2);border:1.5px solid rgba(255,248,231,.09);
  border-radius:var(--r);padding:28px 26px 30px;min-height:206px;
  display:flex;flex-direction:column;
  transition:transform .5s var(--ease),background .4s,border-color .4s,box-shadow .5s var(--ease);
  overflow:hidden;
}
.svc::before{
  content:'';position:absolute;inset:0;background:var(--yellow);
  transform:translateY(101%);transition:transform .55s var(--ease);
}
.svc:hover{transform:translateY(-7px);border-color:transparent;box-shadow:0 24px 50px rgba(0,0,0,.3)}
.svc:hover::before{transform:translateY(0)}
.svc:hover .svc__n,.svc:hover h3,.svc:hover p{color:var(--ink)}
.svc:hover .svc__n{opacity:.4}
.svc__n{position:relative;font-family:var(--f-latin);font-weight:500;font-size:14px;opacity:.38;margin-bottom:auto;transition:color .4s,opacity .4s}
.svc h3{position:relative;font-size:24px;margin-bottom:9px;transition:color .4s;letter-spacing:-.01em}
.svc p{position:relative;margin:0;font-size:14.5px;line-height:1.6;opacity:.66;transition:color .4s}
.svc--hi{background:var(--yellow);border-color:var(--yellow)}
.svc--hi .svc__n,.svc--hi h3,.svc--hi p{color:var(--ink)}
.svc--hi .svc__n{opacity:.4}
.svc--hi::before{display:none}

/* ============================================================ WORK */
.work{background:var(--cream);padding:clamp(76px,11vh,132px) 0 clamp(60px,9vh,100px)}
.filters{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:30px}
.chip{
  padding:11px 22px;border-radius:999px;border:2px solid rgba(43,27,46,.16);
  font-weight:600;font-size:14.5px;line-height:1;
  transition:all .3s var(--ease);
}
.chip:hover{border-color:var(--ink);transform:translateY(-2px)}
.chip[aria-selected="true"]{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.chip b{font-family:var(--f-latin);font-weight:500;font-size:12px;opacity:.5;margin-inline-start:6px}

.grid{
  display:grid;grid-template-columns:repeat(4,1fr);
  column-gap:16px;row-gap:0;grid-auto-rows:2px;align-items:start;
}
.card{
  position:relative;border-radius:var(--r);overflow:hidden;background:var(--cream-2);
  width:100%;aspect-ratio:var(--ar,1);margin:0 0 16px;cursor:zoom-in;
  box-shadow:var(--sh-1);
  transition:transform .5s var(--ease),box-shadow .5s var(--ease);
  animation:pop .5s var(--ease) both, shimmer 1.5s linear infinite;
}
@keyframes pop{from{opacity:0;transform:scale(.95) translateY(14px)}to{opacity:1;transform:none}}
.card:not(.is-loaded){
  background-image:linear-gradient(100deg,transparent 18%,rgba(255,255,255,.75) 45%,transparent 72%);
  background-size:220% 100%;
}
@keyframes shimmer{from{background-position:100% 0}to{background-position:-120% 0}}
.card.is-loaded{animation:pop .5s var(--ease) both}
.card--wide{grid-column:span 2}
.card img{width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease),filter .5s}
/* Video lives in the same grid as the stills. Tapping it pauses rather than
   opening the lightbox, so it must not read as a zoom target. */
.card--video{cursor:pointer;background:var(--ink)}
.card video{width:100%;height:100%;object-fit:cover;display:block}
.card:hover{transform:translateY(-6px);box-shadow:var(--sh-2);z-index:2}
.card:hover img{transform:scale(1.05)}
.card__v{
  position:absolute;inset:0;padding:20px;display:flex;flex-direction:column;justify-content:flex-end;
  background:linear-gradient(to top,rgba(43,27,46,.88) 0%,rgba(43,27,46,.42) 38%,transparent 68%);
  color:var(--cream);opacity:0;transform:translateY(10px);
  transition:opacity .45s var(--ease),transform .45s var(--ease);
}
.card:hover .card__v,.card:focus-within .card__v{opacity:1;transform:none}
.card__c{font-size:12.5px;font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--yellow);margin-bottom:3px}
.card__t{font-family:var(--f-display);font-size:19px;line-height:1.2}
.card__tag{
  position:absolute;inset-block-start:14px;inset-inline-start:14px;
  background:var(--yellow);color:var(--ink);font-size:11.5px;font-weight:700;
  padding:6px 12px;border-radius:999px;opacity:0;transform:translateY(-6px);
  transition:opacity .4s var(--ease) .05s,transform .4s var(--ease) .05s;
}
.card:hover .card__tag{opacity:1;transform:none}
.work__more{display:flex;justify-content:center;margin-top:44px}

/* ============================================================ CASES */
.cases{background:var(--ink);color:var(--cream);padding:clamp(80px,12vh,140px) 0;border-radius:var(--r-xl) var(--r-xl) 0 0}
.cases .sec-title{color:var(--cream)}
.case{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(28px,4vw,64px);align-items:center;
  padding:clamp(28px,3.4vw,46px);border-radius:var(--r-lg);
  background:rgba(255,248,231,.045);border:1.5px solid rgba(255,248,231,.09);
  margin-bottom:22px;
}
.case--flip{direction:ltr}
.case--flip>*{direction:rtl}
.case__media{position:relative;border-radius:var(--r);overflow:hidden;box-shadow:var(--sh-3)}
.case__media img{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;transition:transform .9s var(--ease)}
.case:hover .case__media img{transform:scale(1.04)}
.case__badge{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;
  background:var(--yellow);color:var(--ink);font-weight:700;font-size:12.5px;
  padding:8px 16px;border-radius:999px;
}
.case__badge--pink{background:var(--pink)}
.case__badge--dark{background:var(--cream)}
.case__client{display:block;font-size:13px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:10px}
.case__title{font-size:clamp(26px,3.3vw,42px);color:var(--cream);margin-bottom:14px;letter-spacing:-.02em}
.case__body p{margin:0 0 22px;opacity:.72;font-size:16px;max-width:46ch}
.case__kpi{list-style:none;display:flex;gap:26px;padding:0;margin:0 0 22px;flex-wrap:wrap}
.case__kpi li{display:flex;flex-direction:column}
.case__kpi b{font-family:var(--f-display);font-size:22px;color:var(--pink);line-height:1.2}
.case__kpi span{font-size:12.5px;opacity:.55}
.case__strip{display:grid;grid-template-columns:repeat(4,1fr);gap:9px}
.case__strip img{aspect-ratio:1/1;object-fit:cover;border-radius:12px;width:100%;opacity:.82;transition:opacity .35s,transform .35s var(--ease)}
.case__strip img:hover{opacity:1;transform:translateY(-3px)}

/* ============================================================ REELS */
.reels{background:var(--cream);padding:clamp(76px,11vh,132px) 0}
/* On the portfolio page the reels and the stills are one continuous run,
   so the two sections meet without the usual section gap. */
.reels--flush{padding:clamp(44px,6vh,72px) 0 0}
.work--flush{padding-top:clamp(20px,3vh,36px)}
.reels__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:clamp(10px,1.3vw,16px)}
.reel{position:relative;border-radius:var(--r);overflow:hidden;aspect-ratio:9/16;background:var(--ink);box-shadow:var(--sh-1);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.reel:hover{transform:translateY(-6px);box-shadow:var(--sh-2)}
.reel video{width:100%;height:100%;object-fit:cover}

/* ============================================================ ABOUT */
.about{background:var(--cream);padding:clamp(76px,11vh,132px) 0 0}
.about__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(36px,5vw,80px);align-items:start;padding-bottom:clamp(60px,9vh,100px)}
.about__in--solo{grid-template-columns:1fr;max-width:62ch;padding-bottom:clamp(44px,6vh,72px)}
.about__in--solo .about__text p{max-width:none}
.about__text p{opacity:.74;max-width:52ch}

.bignum{
  background:var(--yellow);border:3px solid var(--ink);border-radius:var(--r-lg);
  padding:40px 36px;text-align:center;box-shadow:10px 10px 0 var(--ink);
}
.bignum b{display:block;direction:ltr;font-family:var(--f-latin);font-weight:600;font-size:clamp(64px,9vw,104px);line-height:.95;letter-spacing:-.04em}
.bignum span{font-family:var(--f-display);font-size:19px;line-height:1.3;display:block;margin-top:10px}

.stamps{display:flex;gap:16px;justify-content:center;margin-top:34px;flex-wrap:wrap}
.stamp{position:relative;width:128px;height:128px;border-radius:50%;border:3px solid var(--ink);display:grid;place-items:center;animation:spin 26s linear infinite}
.stamp--dark{background:var(--ink)}
.stamp--pink{background:var(--pink);animation-direction:reverse}
.stamp--yellow{background:var(--yellow)}
@keyframes spin{to{transform:rotate(-360deg)}}
.stamp>svg{position:absolute;inset:0;width:100%;height:100%}
.stamp__txt{font-family:var(--f-body);font-size:13px;font-weight:600;fill:var(--ink)}
.stamp--dark .stamp__txt{fill:var(--yellow)}
.stamp__core{position:relative;font-family:var(--f-latin);font-weight:600;font-size:30px;color:var(--yellow);animation:spin 26s linear infinite reverse;display:block}
.stamp__icon{width:44%;height:auto;animation:spin 26s linear infinite reverse}
.stamp__tongue{width:25%;height:auto;animation:spin 26s linear infinite reverse}
.stamp--pink .stamp__tongue{animation-direction:normal}
.stamp--yellow .stamp__core{color:var(--ink)}
.stamp__core--sm{font-family:var(--f-display);font-size:13px;line-height:1.15;text-align:center}

.band{background:var(--pink);color:var(--ink);overflow:hidden;padding:20px 0;border-block:3px solid var(--ink)}
.band__track{display:flex;width:max-content}
.band i{font-family:var(--f-display);font-style:normal;font-size:clamp(20px,2.6vw,32px);padding-inline:30px;display:flex;align-items:center;gap:30px;white-space:nowrap}
.band i::after{content:'';width:11px;height:11px;border-radius:50%;background:var(--ink);flex:none}

/* ============================================================ CONTACT */
.contact{background:var(--ink);color:var(--cream);padding:clamp(80px,12vh,140px) 0}
.contact .sec-title{color:var(--cream)}
.contact__in{display:grid;grid-template-columns:1fr 1fr;gap:clamp(36px,5vw,80px);align-items:start}
.contact__text p{opacity:.7;max-width:40ch}
.contact__list{list-style:none;padding:0;margin:34px 0 0;display:flex;flex-direction:column;gap:2px}
.contact__list a{
  display:flex;align-items:baseline;gap:16px;padding:16px 0;
  border-bottom:1.5px solid rgba(255,248,231,.14);
  font-family:var(--f-display);font-size:clamp(19px,2.2vw,26px);
  transition:color .3s,padding .35s var(--ease);
}
.contact__list a:hover{color:var(--yellow);padding-inline-start:10px}
.ci{font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;opacity:.45;min-width:78px}

.form{background:rgba(255,248,231,.05);border:1.5px solid rgba(255,248,231,.11);border-radius:var(--r-lg);padding:clamp(24px,3vw,40px)}
.field{margin-bottom:18px}
.field label{display:block;font-size:13.5px;font-weight:600;opacity:.6;margin-bottom:8px}
.field input,.field textarea{
  width:100%;background:rgba(255,248,231,.07);border:1.5px solid rgba(255,248,231,.15);
  border-radius:var(--r-sm);padding:14px 16px;color:var(--cream);
  font:inherit;font-size:15.5px;transition:border-color .3s,background .3s;resize:vertical;
}
.field input::placeholder,.field textarea::placeholder{color:rgba(255,248,231,.32)}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--yellow);background:rgba(255,248,231,.1)}
.field input.err,.field textarea.err{border-color:var(--pink)}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.nchip{padding:9px 16px;border-radius:999px;border:1.5px solid rgba(255,248,231,.2);font-size:13.5px;font-weight:500;transition:all .25s}
.nchip:hover{border-color:var(--yellow)}
.nchip[aria-pressed="true"]{background:var(--yellow);color:var(--ink);border-color:var(--yellow);font-weight:600}
.form .btn--dark{background:var(--yellow);color:var(--ink);border-color:var(--yellow)}
.form .btn--dark:hover{box-shadow:0 12px 28px rgba(255,228,92,.3)}
/* honeypot: off-screen rather than display:none, so bots still fill it */
.hp{position:absolute;inset-inline-start:-9999px;width:1px;height:1px;overflow:hidden}
.form .btn--dark[disabled]{opacity:.65;cursor:default;transform:none;box-shadow:none}
.form__note{margin:14px 0 0;font-size:14px;min-height:20px;text-align:center}
.form__note.ok{color:var(--yellow)}
.form__note.bad{color:var(--pink)}
/* The line that points at the privacy policy, directly under the submit button.
   Sits on the dark contact panel, so cream at .62 rather than the ink opacities
   used elsewhere. a11y-contrast lifts every p to opacity 1, this one included. */
.form__legal{margin:14px 0 0;font-size:13px;line-height:1.7;text-align:center;color:var(--cream);opacity:.62}
.form__legal a{color:var(--yellow);text-decoration:underline;text-underline-offset:3px}

/* ============================================================ FOOTER */
.foot{background:var(--ink);color:var(--cream);padding:clamp(50px,7vh,80px) 0 40px;border-top:1.5px solid rgba(255,248,231,.1)}
.foot__in{display:flex;flex-direction:column;align-items:center;text-align:center;gap:16px}
.foot__line{font-family:var(--f-display);font-size:20px;margin:0;opacity:.75}
.foot__nav{display:flex;gap:24px;flex-wrap:wrap;justify-content:center;font-size:14.5px;opacity:.7;margin-top:6px}
.foot__nav a:hover{color:var(--yellow);opacity:1}
.foot__small{font-size:13px;opacity:.62;margin:18px 0 0}
.foot__small a:hover{color:var(--yellow);opacity:1}

/* ============================================================ LIGHTBOX */
.lb{position:fixed;inset:0;z-index:300;background:rgba(43,27,46,.94);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);display:grid;place-items:center;padding:clamp(16px,4vw,60px);animation:fade .3s var(--ease-s)}
@keyframes fade{from{opacity:0}to{opacity:1}}
.lb__fig{margin:0;max-width:min(1100px,92vw);max-height:88vh;display:flex;flex-direction:column;gap:14px;align-items:center}
.lb__fig img,.lb__fig video{max-height:76vh;max-width:min(1100px,92vw);width:auto;border-radius:var(--r);box-shadow:var(--sh-3);animation:zoom .4s var(--ease)}
.lb__fig video{background:var(--ink)}
@keyframes zoom{from{opacity:0;transform:scale(.95)}to{opacity:1;transform:none}}
.lb__fig figcaption{color:var(--cream);text-align:center;font-family:var(--f-display);font-size:18px}
.lb__fig figcaption b{display:block;font-family:var(--f-body);font-size:12px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--yellow);margin-bottom:4px}
.lb__x,.lb__nav{position:absolute;color:var(--cream);display:grid;place-items:center;border-radius:50%;background:rgba(255,248,231,.1);transition:background .25s,transform .25s var(--ease)}
.lb__x:hover,.lb__nav:hover{background:var(--yellow);color:var(--ink);transform:scale(1.08)}
.lb__x{inset-block-start:22px;inset-inline-end:22px;width:48px;height:48px;font-size:20px}
.lb__nav{inset-block-start:50%;transform:translateY(-50%);width:56px;height:56px;font-size:34px;line-height:0;padding-bottom:4px}
.lb__nav:hover{transform:translateY(-50%) scale(1.08)}
.lb__nav--prev{inset-inline-end:22px}
.lb__nav--next{inset-inline-start:22px}

/* ============================================================ RESPONSIVE */
@media (max-width:1100px){
  .svc-grid{grid-template-columns:repeat(2,1fr)}
  .grid{grid-template-columns:repeat(3,1fr)}
}
@media (max-width:900px){
  .nav__links{display:none}
  .burger{display:flex}
  .nav__in{gap:14px}
  .nav__cta{margin-left:auto;padding:11px 18px;font-size:14px}
  .burger{margin-left:0}
  .case,.about__in,.contact__in{grid-template-columns:1fr}
  .case--flip{direction:rtl}
  .about__side{order:-1}
  .bignum{box-shadow:7px 7px 0 var(--ink)}
}
@media (max-width:680px){
  /* denser texture and more rows, or the banner reads as empty yellow */
  .hero{min-height:clamp(520px,76vh,760px)}
  .hero__bg{gap:8px}
  .strip__row--more{display:flex}
  .grid{grid-template-columns:repeat(2,1fr);column-gap:10px}
  .card--wide{grid-column:span 2}
  .svc-grid{grid-template-columns:1fr}
  .svc{min-height:0;padding:24px}
  .case__strip{grid-template-columns:repeat(4,1fr);gap:6px}
  .case__kpi{gap:18px}
  .lb__nav{width:46px;height:46px;font-size:28px}
  .lb__x{width:42px;height:42px;inset-block-start:14px;inset-inline-end:14px}
  .stamps{gap:10px}
  .stamp{width:104px;height:104px}
}

/* ============================================================ WORK STRIP (hero layer) */
.strip__row{
  display:flex;width:max-content;gap:0;
  animation:scrollX 85s linear infinite;
}
.strip__row > *{margin-inline-start:clamp(10px,1.2vw,16px)}
.strip__row--b{animation:scrollXrev 100s linear infinite}
@keyframes scrollXrev{to{transform:translateX(-50%)}}
.strip__row a{
  flex:none;display:block;width:clamp(150px,17vw,250px);aspect-ratio:1/1;
  border-radius:var(--r);overflow:hidden;
}
.strip__row img{width:100%;height:100%;object-fit:cover}
.strip__note{
  text-align:center;margin:clamp(16px,2.4vh,26px) 0 0;
  font-size:14.5px;font-weight:500;opacity:.6;
}
.strip__note a{text-decoration:underline;text-underline-offset:4px}
.strip__note a:hover{opacity:1;color:var(--ink)}

/* ============================================================ PAGE HEAD (subpages) */
.pagehead{
  background:var(--yellow);position:relative;overflow:hidden;isolation:isolate;
  padding:clamp(118px,15vh,176px) 0 clamp(42px,6.5vh,74px);text-align:center;
}
.pagehead h1{font-size:clamp(34px,6.2vw,74px);letter-spacing:-.03em}
.pagehead p{max-width:48ch;margin:20px auto 0;opacity:.72;font-size:16.5px}
.pagehead .eyebrow{margin-bottom:22px}

/* ============================================================ SERVICES (compact, on home) */
.svc-mini{
  list-style:none;padding:0;margin:0;
  display:grid;grid-template-columns:repeat(4,1fr);gap:10px;
}
.svc-mini li{
  background:var(--ink-2);border:1.5px solid rgba(255,248,231,.09);
  border-radius:var(--r-sm);
  transition:background .35s,border-color .35s,transform .35s var(--ease);
}
.svc-mini a{display:flex;align-items:baseline;gap:10px;padding:16px 18px}
.svc-mini li:hover{background:var(--yellow);border-color:var(--yellow);transform:translateY(-3px)}
.svc-mini li:hover b,.svc-mini li:hover i{color:var(--ink)}
.svc-mini i{font-family:var(--f-latin);font-style:normal;font-size:12px;opacity:.55;flex:none}
.svc-mini b{font-family:var(--f-display);font-weight:400;font-size:17px;line-height:1.25}
.svc-more{display:flex;justify-content:center;margin-top:34px}

/* ============================================================ SERVICES (expanded page) */
.svc-page{background:var(--ink);color:var(--cream);padding:clamp(60px,9vh,110px) 0 clamp(20px,3vh,40px)}
.svc-row{
  max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut);
  display:grid;grid-template-columns:1.02fr .98fr;
  gap:clamp(28px,4.5vw,76px);align-items:center;
  padding-block:clamp(36px,6vh,76px);
  border-bottom:1.5px solid rgba(255,248,231,.1);
}
.svc-row:last-child{border-bottom:0}
.svc-row{scroll-margin-top:96px}
.svc-row:target{background:rgba(255,228,92,.055)}
.svc-row:nth-child(even){direction:ltr}
.svc-row:nth-child(even)>*{direction:rtl}
.svc-row__media{
  position:relative;border-radius:var(--r-lg);overflow:hidden;
  box-shadow:var(--sh-3);aspect-ratio:4/3;
}
.svc-row__media img{width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.svc-row:hover .svc-row__media img{transform:scale(1.045)}
.svc-row__n{
  position:absolute;inset-block-start:16px;inset-inline-start:16px;
  background:var(--yellow);color:var(--ink);
  font-family:var(--f-latin);font-weight:600;font-size:15px;
  width:44px;height:44px;border-radius:50%;display:grid;place-items:center;
}
.svc-row h2{font-size:clamp(26px,3.6vw,46px);letter-spacing:-.025em;margin-bottom:10px}
.svc-row__lede{font-family:var(--f-display);font-size:clamp(17px,1.9vw,21px);color:var(--yellow);margin:0 0 16px}
.svc-row p{margin:0;opacity:.72;font-size:16px;line-height:1.75;max-width:48ch}
.svc-row ul{list-style:none;display:flex;flex-wrap:wrap;gap:8px;padding:0;margin:22px 0 0}
.svc-row li{
  font-size:13.5px;font-weight:500;padding:8px 15px;border-radius:999px;
  border:1.5px solid rgba(255,248,231,.22);
}

/* ============================================================ PROCESS */
.process{background:var(--ink);color:var(--cream);padding:clamp(60px,9vh,110px) 0 clamp(76px,11vh,132px)}
.steps{list-style:none;padding:0;margin:0;display:grid;grid-template-columns:repeat(4,1fr);gap:16px;counter-reset:st}
.steps li{
  background:var(--ink-2);border:1.5px solid rgba(255,248,231,.09);
  border-radius:var(--r);padding:28px 26px 30px;
  transition:transform .5s var(--ease),border-color .4s;
}
.steps li:hover{transform:translateY(-6px);border-color:var(--yellow)}
.steps span{display:block;font-family:var(--f-latin);font-weight:500;font-size:14px;color:var(--yellow);opacity:.8}
.steps b{display:block;font-family:var(--f-display);font-weight:400;font-size:25px;margin:10px 0 8px}
.steps p{margin:0;font-size:14.5px;line-height:1.65;opacity:.64}

/* ============================================================ CTA BAND */
.cta-band{background:var(--yellow);padding:clamp(60px,9vh,110px) 0}
.cta-band__in{text-align:center}
.cta-band h2{font-family:var(--f-display);font-size:clamp(27px,4.2vw,52px);letter-spacing:-.025em}
.cta-band p{max-width:46ch;margin:16px auto 30px;opacity:.72}

/* ============================================================ NEXT (cross-links between pages) */
.next{background:var(--cream);padding:clamp(56px,8vh,90px) 0}
.next__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px}
.next__card{
  display:block;padding:30px 28px;border-radius:var(--r);
  background:var(--cream-2);border:2px solid transparent;
  transition:transform .45s var(--ease),border-color .35s,box-shadow .45s var(--ease);
}
.next__card:hover{transform:translateY(-5px);border-color:var(--ink);box-shadow:var(--sh-1)}
.next__card span{font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;opacity:.45}
.next__card b{display:block;font-family:var(--f-display);font-weight:400;font-size:25px;margin-top:6px}
.next__card em{font-style:normal;display:block;font-size:14.5px;opacity:.6;margin-top:6px}

@media (max-width:1100px){
  .steps{grid-template-columns:repeat(2,1fr)}
  .lgo{flex:0 1 170px;min-height:116px}
  .lgo img{max-height:70px}
  .svc-mini{grid-template-columns:repeat(2,1fr)}
  .next__grid{grid-template-columns:1fr}
}
@media (max-width:900px){
  .svc-row{grid-template-columns:1fr;gap:26px}
  .svc-row:nth-child(even){direction:rtl}
}
@media (max-width:680px){
  .lgo{flex:0 1 100px;min-height:92px;padding:12px 7px}
  .lgo img{max-height:54px}
}
/* 15 logos divide by 3 and 5; keep 3 per row even on the narrowest phones so
   the last row never strands one on its own. */
@media (max-width:360px){
  .lgo{flex:0 1 84px;padding:10px 5px}
  .lgo img{max-height:46px}
  .svc-mini{grid-template-columns:1fr}
  .steps{grid-template-columns:1fr}
  .strip__row a{width:104px;border-radius:var(--r-sm)}
}


/* ============================================================ ACCESSIBILITY
   Israeli Standard 5568 (WCAG 2.0 AA). The widget writes classes onto <html>;
   everything below is what those classes actually do. */
.a11y{position:fixed;inset-block-end:18px;inset-inline-start:18px;z-index:400}
.a11y__btn{
  width:52px;height:52px;border-radius:50%;background:var(--ink);color:var(--yellow);
  border:2px solid var(--yellow);display:grid;place-items:center;
  box-shadow:0 6px 20px rgba(43,27,46,.35);transition:transform .3s var(--ease);
}
.a11y__btn:hover{transform:scale(1.07)}
.a11y__btn svg{width:26px;height:26px;fill:currentColor}
.a11y__panel{
  position:absolute;inset-block-end:64px;inset-inline-start:0;width:248px;
  background:var(--cream);border:2px solid var(--ink);border-radius:var(--r);
  padding:14px;box-shadow:var(--sh-2);display:flex;flex-direction:column;gap:6px;
}
.a11y__panel h2{font-family:var(--f-display);font-size:18px;margin:0 0 4px}
.a11y__panel button,.a11y__panel a{
  font:inherit;font-size:14px;text-align:start;padding:9px 12px;border-radius:10px;
  border:1.5px solid rgba(43,27,46,.2);background:transparent;color:var(--ink);
  cursor:pointer;transition:background .2s,border-color .2s;
}
.a11y__panel button:hover,.a11y__panel a:hover{background:rgba(43,27,46,.07);border-color:var(--ink)}
.a11y__panel [aria-pressed="true"]{background:var(--ink);color:var(--yellow);border-color:var(--ink)}
.a11y__row{display:flex;align-items:center;gap:6px}
.a11y__row button{flex:none;width:42px;text-align:center;font-weight:700}
.a11y__row span{flex:1;text-align:center;font-size:13px;opacity:.7}

/* stop everything that moves (WCAG 2.2.2) */
html.a11y-stop *,html.a11y-stop *::before,html.a11y-stop *::after{
  animation-play-state:paused!important;transition:none!important;
}
html.a11y-stop .reveal{opacity:1!important;transform:none!important}

/* readable font */
html.a11y-font,html.a11y-font *{font-family:Arial,"Arial Hebrew",sans-serif!important}

/* underline every link so they are not colour-only */
html.a11y-links a{text-decoration:underline!important;text-underline-offset:3px}

/* a visibly larger pointer */
html.a11y-cursor,html.a11y-cursor *{
  cursor:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='48' height='48' viewBox='0 0 24 24'%3E%3Cpath d='M5 2l14 10-6 1 4 7-3 2-4-7-5 4z' fill='%23fff' stroke='%23000' stroke-width='1.5'/%3E%3C/svg%3E") 4 2,auto!important;
}

/* high contrast */
html.a11y-contrast,html.a11y-contrast body{background:#000!important;color:#fff!important}
html.a11y-contrast *{background-color:transparent!important;color:#fff!important;
  border-color:#fff!important;box-shadow:none!important;text-shadow:none!important}
html.a11y-contrast a,html.a11y-contrast .btn,html.a11y-contrast .chip[aria-selected="true"]{color:#ff0!important}
html.a11y-contrast .btn,html.a11y-contrast .chip,html.a11y-contrast .a11y__btn,
html.a11y-contrast input,html.a11y-contrast textarea{border:2px solid #fff!important}
html.a11y-contrast .a11y__panel{background:#000!important}
/* dimmed body copy must come back to full strength here, or #666-on-black fails AA */
html.a11y-contrast .reveal{opacity:1!important;transform:none!important}
html.a11y-contrast p,html.a11y-contrast li,html.a11y-contrast .foot__small,
html.a11y-contrast .svc-mini i,html.a11y-contrast .next__card span,
html.a11y-contrast .next__card em,html.a11y-contrast .eyebrow{opacity:1!important}
html.a11y-contrast .hero__bg{display:none!important}
/* the dark wordmark disappears on black, so swap in the yellow lockup */
html.a11y-contrast .nav .logo__img{content:url(assets/brand/logo-yellow.webp)}
/* client logos carry their own colours; keep that panel light so they stay readable */
html.a11y-contrast .logos{background:#fff!important}
html.a11y-contrast .logos *{color:#000!important;border-color:#000!important}

@media (max-width:680px){
  .a11y{inset-block-end:12px;inset-inline-start:12px}
  .a11y__btn{width:46px;height:46px}
  .a11y__panel{width:min(248px,calc(100vw - 32px))}
}

/* ============================================================ PROSE (legal/text pages) */
.prose{background:var(--cream);padding:clamp(56px,8vh,96px) 0 clamp(70px,10vh,120px)}
.prose .wrap{max-width:68ch}
.prose h2{font-family:var(--f-display);font-size:clamp(22px,2.8vw,32px);margin:clamp(30px,4vh,46px) 0 12px}
.prose h2:first-child{margin-top:0}
.prose p{margin:0 0 14px;opacity:.82;line-height:1.8}
.prose ul{margin:0 0 14px;padding-inline-start:1.2em}
.prose li{margin-bottom:9px;opacity:.82;line-height:1.75}
.prose strong{font-weight:600;opacity:1}
.prose__note{background:var(--cream-2);border:2px solid var(--ink);border-radius:var(--r-sm);padding:14px 16px;opacity:1}

/* ============================================================ CONSENT
   Painted only when app.js has a tracker registered; dormant otherwise. */
.consent{
  position:fixed;inset-inline:0;inset-block-end:0;z-index:500;
  background:var(--cream);border-block-start:2px solid var(--ink);
  box-shadow:0 -10px 34px rgba(43,27,46,.18);
  animation:consentUp .45s var(--ease) both;
}
@keyframes consentUp{from{transform:translateY(100%)}to{transform:none}}
.consent__in{
  width:100%;max-width:var(--wrap);margin-inline:auto;padding:18px var(--gut);
  display:flex;align-items:center;gap:20px;flex-wrap:wrap;justify-content:space-between;
}
.consent strong{display:block;font-family:var(--f-display);font-weight:400;font-size:19px;margin-bottom:4px}
.consent p{margin:0;font-size:14.5px;line-height:1.7;opacity:.78;max-width:62ch}
.consent a{text-decoration:underline;text-underline-offset:3px}
.consent__btns{display:flex;gap:10px;flex-shrink:0}
.consent__btns .btn{padding:13px 26px;font-size:15px}
@media (max-width:680px){
  .consent__btns{width:100%}
  .consent__btns .btn{flex:1}
}
/* keep the accessibility button clear of the bar while it is up */
.a11y{transition:inset-block-end .35s var(--ease)}
html.consent-open .a11y{inset-block-end:calc(var(--consent-h,0px) + 18px)}
/* the reopener app.js appends to the footer nav, matched to its links */
.foot__nav button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.foot__nav button:hover{color:var(--yellow)}