/*
Theme Name: Ashwin Osari V4
Theme URI: https://ashwinosari.com
Author: Ashwin Osari
Author URI: https://ashwinosari.com
Description: Interactive one-page portfolio — editor-desk hero with a live timeline, editable graph editor and blob mascot; scroll-driven work reveal; Lottie type + grass scenes. Auto-pulls Projects for the homepage reveal (Featured), the /work grid and single project pages; includes About + Contact page templates with a working email form.
Version: 1.7.0
Requires at least: 6.0
Tested up to: 6.6
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: ashwin-v4
Tags: one-page, portfolio, animation, full-width
*/
/* ============================================================
   Ashwin Osari — Portfolio V4
   Design source: Portfolio_V4.fig · Frame 6 (1732 × 8476)
   1 design px = var(--u)  →  fully proportional layout
   ============================================================ */

@font-face {
  font-family: 'Roc Grotesk';
  src: url('assets/fonts/RocGrotesk-Regular.otf') format('opentype');
  font-weight: 400; font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk';
  src: url('assets/fonts/RocGrotesk-Bold.otf') format('opentype');
  font-weight: 700; font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Wide';
  src: url('assets/fonts/RocGrotesk-WideMedium.otf') format('opentype');
  font-weight: 500; font-display: swap;
}
@font-face {
  font-family: 'Roc Grotesk Condensed';
  src: url('assets/fonts/RocGrotesk-Condensed.otf') format('opentype');
  font-weight: 400; font-display: swap;
}

:root {
  --vhu: 1vh; /* small-viewport height unit (svh where supported) */
  --u: calc(100vw / 1732);
  --blue: #395aff;
  --orange: #ff4200;
  --sky: #75d4f9;
  --yellow: #ffce3a;
  --ink: #1b1533;
  --purple: #7a5af5;
  --navy: #2a1a66;
  --lav: #a58df8;
  --roc: 'Roc Grotesk', 'Archivo', sans-serif;
  --dela: 'Dela Gothic One', sans-serif;
  /* everything that used to be JetBrains Mono / 42dot Sans / Luxurious Script
     now runs on Roc Grotesk (weights chosen per element) */
  --mono: 'Roc Grotesk', sans-serif;
  --dot: 'Roc Grotesk', sans-serif;
}

@supports (height: 100svh) {
  :root { --vhu: 1svh; }
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* proximity (not mandatory) so tall scroll-driven sections and the in-between
   logo strip are never force-skipped; clean screens still gently snap into place */
html { scroll-behavior: smooth; scroll-snap-type: y proximity; }

/* every screen: section fills the viewport, design frame scales to fit + centers */
.screen {
  height: calc(var(--vhu) * 100);
  scroll-snap-align: start;
}
.frame { position: relative; flex: none; }
body {
  font-family: var(--roc);
  /* one continuous dot field for the whole page — viewport-locked so it never
     scrolls (the Making section's text stays put against a still background)
     and never seams/patches between sections */
  background-color: #edecf8;
  background-image: radial-gradient(circle, #d5d2ea calc(var(--u) * 1.6), transparent calc(var(--u) * 1.8));
  background-size: calc(var(--u) * 24) calc(var(--u) * 24);
  background-attachment: fixed;
  color: #000;
  overflow-x: hidden;
  overflow-anchor: none;
}
img { display: block; }
button { border: 0; background: none; cursor: pointer; font: inherit; }

/* dotted design-canvas paper */
.paper { background: transparent; }

/* --- tags (rotated mono labels) ------------------------------ */
.tag {
  position: absolute;
  display: inline-block;
  font-family: var(--mono);
  font-size: max(10px, calc(var(--u) * 19));
  letter-spacing: .1em;
  color: #fff;
  padding: calc(var(--u) * 9) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 9);
  white-space: nowrap;
  z-index: 5;
}
.tag-orange { background: var(--orange); }
.tag-sky { background: var(--sky); }
.tag-ink { background: #000; }

/* ============ MENU ============ */
.menu-btn {
  position: fixed;
  top: calc(var(--u) * 51);
  right: calc(var(--u) * 46);
  width: calc(var(--u) * 125);
  z-index: 90;
  display: flex; flex-direction: column; align-items: center;
  transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.menu-btn:hover { transform: scale(1.06) rotate(-2deg); }
.menu-ico { width: calc(var(--u) * 79); height: calc(var(--u) * 64); margin-bottom: calc(var(--u) * -18); position: relative; z-index: 2; filter: drop-shadow(0 calc(var(--u)*3) calc(var(--u)*6) rgba(0,0,60,.25)); }
.menu-word {
  display: block; width: 100%;
  background: #d9d9d9;
  border-radius: calc(var(--u) * 8);
  padding: calc(var(--u) * 26) 0 calc(var(--u) * 10);
  text-align: center;
  font-family: 'Roc Grotesk Condensed', var(--roc);
  font-size: max(11px, calc(var(--u) * 32));
  letter-spacing: .34em; text-indent: .34em;
  color: #000;
}
.menu-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: var(--blue);
  display: flex; flex-direction: column; justify-content: center; align-items: center;
  gap: 4vh;
  opacity: 0; pointer-events: none;
  transition: opacity .35s ease;
}
.menu-overlay.open { opacity: 1; pointer-events: auto; }
.menu-overlay ul { list-style: none; text-align: center; }
.menu-overlay a { color: #fff; text-decoration: none; }
.menu-overlay ul a {
  font-family: var(--dela);
  font-size: clamp(34px, 7vw, 96px);
  line-height: 1.35;
  display: inline-block;
  transition: transform .25s, color .25s;
}
.menu-overlay ul a:hover { color: var(--yellow); }
.menu-close {
  position: absolute; top: 4vh; right: 5vw;
  color: #fff; font-size: clamp(22px, 3vw, 40px);
  transition: transform .3s;
}
.menu-close:hover { transform: rotate(90deg); }
.menu-foot { display: flex; flex-direction: column; gap: 1vh; align-items: center; font-family: var(--mono); font-size: clamp(10px, 1vw, 14px); letter-spacing: .15em; color: #cfd8ff; }
.menu-foot a { color: var(--yellow); }

/* ============ 01 · HERO ============ */
.hero {
  --u: min(calc(100vw / 1732), calc(var(--vhu) * 100 / 1081));
  position: relative;
  width: 100%;
  display: grid;
  place-items: center;
}
.frame-hero {
  width: calc(var(--u) * 1732);
  height: calc(var(--u) * 1081);
}

/* brand wordmark — persistent, always legible over any section */
.brand {
  position: fixed;
  top: calc(var(--u) * 52); left: calc(var(--u) * 54);
  z-index: 95;
  font-family: var(--roc); font-weight: 500;
  font-size: max(15px, calc(var(--u) * 31));
  letter-spacing: -.01em;
  color: #fff; mix-blend-mode: difference;
  text-decoration: none;
  /* hidden over the hero (the "Ashwin" card already reads there) and over the
     footer (it clashed with the big copy); shown for the sections in between */
  opacity: 0; pointer-events: none;
  transition: opacity .3s ease;
}
body.past-hero .brand { opacity: 1; pointer-events: auto; }
body.at-footer .brand { opacity: 0; pointer-events: none; }

/* left tool palette */
.toolbar {
  position: absolute;
  left: calc(var(--u) * 116); top: calc(var(--u) * 248);
  width: calc(var(--u) * 60);
  background: #ffffff;
  border: 1px solid #e6e4f0;
  border-radius: calc(var(--u) * 16);
  box-shadow: 0 calc(var(--u)*14) calc(var(--u)*30) rgba(20, 20, 80, .12);
  padding: calc(var(--u) * 9) 0;
  display: flex; flex-direction: column; align-items: center;
  gap: calc(var(--u) * 4);
  z-index: 6;
}
.tool {
  position: relative;
  width: calc(var(--u) * 40); height: calc(var(--u) * 40);
  border-radius: calc(var(--u) * 9);
  display: grid; place-items: center;
  color: #43414f;
  cursor: pointer;
  transition: background .15s, color .15s, transform .12s;
}
.tool svg { width: calc(var(--u) * 22); height: calc(var(--u) * 22); }
.tool:hover { background: #eeecf8; color: var(--ink); }
.tool:active { transform: scale(.92); }
.tool.active { background: var(--blue); color: #fff; }
/* flyout corner triangle */
.tool .tri {
  position: absolute; right: calc(var(--u) * 6); bottom: calc(var(--u) * 6);
  width: 0; height: 0;
  border-left: calc(var(--u) * 5) solid transparent;
  border-bottom: calc(var(--u) * 5) solid currentColor;
  opacity: .55;
}
.tool.active .tri { opacity: .9; }
.tool.tool-alt { color: #7a5af5; box-shadow: inset 0 0 0 max(1.5px, calc(var(--u) * 2)) #7a5af5; }
.tool.tool-alt.active { background: #7a5af5; color: #fff; box-shadow: none; }

.hero-grey {
  position: absolute;
  left: calc(var(--u) * 968); top: calc(var(--u) * 150);
  width: calc(var(--u) * 620); height: calc(var(--u) * 388);
  background: #bfbfbf;
  border-radius: calc(var(--u) * 4);
}

/* blob character — small accent perched on the panel's bottom-right corner
   (scale + placement per the Figma reference); always on top, never covered */
.star-wrap {
  position: absolute;
  left: calc(var(--u) * 1529); top: calc(var(--u) * 460);
  width: calc(var(--u) * 118); height: calc(var(--u) * 118);
  z-index: 8;
}
.star-svg { width: 100%; height: 100%; overflow: visible; }
#starBody { transform-origin: 463px 463px; }
.mouth, .pupil, .lid { pointer-events: none; }

/* Ashwin canvas card — white card, blue name */
.ash-card {
  position: absolute;
  left: calc(var(--u) * 264); top: calc(var(--u) * 356);
  width: calc(var(--u) * 770); height: calc(var(--u) * 300);
  background: #ffffff;
  box-shadow: 0 calc(var(--u)*18) calc(var(--u)*40) rgba(20, 20, 80, .16);
  z-index: 3;
}
.card-tag { left: calc(var(--u) * -2); top: calc(var(--u) * -51); }
.ash-name {
  position: absolute;
  left: 0; right: 0; top: 50%; transform: translateY(-50%);
  text-align: center;
  font-family: var(--dela);
  font-size: calc(var(--u) * 128);
  line-height: 1;
  color: var(--blue);
  user-select: none;
}
.handle {
  position: absolute;
  width: calc(var(--u) * 17); height: calc(var(--u) * 17);
  background: #fff;
  border: calc(var(--u) * 3.2) solid #000;
  z-index: 6;
}
.h-tl { left: calc(var(--u) * -11); top: calc(var(--u) * -11); }
.h-tr { right: calc(var(--u) * -11); top: calc(var(--u) * -11); }
.h-bl { left: calc(var(--u) * -11); bottom: calc(var(--u) * -11); }
.h-br { right: calc(var(--u) * -11); bottom: calc(var(--u) * -11); }
/* independent canvas object — sits above the Ashwin card, moves on its own */
.aa-card {
  position: absolute;
  left: calc(var(--u) * 734); top: calc(var(--u) * 180);
  width: calc(var(--u) * 197); height: calc(var(--u) * 186);
  background: var(--yellow);
  border-radius: calc(var(--u) * 20);
  box-shadow: 0 calc(var(--u)*14) calc(var(--u)*30) rgba(20, 20, 80, .22);
  text-align: center;
  z-index: 4;
  transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.aa-card:hover { transform: rotate(-4deg) scale(1.05); }
.aa-big {
  display: block;
  margin-top: calc(var(--u) * 25);
  font-family: var(--dela);
  font-size: calc(var(--u) * 79);
  line-height: 1;
  color: var(--ink);
}
.aa-lb {
  display: block;
  margin-top: calc(var(--u) * 6);
  font-family: var(--mono);
  font-size: max(7px, calc(var(--u) * 13));
  letter-spacing: .15em;
  color: var(--ink);
}

/* ===== multi-track timeline ===== */
.timeline {
  position: absolute;
  left: calc(var(--u) * 118); top: calc(var(--u) * 694);
  width: calc(var(--u) * 1052);
  z-index: 2;
  font-family: var(--mono);
}
.tl-panel {
  position: relative;
  background: #f2f0fb;
  border: 1px solid #e3e0f2;
  border-radius: calc(var(--u) * 14);
  box-shadow: 0 calc(var(--u)*18) calc(var(--u)*40) rgba(20, 20, 80, .14);
  padding: calc(var(--u) * 6) calc(var(--u) * 16) calc(var(--u) * 12);
  overflow: hidden;
}
.tl-row {
  display: grid;
  grid-template-columns: calc(var(--u) * 300) 1fr;
  align-items: center;
  height: calc(var(--u) * 43);
}
.tl-rowhead { height: calc(var(--u) * 34); }
.tl-label {
  display: flex; align-items: center;
  gap: calc(var(--u) * 11);
  min-width: 0;
  font-size: max(9px, calc(var(--u) * 19));
  color: var(--ink);
  white-space: nowrap;
}
.tl-lock, .tl-eye {
  flex: none;
  width: calc(var(--u) * 17); height: calc(var(--u) * 17);
  background-repeat: no-repeat; background-position: center; background-size: contain;
  opacity: .5;
}
.tl-lock { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6780' stroke-width='2'%3E%3Crect x='5' y='11' width='14' height='9' rx='2'/%3E%3Cpath d='M8 11V8a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E"); }
.tl-eye { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%236a6780' stroke-width='2'%3E%3Cpath d='M2 12s4-6 10-6 10 6 10 6-4 6-10 6-10-6-10-6z'/%3E%3Ccircle cx='12' cy='12' r='2.5'/%3E%3C/svg%3E"); }
.tl-sw { flex: none; width: calc(var(--u) * 17); height: calc(var(--u) * 17); border-radius: calc(var(--u) * 4); background: var(--c, #ccc); }
.tl-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.tl-track {
  position: relative; height: 100%;
  border-left: 1px solid #d9d5ec;
}
.tl-clip {
  position: absolute; top: 50%; transform: translateY(-50%);
  height: calc(var(--u) * 25);
  border-radius: calc(var(--u) * 6);
  background: var(--c);
  transition: filter .2s, box-shadow .2s;
}
.tl-clip.lit { filter: brightness(1.14) saturate(1.1); box-shadow: 0 0 0 max(1.5px, calc(var(--u)*2.4)) rgba(255,255,255,.85); }
.tl-ruler {
  display: flex; justify-content: space-between; align-items: center;
  font-size: max(8px, calc(var(--u) * 16));
  color: #8b87a0;
  border-left: 1px solid transparent;
  padding-left: calc(var(--u) * 4);
}
.tl-playarea {
  position: absolute;
  left: calc(var(--u) * 316); right: calc(var(--u) * 16);
  top: calc(var(--u) * 6); bottom: calc(var(--u) * 12);
  pointer-events: none;
}
.playhead {
  position: absolute; top: 0; bottom: 0; left: 50%;
  width: 0;
  will-change: left;
}
.ph-line {
  position: absolute;
  left: 0; top: calc(var(--u) * 22); bottom: 0;
  width: max(1.5px, calc(var(--u) * 2));
  background: #2f6fed;
  transform: translateX(-50%);
}
.ph-tag {
  position: absolute; top: 0; left: 0;
  transform: translateX(-50%);
  background: #2f6fed; color: #fff;
  font-size: max(8px, calc(var(--u) * 15));
  padding: calc(var(--u) * 2) calc(var(--u) * 7);
  border-radius: calc(var(--u) * 4);
  white-space: nowrap;
}

/* ===== graph editor ===== */
.graph {
  position: absolute;
  left: calc(var(--u) * 1208); top: calc(var(--u) * 588);
  width: calc(var(--u) * 408); height: calc(var(--u) * 408);
  background: #1c1c20;
  border-radius: calc(var(--u) * 16);
  box-shadow: 0 calc(var(--u)*20) calc(var(--u)*44) rgba(0, 0, 0, .32);
  overflow: hidden;
  z-index: 5;
}
#graphCanvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.g-handle {
  position: absolute;
  width: calc(var(--u) * 15); height: calc(var(--u) * 15);
  margin: calc(var(--u) * -7.5) 0 0 calc(var(--u) * -7.5);
  background: #fff;
  border-radius: calc(var(--u) * 2);
  cursor: grab;
  z-index: 3;
}
.g-handle:active { cursor: grabbing; }
.g-key { width: calc(var(--u) * 17); height: calc(var(--u) * 17); margin: calc(var(--u) * -8.5) 0 0 calc(var(--u) * -8.5); }
.g-ctl { box-shadow: 0 0 0 max(1px, calc(var(--u)*1.5)) rgba(0,0,0,.25); }
.g-label {
  position: absolute;
  left: 0; right: 0; bottom: calc(var(--u) * 10);
  text-align: center;
  font-family: var(--mono);
  font-size: max(7px, calc(var(--u) * 10));
  letter-spacing: .2em;
  color: #6a6a75;
  pointer-events: none;
}

/* ============ 02 · SHOWREEL ============ */
.showreel { position: relative; width: 100%; z-index: 2; }
.reel-media {
  position: relative;
  display: block;
  width: 100%; height: 100%;
  overflow: hidden;
  cursor: none;
  background: #111;
}
.reel-media img {
  width: 100%; height: 100%;
  object-fit: cover;
  animation: kenburns 18s ease-in-out infinite alternate;
  filter: brightness(.8);
}
.reel-video {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  filter: brightness(.85);
}
@keyframes kenburns {
  from { transform: scale(1) translateX(0); }
  to   { transform: scale(1.09) translateX(calc(var(--u) * -30)); }
}
.reel-cursor {
  position: absolute; left: 0; top: 0;
  padding: calc(var(--u) * 18) calc(var(--u) * 30);
  background: var(--yellow);
  border-radius: 99px;
  font-family: var(--mono);
  font-size: max(11px, calc(var(--u) * 18));
  letter-spacing: .12em;
  color: var(--ink);
  transform: translate(-50%, -50%) scale(0);
  transition: transform .2s ease;
  pointer-events: none;
  white-space: nowrap;
}
.reel-media:hover .reel-cursor { transform: translate(-50%, -50%) scale(1); }
.reel-script {
  position: absolute;
  left: calc(var(--u) * 203);
  bottom: calc(var(--u) * -207);
  font-family: 'Luxurious Script', cursive;
  font-weight: 400;
  font-size: calc(var(--u) * 526);
  line-height: 1;
  color: #ebebeb;
  pointer-events: none;
  text-shadow: 0 calc(var(--u)*10) calc(var(--u)*60) rgba(0,0,0,.35);
  z-index: 3;
}

/* ============ 03 · MAKING STUFF + scroll-driven work reveal ============ */
/* tall runway: intro screen + one screen of scroll per project (6) */
.making {
  --mk-count: 6;
  position: relative;
  width: 100%;
  height: calc(var(--vhu) * 100 * (1.6 + var(--mk-count) * 0.72));
}
.mk-sticky {
  position: sticky;
  top: 0;
  height: calc(var(--vhu) * 100);
  overflow: hidden;
}
/* intro — pinned, stays centred the whole time (Making cool [word]) */
.mk-center {
  position: absolute; inset: 0;
  display: grid;
  place-items: center;
  width: 100%;
  z-index: 3;
  pointer-events: none;
}
.mk-scrollcue {
  position: absolute;
  left: 50%; bottom: 8%;
  transform: translateX(-50%);
  font-family: var(--mono);
  font-size: max(10px, calc(var(--u) * 20));
  letter-spacing: .28em;
  color: var(--blue);
  opacity: var(--mk-cue, 1);
  animation: cuebob 1.8s ease-in-out infinite;
}
@keyframes cuebob { 0%,100% { transform: translate(-50%, 0); } 50% { transform: translate(-50%, 6px); } }

/* reveal stage — thumbnails fly in diagonally, scrubbed by scroll */
.mk-reveal {
  position: absolute; inset: 0;
  overflow: hidden;
  opacity: var(--mk-work, 0);
  pointer-events: none;
}
.mk-track {
  position: absolute; top: 0; left: 0;
  height: 100%;
  display: flex;
  will-change: transform;
}
.mk-proj {
  position: relative;
  width: 100vw; height: 100%;
  flex: 0 0 100vw;
  text-decoration: none;
  pointer-events: none;
}
.mk-thumb {
  position: absolute;
  width: min(36vh, 32vw); aspect-ratio: 1;
  border-radius: min(2.4vh, 2vw);
  overflow: hidden;
  box-shadow: 0 calc(var(--vhu) * 3) calc(var(--vhu) * 7) rgba(10, 12, 40, .3);
  transform: translateY(var(--thumb-ty, 0px)) scale(var(--thumb-s, .4)) rotate(var(--thumb-r, -6deg));
  opacity: var(--thumb-o, 0);
  z-index: 1;
  pointer-events: auto;
}
.mk-proj[data-side="l"] .mk-thumb { left: 11vw; top: 13vh; --thumb-r: -7deg; }
.mk-proj[data-side="r"] .mk-thumb { right: 11vw; bottom: 13vh; --thumb-r: 6deg; }
.mk-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.mk-allwork {
  position: absolute;
  left: 50%; bottom: 6%;
  transform: translateX(-50%);
  z-index: 4;
  font-family: var(--mono);
  font-size: max(10px, calc(var(--u) * 20));
  letter-spacing: .18em;
  color: #fff;
  background: var(--ink);
  padding: calc(var(--u) * 12) calc(var(--u) * 26);
  border-radius: 999px;
  text-decoration: none;
  opacity: var(--mk-work, 0);
  transition: transform .2s;
}
.mk-allwork:hover { transform: translateX(-50%) scale(1.05); }
.making-inner {
  position: relative;
  width: calc(var(--u) * 809); height: calc(var(--u) * 451);
}
.mk-line1 {
  position: absolute;
  left: calc(var(--u) * 59); top: 0;
  font-family: var(--roc); font-weight: 700;
  font-size: calc(var(--u) * 202);
  line-height: 1.2;
  color: #000;
  user-select: none;
}
/* rotating word — now the user's Lottie (stuff → ads → motion → films),
   scaled so its baked-in word (1116px) matches the old 202u size:
   4240×1700 canvas → 767×308u. Highlight box + caret are baked into the comp. */
.mk-line2 {
  position: absolute;
  left: calc(var(--u) * 21); top: calc(var(--u) * 186);
  width: calc(var(--u) * 767); height: calc(var(--u) * 308);
}
.mk-lottie { width: 100%; height: 100%; }
.mk-lottie svg { display: block; }
.mk-tag1 { left: calc(var(--u) * 0); top: calc(var(--u) * 80); transform: rotate(-12deg); }
.mk-tag2 { left: calc(var(--u) * 727); top: calc(var(--u) * 121); transform: rotate(15.6deg); color: #fff; }

/* ============ 04 · BRAND STRIPS (slim standalone band) ============ */
.brands {
  width: 100%;
  display: grid;
  gap: clamp(6px, 0.6vw, 12px);
  padding: clamp(10px, 1.4vw, 26px) 0;
  background: transparent;      /* body's dot field shows through — no white patch */
  scroll-snap-align: none;
}
.strip {
  position: relative;
  width: 100%;
  height: clamp(40px, 4.4vw, 76px);
  background: var(--blue);
  overflow: hidden;
  display: flex; align-items: center;
}
.strip-track {
  display: flex; align-items: center;
  gap: clamp(24px, 3vw, 56px);
  padding-right: clamp(24px, 3vw, 56px);
  white-space: nowrap;
  will-change: transform;
}
.strip-a .strip-track { animation: marq 28s linear infinite; }
.strip-b .strip-track { animation: marq 28s linear infinite reverse; }
@keyframes marq { to { transform: translateX(-50%); } }
.strip-track span {
  font-family: var(--roc); font-weight: 700;
  font-size: clamp(13px, 1.5vw, 26px);
  letter-spacing: .06em;
  color: #fff;
}
.strip-track i {
  font-style: normal;
  color: var(--yellow);
  font-size: clamp(9px, 1vw, 17px);
}

/* ============ 05 · FEATURED (4:3 film unit) ============ */
.featured { display: grid; place-items: center; }
/* the whole unit is 4:3 — sized to fit the screen with breathing room */
.feat-unit {
  position: relative;
  width: min(78vw, calc(var(--vhu) * 76 * 4 / 3));
  aspect-ratio: 4 / 3;
  border-radius: clamp(8px, 1vw, 18px);
  overflow: hidden;                 /* clips the blur so every corner is covered */
  box-shadow: 0 clamp(14px,2vw,34px) clamp(30px,4vw,70px) rgba(20,20,80,.24);
  text-decoration: none;
  display: block;
  isolation: isolate;
}
/* blurred fill — scaled up so the blur never leaves soft/empty corners */
.feat-blur {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  transform: scale(1.25);           /* pushes blur bleed past every edge */
  filter: blur(clamp(18px, 2.2vw, 42px)) saturate(1.05) brightness(.82);
  z-index: 0;
}
/* sharp, scaled-down copy sitting on top */
.feat-inner {
  position: absolute; z-index: 1;
  left: 50%; top: 47%;
  transform: translate(-50%, -50%);
  width: 72%; aspect-ratio: 4 / 3;
  display: block;
  border-radius: clamp(4px, .5vw, 9px);
  overflow: hidden;
  box-shadow: 0 clamp(8px,1.2vw,22px) clamp(18px,2.4vw,44px) rgba(0,0,0,.34);
}
.feat-sharpv { width: 100%; height: 100%; object-fit: cover; display: block; }
/* crop / transform overlay — sits exactly on the sharp video so the corner
   handles + grid reach every corner of the un-blurred frame */
.feat-crop { position: absolute; inset: 0; pointer-events: none; border: max(1.5px, .18vw) solid var(--blue); }
.feat-crop .fw-v, .feat-crop .fw-h { position: absolute; background: var(--blue); opacity: .8; }
.feat-crop .fw-v { top: 0; bottom: 0; width: max(1px, .12vw); }
.feat-crop .fw-v1 { left: 33.33%; } .feat-crop .fw-v2 { left: 66.66%; }
.feat-crop .fw-h { left: 0; right: 0; height: max(1px, .12vw); }
.feat-crop .fw-h1 { top: 33.33%; } .feat-crop .fw-h2 { top: 66.66%; }
.feat-crop .fw-corner {
  position: absolute; width: clamp(9px,1.1vw,20px); aspect-ratio: 1;
  border: max(2px,.28vw) solid var(--blue); background: #fff;
}
.feat-crop .fw-c1 { left: calc(clamp(9px,1.1vw,20px) / -2); top: calc(clamp(9px,1.1vw,20px) / -2); }
.feat-crop .fw-c2 { right: calc(clamp(9px,1.1vw,20px) / -2); top: calc(clamp(9px,1.1vw,20px) / -2); }
.feat-crop .fw-c3 { left: calc(clamp(9px,1.1vw,20px) / -2); bottom: calc(clamp(9px,1.1vw,20px) / -2); }
.feat-crop .fw-c4 { right: calc(clamp(9px,1.1vw,20px) / -2); bottom: calc(clamp(9px,1.1vw,20px) / -2); }
.feat-crop .fw-grip {
  position: absolute; left: 50%; transform: translateX(-50%);
  width: clamp(14px,1.6vw,28px); height: clamp(5px,.6vw,11px);
  border: max(2px,.28vw) solid var(--blue); background: #fff;
}
.feat-crop .fw-gt { top: calc(clamp(5px,.6vw,11px) / -2); }
.feat-crop .fw-gb { bottom: calc(clamp(5px,.6vw,11px) / -2); }
/* hover overlay — sits over the sharp frame, invites the click */
.feat-hover {
  position: absolute; z-index: 4;
  left: 50%; top: 47%; transform: translate(-50%, -50%);
  width: 72%; aspect-ratio: 4 / 3;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .55em;
  border-radius: clamp(4px, .5vw, 9px);
  background: rgba(12, 10, 30, .58);
  backdrop-filter: blur(2px);
  opacity: 0; transition: opacity .3s ease;
  pointer-events: none;
}
.feat-unit:hover .feat-hover { opacity: 1; }
.feat-hplay {
  width: clamp(38px, 4.4vw, 78px); aspect-ratio: 1;
  display: grid; place-items: center;
  background: var(--yellow); color: var(--ink);
  border-radius: 999px;
  font-size: clamp(14px, 1.5vw, 26px);
  padding-left: .12em;
  box-shadow: 0 clamp(6px,1vw,16px) clamp(14px,2vw,30px) rgba(0,0,0,.35);
  transform: scale(.85); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.feat-unit:hover .feat-hplay { transform: scale(1); }
.feat-htext {
  font-family: var(--roc); font-weight: 700;
  font-size: clamp(16px, 2vw, 34px); line-height: 1;
  color: #fff; letter-spacing: -.01em;
}
.feat-hsub {
  font-family: var(--mono); font-size: clamp(9px,.85vw,14px);
  letter-spacing: .2em; color: var(--sky);
}
.feat-unit:hover .feat-inner { box-shadow: 0 clamp(10px,1.6vw,28px) clamp(22px,3vw,56px) rgba(0,0,0,.42); }
/* labels — stacked on the right edge of the crop (original placement) */
.feat-tag1 { left: auto; right: 8%; top: 44%; font-size: clamp(9px,.9vw,15px); }
.feat-tag2 { left: auto; right: 8%; top: 52%; font-size: clamp(9px,.9vw,15px); color: #000; }
.feat-kicker {
  position: absolute; z-index: 2; left: 4%; bottom: 15%;
  background: var(--blue); color: #fff;
  font-family: var(--mono); font-size: clamp(8px,.8vw,13px); letter-spacing: .18em;
  padding: .5em 1em;
}
.feat-title {
  position: absolute; z-index: 2; left: 4%; bottom: 7.5%;
  background: #e6e6e6; color: #000;
  font-family: var(--roc); font-weight: 700;
  font-size: clamp(20px,3.1vw,54px); line-height: 1;
  padding: .28em .42em; white-space: nowrap;
}
.feat-sub {
  position: absolute; z-index: 2; right: 4%; bottom: 4%;
  background: var(--blue); color: #fff;
  font-family: var(--roc);
  font-size: clamp(11px,1.5vw,26px); line-height: 1;
  padding: .6em .8em; white-space: nowrap;
}

/* ============ 06 · FROM RAW TO DAMN ============ */
.typo {
  --u: min(calc(100vw / 1732), calc(var(--vhu) * 100 / 1033));
  position: relative;
  width: 100%;
  background: var(--blue);
  overflow: hidden;
  display: grid;
  place-items: center;
}
.frame-typo {
  width: calc(var(--u) * 1732);
  height: calc(var(--u) * 1033);
}
.typo-big {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * 33);
  text-align: center;
  font-family: var(--dela);
  font-weight: 400;
  font-size: calc(var(--u) * 347);
  line-height: .8;
  letter-spacing: .02em;
  color: #fff;
  user-select: none;
}
.typo-sub {
  position: absolute;
  left: 0; right: 0;
  top: calc(var(--u) * 946);
  text-align: center;
  font-family: var(--roc); font-weight: 500;
  font-size: calc(var(--u) * 34);
  letter-spacing: .26em;
  text-transform: uppercase;
  text-indent: .26em;
  line-height: 1;
  color: rgba(255, 255, 255, .72);
}

/* pills — shared */
.pill {
  position: absolute;
  font-family: var(--dot);
  font-weight: 700;
  color: #fff;
  border-radius: 999px;
  box-shadow: 0 calc(var(--u)*16) calc(var(--u)*36) rgba(10, 5, 50, .35);
  z-index: 6;
  display: flex; align-items: center; justify-content: center;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1);
  overflow: visible;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}
.pill:hover { transform: scale(1.05); }
.pill:active { transform: scale(.97); }

/* scrub */
.p-scrub {
  left: calc(var(--u) * 704); top: calc(var(--u) * 147);
  width: calc(var(--u) * 214); height: calc(var(--u) * 70);
  background: var(--purple);
  font-size: calc(var(--u) * 35);
  cursor: ew-resize;
  touch-action: none;
}
.ps-text { letter-spacing: .01em; pointer-events: none; }
.ps-playhead {
  position: absolute;
  left: 26%; top: 0; bottom: 0;
  width: 0;
  pointer-events: none;
}
.ps-flag {
  position: absolute;
  left: calc(var(--u) * -11); top: 0;
  width: calc(var(--u) * 22); height: calc(var(--u) * 16);
  background: #75a1f9;
  clip-path: polygon(0 0, 100% 0, 100% 45%, 50% 100%, 0 45%);
}
.ps-line {
  position: absolute;
  left: max(-1px, calc(var(--u) * -1.5)); top: 0;
  width: max(2px, calc(var(--u) * 3)); height: 100%;
  background: #75a1f9;
}
.ps-tc {
  position: absolute;
  top: calc(var(--u) * -34);
  left: 50%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: max(9px, calc(var(--u) * 16));
  background: #0a0528;
  color: #75d4f9;
  padding: calc(var(--u) * 4) calc(var(--u) * 10);
  border-radius: calc(var(--u) * 6);
  opacity: 0;
  transition: opacity .2s;
  pointer-events: none;
}
.p-scrub.scrubbing .ps-tc { opacity: 1; }

/* render */
.p-render {
  left: calc(var(--u) * 158); top: calc(var(--u) * 433);
  width: calc(var(--u) * 353); height: calc(var(--u) * 96);
  background: var(--navy);
  font-size: calc(var(--u) * 49);
  overflow: hidden;
}
.pr-fill {
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 0%;
  background: var(--purple);
  transition: none;
}
.pr-text { position: relative; z-index: 1; letter-spacing: .01em; }

/* cut */
.p-cut {
  left: calc(var(--u) * 1229); top: calc(var(--u) * 453);
  width: calc(var(--u) * 220); height: calc(var(--u) * 103);
  background: var(--yellow);
  color: var(--ink);
  font-size: calc(var(--u) * 52);
}
.pc-inner { display: flex; align-items: center; gap: calc(var(--u) * 14); pointer-events: none; }
.razor { width: calc(var(--u) * 46); height: calc(var(--u) * 46); }
.p-cut.cutting { animation: cutsnap .55s ease; }
@keyframes cutsnap {
  0% { clip-path: inset(0 0 0 0); transform: none; }
  25% { transform: rotate(-2deg); }
  45% { transform: translateX(calc(var(--u) * -9)) rotate(-4deg); }
  60% { transform: translateX(calc(var(--u) * 7)) rotate(3deg); }
  100% { transform: none; }
}
.cut-half {
  position: absolute;
  border-radius: 999px;
  background: var(--yellow);
  z-index: 7;
  pointer-events: none;
  display: flex; align-items: center; justify-content: center;
  color: var(--ink);
  font-family: var(--dot); font-weight: 700;
}

/* heart */
.p-heart {
  left: calc(var(--u) * 389); top: calc(var(--u) * 719);
  width: calc(var(--u) * 224); height: calc(var(--u) * 93);
  background: var(--ink);
  font-size: calc(var(--u) * 47);
  gap: calc(var(--u) * 12);
}
.ph-heart { display: inline-block; transition: transform .15s; }
.p-heart.pop .ph-heart { animation: heartpop .45s cubic-bezier(.34,1.56,.64,1); color: #ff4d6d; }
@keyframes heartpop { 0% { transform: scale(1); } 40% { transform: scale(1.55); } 100% { transform: scale(1); } }
.burst-heart {
  position: absolute;
  font-size: calc(var(--u) * 40);
  color: #ff4d6d;
  pointer-events: none;
  z-index: 5;
  animation: heartrise 1.15s ease-out forwards;
}
@keyframes heartrise {
  0% { transform: translate(0, 0) scale(.4); opacity: 0; }
  15% { opacity: 1; }
  100% { transform: translate(var(--hx, 0), calc(var(--u) * -260)) scale(1.15) rotate(var(--hr, 0deg)); opacity: 0; }
}

/* export */
.p-export {
  left: calc(var(--u) * 1339); top: calc(var(--u) * 713);
  width: calc(var(--u) * 313); height: calc(var(--u) * 104);
  background: var(--lav);
  color: var(--ink);
  font-size: calc(var(--u) * 53);
  overflow: visible;
}
.pe-text { pointer-events: none; }
.mp4-chip {
  position: absolute;
  left: 50%; top: 0;
  transform: translateX(-50%);
  background: #fff;
  color: var(--ink);
  font-family: var(--mono);
  font-size: max(10px, calc(var(--u) * 20));
  padding: calc(var(--u) * 8) calc(var(--u) * 16);
  border-radius: calc(var(--u) * 8);
  box-shadow: 0 calc(var(--u)*8) calc(var(--u)*20) rgba(0, 0, 0, .3);
  pointer-events: none;
  z-index: 8;
  animation: chipfly 1.3s cubic-bezier(.22,.9,.35,1) forwards;
}
@keyframes chipfly {
  0% { transform: translate(-50%, 0) scale(.5); opacity: 0; }
  20% { opacity: 1; }
  100% { transform: translate(-50%, calc(var(--u) * -300)) scale(1) rotate(-6deg); opacity: 0; }
}

/* ============ 07 · GRASS — pinned, wipes to the graded plate ============ */
.grass {
  position: relative;
  width: 100%;
  height: calc(var(--vhu) * 260);      /* runway: hold, then wipe */
  background: #0c1606;
}
.grass-sticky {
  position: sticky; top: 0;
  height: calc(var(--vhu) * 100);
  overflow: hidden;
}
.grass-plate {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  user-select: none;
}
/* flat plate sits underneath; graded plate is revealed by the wipe (JS sets --wipe) */
.grass-graded {
  clip-path: inset(0 calc(100% - var(--wipe, 0%)) 0 0);
  will-change: clip-path;
}
.grass-wipeline {
  position: absolute; top: 0; bottom: 0;
  left: var(--wipe, 0%);
  width: max(2px, calc(var(--vhu) * .35));
  background: linear-gradient(180deg, rgba(255,255,255,.15), #fff 12%, #fff 88%, rgba(255,255,255,.15));
  box-shadow: 0 0 calc(var(--vhu)*2) rgba(255,255,255,.7);
  opacity: var(--wipe-on, 0);
  transition: opacity .3s;
  z-index: 3;
}
/* text lottie sits above both plates */
.grass-text {
  position: absolute; inset: 0;
  z-index: 4;
  pointer-events: none;
  opacity: 0;                 /* stays hidden until it first plays (no static flash) */
  transition: opacity .3s ease;
}
.grass-text.on { opacity: 1; }
.grass-text svg { display: block; }
.grass-hint {
  position: absolute; z-index: 5;
  left: 50%; bottom: 7%; transform: translateX(-50%);
  font-family: var(--mono);
  font-size: max(10px, calc(var(--vhu) * 1.5));
  letter-spacing: .26em;
  color: #fff;
  opacity: var(--hint, 0);
  transition: opacity .4s;
  text-shadow: 0 1px 8px rgba(0,0,0,.5);
}

/* ============ 08 · FOOTER ============ */
/* Layout mirrors Figma "Footer web+smartphone" (frame 1732×911):
   headline top-left at 70/75, dog at 943/377 (800.6 wide), bar across the base. */
.footer {
  position: relative;
  width: 100%;
  background: #fff;
  display: flex; flex-direction: column;
  padding: 0 0 clamp(14px, 1.8vw, 26px);
  gap: 0;
}
/* stage for the headline + dog — everything above the bar */
.foot-inner {
  position: relative;
  flex: 1 1 auto; min-height: 0;
  display: block;
}
.foot-big {
  position: absolute;
  left: 4.04%;                     /* 70 / 1732 */
  /* the mock's block sits 75/1732 from the top of an 829/1732-tall stage —
     anchor off the centre so a taller-than-design footer stays balanced */
  top: max(1.5vw, calc(50% - 19.6vw));
  margin: 0;
  font-family: var(--roc); font-weight: 700;
  font-size: min(17.28vw, 330px);  /* 299.36 / 1732 */
  line-height: .79; letter-spacing: -.05em;
  color: var(--blue);
  user-select: none;
}
.dog-wrap {
  position: absolute;
  left: 54.45%;                    /* 943 / 1732 */
  top: calc(50% - 2.17vw);         /* 377 / 1732, same centre anchor as the copy */
  width: 46.22%;                   /* 800.6 / 1732 */
}
.dog-wrap svg { width: 100%; height: auto; overflow: visible; display: block; }

/* the bottom rule + row */
.foot-bar {
  flex: none;
  margin: 0 clamp(20px, 4vw, 64px);
  display: flex; justify-content: space-between; align-items: center;
  gap: 1.2em;
  border-top: 1px solid #eceaf6;
  padding-top: clamp(14px, 1.8vw, 26px);
  font-family: var(--mono);
  font-size: clamp(10px, 1vw, 13px);
  letter-spacing: .15em; color: #6d6884;
}
.foot-bar .foot-links {
  position: static; left: auto; right: auto; bottom: auto;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(16px, 2.4vw, 44px); flex: 1;
}
.foot-bar .socials { display: inline-flex; gap: 14px; }
.foot-bar .socials a { color: var(--blue); display: inline-flex; }
.foot-bar .socials a:hover { color: var(--ink); }

/* the dog barks "cut cut" */
.dog-head { transform-origin: 96px 104px; animation: dogbark 3.2s ease-in-out infinite; }
@keyframes dogbark {
  0%, 54%, 100% { transform: rotate(0deg) translateY(0); }
  58%  { transform: rotate(-10deg) translateY(-3px); }
  64%  { transform: rotate(0deg) translateY(0); }
  70%  { transform: rotate(-10deg) translateY(-3px); }
  76%  { transform: rotate(0deg) translateY(0); }
}
.dog-tail { transform-origin: 298px 96px; animation: wag .9s ease-in-out infinite alternate; }
@keyframes wag { from { transform: rotate(-12deg); } to { transform: rotate(14deg); } }
.cut-word {
  position: absolute;
  font-family: var(--roc); font-weight: 700;
  letter-spacing: -.04em;
  color: var(--blue);
  opacity: 0;
  animation: cutbark 3.2s ease-out infinite;
  pointer-events: none;
  white-space: nowrap;
}
.cut-w1 { left: -6%;  top: 26%; font-size: clamp(18px, 3.4vw, 58px); }
.cut-w2 { left: -2%;  top: 44%; font-size: clamp(15px, 2.8vw, 47px); animation-delay: .38s; }
@keyframes cutbark {
  0%, 54%   { opacity: 0; transform: translate(10px, 6px) scale(.5) rotate(-4deg); }
  60%       { opacity: 1; transform: translate(-4px, -6px) scale(1) rotate(-3deg); }
  72%       { opacity: .9; transform: translate(-16px, -18px) scale(1.04) rotate(-6deg); }
  84%, 100% { opacity: 0; transform: translate(-26px, -30px) scale(1.06) rotate(-8deg); }
}

/* phone: stack it like the Figma "iPhone 17" frame (419×911) */
@media (max-width: 760px) {
  /* content-sized on phones (the 100vh screen height leaves the dog floating) */
  .footer { height: auto; min-height: 0; padding: 0 0 18px; gap: 0; }
  .foot-inner { display: block; flex: 0 1 auto; padding: 0 3.6vw; }
  /* back into normal flow — absolute placement only makes sense on the wide frame */
  .foot-big {
    position: static;
    margin: 30vw 0 0; padding-left: 3.1vw;   /* 32 / 419 from the frame edge */
    font-size: 16.65vw;                       /* 69.79 / 419 */
    line-height: .79; text-align: left;
  }
  .fb-br2 { display: none; }                  /* "to the final" on one line */
  .dog-wrap { position: static; width: 97.1%; margin: 9vw auto 0; }
  .foot-bar { flex-wrap: wrap; margin: 20.6vw 3.6vw 0; }
  .foot-bar .foot-links {
    order: -1; flex: 0 0 100%;   /* full row, so © + socials wrap underneath */
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .76em;                  /* line-height 1.76 in the mock */
    font-family: var(--roc); font-weight: 700;
    font-size: clamp(19px, 7.11vw, 34px); letter-spacing: 0;
    padding: 0 0 clamp(14px,4vw,22px) 3.1vw; margin-bottom: clamp(12px,3vw,18px);
    border-bottom: 1px solid #eceaf6;
  }
  .foot-bar .foot-links a { color: var(--ink); opacity: 1; }
  .foot-bar .sf-copy { padding-left: 3.1vw; font-size: clamp(10px, 3.1vw, 13px); }
  .cut-w1 { font-size: 22px; } .cut-w2 { font-size: 18px; }
}

/* small screens: keep the scaled replica but tidy the tiny bits */
@media (max-width: 700px) {
  .g-label { display: none; }
  .menu-btn { width: 64px; }
  .menu-ico { width: 40px; height: 32px; margin-bottom: -9px; }
  .menu-word { font-size: 9px; letter-spacing: .22em; text-indent: .22em; padding: 12px 0 6px; }
  .ps-tc { display: none; }
}

/* reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---- draggable canvas objects + timeline editing ---- */
.ash-card { cursor: grab; }
.ash-card.dragging, #toolbar.dragging { box-shadow: 0 calc(var(--u)*26) calc(var(--u)*54) rgba(20,20,80,.30); z-index: 20; }
#toolbar { cursor: grab; }
.tl-clip { cursor: grab; touch-action: none; }
.tl-clip.dragging { filter: brightness(1.15); box-shadow: 0 0 0 max(2px, calc(var(--u)*2.6)) #fff, 0 calc(var(--u)*6) calc(var(--u)*14) rgba(20,20,80,.3); z-index: 5; }
.tl-row.sel .tl-label { background: rgba(57,90,255,.10); border-radius: calc(var(--u)*6); }
.tl-row.sel .tl-name { color: var(--blue); font-weight: 700; }
.tl-panel { user-select: none; }

/* ---- footer: page links + responsive copy ---- */
.foot-links {
  position: absolute; z-index: 6;
  left: 0; right: 0; bottom: calc(var(--u) * 24);
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: calc(var(--u) * 40);
  font-family: var(--mono); font-weight: 500;
  font-size: max(10px, calc(var(--u) * 18));
  letter-spacing: .16em;
}
.foot-links a { color: var(--ink); text-decoration: none; opacity: .75; transition: opacity .2s, color .2s; }
.foot-links a:hover { opacity: 1; color: var(--blue); }

/* shrink the folder once past the hero so it stops competing for attention */
.menu-btn { transform-origin: top right; transition: transform .3s cubic-bezier(.34,1.56,.64,1), opacity .25s; }
body.past-hero .menu-btn { transform: scale(.62); }
body.past-hero .menu-btn:hover { transform: scale(.68) rotate(-2deg); }
/* hide the floating menu button while the footer is on screen (it clashed with the copy) */
body.at-footer .menu-btn { opacity: 0; pointer-events: none; transform: scale(.55); }

/* ---------- phone / tablet: centre + rebalance the footer ---------- */

/* ---- single project page (work.html) ---- */
.proj-page { background: #edecf8; }
.single-proj {
  min-height: 100vh;
  max-width: 1100px; margin: 0 auto;
  padding: 16vh 6vw 10vh;
}
.proj-back { font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: var(--blue); text-decoration: none; }
.proj-head { margin: 2.4em 0 1.6em; }
.proj-kick { font-family: var(--mono); font-size: clamp(9px,1vw,13px); letter-spacing: .22em; color: var(--blue); }
.proj-title { font-family: var(--dela); font-size: clamp(34px,7vw,86px); line-height: 1; color: var(--ink); margin: .25em 0 .18em; }
.proj-meta { font-family: var(--mono); font-size: clamp(10px,1.1vw,14px); letter-spacing: .14em; color: #6d6884; }
.proj-media { border-radius: clamp(10px,1.2vw,18px); overflow: hidden; background: #000; box-shadow: 0 18px 46px rgba(20,20,80,.2); }
.proj-media video { width: 100%; display: block; aspect-ratio: 4/3; object-fit: cover; }
.proj-body { margin: 5vh 0; font-family: var(--roc); font-size: clamp(15px,1.4vw,20px); line-height: 1.7; color: #3a3550; max-width: 68ch; }
.proj-facts { display: grid; gap: 1.1em 3em; grid-template-columns: repeat(auto-fit, minmax(150px,1fr)); margin-top: 2.4em; }
.proj-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #8b87a0; }
.proj-facts dd { font-family: var(--roc); font-weight: 700; color: var(--ink); margin-top: .25em; }
.proj-next a {
  display: inline-block; font-family: var(--mono); font-size: clamp(10px,1.1vw,14px); letter-spacing: .18em;
  background: var(--ink); color: #fff; padding: 1em 1.8em; border-radius: 999px; text-decoration: none;
}
.proj-next a:hover { background: var(--blue); }
.proj-foot {
  padding: 6vh 6vw; background: #fff;
  display: flex; flex-wrap: wrap; gap: 2em; align-items: center; justify-content: space-between;
  font-family: var(--mono); font-size: 11px; letter-spacing: .14em; color: #6d6884;
}
.proj-foot .foot-links { position: static; }

/* ============================================================
   SUB-PAGES — Work / About / Contact  (document-flow layouts)
   ============================================================ */
.subpage { min-height: 100vh; }
/* brand + top nav always visible on sub-pages */
body.subpage .brand { opacity: 1; pointer-events: auto; }
.subnav {
  position: fixed; z-index: 95;
  top: clamp(20px, 3.4vw, 44px); right: clamp(18px, 4vw, 56px);
  display: flex; align-items: center; gap: clamp(14px, 2vw, 30px);
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(12px, 1vw, 15px); letter-spacing: .1em;
}
.subnav a { color: var(--ink); text-decoration: none; opacity: .72; transition: opacity .2s, color .2s; }
.subnav a:hover { opacity: 1; color: var(--blue); }
.subnav a.here { opacity: 1; color: var(--blue); }
.subnav .subnav-cta {
  opacity: 1; color: #fff; background: var(--blue);
  padding: .5em 1.1em; border-radius: 999px;
}
.subnav .subnav-cta:hover { color: #fff; background: var(--ink); }
.subnav .subnav-cta.here { color: #fff; }

.wrap { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 clamp(20px, 5vw, 64px); }
.page { padding-top: clamp(96px, 15vh, 168px); padding-bottom: clamp(50px, 8vw, 100px); }

/* shared page header */
.pg-head { margin-bottom: clamp(30px, 4vw, 54px); }
.pg-kick {
  position: static; display: inline-block;
  margin-bottom: clamp(16px, 2vw, 26px);
}
.pg-kick.tag-sky { color: var(--ink); }
.pg-title {
  font-family: var(--dela); font-weight: 400;
  font-size: clamp(48px, 10vw, 150px); line-height: .92;
  letter-spacing: -.01em; color: var(--blue);
}
.pg-lead {
  font-family: var(--roc); font-weight: 400;
  font-size: clamp(16px, 1.7vw, 24px); line-height: 1.5;
  max-width: 34ch; color: #3a3550; margin-top: clamp(16px, 2vw, 28px);
}
.subpage mark { background: var(--yellow); color: var(--ink); padding: 0 .1em; border-radius: 3px; }

/* ---- WORK grid ---- */
.wk-filters { display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 clamp(24px, 3vw, 40px); }
.wk-pill {
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(12px, 1vw, 15px); letter-spacing: .04em;
  display: inline-flex; align-items: center; gap: .5em;
  padding: .6em 1.05em; border-radius: 999px;
  background: #fff; color: var(--ink);
  box-shadow: 0 4px 14px rgba(20, 20, 80, .08);
  transition: background .2s, color .2s, transform .12s;
}
.wk-pill:hover { transform: translateY(-2px); }
.wk-pill.active { background: var(--blue); color: #fff; }
.wk-n { font-size: .82em; opacity: .5; }
.wk-pill.active .wk-n { opacity: .85; }

.wk-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(240px, 30vw, 340px), 1fr));
  gap: clamp(16px, 1.8vw, 26px);
}
.wk-card {
  position: relative; display: block;
  aspect-ratio: 16 / 10; border-radius: 16px; overflow: hidden;
  background: #0c0a1e; text-decoration: none;
  box-shadow: 0 10px 30px rgba(20, 20, 80, .14);
  transition: transform .25s, box-shadow .25s;
}
.wk-card:hover { transform: translateY(-4px); box-shadow: 0 18px 44px rgba(20, 20, 80, .24); }
.wk-thumb { position: absolute; inset: 0; }
.wk-thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform .5s ease; }
.wk-card:hover .wk-thumb img { transform: scale(1.06); }
.wk-cat {
  position: absolute; z-index: 3; top: 12px; left: 12px;
  font-family: var(--mono); font-size: 11px; letter-spacing: .06em;
  background: rgba(255, 255, 255, .92); color: var(--ink);
  padding: .4em .7em; border-radius: 6px;
}
.wk-hover {
  position: absolute; inset: 0; z-index: 2;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: .6em; background: rgba(12, 10, 30, .5);
  opacity: 0; transition: opacity .25s;
}
.wk-card:hover .wk-hover { opacity: 1; }
.wk-play {
  width: clamp(40px, 4vw, 58px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); border-radius: 999px;
  font-size: clamp(13px, 1.3vw, 20px); padding-left: .12em;
  transform: scale(.85); transition: transform .25s cubic-bezier(.34,1.56,.64,1);
}
.wk-card:hover .wk-play { transform: scale(1); }
.wk-watch { font-family: var(--mono); font-size: 12px; letter-spacing: .18em; color: #fff; }
.wk-foot {
  position: absolute; z-index: 3; left: 0; right: 0; bottom: 0;
  padding: clamp(30px, 4vw, 46px) clamp(13px, 1.4vw, 18px) clamp(12px, 1.3vw, 16px);
  background: linear-gradient(transparent, rgba(8, 6, 22, .86));
  display: flex; flex-direction: column; gap: .25em;
}
.wk-title {
  font-family: var(--roc); font-weight: 700;
  font-size: clamp(14px, 1.35vw, 19px); line-height: 1.15; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-info { font-family: var(--mono); font-size: 11px; letter-spacing: .08em; color: var(--sky); }
.wk-empty { font-family: var(--mono); letter-spacing: .1em; color: #6d6884; padding: 3em 0; text-align: center; }

/* ---- ABOUT ---- */
.ab-head { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(16px, 3vw, 48px); }
.ab-blob { flex: none; width: clamp(110px, 22vw, 300px); }
.ab-blob svg { width: 100%; height: auto; overflow: visible; animation: abfloat 5s ease-in-out infinite; }
@keyframes abfloat { 0%,100% { transform: translateY(0) rotate(0deg); } 50% { transform: translateY(-14px) rotate(3deg); } }
.ab-lead {
  font-family: var(--roc); font-weight: 400;
  font-size: clamp(20px, 2.9vw, 42px); line-height: 1.4;
  max-width: 22ch; color: var(--ink);
  margin: clamp(30px, 4vw, 56px) 0 clamp(40px, 6vw, 80px);
}
.ab-lead { max-width: 26ch; }
.ab-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: clamp(12px, 1.4vw, 20px); }
.stat {
  background: #fff; border-radius: 18px; padding: clamp(18px, 2vw, 30px);
  box-shadow: 0 8px 26px rgba(20, 20, 80, .10);
}
.stat-n { display: block; font-family: var(--dela); font-size: clamp(30px, 4vw, 58px); line-height: 1; color: var(--blue); }
.stat-l { display: block; margin-top: .7em; font-family: var(--mono); font-size: 12px; letter-spacing: .06em; color: #6d6884; }
.stat-award { background: var(--blue); grid-column: span 2; display: flex; align-items: center; gap: 1em; }
.stat-award .stat-n { color: var(--yellow); font-size: clamp(28px, 3.4vw, 46px); }
.stat-award .stat-l { color: #dfe4ff; margin-top: 0; font-size: clamp(12px, 1.2vw, 16px); }

.ab-skills, .ab-clients { margin-top: clamp(44px, 6vw, 84px); }
.ab-h2 { font-family: var(--dela); font-size: clamp(24px, 3.2vw, 46px); color: var(--ink); margin-bottom: clamp(16px, 2vw, 30px); }
.skills-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: clamp(16px, 2vw, 30px); }
.skill-cap { display: block; font-family: var(--dela); font-size: clamp(18px, 1.8vw, 26px); color: var(--blue); margin-bottom: .7em; }
.skill-ai .skill-cap { color: var(--orange); }
.skill-col ul { list-style: none; }
.skill-col li {
  font-family: var(--roc); font-size: clamp(14px, 1.3vw, 18px); color: #3a3550;
  padding: .55em 0; border-top: 1px solid #e2dff2;
}
.client-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.client-chip {
  font-family: var(--roc); font-weight: 700; font-size: clamp(14px, 1.4vw, 20px);
  padding: .5em 1em; border-radius: 999px; background: #fff; color: var(--ink);
  box-shadow: 0 4px 14px rgba(20, 20, 80, .08); transition: background .2s, color .2s, transform .12s;
}
.client-chip:hover { background: var(--blue); color: #fff; transform: translateY(-2px); }
.ab-cta { margin-top: clamp(56px, 8vw, 100px); text-align: center; }
.ab-ctahead { font-family: var(--dela); font-size: clamp(26px, 4vw, 54px); color: var(--ink); }
.ab-ctabtn {
  display: inline-block; margin-top: clamp(16px, 2vw, 28px);
  font-family: var(--roc); font-weight: 700; font-size: clamp(16px, 1.6vw, 22px);
  background: var(--blue); color: #fff; padding: .8em 1.7em; border-radius: 999px;
  text-decoration: none; transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.ab-ctabtn:hover { transform: scale(1.05); background: var(--ink); }

/* ---- CONTACT ---- */
.ct-grid { display: grid; grid-template-columns: 1.25fr 1fr; gap: clamp(24px, 4vw, 56px); align-items: start; margin-top: clamp(28px, 4vw, 48px); }
.ct-form { display: flex; flex-direction: column; gap: clamp(14px, 1.6vw, 22px); background: #fff; padding: clamp(22px, 3vw, 40px); border-radius: 22px; box-shadow: 0 12px 34px rgba(20, 20, 80, .12); }
.ct-field { display: flex; flex-direction: column; gap: .5em; }
.ct-lb { font-family: var(--mono); font-size: 12px; letter-spacing: .1em; color: #6d6884; }
.ct-form input, .ct-form textarea {
  font-family: var(--roc); font-size: clamp(15px, 1.3vw, 18px); color: var(--ink);
  padding: .8em 1em; border: 2px solid #e6e4f0; border-radius: 12px; background: #faf9ff;
  transition: border-color .2s; width: 100%;
}
.ct-form textarea { resize: vertical; min-height: 120px; }
.ct-form input:focus, .ct-form textarea:focus { outline: none; border-color: var(--blue); }
.ct-send {
  align-self: flex-start; font-family: var(--roc); font-weight: 700; font-size: clamp(16px, 1.5vw, 20px);
  background: var(--blue); color: #fff; padding: .75em 1.6em; border-radius: 999px;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.ct-send:hover { transform: scale(1.05); background: var(--ink); }
.ct-note { font-family: var(--mono); font-size: 12px; letter-spacing: .04em; color: var(--blue); min-height: 1.2em; }
.ct-info { display: flex; flex-direction: column; gap: clamp(12px, 1.4vw, 18px); }
.ct-block { display: flex; flex-direction: column; gap: .4em; background: #fff; border-radius: 16px; padding: clamp(16px, 1.8vw, 24px); box-shadow: 0 8px 24px rgba(20, 20, 80, .09); text-decoration: none; }
.ct-blk-lb { font-family: var(--mono); font-size: 11px; letter-spacing: .12em; color: #8b87a0; }
.ct-blk-v { font-family: var(--roc); font-weight: 700; font-size: clamp(15px, 1.5vw, 20px); color: var(--ink); }
.ct-email:hover .ct-blk-v { color: var(--blue); }
.ct-links { display: flex; flex-direction: column; gap: .35em; }
.ct-links a { font-family: var(--roc); font-weight: 700; font-size: clamp(15px, 1.4vw, 19px); color: var(--blue); text-decoration: none; }
.ct-links a:hover { color: var(--ink); }
.ct-dog { position: relative; width: clamp(240px, 40vw, 420px); margin: clamp(44px, 6vw, 84px) auto 0; }
.ct-dog svg { width: 100%; height: auto; }
.ct-dog .cut-word { font-family: var(--roc); font-weight: 700; }
.ct-cut1 { left: -6%; top: 6%; font-size: clamp(26px, 4vw, 56px); }
.ct-cut2 { left: 3%; top: 34%; font-size: clamp(20px, 3vw, 44px); animation-delay: .38s; }

/* ---- shared sub-page footer ---- */
.subfoot {
  position: relative; background: #fff; margin-top: clamp(60px, 10vw, 120px);
  padding: clamp(52px, 8vw, 104px) clamp(20px, 5vw, 64px) clamp(28px, 4vw, 46px);
  border-top-left-radius: clamp(20px, 3vw, 44px); border-top-right-radius: clamp(20px, 3vw, 44px);
}
.subfoot-cta {
  display: inline-block; font-family: var(--dela); font-weight: 400;
  font-size: clamp(42px, 8vw, 122px); line-height: .88; letter-spacing: -.02em;
  color: var(--blue); text-decoration: none; transition: transform .25s, color .25s;
}
.subfoot-cta:hover { transform: skewX(-5deg); color: var(--ink); }
.subfoot .foot-links {
  position: static; display: flex; flex-wrap: wrap; gap: clamp(16px, 2vw, 34px);
  margin: clamp(28px, 4vw, 50px) 0 clamp(20px, 3vw, 34px);
  font-family: var(--mono); font-weight: 500; font-size: clamp(12px, 1vw, 15px); letter-spacing: .14em;
}
.subfoot .foot-base {
  position: static; left: auto; right: auto; bottom: auto;
  display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1em;
  font-family: var(--mono); font-size: 12px; letter-spacing: .14em; color: #6d6884;
  border-top: 1px solid #eceaf6; padding-top: clamp(16px, 2vw, 26px);
}
.subfoot .socials a { color: var(--blue); }

/* ---- sub-page responsive ---- */
@media (max-width: 760px) {
  .ct-grid { grid-template-columns: 1fr; }
  .ab-head { flex-direction: column-reverse; align-items: flex-start; gap: clamp(8px, 2vw, 20px); }
  .ab-blob { width: clamp(110px, 34vw, 190px); align-self: flex-end; }
  .stat-award { grid-column: span 1; }
  .subnav { gap: 12px; font-size: 12px; top: 16px; right: 16px; }
  .subnav a:not(.subnav-cta):not(.here) { display: none; }
}

/* ============================================================
   WORK PAGE — animated hero (split headline + 3D card spiral)
   ============================================================ */
.wk-hero {
  position: relative;
  height: calc(var(--vhu) * 100); min-height: 540px;
  overflow: hidden;
  display: grid; place-items: center;
}
/* split headline */
.wk-hero-title {
  position: absolute; inset: 0; z-index: 4;
  display: flex; align-items: center; justify-content: center;
  gap: .3ch;
  font-family: var(--dela); font-weight: 400;
  font-size: clamp(34px, 6.4vw, 104px); line-height: 1;
  letter-spacing: -.02em; color: var(--blue);
  pointer-events: none;
}
.wht-word {
  transform: translate(var(--tx, 0), var(--ty, 118%));
  opacity: 0;
  transition: transform 1s cubic-bezier(.2,.85,.25,1), opacity .7s ease;
  will-change: transform, opacity;
}
.wht-r { transition-delay: .08s; }
.wk-hero.in .wht-word { --ty: 0; opacity: 1; }
/* split distance (--tx) is measured per word in JS so both stay fully on-screen */

/* vertical 3D carousel — cards travel up through the centre, always facing you */
.wk-spiral {
  position: relative; z-index: 3;
  width: clamp(300px, 46vw, 600px);
  height: clamp(360px, 60vh, 640px);
  perspective: 1500px;
  opacity: 0; transition: opacity 1s ease;
}
.wk-hero.spiral-on .wk-spiral { opacity: 1; }
.wk-sp-stage {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
}
.wk-sp-card {
  position: absolute; left: 50%; top: 50%;
  width: clamp(190px, 23vw, 320px); aspect-ratio: 5 / 4;
  border-radius: clamp(8px, 1vw, 16px);
  overflow: hidden;
  background: #0c0a1e;
  box-shadow: 0 clamp(10px,1.6vw,26px) clamp(24px,3vw,54px) rgba(10, 12, 40, .4);
  text-decoration: none;
  will-change: transform, opacity;
}
.wk-sp-card img { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-sp-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 1.4em .8em .7em;
  background: linear-gradient(transparent, rgba(8,6,22,.85));
  font-family: var(--roc); font-weight: 700; font-size: clamp(11px, 1vw, 15px);
  line-height: 1.15; color: #fff;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.wk-hero-cue {
  position: absolute; left: 50%; bottom: 5%; transform: translateX(-50%);
  z-index: 5;
  font-family: var(--mono); font-size: max(10px, calc(var(--u) * 20));
  letter-spacing: .26em; color: var(--blue);
  opacity: 0; transition: opacity .6s ease .3s;
  animation: cuebob 1.8s ease-in-out infinite;
}
.wk-hero.spiral-on .wk-hero-cue { opacity: .8; }

/* the browse grid sits below the hero */
.wk-browse { padding-top: clamp(40px, 6vw, 80px); }
.wk-browse-h {
  font-family: var(--dela); font-size: clamp(22px, 3vw, 40px);
  color: var(--ink); margin-bottom: clamp(18px, 2vw, 30px);
}

/* ---- unified footer bar: © left · links centre · socials right ---- */
.subfoot-bar {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 1.1em 2em;
  margin-top: clamp(28px, 4vw, 50px);
  padding-top: clamp(16px, 2vw, 26px);
  border-top: 1px solid #eceaf6;
  font-family: var(--mono); font-size: clamp(12px, 1vw, 14px);
  letter-spacing: .14em; color: #6d6884;
}
.subfoot-bar .sf-copy { white-space: nowrap; }
.subfoot-bar .foot-links {
  position: static; flex: 1;
  display: flex; flex-wrap: wrap; justify-content: center;
  gap: clamp(14px, 1.6vw, 30px); margin: 0;
  font-family: var(--mono); font-weight: 500;
  font-size: clamp(12px, 1vw, 14px); letter-spacing: .14em;
}
.subfoot-bar .socials { display: inline-flex; gap: 14px; }
.subfoot-bar .socials a { color: var(--blue); display: inline-flex; }
.subfoot-bar .socials a:hover { color: var(--ink); }

@media (max-width: 680px) {
  .subfoot-bar { justify-content: center; text-align: center; }
  .subfoot-bar .foot-links { flex: 1 1 100%; order: 3; }
  .wk-hero.split .wht-l { --tx: -34vw; }
  .wk-hero.split .wht-r { --tx: 34vw; }
}

/* ============================================================
   SINGLE PROJECT — editorial detail page (enhanced)
   ============================================================ */
.single-proj.wrap { padding-top: clamp(96px, 15vh, 168px); padding-bottom: clamp(40px, 6vw, 90px); }
.single-proj .proj-head { margin: 2.2em 0 1.4em; }
.single-proj .proj-kick {
  font-family: var(--mono); font-weight: 500; font-size: clamp(10px,1vw,13px);
  letter-spacing: .22em; color: var(--blue);
}
.single-proj .proj-title {
  font-family: var(--dela); font-size: clamp(34px, 6.5vw, 92px); line-height: 1.02;
  letter-spacing: -.01em; color: var(--ink); margin: .28em 0 .18em;
}
.single-proj .proj-meta { font-family: var(--roc); font-weight: 700; font-size: clamp(15px,1.6vw,22px); color: var(--blue); }

.proj-media { border-radius: clamp(10px,1.4vw,22px); overflow: hidden; background: #0c0a1e; box-shadow: 0 clamp(16px,2.4vw,44px) clamp(30px,4vw,70px) rgba(20,20,80,.22); }
.proj-embed { position: relative; width: 100%; aspect-ratio: 16 / 9; }
.proj-embed iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }
.proj-media > video { width: 100%; display: block; aspect-ratio: 16/9; object-fit: cover; background:#000; }
.proj-poster { position: relative; display: block; aspect-ratio: 16/9; text-decoration: none; }
.proj-poster img { width: 100%; height: 100%; object-fit: cover; display: block; }
.proj-poster .proj-play {
  position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .8em;
  background: rgba(12,10,30,.34); transition: background .25s;
}
.proj-poster:hover .proj-play { background: rgba(12,10,30,.5); }
.proj-play-ico {
  width: clamp(52px,6vw,86px); aspect-ratio: 1; display: grid; place-items: center;
  background: var(--yellow); color: var(--ink); border-radius: 999px; font-size: clamp(18px,2vw,32px); padding-left: .12em;
  box-shadow: 0 clamp(8px,1.4vw,22px) clamp(16px,2.4vw,40px) rgba(0,0,0,.4);
  transform: scale(.92); transition: transform .3s cubic-bezier(.34,1.56,.64,1);
}
.proj-poster:hover .proj-play-ico { transform: scale(1); }
.proj-play-lb { font-family: var(--mono); font-size: clamp(11px,1.1vw,15px); letter-spacing: .2em; color: #fff; }
.proj-poster.no-link { cursor: default; }

.proj-layout {
  display: grid; grid-template-columns: 1fr clamp(200px, 26%, 300px);
  gap: clamp(24px, 4vw, 64px); margin: clamp(32px,5vw,64px) 0 clamp(24px,3vw,44px);
  align-items: start;
}
.single-proj .proj-body { font-family: var(--roc); font-size: clamp(16px,1.5vw,21px); line-height: 1.7; color: #3a3550; max-width: 62ch; margin: 0; }
.single-proj .proj-body p { margin-bottom: 1em; }
.proj-watch {
  display: inline-block; margin-top: 1.6em; font-family: var(--roc); font-weight: 700; font-size: clamp(15px,1.5vw,19px);
  background: var(--blue); color: #fff; padding: .8em 1.6em; border-radius: 999px; text-decoration: none;
  transition: transform .2s cubic-bezier(.34,1.56,.64,1), background .2s;
}
.proj-watch:hover { transform: scale(1.05); background: var(--ink); }
.proj-facts { display: grid; gap: 1.3em; }
.proj-facts > div { border-top: 1px solid #e2dff2; padding-top: .7em; }
.proj-facts dt { font-family: var(--mono); font-size: 11px; letter-spacing: .16em; color: #8b87a0; }
.proj-facts dd { font-family: var(--roc); font-weight: 700; font-size: clamp(14px,1.3vw,18px); color: var(--ink); margin-top: .3em; }

.proj-next {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5em;
  border-top: 1px solid #e2dff2; padding-top: clamp(20px,3vw,36px); margin-top: clamp(20px,3vw,40px);
}
.proj-next-link { text-decoration: none; display: flex; flex-direction: column; gap: .25em; }
.proj-next-lb { font-family: var(--mono); font-size: 11px; letter-spacing: .18em; color: #8b87a0; }
.proj-next-title { font-family: var(--dela); font-size: clamp(20px,2.6vw,38px); color: var(--ink); line-height: 1; transition: color .2s; }
.proj-next-link:hover .proj-next-title { color: var(--blue); }
.proj-next-all { font-family: var(--mono); font-weight: 500; font-size: clamp(12px,1vw,14px); letter-spacing: .16em; color: var(--blue); text-decoration: none; }
.proj-next-all:hover { color: var(--ink); }

@media (max-width: 760px) {
  .proj-layout { grid-template-columns: 1fr; }
}

/* ============================================================
   MENU v2 — big, left-aligned stack; each word swaps to its Lottie on hover
   ============================================================ */
.menu-overlay {
  justify-content: center;
  align-items: flex-start;
  padding-left: clamp(22px, 8vw, 190px);
  padding-right: clamp(22px, 6vw, 90px);
  gap: 0;
}
.menu-overlay ul { text-align: left; width: 100%; }
.menu-overlay ul a {
  text-transform: uppercase;
  /* matches the -20 tracking used in After Effects (AE units are 1/1000 em),
     so the static word and its animation have identical letter spacing */
  letter-spacing: -.02em;
  font-size: clamp(46px, 12.5vw, 190px);
  line-height: 1.04;
}
.menu-foot { display: none; }

/* Each item: the plain word stays in flow and defines the box (so nothing
   shifts); its Lottie is layered on top. menu-lottie.js measures the word's
   real cap box and the animation's ink box, then sets height/left/top so the
   letters land exactly on the text — no jump on hover. */
.menu-item-lottie { position: relative; display: inline-block; }
.menu-fallback { display: inline-block; transition: opacity .14s ease; }
.menu-lottie {
  position: absolute; left: 0; top: 0;
  height: 1.04em; width: auto;          /* provisional — JS sets the real box */
  opacity: 0; pointer-events: none;
  transition: opacity .14s ease;
}
.menu-lottie svg { display: block; width: 100% !important; height: 100% !important; overflow: visible; }
/* hovering swaps the word for its animation */
.menu-item-lottie.playing .menu-lottie { opacity: 1; }
.menu-item-lottie.playing .menu-fallback { opacity: 0; }
.menu-overlay ul a.menu-item-lottie:hover { color: #fff; }

@media (max-width: 700px) {
  .menu-overlay ul a { font-size: clamp(40px, 15vw, 90px); }
}

/* ============================================================
   WORK PAGE v2 — wider, category sections, mosaic grid
   ============================================================ */
.wk-wide { max-width: min(1560px, 96vw); padding-left: clamp(14px, 2.2vw, 36px); padding-right: clamp(14px, 2.2vw, 36px); }
.wk-sec { margin-bottom: clamp(40px, 5vw, 76px); }
.wk-sec-head {
  display: flex; align-items: baseline; gap: .7em;
  border-bottom: 2px solid var(--ink);
  padding-bottom: .45em; margin-bottom: clamp(16px, 2vw, 28px);
}
.wk-sec-head h3 { font-family: var(--dela); font-weight: 400; font-size: clamp(22px, 3vw, 44px); color: var(--ink); line-height: 1; }
.wk-sec-n { font-family: var(--mono); font-weight: 500; font-size: clamp(12px, 1.1vw, 16px); color: var(--blue); letter-spacing: .1em; }
.wk-grid { grid-auto-flow: dense; }
/* mosaic: hero card of each section spans two columns */
.wk-card.wk-big { grid-column: span 2; aspect-ratio: 16 / 9; }
.wk-card.wk-big .wk-title { font-size: clamp(17px, 1.8vw, 26px); }
@media (max-width: 700px) {
  .wk-card.wk-big { grid-column: auto; aspect-ratio: 16 / 10; }
  .wk-card.wk-big .wk-title { font-size: clamp(14px, 4vw, 19px); }
}

/* NOTE: the homepage `.foot-bar` rules live in section 08 above — a duplicate
   set used to sit here and silently overrode the phone layout. Don't re-add it. */

/* tighter sub-page footer (kills the dead space on About/Contact) */
.subfoot { margin-top: clamp(36px, 5vw, 72px); padding-top: clamp(36px, 5vw, 70px); padding-bottom: clamp(20px, 2.6vw, 34px); }
.page { padding-bottom: clamp(28px, 4vw, 60px); }
.ct-dog { margin-top: clamp(28px, 4vw, 56px); }

/* ---- sub-page footer: no dead white space at the very bottom ---- */
.subfoot { padding-bottom: clamp(14px, 1.8vw, 26px); }
.subfoot .subfoot-bar { margin-bottom: 0; }
.subfoot-bar { padding-bottom: 0; }

/* ---- About + Contact run full width, like the Work page ---- */
.page.wk-wide { max-width: min(1560px, 96vw); }
.ct-grid { max-width: none; }
.ab-lead { max-width: 34ch; }

/* ---- hero panel: blank placeholder (grey block, no content) ---- */
.hero-grey { overflow: hidden; }

/* sub-page footer: same stacked treatment on phones */
@media (max-width: 760px) {
  .subfoot-bar { flex-wrap: wrap; }
  .subfoot-bar .foot-links {
    order: -1; flex: 0 0 100%;
    flex-direction: column; align-items: flex-start; justify-content: flex-start;
    gap: .85em;
    font-family: var(--roc); font-weight: 700; font-size: 17px; letter-spacing: 0;
    padding-bottom: clamp(14px,4vw,22px); margin-bottom: clamp(12px,3vw,18px);
    border-bottom: 1px solid #eceaf6;
  }
  .subfoot-bar .foot-links a { color: var(--ink); opacity: 1; }
}

/* ---- WP contact-form alerts (Contact page template) ---- */
.ct-alert { font-family: var(--roc); font-weight: 700; font-size: clamp(14px, 1.3vw, 17px); line-height: 1.4; padding: .85em 1.1em; border-radius: 12px; }
.ct-ok  { background: #e7f7ec; color: #1c7a3e; }
.ct-bad { background: #fdeaea; color: #b3261e; }