/* Shaul Glassner — Showreel site
   Two references merged:
   · DESIGN.md      (Freshman)  — black velvet, hairlines, ticker, + MENU, bracketed hand flourishes
   · DESIGN (2).md  (Stink)     — giant tight-tracked serif manifesto, mono slate tags, full-bleed grid,
                                   ghost links, corner nav cluster, coral only inside "work" moments
   Hebrew substitutes: Editorial New / Times → Frank Ruhl Libre · TT Firs / Helvetica → Heebo ·
   Altform → Bebas Neue · Courier → IBM Plex Mono · Wasted Year → Amatic SC */

:root {
  --white: #ffffff;
  --black: #000000;
  --soot: #050505;
  --shale: #101010;
  --red: #ff2936;        /* Freshman: one dot per viewport */
  --coral: #e1695e;      /* Stink: work-only warmth */
  --purple: #6A1FD2;     /* brand (logo) */
  --mint: #02F9A2;       /* brand (logo) */
  /* category labels: logo mint + logo purple (lifted so small mono text stays legible on black)
     + two warm partners that balance the cool brand pair */
  --cat-com: var(--mint);   /* COMMERCIAL */
  --cat-brand: #9A5CFF;     /* BRAND · BRAND VIDEO · BRAND FILM — logo purple, lifted */
  --cat-prod: #FF7A5C;      /* PRODUCT · PROMO · DIGITAL — coral */
  --cat-3d: #FFC247;        /* 3D · ARCHVIZ · MOTION · SHOWREEL — amber */

  --font-serif: 'Noto Sans Hebrew', 'Heebo', Arial, sans-serif;   /* display (was Frank Ruhl Libre) */
  --font-latin-serif: 'Frank Ruhl Libre', 'Times New Roman', serif; /* English marquee only */
  --font-ui: 'Noto Sans Hebrew', 'Heebo', 'Helvetica Neue', Arial, sans-serif;
  --font-condensed: 'Bebas Neue', 'Heebo', sans-serif;
  --font-mono: 'IBM Plex Mono', 'Courier New', monospace;
  --font-hand: 'Noto Sans Hebrew', 'Heebo', sans-serif;

  --pad: 20px;
  --side: clamp(20px, 5vw, 60px);
  --hair: 1px solid rgba(255, 255, 255, .85);
  --hair-soft: 1px solid rgba(255, 255, 255, .14);
  --ticker-h: 112px;
  --ease: cubic-bezier(.2, .7, .1, 1);

  /* ---- editable color tokens (admin.html → צבעים); overrides live in data/theme.css ---- */
  --page-bg: #000000;        /* page background */
  --text: #ffffff;           /* main text */
  --text-muted: #bdbdbd;     /* secondary text */
  --text-dim: #6b6b6b;       /* manifesto words before they light up */
  --purple-light: #A879FF;   /* logo purple, lifted for dark backgrounds */
  --coral-bright: #FF7A5C;   /* folder / category coral */
  --amber: #FFC247;          /* folder / category amber */
  --surface-2: #1a1a1a;      /* small panels, placeholders */
  --folder-bg: #181818;      /* folder card body */
  --folder-front: #242424;   /* folder front flap */
  --dialog-bg: #0c0c0c;      /* open folder window */
  --chip-bg: #d9d9d9;        /* client logo chips */
  --hero-veil: #ffffff;      /* veil over the hero video */
  --title-clip: #4B13A3;     /* timeline title clips */
  --film-perf: #efe5cc;      /* film strip sprocket holes */
  --film-base: #0e0b08;      /* film strip base */
  --film-back: #1c140c;      /* film strip back side */
  --film-edge: #e0a03c;      /* film edge print */
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--page-bg); scroll-behavior: smooth; }
body {
  background: var(--page-bg);
  color: var(--text);
  font-family: var(--font-ui);
  font-size: 16px; line-height: 1.3;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
img, video { display: block; max-width: 100%; }
[hidden] { display: none !important; }

/* ---------- Accessibility base (ת"י 5568 · WCAG 2.0 AA) ---------- */
.sr-only {
  position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.skip-link {
  position: fixed; top: 12px; right: 12px; z-index: 100;
  background: var(--mint); color: var(--black); padding: 12px 18px; border-radius: 10px; font-weight: 700;
  transform: translateY(-160%); transition: transform .2s;
}
.skip-link:focus { transform: none; }
/* one clear, high-contrast focus ring everywhere (keyboard only) */
:focus { outline: none; }
:focus-visible { outline: 3px solid var(--mint); outline-offset: 3px; box-shadow: 0 0 0 6px var(--black); border-radius: 4px; }
.hero :focus-visible { outline-color: var(--purple); box-shadow: 0 0 0 6px var(--white); }
main:focus { outline: none; }

/* ---------- Type voices ---------- */
.mono { font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em; line-height: 1.43; text-transform: uppercase; }
.tag { opacity: .75; margin-bottom: 28px; }
.display {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(40px, 6.6vw, 100px); line-height: 1.04; letter-spacing: -0.02em;
}
.heading { font-family: var(--font-ui); font-weight: 400; font-size: clamp(28px, 3.6vw, 52px); line-height: 1; letter-spacing: -0.02em; }
.flourish { font-family: var(--font-hand); font-weight: 400; font-size: 18px; line-height: 1.2; opacity: .9; margin-top: 28px; }

/* Ghost link: hairline appears on hover */
.ghost { border-bottom: 1px solid transparent; transition: border-color .2s; padding-bottom: 2px; }
.ghost:hover { border-color: currentColor; }

/* ---------- Sticky scroll scenes ---------- */
.sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; }

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; inset: 0 0 auto 0; z-index: 30;
  display: flex; align-items: center; justify-content: space-between;
  padding: var(--pad);
  mix-blend-mode: difference;
}
/* Glyph and menu button sit outside .topbar: the bar's difference blend would shift brand colors over light video. */
.glyph {
  position: fixed; top: calc(var(--pad) + env(safe-area-inset-top)); right: calc(var(--pad) + env(safe-area-inset-right)); z-index: 31;
  font-size: 18px; line-height: 1; display: inline-block; color: var(--mint);
  animation: spin 12s linear infinite;
}
.topbar { min-height: 18px; }
@keyframes spin { to { transform: rotate(360deg); } }
.tc {
  position: absolute; left: 50%; top: var(--pad); transform: translateX(-50%);
  font-family: var(--font-mono); font-size: 13px; letter-spacing: .1em;
  font-variant-numeric: tabular-nums;
}
.menu-trigger {
  position: fixed; top: calc(var(--pad) + 1px + env(safe-area-inset-top)); left: calc(var(--pad) + env(safe-area-inset-left)); z-index: 31;
  font-size: 16px; line-height: 1; display: flex; gap: 6px; align-items: center;
  color: var(--purple); font-weight: 700;
}
.on-dark .menu-trigger, .menu-open .menu-trigger { color: var(--purple-light); }   /* logo purple lifted: 5.6:1 on black */
.menu-trigger .plus { display: inline-block; transition: transform .4s var(--ease); }
.menu-open .menu-trigger .plus { transform: rotate(45deg); }

/* ---------- Floating nav cluster (Stink) ---------- */
.navcluster {
  position: fixed; bottom: calc(28px + var(--lift, 0px)); left: 28px; z-index: 28;   /* --lift: set by main.js while the footer is on screen */
  display: flex; gap: 20px; align-items: center;
  font-size: 16px;
  mix-blend-mode: difference;
  opacity: 0; transform: translateY(12px); pointer-events: none;
  transition: opacity .5s, transform .5s var(--ease);
}
.navcluster.show { opacity: 1; transform: none; pointer-events: auto; }
.dot-btn {
  width: 26px; height: 26px; display: grid; place-items: center;
  border: 1px solid var(--white); border-radius: 10px; font-size: 13px;
}

/* ---------- Menu ---------- */
.menu {
  position: fixed; inset: 0; z-index: 25;
  background: var(--black);
  display: flex; flex-direction: column; justify-content: center; align-items: center; gap: 20px;
  opacity: 0; pointer-events: none; transition: opacity .5s;
}
.menu-open .menu { opacity: 1; pointer-events: auto; }
.menu ul { list-style: none; width: min(720px, 90vw); }
.menu li { border-top: var(--hair); overflow: hidden; }
.menu li:last-child { border-bottom: var(--hair); }
.menu a {
  display: flex; align-items: baseline; gap: 24px; padding: 12px 0;
  font-family: var(--font-serif); font-weight: 500; letter-spacing: -0.02em;
  font-size: clamp(40px, 7.5vw, 90px); line-height: 1.05;
  transform: translateY(105%); transition: transform .7s var(--ease), opacity .3s;
}
.menu a .mono { font-size: 13px; letter-spacing: .1em; opacity: .6; }
.menu-open .menu a { transform: none; }
.menu-open .menu li:nth-child(2) a { transition-delay: .05s; }
.menu-open .menu li:nth-child(3) a { transition-delay: .1s; }
.menu-open .menu li:nth-child(4) a { transition-delay: .15s; }
.menu-open .menu li:nth-child(5) a { transition-delay: .2s; }
.menu ul:hover a { opacity: .35; }
.menu ul a:hover { opacity: 1; }

/* ---------- Hero (light) ---------- */
.hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; color: var(--black); }
.hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; filter: blur(3px) saturate(.7); transform: scale(1.04);
}
.hero-shade {
  position: absolute; inset: 0;
  /* white veil over the hero video (whole color + opacity editable as --hero-veil in admin.html) */
  background: radial-gradient(ellipse at center, color-mix(in srgb, var(--hero-veil) 90%, transparent) 0%, color-mix(in srgb, var(--hero-veil) 87%, transparent) 24%, color-mix(in srgb, var(--hero-veil) 72%, transparent) 42%, color-mix(in srgb, var(--hero-veil) 65%, transparent) 75%, color-mix(in srgb, var(--hero-veil) 60%, transparent) 100%);
}
.hero-center {
  position: absolute; inset: 0 0 var(--ticker-h) 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 22px; padding: 72px 16px 16px;
}
.logo-wrap { animation: rise 1.4s var(--ease) both; will-change: transform; }
.hero-logo {
  width: auto; height: min(56vh, 540px); max-width: 84vw; object-fit: contain;
  transform-origin: 50% 90%;
  animation: float 6s ease-in-out 1.4s infinite;
}
@keyframes float {
  0%, 100% { transform: translateY(0) rotate(0deg); }
  25%      { transform: translateY(-8px) rotate(-1.2deg); }
  50%      { transform: translateY(-3px) rotate(0deg) scale(1.012); }
  75%      { transform: translateY(-9px) rotate(1.2deg); }
}
@keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } }

.play-btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 10px 18px; border: 1px solid var(--black);
  font-size: 14px;
  transition: background .3s, color .3s;
  animation: rise 1.4s .25s var(--ease) both;
}
.play-btn .tri { font-size: 10px; }
.play-btn:hover { background: var(--black); color: var(--white); }

/* Viewfinder overlay */
.viewfinder { position: absolute; inset: 64px 28px calc(var(--ticker-h) + 20px); pointer-events: none; color: var(--black); }
.viewfinder .c { position: absolute; width: 28px; height: 28px; border: 0 solid var(--black); opacity: .7; }
.viewfinder .tl { top: 0; left: 0; border-top-width: 1px; border-left-width: 1px; }
.viewfinder .tr { top: 0; right: 0; border-top-width: 1px; border-right-width: 1px; }
.viewfinder .bl { bottom: 0; left: 0; border-bottom-width: 1px; border-left-width: 1px; }
.viewfinder .br { bottom: 0; right: 0; border-bottom-width: 1px; border-right-width: 1px; }
.vf-rec, .vf-meta { position: absolute; top: 12px; font-family: var(--font-mono); font-size: 12px; letter-spacing: .1em; direction: ltr; }
.vf-rec { left: 40px; display: flex; gap: 8px; align-items: center; }
.vf-meta { right: 40px; opacity: .7; }
.vf-cross { position: absolute; left: 50%; top: 50%; width: 18px; height: 18px; transform: translate(-50%, -50%); opacity: .35; }
.vf-cross::before, .vf-cross::after { content: ""; position: absolute; background: var(--black); }
.vf-cross::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.vf-cross::after { top: 50%; left: 0; right: 0; height: 1px; }
.rec { width: 8px; height: 8px; border-radius: 50%; background: var(--red); animation: blink 1.2s steps(2, start) infinite; }
@keyframes blink { to { visibility: hidden; } }

/* Ticker */
.ticker {
  position: absolute; inset: auto 0 0 0; height: var(--ticker-h);
  background: var(--black); color: var(--white);
  border-top: var(--hair); overflow: hidden; direction: ltr;
}
.ticker-track { display: flex; gap: 28px; height: 100%; align-items: center; width: max-content; padding: 0 var(--pad); animation: roll 60s linear infinite; }
.ticker:hover .ticker-track, .ticker:focus-within .ticker-track { animation-play-state: paused; }
@keyframes roll { to { transform: translateX(-50%); } }
.cell { display: flex; align-items: center; gap: 12px; text-align: right; direction: rtl; }
.cell img { height: 72px; width: 128px; object-fit: cover; filter: grayscale(1); transition: filter .3s; }
.cell:hover img { filter: none; }
.cell-name { font-size: 15px; line-height: 1; }
.cell-sub { display: block; font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em; color: color-mix(in srgb, var(--white) 60%, transparent); margin-top: 6px; direction: ltr; text-align: right; }
.cat-com { color: var(--cat-com); }
.cat-brand { color: var(--cat-brand); }
.cat-prod { color: var(--cat-prod); }
.cat-3d { color: var(--cat-3d); }

/* ---------- 01 Manifesto + graph ---------- */
.manifesto {
  padding: 180px var(--side) 120px;
  display: grid; grid-template-columns: 1.4fr 1fr; gap: 60px; align-items: end;
}
.manifesto .tag { grid-column: 1 / -1; margin: 0; }
.manifesto-text {
  font-family: var(--font-serif); font-weight: 500;
  font-size: clamp(34px, 5vw, 78px); line-height: 1.1; letter-spacing: -0.02em;
}
/* unlit words are gray (var(--text-dim) = 3.9:1 on black, above the 3:1 large-text minimum); they take their color when lit */
.manifesto-text .w { color: var(--text-dim); transition: color .3s; }
.manifesto-text .w.on { color: var(--t-color, var(--white)); }       /* --t-color / --mf-hl / --mf-pu: per-text colors from admin.html */
.manifesto-text .w.on.hl { color: var(--mf-hl, var(--mint)); }
.manifesto-text .w.on .pu { color: var(--mf-pu, var(--purple-light)); }   /* logo purple lifted for contrast on black */

.graph { border: var(--hair-soft); background: var(--soot); padding: 14px; }
.graph figcaption { opacity: .6; margin-bottom: 10px; }
.graph svg { width: 100%; height: auto; aspect-ratio: 2 / 1; overflow: visible; }
.graph .curve { fill: none; stroke: var(--white); stroke-width: 2; }
.graph .handle-l { stroke: color-mix(in srgb, var(--white) 35%, transparent); stroke-width: 1; stroke-dasharray: 4 4; }
.graph .hdl { fill: var(--black); stroke: var(--white); }
.graph .kf { fill: var(--white); }
.graph .ball { fill: var(--mint); }
.graph-axis { display: flex; justify-content: space-between; opacity: .6; margin-top: 8px; font-variant-numeric: tabular-nums; }

/* ---------- 02 Helix (CSS 3D) ---------- */
.helix-sec { height: 420vh; position: relative; }
/* Two zones that never overlap: the helix lives in the left 60% (clipped + faded at its edge),
   the copy owns the right column. */
.helix-stage {
  position: absolute; top: 0; bottom: 0; left: 0; width: 62%;
  overflow: hidden;
  perspective: 1400px; perspective-origin: 50% 45%;
  display: grid; place-items: center;
  -webkit-mask-image: linear-gradient(to right, transparent 0, var(--black) 7%, var(--black) 80%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, var(--black) 12%, var(--black) 86%, transparent 100%);
  -webkit-mask-composite: source-in;
          mask-image: linear-gradient(to right, transparent 0, var(--black) 7%, var(--black) 80%, transparent 100%),
                      linear-gradient(to bottom, transparent 0, var(--black) 12%, var(--black) 86%, transparent 100%);
          mask-composite: intersect;
}
.helix-stage { filter: sepia(.16) saturate(.92) contrast(1.06); }   /* aged print look */
.helix-stage::after {                                                 /* projector vignette */
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(ellipse 60% 55% at 50% 48%, transparent 55%, color-mix(in srgb, var(--black) 60%, transparent));
}
.helix { --r: 300px; position: relative; width: 0; height: 0; transform-style: preserve-3d; will-change: transform; }

/* one slice of the continuous film strip (built in main.js) */
.fs { position: absolute; transform-style: preserve-3d; }
.fs > i { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; }
.ff {                                   /* front: frame line · sprocket holes · picture */
  background-color: var(--film-base);
  background-image:
    linear-gradient(90deg, var(--black) var(--line), transparent 0),
    linear-gradient(90deg, transparent calc(var(--hp) - var(--hw)), var(--film-perf) 0),
    linear-gradient(90deg, transparent calc(var(--hp) - var(--hw)), var(--film-perf) 0),
    var(--img);
  background-size: 100% 100%, var(--hp) var(--hh), var(--hp) var(--hh), var(--W) var(--imgH);
  background-position: 0 0, var(--x) calc((var(--band) - var(--hh)) / 2), var(--x) calc(100% - (var(--band) - var(--hh)) / 2), var(--fx) var(--band);
  background-repeat: no-repeat, repeat-x, repeat-x, no-repeat;
}
.ff b {                                 /* edge print: frame number, amber like old stock */
  position: absolute; top: 1px; left: 1px; font: 400 8px/1 var(--font-mono); letter-spacing: .05em;
  color: var(--film-edge); direction: ltr; white-space: nowrap; opacity: .9;
}
.fb {                                   /* back: dull film base with the same perforations */
  transform: rotateY(180deg);
  background-color: var(--film-back);
  background-image:
    linear-gradient(90deg, transparent calc(var(--hp) - var(--hw)), var(--film-base) 0),
    linear-gradient(90deg, transparent calc(var(--hp) - var(--hw)), var(--film-base) 0),
    linear-gradient(180deg, rgba(255,190,110,.10), transparent 40%, rgba(255,190,110,.06));
  background-size: var(--hp) var(--hh), var(--hp) var(--hh), 100% 100%;
  background-position: var(--x) calc((var(--band) - var(--hh)) / 2), var(--x) calc(100% - (var(--band) - var(--hh)) / 2), 0 0;
  background-repeat: repeat-x, repeat-x, no-repeat;
}
.fsh { background: var(--black); opacity: 0; }  /* per-slice shading, driven by scroll */
.helix-copy {
  position: absolute; z-index: 2; top: 50%; right: var(--side); width: 34%;
  transform: translateY(-50%); text-align: right; pointer-events: none;
}
.helix-copy .tag { margin-bottom: 18px; }
/* Heading: heavy colored key words against light, softened connectors */
.hx-title { font-size: clamp(44px, 5.6vw, 100px); line-height: .98; letter-spacing: -0.02em; }
.hx-title .ln { display: block; white-space: nowrap; }
.hx-title .ln + .ln { margin-top: .08em; }
.hx-title b { font-weight: 900; }
.hx-title .lt { font-weight: 900; }   /* same color and weight as its line — the gradient alone sets the rhythm */
.hx-title .dot { font-style: normal; font-weight: 900; }
.g-mint, .g-purple { -webkit-background-clip: text; background-clip: text; color: transparent; }
.g-mint   { background-image: linear-gradient(180deg, color-mix(in srgb, var(--mint) 55%, #fff) 0%, var(--mint) 50%, color-mix(in srgb, var(--mint) 80%, #000) 100%); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--mint) 28%, transparent)); }
.g-purple { background-image: linear-gradient(180deg, color-mix(in srgb, var(--purple-light) 75%, #fff) 0%, color-mix(in srgb, var(--purple) 60%, var(--purple-light)) 50%, var(--purple) 100%); filter: drop-shadow(0 0 22px color-mix(in srgb, var(--purple) 35%, transparent)); }
.hx-cap {
  display: inline-flex; gap: 18px; margin-top: 30px; padding-top: 14px;
  border-top: 1px solid color-mix(in srgb, var(--white) 18%, transparent); font-size: 11px; color: color-mix(in srgb, var(--white) 55%, transparent);
}
.hx-cap span:first-child { color: var(--mint); }
.helix-meter {
  position: absolute; bottom: 28px; right: var(--side);
  display: flex; gap: 14px; align-items: center; font-variant-numeric: tabular-nums;
}
.helix-meter .bar { width: 160px; height: 1px; background: color-mix(in srgb, var(--white) 25%, transparent); position: relative; }
.helix-meter .bar i { position: absolute; inset: 0 auto 0 0; width: 0; background: var(--white); }

/* ---------- 03 Work grid (Stink full-bleed) ---------- */
.work { padding-top: 160px; }
.sec-head { padding: 0 var(--side) 48px; }
.sec-head.small { padding: 90px var(--side) 28px; }
/* Rounded card grid with gutters — first card is a featured 2×2 */
.grid {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
  padding: 0 var(--side); list-style: none;
}
.grid > li { display: flex; }
.grid > li > .tile { flex: 1; }
.grid > li:first-child { grid-column: span 2; grid-row: span 2; }
.tile {
  position: relative; overflow: hidden; aspect-ratio: 16 / 10; text-align: right;
  background: var(--shale); border-radius: 22px;
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
  transition: transform .6s var(--ease), box-shadow .4s;
  isolation: isolate;
}
.grid > li:first-child .tile { aspect-ratio: auto; }
.tile img, .tile video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
/* footage is black & white until hovered */
.tile img { transition: transform 1.2s var(--ease), filter .6s ease; filter: grayscale(1) brightness(.85); }
@media (hover: none) { .tile img { filter: none; } }  /* touch screens have no hover — keep color */
.tile video { opacity: 0; transition: opacity .4s; }
.tile.playing video { opacity: 1; }
.tile:hover { transform: translateY(-6px); box-shadow: inset 0 0 0 2px var(--mint); }
.tile:hover img { transform: scale(1.06); filter: none; }
.tile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, color-mix(in srgb, var(--black) 82%, transparent), color-mix(in srgb, var(--black) 10%, transparent) 55%, transparent); }
.tile-meta { position: absolute; bottom: 20px; right: 22px; left: 22px; display: flex; flex-direction: column; gap: 6px; }
.tile-meta .mono { color: color-mix(in srgb, var(--white) 75%, transparent); font-size: 11px; }
.tile-title { font-size: clamp(18px, 1.6vw, 24px); letter-spacing: -0.02em; line-height: 1.1; }
.grid > li:first-child .tile-title { font-family: var(--font-serif); font-weight: 500; font-size: clamp(30px, 3.8vw, 56px); letter-spacing: -0.02em; }
.tile-idx {
  position: absolute; top: 16px; left: 16px; direction: ltr;
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .1em;
  padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--black) 45%, transparent); backdrop-filter: blur(6px);
}
/* play badge */
.tile-play {
  position: absolute; top: 50%; left: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px;
  display: grid; place-items: center; border-radius: 50%;
  background: color-mix(in srgb, var(--white) 14%, transparent); backdrop-filter: blur(8px); border: 1px solid color-mix(in srgb, var(--white) 50%, transparent);
  font-size: 18px; padding-left: 4px;
  opacity: 0; transform: scale(.7); transition: opacity .35s, transform .5s var(--ease), background .3s;
}
.grid > li:first-child .tile-play { width: 92px; height: 92px; margin: -46px 0 0 -46px; font-size: 26px; opacity: 1; transform: none; }
.tile:hover .tile-play { opacity: 1; transform: none; background: var(--mint); color: var(--black); border-color: var(--mint); }

/* ---------- 05 Timeline (NLE) ---------- */
.timeline-sec { height: 360vh; position: relative; }
.timeline-sec .sticky { display: flex; flex-direction: column; perspective: 1600px; }
.nle {
  flex: 1; margin: 0 var(--side) 84px;
  display: grid; grid-template-rows: 1fr auto; gap: 14px;
  transform-origin: 50% 100%;
  transform: rotateX(var(--tilt, 38deg)) scale(var(--ts, .9));
  opacity: var(--to, .55);
  min-height: 0;
}
.nle-viewer { position: relative; background: var(--soot); border: var(--hair-soft); min-height: 0; overflow: hidden; }
.nle-viewer img { width: 100%; height: 100%; object-fit: contain; }
.viewer-tc { position: absolute; bottom: 10px; left: 50%; transform: translateX(-50%); background: color-mix(in srgb, var(--black) 60%, transparent); padding: 2px 8px; font-variant-numeric: tabular-nums; }
.viewer-name { position: absolute; top: 10px; left: 12px; opacity: .7; }
.nle-panel { position: relative; border: var(--hair-soft); background: var(--soot); padding: 0 0 8px 0; }
.ruler {
  height: 22px; margin-left: 44px; border-bottom: var(--hair-soft);
  background: repeating-linear-gradient(90deg, color-mix(in srgb, var(--white) 35%, transparent) 0 1px, transparent 1px 2.5%);
  background-size: 100% 6px; background-repeat: no-repeat; background-position: bottom;
  position: relative;
}
.ruler span { position: absolute; top: 2px; font-family: var(--font-mono); font-size: 10px; opacity: 1; transform: translateX(3px); }
.tracks { display: flex; flex-direction: column; gap: 4px; padding-top: 6px; }
.track { display: flex; height: 30px; }
.track.tall { height: 52px; }
.tl { width: 44px; display: grid; place-items: center; font-size: 11px; opacity: .6; border-right: var(--hair-soft); }
.lane { position: relative; flex: 1; }
.clip { position: absolute; top: 0; bottom: 0; overflow: hidden; border: 1px solid color-mix(in srgb, var(--black) 60%, transparent); }
.clip.v1 { background: var(--surface-2); }
.clip.v1 img { height: 100%; width: auto; float: left; opacity: .85; }
.clip.v1 b { position: absolute; top: 3px; left: 5px; font: 10px var(--font-mono); letter-spacing: .05em; text-shadow: 0 0 3px var(--black); }
.clip.v2 { background: var(--title-clip); color: var(--white); font: 10px/28px var(--font-mono); padding-left: 6px; letter-spacing: .08em; white-space: nowrap; }
.clip.fx { background: transparent; border: 0; }
.clip.fx .kfd { position: absolute; top: 50%; width: 8px; height: 8px; background: var(--mint); transform: translate(-50%, -50%) rotate(45deg); }
.clip.fx .ln { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: color-mix(in srgb, var(--mint) 35%, transparent); }
.clip.v1.active { outline: 2px solid var(--white); outline-offset: -2px; }
.wave { display: flex; align-items: center; gap: 1px; background: color-mix(in srgb, var(--mint) 7%, transparent); }
.wave i { flex: 1; background: var(--mint); opacity: .7; }
.playhead { position: absolute; top: 0; bottom: 0; left: 44px; width: 0; pointer-events: none; will-change: transform; }
.playhead i { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--red); }
.playhead i::before { content: ""; position: absolute; top: 0; left: -6px; border: 6px solid transparent; border-top: 9px solid var(--red); }

/* ---------- Marquee ---------- */
.marquee { padding: 140px 0 100px; overflow: hidden; border-top: var(--hair-soft); border-bottom: var(--hair-soft); direction: ltr; }
.marquee-row {
  white-space: nowrap; will-change: transform;
  font-family: var(--font-latin-serif); font-weight: 300; font-size: clamp(64px, 12vw, 190px); line-height: 1; letter-spacing: -0.05em;
}
.marquee-row em { font-style: italic; color: var(--coral); }
.mono-row { font-family: var(--font-mono); font-size: clamp(16px, 2vw, 26px); letter-spacing: .25em; opacity: .6; margin-top: 30px; }

/* ---------- About / Contact ---------- */
.about, .contact { padding: 180px var(--side) 120px; }
.about-cols { margin-top: 60px; }   /* the services list was removed — the toolkit section below covers the tools */
.about-cols > p { font-size: 19px; line-height: 1.55; font-weight: 300; max-width: 640px; }
.services { list-style: none; border-top: var(--hair); }
.services li { display: flex; align-items: baseline; gap: 20px; padding: 18px 0; border-bottom: var(--hair); font-size: 23px; letter-spacing: -0.03em; }
.services li .soft { margin-right: auto; color: var(--text-muted); font-size: 12px; }
.contact { text-align: center; padding-bottom: 160px; }
.contact .tag { margin-bottom: 40px; }
.contact .mail { display: inline-block; margin-top: 48px; font-family: 'Poppins', var(--font-ui); font-weight: 300; font-size: clamp(28px, 5vw, 64px); letter-spacing: -0.03em; }

/* Behance + Gmail buttons: side by side, bottom-right — on the same line as the floating nav (bottom-left) when the page ends */
.contact { position: relative; }
.socials { position: absolute; right: 28px; bottom: 35px; list-style: none; margin: 0; padding: 0; display: flex; gap: 12px; }
.soc {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 160px; height: 44px; border-radius: 8px;
  font: 600 16px/1 'Poppins', var(--font-ui); letter-spacing: .01em; text-decoration: none;
  transition: transform .3s var(--ease), box-shadow .3s, filter .3s;
}
.soc:hover, .soc:focus-visible { transform: translateY(-3px); box-shadow: 0 10px 24px color-mix(in srgb, var(--black) 55%, transparent); filter: brightness(1.08); }
.soc-behance { background: #1769ff; color: #fff; }
.soc-gmail { background: #fff; color: #202124; }
.soc-ico { flex: none; width: 24px; height: 18px; }
.soc-ico.be { width: auto; height: auto; font: 800 21px/1 'Poppins', var(--font-ui); letter-spacing: -0.04em; }
@media (max-width: 900px) {
  .socials { position: static; justify-content: center; flex-wrap: wrap; margin-top: 36px; }
}
.footer { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; border-top: var(--hair); padding: var(--pad); }
.footer .mono { font-size: 12px; opacity: .7; }

/* ---------- Reveal on scroll ---------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity 1s var(--ease), transform 1.2s var(--ease); }
.reveal.in { opacity: 1; transform: none; }

/* ---------- Player ---------- */
.player { position: fixed; inset: 0; z-index: 50; background: var(--black); display: flex; align-items: center; justify-content: center; padding: 60px 16px 16px; opacity: 0; pointer-events: none; transition: opacity .4s; }
.player.open { opacity: 1; pointer-events: auto; }
.player video { width: 100%; max-height: 100%; max-width: 1600px; }
.yt-wrap { width: min(100%, 1600px, calc((100vh - 140px) * 16 / 9)); aspect-ratio: 16 / 9; border-radius: 18px; }
.yt-wrap iframe { border-radius: 18px; }
.yt-wrap { position: relative; }
.yt-wrap iframe { width: 100%; height: 100%; border: 0; display: block; }
.yt-out { position: absolute; top: calc(100% + 12px); left: 0; opacity: .7; }
.player-close { position: absolute; top: var(--pad); left: var(--pad); font-size: 16px; }

/* ---------- Responsive ---------- */
@media (max-width: 900px) {
  .manifesto { grid-template-columns: 1fr; padding-top: 120px; }
  .about-cols { grid-template-columns: 1fr; }
  .grid { grid-template-columns: 1fr 1fr; gap: 16px; }
  /* stacked: copy on top, helix in the lower part of the screen */
  .helix-copy { top: 96px; left: var(--side); width: auto; transform: none; text-align: center; }
  .helix-stage {
    top: 44%; width: 100%;
    -webkit-mask-image: linear-gradient(to bottom, transparent 0, var(--black) 16%);
            mask-image: linear-gradient(to bottom, transparent 0, var(--black) 16%);
  }
}
@media (max-width: 640px) {
  :root { --pad: 16px; --ticker-h: 92px; }
  .hero-logo { height: auto; width: 80vw; }
  .cell img { height: 54px; width: 96px; }
  .grid { grid-template-columns: 1fr; gap: 14px; }
  .grid > li:first-child { grid-column: auto; grid-row: auto; } .grid > li:first-child .tile { aspect-ratio: 16 / 10; }
  .tile { border-radius: 16px; }
  .tc, .vf-meta { display: none; }
  /* phone: the full menu covers navigation, so the floating cluster would only cover content */
  .navcluster { display: none; }
  .services li { font-size: 19px; gap: 14px; }
  .services li .soft { font-size: 10px; white-space: nowrap; }
  .footer { flex-direction: column; align-items: center; text-align: center; gap: 10px; padding-bottom: calc(var(--pad) + env(safe-area-inset-bottom)); }
  .helix-stage { top: 38%; bottom: 64px; }
  .helix-meter { bottom: auto; top: 64px; left: var(--side); right: var(--side); justify-content: center; }
  .track.tall { height: 40px; }
  .clip.v1 b { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .ticker-track, .logo-wrap, .hero-logo, .play-btn, .rec, .glyph { animation: none; }
  .reveal { opacity: 1; transform: none; }
}

/* ---------- Footer accessibility link ---------- */
.foot-link { font-size: 14px; color: var(--white); }

/* ---------- Accessibility button + panel ---------- */
.a11y-btn {
  position: fixed; top: 50%; right: 0; z-index: 60; transform: translateY(-50%);
  width: 46px; height: 50px; display: grid; place-items: center;
  background: var(--purple); color: var(--white); border-radius: 12px 0 0 12px;
  border: 2px solid var(--white); border-right: 0;
}
.a11y-btn svg { width: 26px; height: 26px; fill: currentColor; }
.a11y-btn:hover { background: color-mix(in srgb, var(--purple) 80%, #000); }
.a11y-panel {
  position: fixed; top: 50%; right: 56px; z-index: 61; transform: translateY(-50%);
  width: min(300px, calc(100vw - 72px));
  background: var(--surface-2); color: var(--white); border: 1px solid color-mix(in srgb, var(--white) 35%, transparent); border-radius: 18px;
  padding: 20px 18px 16px; font-family: var(--font-ui);
}
.a11y-panel h2 { font-size: 18px; font-weight: 700; margin: 0 0 14px; }
.a11y-opts { display: grid; gap: 8px; }
.a11y-opts button {
  text-align: right; padding: 11px 14px; border-radius: 10px; font-size: 16px;
  background: var(--surface-2); border: 1px solid color-mix(in srgb, var(--white) 25%, transparent);
}
.a11y-opts button:hover { border-color: var(--white); }
.a11y-opts button[aria-pressed="true"] { background: var(--mint); color: var(--black); border-color: var(--mint); font-weight: 700; }
.a11y-opts button[aria-pressed="true"]::before { content: "✓ "; }
.a11y-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 14px; font-size: 14px; }
.a11y-foot a, .a11y-foot button { text-decoration: underline; }
.a11y-close { position: absolute; top: 10px; left: 12px; font-size: 24px; line-height: 1; padding: 2px 8px; }

/* --- mode: pause all automatic motion (WCAG 2.2.2) --- */
.a11y-pause *, .a11y-pause *::before, .a11y-pause *::after { animation-play-state: paused !important; }
.a11y-pause .logo-wrap, .a11y-pause .play-btn { animation: none !important; }
.a11y-pause .hero-logo, .a11y-pause .glyph, .a11y-pause .rec { animation: none !important; }
.a11y-pause .reveal { opacity: 1; transform: none; transition: none; }
.a11y-pause { scroll-behavior: auto; }
/* --- mode: larger text --- */
.a11y-big main, .a11y-big footer, .a11y-big .menu { zoom: 1.2; }
.a11y-big .mono { font-size: 15px; }
/* --- mode: high contrast --- */
.a11y-contrast .tag, .a11y-contrast .mono, .a11y-contrast .soft, .a11y-contrast .flourish,
.a11y-contrast .graph-axis, .a11y-contrast .footer .mono { opacity: 1 !important; color: var(--white); }
.a11y-contrast .hero-shade { background: color-mix(in srgb, var(--white) 92%, transparent); }
.a11y-contrast .hero .mono, .a11y-contrast .viewfinder { color: var(--black); }
.a11y-contrast .tile::after { background: linear-gradient(to top, color-mix(in srgb, var(--black) 95%, transparent), color-mix(in srgb, var(--black) 50%, transparent) 60%, color-mix(in srgb, var(--black) 20%, transparent)); }
.a11y-contrast .cell-sub, .a11y-contrast .tile-meta .mono { color: var(--white); }
.a11y-contrast .g-mint, .a11y-contrast .g-purple { background: none; color: var(--white); filter: none; }
.a11y-contrast .manifesto-text .pu { color: color-mix(in srgb, var(--purple-light) 70%, #fff); }
/* --- mode: highlight links and buttons --- */
.a11y-links a, .a11y-links main button, .a11y-links .menu-trigger { text-decoration: underline !important; text-underline-offset: 4px; outline: 2px dashed var(--mint); outline-offset: 2px; }
/* --- mode: readable font --- */
.a11y-font body, .a11y-font .display, .a11y-font .manifesto-text, .a11y-font .heading, .a11y-font .flourish,
.a11y-font .menu a, .a11y-font .marquee-row, .a11y-font .tile-title, .a11y-font .hx-title { font-family: var(--font-ui) !important; letter-spacing: 0 !important; }
.a11y-font .mono { font-family: var(--font-ui); letter-spacing: .02em; }

@media (max-width: 640px) {
  .a11y-btn { top: auto; bottom: calc(110px + env(safe-area-inset-bottom)); transform: none; width: 42px; height: 44px; }
  .a11y-panel { top: auto; bottom: 16px; transform: none; right: 52px; }
}

/* ---------- 04 Archive — topic folders ---------- */
.folders { padding: 160px 0 140px; }
.folders-lead { max-width: 560px; margin-top: 18px; font-size: 18px; line-height: 1.6; font-weight: 300; color: var(--text-muted); }
.tone-mint   { --tone: var(--mint); }
.tone-purple { --tone: var(--purple-light); }
.tone-coral  { --tone: var(--coral-bright); }
.tone-amber  { --tone: var(--amber); }
.folder-grid {
  list-style: none; display: grid; grid-template-columns: repeat(3, 1fr); gap: 64px 36px;
  padding: 56px var(--side) 0;
}
.folder { position: relative; display: block; width: 100%; aspect-ratio: 5 / 4; text-align: right; perspective: 1100px; }
/* back plate with the folder tab on the right (RTL reading side) */
.f-back {
  position: absolute; inset: 10% 0 0 0; border-radius: 6px 0 20px 20px;
  background: var(--folder-bg); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 10%, transparent);
}
.f-back::before {
  content: ""; position: absolute; top: -11%; right: 0; width: 42%; height: 12%;
  background: var(--folder-bg); border-radius: 16px 16px 0 0;
  clip-path: polygon(0 100%, 12% 0, 100% 0, 100% 100%);
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 10%, transparent);
}
.f-back::after {   /* a strip of the folder's color on its tab */
  content: ""; position: absolute; top: -6%; right: 7%; width: 18%; height: 3px; border-radius: 3px; background: var(--tone);
}
/* three thumbnails tucked inside, fanning out on hover */
.f-peek { position: absolute; inset: 14% 8% 34% 8%; }
.f-peek img {
  position: absolute; top: 0; width: 66%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px;
  filter: grayscale(1) brightness(.8); box-shadow: 0 10px 30px color-mix(in srgb, var(--black) 55%, transparent);
  transition: transform .7s var(--ease), filter .5s;
}
.f-peek img:nth-child(1) { right: 0;   transform: translateY(30%) rotate(5deg); }
.f-peek img:nth-child(2) { right: 17%; transform: translateY(18%) rotate(-1deg); z-index: 1; }
.f-peek img:nth-child(3) { left: 0;    transform: translateY(32%) rotate(-6deg); }
.folder:hover .f-peek img, .folder:focus-visible .f-peek img { filter: none; }
.folder:hover .f-peek img:nth-child(1), .folder:focus-visible .f-peek img:nth-child(1) { transform: translate(6%, -16%) rotate(9deg); }
.folder:hover .f-peek img:nth-child(2), .folder:focus-visible .f-peek img:nth-child(2) { transform: translateY(-26%) rotate(-1deg); }
.folder:hover .f-peek img:nth-child(3), .folder:focus-visible .f-peek img:nth-child(3) { transform: translate(-6%, -12%) rotate(-10deg); }
/* front flap: tilts open on hover */
.f-front {
  position: absolute; inset: 34% 0 0 0; z-index: 2;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 10px;
  padding: 22px 24px; border-radius: 18px 18px 20px 20px;
  background: linear-gradient(180deg, color-mix(in srgb, var(--folder-front) 90%, transparent), color-mix(in srgb, var(--folder-bg) 97%, transparent));
  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--white) 20%, transparent), inset 0 0 0 1px color-mix(in srgb, var(--white) 8%, transparent);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transform-origin: 50% 100%; transition: transform .7s var(--ease);
}
.folder:hover .f-front, .folder:focus-visible .f-front { transform: rotateX(-16deg); }
.f-idx { position: absolute; top: 18px; left: 22px; color: var(--tone); font-size: 12px; }
.f-name { font-family: var(--font-serif); font-weight: 500; font-size: clamp(22px, 2.1vw, 32px); line-height: 1.1; letter-spacing: -0.01em; }
.f-meta { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; }
.f-meta .mono { font-size: 10px; color: var(--text-muted); }
.f-count { font-size: 13px; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--tone); color: var(--tone); white-space: nowrap; }
.folder:focus-visible { outline-offset: 8px; border-radius: 20px; }
@media (hover: none) { .f-peek img { filter: none; } }

/* ---------- Open folder (dialog) ---------- */
body.drawer-open { overflow: hidden; }
.drawer {
  position: fixed; inset: 0; z-index: 45;
  background: color-mix(in srgb, var(--black) 72%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none; transition: opacity .35s;
}
.drawer.open { opacity: 1; pointer-events: auto; }
.drawer-inner {
  position: absolute; inset: 4vh 4vw; overflow-y: auto; overscroll-behavior: contain;
  background: var(--dialog-bg); border-radius: 26px; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--white) 14%, transparent);
  padding: 48px clamp(20px, 4vw, 56px) 56px;
  transform: translateY(28px) scale(.98); transition: transform .5s var(--ease);
}
.drawer.open .drawer-inner { transform: none; }
.drawer-head { position: relative; margin-bottom: 36px; padding-left: 120px; }
.drawer-head .tag { color: var(--tone); opacity: 1; margin-bottom: 14px; }
.drawer-head .display { font-size: clamp(34px, 5vw, 72px); }
.drawer-count { margin-top: 12px; color: var(--text-muted); font-size: 16px; }
.drawer-close {
  position: absolute; top: 0; left: 0; padding: 10px 18px; border-radius: 999px;
  border: 1px solid color-mix(in srgb, var(--white) 40%, transparent); font-size: 15px;
}
.drawer-close:hover { background: var(--white); color: var(--black); }
.drawer-grid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 28px 22px; }
.vcard { display: flex; flex-direction: column; gap: 12px; width: 100%; text-align: right; }
.vthumb { position: relative; display: block; aspect-ratio: 16 / 9; border-radius: 14px; overflow: hidden; background: var(--surface-2); }
.vthumb img { width: 100%; height: 100%; object-fit: cover; filter: grayscale(1) brightness(.85); transition: filter .5s, transform .9s var(--ease); }
.vcard:hover .vthumb img, .vcard:focus-visible .vthumb img { filter: none; transform: scale(1.05); }
.vplay {
  position: absolute; top: 50%; left: 50%; width: 52px; height: 52px; margin: -26px 0 0 -26px;
  display: grid; place-items: center; border-radius: 50%; padding-left: 3px; font-size: 15px;
  background: var(--tone); color: var(--black); opacity: 0; transform: scale(.7); transition: opacity .3s, transform .4s var(--ease);
}
.vcard:hover .vplay, .vcard:focus-visible .vplay { opacity: 1; transform: none; }
.vname { font-size: 16px; line-height: 1.35; }
@media (hover: none) { .vthumb img { filter: none; } }

@media (max-width: 900px) {
  .folder-grid { grid-template-columns: repeat(2, 1fr); gap: 52px 24px; }
}
@media (max-width: 640px) {
  .folders { padding: 110px 0 100px; }
  .folder-grid { grid-template-columns: 1fr; gap: 44px; }
  .drawer-inner {
    inset: 0; border-radius: 0;
    padding: calc(28px + env(safe-area-inset-top)) max(16px, env(safe-area-inset-right)) calc(40px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left));
  }
  .drawer-head { padding-left: 0; padding-top: 52px; }
  .drawer-grid { grid-template-columns: 1fr; }
}

/* ---------- 05 Clients — logo strips ---------- */
.clients { padding: 150px 0 130px; overflow: hidden; }
.logo-rows { display: grid; gap: 22px; margin-top: 18px; direction: ltr; }
.logo-row {
  overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent, var(--black) 8%, var(--black) 92%, transparent);
          mask-image: linear-gradient(90deg, transparent, var(--black) 8%, var(--black) 92%, transparent);
}
.logo-track { list-style: none; display: flex; gap: 18px; width: max-content; padding: 6px 0; animation: logos-left 55s linear infinite; }
.logo-row.to-right .logo-track { animation-name: logos-right; animation-duration: 62s; }
.logo-row:hover .logo-track, .logo-row:focus-within .logo-track { animation-play-state: paused; }
@keyframes logos-left  { from { transform: translateX(0); }    to { transform: translateX(calc(-50% - 9px)); } }
@keyframes logos-right { from { transform: translateX(calc(-50% - 9px)); } to { transform: translateX(0); } }
.logo-chip {
  flex: none; display: grid; place-items: center; width: 200px; height: 96px; padding: 18px 26px;
  border-radius: 18px; background: var(--chip-bg); transition: background .35s, transform .35s var(--ease);
}
.logo-chip img { width: auto; height: auto; max-width: 148px; max-height: 58px; object-fit: contain; filter: grayscale(1) contrast(1.1); opacity: .78; transition: filter .35s, opacity .35s; }
.logo-chip:hover { background: var(--white); transform: translateY(-4px); }
.logo-chip:hover img { filter: none; opacity: 1; }
@media (hover: none) { .logo-chip img { filter: none; opacity: 1; } .logo-chip { background: var(--white); } }
@media (max-width: 640px) {
  .clients { padding: 100px 0 90px; }
  .logo-chip { width: 150px; height: 74px; padding: 14px 18px; border-radius: 14px; }
  .logo-chip img { max-width: 112px; max-height: 44px; }
  .logo-rows { gap: 14px; }
}
@media (prefers-reduced-motion: reduce) { .logo-track { animation: none; flex-wrap: wrap; width: auto; justify-content: center; } .logo-chip[aria-hidden="true"] { display: none; } }
.a11y-pause .logo-track { animation: none !important; flex-wrap: wrap; width: auto; justify-content: center; padding-inline: var(--side); }
.a11y-pause .logo-chip[aria-hidden="true"] { display: none; }

/* client logos: white backgrounds melt into the chip; optional hover-only artwork (e.g. Kornit's colorful K) */
.logo-chip img { mix-blend-mode: multiply; }
.logo-chip .lg-hov { display: none; }
.logo-chip:hover .lg-hov { display: block; }
.logo-chip:hover .lg-def.has-hov { display: none; }
/* performance: looping animations sleep while their section is off screen (class set in main.js) */
.off-screen, .off-screen *, .off-screen *::before, .off-screen *::after { animation-play-state: paused !important; }

/* ---------- 08 Toolkit — an After Effects layers panel ---------- */
.tools { display: grid; grid-template-columns: minmax(260px, .8fr) 1.4fr; gap: 70px; align-items: start; padding: 40px var(--side) 150px; }   /* sits right under About (same number, 07) */
.tools .tag { color: var(--amber); opacity: 1; }
.tools-copy { position: sticky; top: 120px; }
.tools-copy .display { font-size: clamp(64px, 8vw, 128px); line-height: .92; }
.tools-lead { margin-top: 26px; max-width: 360px; font-size: 18px; line-height: 1.6; font-weight: 300; color: var(--text-muted); }
.layers { border: var(--hair-soft); background: var(--soot); border-radius: 4px; overflow: hidden; }
.layers-bar { display: flex; justify-content: space-between; padding: 10px 16px; font-size: 11px; color: var(--text-muted); border-bottom: var(--hair-soft); background: color-mix(in srgb, var(--white) 4%, transparent); }
.lb-tc { color: var(--amber); }
.layers-head, .layer { display: grid; grid-template-columns: 34px 34px 22px 1fr auto; align-items: center; column-gap: 12px; padding: 0 16px; }
.layers-head { height: 40px; font-size: 10px; color: var(--text-muted); border-bottom: var(--hair-soft); }
.layers-head span:last-child, .l-type { text-align: right; }
.layers-list { list-style: none; margin: 0; padding: 0; }
.layer { position: relative; height: 56px; border-bottom: var(--hair-soft); transition: background .25s, opacity .3s; }
.layer:last-child { border-bottom: 0; }
.layer.reveal { transform: translateX(-24px); transition: opacity .8s var(--ease) calc(var(--i) * 45ms), transform 1s var(--ease) calc(var(--i) * 45ms), background .25s; }
.layer.reveal.in { transform: none; }
.layer::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--lc); transform: scaleY(0); transition: transform .3s var(--ease); }
.layer:hover { background: color-mix(in srgb, var(--lc) 10%, transparent); }
.layer:hover::before { transform: none; }
.eye { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: var(--text-muted); cursor: pointer; border-radius: 4px; }
.eye svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.eye:hover, .eye:focus-visible { color: var(--white); }
.l-idx { font-size: 12px; color: var(--text-muted); }
.l-sw { width: 12px; height: 12px; border-radius: 2px; background: var(--lc); }
.l-name { font-family: 'Poppins', var(--font-ui); font-size: 19px; font-weight: 400; letter-spacing: -0.01em; color: var(--white); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.l-type { font-size: 10px; color: var(--text-muted); white-space: nowrap; }
.layer:hover .l-type { color: var(--lc); }
/* eye switched off: the layer goes dark, like a hidden layer in AE */
.layer.off .l-name, .layer.off .l-sw, .layer.off .l-type { opacity: .25; }
.layer.off .eye svg { opacity: .35; }
.lb-motion { --lc: var(--purple-light); }
.lb-edit   { --lc: var(--mint); }
.lb-design { --lc: #5AA9FF; }
.lb-3d     { --lc: var(--coral-bright); }
.lb-video  { --lc: var(--amber); }
.lb-agent  { --lc: #D97757; }
.lb-image  { --lc: #38D1C5; }
@media (max-width: 900px) {
  .tools { grid-template-columns: 1fr; gap: 40px; padding: 120px var(--side) 100px; }
  .tools-copy { position: static; }
  .layers-head, .layer { grid-template-columns: 26px 26px 16px 1fr auto; column-gap: 8px; padding: 0 10px; }
  .layer { height: 50px; }
  .l-name { font-size: 16px; }
  .l-type { font-size: 9px; letter-spacing: .06em; }
}
.a11y-pause .layer.reveal { transform: none; transition: none; }