:root{
  --white:#FFFFFF;
  --paper:#F1F1F0;
  --ink:#0E0E0E;
  --red:#FF4500;
  --grey:#969696;
  --line:color-mix(in srgb,var(--paper),#000 13%);
  --line-ink:rgba(255,255,255,.16);
  --line-red:rgba(255,255,255,.4);
  --line-red-v:rgba(255,255,255,.2);
  --on-ink:#FFFFFF;

  --font:'Schibsted Grotesk',system-ui,sans-serif;
  --font-he:'narkiss-tam','Schibsted Grotesk',sans-serif;
  --font-he-condensed:'narkiss-tam-condensed','Schibsted Grotesk',sans-serif;
  --fs-display:clamp(52px,8.9vw,150px);
  --fs-h2:clamp(34px,4.5vw,68px);
  --fs-h3:clamp(30px,3.6vw,54px);
  --fs-stat:clamp(46px,6.4vw,100px);
  --fs-lead:clamp(19px,1.55vw,23px);
  --fs-body:17px;
  --fs-small:14px;
  --fs-label:12px;

  --maxw:calc(1202px + 2 * var(--gutter));
  --gutter:40px;
  --gap:24px;
  --sec:clamp(80px,9vw,140px);
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
/* paper colour; the sheet's texture lies over everything below */
body{background-color:var(--paper)}
/* printed look: one sheet over the whole document, so the marks run through ink, colour and images and scroll with the page */
body::after{content:"";position:absolute;inset:0;z-index:80;pointer-events:none;background-image:url(paper-texture.svg);background-size:448px}
body{position:relative;margin:0;color:var(--ink);font-family:var(--font);font-size:var(--fs-body);line-height:1.6;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
section{overflow-x:clip}
a{color:inherit}
:lang(he){font-family:var(--font-he)}
img,svg{display:block}
h1,h2,h3,p,blockquote{margin:0}
.skip-link{position:absolute;left:-9999px}
.skip-link:focus{left:16px;top:16px;z-index:100;background:var(--ink);color:var(--white);padding:10px 14px}
:focus-visible{outline:3px solid var(--ink);outline-offset:3px}
.dark :focus-visible{outline-color:var(--white)}

.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gutter)}
.grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap)}

/* type */
.label{font-size:var(--fs-label);line-height:1.3;font-weight:600;letter-spacing:.09em;text-transform:uppercase}
h1{font-size:var(--fs-display);line-height:.9;font-weight:700;letter-spacing:-.05em}
h2{font-size:var(--fs-h2);line-height:1.02;font-weight:600;letter-spacing:-.035em;text-wrap:balance}
h3{font-size:var(--fs-h3);line-height:1.04;font-weight:600;letter-spacing:-.033em;text-wrap:balance}
h1 em,h2 em,h3 em{font-style:normal}
.lead{font-size:var(--fs-lead);line-height:1.45;letter-spacing:-.005em}

/* button — Figma 259:1190 */
.btn{display:inline-flex;align-items:center;background:var(--red);color:#000;text-decoration:none;font-weight:500;font-size:16px;line-height:30px;padding:20px 30px;white-space:nowrap;transition:background-color .15s,color .15s}
.btn > span{display:block;text-box:trim-both cap alphabetic}
.btn:hover{background:var(--ink);color:var(--white)}
.dark .btn:hover{background:var(--white);color:var(--ink)}

/* header — Figma 259:1056 (top of page) and 265:1210 (scrolled) */
.site-head{position:absolute;top:0;left:0;right:0}
/* the RGB logos sit above the paper texture: 85 is over its sheet (80) */
.brand{position:absolute;z-index:85;inset-inline-start:36px;top:36px;color:#1D1D1B}
.brand svg{display:block;width:108px;height:42px}
/* the open menu's logo lives outside .menu, whose own stacking would keep it under the texture */
.menu-brand{position:fixed;opacity:0;visibility:hidden;transition:opacity .28s,visibility .28s}
body.menu-open .menu-brand{opacity:1;visibility:visible}
body.menu-open .site-head .brand{visibility:hidden;transition:visibility 0s .28s}
.nav-links{position:absolute;z-index:40;inset-inline-end:90px;top:50px;display:flex;gap:19px;font-size:14px;font-weight:500;line-height:32px;white-space:nowrap}
.nav-links > *{text-box:trim-both cap alphabetic}
.nav-links a{color:#000;text-decoration:none}
.nav-links a:hover{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.lang{text-transform:uppercase}
html[lang="en"] .lang [lang="he"]{font-family:var(--font)}

/* menu button: appears top-right once the proposal button docks top-left */
.fab{position:fixed;inset-inline-end:20px;top:28px;width:48px;height:48px;padding:0;border:0;background:none;cursor:pointer;z-index:70;mix-blend-mode:difference;opacity:0;visibility:hidden;transition:opacity .25s,visibility .25s}
body.is-docked .fab,body.menu-open .fab{opacity:1;visibility:visible}
.fab img{width:48px;height:48px;filter:invert(1);transition:opacity .2s}
.fab .x{position:absolute;inset:0;opacity:0;transition:opacity .2s}
.fab .x span{position:absolute;left:6.375px;right:6.375px;top:23.25px;height:1.5px;border-radius:2px;background:#fff}
.fab .x span:first-child{transform:rotate(45deg)}
.fab .x span:last-child{transform:rotate(-45deg)}
body.menu-open .fab img{opacity:0}
body.menu-open .fab .x{opacity:1}
.hero-btn.docked{position:fixed;top:27px;inset-inline-start:25px;z-index:70}
/* the open menu has the logo in that corner and its own proposal button */
body.menu-open .hero-btn.docked{opacity:0;visibility:hidden}
/* over the red band: the docked button would vanish into it, and the blended menu icon would turn cyan */
body.over-red:not(.menu-open) .hero-btn.docked{background:var(--ink);color:var(--white)}
body.over-red:not(.menu-open) .hero-btn.docked:hover{background:var(--white);color:var(--ink)}
body.over-red:not(.menu-open) .fab{mix-blend-mode:normal}
body.over-red:not(.menu-open) .fab img{filter:none}

/* menu overlay */
/* a white sheet that drops from the top, with the page still there dimmed below it. It closes by fading where it is, then resets out of sight */
.menu{position:fixed;inset:0;z-index:60;background:rgba(14,14,14,0);visibility:hidden;transition:background-color .35s ease,visibility .35s}
.menu.open{background:rgba(14,14,14,.45);visibility:visible}
.menu-sheet{max-height:100%;overflow:auto;background:var(--white);opacity:0;translate:0 -14px;transform:translateY(-100%);transition:opacity .35s ease,translate .35s ease,transform 0s .35s}
.menu.open .menu-sheet{opacity:1;translate:0 0;transform:none;transition:opacity 0s,translate 0s,transform .55s cubic-bezier(.16,1,.3,1)}
.menu-inner{padding-top:120px;padding-bottom:48px;opacity:0;transition:opacity .35s}
.menu.open .menu-inner{opacity:1;transition:opacity .35s .15s}
@media (prefers-reduced-motion:reduce){.menu,.menu-sheet,.menu.open .menu-sheet,.menu-inner,.menu.open .menu-inner,.fab img,.fab .x{transition:none}}
.menu-links{grid-column:1/9;display:flex;flex-direction:column}
.menu-links a{font-size:clamp(36px,5.6vw,84px);line-height:1.08;font-weight:700;letter-spacing:-.045em;text-decoration:none;padding:4px 0;color:var(--ink);transition:color .15s}
.menu-links a:hover{color:var(--red)}
.menu-links a:hover{color:var(--ink)}
.menu-side{grid-column:9/13;align-self:end;display:flex;flex-direction:column;align-items:flex-start;gap:16px}

/* hero */
.hero{padding-top:173px}
/* four set lines, "us." alone with "to" on the last one */
.hero h1{font-size:min(130px,8.125vw);line-height:1;letter-spacing:-.0462em;margin-inline-start:-.0462em;text-box:trim-both cap alphabetic}
.hero h1 span{display:block;white-space:nowrap}
.hero h1 .hl{color:var(--red)}
.hero-foot{margin-top:137px;border-top:1px solid var(--ink);padding:26px 0 64px;display:flex;flex-direction:column;align-items:flex-start;gap:32px}
.hero-copy{display:contents}
.hero-sub{max-width:758px;font-size:23px;line-height:33px;letter-spacing:-.01em;color:#000;text-box:trim-both cap alphabetic}
.since{display:block;order:2;font-size:15px;font-weight:600;line-height:33px;letter-spacing:-.01em;color:#000;text-box:trim-both cap alphabetic}
.cta-slot{flex:none;order:1}

/* logos */
.dark{background:var(--ink);color:var(--on-ink)}
.logos{background:var(--red);padding:clamp(64px,7vw,104px) 0}
.logos-lede{grid-column:1/7;font-size:clamp(24px,2.3vw,34px);line-height:1.15;font-weight:500;letter-spacing:-.02em;margin-bottom:clamp(36px,4vw,56px)}
.logo-grid{--logo-line:var(--line-red);--logo-rule:var(--line-red-v);display:grid;grid-template-columns:repeat(6,1fr);border-inline-end:1px solid var(--logo-rule);border-bottom:1px solid var(--logo-line)}
.logo-grid .cell{position:relative;border-top:1px solid var(--logo-line);height:clamp(120px,11.5vw,168px);display:flex;align-items:center;justify-content:center;padding:0 8px}
/* closed cells: each one draws its top and left, the grid draws the outer right and bottom */
.logo-grid .cell::after{content:"";position:absolute;inset-inline-start:0;top:0;bottom:0;width:1px;background:var(--logo-rule)}
.logo-grid img{height:clamp(52px,5.7vw,84px);width:auto;max-width:100%;object-fit:contain}

/* sections */
.sec{padding:var(--sec) 0}
.sec + .sec{padding-top:0}
.sec-top{border-top:1px solid var(--ink);padding-top:28px}
.rail{grid-column:1/4;padding-top:2px} /* optical: the label lines up with the large text beside it */
.rail .label{color:var(--ink);position:sticky;top:104px}
.main{grid-column:4/13}

/* case study */
.feature h2{max-width:20ch}
.feature-body{margin-top:clamp(40px,4.5vw,64px)}
.feature-copy{grid-column:4/9}
.feature-copy p + p{margin-top:1em}
.feature-copy p{color:var(--ink)}
.feature-foot .text-link{grid-column:4/13;justify-self:start;margin-top:clamp(28px,3.2vw,48px)}
.text-link{display:inline-block;margin-top:28px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px;text-decoration-color:currentColor;transition:text-decoration-color .15s}
.text-link .arr{display:inline-block;margin-inline-start:6px;transition:transform .15s}
.text-link:hover{text-decoration-color:currentColor}
.text-link:hover .arr{transform:translateX(3px)}
/* one voice for every quote */
.pquote,.q blockquote{font-size:clamp(21px,1.75vw,25px);line-height:1.24;font-weight:500;letter-spacing:-.022em}
.pquote{grid-column:10/13;color:var(--red)}
.pquote .by{display:block;margin-top:18px;font-size:var(--fs-small);font-weight:400;color:var(--ink);letter-spacing:0}
.stats{display:grid;grid-template-columns:repeat(4,1fr);margin-top:clamp(32px,3.2vw,48px);border-top:1px solid var(--line)}
.stat{padding:24px 0 0;padding-inline-end:var(--gap)}
.stat + .stat{border-inline-start:1px solid var(--line);padding-inline-start:var(--gap)}
.stat .n{font-size:var(--fs-stat);line-height:.95;font-weight:700;letter-spacing:-.05em;font-variant-numeric:tabular-nums;white-space:nowrap}
.stat .t{margin-top:12px;font-size:var(--fs-small);color:var(--ink)}

/* why us */
.usp .main h3{max-width:22ch}
.usp-text{margin-top:clamp(36px,4vw,56px)}
.usp-text .lead{grid-column:1/8;color:var(--ink)}
.usp-text .cols{grid-column:1/10;margin-top:28px;columns:2;column-gap:var(--gap);color:var(--ink)}
.usp-text .cols p{break-inside:avoid}
.usp-text .cols p + p{margin-top:1em}

.usp-alt{padding:var(--sec) 0}
.usp-alt h3{grid-column:1/10;font-size:var(--fs-h2);line-height:1.02;max-width:none}
.usp-alt .pair{margin-top:clamp(40px,4.5vw,64px);border-top:1px solid var(--line-ink);padding-top:28px}
.usp-alt .pair p{color:var(--on-ink)}
.usp-alt .pair p:first-child{grid-column:4/8}
.usp-alt .pair p:last-child{grid-column:9/13}

/* services */
.services .main h2{max-width:18ch}
.svc-grid{display:grid;grid-template-columns:repeat(3,1fr);margin-top:clamp(48px,5vw,80px);border-top:1px solid var(--line)}
.svc{padding:28px var(--gap) 40px;border-bottom:1px solid var(--line);min-height:240px}
.svc:not(:nth-child(3n+1)){border-inline-start:1px solid var(--line)}
.svc h3{font-size:clamp(22px,1.9vw,28px);line-height:1.15;letter-spacing:-.02em}
.svc p{margin-top:14px;color:var(--ink);font-size:16px;line-height:1.55;max-width:36ch}

/* quotes */
.quotes{padding:var(--sec) 0}
/* a pile of printed sheets, a variation on the live site's card stack: one is read at a time, by itself or under the visitor's hand */
.quotes .rail,.quotes .main{grid-column:1/13}
.quotes .rail .label{position:static}
.q-stack{--q-tilt:1;position:relative}
.q{padding:clamp(28px,3.4vw,48px);display:flex;flex-direction:column;justify-content:space-between;gap:clamp(28px,3vw,44px);color:var(--ink);background:var(--white)}
.q:nth-child(1){background:var(--red)}
.q:nth-child(2){background:var(--ink);color:var(--white)}
.q:nth-child(4){background:var(--grey)}
.q-stack:not(.is-ready) .q + .q{margin-top:16px}
.q-stack.is-ready{display:grid;max-width:760px;margin:clamp(24px,3vw,44px) auto 0}
.q-stack.is-ready .q{grid-area:1/1;box-shadow:0 2px 6px rgba(14,14,14,.2);transition:transform .55s cubic-bezier(.22,.65,.38,1)}
.q-stack.is-ready .q > *{transition:opacity .3s}
.q-stack.is-ready .q{cursor:pointer}
.q-stack.is-ready .q:not([data-pos="0"]) > *{opacity:0}
.q[data-pos="0"]{z-index:4}
.q[data-pos="0"] > *{transition-delay:.2s}
.q[data-pos="1"]{z-index:3;transform:translate(calc(24px * var(--q-tilt)),calc(16px * var(--q-tilt))) rotate(calc(2.2deg * var(--q-tilt)))}
.q[data-pos="2"]{z-index:2;transform:translate(calc(-18px * var(--q-tilt)),calc(28px * var(--q-tilt))) rotate(calc(-2deg * var(--q-tilt)))}
.q[data-pos="3"]{z-index:1;transform:translate(calc(10px * var(--q-tilt)),calc(38px * var(--q-tilt))) rotate(calc(1.2deg * var(--q-tilt)))}
.q-stack.is-ready .q.is-out{transform:translate(calc(-62% * var(--q-dir,1)),10px) rotate(calc(-7deg * var(--q-dir,1)))}
.q-stack.is-ready .q.is-out[data-pos="0"]{z-index:5}
.q-controls{display:flex;flex-wrap:wrap;justify-content:center;gap:8px;max-width:760px;margin:calc(38px + 44px) auto 0}
.q-controls button{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;background:none;border:1px solid var(--ink);color:var(--ink);cursor:pointer;transition:background-color .15s,color .15s}
.q-controls button:hover{background:var(--ink);color:var(--white)}
.q-controls svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.5}
.q-count{flex:0 0 100%;margin-top:6px;text-align:center;font-size:var(--fs-small);font-weight:600;font-variant-numeric:tabular-nums}
/* the autoplay clock: unseen, and paused along with everything that holds the pile */
.q-clock{position:absolute;visibility:hidden}
.q-clock i{display:block;animation:q-run var(--q-time,7s) linear forwards}
.q-controls.is-held .q-clock i,body.menu-open .q-clock i{animation-play-state:paused}
@keyframes q-run{to{opacity:1}}
@media (prefers-reduced-motion:reduce){.q-stack.is-ready .q,.q-stack.is-ready .q > *{transition:none}}
.who{font-size:var(--fs-small);line-height:1.4}
.who-name{font-weight:600}

/* cta */
.cta{padding:var(--sec) 0}
.cta h2{font-size:clamp(48px,8.4vw,140px);line-height:.92;font-weight:700;letter-spacing:-.05em;max-width:none;text-wrap:balance}
.cta-row{margin-top:clamp(40px,5vw,72px);border-top:1px solid var(--ink);padding-top:28px;align-items:start}
.cta-row .lead{grid-column:1/8;color:var(--ink)}
.cta-act{grid-column:9/13;display:flex;flex-direction:column;align-items:flex-start;gap:16px}
.email{font-size:var(--fs-small);color:var(--ink)}
.email a{color:var(--ink);font-weight:600;text-decoration-color:currentColor;text-decoration-thickness:1px;text-underline-offset:5px;transition:text-decoration-color .15s}
.email a:hover{text-decoration-color:currentColor}

/* footer */
footer{padding:72px 0 32px}
.foot{align-items:start}
.foot-brand{grid-column:1/5}
.foot-brand svg{position:relative;z-index:85;height:34px;width:auto;color:var(--white)}
.foot-tag{margin-top:24px;font-size:20px;line-height:1.3;font-weight:500;letter-spacing:-.01em}
.foot-since{margin-top:6px;font-size:var(--fs-small);color:var(--on-ink)}
.foot-col{display:flex;flex-direction:column;gap:10px;font-size:15px}
.foot-col:nth-child(2){grid-column:6/8}
/* half a column in, so the three start at equal steps */
.foot-col:nth-child(3){grid-column:8/11;margin-inline-start:calc((100% + var(--gap)) / 6)}
.foot-col:nth-child(4){grid-column:11/13}
.foot-col .label{color:var(--on-ink);margin-bottom:6px}
.foot-col a{text-decoration:none}
.foot-col a:hover{text-decoration:underline;text-underline-offset:4px}
.foot-base{margin-top:72px;padding-top:20px;border-top:1px solid var(--line-ink);font-size:13px;color:var(--on-ink)}

/* responsive */
@media (max-width:1080px){
  .nav-links{display:none}
  .fab{opacity:1;visibility:visible}
  .brand{top:31px}
  .pquote{grid-column:4/13;margin-top:40px;max-width:52ch}
  .feature-copy{grid-column:4/13;max-width:62ch}
  .logo-grid{grid-template-columns:repeat(4,1fr)}
}
@media (max-width:900px){
  :root{--gutter:20px;--gap:16px}
  .hero{padding-top:120px}
  .brand{inset-inline-start:var(--gutter)}
  .hero-btn.docked{inset-inline-start:var(--gutter)}
  .fab{inset-inline-end:14px}
  .hero-foot{margin-top:56px;padding-bottom:56px}
  .hero-sub{font-size:19px;line-height:28px}
  .menu-links,.menu-side{grid-column:1/-1}
  .menu-side{margin-top:40px}
  /* "Leave the tech" is ~6.35em: size it to the column so the four lines hold */
  .hero h1{font-size:calc((100vw - 2 * var(--gutter)) / 6.4)}

  .hero-sub,.hero-cta,.logos-lede,.rail,.main,.feature-copy,.pquote,.feature-foot .text-link,
  .usp-text .lead,.usp-text .cols,.usp-alt h3,.usp-alt .pair p:first-child,.usp-alt .pair p:last-child,
  .cta-row .lead,.cta-act,.foot-brand,.foot-col:nth-child(n){grid-column:1/-1}
  .hero-cta,.cta-act{margin-top:28px}
  .rail .label{display:block;position:static;margin-bottom:28px}
  .logo-grid{grid-template-columns:repeat(3,1fr)}
  .logo-grid .cell{height:104px}
  .stats{grid-template-columns:1fr 1fr}
  .stat{padding:20px 0 24px;padding-inline-end:12px}
  .stat + .stat{padding-inline-start:12px}
  .stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
  .stat:nth-child(n+3){border-top:1px solid var(--line)}
  .usp-text .cols{columns:1}
  .usp-alt .pair p + p{margin-top:1em}
  .svc-grid{grid-template-columns:1fr}
  .svc,.svc:not(:nth-child(3n+1)){border-inline-start:0;min-height:0;padding-bottom:32px}
  .q-stack{--q-tilt:.55}
  .q-controls{margin-top:calc(21px + 32px)}
  .foot-col:nth-child(n){margin-top:40px;margin-inline-start:0}
}
/* landing grids: a real column grid arrives on another split and slides into its own */
/* every other cell carries a wash of the palette */
.svc-grid .svc:nth-child(even){transition:background-color .7s .5s}
.svc-grid .svc:nth-child(2){background:rgba(255,255,255,.6)}
.svc-grid .svc:nth-child(4){background:color-mix(in srgb,var(--red) 16%,transparent)}
.svc-grid .svc:nth-child(6){background:rgba(14,14,14,.07)}
.svc-grid.is-arriving .svc:nth-child(even){background:transparent;transition:none}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ---------- inner pages: the homepage's sheet, rail and rules, carrying the live site's markup ---------- */
.sec{--rule:var(--line);--rule-v:var(--rule)}
.dark{--rule:var(--line-ink)}
.band-red{--rule:var(--line-red);--rule-v:var(--line-red-v);background:var(--red);color:var(--ink)}
.dark .sec-top{border-top-color:var(--line-ink)}
.band-red .sec-top{border-top-color:var(--rule)}
.dark .rail .label{color:inherit}
.sec.dark,.sec.band-red,.sec.dark + .sec,.sec.band-red + .sec{padding-top:var(--sec)}
.sec.dark,.sec.band-red{padding-bottom:var(--sec)}
.sec-num{margin-inline-end:12px;font-variant-numeric:tabular-nums}
.nav-links a[aria-current],.menu-links a[aria-current]{text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:5px}
.menu-links a[aria-current]{text-underline-offset:10px;text-decoration-thickness:3px}

/* a proposal button for pages whose hero has none: arrives where the hero's would dock */
.dock-btn{position:fixed;top:27px;inset-inline-start:25px;z-index:70;opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s,visibility .28s,transform .5s cubic-bezier(.2,.7,.2,1),background-color .15s,color .15s}
body.is-docked:not(.menu-open) .dock-btn{opacity:1;visibility:visible;transform:none}
body.over-red:not(.menu-open) .dock-btn{background:var(--ink);color:var(--white)}
body.over-red:not(.menu-open) .dock-btn:hover{background:var(--white);color:var(--ink)}

/* images and form fields lie above the paper's texture, like the logo. The open menu still covers them: it stays under the texture itself, so they step down while it is open and back up once it has faded */
main img,.form-row input,.form-row textarea,.form-row select,.cf-turnstile{position:relative;z-index:85;transition:z-index 0s .35s}
body.menu-open main img,body.menu-open .form-row input,body.menu-open .form-row textarea,body.menu-open .form-row select,body.menu-open .cf-turnstile{z-index:0;transition:none}
.cf-turnstile{margin-bottom:22px}
.fab,.hero-btn.docked,.dock-btn{z-index:86}

/* page hero */
.page-hero{padding-top:173px}
.page-kicker{display:block;margin-bottom:28px}
.crumb{margin-bottom:12px;font-size:var(--fs-small);font-weight:500}
.crumb a{text-underline-offset:4px;text-decoration-thickness:1px}
.crumb .sep{margin:0 8px}
.page-hero h1{font-size:clamp(46px,6.6vw,104px);line-height:1;letter-spacing:-.0462em;margin-inline-start:-.0462em;text-wrap:balance}
.page-hero h1 em{display:block;color:var(--red)}
.page-long .page-hero h1{font-size:clamp(40px,5.2vw,82px)}
.page-hero .hero-foot{margin-top:clamp(56px,6.4vw,96px)}
.since strong{font-weight:700}

/* images */
.sec-shot img,.shot img,.case-hero-shot img{width:100%;height:auto}
.shot,.case-hero-shot{border:1px solid var(--line);overflow:hidden}
.device-composite{position:relative}
.device-composite .laptop{width:100%;height:auto}
.device-composite .mobile{position:absolute;inset-inline-end:0;bottom:0;width:19%;height:auto}

/* story */
.aside h2,.sec-title{max-width:20ch}
.prose{max-width:660px;margin-top:clamp(36px,4vw,56px)}
.prose p + p{margin-top:1em}
.prose strong{display:block;font-size:var(--fs-lead);line-height:1.3;font-weight:600;letter-spacing:-.012em}
.svc-list-wrap{margin-top:clamp(36px,4vw,56px)}
.svc-list{margin:0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.svc-list li{padding:14px 0;border-bottom:1px solid var(--rule)}
.svc-list b{font-weight:600}
.svc-list + p{margin-top:28px;max-width:660px}
.feature-link{display:inline-block;margin-top:28px;font-weight:600;text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:6px}
.feature-link .arr{display:inline-block;transition:transform .15s}
.feature-link:hover .arr{transform:translateX(3px)}
.sec-link .feature-link{margin-top:0}

/* featured client */
.feat-client h2{margin-top:clamp(32px,3.6vw,52px)}
.kicker{margin-top:14px;font-size:var(--fs-lead);line-height:1.3;font-weight:500;letter-spacing:-.012em}
.feat-client p{margin-top:18px;max-width:660px}

/* ruled rows, on the main column's nine tracks */
.partners,.feat-list,.svc-details{border-bottom:1px solid var(--rule)}
.sec-title + .partners,.sec-title + .feat-list{margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
/* a list opening the column reaches up to the section's rule, so its dividing line meets it */
.main > .partners:first-child,.main > .feat-list:first-child,.main > .svc-detail:first-child{margin-top:-28px}
.partner,.fl,.svc-detail{--row-pad:clamp(24px,2.4vw,34px);display:grid;grid-template-columns:4fr 5fr;border-top:1px solid var(--rule)}
.partner:first-child,.fl:first-child,.svc-detail:first-child{--row-pad:28px;border-top:0}
.partner > :first-child,.sd-head{padding:var(--row-pad) 0;padding-inline-end:var(--gap)}
.sd-num{padding-top:5.5px}
.pt-body,.sd-body,.fl p{padding:var(--row-pad) 0;padding-inline-start:var(--gap);border-inline-start:1px solid var(--rule-v)}
.pt-name,.fl h2,.sd-head h2{font-size:clamp(23px,2.1vw,31px);line-height:1.12;font-weight:600;letter-spacing:-.025em}
.pt-since{display:block;margin-top:8px;font-size:var(--fs-small)}
.pt-years{font-weight:600}
.fl .n,.sd-num{display:block;margin-bottom:8px;font-size:var(--fs-small);font-weight:600}
.fl .n{grid-column:1;margin-bottom:0;padding:calc(var(--row-pad) + 5.5px) 0 8px;padding-inline-end:var(--gap)}
.fl h2{grid-column:1;padding:0 0 var(--row-pad);padding-inline-end:var(--gap)}
.fl p{grid-column:2;grid-row:1/3}
.sd-body p + p{margin-top:0}
.svc-detail:last-child{border-bottom:1px solid var(--rule)}
.chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:20px}
.chip{padding:5px 10px;border:1px solid var(--ink);font-size:var(--fs-small);line-height:1.3;font-weight:500}

/* roster */
.roster{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));padding-top:2px}
.roster-group{padding:0 0 clamp(40px,4.4vw,64px);padding-inline-end:var(--gap)}
.roster-group:nth-child(even){padding-inline-end:0;padding-inline-start:var(--gap);border-inline-start:1px solid var(--rule-v)}
/* inline, like the rail's label beside it, so the two share a baseline */
.roster-group > .label{display:inline}
.roster-list{margin:8px 0 0;padding:0;list-style:none;border-top:1px solid var(--rule)}
.roster-list li{padding:11px 0;border-bottom:1px solid var(--rule)}
.roster-list b{display:block;font-size:18px;line-height:1.3;font-weight:600;letter-spacing:-.01em}
.roster-list span{display:block;margin-top:2px;font-size:var(--fs-small);line-height:1.4}
.roster-past{margin-top:clamp(48px,5vw,72px);padding-top:24px;border-top:1px solid var(--rule)}
.roster-past > .label{display:block;margin-bottom:14px}
.roster-past p{max-width:760px;font-size:var(--fs-lead);line-height:1.4;letter-spacing:-.008em}
.roster-past b{font-weight:600}

/* team */
.sec-wide .rail,.sec-wide .main{grid-column:1/13}
.sec-wide .rail .label{display:block;position:static;margin-bottom:clamp(28px,3vw,44px)}
.team{display:grid;grid-template-columns:repeat(4,minmax(0,1fr))}
.member{padding:0 var(--gap) 0 var(--gap);border-inline-start:1px solid var(--rule-v)}
.member:first-child{padding-inline-start:0;border-inline-start:0}
.member:last-child{padding-inline-end:0}
.member h3{font-size:clamp(21px,1.7vw,25px);line-height:1.12;letter-spacing:-.022em;text-wrap:initial}
.role{margin-top:6px;font-size:var(--fs-small);line-height:1.35;font-weight:600}
.member p{margin-top:12px;font-size:15px;line-height:1.5}

/* numbers */
.stat-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));margin-top:clamp(36px,4vw,56px);border-top:1px solid var(--rule)}
.stat-grid .stat{padding:24px 0 28px;padding-inline-end:var(--gap)}
.stat-grid .stat:nth-child(even){border-inline-start:1px solid var(--rule-v);padding-inline-start:var(--gap)}
.stat-grid .stat:nth-child(n+3){border-top:1px solid var(--rule)}
.stat-grid .stat + .stat{border-inline-start-color:var(--rule-v)}
.stat-grid .stat:nth-child(3){border-inline-start:0;padding-inline-start:0}
.stat-grid .n{font-size:clamp(40px,4.6vw,72px);font-variant-numeric:normal}
.numbers-body{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:48px var(--gap);margin-top:clamp(36px,4vw,56px)}
.numbers-body > div > .label{display:block;margin-bottom:16px}
.numbers-body .stat-grid{margin-top:0}
.numbers-body .stat-grid .n{font-size:clamp(34px,3.2vw,48px)}
.growth{border-top:1px solid var(--rule)}
.growth-row{display:flex;justify-content:space-between;align-items:baseline;gap:20px;padding:14px 0;border-bottom:1px solid var(--rule)}
.growth-row span:last-child{flex:none;font-size:22px;line-height:1.2;font-weight:600;letter-spacing:-.02em}
.milestone{margin-top:clamp(48px,5vw,72px);padding-top:28px;border-top:1px solid var(--rule)}
.milestone p{max-width:760px;font-size:var(--fs-lead);line-height:1.4}
.milestone .milestone-punch{margin-top:24px;max-width:none;font-size:var(--fs-h2);line-height:1;font-weight:700;letter-spacing:-.04em;color:var(--red)}
.mocktag{align-self:flex-start;margin-bottom:-12px;font-size:var(--fs-label);line-height:1.3;font-weight:600;letter-spacing:.09em;text-transform:uppercase}

/* contact */
.contact-grid{display:grid;grid-template-columns:repeat(12,minmax(0,1fr));column-gap:var(--gap);align-items:start}
.contact-grid form,.form-success{grid-column:1/8}
.contact-aside{grid-column:9/13}
.form-row{margin-bottom:22px}
.form-row label{display:block;margin-bottom:8px;font-size:15px;line-height:1.3;font-weight:600}
.form-row .opt{font-weight:400}
.form-row input,.form-row textarea,.form-row select{display:block;width:100%;padding:14px 16px;border:1px solid var(--ink);border-radius:0;background:var(--white);color:var(--ink);font:inherit;line-height:1.4;appearance:none}
.form-row textarea{min-height:170px;resize:vertical}
.form-row select{padding-inline-end:44px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18' fill='none' stroke='%230E0E0E' stroke-width='1.5'%3E%3Cpath d='m3 7 6 6 6-6'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:18px}
.form-row ::placeholder{color:#5F5F5C;opacity:1}
.contact-grid button.btn{border:0;font-family:inherit;cursor:pointer}
.contact-grid button.btn:disabled{opacity:.5;cursor:default}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.form-error{display:none;margin-bottom:22px;padding:14px 16px;border:1px solid var(--ink);background:var(--white);font-size:15px;line-height:1.45}
.form-error.show{display:block}
.form-success h2{margin-bottom:20px}
.contact-aside h2{font-size:clamp(26px,2.5vw,36px);line-height:1.06}
.contact-aside p{margin-top:14px}
.big-mail{display:inline-block;margin-top:18px;font-size:clamp(20px,1.7vw,25px);line-height:1.2;font-weight:600;letter-spacing:-.02em;text-underline-offset:5px;text-decoration-thickness:1px;overflow-wrap:anywhere}
.sig{margin-top:32px;padding-top:18px;border-top:1px solid var(--rule);font-size:15px;line-height:1.45}

@media (max-width:1080px){
  .team{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:40px}
  .member:nth-child(n){padding:0 var(--gap)}
  .member:nth-child(odd){padding-inline-start:0;border-inline-start:0}
  .member:nth-child(even){padding-inline-end:0}
  .numbers-body{grid-template-columns:1fr}
}
@media (max-width:900px){
  .page-hero{padding-top:120px}
  .page-hero .hero-foot{margin-top:48px}
  .page-hero h1,.page-long .page-hero h1{font-size:clamp(38px,10.6vw,84px)}
  .dock-btn{inset-inline-start:var(--gutter)}
  .partner,.fl,.svc-detail{display:block}
  .partner > :first-child,.sd-head{padding-bottom:0;padding-inline-end:0}
  .pt-body,.sd-body,.fl p{padding:14px 0 var(--row-pad);border-inline-start:0}
  .fl h2{padding-inline-end:0;padding-bottom:0}
  .main > .partners:first-child,.main > .feat-list:first-child,.main > .svc-detail:first-child{margin-top:0}
  .partner:first-child,.fl:first-child,.svc-detail:first-child{--row-pad:clamp(24px,2.4vw,34px)}
  .partner:first-child > :first-child,.sd-head:first-child,.fl:first-child .n{padding-top:0}
  .roster{grid-template-columns:1fr}
  .roster-group:nth-child(n){padding:0 0 40px;border-inline-start:0}
  .contact-grid{display:block}
  .contact-aside{margin-top:56px}
}
@media (max-width:520px){
  .team{grid-template-columns:1fr;row-gap:0}
  .member:nth-child(n){padding:0;border-inline-start:0}
  .member + .member:nth-child(n){margin-top:28px;padding-top:28px;border-top:1px solid var(--rule)}
  .stat-grid{grid-template-columns:1fr}
  .stat-grid .stat,.stat-grid .stat:nth-child(even){border-inline-start:0;padding-inline-start:0}
  .stat-grid .stat + .stat{border-top:1px solid var(--rule)}
}

/* ---------- a dark sheet, so the product's screens and video stand out. Only main and the header change their tokens: the menu, the dock button and the footer sit outside them and stay as they are ---------- */
body.page-dark{--paper:#252525}
html:has(.page-dark){color-scheme:dark}
.page-dark main,.page-dark .site-head{--ink:#FFFFFF;--line:var(--line-ink);color:var(--ink)}
.page-dark .band-red{--ink:#0E0E0E}
.page-dark .nav-links a,.page-dark .hero-sub{color:var(--ink)}
.page-dark .site-head .brand{color:var(--white)}
.page-dark .hero-foot,.page-dark .cta-row,.page-dark .sec:not(.band-red) .sec-top{border-top-color:var(--line-ink)}
.page-dark main .btn:hover{background:var(--white);color:#0E0E0E}

/* ---------- Hebrew: the same layout mirrored by logical properties, with Hebrew setting ---------- */
html[lang="he"]{--font:'narkiss-tam','Schibsted Grotesk',sans-serif}
/* Hebrew sizes and line heights are generated into site-he.css (+10% and the line height to match). Tracking is set here: tight at display sizes, -6px at the 143px hero, none at reading sizes */
[dir="rtl"] .hero h1,[dir="rtl"] .page-hero h1,[dir="rtl"] .cta h2,[dir="rtl"] .stat .n{letter-spacing:-.042em}
[dir="rtl"] .menu-links a,[dir="rtl"] .milestone .milestone-punch{letter-spacing:-.04em}
[dir="rtl"] h2{letter-spacing:-.035em}
[dir="rtl"] h3{letter-spacing:-.033em}
[dir="rtl"] .pt-name,[dir="rtl"] .fl h2,[dir="rtl"] .sd-head h2{letter-spacing:-.025em}
[dir="rtl"] .logos-lede,[dir="rtl"] .svc h3,[dir="rtl"] .member h3,[dir="rtl"] .big-mail,[dir="rtl"] .growth-row span:last-child{letter-spacing:-.02em}
[dir="rtl"] .pquote,[dir="rtl"] .q blockquote{letter-spacing:-.018em}
[dir="rtl"] .kicker,[dir="rtl"] .prose strong{letter-spacing:-.012em}
[dir="rtl"] .lead,[dir="rtl"] .hero-sub,[dir="rtl"] .since,[dir="rtl"] .foot-tag,[dir="rtl"] .roster-list b,[dir="rtl"] .roster-past p,[dir="rtl"] .mocktag{letter-spacing:0}
[dir="rtl"] .hero h1,[dir="rtl"] .page-hero h1{margin-inline-start:0}
[dir="rtl"] .btn{font-weight:600}
/* labels: Narkiss Tam Condensed SemiBold */
[dir="rtl"] .label,[dir="rtl"] .mocktag{font-family:var(--font-he-condensed);font-weight:600;letter-spacing:1.5px;text-transform:none;font-size:19.48px}
[dir="rtl"] .q-stack{--q-dir:-1}
[dir="rtl"] .q-controls [data-a=prev] svg,[dir="rtl"] .q-controls [data-a=next] svg{transform:scaleX(-1)}
[dir="rtl"] .text-link .arr{margin-inline-start:6px}
[dir="rtl"] .text-link:hover .arr,[dir="rtl"] .feature-link:hover .arr{transform:translateX(-3px)}
/* runs that must read left to right inside a right-to-left page */
[dir="rtl"] .stat .n{unicode-bidi:plaintext;text-align:right}
[dir="rtl"] .q-count{direction:ltr}
[dir="rtl"] .foot-base{direction:ltr;text-align:right}
[dir="rtl"] .form-row input[type=email]{direction:ltr;text-align:right}
[dir="rtl"] .form-row input[type=email]:placeholder-shown{direction:rtl}
[dir="rtl"] .form-row select{background-position:left 14px center}
/* parked off the page on the side a right-to-left page cannot scroll to; on the left they would open 9999px of scroll */
[dir="rtl"] .skip-link,[dir="rtl"] .hp{left:auto;right:-9999px}
[dir="rtl"] .skip-link:focus{right:16px}
/* Hebrew figures carry a whole word ("8 מיליון+"), so they set smaller to hold one line in their column */
[dir="rtl"] .stats .n{font-size:clamp(33px,4.4vw,68px)}
[dir="rtl"] .numbers-body .stat-grid .n{font-size:clamp(31px,2.86vw,42px)}
/* the Latin language links run larger than the Narkiss around them */
[dir="rtl"] [lang="en"]{font-size:.88em}
[dir="rtl"] .lang [lang="en"]{font-size:1em}