/* MIRI Deutsch — portfolio v2 (goats grammar) · style.css
   Fonts: Nostela (display) · Sprinter (body) · Pompei Narrow (labels) — private licensed files, do not publish publicly. */

@font-face{font-family:"Nostela";src:url("assets/fonts/Nostela-VF.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Sprinter";src:url("assets/fonts/Sprinter-VF.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Pompei Narrow";src:url("assets/fonts/PompeiNarrow-VF.woff2") format("woff2");font-weight:100 800;font-display:swap}
@font-face{font-family:"Nostela Fallback";src:local("Arial");size-adjust:160%;ascent-override:59%;descent-override:18%;line-gap-override:0%}
@font-face{font-family:"Sprinter Fallback";src:local("Arial");size-adjust:108%;ascent-override:88%;descent-override:29%;line-gap-override:0%}

:root{
  /* colour — 60 / 30 / 10 (from her identity board) */
  --ink:#242a30; --ink-2:#2d343b; --ink-deep:#242a30; /* her black: never pure black */
  --ivory:#F4F4F4;
  --studio:#EAEAEA; /* sampled from the reference floor */
  --fuchsia:#EC0B8C;
  --white:#FFFFFF;
  --muted:#66626A; --muted-d:#A9A4AD;
  --line:rgba(36,42,48,.14); --line-d:rgba(246,241,243,.16);

  /* type — 5 sizes + display */
  --f-display:"Nostela","Nostela Fallback","Arial Black",Arial,sans-serif;
  --f-body:"Sprinter","Sprinter Fallback",Arial,"Noto Sans Hebrew",system-ui,sans-serif;
  --f-label:"Pompei Narrow",Arial,system-ui,sans-serif;
  --fs-display:clamp(2.5rem, .25rem + 9.9vw, 12rem);
  --fs-h2:clamp(2.125rem, 1rem + 4.4vw, 5.5rem);
  --fs-h3:clamp(1.375rem, 1.1rem + .9vw, 2rem);
  --fs-body:clamp(1.0625rem, 1rem + .22vw, 1.25rem);
  --fs-label:.875rem;
  --w-thin:200; --w-reg:400; --w-heavy:800;

  /* space & shape */
  --gx:clamp(1rem, .4rem + 3vw, 3.5rem);
  --s1:.75rem; --s2:1.5rem; --s3:clamp(3rem, 2rem + 5vw, 7.5rem);
  --r-card:20px; --r-btn:999px; --overlap:28px;
  --ease:cubic-bezier(.22,1,.36,1);
  --shadow:0 12px 24px rgba(36,42,48,.12);
}

*,*::before,*::after{box-sizing:border-box}
html{font-family:var(--f-body);font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;background:var(--ink);color:var(--ink);scroll-padding-top:6rem}
body{margin:0;font-size:var(--fs-body);line-height:1.3;font-weight:var(--w-reg);background:var(--studio);overflow-x:clip}
img,svg{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer;text-align:inherit}
h1,h2,h3,p,ul,ol{margin:0}
ul,ol{list-style:none;padding:0}
:focus-visible{outline:2px solid var(--fuchsia);outline-offset:4px;border-radius:6px}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:fixed;inset-inline-start:1rem;top:-4rem;z-index:100;background:var(--ink);color:var(--ivory);padding:.75rem 1.25rem;border-radius:var(--r-btn);transition:top .3s var(--ease)}
.skip:focus{top:1rem}
main{overflow-x:clip}
.acc{color:var(--fuchsia)}
b{font-weight:var(--w-heavy)}

/* ---------- micro layer ---------- */
.label{font-family:var(--f-label);font-size:var(--fs-label);font-weight:var(--w-reg);line-height:1.3;color:var(--muted)}
.label--latin{letter-spacing:.14em;text-transform:uppercase}
[data-theme="dark"] .label{color:var(--muted-d)}

/* ---------- buttons ---------- */
.btn{display:inline-flex;align-items:center;gap:.75rem;min-height:48px;padding-block:.5rem;padding-inline:1.5rem .5rem;border-radius:var(--r-btn);background:var(--ink);color:var(--ivory);font-size:var(--fs-label);font-family:var(--f-body);white-space:nowrap;transition:background .5s var(--ease),color .5s var(--ease)}
.btn i{display:grid;place-items:center;width:34px;height:34px;border-radius:50%;background:var(--fuchsia);color:var(--ivory);font-style:normal;transition:transform .6s var(--ease)}
.btn:hover i{transform:translateX(-4px)}
.btn--light{background:var(--ivory);color:var(--ink)}
.btn--ghost{background:transparent;border:1px solid var(--line);color:var(--ink);padding-inline:1.5rem}
.btn--ghost:hover{background:var(--ink);color:var(--ivory)}

/* ---------- header ---------- */
.hdr{position:fixed;inset-inline:var(--gx);top:clamp(.75rem,.5rem + 1vw,1.5rem);z-index:50;display:flex;align-items:center;justify-content:space-between;pointer-events:none;transition:transform .7s var(--ease)}
.hdr>*{pointer-events:auto}
.hdr.is-hidden{transform:translateY(-140%)}
.hdr__logo{display:flex;align-items:center;min-height:48px;width:clamp(104px,8vw + 40px,168px);--lm:var(--fuchsia);--li:var(--ink)}
.hdr__logo svg{width:100%;height:auto}
.hdr.on-dark .hdr__logo{--li:var(--white)}
.hdr__bar{position:relative;display:flex;align-items:center;gap:.15rem;padding:.4rem;padding-inline-start:1rem;background:rgba(255,255,255,.8);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4);border:1px solid rgba(255,255,255,.7);border-radius:var(--r-card);box-shadow:var(--shadow);transition:background-color .6s var(--ease),border-color .6s var(--ease),box-shadow .6s var(--ease),-webkit-backdrop-filter .6s,backdrop-filter .6s}
/* a solid fuchsia pill slides under the link of the section you are in */
.hdr__ind{position:absolute;top:50%;left:0;height:40px;margin-top:-20px;border-radius:var(--r-btn);background:var(--fuchsia);opacity:0;pointer-events:none;transition:transform .6s var(--ease),width .6s var(--ease),opacity .4s}
.hdr__link{position:relative;z-index:1}
.hdr__link.is-active{color:var(--ink);font-weight:var(--w-heavy)}
.hdr__link.is-active:hover{color:var(--ink)}
.hdr__link{display:inline-flex;align-items:center;min-height:44px;padding-inline:.7rem;font-size:var(--fs-label);border-radius:var(--r-btn);transition:color .3s;white-space:nowrap}
.hdr__link:hover{color:var(--fuchsia)}
.hdr__bar .btn{margin-inline-start:.5rem;padding-inline:1.4rem;background:var(--fuchsia);color:var(--ink-deep);font-weight:var(--w-heavy)}
.hdr__bar .btn i{display:none}
.hdr__menu{position:relative;width:48px;height:48px;border-radius:14px;display:grid;place-items:center;margin-inline-start:.25rem}
.hdr__menu span:not(.sr){position:absolute;width:24px;height:1.5px;background:var(--ink);border-radius:2px;transition:transform .6s var(--ease)}
.hdr__menu span:nth-child(1){transform:translateY(-4px)}
.hdr__menu span:nth-child(2){transform:translateY(4px)}
.hdr__menu[aria-expanded="true"] span:nth-child(1){transform:rotate(45deg)}
.hdr__menu[aria-expanded="true"] span:nth-child(2){transform:rotate(-45deg)}

/* ---------- quick contact rail (as goats): Instagram · WhatsApp · phone, fixed at the side ---------- */
.rail{position:fixed;z-index:44;inset-inline-end:clamp(.75rem,.4rem + .8vw,1.5rem);top:50%;translate:0 -50%;display:grid;gap:.6rem}
.soc{display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:rgba(255,255,255,.82);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 6px 16px rgba(36,42,48,.12);color:var(--ink);transition:background-color .4s var(--ease),color .4s,scale .4s var(--ease)}
.soc svg{width:21px;height:21px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linejoin:round;stroke-linecap:round}
.soc svg .f{fill:currentColor;stroke:none}
.soc:hover,.soc:focus-visible{background:var(--fuchsia);color:var(--white);scale:1.06}
.menu__soc{display:flex;gap:.6rem}
/* touch devices: a lit laptop screen drops its B/W layer with the works' own transition */
.laptop__screen.is-lit .laptop__spot{opacity:0;transition:opacity .9s var(--ease)}
@media (hover:none) and (pointer:coarse) and (prefers-reduced-motion:reduce){
  .card__img img{filter:none;transition:none}
}
/* the floating rail: bare white line icons, bottom-right on the site's own margin (--gx), Instagram · phone · WhatsApp */
.rail{inset-inline-end:auto;top:auto;translate:none;right:var(--gx);bottom:var(--gx);gap:.75rem}
.rail .soc{width:48px;height:48px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;border-radius:0;color:var(--white);place-items:center end}
.rail .soc svg{width:30px;height:30px;stroke-width:1.6;filter:drop-shadow(0 1px 1.5px rgba(36,42,48,.55)) drop-shadow(0 3px 8px rgba(36,42,48,.32));transition:color .3s var(--ease),scale .4s var(--ease)}
.rail .soc:hover,.rail .soc:focus-visible{background:none;scale:1;color:var(--fuchsia)}
.rail .soc:hover svg,.rail .soc:focus-visible svg{scale:1.08}
@media (max-width:820px){
  .rail .soc svg{width:28px;height:28px}
}

/* ---------- full-screen menu: an index of the set — lines, numbers, one CTA ---------- */
.menu{position:fixed;inset:0;z-index:45;background:var(--ink);color:var(--ivory);display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);grid-template-rows:1fr auto;gap:var(--s2) var(--s3);padding:clamp(7rem,6rem + 4vw,9rem) var(--gx) var(--gx);clip-path:inset(0 0 100% 0);transition:clip-path .9s var(--ease),visibility 0s .9s;visibility:hidden}
.menu.is-open{clip-path:inset(0 0 0 0);visibility:visible;transition:clip-path .9s var(--ease)}
.menu__list{align-self:center;border-top:1px solid var(--line-d)}
.menu__list li{overflow:clip;border-bottom:1px solid var(--line-d)}
.menu__list a{display:flex;align-items:center;gap:1.25rem;min-height:44px;padding-block:clamp(.45rem,.2rem + .8vw,.9rem);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;translate:0 105%;transition:translate .9s var(--ease) calc(.2s + var(--i) * .06s),color .4s}
.menu.is-open .menu__list a{translate:0 0}
.menu__n{font-family:var(--f-label);font-size:var(--fs-label);font-weight:var(--w-reg);color:var(--muted-d);min-width:2ch}
.menu__t{transition:translate .6s var(--ease)}
.menu__list a::after{content:"";width:9px;height:9px;margin-inline-start:auto;border-radius:50%;background:var(--fuchsia);scale:0;transition:scale .5s var(--ease)}
.menu__list a:hover,.menu__list a:focus-visible{color:var(--white)}
.menu__list a:hover .menu__t,.menu__list a:focus-visible .menu__t{translate:-.35em 0}
.menu__list a:hover::after,.menu__list a:focus-visible::after{scale:1}
.menu__side{align-self:center;display:grid;gap:var(--s2);justify-items:start;opacity:0;translate:0 20px;transition:opacity .8s var(--ease) .45s,translate .8s var(--ease) .45s}
.menu.is-open .menu__side{opacity:1;translate:0 0}
.menu__side .label{color:var(--muted-d)}
.menu__say{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h3);line-height:1.15;max-width:18ch}
.menu__foot{grid-column:1/-1;display:flex;flex-wrap:wrap;gap:var(--s1) var(--s2);justify-content:space-between;border-top:1px solid var(--line-d);padding-top:var(--s2)}
.menu__foot .label{color:var(--muted-d)}

/* ---------- loader ---------- */
.loader{display:none}
.motion .loader{position:fixed;inset:0;z-index:90;display:grid;place-items:center;background:var(--ink);color:var(--ivory)}
.loader__brush{width:min(46vw,340px);clip-path:inset(0 100% 0 0)}
.loader__brush svg{width:100%;height:auto;fill:var(--fuchsia)}
.loader .label{position:absolute;bottom:var(--gx);inset-inline:var(--gx);display:flex;justify-content:space-between;color:var(--muted-d)}

/* ======================================================
   01 · HERO — laptop on set, butterfly perched on the lid
   ====================================================== */
.hero{position:relative;background:var(--studio)}
.hero__stage{position:relative;min-height:100svh;overflow:clip;isolation:isolate;display:grid;align-items:center;padding:clamp(6.5rem,6rem + 2vw,8rem) var(--gx) clamp(2.5rem,2rem + 2vw,4rem)}
.motion .hero{height:220svh}
.motion .hero__stage{position:sticky;top:0;height:100svh}
.hero__bg{position:absolute;inset:0;z-index:-1;background:radial-gradient(90% 80% at 30% 55%,#F3F2F5 0%,var(--studio) 55%,#DAD9DE 100%)}
.hero__light{position:absolute;inset:0;z-index:-1;pointer-events:none;background:radial-gradient(38% 52% at 50% 40%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%)}
.hero__copy{position:relative;z-index:4;display:grid;gap:var(--s2);align-content:center;justify-items:start;pointer-events:none}
.hero__copy a{pointer-events:auto}
.hero__title{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h2);line-height:1;letter-spacing:-.015em}
.hero__title .ln{display:block;white-space:nowrap}
.hero__title .ln--giant{font-size:var(--fs-display);line-height:.92;letter-spacing:-.025em;margin-block:.04em}
.hero__title .ln--heavy{font-weight:var(--w-heavy);white-space:normal} /* a long last line breaks after "ושמוכרת" (the rest is .nw) instead of shrinking */
.hero__title .w{display:inline-block;overflow:clip;vertical-align:top;padding-block:.06em;margin-block:-.06em}
.hero__title .w>span{display:inline-block}
.hero__lead{max-width:42ch}
.hero__trust{display:flex;flex-wrap:wrap;gap:.3rem 1rem;font-size:var(--fs-label);color:var(--muted);opacity:.85}
.hero__cta{display:flex;flex-wrap:wrap;gap:var(--s1)}
.hero__scroll{position:absolute;bottom:var(--s2);left:var(--gx);color:var(--muted);writing-mode:vertical-rl}

.hero__set{position:absolute;z-index:3;left:var(--gx);bottom:clamp(5rem,2rem + 7svh,9rem);width:min(42vw,54svh * 1.25,720px);display:grid;place-items:center;perspective:1800px;will-change:transform}
.laptop{--L:100%;position:relative;width:var(--L);will-change:transform}
.laptop__body{transform:rotateY(-14deg) rotateX(4deg);transform-origin:30% 60%;transform-style:preserve-3d}
.motion .laptop__body{transform:none}
.laptop__lid{position:relative;aspect-ratio:1.56;background:linear-gradient(165deg,#34333a,#0e0d10 55%);border-radius:clamp(10px,1.4vw,20px) clamp(10px,1.4vw,20px) 4px 4px;padding:1.7% 1.7% 2.6%;box-shadow:0 0 0 1.5px #b9b8c0,0 0 0 2.5px #e6e5ea,0 40px 70px -30px rgba(36,42,48,.45)}
.laptop__cam{position:absolute;top:1%;left:50%;width:6px;height:6px;margin-left:-3px;border-radius:50%;background:#3a3940}
.laptop__screen{position:relative;width:100%;height:100%;border-radius:4px;overflow:hidden;background:var(--ink)}
.laptop__screen img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:top;clip-path:inset(0 0 0 100%);z-index:1}
.laptop__screen img.is-prev{clip-path:inset(0)}
.laptop__screen img.is-on{clip-path:inset(0);z-index:1;transition:clip-path 1s var(--ease)}
.laptop__screen img.is-prev{z-index:0}
.laptop__spot{display:none}
.motion .laptop__spot{display:block;position:absolute;inset:0;z-index:2;pointer-events:none;-webkit-backdrop-filter:grayscale(1) contrast(1.06);backdrop-filter:grayscale(1) contrast(1.06);--mx:50%;--my:45%;--r:0px;-webkit-mask-image:radial-gradient(circle at var(--mx) var(--my),transparent 0,transparent calc(var(--r) * .5),#000 var(--r));mask-image:radial-gradient(circle at var(--mx) var(--my),transparent 0,transparent calc(var(--r) * .5),#000 var(--r))}
.laptop__screen::after{content:"";position:absolute;inset:0;z-index:3;pointer-events:none;background:linear-gradient(115deg,rgba(255,255,255,.16) 0%,rgba(255,255,255,.04) 28%,transparent 42%)}
/* keyboard deck seen from the front and slightly above: wider at the front edge */
.laptop__deck{position:relative;width:112%;margin-inline:-6%;aspect-ratio:112/17;background:linear-gradient(180deg,#9d9ca4 0%,#d9d8de 9%,#efeef2 22%,#e2e1e6 70%,#cbcad0 100%);clip-path:polygon(5% 0,95% 0,100% 88%,99.4% 100%,.6% 100%,0 88%)}
.laptop__deck::after{content:"";position:absolute;inset:auto 0 0;height:12%;background:linear-gradient(180deg,#a9a8b0,#8d8c94)}
.laptop__keys{position:absolute;top:12%;left:13%;right:13%;height:46%;background:#57565d;clip-path:polygon(2% 0,98% 0,100% 100%,0 100%);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 5.2%,transparent 5.2% 6.25%),repeating-linear-gradient(180deg,#000 0 19%,transparent 19% 25%);mask-image:repeating-linear-gradient(90deg,#000 0 5.2%,transparent 5.2% 6.25%),repeating-linear-gradient(180deg,#000 0 19%,transparent 19% 25%);-webkit-mask-composite:source-in;mask-composite:intersect;opacity:.6}
.laptop__pad{position:absolute;top:63%;left:38%;width:24%;height:22%;border-radius:4px;background:rgba(36,42,48,.06);box-shadow:inset 0 0 0 1px rgba(36,42,48,.12)}
.laptop__shadow{position:absolute;left:-8%;right:-8%;bottom:-5%;height:8%;background:radial-gradient(closest-side,rgba(36,42,48,.28),transparent);filter:blur(6px);z-index:-1}

/* the butterfly sits on the lid's top edge */

/* the result sticker, stuck on the laptop's bottom corner (same language as the site's stickers) */
.shot-stk{position:absolute;z-index:4;left:44%;top:68%;max-width:min(62%,300px);padding:.55rem .9rem;border:4px solid var(--white);border-radius:10px;background:var(--fuchsia);color:var(--ink-deep);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-label);line-height:1.25;rotate:-4deg;box-shadow:0 6px 14px rgba(36,42,48,.18)}
.shot-stk__txt{display:block;transition:opacity .4s}
.shot-stk.is-pop{animation:stk-pop .5s var(--ease)}
@keyframes stk-pop{40%{scale:1.08}}

/* 02 · statement — in flow by default, overlay inside the pinned set in motion mode */
.say{position:relative;z-index:5;padding:var(--s3) var(--gx);background:var(--studio);display:grid;gap:var(--s2);align-content:center;justify-items:center;text-align:center}
.motion .say{position:absolute;inset:0;padding-block:0;background:none;opacity:0;pointer-events:none}
.say__text{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.08;letter-spacing:-.015em;max-width:18ch;text-wrap:balance}
.say__text .w{color:var(--ink);opacity:.14}
.say__text .acc .w,.say__text .acc.w{color:var(--fuchsia)}
html:not(.motion) .say__text .w{opacity:1}

/* ---------- section scaffolding ---------- */
.sec{position:relative;padding:var(--s3) var(--gx)}
.sec--card{margin-top:calc(var(--overlap) * -1);border-radius:var(--overlap) var(--overlap) 0 0;box-shadow:0 -12px 24px rgba(36,42,48,.08);z-index:5}
.sec--studio{background:var(--studio)}
.sec--ivory{background:var(--ivory)}
.sec--ink{background:var(--ink);color:var(--ivory)}
.sec--fuchsia{background:var(--fuchsia);color:var(--ink-deep)}
.sec--fuchsia .label{color:var(--ink-deep)}
.sec__head{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s1) var(--s2);margin-bottom:var(--s3)}
.sec__head .label{grid-column:1/-1}
.h2{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.015em;text-wrap:balance}
.h2 .w{display:inline-block;overflow:clip;vertical-align:top;padding-block:.06em;margin-block:-.06em}
.h2 .w>span{display:inline-block}
.sec__count{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h2);line-height:1;color:var(--muted)}

/* ---------- pains: three takes — "today" is cut with a fuchsia line, "after" stays ---------- */
.pains{display:grid;gap:var(--s3);justify-items:start}
.takes{width:100%;border-top:1px solid var(--line)}
.take{display:grid;grid-template-columns:minmax(0,.32fr) minmax(0,1.25fr) minmax(0,1fr);gap:var(--s2) var(--s3);align-items:start;padding-block:clamp(1.75rem,1rem + 2.5vw,3.25rem);border-bottom:1px solid var(--line)}
.take__n{padding-top:.5em}
.take__q{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15;text-wrap:balance}
.take__cut{display:grid;gap:var(--s2)}
.take__now,.take__then{display:grid;gap:.3rem}
.take__now{color:var(--muted)}
.take__txt{background:linear-gradient(var(--fuchsia),var(--fuchsia)) no-repeat 100% 58% / var(--cut,100%) 2px}
.motion .take__txt{--cut:0%}
.take__then .label{color:var(--ink)}
.take__then .label::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:.45rem;border-radius:50%;background:var(--fuchsia);vertical-align:.1em}

/* ---------- 03 · work — big cards, always visible ---------- */
.work{padding-inline:0;padding-top:calc(var(--s2) + 2.5rem);overflow:clip}
.work .sec__head{padding-inline:var(--gx)}
.work__viewport{overflow:visible}
.work__track{display:flex;gap:var(--s2);padding-inline:var(--gx);width:max-content}
.card{width:clamp(270px,24vw,420px)}
.card__btn{display:grid;gap:.6rem;width:100%;text-align:start}
.card__img{position:relative;display:block;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--ink);box-shadow:var(--shadow)}
.card__img img{width:100%;height:100%;object-fit:cover;object-position:var(--pos,50% 0);filter:grayscale(1) contrast(1.06);transition:filter .9s var(--ease),transform 1.2s var(--ease)}
.card__btn:hover .card__img img,.card__btn:focus-visible .card__img img,.card.is-lit .card__img img{filter:none}
.card__btn:hover .card__img img,.card__btn:focus-visible .card__img img{transform:scale(1.04)}
.card__over{position:absolute;inset:auto 0 0;display:flex;align-items:flex-end;justify-content:space-between;gap:var(--s1);padding:clamp(1rem,.8rem + .6vw,1.5rem);padding-top:4rem;background:linear-gradient(180deg,rgba(36,42,48,0),rgba(36,42,48,.78));color:var(--white)}
.card__meta{display:flex;align-items:center;justify-content:space-between;gap:var(--s1);margin-top:.35rem}
.tag{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:var(--r-btn);border:1px solid rgba(255,255,255,.55);font-size:var(--fs-label);line-height:1.2;white-space:nowrap}
.tag--live{background:var(--white);border-color:var(--white);color:var(--ink)}
.tag--live::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--fuchsia)}
.card__name{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.05}
.card__result{color:var(--muted)}
.card__result b{color:var(--ink)}
.card__go{display:inline-flex;align-items:center;gap:.5rem;font-size:var(--fs-label);min-height:44px}
.card__go i{font-style:normal;color:var(--fuchsia);transition:translate .5s var(--ease)}
.card__btn:hover .card__go i{translate:-6px 0}

/* ---------- clients: end credits — one name at a time lights up as it rolls past the centre ---------- */
.clients{position:relative;padding-block:var(--s3)}
.credits{display:grid;justify-items:center;text-align:center;gap:var(--s1)}
.clients__h{color:var(--ivory)}
.credits__list{display:grid;justify-items:center;gap:clamp(2.75rem,2rem + 3vw,5rem);margin-top:var(--s3)}
.credit{display:grid;justify-items:center;gap:.9rem}
.credit .label{color:var(--muted-d)}
.credit img{height:clamp(54px,3vw + 36px,92px);width:auto;max-width:min(70vw,360px);object-fit:contain;filter:brightness(0) invert(1)}
.credit__txt{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1;color:var(--ivory)}
.motion .credit{opacity:.18;transition:opacity .7s var(--ease)}
.motion .credit.is-on{opacity:1}
.stk--stage{position:absolute;top:var(--s3);inset-inline-end:var(--gx);width:clamp(110px,7vw + 60px,200px);rotate:10deg}


/* ---------- 05 · how ---------- */
.how .h2{max-width:20ch}
.how__lead{max-width:46ch;color:rgba(246,241,243,.82);margin-bottom:var(--s3)}
/* the phone demo (from her site): the store is built in three stages as you scroll */
.how__lead{margin-bottom:var(--s2)}
.demo{display:grid;grid-template-columns:minmax(0,5fr) minmax(0,6fr);gap:var(--s3);align-items:center;min-height:min(100svh,52rem);padding-block:var(--s2)}
.steps{display:grid;gap:0;align-self:center;border:0}
.step{position:relative;display:grid;gap:.6rem;align-content:start;padding-block:var(--s2);opacity:.32;transition:opacity .6s var(--ease)}
.step__bar{position:absolute;inset-inline:0;bottom:0;height:2px;background:var(--line-d);overflow:hidden}
.step__bar::after{content:"";position:absolute;inset:0;background:var(--fuchsia);transform-origin:right;transform:scaleX(var(--p,1))}
.demo[data-step="1"] .step[data-i="1"],.demo[data-step="2"] .step[data-i="2"],.demo[data-step="3"] .step[data-i="3"],html:not(.motion) .step{opacity:1}
.phone{justify-self:center;position:relative;margin:0;height:min(76svh,46rem);aspect-ratio:9/18.5;padding:.5rem;border-radius:2.7rem;border:1.5px solid #34333a;background:#0d0c10;box-shadow:0 40px 80px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.06) inset}
.phone::before{content:"";position:absolute;z-index:6;top:1rem;left:50%;width:30%;height:1.4rem;translate:-50% 0;border-radius:999px;background:#000}
.phone__screen{position:relative;height:100%;overflow:hidden;border-radius:2.25rem;background:#1c1b20;transition:background-color .9s var(--ease)}
.demo:is([data-screen="built"],[data-screen="live"]) .phone__screen{background:var(--white)}
.shop{display:flex;flex-direction:column;height:100%;color:var(--ivory);transition:color .9s var(--ease)}
.demo:is([data-screen="built"],[data-screen="live"]) .shop{color:var(--ink)}
.shop__bar{display:flex;align-items:center;justify-content:space-between;padding:2.9rem 1.1rem .8rem;font-size:var(--fs-label)}
.shop__brand,.shop__name,.shop__why{display:grid;align-items:center}
.shop__brand>*,.shop__name>*,.shop__why>*{grid-area:1/1}
.shop__bag{width:1.25rem;height:1.25rem;fill:none;stroke:currentColor;stroke-width:1.6}
.shop__img{position:relative;flex:1 1 auto;min-height:0;margin-inline:.7rem;border-radius:1rem;overflow:hidden}
.shop__wire{position:absolute;inset:0;border:1px solid rgba(246,241,243,.22);border-radius:inherit;background-image:linear-gradient(rgba(246,241,243,.07) 1px,transparent 1px),linear-gradient(90deg,rgba(246,241,243,.07) 1px,transparent 1px);background-size:18px 18px;transition:opacity .6s var(--ease)}
.shop__photo{position:absolute;inset:0;background:var(--studio);clip-path:inset(0 0 100% 0);transition:clip-path 1.1s var(--ease)}
.shop__photo img{width:100%;height:100%;object-fit:cover;object-position:50% 12%;scale:1.12;transition:scale 1.6s var(--ease)}
.demo:is([data-screen="built"],[data-screen="live"]) .shop__photo img{scale:1}
.tagchip{position:absolute;padding:.3rem .7rem;border-radius:999px;background:var(--fuchsia);color:var(--ink-deep);font-size:var(--fs-label);line-height:1.2;transition:opacity .5s var(--ease),scale .5s var(--ease)}
.tagchip--a{top:16%;inset-inline-start:10%;rotate:-6deg}
.tagchip--b{bottom:20%;inset-inline-end:8%;rotate:5deg}
.shop__copy{display:grid;gap:.55rem;padding:1rem 1rem 1.4rem}
.shop__name b{font-family:var(--f-display);font-size:var(--fs-body);font-weight:var(--w-heavy);line-height:1.1}
.shop__why b{font-size:var(--fs-label);font-weight:var(--w-reg);color:var(--muted)}
.shop__why .wf--s{margin-block-start:1.1rem;width:55%}
.wf{display:block;height:.7rem;width:80%;border-radius:999px;background:rgba(246,241,243,.16);transition:opacity .5s var(--ease)}
.shop__brand .wf{width:5rem}
.shop__name .wf{height:1.1rem;width:65%}
.shop b{opacity:0;transition:opacity .6s var(--ease) .25s}
.shop__buy{display:grid;place-items:center;min-height:2.75rem;margin-block-start:.3rem;border-radius:999px;border:1px solid rgba(246,241,243,.3);font-size:var(--fs-label);transition:background-color .7s var(--ease),border-color .7s var(--ease),color .7s var(--ease)}
.shop__buy b{color:inherit}
.demo:is([data-screen="built"],[data-screen="live"]) .wf,.demo:is([data-screen="built"],[data-screen="live"]) .shop__wire,.demo:is([data-screen="built"],[data-screen="live"]) .tagchip{opacity:0}
.demo:is([data-screen="built"],[data-screen="live"]) .tagchip{scale:.6}
.demo:is([data-screen="built"],[data-screen="live"]) .shop b{opacity:1}
.demo:is([data-screen="built"],[data-screen="live"]) .shop__photo{clip-path:inset(0)}
.demo:is([data-screen="built"],[data-screen="live"]) .shop__buy{background:var(--ink);border-color:var(--ink);color:var(--ivory)}
.notes{position:absolute;inset:3rem .55rem auto;display:grid;gap:.45rem;pointer-events:none}
.note{display:flex;align-items:center;gap:.6rem;padding:.65rem .8rem;border-radius:1rem;background:rgba(255,255,255,.94);color:var(--ink);font-size:var(--fs-label);line-height:1.2;box-shadow:0 10px 20px rgba(36,42,48,.18);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);opacity:0;translate:0 -1.2rem;scale:.96;transition:opacity .6s var(--ease),translate .7s var(--ease),scale .7s var(--ease)}
.note__dot{flex:none;display:grid;place-items:center;width:1.7rem;height:1.7rem;border-radius:.5rem;background:var(--ink)}
.note__dot svg{width:78%;height:auto;fill:var(--fuchsia)}
.note__dot--mail{background:var(--fuchsia)}
.note__dot--mail svg{fill:var(--white)}
.demo[data-screen="live"] .note{opacity:1;translate:0 0;scale:1}
.demo[data-screen="live"] .note:nth-child(2){transition-delay:.35s}
.demo[data-screen="live"] .note:nth-child(3){transition-delay:.7s}
.step__n{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h2);line-height:.9;color:var(--muted-d);transition:color .6s var(--ease)}
.demo[data-step="1"] .step[data-i="1"] .step__n,.demo[data-step="2"] .step[data-i="2"] .step__n,.demo[data-step="3"] .step[data-i="3"] .step__n{color:var(--fuchsia)}
.step .sticker{display:none}
.step__t{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15;max-width:16ch}

/* ---------- 06 · about ---------- */
.about{display:grid;grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr);gap:var(--s3);align-items:center}
.about__pic{position:relative;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;background:var(--ink)}
.about__pic img:not(.stk){position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.about__pic .c{clip-path:inset(100% 0 0 0)}
html:not(.motion) .about__pic .c{clip-path:none}
.about__text{display:grid;gap:var(--s2)}
.about__text p:not(.label){max-width:48ch}

/* ---------- 07 · contact / footer ---------- */
.contact{background:var(--ink);color:var(--ivory);padding-bottom:var(--s2);overflow:clip;isolation:isolate}
.contact__bg{position:absolute;inset:0;z-index:-1}
.contact__bg .flock{position:absolute;inset:0;width:100%;height:100%;display:block}
.contact__bg .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(36,42,48,.5),rgba(36,42,48,.62) 55%,rgba(36,42,48,.85))}
.contact__grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:var(--s3);padding-bottom:var(--s3)}
.contact__copy{display:grid;gap:var(--s2);align-content:start}
.contact__copy p:not(.label){color:rgba(246,241,243,.85);max-width:34ch}
.form{display:grid;gap:var(--s2);align-content:start}
.story{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h3);line-height:1.6;color:var(--ivory)}
.slot{display:inline-block}
.nw{white-space:nowrap}
.slot input{field-sizing:content;min-width:7ch;max-width:100%;min-height:44px;padding:0 .15em;background:transparent;border:0;border-bottom:1.5px solid rgba(246,241,243,.35);border-radius:0;color:var(--white);font:inherit;font-weight:var(--w-heavy);transition:border-color .4s}
.slot input::placeholder{color:rgba(246,241,243,.42);font-weight:var(--w-thin)}
.slot input:focus{outline:none;border-color:var(--fuchsia)}
.slot input:not(:placeholder-shown){border-color:var(--fuchsia)}
.slot input[dir="ltr"]{text-align:right;min-width:11ch}
.picks{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;border:0;margin:0;padding:0}
.picks legend{float:inline-start;margin-inline-end:.6rem}
.pick{position:relative;display:inline-flex;cursor:pointer}
.pick input{position:absolute;inset:0;width:100%;height:100%;margin:0;appearance:none;opacity:0;cursor:pointer}
.pick span{display:inline-flex;align-items:center;min-height:44px;padding:.4rem 1.05rem;border-radius:var(--r-btn);border:1px solid rgba(246,241,243,.35);font-size:var(--fs-label);transition:background-color .4s var(--ease),border-color .4s,color .4s,scale .4s var(--ease)}
.pick:hover span{border-color:var(--ivory)}
.pick input:checked+span{background:var(--fuchsia);border-color:var(--fuchsia);color:var(--ink-deep);scale:1.04}
.pick input:focus-visible+span{outline:2px solid var(--fuchsia);outline-offset:3px}
.form__end{grid-column:1/-1;display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2)}
.form__end .label{color:var(--ivory)}
.wordmark{--lm:var(--fuchsia);--li:var(--ivory);direction:ltr;max-width:1200px;margin-inline:auto;padding-block:var(--s3)}
.wordmark svg{width:100%;height:auto;overflow:visible;padding:1.5%}
.foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:var(--s1) var(--s2);padding-top:var(--s2);border-top:1px solid var(--line-d)}
.foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1.25rem}
.foot a{display:inline-flex;align-items:center;min-height:44px;font-size:var(--fs-label);color:var(--muted-d);transition:color .3s}
.foot a:hover{color:var(--ivory)}

/* ---------- case sheet ---------- */
.case{width:min(1080px,calc(100vw - 2 * var(--gx)));max-height:calc(100svh - 2rem);margin:auto;padding:0;border:0;border-radius:var(--r-card);background:var(--ivory);color:var(--ink);overflow:auto;overscroll-behavior:contain}
.case::backdrop{background:rgba(36,42,48,.6);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
.case[open]{animation:caseIn .7s var(--ease)}
@keyframes caseIn{from{opacity:0;transform:translateY(40px) scale(.98)}}
.case__img{aspect-ratio:16/9;background:var(--studio);overflow:hidden}
.case__img img{width:100%;height:100%;object-fit:cover;object-position:top}
.case__body{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:var(--s2) var(--s3);padding:clamp(1.5rem,1rem + 2.5vw,3.5rem)}
.case__body .label{grid-column:1/-1}
.case__title{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:-.02em}
.case__line{margin-top:var(--s1);font-size:var(--fs-h3);line-height:1.2;color:var(--muted)}
.case__live{margin-top:var(--s2)}
.case dl{margin:0;display:grid;gap:var(--s2)}
.case dt{font-family:var(--f-label);font-size:var(--fs-label);color:var(--muted);margin-bottom:.35rem}
.case dd{margin:0}
/* the case window also carries the contact form (moved in from the footer: one form, one source) */
.case.is-form .case__img,.case.is-form .case__body{display:none}
.case__form{display:grid;gap:var(--s2);padding:clamp(1.5rem,1rem + 2.5vw,3.5rem);padding-top:clamp(4.5rem,3rem + 3vw,5.5rem)}
.case__form[hidden]{display:none}
.case .story{color:var(--ink)}
.case .slot input{color:var(--ink);border-bottom-color:var(--line)}
.case .slot input::placeholder{color:var(--muted)}
.case .slot input:not(:placeholder-shown),.case .slot input:focus{border-bottom-color:var(--fuchsia)}
.case .pick span{border-color:var(--line)}
.case .pick:hover span{border-color:var(--ink)}
.case .form__end .label{color:var(--ink)}
.case .form .btn--light{background:var(--ink);color:var(--ivory)}
.case__x{position:sticky;top:1rem;float:left;margin:1rem;margin-bottom:-4rem;z-index:2;width:48px;height:48px;border-radius:50%;background:var(--ink);color:var(--ivory);display:grid;place-items:center;font-size:1.25rem;line-height:1}


/* ======================================================
   emblems & stickers (from her "The Set × The Cut" board)
   ====================================================== */
.sticker{--sz:clamp(64px,3vw + 44px,104px);display:grid;place-items:center;width:var(--sz);aspect-ratio:1;border-radius:50%;background:var(--white);box-shadow:0 10px 20px rgba(36,42,48,.18);rotate:-6deg;flex:none}
.sticker img{width:68%;height:auto}
.sticker--sm{--sz:clamp(48px,2vw + 34px,72px);rotate:8deg}
.sticker--screen{position:absolute;z-index:2;top:-28px;left:-22px}
.sticker--about{position:absolute;z-index:2;top:1rem;inset-inline-end:1rem}

/* statement: emblems drifting around the quote */
.say__float{position:absolute;inset:0;pointer-events:none;z-index:-1}
.fl{position:absolute;width:clamp(90px,6vw + 50px,180px);height:auto}
.fl--a{top:16%;left:9%;rotate:-12deg}
.fl--b{bottom:14%;right:10%;rotate:8deg}
.fl--c{top:20%;right:16%;width:clamp(56px,3vw + 34px,100px)}
html:not(.motion) .say__float{position:static;display:flex;gap:var(--s2);justify-content:center}
html:not(.motion) .fl{position:static}

/* the slate — replaces the marquee band: one scene word at a time, scroll-driven */
.slate{position:relative;z-index:5;margin-top:calc(var(--overlap) * -1);border-radius:var(--overlap) var(--overlap) 0 0;box-shadow:0 -12px 24px rgba(36,42,48,.08);min-height:100svh;display:grid;align-content:center;justify-items:center;gap:var(--s1);padding:var(--s3) var(--gx);background:var(--ink);color:var(--ivory);text-align:center;overflow:clip}
.slate__clap{display:block;width:min(420px,68%);height:22px;margin-bottom:var(--s2);border:2px solid var(--ivory);border-radius:4px;background:repeating-linear-gradient(-45deg,var(--ivory) 0 18px,var(--ink) 18px 36px);transform-origin:100% 100%}
.slate__pre{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h3);line-height:1.1}
.slate__words{display:grid;overflow:clip;padding-block:.08em}
.slate__w{grid-area:1/1;display:flex;align-items:center;justify-content:center;gap:clamp(.75rem,.5rem + 1vw,1.75rem);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-display);line-height:1;letter-spacing:-.02em;color:var(--ivory);white-space:nowrap}
.slate__w img{width:clamp(56px,3vw + 40px,120px);height:auto;filter:invert(1) hue-rotate(180deg) saturate(1.6)}
.slate__words{width:100%}
.slate__w{flex-wrap:wrap;width:100%}
.slate__d{flex-basis:100%;padding-inline:max(0px,(100% - 42ch) / 2);font-family:var(--f-body);font-size:var(--fs-body);font-weight:var(--w-reg);line-height:1.3;letter-spacing:0;white-space:normal;text-align:center;color:var(--muted-d)}
html:not(.motion) .slate__words{display:flex;flex-wrap:wrap;justify-content:center;gap:.25rem 1.5rem}
html:not(.motion) .slate__w{grid-area:auto;font-size:var(--fs-h2)}

/* the crystal ball — entrance to the projects (WebGL; without it the line stands alone on ink) */
.ball{position:relative;z-index:5;min-height:100svh;display:grid;place-items:center;padding:var(--s3) var(--gx);background:var(--ink);color:var(--ivory);overflow:clip;text-align:center}
.ball__stage{position:absolute;inset:0}
.ball__h{position:relative;z-index:1;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.02;letter-spacing:-.015em;text-wrap:balance;pointer-events:none}
.ball__h .ln{display:block}
.ball__h .ln:first-child{font-weight:var(--w-thin)}
.crystalized-ball{position:relative;width:100%;height:100%;overflow:hidden}

/* the logo, inflated (ElasticMesh): header + footer; the flat SVG stays until the mesh is ready */
.hdr__logo{position:relative}
.logo-mesh{position:absolute;left:-14%;width:128%;top:50%;aspect-ratio:128/62;translate:0 -50%;pointer-events:none;transition:opacity .5s var(--ease)}
.logo-mesh--ivory{opacity:0}
.hdr.on-dark .logo-mesh--ink{opacity:0}
.hdr.on-dark .logo-mesh--ivory{opacity:1}
.has-mesh>svg{visibility:hidden}
.wordmark__mesh{position:absolute;z-index:1;left:-14%;width:128%;top:50%;aspect-ratio:128/62;translate:0 -50%}
.wordmark .stk--wrap{z-index:2}
.elastic-mesh{position:relative;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.logo-mesh.elastic-mesh,.wordmark__mesh.elastic-mesh{position:absolute}
.elastic-mesh-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}

/* the laptop: a surreal liquid-silver photo (black + alpha = multiply over the studio floor); the work is mapped onto its screen with matrix3d */
.laptop__body{position:relative;transform:none!important}
.motion .laptop__photo,.motion .laptop__body .laptop__screen{will-change:transform}
.laptop__float{animation:hover-float 6s ease-in-out infinite}
@keyframes hover-float{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -2.2%;rotate:-.6deg}}
@media (prefers-reduced-motion:reduce){.laptop__float{animation:none}}
.laptop__photo{display:block;width:100%;height:auto;pointer-events:none}
.laptop__body .laptop__screen{position:absolute;left:0;top:0;width:1600px;height:1000px;transform-origin:0 0;border-radius:0}
.laptop__screen::after{display:none}

/* projects: framing hands by the heading */
.sec__em{width:clamp(80px,5vw + 40px,150px);height:auto}
.work .sec__head{grid-template-columns:minmax(0,1fr) auto auto}
.work .sec__head .label{grid-column:1/-1}
.card{perspective:1200px}
.card__img{transform-style:preserve-3d;will-change:transform}

/* how: sticker beside each step number */
.step__top{display:flex;align-items:center;justify-content:space-between;gap:var(--s1)}

/* contact stickers */
.contact__stickers{display:flex;gap:.75rem;align-items:center}


/* stickers (from her sticker sheet — swap the files in assets/stickers/ when the final sheet arrives) */
.stk{position:absolute;z-index:4;height:auto;pointer-events:none;filter:drop-shadow(0 10px 14px rgba(36,42,48,.2))}
.motion .stk--stage{animation:stamp 26s linear infinite}
@keyframes stamp{to{rotate:370deg}}
.card__btn{position:relative}
.stk--making{width:58%;top:-18px;left:-12px;rotate:-5deg}
.how{position:relative}
.stk--onset{width:clamp(120px,8vw + 60px,210px);top:var(--s3);left:var(--gx);rotate:7deg}
.stk--behind{width:46%;top:1.25rem;inset-inline-start:1.25rem;rotate:-5deg}
.stk--final{position:relative;width:clamp(170px,10vw + 90px,280px);rotate:-4deg;justify-self:start}
.wordmark{position:relative}
.stk--wrap{width:clamp(120px,10vw + 40px,240px);top:4%;right:10%;rotate:9deg}

/* ---------- cursor ---------- */
.cur{position:fixed;top:0;left:0;z-index:95;pointer-events:none;width:12px;height:12px;margin:-6px 0 0 -6px;border-radius:50%;background:var(--fuchsia);display:none;align-items:center;justify-content:center;transition:width .45s var(--ease),height .45s var(--ease),margin .45s var(--ease)}
.cur span{font-size:var(--fs-label);color:var(--ink);opacity:0;transition:opacity .3s;white-space:nowrap}
.has-cursor .cur{display:flex}
.cur.is-big{width:84px;height:84px;margin:-42px 0 0 -42px}
.cur.is-big span{opacity:1}

/* ---------- reveal defaults ---------- */
.motion [data-reveal]{opacity:0}

/* ---------- legal / doc pages ---------- */
.doc{min-height:100svh;background:var(--ivory);padding:clamp(8rem,7rem + 4vw,11rem) var(--gx) var(--s3)}
.doc__in{max-width:760px}
.doc h1{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:-.015em;margin-block:var(--s1) var(--s2)}
.doc h2{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;margin-top:var(--s3);margin-bottom:var(--s1)}
.doc p,.doc li{max-width:62ch;line-height:1.5}
.doc ul{list-style:disc;padding-inline-start:1.25rem}
.doc p+p{margin-top:var(--s1)}
.doc a:not(.btn){color:var(--fuchsia);text-decoration:underline;text-underline-offset:3px}
.draft{display:inline-block;margin-bottom:var(--s2);padding:.5rem .9rem;border-radius:10px;background:var(--studio);font-size:var(--fs-label)}
.e404{min-height:100svh;display:grid;place-items:center;text-align:center;background:var(--studio);padding:var(--gx)}
.e404__n{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-display);line-height:.9}
.e404 p{margin-block:var(--s1) var(--s2)}

/* ---------- hero, desktop: the headline is huge and centred BEHIND the set; the copy sits small in the corner ---------- */
@media (min-width:821px){
  .hero__copy{position:static;z-index:auto;align-self:center;justify-self:start;max-width:min(56rem,58vw);gap:var(--s2)}
  .hero__copy>*{position:relative;z-index:4}
  .hero__lead{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h3);line-height:1.15;max-width:42ch}
  .hero__set{left:var(--gx);top:50%;bottom:auto;translate:0 -46%;width:min(40vw,66svh * 1.33,720px)}
}

/* ---------- responsive ---------- */
@media (max-width:1180px){ .hdr__link,.hdr__ind{display:none} .hdr__bar{padding-inline-start:.4rem} .hdr__bar .btn{margin-inline-start:0} }
@media (max-width:1100px){
}
@media (max-width:960px){
  .take{grid-template-columns:1fr;gap:var(--s1)}
  .take__cut{margin-top:var(--s1)}
  .demo{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:var(--s1);min-height:0;height:calc(100svh - 5rem);align-items:start}
  html:not(.motion) .demo{height:auto}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
  .step{padding-block:.4rem .7rem;gap:.25rem}
  .step__top{display:none}
  .step__t{font-size:var(--fs-label);line-height:1.25;max-width:none}
  .phone{height:100%;max-height:34rem;align-self:start}
  html:not(.motion) .phone{height:min(78svh,34rem)}
}
@media (max-width:820px){
  .menu{grid-template-columns:1fr;grid-template-rows:auto auto 1fr;align-content:start}
  .menu__list{align-self:start}
  .menu__side{align-self:end}
  .menu__say{display:none}
  .hero__stage{grid-template-columns:1fr;align-content:start;gap:1rem;padding-top:6rem}
  .hero__copy{display:contents}
  .hero__copy .label{order:1}
  .hero__title{order:2;text-align:center}
  .hero__lead{font-family:var(--f-display);font-weight:var(--w-thin);font-size:var(--fs-h3);line-height:1.15}
  .hero__set{order:7;position:relative;left:auto;bottom:auto;width:100%;margin-block:4% 1.4rem}
  .hero__title .ln{white-space:normal}
  .laptop__body{transform:rotateY(-8deg) rotateX(3deg)}
  .hero__lead{order:4}
  .hero__cta{order:5}
  .hero__trust{order:6}
  .motion .hero{height:200svh}
  .hero__set{max-width:calc(44svh * 1.56);margin-inline:auto}
  .hero__scroll{display:none}
  .work__track{flex-direction:column;width:auto;gap:var(--s3)}
  .card{width:100%}
  .about{grid-template-columns:1fr}
  .about__pic{max-width:460px}
  .contact__grid{grid-template-columns:1fr}
  .case__body{grid-template-columns:1fr}
}
@media (max-width:820px){
  .fl--a{top:9%;left:4%}
  .fl--b{bottom:8%;right:4%}
  .fl--c{top:12%;right:8%}
  .sticker--screen{display:none}
  .work .sec__head{grid-template-columns:minmax(0,1fr) auto}
  .sec__em--hands{display:none}
  .stk--stage{top:auto;bottom:1.25rem;inset-inline-end:1rem;width:88px}
  .stk--onset{top:1.5rem;width:110px}
  .stk--making{width:46%}
  /* phone polish (2026-10-29) */
  .hero__light{background:radial-gradient(70% 38% at 50% 46%,rgba(255,255,255,.95),rgba(255,255,255,0) 72%)}
  .hero__set{margin-block:4% 3.6rem}
  .hero__trust{gap:.15rem .9rem}
  .motion .pains{margin-top:-16svh}
  .steps{grid-template-columns:repeat(3,minmax(0,1fr));grid-template-rows:auto 2px auto;column-gap:.6rem;row-gap:.55rem}
  .step{display:contents}
  .step .label,.step__bar{opacity:.4;transition:opacity .6s var(--ease)}
  .step__bar{position:relative;inset:auto;grid-row:2}
  .step .label{grid-row:1;font-size:var(--fs-label)}
  .step[data-i="1"]>*{grid-column:1}.step[data-i="2"]>*{grid-column:2}.step[data-i="3"]>*{grid-column:3}
  .steps .step__t{grid-row:3;grid-column:1/-1;font-size:var(--fs-body);line-height:1.3;opacity:0;transition:opacity .6s var(--ease)}
  .demo[data-step="1"] .step[data-i="1"]>*,.demo[data-step="2"] .step[data-i="2"]>*,.demo[data-step="3"] .step[data-i="3"]>*{opacity:1}
  .demo[data-step="1"] .step[data-i="1"] .label,.demo[data-step="2"] .step[data-i="2"] .label,.demo[data-step="3"] .step[data-i="3"] .label{color:var(--ivory)}
  html:not(.motion) .steps{grid-template-columns:1fr;grid-template-rows:none}
  html:not(.motion) .step{display:grid;gap:.4rem}
  html:not(.motion) .step>*{grid-column:auto;grid-row:auto;opacity:1}
  .foot,.foot nav{justify-content:center;text-align:center}
  .slate__w{flex-direction:column;flex-wrap:nowrap;gap:.6rem}
  /* projects on phone: a deck of image cards that stack as you scroll */
  .work__track{gap:1.25rem}
  .card{position:sticky;top:calc(5.25rem + var(--i) * 14px)}
  .card__btn{gap:.5rem;padding:.6rem .6rem 1rem;background:var(--white);border-radius:var(--r-card);box-shadow:0 -6px 28px rgba(36,42,48,.13);transform-origin:50% 0}
  .card__btn>*:not(.card__img):not(.stk){padding-inline:.5rem}
  .card__img{aspect-ratio:5/4;border-radius:12px;box-shadow:none}
  .card .stk--making{top:-14px;left:-6px}
  .foot nav{column-gap:1.1rem}
  .foot nav:first-child{max-width:16.5rem;margin-inline:auto}
}
@media (max-width:480px){
  .hdr__bar .btn{padding-inline:1.1rem}
  .hero__cta .btn{width:100%;justify-content:space-between}
  .hero__cta .btn--ghost{justify-content:center}
}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
}

/* ======================================================
   v2 · goats grammar — one grey studio floor, ghost-white words that the scroll inks in,
   a big B/W object rising from below, heavy lines with one pink word, soft grey tiles
   ====================================================== */

/* loader, as goats: dark, the logo in white, a big ghost counter in the corner */
.loader__brush{width:min(46vw,300px)}
.loader__brush svg{fill:currentColor}
.loader__n{position:absolute;bottom:var(--gx);inset-inline-start:var(--gx);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-display);line-height:.8;color:rgba(246,241,243,.08)}

/* 01 · opening — the headline in white on the grey floor (goats' white wordmark), then the contact buttons */
.open{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:var(--s3);padding:clamp(6.5rem,6rem + 2vw,8rem) var(--gx) clamp(3rem,2rem + 3vw,5rem);background:var(--studio);text-align:center;overflow:clip}
.open__h{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1;letter-spacing:-.015em;color:var(--white);text-wrap:balance;max-width:20ch} /* white on the light floor, as their wordmark */
.open__h .w{display:inline-block;overflow:clip;vertical-align:top;padding-block:.08em;margin-block:-.08em}
.open__h .w>span{display:inline-block}
.open__cta{display:flex;flex-wrap:wrap;justify-content:center;gap:var(--s1)}
.btn--white{background:var(--white);color:var(--ink);padding-inline:1.1rem 1.4rem;box-shadow:0 6px 12px rgba(36,42,48,.08)}
.btn--white svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.btn--white:hover{background:var(--ink);color:var(--ivory)}
.open .hero__scroll{left:var(--gx)}

/* hello — "היי," in pink, the rest ghost-white until the scroll inks it in */
.hello{position:relative;background:var(--studio)}
.hello__stage{position:relative;min-height:100svh;display:grid;align-content:center;justify-items:center;gap:var(--s2);padding:clamp(6.5rem,6rem + 2vw,8rem) var(--gx) clamp(2.5rem,2rem + 2vw,4rem);text-align:center;overflow:clip}
.motion .hello{height:190svh}
.motion .hello__stage{position:sticky;top:0;height:100svh}
.hello__txt{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.25;letter-spacing:-.01em;max-width:34ch;text-wrap:balance} /* smaller: easier to read */
.motion .hello__ghost .w{color:var(--white)}
.hello__foot{display:grid;justify-items:center;gap:var(--s1)}

/* 02 · מה אני בונה — the laptop on the same floor, its screen a call sheet */
.paper{position:relative;z-index:4;padding:0 var(--gx) var(--s3);overflow:clip;pointer-events:none} /* no floor of its own: the body is the same studio grey */
.motion .paper{margin-top:0} /* the laptop rises right under the greeting while it is still pinned (as goats' reader under "the goats.") */
.paper__copy{pointer-events:auto}
.paper{pointer-events:auto}
.paper__pin{position:relative;min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);align-items:center;overflow:clip} /* one column the width of the screen: the strip (max-content) must not widen it */
.paper__set{grid-area:1/1;width:min(82vh,80vw,860px);justify-self:center;will-change:transform}
/* silver hands + clapperboard (grey matched to the floor); the slate's question is live text on the board */
.clap{position:relative;margin:0;container-type:inline-size;will-change:transform}
.clap img{width:100%;height:auto}
.clap__cv{position:absolute;inset:0;width:100%;height:100%}
.clap__slate{position:absolute;left:27.5%;width:45%;top:40%;height:28%;display:grid;place-items:center;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:9.2cqw;line-height:.9;letter-spacing:-.02em;white-space:nowrap;color:var(--ink);text-align:center}
.clap__slate>span{display:block}
.clap__slate b{color:var(--fuchsia)}
/* the cards' window: the right part of the screen (justify start in RTL); the strip enters from its right edge */
.paper__view{grid-area:1/1;align-self:center;justify-self:start;position:relative;z-index:2;width:58%;overflow:clip;padding-block:var(--s1)}
.paper__k{margin-bottom:var(--s1);padding-inline:var(--gx)}
.svc{display:flex;flex-direction:row-reverse;gap:var(--s2);width:max-content;padding-inline:var(--gx);border:0}
.svc__card{display:grid;gap:.5rem;align-content:start;width:clamp(230px,16vw + 60px,320px)}
.svc__vid{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);background:var(--studio)} /* each card is a short loop: a silver object with one touch of fuchsia */
.svc__n{margin-top:.35rem}
.svc__t{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1}
.svc__d{color:var(--muted);font-size:var(--fs-label);line-height:1.35}
.svc__card--cta a{display:grid;align-content:space-between;gap:var(--s2);aspect-ratio:4/5;padding:var(--s2);border-radius:var(--r-card);background:var(--fuchsia);color:var(--ink);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1}
.svc__card--cta i{font-style:normal;font-size:var(--fs-h2);line-height:1;justify-self:end;transition:translate .5s var(--ease)}
.svc__card--cta a:hover i{translate:-8px 0}
html:not(.motion) .paper__pin{display:block}
html:not(.motion) .paper__view{width:100%;overflow-x:auto}

/* 03 · projects — heavy line, giant grey M behind, three tall tiles in a row */
.work{padding-inline:var(--gx);padding-top:var(--s3)}
.work .sec__head{position:relative;z-index:1;padding-inline:0}
.work__h{font-weight:var(--w-heavy);max-width:15ch}
.work__pin,.work__viewport{position:relative;z-index:1}
.work__track{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--s2);width:auto;padding-inline:0}
.card{width:auto}

/* clients — logos on soft grey tiles */
.clients .sec__head{margin-bottom:var(--s2)}
.logos{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--s1)}
.clients .clients__h{color:var(--ink)}
.logos li{display:grid;place-items:center;align-content:center;gap:.6rem;aspect-ratio:16/10;padding:var(--s1);border-radius:16px;background:var(--studio);color:var(--ink);transition:background .6s var(--ease)}
.logos li:hover{background:var(--white)}
.logos img{height:clamp(34px,1.6vw + 20px,58px);width:auto;max-width:80%;object-fit:contain;filter:brightness(0)}
.logos .label{color:var(--muted)}
.logos__txt{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1}

/* 04 · statement — its own card on the floor now (no longer inside the hero) */
.say{min-height:90svh;background:var(--studio)}
.motion .say{position:relative;inset:auto;padding-block:var(--s3);background:var(--studio);opacity:1;pointer-events:auto}
.motion .pains{margin-top:calc(var(--overlap) * -1)}

@media (max-width:820px){
  .motion .hello{height:170svh}
  .open .hero__scroll{display:none}
  .open__cta .btn{width:100%;justify-content:center}
  .open__cta .btn:first-child{justify-content:space-between}
  .hello__foot .hero__lead{font-family:var(--f-body);font-weight:var(--w-reg);font-size:var(--fs-body)}
  .paper__pin{align-items:start}
  .paper__set{width:min(108vw,62svh);align-self:start;margin-top:5.5rem}
  .paper__view{width:100%;align-self:end;margin-bottom:var(--s2)}
  .svc__card{width:68vw}
  .work__track{grid-template-columns:1fr;gap:1.25rem}
  .logos{grid-template-columns:repeat(2,minmax(0,1fr))}
  .motion .pains{margin-top:calc(var(--overlap) * -1)}
}

/* 8 · the takes as script pages: stacked, "today" struck through and stamped CUT, each page peels away to its retake */
.script{display:grid;justify-items:center;padding-block:var(--s2)}
.script__stack{display:grid;width:min(760px,100%)}
.page{grid-area:1/1;z-index:var(--z);display:grid;align-content:start;gap:var(--s2);min-height:min(68svh,560px);padding:clamp(1.5rem,1rem + 2.5vw,3.5rem);background:#FBFBF9;border-radius:6px;box-shadow:0 2px 4px rgba(36,42,48,.06),0 18px 36px rgba(36,42,48,.10);transform-origin:0 100%;will-change:transform}
.page:nth-child(2n){rotate:.8deg}
.page:nth-child(3n){rotate:-.6deg}
.page__top{display:flex;justify-content:space-between;gap:var(--s1);padding-bottom:var(--s1);border-bottom:1px solid var(--line)}
.page__q{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15;text-wrap:balance;max-width:22ch}
.page__q--s{font-size:var(--fs-body);color:var(--muted)}
.page__line{display:grid;gap:.4rem;max-width:40ch}
.page--now .page__line{color:var(--muted)}
.page__line--then span:last-child{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15;color:var(--ink)}
.page__line--then .label::before{content:"";display:inline-block;width:7px;height:7px;margin-inline-end:.45rem;border-radius:50%;background:var(--fuchsia);vertical-align:.1em}
.page__stamp{position:absolute;bottom:clamp(1.25rem,1rem + 2vw,2.5rem);inset-inline-start:clamp(1.25rem,1rem + 2vw,2.5rem);padding:.3rem 1rem;border:3px solid var(--fuchsia);border-radius:8px;color:var(--fuchsia);font-family:var(--f-label);font-weight:var(--w-heavy);font-size:var(--fs-h3);letter-spacing:.14em;rotate:-12deg}
.motion .page__stamp{opacity:0}
.page{position:relative}
html:not(.motion) .script__stack{gap:var(--s2)}
html:not(.motion) .page{grid-area:auto;rotate:none}

/* 9 · the phone: a silver mockup in the butterfly's language; the live screen sits on its black glass */
.phone{height:min(80svh,48rem);aspect-ratio:688/1024;padding:0;border:0;border-radius:0;background:none;box-shadow:none}
.phone::before{display:none}
.phone__photo{position:absolute;inset:0;width:100%;height:100%}
.phone__screen{position:absolute;left:24.6%;width:51.3%;top:12.6%;height:68.1%;border-radius:15% / 7.5%;background:var(--ink-2)}
.phone__screen::after{content:"";position:absolute;z-index:6;top:2.4%;left:50%;width:30%;height:3.2%;translate:-50% 0;border-radius:999px;background:var(--ink)}
/* stage 1 (the conversation) opens on a mood board: product photo, her palette, the type, a texture */
.mood{position:absolute;inset:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:5px;padding:6px;overflow:hidden;border-radius:inherit;transition:opacity .6s var(--ease)} /* tiles sized by their own width (aspect), not by the screen's height */
.mood__k{grid-column:1/-1;justify-self:start;padding:.15rem .6rem;border-radius:999px;background:var(--fuchsia);color:var(--ink);font-size:var(--fs-label);line-height:1.3}
.mood img,.mood i,.mood b{display:block;width:100%;border-radius:8px}
.mood img{object-fit:cover}
.mood__ph{grid-column:1/3;grid-row:span 2;height:100%;object-position:50% 12%}
.mood__sw{aspect-ratio:1}
.mood__sw--a{background:var(--fuchsia)}
.mood__sw--b{background:var(--ivory)}
.mood__sw--c{background:var(--ink);box-shadow:inset 0 0 0 1px rgba(246,241,243,.2)}
.mood__aa{display:grid!important;place-items:center;aspect-ratio:1;background:var(--ivory);color:var(--ink);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3)}
.mood__tx{aspect-ratio:1}
.demo:is([data-screen="built"],[data-screen="live"]) .mood{opacity:0}

/* footer, as goats: the crowd, a big white logo with one line, large contact lines and the site list */
.contact{min-height:100svh;display:grid;align-content:space-between;gap:var(--s3);padding-top:var(--s3)}
.fgrid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:var(--s3);align-items:start}
.fgrid__brand{display:grid;gap:var(--s2);align-content:start}
.fgrid__logo{width:min(100%,520px);height:auto}
.fgrid__brand p{max-width:34ch;color:rgba(246,241,243,.82);font-size:var(--fs-label)}
.fgrid__links{display:grid;align-content:start}
.fbig{display:flex;justify-content:space-between;align-items:center;gap:var(--s1);min-height:44px;padding-block:var(--s1);border-bottom:1px solid var(--line-d);font-family:var(--f-display);font-weight:var(--w-reg);font-size:var(--fs-h3);line-height:1.15;color:var(--white);transition:color .4s}
.fbig i{font-style:normal;font-size:var(--fs-body);transition:translate .5s var(--ease)}
.fbig:hover{color:var(--fuchsia)}
.fbig:hover i{translate:-4px -4px}
.fnav{display:grid;gap:.1rem;margin-top:var(--s2)}
.fnav a{display:inline-flex;align-items:center;min-height:44px;width:max-content;color:var(--ivory);transition:color .3s}
.fnav a:hover{color:var(--fuchsia)}
.foot__soc{display:flex;gap:.75rem}
.foot__soc .soc{width:44px;height:44px;background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;color:var(--ivory)} /* bare white icons, as goats' footer */
.foot__soc .soc svg{width:24px;height:24px;stroke-width:1.5}
.foot__soc .soc:hover,.foot__soc .soc:focus-visible{background:none;color:var(--fuchsia);scale:1}
.contact__copy[hidden],.form-home[hidden]{display:none} /* kept only as the source of the form window */
@media (max-width:820px){
  .fgrid{grid-template-columns:1fr}
  .page{min-height:min(64svh,520px)}
}

/* ======================================================
   buttons: white; on hover fuchsia with white text. The CTAs (header "ספרו לי", the last card) are pink with white text.
   As little black as possible: the dark section floors stay; small black parts become white or pink.
   ====================================================== */
.btn,.btn--light,.btn--ghost,.btn--white{background:var(--white);color:var(--ink);border:1px solid rgba(36,42,48,.08);box-shadow:0 6px 12px rgba(36,42,48,.08)}
.btn:hover,.btn:focus-visible,.btn--light:hover,.btn--ghost:hover,.btn--white:hover{background:var(--fuchsia);border-color:var(--fuchsia);color:var(--white)}
.btn i{background:var(--fuchsia);color:var(--white)}
.case .form .btn--light{background:var(--white);color:var(--ink)}
.case .form .btn--light:hover{background:var(--fuchsia);color:var(--white)}
.hdr__bar .btn,.hdr__bar .btn:hover{background:var(--fuchsia);border-color:var(--fuchsia);color:var(--white)}
.svc__card--cta a{color:var(--white)}
.hdr__link.is-active,.hdr__link.is-active:hover{color:var(--white)}
.pick input:checked+span{color:var(--white)}
.mood__k{color:var(--white)}
.demo:is([data-screen="built"],[data-screen="live"]) .shop__buy{background:var(--fuchsia);border-color:var(--fuchsia);color:var(--white)}
.note__dot{background:var(--fuchsia)}
.note__dot svg{fill:var(--white)}
.case__x{background:var(--white);color:var(--ink);box-shadow:0 6px 12px rgba(36,42,48,.12)}
.case__x:hover{background:var(--fuchsia);color:var(--white)}
/* the header logo: all white */
.hdr__logo,.hdr.on-dark .hdr__logo{--lm:var(--white);--li:var(--white)}

/* the opening butterfly (the first one, B/W silver): alone on the floor, then into the camera */
.open__bfly{position:absolute;z-index:3;left:50%;top:48%;width:min(24vw,34svh,300px);translate:-50% -50%;pointer-events:none;will-change:transform,opacity,filter}
.open__bfly img{width:100%;height:auto;transform-origin:50% 50%}
html:not(.motion) .open__bfly{display:none}

/* social icons: bigger, solid filled glyphs, no outline and no circle (white over the site, pink on hover) */
.soc,.rail .soc,.foot__soc .soc,.menu__soc .soc{background:none;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none;border:0;border-radius:0}
.soc svg,.btn--white svg{fill:currentColor;stroke:none}
.rail .soc{width:52px;height:52px}
.rail .soc svg{width:40px;height:40px}
.foot__soc .soc,.menu__soc .soc{width:52px;height:52px;color:var(--white)}
.foot__soc .soc svg,.menu__soc .soc svg{width:34px;height:34px}
.menu__soc .soc:hover,.menu__soc .soc:focus-visible{background:none;color:var(--fuchsia)}
@media (max-width:820px){.rail .soc svg{width:36px;height:36px}}

/* the clapperboard film: the hands melt into the floor instead of being cut by the frame's edge; it stays whole on screen */
.clap{--edge:linear-gradient(to right,transparent,#000 9%,#000 91%,transparent),linear-gradient(to bottom,transparent,#000 9%,#000 91%,transparent);-webkit-mask-image:var(--edge);mask-image:var(--edge);-webkit-mask-composite:source-in;mask-composite:intersect} /* only the frame's last ~9% fades, so the closing hand stays whole */
@media (max-width:820px){.paper__set{width:min(100vw,62svh)}}

/* 8 · the takes as a colour-world switch: "today" sits in a pale grey world; the scroll turns the whole screen fuchsia and "after" rises in white */
.worlds{position:relative;display:grid;min-height:min(78svh,720px);width:100%}
.world{grid-area:1/1;display:grid;place-content:center;justify-items:center;text-align:center;gap:var(--s2)}
.world__now,.world__then{grid-area:2/1;display:grid;justify-items:center;gap:var(--s1);max-width:min(100%,26ch)}
.world__k{grid-area:1/1;color:var(--muted)}
.world__q{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.015em;color:#A7A8AE;text-wrap:balance}
.world__line{max-width:44ch;color:var(--muted)}
.world__then .label{color:var(--white)}
.world__a{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.015em;color:var(--white);text-wrap:balance}
.pains{transition:none}
.pains.is-pink .world__k{color:var(--white)}
html:not(.motion) .worlds{display:grid;gap:var(--s3)}
html:not(.motion) .world{grid-area:auto}
html:not(.motion) .world__then{grid-area:auto;padding:var(--s2);border-radius:var(--r-card);background:var(--fuchsia)}

/* 9 · the phone in 3D: silver body (the butterfly's metal), turned a little, rotates by dragging; the live store is its screen */
.phone{--d:2.3cqw;height:min(74svh,44rem);aspect-ratio:9/18.8;padding:0;border:0;border-radius:0;background:none;box-shadow:none;perspective:1800px;container-type:size;touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.phone:active{cursor:grabbing}
.p3{position:relative;width:100%;height:100%;transform-style:preserve-3d;transform:rotateY(var(--ry,-22deg)) rotateX(var(--rx,6deg));will-change:transform}
.p3__face{position:absolute;inset:0;border-radius:13cqw;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.p3__front{transform:translateZ(var(--d));background:linear-gradient(135deg,#F6F6F8 0%,#9C9DA5 22%,#EEEEF2 46%,#8B8C94 72%,#F2F2F5 100%);box-shadow:inset 0 0 0 1px rgba(255,255,255,.7),inset 0 0 0 2.2cqw rgba(36,42,48,.08)}
.p3__front .phone__screen{position:absolute;inset:3.4cqw;left:3.4cqw;top:3.4cqw;width:auto;height:auto;border-radius:10cqw}
.p3__back{transform:rotateY(180deg) translateZ(var(--d));display:grid;place-items:center;overflow:hidden;background:linear-gradient(225deg,#F4F4F7 0%,#A3A4AB 30%,#E9E9EE 55%,#909199 80%,#ECECF0 100%)}
.p3__back img{width:80%;height:auto;opacity:.5;mix-blend-mode:multiply;filter:grayscale(1) contrast(1.15)}
.p3__cam{position:absolute;top:5cqw;left:6cqw;width:32cqw;aspect-ratio:1;border-radius:9cqw;background:linear-gradient(135deg,#E4E4E8,#7E7F87);box-shadow:inset 0 0 0 1px rgba(255,255,255,.6),0 2px 6px rgba(36,42,48,.25)}
.p3__side{border-radius:0;background:linear-gradient(90deg,#8A8B93,#F1F1F4 40%,#A4A5AC 70%,#E6E6EB)}
.p3__side--l,.p3__side--r{inset:7cqh auto;left:50%;width:calc(var(--d) * 2);margin-left:calc(var(--d) * -1)}
.p3__side--l{transform:rotateY(-90deg) translateZ(50cqw)}
.p3__side--r{transform:rotateY(90deg) translateZ(50cqw)}
.p3__side--t,.p3__side--b{inset:auto 7cqw;top:50%;height:calc(var(--d) * 2);margin-top:calc(var(--d) * -1)}
.p3__side--t{transform:rotateX(90deg) translateZ(50cqh)}
.p3__side--b{transform:rotateX(-90deg) translateZ(50cqh)}
.phone__screen::after{top:2.6%}

/* footer: a surreal crowd of silver butterflies, one fuchsia; it drifts in slowly as the footer comes up */
.contact__bg .fcrowd{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 50%}
.contact__bg .shade{background:linear-gradient(180deg,rgba(36,42,48,.35),rgba(36,42,48,.45) 55%,rgba(36,42,48,.8))}
.world{width:100%}
.world__now,.world__then{width:min(100%,24ch);max-width:none}
.world__q{color:#8E9097}
.world{grid-template-columns:minmax(0,1fr);place-content:initial;align-content:center;justify-items:center} /* a full-width column, so the lines can be 24ch wide */
.world__now,.world__then{width:min(100%,64rem)} /* ch would be the small body font's: size the block in rem, the lines in the heading's own ch */
.world__q,.world__a{max-width:22ch}

/* 8 · the takes on one screen: tabs for the take, a pill switch "היום / אחרי"; "after" turns the section fuchsia, type white */
.pains{transition:background-color .7s var(--ease)}
.pains.is-after{background:var(--fuchsia)}
.tg{display:grid;justify-items:center;gap:var(--s2);width:100%;text-align:center;padding-block:var(--s1)}
.tg__tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:.5rem}
.tg__tab{min-height:44px;padding:.4rem 1.1rem;border-radius:var(--r-btn);border:1px solid var(--line);font-family:var(--f-label);font-size:var(--fs-label);letter-spacing:.14em;text-transform:uppercase;color:var(--muted);transition:background-color .4s,color .4s,border-color .4s}
.tg__tab[aria-selected="true"]{background:var(--white);border-color:var(--white);color:var(--ink);box-shadow:0 6px 12px rgba(36,42,48,.08)}
.tg__tab:hover{border-color:var(--fuchsia);color:var(--fuchsia)}
.is-after .tg__tab{color:rgba(255,255,255,.85);border-color:rgba(255,255,255,.5)}
.is-after .tg__tab[aria-selected="true"]{color:var(--fuchsia)}
.tg__stage{display:grid;width:100%;min-height:clamp(15rem,10rem + 14vw,24rem);align-items:center}
.tg__take{grid-area:1/1;display:grid;justify-items:center;gap:var(--s2)}
.tg__take[hidden]{display:none}
.tg__q{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.05;letter-spacing:-.015em;max-width:20ch;text-wrap:balance;color:var(--ink);transition:color .6s var(--ease)}
.tg__now,.tg__then{grid-area:2/1;max-width:40ch;font-size:var(--fs-h3);line-height:1.25;transition:opacity .5s var(--ease),translate .6s var(--ease),filter .5s}
.tg__take{grid-template-rows:auto auto}
.tg__now{color:var(--muted)}
.tg__then{font-family:var(--f-display);font-weight:var(--w-heavy);color:var(--white);opacity:0;translate:0 20px;filter:blur(6px)}
.is-after .tg__q{color:rgba(255,255,255,.55)}
.is-after .tg__now{opacity:0;translate:0 -16px;filter:blur(6px)}
.is-after .tg__then{opacity:1;translate:0 0;filter:none}
.tg__switch{position:relative;display:grid;grid-template-columns:1fr 1fr;padding:5px;border-radius:var(--r-btn);background:var(--white);box-shadow:0 6px 14px rgba(36,42,48,.10)}
.tg__opt{position:relative;z-index:1;min-width:7.5rem;min-height:48px;border-radius:var(--r-btn);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);color:var(--muted);transition:color .4s}
.tg__opt[aria-pressed="true"]{color:var(--white)}
.tg__knob{position:absolute;top:5px;bottom:5px;inset-inline-start:5px;width:calc(50% - 5px);border-radius:var(--r-btn);background:#A7A8AE;transition:translate .6s var(--ease),background-color .5s}
.is-after .tg__knob{translate:-100% 0;background:var(--fuchsia)} /* RTL: "אחרי" is the left half */
.pains>.btn{justify-self:center}

/* 9 · the phone in the butterfly's language: its face is the liquid-silver filigree phone; 3D sides and back */
.phone{aspect-ratio:371/724}
.p3__front{background:url("assets/img/phone-front.webp") center / 100% 100% no-repeat;box-shadow:none;border-radius:11cqw}
.p3__front .phone__screen{inset:auto;left:1.9%;right:1.6%;top:1.1%;bottom:1.4%;width:auto;height:auto;border-radius:11cqw / 5.6cqh}

/* footer: the crowd drifts right → left through the last scroll */
.contact__bg .fcrowd{scale:1.16}

/* ======================================================
   phone pass (≤ 820px): a re-spec, not a scale-down
   ====================================================== */
.rail{transition:opacity .4s var(--ease)}
.rail.is-off{opacity:0;pointer-events:none}
@media (max-width:820px){
  /* one round WhatsApp button instead of three icons floating over the content (all three live in the menu and footer) */
  .rail{right:1rem;bottom:calc(1rem + env(safe-area-inset-bottom))}
  .rail .soc:not([data-soc="whatsapp"]){display:none}
  .rail .soc[data-soc="whatsapp"]{width:56px;height:56px;place-items:center;border-radius:50%;background:var(--fuchsia);color:var(--white);box-shadow:0 8px 18px rgba(36,42,48,.22)}
  .rail .soc[data-soc="whatsapp"] svg{width:30px;height:30px;filter:none}
  .rail .soc[data-soc="whatsapp"]:hover,.rail .soc[data-soc="whatsapp"]:focus-visible{background:var(--fuchsia);color:var(--white)}

  /* opening: the main button full width, WhatsApp and phone side by side under it */
  .open{gap:var(--s2)}
  .open__cta{display:grid;grid-template-columns:1fr 1fr;width:100%;gap:.6rem}
  .open__cta .btn:first-child{grid-column:1/-1}
  .open__cta .btn{width:100%}

  /* מה אני בונה: the clapperboard alone and large; once it leaves, the cards take the same spot */
  .paper__pin{display:grid;grid-template-columns:minmax(0,1fr);align-items:center;padding-top:4.75rem;padding-bottom:5.5rem}
  .paper__set{width:min(92vw,58svh);margin:0;align-self:center;justify-self:center}
  .paper__view{width:auto;margin:0 calc(var(--gx) * -1);align-self:center;justify-self:stretch}
  .svc__card{width:60vw}
  .svc__d{font-size:var(--fs-label)}

  /* projects: the heading in fewer lines, no big counter beside it */
  .work__h{max-width:none}
  .work .sec__count{display:none}

  /* statement: the emblems stay in the corners, away from the words */
  .fl{width:64px}
  .fl--a{top:3%;left:3%}
  .fl--b{bottom:3%;right:3%}
  .fl--c{top:5%;right:5%;width:44px}

  /* takes: tabs fit one row */
  .tg__tab{padding-inline:.85rem}
  .tg__opt{min-width:6.5rem}

  /* footer: room under the last row for the thumb */
  .foot{padding-bottom:calc(var(--s1) + env(safe-area-inset-bottom))}
}

/* ===== ReactBits ports (quiet): SpotlightCard on client tiles · GlareHover on service films · ClickSpark canvas ===== */
.logos li{position:relative;overflow:hidden;isolation:isolate}
.logos li::before{content:"";position:absolute;inset:0;z-index:-1;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(236,11,140,.13),transparent 70%);opacity:0;transition:opacity .5s var(--ease)}
.logos li:hover::before{opacity:1}
.svc__card{position:relative}
.glare{position:absolute;inset-inline:0;top:0;aspect-ratio:4/5;border-radius:var(--r-card);overflow:hidden;pointer-events:none;z-index:1}
.glare::after{content:"";position:absolute;inset:-20%;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.38) 50%,transparent 60%);translate:100% -100%;transition:translate 0s}
.svc__card:hover .glare::after{translate:-100% 100%;transition:translate .9s var(--ease)}
.sparks{position:fixed;inset:0;width:100vw;height:100vh;pointer-events:none;z-index:200}
.cnt{font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){.sparks,.glare{display:none}}
.h2 .w{overflow:visible}

/* self-review fixes (phone pass 2) */
.hello__foot .hero__trust{display:block;text-align:center;text-wrap:balance} /* one sentence: the counting number stays inside it */
@media (max-width:820px){
  .rail .soc[data-soc="whatsapp"]{box-shadow:0 0 0 3px var(--white),0 8px 18px rgba(36,42,48,.22)} /* a white ring keeps it readable over the fuchsia sections */
  .card__over{padding-top:5.5rem;background:linear-gradient(180deg,rgba(36,42,48,0),rgba(36,42,48,.6) 45%,rgba(36,42,48,.9))} /* names stay readable over busy screenshots */
}


/* ===== header · side icons · cookie button, 1:1 with the reference (measured on a 2000px-wide capture, kept as vw) ===== */
.hdr{inset-inline:clamp(1rem,2.75vw,3.5rem);top:clamp(.75rem,2.45vw,3rem);align-items:flex-start}
.hdr__logo,.hdr.on-dark .hdr__logo{width:clamp(104px,9.3vw,190px);min-height:0;margin-top:clamp(.4rem,1.45vw,1.8rem);--lm:var(--fuchsia);--li:var(--fuchsia)}
.hdr__bar,.hdr.on-dark .hdr__bar{height:clamp(60px,5.65vw,113px);gap:clamp(.25rem,1vw,1.25rem);padding:0 clamp(.6rem,1.1vw,1.4rem);background:#fff;border:0;border-radius:clamp(16px,1.6vw,32px);box-shadow:0 10px 30px rgba(0,0,0,.06);-webkit-backdrop-filter:none;backdrop-filter:none}
.hdr__ind{display:none}
.hdr__bar .btn,.hdr.on-dark .hdr__bar .btn{height:clamp(44px,3.35vw,67px);min-height:0;margin:0;margin-inline-end:clamp(.4rem,8vw,10rem);padding:0 clamp(1.1rem,2.15vw,2.7rem);background:#fff;border:1px solid #c8c8c8;color:#3a3a3a;font-weight:var(--w-reg);font-size:clamp(15px,1.2vw,24px);box-shadow:none}
.hdr__bar .btn:hover,.hdr__bar .btn:focus-visible{background:var(--fuchsia);border-color:var(--fuchsia);color:var(--white)}
.hdr__link,.hdr.on-dark .hdr__link{min-height:44px;padding-inline:clamp(.2rem,.5vw,.6rem);font-size:clamp(15px,1.2vw,24px);color:#1c1c1c}
.hdr__link.is-active,.hdr__link.is-active:hover,.hdr__link:hover{color:var(--fuchsia);font-weight:var(--w-reg)}
.hdr__menu{width:clamp(44px,2.85vw,57px);height:44px;margin-inline-start:clamp(.4rem,2.35vw,3rem);border-radius:0}
.hdr__menu span:not(.sr),.hdr.on-dark .hdr__menu span:not(.sr){width:100%;height:clamp(2px,.2vw,4px);background:#1e1e1e;border-radius:0}
.hdr__menu span:nth-child(1){transform:translateY(calc(clamp(8px,.8vw,16px) / -2))}
.hdr__menu span:nth-child(2){transform:translateY(calc(clamp(8px,.8vw,16px) / 2))}
@media (max-width:1180px){.hdr__bar .btn{margin-inline-end:.4rem}}
@media (min-width:821px){
  .rail{right:clamp(1rem,3.65vw,4.5rem);left:auto;bottom:auto;top:50%;translate:0 -50%;gap:clamp(1.4rem,2.6vw,3.2rem)}
  .rail .soc{width:clamp(30px,2.55vw,51px);height:auto;aspect-ratio:1;place-items:center;color:#fff}
  .rail .soc svg{width:100%;height:100%;filter:none;stroke:none;fill:currentColor}
  .rail .soc:hover,.rail .soc:focus-visible{color:var(--fuchsia)}
}
.cookie{position:fixed;z-index:45;left:clamp(10px,.7vw,14px);bottom:calc(clamp(12px,1vw,20px) + env(safe-area-inset-bottom));width:clamp(44px,2.9vw,58px);aspect-ratio:1;display:grid;place-items:center;border-radius:50%;background:#fff;color:var(--fuchsia);box-shadow:0 6px 18px rgba(0,0,0,.08);transition:scale .4s var(--ease)}
.cookie svg{width:52%;height:52%}
.cookie:hover,.cookie:focus-visible{scale:1.06}
.cookie__box{position:fixed;z-index:46;left:clamp(10px,.7vw,14px);bottom:calc(clamp(12px,1vw,20px) + clamp(44px,2.9vw,58px) + .75rem + env(safe-area-inset-bottom));width:min(330px,calc(100vw - 2rem));display:grid;gap:.9rem;padding:1.1rem 1.25rem;border-radius:20px;background:#fff;color:var(--ink);box-shadow:0 12px 34px rgba(0,0,0,.12);font-size:var(--fs-label);line-height:1.4}
.cookie__box[hidden]{display:none}
.cookie__row{display:flex;align-items:center;justify-content:space-between;gap:1rem}
.cookie__row a{text-decoration:underline;text-underline-offset:3px}

/* header narrower: CTA · עב / EN · menu (as the reference's CTA · PL EN DE · menu); side icons on the bar's side */
.hdr__bar .btn,.hdr.on-dark .hdr__bar .btn{margin-inline-end:clamp(.3rem,4.5vw,5.5rem)}
.hdr__lang{display:flex;align-items:center;gap:clamp(.6rem,1vw,1.25rem);font-size:clamp(15px,1.2vw,24px);color:#1c1c1c}
.hdr__lang a,.hdr__lang button{display:inline-flex;align-items:center;min-height:44px;padding-inline:.1rem;font:inherit;color:inherit;transition:color .3s}
.hdr__lang .is-on,.hdr__lang a:hover,.hdr__lang button:hover{color:var(--fuchsia)}
.hdr__soon{position:absolute;top:calc(100% + .6rem);inset-inline-end:0;padding:.6rem 1rem;border-radius:14px;background:#fff;color:var(--ink);box-shadow:0 10px 30px rgba(0,0,0,.08);font-size:var(--fs-label);white-space:nowrap}
.hdr__soon[hidden]{display:none}
@media (max-width:1180px){.hdr__bar .btn,.hdr.on-dark .hdr__bar .btn{margin-inline-end:.3rem}}
@media (max-width:420px){.hdr__bar .btn,.hdr.on-dark .hdr__bar .btn{padding-inline:.9rem}.hdr__lang{gap:.45rem}.hdr__menu{margin-inline-start:.2rem}}
/* (04.11) her request: the social icons stay on the right */

/* ===== type hierarchy by the Styliner scale: 5 sizes fixed site-wide, page headline ≈ 2× section headline =====
   L1 page headline · L2 section headline (≈ half) · L3 sub-headline · L4 body & buttons · L5 notes/captions */
:root{
  --fs-h1:clamp(2.5rem, 1rem + 6vw, 7.5rem);       /* 40 → 102 @1440 */
  --fs-h2:clamp(2.125rem, 1rem + 3.4vw, 4.5rem);   /* 34 → 65 @1440 */
}
.open__h{font-size:var(--fs-h1);max-width:18ch}
.sec .h2,.clients__h{font-weight:var(--w-heavy)}   /* one weight per level: every section headline heavy, the accent word carries the emphasis by colour */
.btn,.hdr__bar .btn,.hdr.on-dark .hdr__bar .btn,.hdr__lang{font-size:var(--fs-body)}  /* buttons sit on the body level, not the caption level */
.svc__d{font-size:var(--fs-body);line-height:1.3}
@media (max-width:820px){.svc__d{font-size:var(--fs-body)}}
:root{--fs-h1:clamp(2.375rem, 1rem + 6vw, 7.5rem);--fs-h2:clamp(1.875rem, 1rem + 3.4vw, 4.5rem)} /* phone: 38 / 30, so the page headline still leads */
@media (min-width:821px){.open{padding-inline:clamp(4rem,9vw,11rem)}} /* the page headline keeps clear of the side icons */
@media (max-width:820px){.open__h{max-width:none}}
@media (max-width:420px){:root{--fs-h1:2.25rem}}
/* the phone: a liquid-chrome render with butterfly filigree and one fuchsia button (426×895 cut-out); the live screen sits in its black glass */
.phone{aspect-ratio:426/895}
.p3__front{background:url("assets/img/phone-front.webp") center / 100% 100% no-repeat;border-radius:14cqw / 6.7cqh}
.p3__front .phone__screen{left:6.3%;right:6.3%;top:1.35%;bottom:2.35%;border-radius:9.9cqw / 4.7cqh}
/* its back: the matching render (brushed silver, engraved butterfly, camera ringed in fuchsia) */
.p3__back{background:url("assets/img/phone-back.webp") center / 100% 100% no-repeat;border-radius:14cqw / 6.7cqh}
.p3__back img,.p3__back .p3__cam{display:none}
/* the opening butterfly is laid out at its largest size (5× the old box) and scaled down at the start, so the 4K image stays sharp while it flies at the camera */
.open__bfly{width:min(120vw,170svh,1500px);will-change:opacity}

/* ===== hero composition (as her reference): headline + buttons on the reading side, her photo with a sticker and a short line on the other ===== */
.open{grid-template-columns:minmax(0,1fr) clamp(240px,26vw,420px);align-items:center;justify-items:stretch;column-gap:clamp(2rem,5vw,6rem);text-align:start}
.open__copy{display:grid;gap:var(--s3);justify-items:start}
.open__h{max-width:none}
.open__thin{font-weight:var(--w-thin)}
.open__cta{justify-content:flex-start}
.open__me{margin:0;display:grid;gap:1.1rem}
.open__pic{position:relative}
.open__pic>img:first-child{display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;border-radius:var(--r-card);box-shadow:0 24px 48px rgba(36,42,48,.18)}
.open__stk{position:absolute;top:-7%;inset-inline-start:-16%;width:46%;height:auto;rotate:-10deg;filter:drop-shadow(0 8px 16px rgba(36,42,48,.25))}
.open__note{display:flex;align-items:flex-start;gap:.5rem;max-width:28ch;font-family:var(--f-label);font-size:var(--fs-label);line-height:1.35;color:var(--ink)}
.open__note svg{flex:none;width:2.2rem;height:auto;margin-top:-.9rem;fill:none;stroke:var(--fuchsia);stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
@media (max-width:820px){
  .open{grid-template-columns:minmax(0,1fr);row-gap:var(--s3)}
  .open__me{width:min(68vw,300px);justify-self:center}
  .open__stk{inset-inline-start:-12%}
}
@media (min-width:821px){
  .open{grid-template-columns:minmax(0,1fr) clamp(220px,23vw,380px);padding-inline:var(--gx) clamp(4rem,9vw,11rem);column-gap:clamp(2rem,4vw,5rem)} /* the reading side runs to the right margin; the side icons keep the left clear */
  .open__h{font-size:clamp(2.75rem, .5rem + 5.6vw, 6.5rem)} /* 4 lines next to the photo instead of 7 */
}
/* hero headline: the skill's section-headline level (no size of its own), all one regular weight; only the fuchsia words stand out, by colour */
.open__h,.open__h .acc,.open__thin{font-weight:var(--w-reg)}
.open__h{font-size:var(--fs-h2)}
@media (min-width:821px){.open__h{font-size:var(--fs-h2)}}
/* her photo is a cut-out now: no frame, it fades into the floor at the waist */
.open__pic>img:first-child{aspect-ratio:900/903;object-fit:contain;border-radius:0;box-shadow:none;-webkit-mask-image:linear-gradient(to bottom,#000 80%,transparent);mask-image:linear-gradient(to bottom,#000 80%,transparent)}
.open__stk{top:2%;inset-inline-start:-6%;width:40%}
.clap__slate{color:var(--fuchsia)} /* the words on the clapperboard in fuchsia */

/* clapperboard edges: no soft frame any more (it read as blur); the frames are the floor colour, so only the two sides the hands cross get a very short fade */
.clap{--edge:linear-gradient(to left,transparent,#000 3%),linear-gradient(to top,transparent,#000 3%);will-change:auto}

/* hero, round 3: her cut-out stands large on the floor (cut straight by the hero's bottom edge, no fade); the headline is the page level, bold */
.open__h,.open__h .acc,.open__thin{font-weight:var(--w-heavy)}
.open__h{font-size:var(--fs-h1)}
@media (min-width:821px){.open__h{font-size:var(--fs-h1)}}
.open__pic>img:first-child{-webkit-mask-image:none;mask-image:none}
.open__me{position:relative;align-self:end}
@media (min-width:821px){
  .open{grid-template-columns:minmax(0,1fr) clamp(300px,31vw,560px)}
  .open__me{margin-bottom:calc(-1 * clamp(3rem,2rem + 3vw,5rem))}
  .open__pic>img:first-child{width:auto;max-width:none;height:min(86svh,880px);aspect-ratio:auto;justify-self:end}
  .open__pic{display:grid;justify-items:end}
  .open__stk{top:4%;inset-inline-start:auto;inset-inline-end:62%;width:clamp(110px,10vw,170px)}
  .open__note{position:absolute;bottom:34%;inset-inline-end:calc(100% - 1rem);width:max-content;max-width:22ch}
}
@media (max-width:820px){
  .open__me{width:100%;margin-bottom:calc(-1 * clamp(3rem,2rem + 3vw,5rem))}
  .open__note{position:absolute;top:12%;inset-inline-start:0;max-width:42%}
  .open__stk{inset-inline-start:auto;inset-inline-end:2%;top:2%;width:30%}
}
@media (min-width:821px){
  .open{grid-template-columns:minmax(0,1fr) 44vw;padding-inline:var(--gx) 0}
  .open__me{position:absolute;left:0;bottom:0;margin:0;width:auto;z-index:1}
  .open__pic{display:block}
  .open__pic>img:first-child{height:min(84svh,44vw);width:auto}
  .open__stk{top:6%;inset-inline-end:auto;inset-inline-start:auto;left:58%;width:clamp(110px,9vw,160px)}
  .open__note{position:absolute;bottom:38%;left:calc(100% - 3rem);inset-inline-end:auto;max-width:20ch;width:max-content}
  .open__copy{position:relative;z-index:2}
}
@media (min-width:821px){
  .open{grid-template-columns:minmax(0,1fr) 36vw}
  .open__h{font-size:clamp(2.375rem,5.6vw,6.25rem)} /* bold and larger than a section headline; the page level (102px) does not fit beside her photo */
  .open__pic>img:first-child{height:min(80svh,40vw)}
}
@media (min-width:821px){
  .open__note{left:calc(100% + .75rem);bottom:46%}
  .open .hero__scroll{display:none} /* her photo now fills that corner */
}
.open__note{flex-direction:row-reverse}            /* the arrow sits on her side of the line */
.open__note svg{transform:scaleX(-1)}             /* and points back at her */
.open__h .w{overflow:visible} /* the 3D reveal turns the words in depth, so nothing clips them */
.open__h .w>span{backface-visibility:hidden}
/* מה אני בונה: the heading sits above the cards (no words on the clapperboard any more); the cards' window starts where the clapper ends */
.paper__h{padding-inline:var(--gx);margin:0 0 var(--s2)}
@media (min-width:821px){.paper__view{width:50%}}
.paper__h{font-weight:var(--w-heavy)}

/* hero, round 4: the full figure (laptop and elbow whole), standing on the floor clear of the side icons; text at the top, so the laptop never meets the headline */
@media (min-width:821px){
  .open{align-items:start}
  .open__copy{padding-top:clamp(1rem,3vh,3rem)}
  .open__me{left:clamp(5.5rem,7vw,8rem)}
  .open__pic>img:first-child{height:min(70svh,44vw)}
  .open__stk{left:-2%;top:6%;width:clamp(110px,9vw,150px)}
  .open__note{left:66%;top:9%;bottom:auto;max-width:15ch}
  .open__note svg{transform:rotate(180deg);margin-top:.4rem}
}
@media (max-width:820px){
  .open__pic>img:first-child{width:100%;height:auto}
  .open__note{top:6%;max-width:38%}
  .open__note svg{transform:rotate(180deg);margin-top:.4rem}
  .open__stk{top:4%;width:26%}
}
@media (min-width:821px){
  .open__me{left:clamp(6rem,8vw,9rem)}
  .open__pic>img:first-child{height:min(62svh,40vw)}
  .open__stk{left:3%}
  .open__note{max-width:22ch;left:68%}
}

/* clapperboard switched off: the cards' window takes the whole width */
.paper__set[hidden]{display:none}
.paper--noclap .paper__view{width:100%;justify-self:stretch;margin-inline:0}
.paper--noclap .paper__pin{padding-top:clamp(5rem,4rem + 3vw,7rem)}

/* hero, round 5 (her marked-up screenshot): the photo centred at ~35% of the width, standing on the floor;
   the headline fills the right-hand frame from ~20% to ~75% of the height, its left ends may run a little over the photo; buttons at the foot */
@media (min-width:821px){
  .open{grid-template-columns:minmax(0,1fr);align-content:stretch;align-items:stretch;padding-top:clamp(7rem,19svh,11rem);padding-bottom:clamp(2rem,6svh,4rem)}
  .open__copy{display:grid;grid-template-rows:1fr auto;justify-items:start;gap:var(--s2);padding-top:0;position:relative;z-index:2}
  .open__h{font-size:clamp(3rem,6.6vw,7.5rem);line-height:1.02;max-width:54vw}
  .open__cta{align-self:end}
  .open__me{left:calc(35vw - 38svh);bottom:0}
  .open__pic>img:first-child{height:76svh;max-height:none}
  .open__stk{left:-3%;top:22%;width:clamp(110px,9vw,150px)}
  .open__note{left:-4%;top:-7%;bottom:auto;max-width:18ch}
  .open__note svg{transform:rotate(90deg);margin-top:.6rem}
}
@media (min-width:821px){.open__h{max-width:58vw}} /* five lines, as her frame */
@media (min-width:821px){.open__h{max-width:63vw}} /* "בינלאומי ומוכר" on one line → five lines */

/* ReactBits ports: the hero lines on a cylinder (heights set by the script) and the domino words */
.open__h{position:relative;perspective:1000px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 8%,#000 92%,transparent 100%);width:100%}
@media (min-width:821px){.open__h{width:63vw}}
.open__cyl{position:absolute;inset:0;transform-style:preserve-3d}
.open__cyl .tr{position:absolute;top:50%;right:0;white-space:nowrap;line-height:1.02;backface-visibility:hidden;-webkit-backface-visibility:hidden}
html:not(.motion) .open__cyl{position:static}
html:not(.motion) .open__cyl .tr{position:static;display:block}
html:not(.motion) .open__h{height:auto!important;-webkit-mask-image:none;mask-image:none}
.say__text .dl{display:inline-block;position:relative;will-change:transform}

/* ReactBits ports, round 2 */
.card__btn:hover .card__img img,.card__btn:focus-visible .card__img img{transform:none} /* the depth card moves the screenshot itself */
.card__spot{position:absolute;inset:0;z-index:2;pointer-events:none;opacity:0;mix-blend-mode:soft-light;filter:blur(2px);transition:opacity .3s ease-out}
.hpv{position:fixed;left:0;top:0;z-index:60;width:260px;height:180px;border-radius:.75rem;overflow:hidden;pointer-events:none;opacity:0;scale:.85;box-shadow:0 20px 40px rgba(36,42,48,.25)}
.hpv img{width:100%;height:100%;object-fit:cover;object-position:50% 0}
.hpv-t{text-decoration:underline;text-decoration-color:var(--fuchsia);text-decoration-thickness:2px;text-underline-offset:.18em;cursor:pointer}
.bh{background-image:linear-gradient(var(--fuchsia),var(--fuchsia)),linear-gradient(var(--ink),var(--ink));background-repeat:no-repeat;background-position:100% 0,0 0;background-size:0% 100%,100% 100%;-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-box-decoration-break:clone;box-decoration-break:clone}
html:not(.motion) .bh{background:none;color:var(--fuchsia)}

/* hero headline back to plain stacked lines */
.open__h{height:auto!important;-webkit-mask-image:none;mask-image:none;perspective:none}
.open__cyl{position:static;display:block;transform:none}
.open__cyl .tr{position:static;display:block;white-space:normal}

/* "עבדתם שנה" on a cylinder (ReactBits 3D Text Reveal): the section holds ~300vh, the lines roll past the front */
.motion .hello{height:300svh}
.hello__cyl{position:relative;width:100%;flex:1;align-self:stretch;min-height:60svh;perspective:1000px;-webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%);mask-image:linear-gradient(to bottom,transparent 0%,#000 20%,#000 80%,transparent 100%)}
.hello__drum{position:absolute;inset:0;transform-style:preserve-3d}
.hello__drum .tr{position:absolute;top:50%;left:50%;white-space:nowrap;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:min(var(--fs-h2),5.6vw);line-height:1;color:var(--ink);backface-visibility:hidden;-webkit-backface-visibility:hidden}
.hello__drum .tr.acc{color:var(--fuchsia)}
.hello__stage{grid-template-rows:auto 1fr auto}
html:not(.motion) .hello__cyl{min-height:0;-webkit-mask-image:none;mask-image:none}
html:not(.motion) .hello__drum{position:static}
html:not(.motion) .hello__drum .tr{position:static;white-space:normal;text-align:center}
@media (max-width:820px){.motion .hello{height:260svh}}

/* ===== motion pass: buttons, cursor ring ===== */
.btn{position:relative;overflow:hidden;isolation:isolate}
.btn__roll{display:inline-grid;overflow:hidden;height:1.35em;line-height:1.35em}
.btn__t{display:block;transition:transform .6s cubic-bezier(.22,1,.36,1)}
.btn:hover .btn__t,.btn:focus-visible .btn__t{transform:translateY(-100%)}
.btn__fill{position:absolute;z-index:-1;left:var(--bx,50%);top:var(--by,50%);width:var(--bd,300px);height:var(--bd,300px);margin:calc(var(--bd,300px) / -2) 0 0 calc(var(--bd,300px) / -2);border-radius:50%;background:var(--fuchsia);transform:scale(0);opacity:0;transition:transform 2.4s cubic-bezier(.25,.1,.25,1),opacity 1.4s ease;pointer-events:none} /* her request: the fill rises slower and softer */
.has-cursor .btn:hover{background:var(--white);color:var(--white);border-color:var(--fuchsia);transition:color 1s .6s}
.btn:hover .btn__fill{transform:scale(1);opacity:1}
.btn:hover i{background:var(--white);color:var(--fuchsia)}
.hdr__bar .btn:hover,.hdr.on-dark .hdr__bar .btn:hover{background:var(--white);color:var(--white)}
.cur-ring{position:fixed;left:0;top:0;z-index:94;width:38px;height:38px;margin:-19px 0 0 -19px;border:1.5px solid var(--fuchsia);border-radius:50%;pointer-events:none;display:none;transition:width .45s cubic-bezier(.22,1,.36,1),height .45s cubic-bezier(.22,1,.36,1),margin .45s cubic-bezier(.22,1,.36,1),background-color .35s,border-color .35s,opacity .3s}
.has-cursor .cur-ring{display:block}
.cur-ring[data-mode="text"]{width:120px;height:120px;margin:-60px 0 0 -60px;background:var(--fuchsia);border-color:transparent;mix-blend-mode:multiply}
.cur-ring[data-mode="link"]{width:58px;height:58px;margin:-29px 0 0 -29px;background:rgba(236,11,140,.1)}
.cur-ring[data-mode="card"],.cur-ring[data-mode="out"]{opacity:0}
@media (prefers-reduced-motion:reduce){.btn__t,.btn__fill,.cur-ring{transition:none}}
.cur-ring[data-mode="text"]{background:rgba(236,11,140,.08);border-color:var(--fuchsia);mix-blend-mode:normal} /* a clear lens: the words stay readable under it */
/* the paint cursor layer: watercolor pigment multiplied over the page, never in the way of a click */
.paint-layer{position:fixed;inset:0;z-index:93;pointer-events:none;mix-blend-mode:multiply}
.cur-ring{display:none!important}

/* ===== projects as a scroll stack ===== */
.motion .work.is-stack{height:var(--runway,300svh);padding:0;overflow:visible}
.motion .work.is-stack .work__pin{position:sticky;top:0;height:100svh;display:grid;grid-template-rows:auto 1fr;padding:clamp(5.5rem,4.5rem + 3vw,7rem) var(--gx) var(--s2);overflow:hidden;perspective:1400px}
.motion .work.is-stack .work__viewport{position:relative}
.motion .work.is-stack .work__track{position:absolute;inset:0;display:block;width:auto;padding:0}
.motion .work.is-stack .card{position:absolute;left:50%;top:50%;width:min(880px,90vw);margin:0;translate:-50% -50%;will-change:transform,filter;transform-origin:50% 0}
.motion .work.is-stack .card__btn{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:var(--s2);align-items:end;width:100%;padding:clamp(.75rem,1vw,1.25rem);border-radius:22px;background:var(--white);box-shadow:0 30px 60px rgba(36,42,48,.14)}
.motion .work.is-stack .card__img{aspect-ratio:16/11;grid-row:span 3}
@media (max-width:820px){.motion .work.is-stack .card__btn{grid-template-columns:1fr}.motion .work.is-stack .card__img{aspect-ratio:16/10;grid-row:auto}}
/* ===== the tile reveal opening ===== */
.tiles{position:relative;background:var(--studio)}
.tiles__stage{position:relative;min-height:60svh;display:grid;place-items:center;padding:var(--s3) var(--gx);text-align:center}
.tiles__content{position:relative;z-index:2;display:grid;justify-items:center;gap:28px}
.tiles__h{font-weight:var(--w-heavy);margin:0}
.tiles__sub{margin:0;font-size:var(--fs-body);color:var(--muted)}
.tiles__frame{display:none}
.motion .tiles.is-live{height:260svh}
.motion .tiles.is-live .tiles__stage{position:sticky;top:0;height:100svh;overflow:hidden;padding:0}
.motion .tiles.is-live .tiles__frame{display:block;position:absolute;left:50%;top:50%;translate:-50% -50%;width:min(720px,calc(100% - 56px));pointer-events:none}
.tiles__grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:28px;will-change:transform}
.tiles__t{aspect-ratio:1;overflow:hidden;border-radius:18px;visibility:hidden;will-change:transform;backface-visibility:hidden;background:var(--white);box-shadow:0 18px 36px rgba(36,42,48,.12)}
.tiles__t img{width:100%;height:100%;object-fit:cover;object-position:50% 20%;user-select:none}
.motion .tiles.is-live .tiles__sub{opacity:0}
/* ===== the menu: circle wave from the button, items lean in ===== */
.menu-pre{position:fixed;inset:0;z-index:44;background:var(--fuchsia);pointer-events:none;clip-path:circle(0px at var(--mx,92%) var(--my,6%));transition:clip-path .7s cubic-bezier(.76,0,.24,1) .12s}
.menu-pre.is-open{clip-path:circle(150vmax at var(--mx,92%) var(--my,6%));transition:clip-path .8s cubic-bezier(.76,0,.24,1)}
.menu{clip-path:circle(0px at var(--mx,92%) var(--my,6%));transition:clip-path .7s cubic-bezier(.76,0,.24,1),visibility 0s .82s}
.menu.is-open{clip-path:circle(150vmax at var(--mx,92%) var(--my,6%));transition:clip-path .85s cubic-bezier(.76,0,.24,1) .12s,visibility 0s 0s}
.menu__list a{rotate:3deg;transform-origin:100% 100%;transition:translate .9s var(--ease) calc(.3s + var(--i) * .07s),rotate .9s var(--ease) calc(.3s + var(--i) * .07s),color .4s}
.menu.is-open .menu__list a{rotate:0deg}
.hpv--menu{z-index:3;width:300px;height:210px}
.tiles__grid{direction:ltr} /* the tile plan counts columns left to right */
/* paint is opaque gouache now: no multiply */
.paint-layer{mix-blend-mode:normal}
/* the smearing cursor dot */
.cur{background:none}
.cur__blob{position:absolute;inset:0;border-radius:50%;background:var(--fuchsia);will-change:transform}
.cur.is-big .cur__blob{transform:none!important}
.cur span{position:relative}
/* add to cart */
.shop__buy{width:100%;font:inherit;cursor:pointer}
.shop__cart{position:relative;display:inline-grid}
.shop__count{position:absolute;top:-.45rem;inset-inline-end:-.55rem;min-width:1.05rem;height:1.05rem;padding:0 .2rem;border-radius:999px;background:var(--fuchsia);color:var(--white);font-size:.65rem;line-height:1.05rem;text-align:center;scale:0;transition:scale .4s cubic-bezier(.34,1.56,.64,1)}
.shop__count.is-on{scale:1}
.burst{position:fixed;z-index:96;margin:-6px 0 0 -6px;border-radius:50%;pointer-events:none;box-shadow:0 2px 6px rgba(36,42,48,.18)}
/* hero, her request: a slightly smaller headline and more inner margin all round the screen */
@media (min-width:821px){
  .open{padding:clamp(8rem,22svh,12rem) clamp(4.5rem,8vw,9rem) clamp(3rem,8svh,5.5rem)}
  .open__h{font-size:clamp(2.6rem,5.6vw,6.4rem)}
}
@media (max-width:820px){
  .open{padding-inline:clamp(1.5rem,6vw,2.5rem)}
}
/* peelable stickers (ReactBits Pro "Elastic Sticker"): the visitor can grab any sticker, peel it off and drag it away */
.elastic-sticker{display:block;touch-action:none;user-select:none;-webkit-user-select:none;outline:none;cursor:grab;pointer-events:auto!important;filter:none!important;height:auto}
.elastic-sticker:focus-visible{outline:2px solid var(--fuchsia);outline-offset:4px}
/* the hero text box spans the whole width over the photo: let clicks through it so the sticker on the photo can be grabbed */
.open__copy{pointer-events:none}
.open__copy>*{pointer-events:auto}
.open__h{pointer-events:none}
/* "מה אני בונה": the headline and the React Bits FlexCarousel together on one screen (the Tile Reveal opening and the sideways strip are off) */
.paper--flex .svc{display:none}
.paper--flex .paper__pin{min-height:100svh;display:grid;align-content:center;padding-block:clamp(5rem,4rem + 3vw,7rem) var(--s2)}
.paper--flex .paper__view{width:100%;justify-self:stretch;display:grid;justify-items:center;text-align:center;gap:0;overflow:visible;padding-block:0}
.paper--flex .paper__k{margin-bottom:.5rem}
.paper__flex,.paper__flex.flex-carousel{width:100%;height:min(64svh,620px);color:var(--ink);margin-top:calc(var(--s1) * -.5)}
/* the component's own stylesheet */
.flex-carousel{position:relative;width:100%;height:100%;overflow:hidden;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none;-webkit-tap-highlight-color:transparent;overscroll-behavior:contain;outline:none}
.flex-carousel[data-hover='open']{cursor:zoom-in}
.flex-carousel[data-hover='close']{cursor:zoom-out}
.flex-carousel[data-dragging]{cursor:grabbing}
.flex-carousel:focus-visible{box-shadow:inset 0 0 0 2px rgba(128,128,140,.55)}
.flex-carousel__caption{position:absolute;left:0;right:0;top:calc(50% + var(--flex-carousel-half) * var(--flex-carousel-lift, 1) + 22px);display:flex;flex-direction:column;align-items:center;gap:6px;padding:0 16px;pointer-events:none;text-align:center;animation:flex-carousel-reveal 900ms ease both}
.flex-carousel__title{display:flex;flex-direction:column;align-items:center;max-width:100%;font-size:15px;font-weight:500;line-height:1.35;animation:flex-carousel-title 520ms cubic-bezier(.22,1,.36,1)}
.flex-carousel__subtitle{font-weight:400;opacity:.6}
.flex-carousel__count{display:inline-flex;align-items:center;gap:3px;font-size:12px;line-height:1;font-variant-numeric:tabular-nums;opacity:.5;transition:opacity 400ms ease;direction:ltr}
.flex-carousel__count[data-hidden]{opacity:0}
.flex-carousel__digits{display:inline-flex}
.flex-carousel__digit{display:inline-block;height:1em;overflow:hidden}
.flex-carousel__reel{display:flex;flex-direction:column;transition:transform 600ms cubic-bezier(.22,1,.36,1)}
.flex-carousel__reel span{height:1em}
.flex-carousel__slash{opacity:.6}
.flex-carousel__live{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}
@keyframes flex-carousel-title{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
@keyframes flex-carousel-reveal{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.flex-carousel__caption,.flex-carousel__title{animation:none}.flex-carousel__reel{transition:none}}
/* FlexCarousel, her request: bigger cards, and the caption under them in the old service-card design (title + its full explanation) */
.paper__flex,.paper__flex.flex-carousel{height:min(80svh,820px)}
.paper__flex .flex-carousel__caption{gap:.6rem}
.paper__flex .flex-carousel__title{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;color:var(--ink);max-width:min(46ch,90%)}
.paper__flex .flex-carousel__subtitle{margin-top:.5rem;font-family:var(--f-body);font-weight:400;font-size:var(--fs-body);line-height:1.3;color:var(--muted);opacity:1}
.paper__flex .flex-carousel__count{font-family:var(--f-body)}
/* her request: no tiny lines. The small labels across the page go up to the body size; the trust line under the drum goes up to H3.
   (The phone mock-up keeps its small UI text, as a real phone screen.) The line "מירי דייטש · עיצוב ובניית חנויות ואתרים" was removed. */
.label,.open__note,.card__go,.case dt,.fgrid__brand p,.foot a,.hdr__link,.tg__tab{font-size:var(--fs-body)}
.demo .label,.shop .label{font-size:var(--fs-label)}
.hello__foot .hero__trust{font-size:var(--fs-h3);line-height:1.25;color:var(--ink);opacity:1;max-width:30ch}
/* projects opening in stages (.boards): static grid without JS; with motion the screen is held while the timeline runs */
.boards{padding-inline:var(--gx)}
.boards__stage{display:grid;gap:var(--s1);justify-items:center;text-align:center;padding-block:var(--s2)}
.boards__heads{display:grid}
.boards__h{grid-area:1/1;max-width:22ch;font-weight:var(--w-heavy)}
.boards__h--2{display:none}
.boards__field{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:100%}
.boards__t{position:relative;margin:0;aspect-ratio:16/10;border-radius:var(--r-card);overflow:hidden;background:var(--studio);box-shadow:0 12px 24px rgba(36,42,48,.12)}
.boards__t img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block}
.boards__badge{position:absolute;top:.6rem;inset-inline-start:.6rem;padding:.25rem .7rem;border-radius:999px;background:var(--fuchsia);color:var(--white);font-size:var(--fs-body);line-height:1.2;transform-origin:100% 0}
.boards__cap{position:absolute;inset-inline:0;bottom:0;padding:1.4rem 1rem .8rem;background:linear-gradient(to top,rgba(20,17,24,.78),transparent);color:var(--white);font-size:calc(var(--fs-body) * .5);line-height:1.3;text-align:start}
.boards__cap b{font-weight:var(--w-heavy)}
.boards__end{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15;color:var(--ink)}
.motion .boards.is-live{height:300svh}
.motion .boards.is-live .boards__stage{position:sticky;top:0;height:100svh;grid-template-rows:auto auto 1fr;align-content:start;padding-top:clamp(5.5rem,4.5rem + 3vw,7.5rem);padding-bottom:var(--s2)}
.motion .boards.is-live .boards__h--2{display:block}
.motion .boards.is-live .boards__field{display:block;position:relative;height:100%;min-height:0}
.motion .boards.is-live .boards__t{position:absolute;aspect-ratio:auto;will-change:transform}
.motion .boards.is-live .boards__end{position:absolute;bottom:var(--s3);inset-inline-start:var(--gx);max-width:16ch;text-align:start}
@media (max-width:820px){.boards__field{grid-template-columns:repeat(2,minmax(0,1fr))}}
.motion .work.is-stack{height:calc(var(--runway,300svh) + var(--boards,0px))} /* the staged opening + the stack's own runway */
.motion .boards.is-live .boards__field{width:min(100%,1180px)}
/* "מה אני בונה", her request: only the title under the cards; what the build includes appears only after a click opens the card */
.paper__flex .flex-carousel__subtitle{max-height:0;opacity:0;overflow:hidden;transform:translateY(-6px);transition:max-height .5s var(--ease),opacity .35s var(--ease),transform .5s var(--ease)}
.paper__flex.is-open .flex-carousel__subtitle{max-height:8em;opacity:1;transform:none;transition-delay:.25s}
.paper__flex:not(.is-open) .flex-carousel__title::after{content:"לחצו לפירוט";display:block;margin-top:.5rem;font-family:var(--f-label);font-weight:var(--w-reg);font-size:var(--fs-body);color:var(--fuchsia)}

/* 05 · the phone acts out the three steps (her request): 01 an outgoing call, 02 design and build (wireframe + mood board, then the
   finished page), 03 launch — and at the very end of the scroll a purchase: "הוספה לסל" is pressed, circles burst out, a sale banner
   drops in with a ringing bell (and a short ka-ching sound when the browser allows sound). Phone UI text stays phone-sized. */
.call{position:absolute;inset:0;z-index:3;display:grid;grid-template-rows:auto auto auto auto 1fr auto;justify-items:center;align-content:start;gap:.35rem;padding:2.6rem 1rem 1.6rem;
  background:linear-gradient(180deg,#2a2530,#141118);color:var(--white);text-align:center;opacity:0;visibility:hidden;transition:opacity .5s var(--ease),visibility .5s}
.demo[data-screen="call"] .call{opacity:1;visibility:visible}
.call__st{font-size:var(--fs-label);opacity:.7}
.call__av{position:relative;width:38%;aspect-ratio:1;margin-top:.9rem;border-radius:50%}
.call__av img{position:relative;width:100%;height:100%;object-fit:cover;border-radius:50%;border:3px solid rgba(255,255,255,.9)}
.call__av i{position:absolute;inset:0;border-radius:50%;border:2px solid var(--fuchsia);animation:ring 1.8s var(--ease) infinite}
.call__av i+i{animation-delay:.9s}
@keyframes ring{from{transform:scale(1);opacity:.9}to{transform:scale(1.7);opacity:0}}
.call__name{margin-top:.6rem;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:1.15rem;line-height:1.1}
.call__t{font-size:var(--fs-label);opacity:.75;font-variant-numeric:tabular-nums}
.call__keys{align-self:end;display:flex;gap:.9rem}
.call__keys i,.call__end{display:grid;place-items:center;width:2.6rem;height:2.6rem;border-radius:50%;background:rgba(255,255,255,.14)}
.call__keys svg,.call__end svg{width:1.15rem;height:1.15rem;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.call__end{margin-top:1rem;background:#e5484d}
.call__end svg{fill:currentColor;stroke:none}
.sale{position:absolute;z-index:4;inset:.6rem .55rem auto;display:flex;align-items:center;gap:.6rem;padding:.7rem .8rem;border-radius:1rem;background:var(--fuchsia);color:var(--white);
  font-size:var(--fs-label);line-height:1.2;box-shadow:0 14px 26px rgba(236,11,140,.35);opacity:0;translate:0 -130%;transition:translate .6s cubic-bezier(.34,1.56,.64,1),opacity .3s}
.sale.is-on{opacity:1;translate:0 0}
.sale__bell{display:grid;place-items:center;flex:none;width:2rem;height:2rem;border-radius:50%;background:rgba(255,255,255,.22)}
.sale__bell svg{width:1.1rem;height:1.1rem;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;transform-origin:50% 10%}
.sale.is-on .sale__bell svg{animation:bell .9s ease-in-out 2}
@keyframes bell{0%,100%{rotate:0deg}15%{rotate:22deg}30%{rotate:-18deg}45%{rotate:14deg}60%{rotate:-10deg}75%{rotate:5deg}}
/* projects grid tiles are buttons that open the project */
.boards__t{display:block;padding:0;border:0;cursor:pointer;transition:box-shadow .4s var(--ease)}
.boards__t:hover,.boards__t:focus-visible{box-shadow:0 18px 34px rgba(36,42,48,.2)}
.boards__t:focus-visible{outline:3px solid var(--fuchsia);outline-offset:3px}
.boards__t img{transition:transform 1s var(--ease)}
.boards__t:hover img{transform:scale(1.04)}
/* ===== the menu, round 2 (her request): blinds instead of the circle wave, and something alive inside ===== */
/* the cloth (canvas drawn by main.js): a dark fabric that falls, sways and can be pulled */
.menu-pre{display:block;position:fixed;inset:0;width:100%;height:100%;z-index:44;pointer-events:none;clip-path:none;background:none;transition:none}
.menu.is-open{cursor:grab;user-select:none;-webkit-user-select:none;touch-action:none}
.menu.is-open.is-grab{cursor:grabbing}
.menu.is-open a,.menu.is-open button{cursor:pointer}
.menu,.menu.is-open{clip-path:none;background:transparent}
.menu{visibility:hidden;transition:visibility 0s .75s}
.menu.is-open{visibility:visible;transition:visibility 0s 0s}
.menu__list a{transition:translate .9s var(--ease) calc(.55s + var(--i) * .07s),rotate .9s var(--ease) calc(.55s + var(--i) * .07s),color .4s}
.menu:not(.is-open) .menu__list a{transition-duration:.3s;transition-delay:0s}
.menu__side{transition:opacity .8s var(--ease) .8s,translate .8s var(--ease) .8s}
.menu:not(.is-open) .menu__side{transition-duration:.25s;transition-delay:0s}
.menu__foot{opacity:0;transition:opacity .6s var(--ease)}
.menu.is-open .menu__foot{opacity:1;transition-delay:.9s}
.menu>.menu__list,.menu>.menu__side,.menu>.menu__foot{position:relative;z-index:1}
/* the item rolls up to its fuchsia copy */
.menu__list a:hover .menu__t,.menu__list a:focus-visible .menu__t{translate:0 0}
.menu__roll{display:inline-grid;overflow:hidden;line-height:1.15;height:1.15em;vertical-align:bottom}
.menu__roll>span{grid-area:1/1;transition:transform .55s var(--ease)}
.menu__roll>span+span{transform:translateY(105%);color:var(--fuchsia)}
.menu__list a:hover .menu__roll>span:first-child,.menu__list a:focus-visible .menu__roll>span:first-child{transform:translateY(-105%)}
.menu__list a:hover .menu__roll>span+span,.menu__list a:focus-visible .menu__roll>span+span{transform:translateY(0)}
/* the huge outline number behind the menu */
.menu__big{position:absolute;z-index:0;inset-inline-end:var(--gx);bottom:calc(var(--gx) + 4rem);height:.8em;overflow:hidden;direction:ltr;pointer-events:none;
  font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-display);line-height:.8;color:transparent;-webkit-text-stroke:1.5px rgba(236,11,140,.6);opacity:0;transition:opacity .6s var(--ease)}
.menu.is-open .menu__big{opacity:1;transition-delay:.7s}
.menu__big>span{display:block}
.menu__big>span+span{position:absolute;inset:0}
@media (max-width:820px){.menu__big{bottom:auto;top:calc(var(--gx) + 4.5rem);font-size:clamp(7rem,40vw,12rem)}}
/* ===== the buying experience in her brand language (main.js): "הבמה שלי" cart, cue-card toasts, REC timecode, "add to my stage" ===== */
.slate-pill{display:inline-flex;align-items:center;gap:.5rem;min-height:44px;padding:.25rem .5rem .25rem .9rem;border-radius:var(--r-btn);background:var(--ink);color:var(--white);font-size:var(--fs-body);line-height:1;cursor:pointer}
.slate-pill[hidden]{display:none}
.slate-pill__ic{width:30px;height:30px;object-fit:contain;filter:invert(1) hue-rotate(180deg) saturate(1.4)}
.slate-pill__n{display:grid;place-items:center;min-width:1.7em;height:1.7em;padding-inline:.35em;border-radius:999px;background:var(--fuchsia);color:var(--white);font-weight:var(--w-heavy)}
.slate-pill.is-clap .slate-pill__ic{animation:podium .7s cubic-bezier(.34,1.56,.64,1)}
@keyframes podium{0%{transform:translateY(0) scale(1)}35%{transform:translateY(-7px) scale(1.18,.86)}70%{transform:translateY(1px) scale(.94,1.08)}100%{transform:none}}
@media (max-width:640px){.slate-pill__t{display:none}.slate-pill{padding-inline:.4rem}}
.fly{position:fixed;z-index:70;width:80px;height:80px;object-fit:cover;border-radius:18px;box-shadow:0 14px 30px rgba(36,42,48,.3);pointer-events:none}
.flutter{position:fixed;z-index:70;width:56px;height:56px;margin:-28px 0 0 -28px;object-fit:contain;pointer-events:none}
.toasts{position:fixed;z-index:65;bottom:calc(var(--gx) + 4px);inset-inline-start:var(--gx);display:grid;gap:.6rem;width:min(380px,calc(100vw - 2 * var(--gx)));pointer-events:none}
.toast{display:grid;grid-template-columns:auto 1fr;column-gap:.85rem;align-items:center;padding:.9rem 1rem;border-radius:var(--r-card);background:var(--ink);color:var(--ivory);
  box-shadow:0 18px 36px rgba(20,17,24,.28);pointer-events:auto;opacity:0;translate:0 24px;scale:.96;transition:opacity .35s var(--ease),translate .6s cubic-bezier(.34,1.56,.64,1),scale .6s cubic-bezier(.34,1.56,.64,1)}
.toast.is-on{opacity:1;translate:0 0;scale:1}
.toast__ic{grid-row:1/span 2;width:44px;height:44px;object-fit:contain;filter:invert(1) hue-rotate(180deg) saturate(1.4)}
.toast.is-on .toast__ic{animation:podium .8s cubic-bezier(.34,1.56,.64,1) .15s}
.toast__k{font-family:var(--f-label);font-size:var(--fs-body);color:var(--muted-d);line-height:1.2}
.toast__m{margin:0;font-size:var(--fs-body);line-height:1.3}
.toast__m b{font-weight:var(--w-heavy)}
.toast__a{grid-column:2;justify-self:start;margin-top:.55rem;min-height:44px;padding:.35rem 1.1rem;border:0;border-radius:var(--r-btn);background:var(--fuchsia);color:var(--white);font:inherit;font-size:var(--fs-body);cursor:pointer}
.flex-add{position:absolute;z-index:3;bottom:1rem;inset-inline-end:1rem;opacity:0;pointer-events:none;translate:0 10px;transition:opacity .35s var(--ease),translate .5s var(--ease)}
.paper__flex.is-open .flex-add{opacity:1;pointer-events:auto;translate:0 0;transition-delay:.35s}
.rec{position:fixed;z-index:49;top:calc(clamp(.75rem,.5rem + 1vw,1.5rem) + 4.4rem);inset-inline-start:var(--gx);display:flex;align-items:center;gap:.5rem;padding:.3rem .8rem;border-radius:var(--r-btn);
  background:rgba(255,255,255,.72);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:var(--ink);font-family:var(--f-label);font-size:var(--fs-body);line-height:1.2;pointer-events:none;font-variant-numeric:tabular-nums}
.rec__dot{width:9px;height:9px;border-radius:50%;background:var(--fuchsia);animation:recblink 1.2s steps(1) infinite}
@keyframes recblink{50%{opacity:.15}}
.rec-line{position:fixed;z-index:49;inset-inline:0;bottom:0;height:3px;pointer-events:none}
.rec-line i{display:block;height:100%;background:var(--fuchsia);transform-origin:100% 50%;transform:scaleX(0)}
@media (max-width:820px){.rec{display:none}}
@media (prefers-reduced-motion:reduce){.rec__dot,.toast.is-on .toast__ic,.slate-pill.is-clap .slate-pill__ic{animation:none}}
/* ===== accessibility widget: the cookie button's twin, stacked right above it; its panel is the cookie note's card ===== */
.a11y{bottom:calc(clamp(12px,1vw,20px) + clamp(44px,2.9vw,58px) + .6rem + env(safe-area-inset-bottom))}
.a11y svg{width:58%;height:58%}
.a11y__box{bottom:calc(clamp(12px,1vw,20px) + 2 * clamp(44px,2.9vw,58px) + 1.35rem + env(safe-area-inset-bottom));width:min(360px,calc(100vw - 2rem));font-size:var(--fs-body)}
.a11y__t{margin:0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1}
.a11y__size{display:flex;align-items:center;justify-content:space-between;gap:.6rem;padding:.3rem;border-radius:var(--r-btn);background:var(--studio)}
.a11y__size button{min-width:44px;min-height:44px;border-radius:50%;background:#fff;color:var(--ink);font-weight:var(--w-heavy);font-size:var(--fs-body)}
.a11y__lvl{font-variant-numeric:tabular-nums}
.a11y__grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
.a11y__grid button{min-height:48px;padding:.5rem .7rem;border-radius:14px;background:var(--studio);color:var(--ink);font-size:var(--fs-body);line-height:1.2;text-align:start;transition:background .3s var(--ease),color .3s var(--ease)}
.a11y__grid button[aria-pressed="true"]{background:var(--fuchsia);color:#fff}
.a11y__box button:focus-visible,.a11y:focus-visible{outline:3px solid var(--fuchsia);outline-offset:2px}
/* what the options do */
html.a11y-contrast{--muted:#242a30;--muted-d:#ffffff}
html.a11y-contrast .label,html.a11y-contrast .svc__d,html.a11y-contrast .hero__trust,html.a11y-contrast p{opacity:1!important}
html.a11y-contrast .sec--ivory,html.a11y-contrast .paper,html.a11y-contrast .open{background:#fff}
html.a11y-gray img,html.a11y-gray video,html.a11y-gray canvas,html.a11y-gray svg{filter:grayscale(1)!important}
html.a11y-gray{--fuchsia:#242a30}
html.a11y-links a{text-decoration:underline!important;text-underline-offset:4px;text-decoration-thickness:2px}
html.a11y-font{--f-display:Arial,"Noto Sans Hebrew",sans-serif;--f-label:Arial,"Noto Sans Hebrew",sans-serif;--f-body:Arial,"Noto Sans Hebrew",sans-serif}
html.a11y-still *,html.a11y-still *::before,html.a11y-still *::after{animation-play-state:paused!important;transition-duration:0s!important;transition-delay:0s!important}
html.a11y-still .paint-layer,html.a11y-still .rec__dot{display:none}
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='M4 2l15 9-7 1.5L8.5 20z' fill='%23242a30' stroke='white' stroke-width='1.3'/%3E%3C/svg%3E") 4 2,auto!important}
html.a11y-cursor .cur,html.a11y-cursor .paint-layer{display:none!important}

/* Experience Edition · scroll choreography */
.motion .say__text .w{display:inline-block;will-change:transform}
.motion .say{overflow:visible}
.fgrid__logo .drop{will-change:transform}

/* ===== Experience Edition · the takes, shown (today ⇄ after, driven by the existing switch) ===== */
.tgv{position:relative;width:min(640px,100%);height:clamp(260px,22vw + 120px,320px)}
.tgv__s{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;gap:clamp(1rem,3vw,2.5rem);opacity:0;visibility:hidden;transition:opacity .45s var(--ease),visibility 0s .45s}
.tgv[data-s="0"] .tgv__s[data-s="0"],.tgv[data-s="1"] .tgv__s[data-s="1"],.tgv[data-s="2"] .tgv__s[data-s="2"]{opacity:1;visibility:visible;transition:opacity .45s var(--ease)}
.tgv__s>*{box-shadow:0 18px 40px rgba(36,42,48,.14)}
/* 01 · chat → one paid order */
.chat{position:relative;width:min(270px,80vw);height:100%;display:grid;grid-template-rows:auto 1fr;border-radius:22px;background:#ece5dd;overflow:hidden;text-align:start;transition:opacity .5s var(--ease) .5s,scale .6s var(--ease) .45s}
.chat__top{display:flex;align-items:center;gap:.5rem;padding:.6rem .8rem;background:#075e54;color:#fff;font-size:var(--fs-label)}
.chat__av{width:26px;height:26px;border-radius:50%;background:#cfd8dc}
.chat__t{margin-inline-start:auto;font-variant-numeric:tabular-nums;opacity:.85}
.chat__msgs{display:flex;flex-direction:column;justify-content:flex-end;gap:.35rem;padding:.6rem;overflow:hidden}
.m{max-width:78%;margin:0;padding:.35rem .6rem;border-radius:10px;font-size:var(--fs-label);line-height:1.3;color:#111;background:#fff;box-shadow:0 1px 1px rgba(0,0,0,.12)}
.m.in{align-self:flex-start}
.m.out{align-self:flex-end;background:#dcf8c6}
.pains:not(.is-after) .tgv[data-s="0"] .m{animation:mIn .35s cubic-bezier(.34,1.56,.64,1) both;animation-delay:calc(var(--k) * .6s)}
.is-after .tgv__s--chat .m{animation:mDrop .85s cubic-bezier(.55,0,.9,.45) both;animation-delay:calc(var(--k) * .05s)}
@keyframes mIn{from{opacity:0;transform:translateY(12px) scale(.9)}}
@keyframes mDrop{from{transform:none;opacity:1}to{transform:translateY(340px) rotate(var(--r));opacity:0}}
.is-after .chat{opacity:.0;scale:.92}
.order{position:absolute;display:grid;gap:.25rem;justify-items:center;padding:1.2rem 1.6rem;border-radius:var(--r-card);background:#fff;color:var(--ink);text-align:center;opacity:0;translate:0 -90px;pointer-events:none}
.order__k{font-family:var(--f-label);font-size:var(--fs-body);color:var(--muted)}
.order b{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);color:var(--fuchsia)}
.order__l{font-size:var(--fs-body)}
.is-after .order{animation:orderIn 1s cubic-bezier(.34,1.56,.64,1) .6s both}
@keyframes orderIn{from{opacity:0;translate:0 -90px;rotate:-6deg}60%{opacity:1}to{opacity:1;translate:0 0;rotate:0deg}}
/* 02 · a home-made page → a clean one */
.site{position:relative;width:min(440px,92vw);height:100%;border-radius:16px;background:#fff;overflow:hidden;text-align:start}
.site__bar{display:flex;gap:6px;padding:9px 12px;background:#f1f1f3}
.site__bar i{width:9px;height:9px;border-radius:50%;background:#d0d0d6}
.sb{position:absolute;display:block;transition:all .9s cubic-bezier(.34,1.56,.64,1);transition-delay:calc(var(--k) * .07s);white-space:nowrap}
.sb--nav{top:27px;inset-inline:0;height:36px;background:#ffe94d;rotate:-1deg}
.sb--logo{top:33px;inset-inline-start:14px;font-family:Arial,sans-serif;font-weight:700;font-size:19px;color:#2b6cff;rotate:-4deg}
.sb--img{top:84px;inset-inline-end:34px;width:42%;height:42%;border:3px solid #ff4d4d;rotate:6deg;overflow:hidden}
.sb--img img{width:100%;height:100%;object-fit:cover;object-position:50% 20%}
.sb--h{top:92px;inset-inline-start:22px;font-family:Arial,sans-serif;font-size:27px;color:#ff4d4d;rotate:-5deg}
.sb--p{top:150px;inset-inline-start:70px;font-family:Arial,sans-serif;font-size:21px;color:#2b6cff;rotate:7deg}
.sb--btn{top:212px;inset-inline-start:150px;padding:.3rem .7rem;border-radius:3px;background:#2b6cff;color:#fff;font-family:Arial,sans-serif;font-size:15px;rotate:-7deg}
.is-after .sb{rotate:0deg}
.is-after .sb--nav{background:#fff;box-shadow:0 1px 0 rgba(36,42,48,.08)}
.is-after .sb--logo{top:36px;inset-inline-start:18px;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:15px;color:var(--ink)}
.is-after .sb--img{top:76px;inset-inline-end:16px;width:48%;height:68%;border:0;border-radius:12px}
.is-after .sb--h{top:100px;inset-inline-start:18px;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:26px;color:var(--ink)}
.is-after .sb--p{top:140px;inset-inline-start:18px;font-family:var(--f-body);font-size:18px;color:var(--muted)}
.is-after .sb--btn{top:190px;inset-inline-start:18px;padding:.5rem 1.2rem;border-radius:999px;background:var(--fuchsia);font-family:var(--f-body);font-size:16px}
/* 03 · the days run out → launch day, and the stock leaves */
.cal{display:grid;gap:.5rem;padding:.9rem;border-radius:18px;background:#fff;color:var(--ink);text-align:start}
.cal__h{margin:0;display:grid;font-size:var(--fs-body)}
.cal__h>span{grid-area:1/1;transition:opacity .4s var(--ease)}
.cal__then{opacity:0;color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy)}
.is-after .cal__now{opacity:0}.is-after .cal__then{opacity:1}
.cal__g{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:4px;width:min(250px,56vw)}
.cal__d{position:relative;display:grid;place-items:center;aspect-ratio:1;border-radius:7px;background:var(--studio);font-style:normal;font-size:var(--fs-label);transition:opacity .3s,background-color .4s,color .4s,scale .6s cubic-bezier(.34,1.56,.64,1)}
.cal__d.is-gone{opacity:.32}
.cal__d.is-gone::after{content:"";position:absolute;inset:44% 14%;height:2px;background:var(--ink);rotate:-35deg}
.is-after .cal__d--go{background:var(--fuchsia);color:#fff;scale:1.35;z-index:1;box-shadow:0 6px 14px rgba(236,11,140,.4)}
.stock{display:grid;gap:.6rem;justify-items:center;padding:.9rem;border-radius:18px;background:#fff;color:var(--ink)}
.stock__pile{display:grid;grid-template-columns:repeat(2,44px);gap:6px}
.box{display:block;width:44px;height:38px;border-radius:6px;background:linear-gradient(135deg,#f4f4f6,#a9a9b1 60%,#e6e6ea);position:relative}
.box::after{content:"";position:absolute;inset-inline:0;top:42%;height:5px;background:var(--fuchsia);opacity:.85}
.is-after .box{animation:boxOut .9s cubic-bezier(.5,0,.75,0) both;animation-delay:calc(.7s + var(--k) * .13s)}
@keyframes boxOut{to{transform:translate(calc(-60px + var(--k) * 18px),-300px) rotate(calc(-30deg + var(--k) * 14deg));opacity:0}}
.stock__l{margin:0;display:grid;font-size:var(--fs-body);text-align:center}
.stock__l>span{grid-area:1/1;transition:opacity .4s var(--ease) .9s}
.stock__then{opacity:0;color:var(--fuchsia)}
.is-after .stock__now{opacity:0}.is-after .stock__then{opacity:1}
@media (max-width:640px){.tgv{height:300px}.tgv__s--cal{flex-direction:column;gap:.6rem}.stock{grid-template-columns:auto auto;align-items:center}.stock__pile{grid-template-columns:repeat(3,30px)}.box{width:30px;height:26px}.cal__g{width:min(230px,70vw)}}
@media (prefers-reduced-motion:reduce){.m,.order,.box,.sb{animation:none!important;transition:none!important}.is-after .order{opacity:1;translate:0 0}.is-after .box{opacity:0}.is-after .m{opacity:0}}
/* her request: the scene on the right, the words on the left (desktop). RTL: the first column is the right one. */
@media (min-width:900px){
  .tg{grid-template-columns:minmax(0,1fr) minmax(0,1fr);grid-template-areas:"vis tabs" "vis stage" "vis switch";column-gap:clamp(2rem,5vw,6rem);row-gap:var(--s1);align-items:center;justify-items:start;text-align:start}
  .tgv{grid-area:vis;justify-self:center;align-self:center}
  .tg__tabs{grid-area:tabs;justify-content:flex-start}
  .tg__stage{grid-area:stage}
  .tg__take{justify-items:start}
  .tg__switch{grid-area:switch}
}
/* her request: no empty grey floor between the hero and the next section, and the trust line right at the top —
   as a frosted strip along the hero's floor that blurs away the photo's cut edge */
.motion .hello{height:230svh}
@media (max-width:820px){.motion .hello{height:200svh}}
.trust-strip{position:absolute;z-index:3;inset-inline:0;bottom:0;display:flex;align-items:center;justify-content:center;min-height:clamp(3.8rem,7svh,5.2rem);padding:.7rem var(--gx);
  background:rgba(234,234,234,.55);-webkit-backdrop-filter:blur(16px) saturate(1.05);backdrop-filter:blur(16px) saturate(1.05);
  -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%);padding-top:1.4rem}
.trust-strip .hero__trust{display:block;margin:0;font-size:var(--fs-h3);line-height:1.25;color:var(--ink);text-align:center;text-wrap:balance;opacity:1}
@media (min-width:821px){.open{padding-bottom:calc(clamp(3rem,8svh,5.5rem) + clamp(3.8rem,7svh,5.2rem))}}
@media (max-width:820px){.trust-strip .hero__trust{font-size:var(--fs-body)}.open{padding-bottom:calc(var(--s2) + 4.5rem)}}
/* her request: the chrome laptop in the second section, the text right after it */
.hello__laptop{position:absolute;z-index:2;left:50%;top:50%;width:min(64vw,92svh,980px);height:auto;translate:-50% -46%;pointer-events:none;filter:drop-shadow(0 30px 40px rgba(36,42,48,.12))}
html:not(.motion) .hello__laptop{position:relative;left:auto;top:auto;translate:none;width:min(80vw,560px);margin-inline:auto}
.motion .hello{height:290svh}
@media (max-width:820px){.motion .hello{height:250svh}.hello__laptop{width:min(96vw,560px)}}
/* her request: the scenes bigger */
@media (min-width:900px){
  .tgv{width:100%;height:clamp(400px,34vw,520px)}
  .tgv__s>*{transform:scale(1.32)}
  .tgv__s--cal>*{transform:scale(1.18)}
  .tgv__s--cal{gap:clamp(2rem,4vw,4rem)}
}
@media (max-width:899px){.tgv{height:330px}.tgv__s>*{transform:scale(1.08)}}
/* her request: the menu is no longer a curtain — a quiet dark panel that fades in, the items rising in behind it */
.menu-pre{display:none!important}
.menu,.menu.is-open{background:var(--ink)}
.menu{opacity:0;transition:opacity .45s var(--ease),visibility 0s .5s}
.menu.is-open{opacity:1;cursor:auto;user-select:auto;-webkit-user-select:auto;touch-action:auto;transition:opacity .5s var(--ease),visibility 0s 0s}
.menu__list a{transition:translate .9s var(--ease) calc(.15s + var(--i) * .06s),rotate .9s var(--ease) calc(.15s + var(--i) * .06s),color .4s}
.menu__side{transition:opacity .8s var(--ease) .4s,translate .8s var(--ease) .4s}
.menu.is-open .menu__foot{transition-delay:.5s}
.menu.is-open .menu__big{transition-delay:.35s}
/* the trust strip, round 2: a black Bending Marquee ribbon (ReactBits Pro) with fuchsia type and her emblems, on the frosted floor */
.trust-strip{display:block;min-height:0;padding:2.4rem 0 0;background:rgba(234,234,234,.45)}
.bm-host{height:64px}
.bending-marquee{position:relative;display:flex;align-items:center;justify-content:center;width:100%;height:100%;overflow:hidden;direction:ltr}
.bending-marquee-probe{position:absolute;display:flex;align-items:center;opacity:0;pointer-events:none}
.bending-marquee-stage{display:flex;transform-style:preserve-3d}
.bending-marquee-facet{position:relative;flex-shrink:0;overflow:hidden}
.bending-marquee-column{display:flex;flex-direction:column;justify-content:center;width:100%;height:100%}
.bending-marquee-band{position:relative;width:100%;height:100%;display:flex;align-items:center;overflow:hidden;background:#141118;color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy)}
.bending-marquee-strip{display:flex;align-items:center;width:max-content;will-change:transform}
.bending-marquee-sequence,.bending-marquee-item{display:flex;flex-shrink:0;align-items:center;white-space:nowrap}
.bending-marquee-mark{display:inline-block;width:34px;height:34px;object-fit:contain;filter:invert(1) hue-rotate(180deg) saturate(1.3);animation:bmSway 1.6s ease-in-out infinite alternate}
@keyframes bmRun{to{transform:translate3d(calc(var(--bm-unit) * -1),0,0)}}
@keyframes bmSway{from{transform:rotate(-14deg)}to{transform:rotate(14deg)}}
@media (max-width:820px){.bm-host{height:52px}.trust-strip{padding-top:1.6rem}}
@media (prefers-reduced-motion:reduce){.bending-marquee-strip,.bending-marquee-mark{animation:none!important}}
@media (min-width:821px){.open{padding-bottom:calc(clamp(2.5rem,6svh,4.5rem) + 104px)}}
@media (max-width:820px){.open{padding-bottom:calc(var(--s2) + 80px)}}
/* hero, her notes: the sticker sits half on her shoulder, half off it; "אני מירי" stands outside her, with her own arrow emblem
   pointing out of her to the words */
.open__note{display:flex;flex-direction:row;align-items:center;gap:.4rem}
.open__note svg{display:none}
.note__arrow{flex:none;width:clamp(48px,4.6vw,72px);height:auto;transform-origin:50% 50%}
.note__arrow{transform:scaleX(-1)}
@media (min-width:821px){
  .open__pic .open__stk{left:-1%;top:31%;inset-inline:auto;width:clamp(110px,9vw,150px)}
  .open__note{right:auto;inset-inline:auto;left:-14%;top:1%;bottom:auto;max-width:none;width:max-content}
  .note__t{max-width:16ch}
}
@media (max-width:820px){
  .open__pic .open__stk{left:-2%;top:30%;inset-inline:auto;width:24%}
  .open__note{inset-inline:auto;left:-2%;top:2%;bottom:auto;max-width:44%}
  .note__arrow{width:40px}
}
.hello__laptop{top:46%;translate:none}
html:not(.motion) .hello__laptop{top:auto}

/* the trust strip, round 3: a straight black tape, a little askew, no blur and no fade over the photo */
.trust-strip{background:none!important;-webkit-backdrop-filter:none!important;backdrop-filter:none!important;-webkit-mask-image:none!important;mask-image:none!important;padding:0!important;bottom:clamp(10px,2svh,22px);overflow:visible}
.bm-host{height:auto}
.tape{position:relative;left:-4vw;width:108vw;overflow:hidden;background:#141118;rotate:-1.6deg;box-shadow:0 14px 30px rgba(20,17,24,.18);direction:ltr}
.tape__track{display:flex;width:max-content;will-change:transform}
.tape__it{display:flex;align-items:center;gap:1.1rem;padding:.85rem 1.4rem .85rem 0;white-space:nowrap;color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:clamp(1.05rem,.8rem + .9vw,1.6rem);line-height:1}
.tape__it span{direction:rtl}
.tape__it img{width:clamp(28px,2.4vw,40px);height:clamp(28px,2.4vw,40px);object-fit:contain;filter:invert(1) hue-rotate(180deg) saturate(1.3)}
/* the laptop's wrapper fills the stage, so the laptop keeps its place while the wrapper lifts it in */
.hello__lapwrap{position:absolute;inset:0;z-index:2;pointer-events:none}

/* audit (her request: no dead screens, no huge gaps): the drum section only as long as its words, and no empty tail under the projects */
.motion .hello{height:235svh}
@media (max-width:820px){.motion .hello{height:205svh}}
.motion .boards.is-live{height:255svh}
.motion .boards.is-live .boards__stage{padding-bottom:var(--s1)}
#work{padding-bottom:0}
@media (max-width:820px){.hello__laptop{top:34%;width:min(100vw,600px)}}
/* her request: the takes words clear the fixed social rail on the left (desktop) */
@media (min-width:821px){.pains{padding-inline-end:max(var(--gx),calc(clamp(1rem,3.65vw,4.5rem) + 4.5rem))}}
/* her request: the projects as a reel under one spotlight, not a grid — the scroll draws them across the held screen */
.motion .boards.is-reel{height:calc(100svh + 6 * 55svh)}
.motion .boards.is-reel .boards__stage{grid-template-rows:auto auto 1fr auto;gap:var(--s1)}
.motion .boards.is-reel .boards__field{width:100%;perspective:1600px;perspective-origin:50% 50%}
.motion .boards.is-reel .boards__t{transform-style:preserve-3d;box-shadow:0 20px 40px rgba(36,42,48,.14)}
.motion .boards.is-reel .boards__t img{transition:none}
.boards__now{display:grid;justify-items:center;gap:.2rem;margin:0;min-height:5.2rem;text-align:center}
.boards__n{font-family:var(--f-label);font-size:var(--fs-body);letter-spacing:.14em;color:var(--fuchsia)}
.boards__name{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;color:var(--ink)}
.boards__type{font-size:var(--fs-body);line-height:1.3;color:var(--muted)}
@media (max-width:820px){
  .motion .pains{padding-block:clamp(4.6rem,10svh,5.5rem) var(--s2)}
  .tgv{height:250px}.tgv__s>*{transform:scale(.96)}
  .motion .boards.is-reel .boards__stage{grid-template-rows:auto auto minmax(0,58svh) auto;align-content:center}
}
@media (max-width:820px){.motion .pains{gap:var(--s1)}.motion .tg{gap:var(--s1)}.motion .tgv{height:220px}.motion .tgv__s>*{transform:scale(.88)}}
/* her request: the opening butterfly crosses slowly; the headline shows itself behind it (the wipe is set from the script) */
/* her request: the second section dark */
.hello{background:var(--ink)}
.hello__drum .tr{color:var(--ivory)}
.motion .hello{height:210svh}
@media (max-width:820px){.motion .hello{height:190svh}}
/* her request: the trust tape after the dark second section, on the light floor */
.open{padding-bottom:clamp(2.5rem,6svh,4.5rem)!important}
.trust-band{position:relative!important;inset:auto!important;bottom:auto!important;z-index:6;padding-block:clamp(2.5rem,7svh,4.5rem)!important;background:var(--studio)!important;overflow:clip}
/* her request: the laptop opens "מה אני בונה" */
.lapsc{position:relative;z-index:3;height:100svh;background:var(--studio);display:grid;place-items:center;overflow:clip}
.lapsc__in{display:grid;place-items:center;width:100%}
.lapsc__img{width:min(64vw,88svh,980px);height:auto;filter:drop-shadow(0 30px 40px rgba(36,42,48,.12))}
@media (max-width:820px){.lapsc{height:70svh}.lapsc__img{width:min(96vw,560px)}}
/* her request: her emblems float through the whole site */
.drift{position:fixed;inset:0;z-index:40;pointer-events:none;overflow:hidden}
.drift img{position:absolute;top:0;width:clamp(58px,3vw + 40px,110px);height:auto;will-change:transform;filter:drop-shadow(0 8px 14px rgba(36,42,48,.12))}
@media (max-width:820px){.drift img{width:48px}.drift img:nth-child(even){display:none}}
/* her request: no frame on the logo in the header */
.hdr__logo,.hdr__logo:focus,.hdr__logo:focus-visible{outline:none!important;box-shadow:none!important;border:0!important;background:none!important}
/* her request: hero → dark second screen by scroll — the dark screen rises over the held hero (see main.js) */
.open{z-index:1}
.hello{z-index:3;will-change:clip-path}
/* her request: the laptop right on top of "מה אני בונה" */
.lapsc{height:auto!important;padding-top:clamp(3rem,8svh,6rem);padding-bottom:0}
.lapsc+.tiles+.paper .paper__k,.lapsc~.paper .paper__k{margin-top:0}
/* her request: the takes, clearer and calmer —
   one reading column: progress (three bars that fill with the scroll) → the today/after switch → the line → what it means;
   even padding all round, the words clear of the side rail */
@media (min-width:821px){.motion .pains{padding:clamp(5rem,10svh,7.5rem) max(var(--gx),7.75rem)!important;align-content:center}}
@media (min-width:900px){
  .tg{grid-template-areas:"vis tabs" "vis switch" "vis stage";grid-template-rows:auto auto 1fr;row-gap:var(--s2);align-content:center}
  .tg__stage{align-items:start;min-height:clamp(15rem,9rem + 12vw,21rem)}
  .tg__q{max-width:16ch}
}
.tg__tabs{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;width:min(100%,27rem)}
.tg__tab{position:relative;min-height:44px;padding:0 0 .7rem;border:0;border-radius:0;background:none!important;box-shadow:none!important;text-align:start;color:var(--muted);letter-spacing:.08em}
.tg__tab::after,.tg__tab::before{content:"";position:absolute;inset-inline:0;bottom:0;height:3px;border-radius:3px}
.tg__tab::after{background:rgba(36,42,48,.14)}
.tg__tab::before{z-index:1;background:var(--fuchsia);transform:scaleX(var(--p,0));transform-origin:100% 50%}
html:not(.motion) .tg__tab[aria-selected="true"]::before{transform:none}
.tg__tab[aria-selected="true"]{color:var(--ink)}
.tg__tab:hover{color:var(--fuchsia)}
.is-after .tg__tab{color:rgba(255,255,255,.75)}
.is-after .tg__tab[aria-selected="true"]{color:var(--white)}
.is-after .tg__tab::after{background:rgba(255,255,255,.3)}
.is-after .tg__tab::before{background:var(--white)}
/* the switch: each word centred in its half, clear of the knob's ends */
.tg__switch{grid-template-columns:1fr 1fr;width:max-content}
.tg__opt{display:grid;place-items:center;text-align:center;min-width:8.5rem;padding-inline:1.4rem;line-height:1}
.tg__knob{width:calc(50% - 5px)}
@media (max-width:820px){.tg__opt{min-width:7rem;padding-inline:1rem}.tg__tabs{width:100%}}
.tg__q{max-width:20ch}
/* her request: a card of "מה אני בונה" opens into a product page that pulls out of it */
.paper__flex:not(.is-open) .flex-carousel__title::after{content:"לחצו לפירוט"}
.psheet{position:fixed;inset:0;z-index:60;display:grid;place-items:center;padding:clamp(1rem,4vw,3rem)}
.psheet[hidden]{display:none}
.psheet__scrim{position:absolute;inset:0;background:rgba(36,42,48,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.psheet__p{position:relative;display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:clamp(1.5rem,3vw,3rem);width:min(1120px,100%);max-height:calc(100svh - 2rem);overflow:auto;padding:clamp(1rem,2vw,1.6rem);border-radius:var(--r-card);background:var(--white);box-shadow:0 30px 60px rgba(36,42,48,.15);transform-origin:50% 50%;will-change:transform}
.psheet__media{border-radius:calc(var(--r-card) - 6px);overflow:hidden;background:var(--studio);aspect-ratio:4/5;align-self:stretch}
.psheet__v{width:100%;height:100%;object-fit:cover;display:block}
.psheet__info{display:grid;align-content:center;gap:var(--s1);padding-block:clamp(1rem,3vw,2.5rem);padding-inline-end:clamp(.5rem,2vw,1.5rem)}
.psheet__k{color:var(--fuchsia)}
.psheet__t{margin:0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1;color:var(--ink)}
.psheet__lead{margin:0;font-size:var(--fs-h3);line-height:1.25;color:var(--ink)}
.psheet__h{margin:var(--s1) 0 0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);color:var(--ink)}
.psheet__list{list-style:none;margin:0;padding:0;display:grid;gap:.6rem;border-top:1px solid var(--line)}
.psheet__list li{display:flex;gap:.7rem;align-items:baseline;padding-top:.6rem;font-size:var(--fs-body);line-height:1.3;color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:.6rem}
.psheet__list li::before{content:"";flex:none;width:8px;height:8px;border-radius:50%;background:var(--fuchsia);translate:0 -1px}
.psheet__cta{display:flex;flex-wrap:wrap;gap:.75rem;margin-top:var(--s1)}
.psheet__x{position:absolute;z-index:2;top:.8rem;inset-inline-start:.8rem;width:48px;height:48px;border-radius:50%;border:0;background:var(--white);box-shadow:0 6px 14px rgba(36,42,48,.12);font-size:1.6rem;line-height:1;color:var(--ink);cursor:pointer}
.psheet__x:hover{color:var(--fuchsia)}
@media (max-width:760px){.psheet{padding:0;align-items:end}.psheet__p{grid-template-columns:1fr;border-radius:var(--r-card) var(--r-card) 0 0;max-height:92svh}.psheet__media{aspect-ratio:16/10}.psheet__info{padding-block:.5rem 1rem}}
.flex-add{display:none!important}
@media (min-width:821px){.motion .pains{row-gap:var(--s2)!important;padding-block:clamp(4.5rem,9svh,6.5rem)!important}}
@media (min-width:900px){
  .tg{grid-template-columns:minmax(0,.85fr) minmax(0,1.15fr)}
  .tg__stage{min-height:0}
  .tg__q{max-width:22ch}
  .tgv{height:clamp(380px,31vw,480px)}
}
/* her request: the projects reel — each project inside the chrome laptop (no card behind it) */
.boards__t{aspect-ratio:1168/880;background:none!important;box-shadow:none!important;border-radius:0!important;overflow:visible!important}
.boards__t img{object-fit:contain!important;object-position:50% 50%!important;filter:drop-shadow(0 26px 30px rgba(36,42,48,.10))}
.boards__t:hover img{transform:none}
.motion .boards.is-reel .boards__t{box-shadow:none}
.boards__badge{top:14%;inset-inline-start:22%}
/* her request: every card on the site has rounded corners */
.svc__card,.logos li,.chat,.site,.psheet__p,.card{border-radius:var(--r-card)}
.motion .hello{height:300svh}
@media (max-width:820px){.motion .hello{height:270svh}.hello__drum .tr{font-size:min(var(--fs-h2),5vw)}}
.motion .boards.is-reel .boards__field{perspective:1300px}
.motion .boards.is-reel .boards__t{backface-visibility:visible}
/* her request: the trust line as film-festival laurels (replaces the tape) */
.laurels{position:relative;z-index:6;display:grid;justify-items:center;gap:var(--s1);padding:clamp(3rem,8svh,5.5rem) var(--gx);background:var(--studio)}
.laurels__row{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(1rem,4vw,4.5rem);width:min(100%,1080px)}
.laurel{position:relative;display:grid;place-items:center;aspect-ratio:1;max-width:320px;width:100%;justify-self:center}
.laurel__w{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.laurel__stem{fill:none;stroke:var(--fuchsia);stroke-width:2;stroke-linecap:round}
.laurel__leaf{fill:var(--fuchsia)}
.laurel p{position:relative;display:grid;justify-items:center;gap:.25rem;margin:0;max-width:60%;text-align:center}
.laurel b{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1;color:var(--ink)}
.laurel p>span{font-size:var(--fs-body);line-height:1.25;color:var(--muted)}
.laurels__k{color:var(--muted);letter-spacing:.2em;text-transform:uppercase}
@media (max-width:700px){.laurels__row{grid-template-columns:1fr;gap:.5rem}.laurel{max-width:230px}}
/* her request: the trust line — a turning stamp beside a line whose ending rotates (replaces the laurels) */
.trustx{position:relative;z-index:6;padding:clamp(3rem,9svh,6rem) var(--gx);background:var(--studio)}
.trustx__in{display:flex;align-items:center;justify-content:center;gap:clamp(1.5rem,5vw,5rem);width:min(100%,1100px);margin-inline:auto}
.stamp{position:relative;flex:none;width:clamp(190px,15vw + 60px,250px);aspect-ratio:1;border-radius:50%;background:var(--fuchsia);box-shadow:0 18px 36px rgba(236,11,140,.14);display:grid;place-items:center}
.stamp__ring{position:absolute;inset:0;will-change:transform}
.stamp__ring span{position:absolute;left:50%;top:50%;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);line-height:1;color:var(--white);transform:translate(-50%,-50%) rotate(var(--a)) translateY(calc(clamp(190px,15vw + 60px,250px) * -.39))}
.stamp__ic{width:38%;height:auto;filter:brightness(0) invert(1)}
.trustx__t{display:grid;gap:.15em;margin:0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.05;color:var(--ink)}
.rot{position:relative;display:block;height:1.2em;overflow:hidden;transition:width .6s var(--ease)}
.rot__w{position:absolute;inset-inline-start:0;top:0;white-space:nowrap;color:var(--fuchsia);opacity:0}
.rot__w.is-on{opacity:1}
html:not(.motion) .rot{height:auto;overflow:visible}
html:not(.motion) .rot__w{position:static;display:block;opacity:1}
@media (max-width:760px){.trustx__in{flex-direction:column;text-align:center}.trustx__t{justify-items:center;font-size:var(--fs-h3)}.rot__w{inset-inline-start:50%;translate:50% 0}.stamp{width:180px}.stamp__ring span{transform:translate(-50%,-50%) rotate(var(--a)) translateY(-70px)}}
.rot{height:1.3em;transition:none}
.rot__w{top:.08em}
.trustx__t{flex:0 1 auto;width:max-content;max-width:100%}
/* her request: each laptop in the reel is a real 3D body (the picture extruded in depth, see main.js) */
.lap3d{position:relative;display:block;width:100%;height:100%;transform-style:preserve-3d}
.lap3d img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;backface-visibility:visible}
.lap3d__front{filter:none}
.boards__t img.lap3d__layer{filter:none}
.boards__t .lap3d__front{filter:drop-shadow(0 26px 30px rgba(36,42,48,.10))}
/* her request: the "היום / אחרי" switch on the side of the visual, where it is seen */
@media (min-width:900px){
  .tg{grid-template-areas:"sw tabs" "vis switch-gap" "vis stage";grid-template-areas:"sw tabs" "vis stage";grid-template-rows:auto 1fr}
  .tg__switch{grid-area:sw;justify-self:center;align-self:end}
}
.tg__opt{min-height:56px;min-width:9.5rem;font-size:var(--fs-h3)}
@media (max-width:899px){.tg__opt{min-height:48px;min-width:7rem;font-size:var(--fs-body)}}
/* the cart opens with its pick marked */
.picks__note{grid-column:1/-1;margin:.6rem 0 0;font-size:var(--fs-body);line-height:1.3;color:var(--fuchsia)}
/* her request: the stamp as her sticker — the brush M of the logo in the middle, "14 שנה" set round it, right to left */
.stamp{background:var(--ink);border:6px solid var(--white);box-shadow:0 18px 36px rgba(36,42,48,.16)}
.stamp__ring{position:absolute;inset:0;width:100%;height:100%;overflow:visible;transform-origin:50% 50%}
.stamp__txt{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:15px;fill:var(--white);letter-spacing:.02em}
.stamp__ic{width:56%;filter:none!important;translate:0 4%}
.stamp__txt textPath,.stamp__txt{direction:ltr;unicode-bidi:bidi-override}
/* her request: the takes section stays fuchsia the whole time — "today → after" changes only the type, from the site's ink to white */
.pains,.pains.is-after{background:var(--fuchsia)!important}
.pains .tg__q,.pains .tg__now{color:var(--ink)}
.pains .tg__now{opacity:1}
.pains.is-after .tg__q,.pains.is-after .tg__then{color:var(--white)}
.pains.is-after .tg__now{opacity:0}
.pains .tg__tab{color:rgba(36,42,48,.6)}
.pains .tg__tab[aria-selected="true"]{color:var(--ink)}
.pains .tg__tab::after{background:rgba(36,42,48,.2)}
.pains .tg__tab::before{background:var(--ink)}
.pains.is-after .tg__tab{color:rgba(255,255,255,.7)}
.pains.is-after .tg__tab[aria-selected="true"]{color:var(--white)}
.pains.is-after .tg__tab::after{background:rgba(255,255,255,.3)}
.pains.is-after .tg__tab::before{background:var(--white)}
.pains>.btn{background:var(--ink);color:var(--white)}
/* her request: "היום / אחרי" unmistakable — a large switch on the visual's side, the knob in ink then white, and a line under it */
.pains .tg__switch{position:relative;padding:6px;background:rgba(255,255,255,.16);box-shadow:inset 0 0 0 2px rgba(255,255,255,.75);margin-bottom:2.2rem}
.pains .tg__opt{min-height:64px;min-width:11rem;font-size:var(--fs-h3);color:var(--white)}
.pains .tg__opt[aria-pressed="true"]{color:var(--white)}
.pains.is-after .tg__opt[aria-pressed="true"]{color:var(--fuchsia)}
.pains .tg__knob{top:6px;bottom:6px;inset-inline-start:6px;width:calc(50% - 6px);background:var(--ink);box-shadow:0 8px 16px rgba(36,42,48,.18)}
.pains.is-after .tg__knob{background:var(--white)}
.pains .tg__switch::after{content:"גללו כדי לראות מה קורה אחרי ↓";position:absolute;top:calc(100% + .6rem);inset-inline:0;text-align:center;white-space:nowrap;font-size:var(--fs-body);color:var(--ink)}
.pains.is-after .tg__switch::after{content:"ככה זה נראה אחרי ✓";color:var(--white)}
@media (max-width:899px){.pains .tg__opt{min-height:52px;min-width:8rem;font-size:var(--fs-body)}.pains .tg__switch{margin-bottom:2rem}}
.pains .tg__switch{z-index:3;margin-bottom:3rem}
/* her request: the CTA lines up with the takes' words */
.pains .tg__cta{background:var(--ink);color:var(--white);justify-self:center}
@media (min-width:900px){
  .tg{grid-template-areas:"sw tabs" "vis stage" "vis cta";grid-template-rows:auto 1fr auto}
  .pains .tg__cta{grid-area:cta;justify-self:start}
}
.motion .hello{height:260svh}
@media (min-width:900px){.pains .tgv{margin-top:2.5rem}}
/* her request: the reel's laptops as real 3D models (three.js canvas over the buttons) */
.reel3d{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:30}
.boards.is-3d .lap3d{visibility:hidden}
.boards.is-3d .boards__t{background:none}
.reel3d{z-index:0}
/* her request (round 4): the takes on the site's grey, and clearer — both lines are on screen as two labelled cards,
   "היום" and "אחרי"; the scroll lights one and dims the other, the switch and the visual follow */
.pains,.pains.is-after{background:var(--studio)!important}
.pains .tg__q,.pains.is-after .tg__q{color:var(--ink)}
.pains .tg__take{grid-template-rows:auto auto auto;gap:var(--s1)}
.pains .tg__now,.pains .tg__then,.pains.is-after .tg__now,.pains.is-after .tg__then{grid-area:auto!important;position:relative;display:block;width:100%;max-width:44ch;margin:0;padding:2.3rem 1.2rem 1rem;border-radius:var(--r-card);background:var(--white);color:var(--ink);font-family:var(--f-body);font-weight:var(--w-reg);font-size:var(--fs-body);line-height:1.35;translate:none!important;filter:none!important;opacity:1;box-shadow:0 8px 16px rgba(36,42,48,.06);transition:opacity .5s var(--ease),box-shadow .5s var(--ease),scale .5s var(--ease)}
.pains .tg__now::before,.pains .tg__then::before{position:absolute;top:.8rem;inset-inline-start:1.2rem;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);line-height:1}
.pains .tg__now::before{content:"היום";color:var(--muted)}
.pains .tg__then::before{content:"אחרי";color:var(--fuchsia)}
.pains:not(.is-after) .tg__then{opacity:.38;box-shadow:none}
.pains.is-after .tg__now{opacity:.38;box-shadow:none}
.pains:not(.is-after) .tg__now{box-shadow:inset 0 0 0 2px var(--ink),0 10px 20px rgba(36,42,48,.08)}
.pains.is-after .tg__then{box-shadow:inset 0 0 0 2px var(--fuchsia),0 10px 20px rgba(236,11,140,.12)}
.pains .tg__tab,.pains.is-after .tg__tab{color:rgba(36,42,48,.55)}
.pains .tg__tab[aria-selected="true"],.pains.is-after .tg__tab[aria-selected="true"]{color:var(--ink)}
.pains .tg__tab::after,.pains.is-after .tg__tab::after{background:rgba(36,42,48,.16)}
.pains .tg__tab::before,.pains.is-after .tg__tab::before{background:var(--fuchsia)}
.pains .tg__switch{background:var(--white);box-shadow:0 8px 16px rgba(36,42,48,.08)}
.pains .tg__opt,.pains.is-after .tg__opt{color:var(--ink)}
.pains .tg__opt[aria-pressed="true"],.pains.is-after .tg__opt[aria-pressed="true"]{color:var(--white)}
.pains .tg__knob{background:var(--ink)}
.pains.is-after .tg__knob{background:var(--fuchsia)}
.pains .tg__switch::after{color:var(--muted)}
.pains.is-after .tg__switch::after{color:var(--fuchsia)}
.pains .tg__cta{background:var(--fuchsia)}
@media (min-width:900px){.pains .tg__q{max-width:20ch;font-size:clamp(1.9rem,1rem + 2.6vw,3.6rem)}}
/* her request: the hero is alive — a studio light that trails the pointer, depth on the pointer, a butterfly that stays */
.open__light{position:absolute;z-index:-1;left:0;top:0;width:min(70vmax,1100px);aspect-ratio:1;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(236,11,140,.13) 0%,rgba(236,11,140,.07) 30%,rgba(236,11,140,.02) 52%,transparent 70%);will-change:transform,opacity} /* a soft fuchsia stage light: it never washes out the white headline */
.open__fly{position:absolute!important;z-index:4;left:0;top:0;width:clamp(34px,2.6vw,48px);height:auto;pointer-events:none;filter:drop-shadow(0 6px 8px rgba(36,42,48,.18));transform-origin:50% 50%}

/* ===================================================================================================================
   MOBILE ADAPTATION (her request, after the Styliner course: mobile is a re-spec, not a scale-down).
   Everything below lives inside (max-width:820px) — desktop is untouched.
   Course rules applied: touch targets ≥ 1×1 cm (44px) · body 15–18px in px · line-height 1 headings / 1.3 body ·
   keep each section's title in view · swipe cue (neighbours peek at the edges) · no empty floors · logo + menu + an
   always-there CTA (WhatsApp corner) · contrast by a scrim, never outlines · nothing hidden under the floating buttons.
   =================================================================================================================== */
@media (max-width:820px){
  /* header: tap targets */
  .hdr__logo,.hdr.on-dark .hdr__logo{min-height:44px;display:flex;align-items:center}
  .hdr__lang a,.hdr__lang button{min-width:40px;justify-content:center}
  /* the drum (second screen): short lines set by the script, one size that fits a phone */
  .hello__drum .tr{font-size:26px;line-height:1}
  .motion .hello{height:360svh}
  /* the statement: no empty floor above it */
  .say,.motion .say{min-height:0;padding-block:clamp(4.5rem,12svh,6rem)}
  /* projects reel: the title, the laptop and its name in one screen, no gap between them */
  .motion .boards.is-reel .boards__stage{grid-template-rows:auto auto minmax(0,50svh) auto;align-content:center;gap:.75rem;padding-top:clamp(4.5rem,10svh,5.5rem)}
  /* the takes: everything of one take in one screen, from its top */
  .pains .tg__switch::after{display:none}
  .pains .tg__switch{margin-bottom:0}
  .pains .tg__opt{min-height:44px;min-width:6.5rem;font-size:16px}
  .pains .tg__q{font-size:26px;line-height:1.05;max-width:none}
  .pains .tg__now,.pains .tg__then,.pains.is-after .tg__now,.pains.is-after .tg__then{padding:1.85rem .9rem .75rem;font-size:16px;line-height:1.3;max-width:none}
  .pains .tg__now::before,.pains .tg__then::before{top:.6rem;inset-inline-start:.9rem;font-size:16px}
  .motion .pains .tgv{height:170px}
  .motion .pains .tgv__s>*{transform:scale(.78)}
  .motion .pains{padding-block:clamp(4.2rem,9svh,5rem) 1.25rem}
  .pains .tg__cta{min-height:48px}
  /* footer: a scrim under the words (the butterflies stay behind it), wrapped legal links, and room for the floating buttons */
  .contact__bg::after{content:"";position:absolute;inset:0;background:linear-gradient(to bottom,rgba(36,42,48,.55),rgba(36,42,48,.78))}
  .fgrid__brand p{color:var(--ivory)}
  .foot nav{display:flex;flex-wrap:wrap;gap:.25rem 1rem}
  .foot nav a{display:inline-flex;align-items:center;min-height:44px}
  .contact{padding-bottom:calc(var(--s2) + 76px + env(safe-area-inset-bottom))}
}
.foot__ck{display:none}
/* MOBILE, round 2 — her verdict: "messy". Calm it down to the course's mobile rules: only logo + menu + one CTA (WhatsApp)
   float; one gutter (20px) and one vertical rhythm for every section; legible type on the plain grey; nothing on a face. */
@media (max-width:820px){
  :root{--gx:20px}
  /* only the brand's floating trio stays: logo + menu (the header) and WhatsApp; accessibility keeps its corner */
  .drift,#cookieBtn,.open__fly{display:none!important}
  .rail .soc:not([data-soc="whatsapp"]){display:none!important}
  .foot__ck{display:inline-flex;align-items:center;min-height:44px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer}
  .cookie.a11y{left:14px;bottom:calc(16px + env(safe-area-inset-bottom));width:48px}
  /* hero: the headline in ink (white on the light grey could not be read), her line above her photo instead of on her face */
  .open__h .tr:not(.acc){color:var(--ink)}
  .open__me{display:flex;flex-direction:column;align-items:center}
  .open__note,.open__pic .open__note{position:static!important;order:-1;inset:auto!important;left:auto!important;top:auto!important;max-width:30ch!important;width:auto;margin:0 auto .75rem;text-align:center;justify-content:center;font-size:16px;line-height:1.3;color:var(--ink)}
  .open__note .note__arrow{display:none}
  .open__cta{width:100%}
  /* one rhythm: every section opens the same way — label, then its headline, the same space above and below */
  .sec__head{margin-bottom:24px}
  .label{font-size:15px}
}
@media (max-width:820px){
  /* one alignment for every section head on a phone: centred, like the rest of the page */
  .sec__head{grid-template-columns:1fr;justify-items:center;text-align:center}
  .sec__head .stk{display:none}
  .how__lead{margin-inline:auto;text-align:center}
  /* "מה אני בונה": the card right under its headline */
  .paper__flex,.paper__flex.flex-carousel{height:min(68svh,600px);margin-top:0}
  .paper__h{margin-bottom:8px}
}
/* her request (phone only): the second screen's words as one paragraph — close lines, not spread round a drum */
@media (max-width:820px){
  .motion .hello{height:200svh}
  .hello.is-para .hello__cyl{-webkit-mask-image:none;mask-image:none;perspective:none;display:grid;align-items:center;min-height:0}
  .hello.is-para .hello__drum{position:static;transform:none!important;text-align:center;text-wrap:pretty;max-width:none;margin-inline:auto;padding-inline:4px}
  .hello.is-para .hello__drum .tr{position:static;display:inline;transform:none!important;white-space:normal;font-size:24px;line-height:1.2}
  .hello.is-para .hello__drum .tr::after{content:" "}
}
@media (max-width:820px){.hello.is-para .hello__stage{grid-template-rows:1fr;align-content:center;align-items:center}.hello.is-para .hello__cyl{flex:none;align-self:center}.hello.is-para .hello__foot{display:none}}

/* her request: the butterfly flies along the whole site on desktop — fixed over the page, under the header and the product page */
.site-fly{position:fixed!important;z-index:45}
html.is-sheet .site-fly{opacity:0!important}

/* ===== projects (04.11, her request): React Bits CircularGallery replaces the 3D laptops — component CSS + site placement ===== */
.circular-gallery{position:relative;width:100%;height:100%;overflow:hidden;touch-action:pan-y;user-select:none;-webkit-user-select:none;cursor:grab}
.circular-gallery[data-pointer]{cursor:pointer}
.circular-gallery[data-dragging]{cursor:grabbing}
.circular-gallery-canvas{position:absolute;inset:0;display:block;width:100%;height:100%}
.circular-gallery-labels{position:absolute;inset:0;pointer-events:none}
.circular-gallery-label{position:absolute;top:0;left:0;line-height:1.2;white-space:nowrap;will-change:transform,opacity}
.circular-gallery-caption{position:absolute;top:0;left:50%;width:min(90%,36rem);text-align:center;opacity:0;pointer-events:none}
.cg{width:100%;height:clamp(380px,64svh,660px)}
.boards.is-cg .boards__field{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap} /* the tiles stay as buttons for keyboard and screen readers */
.boards.is-cg .boards__stage{padding-bottom:var(--s1)}
@media (max-width:820px){.cg{height:clamp(300px,52svh,460px)}}

/* ===== her request (04.11): the 3D laptop above "מה אני בונה" ===== */
.lap3{position:relative;width:min(100%,1100px);height:clamp(320px,56svh,660px);margin:0 auto .5rem}
.lap3__img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;transition:opacity .6s var(--ease)}
.lap3.is-3d .lap3__img{opacity:0}
.lap3__cv{position:absolute;inset:0;width:100%;height:100%;display:block}
@media (max-width:820px){.lap3{height:clamp(190px,30svh,280px)}}

/* ===== her request (04.11): "עם מי עבדתי" as React Bits CurvedLoop — component CSS + site placement ===== */
.curved{width:100%;visibility:hidden;cursor:grab;touch-action:pan-y;padding-block:var(--s1) calc(var(--s1) + 10vw)} /* the arc dips below its box */
.curved.is-drag{cursor:grabbing}
.curved-loop-svg{width:100%;aspect-ratio:100/12;overflow:visible;display:block;fill:currentColor;user-select:none;-webkit-user-select:none;line-height:1}
.curved-loop-text{font-family:var(--f-display);unicode-bidi:bidi-override;direction:ltr}
.clients.is-loop .logos{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}

/* ===== projects (04.11, her request): React Bits ChromaGrid replaces the Circular Gallery — component CSS (light theme) + site placement ===== */
.chroma-grid{--chroma-x:-9999px;--chroma-y:-9999px;--chroma-power:0;position:relative;width:min(100%,1180px);margin-inline:auto;box-sizing:border-box;-webkit-tap-highlight-color:transparent}
.chroma-grid-inner{display:grid;gap:var(--chroma-gap);grid-template-columns:repeat(auto-fill,minmax(min(100%,max(var(--chroma-min),calc((100% - (var(--chroma-cols) - 1) * var(--chroma-gap)) / var(--chroma-cols)))),1fr))}
.chroma-card{position:relative;display:flex;flex-direction:column;gap:10px;min-width:0;padding:8px;box-sizing:border-box;border:0;border-radius:var(--chroma-radius);background:var(--chroma-tile);box-shadow:var(--chroma-tile-shadow);color:var(--chroma-ink);text-align:start;font:inherit;cursor:pointer;overflow:hidden;isolation:isolate;transition:filter .25s ease}
.chroma-card:hover{filter:var(--chroma-hover)}
.chroma-card:active{filter:var(--chroma-press)}
.chroma-card:focus-visible{outline:3px solid var(--fuchsia);outline-offset:3px}
.chroma-wash,.chroma-color,.chroma-card-glow{-webkit-mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox,0px)) calc(var(--chroma-y) - var(--chroma-oy,0px)),var(--chroma-stops));mask-image:radial-gradient(circle var(--chroma-r) at calc(var(--chroma-x) - var(--chroma-ox,0px)) calc(var(--chroma-y) - var(--chroma-oy,0px)),var(--chroma-stops))}
.chroma-wash{position:absolute;inset:0;z-index:0;pointer-events:none;background:radial-gradient(130% 70% at 50% 100%,var(--chroma-accent),transparent 72%);opacity:calc(var(--chroma-glow) * var(--chroma-power) * .45)}
.chroma-media{position:relative;z-index:1;display:block;aspect-ratio:var(--chroma-ratio);border-radius:max(0px,calc(var(--chroma-radius) - 8px));overflow:hidden;background:var(--chroma-well)}
.chroma-media img{position:absolute;inset:0;display:block;width:100%;height:100%;object-fit:cover;object-position:50% 0;user-select:none;-webkit-user-drag:none}
.chroma-mono{filter:grayscale(var(--chroma-gray)) brightness(calc(1 - var(--chroma-dim)))}
.chroma-color{opacity:var(--chroma-power)}
.chroma-media-rim{position:absolute;inset:0;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--chroma-media-edge);pointer-events:none}
.chroma-badge{position:absolute;z-index:2;top:.6rem;inset-inline-start:.6rem;padding:.2rem .7rem;border-radius:999px;background:var(--fuchsia);color:var(--white);font-size:var(--fs-label);line-height:1.3}
.chroma-info{position:relative;z-index:1;display:flex;flex-direction:column;gap:2px;min-width:0;padding:4px 8px 6px}
.chroma-title{overflow:hidden;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);line-height:1.3;text-overflow:ellipsis;white-space:nowrap}
.chroma-subtitle{overflow:hidden;font-size:var(--fs-label);line-height:1.35;color:var(--chroma-muted);text-overflow:ellipsis;white-space:nowrap}
.chroma-card-rim,.chroma-card-glow{position:absolute;inset:0;z-index:2;border-radius:inherit;pointer-events:none}
.chroma-card-rim{box-shadow:inset 0 0 0 1px var(--chroma-tile-edge),inset 0 1px 0 var(--chroma-tile-highlight)}
.chroma-card-glow{box-shadow:inset 0 0 0 1px var(--chroma-accent),inset 0 0 16px -8px var(--chroma-accent);opacity:calc(var(--chroma-border) * var(--chroma-power))}
.chroma-grid.is-touch{--chroma-gray:0;--chroma-dim:0} /* a touch screen has no spotlight to follow: the pictures stay in colour */

@media (max-width:820px){.chroma-grid{--chroma-min:220px}}

/* ===== her request (04.11) ===== */
/* the companion butterfly is a wrapper now (flight, depth, bank) with the picture inside (wingbeats, bob) */
.site-fly{width:clamp(38px,2.9vw,54px)}
.site-fly img{display:block;width:100%;height:auto;transform-origin:50% 50%}
/* clients: a quiet strip — black-and-white logos in one row, thin lines between, no tiles */
.clients .logos{gap:0;border-block:1px solid var(--line)}
.clients .logos li{aspect-ratio:auto;min-height:clamp(120px,11vw,170px);padding:var(--s1);border-radius:0;background:none}
.clients .logos li+li{border-inline-start:1px solid var(--line)}
.clients .logos li:hover{background:none}
.clients .logos img,.clients .logos__txt{opacity:.55;transition:opacity .6s var(--ease)} /* quiet; the reveal animates the tile, so the dimming sits on the logo */
.clients .logos li:hover img,.clients .logos li:hover .logos__txt{opacity:1}
.clients .logos li::before{display:none}
.clients .logos .label{display:none}
.clients .logos img{filter:grayscale(1) brightness(0)}
.clients .logos__txt{font-size:var(--fs-body);letter-spacing:0}
@media (max-width:820px){.clients .logos{grid-template-columns:repeat(2,minmax(0,1fr))}.clients .logos li:nth-child(3){border-inline-start:0}.clients .logos li:nth-child(n+3){border-top:1px solid var(--line)}}
/* desktop: the social icons on the left, lined up with the end of the header; the accessibility and cookie buttons on the same line */
@media (min-width:821px){
  .rail{right:auto;left:clamp(1rem,2.75vw,3.5rem)}
  .rail .soc{place-items:center start}
  .cookie,.cookie.a11y{left:clamp(1rem,2.75vw,3.5rem)}
}

/* ===== her request (04.11): the clients strip — calm, compact and moving ===== */
.clients.has-strip .logos{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.lstrip{position:relative;overflow:hidden;padding-block:clamp(.75rem,1.4vw,1.25rem);border-block:1px solid var(--line);-webkit-mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent);mask-image:linear-gradient(90deg,transparent,#000 12%,#000 88%,transparent)}
.lstrip__track{display:flex;align-items:center;width:max-content;animation:lstrip 38s linear infinite}
.lstrip:hover .lstrip__track{animation-play-state:paused}
.lstrip__i{display:grid;place-items:center;height:clamp(34px,3.2vw,48px);padding-inline:clamp(1.5rem,3vw,3rem)}
.lstrip__i img{height:100%;width:auto;max-width:160px;object-fit:contain;filter:grayscale(1) brightness(0);opacity:.55;transition:opacity .5s var(--ease)}
.lstrip__i:hover img{opacity:1}
.lstrip__t{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);color:var(--ink);opacity:.55;white-space:nowrap}
.lstrip__dot{flex:none;width:5px;height:5px;border-radius:50%;background:var(--fuchsia);opacity:.7}
@keyframes lstrip{to{transform:translateX(50%)}}
@media (prefers-reduced-motion:reduce){.lstrip__track{animation:none}}
.clients.has-strip{padding-block:clamp(2.5rem,5vw,4.5rem);min-height:0}

/* (04.11) her request: no white frame around the M stamp */
.stamp{border:0}

/* ===== her request (04.11): examples of her work inside every product page of "מה אני בונה" ===== */
.psheet__exw[hidden]{display:none}
.psheet__ex{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:.75rem;margin-top:.6rem}
.psheet__exi{display:grid;gap:.45rem;padding:6px;border:0;border-radius:16px;background:var(--ivory);text-align:start;font:inherit;color:var(--ink);cursor:pointer;transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.psheet__exi img{width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:11px;display:block}
.psheet__exi span{display:grid;padding:0 .3rem .25rem}
.psheet__exi b{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);line-height:1.2}
.psheet__exi small{font-size:var(--fs-label);color:var(--muted)}
.psheet__exi:hover,.psheet__exi:focus-visible{transform:translateY(-3px);box-shadow:0 12px 24px rgba(36,42,48,.12)}
.psheet__exi:focus-visible{outline:3px solid var(--fuchsia);outline-offset:3px}

/* (04.11) the strip again, after "it looks awful": soft white cards drifting slowly, one logo each — grey until the pointer finds it, then in colour */
.lstrip{border-block:0;padding-block:14px 22px}
.lstrip__track{gap:14px;padding-inline:7px;animation-duration:44s}
.lstrip__i{flex:none;width:clamp(170px,14vw,220px);height:clamp(72px,6vw,92px);padding:0 1.4rem;border-radius:18px;background:var(--white);box-shadow:0 8px 18px rgba(36,42,48,.06);transition:transform .5s var(--ease),box-shadow .5s var(--ease)}
.lstrip__i img{height:48%;max-width:100%;filter:grayscale(1) brightness(0);opacity:.78}
.lstrip__i:hover{transform:translateY(-3px);box-shadow:0 14px 26px rgba(36,42,48,.1)}
.lstrip__i:hover img{filter:none;opacity:1}
.lstrip__t{font-size:var(--fs-body);opacity:1;color:var(--ink)}
.lstrip__i.lstrip__t:hover{color:var(--ink)}
.lstrip__dot{display:none}

/* (04.11) the ChromaGrid now lives in the page: its settings as defaults here (light theme, 3 columns, gap 18, radius 300, 16:10) */
.chroma-grid{--chroma-frame:rgba(240,240,243,.8);--chroma-tile:linear-gradient(180deg,#ffffff 0%,#f6f6f8 100%);--chroma-tile-edge:rgba(24,24,27,.08);--chroma-tile-highlight:#fff;--chroma-tile-shadow:0 4px 10px -5px rgba(24,24,27,.25);--chroma-media-edge:rgba(24,24,27,.06);--chroma-well:rgba(24,24,27,.05);--chroma-ink:#242a30;--chroma-muted:#66626A;--chroma-hover:brightness(.97);--chroma-press:brightness(.92);
  --chroma-cols:3;--chroma-min:260px;--chroma-gap:18px;--chroma-r:300px;--chroma-gray:1;--chroma-dim:.12;--chroma-glow:.5;--chroma-border:1;--chroma-fade:.6s;--chroma-ratio:16 / 10;--chroma-radius:22px;--chroma-accent:#EC0B8C;
  --chroma-stops:rgba(0, 0, 0, 1.000) 0.0%, rgba(0, 0, 0, 1.000) 8.3%, rgba(0, 0, 0, 1.000) 16.7%, rgba(0, 0, 0, 1.000) 25.0%, rgba(0, 0, 0, 1.000) 33.3%, rgba(0, 0, 0, 1.000) 41.7%, rgba(0, 0, 0, 0.965) 50.0%, rgba(0, 0, 0, 0.829) 58.3%, rgba(0, 0, 0, 0.603) 66.7%, rgba(0, 0, 0, 0.347) 75.0%, rgba(0, 0, 0, 0.135) 83.3%, rgba(0, 0, 0, 0.022) 91.7%, rgba(0, 0, 0, 0.000) 100.0%}
.chroma-card{--chroma-accent:#EC0B8C}
@media (hover:none){.chroma-grid{--chroma-gray:0;--chroma-dim:0}} /* touch: no spotlight to follow, the pictures stay in colour */

/* (04.11) her request: the 3D model looked bad — the laptop is her polished picture, floating gently, a touch smaller */
.lap3{height:clamp(260px,46svh,520px)}
.lap3__img{filter:drop-shadow(0 30px 34px rgba(36,42,48,.12));animation:lapFloat 6s ease-in-out infinite} /* the picture, until (or unless) the 3D model is ready */
@keyframes lapFloat{0%,100%{transform:translateY(0) rotate(-.6deg)}50%{transform:translateY(-14px) rotate(.6deg)}}
@media (prefers-reduced-motion:reduce){.lap3__img{animation:none}}
/* (04.11) her request: no pink halo around the cursor */
.open__light{display:none!important}
.cur-ring[data-mode="text"],.cur-ring[data-mode="link"]{background:transparent!important}

/* ===== her request (04.11): the product page of "מה אני בונה" — the picture keeps to its column (it overran the text) ===== */
.psheet__media{aspect-ratio:auto!important;min-width:0;min-height:0;height:100%}
.psheet__info{align-content:start;min-width:0}
.psheet__lead{margin-top:-.25rem}
.psheet__ex{grid-template-columns:1fr}
.psheet__exi{grid-template-columns:120px minmax(0,1fr);align-items:center;gap:.9rem;padding:8px}
.psheet__exi img{aspect-ratio:16/10}
.psheet__exi span{padding:0}
@media (max-width:760px){.psheet__media{height:auto;aspect-ratio:16/10!important}}

/* ===== her request (04.11): the project window as a case file from the set ===== */
.case{width:min(1180px,calc(100vw - 2 * var(--gx)));background:var(--white)}
.case__body.cs{display:block;padding:0}
.cs__slate{position:relative;display:grid;gap:.6rem;padding:calc(22px + clamp(1.75rem,3vw,2.75rem)) clamp(1.5rem,4vw,3.5rem) clamp(1.75rem,3vw,2.75rem);background:var(--ink);color:var(--white)}
.cs__clap{position:absolute;inset:0 0 auto;height:22px;background:repeating-linear-gradient(-45deg,var(--white) 0 18px,var(--ink) 18px 36px)}
.cs__slate .label{color:var(--fuchsia)}
.cs__t{margin:0;color:var(--white)}
.cs__line{margin:0;font-size:var(--fs-h3);line-height:1.25;color:rgba(244,244,244,.75)}
.cs__grid{display:grid;grid-template-columns:minmax(0,1.25fr) minmax(0,1fr);gap:clamp(1.5rem,3vw,3rem);padding:clamp(1.5rem,4vw,3.5rem)}
.cs__stage{margin:0;display:grid;place-items:center;padding:clamp(1rem,2.5vw,2rem);border-radius:calc(var(--r-card) - 4px);background:radial-gradient(120% 90% at 50% 0%,#fff 0%,var(--studio) 70%)}
.cs__win{width:100%;border-radius:14px;overflow:hidden;background:var(--white);box-shadow:0 24px 48px rgba(36,42,48,.16)}
.cs__bar{display:flex;gap:6px;padding:10px 12px;background:#f1f1f3;border-bottom:1px solid var(--line);direction:ltr}
.cs__bar i{width:10px;height:10px;border-radius:50%;background:#d6d4da}
.cs__bar i:first-child{background:var(--fuchsia)}
.cs__shot{aspect-ratio:16/10;overflow:hidden}
.cs__shot img{width:100%;height:100%;object-fit:cover;object-position:50% 0;display:block;transition:transform 6s var(--ease)}
.cs__stage:hover .cs__shot img{transform:scale(1.04)}
.cs__takes{list-style:none;margin:0;padding:0;display:grid;align-content:center;gap:0}
.cs__takes li{display:grid;grid-template-columns:auto minmax(0,1fr);gap:1.1rem;padding-block:1.1rem;border-bottom:1px solid var(--line)}
.cs__takes li:first-child{border-top:1px solid var(--line)}
.cs__n{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1;color:var(--fuchsia)}
.cs__takes .label{margin:0 0 .35rem;color:var(--muted)}
.cs__takes p:not(.label){margin:0;font-size:var(--fs-body);line-height:1.4;color:var(--ink)}
.cs__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.75rem;padding:0 clamp(1.5rem,4vw,3.5rem) clamp(1.5rem,4vw,3rem)}
.cs__foot .case__live{margin:0}
.cs__next{margin-inline-start:auto;display:inline-flex;align-items:center;gap:.5rem;min-height:48px;padding:.4rem .2rem;border:0;background:none;color:var(--muted);font:inherit;cursor:pointer;transition:color .4s var(--ease)}
.cs__next b{color:var(--ink);font-family:var(--f-display);font-weight:var(--w-heavy)}
.cs__next:hover,.cs__next:hover b{color:var(--fuchsia)}
.case__x{position:absolute;top:calc(22px + .9rem);inset-inline-end:.9rem;float:none;margin:0}
@media (max-width:820px){.cs__grid{grid-template-columns:1fr}.cs__next{margin-inline-start:0}}

/* (04.11) section entrances: headline words move as units */
.rw{display:inline-block}

/* (04.11) her request: the hero buttons sit close under the headline (the headline row was stretched and the buttons pinned to the bottom) */
.open__copy{grid-template-rows:auto auto!important;align-content:start;row-gap:clamp(1rem,1.6vw,1.5rem)!important}
.open__cta{align-self:start!important}

/* =====================================================================================================================
   AWARD PASS (04.11) — the site measured against her design skill and brought to it, without changing her choices:
   Hebrew rules, the 5-size scale, touch targets, text-on-image scrims, alignment, finishing details.
   ===================================================================================================================== */
/* Hebrew: no tracking on Hebrew display type (skill: typography §5) */
.hero__title,.hero__title .ln--giant,.say__text,.h2,.case__title,.ball__h,.doc h1,.open__h,.hello__txt,.world__q,.world__a,.tg__q,.stamp__txt{letter-spacing:0}
/* one scale everywhere: the takes quote was a sixth size (53px) → the section level */
@media (min-width:900px){.pains .tg__q{font-size:var(--fs-h2);max-width:18ch}}
/* no text below body size outside the phone mock-up (her rule 03.11) */
.chroma-subtitle,.chroma-badge,.step .label,.psheet__exi small{font-size:var(--fs-body)}
.chroma-badge{padding:.25rem .8rem}
/* touch targets ≥ 44px */
.hdr__logo{min-height:44px;display:flex;align-items:center}
.rail .soc{min-width:44px;min-height:44px}
/* footer: the contact lines sit on the butterfly photo → a scrim on their side (never outlines on text) */
@media (min-width:821px){.contact__bg .shade{background:linear-gradient(90deg,rgba(36,42,48,.82) 0%,rgba(36,42,48,.6) 40%,rgba(36,42,48,.25) 75%,rgba(36,42,48,.2) 100%),linear-gradient(180deg,rgba(36,42,48,.25),rgba(36,42,48,.35) 55%,rgba(36,42,48,.8))}
  .contact .foot{padding-inline-end:calc(clamp(44px,2.9vw,58px) + clamp(1rem,2.75vw,3.5rem))} /* clear of the accessibility + cookie buttons */}
/* alignment: the clients heading follows the projects heading right above it (centred), no near-miss */
@media (min-width:821px){.clients .sec__head{grid-template-columns:1fr;justify-items:center;text-align:center}}
/* finishing */
p,li,dd{text-wrap:pretty}
::selection{background:var(--fuchsia);color:var(--white)}
section[id],footer[id]{scroll-margin-top:clamp(5rem,4rem + 3vw,7.5rem)}
:focus-visible{outline:3px solid var(--fuchsia);outline-offset:3px;border-radius:6px}
/* phone: the same 5-level scale (36/30/22/17/14) — labels and small UI at body size, the takes quote at the sub-heading level */
@media (max-width:820px){.label,.note__t,.tg__now,.tg__then,.tg__opt,.js-clock{font-size:var(--fs-body)}.pains .tg__q{font-size:var(--fs-h3);line-height:1.15}}

/* =====================================================================================================================
   AWARD PASS 2 (04.11) — she allowed changing decisions for the goal:
   ===================================================================================================================== */
/* 1. hero headline in ink (white on the light floor read at ~1.2:1 — the one thing a jury and a visitor notice first) */
.open__h .tr:not(.acc){color:var(--ink)}
/* 3. the work is shown in colour from the start (mentor: "we need to sell" — work visible without hover); the spotlight keeps the glow and lift */
.chroma-grid{--chroma-gray:0;--chroma-dim:0}
.chroma-card{transition:filter .25s ease,transform .6s var(--ease),box-shadow .6s var(--ease)}
.chroma-card:hover{box-shadow:0 22px 40px -18px rgba(36,42,48,.28)}
.chroma-grid-inner{perspective:1200px}
/* 4. film grain on the dark worlds (skill: 5–8% noise on dark sections — the filmic finish) */
.hello,.how,.contact{position:relative;isolation:isolate}
.hello::after,.how::after,.contact::before{content:"";position:absolute;inset:0;z-index:5;pointer-events:none;opacity:.07;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
@media (prefers-reduced-motion:no-preference){.hello::after,.how::after,.contact::before{animation:grain 1.2s steps(4) infinite}}
@keyframes grain{25%{background-position:40px -30px}50%{background-position:-60px 20px}75%{background-position:20px 50px}}

/* ===== 02 · מה אני בונה — the studio row from the Premiere Edition (04.11) ===== */
.pbuild{position:relative;background:var(--studio);overflow:clip}
.pbuild__pin{min-height:100svh;display:grid;grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr auto;padding:6.5rem 0 2rem;gap:var(--s2)}
.pbuild__head{padding-inline:var(--gx);display:flex;flex-wrap:wrap;align-items:end;justify-content:space-between;gap:var(--s1) var(--s2)}
.pbuild__head>.label{flex-basis:100%}
.pbuild__h{font-weight:var(--w-heavy);letter-spacing:0}
.pbuild__track{display:flex;gap:clamp(1rem,2vw,2rem);padding-inline:var(--gx);will-change:transform}
.pprop{flex:0 0 min(78vw,980px);display:grid;grid-template-columns:minmax(0,.9fr) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:center;background:#E7E5EB;border-radius:var(--r-card);padding:clamp(1rem,2vw,2rem);min-height:min(64svh,620px)}
.pprop__media{border-radius:calc(var(--r-card) - 8px);overflow:hidden;aspect-ratio:4/5;max-height:58svh;background:#E7E5EB}
.pprop__media video{width:100%;height:100%;object-fit:cover}
.pprop__txt{display:grid;gap:var(--s1);align-content:center;max-width:30ch}
.pprop__n{font-family:var(--f-display);font-size:var(--fs-display);font-weight:var(--w-heavy);line-height:.8;color:var(--fuchsia)}
.pprop__t{font-family:var(--f-display);font-size:var(--fs-h2);font-weight:var(--w-heavy);line-height:1;margin:0}
.pprop__txt p{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:1.3}
.pbuild__bar{margin-inline:var(--gx);height:3px;background:rgba(36,42,48,.12);border-radius:3px;overflow:hidden}
.pbuild__bar i{display:block;height:100%;background:var(--fuchsia);transform-origin:right;transform:scaleX(0)}
html:not(.motion) .pbuild__track{flex-wrap:wrap}
@media (max-width:820px){
  .pbuild__pin{padding-top:var(--s3)}
  .pbuild__head{justify-content:center;text-align:center}
  .pbuild__track{flex-direction:column}
  .pprop{flex:none;grid-template-columns:1fr;min-height:0}
  .pprop__media{aspect-ratio:1;max-height:none}
  .pbuild__bar{display:none}
}
.pprop__n{justify-self:start;text-align:start}
/* her request (04.11): in the takes, the phone on the left and the words on the right */
@media (min-width:900px){
  .tg{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);grid-template-areas:"tabs ." "stage sw" "stage vis" "cta vis";grid-template-rows:auto auto 1fr auto}
  .pains .tgv{margin-top:0}
}

/* ===== 03 · projects (her request 04.11): wide cards one after another, service bookmarks beside each, then "more works" ===== */
.plist{display:grid;gap:clamp(2rem,4vw,3.5rem);width:min(100%,1200px);margin-top:var(--s2);padding-inline-end:clamp(9rem,13vw,12.5rem);text-align:start}
.plist.is-collapsed .is-more{display:none}
.pcard{position:relative}
.pcard__body{position:relative;z-index:1;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);align-items:center;gap:clamp(1.5rem,3.5vw,3.5rem);padding:clamp(.75rem,1.2vw,1rem);padding-inline-end:clamp(1.5rem,3vw,3rem);background:var(--white);border-radius:var(--r-card);box-shadow:0 14px 28px rgba(36,42,48,.10)}
.pcard__img{display:block;padding:0;border:0;background:var(--studio);cursor:pointer;border-radius:calc(var(--r-card) - 6px);overflow:hidden;aspect-ratio:16/10}
.pcard__img img{width:100%;height:100%;object-fit:cover;object-position:top;transition:transform 1.4s var(--ease)}
.pcard:hover .pcard__img img{transform:scale(1.04)}
.pcard__txt{display:grid;gap:var(--s1);justify-items:start;padding-block:var(--s1)}
.pcard__k{color:var(--muted)}
.pcard__t{margin:0;font-family:var(--f-display);font-size:var(--fs-h2);font-weight:var(--w-heavy);line-height:1;letter-spacing:0;text-wrap:balance}
.pcard__d{margin:0;color:var(--muted);font-size:var(--fs-body);line-height:1.3;max-width:34ch}
.pcard__btn{margin-top:var(--s1)}
/* the bookmarks: ribbons in her colours that come out from behind the card's edge, a swallowtail on the outer end */
.pcard__marks{position:absolute;z-index:0;top:clamp(1.25rem,2.5vw,2.25rem);left:0;transform:translateX(calc(-100% + 24px));display:grid;gap:.5rem;justify-items:start;margin:0;padding:0;list-style:none}
.pcard__marks li{font-family:var(--f-label);font-size:var(--fs-body);line-height:1;white-space:nowrap;padding:.7em 1.4em .7em 1.1em;padding-inline-start:calc(24px + .9em);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,14px 50%);background:var(--fuchsia);color:var(--white);transition:transform .8s var(--ease)}
.pcard__marks li:nth-child(4n+2){background:var(--ink)}
.pcard__marks li:nth-child(4n+3){background:var(--white);color:var(--ink)}
.pcard__marks li:nth-child(4n+4){background:#D9D7DD;color:var(--ink)}
.pcard:hover .pcard__marks li{transform:translateX(-10px)}
.pcard:hover .pcard__marks li:nth-child(2){transition-delay:.04s}.pcard:hover .pcard__marks li:nth-child(3){transition-delay:.08s}.pcard:hover .pcard__marks li:nth-child(4){transition-delay:.12s}.pcard:hover .pcard__marks li:nth-child(5){transition-delay:.16s}
.plist__more{margin-top:var(--s2);justify-self:center}
.plist__more[hidden]{display:none}
.btn--line{background:transparent!important;color:var(--ink)!important;border:1.5px solid var(--ink)!important;box-shadow:none!important}
.btn--line:hover{background:var(--ink)!important;color:var(--white)!important}
@media (max-width:820px){
  .plist{padding-inline-end:0;gap:var(--s3)}
  .pcard__body{grid-template-columns:1fr;padding:.75rem .75rem var(--s2);gap:var(--s1)}
  .pcard__txt{padding-inline:.5rem}
  .pcard__marks{position:relative;top:auto;left:auto;transform:none;display:flex;flex-wrap:wrap;gap:.4rem;margin:0 .75rem -.4rem}
  .pcard__marks li{padding:.6em 1em .9em;clip-path:polygon(0 0,100% 0,100% 100%,50% calc(100% - 8px),0 100%)}
  .pcard:hover .pcard__marks li{transform:none}
}

/* her request (04.11): hero — WhatsApp and phone as icons only */
.open__cta .btn--icon{width:48px;height:48px;min-height:48px;padding:0;justify-content:center;gap:0;border-radius:50%;flex:none}
.open__cta .btn--icon svg{width:22px;height:22px}
@media (max-width:820px){
  .open__cta{display:flex!important;flex-wrap:nowrap;align-items:center;gap:.6rem}
  .open__cta .btn:first-child{flex:1;width:auto}
  .open__cta .btn--icon{width:52px!important;height:52px;min-height:52px}
}

/* her request (04.11): the second section's paragraph as one centred block, lines set by hand */
.hello.is-para .hello__cyl{-webkit-mask-image:none;mask-image:none;perspective:none;display:grid;place-items:center;min-height:0;flex:none;align-self:center}
.hello.is-para .hello__drum{position:static;transform:none!important;display:grid;justify-items:center;gap:.15em;text-align:center;max-width:min(100%,44rem);margin-inline:auto;padding:0}
.hello.is-para .hello__drum .tr{position:static;display:block;transform:none!important;white-space:normal;text-wrap:balance;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.3;letter-spacing:0;color:var(--ivory)}
.hello.is-para .hello__drum .tr::after{content:none}
.hello.is-para .hello__drum .acc{color:var(--fuchsia)}
.hello.is-para .hello__stage{grid-template-rows:1fr;align-content:center;align-items:center}
.motion .hello.is-para{height:200svh}
@media (max-width:820px){.hello.is-para .hello__drum .tr{font-size:var(--fs-h3)}}

/* her request (04.11): the takes clear the header and keep a real bottom margin; the quote is capped by the screen height so every take fits */
@media (min-width:821px){
  html.motion .pains{padding-top:clamp(8.5rem,15svh,10rem)!important;padding-bottom:clamp(3rem,7svh,4.5rem)!important;align-content:center}
  html.motion .pains .tg{row-gap:clamp(.75rem,2svh,1.5rem)}
  .pains .tg__q{font-size:min(var(--fs-h2),5.8svh);line-height:1.08;max-width:17ch;text-wrap:balance}
  .pains .tgv{height:min(447px,50svh)}
}

/* her request (04.11): about text one to one with the Premiere Edition */
.about__text>.about__lede{font-family:var(--f-display);font-size:var(--fs-h3);font-weight:var(--w-reg);line-height:1.3;letter-spacing:0;color:var(--ink);max-width:34ch;margin:0}
.about__text #about-h{font-weight:var(--w-heavy);line-height:1;letter-spacing:0}
.about__facts{display:flex;flex-wrap:wrap;gap:var(--s2) var(--s3);margin:var(--s1) 0 0}
.about__facts dt{font-family:var(--f-display);font-size:var(--fs-h2);font-weight:var(--w-heavy);line-height:1;color:var(--fuchsia)}
.about__facts dd{margin:0;color:var(--muted);font-size:var(--fs-body)}
.about__clear{display:inline-block}
@media (min-width:821px){.hello.is-para .hello__drum{max-width:none}.hello.is-para .hello__drum .tr{white-space:nowrap}}
/* phone: each desktop line breaks once more, where the phrase ends; the hero icons sit on their own row under the main button */
@media (max-width:820px){
  .hello.is-para .hello__drum .ph{display:block;white-space:nowrap}
  .open__cta{flex-wrap:wrap!important}
  .open__cta .btn:first-child{flex:1 1 100%}
}
@media (max-width:820px){.hello.is-para .hello__drum .tr{font-size:min(var(--fs-h3),5vw);line-height:1.35}}

/* her request (04.11): the second section = a light heading + a quieter paragraph under it */
.hello.is-para .hello__drum{gap:clamp(1.25rem,3svh,2rem)}
.hello__h,.hello__p{margin:0;display:grid;justify-items:center;text-align:center}
.hello.is-para .hello__h .tr{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.05;color:var(--ivory)}
.hello.is-para .hello__h .acc{color:var(--fuchsia)}
.hello.is-para .hello__p .tr{font-family:var(--f-body);font-weight:var(--w-reg);font-size:var(--fs-h3);line-height:1.4;color:var(--muted-d)}
@media (max-width:820px){
  .hello.is-para .hello__h .tr{font-size:min(var(--fs-h2),8vw)}
  .hello.is-para .hello__p .tr{font-size:min(var(--fs-h3),5vw)}
}
/* her request (04.11): in the trust line, the 3D laptop instead of the stamp */
.trustx__lap{flex:none;width:clamp(240px,22vw + 60px,380px);height:clamp(200px,17vw + 50px,300px);margin:0}
@media (max-width:760px){.trustx__lap{width:min(80vw,320px);height:240px}}
.trustx__lap{width:clamp(300px,26vw + 60px,480px);height:clamp(190px,16vw + 40px,290px)}
@media (max-width:760px){.trustx__lap{width:min(92vw,380px);height:min(58vw,236px)}}

/* her request (05.11), phone only: the header keeps logo + "ספרו לי" + menu; the language moves to the top of the menu */
.menu__lang{display:none}
@media (max-width:820px){
  .hdr__lang,.hdr__soon:not(.menu__soon){display:none!important}
  .menu__lang{position:relative;z-index:1;display:flex;align-items:center;gap:var(--s1);font-size:var(--fs-body);color:var(--ivory)}
  .menu__lang>span.is-on,.menu__lang button,.menu__lang a{display:inline-flex;align-items:center;min-height:44px;padding-inline:1rem;border:1px solid var(--line-d);border-radius:999px;font:inherit;color:inherit}
  .menu__lang>span.is-on{border-color:var(--fuchsia);color:var(--fuchsia)}
  .menu__soon{position:static;box-shadow:none}
  .menu{grid-template-rows:auto auto auto 1fr}
}
/* her request (05.11), phone only: the hero headline and buttons centred; her photo rises behind the buttons */
@media (max-width:820px){
  .open__copy{justify-items:center;text-align:center;position:relative;z-index:2}
  .open__h,.open__cyl .tr{text-align:center}
  .open__cta{justify-content:space-between}  /* the two icons flank her face instead of covering it */
  .open__me{position:relative;z-index:1;margin-top:-170px}
  .open__pic .open__stk{top:40%!important}
  .open__note,.open__pic .open__note{order:1!important;margin:.75rem auto 0!important}
}

/* ===== her requests (05.11), phone only: sections 2–5 ===== */
@media (max-width:820px){
  /* 2 · the headline and the paragraph share one place: first the headline, then the paragraph in its stead */
  .motion .hello.is-para{height:300svh}
  .motion .hello.is-para .hello__drum{display:grid}
  .motion .hello.is-para .hello__h,.motion .hello.is-para .hello__p{grid-area:1/1;align-self:center}
  /* 3 · the props walk sideways */
  .motion .pbuild__pin{min-height:100svh;padding:5.5rem 0 1.5rem;gap:var(--s1);grid-template-rows:auto minmax(0,1fr) auto}
  .motion .pbuild__track{flex-direction:row;align-items:stretch}
  .motion .pprop{flex:0 0 80vw;grid-template-columns:1fr;grid-template-rows:auto 1fr;align-content:start;gap:var(--s1);padding:.75rem}
  .motion .pprop__media{aspect-ratio:auto;height:min(34svh,300px);max-height:none}
  .motion .pprop__n{font-size:var(--fs-h2);line-height:1}
  .motion .pprop__txt{gap:.5rem;padding:0 .25rem .25rem}
  .motion .pbuild__bar{display:block}
  /* 4 · the service tags stand at the side of each card, as bookmarks; the card keeps its title and its button only */
  .plist{padding-inline-end:7rem}
  .pcard__marks{position:absolute;top:1rem;left:0;margin:0;transform:translateX(calc(-100% + 12px));display:grid;gap:.4rem;justify-items:start}
  .pcard__marks li{padding:.6em .7em .6em .5em;padding-inline-start:calc(12px + .55em);clip-path:polygon(0 0,100% 0,100% 100%,0 100%,9px 50%);white-space:normal;max-width:calc(7rem + var(--gx) - 12px);line-height:1.15}
  .pcard__k,.pcard__d{display:none}
  .pcard__body{padding:.6rem .6rem var(--s1)}
  .pcard__txt{gap:.6rem}
  .pcard__btn{margin-top:0}
  /* takes · each take in two: first the "today" alone, then the "after" alone */
  .pains:not(.is-after) .tg__then,.pains.is-after .tg__now{display:none!important}
  .pains .tg__now,.pains.is-after .tg__then{animation:tgHalf .7s var(--ease) both}
  /* 5 · the headline + text first, then the steps with the phone in the same screen */
  .motion .how{display:grid;grid-template-columns:minmax(0,1fr);height:100svh;padding-top:4.5rem;padding-bottom:0;overflow:clip}
  .motion .how>.how__intro,.motion .how>.demo{grid-area:1/1;align-self:center}
  .motion .how>.demo{height:calc(100svh - 5rem)}
}
@keyframes tgHalf{from{opacity:0;translate:0 18px;filter:blur(6px)}to{opacity:1;translate:0 0;filter:none}}

/* ===== her requests (05.11, round 3) ===== */
/* the project tags: plain rectangles, no flag notch (every screen) */
.pcard__marks li{clip-path:none!important}
@media (max-width:820px){
  /* hero: the buttons on one row; her cut-out photo comes down and only just overlaps the buttons, in front of them;
     her line with the hand-drawn arrow sits at the right of the photo, beside her head */
  /* (05.11, round 4) the WhatsApp and phone buttons sit under the main button, one at each side, flanking her head */
  .open__cta{flex-wrap:wrap!important;justify-content:space-between;row-gap:.6rem}
  .open__cta .btn:first-child{flex:1 1 100%!important}
  .open__cta .btn--icon{flex:none}
  .open__me{z-index:3;margin-top:calc(-1 * var(--s2) - 58px)!important;margin-bottom:-4px!important;pointer-events:none}
  .open__pic .open__stk{top:46%!important;inset-inline:auto!important;left:-2%!important;right:auto!important}
  /* her line, much smaller, at the right of her head; the arrow comes out of the photo towards it */
  .open__note,.open__pic .open__note{position:absolute!important;z-index:2;top:calc(15% + 4px)!important;right:-.25rem!important;left:auto!important;bottom:auto!important;width:auto!important;max-width:none!important;margin:0!important;display:flex!important;flex-direction:column!important;align-items:flex-start;gap:.35rem;text-align:right;font-size:13px!important;line-height:1.3}
  .open__note .note__t{max-width:7.6rem;font-size:13px!important}
  .open__note .note__arrow{display:block!important;order:2;flex:none;width:54px;align-self:center;margin:0}
  /* her photo stands on the bottom of the hero, straight onto the dark section after it */
  .open{min-height:100svh!important;padding-bottom:0!important;align-content:end!important} /* (05.11, round 9) everything sits as low as the first screen allows */
  /* menu: the big number stands behind the item under the finger / pointer */
  .menu__big{top:var(--big-y,calc(var(--gx) + 4.5rem))!important;bottom:auto!important;translate:0 -50%;transition:top .6s var(--ease),opacity .6s var(--ease)}
  /* about: more air above it, and its two facts side by side */
  #about{padding-top:calc(var(--s3) * 2)}
  .about__facts{flex-wrap:nowrap;gap:var(--s2)}
  .about__facts>div{flex:1 1 0}
  /* the trust line on a dark floor, the 3D laptop larger */
  .trustx{background:var(--ink);padding-block:var(--s3)}
  .trustx__t,.trustx .rot__w{color:var(--ivory)}
  .trustx__lap{width:100%;height:min(74vw,300px)}
}
@media (max-width:820px){
  /* the takes: the "today / after" switch above the quote */
  .tg>*{order:3}
  .tg>.tg__tabs{order:1}
  .tg>.tg__switch{order:2;margin:0 auto!important}
}
@media (max-width:820px){
  /* (05.11, round 5) projects: centred cards, the screenshot fills the whole card, the title and the button sit on it over a soft
     shade; the service tags are rounded pills at the card's side that slide in as it arrives and out as it leaves */
  .plist{padding-inline:0!important;justify-items:center;width:100%}
  .pcard{width:min(100%,24rem)}
  .pcard__body{display:block!important;padding:0!important;aspect-ratio:4/5;overflow:hidden}
  .pcard__img{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto!important;border-radius:0!important}
  .pcard__img img{object-position:50% 0}
  .pcard__txt{position:absolute;inset:auto 0 0 0;z-index:1;padding:4.5rem 1rem 1rem!important;background:linear-gradient(to top,rgba(24,26,31,.92) 0%,rgba(24,26,31,.7) 45%,rgba(24,26,31,0) 100%);pointer-events:none;justify-items:start}
  .pcard__txt>*{pointer-events:auto}
  .pcard__t{color:var(--white);font-size:var(--fs-h3)}
  .pcard__marks{z-index:3;top:1rem!important;left:-.6rem!important;transform:none!important;gap:.35rem!important;justify-items:end!important}
  .pcard__marks li{border-radius:999px;padding:.5em 1em!important;white-space:nowrap!important;max-width:none!important;line-height:1.1;box-shadow:0 6px 14px rgba(24,26,31,.18)}
}
@media (max-width:820px){
  /* (05.11) the takes: "today" is a dark filled card, "after" a fuchsia filled card, both with white type */
  .pains .tg__now,.pains.is-after .tg__now{background:var(--ink)!important;color:var(--white)!important;box-shadow:0 10px 20px rgba(36,42,48,.18)!important;opacity:1}
  .pains .tg__now::before{color:rgba(255,255,255,.72)}
  .pains .tg__then,.pains.is-after .tg__then{background:var(--fuchsia)!important;color:var(--white)!important;box-shadow:0 10px 20px rgba(236,11,140,.25)!important;opacity:1}
  .pains .tg__then::before{color:rgba(255,255,255,.88)}
}
@media (max-width:820px){
  /* (05.11, round 6) hero: only the main button; the headline and the button sit lower; the headline in the brand white */
  .open__cta .btn--icon{display:none!important}
  .open__copy{padding-top:18px}
  .open__h .tr:not(.acc){color:var(--ink)!important}
  .open__h,.open__h .tr,.open__h .acc{font-weight:var(--w-heavy)!important} /* (05.11) the site black; the whole headline bold again (her later request) */
  /* projects: the project's name is on its button; hover or press rolls it to "לפרויקט המלא" */
  .pcard__t{display:none}
  .pcard__btn:active .btn__t{transform:translateY(-100%)}
}
@media (max-width:820px){
  /* (05.11, round 7) the tag capsules keep moving gently all the time, each a beat after the one above */
  .pcard__marks li{animation:pillSway 2.2s ease-in-out infinite alternate}
  .pcard__marks li:nth-child(2){animation-delay:.3s}.pcard__marks li:nth-child(3){animation-delay:.6s}.pcard__marks li:nth-child(4){animation-delay:.9s}.pcard__marks li:nth-child(5){animation-delay:1.2s}
  /* "more works" keeps clear of the credits section below it */
  .clients{margin-top:0!important}
  .plist__more{margin-bottom:var(--s3)}
  /* the takes: the dark / fuchsia card as wide as the button below, and the scene that acts it out much larger */
  .motion .pains .tg{row-gap:12px!important}
  .pains .tg__now,.pains .tg__then,.pains.is-after .tg__now,.pains.is-after .tg__then{width:min(100%,19rem)!important;margin-inline:auto!important}
  /* (05.11, round 8) the scene is a card as wide as the dark / fuchsia card above it, drawn at its own size (not scaled up) */
  .motion .pains .tgv,.pains .tgv{width:min(100%,19rem)!important;height:clamp(240px,32svh,268px)!important;margin-inline:auto}
  .pains .tgv__s>*,.motion .pains .tgv__s>*{transform:none!important}
  .pains .chat,.pains .site{width:100%;height:100%}
  /* take 02, after: a clean product page laid out for this card — the picture on one side, name, price and button on the other */
  .pains.is-after .sb--logo{top:35px;inset-inline-start:16px;font-size:14px}
  .pains.is-after .sb--img{top:74px;inset-inline-end:12px;width:40%;height:calc(100% - 90px);border-radius:12px}
  .pains.is-after .sb--h{top:94px;inset-inline-start:16px;font-size:20px;line-height:1.1;white-space:nowrap}
  .pains.is-after .sb--p{top:126px;inset-inline-start:16px;font-size:17px;color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy)}
  .pains.is-after .sb--btn{top:auto;bottom:18px;inset-inline-start:16px;padding:.5rem 1.3rem;font-size:15px}
  /* take 03: the calendar and the stock breathe — shorter day cells, the stock as one quiet row under it */
  .pains .tgv__s--cal{flex-direction:column;gap:8px;justify-content:center}
  .pains .cal{width:100%;padding:.7rem .8rem;gap:.45rem}
  .pains .cal__g{width:100%;gap:4px}
  .pains .cal__d{aspect-ratio:1.45;border-radius:6px;font-size:13px}
  .pains .stock{width:100%;grid-template-columns:auto 1fr;align-items:center;justify-items:start;gap:.8rem;padding:.55rem .8rem}
  .pains .stock__pile{grid-template-columns:repeat(6,22px);gap:4px}
  .pains .box{width:22px;height:19px;border-radius:4px}
  .pains .box::after{height:3px}
  .pains .stock__l{text-align:start;font-size:15px}
}
@media (prefers-reduced-motion:reduce){.pcard__marks li{animation:none}}
@keyframes pillSway{from{translate:0 0}to{translate:-7px 0}}
@media (max-width:820px){
  /* (05.11, round 9) "חנות שמוכרת בכמויות" bold again */
  .open__h .acc,.open__h .tr.acc{font-weight:var(--w-heavy)!important}
  /* section 04 fills the whole screen on its own; the takes start only after it has gone */
  .say,.motion .say{min-height:100svh!important;padding-block:var(--s3)!important;align-content:center}
  .pains{margin-top:0!important}
}
@media (max-width:820px){
  /* (05.11) the scene sits close under the take's card: the stage keeps only the height of what it holds */
  .pains .tg__stage{min-height:0!important;align-items:start}
  .pains .tg__take{row-gap:12px}
  .pains .tgv{margin-top:-10px!important} /* 14px under the card, as the other gaps here */
}
@media (max-width:820px){.open{min-height:calc(100svh - 30px)!important}} /* (05.11) the whole hero — photo, text, button — 15px higher; the photo still stands on the dark section */
@media (max-width:820px){.open__copy{top:-20px}} /* (05.11) headline and button 20px higher than the photo line */
@media (max-width:820px){
  .open__h .acc .w.is-shine{background:linear-gradient(100deg,var(--fuchsia) 0 38%,#ff9ad4 50%,var(--fuchsia) 62% 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroShine 4.2s ease-in-out infinite}
}
@keyframes heroShine{0%{background-position:100% 0}55%,100%{background-position:0 0}}
/* (05.11) "סיפור, מיתוג ועיצוב בינלאומי": the three words turn in one after another, then the fuchsia keeps passing from word to word */
.kw{display:inline-block;transition:color .6s var(--ease),translate .6s var(--ease)}
.kw.is-hot{color:var(--fuchsia);translate:0 -3px}
@media (max-width:820px){
  /* (05.11) the paragraph in two parts: what I build, then what it does for you */
  .hello.is-para .hello__p .tr:last-child{margin-top:.9em}
}
@media (max-width:820px){
  /* (05.11) the paragraph is read in word by word; its closing line is the statement — fuchsia, bold, stamped in, then the light keeps sweeping over it */
  .hello__p .w{display:inline-block}
  .hello.is-para .hello__p .tr:last-child{color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:min(var(--fs-h3),6.2vw);line-height:1.2}
  .hello.is-para .hello__p .tr:last-child .ph{transform-origin:50% 60%}
  .hello__p .w.is-shine{background:linear-gradient(100deg,var(--fuchsia) 0 38%,#ff9ad4 50%,var(--fuchsia) 62% 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroShine 4.2s ease-in-out infinite}
  .motion .hello.is-para{height:380svh}
}
@media (max-width:820px){
  /* (05.11) "עם מי עבדתי" is part of the projects, not a section of its own: no card edge, no shadow, no gap, no "Credits" marker,
     a smaller heading right under "לעוד עבודות" */
  .clients{margin-top:0!important;border-radius:0!important;box-shadow:none!important;padding-top:var(--s1)!important;background:var(--ivory)}
  .clients .sec__head>.label{display:none}
  .clients .clients__h{font-size:var(--fs-h3)}
  .clients .sec__head{margin-bottom:var(--s1)}
}
@media (max-width:820px){
  /* (05.11) the footer butterflies: on a tall phone the clip used to be blown up to cover the whole section, so no butterfly could be read.
     Now it is drawn smaller, as a band behind the footer at the bottom, fading in from above — each one reads as a butterfly, one pink among them */
  .contact__bg .fcrowd{inset:auto!important;left:-37.5%!important;bottom:0!important;width:175%!important;height:auto!important;aspect-ratio:1920/1074;scale:1!important;
    -webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 38%);mask-image:linear-gradient(to bottom,transparent 0,#000 38%)}
}
@media (max-width:820px){.contact__bg .shade{background:linear-gradient(rgba(36,42,48,.55),rgba(36,42,48,.3) 72%,rgba(36,42,48,.38))!important}}
/* (05.11) the trust line: one of her stickers instead of the 3D laptop, floating gently (every screen) */
.trustx__stk{position:relative!important;inset:auto!important;flex:none;width:clamp(200px,16vw + 80px,320px);height:auto;rotate:-8deg;filter:drop-shadow(0 14px 24px rgba(36,42,48,.25));animation:stkFloat 5s ease-in-out infinite}
@keyframes stkFloat{0%,100%{translate:0 0}50%{translate:0 -10px}}
@media (prefers-reduced-motion:reduce){.trustx__stk{animation:none}}
.loader__t{display:none}
@media (max-width:820px){
  /* the phone intro: the line of what she does under her M */
  .loader__t{display:block;position:absolute;top:calc(50% + 3.4rem);inset-inline:var(--gx);margin:0;text-align:center;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.2;color:var(--ivory)}
  .loader__t .w{display:inline-block}
  /* "אני בונה לכם…": one flowing paragraph instead of eight broken short lines — a calm column, the closing promise below it */
  .hello.is-para .hello__p{display:block;max-width:19.5em;margin-inline:auto;text-align:center;text-wrap:pretty}
  .hello.is-para .hello__p .tr:not(:last-child){display:inline;font-family:var(--f-body);font-size:18px;line-height:1.55;color:rgba(244,244,244,.8)}
  .hello.is-para .hello__p .tr:not(:last-child)::after{content:" "}
  .hello.is-para .hello__p .tr:not(:last-child) .ph{display:inline;white-space:normal}
  .hello.is-para .hello__p .tr:last-child{display:block;margin-top:1.3em}
}
@media (max-width:820px){
  /* (05.11) the project window pops up in the middle of the screen (smaller than the screen, growing out of its centre); no tag above its title */
  .case{margin:auto!important;width:calc(100vw - 2rem)!important;max-height:min(80svh,680px)!important;transform-origin:50% 50%}
  .case[open]{animation:casePop .55s cubic-bezier(.34,1.4,.64,1)}
  #case-k{display:none}
}
@keyframes casePop{from{opacity:0;scale:.82}to{opacity:1;scale:1}}
@media (max-width:820px){
  /* (05.11) "אני מירי…" much smaller, its arrow with it */
  .open__note,.open__pic .open__note,.open__note .note__t{font-size:11px!important;line-height:1.3}
  .open__note .note__t{max-width:6.6rem}
  .open__note .note__arrow{width:40px!important}
  /* "אני בונה לכם…": more inner margin at the sides of the section */
  .hello__stage{padding-inline:2.25rem!important}
}
@media (max-width:820px){
  .hello.is-para .hello__cyl,.hello.is-para .hello__drum{width:100%;min-width:0}
  .motion .hello.is-para .hello__drum{grid-template-columns:minmax(0,1fr)}
  .hello.is-para .hello__p{max-width:min(19.5em,100%)!important}
  .hello.is-para .hello__h .tr{font-size:min(var(--fs-h2),7.2vw)!important}
}
@media (max-width:820px){
  /* (05.11) her skill's spacing rule on the phone: one inner margin for the content of every section (36px), while the closing
     elements — logo, menu, floating buttons — keep the outer frame (--gx) */
  :root{--gi:2.25rem}
  .sec,.say,.open,.trustx,.contact,.pains,.how,#about,.hello__stage{padding-inline:var(--gi)!important}
  .pbuild__head,.pbuild__track{padding-inline:var(--gi)!important}
  .pbuild__bar{margin-inline:var(--gi)!important}
  .boards{padding-inline:0!important} /* (the section already carries the inner margin) */
}
@media (max-width:820px){
  /* (05.11) the butterflies cover the whole footer: the same picture, at the same small size, repeats upwards behind the clip
     (in silver only — the one pink butterfly stays in the clip at the bottom) */
  .contact__bg::before{content:"";position:absolute;inset:0;background:url(assets/img/crowd.webp) center bottom/175% auto repeat-y;filter:grayscale(1)}
  .contact__bg .fcrowd{-webkit-mask-image:none!important;mask-image:none!important}
}
@media (max-width:820px){
  /* (05.11) real phones show less height than a 812px test screen (the browser bars take their share): the takes' scene and the
     phone in "איך זה עובד" now take only the height that is left, so the bottom of both screens is always in view */
  .motion .pains .tgv,.pains .tgv{height:clamp(150px,calc(100svh - 465px),268px)!important}
  .motion .how .phone{height:calc(100svh - 216px)!important;max-height:34rem}
}
/* ===== her request (06.11), desktop: section 2 as on the phone — the headline alone first, then the paragraph in its stead,
   everything read in word by word; "סיפור, מיתוג ועיצוב בינלאומי" in pink, the light sweeping over them and the lift passing from word to word ===== */
@media (min-width:821px){
  .motion .hello.is-para{height:380svh}
  .motion .hello.is-para .hello__drum{display:grid}
  .motion .hello.is-para .hello__h,.motion .hello.is-para .hello__p{grid-area:1/1;align-self:center}
  .hello__h .w,.hello__p .w{display:inline-block}
  .hello.is-para .hello__p .tr:last-child{margin-top:.9em;color:var(--fuchsia);font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:1.1}
  .hello.is-para .hello__p .tr:last-child .ph{transform-origin:50% 60%}
  .hello__p .w.is-shine,.hello__p .kw .w{background:linear-gradient(100deg,var(--fuchsia) 0 38%,#ff9ad4 50%,var(--fuchsia) 62% 100%);background-size:320% 100%;background-position:100% 0;-webkit-background-clip:text;background-clip:text;color:transparent;animation:heroShine 4.2s ease-in-out infinite}
  .hello__p .kw .w{animation-delay:var(--kd,0s)}
  .kw.is-hot{color:inherit;translate:0 -6px;scale:1.06}
}
@media (min-width:821px){
  /* the closing promise, set as two lines (it ran wider than the screen as one) */
  .hello.is-para .hello__p .tr:last-child .ph{display:block;white-space:nowrap}
  .hello.is-para .hello__p{max-width:100%}
}
/* ===== her request (06.11), desktop: section 3 — the tags keep swaying as on the phone; the project pictures are black and white, colour on hover ===== */
@media (min-width:821px){
  .pcard__marks li{animation:pillSway 2.2s ease-in-out infinite alternate}
  .pcard__marks li:nth-child(2){animation-delay:.3s}.pcard__marks li:nth-child(3){animation-delay:.6s}.pcard__marks li:nth-child(4){animation-delay:.9s}.pcard__marks li:nth-child(5){animation-delay:1.2s}
  .pcard__img img{filter:grayscale(1);transition:transform 1.4s var(--ease),filter .7s var(--ease)}
  .pcard:hover .pcard__img img,.pcard:focus-within .pcard__img img{filter:grayscale(0)}
}
@media (min-width:821px) and (prefers-reduced-motion:reduce){.pcard__marks li{animation:none}}
/* ===== her request (06.11), desktop: the takes — "היום" dark and "אחרי" pink as on the phone, one card at a time;
   the visual centred in the left half; the section holds one screen with the same inner margin on every side ===== */
@media (min-width:821px){
  html.motion .pains{--tp:clamp(5.5rem,12svh,7.75rem);min-height:100svh;padding:var(--tp)!important;align-content:center}
  .pains .tg{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;grid-template-areas:"tabs sw" "stage vis" "cta vis"!important;grid-template-rows:auto 1fr auto!important;column-gap:clamp(2rem,5vw,5rem);align-items:center}
  .pains .tg__switch{grid-area:sw;justify-self:center!important;align-self:center;margin:0!important}
  .pains .tgv{grid-area:vis;justify-self:center!important;align-self:center!important;margin:0!important;height:min(447px,calc(100svh - 2 * var(--tp) - 6.5rem))!important}
  .pains .tg__stage{align-self:center}
  .pains .tg__now,.pains.is-after .tg__now{background:var(--ink)!important;color:var(--white)!important;box-shadow:0 10px 20px rgba(36,42,48,.18)!important;opacity:1}
  .pains .tg__now::before{color:rgba(255,255,255,.72)}
  .pains .tg__then,.pains.is-after .tg__then{background:var(--fuchsia)!important;color:var(--white)!important;box-shadow:0 10px 20px rgba(236,11,140,.25)!important;opacity:1}
  .pains .tg__then::before{color:rgba(255,255,255,.88)}
  .pains:not(.is-after) .tg__then,.pains.is-after .tg__now{display:none!important}
  .pains .tg__now,.pains.is-after .tg__then{animation:tgHalf .7s var(--ease) both}
}
@media (min-width:821px){.pains .tgv{width:min(100%,27rem)!important}}
/* her request (06.11): the project cursor — a small open fuchsia ring with an arrow, instead of the big disc with "לפרויקט" */
.cur.is-view{width:48px;height:48px;margin:-24px 0 0 -24px}
.cur.is-view .cur__blob{transform:none!important;background:rgba(236,11,140,.08);box-shadow:inset 0 0 0 1.5px var(--fuchsia);transition:background-color .35s}
.cur.is-view span{display:none}
.cur::after{content:"";position:relative;width:16px;height:16px;opacity:0;scale:.4;transition:opacity .3s,scale .45s var(--ease);background:var(--fuchsia);-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17 7 7M7 16V7h9'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 17 7 7M7 16V7h9'/%3E%3C/svg%3E") center/contain no-repeat}
.cur.is-view::after{opacity:1;scale:1}
/* her request (06.11): the chat's avatar is the M sticker */
.chat__av{background:url("assets/stickers/m-box.webp") center/cover no-repeat,var(--white)!important;box-shadow:0 0 0 1px rgba(36,42,48,.08)}
/* the takes: the "scroll to see after" hint keeps clear of the visual under it */
@media (min-width:821px){.pains .tg__switch{margin-bottom:2.2rem!important}}
/* her request (06.11), desktop: the hero's WhatsApp and phone drawn as the side rail's icons — filled glyphs, no button around them — both round, in fuchsia */
@media (min-width:821px){
  .open__cta .btn--icon{width:48px!important;height:48px!important;min-height:48px;background:none!important;box-shadow:none!important;border:0!important;color:var(--fuchsia)!important}
  .open__cta .btn--icon svg{width:40px;height:40px;fill:currentColor;stroke:none;filter:drop-shadow(0 3px 8px rgba(236,11,140,.25));transition:scale .4s var(--ease)}
  .open__cta .btn--icon:hover svg,.open__cta .btn--icon:focus-visible svg{scale:1.08}
  .open__cta .btn--icon .btn__fill{display:none}
}
/* her request (06.11), desktop: "עם מי עבדתי" is part of the projects, not a section of its own — no card edge, no shadow, no gap, no "Credits" marker, a smaller heading */
@media (min-width:821px){
  .clients{margin-top:0!important;border-radius:0!important;box-shadow:none!important;padding-top:var(--s1)!important;background:var(--ivory)}
  .clients .sec__head>.label{display:none}
  .clients .clients__h{font-size:var(--fs-h3)}
  .clients .sec__head{margin-bottom:var(--s1)}
  .work{border-end-start-radius:0!important;border-end-end-radius:0!important;padding-bottom:var(--s2)!important}
}
/* ===== her request (06.11): the project window as a short case study — crumb + title, details table, the screenshot, four chapters, the next project ===== */
.case{--cp:clamp(1.25rem,4vw,3.5rem)}
.cs__crumb{display:flex;gap:.5rem;color:rgba(244,244,244,.6)!important}
.cs__crumb span:last-child{color:var(--fuchsia)}
.cs__intro{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--s2);padding:var(--cp) var(--cp) 0}
.cs__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;margin:0}
.cs__meta>div{padding:.9rem 0 .9rem 1.25rem;border-top:1px solid var(--line)}
.cs__meta dt{margin:0 0 .3rem;font-family:var(--f-label);font-size:var(--fs-body);color:var(--muted)}
.cs__meta dd{margin:0;font-size:var(--fs-body);line-height:1.35;color:var(--ink)}
.cs__intro .case__live{margin:0 0 .9rem}
.case .cs__stage{margin:var(--cp) var(--cp) 0}
.cs__story{display:grid;padding:0 var(--cp)}
.cs__ch{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:var(--s2);padding-block:clamp(1.5rem,3vw,2.5rem);border-bottom:1px solid var(--line)}
.cs__ch h3{margin:0;display:flex;align-items:baseline;gap:.75rem;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;color:var(--ink)}
.cs__ch .cs__n{font-size:var(--fs-body);color:var(--fuchsia)}
.cs__ch p{margin:0;max-width:52ch;font-size:var(--fs-body);line-height:1.5;color:var(--ink)}
.cs__pal{list-style:none;display:flex;flex-wrap:wrap;gap:clamp(1rem,2.5vw,2rem);margin:var(--s2) 0 0;padding:0}
.cs__pal li{display:grid;justify-items:center;gap:.35rem;text-align:center}
.cs__pal i{width:64px;height:64px;border-radius:50%;box-shadow:inset 0 0 0 1px rgba(36,42,48,.1),0 8px 16px rgba(36,42,48,.1)}
.cs__pal b{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);color:var(--ink)}
.cs__pal bdi{font-family:var(--f-label);font-size:var(--fs-body);color:var(--muted)}
.cs__foot{display:grid!important;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2)!important;padding:var(--cp)!important}
.cs__next{margin:0!important;display:grid!important;grid-template-columns:auto 1fr;grid-template-areas:"k k" "t a" "s a";justify-items:start;align-items:center;gap:.2rem .9rem;padding:1rem 1.25rem!important;border-radius:var(--r-card);background:var(--ivory)!important;text-align:start;transition:background-color .4s var(--ease)}
.cs__next .label{grid-area:k;margin:0;color:var(--muted)}
.cs__next b{grid-area:t;font-size:var(--fs-h3);line-height:1.1}
.cs__nextk{grid-area:s;font-size:var(--fs-body);color:var(--muted)}
.cs__next i{grid-area:a;justify-self:end;font-style:normal;font-size:var(--fs-h3);color:var(--fuchsia);transition:translate .5s var(--ease)}
.cs__next:hover i{translate:-6px 0}
.cs__talk{background:var(--ink);color:var(--white)}
@media (max-width:820px){
  .cs__intro{grid-template-columns:1fr;gap:var(--s1)}
  .cs__meta{grid-template-columns:1fr}
  .cs__meta>div{display:grid;grid-template-columns:7rem 1fr;gap:.75rem;padding:.75rem 0}
  .cs__meta dt{margin:0}
  .cs__intro .case__live{justify-self:start}
  .cs__ch{grid-template-columns:1fr;gap:var(--s1)}
  .cs__pal i{width:52px;height:52px}
  .cs__foot{grid-template-columns:1fr}
  .cs__talk{justify-self:start}
}
.cs__intro .case__live{background:var(--fuchsia);color:var(--white)}
/* her request (06.11): the notifications in the phone carry the M sticker, not the cropped brush M */
.note__dot,.note__dot--mail{background:url("assets/stickers/m-box.webp") center/cover no-repeat,var(--white)!important;border-radius:.55rem;box-shadow:0 0 0 1px rgba(36,42,48,.08)}
.note__dot svg{display:none}
/* ===== her request (06.11), desktop opening: slate label, the wordmark painted large, the line read in, then a fly-through the letters ===== */
.loader__lab,.loader__bar{display:none}
@media (min-width:821px){
  .motion .loader__brush{width:min(52vw,600px)}
  .loader__t{display:block;position:absolute;top:calc(50% + min(7vw,5.5rem));inset-inline:var(--gx);margin:0;text-align:center;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.2;color:var(--ivory)}
  .loader__t .w{display:inline-block}
  .loader__lab{display:block;position:absolute;top:var(--gx);inset-inline-start:var(--gx);margin:0;color:rgba(244,244,244,.7)}
  .loader__lab bdi{display:inline-flex;align-items:center;gap:.6rem}
  .loader__rec{width:10px;height:10px;border-radius:50%;background:var(--fuchsia);animation:recBlink 1s steps(2) infinite}
  .loader__bar{display:block;position:absolute;left:50%;top:calc(50% + min(4.6vw,3.6rem));width:min(52vw,600px);height:3px;translate:-50% 0;border-radius:3px;background:var(--fuchsia);transform-origin:100% 50%}
  .loader.is-win{background:none!important}
  .loader.is-win .loader__brush{visibility:hidden}
  .loader__win{position:absolute;inset:0;width:100%;height:100%}
}
@keyframes recBlink{to{opacity:.15}}
/* ===== her request (06.11, round 2): the project window in the site's own language — ivory, a full-bleed stage, pills, cards, pink numbers, a dark next card ===== */
.case{background:var(--ivory)!important;--cp:clamp(1rem,3vw,2.5rem)}
.case__body.cs{display:grid;gap:var(--cp);padding:0 0 var(--cp)}
.cs__hero{position:relative;min-height:clamp(320px,56svh,540px);display:grid;align-items:end;overflow:hidden;border-radius:0 0 var(--r-card) var(--r-card);background:var(--ink);isolation:isolate}
.cs__heroimg{position:absolute;inset:0;z-index:-2;width:100%;height:100%;object-fit:cover;object-position:50% 0;transform-origin:50% 0;animation:csZoom 9s var(--ease) both}
.cs__hero::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(to top,rgba(36,42,48,.94) 0%,rgba(36,42,48,.7) 38%,rgba(36,42,48,0) 75%)}
@keyframes csZoom{from{scale:1.08}to{scale:1}}
.cs__herotxt{display:grid;justify-items:start;gap:.6rem;padding:var(--cp);padding-top:4rem;color:var(--ivory)}
.cs__crumb{display:flex;gap:.5rem;margin:0;color:rgba(244,244,244,.7)!important}
.cs__crumb span:last-child{color:var(--fuchsia)}
.case .cs__t{margin:0;color:var(--white);font-size:var(--fs-h2);line-height:1}
.case .cs__line{margin:0;font-size:var(--fs-h3);line-height:1.25;color:rgba(244,244,244,.85)}
.cs__tags{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:.5rem 0 0;padding:0}
.cs__tags li{padding:.5em 1em;border-radius:999px;font-family:var(--f-label);font-size:var(--fs-body);line-height:1.1;background:var(--fuchsia);color:var(--white);box-shadow:0 6px 14px rgba(24,26,31,.25)}
.cs__tags li:nth-child(4n+2){background:var(--ivory);color:var(--ink)}
.cs__tags li:nth-child(4n+3){background:var(--white);color:var(--ink)}
.cs__tags li:nth-child(4n+4){background:#D9D7DD;color:var(--ink)}
.cs__stk{position:absolute;top:clamp(1rem,3vw,2rem);inset-inline-start:clamp(1rem,3vw,2rem);width:clamp(96px,10vw,140px);rotate:-10deg;filter:drop-shadow(0 10px 18px rgba(0,0,0,.3));animation:stkFloat 5s ease-in-out infinite}
.cs__facts{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:stretch;gap:.75rem;padding-inline:var(--cp)}
.case .cs__meta{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.75rem;margin:0}
.case .cs__meta>div{padding:1rem 1.2rem;border:0;border-radius:var(--r-card);background:var(--white);box-shadow:0 8px 16px rgba(36,42,48,.06)}
.case .cs__meta dt{margin:0 0 .3rem;font-family:var(--f-label);font-size:var(--fs-body);color:var(--muted)}
.case .cs__meta dd{margin:0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-body);line-height:1.3;color:var(--ink)}
.cs__facts .case__live{align-self:center;margin:0;background:var(--fuchsia);color:var(--white)}
.case .cs__story{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;padding:0 var(--cp)}
.case .cs__ch{position:relative;display:grid;align-content:start;gap:.6rem;grid-template-columns:none;padding:clamp(1.25rem,2.5vw,2rem);border:0;border-radius:var(--r-card);background:var(--white);box-shadow:0 8px 16px rgba(36,42,48,.06);overflow:hidden}
.case .cs__ch .cs__n{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h2);line-height:.9;color:var(--fuchsia)}
.case .cs__ch h3{margin:0;display:block;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;color:var(--ink)}
.case .cs__ch p{margin:0;max-width:46ch;font-size:var(--fs-body);line-height:1.5;color:var(--muted)}
.case .cs__pal{gap:0;margin:.75rem 0 0}
.case .cs__pal li{margin-inline-end:-10px;display:grid;justify-items:center;gap:.35rem}
.case .cs__pal i{width:68px;height:68px;border:4px solid var(--white);box-shadow:0 8px 16px rgba(36,42,48,.14);transition:translate .5s var(--ease)}
.case .cs__pal li:hover i{translate:0 -6px}
.case .cs__pal b{font-size:var(--fs-body)}
.case .cs__pal bdi{font-size:var(--fs-body)}
.case .cs__foot{display:grid!important;grid-template-columns:minmax(0,1.5fr) minmax(0,1fr);gap:.75rem!important;padding:0 var(--cp)!important;align-items:stretch}
.case .cs__next{display:grid!important;grid-template-columns:minmax(0,.9fr) minmax(0,1fr) auto;grid-template-areas:none;align-items:center;gap:1.25rem;margin:0!important;padding:.75rem!important;padding-inline-end:1.5rem!important;border-radius:var(--r-card);background:var(--ink)!important;color:var(--ivory);text-align:start;overflow:hidden}
.cs__nextimg{display:block;aspect-ratio:16/10;border-radius:calc(var(--r-card) - 6px);overflow:hidden}
.cs__nextimg img{width:100%;height:100%;object-fit:cover;object-position:50% 0;transition:scale 1.2s var(--ease)}
.case .cs__next:hover .cs__nextimg img{scale:1.06}
.cs__nexttxt{display:grid;gap:.3rem;justify-items:start}
.case .cs__next .label{grid-area:auto;margin:0;color:var(--muted-d)}
.case .cs__next b{grid-area:auto;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.1;color:var(--white)}
.case .cs__nextk{grid-area:auto;font-size:var(--fs-body);color:var(--muted-d)}
.case .cs__next i{grid-area:auto;display:grid;place-items:center;width:52px;height:52px;border-radius:50%;background:var(--fuchsia);color:var(--white);font-style:normal;font-size:var(--fs-body)}
.case .cs__next:hover i{translate:-6px 0}
.cs__cta{display:grid;align-content:center;justify-items:start;gap:.9rem;padding:clamp(1.25rem,2.5vw,2rem);border-radius:var(--r-card);background:var(--fuchsia);color:var(--white)}
.cs__cta p{margin:0;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.15}
.case .cs__cta .cs__talk{background:var(--white);color:var(--ink)}
.case .case__x{background:var(--white);color:var(--ink);z-index:3}
@media (max-width:820px){
  .cs__hero{min-height:clamp(300px,52svh,420px)}
  .cs__stk{width:84px}
  .cs__facts{grid-template-columns:1fr}
  .case .cs__meta{grid-template-columns:1fr}
  .case .cs__meta>div{display:block}
  .cs__facts .case__live{justify-self:start}
  .case .cs__story{grid-template-columns:1fr}
  .case .cs__foot{grid-template-columns:1fr}
  .case .cs__next{grid-template-columns:minmax(0,1fr) auto}
  .cs__nextimg{display:none}
}
/* ===== her request (06.11): in the takes, the "היום / אחרי" switch sits right under the take's headline (desktop) ===== */
@media (min-width:821px){
  .pains .tg{grid-template-areas:"tabs vis" "q vis" "sw vis" "card vis" "cta vis"!important;grid-template-rows:auto auto auto auto auto!important;align-content:center;row-gap:clamp(.9rem,2.2svh,1.5rem)!important}
  .pains .tg__stage,.pains .tg__take:not([hidden]){display:contents!important}
  .pains .tg__tabs{grid-area:tabs}
  .pains .tg__take .tg__q{grid-area:q;margin:0}
  .pains.pains .tg__take .tg__now,.pains.pains .tg__take .tg__then{grid-area:card!important}
  .pains .tg__switch{grid-area:sw!important;justify-self:start!important;margin:0 0 2.1rem!important}
  .pains .tgv{grid-area:vis!important;grid-row:1/-1!important}
  .pains .tg__cta{grid-area:cta!important}
}
/* her request (06.11, round 2): the hero's WhatsApp and phone bigger, drawn as round line icons in fuchsia — no disc behind them */
@media (min-width:821px){
  .open__cta .btn--icon{width:60px!important;height:60px!important;min-height:60px}
  .open__cta .btn--icon svg{width:56px;height:56px;filter:none}
  .open__cta .btn--icon svg .o{fill:none;stroke:currentColor;stroke-width:1.5}
  .open__cta .btn--icon svg .f{fill:currentColor;stroke:none}
}
.case .case__body.cs{grid-template-columns:minmax(0,1fr)!important}
/* her request (06.11): the footer logo's M flows into the I with no hairline between the shapes — a thin outline in the same white closes the seam */
.fgrid__logo path{stroke:var(--white);stroke-width:.9px;stroke-linejoin:round}
.fgrid__logo .drop{will-change:auto}
@media (min-width:821px){.loader__win{will-change:transform,opacity;backface-visibility:hidden}}
/* (06.11, round 3) the hero icons filled, as the side rail's — round, fuchsia, big, no disc behind */
@media (min-width:821px){.open__cta .btn--icon svg{width:54px;height:54px}}
/* the intro: no line over the wordmark */
.loader__bar{display:none!important}
/* ===== her request (06.11, round 3): the project page, more designed — a dark stage with the title beside the screenshot in a tilted browser
   frame, the facts inside the stage, then an editorial story: 01–02 paired in one card, 03 design on a dark band with big swatches, 04 a wide strip ===== */
.cs__hero{min-height:0!important;display:grid!important;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);grid-template-areas:"txt shot" "facts facts";align-items:center;gap:clamp(1.5rem,3vw,3rem) clamp(1.5rem,4vw,4rem);padding:clamp(3.5rem,6vw,5rem) var(--cp) var(--cp);background:radial-gradient(70% 90% at 25% 40%,rgba(236,11,140,.28),transparent 60%),var(--ink)!important;overflow:hidden}
.cs__hero::before{display:none}
.cs__herotxt{grid-area:txt;padding:0!important}
.case .cs__t{font-size:var(--fs-display);line-height:.95;letter-spacing:0}
.cs__shot2{grid-area:shot;position:relative;margin:0;border-radius:14px;background:var(--white);box-shadow:0 40px 70px rgba(0,0,0,.45);rotate:-3deg;transition:rotate .9s var(--ease)}
.cs__shot2:hover{rotate:-1deg}
.cs__shot2 .cs__bar{border-radius:14px 14px 0 0}
.cs__shot2 #case-img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:0 0 14px 14px;animation:none}
.cs__shot2 .cs__stk{position:absolute;top:auto;bottom:-2rem;inset-inline-start:auto;inset-inline-end:-1.5rem;width:clamp(96px,9vw,130px);rotate:12deg}
.cs__hero .cs__facts{grid-area:facts;padding:0!important;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.case .cs__hero .cs__meta{gap:0;border-top:1px solid rgba(244,244,244,.16)}
.case .cs__hero .cs__meta>div{padding:1rem 0 0;padding-inline-end:1.5rem;border-radius:0;background:none;box-shadow:none}
.case .cs__hero .cs__meta dt{color:var(--muted-d)}
.case .cs__hero .cs__meta dd{color:var(--white)}
.case .cs__story{grid-template-columns:minmax(0,1fr)!important;gap:.75rem}
.cs__pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));border-radius:var(--r-card);background:var(--white);box-shadow:0 8px 16px rgba(36,42,48,.06)}
.cs__pair .cs__ch{background:none!important;box-shadow:none!important;border-radius:0}
.cs__pair .cs__ch+.cs__ch{border-inline-start:1px solid var(--line)}
.case .cs__ch--design{grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--s2);background:var(--ink)!important}
.case .cs__ch--design h3{color:var(--white)}
.case .cs__ch--design p{color:var(--muted-d)}
.case .cs__ch--design .cs__pal{margin:0;gap:0}
.case .cs__ch--design .cs__pal li{margin-inline-end:-14px}
.case .cs__ch--design .cs__pal i{width:104px;height:104px;border-color:var(--ink);box-shadow:0 14px 26px rgba(0,0,0,.35)}
.case .cs__ch--design .cs__pal b{color:var(--white)}
.case .cs__ch--design .cs__pal bdi{color:var(--muted-d)}
.case .cs__ch--build{grid-template-columns:auto minmax(0,1fr);align-items:start;gap:var(--s2)}
.case .cs__ch--build>div{display:grid;gap:.6rem}
.cs__ch .cs__n{display:block}
@media (max-width:820px){
  .cs__hero{grid-template-columns:1fr;grid-template-areas:"txt" "shot" "facts";padding-top:4.5rem}
  .case .cs__t{font-size:var(--fs-h2)}
  .cs__shot2 .cs__stk{width:80px;bottom:-1.25rem;inset-inline-end:-.5rem}
  .cs__hero .cs__facts{grid-template-columns:1fr}
  .case .cs__hero .cs__meta{grid-template-columns:1fr}
  .cs__pair{grid-template-columns:1fr}
  .cs__pair .cs__ch+.cs__ch{border-inline-start:0;border-top:1px solid var(--line)}
  .case .cs__ch--design{grid-template-columns:1fr}
  .case .cs__ch--design .cs__pal i{width:76px;height:76px}
  .case .cs__ch--build{grid-template-columns:1fr}
}
.cs__herotxt{min-width:0}
.case .cs__t{font-size:clamp(2.4rem,4.2vw,4rem);overflow-wrap:anywhere}
.cs__shot2{margin-top:1.5rem}
.case .cs__ch--design .cs__pal{gap:1rem}.case .cs__ch--design .cs__pal li{margin-inline-end:0;min-width:104px}
/* her request (06.11): in the project's dark opening, her chrome laptop with the project on its screen (floating gently, a pink glow under it) */
.cs__shot2.cs__lap{background:none;box-shadow:none;rotate:0deg;border-radius:0;margin:-1rem 0 -1.5rem}
.cs__shot2.cs__lap:hover{rotate:0deg}
.cs__shot2.cs__lap::before{content:"";position:absolute;inset:18% 12% 8%;z-index:-1;border-radius:50%;background:radial-gradient(closest-side,rgba(236,11,140,.45),transparent);filter:blur(30px)}
.cs__shot2.cs__lap #case-img{aspect-ratio:auto;object-fit:contain;border-radius:0;width:118%;max-width:none;margin-inline:-9%;filter:drop-shadow(0 30px 40px rgba(0,0,0,.45));animation:lapFloat 5s ease-in-out infinite}
.cs__shot2.cs__lap .cs__stk{bottom:12%;inset-inline-end:2%}
@keyframes lapFloat{0%,100%{translate:0 0;rotate:0deg}50%{translate:0 -10px;rotate:-1deg}}
@media (prefers-reduced-motion:reduce){.cs__shot2.cs__lap #case-img{animation:none}}
/* (06.11) the project page's scroll-in: blocks rise softly; the big numbers slide in; the swatches drop in one after another */
.motion .cs__story>*,.motion .cs__foot>*{opacity:0;translate:0 40px;transition:opacity .9s var(--ease),translate 1.1s var(--ease)}
.motion .cs__story>.is-in,.motion .cs__foot>.is-in{opacity:1;translate:0 0}
.motion .cs__foot>*:nth-child(2){transition-delay:.12s}
.motion .cs__story .cs__n{display:inline-block;opacity:0;translate:28px 0;transition:opacity .8s var(--ease) .2s,translate 1s var(--ease) .2s}
.motion .cs__story .is-in .cs__n{opacity:1;translate:0 0}
.motion .cs__pair .cs__ch+.cs__ch .cs__n{transition-delay:.35s}
.motion .cs__pal li{opacity:0;translate:0 -24px;scale:.7;transition:opacity .6s var(--ease),translate .8s cubic-bezier(.34,1.56,.64,1),scale .8s cubic-bezier(.34,1.56,.64,1)}
.motion .is-in .cs__pal li{opacity:1;translate:0 0;scale:1}
.motion .is-in .cs__pal li:nth-child(1){transition-delay:.3s}.motion .is-in .cs__pal li:nth-child(2){transition-delay:.42s}.motion .is-in .cs__pal li:nth-child(3){transition-delay:.54s}.motion .is-in .cs__pal li:nth-child(4){transition-delay:.66s}
.case .cs__ch{transition:opacity .9s var(--ease),translate 1.1s var(--ease),box-shadow .5s var(--ease)}
.case .cs__ch--build:hover,.cs__pair:hover{box-shadow:0 16px 30px rgba(36,42,48,.1)}
@media (prefers-reduced-motion:reduce){.motion .cs__story>*,.motion .cs__foot>*,.motion .cs__story .cs__n,.motion .cs__pal li{opacity:1;translate:none;scale:1;transition:none}}
/* the chrome laptop is partly see-through, so it stands in a soft studio spotlight (a light pool) with the pink glow around it */
.cs__shot2.cs__lap::before{inset:-6% -4% -2%;border-radius:50%;background:radial-gradient(closest-side,rgba(244,244,244,.96) 0%,rgba(244,244,244,.9) 48%,rgba(236,11,140,.35) 72%,transparent 100%);filter:blur(6px)}
/* her request (06.11): no pink halo in the project's opening — a plain dark stage, the laptop in a soft white light only */
.cs__hero{background:var(--ink)!important}
.cs__shot2.cs__lap::before{background:radial-gradient(closest-side,rgba(244,244,244,.96) 0%,rgba(244,244,244,.85) 50%,rgba(244,244,244,0) 100%)}
.cs__shot2.cs__lap::before{inset:0;border-radius:0;filter:none;background:radial-gradient(48% 40% at 50% 58%,rgba(244,244,244,.92) 0%,rgba(244,244,244,.6) 55%,rgba(244,244,244,0) 100%)}
/* her request (06.11): no halo at all — the laptop is drawn solid (its see-through chrome filled in), so it stands on the dark stage by itself */
.cs__shot2.cs__lap::before{display:none!important}
.cs__shot2.cs__lap #case-img{width:100%;margin-inline:0;filter:drop-shadow(0 30px 40px rgba(0,0,0,.5))}
.cs__shot2.cs__lap{margin:1rem 0 0}.cs__shot2.cs__lap #case-img{width:86%;margin-inline:auto}.cs__shot2.cs__lap .cs__stk{bottom:6%;inset-inline-end:4%}
/* her request (06.11): the laptop stands on a light card inside the dark opening (its chrome is drawn for light), turned so its back
   faces the words; the project still reads the right way on its screen */
.cs__shot2.cs__lap{display:grid;place-items:center;padding:clamp(1rem,2.5vw,2rem);margin:0;border-radius:var(--r-card);background:var(--ivory)!important;overflow:visible}
.cs__shot2.cs__lap #case-img{width:100%;margin:0;filter:none}
.cs__shot2.cs__lap .cs__stk{bottom:-1.25rem;inset-inline-end:auto;inset-inline-start:-1.25rem;rotate:-12deg}
/* (06.11) "סיפור, מיתוג ועיצוב בינלאומי" in bold */
.hello__p .kw{font-weight:var(--w-heavy)}
.cs__shot2.cs__lap .cs__stk{inset-inline-start:auto!important;inset-inline-end:-1.25rem!important;bottom:-1.25rem!important}
@media (max-width:820px){.cs__shot2.cs__lap .cs__stk{inset-inline-end:-.25rem!important;bottom:-1rem!important;width:72px}}
/* her request (06.11): no card behind the laptop — it is drawn solid now, stands on the dark stage itself, close to the middle by the words */
.cs__shot2.cs__lap{background:none!important;padding:0;border-radius:0;justify-self:start;width:92%;margin-inline-start:calc(-1 * clamp(1rem,3vw,3rem))!important}
.cs__shot2.cs__lap #case-img{filter:drop-shadow(0 30px 40px rgba(0,0,0,.45))}
@media (max-width:820px){.cs__shot2.cs__lap{width:100%;justify-self:center;margin-inline-start:0!important}}
@media (min-width:821px){.cs__shot2.cs__lap{width:100%;margin-inline-start:calc(-1 * clamp(3rem,7vw,7rem))!important}}
@media (min-width:821px){.loader.is-win .loader__brush{visibility:visible}.loader__win{z-index:0}.loader__brush{position:relative;z-index:1}}
/* ===== her request (06.11): a small gallery beside "פיתוח" (the site, the branding, the admin system), each picture opens full screen ===== */
.case .cs__ch--build{grid-template-columns:auto minmax(0,1fr) minmax(0,1.1fr);align-items:center}
.cs__gal{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:.6rem}
.cs__gal:has(li:only-child){grid-template-columns:1fr}
.cs__gal li:first-child:not(:only-child){grid-column:1/-1}
.cs__gal button{position:relative;display:block;width:100%;padding:0;border:0;border-radius:calc(var(--r-card) - 6px);overflow:hidden;background:var(--studio);cursor:zoom-in;box-shadow:0 8px 16px rgba(36,42,48,.08)}
.cs__gal img{display:block;width:100%;aspect-ratio:16/10;object-fit:cover;object-position:50% 0;transition:scale 1s var(--ease)}
.cs__gal li:first-child:not(:only-child) img{aspect-ratio:16/8}
.cs__gal button:hover img,.cs__gal button:focus-visible img{scale:1.05}
.cs__gal .label{position:absolute;bottom:.5rem;inset-inline-start:.5rem;padding:.3em .8em;border-radius:999px;background:rgba(36,42,48,.78);color:var(--white);font-size:var(--fs-body);line-height:1.1}
.lbx{position:fixed;inset:0;width:100vw;height:100svh;max-width:none;max-height:none;margin:0;padding:clamp(1rem,4vw,3rem);border:0;background:rgba(24,26,31,.94);color:var(--ivory);display:none;place-items:center}
.lbx[open]{display:grid}
.lbx::backdrop{background:transparent}
.lbx__fig{margin:0;display:grid;justify-items:center;gap:.9rem;max-width:min(1400px,100%)}
.lbx__fig img{display:block;max-width:100%;max-height:calc(100svh - 9rem);object-fit:contain;border-radius:12px;box-shadow:0 30px 60px rgba(0,0,0,.5)}
.lbx__cap{font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3)}
.lbx__x,.lbx__nav{position:absolute;display:grid;place-items:center;width:52px;height:52px;border:0;border-radius:50%;background:var(--white);color:var(--ink);font-size:var(--fs-body);cursor:pointer;transition:background-color .3s,color .3s}
.lbx__x:hover,.lbx__nav:hover{background:var(--fuchsia);color:var(--white)}
.lbx__x{top:1rem;inset-inline-end:1rem}
.lbx__nav{top:50%;translate:0 -50%}
.lbx__prev{inset-inline-start:1rem}.lbx__next{inset-inline-end:1rem}
.lbx.is-single .lbx__nav,.lbx.is-single .lbx__n{display:none}
.lbx__n{position:absolute;top:1.4rem;inset-inline-start:1.25rem;color:var(--muted-d)}
@media (max-width:820px){
  .case .cs__ch--build{grid-template-columns:1fr}
  .lbx__nav{top:auto;bottom:1rem;translate:none}
}
/* (06.11) the gallery shows it can be opened: a small "enlarge" badge that breathes, and a pink ring that passes from picture to picture */
.cs__gal button::after{content:"";position:absolute;top:.5rem;inset-inline-end:.5rem;width:34px;height:34px;border-radius:50%;background:var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23EC0B8C' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6M10 20H4v-6M20 4l-7 7M4 20l7-7'/%3E%3C/svg%3E") center/16px no-repeat;box-shadow:0 4px 10px rgba(36,42,48,.18);animation:galBadge 2.4s ease-in-out infinite}
.cs__gal li{transition:translate .6s var(--ease)}
.cs__gal button{transition:box-shadow .6s var(--ease)}
.cs__gal li.is-hint{translate:0 -4px}
.cs__gal li.is-hint button{box-shadow:0 0 0 3px var(--fuchsia),0 14px 24px rgba(236,11,140,.18)}
@keyframes galBadge{0%,100%{scale:1;box-shadow:0 4px 10px rgba(36,42,48,.18),0 0 0 0 rgba(236,11,140,.45)}50%{scale:1.1;box-shadow:0 4px 10px rgba(36,42,48,.18),0 0 0 8px rgba(236,11,140,0)}}
.lbx__fig{touch-action:pan-y;cursor:grab}
@media (prefers-reduced-motion:reduce){.cs__gal button::after{animation:none}}
/* ===== her request (06.11): new motion in section 2 — the key words on fuchsia pills that sweep in, the promise rising with a hand-drawn line ===== */
.hello__p .kw{position:relative;isolation:isolate;padding:0 .28em;margin:0 .04em;color:inherit;translate:none!important}
.hello__p .kw::before{content:"";position:absolute;inset:.08em 0 .02em;z-index:-1;border-radius:.4em;background:var(--fuchsia);transform:scaleX(var(--pill,0));transform-origin:100% 50%}
html:not(.motion) .hello__p .kw{--pill:1;color:var(--white)}
.hello__p .kw .w{background:none!important;-webkit-background-clip:border-box!important;background-clip:border-box!important;color:inherit!important;animation:none!important}
.hello__p .w.is-shine{background:none!important;color:inherit!important;animation:none!important}
.hello.is-para .hello__p .tr:last-child .ph{position:relative}
.hello__ul{position:absolute;inset-inline:0;bottom:-.32em;width:100%;height:.42em;overflow:visible;pointer-events:none}
.hello__ul path{fill:none;stroke:var(--fuchsia);stroke-width:4.5;stroke-linecap:round;vector-effect:non-scaling-stroke}
/* (06.11) the hero button's arrow circle the same size as the round WhatsApp / phone icons beside it (their discs are ~44px) */
@media (min-width:821px){.open__cta .btn:first-child i{width:44px;height:44px;font-size:1.15rem}}
.open__bfly,.open__bfly img{will-change:transform,opacity}
/* (06.11) a project added from the panel (no laptop picture yet): its screenshot in a tilted browser-like frame */
.cs__lap.is-shot #case-img{aspect-ratio:16/10;object-fit:cover;object-position:50% 0;border-radius:14px;box-shadow:0 30px 60px rgba(0,0,0,.45);rotate:-3deg;filter:none;animation:none}
/* (06.11) the window layer is drawn ahead now: the label, the line and the counter stay above it */
@media (min-width:821px){.loader__t,.loader__lab,.loader__n{z-index:2}}
/* (06.11) the way into the backstage panel, quiet, in the menu's footer */
.menu__admin{display:inline-flex;align-items:center;gap:.45rem;min-height:44px;color:var(--muted-d)!important;text-decoration:none;transition:color .3s var(--ease)}
.menu__admin:hover,.menu__admin:focus-visible{color:var(--fuchsia)!important}
.menu__admin-ic{width:20px;height:20px;flex:none;fill:currentColor;stroke:none} /* a filled glyph, as the site's other icons */
/* ===== (06.11) the thank-you after the form is sent ===== */
.thx{position:relative;display:grid;justify-items:start;gap:1rem;min-height:min(60svh,520px);align-content:center;padding:clamp(2rem,5vw,4rem);overflow:hidden}
.thx[hidden]{display:none}
.thx__k{margin:0;color:var(--fuchsia)}
.thx__h{margin:0;max-width:14ch}
.thx__l{margin:0;max-width:34ch;font-size:var(--fs-h3);line-height:1.35;color:var(--muted)}
.thx__back{margin-top:.5rem}
.thx__stk{position:absolute;top:clamp(1rem,4vw,2.5rem);inset-inline-end:clamp(1rem,5vw,3.5rem);width:clamp(110px,14vw,170px);rotate:-10deg;filter:drop-shadow(0 12px 20px rgba(36,42,48,.25))}
.thx__bf{position:absolute;bottom:clamp(1rem,4vw,2.5rem);inset-inline-end:clamp(1.5rem,8vw,6rem);width:clamp(110px,15vw,200px);pointer-events:none;animation:thxFloat 4.5s ease-in-out infinite 1.8s}
@keyframes thxFloat{0%,100%{translate:0 0}50%{translate:0 -12px}}
@media (max-width:820px){.thx{padding-top:4.5rem;min-height:0}.thx__stk{width:96px}.thx__bf{position:static;justify-self:end;width:120px;margin-top:-1rem}}
@media (prefers-reduced-motion:reduce){.thx__bf{animation:none}}
.hp{position:absolute!important;inset:0 auto auto 0;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);opacity:0;pointer-events:none} /* (06.11) the bot trap: people never see it — kept inside the form, so it never widens the window */

/* (06.11) the form window only ever scrolls up and down */
.case{overflow-x:hidden;overscroll-behavior:contain;touch-action:pan-y}
/* (06.11) phone, "מה אני בונה": the clips are 4:5 — the frame takes their shape, so the whole picture shows (no cropping) */
@media (max-width:820px){
  .motion .pprop__media{aspect-ratio:4/5;height:min(38svh,calc((80vw - 1.5rem) * 1.25));width:auto;max-width:100%;justify-self:center}
  .motion .pprop__media video{object-fit:cover}
}
/* ===== (06.11) her request: the phone plays the desktop opening — SCENE label, the wordmark painted, the line read in, the counter, the fly-through ===== */
@media (max-width:820px){
  .motion .loader__brush{width:min(78vw,520px);position:relative;z-index:1}
  .loader__t{display:block;position:absolute;z-index:2;top:calc(50% + 15vw);inset-inline:var(--gx);margin:0;text-align:center;font-family:var(--f-display);font-weight:var(--w-heavy);font-size:var(--fs-h3);line-height:1.25;color:var(--ivory)}
  .loader__t .w{display:inline-block}
  .loader .loader__lab{display:block;position:absolute;z-index:2;inset:auto;height:auto;top:calc(var(--gx) + env(safe-area-inset-top));inset-inline-start:var(--gx);margin:0;color:rgba(244,244,244,.7)}
  .loader__lab bdi{display:inline-flex;align-items:center;gap:.6rem}
  .loader__rec{width:10px;height:10px;border-radius:50%;background:var(--fuchsia);animation:recBlink 1s steps(2) infinite}
  .loader__n{z-index:2}
  .loader.is-win{background:none!important}
  .loader.is-win .loader__brush{visibility:visible}
  .loader__win{position:absolute;inset:0;z-index:0;width:100%;height:100%;will-change:transform,opacity;backface-visibility:hidden}
}