/* ═══════════════════════════════════════════════════════════════════
   NightCityWeb — one-page studio site
   "Unfold the unexpected."

   The whole system is derived from the three folded panels in the
   NightCityWeb symbol: a 38° fold angle and a parallelogram whose
   top edge rises by 36% of its height. Those two numbers drive the
   masks, wipes, hover sweeps and section transitions throughout.
   ═══════════════════════════════════════════════════════════════════ */

/* ── 1 · Tokens ─────────────────────────────────────────────────── */
:root{
  /* Brand — taken from the supplied identity sheet */
  --navy:        #0F1F2D;   /* Night Navy  */
  --coral:       #FF6B4A;   /* Coral Orange */
  --paper:       #F4F3EF;   /* warm off-white */

  --navy-900:    #081420;
  --navy-800:    #0B1926;
  --navy-700:    #16293A;
  --navy-600:    #203547;
  --navy-500:    #2C455B;
  --sand:        #E7DDCB;

  --coral-600:   #F0522C;   /* pressed */
  --ember:       #C43E1A;   /* coral-family text on light — 4.67:1 */

  --ink-dim-light: #4A5563; /* on paper — 6.8:1  */
  --ink-dim-dark:  #8D9BAA; /* on navy  — 5.9:1  */
  --rule-light:  rgba(15,31,45,.16);
  --rule-dark:   rgba(244,243,239,.18);

  /* Fold geometry */
  --fold-angle:  128deg;    /* gradient angle whose edge sits at 38° */
  --rise:        36%;       /* parallelogram top-edge offset        */
  --fold-up:     polygon(0 var(--rise), 100% 0, 100% calc(100% - var(--rise)), 0 100%);
  --fold-down:   polygon(0 0, 100% var(--rise), 100% 100%, 0 calc(100% - var(--rise)));

  /* Type */
  --f-display: "Archivo", "Helvetica Neue", Arial, sans-serif;
  --f-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, monospace;

  /* Space & layout */
  --gut: clamp(20px, 5vw, 72px);
  --maxw: 1680px;
  --head-h: 68px;
  --sec-pad: clamp(5rem, 11vh, 9.5rem);

  /* Motion */
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --ease-in-out: cubic-bezier(.65, 0, .35, 1);
  --t-fast: .28s;
  --t-mid: .55s;
  --t-slow: .9s;
}
@media (min-width: 900px){ :root{ --head-h: 88px; } }

/* ── 2 · Reset ──────────────────────────────────────────────────── */
*, *::before, *::after{ box-sizing: border-box; }
html{ -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body{
  margin: 0;
  background: var(--navy-800);
  color: var(--paper);
  font-family: var(--f-display);
  font-size: 1rem;
  line-height: 1.6;
  font-synthesis-weight: none;
  -webkit-font-smoothing: antialiased;
  overflow-x: clip;
}
@media (min-width: 900px){ body{ font-size: 1.0625rem; } }
img, svg, video{ display: block; max-width: 100%; }
button, input, textarea{ font: inherit; color: inherit; }
button{ background: none; border: 0; cursor: pointer; }
ul, ol{ list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p, figure{ margin: 0; }
a{ color: inherit; }
:target{ scroll-margin-top: calc(var(--head-h) + 16px); }
section[id], [id]{ scroll-margin-top: calc(var(--head-h) + 16px); }

/* Focus — 2px ring plus offset, never removed */
:focus-visible{
  outline: 2px solid var(--focus, var(--coral));
  outline-offset: 3px;
  border-radius: 1px;
}
.on-light :focus-visible, .light-ctx :focus-visible{ --focus: var(--navy); }

.sr-only{
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip-path: inset(50%); white-space: nowrap;
}
.skip-link{
  position: fixed; top: 10px; left: 10px; z-index: 200;
  padding: .75rem 1.25rem; background: var(--coral); color: var(--navy);
  font-weight: 700; text-decoration: none; letter-spacing: .08em;
  text-transform: uppercase; font-size: .75rem;
  transform: translateY(-160%);
  transition: transform var(--t-fast) var(--ease-out);
}
.skip-link:focus-visible{ transform: none; }
.sprite{ position: absolute; width: 0; height: 0; overflow: hidden; }

.shell{ width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto; }

/* ── 3 · Type primitives ────────────────────────────────────────── */
.display{
  font-weight: 800;
  font-stretch: 105%;
  line-height: .86;
  letter-spacing: -.035em;
  text-transform: uppercase;
  font-size: clamp(2.75rem, 10.5vw, 11rem);
}
.display--l{ font-size: clamp(2.35rem, 7.4vw, 7rem); line-height: .9; }
.display--m{ font-size: clamp(2rem, 4.6vw, 4.25rem); line-height: .92; letter-spacing: -.03em; }

/* Every headline keeps the line breaks it was written with. Each block is
   sized against its own container (factors measured from the rendered
   face), so a line can never wrap and never overflow. */
.fit{ container-type: inline-size; }
@supports (width: 1cqw){
  .fit .mask{ white-space: nowrap; }
  .fit--hero .display{ font-size: min(10.6cqw, 12.5rem); }
  .fit--work .display{ font-size: min(10.69cqw, 7rem); }
  .fit--studio .display{ font-size: min(7.65cqw, 8rem); }
  .fit--process .display{ font-size: min(13.84cqw, 7rem); }
  .fit--contact .display{ font-size: min(10.2cqw, 11rem); }
  .fit--cap .cap__name{ font-size: min(5.7cqw, 5.5rem); white-space: nowrap; }
  .fit--project .project__title{ font-size: min(10.3cqw, 4.5rem); white-space: nowrap; }
}
@media (min-width: 900px){
  @supports (width: 1cqw){
    /* leaves the right margin clear for the coral panel */
    .fit--hero .display{ font-size: min(9.3cqw, 11rem); }
  }
}

.eyebrow{
  font-family: var(--f-mono);
  font-size: .75rem;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--dim, var(--ink-dim-dark));
  margin: 0;
}
.eyebrow--rule{ display: flex; align-items: center; gap: .9rem; }
.eyebrow--rule::before{
  content: ""; width: clamp(28px, 4vw, 64px); height: 2px;
  background: var(--accent-ctx, var(--coral)); flex: none;
}

/* Masked headline reveal. Visible by default; only hidden once JS
   confirms motion is wanted, so no-JS and reduced-motion read fine. */
.mask{ display: block; overflow: hidden; padding-bottom: .1em; margin-bottom: -.1em; }
.mask__in{ display: block; will-change: transform; }
html.js:not(.rm) .mask__in{ transform: translateY(108%); }
html.js:not(.rm) .is-in .mask__in,
html.js:not(.rm) [data-reveal].is-in .mask__in{
  transform: none;
  transition: transform var(--t-slow) var(--ease-out) var(--d, 0ms);
}
html.js:not(.rm) .hero__title .mask__in{ transition: transform 1.05s var(--ease-out) var(--d, 0ms); }

html.js:not(.rm) p[data-reveal], html.js:not(.rm) li[data-reveal]{
  opacity: 0; transform: translateY(18px);
}
html.js:not(.rm) p[data-reveal].is-in, html.js:not(.rm) li[data-reveal].is-in{
  opacity: 1; transform: none;
  transition: opacity var(--t-mid) var(--ease-out) var(--d, 0ms),
              transform var(--t-slow) var(--ease-out) var(--d, 0ms);
}

/* ── 4 · Buttons, tags, controls ────────────────────────────────── */
.btn{
  display: inline-flex; align-items: center; justify-content: center; gap: .7em;
  min-height: 52px; padding: .9rem 1.75rem;
  font-family: var(--f-mono); font-size: .75rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase; text-decoration: none;
  border: 1px solid transparent; position: relative;
  /* the hover fill arrives on a 38° diagonal — the logo's fold angle */
  background-image: linear-gradient(var(--fold-angle), var(--hov, transparent) 0 50%, rgba(0,0,0,0) 50%);
  background-size: 280% 100%;
  background-position: 100% 0;
  background-repeat: no-repeat;
  transition: background-position var(--t-mid) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              border-color var(--t-fast) var(--ease-out);
}
.btn:hover, .btn:focus-visible{ background-position: 0 0; }
.btn--sm{ min-height: 44px; padding: .7rem 1.2rem; font-size: .6875rem; }
.btn--wide{ width: 100%; }

.btn--solid{ background-color: var(--coral); color: var(--navy); --hov: var(--navy); }
.btn--solid:hover, .btn--solid:focus-visible{ color: var(--paper); }

.btn--dark{ background-color: var(--navy); color: var(--paper); --hov: var(--paper); }
.btn--dark:hover, .btn--dark:focus-visible{ color: var(--navy); }

.btn--line{ border-color: currentColor; --hov: currentColor; }
.btn--line:hover, .btn--line:focus-visible{ color: var(--btn-line-hov, var(--navy)); }
.on-dark .btn--line:hover, .on-dark .btn--line:focus-visible{ color: var(--navy); }

.rnd{
  width: 52px; height: 52px; display: grid; place-items: center;
  border: 1px solid currentColor; border-radius: 50%;
  transition: background-color var(--t-fast) var(--ease-out),
              color var(--t-fast) var(--ease-out),
              transform var(--t-fast) var(--ease-out);
}
.rnd svg{ width: 22px; height: 22px; }
.rnd:hover{ background: currentColor; }
.rnd:hover svg{ color: var(--rnd-hov, var(--paper)); }
.rnd:active{ transform: scale(.94); }
.rnd[disabled]{ opacity: .32; cursor: not-allowed; }
.rnd[disabled]:hover{ background: none; }

.tag{
  display: inline-block;
  font-family: var(--f-mono); font-size: .6875rem; font-weight: 500;
  letter-spacing: .16em; text-transform: uppercase;
  padding: .45em .85em; border: 1px solid currentColor;
  color: var(--sleeve-accent, var(--coral));
}
.tag--live{ background: var(--sleeve-accent, var(--coral)); color: var(--sleeve, var(--paper)); }

/* ── 5 · Header & brand ─────────────────────────────────────────── */
.site-head{
  position: fixed; inset: 0 0 auto; z-index: 100;
  color: var(--hd-fg, var(--paper));
  --ncw-accent: var(--hd-accent, var(--coral));
  --focus: var(--hd-focus, var(--coral));
  transition: color var(--t-mid) var(--ease-in-out),
              background-color var(--t-mid) var(--ease-in-out);
}
.site-head[data-theme="light"]{ --hd-fg: var(--navy); --hd-accent: var(--coral); --hd-focus: var(--navy); }
.site-head[data-theme="coral"]{ --hd-fg: var(--navy); --hd-accent: var(--navy);  --hd-focus: var(--navy); }
/* Opaque once it leaves the top, so the bar always matches the ground
   it sits on rather than muddying it */
.site-head.is-stuck{ background: var(--hd-bg, var(--navy-800)); }
/* the coral CTA would vanish on the coral section — invert it there */
.site-head[data-theme="coral"] .btn--solid{
  background-color: var(--navy); color: var(--coral); --hov: var(--paper);
}
.site-head[data-theme="coral"] .btn--solid:hover,
.site-head[data-theme="coral"] .btn--solid:focus-visible{ color: var(--navy); }
.site-head.is-stuck::after{
  content: ""; position: absolute; inset: auto 0 0; height: 1px;
  background: currentColor; opacity: .14;
}

.site-head__bar{
  width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto;
  min-height: var(--head-h);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem);
}
.site-head__cta{ display: none; margin-left: auto; }
@media (min-width: 900px){ .site-head__cta{ display: inline-flex; } }

.brand{ display: flex; align-items: center; gap: .85rem; text-decoration: none; flex: none; }
.brand__symbol{ display: none; width: 30px; color: currentColor; }
.brand__symbol svg{ width: 100%; height: auto; }
@media (max-width: 479px){
  .brand__symbol{ display: block; }
  .brand .wordmark{ display: none; }
}

/* Two masked layers keep the lockup on-brand on any ground:
   NIGHTCITY + the two navy panels take currentColor, WEB + the third
   panel take the accent. Falls back to live text if masks are off. */
.wordmark{
  position: relative; display: block;
  width: var(--wm-w, 150px); aspect-ratio: 1492 / 225;
}
.wordmark__layer{ display: none; position: absolute; inset: 0; }
.wordmark__fallback{
  font-weight: 800; font-size: calc(var(--wm-w, 150px) / 9.6);
  letter-spacing: -.01em; text-transform: uppercase; line-height: 1.5;
}
.wordmark__fallback b{ color: var(--ncw-accent, var(--coral)); }
@supports (mask-image: linear-gradient(#000, #000)){
  .wordmark__layer{
    display: block;
    -webkit-mask-size: 100% 100%; mask-size: 100% 100%;
    -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat;
  }
  .wordmark__layer--primary{
    background: currentColor;
    -webkit-mask-image: url("../img/logo/wordmark-mask-primary.webp");
    mask-image: url("../img/logo/wordmark-mask-primary.webp");
  }
  .wordmark__layer--accent{
    background: var(--ncw-accent, var(--coral));
    -webkit-mask-image: url("../img/logo/wordmark-mask-accent.webp");
    mask-image: url("../img/logo/wordmark-mask-accent.webp");
  }
  .wordmark__fallback{
    position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%);
  }
}
@media (min-width: 900px){ .wordmark{ --wm-w: 186px; } }

.site-nav{ display: none; margin-left: auto; }
@media (min-width: 900px){ .site-nav{ display: block; } }
.site-nav__list{ display: flex; gap: clamp(1.4rem, 2.6vw, 2.75rem); }
.site-nav__list a{
  display: block; padding: .6rem 0; text-decoration: none;
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em;
  text-transform: uppercase; position: relative;
}
.site-nav__list a::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: .1rem; height: 2px;
  background: var(--ncw-accent, var(--coral));
  transform: scaleX(0); transform-origin: left;
  transition: transform var(--t-mid) var(--ease-out);
}
.site-nav__list a:hover::after, .site-nav__list a:focus-visible::after{ transform: scaleX(1); }
.site-nav__list a[aria-current="true"]::after{ transform: scaleX(1); }

.menu-btn{
  margin-left: auto; display: flex; align-items: center; gap: .6rem;
  min-height: 48px; padding: .5rem 0;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; text-transform: uppercase;
}
@media (min-width: 900px){ .menu-btn{ display: none; } }
.menu-btn__lines{ display: grid; gap: 5px; width: 26px; }
.menu-btn__lines i{ height: 2px; background: currentColor; transition: transform var(--t-fast) var(--ease-out); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:first-child{ transform: translateY(3.5px) rotate(19deg); }
.menu-btn[aria-expanded="true"] .menu-btn__lines i:last-child{ transform: translateY(-3.5px) rotate(-19deg); }

/* Full-screen menu — enters on the fold diagonal */
.menu-panel{
  position: fixed; inset: 0; z-index: 99;
  background: var(--navy); color: var(--paper);
  --ncw-accent: var(--coral); --focus: var(--coral);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(var(--head-h) + 2rem) var(--gut) 2rem;
  clip-path: polygon(-30% 130%, -86% 130%, -30% -30%, -30% -30%);
  transition: clip-path .72s var(--ease-out);
}
.menu-panel[hidden]{ display: none; }
.menu-panel.is-open{ clip-path: polygon(-30% 130%, 186% 130%, 242% -30%, -30% -30%); }
.menu-panel__nav li{ border-top: 1px solid var(--rule-dark); }
.menu-panel__nav li:last-child{ border-bottom: 1px solid var(--rule-dark); }
.menu-panel__nav a{
  display: flex; align-items: baseline; gap: 1.1rem; padding: clamp(.8rem, 3vw, 1.4rem) 0;
  text-decoration: none; font-weight: 800; letter-spacing: -.02em; text-transform: uppercase;
  font-size: clamp(2rem, 11vw, 3.5rem); line-height: 1;
  transition: color var(--t-fast) var(--ease-out), transform var(--t-fast) var(--ease-out);
}
.menu-panel__nav a:hover{ color: var(--coral); transform: translateX(10px); }
.menu-panel__num{ font-family: var(--f-mono); font-size: .8125rem; font-weight: 400; color: var(--coral); letter-spacing: .1em; }
.menu-panel__foot{
  margin-top: 2.5rem; display: flex; align-items: center; gap: .8rem;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--ink-dim-dark);
}
.menu-panel__mark{ width: 26px; color: var(--paper); }

/* ── 6 · Hero ───────────────────────────────────────────────────── */
.hero{
  --u: 0; --w: 0;
  position: relative;
  height: 215svh;
  background: var(--navy-800);
}
@media (max-width: 899px){ .hero{ height: 172svh; } }
html:not(.js) .hero, html.rm .hero{ height: auto; }

.hero__stage{
  position: sticky; top: 0; height: 100svh; overflow: hidden;
  perspective: 1400px;
}
html:not(.js) .hero__stage, html.rm .hero__stage{ position: static; height: auto; min-height: 100svh; }

.hero__scene{
  position: relative; height: 100%;
  display: flex; align-items: center;
  padding-block: calc(var(--head-h) + 2rem) 5rem;
}
.hero__copy{
  position: relative; z-index: 2;
  width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto;
  opacity: clamp(0, calc(1 - var(--u) * 2.6), 1);
  transform: translate3d(0, calc(var(--u) * -6vh), 0);
}
.hero__title{ margin: clamp(1.25rem, 2.4vh, 2rem) 0 clamp(1.5rem, 3vh, 2.25rem); }
.hero__title .mask:nth-child(2) .mask__in{ --d: 90ms; }
.hero__title .mask:nth-child(3) .mask__in{ --d: 180ms; color: var(--coral); }
.hero__lead{
  max-width: 34ch; color: var(--paper);
  font-size: clamp(1.0625rem, 1.5vw, 1.35rem); line-height: 1.5;
}
.hero__actions{ display: flex; flex-wrap: wrap; gap: .85rem; margin-top: clamp(1.75rem, 4vh, 2.75rem); }

/* Abstract composition built from the three folded panels */
.hero__rig{
  position: absolute; z-index: 1;
  inset: -8% -16% -8% 52%;
  transform-style: preserve-3d;
  transform: rotateY(calc(var(--mx, 0) * 4deg)) rotateX(calc(var(--my, 0) * -3deg));
  transition: transform .5s var(--ease-out);
}
@media (max-width: 899px){
  .hero__rig{ inset: auto -22% -2% 6%; height: 44svh; opacity: .6; }
}
.fold{
  position: absolute; will-change: transform;
  box-shadow: 0 30px 80px -40px rgba(0,0,0,.85);
  /* a hairline crease keeps each panel legible against the next */
  outline: 1px solid rgba(244,243,239,.07);
  outline-offset: -1px;
}
.fold--a{
  left: 0; top: 8%; width: 42%; height: 70%;
  background: linear-gradient(112deg, #24405A, #13232F);
  clip-path: var(--fold-up);
  transform:
    translate3d(calc(var(--mx, 0) * -16px + var(--u) * -14vw), calc(var(--my, 0) * -12px + var(--u) * -12vh), 0)
    rotate(calc(var(--u) * -7deg)) scale(calc(1 + var(--u) * 1.5));
}
.fold--b{
  left: 28%; top: 20%; width: 45%; height: 78%;
  background: linear-gradient(112deg, #16283A, #0C1A26);
  clip-path: var(--fold-down);
  transform:
    translate3d(calc(var(--mx, 0) * 10px + var(--u) * 6vw), calc(var(--my, 0) * 14px + var(--u) * 16vh), 0)
    rotate(calc(var(--u) * 5deg)) scale(calc(1 + var(--u) * 1.8));
}
.fold--c{
  left: 60%; top: 4%; width: 43%; height: 68%;
  background: linear-gradient(112deg, #FF7B5B, #EE5330);
  clip-path: var(--fold-up);
  transform:
    translate3d(calc(var(--mx, 0) * 22px + var(--u) * 18vw), calc(var(--my, 0) * -18px + var(--u) * -18vh), 0)
    rotate(calc(var(--u) * 9deg)) scale(calc(1 + var(--u) * 1.6));
}

.hero__cue{
  position: absolute; z-index: 2; right: max(var(--gut), (100vw - var(--maxw)) / 2); bottom: 2.25rem;
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .22em;
  text-transform: uppercase; color: var(--ink-dim-dark);
  opacity: clamp(0, calc(1 - var(--u) * 5), 1);
  display: flex; align-items: center; gap: .75rem;
}
@media (max-width: 899px){ .hero__cue{ display: none; } }
.hero__cue::before{
  content: ""; width: 1px; height: 34px; background: currentColor;
  transform-origin: top; animation: cue 2.6s var(--ease-in-out) infinite;
}
@keyframes cue{ 0%,100%{ transform: scaleY(.3); opacity:.4 } 50%{ transform: scaleY(1); opacity:1 } }

/* Signature moment 1 — the panels open into a diagonal wipe */
.hero__wipe{
  position: absolute; inset: 0; z-index: 3;
  --shear: 58%;
  --wx: calc(var(--w) * (160% + var(--shear)) - var(--shear) - 30%);
  clip-path: polygon(-30% 130%, var(--wx) 130%, calc(var(--wx) + var(--shear)) -30%, -30% -30%);
}
html:not(.js) .hero__wipe, html.rm .hero__wipe{ display: none; }

.plate{
  height: 100%; background: var(--paper); color: var(--navy);
  position: relative; overflow: hidden; display: grid; place-items: center;
  padding-inline: var(--gut);
  container-type: inline-size;
}
.plate__fold{
  position: absolute; width: clamp(280px, 44vw, 720px);
  color: var(--navy); --ncw-accent: var(--navy); opacity: .08;
  transform: rotate(-8deg) translate3d(0, calc(var(--w) * -4vh), 0);
}
.plate__fold svg{ width: 100%; height: auto; }
.plate__word{
  font-family: var(--f-display); font-weight: 900; font-stretch: 112%;
  text-transform: uppercase; letter-spacing: -.045em; line-height: .8;
  font-size: min(23.5cqw, 20rem);
  color: transparent; -webkit-text-stroke: clamp(1px, .18vw, 3px) var(--navy);
  position: relative;
}
@supports not (width: 1cqw){ .plate__word{ font-size: clamp(5rem, 21vw, 20rem); } }
.plate__index{
  position: absolute; bottom: clamp(1.5rem, 5vh, 3rem); left: 0; right: 0;
  display: flex; justify-content: center; gap: clamp(1rem, 4vw, 3rem);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .2em; color: var(--ink-dim-light);
}
.plate__index span:first-child{ color: var(--ember); }

/* ── 7 · Selected work ──────────────────────────────────────────── */
.work{ background: var(--paper); color: var(--navy); --dim: var(--ink-dim-light); --focus: var(--navy); }
.work__intro{ padding-block: var(--sec-pad) clamp(2rem, 5vh, 3.5rem); }
.work__title{ margin: clamp(1rem, 2vw, 1.75rem) 0 clamp(1rem, 2vw, 1.5rem); }
.work__title .mask:nth-child(2) .mask__in{ --d: 90ms; }
.work__note{ max-width: 46ch; color: var(--ink-dim-light); font-size: 1.0625rem; }

.work__pin{ --n: 5; --travel: -80%; position: relative; }
/* matches the active sleeve so a sub-pixel seam between slides never shows */
.work__viewport{ position: relative; background: var(--vp-bg, transparent); transition: background-color var(--t-mid) var(--ease-in-out); }
.work__track{ display: flex; }
.project{ flex: 0 0 100%; min-width: 0; }

/* Desktop: a short pinned sequence — vertical scroll drives lateral travel */
@media (min-width: 900px){
  html.js:not(.rm) .work__pin{
    height: calc(100svh + (var(--n) - 1) * 86svh);
    padding-bottom: 1px;
  }
  html.js:not(.rm) .work__viewport{
    position: sticky; top: 0; height: 100svh; overflow: hidden;
  }
  html.js:not(.rm) .work__track{
    width: calc(var(--n) * 100%);
    transform: translate3d(calc(var(--p, 0) * var(--travel)), 0, 0);
    will-change: transform;
  }
  html.js:not(.rm) .project{ flex: 0 0 calc(100% / var(--n)); height: 100svh; }
}

/* Mobile & reduced motion: a natural swipe gallery with a peek of the next */
@media (max-width: 899px){
  .work__track{
    overflow-x: auto; scroll-snap-type: x mandatory;
    gap: clamp(12px, 3vw, 20px); padding-inline: var(--gut);
    scrollbar-width: none; -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
  }
  .work__track::-webkit-scrollbar{ display: none; }
  .project{ flex: 0 0 min(84vw, 460px); scroll-snap-align: center; }
  .project__inner{ width: 100%; }
}
html.rm .work__track, html:not(.js) .work__track{
  overflow-x: auto; scroll-snap-type: x mandatory;
  gap: 20px; padding-inline: var(--gut);
}
html.rm .project, html:not(.js) .project{ flex: 0 0 min(84vw, 620px); scroll-snap-align: center; }

.project__inner{
  height: 100%;
  display: grid; align-content: center; gap: clamp(1.25rem, 3vw, 2.5rem);
  padding-block: clamp(1.5rem, 4vh, 3rem);
}
@media (min-width: 900px){
  .project__inner{
    grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr);
    align-items: center;
    padding-top: calc(var(--head-h) + 2vh);
    padding-bottom: clamp(5rem, 12vh, 8rem);
  }
}

.project__art{ position: relative; }
.project__frame{
  position: relative; overflow: hidden;
  aspect-ratio: 3 / 2;
  background: var(--sleeve, var(--sand));
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--sleeve-ink) 16%, transparent);
  /* opens from a folded panel to a full frame as the project arrives */
  clip-path: polygon(
    0 calc(var(--rise) - var(--e, 1) * var(--rise)),
    100% 0,
    100% calc(100% - var(--rise) + var(--e, 1) * var(--rise)),
    0 100%);
}
.project__frame > *{
  width: 100%; height: 100%; object-fit: cover; object-position: left top;
  transform: scale(calc(1.14 - var(--e, 1) * .14)) translate3d(0, calc((1 - var(--e, 1)) * 2%), 0);
}
/* Catalogue number sits just above the sleeve, clear of the artwork */
.project__num{
  position: absolute; z-index: 2; bottom: calc(100% - .28em); left: -.04em;
  font-family: var(--f-mono); font-weight: 500;
  font-size: clamp(3rem, 7vw, 6.5rem); line-height: 1;
  color: var(--sleeve-accent, var(--coral));
  opacity: clamp(0, calc(var(--e, 1) * 1.6 - .3), 1);
  transform: translate3d(0, calc((1 - var(--e, 1)) * 24px), 0);
}
@media (min-width: 900px){ .project__num{ left: auto; right: -.03em; } }

.project__meta{ display: grid; gap: clamp(.9rem, 1.6vw, 1.4rem); align-content: center; justify-items: start; }
.project__status{ margin: 0; }
.project__title{
  opacity: clamp(0, calc(var(--e, 1) * 1.8 - .5), 1);
  transform: translate3d(0, calc((1 - var(--e, 1)) * 30px), 0);
}
.project__desc{ max-width: 42ch; color: var(--ink-dim-light); }
.project[data-hud="light"] .project__desc{ color: var(--ink-dim-dark); }
.project__tags{ display: flex; flex-wrap: wrap; gap: .5rem .5rem; }
.project__actions{ display: flex; flex-wrap: wrap; gap: .6rem; }
.btn__ext{ font-size: 1.1em; line-height: 0; }
.project__tags li{
  font-family: var(--f-mono); font-size: .6875rem; letter-spacing: .12em;
  text-transform: uppercase; padding: .4em .7em;
  border: 1px solid var(--rule-light); color: var(--ink-dim-light);
}
.project[data-hud="light"] .project__tags li{ border-color: var(--rule-dark); color: var(--ink-dim-dark); }

/* Each project carries its own ground, so the background slides with it */
.project{ background: var(--sleeve); color: var(--sleeve-ink); }
.project[data-hud="light"]{ --focus: var(--coral); --btn-line-hov: var(--navy); }
.project[data-hud="dark"]{ --focus: var(--navy); --btn-line-hov: var(--sleeve); }

.work__hud{
  display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem);
  padding: 1rem var(--gut) 1.5rem;
  color: var(--hud-fg, var(--navy));
}
@media (min-width: 900px){
  html.js:not(.rm) .work__hud{
    position: absolute; z-index: 5; left: 0; right: 0; bottom: 0;
    width: min(100% - var(--gut) * 2, var(--maxw)); margin-inline: auto;
    padding: 0 0 clamp(1.75rem, 4vh, 3rem);
    transition: color var(--t-mid) var(--ease-in-out);
  }
}
.work__count{ font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .14em; font-variant-numeric: tabular-nums; }
.work__count i{ opacity: .45; font-style: normal; padding: 0 .4em; }
.work__bars{ display: flex; gap: 6px; flex: 1; max-width: 260px; }
.work__bars i{ height: 2px; flex: 1; background: currentColor; opacity: .22; transition: opacity var(--t-mid) var(--ease-out); }
.work__bars i.is-on{ opacity: 1; }
.work__ctrls{ display: flex; gap: .6rem; margin-left: auto; }
.work__hud .rnd{ --rnd-hov: var(--sleeve, var(--paper)); }

/* ── 8 · Studio statement ───────────────────────────────────────── */
.studio{
  background: var(--navy); color: var(--paper);
  --dim: var(--ink-dim-dark); --focus: var(--coral);
  padding-block: var(--sec-pad);
}
.studio__grid{ display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 1000px){
  .studio__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .82fr); }
  .studio .eyebrow, .studio__titlewrap{ grid-column: 1 / -1; }
  .studio__body{ grid-column: 2; justify-self: end; }
}
.studio__titlewrap{ min-width: 0; }
.studio__title .mask:nth-child(2) .mask__in{ --d: 110ms; }
.studio__title .mask:nth-child(3) .mask__in{ --d: 220ms; color: var(--coral); }
.studio__body{ display: grid; gap: 1.25rem; max-width: 46ch; color: var(--ink-dim-dark); }
.studio__body p:first-child{ color: var(--paper); font-size: clamp(1.0625rem, 1.4vw, 1.25rem); }
.studio__body p:nth-child(2){ --d: 100ms; }
.studio__sig{
  display: flex; align-items: center; gap: .8rem; margin-top: .5rem; --d: 200ms;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--paper);
}
.studio__mark{ width: 30px; color: var(--paper); flex: none; }

/* ── 9 · Capabilities ───────────────────────────────────────────── */
.caps{
  background: var(--paper); color: var(--navy);
  --dim: var(--ink-dim-light); --focus: var(--navy);
  padding-block: var(--sec-pad);
}
.caps__list{ margin-top: clamp(1.5rem, 4vw, 3rem); }
.cap{ position: relative; border-top: 1px solid var(--rule-light); }
.cap:last-child{ border-bottom: 1px solid var(--rule-light); }
.cap__head{ margin: 0; font-size: inherit; font-weight: inherit; }
.cap__btn{
  position: relative; z-index: 2;
  width: 100%; display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center; gap: clamp(.9rem, 3vw, 2.5rem);
  padding: clamp(1.1rem, 2.6vw, 2rem) 0; text-align: left;
}
.cap__idx{ font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em; color: var(--ember); }
.cap__name{
  display: block; transition: transform var(--t-mid) var(--ease-out), color var(--t-mid) var(--ease-out);
}
.cap:hover .cap__name, .cap__btn:focus-visible .cap__name{ transform: translateX(clamp(6px, 1vw, 18px)); }
.cap__btn[aria-expanded="true"] .cap__name{ color: var(--ember); }
.cap__plus{
  position: relative; width: 22px; height: 22px; flex: none;
  transition: transform var(--t-mid) var(--ease-out);
}
.cap__plus::before, .cap__plus::after{
  content: ""; position: absolute; inset: 50% 0 auto; height: 2px; background: currentColor;
}
.cap__plus::after{ inset: 0 50% auto auto; width: 2px; height: 100%; transition: opacity var(--t-fast) var(--ease-out); }
.cap__btn[aria-expanded="true"] .cap__plus{ transform: rotate(180deg); }
.cap__btn[aria-expanded="true"] .cap__plus::after{ opacity: 0; }

.cap__panel{ position: relative; z-index: 2; overflow: hidden; }
.cap__panel[hidden]{ display: none; }
.cap__panel p{
  max-width: 54ch; color: var(--ink-dim-light);
  padding: 0 0 clamp(1.25rem, 3vw, 2rem);
  padding-left: clamp(0px, 5vw, 5.5rem);
}
html.js:not(.rm) .cap__panel p{ opacity: 0; transform: translateY(12px); }
html.js:not(.rm) .cap.is-open .cap__panel p{
  opacity: 1; transform: none;
  transition: opacity var(--t-mid) var(--ease-out) 60ms, transform var(--t-mid) var(--ease-out) 60ms;
}

/* A different considered reveal per row */
.cap__vis{
  position: absolute; z-index: 1; right: clamp(3rem, 9vw, 9rem); top: 50%;
  width: clamp(110px, 13vw, 200px); aspect-ratio: 761 / 504;
  opacity: 0; pointer-events: none; color: var(--navy);
  --ncw-accent: var(--coral);
  transition: opacity var(--t-mid) var(--ease-out), transform var(--t-slow) var(--ease-out);
}
@media (max-width: 899px){
  .cap__vis{ display: none; }
  .fit--cap .cap__name{ font-size: clamp(1.5rem, 7vw, 2.5rem); white-space: normal; }
}
.cap__vis svg{ width: 100%; height: auto; }
.cap__vis--slide{ transform: translate(-64px, -50%); }
.cap__vis--turn{ transform: translate(0, -50%) rotate(-16deg) scale(.86); }
.cap__vis--assemble, .cap__vis--stack{ display: grid; }
.cap__vis--assemble{ grid-template-columns: repeat(3, 1fr); gap: 6px; transform: translate(0, -50%); }
.cap__vis--assemble span{ background: var(--navy); clip-path: var(--fold-up); transition: transform var(--t-slow) var(--ease-out); }
.cap__vis--assemble span:nth-child(2){ background: var(--navy-600); clip-path: var(--fold-down); transform: translateY(26px); }
.cap__vis--assemble span:nth-child(3){ background: var(--coral); transform: translateY(-26px); }
.cap__vis--assemble span:first-child{ transform: translateY(26px); }
.cap__vis--stack{ transform: translate(0, -50%); position: absolute; }
.cap__vis--stack span{
  position: absolute; inset: 0; background: var(--navy); clip-path: var(--fold-up);
  transition: transform var(--t-slow) var(--ease-out);
}
.cap__vis--stack span:nth-child(2){ background: var(--navy-600); transform: translate(14px, 14px) scale(.94); }
.cap__vis--stack span:nth-child(3){ background: var(--coral); transform: translate(28px, 28px) scale(.88); }

.cap:hover .cap__vis, .cap:focus-within .cap__vis, .cap.is-open .cap__vis{ opacity: 1; }
.cap:hover .cap__vis--slide, .cap:focus-within .cap__vis--slide, .cap.is-open .cap__vis--slide{ transform: translate(0, -50%); }
.cap:hover .cap__vis--turn, .cap:focus-within .cap__vis--turn, .cap.is-open .cap__vis--turn{ transform: translate(0, -50%) rotate(0deg) scale(1); }
.cap:hover .cap__vis--assemble span, .cap:focus-within .cap__vis--assemble span, .cap.is-open .cap__vis--assemble span{ transform: none; }
.cap:hover .cap__vis--stack span:nth-child(2), .cap:focus-within .cap__vis--stack span:nth-child(2), .cap.is-open .cap__vis--stack span:nth-child(2){ transform: translate(22px, 22px) scale(.94); }
.cap:hover .cap__vis--stack span:nth-child(3), .cap:focus-within .cap__vis--stack span:nth-child(3), .cap.is-open .cap__vis--stack span:nth-child(3){ transform: translate(44px, 44px) scale(.88); }

/* ── 10 · How we work ───────────────────────────────────────────── */
.process{
  background: var(--navy); color: var(--paper);
  --dim: var(--ink-dim-dark); --focus: var(--coral);
  padding-block: var(--sec-pad);
}
.process__title{ margin: clamp(1rem, 2vw, 1.75rem) 0 clamp(2.5rem, 6vh, 4rem); }
.process__title .mask:nth-child(2) .mask__in{ --d: 100ms; color: var(--coral); }
.process__line{ color: var(--coral); margin-bottom: -1.5rem; }
.process__line svg{ width: 100%; height: clamp(54px, 7vw, 110px); overflow: visible; }
.process__path{ stroke-dasharray: 1; stroke-dashoffset: 1; }
html:not(.js) .process__path, html.rm .process__path{ stroke-dashoffset: 0; }
.process__line.is-in .process__path{ stroke-dashoffset: 0; transition: stroke-dashoffset 1.6s var(--ease-in-out); }

.process__steps{ display: grid; gap: clamp(2rem, 4vw, 2.5rem); }
@media (min-width: 760px){ .process__steps{ grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); } }
.step{ position: relative; padding-top: 1.75rem; border-top: 1px solid var(--rule-dark); }
.step:nth-child(2){ --d: 90ms; } .step:nth-child(3){ --d: 180ms; } .step:nth-child(4){ --d: 270ms; }
.step__num{
  position: absolute; top: -.85rem; left: 0; padding-right: .7rem; background: var(--navy);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .16em; color: var(--coral);
}
.step__name{
  font-size: clamp(1.35rem, 2.2vw, 1.85rem); font-weight: 700; letter-spacing: -.02em;
  text-transform: uppercase; margin-bottom: .6rem;
}
.step p{ color: var(--ink-dim-dark); max-width: 34ch; }

/* ── 11 · Contact — signature moment 3 ──────────────────────────── */
.contact{ background: var(--navy); --w2: 1; }
.contact__wipe{
  --shear: 52%;
  --wx2: calc(var(--w2) * (160% + var(--shear)) - var(--shear) - 30%);
  clip-path: polygon(-30% 130%, var(--wx2) 130%, calc(var(--wx2) + var(--shear)) -30%, -30% -30%);
  background: var(--coral); color: var(--navy);
  --dim: rgba(15,31,45,.72); --focus: var(--navy); --ncw-accent: var(--navy);
  padding-block: clamp(5rem, 13vh, 10rem);
}
html:not(.js) .contact__wipe, html.rm .contact__wipe{ clip-path: none; }
.contact__head{ margin-bottom: clamp(2.5rem, 6vh, 4.5rem); }
.contact__grid{ display: grid; gap: clamp(2.5rem, 6vw, 5rem); }
@media (min-width: 1000px){
  .contact__grid{ grid-template-columns: minmax(0, 1fr) minmax(0, .92fr); align-items: start; }
}
.contact__title{ margin-top: clamp(1rem, 2vw, 1.75rem); }
.contact__title .mask:nth-child(2) .mask__in{ --d: 100ms; }
.contact__title .mask:nth-child(3) .mask__in{ --d: 200ms; }
.contact__sub{ max-width: 40ch; color: rgba(15,31,45,.82); font-size: clamp(1.0625rem, 1.4vw, 1.3rem); line-height: 1.5; }
.contact__direct{
  margin-top: clamp(1.25rem, 3vh, 2rem); font-size: 1.0625rem; color: rgba(15,31,45,.82);
}
.contact__direct a{
  font-weight: 600; color: var(--navy);
  text-decoration-thickness: 2px; text-underline-offset: 4px;
}
.contact__direct a:hover{ text-decoration-color: rgba(15,31,45,.4); }
.contact__mark{
  display: flex; align-items: center; gap: .8rem; margin-top: clamp(2rem, 5vh, 3.5rem);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--navy);
}
.contact__mark span{ width: 30px; flex: none; color: var(--navy); }
.contact__mark svg{ width: 100%; height: auto; }
.contact .eyebrow{ color: rgba(15,31,45,.72); }
.contact .eyebrow--rule::before{ background: var(--navy); }

.enquiry{ display: grid; gap: clamp(1rem, 2vw, 1.5rem); }
.field{ display: grid; gap: .45rem; }
.field label{
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; font-weight: 500;
}
.req{ color: var(--navy); }
.field input, .field textarea{
  width: 100%; min-height: 52px; padding: .85rem 1rem;
  background: rgba(244,243,239,.9); border: 1px solid rgba(15,31,45,.28);
  color: var(--navy); font-size: 1rem; line-height: 1.5;
  transition: border-color var(--t-fast) var(--ease-out), background-color var(--t-fast) var(--ease-out);
}
.field textarea{ resize: vertical; min-height: 128px; }
.field input:hover, .field textarea:hover{ border-color: rgba(15,31,45,.5); }
.field input:focus, .field textarea:focus{ background: var(--paper); border-color: var(--navy); }
.field input::placeholder, .field textarea::placeholder{ color: rgba(15,31,45,.45); }
.hint{ font-size: .875rem; color: rgba(15,31,45,.72); }
.err{ font-size: .875rem; font-weight: 600; color: #6E1405; display: flex; align-items: center; gap: .4rem; }
.err[hidden]{ display: none; }
.err::before{ content: "!"; display: grid; place-items: center; width: 18px; height: 18px; flex: none;
  background: #6E1405; color: var(--coral); font-size: .72rem; font-weight: 700; }
.field.is-bad input, .field.is-bad textarea{ border-color: #6E1405; border-width: 2px; }

.enquiry__summary{
  border: 2px solid #6E1405; padding: 1rem 1.25rem; color: #6E1405; background: rgba(244,243,239,.6);
}
.enquiry__summary[hidden]{ display: none; }
.enquiry__summary h3{ font-size: .9375rem; text-transform: uppercase; letter-spacing: .1em; margin-bottom: .5rem; }
.enquiry__summary ul{ display: grid; gap: .3rem; list-style: disc; padding-left: 1.1rem; }
.enquiry__summary a{ color: inherit; }
.enquiry__status:empty{ display: none; }
.enquiry__status{
  font-size: .9375rem; line-height: 1.55; padding: .9rem 1.1rem;
  background: rgba(15,31,45,.9); color: var(--paper); border-left: 4px solid var(--navy);
}
.enquiry__status code{ font-family: var(--f-mono); font-size: .85em; color: var(--coral); }
.enquiry__status a{ color: var(--coral); font-weight: 600; text-underline-offset: 3px; }
.enquiry__todo{ display: block; margin-top: .5rem; font-size: .85em; color: var(--ink-dim-dark); }
.btn.is-busy{ pointer-events: none; opacity: .75; }

/* ── 12 · Footer ────────────────────────────────────────────────── */
.site-foot{
  background: var(--navy-900); color: var(--paper);
  --ncw-accent: var(--coral); --focus: var(--coral);
  padding-block: clamp(3rem, 8vh, 5.5rem) clamp(2rem, 5vh, 3rem);
}
.site-foot__grid{ display: grid; gap: clamp(2rem, 5vw, 3rem); }
@media (min-width: 800px){
  .site-foot__grid{ grid-template-columns: auto 1fr; align-items: start; }
  .site-foot__legal{ grid-column: 1 / -1; }
}
.brand--foot .wordmark{ --wm-w: clamp(200px, 26vw, 330px); }
.site-foot__nav ul{ display: flex; flex-wrap: wrap; gap: .5rem clamp(1.25rem, 3vw, 2.5rem); justify-content: flex-start; }
@media (min-width: 800px){ .site-foot__nav ul{ justify-content: flex-end; } }
.site-foot__nav a{
  display: block; padding: .5rem 0; text-decoration: none;
  font-family: var(--f-mono); font-size: .8125rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-dim-dark); transition: color var(--t-fast) var(--ease-out);
}
.site-foot__nav a:hover{ color: var(--coral); }
.site-foot__legal a{ color: inherit; text-underline-offset: 3px; transition: color var(--t-fast) var(--ease-out); }
.site-foot__legal a:hover{ color: var(--coral); }
.site-foot__legal{
  display: flex; flex-wrap: wrap; gap: .5rem 1.5rem; justify-content: space-between;
  padding-top: clamp(1.5rem, 4vh, 2.5rem); border-top: 1px solid var(--rule-dark);
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .1em;
  text-transform: uppercase; color: var(--ink-dim-dark);
}

/* ── 13 · Project detail dialog ─────────────────────────────────── */
.pdialog{
  width: min(100% - 2rem, 760px); max-height: 86svh; padding: 0; border: 0;
  background: var(--navy); color: var(--paper);
  --dim: var(--ink-dim-dark); --focus: var(--coral);
  margin: auto;
}
.pdialog::backdrop{ background: rgba(8,20,32,.82); backdrop-filter: blur(8px); }
.pdialog[open]{ animation: pdialog-in .4s var(--ease-out); }
@keyframes pdialog-in{ from{ opacity: 0; transform: translateY(16px) } to{ opacity: 1; transform: none } }
.pdialog__inner{ padding: clamp(1.75rem, 4vw, 3rem); position: relative; }
.pdialog__close{ position: absolute; top: 1rem; right: 1rem; --rnd-hov: var(--navy); }
.pdialog__eyebrow{
  display: flex; align-items: center; gap: .9rem;
  font-family: var(--f-mono); font-size: .75rem; letter-spacing: .18em;
  text-transform: uppercase; color: var(--coral); margin-bottom: 1rem;
}
.pdialog__eyebrow i{ font-style: normal; color: var(--ink-dim-dark); }
.pdialog__title{ margin-bottom: 1.25rem; padding-right: 3rem; }
.pdialog__body{ display: grid; gap: 1rem; color: var(--ink-dim-dark); margin-bottom: 1.5rem; }
.pdialog__body strong{ color: var(--paper); font-weight: 600; }
.pdialog .project__tags li{ border-color: var(--rule-dark); color: var(--ink-dim-dark); }
.pdialog__visit{ margin-top: 1.5rem; }
.pdialog__visit[hidden]{ display: none; }

/* ── 14 · Reduced motion ────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce){
  html{ scroll-behavior: auto; }
  *, *::before, *::after{
    animation-duration: .001ms !important; animation-iteration-count: 1 !important;
    transition-duration: .001ms !important; scroll-behavior: auto !important;
  }
  .hero__cue::before{ animation: none; transform: scaleY(1); opacity: .7; }
  .hero__rig{ transform: none; }
  .fold{ transform: none !important; }
}

/* ── 15 · Print ─────────────────────────────────────────────────── */
@media print{
  .site-head, .menu-panel, .work__hud, .hero__rig, .hero__wipe, .hero__cue{ display: none !important; }
  body{ background: #fff; color: #000; }
  .work__track{ display: block; }
}