/* ------------------------------------------------------------------
   Fonts — design uses Simona Pro. If the font files are placed in
   /fonts (or installed locally) they're used; otherwise Heebo.
------------------------------------------------------------------- */
@font-face {
  font-family: "Simona Pro";
  src: local("Simona Pro Regular"), local("SimonaPro-Regular"),
       url("fonts/SimonaPro-Regular.woff2") format("woff2");
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: "Simona Pro";
  src: local("Simona Pro Bold"), local("SimonaPro-Bold"),
       url("fonts/SimonaPro-Bold.woff2") format("woff2");
  font-weight: 700; font-display: swap;
}

:root {
  --black: #000;
  --white: #fff;
  --royal: #4169E1;          /* accent for the large English display headlines */
  /* --w: 0 = black atmosphere … 1 = white atmosphere. Driven by scroll in
     main.js as the visitor enters "WE DON'T THINK IN BOXES". */
  --w: 0;
  --bg: #000;               /* set by main.js: black → (lavender breath) → white */
  --lavender: #dcd0f7;
  --pastel: linear-gradient(90deg, #ffcbe4, #dccbff 40%, #c4effc 75%, #c8d8ff);
  --ink: color-mix(in srgb, #fff, #000 calc(var(--w) * 100%));
  --font: "Simona Pro", "Heebo", "Arial Hebrew", Arial, sans-serif;
  --hand: "Shadows Into Light", cursive;
  --ease-out: cubic-bezier(.22, 1, .36, 1);     /* expo-ish out  */
  --ease-io: cubic-bezier(.76, 0, .24, 1);      /* quart in-out  */
  --spring: cubic-bezier(.34, 1.56, .64, 1);    /* slight overshoot */
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: var(--font);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
p { margin: 0; }
::selection { background: var(--lavender); color: #000; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
html.is-loading, html.is-loading body { overflow: hidden; }
/* Lenis hides the scrollbar while stopped (overflow:hidden) → the page width
   would jump. Keep it during the explosion hold; main.js blocks the input. */
html.lenis.lenis-stopped:not(.is-loading) { overflow: auto; }

/* ---------- custom scrollbar (desktop) ----------
   the native bar is hidden (so the page width never changes) and replaced by
   a slim pill on the right edge: difference-blended like the header (white on
   black, black on white), quiet until you scroll, wider on hover, draggable */
@media (hover: hover) and (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { width: 0; height: 0; display: none; }
  .scrollbar {
    position: fixed; z-index: 45; top: 0; right: 0; bottom: 0;
    width: 18px;
    mix-blend-mode: difference;
  }
  .scrollbar__thumb {
    position: absolute; top: 0; right: 6px;
    width: 3px; border-radius: 99px;
    background: #fff;
    opacity: 0;
    transition: opacity .5s ease, width .35s var(--ease-out), right .35s var(--ease-out);
    will-change: transform;
    cursor: grab;
  }
  .scrollbar.is-active .scrollbar__thumb { opacity: .85; }
  .scrollbar:hover .scrollbar__thumb, .scrollbar.is-drag .scrollbar__thumb { opacity: 1; width: 6px; right: 5px; }
  .scrollbar.is-drag .scrollbar__thumb { cursor: grabbing; }
  html.is-loading .scrollbar { display: none; }
}
@media (hover: none), (pointer: coarse) { .scrollbar { display: none; } }

/* ------------------------------------------------------------------
   Page = 1920px Figma frame, scaled fluidly.  1 design px -> var(--u)
------------------------------------------------------------------- */
.page {
  position: relative;
  container-type: inline-size;
  background: var(--bg);
  overflow: hidden;
  overflow: clip;          /* clip (not hidden) so position:sticky inside still works */
}
.page * { --u: calc(100cqw / 1920); }
.header, .header * { --u: calc(100vw / 1920); }   /* header lives outside .page (it's fixed) */

/* ============================ PRELOADER ============================ */
.loader {
  position: fixed; inset: 0; z-index: 100;
  background: #000;
  color: #fff;
  clip-path: inset(0 0 0 0);
  transition: clip-path 1.15s var(--ease-io);
}
.loader__logo {
  position: absolute; left: 50%; top: 50%;
  width: 88px; translate: -50% -50%;
  animation: loaderLogo 1.4s var(--ease-out) both;
}
.loader__logo img { width: 100%; height: auto; }
.loader__tag {
  position: absolute; left: 40px; bottom: 40px;
  font-family: var(--hand); font-size: 20px; line-height: 1;
  overflow: hidden;
}
.loader__tag span { display: block; animation: lineUp 1s var(--ease-out) .2s both; }
.loader__count {
  position: absolute; right: 36px; bottom: 26px;
  font-weight: 700; font-size: clamp(64px, 11vw, 190px);
  line-height: .9; letter-spacing: -0.04em;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}
.loader__num { display: block; transition: transform .9s var(--ease-io); }
.loader__num::after { content: "%"; font-size: .3em; vertical-align: top; margin-left: .08em; letter-spacing: 0; }
.loader__bar {
  position: absolute; left: 0; right: 0; bottom: 0; height: 2px;
  background: rgba(255,255,255,.12);
}
.loader__bar span {
  display: block; height: 100%; width: 100%;
  background: var(--pastel);          /* the only coloured line on the page: BOX pastels */
  transform-origin: left; transform: scaleX(0);
}
.loader.is-done .loader__num,
.loader.is-done .loader__tag span { transform: translateY(-105%); transition: transform .8s var(--ease-io); }
.loader.is-done .loader__logo { opacity: 0; scale: .8; transition: opacity .6s ease, scale .8s var(--ease-io); }
.loader.is-out { clip-path: inset(0 0 100% 0); }
.loader.is-gone { display: none; }

@keyframes loaderLogo { from { opacity: 0; scale: .7; filter: blur(8px); } to { opacity: 1; scale: 1; filter: none; } }
@keyframes lineUp { from { transform: translateY(105%); } to { transform: none; } }

/* ============================ HEADER ============================ */
/* Sticky & fully transparent: only the logo + menu stay on screen.
   difference blending makes them a true negative — white over black,
   black over the white section (and over the soft black→white gradient). */
.header {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  height: calc(120 * var(--u));
  pointer-events: none;
  mix-blend-mode: difference;
}
.header a { pointer-events: auto; }

.logo {
  position: absolute;
  left: calc(40 * var(--u));
  top: calc(34 * var(--u));
  width: max(48px, calc(73 * var(--u)));
  transition: translate .6s var(--ease-out);
}
.logo img { width: 100%; height: auto; transition: transform .8s var(--spring); }
.logo:hover img { transform: rotate(-8deg) scale(1.06); }

.nav__link {
  position: absolute;
  top: calc(47 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
  font-weight: 300;                    /* lighter menu */
  line-height: 1;
  white-space: nowrap;
  display: flex; align-items: flex-start;
  gap: .9em;
  direction: rtl;
  transition: translate .6s var(--ease-out);
}
/* Right edges taken from Figma (x = 1880 / 1614 / 1303 / 1032) */
.nav__link--1 { right: calc((1920 - 1880) * var(--u)); }
.nav__link--2 { right: calc((1920 - 1614) * var(--u)); }
.nav__link--3 { right: calc((1920 - 1303) * var(--u)); }
.nav__link--4 { right: calc((1920 - 1032) * var(--u)); }

.nav__num { display: inline-block; transition: transform .6s var(--ease-out), opacity .4s; }
.nav__link:hover .nav__num { transform: translateY(-.15em) rotate(-8deg); opacity: .55; }

/* text roll (built by JS): two stacked copies that slide up */
.roll { display: inline-block; overflow: hidden; height: 1.1em; line-height: 1.1; vertical-align: top; margin-top: -.05em; }
.roll__in { display: flex; flex-direction: column; transition: transform .65s var(--ease-io); }
.roll__in > span { display: block; }
.roll__in > span:nth-child(2) { font-style: normal; }
a:hover .roll__in, a:focus-visible .roll__in { transform: translateY(-50%); }

.burger { display: none; }

/* ============================ HERO ============================ */
.hero {
  position: relative;
  height: calc(1011 * var(--u));
}
.hero__bg {
  position: absolute; inset: 0; z-index: 0;
  background: radial-gradient(31.88% 50% at 50% 50%, #15121b 0%, #09080b 50%, #000 100%);  /* whisper of lavender in the black */
  opacity: calc(1 - var(--w) * 12);   /* gone at the very start of the colour change → no edge */
}

/* Headline words — exact Figma positions (centers) */
.word {
  position: absolute;
  font-weight: 700;
  font-size: calc(230 * var(--u));
  line-height: .9;
  letter-spacing: -0.04em;           /* -9.2px @ 230px */
  white-space: nowrap;
  color: var(--white);
  transform: translate(-50%, var(--py, 0px));
  will-change: transform;
}
.word--not     { left: calc(274  * var(--u)); top: calc(229 * var(--u)); z-index: 1; }
.word--just    { left: calc(1617 * var(--u)); top: calc(229 * var(--u)); z-index: 1; }
.word--another { left: calc(1351 * var(--u)); top: calc(436 * var(--u)); z-index: 4; }
.word__in { display: block; clip-path: inset(-40% -20% 0 -20%); }

.char {
  display: inline-block;
  transition: translate .7s var(--spring), color .4s;
  will-change: transform;
}
.char:hover { translate: 0 -7%; }

.branding {
  position: absolute; z-index: 4;
  /* tucked under NOT on the site margin; its bottom sits on the baseline of
     ANOTHER (≈ y 636 in the 1920 design) */
  left: calc(40 * var(--u));
  top: calc((640 - 81.49) * var(--u));
  width: calc(224.86 * var(--u));
  height: calc(81.49 * var(--u));
  display: flex; align-items: flex-end; justify-content: flex-start;
}
.branding__text {
  font-family: var(--hand);
  font-size: max(15px, calc(30 * var(--u)));
  line-height: 1;
  white-space: nowrap;
  transform: rotate(-5.68deg);
  transform-origin: left bottom;      /* bottom-left corner stays on the ANOTHER baseline */
}

.tagline {
  position: absolute; z-index: 4;
  right: calc(40 * var(--u));
  top: calc(696 * var(--u));
  width: max(190px, calc(315 * var(--u)));
  font-size: max(13px, calc(22 * var(--u)));
  line-height: 1;
  text-align: right;
}
/* ---------- scroll cue (hero, right) ----------
   in the site's own handwriting: a tilted "scroll down" note and a
   hand-drawn loop-arrow that keeps drawing itself, then fades and redraws.
   White only, no colour. */
.scroll-cue {
  position: absolute; z-index: 4;
  right: calc(40 * var(--u));
  bottom: calc(40 * var(--u));
  display: flex; flex-direction: column; align-items: center;
  color: #fff;
}
.scroll-cue__text {
  font-family: var(--hand);
  font-size: max(15px, calc(24 * var(--u))); line-height: 1;
  transform: rotate(-6deg);
  white-space: nowrap;
}
.scroll-cue__arrow {
  width: max(30px, calc(44 * var(--u))); height: auto;
  margin-top: calc(6 * var(--u));
  overflow: visible;
}
.scroll-cue__arrow path {
  fill: none; stroke: currentColor; stroke-width: 2.2;
  stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
}
.scroll-cue__line { animation: cueLine 3.6s var(--ease-io) infinite; }
.scroll-cue__head { animation: cueHead 3.6s var(--ease-io) infinite; }
@keyframes cueLine {
  0%   { stroke-dashoffset: 1; opacity: 1; }
  45%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
@keyframes cueHead {
  0%, 42% { stroke-dashoffset: 1; opacity: 1; }
  56%  { stroke-dashoffset: 0; opacity: 1; }
  82%  { stroke-dashoffset: 0; opacity: 1; }
  100% { stroke-dashoffset: 0; opacity: 0; }
}
.scroll-cue:hover .scroll-cue__text { transform: rotate(-2deg) translateY(-2px); transition: transform .5s var(--spring); }
/* ---------- sticky contact pill (whole site, bottom-left) ----------
   same anatomy as the site's pill buttons (1px outline, circle that grows
   from the centre and fills it); difference blend like the header →
   white on black, black on white, always legible */
.hello-btn {
  --u: calc(100vw / 1920);
  position: fixed; z-index: 40;
  left: calc(40 * var(--u));
  bottom: calc(36 * var(--u));
  display: inline-flex; align-items: center; justify-content: center;
  height: max(44px, calc(58 * var(--u)));
  padding: 0 max(20px, calc(30 * var(--u)));
  border: 1px solid #fff; border-radius: 999px;
  color: #fff;
  font-size: max(13px, calc(17 * var(--u)));
  line-height: 1; white-space: nowrap;
  overflow: hidden; isolation: isolate;
  mix-blend-mode: difference;
  transition: color .3s ease;
}
.hello-btn__fill {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 110%; aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.hello-btn__label { position: relative; display: block; padding-top: .08em; }
.hello-btn__hi { font-weight: 700; letter-spacing: .04em; margin-inline-end: .35em; }
/* the site's plus (as in the intro), turns a quarter on hover */
.hello-btn { gap: max(12px, calc(16 * var(--u))); }
.hello-btn__plus { position: relative; order: -1; width: max(11px, calc(14 * var(--u))); flex: none; transition: transform .7s var(--spring); }   /* order -1 → right side (RTL) */
.hello-btn:hover .hello-btn__plus, .hello-btn:focus-visible .hello-btn__plus { transform: rotate(90deg); }
.hello-btn:hover, .hello-btn:focus-visible { color: #000; transition: color .35s ease .22s; }
.hello-btn:hover .hello-btn__fill, .hello-btn:focus-visible .hello-btn__fill { transform: translate(-50%, -50%) scale(1); }
.hello-btn:focus-visible { outline: 1px solid #fff; outline-offset: 4px; }

/* both arrive after the hero intro */
.js .scroll-cue, .js .hello-btn { opacity: 0; translate: 0 14px; }
.js.loaded .scroll-cue, .js.loaded .hello-btn { opacity: 1; translate: 0 0; transition: opacity 1s ease 1.5s, translate 1.1s var(--ease-out) 1.5s, color .3s ease; }
@media (prefers-reduced-motion: reduce) { .scroll-cue__arrow path { animation: none; stroke-dashoffset: 0; } }
@media (max-width: 820px) {
  .scroll-cue { right: 16px; bottom: 100px; }
  .hello-btn { left: 16px; bottom: 16px; height: 42px; padding: 0 16px; font-size: 12.5px; }
  /* on phones the hero's own notes sit at the bottom → the pill waits until the hero is passed */
  .js.loaded:not(.past-hero) .hello-btn { opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .5s ease, translate .6s var(--ease-out); }
}

.line { display: block; overflow: hidden; padding-bottom: .08em; margin-bottom: -.08em; }
.line__in { display: block; }

/* ============================ INTRO ============================ */
.intro {
  position: relative;
  height: calc(570 * var(--u));      /* next section starts at y = 1581 in Figma */
}
.intro__text {
  position: absolute; z-index: 4;
  right: calc((1920 - 1752) * var(--u));
  top: calc(98 * var(--u));
  width: calc(1057 * var(--u));
  font-size: max(20px, calc(70 * var(--u)));
  line-height: 1;
  letter-spacing: -0.03em;           /* -2.1px @ 70px */
  text-align: right;
  color: var(--ink);                 /* stays readable while the bg turns white */
}
.w { opacity: .14; transition: opacity .5s ease, filter .5s ease; filter: blur(1.5px); }
.w.on { opacity: 1; filter: none; }

.intro__plus {
  position: absolute; z-index: 4;
  left: calc(1852 * var(--u));
  top: calc(129 * var(--u));
  width: max(18px, calc(28 * var(--u)));
  aspect-ratio: 1;
  transition: translate .6s var(--ease-out);
}
.intro__plus img { width: 100%; height: 100%; transition: transform .8s var(--spring); filter: invert(var(--w)); }
.intro__plus:hover img { transform: rotate(180deg) scale(1.15); }

/* ===================== THINK (WE DON'T THINK IN BOXES) ===================== */
/* Section top = Figma y 1581. All values below are relative to that. */
.think {
  position: relative;
  height: calc(1070 * var(--u));      /* tighter: the portfolio follows closer to the pile */
  /* interactive physics area: dragging through the glass objects must never
     select/highlight the headline (text stays real, accessible HTML) */
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
.think__title {
  position: absolute; z-index: 4;
  left: calc(959.5 * var(--u));
  top: 0;
  margin: 0;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: calc(230 * var(--u));
  line-height: .9;
  letter-spacing: -0.04em;           /* -9.2px @ 230px */
  text-align: center;
  white-space: nowrap;
  color: var(--ink);                 /* white → black with the page colour change */
}
.think__line { display: block; }
.think__tag {
  color: var(--ink);
  position: absolute; z-index: 4;
  right: calc(40 * var(--u));      /* site margin (= hero) */
  top: calc((2159 - 1581) * var(--u));
  width: max(190px, calc(315 * var(--u)));
  font-size: max(13px, calc(22 * var(--u)));
  line-height: 1;
  text-align: right;
}

/* Call to action — left side, vertically centred on the tagline (right side) */
.think__cta {
  position: absolute; z-index: 4;
  left: calc(40 * var(--u));       /* site margin (= hero) */
  top: calc((2159 - 1581 + 22) * var(--u));
  transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  height: max(48px, calc(68 * var(--u)));
  padding: 0 max(24px, calc(40 * var(--u)));
  border: 1px solid #000;
  border-radius: 999px;
  overflow: hidden;
  isolation: isolate;
  color: #000;
  font-size: max(15px, calc(22 * var(--u)));
  line-height: 1;
  white-space: nowrap;
  transition: color .55s cubic-bezier(.4, 0, .2, 1);
}
/* gentle fill: a soft ink circle grows from the centre and fills the pill */
.think__cta-fill {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 110%; aspect-ratio: 1;
  background: #000;
  border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.think__cta-label { position: relative; display: block; padding-top: .08em; }
.think__cta:hover, .think__cta:focus-visible { color: #fff; transition: color .35s ease .22s; }  /* text turns white once the fill has reached it */
.think__cta:hover .think__cta-fill, .think__cta:focus-visible .think__cta-fill { transform: translate(-50%, -50%) scale(1); }
.think__cta:focus-visible { outline: 1px solid #000; outline-offset: 4px; }
/* reveal together with the section */
.js .think:not(.in) .think__cta { opacity: 0; translate: 0 18px; }
.js .think.in .think__cta { opacity: 1; transition: opacity .9s ease .7s, translate 1s var(--ease-out) .7s, color .3s ease; }
.js .think.in .think__cta:hover, .js .think.in .think__cta:focus-visible { transition: opacity .9s ease, translate 1s var(--ease-out), color .35s ease .22s; }

/* 3D objects layer — above the headline, transparent, never blocks scroll/clicks */
.think__fx {
  position: absolute; inset: 0; z-index: 6;
  width: 100%; height: 100%;
  pointer-events: none;
  opacity: 0;
}
.think__fx.is-live { opacity: 1; }

/* Real 3D glass cube (cube3d.js): a viewport-sized canvas that follows the
   scroll. It sits IN FRONT of the typography: the text you see inside the
   glass is the refracted copy fed into the glass's transmission pass. */
.cube-gl {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: 100%; display: block;
  pointer-events: none;
  opacity: 0;
  will-change: transform, opacity;
}
.gl-cube .cube { visibility: hidden; }   /* PNG cube = fallback only */

/* ============================ CUBE ============================ */
.cube-anchor { position: absolute; pointer-events: none; visibility: hidden; }
.cube-anchor--hero {          /* Figma: 1076.07 × 1011, centre (944, 596.27) → moved 110px left */
  width: calc(1076.07 * var(--u));
  height: calc(1011 * var(--u));
  left: calc((405.97 - 110) * var(--u));
  top: calc(90.77 * var(--u));
}
.cube-anchor--intro {         /* Figma: 542.77 × 509.95, centre (373.6, 1266.65) */
  width: calc(542.77 * var(--u));
  height: calc(509.95 * var(--u));
  left: calc(102.22 * var(--u));
  top: calc(0.68 * var(--u));
}
.cube-anchor--think {         /* 12% smaller than Figma's 1076.07 × 1011; centre x 944 (Figma),
                                 centre y raised 70px (2196) so the smaller cube keeps the
                                 same overlap with "IN BOXES" */
  width: calc(946.94 * var(--u));
  height: calc(889.68 * var(--u));
  left: calc((944 - 473.47) * var(--u));
  /* raised another 90px: "IN BOXES" now cuts right through the cube, like
     ANOTHER does in the hero, so the difference blend reads the same way */
  top: calc((2196.27 - 444.84 - 1581 - 90) * var(--u));
}

.cube {
  position: absolute; left: 0; top: 0; z-index: 2;
  width: 100px;                   /* set by JS = hero anchor width */
  aspect-ratio: 1076.07 / 1011;
  pointer-events: none;
  will-change: transform;
}
.cube__tilt { width: 100%; height: 100%; will-change: transform; }
.cube__intro { width: 100%; height: 100%; opacity: 0; }
.cube__float { width: 100%; height: 100%; animation: float 7s ease-in-out infinite; }
.cube__float img {
  width: 100%; height: 100%; object-fit: contain; user-select: none;
}

/* ---------- Figma compositing ----------
   The cube is the Figma image, blended with `screen` (as in Figma) while the
   page is dark; once the page turns white it switches to `multiply` (the
   light-page counterpart) so the glass keeps its colour and depth. The big headlines are WHITE with `difference`
   (as in Figma): white on black, black on white, and the cube's colours
   inverted wherever the letters cross it. */
.cube { mix-blend-mode: screen; }
.is-light .cube { mix-blend-mode: multiply; }   /* white-page counterpart of screen */
/* the burst objects are drawn normally, fully IN FRONT of the cube (no blend →
   the cube never shows through / reflects on them) */
.word, .intro__text, .think__title {
  color: #fff;
  mix-blend-mode: difference;
}
/* (the headline stays BELOW the burst layer: inverted pastel pink/lilac
   turns green-olive, off-brand — the flying objects keep their brand colours) */

@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  50%      { transform: translateY(-1.6%) rotate(1.2deg); }
}

/* ======================= ENTRANCE (after loader) ======================= */
.js .char { transform: translateY(105%); }
.js .line__in { transform: translateY(105%); }
.js .branding__text { clip-path: inset(-20% 100% -20% 0); }
.js .logo, .js .nav__link { opacity: 0; transform: translateY(-14px); }
.js .intro__text, .js .reveal { visibility: visible; }

.js.loaded .char {
  transform: none;
  transition: transform 1.3s var(--ease-out), translate .7s var(--spring);
  transition-delay: calc(var(--i) * 45ms + 80ms), 0s;
}
.js.loaded .line__in { transform: none; transition: transform 1.1s var(--ease-out); }
.js.loaded .line:nth-child(1) .line__in { transition-delay: .75s; }
.js.loaded .line:nth-child(2) .line__in { transition-delay: .85s; }
.js.loaded .branding__text { clip-path: inset(-20% -5% -20% 0); transition: clip-path 1.6s var(--ease-io) .8s; }
.js.loaded .logo, .js.loaded .nav__link {
  opacity: 1; transform: none;
  transition: opacity .9s ease, transform 1s var(--ease-out), translate .6s var(--ease-out);
}
.js.loaded .logo        { transition-delay: .55s, .55s, 0s; }
.js.loaded .nav__link--1 { transition-delay: .6s, .6s, 0s; }
.js.loaded .nav__link--2 { transition-delay: .67s, .67s, 0s; }
.js.loaded .nav__link--3 { transition-delay: .74s, .74s, 0s; }
.js.loaded .nav__link--4 { transition-delay: .81s, .81s, 0s; }
.js.loaded .cube__intro { animation: cubeIn 2.2s var(--ease-out) .1s both; }

@keyframes cubeIn {
  0%   { opacity: 0; transform: scale(.55) rotate(-70deg); filter: blur(24px) brightness(2); }
  45%  { opacity: 1; }
  100% { opacity: 1; transform: none; filter: none; }
}

/* "Think" section reveals when it scrolls into view (not on page load) */
.js.loaded .think:not(.in) .char,
.js .think:not(.in) .line__in { transform: translateY(105%); transition: none; }
.js.loaded .think.in .line:nth-child(1) .line__in { transition-delay: .55s; }
.js.loaded .think.in .line:nth-child(2) .line__in { transition-delay: .65s; }

/* Scroll reveal */
.js .reveal { opacity: 0; transform: translateY(30px) rotate(-90deg); transition: opacity 1s ease, transform 1.2s var(--ease-out), translate .6s var(--ease-out); }
.js .reveal.in { opacity: 1; transform: none; }

/* ============================ CURSOR ============================ */
.cursor { display: none; }
@media (hover: hover) and (pointer: fine) {
  html.has-cursor, html.has-cursor * { cursor: none !important; }
  .cursor {
    display: block;
    position: fixed; left: 0; top: 0; z-index: 90;
    pointer-events: none;
    mix-blend-mode: difference;
  }
  .cursor__dot, .cursor__ring {
    position: fixed; left: 0; top: 0;
    border-radius: 50%;
    will-change: transform;
  }
  .cursor__dot { width: 6px; height: 6px; margin: -3px 0 0 -3px; background: #fff; transition: opacity .3s, scale .4s var(--ease-out); }
  .cursor__ring {
    width: 40px; height: 40px; margin: -20px 0 0 -20px;
    border: 1px solid rgba(255,255,255,.8);
    transition: scale .55s var(--ease-out), background-color .4s, border-color .4s, opacity .4s;
  }
  .cursor.is-link .cursor__ring { scale: 1.7; background: #fff; border-color: #fff; }
  .cursor.is-link .cursor__dot  { scale: 0; }
  .cursor.is-big  .cursor__ring { scale: 4.2; background: #fff; border-color: #fff; }
  .cursor.is-big  .cursor__dot  { scale: 0; }
  .cursor.is-down .cursor__ring { scale: .8; }
  /* "VIEW PROJECT" cursor over portfolio items */
  .cursor__label {
    position: fixed; left: 0; top: 0;
    font-family: var(--font); font-weight: 700;
    font-size: 10px; letter-spacing: .14em; white-space: nowrap;
    color: #fff;
    transform: translate(-50%, -50%);
    opacity: 0; scale: .6;
    transition: opacity .3s ease, scale .45s var(--ease-out);
    will-change: transform;
  }
  .cursor.is-view { mix-blend-mode: normal; }
  .cursor.is-view .cursor__ring { scale: 2.9; background: #000; border-color: #000; }
  .cursor.is-view .cursor__dot  { scale: 0; }
  .cursor.is-view .cursor__label { opacity: 1; scale: 1; }
  .cursor.is-hidden .cursor__ring, .cursor.is-hidden .cursor__dot { opacity: 0; }
}

/* ===================== SELECTED WORK ===================== */
.work {
  position: relative; z-index: 3;
  padding: calc(60 * var(--u)) calc(40 * var(--u)) calc(180 * var(--u));
  color: var(--ink);
}
.work__line { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.work__line-in { display: block; transform: translateY(105%); transition: transform 1.2s var(--ease-out); }
.in .work__line-in { transform: none; }

/* head: title left, small Hebrew line right (same style as the site's small taglines) */
.work__head {
  display: flex; justify-content: space-between; align-items: flex-end;
  direction: ltr;
  padding-bottom: calc(36 * var(--u));
  margin-bottom: calc(100 * var(--u));
  position: relative;
}
.work__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor; opacity: .18;
  transform: scaleX(0); transform-origin: left;
  transition: transform 1.6s var(--ease-io) .25s;
}
.work__head.in::after { transform: scaleX(1); }
.work__title {
  margin: 0;
  font-weight: 700;
  font-size: calc(160 * var(--u));
  line-height: .86;
  letter-spacing: -0.045em;
}
.work__title .work__line:nth-child(2) .work__line-in { transition-delay: .08s; }
.work__sub {
  direction: rtl; text-align: right;
  width: max(190px, calc(315 * var(--u)));
  font-size: max(13px, calc(22 * var(--u)));
  line-height: 1;
  padding-bottom: calc(6 * var(--u));
}
.work__sub .work__line:nth-child(1) .work__line-in { transition-delay: .2s; }
.work__sub .work__line:nth-child(2) .work__line-in { transition-delay: .28s; }

/* Horizontal gallery. .work__scroller is made tall by main.js
   (strip overflow + one viewport); .work__pin sticks for that distance while
   main.js slides .work__track sideways; then the page simply continues. */
.work { padding-left: 0; padding-right: 0; padding-bottom: calc(80 * var(--u)); }
.work__head { margin: 0 calc(40 * var(--u)) calc(40 * var(--u)); padding-bottom: 0; }
.work__head::after { display: none; }   /* no line under the title */
.work__scroller { position: relative; }
.work__pin {
  position: sticky; top: 0;
  height: 100vh; height: 100svh;
  overflow: hidden;
  direction: rtl;          /* Hebrew: strip starts at the right edge and travels left */
}
.work__track {
  display: flex; align-items: center; direction: rtl;
  gap: 1.6vw;
  height: 100%; width: max-content;
  padding-right: calc(40 * var(--u));
  will-change: transform;
}

/* each project: frame height --h (shared), aspect --r. ~2.5 projects per screen */
.work__item {
  display: block; position: relative; color: inherit; flex: none;
  --h: 78vh; --r: .76;     /* every project the same size, a little taller than 4:5 */
  width: calc(var(--h) * var(--r));
}
.work__item:focus-visible { outline: 1px solid currentColor; outline-offset: 10px; }

/* entrance: as soon as the strip's top edge enters the screen, every image
   unrolls from its TOP edge downwards (one after another, --d set by main.js),
   so the tops of the projects are visible right away while the image settles
   from a slow zoom */
.work__frame {
  position: relative; overflow: hidden;
  height: var(--h);
  background: #f0eff2;
  clip-path: inset(0 0 100% 0);
  transition: clip-path 1.5s cubic-bezier(.65, 0, .25, 1) var(--d, 0s);
}
.work__item.in .work__frame { clip-path: inset(0 0 0 0); }
.work__media {                      /* a bit wider than the frame → room for parallax */
  position: absolute; inset: 0 -8%;
  transform: translate3d(var(--px, 0px), 0, 0);
  will-change: transform;
}
.work__img {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.25) translateY(-4%);
  transform-origin: 50% 0;
  transition: transform 2.2s cubic-bezier(.16, 1, .3, 1) var(--d, 0s);
}
.work__item.in .work__img { transform: scale(1); }
.work__item.in:hover .work__img, .work__item.in:focus-visible .work__img {
  transform: scale(1.035);
  transition-duration: 1.1s;
  transition-delay: 0s;
}

/* caption: name ........ VIEW PROJECT →
            category                      (no lines) */
.work__meta {
  display: grid; direction: rtl; text-align: right;
  grid-template-columns: 1fr auto;
  grid-template-areas: "name more" "cat .";
  column-gap: 16px; row-gap: calc(6 * var(--u));
  align-items: baseline;
  padding-top: calc(16 * var(--u));
}
.work__meta > * { opacity: 0; transform: translateY(12px); transition: opacity .9s ease, transform 1s var(--ease-out); }
.work__item.in .work__meta > * { opacity: 1; transform: none; }
.work__item.in .work__meta > :nth-child(1) { transition-delay: calc(var(--d, 0s) + .9s); }
.work__item.in .work__meta > :nth-child(2) { transition-delay: calc(var(--d, 0s) + 1s); }
.work__item.in .work__meta > :nth-child(3) { transition-delay: calc(var(--d, 0s) + 1.07s); }
.work__name {
  grid-area: name; margin: 0;
  font-weight: 400; font-size: max(16px, calc(28 * var(--u)));
  line-height: 1.15; letter-spacing: -0.01em;
}
.work__cat  { grid-area: cat; font-size: max(13px, calc(16 * var(--u))); line-height: 1.3; opacity: .5; }
.work__more {
  grid-area: more; white-space: nowrap;
  font-size: max(12px, calc(18 * var(--u))); letter-spacing: .06em;
}
.work__arrow { display: inline-block; transition: transform .5s var(--ease-out); }
.work__item:hover .work__arrow, .work__item:focus-visible .work__arrow { transform: translateX(-6px); }

/* the strip ends with the ALL PROJECTS button (same pill as the CTA) */
.work__end {
  flex: none; align-self: stretch;
  width: 30vw;
  display: flex; align-items: center; justify-content: center;
  opacity: 0; transform: translateY(24px);
  transition: opacity 1s ease .1s, transform 1.1s var(--ease-out) .1s;
}
.work__end.in { opacity: 1; transform: none; }
.pill-btn {
  position: relative;
  display: inline-flex; align-items: center; justify-content: center;
  height: max(48px, calc(68 * var(--u)));
  padding: 0 max(28px, calc(48 * var(--u)));
  border: 1px solid #000; border-radius: 999px;
  overflow: hidden; isolation: isolate;
  color: #000;
  font-size: max(15px, calc(20 * var(--u)));
  letter-spacing: .08em;
  line-height: 1; white-space: nowrap;
  transition: color .3s ease;
}
.pill-btn__fill {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 110%; aspect-ratio: 1;
  background: #000; border-radius: 50%;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.pill-btn__label { position: relative; display: block; padding-top: .08em; }
.pill-btn:hover, .pill-btn:focus-visible { color: #fff; transition: color .35s ease .22s; }
.pill-btn:hover .pill-btn__fill, .pill-btn:focus-visible .pill-btn__fill { transform: translate(-50%, -50%) scale(1); }
.pill-btn:focus-visible { outline: 1px solid #000; outline-offset: 4px; }

@media (max-width: 820px) {
  .work { padding: 40px 0 40px; }
  .work__head { flex-direction: column; align-items: flex-start; row-gap: 18px; margin: 0 16px 8px; }
  .work__title { font-size: calc(64 * var(--m)); }
  .work__sub { align-self: flex-end; width: 170px; font-size: 14px; line-height: 1.1; }
  .work__track { padding-right: 16px; gap: 16px; }
  .work__item { --h: min(56vh, 100vw); }
  .work__meta { padding-top: 10px; row-gap: 2px; }
  .work__end { width: 80vw; }
}
@media (prefers-reduced-motion: reduce) {
  .work__frame { clip-path: none !important; }
  .work__item { transform: none !important; }
  .work__line-in, .work__meta > *, .work__end { transform: none !important; opacity: 1 !important; }
}

/* ===================== STRATEGY & ABOUT ===================== */
.inside {
  position: relative; z-index: 3;
  color: var(--ink);
  padding: calc(90 * var(--u)) calc(40 * var(--u)) calc(110 * var(--u));   /* closer to the projects above and the clients below */
}
.inside__head {
  direction: ltr;
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: flex-end;
  column-gap: calc(60 * var(--u));
}
.inside__label {
  flex: 0 0 100%; margin: 0 0 calc(30 * var(--u));
  font-size: max(12px, calc(15 * var(--u))); letter-spacing: .14em;
}
/* left-aligned, like every big English line on the site; exactly 2 lines */
.inside__title {
  margin: 0; white-space: nowrap;
  font-weight: 700; font-size: max(44px, calc(150 * var(--u)));
  line-height: .88; letter-spacing: -0.045em;
  text-align: left;
}
.inside__lead {
  flex: 0 1 calc(400 * var(--u)); margin: 0;
  direction: rtl; text-align: right;
  font-size: max(17px, calc(26 * var(--u))); line-height: 1.35;
  padding-bottom: calc(10 * var(--u));
}

/* the About paragraph: set exactly like the intro paragraph
   (70u, same right inset 168u from the page edge, same plus at the margin) */
.inside__para {
  position: relative; direction: rtl;
  margin-top: calc(150 * var(--u));
}
.inside__text {
  margin: 0 calc(128 * var(--u)) 0 0;          /* 40u page margin + 128u = intro's 168u */
  width: auto; max-width: 100%;
  font-size: max(20px, calc(70 * var(--u))); line-height: 1;
  letter-spacing: -0.03em; text-align: right;
}
.inside__text .ln { display: block; white-space: nowrap; }   /* the approved line breaks */
.inside__plus {
  position: absolute; right: 0; top: calc(31 * var(--u));
  width: max(18px, calc(28 * var(--u))); height: auto;
  color: #000;
}

/* three stacked links: text + small arrow, thin underline */
.inside__links {
  list-style: none; margin: calc(80 * var(--u)) calc(128 * var(--u)) 0 0; padding: 0;
  display: flex; flex-direction: column; align-items: flex-start;   /* RTL: hugs the right edge */
  gap: calc(26 * var(--u));
}
.inside__link {
  position: relative; display: inline-flex; align-items: baseline; gap: .55em;
  font-size: max(16px, calc(21 * var(--u))); line-height: 1.2;
  padding-bottom: .35em;
}
.inside__link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: currentColor;
  transform-origin: right;
}
.inside__arrow { display: inline-block; font-size: .9em; transition: transform .5s var(--ease-out); }
.inside__link:hover .inside__arrow, .inside__link:focus-visible .inside__arrow { transform: translateX(-6px); }
.inside__link:hover::after, .inside__link:focus-visible::after { animation: linkLine .8s var(--ease-io); }
.inside__link:focus-visible { outline: 1px solid currentColor; outline-offset: 6px; }
@keyframes linkLine {
  0%     { transform: scaleX(1); transform-origin: left; }
  45%    { transform: scaleX(0); transform-origin: left; }
  45.01% { transform: scaleX(0); transform-origin: right; }
  100%   { transform: scaleX(1); transform-origin: right; }
}

/* founders photo preview (shown by main.js while hovering "להכיר את BOX") */
.inside__preview {
  position: absolute; left: 0; top: 0; z-index: 5;
  width: max(200px, calc(300 * var(--u))); aspect-ratio: 1091 / 1441;
  margin: 0; overflow: hidden;
  background: #e9e9ec;
  pointer-events: none;
  opacity: 0;
  transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(.92);
  transition: opacity .45s ease, transform .6s var(--ease-out);
  will-change: transform, opacity;
}
.inside__preview.is-on { opacity: 1; transform: translate3d(var(--px, 0px), var(--py, 0px), 0) scale(1); }
.inside__preview-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* soft fade-up reveal (set by main.js) */
.rv-fade { opacity: 0; translate: 0 22px; transition: opacity 1s ease, translate 1.1s var(--ease-out); }
.rv-fade.in { opacity: 1; translate: 0 0; }
/* lower-section entrances = the opening's (main.js wraps the text) */
.rl { display: block; overflow: hidden; padding-bottom: .07em; margin-bottom: -.07em; }
.rl__in { display: block; }
.rl .wd { display: inline-block; white-space: nowrap; }    /* words never break apart */
/* big English headlines: letters rise one by one (the hero .char animation) */
.js.loaded [data-lines]:not(.in) .char { transform: translateY(105%); transition: none; }
/* small lines: the block rises like the hero tagline */
[data-rise] .rl__in { transform: translateY(105%); transition: transform 1.1s var(--ease-out) .25s; }
[data-rise].in .rl__in { transform: none; }
/* handwriting: wipes in like BRANDING & STRATEGY STUDIO */
.js [data-wipe] { clip-path: inset(-20% 100% -20% 0); }
.js [data-wipe].in { clip-path: inset(-20% -5% -20% 0); transition: clip-path 1.6s var(--ease-io) .45s; }
@media (prefers-reduced-motion: reduce) {
  [data-rise] .rl__in, .js.loaded [data-lines]:not(.in) .char { transform: none !important; }
  .js [data-wipe] { clip-path: none !important; }
}

@media (max-width: 820px) {
  .inside { padding: 56px 16px 100px; }
  .inside__title { font-size: calc(44 * var(--m)); }
  .inside__lead { flex-basis: 100%; margin-top: 20px; }
  .inside__para { margin-top: 56px; }
  .inside__text .ln { display: inline; white-space: normal; }
  .inside__text { margin-right: 34px; width: auto; font-size: max(20px, calc(26 * var(--m))); line-height: 1.12; }
  .inside__plus { top: 4px; width: 18px; }
  .inside__links { margin: 40px 34px 0 0; gap: 20px; }
  .inside__preview { display: none; }
}
@media (hover: none), (pointer: coarse) { .inside__preview { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .rv-fade { opacity: 1; translate: none; transition: none; }
  .inside__link::after { animation: none !important; }
  .inside__preview { transition: opacity .2s ease; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
}

/* ===================== THE COMPANY WE KEEP ===================== */
.clients {
  position: relative; z-index: 3;
  background: #fff; color: #000;
  padding: calc(100 * var(--u)) 0 calc(150 * var(--u));     /* the logo row runs edge to edge */
}
/* centred two-line title + a cute handwritten note on its left */
.clients__head { position: relative; display: flex; justify-content: center; direction: ltr; }
/* same size as "WE DON'T THINK IN BOXES" → one uniform headline scale */
.clients__title {
  position: relative; margin: 0; text-align: center;
  font-weight: 700; font-size: calc(230 * var(--u));
  line-height: .9; letter-spacing: -0.04em;
}
.clients__titlewrap { position: relative; }
.clients__note {                              /* tucked right at the title's top-left corner */
  position: absolute; z-index: 1;
  left: calc(-28 * var(--u)); top: calc(-30 * var(--u));
  font-family: var(--hand);
  font-size: max(18px, calc(32 * var(--u))); line-height: 1;
  white-space: nowrap;
  transform: rotate(-8deg);
}
/* image trail BEHIND the title (main.js): small, quiet project images */
.trail { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.clients__head { z-index: 1; }                               /* letters stay in front */
.trail__img {
  position: absolute; display: block; height: auto;
  will-change: transform, opacity; opacity: 0;
}

/* one black row that keeps sliding (seamless loop: 2 identical sets) */
.clients__marquee {
  margin-top: calc(120 * var(--u));
  overflow: hidden; direction: ltr;
}
.clients__track {
  display: flex; width: max-content;
  animation: clientsSlide 55s linear infinite;
}
.clients__marquee:hover .clients__track { animation-play-state: paused; }
.clients__set {
  display: flex; align-items: center;
  list-style: none; margin: 0; padding: 0;
}
.clients__item {
  flex: none;
  display: grid; place-items: center;
  height: max(70px, calc(130 * var(--u)));
  padding: 0 calc(62 * var(--u));
}
.clients__item img {
  /* --w = per-logo optical width (design units): equal visual weight,
     aspect ratio always preserved */
  width: calc(var(--w) * var(--u)); min-width: calc(var(--w) * .5px);
  height: auto;
  user-select: none; -webkit-user-drag: none;
}
@keyframes clientsSlide { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) { .clients__track { animation: none; } }

/* ===================== YOUR MOVE (final CTA) ===================== */
.move {
  position: relative; z-index: 3;
  background: #000; color: #fff;
  padding: calc(370 * var(--u)) calc(40 * var(--u)) calc(44 * var(--u));   /* headline + cube sit lower */
  overflow: hidden;
}
/* the cube in the finale: large, partly behind "MOVE", slowly floating and
   turning; it rises in as the section arrives (--mp set by main.js, 0→1) */
.move__cube {
  position: absolute; z-index: 0; pointer-events: none;
  left: calc(50% - 320 * var(--u)); top: calc(220 * var(--u));    /* centred, behind the headline */
  width: calc(640 * var(--u));
  mix-blend-mode: screen;
  opacity: calc(.15 + .85 * var(--mp, 1));
  transform: translate3d(0, calc((1 - var(--mp, 1)) * 140px), 0) rotate(calc(-24deg + 14deg * (1 - var(--mp, 1)))) scale(calc(.86 + .14 * var(--mp, 1)));
  will-change: transform, opacity;
}
.move__cube-tilt { will-change: transform; }                 /* follows the pointer (main.js), like the hero cube */
.move__cube-float { animation: moveCube 9s ease-in-out infinite alternate; }
.move__cube img { display: block; width: 100%; height: auto; user-select: none; }
@keyframes moveCube {
  from { transform: translate3d(0, -1.5%, 0) rotate(-2.5deg); }
  to   { transform: translate3d(0, 1.5%, 0) rotate(2.5deg); }
}
.move > :not(.move__cube) { position: relative; z-index: 1; }
.move__title { color: #fff; mix-blend-mode: difference; }   /* crosses the cube like ANOTHER in the hero */
@media (prefers-reduced-motion: reduce) { .move__cube-float { animation: none; } .move__cube { transform: rotate(-24deg); opacity: 1; } }

.move__label {
  margin: 0 0 calc(36 * var(--u));
  direction: ltr; text-align: left;
  font-size: max(12px, calc(15 * var(--u))); letter-spacing: .14em;
  opacity: .7;
}
.move__title {
  margin: 0;
  direction: ltr; text-align: left;
  font-weight: 700; font-size: calc(320 * var(--u));
  line-height: .86; letter-spacing: -0.05em;
  white-space: nowrap;
}
.move__foot {
  display: flex; justify-content: space-between; align-items: flex-end;
  gap: calc(60 * var(--u));
  margin-top: calc(90 * var(--u));
}
.move__text {
  margin: 0; max-width: calc(620 * var(--u));
  font-size: max(18px, calc(32 * var(--u))); line-height: 1.3;
}
/* main CTA: the site's pill — a white circle swells from the centre on hover */
.move__cta {
  position: relative; flex: none;
  display: inline-flex; align-items: center;
  height: max(58px, calc(88 * var(--u)));
  padding: 0 max(34px, calc(60 * var(--u)));
  border: 1px solid #fff; border-radius: 999px;
  color: #fff;
  font-size: max(18px, calc(28 * var(--u))); line-height: 1;
  overflow: hidden; isolation: isolate;
  transition: color .3s ease;
}
.move__cta-fill {
  position: absolute; left: 50%; top: 50%; z-index: -1;
  width: 110%; aspect-ratio: 1; border-radius: 50%;
  background: #fff;
  transform: translate(-50%, -50%) scale(0);
  transition: transform .65s cubic-bezier(.4, 0, .2, 1);
}
.move__cta-label { position: relative; padding-top: .06em; }
.move__cta:hover, .move__cta:focus-visible { color: #000; transition: color .35s ease .2s; }
.move__cta:hover .move__cta-fill, .move__cta:focus-visible .move__cta-fill { transform: translate(-50%, -50%) scale(1); }
.move__cta:focus-visible { outline: 1px solid #fff; outline-offset: 5px; }

/* the sticky contact pill steps aside once the final CTA is on screen */
.js.loaded.at-contact .hello-btn { opacity: 0; translate: 0 14px; pointer-events: none; transition: opacity .5s ease, translate .6s var(--ease-out); }

/* footer: rights (right) · social icons (middle) · credit (left) */
.site-footer {
  display: flex; justify-content: space-between; align-items: center; gap: 24px;
  margin-top: calc(210 * var(--u));
  font-size: max(13px, calc(16 * var(--u)));
}
.site-footer__rights { margin: 0; opacity: .6; }
.site-footer__social { display: flex; gap: max(14px, calc(22 * var(--u))); list-style: none; margin: 0; padding: 0; }
.site-footer__social a {
  display: grid; place-items: center;
  width: max(38px, calc(46 * var(--u))); aspect-ratio: 1;
  border: 1px solid rgba(255, 255, 255, .28); border-radius: 50%;
  transition: background .35s ease, color .35s ease, border-color .35s ease;
}
.site-footer__social svg { width: 42%; height: auto; }
.site-footer__social a:hover, .site-footer__social a:focus-visible { background: #fff; color: #000; border-color: #fff; }
.site-footer__credit { margin: 0; direction: ltr; white-space: nowrap; opacity: .9; }
.site-footer__credit span { font-weight: 300; opacity: .8; }
.site-footer__credit b { font-weight: 700; font-size: 1.12em; letter-spacing: -0.01em; }

@media (max-width: 820px) {
  .clients { padding: 90px 0 90px; }
  .clients__title { font-size: calc(47 * var(--m)); }       /* = the think title on phones */
  .clients__note { left: -4px; top: -26px; font-size: 18px; }
  .clients__marquee { margin-top: 48px; }
  .clients__item { height: 72px; padding: 0 22px; }
  .clients__item img { width: calc(var(--w) * .62px); min-width: 0; }
  .move { padding: 110px 16px 28px; overflow: hidden; }
  .move__cube { width: 260px; left: calc(50% - 130px); top: 50px; }
  .move__title { font-size: calc(96 * var(--m)); white-space: normal; }   /* YOUR / MOVE on two lines */
  .move__foot { flex-direction: column; align-items: flex-start; gap: 32px; margin-top: 40px; }
  .move__text { max-width: none; }
  .site-footer { flex-direction: column; align-items: center; gap: 20px; margin-top: 110px; text-align: center; }
}

/* ============================ TABLET ============================ */
@media (max-width: 1199px) and (min-width: 821px) {
  .intro__text { width: calc(1150 * var(--u)); }
}

/* ============================ MOBILE ============================ */
@media (max-width: 820px) {
  .page * { --m: calc(100cqw / 375); }

  .logo { left: 16px; top: 18px; width: 52px; }
  .nav { display: none; }

  .loader__logo { width: 64px; }
  .loader__tag { left: 16px; bottom: 30px; font-size: 15px; }
  .loader__count { right: 14px; bottom: 16px; }

  .burger {
    display: flex; flex-direction: column; justify-content: center; gap: 7px;
    position: fixed; right: 12px; top: 16px;
    mix-blend-mode: difference;                /* negative over the white section, like the header */
    width: 44px; height: 44px; padding: 10px;
    z-index: 30;
    opacity: 0; transition: opacity .8s ease .6s;
  }
  .loaded .burger { opacity: 1; }
  .burger span {
    display: block; height: 1.5px; width: 100%; background: var(--white);
    transition: transform .5s var(--ease-io);
  }
  body.menu-open .burger { position: fixed; }
  body.menu-open .burger span:first-child { transform: translateY(4.25px) rotate(45deg); }
  body.menu-open .burger span:last-child  { transform: translateY(-4.25px) rotate(-45deg); }

  .hero { height: max(620px, 100svh); }
  .hero__bg { background: radial-gradient(70% 50% at 50% 50%, #121212 0%, #090909 50%, #000 100%); }

  .word { font-size: calc(78 * var(--m)); transform: translateY(var(--py, 0px)); }
  .word--not     { left: 16px;  top: 23%; }
  .word--just    { left: auto; right: 16px; top: 23%; }
  .word--another { left: auto; right: 16px; top: calc(23% + 72 * var(--m)); }

  .cube-anchor--hero {
    width: calc(330 * var(--m));
    height: calc(310 * var(--m));
    left: 50%; top: 52%;
    translate: -50% -50%;
  }

  .branding { left: 10px; top: auto; bottom: 34px; width: auto; height: auto; padding: 8px; }
  .branding__text { font-size: 18px; }
  .tagline { right: 16px; top: auto; bottom: 40px; width: 170px; font-size: 14px; line-height: 1.1; }

  .intro { height: auto; padding: calc(220 * var(--m)) 16px 120px; }
  .cube-anchor--intro {
    width: calc(190 * var(--m));
    height: calc(178.5 * var(--m));
    left: 10px; top: 20px;
  }
  .intro__text {
    position: relative; right: auto; top: auto; width: 100%;
    font-size: calc(30 * var(--m));
    line-height: 1.08;
  }
  .intro__plus { position: absolute; left: auto; right: 16px; top: calc(170 * var(--m)); width: 22px; }

  .think { height: calc(640 * var(--m)); }
  .think__title { left: 50%; top: 40px; font-size: calc(47 * var(--m)); }
  .cube-anchor--think {          /* 12% smaller, same centre */
    width: calc(290.4 * var(--m));
    height: calc(272.8 * var(--m));
    left: 50%; top: calc(40px + 58.6 * var(--m));
    translate: -50% 0;
  }
  .think__tag { right: 16px; top: calc(40px + 380 * var(--m)); width: 170px; font-size: 14px; line-height: 1.1; }
  .think__cta { left: 16px; top: calc(40px + 380 * var(--m) + 15px); height: 42px; padding: 0 18px; font-size: 14px; }
}

/* ============================ MOBILE MENU ============================ */
.mobile-menu {
  position: fixed; inset: 0; z-index: 20;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-io), visibility 0s linear .8s;
}
.mobile-menu nav { display: flex; flex-direction: column; gap: 26px; text-align: right; }
.mobile-menu a {
  font-family: var(--font);
  font-size: 38px; line-height: 1;
  display: flex; align-items: baseline; gap: 14px;
  opacity: 0; transform: translateY(40px);
  transition: opacity .5s ease, transform .8s var(--ease-out);
}
.mobile-menu a span { font-size: 14px; opacity: .6; }
body.menu-open { overflow: hidden; }
body.menu-open .mobile-menu { clip-path: inset(0 0 0 0); visibility: visible; transition: clip-path .8s var(--ease-io), visibility 0s; }
body.menu-open .mobile-menu a { opacity: 1; transform: none; transition-delay: .3s; }
body.menu-open .mobile-menu a:nth-child(2) { transition-delay: .37s; }
body.menu-open .mobile-menu a:nth-child(3) { transition-delay: .44s; }
body.menu-open .mobile-menu a:nth-child(4) { transition-delay: .51s; }
@media (min-width: 821px) { .mobile-menu, .burger { display: none !important; } }

/* ======================= REDUCED MOTION ======================= */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; transition-delay: 0s !important; animation-delay: 0s !important; }
  .cube__float { animation: none; }
}