/* ==========================================================================
   KV . production front-end foundation  (assets/kv/kv.css)
   One file for every public page. Built from the locked design system
   (lab/look/tokens.css + components.css, intensity SITE) and the locked
   site mockup (lab/look/site), plus Karan's 26 Oct feedback:
   full-bleed layouts, old-site name echo + cursor + nav roll, stepped pills,
   slow ticker, shake-free tile video, extruded "Let's work together".

   Load order on every page:
     <link rel="stylesheet" href="/assets/kv/kv.css">
     <script defer src="/assets/kv/kv.js"></script>
   plus the inline head snippet (kv-js gate) and the font links. See demo.html.

   Rules: public tokens only below the token block, house curve everywhere,
   hover effects only on (hover:hover) and (pointer:fine), reduced motion
   collapses every duration (token block) and stops every loop (end of file).
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 . TOKENS  (site intensity only)
   -------------------------------------------------------------------------- */
:root {
  /* primitives (private: never reference --p-* outside this block) */
  --p-ink-0: #06060c; --p-ink-1: #101016; --p-ink-2: #16161e; --p-ink-3: #1d1d27; --p-ink-4: #262632;
  --p-paper-0: #f4f4f6; --p-paper-1: #b4b4be; --p-paper-2: #8a8a94; --p-paper-3: #4a4a54; --p-white: #ffffff;
  --p-blue-300: #7b93ff; --p-blue-400: #3352ff; --p-blue-500: #2a4dff; --p-blue-600: #2238c9;
  --p-blue-700: #16277d; --p-blue-800: #0c1858; --p-blue-900: #070f3a;
  --p-green-400: #3ddc97; --p-amber-400: #ffb547; --p-red-400: #ff6b6b;
  --p-hair-10: rgba(244, 244, 246, .10); --p-hair-18: rgba(244, 244, 246, .18);
  --p-hair-40: rgba(244, 244, 246, .40); --p-hair-52: rgba(244, 244, 246, .52);
  --p-blue-a12: rgba(42, 77, 255, .12);
  --p-white-a04: rgba(244, 244, 246, .04); --p-white-a06: rgba(244, 244, 246, .06); --p-white-a10: rgba(244, 244, 246, .10);
  --p-font-clash: "Clash Display", "Switzer", system-ui, sans-serif;
  --p-font-switzer: "Switzer", system-ui, -apple-system, "Segoe UI", sans-serif;
  --p-font-geist: "Geist Mono", ui-monospace, "SF Mono", Consolas, monospace;
  --p-ext-step: max(2px, .03em);

  /* colour: surfaces */
  --color-bg: var(--p-ink-0);
  --color-surface-1: var(--p-ink-1);
  --color-surface-2: var(--p-ink-2);
  --color-surface-3: var(--p-ink-3);
  --color-surface-press: var(--p-ink-4);
  --color-scrim: rgba(4, 4, 10, .78);
  --color-band: var(--p-blue-500);
  /* colour: text */
  --color-text: var(--p-paper-0);
  --color-text-secondary: var(--p-paper-1);
  --color-text-tertiary: var(--p-paper-2);
  --color-text-disabled: var(--p-paper-3);
  --color-text-accent: var(--p-blue-300);
  --color-text-on-accent: var(--p-white);
  --color-text-on-status: var(--p-ink-0);
  --color-text-danger: var(--p-red-400);
  /* colour: lines */
  --color-border: var(--p-hair-10);
  --color-border-strong: var(--p-hair-18);
  --color-border-control: var(--p-hair-40);
  --color-border-hover: var(--p-hair-52);
  /* colour: accent + states */
  --color-accent: var(--p-blue-500);
  --color-accent-hover: var(--p-blue-400);
  --color-accent-active: var(--p-blue-600);
  --color-accent-line: var(--p-blue-300);
  --color-hover: var(--p-white-a06);
  --color-active: var(--p-white-a10);
  --color-selected: var(--p-blue-a12);
  --color-focus: var(--p-blue-300);
  --color-live: var(--p-green-400);
  --color-danger: var(--p-red-400);
  --color-disabled-bg: var(--p-white-a04);
  --color-disabled-line: var(--p-hair-10);
  /* blue ramp (front to back) for extrusions and stepped layers */
  --blue-1: var(--p-blue-500);
  --blue-2: var(--p-blue-600);
  --blue-3: var(--p-blue-700);
  --blue-4: var(--p-blue-800);
  --blue-5: var(--p-blue-900);
  /* frame-adjacent */
  --frame-surround: #000;
  --frame-ring-focus: var(--p-blue-300);

  /* type */
  --font-display: var(--p-font-clash);
  --font-ui: var(--p-font-switzer);
  --font-data: var(--p-font-geist);
  --display-word-spacing: .1em;
  --text-display-size: clamp(40px, 8.2vw, 148px);
  --text-display-lh: .9;
  --text-display-weight: 700;
  --text-display-track: -.01em;
  --text-headline-size: clamp(32px, 7vw, 104px);
  --text-headline-lh: .92;
  --text-headline-weight: 600;
  --text-title-size: clamp(24px, 4vw, 56px);
  --text-title-lh: .98;
  --text-title-weight: 500;
  --text-heading-size: 24px;
  --text-heading-lh: 1.15;
  --text-heading-weight: 500;
  --text-lead-size: 18px;
  --text-lead-lh: 1.55;
  --text-body-size: 15px;
  --text-body-lh: 1.6;
  --text-control-size: 15px;
  --text-control-weight: 500;
  --text-label-size: 11px;
  --text-label-track: .14em;
  --text-label-weight: 500;
  --text-data-size: 13px;
  --measure: 64ch;

  /* space */
  --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px;
  --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-20: 80px; --space-24: 96px; --space-32: 128px;
  /* full-bleed layout: sections run edge to edge, text keeps these gutters (no max-width box) */
  --kv-gutter: clamp(16px, 3.4vw, 96px);
  --gutter: var(--kv-gutter);
  --section-gap: clamp(80px, 9vw, 160px);
  --kv-hdr-h: 72px;

  /* radius */
  --radius-control: 999px;
  --radius-field: 8px;
  --radius-panel: 12px;
  --radius-dialog: 16px;
  --radius-media: 4px;

  /* borders + focus */
  --border-width: 1px;
  --focus-ring-width: 2px;
  --focus-ring-offset: 2px;
  --focus-ring-color: var(--color-focus);

  /* elevation */
  --elev-3: inset 0 1px 0 var(--p-white-a06), 0 24px 56px -16px rgba(2, 2, 8, .8), 0 2px 6px rgba(2, 2, 8, .5);

  /* extrusion: stepped solid layers receding bottom-left, each a shade darker */
  --extrude-text-1: calc(-1 * var(--p-ext-step)) var(--p-ext-step) 0 var(--p-blue-500);
  --extrude-text-2: var(--extrude-text-1), calc(-2 * var(--p-ext-step)) calc(2 * var(--p-ext-step)) 0 var(--p-blue-600);
  --extrude-text-3: var(--extrude-text-2), calc(-3 * var(--p-ext-step)) calc(3 * var(--p-ext-step)) 0 var(--p-blue-700);
  --extrude-text-4: var(--extrude-text-3), calc(-4 * var(--p-ext-step)) calc(4 * var(--p-ext-step)) 0 var(--p-blue-800);
  --extrude-text-5: var(--extrude-text-4), calc(-5 * var(--p-ext-step)) calc(5 * var(--p-ext-step)) 0 var(--p-blue-900);
  --extrude-box-1: -2px 2px 0 var(--p-blue-600);
  --extrude-box-2: var(--extrude-box-1), -4px 4px 0 var(--p-blue-700);
  --extrude-box-3: var(--extrude-box-2), -6px 6px 0 var(--p-blue-800);
  --extrude-box-4: var(--extrude-box-3), -8px 8px 0 var(--p-blue-900);
  --extrude-display: var(--extrude-text-4);

  /* grain */
  --grain-opacity: .06;
  --grain-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* motion */
  --ease-house: cubic-bezier(.2, .7, .2, 1);
  --ease-exit: cubic-bezier(.55, 0, .75, .3);
  --motion-press: 120ms;
  --motion-hover: 400ms;
  --motion-enter: 650ms;
  --motion-exit: 400ms;
  --motion-reveal: 1000ms;
  --motion-stagger: 60ms;
  --motion-distance: 24px;
  --motion-roll: 420ms;          /* old-site nav roll */
  --motion-step: 30ms;           /* pill layers step out one frame apart */
  --kv-extrude-frame: 40ms;      /* "Let's work together" build: one 24fps frame per layer (read by kv.js) */
  --tile-video-fade: 320ms;

  /* z */
  --z-raised: 1; --z-sticky: 100; --z-header: 200; --z-overlay: 400; --z-dialog: 500; --z-toast: 600; --z-tooltip: 700; --z-cursor: 900;

  /* component */
  --btn-h: 48px;
  --btn-h-sm: 36px;
  --chip-h: 24px;
  --skeleton-bg: var(--color-surface-2);
  --skeleton-hi: var(--color-surface-3);
  --icon-size: 16px;
  --duo-hi: color-mix(in srgb, var(--color-accent) 52%, black);
  --duo-lo: color-mix(in srgb, var(--color-accent) 30%, black);
  --hdr-bg: color-mix(in srgb, var(--color-bg) 82%, transparent);
  --on-media: rgba(244, 244, 246, .84);
}

/* reduced motion: every duration token collapses, every consumer inherits it */
@media (prefers-reduced-motion: reduce) {
  :root {
    --motion-press: 0ms; --motion-hover: 0ms; --motion-enter: 0ms; --motion-exit: 0ms; --motion-reveal: 0ms;
    --motion-stagger: 0ms; --motion-distance: 0px; --motion-roll: 0ms; --motion-step: 0ms; --tile-video-fade: 0ms;
  }
}
[data-motion="reduce"] {
  --motion-press: 0ms; --motion-hover: 0ms; --motion-enter: 0ms; --motion-exit: 0ms; --motion-reveal: 0ms;
  --motion-stagger: 0ms; --motion-distance: 0px; --motion-roll: 0ms; --motion-step: 0ms; --tile-video-fade: 0ms;
}

/* --------------------------------------------------------------------------
   1 . BASE + LAYOUT PRIMITIVES (full bleed)
   -------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--color-bg); color-scheme: dark;
  scroll-behavior: smooth; scroll-padding-top: calc(var(--kv-hdr-h) + var(--space-4));
  -webkit-text-size-adjust: 100%; text-size-adjust: 100%;
}
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }
body, .kv-body-root {
  margin: 0; min-height: 100vh; overflow-x: clip;
  background: var(--color-bg); color: var(--color-text);
  font-family: var(--font-ui); font-size: var(--text-body-size); line-height: var(--text-body-lh);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
img, video { display: block; max-width: 100%; }
a { color: inherit; }
button { font: inherit; color: inherit; }
::selection { background: var(--color-accent); color: var(--color-text-on-accent); }
:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: var(--focus-ring-offset); }
.kv-sr { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; }
.kv-skip { position: fixed; left: var(--space-4); top: var(--space-4); z-index: var(--z-tooltip); transform: translateY(-200%); }
.kv-skip:focus-visible { transform: none; }

/* edge to edge: .kv-wrap only adds gutters, never a max-width */
.kv-wrap { width: 100%; padding-inline: var(--kv-gutter); }
.kv-bleed { width: 100%; padding-inline: 0; }
.kv-measure { max-width: var(--measure); }
.kv-section { position: relative; padding-block: var(--section-gap); }
.kv-section--rule { border-top: var(--border-width) solid var(--color-border); }
.kv-section--tight { padding-block: clamp(48px, 5vw, 96px); }
main { display: block; }
@media (hover: none) { .kv-hover-only { display: none; } }

/* --------------------------------------------------------------------------
   2 . TYPE ROLES + SMALL COMPONENTS
   -------------------------------------------------------------------------- */
.kv-display { margin: 0; font-family: var(--font-display); font-size: var(--text-display-size); line-height: var(--text-display-lh); font-weight: var(--text-display-weight); letter-spacing: var(--text-display-track); word-spacing: var(--display-word-spacing); text-shadow: var(--extrude-display); }
.kv-headline { margin: 0; font-family: var(--font-display); font-size: var(--text-headline-size); line-height: var(--text-headline-lh); font-weight: var(--text-headline-weight); word-spacing: var(--display-word-spacing); }
.kv-title { margin: 0; font-family: var(--font-display); font-size: var(--text-title-size); line-height: var(--text-title-lh); font-weight: var(--text-title-weight); word-spacing: var(--display-word-spacing); }
.kv-heading { margin: 0; font-family: var(--font-display); font-size: var(--text-heading-size); line-height: var(--text-heading-lh); font-weight: var(--text-heading-weight); }
.kv-lead { margin: 0; font-size: var(--text-lead-size); line-height: var(--text-lead-lh); color: var(--color-text-secondary); max-width: var(--measure); }
.kv-text { margin: 0; font-size: var(--text-body-size); line-height: var(--text-body-lh); color: var(--color-text-secondary); max-width: var(--measure); }
.kv-label { font-family: var(--font-data); font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: var(--text-label-track); text-transform: uppercase; color: var(--color-text-tertiary); line-height: 1.3; }
.kv-data { font-family: var(--font-data); font-size: var(--text-data-size); font-variant-numeric: tabular-nums; color: var(--color-text-secondary); }
.kv-link { color: var(--color-text-accent); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; transition: color var(--motion-hover) var(--ease-house); }
.kv-link:hover { color: var(--color-text); }
.kv-icon { width: var(--icon-size); height: var(--icon-size); flex: none; stroke: currentColor; stroke-width: 1.5; fill: none; stroke-linecap: round; stroke-linejoin: round; }

.kv-grain { position: relative; isolation: isolate; }
.kv-grain::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: var(--grain-image); background-size: 300px 300px; opacity: var(--grain-opacity); mix-blend-mode: overlay; z-index: var(--z-raised); }

.kv-chip { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--chip-h); padding: 0 var(--space-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-control); background: var(--color-surface-2); color: var(--color-text-secondary); font-family: var(--font-data); font-size: var(--text-label-size); font-weight: var(--text-label-weight); letter-spacing: .08em; text-transform: uppercase; white-space: nowrap; line-height: 1; }
.kv-chip--outline { background: transparent; }
.kv-dot-live { width: 8px; height: 8px; border-radius: 50%; background: var(--color-live); flex: none; }

/* plain buttons (icon buttons, ghost footer links). Pills are .kv-pill (section 6). */
.kv-btn { appearance: none; display: inline-flex; align-items: center; justify-content: center; gap: var(--space-3); height: var(--btn-h); padding: 0 var(--space-6); border: var(--border-width) solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--color-text); font-family: var(--font-ui); font-size: var(--text-control-size); font-weight: var(--text-control-weight); line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; -webkit-tap-highlight-color: transparent; transition: transform var(--motion-press) var(--ease-house), background-color var(--motion-hover) var(--ease-house), border-color var(--motion-hover) var(--ease-house), color var(--motion-hover) var(--ease-house); }
.kv-btn--sm { height: var(--btn-h-sm); padding: 0 var(--space-4); font-size: var(--text-data-size); }
.kv-btn--icon { width: var(--btn-h); padding: 0; }
.kv-btn--sm.kv-btn--icon { width: var(--btn-h-sm); }
.kv-btn--secondary { background: var(--color-surface-2); border-color: var(--color-border-strong); }
.kv-btn--secondary:hover { background: var(--color-surface-3); border-color: var(--color-border-hover); }
.kv-btn--ghost { color: var(--color-text-secondary); }
.kv-btn--ghost:hover { background: var(--color-hover); color: var(--color-text); }
.kv-btn:active { transform: scale(.97); }

.kv-toasts { position: fixed; left: 50%; bottom: var(--space-8); transform: translateX(-50%); z-index: var(--z-toast); display: grid; gap: var(--space-2); width: min(420px, calc(100% - 2 * var(--kv-gutter))); pointer-events: none; }
.kv-toast { pointer-events: auto; display: flex; align-items: center; gap: var(--space-3); min-height: 48px; padding: var(--space-2) var(--space-2) var(--space-2) var(--space-4); background: var(--color-surface-3); border: var(--border-width) solid var(--color-border-strong); border-radius: var(--radius-panel); box-shadow: var(--elev-3); font-size: var(--text-control-size); color: var(--color-text); animation: kv-toast-in var(--motion-enter) var(--ease-house) both; }
.kv-toast__msg { flex: 1; min-width: 0; }
.kv-toast__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--color-live); }
.kv-toast--error .kv-toast__dot { background: var(--color-danger); }
.kv-toast.is-leaving { opacity: 0; transform: translateY(8px); transition: opacity var(--motion-exit) var(--ease-exit), transform var(--motion-exit) var(--ease-exit); }
@keyframes kv-toast-in { from { opacity: 0; transform: translateY(var(--motion-distance)) scale(.98); } }

.kv-skeleton { background: var(--skeleton-bg); animation: kv-pulse 1.6s var(--ease-house) infinite alternate; }
@keyframes kv-pulse { to { background-color: var(--skeleton-hi); } }
.kv-progress { position: relative; height: 4px; border-radius: 999px; background: var(--color-border); overflow: hidden; }
.kv-progress__fill { position: absolute; inset: 0 auto 0 0; width: 30%; background: var(--color-accent); border-radius: inherit; animation: kv-indet 1.4s var(--ease-house) infinite; }
@keyframes kv-indet { from { transform: translateX(-110%); } to { transform: translateX(340%); } }

/* --------------------------------------------------------------------------
   3 . REVEAL  (fails open: hidden only while the head snippet's .kv-js gate
       is on and the 2.5s failsafe has not fired; ?still reveals everything)
   -------------------------------------------------------------------------- */
.kv-js [data-reveal] {
  transition: opacity var(--motion-reveal) var(--ease-house), transform var(--motion-reveal) var(--ease-house);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.kv-js:not(.kv-failsafe) [data-reveal]:not(.is-in) { opacity: 0; transform: translateY(var(--motion-distance)); }

/* --------------------------------------------------------------------------
   4 . CURSOR  (old site: blue dot <-> blue ring. Transform-only build.
       kv.js injects .kv-cursor on fine pointers after the first mouse move.)
   -------------------------------------------------------------------------- */
.kv-cursor { position: fixed; left: 0; top: 0; z-index: var(--z-cursor); pointer-events: none; opacity: 0; transition: opacity 150ms var(--ease-house); will-change: transform; }
.kv-cursor.is-on { opacity: 1; }
.kv-cursor.is-on.is-away { opacity: 0; }
.kv-cursor__body { position: absolute; left: -13px; top: -13px; width: 26px; height: 26px; transition: transform 200ms var(--ease-house); }
.kv-cursor.is-down .kv-cursor__body { transform: scale(.82); transition-duration: 100ms; }
.kv-cursor__dot, .kv-cursor__ring { position: absolute; inset: 0; border-radius: 50%; transition: transform 280ms var(--ease-house), opacity 280ms var(--ease-house); }
.kv-cursor__dot { background: var(--color-accent); transform: scale(.35); }
.kv-cursor__ring { border: 1.5px solid var(--color-accent); transform: scale(.35); opacity: 0; }
.kv-cursor.is-ring .kv-cursor__ring { transform: scale(1); opacity: 1; }
.kv-cursor.is-ring .kv-cursor__dot { transform: scale(.2); opacity: 0; }
html.kv-cursor-on, html.kv-cursor-on * { cursor: none !important; }
html.kv-cursor-on :is(input, textarea, select, [contenteditable], video[controls], [data-kv-cursor="native"]),
html.kv-cursor-on :is(input, textarea, select, [contenteditable], video[controls], [data-kv-cursor="native"]) * { cursor: auto !important; }
@media (prefers-reduced-motion: reduce) { .kv-cursor__dot, .kv-cursor__ring, .kv-cursor__body { transition: none; } }
[data-motion="reduce"] .kv-cursor__dot, [data-motion="reduce"] .kv-cursor__ring, [data-motion="reduce"] .kv-cursor__body { transition: none; }

/* --------------------------------------------------------------------------
   5 . HEADER, NAV (old-site two-copy roll), MOBILE SHEET
   -------------------------------------------------------------------------- */
.kv-hdr {
  position: fixed; inset: 0 0 auto 0; z-index: var(--z-header); height: var(--kv-hdr-h);
  border-bottom: var(--border-width) solid transparent;
  transition: background-color var(--motion-hover) var(--ease-house), border-color var(--motion-hover) var(--ease-house);
}
.kv-hdr.is-scrolled { background: var(--hdr-bg); border-bottom-color: var(--color-border); -webkit-backdrop-filter: blur(14px) saturate(1.2); backdrop-filter: blur(14px) saturate(1.2); }
.kv-hdr__in { height: 100%; display: flex; align-items: center; gap: var(--space-8); }
.kv-hdr__mark {
  font-family: var(--font-display); font-weight: 700; font-size: 32px; line-height: 1; letter-spacing: -.03em;
  text-decoration: none; color: var(--color-text); padding: var(--space-1) 0 var(--space-1) var(--space-2);
  text-shadow: var(--extrude-text-3); transition: text-shadow var(--motion-hover) var(--ease-house);
}
.kv-nav { display: flex; align-items: center; gap: var(--space-2); margin-left: auto; }
.kv-hdr__cta { margin-left: var(--space-4); }
.kv-hdr__menu { display: none; margin-left: auto; }
@media (max-width: 860px) {
  .kv-hdr .kv-nav, .kv-hdr .kv-hdr__cta { display: none; }
  .kv-hdr .kv-hdr__menu { display: inline-flex; }
}

/* the roll: two stacked copies, the top one slides up out of a 1.15em window and
   the blue copy rolls in under it (old site: .42s house curve). Markup:
   <a class="kv-roll"><span class="kv-roll__m"><span class="kv-roll__in"><span class="kv-roll__a">Work</span><span class="kv-roll__b" aria-hidden="true">Work</span></span></span></a>
   (kv.js builds the inner spans for a bare <a class="kv-roll">Work</a>) */
.kv-roll { position: relative; display: inline-flex; align-items: center; gap: var(--space-2); text-decoration: none; color: var(--color-text); }
.kv-roll__m { display: block; overflow: hidden; height: 1.15em; line-height: 1.15; }
.kv-roll__in { position: relative; display: block; transition: transform var(--motion-roll) var(--ease-house); }
.kv-roll__a, .kv-roll__b { display: block; white-space: nowrap; }
.kv-roll__b { position: absolute; left: 0; top: 100%; color: var(--color-text-accent); }
.kv-roll:focus-visible .kv-roll__in, .kv-roll.is-hover .kv-roll__in { transform: translateY(-100%); }
@media (hover: hover) and (pointer: fine) { .kv-roll:hover .kv-roll__in { transform: translateY(-100%); } }
/* reduced motion: no roll, the word just turns blue */
@media (prefers-reduced-motion: reduce) {
  .kv-roll .kv-roll__in { transform: none !important; }
  .kv-roll:hover .kv-roll__a, .kv-roll:focus-visible .kv-roll__a { color: var(--color-text-accent); }
}
[data-motion="reduce"] .kv-roll .kv-roll__in { transform: none !important; }
[data-motion="reduce"] .kv-roll:hover .kv-roll__a { color: var(--color-text-accent); }

.kv-nav__link {
  height: 40px; padding: 0 var(--space-3); border-radius: var(--radius-control);
  font-family: var(--font-data); font-size: var(--text-data-size); font-weight: 500; letter-spacing: .16em; text-transform: uppercase;
}
.kv-nav__link::after {
  content: ""; position: absolute; left: var(--space-3); right: calc(var(--space-3) + .16em); bottom: 6px; height: 2px;
  background: var(--color-accent-line); transform: scaleX(0); transform-origin: left;
  transition: transform var(--motion-hover) var(--ease-house);
}
.kv-nav__link[aria-current]::after { transform: scaleX(1); }
.kv-nav__tag { font-size: var(--text-label-size); color: var(--color-text-tertiary); letter-spacing: var(--text-label-track); }

.kv-sheet {
  position: fixed; inset: 0; z-index: var(--z-overlay); background: var(--color-bg);
  display: grid; grid-template-rows: var(--kv-hdr-h) 1fr auto; padding-inline: var(--kv-gutter);
  opacity: 0; visibility: hidden;
  transition: opacity var(--motion-exit) var(--ease-exit), visibility 0s linear var(--motion-exit);
}
.kv-sheet[hidden] { display: none; }
.kv-sheet.is-open { opacity: 1; visibility: visible; transition: opacity var(--motion-enter) var(--ease-house), visibility 0s; }
.kv-sheet__top { display: flex; align-items: center; justify-content: space-between; }
.kv-sheet__links { display: grid; align-content: center; gap: var(--space-2); }
.kv-sheet__links a {
  font-family: var(--font-display); font-weight: 600; font-size: clamp(44px, 14vw, 64px); line-height: 1.02; word-spacing: var(--display-word-spacing);
  text-decoration: none; color: var(--color-text); justify-self: start;
  transform: translateY(var(--motion-distance)); opacity: 0;
  transition: transform var(--motion-enter) var(--ease-house), opacity var(--motion-enter) var(--ease-house), text-shadow var(--motion-hover) var(--ease-house);
  transition-delay: calc(var(--i, 0) * var(--motion-stagger));
}
.kv-sheet.is-open .kv-sheet__links a { transform: none; opacity: 1; }
.kv-sheet__links a:focus-visible, .kv-sheet__links a:active { text-shadow: var(--extrude-text-3); }
.kv-sheet__foot { padding-block: var(--space-8); display: grid; justify-items: start; gap: var(--space-5); }

/* --------------------------------------------------------------------------
   6 . PILLS  (Motion Lab 06 "B": three stepped layers behind the face, one
       frame apart, arrow nudge after them, press = scale .97 into the stack)
   Markup:
   <a class="kv-pill kv-pill--primary" href="#all">
     <span class="kv-pill__face">Watch the work <span class="kv-pill__ic" aria-hidden="true">{svg}</span></span>
   </a>
   Layers: .kv-pill::before (3rd, deepest) / ::after (2nd) / .kv-pill__face::before (1st).
   The fill lives only on .kv-pill__face, so the layers can never paint over it.
   -------------------------------------------------------------------------- */
.kv-pill {
  --fill: var(--color-accent); --ink: var(--color-text-on-accent); --line: transparent;
  --chip: var(--p-white); --glyph: var(--color-accent);
  --c1: var(--blue-2); --c2: var(--blue-3); --c3: var(--blue-4);
  --o1: 0; --o2: 0; --o3: 0; --x1: 0px; --x2: 0px; --x3: 0px;
  --d1: 0ms; --d2: 0ms; --d3: 0ms; --tl: 140ms; --el: var(--ease-house);
  --sc: 1; --ts: 200ms;
  --hx: 3px; --hy: -3px; --ax: 0px; --ay: 0px; --da: 0ms;
  --c1x: transparent;
  --tf: 180ms;
  --h: var(--btn-h); --chip-s: 36px; --pl: 22px;
  position: relative; isolation: isolate; display: inline-flex; vertical-align: middle; flex: none;
  margin: 0; padding: 0; border: 0; background: none; border-radius: var(--radius-control);
  font-family: var(--font-ui); font-size: var(--text-control-size); font-weight: 500; line-height: 1;
  color: var(--ink); text-decoration: none; cursor: pointer; -webkit-tap-highlight-color: transparent;
  scale: var(--sc); transition: scale var(--ts) var(--ease-house);
}
.kv-pill::before, .kv-pill::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none;
}
.kv-pill::before { z-index: -3; background: var(--c3); opacity: var(--o3); transform: translate(var(--x3), calc(var(--x3) * -1)); transition: transform var(--tl) var(--el) var(--d3), opacity 60ms linear var(--d3); }
.kv-pill::after  { z-index: -2; background: var(--c2); opacity: var(--o2); transform: translate(var(--x2), calc(var(--x2) * -1)); transition: transform var(--tl) var(--el) var(--d2), opacity 60ms linear var(--d2); }
/* layer 1 is the face's own hard shadow: it always paints under the face's fill */
.kv-pill__face {
  display: inline-flex; align-items: center; gap: 14px; height: var(--h); padding: 0 var(--pl);
  border-radius: inherit; border: var(--border-width) solid var(--line); background: var(--fill); color: var(--ink); white-space: nowrap;
  box-shadow: var(--x1) calc(var(--x1) * -1) 0 var(--c1x);
  transition: background-color var(--tf) var(--ease-house), color var(--tf) var(--ease-house), border-color var(--tf) var(--ease-house), box-shadow var(--tl) var(--el) var(--d1);
}
.kv-pill__face:has(.kv-pill__ic) { padding-right: calc((var(--h) - var(--chip-s)) / 2 - 1px); }
.kv-pill__ic {
  display: grid; place-items: center; flex: none; width: var(--chip-s); height: var(--chip-s); border-radius: 50%;
  background: var(--chip); color: var(--glyph);
  transition: background-color var(--tf) var(--ease-house), color var(--tf) var(--ease-house);
}
.kv-pill__ic svg, .kv-pill__arrow { display: block; width: 14px; height: 14px; translate: var(--ax) var(--ay); transition: translate 180ms var(--ease-house) var(--da); }
.kv-pill__arrow { display: inline-block; }
.kv-pill--down { --hx: 0px; --hy: 3px; }
.kv-pill--right { --hx: 4px; --hy: 0px; }
.kv-pill--sm { --h: var(--btn-h-sm); --chip-s: 26px; --pl: 16px; font-size: var(--text-data-size); }
.kv-pill--sm .kv-pill__ic svg { width: 11px; height: 11px; }
.kv-pill--block, .kv-pill--block .kv-pill__face { width: 100%; justify-content: space-between; }

/* PRIMARY: blue face, 2 steps at rest (the locked look), the 3rd steps out on hover */
.kv-pill--primary { --o1: 1; --o2: 1; --c1x: var(--c1); --x1: -2px; --x2: -4px; --x3: -4px; }
/* GLASS (secondary, sits on media): no steps at rest, all three step out once the blue has landed */
.kv-pill--glass {
  --fill: color-mix(in srgb, var(--color-surface-1) 45%, transparent); --ink: var(--color-text); --line: var(--color-border-control);
  --chip: var(--color-accent); --glyph: var(--p-white);
  --c1: var(--blue-2); --c2: var(--blue-3); --c3: var(--blue-4);
}
.kv-pill--glass .kv-pill__face { -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background-color var(--tf) var(--ease-house), color var(--tf) var(--ease-house), border-color var(--tf) var(--ease-house), box-shadow var(--tl) var(--el) var(--d1), -webkit-backdrop-filter 0s linear var(--dbf, 0ms), backdrop-filter 0s linear var(--dbf, 0ms); }
/* OUTLINE (on the page background): hairline face, white on hover with blue steps */
.kv-pill--outline { --fill: var(--color-bg); --ink: var(--color-text); --line: var(--color-border-control); --chip: var(--p-white); --glyph: var(--color-accent); --c1: var(--blue-1); --c2: var(--blue-2); --c3: var(--blue-3); }

/* hover = focus-visible = .is-hover (debug/state freeze) */
.kv-pill:focus-visible, .kv-pill.is-hover {
  --o1: 1; --o2: 1; --o3: 1; --c1x: var(--c1); --x1: -2px; --x2: -4px; --x3: -6px;
  --tl: 200ms; --d1: 0ms; --d2: var(--motion-step); --d3: calc(var(--motion-step) * 2);
  --ax: var(--hx); --ay: var(--hy); --da: calc(var(--motion-step) * 2);
}
.kv-pill--primary:focus-visible, .kv-pill--primary.is-hover { --fill: var(--color-accent-hover); }
.kv-pill--glass:focus-visible, .kv-pill--glass.is-hover { --fill: var(--color-accent); --ink: var(--p-white); --line: var(--color-accent); --chip: var(--p-white); --glyph: var(--color-accent); --d1: 60ms; --d2: 90ms; --d3: 120ms; --dbf: 120ms; }
.kv-pill--glass:focus-visible .kv-pill__face, .kv-pill--glass.is-hover .kv-pill__face { -webkit-backdrop-filter: none; backdrop-filter: none; }
.kv-pill--outline:focus-visible, .kv-pill--outline.is-hover { --fill: var(--p-white); --ink: var(--color-accent); --line: var(--p-white); --chip: var(--color-accent); --glyph: var(--p-white); }
@media (hover: hover) and (pointer: fine) {
  .kv-pill:hover {
    --o1: 1; --o2: 1; --o3: 1; --c1x: var(--c1); --x1: -2px; --x2: -4px; --x3: -6px;
    --tl: 200ms; --d1: 0ms; --d2: var(--motion-step); --d3: calc(var(--motion-step) * 2);
    --ax: var(--hx); --ay: var(--hy); --da: calc(var(--motion-step) * 2);
  }
  .kv-pill--primary:hover { --fill: var(--color-accent-hover); }
  .kv-pill--glass:hover { --fill: var(--color-accent); --ink: var(--p-white); --line: var(--color-accent); --chip: var(--p-white); --glyph: var(--color-accent); --d1: 60ms; --d2: 90ms; --d3: 120ms; --dbf: 120ms; }
  .kv-pill--glass:hover .kv-pill__face { -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kv-pill--outline:hover { --fill: var(--p-white); --ink: var(--color-accent); --line: var(--p-white); --chip: var(--color-accent); --glyph: var(--p-white); }
}
/* press: scale .97 in 120ms, pushed into its extrusion (every layer to -2px) */
.kv-pill:active, .kv-pill.is-press { --sc: .97; --ts: 120ms; --o1: 1; --o2: 1; --o3: 1; --c1x: var(--c1); --x1: -2px; --x2: -2px; --x3: -2px; --tl: 120ms; --d1: 0ms; --d2: 0ms; --d3: 0ms; }
.kv-pill--primary:active { --fill: var(--color-accent-active); }
/* focus ring sits outside the deepest step */
.kv-pill:focus-visible { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 9px; }
@media (max-width: 720px) { .kv-pill::before { display: none; } }   /* phones: 2 layers */
@media (prefers-reduced-motion: reduce) {
  .kv-pill, .kv-pill::before, .kv-pill::after, .kv-pill__face, .kv-pill__ic, .kv-pill__ic svg, .kv-pill__arrow { transition: none !important; }
  .kv-pill { --sc: 1 !important; --ax: 0px !important; --ay: 0px !important; }
}
[data-motion="reduce"] .kv-pill, [data-motion="reduce"] .kv-pill::before, [data-motion="reduce"] .kv-pill::after,
[data-motion="reduce"] .kv-pill__face, [data-motion="reduce"] .kv-pill__ic svg { transition: none !important; }
[data-motion="reduce"] .kv-pill { --sc: 1 !important; --ax: 0px !important; --ay: 0px !important; }

/* --------------------------------------------------------------------------
   7 . HOME HERO + NAME ECHO
   -------------------------------------------------------------------------- */
.kv-hero {
  position: relative; isolation: isolate; overflow: hidden;
  width: 100%; height: 100svh; min-height: 600px;
  display: grid; place-items: center;
}
.kv-hero__media, .kv-hero__media video, .kv-hero__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-hero__media { z-index: -3; transform: scale(1.04); animation: kv-hero-settle 2.4s var(--ease-house) .1s both; }
@keyframes kv-hero-settle { from { transform: scale(1.12); opacity: 0; } to { transform: scale(1.04); opacity: 1; } }
.kv-duo { position: absolute; inset: 0; pointer-events: none; }
.kv-duo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(160deg, var(--duo-hi), var(--duo-lo)); mix-blend-mode: color; opacity: var(--duo-color, .5); transition: opacity var(--motion-hover) var(--ease-house); }
.kv-duo::after { content: ""; position: absolute; inset: 0; background: var(--duo-lo); mix-blend-mode: multiply; opacity: var(--duo-mult, .24); transition: opacity var(--motion-hover) var(--ease-house); }
.kv-hero__media .kv-duo { --duo-color: .28; --duo-mult: .12; }
.kv-hero__shade {
  position: absolute; inset: 0; z-index: -2; pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% 30%, transparent 40%, color-mix(in srgb, var(--color-bg) 35%, transparent) 85%, var(--color-bg) 100%),
    linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 50%, transparent) 0%, transparent 22%, transparent 70%, var(--color-bg) 100%);
}
.kv-hero > .kv-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kv-hero__center { position: relative; text-align: center; padding-top: var(--kv-hdr-h); display: grid; justify-items: center; gap: var(--space-8); }
.kv-hero__kicker { margin: 0; color: var(--color-text); letter-spacing: .32em; animation: kv-fade-up var(--motion-reveal) var(--ease-house) .1s both; }
.kv-hero__ctas { display: flex; flex-wrap: wrap; gap: var(--space-5) var(--space-4); justify-content: center; animation: kv-fade-up var(--motion-reveal) var(--ease-house) .55s both; }
@keyframes kv-fade-up { from { opacity: 0; transform: translateY(var(--motion-distance)); } }

/* name echo (old site, 8 layers). kv.js clones the h1 into 8 aria-hidden layers.
   Markup: <div class="kv-echo" data-kv-echo><h1 class="kv-display kv-hero__name" data-kv-extrude="4" data-kv-extrude-delay="700"><span>Karan</span> <span>Vanjari</span></h1></div> */
.kv-echo { position: relative; display: inline-block; }
.kv-hero__name { position: relative; white-space: nowrap; color: var(--color-text); word-spacing: .08em; animation: kv-name-in var(--motion-reveal) var(--ease-house) .25s both; }
.kv-hero__name span { display: inline-block; }
@keyframes kv-name-in { from { opacity: 0; transform: translateY(var(--motion-distance)); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.kv-echo__layer { position: absolute !important; inset: 0; margin: 0; pointer-events: none; user-select: none; opacity: 0; text-shadow: none !important; animation: none !important; will-change: transform, opacity; }
@media (max-width: 720px) { .kv-hero { min-height: 520px; height: 88svh; } .kv-hero__kicker { letter-spacing: .14em; } }
@media (max-width: 480px) {
  .kv-hero__name { white-space: normal; font-size: clamp(56px, 18vw, 80px); line-height: .9; }
  .kv-hero__name span { display: block; }
}
@media (prefers-reduced-motion: reduce) { .kv-hero__media, .kv-hero__name, .kv-hero__kicker, .kv-hero__ctas { animation: none; } }
[data-motion="reduce"] .kv-hero__media, [data-motion="reduce"] .kv-hero__name, [data-motion="reduce"] .kv-hero__kicker, [data-motion="reduce"] .kv-hero__ctas { animation: none; }

/* --------------------------------------------------------------------------
   8 . "WORKED WITH" TICKER  (slow: one set per ~70s, seamless, paused off-screen)
   -------------------------------------------------------------------------- */
.kv-clients { background: var(--color-surface-1); border-block: var(--border-width) solid var(--color-border); padding-block: var(--space-10) var(--space-10); display: grid; gap: var(--space-6); }
.kv-clients__label { text-align: center; }
.kv-ticker { --kv-ticker-gap: clamp(48px, 5vw, 84px); position: relative; overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); mask-image: linear-gradient(90deg, transparent, #000 5%, #000 95%, transparent); }
.kv-ticker__track { display: flex; width: max-content; }
.kv-ticker.is-ready .kv-ticker__track { animation: kv-ticker var(--kv-ticker-dur, 70s) linear infinite; }
.kv-ticker.is-paused .kv-ticker__track { animation-play-state: paused; }
.kv-ticker__set { display: flex; align-items: center; flex: none; gap: var(--kv-ticker-gap); padding-right: var(--kv-ticker-gap); }
@keyframes kv-ticker { to { transform: translate3d(-50%, 0, 0); } }
.kv-ticker__logo { height: 30px; width: auto; filter: brightness(0) invert(1); opacity: .82; }
.kv-ticker__logo--tall { height: 48px; }
.kv-ticker__word { font-family: var(--font-display); font-weight: 600; font-size: 27px; letter-spacing: -.01em; color: var(--color-text); opacity: .82; white-space: nowrap; }
@media (max-width: 720px) { .kv-ticker__logo { height: 22px; } .kv-ticker__logo--tall { height: 36px; } .kv-ticker__word { font-size: 20px; } }
/* reduced motion (and no JS): one static set, wrapped and centred */
@media (prefers-reduced-motion: reduce) {
  .kv-ticker { -webkit-mask-image: none; mask-image: none; padding-inline: var(--kv-gutter); }
  .kv-ticker .kv-ticker__track { animation: none !important; width: auto; justify-content: center; }
  .kv-ticker__set { flex-wrap: wrap; justify-content: center; padding-right: 0; gap: var(--space-6) var(--kv-ticker-gap); }
  .kv-ticker .kv-ticker__set { flex: 1 1 100%; min-width: 0; max-width: 100%; }   /* shrink to the track so the wrap can happen */
  .kv-ticker__set[aria-hidden="true"] { display: none; }
}
[data-motion="reduce"] .kv-ticker .kv-ticker__track { animation: none !important; width: auto; justify-content: center; }
[data-motion="reduce"] .kv-ticker__set { flex-wrap: wrap; justify-content: center; padding-right: 0; }
[data-motion="reduce"] .kv-ticker .kv-ticker__set { flex: 1 1 100%; min-width: 0; max-width: 100%; }
[data-motion="reduce"] .kv-ticker__set[aria-hidden="true"] { display: none; }
.kv-ticker:not(.is-ready) .kv-ticker__track { width: auto; justify-content: center; }
.kv-ticker:not(.is-ready) .kv-ticker__set { flex: 1 1 100%; min-width: 0; max-width: 100%; flex-wrap: wrap; justify-content: center; padding-right: 0; gap: var(--space-6) var(--kv-ticker-gap); }

/* --------------------------------------------------------------------------
   9 . SECTION HEADS + LABELS
   -------------------------------------------------------------------------- */
.kv-eyebrow { display: flex; align-items: center; gap: var(--space-3); color: var(--color-text-tertiary); margin: 0; }
.kv-sechead { display: grid; gap: var(--space-6); margin-bottom: clamp(40px, 4.5vw, 72px); }
.kv-sechead__title { margin: 0; }
.kv-sechead__aside { display: grid; justify-items: start; gap: var(--space-5); }
.kv-sechead__aside .kv-text { max-width: 52ch; }
.kv-sechead--split { grid-template-columns: minmax(0, 1fr) auto; align-items: end; }
@media (max-width: 860px) { .kv-sechead--split { grid-template-columns: 1fr; } }
.kv-blockhead { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3) var(--space-6); margin-bottom: var(--space-8); flex-wrap: wrap; }
.kv-blockhead__title { margin: 0; }
@media (max-width: 560px) { .kv-blockhead__title { font-size: 32px; } }

/* --------------------------------------------------------------------------
   10 . PROJECT TILES  (.kv-work)  +  SELECTED WORK (.kv-bento)  +  ALL PROJECTS
   Shake fix: nothing on the tile's media transforms or resizes on hover. The
   <video> is in the DOM from the start (absolute, opacity 0, poster underneath),
   gets src only after hover intent, and fades in once, on its first presented frame.
   -------------------------------------------------------------------------- */
.kv-work { position: relative; display: grid; gap: var(--space-4); align-content: start; min-width: 0; color: var(--color-text); text-decoration: none; }
.kv-work[hidden] { display: none !important; }
.kv-work__media { position: relative; overflow: hidden; aspect-ratio: 16 / 9; border-radius: var(--radius-media); background: var(--skeleton-bg); contain: paint; }
.kv-work__poster, .kv-work__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.kv-js:not(.kv-failsafe) .kv-work__poster:not(.is-loaded) { opacity: 0; }
.kv-work__poster { transition: opacity var(--motion-hover) var(--ease-house); }
/* --hz: static per-clip zoom that pushes baked letterbox bars out (set by the generator). Never animated. */
.kv-work__video { opacity: 0; transform: scale(var(--hz, 1)); pointer-events: none; transition: opacity var(--tile-video-fade) var(--ease-house); }
.kv-work__video.is-on { opacity: 1; }
.kv-work__duo { --duo-color: .18; --duo-mult: .08; }
@media (hover: none) { .kv-work__duo { --duo-color: 0; --duo-mult: 0; } }
.kv-work__go {
  position: absolute; right: var(--space-3); bottom: var(--space-3); z-index: 2;
  display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%;
  background: var(--color-accent); color: var(--color-text-on-accent); opacity: 0; box-shadow: none;
  transition: opacity var(--motion-hover) var(--ease-house), box-shadow var(--motion-hover) var(--ease-house);
}
.kv-work__go svg { width: 16px; height: 16px; }
.kv-work__cap { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: var(--space-4); row-gap: var(--space-1); padding-top: var(--space-4); border-top: var(--border-width) solid var(--color-border); }
.kv-work__cap::before { content: ""; position: absolute; left: 0; top: -1px; height: 2px; width: 100%; background: var(--color-accent-line); transform: scaleX(0); transform-origin: left; transition: transform var(--motion-hover) var(--ease-house); }
.kv-work__title { margin: 0; font-family: var(--font-display); font-weight: 500; font-size: var(--text-heading-size); line-height: 1.15; word-spacing: var(--display-word-spacing); transition: text-shadow var(--motion-hover) var(--ease-house); }
.kv-work__year { font-family: var(--font-data); font-size: var(--text-data-size); font-variant-numeric: tabular-nums; color: var(--color-text-tertiary); padding-top: 4px; }
.kv-work__meta { grid-column: 1 / -1; min-width: 0; margin: 0; font-size: var(--text-data-size); line-height: 1.45; color: var(--color-text-secondary); }
.kv-work__num { position: absolute; top: var(--space-6); left: var(--space-6); z-index: 2; color: var(--color-text); }
@media (hover: hover) and (pointer: fine) {
  .kv-work:hover .kv-work__duo { --duo-color: 0; --duo-mult: 0; }
  .kv-work:hover .kv-work__cap::before { transform: scaleX(1); }
  .kv-work:hover .kv-work__go { opacity: 1; box-shadow: var(--extrude-box-2); }
  .kv-work:hover .kv-work__title { text-shadow: var(--extrude-text-2); }
}
.kv-work:focus-visible { outline: none; }
.kv-work:focus-visible .kv-work__media { outline: var(--focus-ring-width) solid var(--frame-ring-focus); outline-offset: var(--focus-ring-offset); }
.kv-work:focus-visible .kv-work__cap::before { transform: scaleX(1); }
.kv-work.is-enter { animation: kv-tile-in 560ms var(--ease-house) both; animation-delay: calc(var(--n, 0) * 40ms); }
@keyframes kv-tile-in { from { opacity: 0; transform: translateY(14px); } }

/* overlay variant (Selected Work): caption sits on the frame */
.kv-work--over { display: block; overflow: hidden; isolation: isolate; border-radius: var(--radius-media); background: var(--frame-surround); container-type: inline-size; }
.kv-work--over .kv-work__media { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; z-index: -2; }
.kv-work--over::after { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, transparent 40%, color-mix(in srgb, var(--color-bg) 88%, transparent)); }
.kv-work--over .kv-work__cap { position: absolute; left: var(--space-6); right: var(--space-6); bottom: var(--space-6); padding-top: 0; border-top: 0; align-items: end; }
.kv-work--over .kv-work__cap::before { display: none; }
.kv-work--over .kv-work__title { font-size: clamp(24px, 6cqi, 64px); line-height: .98; }
.kv-work--wide.kv-work--over .kv-work__title { font-size: clamp(32px, 4.4cqi, 72px); }
.kv-work--over .kv-work__meta { grid-column: 1; margin-top: var(--space-2); font-family: var(--font-data); font-size: var(--text-label-size); letter-spacing: var(--text-label-track); text-transform: uppercase; color: var(--on-media); }
.kv-work--over .kv-work__year { grid-column: 2; grid-row: 1 / span 2; align-self: end; color: var(--on-media); }
.kv-work--over .kv-work__go { top: var(--space-6); right: var(--space-6); bottom: auto; width: 48px; height: 48px; }
.kv-work--over:focus-visible { outline: var(--focus-ring-width) solid var(--frame-ring-focus); outline-offset: var(--focus-ring-offset); }

/* selected work: 2-up bento, wide tiles span both columns, full bleed */
.kv-bento {
  --kv-bento-gap: 8px;
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--kv-bento-gap);
  grid-auto-rows: min(calc((100vw - 2 * var(--kv-gutter) - var(--kv-bento-gap)) / 2 * .5625), 82svh);
}
.kv-work--wide { grid-column: span 2; }
@media (max-width: 720px) {
  .kv-bento { grid-template-columns: 1fr; grid-auto-rows: auto; }
  .kv-bento .kv-work--over { grid-column: auto; aspect-ratio: 16 / 10; }
  .kv-work--over .kv-work__cap { left: var(--space-4); right: var(--space-4); bottom: var(--space-4); }
  .kv-work__num { top: var(--space-4); left: var(--space-4); }
  .kv-work--over .kv-work__go { display: none; }
  .kv-work--over .kv-work__title, .kv-work--wide.kv-work--over .kv-work__title { font-size: clamp(24px, 9cqi, 40px); }
}

/* all projects */
.kv-aphead { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: end; gap: var(--space-6); margin-bottom: var(--space-10); }
.kv-aphead__meta { display: flex; gap: var(--space-6); align-items: baseline; color: var(--color-text-secondary); flex-wrap: wrap; }
.kv-aphead__meta b { font-weight: 500; color: var(--color-text); }
@media (max-width: 860px) { .kv-aphead { grid-template-columns: 1fr; } }
.kv-filterbar {
  position: sticky; top: var(--kv-hdr-h); z-index: var(--z-sticky);
  display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap;
  padding-block: var(--space-4); margin-bottom: var(--space-10);
  background: var(--hdr-bg); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: var(--border-width) solid var(--color-border);
}
.kv-filter { display: flex; gap: var(--space-2); flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.kv-fpill {
  appearance: none; display: inline-flex; align-items: center; gap: var(--space-2);
  height: 40px; padding: 0 var(--space-4); border-radius: var(--radius-control);
  border: var(--border-width) solid var(--color-border-control); background: transparent;
  color: var(--color-text-secondary); font-family: var(--font-ui); font-size: var(--text-control-size); font-weight: 500;
  white-space: nowrap; cursor: pointer;
  transition: background-color var(--motion-hover) var(--ease-house), border-color var(--motion-hover) var(--ease-house), color var(--motion-hover) var(--ease-house), scale var(--motion-press) var(--ease-house);
}
.kv-fpill[hidden] { display: none; }
.kv-fpill__n { font-family: var(--font-data); font-size: var(--text-label-size); color: var(--color-text-tertiary); font-variant-numeric: tabular-nums; }
@media (hover: hover) and (pointer: fine) { .kv-fpill:hover { border-color: var(--color-border-hover); color: var(--color-text); background: var(--color-hover); } }
.kv-fpill:active { scale: .97; }
.kv-fpill[aria-pressed="true"] { background: var(--color-text); border-color: var(--color-text); color: var(--color-bg); }
.kv-fpill[aria-pressed="true"] .kv-fpill__n { color: var(--color-bg); opacity: .7; }
.kv-filterbar__shown { margin: 0; margin-left: auto; }
@media (max-width: 860px) {
  .kv-filterbar { position: static; background: none; -webkit-backdrop-filter: none; backdrop-filter: none; }
  .kv-filter { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--kv-gutter)); padding-inline: var(--kv-gutter); flex-basis: 100%; }
  .kv-filter::-webkit-scrollbar { display: none; }
  .kv-filterbar__shown { margin-left: 0; }
}
.kv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(32px, 3vw, 56px) clamp(16px, 1.6vw, 32px); }
@media (min-width: 1900px) { .kv-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 2800px) { .kv-grid { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
@media (max-width: 1100px) { .kv-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 600px) { .kv-grid { grid-template-columns: 1fr; } .kv-work .kv-work__go { display: none; } }
/* closing tile: the blue band at tile scale ("Got a project in mind?") */
.kv-grid-cta {
  display: grid; align-content: space-between; gap: var(--space-6); min-height: 100%;
  padding: var(--space-8); border-radius: var(--radius-media);
  background: var(--color-band); color: var(--color-text-on-accent); text-decoration: none;
  box-shadow: var(--extrude-box-2);
  transition: box-shadow var(--motion-hover) var(--ease-house), translate var(--motion-hover) var(--ease-house);
}
.kv-grid-cta[hidden] { display: none; }
.kv-grid-cta .kv-label { color: var(--color-text-on-accent); opacity: .86; }
.kv-grid-cta__title { font-family: var(--font-display); font-weight: 600; font-size: clamp(32px, 3vw, 48px); line-height: 1; word-spacing: var(--display-word-spacing); max-width: 14ch; text-wrap: balance; }
.kv-grid-cta__go { display: inline-flex; align-items: center; gap: var(--space-2); font-weight: 500; }
.kv-grid-cta__go svg { transition: translate var(--motion-hover) var(--ease-house); }
@media (hover: hover) and (pointer: fine) {
  .kv-grid-cta:hover { box-shadow: var(--extrude-box-3); translate: 1px -1px; }
  .kv-grid-cta:hover .kv-grid-cta__go svg { translate: 6px 0; }
}
.kv-grid-cta:active { box-shadow: var(--extrude-box-1); translate: -2px 2px; }

/* --------------------------------------------------------------------------
   11 . CONTACT CLOSE ("Let's work together") + FOOTER
   -------------------------------------------------------------------------- */
.kv-contact { position: relative; overflow: hidden; padding-bottom: 0; border-top: var(--border-width) solid var(--color-border); }
.kv-contact::before { content: ""; position: absolute; left: 0; right: 0; bottom: -40%; height: 90%; background: radial-gradient(58% 100% at 50% 100%, color-mix(in srgb, var(--color-accent) 18%, transparent), transparent 72%); pointer-events: none; }
.kv-contact__in { position: relative; display: grid; gap: var(--space-10); }
/* the extruded moment: kv.js steps the stack in one layer per --kv-extrude-frame
   on reveal (rest depth) and on hover (deeper). Without JS the rest stack shows. */
.kv-ask {
  margin: 0; justify-self: start; padding: 0 0 .3em .3em;
  font-family: var(--font-display); font-weight: 600; font-size: clamp(46px, 7.4vw, 136px); line-height: .9; word-spacing: var(--display-word-spacing);
  color: var(--color-text);
  text-shadow: -0.04em 0.04em 0 #2a4dff, -0.087em 0.087em 0 #2238c9, -0.144em 0.144em 0 #1c2db0;
}
.kv-contact__mailrow { display: flex; align-items: center; gap: var(--space-4); flex-wrap: wrap; }
.kv-contact__mail {
  font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 3.2vw, 46px); letter-spacing: -.015em;
  text-decoration: none; color: var(--color-text); padding-bottom: 4px; overflow-wrap: anywhere;
  background: linear-gradient(var(--color-accent-line), var(--color-accent-line)) 0 100% / 0 2px no-repeat;
  transition: background-size var(--motion-hover) var(--ease-house), color var(--motion-hover) var(--ease-house);
}
@media (hover: hover) and (pointer: fine) { .kv-contact__mail:hover { background-size: 100% 2px; color: var(--color-text-accent); } }
.kv-foot { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: end; gap: var(--space-10); padding-block: var(--space-12) var(--space-10); margin-top: var(--space-16); border-top: var(--border-width) solid var(--color-border); }
.kv-foot__kv {
  font-family: var(--font-display); font-weight: 700; font-size: clamp(60px, 7vw, 104px); line-height: .8; letter-spacing: -.04em;
  color: var(--color-text); text-decoration: none; padding: 0 0 .1em .12em;
  text-shadow: -3px 3px 0 #2a4dff, -6px 6px 0 #2238c9, -9px 9px 0 #16277d, -12px 12px 0 #0c1858;
  transition: text-shadow .55s var(--ease-house);
}
@media (hover: hover) and (pointer: fine) { .kv-foot__kv:hover { text-shadow: -5px 5px 0 #2a4dff, -10px 10px 0 #2238c9, -16px 16px 0 #16277d, -23px 23px 0 #0c1858, -31px 31px 0 #070f3a; } }
.kv-foot__links { display: flex; gap: var(--space-2) var(--space-6); flex-wrap: wrap; justify-content: center; }
.kv-foot__link { font-family: var(--font-data); font-size: var(--text-data-size); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-text-secondary); padding-block: var(--space-2); }
.kv-foot__link .kv-roll__a { color: var(--color-text-secondary); }
.kv-foot__meta { display: grid; justify-items: end; gap: var(--space-3); }
@media (max-width: 860px) {
  .kv-foot { grid-template-columns: 1fr; justify-items: start; gap: var(--space-8); }
  .kv-foot__links { justify-content: flex-start; }
  .kv-foot__meta { justify-items: start; }
}

/* --------------------------------------------------------------------------
   12 . PROJECT PAGE  (one template, two tiers)
   -------------------------------------------------------------------------- */
.kv-phero { position: relative; isolation: isolate; overflow: hidden; width: 100%; height: 86svh; min-height: 520px; display: flex; align-items: flex-end; }
.kv-phero__img, .kv-phero__video { position: absolute; inset: 0; z-index: -3; width: 100%; height: 100%; object-fit: cover; }
.kv-phero__img { scale: 1.02; animation: kv-phero-in 2.2s var(--ease-house) both; }
@keyframes kv-phero-in { from { scale: 1.1; opacity: 0; } to { scale: 1.02; opacity: 1; } }
.kv-phero .kv-duo { z-index: -2; --duo-color: .3; --duo-mult: .14; }
.kv-phero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(180deg, color-mix(in srgb, var(--color-bg) 55%, transparent) 0%, transparent 26%, transparent 45%, color-mix(in srgb, var(--color-bg) 82%, transparent) 82%, var(--color-bg) 100%); }
.kv-phero > .kv-grain { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.kv-phero__in { width: 100%; padding-bottom: var(--space-12); display: grid; gap: var(--space-6); }
.kv-phero__title { text-wrap: balance; padding-left: .06em; animation: kv-name-in var(--motion-reveal) var(--ease-house) .2s both; }
.kv-phero__tags { display: flex; gap: var(--space-2); flex-wrap: wrap; animation: kv-fade-up var(--motion-reveal) var(--ease-house) .45s both; }
@media (max-width: 480px) { .kv-phero__title { font-size: clamp(44px, 14vw, 72px); } }
@media (prefers-reduced-motion: reduce) { .kv-phero__img, .kv-phero__title, .kv-phero__tags { animation: none; } }
[data-motion="reduce"] .kv-phero__img, [data-motion="reduce"] .kv-phero__title, [data-motion="reduce"] .kv-phero__tags { animation: none; }
.kv-crumbs { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.kv-crumbs a { color: var(--color-text-secondary); text-decoration: none; transition: color var(--motion-hover) var(--ease-house); }
.kv-crumbs a:hover { color: var(--color-text); }
.kv-crumbs [aria-hidden] { color: var(--color-text-tertiary); }

/* meta strip */
.kv-meta { display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); margin: 0; border-block: var(--border-width) solid var(--color-border); }
.kv-meta__cell { padding: var(--space-6) var(--space-6) var(--space-6) 0; display: grid; gap: var(--space-2); align-content: start; min-width: 0; }
.kv-meta__cell + .kv-meta__cell { padding-left: var(--space-6); border-left: var(--border-width) solid var(--color-border); }
.kv-meta__cell dt { margin: 0; }
.kv-meta__v { margin: 0; font-size: var(--text-lead-size); font-weight: 500; line-height: 1.35; color: var(--color-text); overflow-wrap: anywhere; }
@media (max-width: 860px) {
  .kv-meta { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .kv-meta__cell, .kv-meta__cell + .kv-meta__cell { padding: var(--space-5) var(--space-4) var(--space-5) 0; border-left: 0; }
  .kv-meta__cell:nth-child(even) { padding-left: var(--space-4); border-left: var(--border-width) solid var(--color-border); }
  .kv-meta__cell:nth-child(n+3) { border-top: var(--border-width) solid var(--color-border); }
  .kv-meta__cell:last-child:nth-child(odd) { grid-column: 1 / -1; }
}

/* about the project (no role beside the head: feedback #14) */
.kv-about__text { margin: 0; max-width: 40ch; font-family: var(--font-display); font-weight: 500; font-size: clamp(24px, 2.4vw, 40px); line-height: 1.2; word-spacing: var(--display-word-spacing); letter-spacing: -.005em; text-wrap: pretty; }
.kv-prose { display: grid; gap: var(--space-5); max-width: 68ch; }
.kv-prose p { margin: 0; font-size: var(--text-lead-size); line-height: var(--text-lead-lh); color: var(--color-text-secondary); }

/* player: poster first, real aspect ratio, never taller than the screen. No tech readout (feedback #15). */
.kv-player {
  position: relative; isolation: isolate; overflow: hidden;
  width: min(100%, calc((100svh - var(--kv-hdr-h) - 48px) * var(--ar, 16 / 9))); margin-inline: auto;
  aspect-ratio: var(--ar, 16 / 9); background: var(--frame-surround); border-radius: var(--radius-media);
  container-type: inline-size;
}
.kv-player__poster { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; }
.kv-player__veil { position: absolute; inset: 0; z-index: -1; background: color-mix(in srgb, var(--color-bg) 34%, transparent); transition: background-color var(--motion-hover) var(--ease-house); }
.kv-player__btn { position: absolute; inset: 0; width: 100%; border: 0; background: none; padding: 0; cursor: pointer; color: var(--color-text); display: grid; place-content: center; justify-items: center; gap: var(--space-5); }
.kv-player__circle {
  width: clamp(56px, 8cqi, 112px); aspect-ratio: 1; border-radius: 50%;
  background: var(--color-accent); color: var(--color-text-on-accent); display: grid; place-items: center;
  box-shadow: var(--extrude-box-2);
  transition: box-shadow var(--motion-hover) var(--ease-house), translate var(--motion-hover) var(--ease-house), background-color var(--motion-hover) var(--ease-house);
}
.kv-player__circle svg { width: 30%; height: 30%; margin-left: 6%; }
.kv-player__label { color: var(--color-text); letter-spacing: .22em; }
@media (hover: hover) and (pointer: fine) {
  .kv-player__btn:hover .kv-player__circle { box-shadow: var(--extrude-box-3); translate: 1px -1px; background: var(--color-accent-hover); }
  .kv-player:hover .kv-player__veil { background: color-mix(in srgb, var(--color-bg) 18%, transparent); }
}
.kv-player__btn:active .kv-player__circle { box-shadow: var(--extrude-box-1); translate: -2px 2px; }
.kv-player__btn:focus-visible { outline: none; }
.kv-player__btn:focus-visible .kv-player__circle { outline: var(--focus-ring-width) solid var(--focus-ring-color); outline-offset: 4px; }
@media (max-width: 560px) { .kv-player__label { display: none; } }
.kv-player video { position: absolute; inset: 0; width: 100%; height: 100%; background: var(--frame-surround); }
.kv-player.is-live .kv-player__poster, .kv-player.is-live .kv-player__veil, .kv-player.is-live .kv-player__btn { display: none; }
.kv-player__loading { position: absolute; inset: auto 0 0 0; z-index: 2; }

/* stills sheet (full tier only) + lightbox */
.kv-stills { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--space-2); }
@media (min-width: 2400px) { .kv-stills { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
@media (max-width: 1200px) { .kv-stills { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 860px) { .kv-stills { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { .kv-stills { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-1); } }
.kv-still { position: relative; display: block; overflow: hidden; aspect-ratio: var(--ar, 16 / 9); border-radius: 2px; background: var(--skeleton-bg); cursor: zoom-in; }
.kv-still img { width: 100%; height: 100%; object-fit: cover; transition: opacity var(--motion-hover) var(--ease-house); }
.kv-js:not(.kv-failsafe) .kv-still img:not(.is-loaded) { opacity: 0; }
.kv-still__n { position: absolute; left: var(--space-2); bottom: var(--space-2); color: var(--color-text); opacity: 0; transition: opacity var(--motion-hover) var(--ease-house); text-shadow: 0 1px 2px rgba(0, 0, 0, .6); }
@media (hover: hover) and (pointer: fine) { .kv-still:hover .kv-still__n { opacity: 1; } }
.kv-still:focus-visible { outline: var(--focus-ring-width) solid var(--frame-ring-focus); outline-offset: var(--focus-ring-offset); }
.kv-stills--lead .kv-still:first-child { grid-column: span 2; grid-row: span 2; }

.kv-lb { width: 100vw; max-width: 100vw; height: 100svh; max-height: 100svh; margin: 0; padding: 0; border: 0; background: transparent; color: var(--color-text); overflow: hidden; }
.kv-lb::backdrop { background: rgba(4, 4, 10, .94); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.kv-lb[open] { display: grid; animation: kv-lb-in var(--motion-enter) var(--ease-house) both; }
@keyframes kv-lb-in { from { opacity: 0; } }
.kv-lb__fig { margin: 0; display: grid; grid-template-rows: 1fr auto; gap: var(--space-4); padding: var(--space-4) var(--kv-gutter); min-height: 0; touch-action: pan-y pinch-zoom; }
.kv-lb__img { width: 100%; height: 100%; min-height: 0; object-fit: contain; user-select: none; -webkit-user-drag: none; }
.kv-lb__bar { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); }
.kv-lb__nav { display: flex; gap: var(--space-2); }

/* loops row (full tier only) */
.kv-loops { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: var(--space-3); }
@media (max-width: 960px) { .kv-loops { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.kv-loop { position: relative; aspect-ratio: var(--ar, 16 / 9); border-radius: var(--radius-media); overflow: hidden; background: var(--skeleton-bg); }
.kv-loop video { width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity var(--motion-hover) var(--ease-house); }
.kv-loop video.is-on { opacity: 1; }

/* credits: plain names; .is-me marks Karan's line */
.kv-credits__label { margin: 0 0 var(--space-4); }
.kv-credits { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--space-10); margin: 0; }
@media (min-width: 1900px) { .kv-credits { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kv-credit { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr); gap: var(--space-4); padding-block: var(--space-4); border-bottom: var(--border-width) solid var(--color-border); align-items: baseline; }
.kv-credit dt { margin: 0; }
.kv-credit dd { margin: 0; font-size: var(--text-body-size); color: var(--color-text-secondary); }
.kv-credit.is-me dt { color: var(--color-text-accent); }
.kv-credit.is-me dd { color: var(--color-text); font-weight: 600; }
@media (max-width: 860px) { .kv-credits { grid-template-columns: 1fr; } }
@media (max-width: 480px) { .kv-credit { grid-template-columns: 1fr; gap: var(--space-1); } }

/* next project: the one blue band */
.kv-next { display: block; position: relative; overflow: hidden; isolation: isolate; background: var(--color-band); color: var(--color-text-on-accent); text-decoration: none; }
.kv-next__in { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: var(--space-8); padding-block: var(--space-16); }
.kv-next__label { color: var(--color-text-on-accent); opacity: .86; }
.kv-next__title { margin: var(--space-3) 0 0; font-family: var(--font-display); font-weight: 600; font-size: var(--text-headline-size); line-height: var(--text-headline-lh); word-spacing: var(--display-word-spacing); }
.kv-next__thumb { width: clamp(160px, 24vw, 480px); aspect-ratio: 16 / 9; border-radius: var(--radius-media); overflow: hidden; box-shadow: var(--extrude-box-3); background: var(--frame-surround); transition: translate var(--motion-hover) var(--ease-house), box-shadow var(--motion-hover) var(--ease-house); }
.kv-next__thumb img { width: 100%; height: 100%; object-fit: cover; }
.kv-next__arrow { display: inline-block; transition: translate var(--motion-hover) var(--ease-house); }
@media (hover: hover) and (pointer: fine) {
  .kv-next:hover .kv-next__thumb { translate: 4px -4px; box-shadow: var(--extrude-box-4); }
  .kv-next:hover .kv-next__arrow { translate: 12px 0; }
}
.kv-next:focus-visible { outline: var(--focus-ring-width) solid var(--color-text); outline-offset: -6px; }
@media (max-width: 720px) { .kv-next__in { grid-template-columns: 1fr; padding-block: var(--space-12); } }

/* --------------------------------------------------------------------------
   13 . REDUCED MOTION: stop every loop and entrance
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  .kv-skeleton, .kv-progress__fill, .kv-work.is-enter, .kv-toast, .kv-lb[open] { animation: none !important; }
}
[data-motion="reduce"] .kv-skeleton, [data-motion="reduce"] .kv-progress__fill, [data-motion="reduce"] .kv-work.is-enter, [data-motion="reduce"] .kv-toast { animation: none !important; }