/* ============================================================
   JAY C · PORTFOLIO
   60/30/10 system:
   60  Pale Sky      #C3DAE8  canvas
   30  Deep Mocha    #432F2E  structure: type, nav, footer, bands, frames
   10  Vanilla Custard #FEEFB6 interaction only (never text on sky)
   ============================================================ */

:root {
  --sky: #C3DAE8;
  --mocha: #432F2E;
  --custard: #FEEFB6;

  --mocha-70: rgba(67, 47, 46, 0.7);
  --mocha-45: rgba(67, 47, 46, 0.45);
  --mocha-18: rgba(67, 47, 46, 0.18);
  --mocha-10: rgba(67, 47, 46, 0.10);
  --sky-70: rgba(195, 218, 232, 0.7);
  --sky-40: rgba(195, 218, 232, 0.4);
  --sky-18: rgba(195, 218, 232, 0.18);

  --font-display: "Instrument Serif", Georgia, serif;
  --font-sans: "Archivo", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --font-mono: "IBM Plex Mono", "SF Mono", Menlo, monospace;

  --gutter: clamp(16px, 1.8vw, 32px);
  --margin: clamp(20px, 4.5vw, 84px);
  --section: clamp(96px, 14vw, 220px);

  --ease-out: cubic-bezier(0.22, 1, 0.36, 1);
  --ease-inout: cubic-bezier(0.65, 0, 0.35, 1);
  --dur: 0.55s;
}

/* ---------- reset ---------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }

body {
  background: var(--sky);
  color: var(--mocha);
  font-family: var(--font-sans);
  font-size: clamp(15px, 1.05vw, 17px);
  line-height: 1.55;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: clip;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
ul, ol { list-style: none; }

::selection { background: var(--custard); color: var(--mocha); }
::-moz-selection { background: var(--custard); color: var(--mocha); }

:focus-visible { outline: 2px solid var(--mocha); outline-offset: 3px; }
.on-mocha :focus-visible, .band :focus-visible { outline-color: var(--custard); }

/* ---------- layout primitives ---------- */
.container { padding-inline: var(--margin); max-width: 1840px; margin-inline: auto; }
.grid {
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
}
.section { padding-block: var(--section); }

/* ---------- type registers ---------- */
/* 1. wayfinding: tiny caps, wide tracking */
.label {
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em;
  text-transform: uppercase;
}
/* 2. editorial display */
.display {
  font-family: var(--font-display);
  font-weight: 400;
  line-height: 0.98;
  letter-spacing: -0.015em;
  text-wrap: balance;          /* keeps editorial headlines from orphaning a word */
}
.display em { font-style: italic; letter-spacing: -0.01em; }
.d-hero  { font-size: clamp(3.4rem, 10.5vw, 11.5rem); }
.d-xl    { font-size: clamp(2.8rem, 7.4vw, 8rem); }
.d-lg    { font-size: clamp(2.2rem, 5.2vw, 5.6rem); }
.d-md    { font-size: clamp(1.7rem, 3.4vw, 3.4rem); }
/* 3. mono metadata */
.mono {
  font-family: var(--font-mono);
  font-size: clamp(11px, 0.78vw, 13px);
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.body-lg { font-size: clamp(1.05rem, 1.5vw, 1.45rem); line-height: 1.45; letter-spacing: -0.005em; }
.muted { color: var(--mocha-70); }

.sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* split-text internals */
.split-line { display: block; overflow: clip; }
.split-line > .split-inner { display: block; will-change: transform; }

/* ---------- custard link underline (only on mocha-adjacent text) ---------- */
.u-link { position: relative; display: inline-block; }
.u-link::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.08em;
  width: 100%; height: 0.09em;
  background: var(--custard);
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--dur) var(--ease-inout);
}
.u-link:hover::after, .u-link.is-active::after {
  transform: scaleX(1);
  transform-origin: left center;
}

/* ---------- buttons ---------- */
.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.9em;
  padding: 1.05em 2.1em;
  border-radius: 99px;
  font-family: var(--font-sans);
  font-size: clamp(11px, 0.8vw, 13px);
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  overflow: hidden;
  isolation: isolate;
  white-space: nowrap;
}
.btn .btn-label { position: relative; z-index: 2; transition: color var(--dur) var(--ease-inout); }
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  transform: scaleY(0);
  transform-origin: bottom center;
  transition: transform var(--dur) var(--ease-inout);
}
.btn:hover::before { transform: scaleY(1); transform-origin: top center; }

/* primary: custard shell, mocha text; hover floods mocha, text goes custard */
.btn-primary { background: var(--custard); color: var(--mocha); }
.btn-primary::before { background: var(--mocha); }
.btn-primary:hover .btn-label { color: var(--custard); }

/* ghost on mocha sections */
.btn-ghost { color: var(--sky); box-shadow: inset 0 0 0 1px var(--sky-40); }
.btn-ghost::before { background: var(--custard); }
.btn-ghost:hover { box-shadow: inset 0 0 0 1px var(--custard); }
.btn-ghost:hover .btn-label { color: var(--mocha); }

/* ---------- custom cursor ---------- */
/* The cursor reads the section beneath it (see cursor-dark toggle in main.js)
   and flips its palette so it always contrasts, never vanishing on a dark band.
   --cur-line : outline + trailing dot   --cur-fill : filled disc on hover
   --cur-ink  : label/glyph inside the filled disc */
body {
  --cur-line: var(--mocha);
  --cur-fill: var(--mocha);
  --cur-ink:  var(--custard);
}
body.cursor-dark {
  --cur-line: var(--sky);
  --cur-fill: var(--custard);
  --cur-ink:  var(--mocha);
}
.cursor, .cursor-dot { position: fixed; top: 0; left: 0; pointer-events: none; z-index: 9999; }
.cursor {
  width: 38px; height: 38px;
  margin: -19px 0 0 -19px;
  border: 1.5px solid var(--cur-line);
  border-radius: 50%;
  display: grid; place-items: center;
  color: var(--cur-ink);
  transition: width 0.4s var(--ease-out), height 0.4s var(--ease-out),
              margin 0.4s var(--ease-out), background-color 0.4s var(--ease-out),
              border-color 0.4s var(--ease-out), color 0.4s var(--ease-out), opacity 0.3s;
}
.cursor-dot {
  width: 6px; height: 6px;
  margin: -3px 0 0 -3px;
  background: var(--cur-line);
  border-radius: 50%;
  transition: background-color 0.4s var(--ease-out), opacity 0.3s;
}
.cursor .cursor-text {
  font-family: var(--font-sans);
  font-size: 10px; font-weight: 600;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--cur-ink);
  opacity: 0; transform: scale(0.6);
  transition: opacity 0.25s var(--ease-out), transform 0.25s var(--ease-out);
}
body.cursor-hover .cursor {
  width: 66px; height: 66px; margin: -33px 0 0 -33px;
  background: var(--cur-fill); border-color: var(--cur-fill);
}
body.cursor-hover .cursor-dot { opacity: 0; }
body.cursor-label .cursor {
  width: 92px; height: 92px; margin: -46px 0 0 -46px;
  background: var(--cur-fill); border-color: var(--cur-fill);
}
body.cursor-label .cursor .cursor-text { opacity: 1; transform: scale(1); }
body.cursor-label .cursor-dot { opacity: 0; }
body.cursor-hidden .cursor, body.cursor-hidden .cursor-dot { opacity: 0; }
@media (hover: none), (pointer: coarse) { .cursor, .cursor-dot { display: none; } }
@media (hover: hover) and (pointer: fine) { body.has-cursor, body.has-cursor a, body.has-cursor button { cursor: none; } }

/* ---------- preloader ---------- */
.preloader {
  position: fixed; inset: 0; z-index: 9000;
  background: var(--sky);
  display: grid; place-items: center;
}
.preloader svg { width: min(56vw, 620px); height: auto; overflow: visible; }
.preloader .sig-path { fill: var(--mocha); }
.preloader[hidden] { display: none; }

/* ---------- nav ----------
   Always present. Padding is deliberately constant so the logo slot never
   moves; the hero signature docks onto it with pixel-exact FLIP math. */
.nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 900;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2vw, 26px) var(--margin);
  color: var(--mocha);
  transition: background-color 0.45s var(--ease-out), box-shadow 0.45s var(--ease-out),
              color 0.45s var(--ease-out);
}
.nav.on-dark { color: var(--sky); }        /* over any dark (mocha) section */
/* the nav stays a transparent floating layer: just the logo and the menu
   button, no bar background or hairline border */

.nav-logo { position: relative; display: inline-flex; }
.nav-logo-mark {
  height: clamp(26px, 2.4vw, 34px); width: auto;
  transition: filter 0.45s var(--ease-out), opacity 0.45s var(--ease-out);
}
/* the mark ships as mocha artwork; flip it to white while the nav is on-dark
   (matters when the docking animation is off: reduced motion / no WebGL) */
.nav.on-dark .nav-logo-mark { filter: brightness(0) invert(1); }
/* with motion off there's no dock, so let the giant hero signature be the only
   mark until you've scrolled past it */
@media (prefers-reduced-motion: reduce) {
  .nav.on-dark .nav-logo-mark { opacity: 0; }
}
/* the docking signature; JS drives its transform from hero centre → this slot */
.sig-dock {
  position: absolute; left: 0; top: 0;
  /* sized explicitly to the signature artwork: an absolutely positioned SVG
     with only a viewBox resolves width:auto to 0, so the ratio is stated here */
  height: clamp(26px, 2.4vw, 34px);
  aspect-ratio: 3180 / 777;
  pointer-events: none;
  opacity: 0;                              /* JS owns visibility */
  transform-origin: left top;
  will-change: transform;
}
.sig-dock img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  filter: drop-shadow(0 14px 40px rgba(0,0,0,0.3));
}
body.has-dock .nav-logo-mark { visibility: hidden; }

/* ---- single menu button whose words fly into place on hover ---- */
.nav-menu { display: flex; align-items: center; gap: clamp(14px, 1.8vw, 30px); }
.nav-menu-items {
  display: flex; align-items: center;
  gap: clamp(14px, 1.9vw, 34px);
  pointer-events: none;
}
.nav-menu:hover .nav-menu-items,
.nav-menu:focus-within .nav-menu-items,
.nav-menu.is-open .nav-menu-items { pointer-events: auto; }

.nav-item { position: relative; display: block; overflow: hidden; padding-block: 4px; }
.nav-item > span {
  display: block;
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 500;
  letter-spacing: 0.28em; text-transform: uppercase;
  white-space: nowrap;
  transform: translateY(120%);
  opacity: 0;
  transition: transform 0.66s var(--ease-out), opacity 0.4s var(--ease-out);
}
.nav-menu:hover .nav-item > span,
.nav-menu:focus-within .nav-item > span,
.nav-menu.is-open .nav-item > span { transform: translateY(0); opacity: 1; }
/* stagger outward from the button, so the words appear to spill out of it */
.nav-menu .nav-item:nth-child(5) > span { transition-delay: 0.02s; }
.nav-menu .nav-item:nth-child(4) > span { transition-delay: 0.07s; }
.nav-menu .nav-item:nth-child(3) > span { transition-delay: 0.12s; }
.nav-menu .nav-item:nth-child(2) > span { transition-delay: 0.17s; }
.nav-menu .nav-item:nth-child(1) > span { transition-delay: 0.22s; }

.nav-item::after {
  content: "";
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px;
  background: var(--custard);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.45s var(--ease-inout);
}
.nav-item:hover::after { transform: scaleX(1); transform-origin: left center; }
/* the CTA carries a standing underline, but only once its word is actually out */
.nav-menu:hover .nav-item.is-cta::after,
.nav-menu:focus-within .nav-item.is-cta::after,
.nav-menu.is-open .nav-item.is-cta::after {
  transform: scaleX(1); transform-origin: left center;
  transition-delay: 0.1s;
}
.nav-item.is-cta > span { font-weight: 600; }

.nav-menu-btn { display: inline-flex; align-items: center; gap: 11px; padding: 6px 0; }
.nmb-label {
  /* both words share one grid cell so the box sizes to the wider of them
     ("Close") and neither gets clipped horizontally */
  display: grid; overflow: hidden;
  height: 1.15em;
  font-family: var(--font-sans);
  font-size: clamp(10px, 0.72vw, 12px);
  font-weight: 600;
  letter-spacing: 0.28em; text-transform: uppercase;
}
.nmb-word {
  grid-area: 1 / 1;
  line-height: 1.15em;
  transition: transform 0.55s var(--ease-out);
}
.nmb-b { transform: translateY(110%); }
.nav-menu.is-open .nmb-a { transform: translateY(-110%); }
.nav-menu.is-open .nmb-b { transform: translateY(0); }

.nmb-bars { position: relative; width: 24px; height: 9px; }
.nmb-bars i {
  position: absolute; left: 0; height: 1.5px; background: currentColor;
  transition: transform 0.45s var(--ease-inout), width 0.45s var(--ease-inout);
}
.nmb-bars i:nth-child(1) { top: 0; width: 100%; }
.nmb-bars i:nth-child(2) { bottom: 0; width: 58%; }
.nav-menu:hover .nmb-bars i:nth-child(2) { width: 100%; }
.nav-menu.is-open .nmb-bars i:nth-child(1) { transform: translateY(3.75px) rotate(45deg); }
.nav-menu.is-open .nmb-bars i:nth-child(2) { transform: translateY(-3.75px) rotate(-45deg); width: 100%; }

/* progress hairline removed; the nav is a clean floating layer */
.nav-progress { display: none; }

/* mobile: the button opens the full-screen overlay instead */
@media (max-width: 860px) {
  .nav-menu-items { display: none; }
}
.mnav {
  position: fixed; inset: 0; z-index: 890;
  background: var(--mocha);
  color: var(--sky);
  display: flex; flex-direction: column; justify-content: flex-end;
  padding: var(--margin);
  padding-bottom: clamp(40px, 8vh, 80px);
  clip-path: inset(0 0 100% 0);
  transition: clip-path 0.7s var(--ease-inout);
  visibility: hidden;
}
.mnav.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.mnav a.display { display: block; padding-block: 0.12em; }
.mnav .mono { color: var(--sky-70); margin-top: 2.2rem; }

/* ---------- hero ---------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex; flex-direction: column;
  color: var(--sky);
  overflow: clip;
  background: #17110f;
}
.hero-bg { position: absolute; inset: 0; overflow: clip; z-index: 0; }
.hero-bg::after {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;                     /* scrim sits above the carousel, below the signature */
  pointer-events: none;
  background:
    radial-gradient(62% 46% at 50% 44%, rgba(15,10,9,0.82) 0%, rgba(15,10,9,0.28) 46%, rgba(15,10,9,0) 74%),
    linear-gradient(180deg, rgba(23,17,15,0.72) 0%, rgba(23,17,15,0.24) 24%, rgba(23,17,15,0.34) 60%, rgba(23,17,15,0.92) 100%);
}

/* ---- rotating 3D carousel of selected work (behind the signature) ---- */
.hero-carousel {
  position: absolute; inset: 0; z-index: 0;
  perspective: 1700px;
  perspective-origin: 50% 44%;
}
.hero-carousel-tilt {
  position: absolute; left: 50%; top: 47%;
  width: 0; height: 0;
  transform-style: preserve-3d;
  transform: translate(-50%, -50%) rotateX(-9deg) rotateZ(-4deg);
  opacity: 0;                    /* hidden until the entrance flies it in */
  will-change: transform, opacity;
}
/* images start spread far beyond the frame, then rush inward into the ring */
.sig-live .hero-carousel-tilt,
.no-sig .hero-carousel-tilt {
  animation: hcEnter 1.8s var(--ease-out) both;
}
@keyframes hcEnter {
  0%   { opacity: 0; transform: translate(-50%, -50%) rotateX(-9deg) rotateZ(18deg) scale(2.8); }
  55%  { opacity: 1; }
  100% { opacity: 1; transform: translate(-50%, -50%) rotateX(-9deg) rotateZ(-4deg) scale(1); }
}
.hero-carousel-ring {
  --r: clamp(300px, 33vw, 540px);
  position: absolute; left: 0; top: 0;
  transform-style: preserve-3d;
  animation: hcSpin 52s linear infinite;
  will-change: transform;        /* keep the layer composited so 3D never flattens */
}
@keyframes hcSpin { to { transform: rotateY(-360deg); } }
.hcard {
  --w: clamp(178px, 21vw, 292px);
  position: absolute; margin: 0;
  width: var(--w); height: calc(var(--w) * 1.36);
  left: calc(var(--w) / -2);
  top: calc(var(--w) * 1.36 / -2);
  overflow: hidden;
  border-radius: 3px;
  backface-visibility: hidden;
  box-shadow: 0 34px 70px rgba(0,0,0,0.55);
}
.hcard img {
  width: 100%; height: 100%; object-fit: cover;
  filter: grayscale(1) contrast(1.05) brightness(0.66);
}
.hero-carousel-ring .hcard:nth-child(1) { transform: rotateY(0deg)   translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(2) { transform: rotateY(45deg)  translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(3) { transform: rotateY(90deg)  translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(4) { transform: rotateY(135deg) translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(5) { transform: rotateY(180deg) translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(6) { transform: rotateY(225deg) translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(7) { transform: rotateY(270deg) translateZ(var(--r)); }
.hero-carousel-ring .hcard:nth-child(8) { transform: rotateY(315deg) translateZ(var(--r)); }
@media (prefers-reduced-motion: reduce) {
  .hero-carousel-ring { animation: none; transform: rotateY(-18deg); }
  .sig-live .hero-carousel-tilt,
  .no-sig .hero-carousel-tilt { animation: none; opacity: 1; }
}
@media (max-width: 640px) {
  .hero-carousel { perspective: 1200px; perspective-origin: 50% 48%; }
  .hero-carousel-ring { --r: clamp(190px, 50vw, 280px); }
  /* lighter shadow: big blur radii are costly to composite on the spinning ring */
  .hcard { --w: clamp(118px, 33vw, 168px); box-shadow: 0 12px 26px rgba(0,0,0,0.5); }
  .hcard img { filter: grayscale(1) contrast(1.05) brightness(0.58); }
}
/* three.js particle signature canvas: spans the whole hero */
.hero-canvas {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  z-index: 1;
  display: block;
  pointer-events: none;         /* interaction is tracked on window */
  opacity: 0;
  transition: opacity 1.1s var(--ease-out);
}
.sig-live .hero-canvas { opacity: 1; }

/* ---- hero signature → nav handoff ----
   The docking mark is white while the nav sits over dark sections and swaps
   to mocha the moment the nav flips back to the sky palette. */
.sd-light, .sd-dark { transition: opacity 0.45s var(--ease-out); }
.sd-dark { opacity: 1; }
.sd-light { opacity: 0; }
.nav.on-dark .sd-light { opacity: 1; }
.nav.on-dark .sd-dark { opacity: 0; }
/* the fallback img only reserves the hero box for FLIP measurement */
body.has-dock .hero-sig .hero-sig-fallback { opacity: 0; visibility: hidden; }
/* particles dissolve as the solid mark takes over and leaves for the corner */
body.is-docking .hero .hero-canvas { opacity: 0; }

.hero-inner {
  position: relative; z-index: 2;
  flex: 1;
  display: flex; flex-direction: column; justify-content: space-between;
  padding-top: clamp(96px, 13vh, 152px);
  padding-bottom: clamp(28px, 4vh, 56px);
  row-gap: clamp(20px, 4vh, 48px);
}
.hero-topline {
  display: flex; justify-content: space-between; align-items: baseline;
  flex-wrap: wrap; gap: 12px;
  color: var(--sky-70);
}
.hero-topline .label { color: var(--sky); }
.hero-sig {
  display: flex; justify-content: center; align-items: center;
  flex: 1;
}
.hero-sig .hero-sig-fallback {
  width: clamp(240px, 46vw, 620px);
  height: auto;
  filter: drop-shadow(0 18px 50px rgba(0,0,0,0.35));
}
/* once the particle canvas is live, the static fallback steps aside
   but keeps reserving its box so the layout never shifts */
.sig-live .hero-sig .hero-sig-fallback { opacity: 0; visibility: hidden; }

.hero-foot {
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(18px, 2.4vh, 30px);
  color: var(--sky-70);
  text-align: center;
}
.hero-caps { color: var(--sky); letter-spacing: 0.34em; }

/* prominent scroll cue */
.hero-scroll {
  display: inline-flex; flex-direction: column; align-items: center;
  gap: 12px;
  color: var(--sky);
}
.hero-scroll-word {
  font-family: var(--font-sans);
  font-size: clamp(13px, 1vw, 16px);
  font-weight: 500;
  letter-spacing: 0.42em; text-transform: uppercase;
  text-indent: 0.42em;      /* optically re-center the tracked text */
}
.hero-scroll-arrow {
  position: relative;
  width: 1px; height: clamp(34px, 5vh, 54px);
  background: var(--sky-40);
  overflow: hidden;
}
.hero-scroll-arrow::after {
  content: ""; position: absolute; left: 0; top: 0;
  width: 100%; height: 45%;
  background: var(--custard);
  animation: scrollDrop 2.1s var(--ease-inout) infinite;
}
@keyframes scrollDrop {
  0%   { transform: translateY(-120%); }
  60%  { transform: translateY(240%); }
  100% { transform: translateY(240%); }
}
.hero-scroll:hover .hero-scroll-word { color: var(--custard); }

.hero-foot .avail { display: flex; align-items: center; gap: 10px; color: var(--sky); }
.hero-foot .avail::before {
  content: ""; width: 8px; height: 8px; border-radius: 50%;
  background: var(--custard);
  animation: pulse 2.4s ease-in-out infinite;
}
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.25; } }
@media (max-width: 640px) {
  .hero-inner { row-gap: clamp(16px, 3vh, 28px); }
  .hero-sig .hero-sig-fallback { width: clamp(200px, 66vw, 420px); }
  .hero-topline { flex-direction: column; align-items: flex-start; gap: 6px; }
  .hero-caps { letter-spacing: 0.14em; font-size: 11px; }
  .hero-scroll-word { letter-spacing: 0.32em; text-indent: 0.32em; }
}
@media (prefers-reduced-motion: reduce) {
  .hero-scroll-arrow::after { animation: none; transform: translateY(60%); }
}

/* ---------- section headers ---------- */
.sec-head {
  display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; flex-wrap: wrap;
  margin-bottom: clamp(40px, 6vw, 96px);
}
.sec-head .mono { color: var(--mocha-70); }
.band .sec-head .mono { color: var(--sky-70); }

/* ---------- selected work: expanding photo banners ---------- */
.wi-range { color: var(--mocha-45); }

.work-projects {
  display: flex; flex-direction: column;
  /* break out of the section container to sit full-bleed, edge to edge */
  width: 100vw; margin-left: calc(50% - 50vw);
  border-top: 1px solid var(--mocha-18);
}

/* one project = a full-bleed banner: starts short + grayscale, then expands
   (~2x taller) and blooms into colour on hover, pushing the others down */
.wp-item {
  position: relative; display: block; overflow: hidden;
  height: clamp(150px, 20vh, 216px);
  border-bottom: 1px solid var(--mocha-18);
  color: #fff;
  transition: height 0.75s var(--ease-inout);
  will-change: height;
}
.wp-item:hover,
.wp-item:focus-visible { height: clamp(360px, 56vh, 560px); }

.wp-media { position: absolute; inset: 0; z-index: 0; overflow: hidden; }
.wp-img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: grayscale(1) contrast(1.02) brightness(0.82);
  transform: scale(1.08);
  transition: filter 0.8s var(--ease-out), transform 1s var(--ease-out);
  will-change: filter, transform;
}
.wp-item:hover .wp-img,
.wp-item:focus-visible .wp-img {
  filter: grayscale(0) contrast(1.04) brightness(0.92);
  transform: scale(1);
}
/* left-weighted scrim so the overlay type reads over any photo */
.wp-media::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(90deg,
    rgba(24,16,15,0.74) 0%, rgba(24,16,15,0.44) 36%, rgba(24,16,15,0.10) 68%, rgba(24,16,15,0) 100%);
}

.wp-inner {
  position: relative; z-index: 2; height: 100%;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(20px, 3vw, 46px) var(--margin);
  pointer-events: none;
}
.wp-num { color: rgba(255, 255, 255, 0.62); margin-bottom: clamp(6px, 0.8vw, 12px); }
.wp-title {
  display: block;
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5.2vw, 5.4rem);
  line-height: 0.95; letter-spacing: -0.015em; color: #fff;
  transition: transform 0.75s var(--ease-out);
}
.wp-item:hover .wp-title,
.wp-item:focus-visible .wp-title { transform: translateX(clamp(4px, 0.6vw, 12px)); }

/* description + cta only matter once the banner has opened up */
.wp-meta {
  display: block; max-width: 54ch;
  margin-top: clamp(10px, 1.4vw, 20px);
  color: rgba(255, 255, 255, 0.82);
  opacity: 0; transform: translateY(14px);
  transition: opacity 0.6s var(--ease-out) 0.06s, transform 0.6s var(--ease-out) 0.06s;
}
.wp-item:hover .wp-meta,
.wp-item:focus-visible .wp-meta { opacity: 1; transform: none; }
.wp-cat { display: block; color: var(--custard); }
.wp-desc { display: block; margin-top: 8px; }
.wp-view {
  display: inline-flex; align-items: center; gap: 8px;
  margin-top: clamp(12px, 1.4vw, 20px);
  color: var(--custard);
}
.wp-view svg { width: 17px; height: 17px; transition: transform 0.5s var(--ease-out); }
.wp-item:hover .wp-view svg { transform: translateX(5px); }

/* year sits opposite the title, top-right */
.wp-year {
  position: absolute; top: clamp(18px, 2.4vw, 32px); right: var(--margin); z-index: 2;
  color: rgba(255, 255, 255, 0.62);
}

/* touch / no-hover: banners stay open + colour, always readable */
@media (hover: none) {
  .wp-item { height: clamp(230px, 44vw, 340px); }
  .wp-img { filter: none; transform: none; }
  .wp-meta { opacity: 1; transform: none; }
  .wp-desc { display: none; }   /* keep touch cards tidy */
}

@media (prefers-reduced-motion: reduce) {
  .wp-item, .wp-img, .wp-title, .wp-meta, .wp-view svg { transition: none; }
  .wp-img { filter: none; }
}

/* ---------- mocha band (30%) ---------- */
.band {
  background: var(--mocha);
  color: var(--sky);
}
.band ::selection { background: var(--custard); color: var(--mocha); }
.band .muted { color: var(--sky-70); }
.hero .muted { color: var(--sky-70); }

/* capabilities rows */
.cap-row {
  position: relative;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  column-gap: var(--gutter);
  align-items: baseline;
  padding-block: clamp(22px, 3vw, 40px);
  border-top: 1px solid var(--sky-18);
  isolation: isolate;
  transition: color 0.45s var(--ease-inout);
}
.cap-list > .cap-row:last-child { border-bottom: 1px solid var(--sky-18); }
.cap-row::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--custard);
  transform: scaleY(0); transform-origin: bottom center;
  transition: transform 0.5s var(--ease-inout);
}
.cap-row:hover::before { transform: scaleY(1); transform-origin: top center; }
.cap-row:hover { color: var(--mocha); }
.cap-row .cap-idx { grid-column: 1 / span 1; color: var(--sky-70); transition: color 0.45s; }
.cap-row:hover .cap-idx { color: var(--mocha-70); }
.cap-row .cap-name { grid-column: 2 / span 6; }
.cap-row .cap-desc { grid-column: 8 / span 5; color: var(--sky-70); transition: color 0.45s; font-size: clamp(13px, 0.95vw, 15px); }
.cap-row:hover .cap-desc { color: var(--mocha-70); }
@media (max-width: 860px) {
  .cap-row .cap-idx { grid-column: 1 / -1; }
  .cap-row .cap-name { grid-column: 1 / -1; }
  .cap-row .cap-desc { grid-column: 1 / -1; margin-top: 8px; }
}

/* ---------- about ---------- */
.about-grid { align-items: start; row-gap: 48px; }
.about-media { grid-column: 1 / span 5; }
.about-copy { grid-column: 7 / span 6; }
.about-media .frame {
  overflow: clip; aspect-ratio: 4 / 5;
}
.about-media img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 860px) {
  .about-media, .about-copy { grid-column: 1 / -1; }
}

/* ---------- proof ---------- */
.quote-slab { max-width: 24ch; }
.proof-grid { row-gap: clamp(48px, 6vw, 96px); margin-top: clamp(48px, 6vw, 96px); }
.proof-item { grid-column: span 4; border-top: 1px solid var(--sky-18); padding-top: 24px; }
.proof-item .who { margin-top: 20px; color: var(--sky-70); }
.proof-item blockquote {
  font-family: var(--font-display);
  font-size: clamp(1.25rem, 1.8vw, 1.7rem);
  line-height: 1.25;
}
.client-strip {
  display: flex; flex-wrap: wrap; gap: 12px clamp(24px, 4vw, 64px);
  margin-top: clamp(56px, 7vw, 110px);
  padding-top: clamp(24px, 3vw, 40px);
  border-top: 1px solid var(--sky-18);
  color: var(--sky-70);
}
@media (max-width: 860px) { .proof-item { grid-column: 1 / -1; } }

/* ---------- contact ---------- */
.contact-head { margin-bottom: clamp(48px, 6vw, 96px); }
.contact-grid { row-gap: 56px; }
.contact-left { grid-column: 1 / span 5; display: flex; flex-direction: column; gap: 2rem; align-items: flex-start; }
.contact-form { grid-column: 7 / span 6; }
@media (max-width: 860px) { .contact-left, .contact-form { grid-column: 1 / -1; } }

.field { position: relative; margin-bottom: clamp(24px, 3vw, 40px); }
.field input, .field textarea, .field select {
  width: 100%;
  background: transparent;
  border: 0; border-bottom: 1px solid var(--mocha-45);
  padding: 14px 0 12px;
  font-family: var(--font-sans);
  font-size: clamp(1rem, 1.2vw, 1.2rem);
  color: var(--mocha);
  border-radius: 0;
  transition: border-color 0.35s;
  appearance: none;
}
.field textarea { resize: vertical; min-height: 96px; }
.field input::placeholder, .field textarea::placeholder { color: var(--mocha-45); }
.field .field-line {
  position: absolute; left: 0; bottom: 0;
  width: 100%; height: 2px;
  background: var(--custard);
  transform: scaleX(0); transform-origin: left center;
  transition: transform 0.5s var(--ease-inout);
}
.field input:focus ~ .field-line, .field textarea:focus ~ .field-line { transform: scaleX(1); }
.field input:focus, .field textarea:focus { outline: none; border-color: var(--mocha); }
.field .flabel { display: block; margin-bottom: 6px; color: var(--mocha-70); }
.email-giant {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 3.4vw, 3.6rem);
  line-height: 1.1;
}
.form-note { margin-top: 18px; color: var(--mocha-70); }
.form-status { margin-top: 14px; color: var(--mocha); min-height: 1.4em; }

/* ---------- footer ---------- */
.footer { background: var(--mocha); color: var(--sky); }
.footer .muted { color: var(--sky-70); }
.footer-inner { padding-block: clamp(64px, 9vw, 140px) clamp(28px, 3vw, 44px); }
.footer-sig img { height: clamp(48px, 6vw, 88px); width: auto; }
.footer-cta { margin-top: clamp(40px, 6vw, 90px); }
.footer-email {
  font-family: var(--font-display);
  font-size: clamp(2rem, 6vw, 6.4rem);
  line-height: 1.05;
  display: inline-block; position: relative;
}
.footer-email::after {
  content: "";
  position: absolute; left: 0; bottom: 0.03em;
  width: 100%; height: 0.06em;
  background: var(--custard);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.6s var(--ease-inout);
}
.footer-email:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-meta {
  display: flex; justify-content: space-between; align-items: flex-end;
  flex-wrap: wrap; gap: 24px;
  margin-top: clamp(64px, 9vw, 140px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--sky-18);
  color: var(--sky-70);
}
.footer-meta ul { display: flex; gap: clamp(16px, 2.4vw, 40px); flex-wrap: wrap; }
.footer-meta a { position: relative; }
.footer-meta a::after {
  content: ""; position: absolute; left: 0; bottom: -3px;
  width: 100%; height: 1px; background: var(--custard);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.4s var(--ease-inout);
}
.footer-meta a:hover::after { transform: scaleX(1); transform-origin: left center; }
.footer-meta a:hover { color: var(--sky); }

/* ============================================================
   CASE STUDY PAGES
   ============================================================ */
.case-hero { padding-top: clamp(140px, 20vh, 240px); }
.case-hero .case-kicker { display: flex; gap: 18px; align-items: baseline; flex-wrap: wrap; color: var(--mocha-70); }
.case-hero h1 { margin-top: 0.2em; }
.case-meta {
  display: grid; grid-template-columns: repeat(12, 1fr); column-gap: var(--gutter); row-gap: 24px;
  margin-top: clamp(40px, 5vw, 72px);
  padding-top: clamp(20px, 2.5vw, 32px);
  border-top: 1px solid var(--mocha-18);
}
.case-meta > div { grid-column: span 3; }
.case-meta .k { color: var(--mocha-70); margin-bottom: 8px; }
@media (max-width: 860px) { .case-meta > div { grid-column: span 6; } }

.case-intro { max-width: 62ch; }

.fullbleed { position: relative; overflow: clip; }
.fullbleed img { width: 100%; height: 100%; object-fit: cover; }
.fullbleed.vh { height: min(92svh, 1000px); }

.case-grid { row-gap: var(--gutter); }
.case-grid .cell { overflow: clip; background: var(--mocha); border: 1px solid var(--mocha); }
.case-grid .cell img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out); will-change: transform; }
.case-grid .cell:hover img { transform: scale(1.03); }
.cell.c6 { grid-column: span 6; }
.cell.c4 { grid-column: span 4; }
.cell.c12 { grid-column: 1 / -1; }
.cell.c8 { grid-column: 3 / span 8; }
.cell.tall { aspect-ratio: 4 / 5; }
.cell.wide { aspect-ratio: 16 / 10; }
.cell.sq { aspect-ratio: 1 / 1; }
.cell.poster { aspect-ratio: 2 / 3; }
/* document-style artwork: show the whole sheet on the mocha frame */
.cell.fit img { object-fit: contain; }
@media (max-width: 860px) {
  .cell.c6, .cell.c4, .cell.c8 { grid-column: 1 / -1; }
}

.case-note { max-width: 56ch; }
.case-statement { max-width: 26ch; }

.case-next { display: block; }
.case-next .np-label { color: var(--sky-70); margin-bottom: 16px; }
.case-next .np-title { position: relative; display: inline-block; }
.case-next .np-title::after {
  content: "";
  position: absolute; left: 0; bottom: 0.02em;
  width: 100%; height: 0.06em;
  background: var(--custard);
  transform: scaleX(0); transform-origin: right center;
  transition: transform 0.55s var(--ease-inout);
}
.case-next:hover .np-title::after { transform: scaleX(1); transform-origin: left center; }

.video-frame { border: 1px solid var(--mocha); background: var(--mocha); overflow: clip; }
.video-frame video { width: 100%; height: auto; }

/* ---------- reveal defaults (JS adds motion; keep visible w/o JS) ---------- */
[data-reveal] { will-change: transform, opacity; }
.no-js [data-reveal], .no-js .split-inner { opacity: 1 !important; transform: none !important; }

/* ---------- Barba page-transition curtain ---------- */
.barba-curtain {
  position: fixed; inset: 0; z-index: 9500;
  background: var(--mocha);
  transform: scaleY(0); transform-origin: bottom center;
  will-change: transform;
  pointer-events: none;
  visibility: hidden;
}
[data-barba="container"] { will-change: opacity; }

/* ---------- reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html { scroll-behavior: auto; }
}