/* =========================================================
   Shira Bengaiev — Turning a story into an experience
   ========================================================= */

@font-face { font-family: "Leon"; src: url("../fonts/Leon-Thin.woff2") format("woff2"); font-weight: 200; font-display: swap; }
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Leon"; src: url("../fonts/Leon-Heavy.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../fonts/Polin-Regular.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Polin"; src: url("../fonts/Polin-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cooperative"; src: url("../fonts/Cooperative-Bold.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Cooperative Dirty"; src: url("../fonts/Cooperative-DirtyBold.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --purple: #9966ff;
  --purple-2: #b28cff;
  --purple-deep: #5b3fd1;
  --green: #00f28f;
  --ink: #2f2935;
  --night: #1b1724;
  --night-2: #241e2e;
  --text: #0e0e0e;
  --paper: #ffffff;
  --mist: #f6f3fb;
  --star: #f26b3a;
  --shadow-soft: 0 4px 80px #f1eaea;

  --f-he: "Leon", "Polin", system-ui, sans-serif;
  --f-he-2: "Polin", "Leon", system-ui, sans-serif;
  --f-display: "Cooperative", "Leon", Impact, sans-serif;

  --fs-giant: clamp(110px, 15.6vw, 300px);
  --fs-xxl: clamp(46px, 5vw, 96px);
  --fs-xl: clamp(28px, 2.1vw, 40px);
  --fs-l: clamp(20px, 1.46vw, 28px);
  --fs-m: clamp(16px, 1.05vw, 20px);
  --fs-s: clamp(13px, .8vw, 15px);

  --gutter: clamp(16px, 3.4vw, 64px);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --ease-io: cubic-bezier(.76, 0, .24, 1);
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  margin: 0;
  font-family: var(--f-he);
  font-size: var(--fs-m);
  line-height: 1.55;
  color: var(--ink);
  background: var(--paper);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}
body.is-loading { overflow: hidden; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; padding: 0; }
h1, h2, h3, p, figure, ul { margin: 0; padding: 0; }
ul { list-style: none; }
em { font-style: normal; }
::selection { background: var(--purple); color: #fff; }
:focus-visible { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 6px; }

.eyebrow {
  display: inline-flex; align-items: center; gap: 10px;
  font-family: var(--f-display); text-transform: uppercase;
  font-size: var(--fs-s); letter-spacing: .18em; color: rgba(255,255,255,.55);
}
.eyebrow::before { content: ""; width: 28px; height: 1px; background: currentColor; }
.eyebrow--dark { color: rgba(47,41,53,.55); }
.eyebrow--ink { color: rgba(27,23,36,.7); }

/* ---------- grain ---------- */
.grain {
  position: fixed; inset: 0; width: 100%; height: 100%;
  pointer-events: none; z-index: 9000; opacity: .07; mix-blend-mode: overlay;
}

/* ---------- progress ---------- */
.progress { position: fixed; top: 0; inset-inline: 0; height: 3px; z-index: 950; pointer-events: none; }
.progress span { display: block; height: 100%; width: 100%; transform-origin: right; transform: scaleX(0);
  background: linear-gradient(270deg, var(--purple), var(--green)); }

/* ---------- cursor ---------- */
.cursor { position: fixed; top: 0; left: 0; z-index: 9500; pointer-events: none; }
.cursor__dot, .cursor__ring { position: fixed; top: 0; left: 0; border-radius: 50%; will-change: transform; }
.cursor__dot { width: 8px; height: 8px; margin: -4px 0 0 -4px; background: var(--green); }
.cursor__ring {
  width: 40px; height: 40px; margin: -20px 0 0 -20px;
  border: 1px solid rgba(153,102,255,.8);
  display: grid; place-items: center;
  transition: width .45s var(--ease), height .45s var(--ease), margin .45s var(--ease), background .3s, border-color .3s;
}
.cursor__label { font-size: 14px; font-weight: 700; color: var(--night); opacity: 0; transform: scale(.6); transition: .35s var(--ease); white-space: nowrap; }
.cursor.is-link .cursor__ring { width: 64px; height: 64px; margin: -32px 0 0 -32px; background: rgba(153,102,255,.15); border-color: transparent; }
.cursor.is-label .cursor__ring { width: 104px; height: 104px; margin: -52px 0 0 -52px; background: var(--green); border-color: transparent; }
.cursor.is-label .cursor__label { opacity: 1; transform: none; }
.cursor.is-label .cursor__dot { opacity: 0; }
.cursor.is-hidden { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor { display: none; } }
@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } }

/* ---------- loader (nickho-style counter) ---------- */
.loader {
  position: fixed; inset: 0; z-index: 9800;
  background: radial-gradient(120% 90% at 20% 10%, #3a2d63 0%, var(--night) 55%, #120f19 100%);
  color: #fff; display: grid; place-items: center; overflow: hidden;
}
.loader__grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(6, 1fr); pointer-events: none; }
.loader__grid i { border-inline-start: 1px solid rgba(255,255,255,.06); transform-origin: top; }
.loader__count {
  font-family: var(--f-display); font-size: clamp(140px, 24vw, 420px); line-height: .8;
  color: transparent; -webkit-text-stroke: 1.5px var(--purple); letter-spacing: -.01em;
  direction: ltr; font-variant-numeric: tabular-nums;
}
.loader__line {
  position: absolute; bottom: clamp(32px, 7vh, 80px); inset-inline: 0; text-align: center;
  font-family: var(--f-display); text-transform: uppercase; letter-spacing: .3em; font-size: var(--fs-s);
  color: rgba(255,255,255,.6); display: flex; gap: .6em; justify-content: center; flex-wrap: wrap;
}
.loader__line span { display: inline-block; opacity: 0; transform: translateY(14px); }
.loader__line .is-accent { color: var(--purple); }
.loader__bar { position: absolute; bottom: 0; inset-inline: 0; height: 2px; background: rgba(255,255,255,.06); }
.loader__bar span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, var(--green), var(--purple)); transform-origin: left; transform: scaleX(0); }

/* ---------- header ---------- */
.header {
  position: fixed; top: 0; inset-inline: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(18px, 2.2vw, 40px) var(--gutter);
  color: #fff;
  transition: transform .6s var(--ease), color .4s, background .4s, padding .4s var(--ease);
}
.header::before {
  content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; transition: opacity .4s;
  background: rgba(27,23,36,.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  border-bottom: 1px solid rgba(255,255,255,.06);
}
.header.is-scrolled { padding-block: 14px; }
.header.is-scrolled::before { opacity: 1; }
.header.is-light { color: var(--ink); }
.header.is-light::before { background: rgba(255,255,255,.72); border-bottom-color: rgba(47,41,53,.06); }
.header.is-hidden { transform: translateY(-110%); }
.logo { display: block; width: clamp(130px, 10.5vw, 201px); color: inherit; }
.logo__svg { width: 100%; height: auto; display: block; overflow: visible; }
.nav { display: flex; gap: clamp(28px, 3vw, 58px); font-size: var(--fs-m); }

/* rolling text links */
[data-roll] { position: relative; display: inline-block; overflow: hidden; vertical-align: top; }
[data-roll] .roll { display: block; transition: transform .55s var(--ease); }
[data-roll] .roll + .roll { position: absolute; top: 100%; inset-inline: 0; }
[data-roll]:hover .roll, a:hover > [data-roll] .roll, button:hover > [data-roll] .roll { transform: translateY(-100%); }

.nav__link { padding-block: 4px; }
.nav__link::after {
  content: ""; position: absolute; bottom: 0; inset-inline: 0; height: 1px; background: var(--green);
  transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease);
}
.nav__link:hover::after, .nav__link.is-active::after { transform: scaleX(1); transform-origin: right; }

.burger { display: none; width: 44px; height: 44px; position: relative; z-index: 2; }
.burger span { position: absolute; left: 10px; right: 10px; height: 2px; background: currentColor; transition: transform .5s var(--ease), top .5s var(--ease); }
.burger span:first-child { top: 17px; }
.burger span:last-child { top: 25px; }
.menu-open .burger span:first-child { top: 21px; transform: rotate(45deg); }
.menu-open .burger span:last-child { top: 21px; transform: rotate(-45deg); }

.menu { position: fixed; inset: 0; z-index: 890; pointer-events: none; visibility: hidden; color: #fff; }
.menu__bg { position: absolute; inset: 0; background: var(--purple); clip-path: circle(0% at calc(100% - 40px) 40px); transition: clip-path .9s var(--ease-io); }
.menu__nav { position: relative; display: flex; flex-direction: column; justify-content: center; height: 100%; padding: 0 var(--gutter); gap: 6px; }
.menu__nav a { font-weight: 900; font-size: clamp(44px, 12vw, 80px); line-height: 1.1; display: flex; align-items: baseline; gap: 14px; opacity: 0; transform: translateY(40px); transition: .7s var(--ease); }
.menu__nav small { font-family: var(--f-display); font-size: 14px; color: var(--night); letter-spacing: .1em; }
.menu__foot { position: absolute; bottom: 28px; inset-inline: var(--gutter); font-family: var(--f-display); text-transform: uppercase; letter-spacing: .2em; font-size: 12px; opacity: 0; transition: opacity .6s .4s; }
.menu-open .menu { pointer-events: auto; visibility: visible; }
.menu-open .menu__bg { clip-path: circle(150% at calc(100% - 40px) 40px); }
.menu-open .menu__nav a { opacity: 1; transform: none; }
.menu-open .menu__nav a:nth-child(1) { transition-delay: .25s; }
.menu-open .menu__nav a:nth-child(2) { transition-delay: .32s; }
.menu-open .menu__nav a:nth-child(3) { transition-delay: .39s; }
.menu-open .menu__nav a:nth-child(4) { transition-delay: .46s; }
.menu-open .menu__foot { opacity: .8; }
.menu-open .header { color: #fff; }
.menu-open .header::before { opacity: 0; }

/* ---------- marquee base ---------- */
.marquee { overflow: hidden; white-space: nowrap; }
.marquee__track { display: inline-flex; will-change: transform; }
.marquee__item { flex: none; }

/* ---------- HERO ---------- */
.hero {
  position: relative; height: 100vh; height: 100svh; min-height: 680px; max-height: 1180px;
  overflow: hidden; color: #fff; background: var(--night); isolation: isolate;
}
.hero__bg { position: absolute; inset: -4%; z-index: -3; }
.hero__bg img { width: 100%; height: 100%; object-fit: cover; }
.hero__glow {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    linear-gradient(180deg, rgba(153,102,255,.28) 0%, rgba(153,102,255,0) 38%),
    linear-gradient(0deg, rgba(27,23,36,.85) 0%, rgba(27,23,36,0) 30%);
}
.hero__rows { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.hero__row {
  position: absolute; inset-inline: 0;
  font-family: var(--f-display); font-size: var(--fs-giant); line-height: 1; text-transform: uppercase;
  color: rgba(255,255,255,.05); letter-spacing: -.005em;
}
.hero__row em { color: var(--purple); }
.hero__row--1 { top: 15%; }
.hero__row--2 { top: 44.4%; }
.hero__row--2 em { color: rgba(153,102,255,.9); }

.hero__person { position: absolute; bottom: 0; left: -8.2vw; width: 63.6vw; aspect-ratio: 1222 / 912; max-height: 92%; z-index: 1; pointer-events: none; }
.hero__person-crop { position: absolute; inset: 0; overflow: hidden; }
.hero__photo { position: absolute; width: 125.29%; height: 111.91%; left: -25.29%; top: -11.91%; }
.hero__photo > img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; filter: drop-shadow(0 30px 60px rgba(10,6,20,.55)); }

/* ---------- showreel inside the sunglasses ---------- */
.lens { position: absolute; overflow: hidden; background: #2a1450;
  -webkit-mask: var(--mask) center / 100% 100% no-repeat; mask: var(--mask) center / 100% 100% no-repeat; }
.lens--l { --mask: url("../assets/lens-l.png"); }
.lens--r { --mask: url("../assets/lens-r.png"); }
.lens .reel { position: absolute; inset: -12%; transform: rotate(-5deg); }
.lens__glass { position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(118deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,0) 26%, rgba(255,255,255,0) 58%, rgba(255,255,255,.18) 66%, rgba(255,255,255,0) 76%),
    radial-gradient(120% 90% at 50% 40%, rgba(0,0,0,0) 45%, rgba(20,5,45,.65) 100%);
}
.lens::after { content: ""; position: absolute; inset: 0; background: #8a4dff; mix-blend-mode: color; opacity: .45; pointer-events: none; }

.reel { overflow: hidden; background: #120d1c; }
.reel__slide { position: absolute; inset: 0; overflow: hidden; }
.reel__slide img { width: 100%; height: 100%; object-fit: cover; will-change: transform; }
.reel__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; z-index: 50; }
.reel.has-video .reel__video { display: block; }

.reel-full { --lens: 0px; --r: 0; position: absolute; inset: 0; z-index: 5; visibility: hidden; color: #fff;
  clip-path: circle(calc(var(--lens) + var(--r) * 120vmax) at 50% 50%); }
.reel--full { position: absolute; inset: 0; }
.reel--full::after { content: ""; position: absolute; inset: 0; z-index: 60; pointer-events: none;
  background: linear-gradient(0deg, rgba(18,13,28,.85) 0%, rgba(18,13,28,.2) 35%, rgba(18,13,28,0) 60%, rgba(18,13,28,.45) 100%); }
.reel-ui { position: absolute; inset: clamp(16px, 3vw, 44px); z-index: 70; pointer-events: none; font-family: var(--f-display); letter-spacing: .2em; text-transform: uppercase; font-size: var(--fs-s); }
.reel-ui__corner { position: absolute; width: 34px; height: 34px; border: 0 solid rgba(255,255,255,.8); }
.reel-ui__corner--tl { top: 0; left: 0; border-top-width: 2px; border-left-width: 2px; }
.reel-ui__corner--tr { top: 0; right: 0; border-top-width: 2px; border-right-width: 2px; }
.reel-ui__corner--bl { bottom: 0; left: 0; border-bottom-width: 2px; border-left-width: 2px; }
.reel-ui__corner--br { bottom: 0; right: 0; border-bottom-width: 2px; border-right-width: 2px; }
.reel-ui__rec { position: absolute; top: 56px; left: 22px; display: flex; align-items: center; gap: 8px; }
.reel-ui__rec i { width: 10px; height: 10px; border-radius: 50%; background: #ff3b5c; animation: rec 1.2s steps(2, jump-none) infinite; }
@keyframes rec { 50% { opacity: .15; } }
.reel-ui__label { position: absolute; top: 56px; right: 22px; color: rgba(255,255,255,.75); }
.reel-ui__tc { position: absolute; bottom: 22px; left: 22px; font-variant-numeric: tabular-nums; color: var(--green); }
.reel-ui__title { position: absolute; bottom: 40px; right: 22px; display: flex; align-items: flex-end; gap: 18px; text-transform: none; letter-spacing: 0; font-family: var(--f-he); }
.reel-ui__num { font-family: var(--f-display); font-size: clamp(56px, 6vw, 110px); line-height: .8; color: transparent; -webkit-text-stroke: 1.5px var(--purple); }
.reel-ui__name { font-weight: 900; font-size: var(--fs-xxl); line-height: 1; }
.reel-ui__tag { font-size: var(--fs-l); color: rgba(255,255,255,.75); margin-top: 6px; }
.reel-ui__text { overflow: hidden; }
.reel-ui__bar { position: absolute; bottom: 0; left: 50%; width: min(320px, 40%); transform: translateX(-50%); height: 2px; background: rgba(255,255,255,.18); bottom: 26px; }
.reel-ui__bar span { display: block; height: 100%; background: var(--green); transform-origin: left; transform: scaleX(0); }

.hero__content { position: absolute; z-index: 2; inset-inline-start: var(--gutter); bottom: clamp(48px, 9vh, 120px); text-align: right; }
.hero__title { font-weight: 400; font-size: var(--fs-l); line-height: 1.3; }
.hero__title b { font-weight: 900; }
.green { color: var(--green); }
.line { display: block; overflow: hidden; padding-bottom: .06em; }
.line > span { display: inline-block; }

.btn-ghost {
  margin-top: 28px; display: inline-flex; align-items: center; gap: 12px;
  padding: 14px 26px; border-radius: 100px; border: 1px solid rgba(255,255,255,.35);
  font-size: var(--fs-m); backdrop-filter: blur(6px); transition: background .4s, border-color .4s, color .4s;
}
.btn-ghost svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.btn-ghost:hover { background: var(--green); border-color: var(--green); color: var(--night); }
.btn-ghost:hover svg { transform: translateX(-6px); }

.scroll-badge { position: absolute; z-index: 2; left: 59%; bottom: clamp(48px, 9vh, 120px); width: 112px; height: 112px; display: grid; place-items: center; border-radius: 50%; background: rgba(27,23,36,.35); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); }
.scroll-badge__ring, .about__badge { direction: ltr; }
.scroll-badge__ring { position: absolute; inset: 0; width: 100%; height: 100%; animation: spin 16s linear infinite; }
.scroll-badge__ring text { font-family: var(--f-display); font-size: 11px; letter-spacing: .1em; fill: rgba(255,255,255,.7); }
.scroll-badge__arrow { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: grid; place-items: center; transition: background .4s; }
.scroll-badge__arrow svg { width: 20px; fill: none; stroke: #fff; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; animation: bob 2s var(--ease) infinite; }
.scroll-badge:hover .scroll-badge__arrow { background: var(--purple); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes bob { 0%,100% { transform: translateY(-3px); } 50% { transform: translateY(4px); } }

/* ---------- SHOWCASE ---------- */
.showcase { position: relative; background: #fff; height: clamp(560px, 41.6vw, 800px); z-index: 2; }
.showcase__text {
  position: absolute; top: 49%; inset-inline: 0; overflow: hidden; white-space: nowrap; pointer-events: none;
  font-family: var(--f-display); font-size: var(--fs-giant); line-height: 1.1; text-transform: uppercase;
}
.showcase__text span {
  display: inline-block; padding-inline: 4vw;
  background: linear-gradient(180deg, var(--purple) 15%, rgba(153,102,255,.25) 60%, rgba(153,102,255,0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.showcase__cards { position: absolute; inset: 0; }
.tilt-card {
  position: absolute; width: 28vw; max-width: 538px; aspect-ratio: 538 / 579;
  border-radius: 10px; box-shadow: 0 4px 50px rgba(153,102,255,.6);
  overflow: hidden; background: var(--night); will-change: transform;
  transition: box-shadow .5s var(--ease);
}
.tilt-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.1s var(--ease); }
.tilt-card figcaption {
  position: absolute; bottom: 16px; inset-inline-end: 16px; padding: 8px 16px; border-radius: 100px;
  background: rgba(27,23,36,.75); color: #fff; font-size: 14px; backdrop-filter: blur(8px);
  transform: translateY(20px); opacity: 0; transition: .5s var(--ease);
}
.tilt-card:hover { box-shadow: 0 10px 90px rgba(153,102,255,.85); }
.tilt-card:hover img { transform: scale(1.06); }
.tilt-card:hover figcaption { transform: none; opacity: 1; }
.tilt-card--1 { left: 7.6vw; top: 40%; transform: rotate(1.72deg); }
.tilt-card--2 { left: 45.4vw; top: 14%; transform: rotate(-4.96deg); }
.tilt-card--3 { left: 89vw; top: 44%; transform: rotate(3.04deg); }

/* ---------- DARK ZONE ---------- */
.darkzone { position: relative; background: var(--ink); color: #fff; overflow: hidden; isolation: isolate; }
.darkzone__glow { position: absolute; top: 0; inset-inline: 0; height: clamp(500px, 40vw, 780px); z-index: -1; pointer-events: none;
  background: linear-gradient(180deg, rgba(153,102,255,.55) 0%, rgba(118,80,200,.25) 35%, rgba(47,41,53,0) 100%); }

.manifesto { min-height: 100vh; display: grid; place-items: center; padding: clamp(150px, 12vw, 240px) var(--gutter) clamp(60px, 6vw, 120px); text-align: center; }
.manifesto__inner { max-width: 1000px; }
.manifesto__quote { display: block; font-weight: 900; font-size: var(--fs-xxl); line-height: .6; height: .45em; color: #fff; }
.manifesto__pre { font-size: var(--fs-xl); margin-top: .4em; }
.manifesto__title { font-weight: 900; font-size: var(--fs-xxl); line-height: 1.15; margin-top: .35em; }
.manifesto__title > span { display: block; }
.manifesto__l2 { color: var(--purple); }
.manifesto__body { max-width: 560px; margin: 1.6em auto 0; font-size: var(--fs-m); line-height: 1.5; color: rgba(255,255,255,.9); }
[data-words] .w { display: inline-block; opacity: .14; transition: none; }

.work { position: relative; padding: clamp(40px, 6vw, 120px) 0 clamp(90px, 9vw, 170px); }
.work__head { text-align: center; max-width: 660px; margin: 0 auto; padding: 0 var(--gutter); display: flex; flex-direction: column; align-items: center; gap: 18px; }
.work__title { font-weight: 900; font-size: var(--fs-xl); }
.work__lead { font-size: var(--fs-m); color: rgba(255,255,255,.88); }

.work__stage { position: relative; margin-top: clamp(30px, 3vw, 56px); }
.work__bigtext {
  position: absolute; bottom: -6%; inset-inline: 0; white-space: nowrap; overflow: hidden; pointer-events: none;
  font-family: var(--f-display); font-size: var(--fs-giant); line-height: 1; text-transform: uppercase;
}
.work__bigtext span {
  display: inline-block;
  background: linear-gradient(180deg, rgba(153,102,255,.15) 0%, rgba(153,102,255,.55) 55%, rgba(153,102,255,.15) 100%);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.work__mock {
  position: relative; display: block; width: min(64vw, 1231px); aspect-ratio: 1231 / 764; margin: 0 auto;
  border-radius: 10px; overflow: hidden; background: #f3f1f4; z-index: 1;
  box-shadow: 0 40px 120px rgba(10, 6, 20, .45);
  transform-origin: center top;
}
.work__mock img { position: absolute; height: 100%; width: 110.28%; left: -5.67%; top: 0; max-width: none; object-fit: cover; transition: transform 1.2s var(--ease); }
.work__mock:hover img { transform: scale(1.03); }
.work__shine { position: absolute; inset: 0; background: linear-gradient(115deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%); transform: translateX(-120%); pointer-events: none; }
.work__mock:hover .work__shine { transform: translateX(120%); transition: transform 1.2s var(--ease); }

.work__meta { width: min(64vw, 1231px); margin: clamp(30px, 3vw, 56px) auto 0; display: flex; justify-content: space-between; align-items: flex-end; gap: 30px; position: relative; z-index: 1; }
.work__meta-col { display: flex; gap: 22px; align-items: flex-start; max-width: 520px; }
.work__num { font-family: var(--f-display); font-size: clamp(44px, 4vw, 72px); line-height: .9; color: transparent; -webkit-text-stroke: 1px var(--purple); }
.work__name { font-weight: 900; font-size: var(--fs-l); }
.work__desc { color: rgba(255,255,255,.7); margin-top: 6px; }
.tags { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; max-width: 460px; }
.tags li { border: 1px solid rgba(255,255,255,.18); border-radius: 100px; padding: 6px 16px; font-size: 14px; color: rgba(255,255,255,.85); transition: color .35s, border-color .35s; }
.tags li:hover { border-color: var(--green); color: var(--green); }

/* ---------- ABOUT ---------- */
.about { position: relative; background: #fff; color: var(--ink); padding: clamp(90px, 8vw, 160px) var(--gutter) clamp(60px, 6vw, 120px); overflow: hidden; }
.about__grid { display: grid; grid-template-columns: 1fr minmax(280px, 656px) 1fr; gap: clamp(24px, 3vw, 60px); max-width: 1720px; margin: 0 auto; align-items: start; }
.about__intro { padding-top: clamp(60px, 10vw, 200px); display: flex; flex-direction: column; gap: 18px; }
.about__title { font-weight: 900; font-size: var(--fs-xl); }
.about__lead { max-width: 604px; }
.about__stat { display: flex; align-items: center; gap: 16px; margin-top: 18px; }
.about__stat-num { font-family: var(--f-display); font-size: clamp(64px, 6vw, 110px); line-height: .85; color: var(--purple); }
.about__stat-label { font-size: var(--fs-s); line-height: 1.4; color: rgba(47,41,53,.7); }

.about__photo { position: relative; aspect-ratio: 656 / 778; }
.about__photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top; z-index: 1;
  -webkit-mask-image: linear-gradient(180deg, #000 78%, transparent 100%); mask-image: linear-gradient(180deg, #000 78%, transparent 100%); }
.about__blob { position: absolute; left: 50%; top: 52%; width: 78%; aspect-ratio: 1; transform: translate(-50%, -50%); border-radius: 50%;
  background: radial-gradient(circle at 35% 30%, #c9b0ff 0%, var(--purple) 45%, rgba(153,102,255,0) 72%); opacity: .35; filter: blur(10px); }
.about__badge { position: absolute; z-index: 2; width: clamp(110px, 9vw, 170px); top: 6%; left: 2%; animation: spin 22s linear infinite; }
.about__badge text { font-family: var(--f-display); font-size: 15px; letter-spacing: .06em; fill: var(--purple); }

.about__text { align-self: end; padding-bottom: clamp(20px, 6vw, 120px); max-width: 509px; justify-self: end; display: flex; flex-direction: column; gap: 4px; }
.signature {
  font-family: var(--f-display); font-size: clamp(54px, 5vw, 96px); line-height: 1; margin-top: 22px; align-self: flex-start;
  color: transparent; -webkit-text-stroke: 1px var(--purple); letter-spacing: .02em; text-transform: uppercase;
}

.pillars { max-width: 1720px; margin: clamp(60px, 6vw, 120px) auto 0; display: grid; grid-template-columns: repeat(3, 1fr); border-top: 1px solid rgba(47,41,53,.12); }
.pillar { padding: 34px clamp(16px, 2vw, 40px) 10px; border-inline-start: 1px solid rgba(47,41,53,.12); position: relative; }
.pillar:first-child { border-inline-start: 0; padding-inline-start: 0; }
.pillar__n { font-family: var(--f-display); color: var(--purple); font-size: 16px; letter-spacing: .1em; }
.pillar h3 { font-weight: 900; font-size: var(--fs-l); margin: 8px 0 8px; }
.pillar p { color: rgba(47,41,53,.72); max-width: 380px; }
.pillar::after { content: ""; position: absolute; top: -1px; inset-inline: 0; height: 2px; background: var(--purple); transform: scaleX(0); transform-origin: right; transition: transform .7s var(--ease); }
.pillar:hover::after { transform: scaleX(1); }

/* ---------- REVIEWS ---------- */
.reviews { background: #fff; padding: clamp(50px, 5vw, 100px) 0 clamp(90px, 8vw, 160px); overflow: hidden; }
.reviews__title { text-align: center; font-weight: 900; font-size: var(--fs-xl); color: var(--ink); margin-bottom: clamp(40px, 4vw, 70px); }
.reviews__rows { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 59px); }
.reviews__row { padding-block: 40px; margin-block: -40px; }
.reviews__row .marquee__track { gap: clamp(18px, 1.9vw, 36px); padding-inline-end: clamp(18px, 1.9vw, 36px); }
.review {
  direction: rtl; flex: none; width: clamp(300px, 26.3vw, 505px); min-height: clamp(300px, 19.2vw, 368px);
  background: #fff; border-radius: clamp(32px, 2.6vw, 50px); box-shadow: var(--shadow-soft);
  padding: clamp(24px, 1.5vw, 28px) clamp(26px, 2.2vw, 42px) clamp(24px, 1.8vw, 34px);
  display: flex; flex-direction: column; white-space: normal; font-family: var(--f-he-2); color: var(--text);
  transition: transform .6s var(--ease), box-shadow .6s var(--ease);
}
.review:hover { transform: translateY(-8px); box-shadow: 0 20px 80px rgba(153,102,255,.18); }
.review__top { display: flex; justify-content: space-between; align-items: center; }
.review__avatar { width: 66px; height: 66px; border-radius: 50%; overflow: hidden; flex: none; }
.review__avatar img { width: 100%; height: 100%; object-fit: cover; }
.review__stars { display: flex; gap: 3px; direction: ltr; }
.review__stars svg { width: 28px; height: 28px; fill: none; stroke: var(--star); stroke-width: 1.2; }
.review__stars svg.is-on { fill: var(--star); fill-opacity: .12; }
.review__text { margin-top: 18px; font-size: var(--fs-m); line-height: 1.5; flex: 1; }
.review__name { margin-top: 20px; font-weight: 700; font-size: var(--fs-m); }

/* ---------- CTA ---------- */
.cta { position: relative; background: var(--ink); color: #fff; text-align: center; overflow: hidden; isolation: isolate; padding: clamp(110px, 11vw, 210px) var(--gutter) clamp(50px, 4vw, 80px); }
.cta__bg { position: absolute; inset: -6%; z-index: -1; opacity: .2; }
.cta__bg img { width: 100%; height: 100%; object-fit: cover; }
.cta::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(60% 50% at 50% 45%, rgba(153,102,255,.18), transparent 70%); }
.cta__inner { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; }
.cta__title { font-weight: 900; font-size: var(--fs-xxl); line-height: 1.2; }
.cta__title em { color: var(--purple); }
.cta__sub { font-size: var(--fs-xl); margin-top: .5em; }
.cta__body { max-width: 641px; margin-top: 1.8em; color: rgba(255,255,255,.88); }

.btn-green {
  margin-top: clamp(40px, 3.3vw, 64px); position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 14px;
  width: clamp(260px, 19.2vw, 369px); height: clamp(64px, 4.4vw, 85px); border-radius: 100px; background: var(--green); color: var(--night);
  font-weight: 900; font-size: var(--fs-l); overflow: hidden; isolation: isolate;
  box-shadow: 0 0 0 0 rgba(0,242,143,.5); transition: box-shadow .5s var(--ease);
}
.btn-green::before { content: ""; position: absolute; inset: 0; z-index: -1; background: #fff; border-radius: inherit; transform: scale(0); transition: transform .6s var(--ease); }
.btn-green:hover { box-shadow: 0 0 60px 6px rgba(0,242,143,.35); }
.btn-green:hover::before { transform: scale(1.05); }
.btn-green__icon { width: 40px; height: 40px; border-radius: 50%; background: var(--night); display: grid; place-items: center; transition: transform .5s var(--ease); }
.btn-green__icon svg { width: 20px; fill: none; stroke: var(--green); stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.btn-green:hover .btn-green__icon { transform: translateX(-6px) rotate(-8deg); }

.clients { margin-top: clamp(80px, 7vw, 130px); }
.clients__label { font-size: var(--fs-s); color: rgba(255,255,255,.45); letter-spacing: .08em; margin-bottom: 26px; }
.clients__list { display: flex; justify-content: space-around; align-items: center; gap: 24px; max-width: 1500px; margin: 0 auto; flex-wrap: wrap; }
.clients__list li { opacity: .5; transition: opacity .4s, transform .5s var(--ease); }
.clients__list li:hover { opacity: 1; transform: translateY(-4px); }
.clients__list img { height: clamp(52px, 4vw, 78px); width: auto; }

/* ---------- FOOTER ---------- */
.footer { position: relative; background: var(--purple); color: var(--night); padding: clamp(100px, 8vw, 160px) var(--gutter) 28px; overflow: hidden; isolation: isolate; }
.footer::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 60% at 85% 10%, rgba(255,255,255,.22), transparent 70%), radial-gradient(40% 50% at 10% 90%, rgba(91,63,209,.45), transparent 70%); }
.footer__top { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 140px); max-width: 1720px; margin: 0 auto; align-items: start; }
.footer__intro { display: flex; flex-direction: column; gap: 22px; }
.footer__title { font-weight: 900; font-size: clamp(38px, 4vw, 76px); line-height: 1.12; color: #fff; }
.footer__lead { font-size: var(--fs-l); max-width: 520px; }
.footer__links { margin-top: 18px; display: flex; flex-direction: column; gap: 4px; font-size: var(--fs-l); font-weight: 700; }
.footer__links a { padding-block: 8px; display: inline-block; border-bottom: 1px solid rgba(27,23,36,.2); }

.form { background: var(--night); color: #fff; border-radius: clamp(28px, 2.6vw, 50px); padding: clamp(28px, 3vw, 56px); display: flex; flex-direction: column; gap: 20px; box-shadow: 0 40px 100px rgba(40,20,90,.35); }
.form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.field { position: relative; display: block; }
.field input, .field textarea {
  width: 100%; font: inherit; font-size: var(--fs-m); color: #fff; background: transparent; border: 0;
  border-bottom: 1px solid rgba(255,255,255,.22); padding: 26px 0 10px; outline: none; resize: none; border-radius: 0; transition: border-color .3s;
}
.field span { position: absolute; top: 26px; inset-inline-start: 0; color: rgba(255,255,255,.55); pointer-events: none; transition: .35s var(--ease); transform-origin: right top; }
.field input:focus, .field textarea:focus { border-color: var(--green); }
.field input:focus + span, .field input:not(:placeholder-shown) + span,
.field textarea:focus + span, .field textarea:not(:placeholder-shown) + span { transform: translateY(-22px) scale(.78); color: var(--green); }
.field.is-invalid input { border-color: #ff6b8a; }
.chips { border: 0; margin: 6px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px; }
.chips legend { width: 100%; margin-bottom: 10px; color: rgba(255,255,255,.55); font-size: var(--fs-s); padding: 0; }
.chips label { cursor: pointer; }
.chips input { position: absolute; opacity: 0; pointer-events: none; }
.chips span { display: inline-block; padding: 9px 18px; border-radius: 100px; border: 1px solid rgba(255,255,255,.22); font-size: 15px; transition: .3s var(--ease); }
.chips label:hover span { border-color: var(--purple-2); }
.chips input:checked + span { background: var(--purple); border-color: var(--purple); color: #fff; }
.chips input:focus-visible + span { outline: 2px solid var(--green); outline-offset: 3px; }
.form__submit { margin-top: 10px; align-self: flex-start; display: inline-flex; align-items: center; gap: 14px; padding: 18px 34px; border-radius: 100px; background: var(--green); color: var(--night); font-weight: 900; font-size: var(--fs-m); transition: box-shadow .4s; }
.form__submit svg { width: 20px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.form__submit:hover { box-shadow: 0 0 40px rgba(0,242,143,.45); }
.form__submit:hover svg { transform: translateX(-6px); }
.form__ok { min-height: 1.4em; color: var(--green); font-size: var(--fs-s); }

.footer__brand { max-width: 1840px; margin: clamp(70px, 7vw, 140px) auto 0; display: flex; justify-content: center; gap: .18em; flex-wrap: nowrap;
  font-family: var(--f-display); font-size: clamp(64px, 13.4vw, 258px); line-height: .82; text-transform: uppercase; color: var(--night); white-space: nowrap; }
.footer__word { display: inline-block; overflow: hidden; }
.footer__word i { font-style: normal; color: var(--green); }
.footer__brand .ch { display: inline-block; }
.footer__bottom { max-width: 1720px; margin: 34px auto 0; padding-top: 22px; border-top: 1px solid rgba(27,23,36,.2); display: flex; justify-content: space-between; align-items: center; font-size: var(--fs-s); gap: 16px; }
.totop { font-weight: 700; padding: 8px 18px; border: 1px solid rgba(27,23,36,.3); border-radius: 100px; transition: .35s; }
.totop:hover { background: var(--night); color: #fff; }

/* reveal helpers — JS-enhanced; visible by default */
.js .reveal-up { opacity: 0; transform: translateY(40px); }

/* =========================================================
   RESPONSIVE
   ========================================================= */
@media (max-width: 1100px) {
  .about__grid { grid-template-columns: 1fr 1fr; }
  .about__intro { grid-column: 1 / -1; padding-top: 0; }
  .about__photo { grid-row: span 1; }
  .about__text { justify-self: stretch; }
  .work__meta { flex-direction: column; align-items: flex-start; }
  .tags { justify-content: flex-start; }
}

@media (max-width: 860px) {
  .reel-ui__label { display: none; }
  .reel-ui__title { bottom: 60px; }
  .nav { display: none; }
  .burger { display: block; }
  .header { flex-direction: row-reverse; }

  .hero { min-height: 640px; max-height: none; }
  .hero__row { font-size: 30vw; }
  .hero__row--1 { top: 38%; }
  .hero__row--2 { top: 55%; }
  .hero__row--2 em { color: rgba(153,102,255,.45); }
  .hero__person { width: 150vw; left: -62vw; max-height: none; }
  .hero__content { inset-inline: var(--gutter); top: 110px; bottom: auto; }
  .hero__title { font-size: 24px; }
  .btn-ghost { margin-top: 18px; padding: 11px 20px; }
  .scroll-badge { display: none; }

  .showcase { height: auto; padding: 60px 0 40px; }
  .showcase__text { top: 50%; transform: translateY(-50%); font-size: 30vw; }
  .showcase__cards { position: relative; display: flex; gap: 18px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 30px var(--gutter) 40px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .showcase__cards::-webkit-scrollbar { display: none; }
  .tilt-card { position: relative; left: auto !important; top: auto !important; flex: none; width: 72vw; scroll-snap-align: center; }
  .tilt-card figcaption { opacity: 1; transform: none; }

  .manifesto { min-height: auto; padding-top: 140px; }
  .manifesto__title { font-size: clamp(40px, 11vw, 64px); }
  .work__mock, .work__meta { width: calc(100% - var(--gutter) * 2); }
  .work__bigtext { font-size: 30vw; bottom: -3%; }

  .about__grid { grid-template-columns: 1fr; }
  .about__photo { max-width: 480px; margin: 0 auto; width: 100%; }
  .about__text { padding-bottom: 0; max-width: none; }
  .pillars { grid-template-columns: 1fr; }
  .pillar { border-inline-start: 0; border-top: 1px solid rgba(47,41,53,.12); padding-inline: 0; }
  .pillar:first-child { border-top: 0; }

  .review { width: 82vw; }

  .clients__list { justify-content: center; gap: 36px; }
  .footer__top { grid-template-columns: 1fr; }
  .form__row { grid-template-columns: 1fr; }
  .footer__brand { flex-direction: column; align-items: center; font-size: 25vw; gap: 0; }
  .footer__bottom { flex-direction: column-reverse; text-align: center; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; }
  [data-words] .w { opacity: 1 !important; }
  .js .reveal-up { opacity: 1; transform: none; }
}

/* logo contrast on the purple menu */
.logo .lg-s path { transition: fill .4s; }
.menu-open .logo .lg-s path { fill: var(--night); }

/* =================== real showreel inside the sunglasses =================== */
.reel__video { display: block !important; position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.lens::after { background: #9966ff; opacity: .5; }
.lens__glow { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: color; opacity: .35;
  background: radial-gradient(120% 120% at 40% 35%, #b48cff 0%, #9966ff 45%, #5b35d6 100%); }
.lens__glint { position: absolute; top: -20%; bottom: -20%; left: 0; width: 38%; pointer-events: none; transform: skewX(-22deg);
  background: linear-gradient(90deg, transparent, rgba(255,255,255,.75) 50%, transparent); mix-blend-mode: screen; }
.reel-full { background: #0b0910; }
.reel--full { position: absolute; inset: 0; overflow: hidden; transform-origin: 50% 50%; will-change: transform; }
.reel-full__tint { position: absolute; inset: 0; z-index: 2; pointer-events: none; background: #9966ff; mix-blend-mode: color; opacity: .75; }
.reel-full__rim { position: absolute; left: 50%; top: 50%; width: 120vmax; height: 120vmax; margin: -60vmax 0 0 -60vmax; z-index: 3; pointer-events: none; border-radius: 50%;
  box-shadow: inset 0 0 0 9vmax rgba(18,6,40,.85), inset 0 0 18vmax 9vmax rgba(153,102,255,.55); }
.reel-full__frame { position: absolute; left: 7%; right: 7%; top: 7%; bottom: 7%; z-index: 4; pointer-events: none; border-radius: 28px; opacity: 0;
  box-shadow: 0 0 0 2px rgba(153,102,255,.7), 0 0 80px rgba(153,102,255,.45); }

/* one video across both lenses, deep brand purple like the sketch */
.lens--both { --mask: url("../assets/lens-both.png?v=1791901717"); background: #3a1a7a; }
.lens--both .reel { position: absolute; inset: -8% -4%; transform: rotate(-4deg); }
.lens--both::after { background: #9966ff; opacity: .72; mix-blend-mode: color; }
.lens--both .lens__glow { opacity: .6; mix-blend-mode: overlay; background: radial-gradient(120% 140% at 35% 30%, #d6b8ff 0%, #9966ff 45%, #4b22b8 100%); }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.38) 0%, rgba(255,255,255,0) 22%, rgba(255,255,255,0) 60%, rgba(255,255,255,.14) 68%, rgba(255,255,255,0) 78%),
    radial-gradient(130% 110% at 50% 45%, rgba(0,0,0,0) 50%, rgba(25,6,60,.6) 100%); }
.lens--both .lens__glint { width: 22%; }
.reel-full { clip-path: none !important; }
/* deeper purple: multiply tints the whites, colour blend sets the hue, the glass keeps the shine */
.lens--both .lens__glow { mix-blend-mode: multiply; opacity: .82; background: linear-gradient(160deg, #c3a0ff 0%, #9966ff 45%, #6a3be6 100%); }
.lens--both::after { opacity: .8; }
/* video fills the whole lens area (no rotation gaps at the edges) */
.lens--both .reel { inset: -12% -6%; transform: rotate(-3deg) scale(1.02); }

/* hero headline sits lower */
.hero__content { bottom: clamp(28px, 5vh, 70px); }
@media (max-width: 860px) {
  .hero__content { top: 150px; bottom: auto; }
}

/* ===== lens depth (like the sketch): dark violet glass, glowing reflection inside ===== */
.lens--both { background: radial-gradient(120% 140% at 50% 45%, #3b1670 0%, #1c0838 60%, #0c0318 100%); }
/* the video reads as a luminous reflection on dark glass */
.lens--both .reel { opacity: .92; mix-blend-mode: screen; filter: saturate(.75) contrast(1.05); }
.lens--both::after { background: #a26bff; opacity: .7; mix-blend-mode: color; }
/* tint: pink-lavender light in the middle of each lens, deep purple toward the rims */
.lens--both .lens__glow { mix-blend-mode: multiply; opacity: 1;
  background:
    radial-gradient(38% 70% at 26% 52%, #f3e3ff 0%, #c79bff 45%, rgba(110,50,220,.0) 100%),
    radial-gradient(40% 72% at 74% 46%, #f3e3ff 0%, #c79bff 45%, rgba(110,50,220,.0) 100%),
    linear-gradient(180deg, #7a45e6 0%, #5a26c4 100%); }
/* glass: dark vignette at the rims, a magenta rim light, a curved specular highlight */
.lens--both .lens__glass { background:
    linear-gradient(112deg, rgba(255,255,255,.42) 0%, rgba(255,255,255,.08) 16%, rgba(255,255,255,0) 26%),
    linear-gradient(112deg, rgba(255,255,255,0) 56%, rgba(255,235,255,.22) 61%, rgba(255,255,255,0) 68%),
    radial-gradient(60% 110% at 26% 50%, rgba(0,0,0,0) 45%, rgba(14,2,32,.78) 100%),
    radial-gradient(60% 110% at 74% 46%, rgba(0,0,0,0) 45%, rgba(14,2,32,.78) 100%),
    radial-gradient(90% 60% at 90% 100%, rgba(255,110,220,.28) 0%, rgba(255,110,220,0) 70%); }

/* ===== lens depth v2: keep the reflection's light & shade, tint it lavender-pink ===== */
.lens--both { background: #1a0733; }
.lens--both .reel { opacity: 1; mix-blend-mode: normal;
  filter: grayscale(1) sepia(1) hue-rotate(228deg) saturate(2.4) brightness(1.02) contrast(1.08); }
.lens--both::after { background: #b07cff; opacity: .22; mix-blend-mode: soft-light; }
.lens--both .lens__glow { mix-blend-mode: soft-light; opacity: .55;
  background: radial-gradient(40% 70% at 28% 50%, #ffd6f5 0%, rgba(255,214,245,0) 70%),
              radial-gradient(40% 70% at 72% 45%, #ffd6f5 0%, rgba(255,214,245,0) 70%); }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 28%),
    radial-gradient(56% 100% at 27% 52%, rgba(0,0,0,0) 52%, rgba(20,3,45,.55) 82%, rgba(10,1,25,.85) 100%),
    radial-gradient(56% 100% at 73% 46%, rgba(0,0,0,0) 52%, rgba(20,3,45,.55) 82%, rgba(10,1,25,.85) 100%),
    linear-gradient(180deg, rgba(40,8,80,.35) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 70%, rgba(40,8,80,.4) 100%); }
.lens--both .lens__glint { opacity: .55; width: 14%; }

/* video aligned with the tilt of the glasses */
.lens--both .reel { inset: -30% -8%; transform: rotate(-9.7deg); }
.lens--both .reel { filter: grayscale(1) sepia(1) hue-rotate(244deg) saturate(3.2) brightness(1.05) contrast(1.1); }
/* lighter rims */
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.28) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 28%),
    radial-gradient(62% 110% at 27% 52%, rgba(0,0,0,0) 62%, rgba(30,6,60,.22) 88%, rgba(20,3,45,.4) 100%),
    radial-gradient(62% 110% at 73% 46%, rgba(0,0,0,0) 62%, rgba(30,6,60,.22) 88%, rgba(20,3,45,.4) 100%); }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.26) 0%, rgba(255,255,255,.05) 18%, rgba(255,255,255,0) 28%),
    radial-gradient(60% 108% at 27% 52%, rgba(0,0,0,0) 55%, rgba(30,6,60,.32) 85%, rgba(20,3,45,.55) 100%),
    radial-gradient(60% 108% at 73% 46%, rgba(0,0,0,0) 55%, rgba(30,6,60,.32) 85%, rgba(20,3,45,.55) 100%),
    linear-gradient(180deg, rgba(60,15,110,.18) 0%, rgba(0,0,0,0) 30%, rgba(0,0,0,0) 72%, rgba(60,15,110,.2) 100%); }
/* video stands out: brighter, more contrast, lighter purple wash */
.lens--both { background: #2a0f55; }
.lens--both .reel { filter: sepia(.55) hue-rotate(232deg) saturate(1.7) brightness(1.18) contrast(1.18); }
.lens--both::after { background: #a77bff; opacity: .28; mix-blend-mode: color; }
.lens--both .lens__glow { opacity: .35; }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.22) 0%, rgba(255,255,255,.04) 18%, rgba(255,255,255,0) 28%),
    radial-gradient(64% 112% at 27% 52%, rgba(0,0,0,0) 66%, rgba(30,6,60,.18) 90%, rgba(20,3,45,.32) 100%),
    radial-gradient(64% 112% at 73% 46%, rgba(0,0,0,0) 66%, rgba(30,6,60,.18) 90%, rgba(20,3,45,.32) 100%); }
/* purple glass film: whites become lavender, the video's contrast stays crisp */
.lens--both .reel { filter: saturate(1.15) brightness(1.08) contrast(1.15); }
.lens--both::after { opacity: 0; }
.lens--both .lens__glow { mix-blend-mode: multiply; opacity: 1;
  background: linear-gradient(160deg, #d2b4ff 0%, #b88cff 50%, #a175ff 100%); }
/* a touch more depth (rim shade) and light (inner glow + curved reflections) */
.lens--both::after { opacity: .55; mix-blend-mode: screen;
  background: radial-gradient(34% 58% at 30% 42%, rgba(240,225,255,.55) 0%, rgba(240,225,255,0) 100%),
              radial-gradient(34% 58% at 70% 36%, rgba(240,225,255,.55) 0%, rgba(240,225,255,0) 100%); }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.45) 0%, rgba(255,255,255,.12) 14%, rgba(255,255,255,0) 26%),
    linear-gradient(115deg, rgba(255,255,255,0) 58%, rgba(255,245,255,.28) 62%, rgba(255,255,255,0) 67%),
    radial-gradient(62% 110% at 27% 52%, rgba(0,0,0,0) 58%, rgba(35,8,70,.3) 86%, rgba(22,4,48,.52) 100%),
    radial-gradient(62% 110% at 73% 46%, rgba(0,0,0,0) 58%, rgba(35,8,70,.3) 86%, rgba(22,4,48,.52) 100%),
    linear-gradient(180deg, rgba(0,0,0,0) 70%, rgba(50,12,95,.22) 100%); }

/* =================== pinned horizontal mockup gallery =================== */
.showcase { height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; padding: 0; }
.showcase__cards { position: absolute; inset: 0; overflow: visible; padding: 0; display: block; }
.showcase__track { position: absolute; top: 50%; left: 0; display: flex; align-items: center; gap: clamp(28px, 4vw, 80px);
  padding: 0 clamp(24px, 8vw, 160px); direction: ltr; width: max-content; will-change: transform; }
.showcase__track .tilt-card { position: relative; left: auto !important; top: auto !important; flex: none;
  width: min(28vw, 58vh); max-width: 538px; aspect-ratio: 538 / 579; transform: none; }
.manifesto__inner { transform-origin: 50% 45%; }
@media (max-width: 860px) {
  .showcase { height: 100svh; padding: 0; }
  .showcase__track .tilt-card { width: 70vw; }
  .manifesto { min-height: 100svh; padding-top: 90px; }
}

/* ===== gallery → white panel shrinks into the sentence ===== */
.showcase { background: var(--ink); }
.sc-panel { position: absolute; inset: 0; background: #fff; z-index: 0; }
.showcase__text, .showcase__cards { z-index: 1; }
.showcase__track { gap: clamp(140px, 13vw, 280px); padding: 0 clamp(80px, 14vw, 280px); }
.sc-man { position: absolute; inset: 0; z-index: 3; min-height: 0 !important; padding: 0 var(--gutter) !important; display: grid; place-items: center; color: #fff; }
.sc-man .manifesto__title { transform-origin: 50% 50%; will-change: transform; }
.sc-man .manifesto__l2 { color: inherit; }
.sc-man .manifesto__title { will-change: auto; }
/* the real frame from the photo sits on top of the video -> pixel-exact edge */
.lens--both { background: #2a0f55; }
.lens__frame { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; z-index: 5; }

/* like the sketch: dark violet glass along the frame, the reel floats inside as a glowing reflection */
.lens--both { background:
    radial-gradient(42% 75% at 28% 52%, #5a2aa8 0%, #2b0d5a 70%, #140428 100%),
    #140428; }
.lens--both > .lens__screen { position: absolute; inset: 0; overflow: hidden;
  -webkit-mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; }
.lens--both .lens__glow { mix-blend-mode: multiply; opacity: 1; background: linear-gradient(160deg, #e2ccff 0%, #c39cff 50%, #ad84ff 100%); }
.lens--both::after { opacity: .45; }
.lens--both { background: radial-gradient(40% 70% at 28% 52%, #3a1580 0%, #1b0640 60%, #0b0218 100%), #0b0218; }
.lens--both .lens__glow { -webkit-mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; }
.lens--both::after { -webkit-mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; mask: url("../assets/lens-inner.png?v=1791901717") center / 100% 100% no-repeat; }
/* thinner dark rim */
.lens--both { background: radial-gradient(45% 80% at 28% 52%, #5a2aa8 0%, #2e0f62 65%, #1a0640 100%), #1a0640; }

/* precise: the reel fills the lens to the frame (sharp edge); depth = natural sunglasses gradient, no outline */
.lens--both { background: #1d0a3c; }
.lens--both .lens__glass { background:
    linear-gradient(180deg, rgba(22,4,48,.62) 0%, rgba(30,8,62,.28) 22%, rgba(0,0,0,0) 45%, rgba(0,0,0,0) 82%, rgba(30,8,62,.18) 100%),
    linear-gradient(115deg, rgba(255,255,255,.3) 0%, rgba(255,255,255,.06) 16%, rgba(255,255,255,0) 26%),
    linear-gradient(115deg, rgba(255,255,255,0) 58%, rgba(255,245,255,.2) 62%, rgba(255,255,255,0) 67%); }
.manifesto__body { max-width: 620px; display: flex; flex-direction: column; gap: .7em; }
.manifesto__body p { margin: 0; }
.manifesto__strong { font-weight: 900; color: #fff; }
.manifesto__body { gap: 1.5em; }
.manifesto__body .manifesto__p2 { margin-top: .5em !important; }
/* exactly one blank line between the two paragraphs */
.manifesto__body { gap: 0 !important; }
.manifesto__body .manifesto__p2 { margin-top: 1.3em !important; }

/* =================== WORKS: pinned project showcase =================== */
.works { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; color: #fff; isolation: isolate;
  display: grid; grid-template-columns: minmax(300px, 30%) 1fr; grid-template-rows: auto 1fr auto; column-gap: clamp(20px, 3vw, 60px);
  padding: clamp(84px, 11vh, 130px) var(--gutter) clamp(28px, 5vh, 56px); }
.works__glow { position: absolute; left: 30%; top: 50%; width: 62vw; height: 62vw; max-width: 1100px; max-height: 1100px; transform: translate(-50%, -45%);
  border-radius: 50%; filter: blur(140px); opacity: .32; z-index: -1; pointer-events: none; }
.works__bigtext { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-62%); z-index: -1; pointer-events: none; text-align: center; white-space: nowrap;
  font-weight: 900; font-size: clamp(110px, 15vw, 300px); line-height: 1; letter-spacing: -.01em;
  background: linear-gradient(180deg, rgba(153,102,255,.32) 0%, rgba(153,102,255,.08) 70%, rgba(153,102,255,0) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.works__head { grid-column: 1 / -1; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; }
.works__title { font-weight: 900; font-size: var(--fs-xl); }
.works__lead { color: rgba(255,255,255,.72); font-size: var(--fs-m); max-width: 520px; }
.works__info { grid-column: 1; grid-row: 2; position: relative; align-self: center; min-height: 300px; }
.wk-info { position: absolute; inset-inline: 0; top: 50%; transform: translateY(-50%); }
.wk-num { font-family: var(--f-display); letter-spacing: .2em; font-size: var(--fs-s); color: rgba(255,255,255,.5); }
.wk-num b { color: var(--green); font-weight: 700; }
.wk-name { font-weight: 900; font-size: clamp(34px, 3.4vw, 64px); line-height: 1.05; margin-top: 14px; }
.wk-desc { margin-top: 16px; color: rgba(255,255,255,.8); font-size: var(--fs-m); line-height: 1.55; max-width: 420px; }
.wk-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.wk-tags li { border: 1px solid rgba(255,255,255,.2); border-radius: 100px; padding: 6px 15px; font-size: 14px; color: rgba(255,255,255,.85); }
.wk-info .line { display: block; overflow: hidden; padding-bottom: .08em; }
.wk-info .line > span { display: inline-block; }
.works__stage { grid-column: 2; grid-row: 2; position: relative; perspective: 1800px; }
.wk-img { position: absolute; inset: 0; display: grid; place-items: center; will-change: transform, opacity; }
.wk-img img { width: 100%; height: 100%; max-height: 72vh; object-fit: contain; filter: drop-shadow(0 50px 70px rgba(0,0,0,.6)); }
.works__nav { grid-column: 1 / -1; grid-row: 3; display: flex; gap: clamp(14px, 2.4vw, 40px); justify-content: flex-start; flex-wrap: wrap; }
.works__nav li { display: flex; align-items: center; gap: 10px; cursor: pointer; font-size: 14px; color: rgba(255,255,255,.4); transition: color .4s; }
.works__nav li i { width: 26px; height: 2px; background: rgba(255,255,255,.25); transition: width .5s var(--ease), background .4s; }
.works__nav li.is-active { color: #fff; }
.works__nav li.is-active i { width: 54px; background: var(--green); }
@media (max-width: 860px) {
  .works { grid-template-columns: 1fr; grid-template-rows: auto 1fr auto auto; padding-top: 90px; }
  .works__stage { grid-column: 1; grid-row: 2; min-height: 34vh; }
  .works__info { grid-column: 1; grid-row: 3; min-height: 230px; }
  .wk-info { top: 0; transform: none; }
  .works__lead { display: none; }
  .works__nav { grid-row: 4; gap: 10px; }
  .works__nav li span { display: none; }
  .works__bigtext { font-size: 26vw; top: 32%; }
}

/* =================== WORKS v2: centred images (uncut) + info on the side =================== */
.works { display: flex; flex-direction: column; grid-template-columns: none; padding: clamp(80px, 10vh, 120px) var(--gutter) clamp(24px, 4vh, 48px); background: transparent; }
.works .work__head { text-align: center; max-width: 660px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; gap: 12px; }
.works .work__title { font-weight: 900; font-size: var(--fs-xl); }
.works .work__lead { color: rgba(255,255,255,.88); font-size: var(--fs-m); }
.works__stagewrap { position: relative; flex: 1; min-height: 0; display: flex; align-items: center; justify-content: center; margin-top: clamp(16px, 3vh, 36px); }
.works .work__bigtext { position: absolute; bottom: 6%; inset-inline: 0; z-index: 0; }
.works__stage { position: relative; z-index: 1; width: min(52vw, 1000px, calc((100svh - 300px) * 16 / 9)); aspect-ratio: 16 / 9; grid-column: auto; grid-row: auto; perspective: none; }
.works .wk-img { position: absolute; inset: 0; border-radius: 16px; overflow: hidden; display: block; box-shadow: 0 40px 120px rgba(10,6,20,.55), 0 0 0 1px rgba(255,255,255,.06); background: #eeedf1; }
.works .wk-img img { width: 100%; height: 100%; max-height: none; object-fit: cover; filter: none; }
.works .works__info { position: absolute; z-index: 2; inset-inline-start: 0; top: 50%; transform: translateY(-50%); width: min(23vw, 340px); min-height: 280px; grid-column: auto; grid-row: auto; align-self: auto; }
.works .wk-name { font-size: clamp(28px, 2.6vw, 48px); }
.works .wk-desc { font-size: var(--fs-s); max-width: 320px; }
@media (max-width: 1100px) {
  .works__stagewrap { flex-direction: column; gap: 22px; }
  .works__stage { width: min(92vw, 720px); }
  .works .works__info { position: relative; inset: auto; top: auto; transform: none; width: min(92vw, 720px); min-height: 220px; }
  .works .wk-info { top: 0; transform: none; }
}
.works__stage { width: min(44vw, 940px, calc((100svh - 300px) * 16 / 9)); }
.works .works__info { width: min(22vw, 320px); }
@media (max-width: 1100px) { .works__stage { width: min(92vw, 720px); } .works .works__info { width: min(92vw, 720px); } }
@media (max-width: 1100px) { .works .work__bigtext { bottom: auto; top: 6%; } }
/* images as large as before; slimmer info column beside them */
.works { padding-top: clamp(72px, 9vh, 110px); }
.works .work__head { gap: 8px; }
.works__stagewrap { margin-top: clamp(10px, 2vh, 24px); }
.works__stage { width: min(60vw, 1231px, calc((100svh - 250px) * 16 / 9)); }
.works .works__info { width: calc((100vw - min(60vw, 1231px, calc((100svh - 250px) * 16 / 9))) / 2 - var(--gutter) - 16px); max-width: 320px; min-width: 190px; }
.works .wk-name { font-size: clamp(24px, 2.2vw, 44px); }
.works .wk-desc { font-size: clamp(13px, .95vw, 16px); }
.works .wk-tags li { font-size: 12px; padding: 5px 12px; }
@media (max-width: 1100px) { .works__stage { width: min(92vw, 760px); } .works .works__info { width: min(92vw, 760px); max-width: none; } }
/* larger images; the info floats as a glass card over the image's right edge */
.works { padding-top: clamp(64px, 8vh, 100px); }
.works .work__lead { display: none; }
.works__stage { width: min(72vw, 1400px, calc((100svh - 190px) * 16 / 9)); }
.works .works__info { width: clamp(240px, 21vw, 330px); max-width: none; min-width: 0; min-height: 0; inset-inline-start: calc(var(--gutter) - 4px);
  padding: 26px 26px 28px; border-radius: 22px; background: rgba(22,16,34,.62); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%);
  box-shadow: 0 30px 80px rgba(0,0,0,.45), 0 0 0 1px rgba(255,255,255,.08); }
.works .wk-info { position: relative; top: auto; transform: none; display: none; }
.works .wk-info.is-on { display: block; }
.works .wk-name { font-size: clamp(24px, 2vw, 40px); margin-top: 10px; }
@media (max-width: 1100px) {
  .works .work__lead { display: block; }
  .works__stage { width: 92vw; }
  .works .works__info { width: 92vw; padding: 20px; }
}
/* even larger images (no eyebrow / subheading) */
.works { padding-top: clamp(60px, 7.5vh, 90px); }
.works__stage { width: min(82vw, 1560px, calc((100svh - 150px) * 16 / 9)); }
@media (max-width: 1100px) { .works__stage { width: 94vw; } .works .works__info { width: 94vw; } }
/* info back in its own column beside the (slightly smaller) image */
.works__stage { --w: min(62vw, 1300px, calc((100svh - 150px) * 16 / 9)); width: var(--w); }
.works .works__info { padding: 0; border-radius: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none;
  inset-inline-start: clamp(20px, 2.6vw, 48px); width: calc((100vw - min(62vw, 1300px, calc((100svh - 150px) * 16 / 9))) / 2 - clamp(20px, 2.6vw, 48px) - 24px); max-width: 360px; }
.works .wk-name { font-size: clamp(22px, 2vw, 40px); }
@media (max-width: 1100px) { .works__stage { width: 94vw; } .works .works__info { width: 94vw; inset-inline-start: auto; } }
/* project swap: light bar in brand colours + clipped reveal */
.works__stage { transform-style: preserve-3d; }
.works .wk-img img { transform-origin: 50% 50%; will-change: transform; }
.wk-sweep { position: absolute; left: -6%; right: -6%; top: 0; height: 26%; z-index: 20; pointer-events: none; opacity: 0; visibility: hidden;
  background: linear-gradient(180deg, rgba(0,242,143,0) 0%, rgba(0,242,143,.85) 45%, rgba(153,102,255,.9) 55%, rgba(153,102,255,0) 100%);
  filter: blur(6px); mix-blend-mode: screen; }
.works .wk-img { border-radius: 16px; }

/* section H2s: bigger, second word in brand purple */
:root { --fs-h2: clamp(40px, 3.7vw, 72px); }
.work__title, .works .work__title, .about__title, .reviews__title { font-size: var(--fs-h2) !important; line-height: 1.08; }
.footer__title { font-size: clamp(44px, 4.6vw, 88px); }
.h2-accent { font-style: normal; color: var(--purple); }
.footer .h2-accent { color: var(--night); }   /* purple on the purple footer would vanish */

/* the light bar stays inside the image frame */
.works__stage { overflow: hidden; border-radius: 16px; }

/* swap effects: light-leak flash + colour-split ghosts */
.wk-sweep { display: none; }
.wk-flash { position: absolute; inset: -20%; z-index: 30; pointer-events: none; opacity: 0; visibility: hidden; mix-blend-mode: screen;
  background: radial-gradient(40% 45% at 60% 50%, rgba(255,255,255,.95) 0%, rgba(195,160,255,.75) 30%, rgba(153,102,255,.35) 55%, rgba(0,242,143,.18) 72%, transparent 85%); }
.works .wk-img .wk-ghost { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; pointer-events: none; opacity: 0; visibility: hidden; mix-blend-mode: screen; }
.wk-ghost--p { filter: grayscale(1) sepia(1) hue-rotate(225deg) saturate(5) brightness(1.1); }
.wk-ghost--g { filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(5) brightness(1.05); }
.works__stage { overflow: visible; border-radius: 0; isolation: auto; }

/* background words: static, centred behind the image, solid purple fading down (like the sketch) */
.works .work__bigtext { position: absolute; inset-inline: -10vw; top: 50%; bottom: auto; transform: translateY(-58%); text-align: center; overflow: visible; white-space: nowrap; z-index: 0; }
.works .work__bigtext span { display: inline-block; transform: none !important; padding: 0;
  background: linear-gradient(180deg, #9966ff 0%, #9966ff 48%, rgba(153,102,255,.45) 72%, rgba(47,41,53,0) 92%);
  -webkit-background-clip: text; background-clip: text; color: transparent; }
@media (max-width: 1100px) { .works .work__bigtext { top: 30%; } }
.works .work__bigtext span { background: linear-gradient(180deg, rgba(153,102,255,.78) 0%, rgba(153,102,255,.78) 46%, rgba(153,102,255,.35) 72%, rgba(47,41,53,0) 92%); -webkit-background-clip: text; background-clip: text; }
.works .wk-info { text-shadow: 0 2px 18px rgba(20,14,30,.85); }

/* ===== works info: narrow, progress pills, green button ===== */
.works__stage { width: min(58vw, 1240px, calc((100svh - 150px) * 16 / 9)); }
.works .works__info { display: flex; align-items: flex-start; gap: 22px; padding: 0; background: none; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
  inset-inline-start: var(--gutter); width: calc((100vw - min(58vw, 1240px, calc((100svh - 150px) * 16 / 9))) / 2 - var(--gutter) - 48px); max-width: 300px; min-height: 0; }
.wk-progress { flex: none; display: flex; flex-direction: column; align-items: center; gap: 9px; padding-top: 6px; }
.wk-progress i { width: 10px; height: 10px; border-radius: 10px; background: rgba(255,255,255,.28); transition: height .5s var(--ease), background .4s; }
.wk-progress i.is-on { height: 34px; background: #fff; }
.wk-texts { flex: 1; min-width: 0; }
.works .wk-name { font-size: clamp(20px, 1.5vw, 28px); margin-top: 0; line-height: 1.15; }
.works .wk-desc { font-size: clamp(13px, .9vw, 15px); line-height: 1.6; color: rgba(255,255,255,.62); margin-top: 12px; max-width: none; }
.wk-tags, .wk-num { display: none !important; }
.wk-btn { display: inline-flex; align-items: center; gap: 10px; margin-top: 22px; padding: 11px 20px; border-radius: 100px; background: var(--green); color: var(--night); font-weight: 700; font-size: 14px; text-shadow: none; transition: box-shadow .35s; }
.wk-btn svg { width: 16px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .4s var(--ease); }
.wk-btn:hover { box-shadow: 0 0 30px rgba(0,242,143,.5); }
.wk-btn:hover svg { transform: translateX(-4px); }
@media (max-width: 1100px) {
  .works__stage { width: 94vw; }
  .works .works__info { width: 94vw; max-width: none; inset-inline-start: auto; }
  .wk-progress { flex-direction: row; padding-top: 8px; }
  .wk-progress i.is-on { height: 10px; width: 30px; }
}
/* stronger green fade in the swap */
.wk-flash { background: radial-gradient(42% 48% at 60% 50%, rgba(255,255,255,.9) 0%, rgba(190,255,225,.75) 22%, rgba(0,242,143,.6) 45%, rgba(153,102,255,.35) 65%, rgba(0,242,143,.2) 78%, transparent 88%); }
.wk-ghost--g { filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(7) brightness(1.15); }
/* larger works; info column a bit narrower */
.works__stage { width: min(63vw, 1340px, calc((100svh - 140px) * 16 / 9)); }
.works .works__info { width: calc((100vw - min(63vw, 1340px, calc((100svh - 140px) * 16 / 9))) / 2 - var(--gutter) - 40px); max-width: 280px; }
.works .work__head { max-width: none; }
.works .work__title { white-space: nowrap; }
@media (max-width: 1100px) { .works__stage { width: 94vw; } .works .works__info { width: 94vw; max-width: none; } }
/* bigger image; info + progress pushed to the side and aligned to the image's bottom edge */
.works__stagewrap { --sw: min(68vw, 1440px, calc((100svh - 130px) * 16 / 9)); }
.works__stage { width: var(--sw); }
.works .works__info { top: auto; bottom: calc(50% - var(--sw) * 9 / 32); transform: none; align-items: flex-end;
  inset-inline-start: clamp(14px, 1.6vw, 30px); width: calc((100vw - var(--sw)) / 2 - clamp(14px, 1.6vw, 30px) - 22px); max-width: 260px; }
.wk-progress { padding-top: 0; padding-bottom: 8px; }
@media (max-width: 1100px) {
  .works__stagewrap { --sw: 94vw; }
  .works .works__info { bottom: auto; width: 94vw; max-width: none; align-items: flex-start; inset-inline-start: auto; }
}
/* info fully in the side margin, pinned to the screen edge, never over the image */
.works .wk-img img { transform: scale(1.06); }
.works .works__info { inset-inline-start: clamp(10px, 1.2vw, 22px); width: calc((100vw - var(--sw)) / 2 - clamp(10px, 1.2vw, 22px) - 36px); max-width: 230px; gap: 14px; }
.works .wk-name { font-size: clamp(17px, 1.25vw, 24px); }
.works .wk-desc { font-size: clamp(12px, .82vw, 14px); line-height: 1.55; margin-top: 8px; }
.wk-btn { margin-top: 14px; padding: 9px 16px; font-size: 13px; }
@media (max-width: 1100px) { .works .works__info { width: 94vw; max-width: none; inset-inline-start: auto; } }

/* ===== about tweaks ===== */
.about__title .h2-accent { color: var(--purple); }
.about__blob { width: 108%; opacity: .5; filter: blur(14px); background: radial-gradient(circle at 40% 35%, #d2bbff 0%, var(--purple) 42%, rgba(153,102,255,0) 72%); }
.about__badge { animation: none !important; }
.about__badge-wrap { position: absolute; z-index: 2; width: clamp(110px, 9vw, 170px); top: 6%; left: 2%; }
.about__badge-wrap .about__badge { position: static; width: 100%; }
.about__photo img { -webkit-mask-image: none; mask-image: none; object-fit: contain; object-position: bottom center; }
.pillars { display: none; }

/* ===== process ===== */
.process { max-width: 1500px; margin: clamp(80px, 9vw, 160px) auto 0; text-align: center; }
.process__head { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.process__kicker { font-size: var(--fs-s); letter-spacing: .08em; color: var(--purple); font-weight: 700; }
.process__title { font-weight: 900; font-size: var(--fs-h2, clamp(40px, 3.7vw, 72px)); line-height: 1.08; color: var(--ink); }
.process__lead { color: rgba(47,41,53,.65); font-size: var(--fs-m); }
.process__track { position: relative; margin-top: clamp(50px, 5vw, 90px); }
.process__line { position: absolute; left: 0; right: 0; top: 0; width: 100%; height: 120px; overflow: visible; }
.process__path-bg, .process__path { fill: none; stroke-width: 2.5; vector-effect: non-scaling-stroke; }
.process__path-bg { stroke: rgba(153,102,255,.15); stroke-dasharray: 6 8; }
.process__path { stroke: var(--purple); stroke-linecap: round; }
.process__dot { position: absolute; left: 0; top: 0; width: 18px; height: 18px; margin: -9px 0 0 -9px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 6px rgba(0,242,143,.18), 0 0 26px rgba(0,242,143,.8); z-index: 2; }
.process__steps { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(24px, 4vw, 80px); padding-top: 150px; }
.pstep { text-align: center; position: relative; }
.pstep__n { display: block; font-family: var(--f-display); font-size: clamp(64px, 6vw, 110px); line-height: .9; color: transparent; -webkit-text-stroke: 1.5px var(--purple); }
.pstep h4 { font-weight: 900; font-size: var(--fs-l); color: var(--ink); margin-top: 14px; }
.pstep p { color: rgba(47,41,53,.7); max-width: 330px; margin: 10px auto 0; line-height: 1.6; }
@media (max-width: 860px) {
  .process__line, .process__dot { display: none; }
  .process__steps { grid-template-columns: 1fr; padding-top: 0; gap: 48px; }
}
.process__steps { list-style: none; margin: 0; } .pstep::marker { content: none; }

/* about: photo fades into a purple glow at the bottom (like the reference) */
.about__photo { overflow: visible; }
.about__photo img { -webkit-mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.55) 78%, transparent 97%); mask-image: linear-gradient(180deg, #000 58%, rgba(0,0,0,.55) 78%, transparent 97%); }
.about__photo::after { content: ""; position: absolute; left: -12%; right: -12%; bottom: -6%; height: 48%; z-index: 0; pointer-events: none;
  background: radial-gradient(60% 70% at 50% 85%, rgba(153,102,255,.55) 0%, rgba(153,102,255,.28) 45%, rgba(153,102,255,0) 75%); filter: blur(10px); }
/* "אני מאמינה" text: higher, with space between paragraphs */
.about__text { align-self: center; padding-bottom: 0; gap: 1.1em; }
.about__text p { margin: 0; }
/* smaller 10+ */
.about__stat-num { font-size: clamp(40px, 3.4vw, 64px); }
/* tighter top: photo box matches the new photo's proportions */
.about { padding-top: clamp(40px, 4vw, 80px); }
.about__photo { aspect-ratio: 945 / 998; }
.about__intro { padding-top: clamp(30px, 6vw, 120px); }
/* info hugs the screen edge (measured from the viewport, not the padded wrapper) and never reaches the image */
@media (min-width: 1101px) {
  .works .works__info { inset-inline-start: calc(10px - var(--gutter)); width: calc((100vw - var(--sw)) / 2 - 10px - 34px); max-width: 300px; gap: 12px; }
}
.about__photo::after { display: none; }
.about__badge-wrap { left: auto; right: -2%; top: 38%; }
.about__badge-wrap { right: -4%; top: 10%; }
/* process: liquid-fill numbers + ripple ring */
.pstep__n { position: relative; display: inline-block; }
.pstep__fill { position: absolute; inset: 0; color: var(--purple); -webkit-text-stroke: 0; background: linear-gradient(180deg, #b48cff, #7a45e6); -webkit-background-clip: text; background-clip: text; color: transparent; }
.pstep__ring { position: absolute; left: 50%; top: -96px; width: 90px; height: 90px; margin-left: -45px; border-radius: 50%; border: 2px solid var(--green); box-shadow: 0 0 30px rgba(0,242,143,.5); pointer-events: none; }
.process { min-height: 0; }

/* =================== REVIEWS: print cards on paper =================== */
.rv { position: relative; height: 100vh; height: 100svh; min-height: 640px; overflow: hidden; padding: 0;
  background-color: #f3eff8;
  background-image: radial-gradient(rgba(91,63,209,.09) 1.2px, transparent 1.4px), radial-gradient(rgba(91,63,209,.05) 1px, transparent 1.2px);
  background-size: 14px 14px, 22px 22px; background-position: 0 0, 7px 9px; }
.rv__title { position: absolute; top: clamp(70px, 10vh, 120px); inset-inline: 0; text-align: center; z-index: 1; margin: 0;
  font-weight: 900; font-size: clamp(70px, 10.5vw, 210px); line-height: .92; letter-spacing: -.02em; color: var(--purple-deep, #5b3fd1); }
.rv__title em { font-style: normal; color: var(--purple); }
.rv__track { position: absolute; top: 56%; left: 0; transform: translateY(-50%); display: flex; align-items: center; gap: clamp(22px, 2.6vw, 48px);
  padding: 0 calc(50vw - clamp(150px, 13vw, 230px)); width: max-content; direction: ltr; z-index: 2; }
.rv-card { flex: none; width: clamp(280px, 24vw, 440px); height: calc(clamp(330px, 30vw, 520px) * var(--h)); background: #fffdfb; padding: 14px; border-radius: 3px;
  box-shadow: 0 20px 50px rgba(40,20,90,.18), 0 2px 6px rgba(40,20,90,.08); direction: rtl; will-change: transform; }
.rv-card__inner { height: 100%; border-radius: 2px; padding: clamp(22px, 2vw, 34px); display: flex; flex-direction: column; color: #fff; position: relative; overflow: hidden;
  background: radial-gradient(120% 90% at 85% 0%, #9a6dff 0%, #6a3fe0 45%, #2f1a6b 100%); }
.rv-card:nth-child(3n+2) .rv-card__inner { background: radial-gradient(120% 90% at 15% 0%, #b48cff 0%, #7c4ff0 45%, #3a1f80 100%); }
.rv-card:nth-child(3n) .rv-card__inner { background: radial-gradient(120% 90% at 50% 0%, #2a1f45 0%, #1d1530 60%, #120d1c 100%); }
.rv-card__q { font-weight: 900; font-size: 90px; line-height: .6; color: var(--green); height: 40px; }
.rv-card__text { flex: 1; margin-top: 18px; font-size: clamp(14px, 1vw, 17px); line-height: 1.65; font-family: var(--f-he-2); overflow: hidden; }
.rv-card__foot { margin-top: 16px; display: flex; flex-direction: column; gap: 12px; }
.rv-card__stars { display: flex; gap: 3px; direction: ltr; justify-content: flex-end; }
.rv-card__stars svg { width: 20px; height: 20px; fill: none; stroke: #ffd36b; stroke-width: 1.3; }
.rv-card__stars svg.is-on { fill: #ffd36b; }
.rv-card__who { display: flex; align-items: center; gap: 12px; }
.rv-card__who img { width: 44px; height: 44px; border-radius: 50%; border: 2px solid rgba(255,255,255,.5); }
.rv-card__who b { font-weight: 700; font-size: 15px; }
.header.is-light.on-rv { color: var(--ink); }
@media (max-width: 860px) {
  .rv__title { font-size: 19vw; top: 90px; }
  .rv__track { top: 60%; padding: 0 calc(50vw - 39vw); }
  .rv-card { width: 78vw; height: calc(400px * var(--h)); }
}

/* contact form inside the CTA */
.form--cta { width: min(760px, 100%); margin-top: clamp(34px, 3vw, 56px); text-align: right;
  background: rgba(18,13,28,.55); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%);
  box-shadow: 0 40px 100px rgba(0,0,0,.35), 0 0 0 1px rgba(255,255,255,.08); }
.form--cta .form__submit { align-self: stretch; justify-content: center; padding: 20px; font-size: var(--fs-l); }
.footer__top { grid-template-columns: 1fr; }

/* CTA background matches the hero */
.cta { background: var(--night) url("../assets/hero-bg.webp") center / cover no-repeat; }
.cta__bg { display: none; }
.cta::after { background:
    linear-gradient(180deg, rgba(153,102,255,.28) 0%, rgba(153,102,255,0) 38%),
    linear-gradient(0deg, rgba(27,23,36,.85) 0%, rgba(27,23,36,0) 30%); }

/* ===== process v2: stacking cards ===== */
.process { height: 100vh; height: 100svh; min-height: 640px; margin-top: clamp(40px, 5vw, 90px); display: flex; flex-direction: column; justify-content: center; padding: 70px 0 40px; }
.process__stack { position: relative; flex: 1; max-height: 520px; width: min(1100px, 92vw); margin: clamp(26px, 3vw, 48px) auto 0; }
.pcard { position: absolute; inset: 0; border-radius: 34px; padding: clamp(30px, 4vw, 64px); display: grid; grid-template-columns: auto 1fr; align-items: center; gap: clamp(24px, 5vw, 90px);
  text-align: right; overflow: hidden; box-shadow: 0 40px 90px rgba(40,20,90,.22); transform-origin: 50% 0%; will-change: transform; }
.pcard--1 { background: #efe8ff; color: var(--ink); }
.pcard--2 { background: linear-gradient(135deg, #a77bff 0%, #7a45e6 100%); color: #fff; }
.pcard--3 { background: radial-gradient(120% 120% at 20% 0%, #3a2a5c 0%, #1b1724 70%); color: #fff; }
.pcard__n { font-family: var(--f-display); font-size: clamp(130px, 17vw, 300px); line-height: .8; letter-spacing: -.02em; color: transparent; -webkit-text-stroke: 2px currentColor; opacity: .9; }
.pcard--1 .pcard__n { -webkit-text-stroke-color: var(--purple); }
.pcard--3 .pcard__n { -webkit-text-stroke-color: var(--green); }
.pcard__body { max-width: 520px; }
.pcard__icon { display: inline-grid; place-items: center; width: 64px; height: 64px; border-radius: 18px; background: rgba(255,255,255,.18); }
.pcard--1 .pcard__icon { background: rgba(153,102,255,.15); }
.pcard__icon svg { width: 34px; height: 34px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.pcard--1 .pcard__icon svg { stroke: var(--purple); }
.pcard--3 .pcard__icon svg { stroke: var(--green); }
.pcard h4 { font-weight: 900; font-size: clamp(30px, 3vw, 56px); line-height: 1.05; margin-top: 22px; }
.pcard p { margin-top: 14px; font-size: var(--fs-m); line-height: 1.6; opacity: .8; }
.pcard__step { position: absolute; top: 26px; left: 32px; font-family: var(--f-display); letter-spacing: .25em; font-size: 13px; opacity: .55; }
.process__head { margin-bottom: 0; }
@media (max-width: 860px) {
  .pcard { grid-template-columns: 1fr; align-content: center; gap: 10px; }
  .pcard__n { font-size: 120px; }
  .process__stack { max-height: 460px; }
}
.process__stack { margin-top: clamp(50px, 6vw, 90px); }
.pcard--2 .pcard__n { -webkit-text-stroke: 2px #fff; }

/* ===== process v3: clean columns with filling lines ===== */
.process { height: auto; min-height: 0; display: block; padding: 0; margin: clamp(90px, 9vw, 170px) auto clamp(30px, 4vw, 60px); max-width: 1320px; }
.process__cols { list-style: none; margin: clamp(56px, 6vw, 100px) 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(28px, 4vw, 72px); text-align: right; }
.pc__bar { display: block; height: 2px; background: rgba(47,41,53,.1); position: relative; overflow: hidden; }
.pc__bar i { position: absolute; inset: 0; background: linear-gradient(270deg, var(--purple), #b48cff); transform-origin: right center; }
.pc__n { display: block; margin-top: 28px; font-family: var(--f-display); font-size: 15px; letter-spacing: .2em; color: var(--purple); }
.pc__t { font-weight: 900; font-size: clamp(24px, 2vw, 34px); color: var(--ink); margin-top: 10px; }
.pc__d { margin-top: 12px; color: rgba(47,41,53,.66); line-height: 1.7; max-width: 340px; }
@media (max-width: 860px) {
  .process__cols { grid-template-columns: 1fr; gap: 44px; }
}

/* reviews: white bg, giant English words behind, regular H2 */
.rv { background: #fff; background-image: none; }
.rv__big { position: absolute; top: clamp(70px, 9vh, 110px); inset-inline: 0; text-align: center; white-space: nowrap; z-index: 0; pointer-events: none;
  font-family: var(--f-display); text-transform: uppercase; font-size: clamp(110px, 13.5vw, 260px); line-height: .95; letter-spacing: .01em;
  background: linear-gradient(180deg, rgba(153,102,255,.42) 0%, rgba(153,102,255,.26) 45%, rgba(153,102,255,0) 92%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.rv__title { top: calc(clamp(70px, 9vh, 110px) + clamp(50px, 5.5vw, 105px)); font-size: var(--fs-h2) !important; line-height: 1.08; letter-spacing: 0; color: var(--ink); }
@media (max-width: 860px) { .rv__big { font-size: 24vw; top: 90px; white-space: normal; } .rv__title { top: 150px; } }
.rv__track { top: 61%; }
@media (max-width: 860px) { .rv__track { top: 63%; } .rv__big { font-size: 21vw; } }
/* review cards: radius 10, all purple */
.rv-card { border-radius: 10px; }
.rv-card__inner, .rv-card:nth-child(3n+2) .rv-card__inner, .rv-card:nth-child(3n) .rv-card__inner { border-radius: 6px; background: radial-gradient(120% 90% at 85% 0%, #9a6dff 0%, #6a3fe0 45%, #3a1f80 100%); }
/* review cards in the brand dark */
.rv-card__inner, .rv-card:nth-child(3n+2) .rv-card__inner, .rv-card:nth-child(3n) .rv-card__inner { background: #2F2935; }
.rv-card__stars svg { stroke: #fff; } .rv-card__stars svg.is-on { fill: #fff; }
/* CTA form: no frame, wider */
.form--cta { width: min(1100px, 100%); padding: 0; background: none; backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: none; border-radius: 0; }
.form--cta .form__row { grid-template-columns: 1fr 1fr 1fr; }
@media (max-width: 860px) { .form--cta .form__row { grid-template-columns: 1fr; } }
/* client logos carousel */
.clients__marquee { -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); }
.clients__marquee .marquee__track { align-items: center; }
.clients__marquee li { list-style: none; flex: none; margin: 0 clamp(36px, 5vw, 90px); opacity: .55; transition: opacity .4s; }
.clients__marquee li:hover { opacity: 1; }
.clients__marquee img { height: clamp(52px, 4vw, 78px); width: auto; }
/* CTA fades into the footer purple */
.cta__tint { position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0; background: var(--purple); }
.cta__inner, .clients { position: relative; z-index: 1; }
.footer { margin-top: -1px; }
/* footer glow fades in from below so the seam with the purple-tinted CTA disappears */
.footer::before { -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 45%); mask-image: linear-gradient(to bottom, transparent 0, #000 45%); }
/* seamless CTA → footer: the CTA's bottom edge is always exactly the footer purple */
.cta::after { background: linear-gradient(180deg, rgba(153,102,255,.28) 0%, rgba(153,102,255,0) 38%); }
.cta__base { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(0deg, var(--purple) 0, rgba(153,102,255,.85) 8%, rgba(153,102,255,.35) 22%, rgba(153,102,255,0) 42%); }
.cta__tint { z-index: 0; }
.cta__inner, .clients { z-index: 2; }

/* scroll badge hidden for now (markup kept so it can be restored) */
.scroll-badge { display: none !important; }

/* nav: active/hover link turns purple, no underline */
.nav__link::after { display: none; }
.nav__link { transition: color .3s; }
.nav__link:hover, .nav__link.is-active { color: var(--purple); }
/* reviews: single white card, radius 10, purple glow shadow like the showcase cards, text in #2F2935 */
.rv-card { background: #fff; padding: 0; border-radius: 10px; box-shadow: 0 4px 50px rgba(153,102,255,.6); }
.rv-card__inner, .rv-card:nth-child(3n+2) .rv-card__inner, .rv-card:nth-child(3n) .rv-card__inner { background: #fff; border-radius: 10px; color: #2F2935; }
.rv-card__stars svg { stroke: #2F2935; } .rv-card__stars svg.is-on { fill: #2F2935; }
.rv-card__who img { border-color: rgba(47,41,53,.2); }

/* reviews: softer, more diffused shadow */
.rv-card { box-shadow: 0 10px 80px rgba(153,102,255,.28); }
.rv-card__q { color: var(--purple); }
/* process v3: no lines — big outlined numbers that fill with purple on scroll */
.pc__bar { display: none; }
.pc__n { position: relative; display: inline-block; margin-top: 0; font-family: var(--f-display); font-weight: 900; letter-spacing: 0; line-height: .9;
  font-size: clamp(110px, 10vw, 190px); color: transparent; -webkit-text-stroke: 1.5px rgba(153,102,255,.55); }
.pc__fill { position: absolute; inset: 0; color: var(--purple); -webkit-text-stroke: 1.5px var(--purple); }
.pc__t { margin-top: 18px; }
.rv-card { box-shadow: 0 12px 70px rgba(153,102,255,.14); }
.pc__n { font-size: clamp(64px, 5.6vw, 104px); }
.pc__t { margin-top: 14px; }
.about__badge-wrap { right: 4%; }
/* about photo: laptop + hands fully solid, fade only over the skirt */
.about__photo img { -webkit-mask-image: linear-gradient(180deg, #000 80%, rgba(0,0,0,.5) 91%, transparent 100%); mask-image: linear-gradient(180deg, #000 80%, rgba(0,0,0,.5) 91%, transparent 100%); }
/* showcase: opening sentence alone on the white, before the letter zoom */
.sc-intro { position: absolute; inset: 0; z-index: 2; margin: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0 .28em; padding: 0 var(--gutter);
  font-weight: 900; font-size: var(--fs-h2, clamp(40px, 3.7vw, 72px)); line-height: 1.1; color: var(--ink); text-align: center; pointer-events: none; }
.sc-intro span { display: inline-block; }
.sc-intro { inset: auto; right: auto; bottom: auto; padding: 0; gap: 0; display: block; white-space: nowrap; text-align: center; }
.sc-man .manifesto__title { font-size: calc(var(--fs-xxl) * 1.2); }
@media (max-width: 760px) { .sc-man .manifesto__title { font-size: clamp(44px, 12.5vw, 74px); } }
.sc-man .manifesto__title { margin-top: .08em; }
.cta { padding-top: clamp(56px, 5vw, 100px); }
/* CTA form: all text in white */
.form--cta .field span, .form--cta .field input:focus + span, .form--cta .field input:not(:placeholder-shown) + span,
.form--cta .field textarea:focus + span, .form--cta .field textarea:not(:placeholder-shown) + span { color: #fff; }
.form--cta .field input, .form--cta .field textarea { color: #fff; border-bottom-color: rgba(255,255,255,.4); }
.footer { padding-top: clamp(36px, 3.2vw, 64px); }
.cta { padding-bottom: clamp(24px, 2vw, 40px); }
.manifesto__p1 { font-weight: 700; color: #fff; }
/* thinner progress indicator */
.wk-progress { gap: 8px; }
.wk-progress i { width: 4px; height: 4px; border-radius: 4px; }
.wk-progress i.is-on { height: 30px; }
@media (max-width: 860px) { .wk-progress i.is-on { height: 4px; width: 26px; } }
/* bigger CUSTOMER STORIES background text (title stays centred on it) */
@media (min-width: 861px) {
  .rv__big { font-size: clamp(124px, 15.2vw, 300px); }
  .rv__title { top: calc(clamp(70px, 9vh, 110px) + clamp(56px, 6.3vw, 122px)); }
}
/* client logos: solid white */
.clients__marquee li { opacity: 1; }
.clients__marquee img { filter: brightness(0) invert(1); }
/* works: soft, wide purple glow under the project images */
.works__stage::after { content: ""; position: absolute; left: -18%; right: -18%; bottom: -16%; height: 46%; z-index: -1; pointer-events: none;
  background: radial-gradient(50% 50% at 50% 50%, rgba(153,102,255,.5) 0%, rgba(153,102,255,.18) 50%, rgba(153,102,255,0) 100%); filter: blur(30px); }
/* CTA: keep the textured purple background visible; only the very bottom edge blends into the footer */
.cta__base { background: linear-gradient(0deg, var(--purple) 0, rgba(153,102,255,.7) 5%, rgba(153,102,255,.2) 14%, rgba(153,102,255,0) 24%); }
/* reviews: shorter cards — height follows the text (all cards in a row match the tallest) */
.rv__track { align-items: stretch; }
.rv-card { height: auto; }
.rv-card__inner { height: 100%; padding: clamp(20px, 1.8vw, 30px); }
.rv-card__text { flex: 1 0 auto; margin-top: 14px; }
.rv-card__foot { margin-top: 22px; }
/* reviews row sits higher, overlapping the background text a little */
@media (min-width: 861px) { .rv__track { top: 63%; } }
/* wider, smoother fade over the skirt */
.about__photo img { -webkit-mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,.85) 77%, rgba(0,0,0,.55) 83%, rgba(0,0,0,.25) 89%, rgba(0,0,0,.07) 94%, transparent 98%); mask-image: linear-gradient(180deg, #000 72%, rgba(0,0,0,.85) 77%, rgba(0,0,0,.55) 83%, rgba(0,0,0,.25) 89%, rgba(0,0,0,.07) 94%, transparent 98%); }
.about { padding-top: clamp(70px, 6.5vw, 130px); }
/* reviews: heading block a bit lower */
@media (min-width: 861px) {
  .rv__big { top: calc(clamp(70px, 9vh, 110px) + 75px); }
  .rv__title { top: calc(clamp(70px, 9vh, 110px) + 65px + clamp(56px, 6.3vw, 122px)); }
}
/* running text on light sections: Leon, solid #2F2935 */
.about__lead, .about__text, .about__text p, .about__stat-label, .process__lead, .pc__d, .rv-card__text, .rv-card__who b {
  font-family: var(--f-he); color: #2F2935; }
.about { padding-bottom: clamp(10px, 1.5vw, 30px); }
/* mockups: lighter purple glow */
.tilt-card { box-shadow: 0 4px 60px rgba(153,102,255,.3); }
.tilt-card:hover { box-shadow: 0 10px 90px rgba(153,102,255,.45); }
/* "more works" button under the showcase image */
.works__more { position: relative; z-index: 3; display: flex; justify-content: center; padding-top: clamp(14px, 2vh, 24px); }
.works__more .btn-ghost { margin-top: 0; padding: 12px 26px; font-size: var(--fs-s, 15px); color: #fff; }
/* bigger CUSTOMER STORIES letters (tighter tracking so it still fits the width) */
@media (min-width: 861px) {
  .rv__big { font-size: clamp(132px, 16.4vw, 330px); letter-spacing: -.012em; }
  .rv__title { top: calc(clamp(70px, 9vh, 110px) + 65px + clamp(62px, 6.9vw, 135px)); }
}
/* a lock of hair falling over the left lens */
.hero__bangs { position: absolute; z-index: 6; height: auto; pointer-events: none; }
.hero__photo > img.hero__bangs { right: auto; bottom: auto; height: auto; filter: none; z-index: 6; }
.loader__grid { grid-template-columns: repeat(8, 1fr); }
/* page scrollbar in the brand purple */
html { scrollbar-color: var(--purple) var(--night); scrollbar-width: thin; }
::-webkit-scrollbar { width: 10px; }
::-webkit-scrollbar-track { background: var(--night); }
::-webkit-scrollbar-thumb { background: var(--purple); border-radius: 10px; border: 2px solid var(--night); }
::-webkit-scrollbar-thumb:hover { background: #b48cff; }
/* the full reel always sits inside the glowing frame (clear of the header) */
.reel-full__frame { left: 7%; right: 7%; top: 11%; bottom: 5%; }
.reel--full { right: auto; bottom: auto; }
/* reviews: two rows of auto-playing cards, section grows to fit them */
.rv { height: auto !important; min-height: 0 !important; padding: calc(clamp(70px, 9vh, 110px) + 75px + 16.4vw * .95 - 40px) 0 clamp(60px, 6vw, 110px); }
.rv__rows { position: relative; z-index: 2; display: flex; flex-direction: column; gap: clamp(22px, 2.4vw, 40px); }
.rv__track, .rv__track--2 { position: relative !important; top: auto !important; transform: none; padding: 0 !important; }
@media (max-width: 860px) { .rv { padding-top: calc(150px + 40vw); } }
.rv__rows { direction: ltr; align-items: flex-start; }
@media (min-width: 861px) { .showcase__text { top: 50%; transform: translateY(-58%); } }
/* works: the big background text drifts gently sideways on its own */
.works .work__bigtext span { animation: wkBigDrift 9s ease-in-out infinite alternate; }
@keyframes wkBigDrift { from { translate: 5vw 0; } to { translate: -5vw 0; } }
@media (prefers-reduced-motion: reduce) { .works .work__bigtext span { animation: none; } }
/* the hero line closes the page, under everything */
.footer__statement { max-width: 1720px; margin: clamp(28px, 3vw, 56px) auto 0; padding-top: clamp(20px, 2vw, 36px); border-top: 1px solid rgba(27,23,36,.18);
  text-align: center; font-weight: 400; font-size: clamp(24px, 3.6vw, 68px); line-height: 1.15; color: var(--night); }
.footer__statement b { font-weight: 900; color: #fff; }
@media (min-width: 861px) { .footer__statement { font-size: clamp(30px, 3.15vw, 62px); white-space: nowrap; } }
/* footer closing line = the hero's English line, in the hero's display type, spanning the width */
.footer__statement { font-family: var(--f-display); font-weight: 700; text-transform: uppercase; white-space: nowrap; letter-spacing: -.005em;
  font-size: 7.95vw !important; line-height: 1; color: var(--night); padding-top: clamp(24px, 2.4vw, 44px); }
.footer__statement b { font-weight: 700; color: #fff; }
/* "more works" sits in the empty left margin, aligned with the image's bottom edge (image back to full size) */
@media (min-width: 1101px) {
  .works__more { position: absolute; z-index: 3; padding: 0; left: clamp(14px, 1.6vw, 30px); right: auto;
    bottom: calc(50% - var(--sw) * 9 / 32); width: calc((100vw - var(--sw)) / 2 - clamp(14px, 1.6vw, 30px) - 22px); justify-content: flex-start; }
  .works__more .btn-ghost { padding: 10px 18px; font-size: 14px; gap: 10px; white-space: nowrap; }
}
@media (min-width: 1101px) { .works__more { justify-content: flex-end; } }
@media (min-width: 1101px) { .works__more { left: auto; width: auto; right: calc(50% + var(--sw) / 2 + clamp(18px, 2vw, 34px)); } }
/* statement first, then the copyright row at the very bottom */
.footer__statement { margin-top: clamp(40px, 4vw, 80px); border-top: 0; padding-top: 0; }
.footer__bottom { margin-top: clamp(22px, 2.4vw, 40px); }
/* works: background text loops endlessly in one direction (no back-and-forth) */
.works .work__bigtext { text-align: left; inset-inline: 0; }
.works .work__bigtext span { animation: wkBigLoop 65s linear infinite; }
@keyframes wkBigLoop { from { translate: 0 0; } to { translate: -50% 0; } }
@media (prefers-reduced-motion: reduce) { .works .work__bigtext span { animation: none; } }
/* footer line: one colour, dark at the top fading to transparent at the bottom */
.footer__statement, .footer__statement b { color: transparent;
  background: linear-gradient(180deg, rgba(255,255,255,.3) 8%, rgba(255,255,255,.12) 50%, rgba(255,255,255,0) 86%);
  -webkit-background-clip: text; background-clip: text; }
.footer__statement b { background: none; -webkit-background-clip: border-box; color: inherit; }
.rv { padding-bottom: clamp(110px, 10vw, 190px) !important; }
/* brand swirl drawing itself in the footer */
.footer__swirl { position: absolute; z-index: 0; left: clamp(10px, 3vw, 60px); top: clamp(30px, 3vw, 60px); width: min(46vw, 760px); height: auto; pointer-events: none; overflow: visible; }
.footer__swirl path { fill: none; stroke: var(--night); stroke-width: 30; stroke-linecap: round; stroke-linejoin: round; }
.footer__top, .footer__statement, .footer__bottom { position: relative; z-index: 1; }
@media (max-width: 860px) { .footer__swirl { width: 70vw; opacity: .35; } }
/* swirl: white, entering from the left edge like the brand posts */
.footer__swirl { left: -7vw; top: clamp(60px, 6vw, 120px); width: min(50vw, 820px); transform-origin: 0% 30%; rotate: -32deg; }
.footer__swirl path { stroke: #fff; }
/* the closing line sits behind the copyright row at the very bottom */
.footer__statement { z-index: 0; margin-bottom: calc(-4.6vw); }
.footer__bottom { z-index: 1; border-top: 0; padding-top: 0; margin-top: 0; }
/* thinner swirl: the real shape is filled (+ a hairline stroke), and a thick stroke inside a mask "draws" it in */
.footer__swirl path { stroke: none; }
.footer__swirl .footer__swirl-f { fill: #fff; stroke: #fff; stroke-width: 6; stroke-linejoin: round; }
.footer__swirl .footer__swirl-m { fill: none; stroke: #fff; stroke-width: 70; stroke-linecap: round; stroke-linejoin: round; }
.footer__swirl { left: -15vw; width: min(56vw, 940px); }
/* closing line edge to edge, sitting lower behind the bottom row */
.footer__statement { max-width: none; margin-inline: calc(-1 * var(--gutter)); font-size: 8.6vw !important; text-align: center; margin-bottom: -6.6vw; letter-spacing: -.01em; }
/* swirl = the brand post's shape: a curve entering from the left edge, one loop, a long tail */
.footer__swirl { left: 0; top: clamp(110px, 10vw, 190px); width: 52vw; rotate: none; transform-origin: 0 50%; }
.footer__swirl .footer__swirl-f { stroke-width: 22; }
.footer__swirl .footer__swirl-m { stroke-width: 90; stroke-linecap: butt; }
.footer__swirl .footer__swirl-m { stroke-width: 62; stroke-linecap: round; }
.footer__swirl { top: clamp(40px, 4vw, 80px); width: 44vw; }
.footer__swirl { width: 31vw; top: clamp(90px, 8vw, 150px); }
.footer__swirl { top: clamp(150px, 12.5vw, 230px); }
.rv-card__stars { display: none !important; }
/* footer: white text, social icons, legal links */
.footer { color: #fff; }
.footer__links a { border-bottom-color: rgba(255,255,255,.35); }
.footer__bottom { color: rgba(255,255,255,.85); }
.totop { border-color: rgba(255,255,255,.5); color: #fff; }
.totop:hover { background: #fff; color: var(--night); }
.footer__social { list-style: none; margin: 26px 0 0; padding: 0; display: flex; gap: 12px; }
.footer__social a { width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.5); display: grid; place-items: center; color: #fff; transition: background .35s, color .35s, border-color .35s, transform .35s; }
.footer__social a:hover { background: #fff; color: var(--purple); border-color: #fff; transform: translateY(-3px); }
.footer__social svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.footer__social svg .fill { fill: currentColor; stroke: none; }
.footer__legal { display: flex; gap: clamp(14px, 2vw, 32px); margin-inline: auto clamp(16px, 3vw, 48px); }
.footer__legal a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255,255,255,.4); transition: text-decoration-color .3s; }
.footer__legal a:hover { text-decoration-color: #fff; }
@media (max-width: 860px) { .footer__legal { margin: 0; } }
/* H2 word reveal */
.hw { display: inline-block; overflow: hidden; vertical-align: top; padding-bottom: .14em; margin-bottom: -.14em; }
.hw__i { display: inline-block; will-change: transform; }
.footer__statement { margin-bottom: -4.4vw; }
/* section titles: 3D letter flip + light sweep on the purple words */
.is-split { perspective: 700px; }
.is-split .tw { display: inline-block; white-space: nowrap; }
.is-split .tc { display: inline-block; will-change: transform, opacity; transform-style: preserve-3d; }
.cta__title .line, .cta__title .line > span { overflow: visible !important; transform: none !important; }
.works .wk-desc, .works .wk-desc span { color: #fff !important; }
.works .wk-img img { transform: scale(1.12); }
/* works: a bit more soft purple shadow under the images */
.works .wk-img { box-shadow: 0 40px 120px rgba(10,6,20,.5), 0 30px 90px rgba(153,102,255,.28), 0 0 0 1px rgba(255,255,255,.06); }
.works__stage::after { left: -22%; right: -22%; bottom: -22%; height: 55%;
  background: radial-gradient(50% 50% at 50% 50%, rgba(153,102,255,.62) 0%, rgba(153,102,255,.24) 50%, rgba(153,102,255,0) 100%); filter: blur(36px); }
/* purple glow also wraps the sides of the image */
.works .wk-img { box-shadow: 0 40px 120px rgba(10,6,20,.5), 0 30px 90px rgba(153,102,255,.28), 0 0 80px 10px rgba(153,102,255,.22), 0 0 0 1px rgba(255,255,255,.06); }
/* stronger green in the project transition */
.wk-ghost--g { filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(9) brightness(1.3); }
.wk-flash { background: radial-gradient(45% 52% at 60% 50%, rgba(255,255,255,.85) 0%, rgba(170,255,215,.85) 20%, rgba(0,242,143,.8) 42%, rgba(0,242,143,.45) 62%, rgba(153,102,255,.25) 76%, transparent 90%); }
.wk-ghost--p { filter: grayscale(1) sepia(1) hue-rotate(225deg) saturate(3) brightness(1.05); }
.wk-ghost--g { filter: grayscale(1) sepia(1) hue-rotate(95deg) saturate(4) brightness(1.05); }
.rv-card__q { display: none !important; }
.rv-card__text { margin-top: 0; }
/* ===== floating buttons: WhatsApp (bottom-right) + accessibility (bottom-left) ===== */
.fab { position: fixed; bottom: clamp(16px, 2vw, 28px); z-index: 900; width: 58px; height: 58px; border-radius: 50%; display: grid; place-items: center; border: 0; cursor: pointer;
  box-shadow: 0 10px 30px rgba(20,12,40,.35); transition: transform .35s var(--ease), box-shadow .35s; }
.fab:hover { transform: translateY(-4px) scale(1.05); }
.fab svg { width: 28px; height: 28px; fill: currentColor; }
.fab--wa { right: clamp(16px, 2vw, 28px); background: #25d366; color: #fff; }
.fab--wa::before { content: ""; position: absolute; inset: 0; border-radius: 50%; border: 2px solid #25d366; animation: fabPulse 2.4s ease-out infinite; }
@keyframes fabPulse { from { transform: scale(1); opacity: .7; } to { transform: scale(1.6); opacity: 0; } }
.a11y { position: fixed; left: clamp(16px, 2vw, 28px); bottom: clamp(16px, 2vw, 28px); z-index: 900; }
.fab--a11y { position: relative; bottom: auto; left: auto; background: var(--purple); color: #fff; }
.fab--a11y:focus-visible, .a11y__panel button:focus-visible, .fab--wa:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.a11y__panel { position: absolute; left: 0; bottom: 70px; width: 230px; background: #fff; color: var(--ink); border-radius: 16px; padding: 16px; box-shadow: 0 20px 60px rgba(20,12,40,.3); display: flex; flex-direction: column; gap: 8px; }
.a11y__panel[hidden] { display: none; }
.a11y__title { margin: 0 0 4px; font-weight: 900; font-size: 18px; }
.a11y__panel button { text-align: right; padding: 10px 12px; border-radius: 10px; border: 1px solid rgba(47,41,53,.15); background: #f6f3fc; color: var(--ink); font: inherit; font-size: 15px; cursor: pointer; transition: background .25s, color .25s; }
.a11y__panel button[aria-pressed="true"] { background: var(--purple); color: #fff; border-color: var(--purple); }
.a11y__panel .a11y__reset { background: transparent; }
.a11y__statement { font-size: 14px; color: var(--purple); text-decoration: underline; margin-top: 2px; }
@media (max-width: 860px) { .fab { width: 50px; height: 50px; } .fab svg { width: 24px; height: 24px; } }
/* accessibility modes */
html.a11y-text { font-size: 118%; }
html.a11y-text main { zoom: 1.12; }
html.a11y-contrast main { filter: contrast(1.35) saturate(1.1); }
html.a11y-links a { text-decoration: underline !important; text-underline-offset: 3px; outline: 1px dashed currentColor; outline-offset: 2px; }
html.a11y-motion *, html.a11y-motion *::before, html.a11y-motion *::after { animation-play-state: paused !important; transition: none !important; }
.fab--wa { width: 48px; height: 48px; right: 14px; bottom: 14px; }
.fab--wa svg { width: 24px; height: 24px; }
.fab--wa { width: 42px; height: 42px; }
.fab--wa svg { width: 21px; height: 21px; }
.hero .btn-ghost { margin-top: 14px; }
/* hero: English rows + Hebrew text + button sit a bit higher together */
@media (min-width: 861px) { .hero__row--1 { top: 11%; } .hero__row--2 { top: 40.4%; } .hero__content { bottom: calc(clamp(28px, 5vh, 70px) + 4vh); } }
.fab--wa { bottom: 24px; }
.fab--wa { bottom: 19px; right: 9px; }
.hero .btn-ghost { margin-top: 30px; }
/* signature swirl drawn under "שנשארים בהם." */
.sc-man .manifesto__title { position: relative; }
.man-swirl { position: absolute; left: 50%; bottom: -.5em; width: 80%; height: .7em; transform: translateX(-50%) scaleX(-1); overflow: visible; pointer-events: none; }
.man-swirl .man-swirl-f { fill: #fff; stroke: #fff; stroke-width: 14; stroke-linejoin: round; }
.man-swirl .man-swirl-m { fill: none; stroke: #fff; stroke-width: 62; stroke-linecap: round; stroke-linejoin: round; }
.sc-man .man-l2 { display: inline-block; position: relative; }
.man-swirl { left: 50%; bottom: -.36em; width: 104%; height: .55em; }
.man-swirl .man-swirl-f { stroke-width: 22; }
.man-swirl { overflow: hidden; }
.man-swirl { bottom: -.78em; width: 92%; height: 1em; }
.man-swirl .man-swirl-f { stroke-width: 16; }
.sc-man .manifesto__title { margin-bottom: .55em; }
.sc-man .manifesto__body { margin-top: clamp(56px, 5vw, 90px); }
/* brand line in the manifesto: unchanged shape, entering from the left edge (like the footer) */
.sc-man .manifesto__title { margin-bottom: 0; }
.sc-man .manifesto__body { margin-top: clamp(24px, 2.4vw, 40px); }
.man-swirl { position: absolute; left: 0; top: auto; bottom: 14%; width: 31vw; height: auto; transform: none; overflow: hidden; z-index: 0; }
.man-swirl .man-swirl-f { stroke-width: 22; }
.sc-man .manifesto__inner { position: relative; z-index: 1; }
/* manifesto line: smaller, entering from the right edge (mirrored, same proportions) */
.man-swirl { left: auto; right: 0; width: 24vw; transform: scaleX(-1); }
.man-swirl { bottom: 7%; }
/* new portrait mockups: show them whole */
.showcase__track .tilt-card { aspect-ratio: 2600 / 3200; width: min(26vw, 52vh); }
/* mockups with a white frame */
.showcase__track .tilt-card { background: #fff; padding: 12px; }
.showcase__track .tilt-card img { border-radius: 6px; }
/* a hairline around each mockup so the white frame also reads on light images (e.g. אחי) */
.showcase__track .tilt-card img { box-shadow: 0 0 0 1px rgba(47,41,53,.12), 0 4px 18px rgba(47,41,53,.12); }
/* frame = a real white border: the image (which moves with the mouse / zooms on hover) is clipped inside it, so every frame stays the same */
.showcase__track .tilt-card { padding: 0; border: 12px solid #fff; box-sizing: border-box; aspect-ratio: 2400 / 3000; }
.showcase__track .tilt-card img { border-radius: 0; box-shadow: none; }
/* hovering a mockup: it grows a little and floats up (independent of the scroll animation's transform) */
.showcase__track .tilt-card { transition: box-shadow .5s var(--ease), scale .6s var(--ease), translate .6s var(--ease); }
.showcase__track .tilt-card:hover { scale: 1.06; translate: 0 -16px; box-shadow: 0 30px 80px rgba(153,102,255,.45); z-index: 5; }
/* two mockups that float up over the manifesto text */
.sc-float { position: absolute; z-index: 4; margin: 0; width: min(21vw, 360px); aspect-ratio: 2400 / 3000; border: 10px solid #fff; border-radius: 10px; overflow: hidden; background: #fff;
  box-shadow: 0 30px 80px rgba(10,6,20,.45), 0 0 60px rgba(153,102,255,.25); pointer-events: none; will-change: transform; top: 0; }
.sc-float img { width: 100%; height: 100%; object-fit: cover; display: block; }
.sc-float--1 { left: 9vw; }
.sc-float--2 { right: 8vw; width: min(18vw, 310px); }
@media (max-width: 860px) { .sc-float { width: 38vw; } .sc-float--1 { left: 4vw; } .sc-float--2 { right: 4vw; width: 32vw; } }
/* the two mockups settle stacked in the centre, over the text */
.sc-float, .sc-float--1, .sc-float--2 { left: 50%; right: auto; top: 50%; width: min(25vw, 46vh); }
.sc-float--1 { margin-left: -1.5vw; margin-top: -1vh; }
.sc-float--2 { margin-left: 1.5vw; margin-top: 1.5vh; }
@media (max-width: 860px) { .sc-float, .sc-float--1, .sc-float--2 { width: 56vw; } }
/* mockups rise into the side margins, beside the text (not over it) */
.sc-float, .sc-float--1, .sc-float--2 { width: min(19vw, 40vh); margin: 0; }
.sc-float--1 { left: calc(50% - 22vw - 21vw); top: 44%; }
.sc-float--2 { left: auto; right: calc(50% - 22vw - 21vw); top: 56%; }
@media (max-width: 860px) { .sc-float { display: none; } }
/* manifesto finale: karate fighter from the left edge + studio spotlight top-right */
.sc-karate { position: absolute; z-index: 0; left: -12vw; top: 50%; width: min(44vw, 82vh); translate: 0 -50%; pointer-events: none; will-change: transform, filter; }
.sc-karate img { width: 100%; height: auto; display: block; }
.sc-lamp { position: absolute; z-index: 0; right: -2.5vw; top: 13%; width: min(17vw, 300px); pointer-events: none; transform-origin: 100% 0%; }
.sc-lamp img { position: relative; width: 100%; height: auto; display: block; filter: drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.sc-lamp__beam { position: absolute; left: 22%; top: 44%; width: 62vw; height: 46vw; translate: -100% -18%; rotate: -14deg; transform-origin: 100% 18%; pointer-events: none; mix-blend-mode: screen;
  background: radial-gradient(60% 40% at 100% 18%, rgba(255,214,150,.55) 0%, rgba(255,190,110,.22) 35%, rgba(255,170,90,0) 70%);
  clip-path: polygon(100% 8%, 100% 30%, 0% 85%, 0% 0%); filter: blur(10px); }
@media (max-width: 860px) { .sc-karate, .sc-lamp { display: none; } }
/* only partly in frame, black & white, softly out of focus */
.sc-karate { left: -25vw; opacity: .85; }
.sc-lamp { right: -7vw; top: 3%; }
.sc-lamp img { filter: grayscale(1) blur(2.5px) drop-shadow(0 20px 40px rgba(0,0,0,.5)); }
.sc-lamp__beam { background: radial-gradient(60% 40% at 100% 18%, rgba(255,255,255,.4) 0%, rgba(255,255,255,.14) 35%, rgba(255,255,255,0) 70%); }
.sc-karate { left: -18vw; }
/* smaller finale elements */
.sc-karate { width: min(32vw, 60vh); left: -12vw; }
.sc-lamp { width: min(12vw, 210px); right: -4.5vw; top: 6%; }
.sc-karate { left: -5vw; }
/* beam starts exactly at the lamp's lens */
.sc-lamp__beam { left: 30%; top: 44%; width: 40vw; height: 26vw; translate: -100% -19%; transform-origin: 100% 19%; rotate: -12deg;
  clip-path: polygon(100% 14%, 100% 24%, 0% 92%, 0% 0%);
  background: radial-gradient(70% 45% at 100% 19%, rgba(255,255,255,.42) 0%, rgba(255,255,255,.14) 40%, rgba(255,255,255,0) 75%); filter: blur(8px); }
.sc-karate { left: -9vw; top: 57%; }
.sc-lamp { top: 11%; }
.sc-karate { top: 61%; }
/* client logos: two rows, all white, uniform optical size */
.clients__marquee img { height: clamp(46px, 3.8vw, 66px); width: auto; max-width: clamp(150px, 13vw, 220px); object-fit: contain; filter: none; }
.clients__marquee li { margin: 0 clamp(26px, 3.4vw, 60px); }
.clients__marquee--2 { margin-top: clamp(22px, 2.6vw, 44px); }
.clients__marquee img { height: clamp(36px, 3vw, 52px); max-width: clamp(120px, 10.5vw, 180px); }
.sc-karate { top: 57%; }
.cta { padding-bottom: clamp(50px, 4.5vw, 84px); }
.clients__marquee img { height: clamp(32px, 2.6vw, 46px); max-width: clamp(105px, 9vw, 160px); }
/* footer contact details: regular running-text size */
.footer__links { font-size: var(--fs-m); font-weight: 400; font-family: var(--f-he); }
.footer__links a { padding-block: 6px; }
/* review author: initial bubble + name + organisation */
.rv-card__av { flex: none; width: 44px; height: 44px; border-radius: 50%; display: grid; place-items: center; background: var(--purple); color: #fff; font-weight: 900; font-size: 18px; }
.rv-card__id { display: flex; flex-direction: column; line-height: 1.25; }
.rv-card__id small { font-size: 13px; color: rgba(47,41,53,.65); font-family: var(--f-he); }

/* =================== WORKS PAGE =================== */
.wp-page { background: var(--ink); color: #fff; }
.wp-page .header { color: #fff; }
.wp-hero { position: relative; overflow: hidden; padding: clamp(150px, 16vw, 240px) var(--gutter) clamp(60px, 6vw, 110px); text-align: center; }
.wp-hero__big { position: absolute; inset-inline: 0; top: 50%; translate: 0 -40%; z-index: 0; white-space: nowrap; pointer-events: none; text-align: left;
  font-family: var(--f-display); text-transform: uppercase; font-size: clamp(110px, 15vw, 290px); line-height: 1; }
.wp-hero__big span { display: inline-block; animation: wkBigLoop 70s linear infinite;
  background: linear-gradient(180deg, rgba(153,102,255,.42) 0%, rgba(153,102,255,.14) 60%, rgba(153,102,255,0) 95%); -webkit-background-clip: text; background-clip: text; color: transparent; }
.wp-hero__title { position: relative; z-index: 1; margin: 0; font-weight: 900; font-size: clamp(52px, 6.4vw, 120px); line-height: 1.05; }
.wp-hero__lead { position: relative; z-index: 1; margin: 22px auto 0; max-width: 560px; font-size: var(--fs-m); color: rgba(255,255,255,.82); }
.wp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(12, 1fr); gap: clamp(60px, 7vw, 130px) clamp(24px, 3vw, 56px);
  padding: 0 var(--gutter) clamp(110px, 10vw, 180px); max-width: 1640px; margin: 0 auto; align-items: start; }
.wp-card { grid-column: span 5; position: relative; }
.wp-card--l { grid-column: span 7; }
.wp-card:nth-child(4n+2), .wp-card:nth-child(4n+4) { margin-top: clamp(80px, 10vw, 200px); }
.wp-card:nth-child(7), .wp-card:nth-child(8), .wp-card:nth-child(9), .wp-card:nth-child(10) { grid-column: span 6; }
.wp-card:nth-child(9), .wp-card:nth-child(10) { grid-column: span 6; }
.wp-card__media { margin: 0; position: relative; overflow: hidden; border-radius: 14px; border: 10px solid #fff; background: #fff;
  box-shadow: 0 30px 80px rgba(10,6,20,.45), 0 0 60px rgba(153,102,255,.18); transition: box-shadow .6s var(--ease); }
.wp-card--p .wp-card__media { aspect-ratio: 4 / 5; }
.wp-card--l .wp-card__media { aspect-ratio: 16 / 9; }
.wp-card__media img { position: absolute; inset: -7% 0; width: 100%; height: 114%; object-fit: cover; transition: scale 1.1s var(--ease); }
.wp-card:hover .wp-card__media { box-shadow: 0 40px 100px rgba(10,6,20,.5), 0 0 90px rgba(153,102,255,.4); }
.wp-card:hover .wp-card__media img { scale: 1.05; }
.wp-card__meta { display: grid; grid-template-columns: auto 1fr; column-gap: 18px; align-items: baseline; margin-top: 22px; }
.wp-card__n { grid-row: span 2; font-family: var(--f-display); font-size: clamp(30px, 2.6vw, 46px); color: var(--purple); line-height: 1; }
.wp-card__t { margin: 0; font-weight: 900; font-size: clamp(22px, 1.8vw, 32px); line-height: 1.15; }
.wp-card__d { margin: 6px 0 0; color: rgba(255,255,255,.72); font-size: var(--fs-s, 15px); }
@media (max-width: 860px) {
  .wp-grid { grid-template-columns: 1fr; gap: 64px; }
  .wp-card, .wp-card--l, .wp-card:nth-child(n) { grid-column: 1; margin-top: 0; }
}
/* works page: only the laptop-screen mockups — two staggered columns */
.wp-grid .wp-card, .wp-grid .wp-card--l, .wp-grid .wp-card:nth-child(n) { grid-column: span 6; margin-top: 0; }
.wp-grid .wp-card:nth-child(even) { margin-top: clamp(110px, 12vw, 230px); }
.wp-grid .wp-card:last-child:nth-child(odd) { grid-column: 4 / span 6; }
@media (max-width: 860px) { .wp-grid .wp-card:nth-child(n) { grid-column: 1; margin-top: 0; } }
/* works page: one large, orderly project per row, no white frame */
.wp-grid { grid-template-columns: 1fr; max-width: 1280px; gap: clamp(80px, 8vw, 140px); }
.wp-grid .wp-card, .wp-grid .wp-card:nth-child(n), .wp-grid .wp-card:last-child:nth-child(odd) { grid-column: 1; margin-top: 0; }
.wp-card__media { border: 0; border-radius: 18px; background: #1d1824; }
.wp-card__meta { margin-top: 26px; display: flex; align-items: baseline; gap: 22px; }
.wp-card__n { grid-row: auto; }
.wp-card__t { font-size: clamp(26px, 2.4vw, 40px); }
.wp-card__d { margin: 0 auto 0 0; max-width: 520px; text-align: left; }
@media (max-width: 860px) { .wp-card__meta { flex-wrap: wrap; } .wp-card__d { margin: 0; text-align: right; flex-basis: 100%; } }
.sc-man .manifesto__title { font-size: calc(var(--fs-xxl) * 1.32); }
@media (max-width: 760px) { .sc-man .manifesto__title { font-size: clamp(46px, 13vw, 77px); } }
/* mockup hover: a light glint sweeps across the card */
.showcase__track .tilt-card::after { content: ""; position: absolute; inset: -10% -60%; z-index: 3; pointer-events: none;
  background: linear-gradient(105deg, transparent 38%, rgba(255,255,255,.55) 48%, rgba(255,255,255,.15) 54%, transparent 62%);
  transform: translateX(-70%); opacity: 0; transition: transform 0s, opacity .2s; mix-blend-mode: screen; }
.showcase__track .tilt-card:hover::after { transform: translateX(70%); opacity: 1; transition: transform 1s cubic-bezier(.3,.7,.3,1), opacity .2s; }
.showcase__track .tilt-card::after { background: linear-gradient(105deg, transparent 40%, rgba(255,255,255,.22) 49%, rgba(255,255,255,.06) 54%, transparent 60%); }
.showcase__track .tilt-card::after { background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.13) 49%, rgba(255,255,255,.04) 53%, transparent 58%); }
/* selected works: the same subtle glint sweeps across the image on hover */
.works .wk-img::after { content: ""; position: absolute; inset: -10% -60%; z-index: 20; pointer-events: none;
  background: linear-gradient(105deg, transparent 42%, rgba(255,255,255,.13) 49%, rgba(255,255,255,.04) 53%, transparent 58%);
  transform: translateX(-70%); opacity: 0; transition: transform 0s, opacity .2s; mix-blend-mode: screen; }
.works__stage:hover .wk-img::after { transform: translateX(70%); opacity: 1; transition: transform 1.1s cubic-bezier(.3,.7,.3,1), opacity .2s; }
/* the works images are mostly light — give the glint a faint lilac edge so it reads on white too */
.works .wk-img::after { mix-blend-mode: normal; background: linear-gradient(105deg, transparent 40%, rgba(153,102,255,.10) 45%, rgba(255,255,255,.4) 49%, rgba(153,102,255,.12) 53%, transparent 58%); }
/* works glint: slower sweep and a bit more presence so it is actually noticed on the bright screens */
.works .wk-img::after { background: linear-gradient(105deg, transparent 38%, rgba(153,102,255,.14) 44%, rgba(255,255,255,.6) 49%, rgba(153,102,255,.16) 54%, transparent 60%); }
.works__stage:hover .wk-img::after { transition: transform 1.6s cubic-bezier(.45,.05,.35,1), opacity .2s; }
/* works glint: one controlled sweep across the visible image */
.works .wk-img::after { display: none; }
.wk-shinewrap { position: absolute; inset: 0; z-index: 25; overflow: hidden; border-radius: 16px; pointer-events: none; }
.wk-shine { position: absolute; top: -20%; bottom: -20%; left: 0; width: 34%; transform: skewX(-18deg);
  background: linear-gradient(90deg, rgba(255,255,255,0) 0%, rgba(205,180,255,.16) 30%, rgba(255,255,255,.42) 50%, rgba(205,180,255,.16) 70%, rgba(255,255,255,0) 100%); }
.showcase__track .tilt-card { border-radius: 16px; border-width: 7px; }
.footer__title { color: #fff; }
.footer__t1, .footer__t1 * { color: var(--night) !important; }
/* white frame (8px) sits outside the mockup: the image keeps its full size */
.showcase__track .tilt-card { box-sizing: content-box; border-width: 8px; border-radius: 18px; }
.showcase__track .tilt-card img { border-radius: 10px; }
.footer__t1, .footer__t1 * { color: #fff !important; }
/* hero button = same look as "לעבודות נוספות" */
.hero .btn-ghost { padding: 10px 18px; font-size: 14px; gap: 10px; white-space: nowrap; color: #fff; }
.hero .btn-ghost, .works__more .btn-ghost { border-color: #fff; }
.hero .btn-ghost, .works__more .btn-ghost { font-size: 16px; }
.showcase__track .tilt-card { border-width: 10px; border-radius: 20px; }
/* button hover: solid green, dark text, no visible border */
.btn-ghost:hover, .hero .btn-ghost:hover, .works__more .btn-ghost:hover { background: var(--green); color: var(--night); border-color: var(--green); }
/* mockup frame drawn fully OUTSIDE the image (a 10px white ring), the image itself keeps every pixel */
.showcase__track .tilt-card { box-sizing: border-box; border: 0; border-radius: 14px; overflow: hidden;
  box-shadow: 0 0 0 10px #fff, 0 10px 70px 10px rgba(153,102,255,.32); }
.showcase__track .tilt-card img { border-radius: 0; }
.showcase__track .tilt-card:hover { box-shadow: 0 0 0 10px #fff, 0 30px 90px 10px rgba(153,102,255,.45); }
/* more depth in the lenses: darker curved edges, a soft inner vignette and a top reflection */
.lens--both .lens__glass { background:
    radial-gradient(120% 95% at 50% 55%, rgba(0,0,0,0) 48%, rgba(20,4,46,.42) 78%, rgba(12,2,30,.7) 100%),
    linear-gradient(180deg, rgba(22,4,48,.55) 0%, rgba(30,8,62,.18) 26%, rgba(0,0,0,0) 46%, rgba(0,0,0,0) 78%, rgba(30,8,62,.32) 100%),
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 15%, rgba(255,255,255,0) 25%),
    linear-gradient(115deg, rgba(255,255,255,0) 58%, rgba(255,245,255,.22) 62%, rgba(255,255,255,0) 67%); }
/* per-lens depth: darker curved rim inside each lens + tinted top */
.lens__depth { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 4; pointer-events: none; }
.lens--both .lens__glass { background:
    linear-gradient(115deg, rgba(255,255,255,.34) 0%, rgba(255,255,255,.08) 15%, rgba(255,255,255,0) 25%),
    linear-gradient(115deg, rgba(255,255,255,0) 58%, rgba(255,245,255,.22) 62%, rgba(255,255,255,0) 67%); }
.wk-btn { font-size: 16px; padding: 10px 18px; gap: 10px; }
.about__text b, .about__lead b { color: inherit; }
/* softer, more diffused glow */
.about__blob { filter: blur(34px); background: radial-gradient(circle at 45% 40%, #d2bbff 0%, rgba(153,102,255,.85) 30%, rgba(153,102,255,.35) 55%, rgba(153,102,255,0) 75%); }
.about__blob { filter: blur(28px); }
.about__blob { filter: blur(21px); }
.clients__marquee li { opacity: .6; transition: opacity .4s; }
.clients__marquee li:hover { opacity: 1; }
.logo { width: clamp(115px, 9.2vw, 176px); }
.clients__marquee li { opacity: .9; }
.manifesto__p1, .manifesto__p1 .w { font-weight: 900; }
.tilt-card figcaption { direction: rtl; text-align: right; line-height: 1.5; }
.showcase__track .tilt-card figcaption { left: auto; right: 18px; white-space: nowrap; max-width: calc(100% - 36px); }
.about__lead { font-size: var(--fs-m); line-height: 1.65; }
.about__lead-strong, .about__lead-strong .rw { font-weight: 900; }
.about__strong, .about__strong .rw { font-weight: 900; }
.about__text p { font-size: var(--fs-m); }
.pc__t { font-size: clamp(20px, 1.55vw, 27px); }
.cta__body { font-size: 20px; color: #fff; }
.cta__body { max-width: min(1100px, 100%); width: min(1100px, 100%); }
@media (max-width: 860px) { .br-desk { display: none; } }
.footer__copy { display: inline-flex; align-items: center; gap: 10px; margin: 0; }
.footer__logo { width: 62px; height: auto; color: #fff; flex: none; }
.footer__logo { filter: brightness(0) invert(1); }
.footer__logo { width: 70px; }
.hero__title { font-size: clamp(18px, 1.28vw, 24px); }
@media (min-width: 861px) { .hero__content { bottom: calc(clamp(28px, 5vh, 70px) + 4vh + 16px); } }
.hero .btn-ghost { margin-top: 40px; }
@media (min-width: 861px) { .hero__content { bottom: calc(clamp(28px, 5vh, 70px) + 4vh + 6px); } }

/* =================== CASE STUDY =================== */
.cs-hero { position: relative; padding: clamp(140px, 14vw, 210px) var(--gutter) clamp(40px, 4vw, 70px); max-width: 1280px; margin: 0 auto; }
.cs-back { display: inline-flex; align-items: center; gap: 10px; color: rgba(255,255,255,.75); font-size: 15px; margin-bottom: 34px; transition: color .3s; }
.cs-back svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.cs-back:hover { color: var(--green); }
.cs-kicker { font-family: var(--f-display); letter-spacing: .2em; text-transform: uppercase; color: var(--purple); font-size: 14px; margin: 0 0 14px; }
.cs-title { margin: 0; font-weight: 900; font-size: clamp(56px, 7vw, 132px); line-height: 1; }
.cs-lead { margin: 22px 0 0; max-width: 640px; font-size: 20px; color: #fff; line-height: 1.6; }
.cs-meta { margin: clamp(40px, 4vw, 64px) 0 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; border-top: 1px solid rgba(255,255,255,.14); padding-top: 26px; }
.cs-meta dt { font-size: 13px; color: rgba(255,255,255,.55); letter-spacing: .04em; }
.cs-meta dd { margin: 6px 0 0; font-size: 17px; font-weight: 700; }
.cs-cover { margin: 0 auto; max-width: 1280px; width: calc(100% - 2 * var(--gutter)); aspect-ratio: 16 / 9; border-radius: 18px; overflow: hidden; box-shadow: 0 40px 120px rgba(10,6,20,.5), 0 0 80px rgba(153,102,255,.2); }
.cs-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-text { max-width: 1280px; margin: 0 auto; padding: clamp(90px, 9vw, 160px) var(--gutter); display: grid; grid-template-columns: 1fr 1fr; gap: clamp(40px, 6vw, 120px); }
.cs-text__n { font-family: var(--f-display); font-size: clamp(40px, 3.6vw, 64px); color: var(--purple); line-height: 1; }
.cs-text__t { margin: 14px 0 0; font-weight: 900; font-size: clamp(28px, 2.4vw, 42px); }
.cs-text p { margin: 16px 0 0; font-size: 20px; line-height: 1.7; color: #fff; }
.cs-scroll { padding: 0 var(--gutter); }
.cs-scroll__head { max-width: 1280px; margin: 0 auto 34px; display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; }
.cs-scroll__t { margin: 0; font-weight: 900; font-size: var(--fs-h2); }
.cs-scroll__head p { margin: 0; color: rgba(255,255,255,.75); font-size: 18px; }
.cs-browser { max-width: 1100px; margin: 0 auto; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 40px 120px rgba(10,6,20,.5), 0 0 90px rgba(153,102,255,.25); }
.cs-browser__bar { height: 36px; background: #ece9f2; display: flex; align-items: center; gap: 7px; padding: 0 16px; }
.cs-browser__bar i { width: 11px; height: 11px; border-radius: 50%; background: #cfc8dc; }
.cs-browser__view { position: relative; height: min(70vh, 640px); overflow: hidden; }
.cs-browser__page { position: absolute; inset: 0 0 auto 0; width: 100%; height: auto; display: block; will-change: transform; }
.cs-gallery { max-width: 1280px; margin: 0 auto; padding: clamp(110px, 10vw, 180px) var(--gutter) 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: clamp(24px, 3vw, 48px); }
.cs-g { margin: 0; position: relative; overflow: hidden; border-radius: 16px; box-shadow: 0 30px 80px rgba(10,6,20,.45), 0 0 60px rgba(153,102,255,.16); }
.cs-g--wide { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
.cs-g--tall { aspect-ratio: 4 / 5; }
.cs-g img { position: absolute; inset: -6% 0; width: 100%; height: 112%; object-fit: cover; }
.cs-next { text-align: center; padding: clamp(110px, 10vw, 190px) var(--gutter) clamp(110px, 10vw, 180px); }
.cs-next__k { margin: 0 0 14px; color: rgba(255,255,255,.6); font-size: 16px; letter-spacing: .05em; }
.cs-next__a { display: inline-flex; align-items: center; gap: 22px; font-weight: 900; font-size: clamp(48px, 6vw, 110px); line-height: 1; color: #fff; transition: gap .5s var(--ease); }
.cs-next__a svg { width: .5em; height: .5em; fill: none; stroke: var(--green); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.cs-next__a:hover { gap: 34px; }
@media (max-width: 860px) {
  .cs-meta { grid-template-columns: 1fr 1fr; }
  .cs-text { grid-template-columns: 1fr; }
  .cs-gallery { grid-template-columns: 1fr; }
  .cs-browser__view { height: 60vh; }
}
/* case study: wider layout */
.cs-hero, .cs-text, .cs-gallery, .cs-scroll__head { max-width: 1560px; }
.cs-cover { max-width: 1560px; }
.cs-browser { max-width: 1320px; }
.cs-browser__view { height: min(74vh, 720px); }
/* sketch → design compare */
.cs-sketch { padding: 0 var(--gutter) clamp(110px, 10vw, 180px); }
.cs-compare { position: relative; max-width: 1320px; margin: 0 auto; aspect-ratio: 1920 / 1200; border-radius: 16px; overflow: hidden; background: #fff;
  box-shadow: 0 40px 120px rgba(10,6,20,.5), 0 0 90px rgba(153,102,255,.25); user-select: none; }
.cs-compare__final { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.cs-compare__wire { position: absolute; inset: 0; background: #f4f2f7; clip-path: inset(0 0 0 var(--pos)); padding: 2.2% 4.2%; direction: rtl;
  background-image: linear-gradient(rgba(47,41,53,.05) 1px, transparent 1px), linear-gradient(90deg, rgba(47,41,53,.05) 1px, transparent 1px); background-size: 24px 24px; }
.cs-compare__wire i, .cs-compare__wire span { display: block; }
.wf-nav { display: flex; align-items: center; gap: 3%; height: 6%; }
.wf-logo { width: 4%; aspect-ratio: 1; border: 2px solid #b9b2c6; border-radius: 6px; }
.wf-links { display: flex; gap: 3.5%; flex: 1; justify-content: center; } .wf-links i { width: 5%; height: 8px; background: #cfc9da; border-radius: 4px; }
.wf-icons { display: flex; gap: 10px; } .wf-icons i { width: 16px; height: 16px; border: 2px solid #b9b2c6; border-radius: 50%; }
.wf-btn { width: 9%; height: 28px; border: 2px solid #b9b2c6; border-radius: 100px; }
.wf-hero { display: flex; gap: 4%; height: 62%; align-items: center; margin-top: 2%; }
.wf-copy { flex: 1; display: flex; flex-direction: column; gap: 14px; align-items: flex-start; }
.wf-h1 { width: 70%; height: 8%; min-height: 34px; background: #b9b2c6; border-radius: 6px; } .wf-h1--b { width: 85%; background: #a49bb5; }
.wf-p { width: 60%; height: 10px; background: #d8d3e1; border-radius: 4px; } .wf-p--s { width: 40%; }
.wf-cta { width: 22%; height: 40px; margin-top: 10px; border: 2px dashed #a49bb5; border-radius: 100px; }
.wf-visual { position: relative; flex: 1; height: 100%; }
.wf-circle { position: absolute; inset: 6% 10% 6% 10%; border: 2px dashed #a49bb5; border-radius: 50%; }
.wf-circle--s { inset: auto auto 2% 2%; width: 26%; aspect-ratio: 1; height: auto; border-style: solid; }
.wf-x { position: absolute; inset: 22% 26%; background: linear-gradient(45deg, transparent 49.5%, #c9c2d6 49.5%, #c9c2d6 50.5%, transparent 50.5%), linear-gradient(-45deg, transparent 49.5%, #c9c2d6 49.5%, #c9c2d6 50.5%, transparent 50.5%); border: 2px solid #c9c2d6; border-radius: 12px; }
.wf-icons-row { display: flex; justify-content: center; gap: 4.5%; margin-top: 3%; } .wf-icons-row i { width: 5%; aspect-ratio: 1; border: 2px solid #b9b2c6; border-radius: 50%; }
.wf-tag { position: absolute; left: 3%; bottom: 4%; font-family: var(--f-display); letter-spacing: .2em; font-size: 13px; color: #8d84a0; }
.cs-compare__line { position: absolute; top: 0; bottom: 0; left: var(--pos); width: 2px; margin-left: -1px; background: var(--purple); pointer-events: none; }
.cs-compare__knob { position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px; border-radius: 50%; background: var(--purple); display: grid; place-items: center; box-shadow: 0 10px 30px rgba(153,102,255,.5); }
.cs-compare__knob svg { width: 22px; height: 22px; fill: none; stroke: #fff; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.cs-compare__range { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: ew-resize; margin: 0; direction: ltr; }
.wf-hero { flex-direction: row-reverse; }
.wf-copy { align-items: flex-end; padding-left: 8%; }
.wf-copy i { margin-left: 0; }
.cs-compare__wire .wf-links, .cs-compare__wire .wf-icons { display: flex; }
.cs-compare__wire .wf-links i { width: 5%; height: 8px; }
/* case study: every image on the same grid as the title; title sits higher */
.cs-page { --cs-w: calc(min(1560px, 100vw) - 2 * var(--gutter)); }
.cs-hero { padding-top: clamp(100px, 8.5vw, 140px); }
.cs-cover, .cs-browser, .cs-compare { width: 100%; max-width: var(--cs-w); margin-inline: auto; }
.cs-scroll, .cs-sketch { padding-inline: var(--gutter); }
.cs-scroll__head { max-width: var(--cs-w); padding: 0; }
/* inner pages: two browser windows side by side, hover to scroll */
.cs-pages { padding: clamp(110px, 10vw, 180px) var(--gutter) 0; }
.cs-pages__grid { max-width: var(--cs-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); align-items: start; }
.cs-pages .cs-browser { max-width: none; }
.cs-pages .cs-browser__view { height: min(66vh, 620px); }
@media (max-width: 860px) { .cs-pages__grid { grid-template-columns: 1fr; } }
/* gallery: three mockups in a row, the wide shot below */
.cs-gallery { grid-template-columns: repeat(3, 1fr); max-width: var(--cs-w); padding-inline: 0; }
@media (max-width: 860px) { .cs-gallery { grid-template-columns: 1fr; } }
.cs-pages .cs-browser__view { height: min(48vh, 440px); }
.cs-scroll + .cs-scroll { padding-top: clamp(110px, 10vw, 180px); }
.cs-scroll--gap { padding-top: clamp(110px, 10vw, 180px); }
/* case study: big green project button opposite the title */
.cs-titlerow { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.cs-visit { display: inline-flex; align-items: center; gap: 16px; padding: 22px 42px; border-radius: 100px; background: var(--green); color: var(--night); font-weight: 900; font-size: clamp(18px, 1.4vw, 24px); transition: box-shadow .4s, transform .4s; }
.cs-visit svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .5s var(--ease); }
.cs-visit:hover { box-shadow: 0 0 50px rgba(0,242,143,.45); }
.cs-visit:hover svg { transform: translateX(-6px); }
/* case study extras: video browser, 3 static pages, moments grid */
.cs-browser__video { position: relative; aspect-ratio: 1920 / 1120; background: #061a30; }
.cs-browser__video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.cs-pages__grid--3 { grid-template-columns: repeat(3, 1fr); }
.cs-browser__shot { display: block; width: 100%; height: auto; }
.cs-moments { max-width: var(--cs-w); margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: clamp(24px, 3vw, 48px); }
.cs-g--screen { aspect-ratio: 16 / 10; }
.cs-gallery--one { grid-template-columns: minmax(0, 520px); justify-content: center; }
@media (max-width: 860px) { .cs-pages__grid--3, .cs-moments { grid-template-columns: 1fr; } }
/* Hallel wireframe (cinematic hero) */
.cs-compare:has(.cs-compare__wire--hl) { aspect-ratio: 1776 / 968; }
.cs-compare__wire--hl { padding: 0; }
.cs-compare__wire--hl .wfh-nav { position: absolute; top: 4%; left: 4%; right: 4%; height: 6%; display: flex; align-items: center; justify-content: space-between; }
.cs-compare__wire--hl .wfh-links { display: flex; gap: 14px; } .wfh-links i { width: 52px; height: 8px; background: #cfc9da; border-radius: 4px; }
.cs-compare__wire--hl .wfh-logo { width: 7%; height: 100%; border: 2px solid #a49bb5; border-radius: 6px; }
.cs-compare__wire--hl .wfh-btn { width: 7%; height: 70%; border: 2px dashed #a49bb5; border-radius: 4px; }
.wfh-c { position: absolute; width: 5%; aspect-ratio: 1; border: 0 solid #8d84a0; }
.wfh-c--tr { top: 14%; right: 4.5%; border-top-width: 3px; border-right-width: 3px; }
.wfh-c--tl { top: 14%; left: 4.5%; border-top-width: 3px; border-left-width: 3px; }
.wfh-c--br { bottom: 12%; right: 4.5%; border-bottom-width: 3px; border-right-width: 3px; }
.wfh-c--bl { bottom: 12%; left: 4.5%; border-bottom-width: 3px; border-left-width: 3px; }
.cs-compare__wire--hl .wfh-copy { position: absolute; right: 40%; top: 32%; width: 26%; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
.wfh-h { width: 100%; height: 34px; background: #b9b2c6; border-radius: 6px; } .wfh-h--b { width: 75%; background: #a49bb5; }
.wfh-p { width: 95%; height: 9px; background: #d8d3e1; border-radius: 4px; } .wfh-p--s { width: 60%; }
.cs-compare__wire--hl .wfh-cam { position: absolute; left: 66%; top: 22%; width: 26%; height: 58%; border: 2px solid #a49bb5; border-radius: 14px; }
.wfh-cam span { position: absolute; top: -18%; width: 30%; aspect-ratio: 1; border: 2px dashed #a49bb5; border-radius: 50%; }
.wfh-cam span:nth-child(1) { left: 2%; } .wfh-cam span:nth-child(2) { left: 35%; } .wfh-cam span:nth-child(3) { left: 68%; }
.wfh-cam b { position: absolute; inset: 30% 20%; background: linear-gradient(45deg, transparent 49.5%, #c9c2d6 49.5%, #c9c2d6 50.5%, transparent 50.5%), linear-gradient(-45deg, transparent 49.5%, #c9c2d6 49.5%, #c9c2d6 50.5%, transparent 50.5%); border: 2px solid #c9c2d6; border-radius: 8px; }
.wfh-beam { position: absolute; left: 30%; top: 46%; width: 36%; height: 16%; border: 2px dashed #c9c2d6; border-right: 0; clip-path: polygon(0 0, 100% 40%, 100% 60%, 0 100%); }
.wfh-tagline { position: absolute; right: 37%; bottom: 13%; width: 26%; height: 14px; background: #b9b2c6; border-radius: 4px; }

/* case study: image-based sketch layer in the compare slider */
.cs-compare:has(.cs-compare__wire--img) { aspect-ratio: 16 / 9; }
.cs-compare__wire--img { padding: 0; background: #fff; }
.cs-compare__wire--img > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
/* case study: drawn wireframes (Tom, Bodenheim, Hybrid) */
.cs-compare:has(.cs-compare__wire--x) { aspect-ratio: 16 / 9; }
.cs-compare__wire--x { padding: 0; }
.cs-compare__wire--x .wx { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.wx .b1 { fill: #b9b2c6; } .wx .b2 { fill: #a49bb5; } .wx .ln { fill: #cfc9da; } .wx .pp { fill: #d8d3e1; }
.wx .s { fill: none; stroke: #a49bb5; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.wx .sl { stroke: #c9c2d6; } .wx .d { stroke-dasharray: 8 7; }
/* case study gallery: brand mockups in one justified row, each at its own proportions */
.cs-gallery--fit { display: flex; align-items: stretch; }
.cs-gallery--fit .cs-g { flex: var(--ar) 1 0; aspect-ratio: var(--ar); min-width: 0; }
@media (max-width: 860px) { .cs-gallery--fit { flex-direction: column; } .cs-gallery--fit .cs-g { flex: none; width: 100%; } }
/* hero: never clip the top of the head (the photo grows while scrolling); keep the sides and bottom cropped */
.hero__person-crop { overflow: visible; clip-path: inset(-200% 0 0 0); }

/* ================= MOBILE POLISH ================= */
@media (max-width: 860px) {
  /* hero: bring the face to the middle of the screen instead of the edge */
  .hero__person { left: -36vw; }
  /* showcase: mockups big enough to actually see */
  .showcase__track .tilt-card { width: 80vw; padding: 2px; border-radius: 9px; }
  .showcase__track .tilt-card img { border-radius: 7px; }
  /* footer: closing line on its own row, bottom row stacked and clear of the floating buttons */
  .footer__statement { font-size: 7.4vw !important; margin-bottom: 18px !important; }
  .showcase__track .tilt-card figcaption { font-size: 11px; white-space: normal; max-width: calc(100% - 16px); line-height: 1.35; }
  .footer__bottom { flex-direction: column-reverse; align-items: center; gap: 12px; text-align: center; padding-bottom: 86px; }
  .footer__copy { justify-content: center; flex-wrap: wrap; }
}
/* touch screens: inner-page browsers scroll with the finger (there is no hover) */
@media (hover: none), (pointer: coarse) {
  .cs-browser--hover .cs-browser__view { overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; }
}
/* about: opens through the S of the logo – the outline draws, the section shows inside the letter, then the letter zooms past the camera */
.about__grid { position: relative; }
.about__veil { position: absolute; top: -12vh; left: calc(50% - 50vw); width: 100vw; height: 100vh; z-index: 30; pointer-events: none; }
.about__curtain { position: absolute; inset: 0; background: #fff;
  --mw: 300px; --mx: 50%; --my: 50%;
  -webkit-mask-image: url(../assets/logo-s.svg), linear-gradient(#000, #000); mask-image: url(../assets/logo-s.svg), linear-gradient(#000, #000);
  -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  -webkit-mask-size: var(--mw) auto, 100% 100%; mask-size: var(--mw) auto, 100% 100%;
  -webkit-mask-position: var(--mx) var(--my), 0 0; mask-position: var(--mx) var(--my), 0 0;
  -webkit-mask-composite: xor; mask-composite: exclude; }
.about__s { position: absolute; overflow: visible; }
.about__s path { fill: #fff; stroke: var(--purple); stroke-width: 2px; vector-effect: non-scaling-stroke; stroke-dasharray: 1; stroke-dashoffset: 1; }
@media (prefers-reduced-motion: reduce) { .about__veil { display: none; } }
@media (max-width: 860px) {
  /* manifesto swirl: higher, so it doesn't sit on the WhatsApp button */
  .sc-man .man-swirl, .man-swirl { bottom: 6.5% !important; width: 52vw !important; left: auto !important; right: 0 !important; transform: scaleX(-1) !important; }
}
@media (max-width: 860px) {
  /* "next project" title wraps onto two lines instead of running off the screen */
  .cs-next__a { display: inline-block; font-size: clamp(38px, 11vw, 64px); line-height: 1.08; text-align: center; padding-inline: var(--gutter); }
  .cs-next__a svg { display: inline-block; vertical-align: middle; margin-inline-start: .2em; }
}
@media (max-width: 860px) { .hero__title { font-size: 20px !important; line-height: 1.35; } .hero__content { top: 112px !important; } }
@media (max-width: 860px) {
  /* selected works: progress bar centred under the project, text and button centred below it */
  .works .works__info { flex-direction: column !important; align-items: center !important; text-align: center; gap: 26px !important; }
  .works .wk-progress { justify-content: center; width: 100%; padding: 0 !important; }
  .works .wk-texts { width: 100%; }
  .works .wk-info { align-items: center; text-align: center; }
  .works .wk-name, .works .wk-desc { text-align: center; margin-inline: auto; }
  .works .wk-btn { margin-inline: auto; }
}
@media (max-width: 860px) {
  .cta__body { font-size: 16px !important; line-height: 1.6; }
  /* footer swirl: solid white and a little larger */
  .footer__swirl { opacity: 1 !important; width: 50vw !important; top: auto !important; bottom: 290px !important; }
}
@media (max-width: 860px) {
  /* mockup frame on phones: a thin white line */
  .showcase__track .tilt-card, .showcase__track .tilt-card:hover { box-shadow: 0 0 0 5px #fff, 0 8px 40px 6px rgba(153,102,255,.3) !important; padding: 0 !important; }
  .hero__title { font-size: 22px !important; }
}
@media (max-width: 860px) {
  /* case studies: all running text at 16px on phones */
  .cs-lead, .cs-text p, .cs-text__col p, .cs-scroll__head p, .cs-meta dd { font-size: 16px !important; line-height: 1.65; }
}
@media (max-width: 860px) {
  /* footer: the closing line moves to the very bottom, edge to edge */
  .footer { display: flex; flex-direction: column; }
  .footer__bottom { order: 2; padding-bottom: 0 !important; margin-top: 28px !important; }
  .footer__statement { order: 3; font-size: 8.3vw !important; margin: 26px calc(-1 * var(--gutter)) 78px !important; padding: 0 4px !important; text-align: center; white-space: nowrap; letter-spacing: -.015em; }
}
@media (max-width: 860px) {
  /* case study: the green project button at a phone-friendly size */
  .cs-visit { padding: 13px 26px; font-size: 16px; gap: 10px; }
  .cs-visit svg { width: 18px; height: 18px; }
}
/* soft purple glow with a wide spread around the S outline */
.about__s { filter: drop-shadow(0 0 50px rgba(153,102,255,.14)); }
@media (max-width: 860px) {
  /* reel on phones: the same purple frame as desktop, a touch thinner */
  .reel-full__frame { box-shadow: 0 0 0 1.5px rgba(153,102,255,.95), 0 0 60px rgba(153,102,255,.45) !important; }
}
@media (max-width: 860px) {
  /* selected works: the big English line peeks out above the laptop instead of hiding behind it */
  .works .work__bigtext { top: 15% !important; bottom: auto !important; }
}
@media (max-width: 860px) { .about__veil { top: -5.5vh; } }
@media (max-width: 860px) { .works__more { transform: translateY(22px); } }
@media (max-width: 860px) { .works .work__title { transform: translateY(18px); } }
@media (max-width: 860px) {
  /* manifesto on phones: the lamp hangs in the top corner and the karate figure peeks in at the bottom, quietly */
  .sc-karate, .sc-lamp { display: block !important; }
  .sc-lamp { width: 24vw !important; right: -2vw !important; top: 4.5% !important; }
  .sc-lamp__beam { width: 70vw !important; height: 46vw !important; opacity: .8; }
  .sc-karate { width: 78vw !important; left: -20vw !important; top: 82% !important; opacity: .55 !important; z-index: 0 !important; }
}
/* legal pages: privacy policy & accessibility statement */
.wp-hero--legal { padding-bottom: clamp(30px, 4vw, 60px); }
.legal { max-width: 820px; margin: 0 auto; padding: 0 var(--gutter) clamp(90px, 9vw, 160px); color: rgba(255,255,255,.86); font-size: 17px; line-height: 1.8; }
.legal h2 { font-size: clamp(22px, 2vw, 30px); font-weight: 900; color: #fff; margin: 2.2em 0 .6em; }
.legal p, .legal ul { margin: 0 0 1em; }
.legal ul { padding-inline-start: 1.2em; }
.legal li { margin-bottom: .35em; }
.legal li::marker { color: var(--purple); }
.legal b { color: #fff; }
.legal a { color: var(--green); text-decoration: underline; text-underline-offset: 3px; }
.legal__meta { color: rgba(255,255,255,.5); font-size: 14px; }
@media (max-width: 860px) { .legal { font-size: 16px; } }
/* keyboard users: jump straight to the content */
.skip-link { position: fixed; top: 12px; right: 12px; z-index: 10000; padding: 10px 18px; border-radius: 100px; background: var(--green); color: var(--night); font-weight: 700; transform: translateY(-160%); transition: transform .25s; }
.skip-link:focus { transform: none; }
/* web design page: gallery of design mockups */
.ds-grid { max-width: 1560px; margin: 0 auto; padding: clamp(20px, 3vw, 50px) var(--gutter) clamp(110px, 10vw, 180px); display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(36px, 4vw, 70px) clamp(24px, 3vw, 54px); align-items: start; }
.ds-card { margin: 0; }
.ds-card:nth-child(3n+2) { margin-top: clamp(40px, 6vw, 110px); }
.ds-card__media { position: relative; aspect-ratio: 4 / 5; border-radius: 16px; overflow: hidden; background: #fff; padding: 8px;
  box-shadow: 0 10px 70px 6px rgba(153,102,255,.28); transition: box-shadow .5s var(--ease); }
.ds-card__media img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; display: block; transition: transform 1.1s var(--ease); }
.ds-card:hover .ds-card__media { box-shadow: 0 30px 90px 10px rgba(153,102,255,.45); }
.ds-card:hover .ds-card__media img { transform: scale(1.05); }
.ds-card__meta { display: flex; flex-direction: column; gap: 4px; padding: 18px 4px 0; }
.ds-card__t { font-weight: 900; font-size: clamp(20px, 1.6vw, 26px); color: #fff; }
.ds-card__d { font-size: 15px; color: rgba(255,255,255,.62); }
.ds-card[data-href] { cursor: pointer; }
@media (max-width: 1100px) { .ds-grid { grid-template-columns: repeat(2, 1fr); } .ds-card:nth-child(3n+2) { margin-top: 0; } .ds-card:nth-child(2n) { margin-top: clamp(40px, 6vw, 90px); } }
@media (max-width: 640px) { .ds-grid { grid-template-columns: 1fr; gap: 44px; } .ds-card:nth-child(n) { margin-top: 0; } .ds-card__media { padding: 4px; } }
/* web design page – light version (white page) */
.ds-light { background: #fff; color: var(--ink); }
.ds-light .header { color: var(--ink); }
.ds-light .header::before { background: rgba(255,255,255,.78); border-bottom-color: rgba(47,41,53,.06); }
.ds-light.menu-open .header { color: #fff; }
.ds-light .wp-hero__title { color: var(--ink); }
.ds-light .wp-hero__lead { color: rgba(47,41,53,.72); }
.ds-light .wp-hero__big span { opacity: .35; }
.ds-light .ds-card__media { box-shadow: 0 14px 60px 4px rgba(153,102,255,.22); }
.ds-light .ds-card:hover .ds-card__media { box-shadow: 0 30px 90px 10px rgba(153,102,255,.35); }
.ds-light .ds-card__t { color: var(--ink); }
.ds-light .ds-card__d { color: rgba(47,41,53,.6); }
.ds-light .grain { opacity: .03; }
/* light design page: no white frames around the mockups */
.ds-light .ds-card__media { padding: 0 !important; background: none; }
.ds-light .ds-card__media img { border-radius: 16px; }
/* web design page: three per row, as large as the screen allows */
.ds-grid { grid-template-columns: repeat(3, 1fr); max-width: 1720px; padding-inline: clamp(24px, 4.5vw, 90px); gap: clamp(44px, 4.5vw, 80px) clamp(28px, 3.4vw, 64px); }
.ds-card:nth-child(2n) { margin-top: 0; }
.ds-card:nth-child(3n+2) { margin-top: clamp(40px, 6vw, 110px); }
@media (max-width: 1100px) { .ds-grid { grid-template-columns: repeat(2, 1fr); } .ds-card:nth-child(3n+2) { margin-top: 0; } .ds-card:nth-child(2n) { margin-top: clamp(40px, 6vw, 90px); } }
@media (max-width: 640px) { .ds-grid { grid-template-columns: 1fr; } .ds-card:nth-child(n) { margin-top: 0; } }