/* ============================================================
   KONRAD BORZY — STYLESHEET  v2
   konradborzy.com

   TYPOGRAPHY SYSTEM — Geist (self-hosted, SIL OFL — variable font)
   ─────────────────────────────────────────
   900 Black      → stat numbers, max-impact display
   800 Heavy      → hero name, about name, contact heading
   700 Bold       → section titles, project titles, case studies
   600 SemiBold   → nav logo, project card titles
   500 Medium     → CTAs, buttons, active labels
   400 Book       → body copy, bio, contact values
   300 Light      → nav links, eyebrows, captions, small labels
   200 ExtraLight → decorative / large-scale display only

   Italic variants used for:
   - client list (Book Italic)
   - case-study category/year eyebrows (Light Italic)
   ============================================================ */

/* ── @font-face declarations ─────────────────────────────── */

@font-face {
  font-family: 'Geist';
  src: url('../fonts/Geist-Variable.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}
/* ── Variables ─────────────────────────────────────────────── */
:root {
  --black:      #080808;
  --white:      #f5f4f0;
  --grey-dark:  #141414;
  --grey-mid:   #2e2e2e;
  --grey-light: #7a7a7a;

  --font: 'Geist', Helvetica, Arial, sans-serif;

  --nav-height: 72px;
  --transition: 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition-slow: 0.75s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* ── Reset ─────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; -webkit-tap-highlight-color: transparent; }
body {
  background: var(--black);
  color: var(--white);
  font-family: var(--font);
  font-weight: 300;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
  cursor: none;
}
img { display: block; width: 100%; height: 100%; object-fit: cover; }
a { color: inherit; text-decoration: none; }

/* ── Custom cursor ─────────────────────────────────────────── */
.cursor {
  position: fixed;
  top: 0; left: 0;
  width: 9px; height: 9px;
  background: var(--white);
  border-radius: 50%;
  pointer-events: none;
  z-index: 9999;
  transform: translate(-50%, -50%);
  transition: width 0.25s ease, height 0.25s ease;
  opacity: 0.7;
}
.cursor.expanded { width: 36px; height: 36px; }

/* ── Navigation ────────────────────────────────────────────── */
nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 1000;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 48px;
  background: var(--black);
  /* mix-blend-mode removed — causes GPU compositing hit-test failures */
}

/* Nav logo — 600 SemiBold, tight tracking */
.nav__logo {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.78rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  z-index: 1001;
}

.nav__links { display: flex; gap: 40px; list-style: none; position: relative; z-index: 1001; }

/* Nav links — 300 Light */
.nav__links a {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.68rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--white);
  position: relative;
  padding-bottom: 2px;
  transition: opacity var(--transition);
}
.nav__links a::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0;
  width: 0; height: 1px;
  background: var(--white);
  transition: width var(--transition);
}
.nav__links a:hover::after,
.nav__links a.active::after { width: 100%; }

/* Homepage: nav sits over hero image — no background needed, text-shadow keeps it readable */
nav.nav--overlay {
  background: transparent;
}

nav.nav--overlay .nav__logo,
nav.nav--overlay .nav__links a {
  text-shadow: 0 1px 8px rgba(0,0,0,0.5);
}

/* Hamburger */
.nav__hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: none;
  background: none;
  border: none;
  padding: 4px;
  position: relative;
  z-index: 1001;
}
.nav__hamburger span {
  display: block; width: 24px; height: 1px;
  background: var(--white);
  transition: var(--transition);
}
.nav__hamburger.open span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.nav__hamburger.open span:nth-child(2) { opacity: 0; }
.nav__hamburger.open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* Mobile menu */
.mobile-menu {
  display: none;
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 99;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.mobile-menu.visible { opacity: 1; pointer-events: auto; }
/* Mobile menu links — 700 Bold, large */
.mobile-menu a {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2rem, 8vw, 3.5rem);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--white);
  transition: opacity 0.3s;
}
.mobile-menu a:hover { opacity: 0.35; }

/* ── Fade-up animations ────────────────────────────────────── */
.fade-up {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity var(--transition-slow), transform var(--transition-slow);
}
.fade-up.visible { opacity: 1; transform: translateY(0); }
.fade-up:nth-child(2) { transition-delay: 0.08s; }
.fade-up:nth-child(3) { transition-delay: 0.16s; }
.fade-up:nth-child(4) { transition-delay: 0.24s; }

/* ── Page transition overlay ───────────────────────────────── */
.page-transition {
  position: fixed; inset: 0;
  background: var(--black);
  z-index: 200;
  transform: translateY(100%);
  pointer-events: none;
}

/* ─────────────────────────────────────────────────────────────
   HOMEPAGE
───────────────────────────────────────────────────────────── */

/* ── Hero ──────────────────────────────────────────────────── */
.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 600px;
  overflow: hidden;
}

.hero__slide {
  position: absolute; inset: 0;
  background-size: cover;
  background-position: center 30%;
  filter: brightness(0.92);
  opacity: 0;
  transform: scale(1.04);
  transition: opacity 1.2s ease, transform 8s ease;
}
.hero__slide.active {
  opacity: 1;
  transform: scale(1);
}
.hero__slide--1 { background-image: url('../images/hero/hero-main.jpg?v=2'); }
.hero__slide--2 { background-image: url('../images/hero/hero-2.jpg?v=2'); }
.hero__slide--3 { background-image: url('../images/hero/hero-3.jpg?v=2'); }

.hero__overlay {
  position: absolute; inset: 0;
  /* Gradient only at the bottom — clear image up top, dark fade behind the text */
  background: linear-gradient(
    to bottom,
    rgba(8,8,8,0.0)  0%,
    rgba(8,8,8,0.0)  45%,
    rgba(8,8,8,0.55) 72%,
    rgba(8,8,8,0.82) 100%
  );
}

.hero__content {
  position: absolute;
  bottom: 10%;
  left: 48px; right: 48px;
  z-index: 2;
}

/* ── HERO SUB — 300 Light, spaced label ─────────────────────── */
.hero__sub {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.7rem;
  letter-spacing: 0.3em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.65);
  margin-bottom: 14px;
  opacity: 0;
  transition: opacity 1s ease 0.6s;
}
.hero__sub.visible { opacity: 1; }

/* ── HERO NAME — 800 Heavy, big and bold as requested ──────── */
.hero__name {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(3.4rem, 9vw, 9.5rem);
  letter-spacing: -0.02em;
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 22px;
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.9s ease 0.25s, transform 0.9s ease 0.25s;
}
.hero__name.visible { opacity: 1; transform: translateY(0); }

/* ── HERO POSITION — 300 Light ──────────────────────────────── */
.hero__position {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.78rem;
  letter-spacing: 0.12em;
  color: rgba(245, 244, 240, 0.5);
  opacity: 0;
  transition: opacity 1s ease 0.85s;
}
.hero__position.visible { opacity: 1; }

/* Scroll indicator */
.hero__scroll {
  position: absolute;
  bottom: 40px; right: 48px;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  opacity: 0;
  transition: opacity 1s ease 1.2s;
}
.hero__scroll.visible { opacity: 1; }
.hero__scroll span {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.4);
  writing-mode: vertical-rl;
}
.hero__scroll-line {
  width: 1px; height: 48px;
  background: rgba(245, 244, 240, 0.25);
  position: relative; overflow: hidden;
}
.hero__scroll-line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--white);
  animation: scrollLine 1.8s ease infinite 1.2s;
}
@keyframes scrollLine {
  0%   { top: -100%; }
  100% { top: 100%; }
}

/* ── Featured strip ────────────────────────────────────────── */
.featured-strip {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px;
  background: var(--grey-mid);
}
.featured-strip__item {
  position: relative;
  overflow: hidden;
  background: var(--grey-dark);
}
.featured-strip__item img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 0.8s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.featured-strip__item:hover img { transform: scale(1.04); }

/* Strip label — 300 Light */
.featured-strip__item__label {
  position: absolute;
  bottom: 20px; left: 22px;
  z-index: 2;
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.65);
}

/* ── Animos band (autoplay reel below intro) ───────────────── */
.animos {
  background: var(--black);
}
/* The wheel is shown via object-fit:cover on a width-constrained frame, so the
   video is never magnified horizontally — the full ring stays visible and
   sharp. The frame is a touch wider than 16:9 so cover trims only the empty
   top/bottom band (object-position biased downward to drop the empty top),
   never the ring's sides. */
.animos__frame {
  display: block;
  position: relative;      /* positioning context for the overlay link */
  width: min(1100px, 92vw);
  margin: 0 auto;
}
/* The wheel is a link to the portfolio. The anchor overlays the whole frame
   above the video, and the video stays pointer-events:none, so the tap always
   lands on the link — iOS's native play button (shown when autoplay is blocked,
   e.g. Low Power Mode) can never sit above it and swallow the tap. */
.animos__link {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
}
.animos__video {
  display: block;
  width: 100%;
  object-fit: cover;
  pointer-events: none;
  /* The video's black is #080808 in the file (matches the page bg) but the
     browser's video pipeline shifts it slightly on screen, making the frame
     edges visible. 'lighten' merges any pixel at/below the #080808 background
     into it seamlessly, while the brighter wheel photos render normally. */
  mix-blend-mode: lighten;
}
/* Desktop: 16×9 cut. object-position 86% centres the ring vertically in the
   frame, so the cropped black margin above the wheel matches the margin below. */
.animos__frame--wide .animos__video { aspect-ratio: 2 / 1; object-position: center 86%; }
/* Mobile: 4×3 cut. The 4×3 ring sits lower in frame than the 16×9, so it needs
   a slightly taller crop (5/3) and its own object-position to centre the ring
   and trim the black above it. */
.animos__frame--tall { display: none; }
.animos__frame--tall .animos__video { aspect-ratio: 5 / 3; object-position: center 79%; }

/* ── Intro block ───────────────────────────────────────────── */
.intro-block {
  /* tight bottom padding so the animos band crops cleanly right below the
     View Portfolio link */
  padding: 110px 48px 16px;
  max-width: 680px;
}

/* ── Clients logo grid ─────────────────────────────────────── */
.clients {
  padding: 72px 48px 0;
  border-top: 1px solid var(--grey-mid);
}
.clients__eyebrow {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 40px;
}
.clients__grid {
  display: grid;
  grid-template-columns: repeat(13, 1fr);
  border-top: 1px solid var(--grey-mid);
  border-left: 1px solid var(--grey-mid);
  position: relative;
  overflow: hidden;
}
/* One-time light glint sweeping across the logos when the grid scrolls into
   view, hinting the logos are interactive (no hover needed). */
.clients__grid::after {
  content: '';
  position: absolute;
  top: 0; left: 0;
  width: 35%; height: 100%;
  background: linear-gradient(100deg, transparent 0%, rgba(245,244,240,0.10) 50%, transparent 100%);
  transform: translateX(-160%);
  pointer-events: none;
  z-index: 3;
}
.clients.visible .clients__grid::after {
  animation: clientsSweep 2.04s ease 0.5s 1 both;
}
@keyframes clientsSweep {
  from { transform: translateX(-160%); }
  to   { transform: translateX(400%); }
}
.client-logo {
  border-bottom: 1px solid var(--grey-mid);
  border-right: 1px solid var(--grey-mid);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 36px 28px;
  min-height: 90px;
}
.client-logo svg,
.client-logo img {
  width: 100%;
  max-width: 130px;
  height: auto;
  opacity: 0.7;
  transition: opacity 0.3s ease;
}
.client-logo:hover svg,
.client-logo:hover img { opacity: 1; }
.client-logo--lg img { max-width: 180px; }
/* The FIFA World Cup 26 emblem is a taller portrait mark than the crests around
   it, so trim its width (~92%, aspect-ratio derived) so its rendered HEIGHT
   never exceeds the England badge. Scales with the cell at every breakpoint;
   the mobile max-width cap gets a matching trim below. */
.client-logo img[alt="FIFA World Cup 26"] { width: 92%; }

/* Eyebrow — 300 Light */
.intro-block__label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 28px;
}

/* Intro text — 400 Book, generous size */
.intro-block__text {
  font-family: var(--font);
  font-weight: 400;
  font-size: clamp(1.15rem, 2.2vw, 1.65rem);
  line-height: 1.6;
  letter-spacing: -0.01em;
  color: rgba(245,244,240,0.85);
}

/* CTA link */
.cta-link {
  display: inline-flex;
  align-items: center;
  gap: 16px;
  margin-top: 44px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--white);
  transition: gap var(--transition);
}
.cta-link:hover { gap: 28px; }
.cta-link__line {
  width: 40px; height: 1px;
  background: var(--white);
  transition: width var(--transition);
}
.cta-link:hover .cta-link__line { width: 60px; }

/* ─────────────────────────────────────────────────────────────
   PORTFOLIO PAGE
───────────────────────────────────────────────────────────── */

/* ── Project index grid ─────────────────────────────────────── */
.project-index-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* This is a <nav>, and the base `nav` rule sets align-items:center. Left
     unset, a short card centres in a taller row (e.g. when a neighbour's title
     wraps to two lines) and the neon divider gap balloons on that side. Stretch
     forces every card to fill its row so all dividers stay a uniform 1px. */
  align-items: stretch;
  /* All rows share the tallest row's height, so when one title wraps to two
     lines (e.g. "Tournament Coverage" at 2-col widths) every card stays the
     same size and the grid reads as an even, balanced block. */
  grid-auto-rows: 1fr;
  /* 1px gaps between cards + 1px padding = uniform thin frame on all four
     sides (top, bottom, left, right) plus the inner dividers. */
  gap: 1px;
  padding: 1px;
  /* Flowing white "neon" sweep through the divider lines (RGB-flow style).
     Start & end colours match (grey) and we scroll exactly one tile (200%)
     so the loop is seamless — band exits one edge, re-enters the other. */
  background: linear-gradient(
    90deg,
    var(--grey-mid) 0%,
    var(--grey-mid) 42%,
    #ffffff 50%,
    var(--grey-mid) 58%,
    var(--grey-mid) 100%
  );
  background-size: 200% 100%;
  animation: neon-flow 4.5s linear infinite;
  /* The visible sweep doesn't begin until ~44% of the cycle (~2s). A negative
     delay pre-advances the timeline so the band enters ~0.5s after page load
     instead of making the visitor wait for the first off-screen wrap. */
  animation-delay: -1.5s;
  /* This is a <nav> element — explicitly reset height so it doesn't
     inherit the fixed site-nav's height: var(--nav-height) rule. */
  height: auto;
  /* margin-top not padding-top: element box starts below the fixed nav,
     so it cannot overlap with nav or bleed into case studies below */
  margin-top: var(--nav-height);
  position: relative;
  z-index: 1;
}
@keyframes neon-flow {
  /* 0 → -100% is the off-screen return (band exits right, travels back to
     re-enter left) — compressed to ~44% so the wrap is a touch quicker. */
  0%   { background-position: 0% 0; }
  44%  { background-position: -100% 0; }
  /* -100% → -200% is the visible sweep across the page — kept at ~2.5s. */
  100% { background-position: -200% 0; }
}
.project-card {
  background: var(--black);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 156px;
  border: 1px solid transparent;
  transition: border-color 0.3s, background 0.3s;
}
.project-card:hover {
  border-color: rgba(245,244,240,0.18);
  background: var(--grey-dark);
}

/* Card number — 300 Light italic */
.project-card__num {
  font-family: var(--font);
  font-weight: 300;
  font-style: italic;
  font-size: 0.72rem;
  color: var(--grey-light);
  margin-bottom: 10px;
}

/* Card title — 600 SemiBold */
.project-card__title {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.35rem;
  letter-spacing: -0.01em;
  line-height: 1.1;
  display: block;
  margin-bottom: 10px;
}

/* Card category — 300 Light */
.project-card__cat {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.57rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-light);
  font-style: normal;
}

/* ── Section header (static pages) ─────────────────────────── */
.section-header {
  padding: 80px 48px 40px;
  display: flex;
  align-items: baseline;
  gap: 20px;
}
.section-header__number {
  font-family: var(--font);
  font-weight: 300;
  font-style: italic;
  font-size: 0.82rem;
  color: var(--grey-light);
}
/* Section title — 700 Bold */
.section-header__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.8rem, 3.5vw, 3rem);
  letter-spacing: -0.02em;
  text-transform: uppercase;
}
.section-header__line {
  flex: 1; height: 1px;
  background: var(--grey-mid);
  margin-left: 20px;
  align-self: center;
}

/* ── Case Study sections ─────────────────────────────────────── */
.case-study {
  padding: 80px 48px 0;
  border-top: 1px solid var(--grey-mid);
  scroll-margin-top: var(--nav-height);
}
/* First case-study sits directly below the index grid — give it breathing room */
.case-study:first-child {
  border-top: none;
  padding-top: 96px;
}
.case-study__intro {
  display: grid;
  grid-template-columns: 1fr 1.5fr 0.6fr;
  gap: 48px;
  margin-bottom: 40px;
  align-items: start;
}

/* Eyebrow — 300 Light italic */
.case-study__eyebrow {
  font-family: var(--font);
  font-weight: 300;
  font-style: italic;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  color: var(--grey-light);
  margin-bottom: 14px;
  text-transform: none;
  line-height: 1;
}

/* Case study title — 700 Bold */
.case-study__title {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(2rem, 4vw, 3.8rem);
  letter-spacing: -0.03em;
  line-height: 0.96;
  text-transform: uppercase;
}

/* Subtitle — 400 Book */
.case-study__sub {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.88rem;
  line-height: 1.7;
  color: rgba(245,244,240,0.6);
  margin: 0;
}
/* When the subtitle column holds multiple paragraphs (e.g. DAZN), the inner
   <p> tags inherit the subtitle styling and just need spacing between them. */
.case-study__sub > p { margin: 0 0 1em; }
.case-study__sub > p:last-child { margin-bottom: 0; }

/* Credits — 300 Light */
.case-study__credits {
  list-style: none;
  color: var(--grey-light);
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  line-height: 2.3;
  /* Pull the first tag's text flush with the top line of the paragraph beside it:
     -2px cancels the old 6px offset plus the ~2px extra half-leading from this
     list's taller line-height. (Brand pages override margin-top below.) */
  margin-top: -2px;
}

/* Logo-linked case-study pages (England, Norway, Man Utd, adidas …):
   the eyebrow sits above the bold title, so by default the subtitle and the
   right-hand credits align to the eyebrow. Drop them down by the eyebrow's
   height so their first line sits level with the TOP OF THE BOLD TITLE.
   Scoped via --logo so the portfolio grid is unaffected. */
.case-study--logo .case-study__sub,
.case-study--logo .case-study__aside {
  margin-top: calc(0.6rem + 14px);   /* eyebrow line-height(1) + margin-bottom */
}
/* Shrink the credits/logo box to the width of the credits text so the
   right-aligned logo below ends exactly where the words end (not at the
   wider column edge). */
.case-study--logo .case-study__aside {
  width: fit-content;
}
.case-study--logo .case-study__aside .case-study__credits {
  margin-top: 0;
}
/* Brand logo, sat below the credits in the top-right column. Right-aligned so
   its right edge lines up with the right edge of the credits column above. */
.case-study__logo {
  display: block;
  width: 72px;
  height: auto;
  margin-top: 28px;
  margin-left: auto;
  opacity: 0.9;
}
@media (max-width: 768px) {
  /* Mobile keeps the logo but not the desktop alignment tweaks: intro stacks
     to a single column, so drop the top offsets and the right-alignment. */
  .case-study--logo .case-study__sub,
  .case-study--logo .case-study__aside { margin-top: 0; width: auto; }
  .case-study__logo { width: 56px; margin-top: 20px; margin-left: 0; }
  /* The NFL shield sits inside a square viewBox with ~17% transparent padding,
     so it renders indented from the text. Shift it left by that padding so its
     visible edge lines up with the title/bio. Scoped to the NFL page. */
  #nfl .case-study__logo { transform: translateX(-17%); }
}
/* Brand pages desktop: right-align the credits so both lines sit flush with the
   logo's right edge. NFL additionally needs its square shield nudged right by
   ~17% (its viewBox has that much transparent padding); the nike/adidas/dazn
   wordmarks fill their viewBox, so no shift is needed. */
@media (min-width: 769px) {
  #nfl .case-study__aside,
  #nike .case-study__aside,
  #adidas .case-study__aside,
  #dazn .case-study__aside,
  #fifa .case-study__aside,
  #premier-league .case-study__aside,
  #champions-league .case-study__aside { text-align: right; }
  #nfl .case-study__logo { transform: translateX(17.4%); }
}

/* ── Case study hero ────────────────────────────────────────── */
.case-study__hero {
  display: block;
  width: calc(100% + 96px);
  margin-left: -48px;
  margin-bottom: 8px;
  cursor: none;
  overflow: hidden;
  background: none;
  border: none;
  padding: 0;
}
.case-study__hero img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.85s ease;
  filter: brightness(0.88);
}
.case-study__hero:hover img { transform: scale(1.02); filter: brightness(0.96); }

/* ── Image grids ─────────────────────────────────────────────── */
.image-grid {
  display: grid;
  padding: 0 48px 80px;
  gap: 8px;
}
.image-grid--project {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding-bottom: 80px;
  align-items: start;
}
/* ── Grid item ───────────────────────────────────────────────── */
.grid-item {
  position: relative;
  overflow: hidden;
  background: var(--grey-dark);
  border: none;
  padding: 0;
  cursor: none;
}
.grid-item img {
  width: 100%;
  height: auto;
  display: block;
  transform: scale(1);
  transition: transform 0.85s cubic-bezier(0.25, 0.46, 0.45, 0.94), filter 0.85s ease;
  filter: brightness(0.88);
}
.grid-item:hover img { transform: scale(1.04); filter: brightness(0.96); }

.grid-item__placeholder {
  position: absolute; inset: 0;
  background: var(--grey-dark);
  border: 1px solid var(--grey-mid);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
}
.grid-item__placeholder span {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--grey-light);
  text-align: center;
  padding: 0 16px;
}
.grid-item__placeholder svg { opacity: 0.18; }

/* Caption — 300 Light */
.grid-item__caption {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 36px 18px 16px;
  background: linear-gradient(transparent, rgba(8,8,8,0.68));
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: rgba(245,244,240,0.55);
  transform: translateY(6px);
  opacity: 0;
  transition: opacity 0.35s ease, transform 0.35s ease;
}
.grid-item:hover .grid-item__caption { opacity: 1; transform: translateY(0); }

/* ── Portfolio hero banner (static fallback) ────────────────── */
.portfolio-hero {
  height: 38vw; min-height: 280px; max-height: 520px;
  position: relative; overflow: hidden;
  background: var(--grey-dark);
}
/* REPLACE in css → .portfolio-hero__img → background-image */
.portfolio-hero__img {
  position: absolute; inset: 0;
  background-image: url('../images/projects/matchday/hero.jpg');
  background-size: cover;
  background-position: center 20%;
  filter: brightness(0.45);
}

/* Portfolio page title — 800 Heavy */
.portfolio-hero__title {
  position: absolute;
  bottom: 48px; left: 48px;
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(3rem, 7vw, 6rem);
  letter-spacing: -0.03em;
  text-transform: uppercase;
}

/* ── Lightbox ─────────────────────────────────────────────────── */
.lightbox {
  position: fixed; inset: 0;
  /* Above the fixed nav (z-1000/1001) so an open image fully covers the header —
     otherwise the hamburger floated over the lightbox, intercepted taps (opening
     the mobile menu behind it), and flashed a tap-highlight artefact. */
  z-index: 1200;
  background: rgba(5,5,5,0.97);
  display: none;
  align-items: center;
  justify-content: center;
  opacity: 0;
  transition: opacity 0.3s ease;
}
.lightbox.is-open { display: flex; opacity: 1; }
.lightbox__img {
  max-width: 88vw; max-height: 86vh;
  width: auto; height: auto;
  object-fit: contain; display: block;
}
/* Lightbox caption — 300 Light */
.lightbox__caption {
  position: absolute;
  bottom: 28px; left: 40px;
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--grey-light);
}
.lightbox__close {
  position: absolute; top: 28px; right: 36px;
  background: none; border: none;
  color: var(--white);
  font-size: 1.5rem; line-height: 1;
  cursor: none; opacity: 0.55;
  transition: opacity 0.2s;
  padding: 8px;
  font-family: var(--font);
  font-weight: 300;
}
.lightbox__close:hover { opacity: 1; }
.lightbox__nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  background: none; border: none;
  color: var(--white); font-size: 2rem;
  cursor: none; opacity: 0.3;
  transition: opacity 0.2s; padding: 16px;
}
.lightbox__nav:hover { opacity: 1; }
.lightbox__nav--prev { left: 20px; }
.lightbox__nav--next { right: 20px; }

/* ─────────────────────────────────────────────────────────────
   MOTION PAGE
───────────────────────────────────────────────────────────── */
.motion-intro {
  padding: 96px 48px 24px;
}
/* Intro variant carrying a brand logo (Puma, 433). Title block left, logo
   top-right baseline-aligned with the title; logo drops below on mobile. */
.motion-intro--logo {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 32px;
}
.motion-intro__logo {
  flex-shrink: 0;
  height: 40px;
  width: auto;
  opacity: 0.9;
  margin-bottom: 6px;
}
@media (max-width: 768px) {
  .motion-intro--logo { flex-direction: column; align-items: flex-start; gap: 14px; }
  .motion-intro__logo { height: 30px; margin-bottom: 0; }
}
.motion-hero {
  margin: 0 0 64px;
  padding: 0 48px;
}
.motion-hero__video {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--black);
  object-fit: cover;
}
.motion-hero__caption {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-top: 12px;
}
/* Description block below the hero — editorial two-column layout: a short
   label in the left column, the paragraphs in the right, echoing the
   case-study intro grid. Collapses to a single column on mobile (label
   hidden) so the mobile reading experience is unchanged. */
.motion-desc {
  display: grid;
  grid-template-columns: 1fr 2.4fr;
  gap: 48px;
  align-items: start;
  padding: 0 48px;
  max-width: 1100px;
  /* auto left margin pushes the block to the right so its right edge sits
     flush under the bottom-right of the hero video above. */
  margin: 0 0 72px auto;
}
.motion-desc__label {
  font-family: var(--font);
  font-weight: 300;
  font-style: italic;
  font-size: 0.62rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin: 6px 0 0;
}
.motion-desc__body {
  position: relative;
}
.motion-desc__body p { margin: 0 0 1.2em; text-align: justify; }
.motion-desc__body p:last-child { margin-bottom: 0; }

/* Thin vertical divider just left of the paragraph (replaces a horizontal
   rule). A white band flows downward through a grey line — same "neon" trick
   as the portfolio menu — to nudge the eye down toward the video grid.
   ::before is the soft glow (blurred), ::after the crisp 1px line on top. */
.motion-desc__body::before,
.motion-desc__body::after {
  content: "";
  position: absolute;
  left: -24px;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    var(--grey-mid) 0%,
    var(--grey-mid) 38%,
    #ffffff 50%,
    var(--grey-mid) 62%,
    var(--grey-mid) 100%
  );
  background-size: 100% 200%;
  animation: neon-flow-down 4.5s linear infinite;
}
.motion-desc__body::before {        /* glow */
  width: 3px;
  margin-left: -1px;
  filter: blur(3px);
  opacity: 0.7;
}
.motion-desc__body::after {         /* crisp line */
  width: 1px;
}
@keyframes neon-flow-down {
  /* negative Y shift scrolls the band downward; flip the sign to reverse. */
  0%   { background-position: 0 0; }
  100% { background-position: 0 -200%; }
}

@media (max-width: 768px) {
  .motion-desc { grid-template-columns: 1fr; gap: 0; }
  .motion-desc__label { display: none; }
  /* Desktop-only divider — hide on mobile. */
  .motion-desc__body::before,
  .motion-desc__body::after { display: none; }
}

/* ── Video feature (e.g. 433) ────────────────────────────────
   Portrait video on the left, text on the right, with the same
   downward neon line separating the two columns. */
.vfeature {
  display: grid;
  grid-template-columns: 0.75fr 1fr;
  gap: 56px;
  align-items: start;
  padding: 0 48px;
  max-width: 1160px;
  margin: 8px auto 88px;
}
.vfeature__media { margin: 0; }
.vfeature__video {
  display: block;
  width: 100%;
  aspect-ratio: 9 / 16;
  background: var(--black);
  object-fit: cover;
}
.vfeature__body { position: relative; }
.vfeature__body p { margin: 0 0 1.2em; text-align: justify; }
.vfeature__body p:last-child { margin-bottom: 0; }
/* Neon divider just left of the text (same trick as .motion-desc). */
.vfeature__body::before,
.vfeature__body::after {
  content: "";
  position: absolute;
  left: -28px;
  top: 0;
  bottom: 0;
  background: linear-gradient(
    180deg,
    var(--grey-mid) 0%,
    var(--grey-mid) 38%,
    #ffffff 50%,
    var(--grey-mid) 62%,
    var(--grey-mid) 100%
  );
  background-size: 100% 200%;
  animation: neon-flow-down 4.5s linear infinite;
}
.vfeature__body::before { width: 3px; margin-left: -1px; filter: blur(3px); opacity: 0.7; }
.vfeature__body::after  { width: 1px; }
@media (max-width: 768px) {
  .vfeature { grid-template-columns: 1fr; gap: 24px; }
  .vfeature__body::before,
  .vfeature__body::after { display: none; }
  .vfeature__video { width: auto; max-width: 100%; max-height: 80vh; margin: 0 auto; }
}

.motion-scroll {
  position: fixed;
  bottom: 32px; left: 50%;
  transform: translateX(-50%);
  z-index: 90;
  display: flex; flex-direction: column;
  align-items: center; gap: 8px;
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.motion-scroll.is-hidden { opacity: 0; }
.motion-scroll span {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.55rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: rgba(245, 244, 240, 0.5);
}
.motion-scroll__line {
  width: 1px; height: 40px;
  background: rgba(245, 244, 240, 0.2);
  position: relative; overflow: hidden;
}
.motion-scroll__line::after {
  content: '';
  position: absolute;
  top: -100%; left: 0;
  width: 100%; height: 100%;
  background: var(--white);
  animation: scrollLine 1.8s ease infinite;
}
.motion-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  padding: 0 48px 80px;
}
.motion-tile {
  position: relative;
  aspect-ratio: 9 / 16;
  overflow: hidden;
  background: var(--grey-dark);
  border: none;
  padding: 0;
  cursor: none;
}
.motion-tile img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}
.motion-tile:hover img { transform: scale(1.04); }
.motion-tile__play {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.motion-tile__play svg {
  width: 40px; height: 40px;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,0.5));
}
.motion-tile__caption {
  position: absolute;
  left: 12px; right: 12px; bottom: 12px;
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--white);
  text-align: left;
  text-shadow: 0 1px 6px rgba(0,0,0,0.6);
}

/* ── Motion player (TikTok-style vertical feed) ──────────────── */
/* Desktop: centered modal over a dark overlay, like the photo lightbox */
.motion-player {
  display: none;
  position: fixed; inset: 0;
  z-index: 1100;
  background: rgba(5,5,5,0.97);
}
.motion-player.is-open {
  display: flex;
  align-items: center;
  justify-content: center;
}
.motion-player__close {
  position: absolute;
  top: 20px; right: 24px;
  z-index: 10;
  background: none; border: none;
  color: var(--white);
  font-size: 1.8rem;
  cursor: none;
  opacity: 0.8;
  padding: 8px;
}
.motion-player__close:hover { opacity: 1; }
/* "Tap for sound" hint — shown low-centre on the active clip while muted */
.motion-player__sound {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  position: absolute;
  bottom: 140px; left: 50%;
  transform: translateX(-50%);
  z-index: 5;
  background: rgba(8,8,8,0.55);
  border: 1px solid rgba(245,244,240,0.3);
  border-radius: 100px;
  padding: 8px 16px 8px 12px;
  color: var(--white);
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  cursor: none;
  backdrop-filter: blur(6px);
  transition: opacity 0.6s ease;
}
.motion-player__sound svg { width: 18px; height: 18px; }
.motion-player__sound.is-faded { opacity: 0; pointer-events: none; }
.motion-player__feed {
  height: 86vh;
  aspect-ratio: 9 / 16;
  max-width: 92vw;
  overflow-y: scroll;
  scroll-snap-type: y mandatory;
  scrollbar-width: none;
}
.motion-player__feed::-webkit-scrollbar { display: none; }
.motion-player__item {
  position: relative;
  height: 100%;
  width: 100%;
  scroll-snap-align: start;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: none;
}
.motion-player__item video {
  height: 100%;
  width: 100%;
  object-fit: contain;
  background: var(--black);
}
.motion-player__item-caption {
  position: absolute;
  left: 24px; bottom: 40px; right: 24px;
  color: var(--white);
  font-family: var(--font);
}
.motion-player__item-caption p:first-child {
  font-weight: 600;
  font-size: 0.95rem;
  margin-bottom: 4px;
}
.motion-player__item-caption p:last-child {
  font-weight: 300;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  color: rgba(245,244,240,0.6);
  text-transform: uppercase;
}

/* ─────────────────────────────────────────────────────────────
   ABOUT PAGE
───────────────────────────────────────────────────────────── */
.about-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: 100dvh;
}
.about-image {
  position: sticky; top: 0;
  height: 100dvh;
  overflow: hidden;
  background: var(--black);
}
/* REPLACE in css → .about-image__bg → background-image */
.about-image__bg {
  width: 100%;
  height: auto;
  display: block;
  filter: brightness(0.82);
}
.about-content {
  padding: 140px 72px 100px 80px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

/* Eyebrow — 300 Light */
.about-content__eyebrow {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 36px;
}

/* About name — 800 Heavy, matching hero name treatment */
.about-content__name {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(2.8rem, 4.5vw, 4.8rem);
  letter-spacing: -0.03em;
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 48px;
}

/* Bio — 400 Book */
.about-content__bio {
  font-family: var(--font);
  font-weight: 400;
  font-size: 0.9rem;
  line-height: 1.75;
  color: rgba(245,244,240,0.75);
  margin-bottom: 48px;
}
.about-content__bio p + p { margin-top: 18px; }

/* Clients label — 300 Light */
.about-clients__label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 16px;
}

/* Client list — 400 Book italic */
.about-clients__list {
  font-family: var(--font);
  font-weight: 400;
  font-style: italic;
  font-size: 0.92rem;
  line-height: 1.95;
  color: rgba(245,244,240,0.55);
}

.about-stat {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid var(--grey-mid);
  display: flex;
  gap: 48px;
}

/* Trusted By — player reposts grid */
.trusted {
  margin-top: 52px;
  padding-top: 36px;
  border-top: 1px solid var(--grey-mid);
}
.trusted__heading {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(1.6rem, 2.4vw, 2.2rem);
  letter-spacing: -0.03em;
  line-height: 1;
  text-transform: uppercase;
}
.trusted__sub {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.78rem;
  line-height: 1.6;
  color: rgba(245,244,240,0.5);
  margin: 10px 0 24px;
}
.trusted__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}
.trusted__item {
  display: block;
  padding: 0;
  margin: 0;
  border: 1px solid var(--grey-mid);
  background: var(--black);
  cursor: none;
  overflow: hidden;
}
.trusted__item img {
  width: 100%;
  height: auto;
  display: block;
  transition: transform 0.5s ease, opacity 0.3s ease;
}
.trusted__item:hover img { transform: scale(1.04); opacity: 0.9; }

/* Stat number — 900 Black */
.about-stat__number {
  font-family: var(--font);
  font-weight: 900;
  font-size: 2.6rem;
  letter-spacing: -0.04em;
  line-height: 1;
  margin-bottom: 6px;
}

/* Stat label — 300 Light */
.about-stat__label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--grey-light);
  line-height: 1.6;
}

/* ─────────────────────────────────────────────────────────────
   CONTACT PAGE
───────────────────────────────────────────────────────────── */
.contact-wrap {
  height: 100dvh;
  display: flex; flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 100px 48px 48px;
  max-width: 820px;
}

/* Eyebrow — 300 Light */
.contact-wrap__eyebrow {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.62rem;
  letter-spacing: 0.28em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 28px;
}

/* Contact heading — 800 Heavy */
.contact-wrap__heading {
  font-family: var(--font);
  font-weight: 800;
  font-size: clamp(2.8rem, 7vw, 6rem);
  letter-spacing: -0.04em;
  line-height: 0.9;
  text-transform: uppercase;
  margin-bottom: 40px;
}

.contact-links { display: flex; flex-direction: column; gap: 0; width: 100%; }

.contact-link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 0;
  border-bottom: 1px solid var(--grey-mid);
  transition: padding-left 0.3s ease;
}
.contact-link:hover { padding-left: 10px; }

/* Contact label — 300 Light */
.contact-link__label {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--grey-light);
  margin-bottom: 5px;
}

/* Contact value — 600 SemiBold */
.contact-link__value {
  font-family: var(--font);
  font-weight: 600;
  font-size: 1.1rem;
  letter-spacing: -0.01em;
}

.contact-link__arrow {
  display: inline-flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  opacity: 0.35;
  transition: opacity 0.3s, transform 0.3s;
}
.contact-link:hover .contact-link__arrow { opacity: 1; transform: translate(5px, -5px); }

.contact-enquiry { margin-top: 36px; width: 100%; }

/* Enquiry text — 400 Book */
.contact-enquiry__text {
  font-family: var(--font);
  font-weight: 400;
  font-size: 1rem;
  line-height: 1.75;
  color: rgba(245,244,240,0.45);
  max-width: none;
  margin-bottom: 20px;
}

/* Button — 500 Medium */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 15px 38px;
  border: 1px solid rgba(245,244,240,0.25);
  font-family: var(--font);
  font-weight: 500;
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--white);
  transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.btn-primary:hover {
  background: var(--white);
  border-color: var(--white);
  color: var(--black);
}

/* ── Footer ──────────────────────────────────────────────────── */
footer {
  padding: 40px 48px;
  border-top: 1px solid var(--grey-mid);
  display: flex;
  align-items: center;
  justify-content: space-between;
}
/* Footer name — 600 SemiBold */
footer .footer__name {
  font-family: var(--font);
  font-weight: 600;
  font-size: 0.7rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--grey-light);
}
/* Footer copy — 300 Light */
footer .footer__copy {
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.58rem;
  letter-spacing: 0.1em;
  color: var(--grey-mid);
}

/* ─────────────────────────────────────────────────────────────
   RESPONSIVE — TABLET & MOBILE
───────────────────────────────────────────────────────────── */

@media (max-width: 1024px) {
  .project-index-grid { grid-template-columns: repeat(2, 1fr); }
  .case-study__intro   { grid-template-columns: 1fr 1fr; }
  .case-study__credits { display: none; }
}

@media (max-width: 768px) {
  :root { --nav-height: 60px; }

  nav { padding: 0 24px; }
  .nav__links { display: none; }
  .nav__hamburger { display: flex; }

  /* Hero */
  .hero__content { left: 24px; right: 24px; bottom: 12%; }
  .hero__scroll   { right: 24px; }
  /* On phones the hero photos are scaled to fill the tall frame and trimmed
     left/right (never top/bottom), so only the horizontal anchor matters. These
     nudge each subject's face to sit centred instead of drifting off to one side
     (slide 3 already reads centred at the default). */
  .hero__slide--1 { background-position: 44% 30%; }
  .hero__slide--2 { background-position: 52% 30%; }
  /* Keep the intro line clear of the scroll cue (bottom-right) so it wraps to
     the next line instead of running underneath it. */
  .hero__position { padding-right: 52px; }

  /* Featured strip */
  .featured-strip { grid-template-columns: 1fr; }

  /* Animos — swap the 16×9 frame for the taller 4×3 cut on mobile */
  .animos__frame--wide { display: none; }
  .animos__frame--tall { display: block; }
  /* a little more breathing room above & below the wheel on mobile */
  .animos { padding: 22px 0; }

  /* Intro — tight bottom so the animos band crops cleanly below the link */
  .intro-block { padding: 64px 24px 12px; }

  /* Portfolio */
  .section-header  { padding: 56px 24px 24px; }
  .image-grid      { padding: 0 24px 56px; gap: 4px; }

  /* Motion */
  .motion-intro    { padding: calc(var(--nav-height) + 24px) 24px 16px; }
  .motion-hero     { padding: 0 24px; margin-bottom: 40px; }
  .motion-scroll   { display: none; }
  .motion-grid     { grid-template-columns: repeat(3, 1fr); gap: 4px; padding: 0 24px 56px; }

  /* Mobile: full-screen TikTok-style feed */
  .motion-player          { background: var(--black); }
  .motion-player.is-open  { display: block; }
  .motion-player__feed    { height: 100%; aspect-ratio: auto; max-width: none; }


  .project-index-grid { grid-template-columns: 1fr 1fr; margin-top: var(--nav-height); }
  .project-card       { min-height: 110px; padding: 18px 16px; }
  .project-card__title { font-size: 1.1rem; }

  .case-study          { padding: 32px 24px 0; }
  .case-study:first-child { padding-top: 32px; }
  .case-study__intro   { grid-template-columns: 1fr; gap: 12px; margin-bottom: 32px; }
  .case-study__intro > div:first-child { margin-bottom: 4px; }
  .case-study__eyebrow { margin-bottom: 8px; }
  .case-study__title   { margin: 0 0 4px; }
  .case-study__sub     { margin-top: 4px; }
  .case-study__credits { display: block; margin-top: 12px; }
  .case-study__hero    { width: calc(100% + 48px); margin-left: -24px; }

  .image-grid--project { grid-template-columns: 1fr 1fr; gap: 4px; padding-bottom: 56px; }

  /* Clients / logos */
  .clients      { padding: 56px 24px 0; }
  .clients__grid { grid-template-columns: repeat(3, 1fr); }
  .client-logo  { aspect-ratio: 1 / 1; padding: 16%; min-height: 0; }
  .client-logo svg,
  .client-logo img,
  .client-logo--lg img { max-width: 80px; }
  /* Match the emblem's capped width to the crests' (80 × 0.92) so its height
     tracks the England badge on phones too. */
  .client-logo img[alt="FIFA World Cup 26"] { max-width: 74px; }

  /* About */
  .about-layout    { grid-template-columns: 1fr; }
  .about-image     { position: relative; height: 88vw; min-height: 340px; overflow: hidden; }
  .about-image__bg { height: 100%; object-fit: cover; object-position: center -5%; }
  .about-image::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(
      to bottom,
      rgba(8,8,8,0) 55%,
      rgba(8,8,8,1) 95%
    );
    pointer-events: none;
  }
  .about-content   { position: relative; z-index: 2; margin-top: -90px; padding: 20px 24px 60px; }
  .about-stat      { gap: 28px; }

  /* Contact */
  .contact-wrap    { padding: 110px 24px 60px; }

  /* Lightbox — keep nav arrows on mobile, larger tap targets */
  .lightbox__nav        { opacity: 0.85; font-size: 1.6rem; padding: 18px 12px; bottom: 24px; top: auto; transform: none; }
  .lightbox__nav--prev  { left: 12px; }
  .lightbox__nav--next  { right: 12px; }

  /* Footer */
  footer           { padding: 30px 24px; }
  footer .footer__copy { display: none; }
}

@media (max-width: 480px) {
  .mobile-menu a          { font-size: 2rem; }
  /* Keep the project galleries (images 1–8, not the hero) two-up on phones
     rather than collapsing to a single column — inherits the 2-col rule from
     the 768px breakpoint above. */
  .about-stat             { flex-direction: column; gap: 20px; }
}

/* ============================================================
   COMMERCIAL — DIGITAL LENS  (commercial.html)
   A photorealistic precision camera lens, built as many stacked
   physical layers: matte hood, brushed-aluminium body, zoom ring,
   a rotating knurled focus ring carrying the engraved client
   logos, a bevelled chamfer, and a multi-coated front element.
   Scroll/drag rotates the focus ring with weighted mechanical
   motion; the logo at 12 o'clock resolves into focus and its
   project pulls sharp behind the glass.  Engine: commercial-lens.js
   ============================================================ */
.lens-stage {
  /* Lens diameter. Capped by available height (room reserved above for the nav
     + cue and below for the caption) so, with the WHEEL centred at the exact
     middle of the page, the absolutely-positioned cue never rides under the nav
     and the caption never clips off the bottom. */
  --L: clamp(300px, min(88vmin, calc(100vh - 340px)), 720px);
  position: relative;
  box-sizing: border-box;
  min-height: 100vh;
  /* Only the lens sits in the flex flow — the cue and caption are positioned
     absolutely off the lens's centre (below) — so the WHEEL itself is centred
     dead-centre of the page on every viewport, mobile and desktop alike. */
  padding: 0 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  /* A real studio, not a spotlit void. The linear layer builds a GROUND PLANE:
     a back-wall sweep above a soft horizon (~61%), then a floor receding to black
     in the foreground — the flat horizontal a radial can't make. Onto it: a large
     invisible softbox lifting the wall behind the object, and the object's faint
     sheen mirrored on the semi-gloss floor. Everything stays ~95% black. */
  background:
    radial-gradient(60% 44% at 50% 28%, rgba(58,63,72,0.24) 0%, transparent 62%),   /* invisible softbox on the back wall, behind & above the lens */
    radial-gradient(30% 20% at 50% 86%, rgba(40,45,54,0.22) 0%, transparent 72%),    /* the lens' reflection on the floor beneath it */
    linear-gradient(to bottom,
      #070809 0%,
      #0b0c11 40%,
      #12141a 56%,
      #1b1e25 61%,        /* horizon: the far floor edge catches the softbox */
      #0c0d12 72%,
      #050506 100%);      /* foreground floor → near black */
  isolation: isolate;
  touch-action: none;
}
/* the reference's two soft softbox pools that spill horizontally along the sides
   at the horizon, plus a corner vignette that pulls the frame to black. Big and
   diffuse so they read as light on a surface, never as light sources. */
.lens-stage::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(26% 15% at 6% 60%, rgba(160,172,196,0.10) 0%, transparent 70%),   /* softbox pool on the floor at the horizon, left */
    radial-gradient(26% 15% at 94% 61%, rgba(160,172,196,0.11) 0%, transparent 70%),  /* softbox pool on the floor at the horizon, right */
    radial-gradient(135% 116% at 50% 40%, transparent 46%, rgba(2,3,5,0.66) 100%);     /* corner vignette → black */
  pointer-events: none;
  z-index: 0;
}

.lens-fallback { list-style: none; display: flex; flex-wrap: wrap; gap: 18px; justify-content: center; padding: 40px; }
.lens-fallback a { color: var(--white); font-family: var(--font); font-weight: 300; }

/* ── The optic ─────────────────────────────────────────────── */
.lens {
  /* Cap by available height (100vh − room for nav + cue + caption) so the
     centred wheel never pushes the cue under the nav or the caption off-screen;
     on tall/mobile viewports the 88vmin term wins and nothing changes. */
  --L: clamp(300px, min(88vmin, calc(100vh - 340px)), 720px);
  /* autonomous optical drift, set every frame by JS — NOT cursor-driven.
     The barrel never moves; only the light across the glass shifts. */
  --px: 0; --py: 0; --coat: 0deg; --breathe: 1;
  --lu: 1;                              /* logo-unit — scales every badge together (mobile shrinks it) */
  position: relative;
  width: var(--L);
  height: var(--L);
  z-index: 1;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
  /* grounding: the wide cast shadow + a tighter, closer contact shadow so the
     object reads as resting on the seamless, not floating. Tracks the lens. */
  filter: drop-shadow(0 46px 70px rgba(0,0,0,0.65)) drop-shadow(0 13px 20px rgba(0,0,0,0.5));
}
.lens__layer {
  position: absolute;
  top: 50%; left: 50%;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  will-change: transform;
}

/* 1 — matte lens hood / outer shell */
.lens__hood {
  width: 100%; height: 100%;
  background:
    conic-gradient(from 210deg,
      #141519, #1d1f24, #101115, #191b20, #0e0f13, #1d1f24, #101115, #191b20, #141519);
  box-shadow:
    inset 0 3px 4px rgba(255,255,255,0.13),
    inset 0 -10px 26px rgba(0,0,0,0.86),
    inset 0 0 0 1px rgba(0,0,0,0.6);
}

/* 2 — brushed-aluminium body */
.lens__body {
  width: 90%; height: 90%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,0.065) 0deg 0.45deg, rgba(0,0,0,0.07) 0.45deg 0.9deg),
    conic-gradient(from 208deg,
      #34373d, #5f646c, #292c32, #464a52, #26282d, #5f646c, #292c32, #464a52, #34373d);
  box-shadow:
    inset 0 4px 6px rgba(255,255,255,0.22),
    inset 0 -18px 40px rgba(0,0,0,0.76),
    inset 0 0 0 1px rgba(0,0,0,0.45),
    0 2px 2px rgba(0,0,0,0.6);
  /* the metal housing is perfectly fixed — no parallax, ever */
}

/* 3 — recessed zoom ring (focal-length band), sits a step in */
.lens__zoom {
  width: 82%; height: 82%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,0.065) 0deg 0.4deg, rgba(0,0,0,0.075) 0.4deg 0.8deg),
    conic-gradient(from 200deg,
      #24262b, #41444b, #1b1d22, #313540, #191b1f, #41444b, #1b1d22, #313540, #24262b);
  box-shadow:
    inset 0 3px 6px rgba(0,0,0,0.7),
    inset 0 -6px 16px rgba(0,0,0,0.7),
    inset 0 0 0 1px rgba(0,0,0,0.55),
    inset 0 2px 0 rgba(255,255,255,0.09);
}
/* engraved markings sit on the zoom band via SVG (.lens__engrave) */
.lens__engrave { width: 100%; height: 100%; pointer-events: none; }
.lens__engrave text {
  font-family: var(--font);
  font-weight: 400;
  fill: rgba(234,238,246,0.38);           /* engraving reads a little clearer — rewards close study */
  paint-order: stroke;
  stroke: rgba(0,0,0,0.6);
  stroke-width: 0.35px;
}

/* 4 — rubberised focus-ring grip band (fine matte ribbing) */
.lens__focus-band {
  width: 76%; height: 76%;
  background:
    repeating-conic-gradient(from 0deg,
      rgba(255,255,255,0.078) 0deg 0.35deg, rgba(0,0,0,0.34) 0.35deg 0.7deg, rgba(0,0,0,0.12) 0.7deg 1.05deg),
    conic-gradient(from 205deg,
      #202226, #30333a, #17191d, #282b31, #16171b, #30333a, #17191d, #282b31, #202226);
  box-shadow:
    inset 0 3px 6px rgba(255,255,255,0.10),
    inset 0 -14px 28px rgba(0,0,0,0.8),
    inset 0 0 0 1px rgba(0,0,0,0.55);
  -webkit-mask: radial-gradient(circle, transparent 61%, #000 62%);
          mask: radial-gradient(circle, transparent 61%, #000 62%);
}

/* 5 — ROTATING ring: carries the logos + a fine rotating scale */
.lens__ring { width: 100%; height: 100%; will-change: transform; }
.lens__scale {
  position: absolute; inset: 0; border-radius: 50%;
  background: repeating-conic-gradient(from 0deg,
    rgba(235,238,244,0.32) 0deg 0.35deg, transparent 0.35deg 6deg);
  -webkit-mask: radial-gradient(circle, transparent 63.5%, #000 64%, #000 66.5%, transparent 67%);
          mask: radial-gradient(circle, transparent 63.5%, #000 64%, #000 66.5%, transparent 67%);
  pointer-events: none;
  opacity: 0.56;
}
.lens-logo {
  position: absolute;
  top: 50%; left: 50%;
  /* width/height are set per-logo in JS (× --lu) for optical balance */
  margin: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: none; border: 0; padding: 0;
  cursor: pointer;
  will-change: transform, opacity;
}
/* machined seat that appears under the selected logo — a shallow recess
   milled into the aluminium, so selection feels mechanical, not lit */
.lens-logo::before {
  content: '';
  position: absolute;
  inset: -8px -6px;
  border-radius: 11px;
  background: radial-gradient(130% 130% at 50% 18%, rgba(74,78,85,0.45), rgba(26,28,32,0.55));
  box-shadow:
    inset 0 1px 1px rgba(255,255,255,0.16),
    inset 0 -2px 5px rgba(0,0,0,0.6),
    0 3px 8px rgba(0,0,0,0.5);
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 0.62s ease, transform 0.62s cubic-bezier(0.22,0.61,0.36,1);
  z-index: -1;
  pointer-events: none;
}
.lens-logo.is-active::before { opacity: 1; transform: scale(1); }
.lens-logo img {
  width: 100%; height: 100%;
  object-fit: contain;
  pointer-events: none;
  -webkit-user-drag: none;
  /* deeply etched into the metal by default; JS drives focus reveal */
  filter: grayscale(1) brightness(0.5) contrast(0.85);
  opacity: 0.14;
}

/* 6 — bright bevelled chamfer around the glass. Its OUTER edge stays ~63%
   (so it never reaches the logo ring at 38% radius); the bevel is just made
   thinner because the glass inside it is larger. */
.lens__chamfer {
  width: 63.5%; height: 63.5%;
  background:
    conic-gradient(from 210deg,
      #6b7078, #9aa0a8, #4d5158, #7c828b, #45484f, #9aa0a8, #4d5158, #7c828b, #6b7078);
  box-shadow:
    inset 0 2px 3px rgba(255,255,255,0.5),
    inset 0 -4px 10px rgba(0,0,0,0.7),
    0 0 0 1px rgba(0,0,0,0.5),
    0 4px 10px rgba(0,0,0,0.6);
}

/* 7 — front lens element (the glass), with real glass thickness.
   The photograph is the hero, so the aperture is large and the
   vignette only just frames the edge rather than dimming the image. */
.lens__glass {
  /* larger front element → the photograph breathes more. The chamfer's outer
     edge only moves a hair (to 63.5%) so nothing new crowds the logo ring; most
     of the extra image comes from pulling the black rim/vignette inward. */
  width: 62.5%; height: 62.5%;
  overflow: hidden;
  /* Safari fails to clip children to border-radius when the element itself is
     transformed (.lens__layer applies translate(-50%,-50%)), so the square photo
     spilled past the round glass. A circular mask forces the clip cross-browser. */
  -webkit-mask: radial-gradient(circle closest-side, #000 99%, transparent 100%);
          mask: radial-gradient(circle closest-side, #000 99%, transparent 100%);
  background:
    radial-gradient(circle at 50% 50%, #1b1e24 0%, #0c0e12 62%, #050608 100%);
  box-shadow:
    inset 0 0 0 1.5px rgba(0,0,0,0.82),      /* rim — thinner still */
    inset 0 0 0 3px rgba(120,132,150,0.10),  /* thin coated bevel */
    inset 0 0 26px 2px rgba(0,0,0,0.5),      /* lighter, tighter edge vignette — more open image */
    inset 0 8px 16px rgba(255,255,255,0.08), /* top edge sheen */
    inset 0 -9px 20px rgba(0,0,0,0.46);
}
.lens__previews { position: absolute; inset: 0; will-change: transform, filter; transform-origin: 50% 50%; }
.lens__previews img {
  /* Fill the square glass box exactly (no zoom) so the circular mask shows the
     full inscribed circle of a square upload — max photo within the crop. */
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  /* cinematic crossfade — luxury product film, not a UI fade; kept slow and
     quiet so the image swap is almost imperceptible */
  transition: opacity 1.7s cubic-bezier(0.4,0.0,0.2,1);
  will-change: opacity, filter;
}
.lens__previews img.is-active { opacity: 1; }

/* looking-through-glass depth: stacked optical elements + protective glass */
.lens__element {                    /* 2nd element edge, set back a little */
  position: absolute; inset: 11%; border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(152,166,188,0.14),
    inset 0 2px 9px rgba(255,255,255,0.06),
    inset 0 -7px 17px rgba(0,0,0,0.58),
    0 0 6px rgba(0,0,0,0.28);        /* faint air-gap shadow — separates it from the front glass */
  pointer-events: none;
  transform: translate(calc(var(--px) * 4px), calc(var(--py) * 3px));
}
.lens__element2 {                   /* 3rd element, deeper still */
  position: absolute; inset: 22%; border-radius: 50%;
  box-shadow:
    inset 0 0 0 1px rgba(152,166,188,0.11),
    inset 0 2px 7px rgba(255,255,255,0.04),
    inset 0 -9px 19px rgba(0,0,0,0.54),
    0 0 7px rgba(0,0,0,0.24);        /* deeper element sits in its own pool of shade */
  pointer-events: none;
  transform: translate(calc(var(--px) * -5px), calc(var(--py) * -4px));
}
.lens__protect {                    /* front protective glass — broad soft sheen */
  position: absolute; inset: 0; border-radius: 50%;
  background: linear-gradient(128deg, rgba(200,214,236,0.10) 0%, transparent 34%, transparent 66%, rgba(150,164,186,0.05) 100%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(calc(var(--px) * 6px), calc(var(--py) * 5px));
}
.lens__bloom {                      /* faint optical bloom over highlights */
  position: absolute; inset: 8%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(180,198,228,0.10), transparent 70%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(calc(var(--px) * -3px), calc(var(--py) * -2px));
}

/* internal element sheen — the domed front element highlight (key light) */
.lens__dome {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(46% 40% at 34% 26%, rgba(150,168,196,0.16) 0%, rgba(150,168,196,0.05) 40%, transparent 62%),
    radial-gradient(30% 24% at 70% 78%, rgba(120,135,165,0.08) 0%, transparent 60%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(calc(var(--px) * 10px), calc(var(--py) * 8px));
}
/* multi-coating spectral tint (green/magenta) with a soft coating reflection
   near the key light — creeps slowly on its own */
.lens__coating {
  position: absolute; inset: 6%; border-radius: 50%;
  background:
    radial-gradient(40% 32% at 32% 24%, rgba(120,180,255,0.07) 0%, rgba(150,90,220,0.03) 45%, transparent 66%),
    conic-gradient(from 120deg,
      rgba(70,200,150,0.10), rgba(60,120,255,0.0) 22%, rgba(180,80,220,0.10) 46%,
      rgba(60,120,255,0.0) 68%, rgba(70,200,150,0.09) 90%, rgba(180,80,220,0.0));
  mix-blend-mode: screen;
  opacity: calc(0.5 + var(--reflect, 0.5) * 0.5);
  pointer-events: none;
  transform: translate(calc(var(--px) * -8px), calc(var(--py) * -6px)) rotate(var(--coat, 0deg));
}
/* depth of field — only the very outer edge falls off, so the image stays open */
.lens__dof {
  position: absolute; inset: 0; border-radius: 50%;
  background:
    radial-gradient(circle at 50% 50%, transparent 64%, rgba(6,7,9,0.2) 85%, rgba(4,4,6,0.66) 100%),
    radial-gradient(72% 50% at 50% 12%, rgba(200,214,235,0.05) 0%, transparent 55%);
  pointer-events: none;
}
/* faint aperture-blade polygon reflection deep in the barrel */
.lens__aperture {
  position: absolute; inset: 16%; border-radius: 50%;
  background: conic-gradient(from 18deg,
    rgba(210,222,240,0.05), transparent 12%, rgba(210,222,240,0.04) 26%, transparent 40%,
    rgba(210,222,240,0.05) 54%, transparent 68%, rgba(210,222,240,0.04) 82%, transparent 96%);
  mix-blend-mode: screen;
  opacity: 0.4;
  pointer-events: none;
  transform: translate(calc(var(--px) * -4px), calc(var(--py) * -3px));
}
/* soft chromatic fringe at the very edge of the glass — barely there */
.lens__chroma {
  position: absolute; inset: 0; border-radius: 50%; padding: 2px;
  background: conic-gradient(from 210deg,
    rgba(90,150,255,0.0), rgba(90,150,255,0.22), rgba(120,255,210,0.0),
    rgba(255,110,150,0.18), rgba(90,150,255,0.0));
  -webkit-mask: radial-gradient(circle, transparent 94%, #000 95%);
          mask: radial-gradient(circle, transparent 94%, #000 95%);
  mix-blend-mode: screen;
  opacity: 0.35;
  pointer-events: none;
}
/* soft edge refraction — the glass bends a faint band of light just inside the
   rim, drifting microscopically with the internal-element parallax */
.lens__refract {
  position: absolute; inset: 0; border-radius: 50%;
  background: radial-gradient(circle, transparent 83%, rgba(162,182,214,0.12) 90%, transparent 96%);
  mix-blend-mode: screen;
  pointer-events: none;
  transform: translate(calc(var(--px) * 3px), calc(var(--py) * 2px));
}
/* studio strip-light reflections on the glass — soft, never pure white.
   They drift microscopically and their brightness breathes with the key
   light, so the glass feels lit by real studio lighting, not animated. */
.lens__strip {
  position: absolute; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(196,210,232,0.5) 0%, rgba(196,210,232,0) 72%);
  mix-blend-mode: screen;
  filter: blur(3px);
  pointer-events: none;
}
.lens__strip--1 { width: 40%; height: 15%; top: 14%; left: 20%; transform: translate(calc(var(--px) * 9px), calc(var(--py) * 7px)) rotate(-24deg); opacity: calc((0.26 + var(--reflect,0.5) * 0.34) * var(--breathe,1)); }
.lens__strip--2 { width: 15%; height: 7%; top: 60%; left: 58%; transform: translate(calc(var(--px) * -6px), calc(var(--py) * -5px)); opacity: calc((0.12 + var(--reflect,0.5) * 0.24) * var(--breathe,1)); }
/* two faint flare ghosts along the optical diagonal — internal reflections
   that slide slowly against the strips as the light shifts */
.lens__ghost {
  position: absolute; border-radius: 50%;
  background: radial-gradient(circle, rgba(180,200,230,0.14) 0%, transparent 70%);
  mix-blend-mode: screen; pointer-events: none;
}
.lens__ghost--1 { width: 9%; height: 9%; top: 40%; left: 46%; transform: translate(calc(var(--px) * 8px), calc(var(--py) * 6px)); }
.lens__ghost--2 { width: 5%; height: 5%; top: 62%; left: 60%; transform: translate(calc(var(--px) * -10px), calc(var(--py) * -8px)); }
.lens__ghost--3 { width: 3.2%; height: 3.2%; top: 33%; left: 57%; opacity: 0.6; transform: translate(calc(var(--px) * 12px), calc(var(--py) * 9px)); }
/* static micro-specks — real dust settled on the front element, motionless */
.lens__speck {
  position: absolute; width: var(--sz, 1px); height: var(--sz, 1px);
  border-radius: 50%;
  background: radial-gradient(circle at 36% 34%, rgba(214,222,236,0.75), rgba(120,128,140,0.32) 68%, transparent);
  pointer-events: none;
}
.lens__dust { position: absolute; inset: 0; pointer-events: none; }
.lens__dust span {
  position: absolute; width: 2px; height: 2px; border-radius: 50%;
  background: rgba(210,218,232,0.45); opacity: 0;
  animation: lensDust var(--dur,14s) linear infinite; animation-delay: var(--delay,0s);
}
@keyframes lensDust {
  0% { opacity: 0; transform: translate(0,0) scale(0.5); }
  14% { opacity: 0.34; } 86% { opacity: 0.26; }
  100% { opacity: 0; transform: translate(var(--dx,8px), var(--dy,-14px)) scale(1); }
}

/* fixed focus index mark at 12 o'clock — engraved groove, not a UI tick */
.lens__focusmark {
  position: absolute; top: 3.4%; left: 50%;
  width: 2px; height: 3.4%;
  transform: translateX(-50%);
  border-radius: 1px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.55), rgba(0,0,0,0.15));
  box-shadow: -1px 0 0 rgba(255,255,255,0.14), 1px 0 0 rgba(255,255,255,0.10);
  opacity: 0.85;
  z-index: 6;
}
/* tiny machined reference dot beneath the index — Leica restraint */
.lens__focusmark::after {
  content: '';
  position: absolute;
  left: 50%; top: calc(100% + 3px);
  width: 4px; height: 4px;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #8a3a3a, #5a1e1e 70%, #2c0f0f 100%);
  box-shadow: inset 0 0.5px 0.5px rgba(255,255,255,0.3), inset 0 -1px 1px rgba(0,0,0,0.6);
}

/* engraved screws around the body */
.lens-screw {
  position: absolute; top: 50%; left: 50%;
  width: 12px; height: 12px; border-radius: 50%;
  background: radial-gradient(circle at 38% 34%, #55595f, #24262a 70%, #16171a 100%);
  box-shadow: inset 0 1px 1px rgba(255,255,255,0.35), inset 0 -1px 2px rgba(0,0,0,0.8), 0 1px 1px rgba(0,0,0,0.6);
}
.lens-screw::after {
  content: ''; position: absolute; top: 50%; left: 15%; right: 15%; height: 1.4px;
  transform: translateY(-50%);
  background: rgba(0,0,0,0.6);
}

/* ── Museum caption beneath the lens ───────────────────────────
   One line: the title of the work, nothing else. It is tuned to sit
   with the lens as a single composed object — pulled in close, optically
   centred, calm. Not a UI label; the caption beneath an exhibition piece. */
.lens-caption {
  /* Anchored off the lens's centre (50% + radius + a small gap) rather than in
     flow, so it hangs a fixed distance below the wheel without ever nudging the
     wheel off the page's centre. */
  position: absolute;
  left: 50%;
  top: calc(50% + (var(--L) / 2) + clamp(14px, 3vh, 30px));
  z-index: 2;
  text-align: center;
  min-height: 34px;                 /* single line — no reserved space for a subtitle */
  opacity: 0;
  transform: translate(-50%, 6px);
  transition: opacity 0.5s ease, transform 0.5s cubic-bezier(0.22,0.61,0.36,1);
}
.lens-caption.is-visible { opacity: 1; transform: translate(-50%, 0); }
/* The title in the exact project-heading style (matches .case-study__title):
   heavy Geist, tight negative tracking, tight leading. The same voice as the
   "INSIDE MATCHDAY" hero — so the caption reads as the work's real title. */
.lens-caption__name {
  font-family: var(--font);
  font-weight: 700;
  font-size: clamp(1.55rem, 3.2vw, 2.4rem);
  letter-spacing: -0.03em;          /* same tight display tracking as the hero titles */
  line-height: 0.96;
  text-transform: uppercase;
  color: var(--white);
}

/* ── Interaction cue ─────────────────────────────────────────
   A curved "Scroll to explore" engraving that sits in the empty space
   above the lens on load, echoing the barrel's own arc text, then fades
   away the moment the visitor first scrolls/swipes/keys the ring. It is
   the only signal that the lens is a live, rotatable object. */
.lens-hint {
  /* Anchored off the lens's centre (50% − radius − a small gap) and translated
     up by its own height so its BOTTOM rests just above the wheel's top edge.
     Because it's absolute (like the caption), it never shifts the wheel from the
     page centre; because its width is a fraction of --L, it — and its curvature —
     scale in lock-step with the wheel at every screen size. */
  position: absolute;
  left: 50%;
  top: calc(50% - (var(--L) / 2) - clamp(6px, 1.4vh, 16px));
  transform: translate(-50%, -100%);
  z-index: 3;
  pointer-events: none;                 /* decorative — never intercepts the ring */
  text-align: center;
  opacity: 0;
  animation: lens-hint-in 1.1s ease 0.6s forwards;
}
/* Width is a fixed fraction of the wheel diameter, so the whole cue — text size
   AND arc curvature — tracks the lens as it grows or shrinks; height auto keeps
   the SVG's aspect ratio. */
.lens-hint__svg { display: block; width: calc(var(--L) * 0.62); height: auto; margin: 0 auto; overflow: visible; }
.lens-hint__svg text {
  font-family: var(--font);
  font-weight: 300;
  font-size: 6.4px;                     /* SVG user units (viewBox 0 0 300 82) */
  letter-spacing: 2.5px;
  text-transform: uppercase;
  fill: rgba(234,238,246,0.72);
  paint-order: stroke;
  stroke: rgba(0,0,0,0.4);
  stroke-width: 0.3px;
}
/* Faint static rail + a soft band of light flowing smoothly along it. The flow
   is a repeating gradient stroke translated by one period (in the SVG via
   animateTransform), so light streams continuously with no hard edges or gaps. */
.lens-hint__line-base { fill: none; stroke: rgba(234,238,246,0.16); stroke-width: 0.9; }
.lens-hint__line-glow {
  fill: none;
  stroke: url(#lensHintFlow);
  stroke-width: 1.6;
  stroke-linecap: round;
  filter: url(#lensHintGlow);
}
/* Dismissed on first interaction — eases up and out (keeps the centring X). */
.lens-hint.is-dismissed {
  opacity: 0 !important;
  transform: translate(-50%, calc(-100% - 12px));
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,0.61,0.36,1);
  animation: none;
}
@keyframes lens-hint-in {
  from { opacity: 0; transform: translate(-50%, calc(-100% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -100%); }
}

/* "Open project" cue — hidden until the visitor starts exploring, then fades in
   beneath the caption as a clickable affordance for entering the focused work. */
.lens-caption__open {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 13px;
  padding: 4px 2px;
  background: none;
  border: 0;
  font-family: var(--font);
  font-weight: 300;
  font-size: 0.6rem;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--grey-light);
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: opacity 0.55s ease, transform 0.55s cubic-bezier(0.22,0.61,0.36,1), color 0.3s ease;
}
.lens-caption__open svg { display: block; transition: transform 0.3s ease; }
.is-explored .lens-caption__open {
  opacity: 0.62;
  transform: translateY(0);
  pointer-events: auto;
}
/* A few gentle arrow nudges when it first appears, to signal "enter". */
.is-explored .lens-caption__open svg { animation: lens-open-nudge 2.4s ease-in-out 0.7s 3; }
.lens-caption__open:hover { color: var(--white); opacity: 1; }
.lens-caption__open:hover svg { transform: translate(2px, -2px); }
@keyframes lens-open-nudge {
  0%, 100% { transform: translate(0, 0); }
  50%      { transform: translate(3px, -3px); }
}

@media (prefers-reduced-motion: reduce) {
  .lens__dust span { animation: none; }
  .lens-hint { animation: none; opacity: 1; }
  .lens-caption__open svg { animation: none; }
}
@media (max-width: 760px) {
  /* --lu is a no-JS fallback here; commercial-lens.js sizes the logos to the
     actual lens diameter on load + resize so they stay in proportion. */
  .lens { --lu: 0.8; }
  .lens-caption__name { font-size: 1.45rem; letter-spacing: -0.022em; }
}

/* ============================================================
   APERTURE SHUTTER TRANSITION  (shared, driven by main.js)
   Clicking a project closes an iris of blades to black, then the
   destination page opens the iris again — a camera taking the shot.
   ============================================================ */
.kb-iris {
  position: fixed;
  inset: 0;
  z-index: 9999;
  pointer-events: none;
}
.kb-iris svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.kb-iris__blades {
  transform-box: fill-box;
  transform-origin: center;
  transform: scale(1) rotate(0deg);
  transition: transform 0.3s cubic-bezier(0.55, 0, 0.35, 1);   /* close: confident, <400ms */
  will-change: transform;
}
/* closed = blades slid to centre (black), with a mechanical twist */
.kb-iris[data-state="closed"] .kb-iris__blades { transform: scale(0.001) rotate(-12deg); }
/* opening ease-out into the project */
.kb-iris[data-state="opening"] .kb-iris__blades { transition-duration: 0.42s; transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1); }
.kb-iris__blade { fill: #050506; }
@media (prefers-reduced-motion: reduce) {
  .kb-iris__blades { transition-duration: 0.25s; }
}