/* ============================================================================
   KARMA FILM COPENHAGEN — cinematic design system
   Static, no-build. One stylesheet, reused across every page.
   Dark editorial / Nordic — a title-sequence feel. The film work carries all
   the colour; everything else is near-black + warm off-white + a mono voice.

   Type:  Fraunces (variable serif) for display statements
          Space Mono for labels / nav / meta / buttons / timecodes
   ========================================================================== */

/* ---------------------------------------------------------------------------
   1. Design tokens
   ------------------------------------------------------------------------- */
:root {
  /* Colour — near-black canvas, true-black accents, warm off-white ink.
     Monochrome chrome; the stills + reel are the only colour. */
  --black:         #000000;
  --bg:            #0a0a0a;
  --bg-2:          #0d0d0d;
  --bg-3:          #131313;
  --bg-4:          #191919;

  --ink:           #ede7db;   /* warm off-white — primary ink */
  --ink-soft:      #cfc9bd;
  --ink-dim:       rgba(237, 231, 219, 0.62);
  --ink-faint:     rgba(237, 231, 219, 0.40);
  --ink-ghost:     rgba(237, 231, 219, 0.20);

  --line:          rgba(237, 231, 219, 0.12);
  --line-strong:   rgba(237, 231, 219, 0.26);
  --accent:        #d8cfbe;   /* restrained warm stone — focus rings / traces */
  --pure:          #ffffff;

  /* Type */
  --font-display: "Fraunces", "Archivo", Georgia, "Times New Roman", serif;
  --font-mono:    "Space Mono", "SFMono-Regular", ui-monospace, Menlo, "Courier New", monospace;
  --font-body:    "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  /* Fraunces optical presets — dial it dramatic (high opsz contrast, no wonk) */
  --fr-display: "opsz" 144, "SOFT" 0, "WONK" 0;
  --fr-text:    "opsz" 40,  "SOFT" 0, "WONK" 0;

  /* Fluid type scale */
  --fs-mega:   clamp(2.9rem, 1.1rem + 8.4vw, 9rem);
  --fs-hero:   clamp(2.6rem, 1.3rem + 6vw, 7.5rem);
  --fs-h2:     clamp(2rem, 1.2rem + 3.6vw, 4.25rem);
  --fs-h3:     clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem);
  --fs-lead:   clamp(1rem, 0.92rem + 0.5vw, 1.2rem);
  --fs-body:   clamp(1rem, 0.96rem + 0.2vw, 1.08rem);
  --fs-label:  0.72rem;
  --fs-micro:  0.66rem;
  --fs-small:  0.82rem;

  /* Spacing */
  --sp-1: 0.5rem;  --sp-2: 0.875rem; --sp-3: 1.25rem; --sp-4: 2rem;
  --sp-5: 3rem;    --sp-6: 4.5rem;   --sp-7: 7rem;     --sp-8: 10rem;

  /* Structure */
  --maxw:      1560px;
  --maxw-text: 1320px;
  --gutter:    clamp(1.25rem, 0.5rem + 3.4vw, 4.5rem);
  --header-h:  clamp(64px, 5.5vw, 88px);
  --radius:    0px;

  /* Motion */
  --ease:      cubic-bezier(0.22, 1, 0.36, 1);
  --ease-out:  cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io:   cubic-bezier(0.65, 0, 0.35, 1);
  --dur:       0.6s;
  --dur-slow:  0.9s;
  --dur-fast:  0.32s;
}

/* ---------------------------------------------------------------------------
   2. Reset
   ------------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.6;
  letter-spacing: 0.005em;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, svg, video, iframe { display: block; max-width: 100%; }
img { height: auto; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }

ul, ol { list-style: none; padding: 0; }

::selection { background: var(--ink); color: var(--black); }

:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
  border-radius: 1px;
}

.skip-link {
  position: absolute;
  left: 50%; top: 0;
  transform: translate(-50%, -120%);
  z-index: 1000;
  background: var(--ink);
  color: var(--black);
  padding: 0.6rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  transition: transform var(--dur-fast) var(--ease);
}
.skip-link:focus { transform: translate(-50%, 0.6rem); }

.u-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  clip: rect(0 0 0 0); clip-path: inset(50%);
  overflow: hidden; white-space: nowrap;
}

/* ---------------------------------------------------------------------------
   3. Typographic primitives
   ------------------------------------------------------------------------- */
.display {
  font-family: var(--font-display);
  font-weight: 600;
  font-variation-settings: var(--fr-display);
  line-height: 0.94;
  letter-spacing: -0.015em;
}

.eyebrow {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--ink-dim);
}

/* Layout helpers */
.wrap {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.section { padding-block: clamp(4rem, 2.5rem + 7vw, 9rem); }

/* Animated underline for text links */
.link-underline { position: relative; display: inline-block; }
.link-underline::after {
  content: "";
  position: absolute;
  left: 0; bottom: -0.14em;
  width: 100%; height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--dur-fast) var(--ease);
}
.link-underline:hover::after,
.link-underline:focus-visible::after { transform: scaleX(1); }

/* Ghost / mono action button */
.btn-mono {
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 0.95rem 1.5rem;
  border: 1px solid var(--line-strong);
  transition: background var(--dur-fast) var(--ease),
              color var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
}
.btn-mono .arrow { transition: transform var(--dur-fast) var(--ease); }
.btn-mono:hover, .btn-mono:focus-visible {
  background: var(--ink);
  color: var(--black);
  border-color: var(--ink);
}
.btn-mono:hover .arrow, .btn-mono:focus-visible .arrow { transform: translateX(5px); }

/* ---------------------------------------------------------------------------
   4. Film-grain + vignette overlay (global atmosphere)
   ------------------------------------------------------------------------- */
.fx {
  position: fixed;
  inset: 0;
  z-index: 60;
  pointer-events: none;
}
.fx__vignette {
  position: absolute;
  inset: 0;
  background: radial-gradient(130% 130% at 50% 44%,
    rgba(0,0,0,0) 52%, rgba(0,0,0,0.28) 82%, rgba(0,0,0,0.6) 100%);
}
.fx__grain {
  position: absolute;
  inset: -60%;
  width: 220%;
  height: 220%;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  opacity: 0.045;
  mix-blend-mode: overlay;
  animation: grain 5.6s steps(8) infinite;
  will-change: transform;
}
@keyframes grain {
  0%   { transform: translate(0,        0); }
  12%  { transform: translate(-6%,     -3%); }
  25%  { transform: translate(4%,      -8%); }
  37%  { transform: translate(-3%,      5%); }
  50%  { transform: translate(7%,       2%); }
  62%  { transform: translate(-8%,     -5%); }
  75%  { transform: translate(3%,       8%); }
  87%  { transform: translate(-4%,     -2%); }
  100% { transform: translate(0,        0); }
}

/* ---------------------------------------------------------------------------
   5. Site header / navigation
   ------------------------------------------------------------------------- */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  height: var(--header-h);
  display: flex;
  align-items: center;
  transition: background var(--dur-fast) var(--ease),
              backdrop-filter var(--dur-fast) var(--ease),
              border-color var(--dur-fast) var(--ease);
  border-bottom: 1px solid transparent;
}
.site-header::before {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6), rgba(0,0,0,0));
  pointer-events: none;
  opacity: 1;
  transition: opacity var(--dur-fast) var(--ease);
}
.site-header.is-scrolled {
  background: rgba(10, 10, 10, 0.7);
  backdrop-filter: saturate(140%) blur(16px);
  -webkit-backdrop-filter: saturate(140%) blur(16px);
  border-bottom-color: var(--line);
}
.site-header.is-scrolled::before { opacity: 0; }

.site-header__inner {
  position: relative;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--sp-3);
}

.brand { display: inline-flex; align-items: center; flex: 0 0 auto; }
.brand img {
  height: clamp(30px, 4vw, 42px);
  width: auto;
  transition: opacity var(--dur-fast) var(--ease);
}
.brand:hover img { opacity: 0.78; }

.nav { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.8rem); }
.nav__links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); }
.nav__link {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 400;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink);
  padding-block: 0.4rem;
}

.social { display: flex; align-items: center; gap: clamp(0.7rem, 1.4vw, 1.05rem); }
.social__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px; height: 34px;
  color: var(--ink);
  opacity: 0.8;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.social__link:hover, .social__link:focus-visible { opacity: 1; transform: translateY(-2px); }
.social__link svg { width: 18px; height: 18px; }

.nav__divider { width: 1px; height: 20px; background: var(--line-strong); }

/* Hamburger */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px; height: 44px;
  z-index: 210;
  margin-right: -8px;
}
.nav-toggle__bar,
.nav-toggle__bar::before,
.nav-toggle__bar::after {
  content: "";
  position: absolute;
  left: 50%;
  width: 24px; height: 1.5px;
  background: var(--ink);
  transform: translateX(-50%);
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.nav-toggle__bar { top: 50%; margin-top: -0.75px; }
.nav-toggle__bar::before { top: -7px; }
.nav-toggle__bar::after  { top:  7px; }
[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
[aria-expanded="true"] .nav-toggle__bar::before { transform: translateX(-50%) translateY(7px) rotate(45deg); }
[aria-expanded="true"] .nav-toggle__bar::after  { transform: translateX(-50%) translateY(-7px) rotate(-45deg); }

/* Mobile menu overlay */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(6, 6, 6, 0.97);
  backdrop-filter: blur(22px);
  -webkit-backdrop-filter: blur(22px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: var(--gutter);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; }
.mobile-menu__links { display: flex; flex-direction: column; gap: clamp(0.5rem, 2vw, 1.1rem); }
.mobile-menu__link {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fr-display);
  font-size: clamp(2.6rem, 12vw, 4rem);
  text-transform: uppercase;
  line-height: 0.98;
  letter-spacing: -0.02em;
  color: var(--ink);
  opacity: 0;
  transform: translateY(16px);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.mobile-menu.is-open .mobile-menu__link {
  opacity: 1;
  transform: translateY(0);
  transition-delay: calc(0.06s * var(--i, 0) + 0.1s);
}
.mobile-menu__social { display: flex; gap: 1.1rem; margin-top: var(--sp-5); }
.mobile-menu__social .social__link { width: 40px; height: 40px; }

/* ---------------------------------------------------------------------------
   6. HERO — full-viewport showreel background video
   ------------------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100svh;
  display: flex;
  flex-direction: column;
  isolation: isolate;
  overflow: hidden;
  background: var(--black);
}
.hero__bg { position: absolute; inset: 0; z-index: -2; background: var(--black); }
/* poster still sits behind the reel; fades once video is live */
.hero__poster {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 62% 48%;
  transform-origin: 60% 45%;
  opacity: 1;
  /* slow ken-burns drift so the hero feels alive even when the reel can't play */
  animation: heroKen 26s ease-in-out infinite alternate;
  transition: opacity 1.2s var(--ease);
}
.hero.is-playing .hero__poster { opacity: 0; }
@keyframes heroKen {
  from { transform: scale(1.06) translate(0, 0); }
  to   { transform: scale(1.16) translate(-1.6%, -1.2%); }
}
/* cover-fit Vimeo iframe (16:9 grown to always fill the viewport) */
.hero__video {
  position: absolute;
  top: 50%; left: 50%;
  width: 100vw; height: 56.25vw;
  min-height: 100%; min-width: 177.78vh;
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.4s var(--ease);
}
.hero.is-playing .hero__video { opacity: 1; }
.hero__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  /* Kept light so the still reads clearly at rest — only a soft grade at the
     bottom + left, where the headline / tagline / meta sit. The white type
     carries its own text-shadow, so the scrim can stay gentle. */
  background:
    linear-gradient(to top, rgba(0,0,0,0.56) 0%, rgba(0,0,0,0.22) 26%, rgba(0,0,0,0) 60%),
    linear-gradient(to right, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.08) 44%, rgba(0,0,0,0) 76%);
}

.hero__inner {
  flex: 1 1 auto;
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  /* vertically centred (with a slight downward bias) so the headline is always
     fully visible and never clips, from ~720px up to tall viewports */
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  gap: clamp(1.1rem, 2vw, 1.9rem);
  padding-top: calc(var(--header-h) + clamp(1rem, 4vh, 3rem));
  padding-bottom: clamp(4rem, 10vh, 7rem);
}

/* top-line meta strip */
.hero__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.7rem 1.1rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: rgba(237, 231, 219, 0.72);
}
.hero__meta .dot { width: 4px; height: 4px; background: currentColor; border-radius: 50%; opacity: 0.7; }

.hero__headline {
  display: block;
  color: var(--pure);
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fr-display);
  font-size: var(--fs-hero);
  line-height: 0.92;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  text-shadow: 0 2px 60px rgba(0,0,0,0.4);
  max-width: 16ch;
}
a.hero__headline { transition: opacity var(--dur-fast) var(--ease); }
a.hero__headline:hover, a.hero__headline:focus-visible { opacity: 0.9; }

/* staggered line reveal */
.hero__line { display: block; overflow: hidden; }
.hero__line > span {
  display: block;
  transform: translateY(112%);
  transition: transform 1.05s var(--ease-out);
  transition-delay: calc(var(--d, 0) * 1ms);
}
.is-ready .hero__line > span { transform: translateY(0); }
/* no-JS: reveal the headline immediately (JS drives the staggered entrance) */
.no-js .hero__line > span { transform: none; }

.hero__sub {
  max-width: 46ch;
  color: rgba(237, 231, 219, 0.9);
  font-family: var(--font-mono);
  font-size: clamp(0.72rem, 0.66rem + 0.4vw, 0.9rem);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  line-height: 1.85;
  opacity: 0;
  transform: translateY(14px);
  transition: opacity var(--dur-slow) var(--ease) 0.5s, transform var(--dur-slow) var(--ease) 0.5s;
}
.is-ready .hero__sub { opacity: 1; transform: none; }
.no-js .hero__sub, .no-js .hero__cue { opacity: 1; transform: none; }

/* scroll cue — anchored bottom-right */
.hero__cue {
  position: absolute;
  right: var(--gutter);
  bottom: clamp(2rem, 5vh, 3.4rem);
  z-index: 2;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 0.7rem;
  color: rgba(237, 231, 219, 0.68);
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  opacity: 0;
  transition: opacity var(--dur-slow) var(--ease) 0.9s;
}
.is-ready .hero__cue { opacity: 1; }
.hero__cue-line {
  width: 1px; height: 46px;
  background: linear-gradient(to bottom, rgba(237,231,219,0.7), rgba(237,231,219,0));
  animation: cue 2.4s var(--ease) infinite;
  transform-origin: top;
}
@keyframes cue {
  0%   { transform: scaleY(0); opacity: 0; }
  35%  { transform: scaleY(1); opacity: 1; }
  100% { transform: scaleY(1) translateY(46px); opacity: 0; }
}

/* ---------------------------------------------------------------------------
   7. Section heading block (shared editorial header)
   ------------------------------------------------------------------------- */
.sec-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 1.25rem 2rem;
  margin-bottom: clamp(2rem, 4vw, 3.5rem);
}
.sec-head__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--fr-display);
  font-size: var(--fs-h2);
  line-height: 0.95;
  letter-spacing: -0.02em;
  text-transform: uppercase;
  color: var(--ink);
}
.sec-head__title em {
  font-style: italic;
  font-weight: 300;
  color: var(--ink-soft);
}
.sec-head__meta {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.sec-index {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: 0.9rem;
}

/* ---------------------------------------------------------------------------
   8. SELECTED WORK — cinematic gallery
   ------------------------------------------------------------------------- */
.work {
  position: relative;
  background: var(--bg);
  padding-block: clamp(4rem, 2.5rem + 6vw, 8.5rem);
  border-top: 1px solid var(--line);
}
.work__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: clamp(1rem, 0.4rem + 1.6vw, 2rem);
}
.work__item { min-width: 0; }
.work__item--feature { grid-column: 1 / -1; }

/* Tile */
.tile {
  position: relative;
  display: block;
  color: var(--ink);
  overflow: hidden;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color var(--dur-fast) var(--ease);
}
.tile:hover, .tile:focus-visible { border-color: var(--line-strong); }
.tile__media {
  position: relative;
  display: block;
  aspect-ratio: 2.35 / 1;
  overflow: hidden;
  background: var(--bg-3);
}
.tile--feature .tile__media { aspect-ratio: 2.6 / 1; }
.tile__img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  transition: transform 0.8s var(--ease), filter 0.6s var(--ease);
  /* the film work must read clearly AT REST — full opacity, no dimming filter.
     brighten + zoom are reserved for hover. */
  opacity: 1;
  filter: none;
}
.tile:hover .tile__img, .tile:focus-visible .tile__img {
  transform: scale(1.045);
  filter: saturate(1.06) contrast(1.03) brightness(1.08);
}
/* gradient anchored to the bottom only — legible captions, still stays visible */
.tile__wash {
  position: absolute;
  inset: 0;
  background: linear-gradient(to top,
    rgba(0,0,0,0.82) 0%, rgba(0,0,0,0.44) 20%, rgba(0,0,0,0.06) 42%, rgba(0,0,0,0) 58%);
  transition: opacity var(--dur-fast) var(--ease);
  pointer-events: none;
}
.tile--feature .tile__wash {
  background: linear-gradient(to top,
    rgba(0,0,0,0.8) 0%, rgba(0,0,0,0.34) 26%, rgba(0,0,0,0.04) 46%, rgba(0,0,0,0) 62%);
}

/* corner index / timecode */
.tile__index {
  position: absolute;
  top: 1rem; left: 1.15rem;
  z-index: 3;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  color: rgba(255,255,255,0.82);
  mix-blend-mode: difference;
}

/* play cue */
.tile__play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%) scale(0.9);
  z-index: 3;
  width: clamp(48px, 5vw, 66px);
  height: clamp(48px, 5vw, 66px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(255,255,255,0.55);
  border-radius: 50%;
  background: rgba(10,10,10,0.28);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
.tile:hover .tile__play, .tile:focus-visible .tile__play {
  opacity: 1;
  transform: translate(-50%, -50%) scale(1);
  background: rgba(237,231,219,0.16);
}
.tile__play svg { width: 34%; height: auto; margin-left: 8%; fill: #fff; }

/* caption */
.tile__cap {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  z-index: 3;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2vw, 1.6rem) clamp(1.15rem, 2vw, 1.75rem);
}
.tile__titles { min-width: 0; }
.tile__title {
  display: block;
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fr-text);
  text-transform: uppercase;
  font-size: clamp(0.95rem, 0.8rem + 0.7vw, 1.6rem);
  line-height: 1.02;
  letter-spacing: -0.01em;
  color: var(--pure);
}
.tile--feature .tile__title { font-size: clamp(1.4rem, 1rem + 2.4vw, 3rem); }
.tile__tag {
  margin-top: 0.55rem;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 400;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: rgba(237,231,219,0.72);
  line-height: 1.5;
  transform: translateY(4px);
  opacity: 0.82;
  transition: transform var(--dur-fast) var(--ease), opacity var(--dur-fast) var(--ease);
}
.tile:hover .tile__tag, .tile:focus-visible .tile__tag { transform: none; opacity: 1; }
.tile__watch {
  flex: 0 0 auto;
  align-self: flex-end;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(237,231,219,0.8);
  white-space: nowrap;
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.tile:hover .tile__watch, .tile:focus-visible .tile__watch { opacity: 1; transform: none; }

.work__foot {
  display: flex;
  justify-content: center;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}

/* ---------------------------------------------------------------------------
   9. CLIENTS — auto-scrolling marquee (two opposing rows)
   ------------------------------------------------------------------------- */
.clients {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  padding-block: clamp(3.5rem, 2rem + 5vw, 6.5rem);
  overflow: hidden;
}
.clients__label {
  display: block;
  text-align: center;
  margin-bottom: clamp(2.2rem, 4vw, 3.6rem);
}
/* marquee is a JS enhancement — hidden until activated (grid is the fallback) */
.marquee {
  position: relative;
  display: none;
  flex-direction: column;
  gap: clamp(1rem, 2vw, 2rem);
}
.clients.is-marquee .marquee { display: flex; }
.clients.is-marquee .clients__grid { display: none; }
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  width: clamp(60px, 12vw, 200px);
  z-index: 2;
  pointer-events: none;
}
.marquee::before { left: 0;  background: linear-gradient(to right, var(--bg-2), rgba(13,13,13,0)); }
.marquee::after  { right: 0; background: linear-gradient(to left,  var(--bg-2), rgba(13,13,13,0)); }

.marquee__row {
  display: flex;
  width: max-content;
  gap: 0;
  will-change: transform;
}
.marquee__row--a { animation: marquee-l 64s linear infinite; }
.marquee__row--b { animation: marquee-r 64s linear infinite; }
.marquee:hover .marquee__row { animation-play-state: paused; }
@keyframes marquee-l { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@keyframes marquee-r { from { transform: translateX(-50%); } to { transform: translateX(0); } }

.marquee__cell {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  width: clamp(150px, 16vw, 230px);
  height: clamp(70px, 8vw, 104px);
  padding: 0 clamp(1.2rem, 2.4vw, 2.4rem);
}
.marquee__cell img {
  max-height: clamp(26px, 3vw, 40px);
  max-width: 100%;
  width: auto;
  object-fit: contain;
  opacity: 0.68;
  filter: brightness(0) invert(1);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
a.marquee__cell:hover img, a.marquee__cell:focus-visible img { opacity: 1; transform: scale(1.06); }

/* static grid — the no-JS / reduced-motion fallback (shown by default) */
.clients__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(clamp(120px, 20vw, 190px), 1fr));
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
.clients__grid .marquee__cell {
  width: auto;
  height: clamp(84px, 10vw, 128px);
  background: var(--bg-2);
  transition: background var(--dur-fast) var(--ease);
}
.clients__grid a.marquee__cell:hover,
.clients__grid a.marquee__cell:focus-visible { background: var(--bg-3); }

/* ---------------------------------------------------------------------------
   10. CONTACT / CLOSING — full-bleed statement
   ------------------------------------------------------------------------- */
.contact {
  position: relative;
  min-height: clamp(600px, 96vh, 1000px);
  display: grid;
  align-items: center;
  isolation: isolate;
  overflow: hidden;
  border-top: 1px solid var(--line);
}
.contact__media { position: absolute; inset: 0; z-index: -2; }
.contact__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: center 42%;
  transform: scale(1.05);
  transition: transform 2s var(--ease);
  filter: saturate(0.9) contrast(1.03);
}
.contact:hover .contact__media img { transform: scale(1.1); }
.contact__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background:
    radial-gradient(120% 100% at 50% 50%, rgba(0,0,0,0.1) 0%, rgba(0,0,0,0.44) 100%),
    linear-gradient(to bottom, rgba(0,0,0,0.38) 0%, rgba(0,0,0,0.2) 50%, rgba(0,0,0,0.56) 100%);
}
.contact__inner {
  width: 100%;
  max-width: var(--maxw);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block: clamp(4rem, 9vw, 8rem);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(1.5rem, 3vw, 2.5rem);
}
.contact__eyebrow { color: rgba(237,231,219,0.82); }
.contact__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-variation-settings: var(--fr-display);
  font-size: var(--fs-mega);
  line-height: 0.9;
  letter-spacing: -0.025em;
  text-transform: uppercase;
  color: var(--pure);
  text-shadow: 0 2px 70px rgba(0,0,0,0.45);
}
.contact__title em { font-style: italic; font-weight: 300; }
.contact__mail {
  font-family: var(--font-mono);
  font-size: clamp(1.05rem, 0.8rem + 1.6vw, 2rem);
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding-bottom: 0.15em;
  border-bottom: 1px solid var(--line-strong);
  transition: color var(--dur-fast) var(--ease), border-color var(--dur-fast) var(--ease);
}
.contact__mail .arrow { font-size: 0.7em; transition: transform var(--dur-fast) var(--ease); }
.contact__mail:hover, .contact__mail:focus-visible { color: var(--pure); border-color: var(--ink); }
.contact__mail:hover .arrow, .contact__mail:focus-visible .arrow { transform: translate(4px, -4px); }
.contact__social { display: flex; gap: 1.25rem; margin-top: 0.5rem; }
.contact__social .social__link { width: 42px; height: 42px; }
.contact__social .social__link svg { width: 20px; height: 20px; }

/* ---------------------------------------------------------------------------
   11. Footer
   ------------------------------------------------------------------------- */
.site-footer {
  border-top: 1px solid var(--line);
  background: var(--bg);
  padding-block: clamp(2.75rem, 4vw, 4.5rem);
}
.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1.75rem 2.5rem;
}
.site-footer__mark img { height: clamp(30px, 3.4vw, 40px); width: auto; opacity: 0.85; }
.site-footer__mail {
  font-family: var(--font-mono);
  font-size: clamp(0.8rem, 0.72rem + 0.5vw, 1rem);
  letter-spacing: 0.04em;
  color: var(--ink);
  transition: opacity var(--dur-fast) var(--ease);
}
.site-footer__mail:hover { opacity: 0.75; }
.site-footer__social { display: flex; gap: 1rem; }
.site-footer__social .social__link { width: 36px; height: 36px; }
.site-footer__social .social__link svg { width: 18px; height: 18px; }
.site-footer__meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem 0.9rem;
  color: var(--ink-faint);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.16em;
  text-transform: uppercase;
  width: 100%;
  padding-top: 1.5rem;
  margin-top: 0.5rem;
  border-top: 1px solid var(--line);
}
.site-footer__meta span { white-space: nowrap; }
.site-footer__meta .sep { color: var(--ink-ghost); }

/* ---------------------------------------------------------------------------
   12. Custom video player (our own chrome over the YouTube IFrame API)
   Near-black stage. Fraunces title + Space Mono controls, thin hairlines.
   The film owns the frame; the meta + control bar fade during playback and
   return on movement. Markup is built by /js/player.js (single shared player).
   ------------------------------------------------------------------------- */
.vp {
  position: fixed;
  inset: 0;
  z-index: 500;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(0.6rem, 3vw, 2.4rem);
  background: rgba(6, 6, 7, 0.96);
  backdrop-filter: blur(16px) saturate(118%);
  -webkit-backdrop-filter: blur(16px) saturate(118%);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur) var(--ease), visibility var(--dur) var(--ease);
}
.vp.is-open { opacity: 1; visibility: visible; }

/* stage — the 16:9 film frame that carries the iframe + all overlay chrome */
.vp__stage {
  position: relative;
  width: min(1320px, 95vw);
  max-height: min(86vh, 100%);
  aspect-ratio: 16 / 9;
  background: #000;
  overflow: hidden;
  box-shadow: 0 40px 130px rgba(0,0,0,0.78);
  isolation: isolate;
}
.vp.is-idle .vp__stage { cursor: none; }
.vp__video { position: absolute; inset: 0; z-index: 1; }
.vp__video iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* OUR poster (the film's own thumbnail still) covers the iframe in every
   non-playing state — so YouTube's pre-play info card (its title, channel
   name, logo) is NEVER visible. It fades out only once the film is playing. */
.vp__poster {
  position: absolute; inset: 0; z-index: 2;
  background: #000 center / cover no-repeat;
  pointer-events: none;
  transition: opacity var(--dur) var(--ease);
}
.vp.is-started .vp__poster { opacity: 0; }

/* transparent surface over the film — a click toggles play/pause */
.vp__surface {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center;
  width: 100%; height: 100%;
  background: none; border: 0; cursor: pointer;
}
/* large, subtle centre affordance — shown while paused */
.vp__center {
  width: clamp(64px, 7.5vw, 94px);
  height: clamp(64px, 7.5vw, 94px);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid rgba(237, 231, 219, 0.5);
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.3);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  color: var(--ink);
  pointer-events: none;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vp__center svg { width: 38%; height: auto; fill: currentColor; margin-left: 6%; }
.vp.is-paused .vp__center { opacity: 1; transform: scale(1); }

/* shared fade for the two chrome layers */
.vp__top, .vp__bar {
  position: absolute; left: 0; right: 0; z-index: 3;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vp.is-idle .vp__top,
.vp.is-idle .vp__bar { opacity: 0; pointer-events: none; }

/* top row — film meta (left) + share/close (right) */
.vp__top {
  top: 0;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
  padding: clamp(0.95rem, 2.4vw, 1.8rem) clamp(1.05rem, 2.4vw, 1.9rem);
  background: linear-gradient(to bottom, rgba(0,0,0,0.62) 0%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
.vp.is-idle .vp__top { transform: translateY(-10px); }
.vp__top > * { pointer-events: auto; }
.vp__meta { min-width: 0; }
.vp__tag {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(237, 231, 219, 0.68);
  margin-bottom: 0.5rem;
}
.vp__title {
  font-family: var(--font-display);
  font-weight: 500;
  font-variation-settings: var(--fr-text);
  font-size: clamp(1.1rem, 0.82rem + 1.15vw, 1.85rem);
  line-height: 1.04;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  color: var(--pure);
  text-shadow: 0 2px 34px rgba(0,0,0,0.55);
}
.vp__actions { display: flex; align-items: center; gap: 0.7rem; flex: 0 0 auto; }
.vp__copied {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
  opacity: 0;
  transition: opacity var(--dur-fast) var(--ease);
  white-space: nowrap;
}
.vp__copied.is-shown { opacity: 1; }
.vp__btn {
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink);
  opacity: 0.82;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.2em;
  text-transform: uppercase;
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.vp__btn:hover, .vp__btn:focus-visible { opacity: 1; }
.vp__share { padding: 0.3rem 0.2rem; }
.vp__close { width: 40px; height: 40px; }
.vp__close svg { width: 24px; height: 24px; display: block; }
.vp__close:hover, .vp__close:focus-visible { transform: rotate(90deg); }

/* bottom control bar — scrubber above, transport row below */
.vp__bar {
  bottom: 0;
  display: flex; flex-direction: column; gap: clamp(0.4rem, 1.4vw, 0.7rem);
  padding: clamp(1.4rem, 3vw, 2.2rem) clamp(1.05rem, 2.4vw, 1.9rem) clamp(0.85rem, 1.8vw, 1.3rem);
  background: linear-gradient(to top, rgba(0,0,0,0.74) 0%, rgba(0,0,0,0.28) 56%, rgba(0,0,0,0) 100%);
}
.vp.is-idle .vp__bar { transform: translateY(10px); }

/* hairline scrubber (buffered + progress + handle), generous hit area */
.vp__scrub {
  position: relative;
  height: 18px;
  display: flex; align-items: center;
  cursor: pointer;
  touch-action: none;
}
.vp__track {
  position: relative;
  width: 100%; height: 2px;
  background: rgba(237, 231, 219, 0.2);
  transition: height var(--dur-fast) var(--ease);
}
.vp__scrub:hover .vp__track,
.vp.is-scrubbing .vp__track { height: 3px; }
.vp__buffered, .vp__progress {
  position: absolute; top: 0; left: 0; height: 100%; width: 0;
}
.vp__buffered { background: rgba(237, 231, 219, 0.3); }
.vp__progress { background: var(--ink); }
.vp__handle {
  position: absolute; top: 50%; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--ink);
  transform: translate(-50%, -50%) scale(0);
  transition: transform var(--dur-fast) var(--ease);
  pointer-events: none;
}
.vp__scrub:hover .vp__handle,
.vp__scrub:focus-visible .vp__handle,
.vp.is-scrubbing .vp__handle { transform: translate(-50%, -50%) scale(1); }

.vp__controls { display: flex; align-items: center; gap: clamp(0.7rem, 1.8vw, 1.3rem); }
.vp__ctrl {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px;
  color: var(--ink); opacity: 0.85;
  transition: opacity var(--dur-fast) var(--ease);
}
.vp__ctrl:hover, .vp__ctrl:focus-visible { opacity: 1; }
.vp__ctrl svg { width: 20px; height: 20px; display: block; }
.vp__time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: 0.1em;
  color: var(--ink-dim);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.vp__time b { color: var(--ink); font-weight: 400; }
.vp__spacer { flex: 1 1 auto; }

@media (max-width: 560px) {
  .vp__title { font-size: 1rem; }
  .vp__share span { display: none; }  /* icon-tight share on small screens */
}

@media (prefers-reduced-motion: reduce) {
  .vp, .vp__top, .vp__bar, .vp__center, .vp__handle, .vp__track, .vp__poster { transition: none; }
  .vp.is-idle .vp__top, .vp.is-idle .vp__bar { transform: none; }
}

/* ---------------------------------------------------------------------------
   13. Scroll reveal
   Text may fade up subtly; imagery must NEVER hide. A still / figure / any
   element carrying a picture reads at FULL opacity from the very start — only
   a short, subtle rise plays in. No image ever sits at opacity:0 or under a
   dark filter waiting for the observer, so no page shows black image boxes.
   ------------------------------------------------------------------------- */
.reveal {
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 0.6s var(--ease-out), transform 0.6s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
  will-change: opacity, transform;
}
.reveal.is-in { opacity: 1; transform: none; }
.no-js .reveal { opacity: 1; transform: none; }

/* Imagery is exempt from the fade — the picture is visible the whole time and
   only a short rise plays. `:has()` covers any reveal that wraps a still (work
   tiles, the studio portrait); the explicit class list is a fallback for
   engines without `:has()` so the known figures never start black either. */
.reveal:has(img),
.reveal:has(picture),
img.reveal, picture.reveal, figure.reveal,
.work__item.reveal, .who__figure.reveal {
  opacity: 1;
  transform: translateY(20px);
  transition: transform 0.55s var(--ease-out);
  transition-delay: var(--reveal-delay, 0s);
}
.reveal:has(img).is-in,
.reveal:has(picture).is-in,
img.reveal.is-in, picture.reveal.is-in, figure.reveal.is-in,
.work__item.reveal.is-in, .who__figure.reveal.is-in { transform: none; }
.no-js .reveal:has(img),
.no-js img.reveal, .no-js picture.reveal, .no-js figure.reveal,
.no-js .work__item.reveal, .no-js .who__figure.reveal { transform: none; }

/* ---------------------------------------------------------------------------
   14. Responsive
   ------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .work__grid { grid-template-columns: 1fr; }
  .work__item--feature { grid-column: auto; }
}

@media (max-width: 860px) {
  .nav__links, .nav .social, .nav__divider { display: none; }
  .nav-toggle { display: block; }
  .hero__inner { align-items: flex-start; }
}

@media (max-width: 560px) {
  .hero__headline { font-size: clamp(2.1rem, 11vw, 3.4rem); }
  .tile__media, .tile--feature .tile__media { aspect-ratio: 16 / 10; }
  .site-footer__inner { flex-direction: column; align-items: flex-start; }
}

/* Short viewports (e.g. 1280×720 laptops): pull the hero display in so the
   two headline lines + tagline always fit without clipping. */
@media (max-height: 780px) {
  :root { --fs-hero: clamp(2.4rem, 1rem + 4.4vw, 5rem); }
  .hero__inner { gap: clamp(0.8rem, 1.6vw, 1.3rem); padding-bottom: clamp(3rem, 8vh, 5rem); }
}

/* ---------------------------------------------------------------------------
   15. Reduced motion
   ------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .fx__grain { animation: none; }
  .hero__poster { transform: none; opacity: 1; animation: none; }
  .hero__line > span { transform: none !important; }
  .hero__sub, .hero__cue { opacity: 1 !important; transform: none !important; }
  .reveal { opacity: 1; transform: none; }
  .hero__cue-line { animation: none; }
  /* swap marquee for a static grid */
  .marquee { display: none; }
  .clients__grid { display: grid; }
}