/* ============================================
   FIELD — Shared styles
   V1 palette restored, Telegraf as primary
   ============================================ */

:root {
  /* B-SITE PALETTE — sampled directly from the Partizan reference screengrab.
     Background: pure black (#000). Foreground: cool mint-cream #E5EFE7
     (subtle green tint, distinct from the warm cream #F1EFE9 of A-site).
     Variable names retain their original semantic role: paper = default
     body bg, ink = accent/contrast. */
  --ink: #E5EFE7;            /* cool mint-cream — for light text + light island bg */
  --paper: #000000;          /* pure black — default body background */
  --paper-warm: #08090A;     /* whisker-off-black for subtle surface variation */
  --paper-deep: #14171A;     /* deeper step, for gradient stops + tile fallbacks */
  --rule: rgba(229, 239, 231, 0.18);   /* mint-translucent rule on dark */
  --rule-light: rgba(0, 0, 0, 0.18);   /* dark rule on light islands */
  --accent: #8FB3C4;         /* lifted ink-blue accent, readable on dark */
}

* { margin: 0; padding: 0; box-sizing: border-box; }
/* native smooth-scroll disabled; Lenis handles all smooth scrolling */

html {
  background: var(--paper);          /* same black behind the body so iOS
                                        rubber-band overscroll never reveals
                                        the browser's default black void */
  overscroll-behavior: none;          /* stop the elastic bounce / scroll chain */
}

body {
  background: var(--paper);
  overscroll-behavior: none;
  color: var(--ink);
  font-family: 'Telegraf', system-ui, sans-serif;
  font-weight: 400;
  line-height: 1.5;
  overflow-x: clip;                   /* clip any horizontal leak without making
                                        body a second scroll container (hidden
                                        forces overflow-y:auto, nesting a scroller
                                        under the viewport). clip leaves the
                                        viewport as the sole scroller — keeps the
                                        toolbar behaving, no jump. */
  position: relative;
  -webkit-font-smoothing: antialiased;
}

/* Film grain — uses screen blend on the B-site so grain reads as subtle
   highlights on the dark dominant rather than disappearing into multiply. */
body::before {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 100;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.45'/%3E%3C/svg%3E");
  opacity: 0.08;
  mix-blend-mode: screen;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 99;
  background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.35) 100%);
}

/* Emphasis: weight-jump within Telegraf — same family, dramatic mass shift.
   Replaces the previous serif italic. <em> stays semantic; visual is a heavier weight. */
em, i {
  font-family: 'Telegraf', system-ui, sans-serif;
  font-style: normal;
  font-weight: 800;
  letter-spacing: -0.025em;
}

/* ===== NAV ===== */

/* Backdrop strip — sits BEHIND the nav (z-index just below). Backdrop-blur
   + dark gradient gives the nav text a softer contrast field than a hard
   solid would. Gradient opacity at ~40% top (was ~22%) for stronger
   legibility against bright/busy hero footage; fades to nothing at 100px
   so the page underneath isn't masked. The nav's mix-blend-mode: difference
   continues to operate against this composite. */
.nav-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* Extend the blur up through the safe-area inset so there's no unblurred
     sliver above it on notched devices. */
  height: calc(100px + env(safe-area-inset-top, 0px));
  padding-top: env(safe-area-inset-top, 0px);
  z-index: 49;
  pointer-events: none;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  background: linear-gradient(180deg, rgba(0, 0, 0, 0.4) 0%, rgba(0, 0, 0, 0.18) 60%, rgba(0, 0, 0, 0) 100%);
  mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
  -webkit-mask-image: linear-gradient(180deg, #000 0%, #000 70%, transparent 100%);
}

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  padding: 1.5rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  mix-blend-mode: difference;
  color: var(--ink);
}

.logo {
  font-family: 'Telegraf', sans-serif;
  font-weight: 700;
  font-size: 1.4rem;
  letter-spacing: -0.01em;
  text-decoration: none;
  color: inherit;
  display: inline-flex;
  align-items: center;
  gap: 0.3em;
}

.logo-descriptor {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  letter-spacing: 0;
  opacity: 0.75;
  transform: translateY(-0.05em);
}

@media (max-width: 360px) {
  .logo-descriptor { display: none; }
}

.nav-links {
  display: flex;
  gap: 2.5rem;
  font-family: 'Telegraf', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-weight: 400;
}

.nav-links a {
  color: inherit;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-weight: 700;                 /* bold */
  transition: font-weight 0.2s ease;
}

/* Active link jumps to Extra Bold */
.nav-links a.active {
  font-weight: 800;
}

.nav-links a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: currentColor;
  transition: width 0.4s ease;
}

.nav-links a:hover::after,
.nav-links a.active::after { width: 100%; }

/* ===== HERO ===== */
.hero {
  /* dvh accounts for mobile browser chrome (the collapsing toolbar) overlaying the
     viewport. vh kept as fallback for older browsers that don't support dvh. */
  height: 100vh;
  height: 100dvh;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  padding: 0 2rem 3rem;
  overflow: hidden;
}

.hero-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000 url('assets/hero-poster.jpg') center/cover no-repeat;
  /* The native reel loads on top once available. When iOS Low Power Mode
     blocks autoplay, the poster remains visible — no more black void. */
}

/* Native self-hosted hero reel — object-fit gives an exact cover crop with no
   oversized-iframe maths. Same element persisted across the lander soft-nav. */
.hero-reel {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border: 0;
  pointer-events: none;
  background: #000;
}

.hero-vignette {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(10,10,10,0.4) 0%, rgba(10,10,10,0.05) 30%, rgba(10,10,10,0.15) 60%, rgba(10,10,10,0.85) 100%);
  z-index: 1;
  pointer-events: none;
}

.hero-content {
  position: relative;
  z-index: 2;
  color: var(--paper);
}

.hero-marker {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  margin-bottom: 1.75rem;
  opacity: 0.75;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  animation: fadeUp 1.2s ease 0.3s both;
}

.hero-marker::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.hero-marker .pipe {
  margin: 0 0.5rem;
  opacity: 0.5;
}

.hero h1 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(3rem, 9vw, 9rem);
  line-height: 0.95;
  letter-spacing: -0.035em;
  max-width: 14ch;
  animation: fadeUp 1.2s ease 0.5s both;
}

.hero h1 em {
  /* Inherit global em rule (UltraBold 800) */
  color: inherit;
}

.hero-meta {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: flex-end;
  margin-top: 3rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.75;
  animation: fadeUp 1.2s ease 0.8s both;
  gap: 1rem;
}

.scroll-indicator {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  justify-self: center;
}

/* Third meta item (A decade of sound) aligns to the far right */
.hero-meta > span:last-child {
  justify-self: end;
  text-align: right;
}
.hero-meta .pipe { margin: 0 0.4rem; opacity: 0.5; }

.scroll-indicator::after {
  content: '↓';
  animation: bounce 2.4s ease infinite;
}

@keyframes fadeUp {
  from { opacity: 0; transform: translateY(30px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(4px); }
}

/* ===== INTRO ===== */
.intro {
  padding: 10rem 2rem 8rem;
  max-width: 1400px;
  margin: 0 auto;
}

.intro-grid {
  display: grid;
  grid-template-columns: 1fr 2fr;
  gap: 4rem;
  align-items: start;
}

.section-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  display: flex;
  align-items: center;
  gap: 0.85rem;
  color: var(--ink);
  opacity: 0.55;
  font-weight: 400;
}

.section-label::before {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.intro-text {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: clamp(1.6rem, 2.8vw, 2.5rem);
  line-height: 1.3;
  letter-spacing: -0.02em;
  cursor: default;
}

/* intro-text em inherits global UltraBold em rule */

.intro-text p + p { margin-top: 1.5rem; }

/* ===== BIFURCATION — colour split, no imagery ===== */
.studios-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  margin: 0 0 4rem;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  position: relative;
}

.studio-half {
  padding: 6rem 3rem;
  text-decoration: none;
  position: relative;
  display: flex;
  flex-direction: column;
  /* Content-driven height — sizes to (eyebrow + h2 + blurb + state indicator)
     plus padding. No viewport-relative rules, consistent with every other
     section on the site. */
  transition: padding 0.6s cubic-bezier(0.2, 0, 0, 1);
}

.studio-half.commercial {
  background: var(--paper);
  color: var(--ink);
}

.studio-half.film {
  background: var(--ink);
  color: var(--paper);
}

/* Center divider line */
.studios-split::before {
  content: '';
  position: absolute;
  top: 8%;
  bottom: 8%;
  left: 50%;
  width: 1px;
  background: var(--rule);
  z-index: 1;
}

/* Hover state — both sides animate identically. */
.studio-half:hover {
  padding-left: 4rem;
}


/* Active state — visual indicator that this is the current page */
.studio-half.is-active {
  cursor: default;
}

.studio-half.is-active .studio-arrow {
  color: var(--accent);
}

.studio-half.film.is-active .studio-arrow {
  color: var(--paper-warm);
}

/* Subtle accent rule on hover, drawing attention */
.studio-half::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.2, 0, 0, 1);
  z-index: 2;
}
.studio-half:hover::after { width: 100%; }
.studio-half.film::after { background: var(--paper-warm); }

/* Active state line — full width by default, animates back on hover */
.studio-half.is-active::after {
  width: 100%;
  height: 2px;
}

.studio-tag {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
  margin-bottom: 4rem;
}

.studio-half h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin-bottom: 2rem;
  cursor: default;
}

/* .studio-half h2 em inherits the global UltraBold em rule */

/* studio-half.commercial h2 em uses weight emphasis only — see global em rule */
.studio-half.film h2 em { color: var(--paper); }

.studio-blurb {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 38ch;
  opacity: 0.8;
  margin-bottom: 3rem;
}

.studio-arrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  gap: 0.65rem;
  transition: gap 0.4s ease;
  font-weight: 400;
}

.studio-half:hover .studio-arrow { gap: 1.25rem; }

/* ===== PORTFOLIO ===== */
.portfolio {
  padding: 10rem 0 6rem;
}

/* At very large viewports (1800px+) the bifurcation negative space grows
   visually too generous. Cap the vertical growth so the bifurcation cluster
   stays proportionally tight against the work grid below. */
@media (min-width: 1800px) {
  .portfolio-header {
    margin-bottom: 3rem;
    gap: 3rem;
  }
  /* Hero headline scales further on ultrawide — caps lift from 144px to 224px */
  .hero h1 {
    font-size: clamp(9rem, 9vw, 14rem);
  }
}

.portfolio-header {
  display: flex;
  flex-direction: column;          /* tabs sit beneath the header, not beside it */
  align-items: center;             /* selected-works header + tabs centred */
  text-align: center;
  margin-bottom: 4rem;             /* tabs → grid space */
  margin-left: auto;
  margin-right: auto;
  max-width: 1400px;               /* same column as intro / awards / team headers */
  padding: 0 2rem;                 /* same inset as those sections, so headers align */
  gap: 4rem;                       /* header → tabs space, matched to tabs → grid */
}

.portfolio-header > div:first-child {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

.portfolio-header h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0;
  /* Trim the box to the alphabetic baseline so the gap to the tabs is measured
     from where the text sits, not the bottom of descenders (the tail of a "g").
     Keeps the header→tabs space visually equal to the tabs→grid space. */
  text-box-trim: trim-end;
  text-box-edge: text alphabetic;
}

/* portfolio-header h2 em inherits global UltraBold em rule */


.filters {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  align-self: center;          /* tab group centred beneath the left-aligned header */
  justify-content: center;
}

/* Carousel wrapper (built in JS). On desktop it's an invisible pass-through —
   tabs stay centred and the chevrons are hidden. */
.filters-scroll {
  position: relative;
  align-self: center;
  width: 100%;
  max-width: 100%;
  min-width: 0;
}
.filters-arrow { display: none; }

/* On mobile, keep tabs on a single line that scrolls horizontally rather than
   wrapping to a ragged 2-row block (the long-form set has four tabs). */
@media (max-width: 600px) {
  /* Single-line horizontal carousel — tabs scroll rather than wrap. */
  .filters {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 1.25rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;  /* sideways scroll stays in the tab row, never chains to the page */
    min-width: 0;                    /* never force the row wider than its track */
    max-width: 100%;
    /* NB: deliberately NO -webkit-overflow-scrolling: touch. On iOS that flag
       promotes the scroller to its own momentum layer, and that layer leaks its
       full content width to the page on first paint — the page lands a few px
       too wide and sits shifted until a reflow (a pinch-zoom) recomputes it.
       Modern iOS does momentum scrolling here natively without the flag. */
    scrollbar-width: none;
    padding: 0 1.75rem 0.25rem;   /* room under the fade so first/last tab clears the chevron */
    scroll-padding-inline: 1.75rem;
  }
  .filters::-webkit-scrollbar { display: none; }
  .filter-btn { white-space: nowrap; flex: 0 0 auto; }

  /* Chevrons appear only when the row actually overflows, and only on the side
     that still has hidden tabs. They sit over a short fade to the page colour so
     the swipe affordance reads clearly. */
  .filters-scroll.is-scrollable .filters-arrow {
    display: flex;
    align-items: center;
    position: absolute;
    top: 0;
    bottom: 0.25rem;
    width: 2.5rem;
    border: 0;
    color: var(--ink);
    font-size: 1.5rem;
    line-height: 1;
    cursor: pointer;
    z-index: 3;
    padding: 0;
    opacity: 1;
    transition: opacity 0.25s ease;
  }
  .filters-scroll.is-scrollable .filters-arrow-prev {
    left: 0;
    justify-content: flex-start;
    background: linear-gradient(to right, var(--paper) 45%, transparent);
  }
  .filters-scroll.is-scrollable .filters-arrow-next {
    right: 0;
    justify-content: flex-end;
    background: linear-gradient(to left, var(--paper) 45%, transparent);
  }
  /* Fade out the chevron for the direction you've already reached the end of. */
  .filters-scroll.at-start .filters-arrow-prev { opacity: 0; pointer-events: none; }
  .filters-scroll.at-end .filters-arrow-next { opacity: 0; pointer-events: none; }
}

.filter-btn {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  padding: 0.65rem 1.1rem;
  background: transparent;
  border: 1px solid var(--rule);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 100px;             /* rounded edge */
  font-weight: 400;
}

.filter-btn:hover { border-color: var(--ink); }
.filter-btn.active {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
}

/* Editorial portfolio rhythm — deliberate spreads, not a uniform grid */
.work-grid {
  display: none;
  max-width: 1600px;
  margin-left: auto;
  margin-right: auto;
  padding: 0 2rem;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-flow: row;
  align-content: start;
  align-items: start;
  gap: 0.75rem;  /* tight Partizan-style gap */
}
.work-grid.is-active {
  display: grid;
}
.work-item {
  cursor: pointer;
  position: relative;
  transition: opacity 0.4s ease;
  margin: 0;
  padding: 0;
}

.work-image {
  position: relative;
  overflow: hidden;
  background: linear-gradient(135deg, var(--paper-warm) 0%, var(--paper-deep) 100%);
  aspect-ratio: 16 / 9;  /* uniform 16:9 for clean row baselines */
  width: 100%;
  display: block;
  border-radius: 0;
}

.work-image::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(10,10,10,0.05) 0%, rgba(10,10,10,0.15) 100%);
  z-index: 0;
}


.work-image img {
  position: relative;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) contrast(1);
  transition: all 0.7s cubic-bezier(0.2, 0, 0, 1);
  z-index: 1;
}

@media (hover: hover) {
  .work-item:hover .work-image img {
    transform: scale(1.04);
    filter: grayscale(0.35) contrast(1.05) brightness(0.95);
  }
}

.work-overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 50%, rgba(10,10,10,0.85) 100%);
  opacity: 0;
  transition: opacity 0.5s ease;
}

@media (hover: hover) { .work-item:hover .work-overlay { opacity: 1; } }

.play-small {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  width: 42px;
  height: 42px;
  /* Resilient to theme flip: hardcoded white outline + white triangle + grey backdrop.
     Works against any image colour underneath (dark photos, bright photos, etc.) */
  border: 1px solid rgba(255, 255, 255, 0.75);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #FFFFFF;
  font-size: 0.65rem;
  background: rgba(40, 40, 40, 0.55);
  backdrop-filter: blur(4px);
  z-index: 2;
}

.play-small::after {
  content: '▶';
  margin-left: 2px;
}

.work-meta {
  margin-top: 1.25rem;
  margin-bottom: 0.5rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 1rem;
  flex-wrap: wrap;
  min-height: 3.5rem;  /* uniform caption block so next row starts on same baseline */
}

.work-title {
  flex: 1 1 auto;
  min-width: 0;
}

.work-title h3 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 1.4rem;
  letter-spacing: -0.02em;
  line-height: 1.1;
  margin-bottom: 0.4rem;
}

.work-info {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.5;
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
}

.work-award {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  text-align: right;
  line-height: 1.6;
  flex: 0 1 auto;
  max-width: 50%;
  overflow-wrap: anywhere;
}

/* Featured artist credit — sits directly beneath the project title.
   Small, secondary read. Does not compete with the award showcase.
   Whole line stays at the same light weight — no emphasis on the artist name. */
.work-feat {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 0.7rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1.3;
  margin-top: 0.15rem;
  margin-bottom: 0.1rem;
}
/* Override the global em rule inside .work-feat so the artist name renders
   at the same regular weight as "feat." — no UltraBold jump, no italic. */
.work-feat em {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-style: normal;
  letter-spacing: inherit;
}

/* On narrow viewports, all tiles drop to column layout for award */
@media (max-width: 800px) {
  .work-meta { flex-direction: column; align-items: flex-start; }
  .work-award { text-align: left; max-width: 100%; }
}

/* ===== AV & EXPERIENTIAL — typographic credits section =====
   Deliberately different visual register from the tile grids.
   Reads as wall labels rather than portfolio tiles — appropriate for non-public-facing work
   where the credentialing is the work, not a clickable artefact. */
.work-grid.av-grid.is-active {
  display: block;
}
.av-grid {
  padding: 2rem 0 4rem;
  max-width: 72rem;
  margin: 0 auto;
}

.av-intro {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.55;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0.7;
  max-width: 48ch;
  padding-bottom: 3rem;
  border-bottom: 1px solid var(--rule);
  margin-bottom: 3rem;
}

.av-collaborator {
  padding: 2.5rem 0;
  border-bottom: 1px solid var(--rule);
  display: grid;
  grid-template-columns: minmax(0, 18rem) 1fr;
  gap: 3rem;
  align-items: baseline;
}

.av-collaborator:last-child {
  border-bottom: none;
}

.av-name {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
  letter-spacing: -0.025em;
  line-height: 1.1;
  color: var(--ink);
}

.av-works {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}

.av-works li {
  display: grid;
  grid-template-columns: 88px minmax(0, 1.4fr) minmax(0, 0.9fr) minmax(0, 0.9fr);
  gap: 1.5rem;
  align-items: center;
  padding-bottom: 1.25rem;
  border-bottom: 1px dashed var(--rule);
}

.av-works li:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

/* Small thumbnail — gallery handout register.
   Soft rounded corners, slight desaturation, no hover effect, no play button.
   The only place on the site with rounded corners — restraint. */
.av-work-thumb {
  display: block;
  width: 88px;
  height: 88px;
  overflow: hidden;
  border-radius: 0;
  background: var(--paper-warm);
}
.av-work-thumb img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  filter: saturate(0.78);
  transition: filter 0.4s ease;
}

.av-work-title {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 1.05rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  align-self: center;
}

.av-work-meta {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--accent);
  line-height: 1.5;
  align-self: center;
}

.av-work-context {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 0.85rem;
  letter-spacing: -0.005em;
  color: var(--ink);
  opacity: 0.55;
  line-height: 1.4;
  align-self: center;
}

@media (max-width: 800px) {
  .av-collaborator {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .av-works li {
    grid-template-columns: 64px 1fr;
    grid-template-rows: auto auto auto;
    gap: 0.4rem 1rem;
  }
  .av-work-thumb {
    width: 64px;
    height: 64px;
    grid-row: 1 / span 3;
  }
  .av-work-title { grid-column: 2; grid-row: 1; }
  .av-work-meta { grid-column: 2; grid-row: 2; }
  .av-work-context { grid-column: 2; grid-row: 3; }
}

/* ===== CLIENTS — marquee ===== */
.clients {
  padding: 6rem 0;
  background: var(--ink);
  color: var(--paper);
  overflow: hidden;
  margin-top: 4rem;
  position: relative;
}

.clients-header {
  text-align: center;
  margin-bottom: 3rem;
  padding: 0 2rem;
}

.clients-header .section-label {
  justify-content: center;
  color: var(--paper);
  opacity: 0.55;
}

.clients-header .section-label::after {
  content: '';
  width: 28px;
  height: 1px;
  background: currentColor;
}

.marquee {
  display: flex;
  gap: 4rem;
  animation: marquee 70s linear infinite;
  white-space: nowrap;
  width: max-content;
}

.marquee-item {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(2rem, 4vw, 3.5rem);
  letter-spacing: -0.025em;
  display: flex;
  align-items: center;
  gap: 4rem;
  color: var(--paper);
}

.marquee-item::after {
  content: '·';
  color: var(--paper);
  opacity: 0.35;
  font-size: 1.5em;
}

.marquee-item em {
  color: var(--paper);
  font-style: italic;
}

@keyframes marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

/* ===== AWARDS ===== */
.awards {
  padding: 8rem 2rem 6rem;
  max-width: 1400px;
  margin: 0 auto;
}

.awards-header {
  margin-bottom: 4rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
  gap: 2rem;
}

.awards-header-left h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0;
}

.awards-header-left h2 em { font-weight: 400; }

.awards-tag {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.55;
}

.award-list { border-top: 1px solid var(--rule); }

.award-row {
  display: grid;
  grid-template-columns: 80px 2fr 1.2fr;
  gap: 2rem;
  padding: 1.75rem 0;
  border-bottom: 1px solid var(--rule);
  align-items: baseline;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.8rem;
  transition: padding 0.4s ease;
}

@media (hover: hover) { .award-row:hover { padding-left: 1rem; } }

.award-year {
  font-weight: 400;
  letter-spacing: 0.08em;
}

/* Festival is the promoted hero — bold Telegraf, sitting where the title was */
.award-festival {
  font-family: 'Telegraf', sans-serif;
  font-weight: 700;
  font-size: 1.25rem;
  letter-spacing: -0.015em;
}

/* Prize: right-aligned uppercase accent, as before */
.award-prize {
  text-align: right;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  font-size: 0.7rem;
  color: var(--accent);
  line-height: 1.4;
}

/* ===== TEAM ===== */
.team {
  padding: 5rem 2rem 8rem;
  max-width: 1400px;
  margin: 0 auto;
}

.team-header { margin-bottom: 5rem; position: relative; }

.team-header h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin-top: 0;
}

.team-header h2 em { font-weight: 400; }

.team-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.team-member { position: relative; overflow: visible; }

.member-image {
  aspect-ratio: 4 / 5;
  background: var(--paper-warm);
  overflow: visible;
  margin-bottom: 1.5rem;
  position: relative;
  border-radius: 0;
}

.member-image img:not(.member-doodle) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
  transition: filter 0.6s ease;
  display: block;
  border-radius: 0;
}

/* Picture wrappers (added in v13.2 for WebP fallback) need to fill their
   container so the img inside takes container dimensions. For .member-image,
   ONLY style the first picture (portrait) — the second picture wraps the
   .member-doodle img which is position:absolute and must not have its wrapper
   block-level (would push .member-name down by 100% container height). */
.work-image picture,
.studio-bg picture,
.member-image > picture:first-of-type {
  display: block;
  width: 100%;
  height: 100%;
}

/* Hand-drawn doodle overlay — sits on top of the photo, allowed to overhang into margin.
   The doodle PNG is 1200×1500 with the photo region occupying the centre 85% (1020×1275).
   To align the doodle's photo-region to .member-image (which is 100% × aspect 4/5),
   the doodle is sized at 117.65% (= 100/85) with -8.82% horizontal AND vertical offsets. */
.member-doodle {
  position: absolute;
  top: -8.82%;
  left: -8.82%;
  width: 117.65%;
  height: 117.65%;
  pointer-events: none;
  opacity: 0;
  transform: scale(0.98);
  transition: opacity 0.6s ease, transform 0.8s cubic-bezier(0.2, 0, 0, 1);
  z-index: 3;
}

/* On touch/mobile the doodle never reveals (it's a hover affordance), but its
   intentional 117.65% overhang still spilled ~7px past the right edge — the
   long-standing horizontal shift. Pin it flush to the photo on narrow screens
   so it can't overhang sideways. Vertical character is unaffected. */
@media (max-width: 600px) {
  .member-doodle { left: 0; width: 100%; }
}
@media (hover: hover) {
  .team-member:hover .member-doodle {
    opacity: 1;
    transform: scale(1);
  }
}

.member-name {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: 2rem;
  letter-spacing: -0.025em;
  margin-bottom: 0.4rem;
}

.member-role {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.55;
  margin-bottom: 1rem;
}

.member-contact {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem;
}

.member-contact a {
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color 0.3s ease;
}

.member-contact a:hover { border-color: var(--ink); }

/* ===== STUDIO ===== */
.studio {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding: 5rem 2rem;
  margin-top: 4rem;
  color: var(--ink);
}

/* Wall-to-wall background photo with a dark scrim for legibility */
.studio-bg {
  position: absolute;
  inset: 0;
  z-index: -1;
}
.studio-bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: brightness(0.5) saturate(0.85);
}
.studio-bg::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse at 25% 30%, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.55) 70%),
    linear-gradient(180deg, rgba(0,0,0,0.25) 0%, rgba(0,0,0,0.45) 100%);
}

.studio-inner {
  max-width: 1200px;
  margin: 0 auto;
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 240px;
  grid-template-areas:
    "eyebrow  ."
    "headline map"
    "copy     map"
    "inforow  map";
  column-gap: 2.5rem;
  row-gap: 0;
  align-items: start;
}

.studio-label  { grid-area: eyebrow;  margin-bottom: 1rem; }
.studio-headline { grid-area: headline; }
.studio-copy   { grid-area: copy; }
.studio-info-row { grid-area: inforow; }
.studio-map    { grid-area: map; align-self: start; }

.studio-headline {
  font-family: 'Telegraf', sans-serif;
  font-weight: 200;
  font-size: clamp(1.75rem, 3.2vw, 2.75rem);
  letter-spacing: -0.025em;
  line-height: 1.05;
  margin: 0 0 1rem 0;
  max-width: 28ch;
}
.studio-headline em {
  font-style: normal;
  font-weight: 800;
}

.studio-copy {
  font-family: 'Telegraf', sans-serif;
  font-weight: 300;
  font-size: 1.05rem;
  line-height: 1.5;
  max-width: 42ch;
  margin: 0 0 2.5rem 0;
  opacity: 0.9;
}

/* Info row — three blocks (Capabilities · Visit · Address) in a horizontal row.
   align-items: start ensures the labels all line up at the same top edge —
   so "Address" label aligns exactly with "Visit" label. */
.studio-info-row {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 2.5rem;
  align-items: start;
}

.studio-block-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.6;
  margin-bottom: 0.55rem;
}

.studio-block-body {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: 0.95rem;
  line-height: 1.55;
}

.studio-block-link {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  margin-top: 0.7rem;
  display: inline-block;
  color: var(--ink);
  opacity: 0.7;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: opacity 0.3s ease, border-color 0.3s ease;
}
@media (hover: hover) {
  .studio-block-link:hover {
    opacity: 1;
    border-color: currentColor;
  }
}

/* Portrait-rectangle map embed. Lives in grid-area "map" which starts at the
   "headline" row — so its TOP aligns exactly with the headline's TOP. */
.studio-map {
  width: 240px;
  height: 320px;
  border-radius: 0;
  overflow: hidden;
  background: #0c0e10;
  border: 1px solid rgba(229, 239, 231, 0.12);
}
.studio-map iframe {
  width: 100%;
  height: 100%;
  border: none;
  display: block;
  filter: invert(0.92) hue-rotate(180deg) saturate(0.35) brightness(0.95);
}

@media (max-width: 900px) {
  .studio { padding: 4rem 1.25rem; }
  .studio-inner {
    grid-template-columns: 1fr;
    grid-template-areas:
      "eyebrow"
      "headline"
      "copy"
      "inforow"
      "map";
    row-gap: 2rem;
  }
  .studio-info-row {
    grid-template-columns: 1fr;
    gap: 1.25rem;
  }
  .studio-map {
    width: 100%;
    max-width: 280px;
    height: 320px;
  }
}


.contact {
  background: var(--ink);
  color: var(--paper);
  padding: 10rem 2rem 4rem;
  position: relative;
  overflow: hidden;
}

.contact::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n2'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n2)' opacity='0.5'/%3E%3C/svg%3E");
  opacity: 0.06;
  pointer-events: none;
}

.contact-inner {
  max-width: 1400px;
  margin: 0 auto;
  position: relative;
}

.contact-pretitle {
  color: var(--paper);
  opacity: 0.5;
}

.contact h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 1;
  margin: 1.5rem 0 4rem;
  max-width: 14ch;
}

.contact h2 em {
  font-weight: 400;
  color: var(--paper-warm);
}

.contact-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  border-top: 1px solid var(--rule-light);
  padding-top: 3rem;
}

.contact-block-label {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.5;
  margin-bottom: 1rem;
}

.contact-block a, .contact-block p {
  color: var(--paper);
  text-decoration: none;
  font-family: 'Telegraf', sans-serif;
  font-size: 1rem;
  line-height: 1.5;
  display: block;
  border-bottom: 1px solid transparent;
  width: fit-content;
  transition: border-color 0.3s ease;
  font-weight: 400;
}

.contact-block a:hover { border-color: var(--paper); }

.footer-bottom {
  margin-top: 6rem;
  padding-top: 2rem;
  border-top: 1px solid var(--rule-light);
  display: flex;
  justify-content: space-between;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.65rem;
  text-transform: uppercase;
  letter-spacing: 0.22em;
  opacity: 0.4;
}

/* ===== LIGHTBOX ===== */
.lightbox {
  position: fixed;
  inset: 0;
  background: rgba(10, 10, 10, 0.96);
  z-index: 200;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 4rem 2rem;
  opacity: 0;
  transition: opacity 0.4s ease;
}

.lightbox.open {
  display: flex;
  opacity: 1;
}

.lightbox-frame {
  width: 100%;
  max-width: 1400px;
  aspect-ratio: 16 / 9;
  /* B-site palette inversion: --ink (mint-cream) was correct for the A-site
     light theme but now produces a cream "white-out" behind the video.
     --paper is the dark surface in the B-site. */
  background: var(--paper);
  position: relative;
}

.lightbox-frame iframe {
  width: 100%;
  height: 100%;
  border: 0;
  /* Covers the iframe's default white background flash before Vimeo's embed loads. */
  background: #000;
}

.lightbox-close {
  /* Fixed to viewport — never gets clipped by the frame inside the lightbox,
     regardless of viewport size or aspect ratio. */
  position: fixed;
  top: 2rem;
  right: 2rem;
  z-index: 220; /* above .lightbox (200) and the iframe inside it */
  /* Mint-cream X on a translucent dark disc, with subtle blur backdrop —
     readable against any video frame underneath. */
  background: rgba(10, 10, 10, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  border: 1px solid rgba(229, 239, 231, 0.45);
  color: var(--ink);
  width: 48px;
  height: 48px;
  border-radius: 50%;
  cursor: pointer;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 1.2rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.25s ease, border-color 0.25s ease, transform 0.25s ease;
}

.lightbox-close:hover {
  background: var(--ink);
  color: var(--paper);
  border-color: var(--ink);
  transform: scale(1.06);
}

.lightbox-meta {
  position: absolute;
  bottom: 2rem;
  left: 2rem;
  color: var(--paper);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  opacity: 0.7;
}

/* ===== RESPONSIVE ===== */
@media (max-width: 900px) {
  .nav-links { gap: 1.25rem; font-size: 0.6rem; }
  nav { padding: 1.25rem 1.25rem; }
  .hero { padding: 0 1.25rem 2rem; }
  .intro { padding: 6rem 1.25rem 4rem; }
  .intro-grid { grid-template-columns: 1fr; gap: 2rem; }
  .studios-split { grid-template-columns: 1fr; }
  .studios-split::before { display: none; }
  .studio-half { padding: 4rem 1.5rem; }
  .studio-half:hover, .studio-half.film:hover { padding-left: 1.5rem; padding-right: 1.5rem; }
  .work-grid { grid-template-columns: 1fr; gap: 2.5rem; }
  /* Mosaic mobile reset: defeat the desktop 12-column mosaic so tiles stack
     single-column on phones. Three obstacles in the desktop CSS need clearing:
     (1) per-tab `[data-tab="X"]` rules set grid-auto-rows to a small pixel
     value — defeat via matching specificity + !important.
     (2) `.work-item { height: 100% }` makes aspect-ratio silently fail —
     defeat via !important + use padding-bottom hack (universal support) so
     tile dimensions don't depend on whether the browser respects aspect-ratio.
     (3) The work-item has class="reveal" which means opacity:0 until the
     IntersectionObserver adds .in. If anything goes wrong with the observer,
     or the tile is briefly 0-height, tiles stay invisible forever. Force
     opacity:1 on mobile so visibility doesn't depend on JS. */
  .work-grid.mosaic[data-tab] {
    grid-template-columns: 1fr !important;
    grid-auto-rows: auto !important;
  }
  .work-grid.mosaic .work-item {
    grid-column: 1 !important;
    grid-row: auto !important;
    height: 0 !important;            /* defeats desktop's height: 100% */
    padding-bottom: 56.25% !important; /* 9/16 ratio — bulletproof 16:9 box */
  }
  /* Force tile visibility on mobile — don't depend on the reveal observer */
  .work-grid.mosaic .work-item.reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Reset object-position tweaks on mobile — they were calibrated for the
     desktop mosaic crops and don't apply once tiles return to 16:9. */
  .work-grid.mosaic .work-item .work-image img {
    object-position: center center !important;
  }
  .portfolio, .awards, .team { padding: 5rem 1.25rem; }
  /* desktop puts the 2rem inset on the header/grid themselves; on mobile the
     section provides the inset, so zero the children to avoid doubling it */
  .portfolio-header, .work-grid { padding-left: 0; padding-right: 0; }
  .clients { padding: 4rem 0; }
  .award-row { grid-template-columns: 60px 1fr; gap: 0.5rem 1rem; }
  .award-prize { grid-column: 1 / -1; text-align: left; padding-left: 76px; }
  .team-grid { grid-template-columns: 1fr; gap: 3rem; }
  .contact { padding: 6rem 1.25rem 3rem; }
  .contact-grid { grid-template-columns: 1fr 1fr; gap: 2rem; }
  .footer-bottom { flex-direction: column; gap: 0.5rem; }
  .lightbox { padding: 1rem; }
  .lightbox-close { top: 1rem; right: 1rem; }
}

/* Reveal */
.reveal {
  opacity: 0;
  transform: translateY(40px);
  transition: opacity 1s ease, transform 1s cubic-bezier(0.2, 0, 0, 1);
}

.reveal.in {
  opacity: 1;
  transform: translateY(0);
}

/* ============================================
   PLAYFUL INTERACTIONS — additions
   ============================================ */

/* ============================================
   HEADING HOVERS — each one gets a distinct character flip
   No expansion. Just typeface / variant shift.
   ============================================ */


/* ============================================================
   B-SITE OVERRIDES — permanent dark surfaces
   ============================================================
   In A-site, "color: var(--paper)" gives cream text, which works because
   --paper is cream. After the B-site polarity flip, --paper is dark — which
   breaks every place where the rule was meant to deliver LIGHT text on a
   PERMANENTLY DARK surface (video, modal backdrops, work-tile overlays).
   
   These overrides pin the text colour back to cream for those specific
   surfaces. Their backgrounds are hardcoded rgba(10,10,10,...) values that
   don't flip — they remain intrinsically dark regardless of theme.
============================================================ */

/* Hero text sits over a video that's always dark; vignette darkens the bottom */
.hero-content {
  color: #F1EFE9;
}
.hero-marker, .hero-loc-mobile { display: none; }

/* Work tile hover/info overlays sit on photographs; need cream-on-dark text */
.work-info {
  color: #F1EFE9;
}


/* ============================================================
   MOSAIC TILE SYSTEM — applies to .work-grid.mosaic on any tab
   ============================================================
   Tiles of varied shapes interlock to form one clean rectangle per tab.
   Brand text is centred over each tile; piece title, feat, role/country
   and award badge reveal on hover alongside a 45% darken of the image.
   Tile aspect ratios are determined by the grid cell — NOT a forced 16:9.

   Per-tab grid template + position spans live in their own blocks below.
   Heroes are always positions 1, 2, 3 (largest cells).
============================================================ */

/* Shared mosaic rules — tab-agnostic */
.work-grid.mosaic {
  grid-template-columns: repeat(12, 1fr);
  gap: 0.75rem;
  align-items: stretch;
  align-content: stretch;
}

.work-grid.mosaic .work-item {
  position: relative;
  display: block;
  margin-top: 0;
  height: 100%;
  overflow: hidden;
  border-radius: 0;
}

.work-grid.mosaic .work-image {
  position: absolute;
  inset: 0;
  aspect-ratio: unset;
  height: 100%;
  border-radius: 0;
}
.work-grid.mosaic .work-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: filter 0.5s ease;
}

/* Hover: 45% darken. Pure brightness drop, no desaturation. */
@media (hover: hover) {
  .work-grid.mosaic .work-item:hover .work-image img {
    filter: brightness(0.55);
  }
}

/* Play button hidden — the brand-centred overlay is the affordance */
.work-grid.mosaic .play-small {
  display: none;
}

/* Meta overlay — title centred in tile, bottom-left block independent */
.work-grid.mosaic .work-meta {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  margin: 0;
  padding: 0;
  min-height: 0;
  display: block;
}

.work-grid.mosaic .work-title {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.25rem;
}

.work-grid.mosaic .work-title h3 {
  margin: 0;
  color: #fff;
  font-family: 'Telegraf', sans-serif;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
  display: flex;
  flex-direction: column;
  align-items: center;
  line-height: 1.15;
}

/* Brand: larger, regular weight, each word breaks per line */
.work-grid.mosaic .work-title .brand {
  font-weight: 400;
  font-size: 2rem;
  letter-spacing: -0.01em;
  line-height: 1.05;
  display: block;
}
.work-grid.mosaic .work-title .brand .w {
  display: block;
}

/* Piece: hover-only, grows in below brand */
.work-grid.mosaic .work-title .piece {
  font-weight: 300;
  font-size: 1.15rem;
  display: block;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  margin-top: 0;
  transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
}
@media (hover: hover) {
  .work-grid.mosaic .work-item:hover .work-title .piece {
    max-height: 4rem;
    opacity: 1;
    margin-top: 0.3rem;
  }
}

/* Bottom block — feat / info / award, hover-revealed bottom-left */
.work-grid.mosaic .work-bottom {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.3rem;
}

.work-grid.mosaic .work-feat,
.work-grid.mosaic .work-info,
.work-grid.mosaic .work-award {
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.35s ease, transform 0.35s ease;
  color: #fff;
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.18);
}

.work-grid.mosaic .work-award {
  align-self: flex-start;
  margin-top: 0.2rem;
  color: var(--accent);
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.6rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  padding: 0.3rem 0.5rem;
  background: rgba(229, 239, 231, 0.15);
  backdrop-filter: blur(4px);
  border-radius: 0;
  text-shadow: none;
  /* Wrap onto multiple lines when text exceeds tile width; constrain badge
     to the flex parent so it never exceeds the tile's content area. */
  white-space: normal;
  line-height: 1.5;
  max-width: 100%;
  /* Break on ` · ` separators and long words gracefully */
  overflow-wrap: anywhere;
}

@media (hover: hover) {
  .work-grid.mosaic .work-item:hover .work-feat,
  .work-grid.mosaic .work-item:hover .work-info,
  .work-grid.mosaic .work-item:hover .work-award {
    opacity: 1;
    transform: translateY(0);
  }
  .work-grid.mosaic .work-item:hover .work-info { transition-delay: 0.04s; }
  .work-grid.mosaic .work-item:hover .work-award { transition-delay: 0.08s; }
}


/* ===== PER-TAB GRID + POSITION SPANS ===== */

/* --- COMMERCIAL (10 tiles) — 12×24 sub-rows × 40px = 960px ----- */
.work-grid.mosaic[data-tab="commercial"] {
  grid-auto-rows: 40px;
}
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-1  { grid-column: 1 / 5;   grid-row: 1 / 13; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-2  { grid-column: 5 / 8;   grid-row: 1 / 10; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-3  { grid-column: 8 / 13;  grid-row: 1 / 7; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-4  { grid-column: 8 / 13;  grid-row: 7 / 13; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-5  { grid-column: 5 / 8;   grid-row: 10 / 16; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-6  { grid-column: 1 / 5;   grid-row: 13 / 20; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-7  { grid-column: 8 / 13;  grid-row: 13 / 25; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-8  { grid-column: 1 / 5;   grid-row: 20 / 25; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-9  { grid-column: 5 / 8;   grid-row: 16 / 20; }
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-10 { grid-column: 5 / 8;   grid-row: 20 / 25; }
/* pos-10 narrow strip: tighten padding, hide award */
.work-grid.mosaic[data-tab="commercial"] .work-item.pos-10 .work-meta { padding: 0.75rem 1rem; }

/* --- AUDIO POST (10 tiles) — 12×24 sub-rows × 48px = 1152px ---- */
.work-grid.mosaic[data-tab="post"] {
  grid-auto-rows: 48px;
}
.work-grid.mosaic[data-tab="post"] .work-item.pos-1 { grid-column: 1 / 6;  grid-row: 1 / 9; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-2 { grid-column: 6 / 10; grid-row: 1 / 10; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-3 { grid-column: 10 / 13;grid-row: 1 / 12; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-4 { grid-column: 1 / 6;  grid-row: 9 / 16; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-5 { grid-column: 6 / 10; grid-row: 10 / 16; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-6 { grid-column: 10 / 13;grid-row: 12 / 21; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-7 { grid-column: 1 / 6;  grid-row: 16 / 21; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-8 { grid-column: 6 / 10; grid-row: 16 / 21; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-9 { grid-column: 1 / 7;  grid-row: 21 / 25; }
.work-grid.mosaic[data-tab="post"] .work-item.pos-10{ grid-column: 7 / 13; grid-row: 21 / 25; }

/* pos-3 Edgars: wide source image into a tall portrait cell — anchor crop
   to the left-of-centre so the subject's face stays composed in the slice. */
.work-grid.mosaic[data-tab="post"] .work-item.pos-3 .work-image img {
  object-position: 38% center;
}

/* pos-7 KFC: two faces near the top of the source — anchor to top so
   neither head gets cropped at the upper edge of the cell. */
.work-grid.mosaic[data-tab="post"] .work-item.pos-7 .work-image img {
  object-position: center top;
}

/* pos-9 Isaura: girl character sits in the bottom-left of the frame —
   anchor to the bottom so she's preserved when the wide cell crops the top. */
.work-grid.mosaic[data-tab="post"] .work-item.pos-9 .work-image img {
  object-position: center bottom;
}

/* pos-10 Voov: model's face sits in the upper third — anchor to top
   so the face isn't cut by the wide cell's vertical crop. */
.work-grid.mosaic[data-tab="post"] .work-item.pos-10 .work-image img {
  object-position: center top;
}

/* --- DOCUMENTARY (6 tiles) — 12×16 sub-rows × 64px = 1024px ---- */
.work-grid.mosaic[data-tab="documentary"] {
  grid-auto-rows: 64px;
}
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-1 { grid-column: 1 / 8;  grid-row: 1 / 8; }
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-2 { grid-column: 8 / 13; grid-row: 1 / 7; }
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-3 { grid-column: 8 / 13; grid-row: 7 / 13; }
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-4 { grid-column: 1 / 5;  grid-row: 8 / 13; }
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-5 { grid-column: 5 / 8;  grid-row: 8 / 13; }
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-6 { grid-column: 1 / 13; grid-row: 13 / 17; }
/* pos-6 wide banner: tighten padding to fit the cinematic strip */
.work-grid.mosaic[data-tab="documentary"] .work-item.pos-6 .work-meta { padding: 0.75rem 1rem; }

/* --- SHORT FILMS (5 tiles) — 12×12 sub-rows × 80px = 960px ----- */
.work-grid.mosaic[data-tab="shortfilm"] {
  grid-auto-rows: 80px;
}
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-1 { grid-column: 1 / 6;  grid-row: 1 / 8; }
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-2 { grid-column: 6 / 13; grid-row: 1 / 6; }
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-3 { grid-column: 6 / 10; grid-row: 6 / 10; }
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-6 { grid-column: 10 / 13;grid-row: 6 / 10; }
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-4 { grid-column: 1 / 6;  grid-row: 8 / 13; }
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-5 { grid-column: 6 / 13; grid-row: 10 / 13; }
/* pos-5 banner: tighten padding to fit the slimmer strip */
.work-grid.mosaic[data-tab="shortfilm"] .work-item.pos-5 .work-meta { padding: 0.75rem 1rem; }

/* --- FINAL MIX (6 tiles) — 12×14 sub-rows × 68px = 952px ------ */
.work-grid.mosaic[data-tab="finalmix"] {
  grid-auto-rows: 68px;
}
/* 12-col × 14-row rectangular grid, three-column macro rhythm (4 cols each).
   Top row: Equilibrio (deepest, anchors left) | Mr Eazi | Riky Rick.
   Bottom: NASA | !Aitsa (deepest centre) | Rave & Resistance + African Cypher. */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-1 { grid-column: 1 / 5;  grid-row: 1 / 10; }  /* Equilibrio 4×9 */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-2 { grid-column: 5 / 9;  grid-row: 1 / 7;  }  /* Mr Eazi 4×6 */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-7 { grid-column: 9 / 13; grid-row: 1 / 7;  }  /* Riky Rick 4×6 (same size as Eazi) */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-4 { grid-column: 1 / 5;  grid-row: 10 / 15; } /* NASA 4×5 */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-3 { grid-column: 5 / 9;  grid-row: 7 / 15; }  /* !Aitsa 4×8 */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-5 { grid-column: 9 / 13; grid-row: 7 / 12; }  /* Rave & Resistance 4×5 */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-6 { grid-column: 9 / 13; grid-row: 12 / 15; } /* African Cypher 4×3 */
/* pos-6 small corner: tighten padding, hide award */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-6 .work-meta { padding: 0.75rem 1rem; }
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-6 .work-award { display: none; }

/* pos-5 Rave & Resistance: anchor the crop to the left so the women in the
   red dress stay in frame inside the narrow column cell. */
.work-grid.mosaic[data-tab="finalmix"] .work-item.pos-5 .work-image img {
  object-position: left center;
}


/* Mobile: collapse to single column, restore 16:9 — applies to all mosaic grids.
   Specificity bumped with [data-tab] attribute selectors so this block outranks
   the per-tab desktop position rules (.mosaic[data-tab="X"] .work-item.pos-N). */
@media (max-width: 900px) {
  .work-grid.mosaic[data-tab] {
    grid-template-columns: 1fr;
    grid-auto-rows: auto;
  }
  .work-grid.mosaic[data-tab] .work-item[class*="pos-"] {
    grid-column: 1 / -1;
    grid-row: auto;
    height: auto;
    aspect-ratio: 16 / 9;
  }
  .work-grid.mosaic[data-tab] .work-image {
    position: absolute;
    inset: 0;
    aspect-ratio: unset;
    flex: 0 0 auto;
  }
}

/* =====================================================================
   v13.2 QA additions
   ===================================================================== */

/* #10 — Skip link: hidden until focused, then appears top-left */
.skip-link {
  position: absolute;
  left: -9999px;
  top: 1rem;
  z-index: 1000;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  text-decoration: none;
  padding: 0.85rem 1.1rem;
  background: var(--ink);
  color: var(--paper);
  border: 1px solid var(--ink);
}
.skip-link:focus {
  left: 1rem;
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

/* #10 — Keyboard focus visibility for all interactive elements */
:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}
/* But hide outline when focus came from a click/touch */
:focus:not(:focus-visible) {
  outline: none;
}

/* #5 — Respect users who prefer reduced motion (vestibular safety) */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Force reveal elements to be visible immediately */
  .reveal {
    opacity: 1 !important;
    transform: none !important;
  }
  /* Disable hero parallax / video subtle motion if any */
  .hero-vignette {
    animation: none !important;
  }
}

/* =====================================================================
   #6 — Hamburger nav (<600px). Editorial minimalism: two stacked lines,
   tap to expand into full-screen overlay matching b-site palette.
   ===================================================================== */

/* Hamburger button: hidden by default (desktop/tablet keeps top bar).
   On mobile it gets a solid backplate so the bars always read against the
   hero video (see @media block below). */
.nav-toggle {
  display: none;
  position: relative;
  width: 44px;
  height: 44px;
  background: transparent;
  border: none;
  cursor: pointer;
  color: inherit;
  padding: 0;
}

.nav-toggle span {
  display: block;
  position: absolute;
  left: 50%;
  margin-left: -11px;
  width: 22px;
  height: 1.5px;
  background: currentColor;
  transition: transform 0.35s cubic-bezier(0.65, 0, 0.35, 1),
              opacity 0.2s ease;
}
.nav-toggle span:nth-child(1) { top: 18px; }
.nav-toggle span:nth-child(2) { top: 25px; }

/* Open state: lines morph into an X */
nav[data-open="true"] .nav-toggle span:nth-child(1) {
  transform: translateY(3.5px) rotate(45deg);
}
nav[data-open="true"] .nav-toggle span:nth-child(2) {
  transform: translateY(-3.5px) rotate(-45deg);
}

@media (max-width: 600px) {
  /* CRITICAL: lift the nav out of mix-blend-mode: difference when the menu is
     open. Under difference blend, the black overlay (var(--paper) = #000)
     renders fully transparent, which is why the backplate "disappeared" and
     the links/X showed as faint ghosts. Isolating + normal blend fixes it. */
  nav[data-open="true"] {
    mix-blend-mode: normal;
    isolation: isolate;
  }

  /* Show hamburger — no backplate. A drop-shadow on the bars plus the nav
     backdrop blur keep the thin lines legible over any hero frame. */
  .nav-toggle {
    display: block;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    color: var(--ink);
    z-index: 51;
    filter: drop-shadow(0 1px 3px rgba(0, 0, 0, 0.55));
  }
  /* When open, the solid overlay sits behind the X — no backplate needed */

  /* Full-screen overlay panel — solid, tight, top-anchored */
  .nav-links {
    position: fixed;
    inset: 0;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
    gap: 0;
    padding: 6.5rem 2rem 2rem;
    background: var(--paper);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px);
    transition: opacity 0.3s ease, transform 0.3s ease, visibility 0s 0.3s;
    z-index: 50;
    mix-blend-mode: normal;
    color: var(--ink);
  }
  nav[data-open="true"] .nav-links {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 0.3s ease, transform 0.3s ease;
  }

  /* Menu links: tighter rhythm, defined weight, hairline dividers */
  .nav-links a {
    width: 100%;
    font-family: 'Telegraf', sans-serif;
    font-weight: 400;
    font-size: 1.6rem;
    letter-spacing: 0;
    text-transform: none;
    padding: 1.1rem 0;
    border-bottom: 1px solid var(--rule);
  }
  .nav-links a:first-of-type { border-top: 1px solid var(--rule); }
  .nav-links a.active { font-weight: 700; }
  .nav-links a::after { display: none; }

  /* Prevent body scroll when menu is open */
  body.nav-locked { overflow: hidden; }
}

/* ============================================================
   LANDER — split selection UI (index.html)
   Two full-height video panels, non-scrollable, opt-in nav.
   ============================================================ */

.lander-body {
  overflow: hidden;            /* non-scrollable */
  height: 100vh;
  height: 100dvh;
}

.lander {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-columns: 1fr 1fr;    /* Commercial left, Long-form right */
  --sweep: 50%;                       /* reveal-line position, animated during intro */
}

/* ===== Full-viewport video stage (long-form base, commercial masked on top) ===== */
.lander-stage {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background: #000;
}
.lander-vid {
  position: absolute;
  inset: 0;
  overflow: hidden;
}
.lander-vid.film { z-index: 0; }       /* base layer — always full */
.lander-vid.commercial {               /* top layer — feathered reveal driven by --sweep */
  z-index: 1;
  -webkit-mask-image: linear-gradient(to right, #000 0, #000 var(--sweep), transparent var(--sweep), transparent 100%);
  mask-image: linear-gradient(to right, #000 0, #000 var(--sweep), transparent var(--sweep), transparent 100%);
  will-change: mask;
}
.lander-vid video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  background: #000;
}

/* Each half is a clickable panel */
.lander-half {
  position: relative;
  z-index: 2;                   /* overlay above the video stage */
  overflow: hidden;
  text-decoration: none;
  color: var(--ink);            /* light mint-cream text over footage */
  display: block;
}

/* Video cover — oversized, centred iframe guarantees a centred cover-crop.
   Panels are now full-width × half-height, so the cover math flips. */
.lander-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  background: #000;
}
.lander-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: max(50vw, 177.78vh);
  height: max(28.125vw, 100vh);
  pointer-events: none;
}

/* Slick black scrim for text legibility — stronger at the bottom where the
   content sits. Identical on both halves at all times, so the click/swipe
   transition fades evenly rather than one side lifting before the other. */
.lander-scrim {
  position: absolute;
  inset: 0;
  z-index: 2;
  opacity: 0;                         /* absent during intro — vivid footage */
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.45) 0%,
    rgba(0, 0, 0, 0.30) 40%,
    rgba(0, 0, 0, 0.65) 100%
  );
  transition: opacity 1.4s ease;
}

/* Overlaid bifurcation content — anchored bottom-left, mirrors old studio-half */
.lander-content {
  position: absolute;
  inset: 0;
  z-index: 3;
  padding: 2rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  opacity: 0;                         /* hidden during intro, fades in at live */
  transition: opacity 1.2s ease;
}

/* Accent rule on hover (matches bifurcation behaviour) */
.lander-half::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--accent);
  transition: width 0.6s cubic-bezier(0.2, 0, 0, 1);
  z-index: 4;
}
@media (hover: hover) {
  .lander-half:hover::after { width: 100%; }
}

/* Enter + arrow sits ABOVE the header */
.lander-arrow {
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.65rem;
  transition: gap 0.4s ease;
  font-weight: 400;
  margin-bottom: 1.25rem;
  opacity: 0.85;
}
@media (hover: hover) {
  .lander-half:hover .lander-arrow { gap: 1.25rem; opacity: 1; }
}

.lander-half h2 {
  font-family: 'Telegraf', sans-serif;
  font-weight: 700;
  font-size: clamp(2.5rem, 5vw, 4.5rem);
  letter-spacing: -0.03em;
  line-height: 0.95;
  margin: 0;
}

/* Blurb hidden until the panel is hovered, then writes out beneath the header */
.lander-blurb {
  font-size: 1rem;
  line-height: 1.55;
  max-width: 34ch;
  margin: 0 auto;
  max-height: 0;
  opacity: 0;
  overflow: hidden;
  transform: translateY(-4px);
  transition: max-height 0.6s cubic-bezier(0.2, 0, 0, 1),
              opacity 0.5s ease,
              transform 0.5s ease,
              margin-top 0.6s ease;
}
@media (hover: hover) {
  .lander-half:hover .lander-blurb {
    max-height: 8em;
    opacity: 0.85;
    transform: translateY(0);
    margin-top: 1.5rem;
  }
}

/* Bottom meta strip — spans full width above both panels */
.lander-meta {
  position: fixed;
  bottom: 2rem;
  left: 2rem;
  right: 2rem;
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  font-family: 'Bricolage Grotesque', sans-serif;
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink);
  opacity: 0.9;
  pointer-events: none;
}
.lander-meta .pipe { margin: 0 0.4rem; opacity: 0.5; }

/* Mobile lander — stack panels top/bottom (left/right is too narrow on phones) */
@media (max-width: 900px) {
  .lander {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr 1fr;
  }
  /* Reveal sweep flips to vertical so it matches the top/bottom split */
  .lander-vid.commercial {
    -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 var(--sweep), transparent var(--sweep), transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0, #000 var(--sweep), transparent var(--sweep), transparent 100%);
  }
  .lander-video iframe {
    width: max(100vw, 88.89vh);
    height: max(56.25vw, 50vh);
  }
  .lander-content { padding: 1.5rem; }
  .lander-half h2 { font-size: clamp(2rem, 8vw, 3rem); }
  .lander-blurb { font-size: 0.85rem; max-width: 30ch; }
  .lander-meta { font-size: 0.6rem; flex-direction: column; gap: 0.3rem; align-items: flex-start; bottom: 1rem; left: 1rem; }

  /* SCRIM SEAM FIX — stacked top/bottom, the two per-half gradients collided at
     the 50% seam (a dark 0.65 edge meeting a light 0.45 edge → visible split).
     Split one continuous top-to-bottom darkening across the two halves so the
     overlay reads as a single unbroken sheet: they meet at 0.50 at the seam. */
  .lander-half.commercial .lander-scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.42) 0%, rgba(0, 0, 0, 0.50) 100%);
  }
  .lander-half.film .lander-scrim {
    background: linear-gradient(180deg, rgba(0, 0, 0, 0.50) 0%, rgba(0, 0, 0, 0.60) 100%);
  }

  /* LOGO ON THE CUT LINE — anchored to the seam, not floated in a centred stack.
     The sweep settles at 50% (a horizontal line on mobile). The wordmark is
     pinned with its top at 50% then pulled UP by a purely em-based offset, so the
     BOTTOM OF THE F's MIDDLE ARM lands exactly on that line at EVERY width — the
     offset scales with the logo, so it holds identically on a 320px phone and a
     768px iPad. No dependence on the tagline size or the logo's clamp.
        0.521em = 0.78em (baseline below the line-box top at line-height:1)
                  − 0.259em (measured rise of the middle-arm underside above the
                  baseline in Telegraf 700).
     Tunable via --intro-logo-anchor (one number moves it on ALL devices). */
  .lander-intro { display: block; }
  .lander-intro .intro-logo {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, var(--intro-logo-anchor, -0.521em));
    font-size: clamp(5.8rem, 33vw, 11.5rem);
    white-space: nowrap;
    text-align: center;
  }
  .lander-intro .intro-tagline {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translateX(-50%);
    /* sits in the bottom half, clear of the wordmark's baseline (which ends
       0.259em below the seam) plus a gap — tracks the logo size via the same
       clamp so the spacing holds across devices. */
    margin-top: calc(clamp(1.5rem, 8.55vw, 2.98rem) + 1rem);
    font-size: 0.78rem;
    letter-spacing: 0.04em;
    white-space: nowrap;
  }
}

/* Hero meta on small screens: 3 items would crowd a narrow row — stack to a
   single centred column so Cape Town / Scroll / decade each get their line. */
@media (max-width: 600px) {
  .hero-meta {
    grid-template-columns: 1fr;
    margin-top: 2rem;
    font-size: 0.6rem;
    letter-spacing: 0.12em;
    text-align: left;
  }
  /* Cape Town + decade move up by the headline; Scroll sits on its own */
  .hero-meta > span:first-child,
  .hero-meta > span:last-child { display: none; }
  .scroll-indicator { justify-self: center; }   /* Scroll centred */
  /* show the marker (keeps its base ·—· dash + sub-heading styling) */
  .hero-marker {
    display: flex;
    margin-bottom: 1.4rem;
  }
  .hero-loc-mobile {
    display: block;
    font-family: 'Bricolage Grotesque', sans-serif;
    font-size: 0.62rem;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    opacity: 0.75;
    margin-top: 1.3rem;
    animation: fadeUp 1.2s ease 0.7s both;   /* eases in like the rest of the hero */
  }
  /* Lander page: drop the corner meta entirely on mobile */
  .lander-meta { display: none; }
}

/* ============================================================
   LANDER — cinematic intro choreography (NewLander-V1)
   Phases driven by body[data-phase]: loading -> intro -> live
   ============================================================ */

/* Loader — solid black until the videos are ready to run */
.loader {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: #000;
  transition: opacity 0.9s ease;
  display: flex;
  align-items: center;
  justify-content: center;
}
.loader-bar {
  width: min(180px, 42vw);
  height: 2px;
  background: rgba(229, 239, 231, 0.16);
  overflow: hidden;
}
.loader-bar-fill {
  display: block;
  height: 100%;
  width: 0%;
  background: var(--ink);
  transition: width 0.45s cubic-bezier(0.4, 0, 0.2, 1);
}
body[data-phase="loading"] .loader { opacity: 1; }
body:not([data-phase="loading"]) .loader { opacity: 0; pointer-events: none; }

/* Intro overlay — big centred logo + tagline, adaptive to footage like the nav */
.lander-intro {
  position: fixed;
  inset: 0;
  z-index: 60;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;                       /* tagline sits closer to the logo */
  pointer-events: none;
  color: var(--ink);                  /* standard mint-cream, non-reactive */
}

/* Logo — fades in/out (no per-letter animation) */
.intro-logo {
  font-family: 'Telegraf', sans-serif;
  font-weight: 700;
  font-size: clamp(5.6rem, 20vw, 17.5rem);
  letter-spacing: -0.02em;
  line-height: 1;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* Tagline — Telegraf Regular, fades in just after the logo */
.intro-tagline {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: clamp(0.85rem, 1.7vw, 1.1rem);
  letter-spacing: 0.04em;
  opacity: 0;
  transition: opacity 1.1s ease;
}

/* ---- PHASE: loading ---- everything but loader hidden (logo letters sit masked) ---- */
body[data-phase="loading"] nav,
body[data-phase="loading"] .nav-backdrop,
body[data-phase="loading"] .lander-meta { opacity: 0; transform: translateY(30px); }

/* ---- PHASE: intro ---- videos vivid; logo FADES in, tagline follows, meta in ---- */
body[data-phase="intro"] .intro-logo { opacity: 1; }
body[data-phase="intro"] .intro-tagline { opacity: 1; transition: opacity 1.1s ease 0.4s; }
body[data-phase="intro"] .lander-meta { opacity: 0.9; transform: translateY(0); transition: opacity 1.1s ease 0.4s, transform 1.1s ease 0.4s; }
body[data-phase="intro"] nav,
body[data-phase="intro"] .nav-backdrop { opacity: 0; pointer-events: none; }

/* ---- PHASE: exit ---- logo + tagline FADE out (slower); bifurcation still hidden ---- */
body[data-phase="exit"] .intro-logo,
body[data-phase="live"] .intro-logo { opacity: 0; transition: opacity 0.9s ease; }
body[data-phase="exit"] .intro-tagline,
body[data-phase="live"] .intro-tagline { opacity: 0; transition: opacity 0.8s ease; }
body[data-phase="exit"] nav,
body[data-phase="exit"] .nav-backdrop { opacity: 0; pointer-events: none; }
body[data-phase="exit"] .lander-meta { opacity: 0.9; transform: translateY(0); }
body[data-phase="exit"] .lander-half { pointer-events: none; }

/* ---- PHASE: live ---- logo gone; bifurcation + scrim + nav animate in ---- */
body[data-phase="live"] .lander-content { opacity: 1; }
body[data-phase="live"] .lander-scrim { opacity: 1; }
body[data-phase="live"] .lander-meta { opacity: 0.9; transform: translateY(0); }
body[data-phase="live"] nav { opacity: 1; transition: opacity 1.1s ease; }
body[data-phase="live"] .nav-backdrop { opacity: 1; transition: opacity 1.1s ease; }

/* Panels only become clickable once the selection UI is live */
body[data-phase="loading"] .lander-half,
body[data-phase="intro"] .lander-half,
body[data-phase="exit"] .lander-half { pointer-events: none; }
body[data-phase="live"] .lander-half { pointer-events: auto; }

/* Nav fades as a unit during the intro choreography */
nav, .nav-backdrop { transition: opacity 1.1s ease; }

/* Respect reduced motion — show logo/tagline statically */
@media (prefers-reduced-motion: reduce) {
  .intro-logo, .intro-tagline { transition: none !important; }
  body[data-phase="intro"] .intro-logo,
  body[data-phase="intro"] .intro-tagline { opacity: 1; }
  body[data-phase="exit"] .intro-logo,
  body[data-phase="live"] .intro-logo,
  body[data-phase="exit"] .intro-tagline,
  body[data-phase="live"] .intro-tagline { opacity: 0; }
  body[data-phase="intro"] .lander-content,
  body[data-phase="intro"] .lander-scrim { opacity: 1; }
}


/* Hero subtitle — service line under the headline (content pages) */
.hero-sub {
  font-family: 'Telegraf', sans-serif;
  font-weight: 400;
  font-size: clamp(1rem, 2.2vw, 1.5rem);
  letter-spacing: -0.01em;
  margin-top: 0.6rem;
  opacity: 0.78;
}


/* ===== Lander → page exit transition: line draws fully, bifurcation content fades ===== */
body[data-exit] .lander-content { opacity: 0 !important; transition: opacity 0.4s ease; }
body[data-exit] .lander-half { cursor: default; }