/* ============ TOKENS ============ */
:root {
  --bg:             #FAFAF8;
  --text:           #122019;
  --text-secondary: #66716B;
  /* ambient light washes: kept high-chroma and light-valued so they read as
     coloured light, not as a grey smudge on the screen */
  --blob-a: 108, 226, 166;
  --blob-b: 240, 195, 120;
  --blob-c: 135, 190, 220;
  --line:           rgba(18, 32, 25, 0.10);
  --line-strong:    rgba(18, 32, 25, 0.24);

  --font-display: "Bricolage Grotesque", sans-serif;
  --font-body:    "Inter", sans-serif;
  --font-mono:    "Azeret Mono", monospace;

  --size-hero:  clamp(36px, 5.8vw, 88px);   /* largest type on the page */
  --size-display: clamp(34px, 3.9vw, 62px); /* one step down: contact headline */
  --size-work:  clamp(32px, 3.4vw, 56px);
  --size-h2:    clamp(28px, 3vw, 40px);
  --size-body:  17px;
  --size-label: 12px;

  --space-1: 8px; --space-2: 16px; --space-3: 32px; --space-4: 64px; --space-5: 128px;
  --work-row-space-y: 160px;
  --section-pad-y:    var(--space-5);
  --section-head-gap: var(--space-4);
  --zchut-time-scale: 0.6666667; /* 1.5x playback */
  --maxw: 1440px;
  --snap-offset: calc(var(--space-4) + var(--space-3) + var(--space-2));

  /* motion: soft, slow, fade-forward */
  --ease:      cubic-bezier(0.33, 0, 0.15, 1);   /* gentle in and out */
  --ease-out:  cubic-bezier(0.16, 0.8, 0.25, 1); /* long settle, no bounce */
  --ease-breathe: cubic-bezier(0.4, 0, 0.6, 1);  /* symmetric, for looping pulses */
  --dur-fast:  .55s;
  --dur-mid:   .95s;
  --dur-slow:  1.6s;
  --dur-cycle: 1.8s;   /* photo crossfade: long enough to read as a dissolve */
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; scroll-snap-type:y proximity; scroll-padding-top:var(--snap-offset); overflow-y:scroll; }
body {
  background:var(--bg); color:var(--text);
  font-family:var(--font-body); font-size:var(--size-body); line-height:1.6;
  -webkit-font-smoothing:antialiased;
  overflow-x:hidden;
}
a { color:inherit; text-decoration:none; }
.skip-link {
  position:fixed; left:var(--space-2); top:var(--space-2); z-index:200;
  translate:0 calc(-100% - var(--space-2));
  padding:var(--space-1) var(--space-2); border:1px solid var(--text);
  border-radius:8px; background:var(--bg); color:var(--text);
  transition:translate var(--dur-fast) var(--ease);
}
.skip-link:focus-visible { translate:0 0; }
.wrap { max-width:var(--maxw); margin:0 auto; padding:0 clamp(24px, 5vw, 96px); position:relative; z-index:2; }

.label {
  font-family:var(--font-mono); font-weight:500; font-size:var(--size-label);
  letter-spacing:0.08em; text-transform:uppercase; color:var(--text-secondary);
}

/* ============ DEPTH LAYER (behind everything) ============ */
.depth { position:fixed; inset:0; z-index:0; pointer-events:none; overflow:hidden; }
/* Desktop: the original drifting washes. Untouched. */
.blob {
  position:absolute; border-radius:50%; will-change:transform;
}
.blob.a {
  width:42vw; height:42vw; left:5vw; top:-8vw;
  background:radial-gradient(circle, rgba(127,160,140,0.30) 0%, rgba(127,160,140,0.13) 45%, transparent 68%);
  animation:driftA 11s ease-in-out infinite alternate;
}
.blob.b {
  width:36vw; height:36vw; right:2vw; top:30vh;
  background:radial-gradient(circle, rgba(216,192,150,0.34) 0%, rgba(216,192,150,0.14) 45%, transparent 70%);
  animation:driftB 14s ease-in-out infinite alternate;
}
.blob.c {
  width:38vw; height:38vw; left:30vw; bottom:-6vw;
  background:radial-gradient(circle, rgba(148,178,184,0.28) 0%, rgba(148,178,184,0.12) 45%, transparent 68%);
  animation:driftC 12s ease-in-out infinite alternate;
}
@keyframes driftA {
  50% { transform:translate(30vw, 12vh) scale(1.15); }
  100% { transform:translate(12vw, 30vh) scale(0.9); }
}
@keyframes driftB {
  50% { transform:translate(-28vw, -8vh) scale(1.2); }
  100% { transform:translate(-10vw, -28vh) scale(0.85); }
}
@keyframes driftC {
  50% { transform:translate(-22vw, -14vh) scale(1.18); }
  100% { transform:translate(18vw, -6vh) scale(0.92); }
}

/* anchored breathing: swell + fade in place, no travel. Mobile only.
   opacity floor stays high so the trough is never fainter than a static blob */
@keyframes blobBreathe {
  0%, 100% { transform:scale(1);    opacity:0.78; }
  50%      { transform:scale(1.16); opacity:1; }
}


/* grain */
.grain {
  position:fixed; inset:0; z-index:1; pointer-events:none; opacity:0.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.6'/%3E%3C/svg%3E");
}


/* ============ TEXT WRAPPING ============
   balance: headings and short blocks - evens out the line lengths
   pretty:  body copy - prevents a single orphan word on the last line
   the embedded product mockups are excluded: their layout is pixel-tuned  */
h1, h2, h3, h4,
.work-title, .tl-role, .cap h3, .section-head h2,
.contact h2, .about-hero h1, .big-mail, .chip, .btn, .label {
  text-wrap: balance;
}
p, .work-desc, .hero-sub, .about-lead, .prose p, .tl-desc, .cap p {
  text-wrap: pretty;
}
.counter-card *, .pool-card *, .zchut-card * { text-wrap: initial; }

/* ============ NAV ============ */
nav {
  position:fixed; top:0; left:0; right:0; z-index:100;
  background:rgba(250,250,248,0.8);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line-strong);
  transition:background .7s ease, border-color .7s ease;
}
nav.scrolled { background:rgba(250,250,248,0.9); }
.nav-inner {
  display:flex; justify-content:space-between; align-items:center;
  padding:16px clamp(24px, 5vw, 96px); max-width:var(--maxw); margin:0 auto;
}
.logo {
  font-family:var(--font-display); font-weight:600; font-size:17px;
  display:inline-flex; align-items:center; min-height:44px;
}
.nav-links { display:flex; gap:var(--space-3); font-size:14px; }
.u-link { position:relative; }
.u-link::after {
  content:""; position:absolute; left:0; bottom:-4px; height:1px; width:100%;
  background:var(--text); transform:scaleX(0); transform-origin:right;
  transition:transform .7s var(--ease);
}
.u-link:hover::after { transform:scaleX(1); transform-origin:left; }

/* ---- BUTTONS: one language for every framed action on the page ---- */
.btn {
  display:inline-flex; align-items:center; gap:8px;
  line-height:1; font-size:14px; color:inherit;
  padding:12px 16px;
  border:1px solid var(--line-strong);
  border-radius:8px;
  transition:border-color .6s ease, background .6s ease;
}
.btn:hover { border-color:var(--text); background:rgba(18,32,25,0.04); }
:where(a, button, [tabindex]):focus-visible {
  outline:2px solid var(--text); outline-offset:4px;
}
/* icon sized to cap height and lifted so its foot lands on the text baseline */
.btn .ico { width:0.78em; height:0.78em; flex-shrink:0; margin-top:-0.09em; }
.btn .arrow { transition:transform .7s var(--ease); }
.btn:hover .arrow { transform:translateX(4px); }
/* compact variant for the nav bar */
.nav-links .btn { padding:8px 16px; }
.nav-links .u-link { padding:8px 0; }

/* current page marker */
.nav-links .u-link.current { color:var(--text); }
.nav-links .u-link.current::after { transform:scaleX(1); transform-origin:left; }
.nav-toggle {
  display:none; width:44px; height:44px; padding:0;
  border:1px solid var(--line-strong); border-radius:8px;
  background:rgba(250,250,248,0.72); color:var(--text);
  align-items:center; justify-content:center; flex-direction:column; gap:4px;
  appearance:none; cursor:pointer;
  transition:border-color .6s ease, background .6s ease;
}
.nav-toggle:hover { border-color:var(--text); background:rgba(18,32,25,0.04); }
.nav-toggle span {
  width:16px; height:2px; border-radius:2px; background:currentColor;
  transition:transform .55s var(--ease), opacity .35s ease;
}
.nav-toggle[aria-expanded="true"] span:nth-child(1) { transform:translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity:0; }
.nav-toggle[aria-expanded="true"] span:nth-child(3) { transform:translateY(-6px) rotate(-45deg); }
.mobile-menu { display:none; }
html.menu-open, body.menu-open { overflow:hidden; }

/* back link at the top of a sub page */
.back-link {
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-mono); font-size:12px; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--text-secondary);
  transition:color .6s ease;
}
.back-link .arrow { transition:transform .7s var(--ease); display:inline-block; }
.back-link:hover { color:var(--text); }
.back-link:hover .arrow { transform:translateX(-4px); }


/* ============ HERO ============ */
.hero {
  min-height:92vh; position:relative;
  display:flex; flex-direction:column; justify-content:center;
  padding-top:96px;
}
.hero-left { position:relative; z-index:2; }

/* ---- orbit: huge asymmetric rings bleeding off-canvas, anchored meta ---- */
.orbit-zone {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 48%;
  height: 100%;
  z-index: 1;
  opacity: 0;
  animation: fade 2s ease 1.1s forwards;
}
.orbit-ring {
  position:absolute; border-radius:50%;
  translate:0 var(--orbit-shift, 0px);
  transition:scale 1.2s var(--ease), border-color .9s ease;
}
.orbit-ring.r1 {
  width:110vh; height:110vh; right:-45vh; top:-25vh;
  border:2px solid rgba(18,32,25,0.16); border-top-color:transparent;
  animation:orbitSpin 34s linear infinite;
}
.orbit-ring.r2 {
  width:58vh; height:58vh; right:-8vh; top:6vh;
  border:2px solid rgba(18,32,25,0.13); border-bottom-color:transparent;
  animation:orbitSpin 22s linear infinite reverse;
}
.orbit-ring.r3 {
  width:30vh; height:30vh; right:8vh; top:24vh;
  border:2.5px solid rgba(18,32,25,0.20); border-right-color:transparent;
  animation:orbitSpin 14s linear infinite;
}
@keyframes orbitSpin { to { rotate:360deg; } }
.orbit-zone:hover .orbit-ring { border-color:rgba(18,32,25,0.28); }
.orbit-zone:hover .orbit-ring.r1 { border-top-color:transparent; }
.orbit-zone:hover .orbit-ring.r2 { border-bottom-color:transparent; }
.orbit-zone:hover .orbit-ring.r3 { border-right-color:transparent; }
.orbit-core {
  position:absolute; right:23vh; top:39vh;
  translate:50% calc(-50% + var(--orbit-shift, 0px));
  display:flex; flex-direction:column; align-items:center; gap:8px;
  text-align:center;
  transition:scale 1.2s var(--ease);
}
.orbit-zone:hover .orbit-core { scale:1.05; }
.orbit-div { width:24px; height:1px; background:var(--line-strong); margin:8px 0; }
h1 { font-size:var(--size-hero); max-width:14em; }
.hero-line {
  display:block; font-family:var(--font-display); font-weight:600;
  font-size:inherit; line-height:1.04; letter-spacing:-0.025em;
}
.hero-line > span { display:block; opacity:0; transform:translateY(24px); animation:riseUp 1.9s var(--ease-out) forwards; }
.hero-line:nth-child(1)>span{animation-delay:.25s}
.hero-line:nth-child(2)>span{animation-delay:.45s}
.hero-line:nth-child(3)>span{animation-delay:.65s}
@keyframes riseUp { to { opacity:1; transform:translateY(0); } }
@keyframes fade { to { opacity:1; } }

.ring-svg {
  display:inline-block; width:0.24em; height:0.24em; margin-left:0.13em; overflow:visible;
  animation:markSpin 16s linear 3.6s infinite;
}
.ring-svg circle {
  fill:none; stroke:var(--text); stroke-width:14;
  stroke-dasharray:283; stroke-dashoffset:283;
  transform:rotate(-90deg); transform-origin:center;
  animation:draw 1.9s var(--ease-out) 1.9s forwards,
            ringBreathe 5.5s ease-in-out 3.2s infinite;
}
@keyframes draw { to { stroke-dashoffset:26; } }
@keyframes markSpin { to { rotate:360deg; } }
@keyframes ringBreathe {
  0%, 100% { stroke:var(--text); stroke-width:14; }
  45%, 55% { stroke:var(--ring-accent, #2F8F72); stroke-width:17; }
}

.hero-sub {
  margin-top:var(--space-4); font-size:19px; line-height:1.6;
  color:var(--text-secondary); max-width:32em;
  opacity:0; animation:fade 1.8s ease 1.5s forwards;
}
/* ============ SCROLL RAIL (vertical progress axis) ============ */
.rail {
  position:fixed; left:clamp(20px,2.6vw,40px); top:50%; translate:0 -50%;
  height:min(76vh,760px); width:24px; z-index:90; pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  opacity:0; animation:fade 1.8s ease 2.4s forwards;
}
.rail-track {
  position:relative; flex:1; width:1px; background:var(--line-strong);
}
.rail-fill {
  position:absolute; top:0; left:0; width:100%; height:0;
  background:var(--text); transition:height .25s ease-out;
}
.rail-tick {
  position:absolute; left:50%; translate:-50% 0;
  width:8px; height:1px; background:var(--line-strong);
  transition:background .8s ease, width .8s var(--ease);
}
.rail-tick.past { background:var(--text); width:16px; }
.rail-dot {
  position:absolute; left:50%; top:0; translate:-50% -50%;
  /* derived from the hero ring mark so both always match */
  width:calc(var(--size-hero) * 0.25); height:calc(var(--size-hero) * 0.25);
  border-radius:50%;
  border:calc(var(--size-hero) * 0.034) solid var(--text); background:var(--bg);
  transition:top .25s ease-out, scale .8s var(--ease);
}
.rail:has(+ * ) .rail-dot { }
.rail-count {
  margin-top:16px; font-family:var(--font-mono); font-size:10px;
  letter-spacing:0.08em; color:var(--text-secondary); white-space:nowrap;
}
@media (max-width:1100px) { .rail { display:none; } }

.scroll-hint {
  margin-top:var(--space-4); display:inline-flex; align-items:center; gap:8px;
  opacity:0; animation:fade 1.6s ease 2.2s forwards;
}
.scroll-hint .tick { width:1px; height:32px; background:var(--line-strong); overflow:hidden; position:relative; }
.scroll-hint .tick::after {
  content:""; position:absolute; left:0; top:-100%; width:100%; height:100%;
  background:var(--text); animation:drip 2.2s var(--ease) infinite;
}
@keyframes drip { 60% { top:100%; } 100% { top:100%; } }

/* ============ SCROLL REVEAL ============ */


/* ============ WORK LIST ============ */
section { padding:var(--section-pad-y) 0; }
/* #work's heading is a .label, not an h2, so it had no anchor and proximity
   snap grabbed the wrong spot when arriving at index.html#work */
.hero, .section-head h2, .contact h2, #work .section-head { scroll-snap-align:start; }
.section-head { margin-bottom:var(--section-head-gap); display:flex; justify-content:space-between; align-items:baseline; }
.section-head h2 {
  font-family:var(--font-display); font-weight:600; font-size:var(--size-h2);
  line-height:1.15; letter-spacing:-0.01em; margin-top:var(--space-1);
}
.list { position:relative; }
.work-row { display:block; border-top:1px solid var(--line); padding:var(--work-row-space-y) 0; position:relative; }
.list .work-row:last-of-type { border-bottom:1px solid var(--line); }
.row-top { display:flex; justify-content:space-between; align-items:baseline; gap:var(--space-3); margin-bottom:var(--space-1); }
.work-title {
  font-family:var(--font-display); font-weight:600; font-size:var(--size-work);
  line-height:1.05; letter-spacing:-0.02em;
  transition:transform .9s var(--ease), opacity .7s ease;
}
.work-row:hover .work-title { transform:translateX(16px); }
.list:hover .work-row:not(:hover) .work-title { opacity:0.35; }
.work-meta { white-space:nowrap; }
.work-desc {
  color:var(--text-secondary); max-width:34em; margin-top:var(--space-2);
  font-size:15.5px;
}
.row-grid { display:grid; grid-template-columns:1fr 1.05fr; gap:var(--space-4); align-items:center; }
/* Alternating rhythm: every second case study puts the visual on the left and the
   text on the right, so the eye does not land in the same place three rows running.
   Done with grid placement, not DOM order - the text stays first in the markup, so
   reading order and tab order are unchanged. Collapses back to one column below 900. */
#worklist .work-row:nth-of-type(even) .row-grid { grid-template-columns:1.05fr 1fr; }
#worklist .work-row:nth-of-type(even) .row-grid > :first-child { grid-column:2; grid-row:1; }
#worklist .work-row:nth-of-type(even) .row-grid > .row-img { grid-column:1; grid-row:1; }
.row-img {
  border-radius:8px; overflow:hidden; border:1px solid var(--line);
  background:#fff; box-shadow:0 20px 48px -28px rgba(18,32,25,0.18);
}
.row-img:not(.is-live) img { width:100%; height:auto; display:block; transform:scale(1.01); transition:transform 1.4s var(--ease); }
.work-row:hover .row-img:not(.is-live) img { transform:scale(1.05); }
/* Studio Hube: stacked shots that crossfade in place. Fixed ratio so the row
   never reflows as the photograph changes. */
.row-img.is-cycle { position:relative; aspect-ratio:16/9; }
.row-img.is-cycle img {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; opacity:0;
  transition:opacity var(--dur-cycle) var(--ease), transform 1.4s var(--ease);
}
.row-img.is-cycle img.on { opacity:1; }
.work-row:hover .row-img.is-cycle img.on { transform:scale(1.05); }
/* inside a fully-clickable row the affordance is typographic, never a button */
/* הגדרת המכולה של הקישור והטקסט */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.6s ease;
}

./* הגדרת המכולה של הקישור והטקסט */
.cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: var(--space-3);
  line-height: 1;
  font-size: 14px;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color 0.6s ease;
}

.cta-link-text {
  position: relative;
  display: inline-block;
  padding-bottom: 2px;
  overflow: hidden;
}

/* הקו התחתון במצב רגיל (Default) */
.cta-link-text::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 1px;
  background-color: currentColor;
}

/* האנימציה של הקו */
@keyframes underline-slide {
  0% {
    transform: translateX(-101%);
  }
  100% {
    transform: translateX(101%);
  }
}

/* הפעלת האנימציה בלולאה בלתי פוסקת בזמן Hover */
.work-row:hover .cta-link-text::after {
  animation: underline-slide 1.2s infinite linear;
}
.work-row:hover .cta { color:var(--text); }
.work-row:hover .cta::after { transform:scaleX(1); }
.cta .arrow { transition:transform .7s var(--ease); }
.work-row:hover .cta .arrow { transform:translateX(5px); }
#beyondlist .cta { font-size:13px; margin-top:var(--space-2); }

/* ============ CONTACT ============ */
.contact h2 {
  font-family:var(--font-display); font-weight:600;
  font-size:var(--size-display); line-height:1.06; letter-spacing:-0.025em;
  max-width:13em;
}
.big-mail {
  display:inline-block; margin-top:var(--space-4);
  font-family:var(--font-display); font-weight:600; font-size:clamp(22px, 2.6vw, 36px);
  border-bottom:2px solid var(--text); padding-bottom:8px;
  transition:color .7s ease, border-color .7s ease;
}
.big-mail:hover { color:var(--text-secondary); border-color:var(--text-secondary); }
.contact-links { display:flex; gap:var(--space-2); margin-top:var(--space-4); align-items:center; }
.contact-links .btn { font-size:15px; padding:16px 24px; }

footer { padding:var(--space-4) 0 var(--space-3); display:flex; justify-content:space-between; position:relative; }
/* full-bleed divider: spans the whole viewport, not just the content column */
footer::before {
  content:""; position:absolute; top:0; left:50%; translate:-50% 0;
  width:100vw; height:1px; background:var(--line);
}


/* ============ EMBEDDED PROJECT COMPONENTS ============ */
.row-img.is-live { background:transparent; border:none; box-shadow:none; overflow:visible; }

/* ---- Signal counter card ---- */
.counter-card {
  --cc-bg:#1a1f2e; --cc-title:#6b7280; --cc-status:#d1d5db; --cc-counter:#f59e0b;
  --cc-max:#6b7280; --cc-stats:#9ca3af; --cc-change:#ef4444; --cc-bar-h:6px;
  --cc-ease:var(--ease-out);
  container-type:inline-size; width:100%;
  display:flex; flex-direction:column; gap:clamp(10px,4cqi,16px);
  background:var(--cc-bg); border-radius:8px; padding:clamp(14px,5cqi,20px);
  font-family:var(--font-body);
  box-shadow:0 10px 30px rgba(0,0,0,0.3);
  transition:translate .5s var(--cc-ease), box-shadow .5s var(--cc-ease);
}
.work-row:hover .counter-card { translate:0 -8px; box-shadow:0 20px 60px rgba(0,0,0,0.5); }
.cc-title { font-size:clamp(9px,2.6cqi,10px); font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--cc-title); }
.cc-main { display:flex; align-items:center; justify-content:space-between; gap:20px; }
.cc-status { font-size:clamp(13px,3.9cqi,15px); color:var(--cc-status); }
.cc-pctl { font-size:clamp(11px,3.4cqi,13px); color:var(--cc-status); opacity:.6; }
.cc-nums { display:flex; align-items:baseline; gap:4px; font-family:var(--font-mono); }
.cc-value { font-size:clamp(50px,21cqi,84px); font-weight:600; line-height:1; color:var(--cc-counter); letter-spacing:-0.02em; }
.cc-max { font-size:clamp(21px,7cqi,28px); line-height:1; color:var(--cc-max); }
.cc-bar { height:var(--cc-bar-h); border-radius:calc(var(--cc-bar-h)/2); background:rgba(42,47,62,.4); border:1px solid rgba(255,255,255,.05); overflow:hidden; }
.cc-bar-fill { height:100%; width:0; border-radius:inherit; background:linear-gradient(to right,#22cc66 0%,#ffbb00 50%,#ff5588 100%); box-shadow:0 0 20px rgba(245,166,35,.4); transition:width .08s linear; }
.cc-stats { display:flex; align-items:center; gap:10px; flex-wrap:wrap; font-family:var(--font-mono); font-size:clamp(10px,3.1cqi,12px); color:var(--cc-stats); }
.cc-stats .dot { opacity:.5; } .cc-stats .change { color:var(--cc-change); }

/* ---- Pool card ---- */
.pool-card {
  --pc-panel:rgba(15,15,15,.82); --pc-row:rgba(25,25,25,.55); --pc-stroke:rgba(255,255,255,.12);
  --pc-text:#fff; --pc-text-dim:rgba(255,255,255,.55); --pc-yes:#5CC97C; --pc-brand:#7c4dff;
  --pc-radius:18px; --pc-ease:var(--ease-out);
  container-type:inline-size; position:relative; overflow:hidden; border-radius:8px;
  aspect-ratio:4/3;
  background:linear-gradient(150deg,#8a9a72 0%,#6d7d64 40%,#3d4740 100%);
  font-family:var(--font-body); box-shadow:0 8px 24px rgba(0,0,0,.15);
  transition:translate .5s var(--pc-ease), box-shadow .5s var(--pc-ease);
}
.work-row:hover .pool-card { translate:0 -8px; box-shadow:0 20px 60px rgba(0,0,0,.35); }
.pc-bg { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; object-position:center 35%; z-index:0; }
/* panels hug the left edge, slightly overlapping, photo breathes on the right */
.pc-stack {
  position:absolute; z-index:1; left:clamp(10px,3cqi,20px); top:50%;
  display:flex; flex-direction:column; align-items:flex-start;
  gap:8px; width:200px;
  transform-origin:left center;
  translate:0 -50%;
}
.pc-panel {
  width:200px; background:var(--pc-panel);
  backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px);
  border:1px solid var(--pc-stroke); border-radius:var(--pc-radius);
  box-shadow:0 12px 40px rgba(0,0,0,.45), 0 0 24px rgba(124,77,255,.14);
  opacity:0; transition:opacity 1.3s ease, translate 1.3s var(--ease-out);
}
.pool-card.in .pc-panel { opacity:1; translate:0 0; }
.pc-goal {
  border-radius:30px; padding:8px 14px;
  display:flex; align-items:center; gap:8px; width:auto; translate:0 -10px;
  margin-left:clamp(4px,1.5cqi,10px);
}
.pc-goal .mark { width:16px; height:16px; border-radius:50%; border:2px solid var(--pc-brand); flex-shrink:0; }
.pc-goal .name { font-size:13px; font-weight:600; color:var(--pc-text); letter-spacing:-0.01em; white-space:nowrap; }
.pc-members { padding:14px; translate:-20px 10px; transition-delay:.12s; }
.pc-title { font-size:13px; font-weight:600; color:var(--pc-text); text-align:center; letter-spacing:-0.01em; }
.pc-sub { font-size:10px; color:var(--pc-text-dim); text-align:center; line-height:1.4; margin:3px 0 9px; }
.pc-tabs { display:flex; gap:5px; justify-content:center; margin-bottom:8px; }
.pc-tab { display:flex; align-items:center; gap:4px; padding:3px 10px; border-radius:20px; font-size:9px; font-weight:500; white-space:nowrap; }
.pc-tab.yes { border:1px solid var(--pc-yes); background:rgba(92,201,124,.10); color:var(--pc-yes); }
.pc-tab.no { border:1px solid rgba(255,149,0,.4); background:rgba(255,149,0,.08); color:rgba(255,149,0,.8); }
.pc-row { display:flex; align-items:center; gap:8px; padding:7px 10px; background:var(--pc-row); border-radius:10px; opacity:0; translate:-8px 0; transition:opacity .8s ease, translate .8s var(--ease-out); }
.pc-row + .pc-row { margin-top:5px; }
.pool-card.in .pc-row { opacity:1; translate:0 0; }
.pool-card.in .pc-row:nth-child(1){transition-delay:.45s}
.pool-card.in .pc-row:nth-child(2){transition-delay:.62s}
.pool-card.in .pc-row:nth-child(3){transition-delay:.79s}
.pool-card.in .pc-row:nth-child(4){transition-delay:.96s}
.pc-avatar { width:28px; height:28px; border-radius:50%; overflow:hidden; flex-shrink:0; background:#2a2a2a; display:grid; place-items:center; font-size:11px; font-weight:600; color:rgba(255,255,255,.5); }
.pc-name { flex:1; font-size:12px; font-weight:500; color:var(--pc-text); }
.pc-status svg { width:16px; height:16px; }
.pc-amount { font-size:12px; font-weight:600; min-width:34px; text-align:right; color:var(--pc-text); }
.pc-row[data-contributed="false"] .pc-amount { color:var(--pc-text-dim); }
.pc-progress { padding:16px 14px; display:flex; flex-direction:column; align-items:center; translate:18px 16px; transition-delay:.32s; }
.pc-ring { width:96px; height:auto; }
.pc-ring circle.track { stroke:rgba(255,255,255,.10); }
.pc-ring circle.fill { stroke:url(#pcGrad); stroke-linecap:round; transform:rotate(-90deg); transform-origin:58px 58px; transition:stroke-dashoffset 1.7s var(--ease-out) .5s; }
.pc-pct { font-size:24px; font-weight:700; fill:var(--pc-text); }
.pc-total { font-size:10px; color:var(--pc-text-dim); text-align:center; line-height:1.4; margin-top:8px; opacity:0; transition:opacity .9s ease 1.1s; }
.pool-card.in .pc-total { opacity:1; }

/* ---- Zchut-AI floating chat ---- */
.zchut-card {
  --zc-accent:#0D9488; --zc-navy:#0A2540; --zc-sec:#406185;
  --zc-shadow:0 18px 40px -12px rgba(10,37,64,.22), 0 4px 12px -4px rgba(10,37,64,.10);
  position:relative; width:100%; aspect-ratio:1/1; overflow:hidden;
  direction:rtl; font-family:"Assistant","Segoe UI",sans-serif;
}
.zc-stage {
  position:absolute; top:50%; left:50%; width:560px; height:560px;
  translate:-50% -50%; transform-origin:center;
}
/* the product screen the conversation floats over.
   Sits under the bubbles (z 0/1 vs 2/3) and is veiled so they stay the subject. */
.zc-glow {
  position:absolute; left:50%; top:50%; translate:-50% -50%;
  width:420px; height:420px; border-radius:50%; z-index:0;
  background:radial-gradient(circle, rgba(13,148,136,0.18) 0%, rgba(13,148,136,0.07) 45%, transparent 70%);
  filter:blur(28px);
}
.zc-phone {
  position:absolute; left:50%; top:50%; translate:-50% -50%; z-index:1;
  width:188px; aspect-ratio:1572/3408;   /* true device ratio (0.461). same rendered height as the old crop, correct proportions */
  border-radius:26px; overflow:hidden; background:#fff;
  border:1px solid rgba(10,37,64,0.10);
  /* the card clips at its own edge, so the drop shadow has to land inside it.
     48+90 reached past the bottom and got sliced into a straight line. */
  box-shadow:0 34px 66px -26px rgba(10,37,64,0.34), var(--zc-shadow);
  animation:zcPhoneFloat calc(9s * var(--zchut-time-scale)) ease-in-out infinite alternate;
}
.zc-phone img { width:100%; height:100%; object-fit:cover; object-position:top center; display:block; }
.zc-phone::after {
  content:""; position:absolute; inset:0; pointer-events:none;
  background:linear-gradient(180deg, rgba(250,250,248,0.28) 0%, rgba(250,250,248,0.66) 100%);
}
@keyframes zcPhoneFloat { to { translate:-50% calc(-50% - 10px); } }

.zc-float {
  position:absolute; opacity:0; pointer-events:none;
  transition:opacity calc(1.1s * var(--zchut-time-scale)) ease, transform calc(1.2s * var(--zchut-time-scale)) var(--ease-out);
}
.zc-float.on { opacity:1; }
.zc-float .inner { animation:zcFloat calc(var(--dur,5s) * var(--zchut-time-scale)) ease-in-out calc(var(--dly,0s) * var(--zchut-time-scale)) infinite alternate; }
@keyframes zcFloat { to { translate:0 -9px; } }
@keyframes zcDot { 0%,100%{ translate:0 0; opacity:.5 } 50%{ translate:0 -4px; opacity:1 } }

.zc-meta { font-size:12px; color:#101828; padding:0 6px 4px; display:flex; align-items:center; gap:6px; }
.zc-meta.left { justify-content:flex-end; }
.zc-meta i { width:5px; height:5px; border-radius:50%; background:var(--zc-accent); display:inline-block; }
.zc-bubble-user {
  background:#F6F9FC; border:1px solid #E6E8EB; border-radius:20px 20px 4px 20px;
  box-shadow:var(--zc-shadow); padding:7px 18px; font-size:17px; color:#000; width:max-content;
}
.zc-bubble-bot {
  background:#EAF7F5; border:1px solid #D3DBE4; border-radius:20px 20px 20px 4px;
  box-shadow:var(--zc-shadow); padding:12px 18px 14px; width:330px;
}
.zc-bubble-bot .lead { font-size:18px; font-weight:700; color:var(--zc-navy); line-height:1.25; }
.zc-bubble-bot .ask { font-size:16px; color:#000; margin-top:6px; }
.zc-typing {
  display:flex; gap:4px; padding:10px 16px; background:rgba(13,148,136,.10);
  border:1px solid #D3DBE4; border-radius:20px 20px 20px 4px; box-shadow:var(--zc-shadow); width:max-content;
}
.zc-typing span { width:7px; height:7px; border-radius:50%; background:var(--zc-accent); opacity:.6; animation:zcDot calc(1s * var(--zchut-time-scale)) ease-in-out infinite; }
.zc-typing span:nth-child(2){ animation-delay:calc(.15s * var(--zchut-time-scale)) } .zc-typing span:nth-child(3){ animation-delay:calc(.3s * var(--zchut-time-scale)) }
.zc-opts { background:#D1FAE5; border-radius:14px; padding:10px 12px; box-shadow:var(--zc-shadow); width:300px; }
.zc-opts .q { font-size:13.5px; color:var(--zc-sec); padding:0 10px 5px; }
.zc-opt {
  display:flex; align-items:center; gap:8px; padding:6px 10px; border-radius:10px;
  font-size:15.5px; color:var(--zc-sec); opacity:0; translate:0 8px;
  transition:background calc(.7s * var(--zchut-time-scale)) ease, color calc(.7s * var(--zchut-time-scale)) ease, opacity calc(.9s * var(--zchut-time-scale)) ease, translate calc(1s * var(--zchut-time-scale)) var(--ease-out);
}
.zc-opt.on { opacity:1; translate:0 0; }
.zc-opt.picked { background:rgba(13,148,136,.16); color:var(--zc-navy); font-weight:700; }
.zc-opt .box { color:currentColor; display:flex; }
.zc-opt.picked .box { color:var(--zc-accent); }
.zc-result {
  background:#fff; border:1.5px solid var(--zc-accent); border-radius:14px; padding:9px 16px;
  font-size:15.5px; font-weight:700; color:var(--zc-navy); display:flex; align-items:center; gap:9px;
  box-shadow:0 18px 40px -12px rgba(13,148,136,.30); width:max-content;
}
.zc-icon { flex-shrink:0; }
@media (prefers-reduced-motion: reduce) { .zc-float .inner, .zc-typing span { animation:none !important; } }

/* ---- Dan Arad: the shipped site, scrolling inside its own window ----
   The other three cards animate an interface that never launched. This one shows
   a real address bar because that is the single thing none of them can claim. */
.dan-card {
  --dc-chrome:#1C1C1A; --dc-dot:rgba(255,255,255,.22); --dc-url:rgba(255,255,255,.62);
  --dc-live:#5CC97C; --dc-ease:var(--ease-out);
  container-type:inline-size; width:100%; overflow:hidden; border-radius:8px;
  background:var(--dc-chrome); font-family:var(--font-body);
  box-shadow:0 8px 24px rgba(18,32,25,.15);
  transition:translate .5s var(--dc-ease), box-shadow .5s var(--dc-ease);
}
.work-row:hover .dan-card { translate:0 -8px; box-shadow:0 20px 60px rgba(18,32,25,.28); }
.dc-bar { display:flex; align-items:center; gap:clamp(8px,3cqi,16px); padding:clamp(8px,2.4cqi,12px) clamp(12px,3.2cqi,16px); }
.dc-dots { display:flex; gap:6px; flex-shrink:0; }
.dc-dots i { width:8px; height:8px; border-radius:50%; background:var(--dc-dot); }
.dc-addr {
  display:flex; align-items:center; gap:8px; min-width:0;
  padding:4px 12px; border-radius:8px; background:rgba(255,255,255,.07);
  font-family:var(--font-mono); font-size:clamp(9px,2.5cqi,11px); color:var(--dc-url);
  letter-spacing:.02em; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.dc-addr .live {
  width:6px; height:6px; border-radius:50%; background:var(--dc-live); flex-shrink:0;
  animation:dcPulse 2.8s var(--ease-breathe) infinite;
}
@keyframes dcPulse { 50% { opacity:.35; } }
.dc-viewport { position:relative; aspect-ratio:16/10; overflow:hidden; background:#F4F1EA; }
.dc-viewport img { width:100%; height:100%; object-fit:cover; object-position:50% 0%; display:block; }
/* the pan reads as someone scrolling the page, so it is slow and eases at both
   ends. Started by the observer below, never while the row is off screen. */
.dan-card.in .dc-viewport img { animation:dcScroll 38s var(--ease-breathe) infinite alternate; }
@keyframes dcScroll { to { object-position:50% 100%; } }
@media (prefers-reduced-motion: reduce) {
  .dan-card.in .dc-viewport img, .dc-addr .live { animation:none !important; }
}

/* ============ BEYOND: secondary weight ============ */
#beyondlist { display:grid; grid-template-columns:1fr 1fr; gap:var(--space-3); }
#beyondlist .work-row {
  border:1px solid var(--line); border-top:1px solid var(--line);
  border-radius:8px; padding:var(--space-3);
  background:rgba(255,255,255,0.35);
  transition:border-color .9s ease, background .9s ease, translate .9s var(--ease);
}
#beyondlist .work-row:last-of-type { border-bottom:1px solid var(--line); }
#beyondlist .work-row:hover { border-color:var(--line-strong); background:rgba(255,255,255,0.6); translate:0 -3px; }
#beyondlist .row-grid { display:flex; flex-direction:column-reverse; gap:var(--space-2); align-items:stretch; }
#beyondlist .work-title {
  font-size:clamp(20px,1.9vw,26px); letter-spacing:-0.015em;
}
#beyondlist .work-row:hover .work-title { transform:none; }
#beyondlist .work-desc { font-size:14.5px; max-width:none; }
#beyondlist .row-img { aspect-ratio:16/9; }
#beyondlist .row-img img,
#beyondlist .row-img video { width:100%; height:100%; object-fit:cover; display:block; }
#beyondlist .cta { font-size:11px; }
@media (max-width:900px) { #beyondlist { grid-template-columns:1fr; } }

@media (max-width:900px) {
  .hero { grid-template-columns:1fr; }
  /* the orbit stops being a column and becomes a background layer behind the
     headline. rings measure in vw here, not vh: on a phone the viewport is tall
     and narrow, so vh sizing blew them up to several screens wide. */
  .orbit-zone { width:100%; pointer-events:none; z-index:0; }
  /* lighter than desktop: here the rings pass behind the headline instead of
     sitting in their own column, so they have to stay under the text */
  .orbit-ring.r1 { width:150vw; height:150vw; right:-70vw; top:-46vw; border-width:1.5px; border-color:rgba(18,32,25,0.11); border-top-color:transparent; }
  .orbit-ring.r2 { width:88vw;  height:88vw;  right:-30vw; top:-6vw;  border-width:1.5px; border-color:rgba(18,32,25,0.09); border-bottom-color:transparent; }
  .orbit-ring.r3 { width:42vw;  height:42vw;  right:4vw;   top:54vw;  border-width:2px;   border-color:rgba(18,32,25,0.14); border-right-color:transparent; }
  /* the meta used to disappear with the rings. it is content, not decoration,
     so it moves to the bottom-right corner opposite the scroll hint. */
  .orbit-core {
    right:clamp(16px, 5vw, 24px); top:auto; bottom:0;
    translate:0 0; align-items:flex-end; text-align:right; gap:4px;
  }
  .orbit-div { margin:4px 0; }
  .row-grid { grid-template-columns:1fr; gap:var(--space-3); }
  /* single column: undo the alternating placement so the flipped row does not
     create a phantom second column */
  #worklist .work-row:nth-of-type(even) .row-grid { grid-template-columns:1fr; }
  #worklist .work-row:nth-of-type(even) .row-grid > :first-child,
  #worklist .work-row:nth-of-type(even) .row-grid > .row-img { grid-column:1; grid-row:auto; }
  .work-meta { display:none; }

  .list:hover .work-row:not(:hover) .work-title { opacity:1; }
}
@media (max-width:700px) {
  :root {
    --size-hero:32px;
    --work-row-space-y:40px;
    --section-pad-y:48px;
    --section-head-gap:var(--space-3);
    --text-secondary:#565F5A;   /* keeps AA contrast over the stronger washes */
  }
  /* Background washes, mobile only. On a phone the desktop drift travels ~30vw,
     which reads as a spot sliding across the screen, so anchor them instead and
     raise the chroma so they read as coloured light rather than a grey smudge. */
  .blob {
    will-change:transform, opacity;
    transform-origin:50% 50%;
    /* long multi-stop falloff + blur: a light wash, never a hard-edged ball */
    filter:blur(32px);
    background:radial-gradient(circle,
      rgba(var(--blob-rgb), 0.80) 0%,
      rgba(var(--blob-rgb), 0.56) 28%,
      rgba(var(--blob-rgb), 0.27) 55%,
      rgba(var(--blob-rgb), 0.08) 78%,
      transparent 100%);
  }
  /* must match .blob.a specificity to beat the desktop drift animation */
  .blob.a, .blob.b, .blob.c {
    animation:blobBreathe var(--blob-dur, 10s) var(--ease-breathe) var(--blob-dly, 0s) infinite;
  }
  .blob.a {
    --blob-dur:10s; --blob-dly:0s; --blob-rgb:var(--blob-a);
    width:64vw; height:64vw; left:-12vw; top:-18vw;
  }
  .blob.b {
    --blob-dur:13s; --blob-dly:-3.5s; --blob-rgb:var(--blob-b);
    width:58vw; height:58vw; right:-16vw; top:24vh;
  }
  .blob.c {
    --blob-dur:11.5s; --blob-dly:-7s; --blob-rgb:var(--blob-c);
    width:62vw; height:62vw; left:18vw; bottom:-20vw;
  }

  .row-grid { gap:var(--space-2); }
  #beyondlist { gap:var(--space-2); }
  .hero { min-height:auto; padding-bottom:var(--space-4); }
  .hero-line > span { white-space:nowrap; }
  .nav-inner { padding:12px clamp(16px, 5vw, 24px); }
  .nav-links { display:none; }
  .nav-toggle { display:inline-flex; }
  .mobile-menu {
    display:flex; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; gap:0;
    padding:var(--space-2) clamp(16px, 5vw, 24px) var(--space-3);
    min-height:calc(100vh - 64px);
    background:var(--bg);
    border-bottom:1px solid var(--line-strong);
    backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
    opacity:0; visibility:hidden; pointer-events:none;
    transform:translateY(-8px);
    transition:opacity .35s ease, transform .45s var(--ease), visibility 0s linear .45s;
  }
  nav.is-open .mobile-menu {
    opacity:1; visibility:visible; pointer-events:auto; transform:none;
    transition-delay:0s;
  }
  .mobile-menu a {
    min-height:56px; display:flex; align-items:center; justify-content:space-between;
    border-bottom:1px solid var(--line);
    font-family:var(--font-display); font-size:32px; font-weight:600; line-height:1;
  }
  .mobile-menu a.current::after {
    content:""; width:16px; height:2px; border-radius:2px; background:var(--text); flex-shrink:0;
  }
  .mobile-menu-actions {
    display:grid; grid-template-columns:1fr 1fr; gap:var(--space-2); margin-top:var(--space-2);
  }
  .mobile-menu-actions a {
    min-height:48px; justify-content:center;
    border:1px solid var(--line-strong); border-radius:8px;
    font-family:var(--font-body); font-size:15px; font-weight:400;
  }
}
@media (max-width:360px) {
  :root { --size-hero:28px; }
  .wrap { padding:0 var(--space-2); }
}
@media (max-width:340px) {
  :root { --size-hero:26px; }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; scroll-snap-type:none; }
  *, *::before, *::after { animation:none !important; transition:none !important; }
  .orbit-zone, .hero-line > span, .hero-sub, .scroll-hint, .rail { opacity:1; }
  .hero-line > span { transform:none; }
}

/* ============ CONTACT + FOOTER: inverted terminal panel ============
   The page is a long light scroll; this dark block gives it a definite
   ending and makes the email the brightest thing on the page. The washes
   are re-cast as glows, which is what light-on-dark actually is. */
:root {
  --contact-bg:      #0E1A14;
  --contact-ink:     #F4F6F2;
  --contact-ink-dim: rgba(244, 246, 242, 0.66);
  --contact-line:    rgba(244, 246, 242, 0.28);
}
.contact, footer { position:relative; }
/* full-bleed: spans the viewport, not just the content column */
.contact::before, footer::after {
  content:""; position:absolute; z-index:-1;
  top:0; bottom:0; left:50%; translate:-50% 0; width:100vw;
  background:var(--contact-bg);
}
.contact::before {
  background:
    radial-gradient(58% 68% at 78% 30%, rgba(216, 192, 150, 0.20), transparent 70%),
    radial-gradient(54% 64% at 12% 76%, rgba(127, 160, 140, 0.18), transparent 72%),
    var(--contact-bg);
}
.contact { color:var(--contact-ink); }
.contact h2 { color:var(--contact-ink); }
.big-mail { color:var(--contact-ink); border-bottom-color:var(--contact-ink); }
.big-mail:hover { color:var(--contact-ink-dim); border-bottom-color:var(--contact-ink-dim); }
.contact .btn { color:var(--contact-ink); border-color:var(--contact-line); }
.contact .btn:hover { border-color:var(--contact-ink); background:rgba(244, 246, 242, 0.10); }
footer { color:var(--contact-ink-dim); }
footer::before { background:var(--contact-line); }
footer .label { color:var(--contact-ink-dim); }