/* ═══════════════════════════════════════════════════════════
   KAUSE — style.css
   1 Tokens · 2 Reset · 3 Type · 4 Layers · 5 Preloader · 6 Nav
   7 Hero · 8 Strip · 9 Services · 10 Packages · 11 Work
   12 About · 13 Why · 14 Timeline · 15 CTA · 16 Footer
   17 Services page · 18 Responsive · 19 Reduced motion
   ═══════════════════════════════════════════════════════════ */

/* ── 1 · TOKENS ─────────────────────────────────────────── */
:root{
  --ink:#050505;
  --ink-raised:#0D0D0F;
  --ink-panel:#0A0A0C;
  --contour:#16161A;

  --grad-start:#7A1FD6;
  --grad-mid:#B026F0;
  --grad-end:#E93CF0;
  --gradient:linear-gradient(118deg,#7A1FD6 0%,#B026F0 48%,#E93CF0 100%);

  --orange:#FF8A2B;
  --orange-lit:#FFC078;
  --orange-deep:#DD6412;
  --orange-dim:rgba(255,138,43,.5);

  --bone:#F2F0ED;
  --bone-dim:rgba(242,240,237,.62);
  /* .50, not .38. At .38 this lands at 3.16:1 on --ink, under the 4.5:1 floor,
     and it is the colour on six text roles: section eyebrows, stat labels,
     what-we-do notes, the "old way" column, the timeline note and the footer
     tagline. .50 measures 4.79:1 and is visually near-identical. */
  --bone-mute:rgba(242,240,237,.50);
  --hairline:rgba(242,240,237,.09);
  --hairline-hi:rgba(242,240,237,.18);

  --ease-out:cubic-bezier(.16,1,.3,1);
  --ease-inout:cubic-bezier(.76,0,.24,1);
  --dur-fast:.35s; --dur-base:.7s; --dur-slow:1.2s;

  --t-mega:clamp(3.4rem,13.5vw,12.5rem);
  --t-hero:clamp(3rem,11vw,10.5rem);
  --t-h2:clamp(1.8rem,4.4vw,4.2rem);
  --t-h3:clamp(1.3rem,2.4vw,2.2rem);
  --t-lead:clamp(1rem,1.4vw,1.28rem);
  --t-body:clamp(.94rem,1.02vw,1.03rem);
  --t-meta:clamp(.67rem,.76vw,.78rem);

  --gutter:clamp(20px,5vw,80px);
  --sect:clamp(76px,10.5vh,132px);
  --max:1680px;
}

/* ── 2 · RESET ──────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body,h1,h2,h3,p,ul,ol,li,figure,blockquote{margin:0;padding:0}
ul,ol{list-style:none}
img,video,svg{display:block;max-width:100%}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
a{color:inherit;text-decoration:none}
::selection{background:var(--grad-mid);color:var(--bone)}

/* color-scheme tells the browser to theme scrollbars, form controls and the
   overscroll gutter dark. Without it they render light on a near-black page. */
html{background:var(--ink);color-scheme:dark}
/* Anchor targets clear the fixed nav instead of landing underneath it. */
section[id],[id].legal{scroll-margin-top:96px}
/* Default is a translucent blue flash on tap; the brand accent reads better. */
a,button,[role="button"]{-webkit-tap-highlight-color:rgba(176,38,240,.18)}
body{
  background:var(--ink);
  color:var(--bone);
  font-family:'Inter',system-ui,-apple-system,sans-serif;
  font-size:var(--t-body);
  line-height:1.6;
  letter-spacing:-.011em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
main{position:relative;z-index:1}
section{position:relative;padding:var(--sect) var(--gutter)}
.defs{position:absolute;width:0;height:0;overflow:hidden}
/* Hidden by clipping, NOT by left:-9999px. In RTL the left side is the scrollable
   direction, so that offset handed phones ~10,000px of draggable dead space. */
.skip{position:absolute;top:0;left:0;z-index:10000;width:1px;height:1px;margin:-1px;
  padding:0;overflow:hidden;clip-path:inset(50%);white-space:nowrap;
  background:var(--bone);color:var(--ink)}
.skip:focus{width:auto;height:auto;margin:0;padding:14px 20px;overflow:visible;
  clip-path:none;left:12px;top:12px}
:focus-visible{outline:1px solid var(--grad-mid);outline-offset:4px}

/* ── 3 · TYPE ───────────────────────────────────────────── */
h1,h2,h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.035em;line-height:.9}
em{font-style:normal}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace;font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.22em;font-weight:400}
.grad{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;padding-bottom:.08em}

/* consistent section label: small, left, above content */
.eyebrow{display:flex;align-items:center;gap:14px;color:var(--bone-mute);
  margin:0 0 clamp(24px,3.4vh,44px);text-align:left;line-height:1.5}
.eyebrow i{font-style:normal;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}

.ln{display:block;overflow:hidden;padding-bottom:.06em}
.ch,.li{display:inline-block;will-change:transform}
html.js-ready .ch,html.js-ready .li{transform:translateY(110%)}
/* Above-the-fold copy is visible by default and JS only adds the entrance. If a
   tween never runs the headline must still read — never hidden by default. */
html.js-ready .split-onload .ch,html.js-ready .split-onload .li{transform:none}
/* scroll-entrance variants — nothing sits on screen already composed */
html.js-ready [data-reveal]{opacity:0;transform:translateY(40px)}
html.js-ready [data-reveal="left"]{transform:translateX(-46px)}
html.js-ready [data-reveal="right"]{transform:translateX(46px)}
html.js-ready [data-reveal="scale"]{transform:translateY(34px) scale(.955)}
html.js-ready [data-reveal="mask"]{opacity:1;transform:none;clip-path:inset(0 0 101% 0)}
html.js-ready [data-reveal="mask-x"]{opacity:1;transform:none;clip-path:inset(0 101% 0 0)}
html.js-ready [data-reveal-slow]{opacity:0;transform:translateY(28px)}
/* Mirror the horizontal entrances in Hebrew, so content still arrives from the
   start of the line rather than the end. */
html.js-ready[dir="rtl"] [data-reveal="left"]{transform:translateX(46px)}
html.js-ready[dir="rtl"] [data-reveal="right"]{transform:translateX(-46px)}
html.js-ready[dir="rtl"] [data-reveal="mask-x"]{clip-path:inset(0 0 0 101%)}

/* A 46px entrance offset becomes real horizontal scroll whenever the page gutter
   is narrower than the offset — outward in RTL, and equally in LTR for the
   "right" variant. Only above 1100px is the gutter (5vw) wide enough to swallow
   it, so below that the same elements enter on a fade alone. GSAP animates to
   x:0, which is already true here, so the two stay in step.
   The doubled .js-ready is a specificity bump, not a typo: it has to outrank the
   [dir="rtl"] rules above, and a media query adds no specificity of its own. */
@media (max-width:1100px){
  html.js-ready.js-ready [data-reveal="left"],
  html.js-ready.js-ready [data-reveal="right"]{transform:none}
}

/* ── 4 · LAYERS ─────────────────────────────────────────── */
.grain{
  position:fixed;inset:-120px;z-index:9998;pointer-events:none;opacity:.042;
  mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grain .6s steps(8) infinite;
}
@keyframes grain{
  0%{transform:translate(0,0)}12.5%{transform:translate(-6%,-3%)}25%{transform:translate(4%,-6%)}
  37.5%{transform:translate(-3%,5%)}50%{transform:translate(6%,2%)}62.5%{transform:translate(-5%,-5%)}
  75%{transform:translate(3%,6%)}87.5%{transform:translate(-6%,3%)}100%{transform:translate(0,0)}
}
.topo{position:fixed;inset:0;width:100%;height:100%;z-index:0;pointer-events:none}

.progress{position:fixed;top:0;left:0;right:0;height:1px;z-index:9997;pointer-events:none}
.progress span{display:block;height:100%;background:var(--gradient);transform:scaleX(0);transform-origin:left}

/* page transition wipe */
.wipe{position:fixed;inset:0;z-index:9995;background:var(--ink);pointer-events:none;transform:translateY(0)}

/* signature orange drops — drift is driven per-dot in JS, never a shared keyframe */
/* z-index:-1 keeps the drops behind every text layer while still floating
   above the page ground — they are atmosphere, never an obstruction. */
.drop{position:absolute;z-index:-1;pointer-events:none;
  border-radius:58% 42% 63% 37%/47% 58% 42% 53%;
  background:radial-gradient(circle at 32% 26%,var(--orange-lit),var(--orange) 52%,var(--orange-deep));
  box-shadow:0 0 16px rgba(255,138,43,.26);
  will-change:transform}

/* mail confirmation */
.toast{position:fixed;left:50%;bottom:26px;z-index:9996;transform:translate(-50%,18px);
  padding:.85em 1.4em;background:var(--ink-panel);border:1px solid var(--hairline-hi);color:var(--bone-dim);
  font-family:'JetBrains Mono',monospace;font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.16em;
  opacity:0;pointer-events:none;transition:opacity .4s var(--ease-out),transform .4s var(--ease-out)}
.toast.is-in{opacity:1;transform:translate(-50%,0)}

/* ── 5 · PRELOADER ──────────────────────────────────────── */
.preloader{position:fixed;inset:0;z-index:9990;background:var(--ink);display:grid;place-items:center}
.preloader__k{width:clamp(56px,7vw,96px);height:auto;opacity:0}
.preloader__meta{position:absolute;left:var(--gutter);right:var(--gutter);bottom:clamp(24px,4vh,44px);
  display:flex;justify-content:space-between;color:var(--bone-mute)}

/* ── 6 · NAV ────────────────────────────────────────────── */
.nav{position:fixed;top:0;left:0;right:0;z-index:900;display:flex;justify-content:space-between;align-items:center;
  /* 2.4vh put the bar at 81px on a 900px-tall viewport, just over the 80px cap
     that keeps a fixed nav from eating the fold. */
  padding:clamp(16px,2.2vh,26px) var(--gutter)}
.nav__mark img{width:22px;height:auto}
.nav__links{display:flex;align-items:center;gap:clamp(12px,1.6vw,20px)}
.nav__links a{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;
  border:1px solid transparent;transition:border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.nav__links a:hover{border-color:var(--hairline-hi);background:rgba(242,240,237,.04)}
.ic{width:21px;height:21px;opacity:.9;transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.nav__links a:hover .ic{opacity:1;transform:scale(1.08)}

/* ── 7 · HERO ───────────────────────────────────────────── */
.hero{height:100vh;height:100dvh;min-height:540px;padding:0 var(--gutter);
  display:grid;place-items:center;text-align:center;overflow:hidden}
.hero__stage{position:absolute;inset:0;z-index:-1}
.hero__topo{position:absolute;inset:0;width:100%;height:100%}
.hero__glow{position:absolute;left:50%;top:48%;width:min(92vw,1100px);height:min(92vw,1100px);
  transform:translate(-50%,-50%);
  background:radial-gradient(circle at 50% 50%,rgba(176,38,240,.3),rgba(122,31,214,.12) 42%,transparent 68%);
  filter:blur(18px)}
.hero__k{position:absolute;left:50%;top:50%;width:min(56vh,44vw,520px);transform:translate(-50%,-50%);
  opacity:0;will-change:transform,opacity}   /* hidden on load; scroll reveals it */
.hero__k svg{width:100%;height:auto;filter:drop-shadow(0 0 60px rgba(176,38,240,.45))}
.hero__vignette{position:absolute;inset:0;background:
  radial-gradient(118% 80% at 50% 46%,transparent 26%,rgba(5,5,5,.72) 72%,rgba(5,5,5,.96) 100%),
  linear-gradient(180deg,rgba(5,5,5,.6) 0%,transparent 26%,transparent 62%,rgba(5,5,5,.9) 100%)}

.hero__inner{position:relative;width:100%;max-width:var(--max)}
/* It is a <p> for SEO reasons, so it must restate the display-face rules that
   h1/h2/h3 get for free — otherwise it renders at 400 in the fallback sans. */
.hero__title{font-family:'Archivo',system-ui,sans-serif;font-weight:800;
  font-size:var(--t-hero);line-height:.88;letter-spacing:-.038em}
/* .hero__lead is the h1 and .eyebrow is an h2 — both must shed the display
   heading defaults so the rendering is identical to when they were p/span. */
.hero__lead{margin:clamp(22px,3.2vh,40px) auto 0;max-width:44ch;font-size:var(--t-lead);color:var(--bone-dim);
  font-family:'Inter',system-ui,-apple-system,sans-serif;font-weight:400;line-height:1.6;letter-spacing:-.011em}
/* The Hebrew lead is a short two-clause statement rather than a descriptive
   sentence, so it takes more size in a narrower measure and breaks at its own
   comma instead of wrapping arbitrarily. */
[dir="rtl"] .hero__lead{font-size:clamp(1.2rem,2.3vw,1.9rem);max-width:30ch;
  line-height:1.5;letter-spacing:0;color:var(--bone-dim)}
.hero__actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:clamp(28px,4vh,44px);justify-content:center}
.hero__scroll{position:absolute;left:50%;transform:translateX(-50%);bottom:clamp(22px,3.4vh,40px);
  color:var(--bone-mute);display:flex;flex-direction:column;align-items:center;gap:12px}
.hero__scroll i{display:block;width:1px;height:38px;background:var(--hairline-hi);position:relative;overflow:hidden}
.hero__scroll i::after{content:"";position:absolute;inset:0;background:var(--bone);animation:drain 2s var(--ease-inout) infinite}
@keyframes drain{0%{transform:translateY(-100%)}60%,100%{transform:translateY(100%)}}

/* Buttons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;
  padding:1.05em 2.2em;font-family:'JetBrains Mono',monospace;font-size:var(--t-meta);
  text-transform:uppercase;letter-spacing:.18em;overflow:hidden;isolation:isolate;
  border:1px solid var(--hairline-hi);transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out)}
.btn--primary{background:linear-gradient(var(--ink),var(--ink)) padding-box,var(--gradient) border-box;border:1px solid transparent}
.btn::before{content:"";position:absolute;inset:0;z-index:-1;background:var(--gradient);
  transform:scaleX(0);transform-origin:left;transition:transform .5s var(--ease-out)}
.btn:hover::before{transform:scaleX(1)}
.btn:hover{color:var(--ink);border-color:transparent}
.btn:active{transform:scale(.98)}
.btn--xl{padding:1.3em 3.1em;letter-spacing:.22em}

/* ── 8 · STRIP ──────────────────────────────────────────── */
.strip{padding:0;border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline)}
.strip__grid{display:grid;grid-template-columns:repeat(4,1fr);max-width:var(--max);margin:0 auto}
.strip__cell{padding:clamp(34px,5vh,62px) clamp(18px,2.4vw,34px);border-left:1px solid var(--hairline);text-align:center}
.strip__cell:first-child{border-left:0}
.strip__num{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(2.3rem,4.6vw,4rem);
  line-height:1;letter-spacing:-.04em;background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.strip__label{display:block;margin-top:12px;color:var(--bone-mute);line-height:1.7;letter-spacing:.14em}

.marquee{border-top:1px solid var(--hairline);overflow:hidden;padding:clamp(13px,2vh,22px) 0}
.marquee__track{display:flex;white-space:nowrap;will-change:transform}
/* Solid ghost fill, not an outline — it reads cleaner and works in both scripts */
.marquee__track span{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.4rem,3.4vw,3rem);
  letter-spacing:-.02em;color:rgba(242,240,237,.14);-webkit-text-stroke:0;padding-right:.3em}

/* ── 9 · SERVICES ───────────────────────────────────────── */
.services{max-width:var(--max);margin:0 auto}
.srow{position:relative;border-top:1px solid var(--hairline);transition:background var(--dur-base) var(--ease-out)}
.srow:last-child{border-bottom:1px solid var(--hairline)}
.srow::after{content:"";position:absolute;left:0;bottom:0;height:1px;width:100%;background:var(--gradient);
  transform:scaleX(0);transform-origin:left;transition:transform .75s var(--ease-out)}
.srow.is-open::after{transform:scaleX(1)}
.srow.is-open{background:linear-gradient(90deg,rgba(176,38,240,.05),transparent 62%)}

.srow__head{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;
  gap:clamp(16px,3vw,48px);width:100%;text-align:left;padding:clamp(22px,3.2vh,40px) 0}
.srow__glyph{width:clamp(38px,3.6vw,52px);color:var(--bone-mute);
  transition:color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.srow__glyph svg{width:100%;height:auto}
.srow.is-open .srow__glyph{color:var(--grad-end);transform:translateY(-2px) scale(1.06)}
/* every animated SVG part needs its own box to scale/rotate around */
.srow__glyph .spark,.srow__glyph .cursor-arrow,.srow__glyph .node,
.srow__glyph .play,.tl__glyph .tl__rec,.tl__glyph .tl__flame{transform-box:fill-box;transform-origin:center}

/* idle: each icon always breathes, quietly */
.srow__glyph .spark{animation:sparkIdle 4.2s ease-in-out infinite}
.srow__glyph .play{animation:playIdle 4.8s ease-in-out infinite}
.srow__glyph .cursor-arrow{animation:cursorIdle 5.4s ease-in-out infinite}
.srow__glyph .node{animation:nodeIdle 4.6s ease-in-out infinite}
.srow__glyph .node.n2{animation-delay:.55s}
.srow__glyph .node.n3{animation-delay:1.1s}
@keyframes sparkIdle{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:.85;transform:scale(1.06)}}
@keyframes playIdle{0%,100%{transform:translateX(0)}50%{transform:translateX(1.1px)}}
@keyframes cursorIdle{0%,100%{transform:translate(0,0)}50%{transform:translate(1.5px,1.5px)}}
@keyframes nodeIdle{0%,100%{opacity:.5}50%{opacity:1}}

/* hover / open: the same idea, turned up */
.srow.is-open .spark{animation:sparkOn 1.5s ease-in-out infinite}
.srow.is-open .play{animation:playOn 1.7s var(--ease-inout) infinite}
.srow.is-open .cursor-arrow{animation:cursorOn 1.8s var(--ease-inout) infinite}
.srow.is-open .node{animation:nodeOn 1.5s ease-in-out infinite}
@keyframes sparkOn{0%,100%{opacity:.4;transform:scale(.82) rotate(0deg)}50%{opacity:1;transform:scale(1.2) rotate(90deg)}}
@keyframes playOn{0%,100%{transform:translateX(0) scale(1)}50%{transform:translateX(2.4px) scale(1.12)}}
@keyframes cursorOn{0%,100%{transform:translate(0,0)}50%{transform:translate(3px,3px)}}
@keyframes nodeOn{0%,100%{opacity:.45;transform:scale(.88)}50%{opacity:1;transform:scale(1.14)}}

.srow__title{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.5rem,4vw,3.3rem);
  letter-spacing:-.035em;line-height:1;transition:transform var(--dur-base) var(--ease-out)}
.srow.is-open .srow__title{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent;transform:translateX(8px)}
.srow__note{color:var(--bone-mute);font-size:var(--t-meta);max-width:30ch;text-align:right;
  opacity:.75;transition:opacity var(--dur-base) var(--ease-out)}
.srow.is-open .srow__note{opacity:1}
.srow__n{color:var(--bone-mute);transition:color var(--dur-base) var(--ease-out)}
.srow.is-open .srow__n{color:var(--orange)}
.srow__body{overflow:hidden;height:0}
.srow__list{display:flex;flex-wrap:wrap;gap:9px 10px;padding:0 0 clamp(26px,3.6vh,46px)}
.srow__list li{padding:.52em 1.05em;border:1px solid var(--hairline);color:var(--bone-dim);font-size:var(--t-meta);
  font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em}

/* ── 10 · PACKAGES ──────────────────────────────────────── */
.packages{max-width:var(--max);margin:0 auto}
/* padding-top leaves room for the flagship tag, which straddles the card edge */
.pk__grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(14px,1.5vw,24px);align-items:stretch;padding-top:18px}
.pk{position:relative;padding:clamp(28px,3.1vw,46px);background:var(--ink-panel);border:1px solid var(--hairline);
  display:flex;flex-direction:column;
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.pk::before{content:"";position:absolute;inset:0;z-index:0;opacity:0;pointer-events:none;
  background:radial-gradient(90% 60% at 50% 0%,rgba(176,38,240,.16),transparent 70%);
  transition:opacity var(--dur-base) var(--ease-out)}
.pk > *{position:relative;z-index:1}
.pk:hover{border-color:var(--hairline-hi);transform:translateY(-6px)}
.pk:hover::before{opacity:1}
.pk__rule{position:absolute;top:0;left:0;height:2px;width:100%;z-index:2;
  background:linear-gradient(90deg,var(--orange),transparent 62%);transform:scaleX(0);transform-origin:left;
  transition:transform .8s var(--ease-out)}
.pk:hover .pk__rule{transform:scaleX(1)}

.pk--flag{
  background:linear-gradient(var(--ink-panel),var(--ink-panel)) padding-box,var(--gradient) border-box;
  border:1px solid transparent;
  box-shadow:0 0 0 1px rgba(176,38,240,.1),0 32px 90px -44px rgba(176,38,240,.6);
  padding-top:clamp(42px,4.4vw,64px)}
.pk--flag::before{opacity:.55}
.pk--flag .pk__rule{background:linear-gradient(90deg,var(--orange),var(--grad-end) 70%);transform:scaleX(1)}
.pk__tag{position:absolute;top:0;left:50%;transform:translate(-50%,-50%);z-index:3;white-space:nowrap;
  padding:.5em 1.15em;background:var(--orange);color:var(--ink);font-family:'JetBrains Mono',monospace;
  font-size:.6rem;text-transform:uppercase;letter-spacing:.2em;
  box-shadow:0 8px 26px -10px rgba(255,138,43,.8)}
/* Package mark. Sits above the name, inherits the card's colour so it lifts with
   the rest of the card on hover, and goes full-gradient on the flagship. */
.pk__icon{display:block;width:clamp(38px,3.3vw,48px);margin-bottom:clamp(14px,1.8vh,20px);
  color:var(--bone-mute);opacity:.72;
  transition:color var(--dur-base) var(--ease-out),opacity var(--dur-base) var(--ease-out),
             transform var(--dur-base) var(--ease-out)}
.pk__icon svg{display:block;width:100%;height:auto}
.pk:hover .pk__icon{color:var(--grad-end);opacity:1;transform:translateY(-3px)}
.pk--flag .pk__icon{color:var(--grad-mid);opacity:1}
.pk--flag:hover .pk__icon{color:var(--orange)}
.pk__name{font-family:'Archivo',sans-serif;font-weight:800;font-size:var(--t-h3);letter-spacing:-.03em}
/* "Kause בהתאמה אישית" is far longer than "Kause Custom" — let it wrap cleanly
   rather than forcing a smaller size on every card. */
[dir="rtl"] .pk__name{font-size:clamp(1.3rem,2.2vw,1.85rem);line-height:1.25;text-wrap:balance}
.pk__for{margin-top:12px;color:var(--bone-dim);max-width:34ch}
.pk__price{margin-top:clamp(18px,2.6vh,28px);padding-top:clamp(18px,2.6vh,28px);border-top:1px solid var(--hairline);
  font-family:'Archivo',sans-serif;font-weight:700;font-size:1.3rem;letter-spacing:-.02em}
.pk--flag .pk__price{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.pk__list{margin-top:clamp(18px,2.6vh,28px);display:flex;flex-direction:column;gap:10px;flex:1}
.pk__list li{position:relative;padding-left:20px;color:var(--bone-dim);font-size:calc(var(--t-body) * .97)}
.pk__list li::before{content:"";position:absolute;left:0;top:.62em;width:7px;height:1px;background:var(--grad-mid)}
.pk--flag .pk__list li::before{background:var(--orange)}
.pk .btn{margin-top:clamp(24px,3.4vh,38px);width:100%}

/* big "browse individual services" */
.svc-cta{position:relative;display:flex;align-items:center;justify-content:space-between;gap:clamp(20px,4vw,60px);
  margin-top:clamp(36px,5.5vh,70px);padding:clamp(24px,3.2vw,44px) clamp(24px,3.4vw,52px);overflow:hidden;
  background:linear-gradient(100deg,rgba(255,138,43,.09),rgba(176,38,240,.07) 55%,transparent);
  border:1px solid var(--orange-dim);
  transition:border-color var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.svc-cta::before{content:"";position:absolute;inset:0;background:var(--orange);opacity:0;
  transition:opacity var(--dur-base) var(--ease-out)}
.svc-cta:hover{border-color:var(--orange);transform:translateY(-4px)}
.svc-cta:hover::before{opacity:.06}
.svc-cta__l{position:relative;display:block}
.svc-cta__k{display:block;color:var(--orange)}
.svc-cta__t{display:block;margin-top:10px;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.5rem,3.2vw,2.7rem);letter-spacing:-.035em;line-height:1}
.svc-cta__s{display:block;margin-top:12px;color:var(--bone-dim);max-width:58ch}
.svc-cta__r{position:relative;flex:none;display:grid;place-items:center;width:clamp(52px,5vw,70px);height:clamp(52px,5vw,70px);
  border-radius:50%;border:1px solid var(--orange-dim);color:var(--orange);
  transition:background var(--dur-base) var(--ease-out),color var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.svc-cta__r i{font-style:normal;font-size:1.3rem;transition:transform var(--dur-base) var(--ease-out)}
.svc-cta:hover .svc-cta__r{background:var(--orange);color:var(--ink);border-color:var(--orange)}
.svc-cta:hover .svc-cta__r i{transform:translateX(4px)}

/* ScrollTrigger inserts its own spacer around a pinned element — it must
   carry the page ground or a band of browser-default white flashes through. */
.pin-spacer{background:var(--ink)}

/* ── 11 · WORK ──────────────────────────────────────────── */
.work{padding-left:0;padding-right:0;overflow:hidden}
.work__head{padding:0 var(--gutter)}
.work__viewport{overflow:hidden}
.work__track{display:flex;gap:clamp(14px,1.8vw,28px);padding:0 var(--gutter);will-change:transform}
.wcard{position:relative;flex:none;width:min(62vw,720px);aspect-ratio:16/10;overflow:hidden;
  border:1px solid var(--hairline);background:var(--ink-panel);
  transition:opacity var(--dur-base) var(--ease-out),border-color var(--dur-base) var(--ease-out)}
.work__track:hover .wcard{opacity:.34}
.work__track .wcard:hover{opacity:1;border-color:var(--hairline-hi)}
.wcard__bg{position:absolute;inset:0;background-size:cover;background-position:center;opacity:.28;filter:grayscale(1) contrast(1.2)}
.wcard__video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  filter:saturate(.7) contrast(1.06) brightness(.58)}
/* A clip that fails to load gets out of the way so the textured fallback shows */
.wcard__video.is-failed{display:none}
.wcard__wash{position:absolute;inset:0}
.wcard__n{position:absolute;top:clamp(18px,2.2vw,30px);left:clamp(18px,2.2vw,30px);color:var(--bone-mute)}
.wcard__dot{position:absolute;top:clamp(20px,2.3vw,32px);right:clamp(18px,2.2vw,30px);width:9px;height:11px;
  border-radius:58% 42% 63% 37%/47% 58% 42% 53%;
  background:radial-gradient(circle at 32% 26%,var(--orange-lit),var(--orange) 52%,var(--orange-deep))}
.wcard__body{position:absolute;left:clamp(18px,2.2vw,30px);right:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px)}
.wcard__title{font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(1.3rem,2.5vw,2.1rem);letter-spacing:-.03em;line-height:1}
.wcard__desc{margin-top:9px;color:var(--bone-dim);max-width:38ch;font-size:calc(var(--t-body) * .95)}
.wcard--end{display:grid;place-items:center;text-align:center;width:min(44vw,460px)}
.wcard--end p{position:relative;font-family:'Archivo',sans-serif;font-weight:800;
  font-size:clamp(1.4rem,2.7vw,2.2rem);letter-spacing:-.03em;line-height:1.05;max-width:12ch}
.wcard--end .mono{position:relative;display:block;margin-top:18px;color:var(--orange)}

/* Hovering scroller — floats over the reel, and you can drag it to move through the work */
.work__scroll{position:absolute;z-index:8;left:50%;bottom:clamp(20px,4vh,46px);transform:translateX(-50%);
  width:min(54vw,540px);height:34px;display:flex;align-items:center;
  cursor:grab;touch-action:none;-webkit-user-select:none;user-select:none}
.work__scroll::before{content:"";position:absolute;left:0;right:0;top:50%;height:3px;margin-top:-1.5px;
  border-radius:3px;background:rgba(242,240,237,.1);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.work__thumb{position:relative;height:3px;width:20%;border-radius:3px;pointer-events:none;
  background:linear-gradient(90deg,rgba(242,240,237,.96),rgba(242,240,237,.42));
  box-shadow:0 0 20px rgba(242,240,237,.34);
  transition:height .28s var(--ease-out),box-shadow .28s var(--ease-out)}
.work__scroll:hover .work__thumb,.work__scroll.is-drag .work__thumb{height:6px;
  box-shadow:0 0 30px rgba(242,240,237,.55)}
.work__scroll.is-drag{cursor:grabbing}

/* ── 11b · WORK MODAL ───────────────────────────────────── */
.wcard{cursor:pointer}
.wcard__open{position:absolute;z-index:3;left:clamp(18px,2.2vw,30px);bottom:clamp(18px,2.2vw,30px);
  display:flex;align-items:center;gap:9px;color:var(--bone);opacity:0;transform:translateY(8px);
  transition:opacity var(--dur-base) var(--ease-out),transform var(--dur-base) var(--ease-out)}
.wcard:hover .wcard__open,.wcard:focus-visible .wcard__open{opacity:1;transform:none}
.wcard:hover .wcard__body,.wcard:focus-visible .wcard__body{transform:translateY(-26px)}
.wcard__body{transition:transform var(--dur-base) var(--ease-out)}

.pm{position:fixed;inset:0;z-index:9994;display:grid;place-items:center;padding:clamp(12px,3vw,40px)}
.pm[hidden]{display:none}
.pm__scrim{position:absolute;inset:0;background:rgba(3,3,4,.82);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);opacity:0}
.pm__panel{position:relative;width:min(1180px,100%);max-height:92dvh;display:flex;flex-direction:column;
  background:var(--ink-panel);border:1px solid var(--hairline-hi);opacity:0;transform:translateY(24px) scale(.985)}
.pm__head{display:flex;align-items:flex-start;justify-content:space-between;gap:20px;flex:none;
  padding:clamp(20px,2.6vw,34px) clamp(20px,2.8vw,38px);border-bottom:1px solid var(--hairline)}
.pm__n{display:block;color:var(--bone-mute);margin-bottom:8px}
.pm__title{font-size:clamp(1.4rem,2.8vw,2.3rem);letter-spacing:-.03em}
.pm__close{flex:none;display:grid;place-items:center;width:42px;height:42px;border-radius:50%;
  border:1px solid var(--hairline-hi);color:var(--bone-dim);cursor:pointer;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.pm__close svg{width:19px;height:19px}
.pm__close:hover{color:var(--ink);background:var(--bone);border-color:transparent}

/* min-height:0 — a column flex item defaults to min-height:auto and refuses to
   shrink below its content, which would stop overflow-y from ever engaging.
   The markup also carries data-lenis-prevent, or Lenis eats the touchmove. */
.pm__body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;
  -webkit-overflow-scrolling:touch;touch-action:pan-y;
  padding:clamp(18px,2.4vw,30px) clamp(20px,2.8vw,38px) clamp(24px,3vw,38px);
  display:flex;flex-direction:column;gap:clamp(20px,2.6vw,34px)}
.pmi__cap{display:flex;align-items:baseline;gap:12px;margin-bottom:11px;flex-wrap:wrap}
.pmi__cap b{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1rem,1.5vw,1.2rem);letter-spacing:-.02em}
.pmi__cap span{color:var(--bone-mute);font-size:var(--t-meta)}
.pmi__media{position:relative;border:1px solid var(--hairline);background:var(--ink);overflow:hidden}
.pmi__media video,.pmi__media img{display:block;width:100%;height:auto;max-height:70dvh;object-fit:contain;background:#000}

/* live demo in a browser frame */
.pmi__frame{border:1px solid var(--hairline);background:var(--ink)}
.pmi__bar{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--hairline);
  background:rgba(242,240,237,.03)}
.pmi__bar i{width:9px;height:9px;border-radius:50%;background:var(--hairline-hi);flex:none}
.pmi__url{flex:1;text-align:center;color:var(--bone-mute);font-family:'JetBrains Mono',monospace;
  font-size:.66rem;letter-spacing:.1em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmi__frame iframe{display:block;width:100%;height:min(66dvh,620px);border:0;background:#fff}
.pmi__frame--app iframe{height:min(66dvh,640px);background:#0E1015}

.pm__foot{flex:none;display:flex;align-items:center;justify-content:space-between;gap:18px;flex-wrap:wrap;
  padding:clamp(16px,2vw,24px) clamp(20px,2.8vw,38px);border-top:1px solid var(--hairline)}
.pm__note{color:var(--bone-mute);max-width:56ch;line-height:1.7}

html.pm-open,html.pm-open body{overflow:hidden}

@media (max-width:760px){
  .pm__panel{max-height:94dvh}
  .pmi__frame iframe{height:60dvh}
  .pm__foot{flex-direction:column;align-items:stretch}
  .pm__foot .btn{width:100%}
}
[dir="rtl"] .wcard__open{left:auto;right:clamp(18px,2.2vw,30px)}

/* ── 12 · ABOUT ─────────────────────────────────────────── */
.about{background:var(--ink-raised);border-top:1px solid var(--hairline);border-bottom:1px solid var(--hairline);
  padding-top:clamp(92px,13vh,168px);padding-bottom:clamp(92px,13vh,168px)}
.about::before{content:"";position:absolute;inset:0;background:url("assets/img/brand-card.jpg") center/cover;
  opacity:.028;filter:grayscale(1);pointer-events:none}
.about > .eyebrow{position:relative;max-width:var(--max);margin-left:auto;margin-right:auto}
.about__grid{position:relative;max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:45fr 55fr;
  gap:clamp(34px,6vw,96px);align-items:center}
.about__media{position:relative;overflow:hidden;border:1px solid rgba(242,240,237,.1)}
.about__media::after{content:"";position:absolute;left:0;top:0;width:1px;height:38%;
  background:linear-gradient(180deg,var(--grad-mid),transparent)}
.about__media img{width:100%;height:100%;object-fit:cover;filter:grayscale(1) contrast(1.06);will-change:transform}
.about__copy{max-width:54ch}
.about__title{font-size:clamp(2.1rem,4.6vw,4rem);margin-bottom:clamp(24px,3.4vh,42px)}
.about__copy p{color:var(--bone-dim);margin-bottom:1.1em;max-width:60ch;
  font-size:clamp(1.22rem,1.62vw,1.56rem);line-height:1.6}
.about__tags{margin-top:clamp(30px,4.4vh,50px);border-top:1px solid var(--hairline)}
.about__tags li{border-bottom:1px solid var(--hairline);padding:1.15em 0;color:var(--bone-dim)}
.about__tags .mono{font-size:calc(var(--t-meta) * 1.3);letter-spacing:.17em}
.about__sig{display:block;margin-top:clamp(22px,3.2vh,38px);color:var(--bone-mute);
  font-size:calc(var(--t-meta) * 1.2)}
/* Hebrew needs a touch more size at small settings to stay comfortable */
[dir="rtl"] .about__copy p{font-size:clamp(1.3rem,1.76vw,1.68rem);line-height:1.66}
[dir="rtl"] .about__tags .mono{font-size:calc(var(--t-meta) * 1.5);letter-spacing:.02em}
[dir="rtl"] .about__sig{font-size:calc(var(--t-meta) * 1.36)}

/* ── 13 · WHY ───────────────────────────────────────────── */
.why{max-width:var(--max);margin:0 auto}
.why__heads{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);margin-bottom:clamp(26px,3.8vh,44px)}
.why__h{font-size:clamp(1.2rem,2.2vw,1.9rem);letter-spacing:-.03em}
.why__h--old{color:var(--bone-mute)}
.why__rows li{display:grid;grid-template-columns:1fr 1fr;gap:clamp(24px,5vw,80px);
  padding:clamp(16px,2.2vh,26px) 0;border-top:1px solid var(--hairline)}
.why__rows li:last-child{border-bottom:1px solid var(--hairline)}
.why__old{color:var(--bone-mute);text-decoration:line-through;text-decoration-color:rgba(242,240,237,.2)}
.why__new{color:var(--bone);font-weight:500}

/* ── 14 · TIMELINE ──────────────────────────────────────── */
.process{max-width:var(--max);margin:0 auto}
.tl{position:relative}
.tl__rail{position:absolute;left:0;right:0;top:30px;height:1px;background:var(--hairline)}
.tl__fill{display:block;height:100%;width:100%;background:var(--gradient);transform:scaleX(0);transform-origin:left;
  box-shadow:0 0 12px rgba(176,38,240,.55)}
.tl__list{display:grid;grid-template-columns:repeat(5,1fr);gap:clamp(12px,1.6vw,28px)}
.tl__item{position:relative;padding:74px clamp(8px,1vw,18px) 0 0}
/* stages arrive one after another as the playhead reaches them */
html.js-ready .tl__item{opacity:0;transform:translateY(28px);
  transition:opacity .75s var(--ease-out),transform .75s var(--ease-out)}
html.js-ready .tl__item.is-on{opacity:1;transform:none}
.tl__node{position:absolute;top:24px;left:0;width:13px;height:13px;border-radius:50%;
  background:var(--ink);border:1px solid var(--hairline-hi);transform:scale(.62);
  transition:transform .55s var(--ease-out),background .55s var(--ease-out),border-color .55s var(--ease-out),box-shadow .55s var(--ease-out)}
.tl__item.is-on .tl__node{transform:scale(1);background:var(--gradient);border-color:transparent;
  box-shadow:0 0 0 6px rgba(176,38,240,.12),0 0 20px rgba(176,38,240,.5)}
.tl__glyph{position:absolute;top:52px;right:clamp(8px,1vw,18px);width:clamp(34px,2.9vw,44px);
  color:var(--bone-mute);opacity:.5;
  transition:color .6s var(--ease-out),opacity .6s var(--ease-out),transform .6s var(--ease-out)}
.tl__glyph svg{width:100%;height:auto}
.tl__item.is-on .tl__glyph{color:var(--grad-end);opacity:1;transform:translateY(-3px)}
.tl__typing,.tl__check,.tl__rec,.tl__flame,.tl__trend{opacity:0;transition:opacity .4s var(--ease-out) .5s}
.tl__item.is-on .tl__typing{opacity:1;animation:blink 1.3s steps(1) infinite}
.tl__item.is-on .tl__check{opacity:1;stroke-dasharray:22;stroke-dashoffset:22;animation:draw .7s var(--ease-out) .55s forwards}
.tl__item.is-on .tl__rec{opacity:1;animation:rec 1.6s ease-in-out infinite}
.tl__item.is-on .tl__flame{opacity:1;animation:flame 1.4s ease-in-out infinite;color:var(--orange)}
.tl__item.is-on .tl__trend{opacity:1;stroke-dasharray:46;stroke-dashoffset:46;animation:draw 1s var(--ease-out) .4s forwards}
@keyframes blink{0%,49%{opacity:1}50%,100%{opacity:.25}}
@keyframes draw{to{stroke-dashoffset:0}}
@keyframes rec{0%,100%{opacity:.35}50%{opacity:1}}
@keyframes flame{0%,100%{transform:translateY(0);opacity:.55}50%{transform:translateY(3px);opacity:1}}
.tl__n{display:block;color:var(--bone-mute);transition:color .55s var(--ease-out)}
.tl__item.is-on .tl__n{color:var(--orange)}
.tl__item h3{margin-top:12px;font-size:clamp(1.05rem,1.6vw,1.5rem);letter-spacing:-.03em;
  color:var(--bone-mute);transition:color .55s var(--ease-out)}
.tl__item.is-on h3{color:var(--bone)}
.tl__item p{margin-top:12px;color:var(--bone-mute);font-size:calc(var(--t-body) * .94);max-width:30ch;
  opacity:.5;transition:opacity .6s var(--ease-out)}
.tl__item.is-on p{opacity:1;color:var(--bone-dim)}
.tl__note{margin-top:clamp(32px,4.6vh,56px);color:var(--bone-mute)}

/* ── 15 · CTA ───────────────────────────────────────────── */
.cta{min-height:clamp(540px,72vh,800px);display:grid;place-items:center;text-align:center;overflow:hidden;
  border-top:1px solid var(--hairline);padding-block:clamp(60px,8vh,110px)}
.cta__sky{position:absolute;inset:0;overflow:hidden}
.cta__rings{position:absolute;left:50%;bottom:-58%;width:170vw;height:170vw;transform:translateX(-50%);
  background:repeating-radial-gradient(circle at 50% 50%,transparent 0 62px,rgba(242,240,237,.03) 62px 63px);
  -webkit-mask-image:radial-gradient(circle at 50% 50%,#000 24%,transparent 66%);
  mask-image:radial-gradient(circle at 50% 50%,#000 24%,transparent 66%)}
.cta__horizon{position:absolute;left:50%;bottom:-30%;width:150vw;height:88vh;transform:translateX(-50%);
  background:radial-gradient(ellipse at 50% 100%,rgba(233,60,240,.34),rgba(122,31,214,.2) 36%,transparent 66%);
  filter:blur(8px)}
.cta__stars{position:absolute;inset:0;width:100%;height:100%}
.cta__inner{position:relative;max-width:var(--max);padding:0 var(--gutter)}
.cta__title{font-size:var(--t-mega);line-height:.86}
.cta__lead{margin:clamp(22px,3.4vh,40px) auto 0;color:var(--bone-dim);font-size:var(--t-lead);max-width:40ch}
.cta .btn{margin-top:clamp(28px,4.2vh,48px)}
.cta__alt{margin-top:clamp(18px,2.6vh,28px);color:var(--bone-mute);font-size:var(--t-meta)}
.cta__alt a{border-bottom:1px solid var(--hairline-hi);padding-bottom:2px}
.cta__alt a:hover{color:var(--bone)}

/* ── 16 · FOOTER ────────────────────────────────────────── */
.footer{position:relative;z-index:1;border-top:1px solid var(--hairline);padding:clamp(34px,5vh,60px) var(--gutter) 0;overflow:hidden}
.footer__row{max-width:var(--max);margin:0 auto;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px}
.footer__brand{display:flex;align-items:center;gap:14px;color:var(--bone-mute)}
.footer__links{display:flex;gap:clamp(14px,2.4vw,32px);justify-content:center}
.footer__links a{position:relative;display:flex;align-items:center;gap:9px;color:var(--bone-dim);padding-bottom:4px;
  transition:color var(--dur-fast) var(--ease-out)}
.footer__links .ic{width:17px;height:17px}
.footer__links a::after{content:"";position:absolute;left:0;bottom:0;width:100%;height:1px;background:currentColor;
  transform:scaleX(0);transform-origin:left;transition:transform .4s var(--ease-out)}
.footer__links a:hover{color:var(--bone)}
.footer__links a:hover::after{transform:scaleX(1)}
/* Deliberately quieter than the social links beside it — a policy link should be
   findable, not competing with the contact buttons. */
.footer__privacy{color:var(--bone-mute);text-decoration:none;
  transition:color var(--dur-base) var(--ease-out)}
.footer__privacy:hover{color:var(--bone-dim)}
.footer__tag{text-align:right;color:var(--bone-mute)}
.footer__word{margin-top:clamp(22px,3.6vh,46px);overflow:hidden;line-height:.78}
.footer__word span{display:block;font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(4.4rem,20vw,19rem);
  letter-spacing:-.05em;color:transparent;-webkit-text-stroke:1px rgba(242,240,237,.09);white-space:nowrap;will-change:transform}

.sticky-cta{position:fixed;z-index:950;right:16px;bottom:calc(16px + env(safe-area-inset-bottom));
  display:none;align-items:center;padding:1em 1.6em;background:var(--gradient);color:var(--ink);
  opacity:0;transform:translateY(16px);pointer-events:none;
  transition:opacity .5s var(--ease-out),transform .5s var(--ease-out)}
.sticky-cta.is-in{opacity:1;transform:translateY(0);pointer-events:auto}

/* ═══ 17 · SERVICES PAGE ════════════════════════════════ */
.svc-head{max-width:var(--max);margin:0 auto;padding-top:clamp(88px,12vh,136px)}
.svc-back{display:inline-flex;align-items:center;gap:10px;color:var(--bone-mute);
  margin-bottom:clamp(30px,4.6vh,60px);transition:color var(--dur-fast) var(--ease-out)}
.svc-back i{font-style:normal;display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.svc-back:hover{color:var(--bone)}
.svc-back:hover i{transform:translateX(-6px)}
.svc-head h1{font-size:clamp(2.4rem,7vw,6.4rem);max-width:12ch}
.svc-head__lead{margin-top:clamp(20px,3vh,34px);color:var(--bone-dim);font-size:var(--t-lead);max-width:56ch}
.svc-note{display:inline-block;margin-top:clamp(20px,3vh,32px);padding:.7em 1.2em;
  border:1px solid var(--orange-dim);color:var(--orange);background:rgba(255,138,43,.05)}

.svc-cat{position:relative;max-width:var(--max);margin:0 auto;padding-top:clamp(36px,4.8vh,62px)}
.svc-cat__ghost{position:absolute;left:calc(var(--gutter) * -1);top:clamp(30px,4vh,58px);z-index:0;
  font-family:'Archivo',sans-serif;font-weight:800;font-size:clamp(6rem,15vw,13rem);line-height:.7;
  letter-spacing:-.06em;color:rgba(242,240,237,.038);pointer-events:none;user-select:none}
.svc-cat__head{position:relative;z-index:1;border-top:1px solid var(--hairline-hi);padding-top:clamp(15px,2vh,24px);
  display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:14px 40px}
.svc-cat__n{color:var(--bone-mute)}
.svc-cat__title{font-size:clamp(1.6rem,3.6vw,3.2rem);letter-spacing:-.035em;margin-top:10px}
.svc-cat__desc{color:var(--bone-dim);max-width:36ch;text-align:right}

.svc-rows{position:relative;z-index:1;margin-top:clamp(14px,2vh,24px)}
.svc-row{display:grid;grid-template-columns:minmax(0,1fr) auto 1.6rem;align-items:center;
  gap:clamp(16px,2.6vw,44px);padding:clamp(11px,1.5vh,17px) clamp(12px,1.4vw,20px);
  margin-inline:clamp(-12px,-1.4vw,-20px);border-top:1px solid var(--hairline);
  transition:background var(--dur-fast) var(--ease-out)}
.svc-rows .svc-row:last-child{border-bottom:1px solid var(--hairline)}
.svc-row:hover{background:rgba(242,240,237,.025)}
.svc-row__name{font-family:'Archivo',sans-serif;font-weight:700;font-size:clamp(1.02rem,1.5vw,1.42rem);
  letter-spacing:-.025em;line-height:1.15}
.svc-row:hover .svc-row__name{background:var(--gradient);-webkit-background-clip:text;background-clip:text;color:transparent}
.svc-row__desc{display:block;margin-top:6px;color:var(--bone-mute);font-family:'JetBrains Mono',monospace;
  font-size:var(--t-meta);text-transform:uppercase;letter-spacing:.14em;line-height:1.65;font-weight:400}
.svc-row__price{text-align:right;font-family:'Archivo',sans-serif;font-weight:700;
  font-size:clamp(1.02rem,1.45vw,1.36rem);letter-spacing:-.02em;color:var(--bone);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.svc-row__go{text-align:right;color:var(--orange);opacity:0;transform:translateX(-8px);
  transition:opacity var(--dur-fast) var(--ease-out),transform var(--dur-fast) var(--ease-out)}
.svc-row:hover .svc-row__go{opacity:1;transform:translateX(0)}

.svc-close{max-width:var(--max);margin:0 auto;text-align:center;padding-top:clamp(62px,8.5vh,108px)}
.svc-close h2{font-size:var(--t-h2);max-width:16ch;margin-inline:auto}
.svc-close p{margin-top:clamp(18px,2.6vh,32px);color:var(--bone-dim);max-width:50ch;margin-inline:auto}
.svc-close__actions{margin-top:clamp(28px,4.2vh,46px);display:flex;flex-wrap:wrap;gap:16px;justify-content:center;align-items:center}
.morelink{display:inline-flex;align-items:center;gap:10px;color:var(--bone-dim);transition:color var(--dur-fast) var(--ease-out)}
.morelink i{font-style:normal;display:inline-block;transition:transform var(--dur-fast) var(--ease-out)}
.morelink:hover{color:var(--bone)}
.morelink:hover i{transform:translateX(-6px)}

/* ═══ 17b · HEBREW / RTL ════════════════════════════════ */

.langbtn{display:grid;place-items:center;min-width:38px;height:38px;padding:0 10px;
  border:1px solid var(--hairline-hi);border-radius:19px;color:var(--bone-dim);cursor:pointer;
  letter-spacing:.14em;line-height:1;
  transition:color var(--dur-fast) var(--ease-out),border-color var(--dur-fast) var(--ease-out),background var(--dur-fast) var(--ease-out)}
.langbtn:hover{color:var(--ink);border-color:transparent;background:var(--gradient)}

/* In RTL, overflow-x:hidden on <body> alone does not stop the root from
   scrolling — the reel and marquee escape. `clip` stops it without turning
   <html> into a scroll container, which would break every pin. */
[dir="rtl"],[dir="rtl"] body{overflow-x:clip}

/* Hebrew typefaces. Archivo/Inter/JetBrains carry no Hebrew glyphs, so the
   browser was falling back to a system serif. These stacks keep the Latin
   faces first — per-glyph fallback means "Kause" stays Archivo inside a
   Hebrew sentence, and only the Hebrew characters resolve to Rubik/Assistant. */
[dir="rtl"] body{font-family:'Inter','Assistant',system-ui,sans-serif;letter-spacing:0}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3,
[dir="rtl"] .srow__title,[dir="rtl"] .pk__name,[dir="rtl"] .pk__price,
[dir="rtl"] .strip__num,[dir="rtl"] .wcard__title,[dir="rtl"] .wcard--end p,
[dir="rtl"] .svc-cta__t,[dir="rtl"] .svc-row__name,[dir="rtl"] .svc-row__price,
[dir="rtl"] .svc-cat__ghost,[dir="rtl"] .marquee__track span,
[dir="rtl"] .footer__word span{font-family:'Archivo','Rubik',system-ui,sans-serif}
[dir="rtl"] h1,[dir="rtl"] h2,[dir="rtl"] h3{letter-spacing:-.015em}
/* JetBrains first so Latin digits stay monospaced; Hebrew falls to Assistant.
   Hebrew has no case and reads badly at wide tracking, so it is pulled in. */
[dir="rtl"] .mono{font-family:'JetBrains Mono','Assistant',ui-monospace,monospace;letter-spacing:.06em}

/* Buttons and chips: clean modern Hebrew, no monospace, no faux-caps */
[dir="rtl"] .btn,
[dir="rtl"] .srow__list li,
[dir="rtl"] .sticky-cta .mono,
[dir="rtl"] .svc-cta__k,
[dir="rtl"] .about__tags .mono,
[dir="rtl"] .strip__label{
  font-family:'Assistant',system-ui,sans-serif;font-weight:600;
  letter-spacing:.012em;text-transform:none}
[dir="rtl"] .btn{font-size:calc(var(--t-meta) * 1.18)}
[dir="rtl"] .srow__list li,[dir="rtl"] .strip__label{font-size:calc(var(--t-meta) * 1.14);font-weight:400}


/* anything whose growth direction is baked into a transform-origin */
[dir="rtl"] .progress span,
[dir="rtl"] .btn::before,
[dir="rtl"] .srow::after,
[dir="rtl"] .tl__fill,
[dir="rtl"] .footer__links a::after{transform-origin:right}
[dir="rtl"] .pk__rule{background:linear-gradient(270deg,var(--orange),transparent 62%)}
[dir="rtl"] .pk--flag .pk__rule{background:linear-gradient(270deg,var(--orange),var(--grad-end) 70%)}
[dir="rtl"] .srow.is-open{background:linear-gradient(270deg,rgba(176,38,240,.05),transparent 62%)}
[dir="rtl"] .srow.is-open .srow__title{transform:translateX(-8px)}

/* arrows point the other way in RTL */
[dir="rtl"] .morelink i,[dir="rtl"] .svc-back i,
[dir="rtl"] .svc-cta__r i,[dir="rtl"] .svc-row__go{display:inline-block;transform:scaleX(-1)}
[dir="rtl"] .morelink:hover i{transform:scaleX(-1) translateX(-6px)}
[dir="rtl"] .svc-back:hover i{transform:scaleX(-1) translateX(-6px)}
[dir="rtl"] .svc-cta:hover .svc-cta__r i{transform:scaleX(-1) translateX(4px)}
[dir="rtl"] .svc-row:hover .svc-row__go{transform:scaleX(-1) translateX(0)}
[dir="rtl"] .svc-row__go{transform:scaleX(-1) translateX(8px)}

/* text alignment that was pinned to a physical side */
[dir="rtl"] .srow__head{text-align:right}          /* titles hug the right edge, next to the glyph */
[dir="rtl"] .srow__note,[dir="rtl"] .svc-cat__desc{text-align:left}
[dir="rtl"] .about__copy p,[dir="rtl"] .about__title,
[dir="rtl"] .pk__for,[dir="rtl"] .pk__list li{text-align:right}

/* bullet markers move to the right of their text */
[dir="rtl"] .pk__list li{padding-left:0;padding-right:20px}
[dir="rtl"] .pk__list li::before{left:auto;right:0}
[dir="rtl"] .svc-row__price{text-align:left}
/* direction:ltr, not just text-align. The tagline is Latin with a trailing full
   stop; in an RTL paragraph the bidi algorithm treats that neutral period as
   part of the surrounding Hebrew run and flips it to the left, so it rendered
   ".BEKAUSE WE'RE BETTER". Same fix the hero headline and marquee already use. */
[dir="rtl"] .footer__tag{text-align:left;direction:ltr}

/* physically positioned decoration */
[dir="rtl"] .about__media::after{left:auto;right:0}
[dir="rtl"] .svc-cat__ghost{left:auto;right:calc(var(--gutter) * -1)}
[dir="rtl"] .tl__node{left:auto;right:0}
[dir="rtl"] .tl__glyph{right:auto;left:clamp(8px,1vw,18px)}
[dir="rtl"] .tl__item{padding:74px 0 0 clamp(8px,1vw,18px)}
[dir="rtl"] .rw{transform-origin:right center}

/* The wordmark is English. Character splitting turns each letter into an
   inline-block, and RTL lays inline-blocks out right-to-left — so "BeKause"
   rendered as "esuaKeB". Force LTR on Latin-content headings. */
[dir="rtl"] .hero__title{direction:ltr}

/* Cell dividers sit on the inline-start edge, which is the RIGHT in RTL.
   Left borders left the 3|6 gap undrawn and hung a stray rule off the end. */
[dir="rtl"] .strip__cell{border-left:0;border-right:1px solid var(--hairline)}
[dir="rtl"] .strip__cell:first-child{border-right:0}

/* Service descriptions and category labels: clean Hebrew, not tracked mono */
[dir="rtl"] .svc-row__desc,[dir="rtl"] .svc-cat__n{
  font-family:'Assistant',system-ui,sans-serif;font-weight:400;
  letter-spacing:.012em;text-transform:none;font-size:calc(var(--t-meta) * 1.12)}

/* The reel travels right-to-left in Hebrew; the JS flips the transform sign.
   The marquee stays LTR — it is decorative and its loop maths assumes it. */
[dir="rtl"] .marquee{direction:ltr}
[dir="rtl"] .wcard__n{left:auto;right:clamp(18px,2.2vw,30px)}
[dir="rtl"] .wcard__dot{right:auto;left:clamp(18px,2.2vw,30px)}

@media (max-width:1180px){
  [dir="rtl"] .tl__item{padding:58px 0 0 clamp(8px,1vw,18px)}
  [dir="rtl"] .tl__node{right:0;left:auto}
}

/* ═══ 18 · RESPONSIVE ═══════════════════════════════════ */
@media (max-width:1180px){
  .tl__list{grid-template-columns:repeat(3,1fr);gap:clamp(20px,3vw,34px) clamp(14px,2vw,28px)}
  .tl__rail{display:none}
  .tl__item{padding-top:58px;border-top:1px solid var(--hairline)}
  .tl__node{top:-7px}
  .tl__glyph{top:34px}
}
@media (max-width:1100px){
  .pk__grid{grid-template-columns:1fr;gap:20px}
  .pk--flag{order:-1}
  .about__grid{grid-template-columns:1fr;gap:clamp(28px,5vh,52px)}
  .about__media{max-height:72vh}
  .svc-cta{flex-direction:column;align-items:flex-start;gap:24px}
}
@media (max-width:900px){
  .strip__grid{grid-template-columns:1fr 1fr}
  .strip__cell:nth-child(3){border-left:0}
  .strip__cell:nth-child(n+3){border-top:1px solid var(--hairline)}
  [dir="rtl"] .strip__cell:nth-child(3){border-right:0}
  .hero__title{font-size:clamp(2.6rem,13vw,4.6rem)}
  .hero__k{width:min(46vh,72vw)}
  .hero__scroll{display:none}
  .sticky-cta{display:flex}
  .srow__head{grid-template-columns:auto 1fr auto;gap:14px}
  .srow__note{display:none}
  .work__viewport{overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .work__viewport::-webkit-scrollbar{display:none}
  .wcard{width:82vw;scroll-snap-align:center}
  .work__track:hover .wcard{opacity:1}
  /* Two real columns, tighter gutter. The section IS the comparison — stacking it
     turns "the usual way vs the Kause way" into one undifferentiated list. */
  .why__heads,.why__rows li{grid-template-columns:1fr 1fr;gap:12px}
  .tl__list{grid-template-columns:1fr 1fr}
  .footer__row{grid-template-columns:1fr;justify-items:center;text-align:center;gap:22px}
  .footer__tag{text-align:center}
  .svc-cat__desc{text-align:left}
}
@media (max-width:680px){
  .svc-row{grid-template-columns:minmax(0,1fr) auto;gap:16px}
  .svc-row__go{display:none}
  .svc-cat__ghost{left:auto;right:0;top:10px;font-size:5.6rem}
  .tl__list{grid-template-columns:1fr}
  .tl__item p{max-width:46ch}
  .btn{width:100%}
  .hero__actions{flex-direction:column;width:100%}
  .svc-close__actions{flex-direction:column}
}
/* No 420px single-column override for the strip: the four proof points stay a
   2×2 block down to the narrowest phone, so they still read as a row of stats
   rather than four unrelated lines. The 900px rule above already handles it. */
@media (max-width:760px){
  /* Sections were ~170px apart on a phone (85px of padding top and bottom). */
  :root{--sect:clamp(44px,6vh,68px)}
  /* The hero centres its content in a full-screen box and .hero__scroll is
     hidden on phones, so ~250px of the lower half sat empty between the buttons
     and the stats. A slightly shorter hero closes most of that while keeping the
     full-bleed opening. */
  .hero{height:86vh;height:86dvh;min-height:470px}
  .strip__cell{padding-block:clamp(26px,3.4vh,40px)}
}
@media (max-height:640px){
  .hero__title{font-size:clamp(2rem,7vw,3.4rem)}
  .hero__lead{margin-top:14px;font-size:.92rem}
  .hero__actions{margin-top:20px}
  .hero__k{width:min(40vh,40vw)}
}

/* ═══ 18b · TOUCH TARGETS ═══════════════════════════════ */
/* Measured on a 360px device: the logo link was 22x23, the nav icons and the
   language toggle 38x38, the footer links 21px tall and the email link 16px.
   WCAG 2.5.5 asks for 44x44. Scoped to coarse pointers and expressed as
   min-size plus centring, so the mouse layout is untouched and nothing moves. */
@media (pointer: coarse){
  .nav__mark,.nav__links > a{
    min-width:44px;min-height:44px;
    display:inline-flex;align-items:center;justify-content:center}
  .footer__links a{min-height:44px;padding-bottom:0}
  .cta__alt a{display:inline-block;padding-block:14px}
  .footer__privacy{display:inline-flex;align-items:center;min-height:44px}
  .svc-back,.legal__back{min-height:44px}
}

/* ═══ 19 · REDUCED MOTION ═══════════════════════════════ */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important}
  .grain,.drop{animation:none}
  .preloader,.wipe{display:none!important}
  html.js-ready .ch,html.js-ready .li{transform:none!important}
  html.js-ready [data-reveal],html.js-ready [data-reveal-slow],html.js-ready .tl__item{
    opacity:1!important;transform:none!important;clip-path:none!important}
  .hero__scroll i::after{display:none}
  .work__viewport{overflow-x:auto}
  .tl__item{padding-top:58px;border-top:1px solid var(--hairline)}
  .tl__rail{display:none}
}

/* ═══ 20 · FORCED COLORS (Windows High Contrast) ═════════ */
/* Forced-colors substitutes system colours for `color` and `background-color`,
   but it does NOT substitute `background-image`. Anything painted with a
   gradient therefore keeps no background at all, and the decorative contour
   canvas behind the page drew straight through the flagship package card's
   text. Give every gradient-painted surface a real system background, and drop
   the decoration that only adds noise once the palette is overridden. */
@media (forced-colors: active){
  /* .pk--flag paints its fill and its gradient border with background-image. */
  .pk--flag{background:Canvas;border:1px solid CanvasText}
  .pk--flag .pk__rule,.pk .pk__rule{display:none}
  .pk__tag{background:Canvas;color:CanvasText;border:1px solid CanvasText;
    box-shadow:none}

  /* Purely decorative layers. */
  .topo,.grain,.hero__topo,.hero__glow,.hero__k,.cta__sky,.drop{display:none}

  /* Gradient-filled text falls back to the system foreground. */
  .grad,.strip__num,.eyebrow i,.footer__word span{
    background:none;-webkit-text-fill-color:CanvasText;color:CanvasText}

  /* Keep surfaces that sit on a tinted panel legible. */
  .srow__list li,.pm__panel,.legal__contact{background:Canvas;border:1px solid CanvasText}
}