/* ============================================================
   RESET & BASE
   ============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: "Instrument Sans", sans-serif;
  background: #000;
  color: #fff;
  overflow-x: hidden;
  cursor: default;
}

/* ============================================================
   GLOBAL NAV
   ============================================================ */
.site-nav {
  position: fixed; top: 60px; left: 0; right: 0;
  z-index: 100;
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 40px;
  background: linear-gradient(to bottom, rgba(0,0,0,0.6) 0%, transparent 100%);
  opacity: 0; transition: opacity 0.4s ease; pointer-events: none;
}
@media (max-width: 768px) {
  .site-nav {
    top: 50px;
    padding: 10px 20px;
  }
}
.site-nav.visible { opacity: 1; pointer-events: all; }
.nav-back {
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: rgba(255,255,255,0.8); text-decoration: none;
  display: flex; align-items: center; gap: 8px; transition: color 0.2s;
}
.nav-back::before { content: '←'; font-size: 16px; }
.nav-back:hover { color: #fff; }
.nav-logo {
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.7);
}

/* ============================================================
   FIXED BRAND WORDMARK (landing page)
   White + mix-blend-difference so it self-inverts over the white
   hero and the black portfolio sections. script.js arms the
   tracking-collapse reveal once fonts are ready; without JS the
   mark simply renders in its final state.
   ============================================================ */
.site-wordmark {
  position: fixed;
  top: 26px;
  left: 40px;
  z-index: 300;
  font-family: "Instrument Sans", sans-serif;
  font-size: 16px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #ccc; /* 80% white, which difference blends to 80% black on white bg */
  mix-blend-mode: difference;
  pointer-events: none;
  white-space: nowrap;
}
.site-wordmark.wm-armed {
  opacity: 0;
  letter-spacing: 0.4em;
  transform: translateY(8px);
}
.site-wordmark.wm-armed.wm-in {
  opacity: 1;
  letter-spacing: 0.02em;
  transform: none;
  transition:
    opacity 0.9s ease 0.15s,
    letter-spacing 1.15s cubic-bezier(0.16, 1, 0.3, 1) 0.15s,
    transform 0.9s cubic-bezier(0.16, 1, 0.3, 1) 0.15s;
}
@media (prefers-reduced-motion: reduce) {
  .site-wordmark.wm-armed { opacity: 1; letter-spacing: 0.02em; transform: none; }
  .site-wordmark.wm-armed.wm-in { transition: none; }

  /* Honour the OS "reduce motion" setting site-wide: near-instant animations
     and transitions, no looping decorative motion, no smooth-scroll. Only
     active when the visitor has explicitly asked for reduced motion. */
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}
@media (max-width: 768px) {
  .site-wordmark { top: 18px; left: 20px; font-size: 14px; }
}
/* never = #fff → difference on white = pure black (#000)
   thought = #a6a6a6 → difference on white = 65% black (#595959) */
.site-wordmark .wm-never  { color: #fff; }
.site-wordmark .wm-thought { color: #a6a6a6; }


/* ============================================================
   GLOBAL MENU (Toggle & Overlay)
   ============================================================ */
.menu-toggle {
  position: fixed;
  top: 26px;
  right: 40px;
  z-index: 310;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: transparent;
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  mix-blend-mode: difference;
  color: #fff;
  transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-toggle:hover {
  transform: scale(1.1);
}
@media (max-width: 768px) {
  .menu-toggle {
    top: 18px;
    right: 20px;
  }
}
.menu-lines {
  position: relative;
  width: 20px;
  height: 12px;
}
.menu-lines .line {
  position: absolute;
  left: 0;
  width: 100%;
  height: 1.5px;
  background-color: currentColor;
  transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), top 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}
.menu-lines .line:first-child { top: 0; }
.menu-lines .line:last-child { top: auto; bottom: 0; }
.menu-toggle[aria-expanded="true"] .menu-lines .line:first-child {
  top: 5px;
  transform: rotate(45deg);
}
.menu-toggle[aria-expanded="true"] .menu-lines .line:last-child {
  bottom: auto;
  top: 5px;
  transform: rotate(-45deg);
}

.fullscreen-menu {
  position: fixed;
  inset: 0;
  z-index: 290;
  /* The element itself is the full-viewport scrim: the page stays visible but
     recedes behind it. The menu proper is the right-hand panel below, painted
     by the 3-row wipe — the same language as the page transition. */
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: flex-end;
  opacity: 0;
  visibility: hidden;
  /* Visibility flips instantly on open (so the menu is immediately focusable)
     and on close waits for the row sweep to finish — a visibility *transition*
     would hold the menu unfocusable while it opens. */
  transition: opacity 0.45s ease, visibility 0s ease 0.6s;
}
.fullscreen-menu.is-open {
  opacity: 1;
  visibility: visible;
  transition: opacity 0.2s ease, visibility 0s ease 0s;
}

/* ── Wipe backdrop: the same 3-row language as the page transition ── */
.menu-rows {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 0;
  left: auto;
  width: 42%;
  z-index: 0;
  display: flex;
  flex-direction: column;
  pointer-events: none;
  overflow: hidden;
}
.menu-rows span {
  flex: 1;
  background: #000;
  /* Starts off to the right, so the panel emerges from the toggle's corner. */
  transform: translateX(101%);
  transition: transform 480ms cubic-bezier(0.76, 0, 0.24, 1);
}
/* Sweep in top → bottom on open … */
.fullscreen-menu.is-open .menu-rows span { transform: translateX(0); }
.fullscreen-menu.is-open .menu-rows span:nth-child(1) { transition-delay: 0ms; }
.fullscreen-menu.is-open .menu-rows span:nth-child(2) { transition-delay: 55ms; }
.fullscreen-menu.is-open .menu-rows span:nth-child(3) { transition-delay: 110ms; }
/* … and back out bottom → top on close, so it reads as one gesture. */
.menu-rows span:nth-child(1) { transition-delay: 110ms; }
.menu-rows span:nth-child(2) { transition-delay: 55ms; }
.menu-rows span:nth-child(3) { transition-delay: 0ms; }

/* ── Editorial index layout (left-aligned, numbered) ── */
.fullscreen-menu .menu-inner {
  position: relative;
  z-index: 1;
  text-align: left;
  /* Matches the panel width so clicks anywhere on the black land here, and
     only the scrim to its left closes the menu. */
  width: 42%;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 3.5vw, 56px);
  overflow-y: auto;
}
.menu-links {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: clamp(6px, 1.2vh, 16px);
}
.menu-links li {
  overflow: hidden; /* For the slide-up reveal */
}
.menu-links a {
  display: flex;
  align-items: baseline;
  gap: clamp(12px, 1.4vw, 22px);
  font-family: "Instrument Sans", sans-serif;
  /* Sized so "terms & conditions" still sits on one line inside the panel. */
  font-size: clamp(1.5rem, 3.2vw, 2.75rem);
  font-weight: 800;
  text-transform: lowercase;
  color: #fff;
  text-decoration: none;
  line-height: 1.15;
  letter-spacing: -0.02em;
  opacity: 0;
  transform: translateY(100%);
  transition: transform 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 0.8s cubic-bezier(0.16, 1, 0.3, 1),
              filter 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  outline: none;
}
.menu-links a:focus-visible {
  outline: 2px solid #E4002B;
  outline-offset: 4px;
  border-radius: 2px;
}
/* Red index numerals — carries the brand colour into the menu */
.menu-index {
  flex: 0 0 auto;
  font-size: clamp(0.6rem, 1.1vw, 0.8rem);
  font-weight: 700;
  letter-spacing: 0.25em;
  color: #E4002B;
  transform: translateY(-0.9em);
}
.fullscreen-menu.is-open .menu-links a {
  opacity: 1;
  transform: translateY(0);
}
/* Staggered entry, offset so the links rise after the wipe has landed */
.fullscreen-menu.is-open .menu-links li:nth-child(1) a { transition-delay: 0.22s; }
.fullscreen-menu.is-open .menu-links li:nth-child(2) a { transition-delay: 0.27s; }
.fullscreen-menu.is-open .menu-links li:nth-child(3) a { transition-delay: 0.32s; }
.fullscreen-menu.is-open .menu-links li:nth-child(4) a { transition-delay: 0.37s; }
.fullscreen-menu.is-open .menu-links li:nth-child(5) a { transition-delay: 0.42s; }
.fullscreen-menu.is-open .menu-links li:nth-child(6) a { transition-delay: 0.47s; }

/* Tablet: 42% of a narrower screen gets cramped, so give the panel more room. */
@media (max-width: 1024px) and (min-width: 769px) {
  .menu-rows,
  .fullscreen-menu .menu-inner { width: 58%; }
}
/* Phones: a percentage panel would be unusable (42% of 375px is 158px), so the
   menu goes full-width and the type scales back up. */
@media (max-width: 768px) {
  .menu-rows,
  .fullscreen-menu .menu-inner { width: 100%; }
  .menu-links a { font-size: clamp(1.75rem, 7vw, 2.75rem); }
}

/* Selective focus — the same blur language as the banner and DNA principles.
   Scoped under .is-open so it out-specifies the entry rule above. */
@media (hover: hover) and (pointer: fine) {
  .fullscreen-menu.is-open .menu-links:hover a {
    filter: blur(5px);
    opacity: 0.4;
  }
  .fullscreen-menu.is-open .menu-links a:hover {
    filter: blur(0);
    opacity: 1;
  }
}

/* ============================================================
   ABOUT — MOBILE FOUNDERS IMAGE
   Mirrors .desktop-founders-img: a single baked-in photo with the
   bio/name overlaid via absolute positioning, sized against the
   345x818 mobile reference image. Hidden on desktop; the desktop
   image is hidden on mobile (see DESKTOP FOUNDERS IMAGE below).
   ============================================================ */
.mobile-founders-img { display: none; }
@media (max-width: 768px) {
  .mobile-founders-img {
    display: block;
    width: 100%;
    margin: 0 auto;
  }
  .mobile-founders-img img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* ============================================================
   SERVICES (sits above About)
   ============================================================ */
.services-section {
  background: #fff;
  padding: 120px 6vw;
  text-align: center;
  text-transform: lowercase;
}
.services-inner {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 60px;
}
.services-header-centered {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}
.services-eyebrow-new {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(0.75rem, 1vw, 0.9rem);
  font-weight: 700;
  color: #000;
  margin: 0;
  letter-spacing: 0.1em;
}
.services-lede-new {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(2rem, 4vw, 3.5rem);
  font-weight: 500;
  color: #000;
  line-height: 1.1;
  letter-spacing: -0.02em;
  margin: 0;
}
/* Awards showcase: a small, centered spot that cycles through the AWARDS/
   PNGs (script.js) so each badge/trophy stays clearly legible at any size,
   rather than the site's usual full-bleed image treatment. */
.awards-showcase {
  width: clamp(160px, 24vw, 280px);
  aspect-ratio: 1 / 1;
  margin: 0 auto;
}
.awards-showcase img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
  transition: opacity 0.25s ease;
}
.awards-showcase img.is-fading {
  opacity: 0;
}
@media (prefers-reduced-motion: reduce) {
  .awards-showcase img { transition: none; }
}
.services-list-modern {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(12px, 2vw, 20px);
  background: #111;
  color: #fff;
  padding: 48px 6vw;
  border-radius: 120px;
  width: 100%;
  box-sizing: border-box;
}
.service-line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: clamp(16px, 2.5vw, 32px);
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.1rem, 1.8vw, 1.5rem);
  font-weight: 400;
  letter-spacing: 0.02em;
}
.service-line .dot {
  color: rgba(255, 255, 255, 0.3);
  font-size: 0.8em;
  user-select: none;
}

@media (max-width: 768px) {
  /* Forces "two different minds." / "one shared belief." onto exactly two
     lines (matching the sentence break) instead of an unpredictable
     width-dependent wrap. Smaller than the desktop clamp so neither half
     re-wraps down to 320px width. */
  .about-heading-mobile-br {
    display: block !important;
  }
  .about-heading {
    font-size: clamp(26px, 8.2vw, 46px) !important;
  }
  .services-section {
    padding: 80px 24px;
  }
  /* Smaller than the desktop clamp so "Thinking beyond the logo." stays on
     one line down to 320px width, instead of wrapping to two. */
  .services-lede-new {
    font-size: clamp(20px, 6.2vw, 42px);
  }
  .services-list-modern {
    border-radius: 32px;
    padding: 40px 24px;
    gap: 16px;
  }
  .service-line {
    gap: 12px;
  }
}

/* ============================================================
   COMING-SOON SHELL PAGES (blog, privacy policy, terms)
   ============================================================ */
.coming-soon {
  min-height: 100vh;
  background: #000;
  color: #fff;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 clamp(24px, 8vw, 120px);
}
.coming-soon .cs-eyebrow {
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.35em;
  text-transform: uppercase;
  color: #E4002B;
  margin-bottom: 18px;
}
.coming-soon h1 {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(2.5rem, 9vw, 6rem);
  font-weight: 800;
  text-transform: lowercase;
  letter-spacing: -0.03em;
  line-height: 1.05;
  margin: 0 0 24px;
}
.coming-soon p {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(0.95rem, 1.6vw, 1.15rem);
  line-height: 1.7;
  color: rgba(255, 255, 255, 0.7);
  max-width: 46ch;
  margin: 0 0 40px;
}
.coming-soon .cs-back {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: #fff;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  align-self: flex-start;
  border-bottom: 1px solid rgba(255, 255, 255, 0.3);
  padding-bottom: 6px;
  transition: border-color 0.3s ease, gap 0.3s ease;
}
.coming-soon .cs-back:hover {
  border-color: #E4002B;
  gap: 16px;
}

/* ============================================================
   LEFT PROGRESS BAR
   ============================================================ */
.progress-bar {
  position: fixed; left: 0; top: 0; width: 3px; height: 100vh; z-index: 200;
  background: rgba(255,255,255,0.1);
}
.progress-bar-fill { width: 100%; height: 0%; background: #fff; transition: height 0.1s linear; }

/* ============================================================
   CHAPTER LABEL TOAST
   ============================================================ */
.chapter-label {
  position: fixed; bottom: 40px; left: 50%; transform: translateX(-50%);
  z-index: 150; font-family: "Instrument Sans", sans-serif; font-size: 11px;
  font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase;
  color: rgba(255,255,255,0.5); background: rgba(0,0,0,0.5);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  padding: 8px 20px; border-radius: 100px; opacity: 0; transition: opacity 0.5s ease;
  white-space: nowrap; pointer-events: none;
}
.chapter-label.show { opacity: 1; }

/* ============================================================
   LANDING PAGE — HERO BANNER
   ============================================================ */
.landing-body { background: #fff; color: #111; }

/* ============================================================
   WEBSITE BANNER: INTERACTIVE / MOTION
   ============================================================ */
.interactive-banner {
  /* 100vh of hero + 100vh of pinned runway. The DNA section is pulled up over
     that runway (see .dna-section), so this costs no extra scrolling — it just
     gives the hero something to stay pinned against while the next section
     slides over it. */
  height: 200vh;
  background: #ffffff; /* Explicitly requested white background via banner style */
}
.banner-sticky {
  position: sticky;
  top: 0; left: 0;
  width: 100%; height: 100vh;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  text-align: center;
  overflow: hidden;
  padding: 20px;
}
/* Accessible visually-hidden class for screen readers & search engine indexing */
.sr-only {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

/* The headline and subtext are visually baked into both Desktop Banner.jpg and
   Mobile Banner.jpg, so the live text overlay is accessible to search engines
   and screen readers via .sr-only styling without taking up visual layout. */
.banner-text-overlay {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}
.banner-heading {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(4rem, 10vw, 9rem);
  font-weight: 900;
  line-height: 0.9;
  letter-spacing: -0.02em;
  margin-bottom: 2rem;
  color: rgba(0, 0, 0, 0.8); /* 80% black */
}
.noise-word {
  color: rgba(0, 0, 0, 0.8);
  transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
  display: inline-block;
}
.banner-heading:hover .noise-word {
  color: rgba(0,0,0,0);
  text-shadow: 0 0 20px rgba(0,0,0,0.2);
  transform: scale(0.95);
}
.banner-subtext {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1rem, 2vw, 1.5rem);
  line-height: 1.6;
  max-width: 600px;
  color: #000000; /* 100% black */
  text-wrap: balance;
}
.banner-scroll-hint {
  position: absolute; bottom: 40px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  animation: bounce 2s ease infinite;
}
.banner-scroll-hint svg { color: #888; }

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

/* ============================================================
   DNA SECTION (Editorial Focus - Compact)
   ============================================================ */
/* ============================================================
   SELECTIVE-FOCUS HOVERS (pointer devices only)
   The DNA principles spotlight whichever one you point at.
   (The banner's "noise" blur was removed when the headline was baked into
   Desktop Banner.jpg — the overlay is hidden above 768px, so it had no
   target left. The mobile text never used it: it was pointer-only.)
   ============================================================ */
@media (hover: hover) and (pointer: fine) {

  /* Spotlight: hovering the block softens all three, the hovered one snaps back. */
  .dna-principle {
    transition: filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  }
  .dna-principles-group:hover .dna-principle {
    filter: blur(6px);
    opacity: 0.35;
  }
  .dna-principles-group:hover .dna-principle:hover {
    filter: blur(0);
    opacity: 1;
  }
}

.dna-section {
  width: 100%;
  background: #ffffff;
  position: relative;
  border-bottom: 8px solid #000;
  overflow: hidden;
  /* Overlap reveal: start at the bottom of the viewport and slide up over the
     pinned hero instead of waiting for it to scroll away. This is what removes
     the ~100vh of empty white that used to sit between the two. */
  z-index: 2;
  margin-top: -100vh;
}

/* ============================================================
   SELECTED WORK DIVIDER
   ============================================================ */
.selected-work-divider {
  width: 100%;
  background: #ffffff;
  color: #000;
  padding: 120px 40px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 24px;
  border-bottom: 8px solid #000;
}
.selected-work-label {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(2.5rem, 5vw, 4rem);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 0;
  text-align: center;
}
.selected-work-arrow {
  color: #000;
  display: flex;
  align-items: center;
  justify-content: center;
  animation: bounceDown 2s infinite ease-in-out;
}
@keyframes bounceDown {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(15px); }
}
@media (max-width: 768px) {
  .selected-work-divider { padding: 80px 24px; }
}

/* ============================================================
   LANDING PAGE — WORK TILES
   ============================================================ */
.work-a-custom-text {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  left: 7%;
  top: 12%;
  width: auto;
  height: auto;
  font-family: "Instrument Sans", sans-serif;
  font-weight: bold;
  font-size: 50px;
  line-height: 47px;
  color: #F9F7F7;
}
.work-b-custom-text {
  position: absolute;
  z-index: 10;
  pointer-events: none;
  left: 8%;
  top: 12%;
  width: auto;
  height: auto;
  font-family: "Instrument Sans", sans-serif;
  font-weight: bold;
  font-size: 50px;
  line-height: 47px;
  color: #F9F7F7;
}
/* Mobile: lift the tile caption off the video into a black band above it,
   styled like the red chapter bands (same padding and type, black instead of
   red). Must sit after both desktop rules above — a media query carries no
   extra specificity, so an equally-specific later rule would otherwise win.
   Desktop overlay positioning is untouched. */
@media (max-width: 768px) {
  .work-tiles { flex-direction: column; }

  .work-a-custom-text,
  .work-b-custom-text {
    position: relative;
    left: 0;
    z-index: 10;
    width: 100%;
    height: auto;
    box-sizing: border-box;
    padding: 0 24px;
    margin-top: 100px;
    margin-bottom: calc(-2 * 1.1em - 0.1em); /* Pulls video up to cover exactly the last 2 lines, plus a tiny baseline tweak */
    background: transparent;
    font-size: clamp(1.08rem, 4.8vw, 1.5rem);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: 0.04em;
    text-transform: lowercase;
  }
  /* Keep the hard breaks on mobile so we perfectly control the 5 lines */
  .work-a-custom-text br,
  .work-b-custom-text br {
    display: inline;
  }
}

.work-tiles { background: #000; }

.work-tile {
  position: relative; width: 100%; height: 100vh; overflow: hidden;
  display: block; cursor: pointer; text-decoration: none;
}
.work-tile img, .work-tile video {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform 0.6s cubic-bezier(0.19, 1, 0.22, 1);
}
.work-tile:hover img, .work-tile:hover video { transform: scale(1.04); }

/* Hover overlay */
.tile-overlay {
  position: absolute; inset: 0;
  background: rgba(0,0,0,0); transition: background 0.5s ease;
  display: flex; align-items: flex-end; justify-content: flex-start;
  padding: 48px 52px;
}
.work-tile:hover .tile-overlay { background: transparent; }

/* Always-visible tile meta (bottom-left) */
.tile-meta {
  display: flex; flex-direction: column; gap: 16px;
  transform: translateY(10px); opacity: 0;
  transition: opacity 0.4s ease, transform 0.4s ease;
}
.work-tile:hover .tile-meta { opacity: 1; transform: translateY(0); }

.tile-work-label {
  font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 600;
  letter-spacing: 0.25em; text-transform: uppercase; color: rgba(255,255,255,0.5);
}
.tile-work-name {
  font-family: "Instrument Sans", sans-serif; font-size: clamp(1.8rem, 4vw, 3.5rem);
  font-weight: 300; color: #fff; line-height: 1; letter-spacing: -0.02em;
}
.tile-explore {
  display: inline-flex; align-items: center; gap: 12px;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.8);
  border-bottom: 1px solid rgba(255,255,255,0.3); padding-bottom: 4px;
  transition: color 0.2s, border-color 0.2s;
}
.work-tile:hover .tile-explore { color: #fff; border-color: rgba(255,255,255,0.7); }
.tile-explore svg { transition: transform 0.3s ease; }
.work-tile:hover .tile-explore svg { transform: translateX(5px); }

/* Touch devices have no :hover — keep the CTA and scrim always visible */
@media (hover: none) {
  .tile-overlay { background: rgba(0,0,0,0.45); }
  /* Work A and B have solid CTA buttons, so they don't need the dark overlay */
  #tile-work-a .tile-overlay, 
  #tile-work-b .tile-overlay { background: transparent; }
  .tile-meta { opacity: 1; transform: translateY(0); }
}

/* Placeholder tiles */
.work-tile.placeholder-tile {
  background: #111; display: flex; align-items: center; justify-content: center;
  cursor: default;
}
.placeholder-label {
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 500;
  letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.2);
}

/* Work B tile — always-visible quote text (upper-left, matches reference) */
.tile-quote {
  position: absolute;
  top: 38%; left: 36px;
  z-index: 6;
  font-family: 'Courier New', Courier, monospace;
  font-size: clamp(0.7rem, 1.1vw, 0.9rem);
  font-weight: 400;
  color: rgba(255,255,255,0.92);
  line-height: 1.7;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  pointer-events: none;
  text-shadow: 0 1px 8px rgba(0,0,0,0.7);
}

/* ============================================================
   LANDING PAGE — ABOUT + CONTACT + FOOTER
   ============================================================ */
.about-section {
  width: 100%;
  background: #ffffff;
  position: relative;
  overflow: hidden;
}

/* Contact */
.contact-section {
  background: #111; color: #fff; padding: 120px 80px;
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start;
}
@media (max-width: 900px) { .contact-section { grid-template-columns: 1fr; padding: 80px 40px; } }

.contact-text h2 {
  font-family: "Instrument Sans", sans-serif; font-size: clamp(2rem, 3.5vw, 3rem); font-weight: 300;
  line-height: 1.2; letter-spacing: -0.02em; margin-bottom: 16px;
}
.contact-text p { font-size: 14px; color: #777; line-height: 1.8; }
.contact-form { display: flex; flex-direction: column; gap: 20px; }
.form-field {
  position: relative; border-bottom: 1px solid rgba(255,255,255,0.15); padding-bottom: 8px;
}
.form-field input, .form-field textarea {
  width: 100%; background: transparent; border: none; outline: none;
  font-family: "Instrument Sans", sans-serif; font-size: 15px; color: #fff;
  padding: 20px 0 4px; resize: none;
}
.form-field textarea { min-height: 100px; }
.form-field label {
  position: absolute; top: 20px; left: 0; font-size: 13px; color: #555;
  transition: all 0.25s ease; pointer-events: none; letter-spacing: 0.05em;
}
.form-field input:focus ~ label,
.form-field input:not(:placeholder-shown) ~ label,
.form-field textarea:focus ~ label,
.form-field textarea:not(:placeholder-shown) ~ label {
  top: 4px; font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.form-field input::placeholder, .form-field textarea::placeholder { color: transparent; }
.form-field::after {
  content: ''; position: absolute; bottom: -1px; left: 0;
  width: 0; height: 1px; background: #fff; transition: width 0.35s ease;
}
.form-field:focus-within::after { width: 100%; }

/* Validation error states (set by script.js) — red underline + inline note.
   Label rules repeat the sibling selectors so they also win the specificity
   tie against the floated-label state above. */
.form-field.error { border-bottom-color: #ff5a5a; }
.form-field.error::after { background: #ff5a5a; }
.form-field.error label,
.form-field.error input ~ label,
.form-field.error textarea ~ label { color: #ff5a5a; }
.field-error {
  position: absolute; top: 4px; right: 0;
  font-family: "Instrument Sans", sans-serif; font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: #ff5a5a;
}
.submit-btn {
  align-self: flex-start; margin-top: 12px; padding: 14px 40px;
  background: #fff; color: #111; border: none;
  font-family: "Instrument Sans", sans-serif; font-size: 13px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; transition: background 0.2s;
}
.submit-btn:hover { background: #e8e8e8; }

/* Footer */
.site-footer {
  background: #000;
  padding: 80px 80px 48px;
  display: flex;
  flex-direction: column;
  gap: 48px;
  border-top: 1px solid rgba(255,255,255,0.06);
}
.site-footer-top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 40px;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.footer-logo {
  font-family: "Instrument Sans", sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #fff;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.footer-tagline {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.04em;
  max-width: 260px;
  line-height: 1.6;
}
.footer-nav {
  display: flex;
  gap: 48px;
}
.footer-nav-col {
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.footer-nav-heading {
  font-family: "Instrument Sans", sans-serif;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.5);
}
.footer-nav a {
  font-family: "Instrument Sans", sans-serif;
  font-size: 13px;
  font-weight: 300;
  color: rgba(255,255,255,0.55);
  text-decoration: none;
  letter-spacing: 0.04em;
  transition: color 0.2s;
}
.footer-nav a:hover { color: #fff; }
.site-footer-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 24px;
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.08em;
  color: rgba(255,255,255,0.55);
}
@media (max-width: 768px) {
  .site-footer { padding: 60px 32px 40px; gap: 40px; }
  .site-footer-top { flex-direction: column; gap: 40px; }
  .footer-nav { flex-direction: column; gap: 32px; }
  .site-footer-bottom { flex-direction: column; gap: 8px; text-align: center; }
}

/* Inner page footer — compact, matches work pages */
.page-footer {
  background: #000;
  padding: 48px 80px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid rgba(255,255,255,0.06);
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.55);
}
.page-footer a {
  color: rgba(255,255,255,0.65);
  text-decoration: none;
  transition: color 0.2s;
}
.page-footer a:hover { color: #fff; }
@media (max-width: 768px) {
  .page-footer { padding: 32px; flex-direction: column; gap: 12px; text-align: center; }
}

/* ============================================================
   WORK DETAIL PAGES — BASE
   ============================================================ */
.work-page { background: #000; }
.chapter { position: relative; width: 100%; }

/* ============================================================
   CHAPTER HERO — FULL SCREEN
   ============================================================ */
.chapter-hero {
  width: 100%; height: 100vh; position: relative; overflow: hidden; background: #000;
}
.hero-image {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.hero-video {
  width: 100%; height: 100%; object-fit: contain; display: block;
}
/* Portrait / vertical media — show contained (with black bars) */
.hero-video.contain-mode,
.hero-image.contain-mode {
  object-fit: contain;
}

/* ============================================================
   CHAPTER TITLE BOX (solid colored label on hero)
   ============================================================ */
.chapter-title-box {
  position: absolute;
  top: 52px; left: 52px;
  z-index: 10;
  background: #E4002B;
  padding: 14px 22px 16px;
  width: 320px;          /* wider so text fits without spilling */
  pointer-events: none;
  transition: opacity 0.5s ease;
}
.chapter-title-box.hidden {
  opacity: 0;
}
/* On phones the sections shrink to their media's height (see MOBILE MEDIA
   SIZING below), so the overlay box scales down to a compact card that fits
   on the smaller video. Fade-on-play behavior is the same as desktop. */
@media (max-width: 768px) {
  .chapter-title-box {
    top: 10px;
    left: 10px;
    width: auto;
    max-width: 72%;
    padding: 8px 12px 10px;
  }
  /* Scoped to outrank the desktop .title-box-* rules that appear later in
     the sheet; .wb-title-box is work-c.html's local box using the same
     inner classes. */
  .chapter-title-box .title-box-eyebrow,
  .wb-title-box .title-box-eyebrow { font-size: 8px; letter-spacing: 0.25em; margin-bottom: 4px; }
  .chapter-title-box .title-box-name,
  .wb-title-box .title-box-name { font-size: 15px; margin-bottom: 5px; }
  .chapter-title-box .title-box-desc,
  .wb-title-box .title-box-desc { font-size: 9px; line-height: 1.5; }
}
.title-box-eyebrow {
  display: block;
  font-family: "Instrument Sans", sans-serif;
  font-size: 10px; font-weight: 700;
  letter-spacing: 0.35em; text-transform: uppercase;
  color: rgba(255,255,255,0.6);
  margin-bottom: 10px;
}
.title-box-name {
  font-family: "Instrument Sans", sans-serif;
  font-size: clamp(1.6rem, 3vw, 2.6rem);
  font-weight: 700;
  color: #fff;
  line-height: 1.05;
  letter-spacing: -0.01em;
  margin-bottom: 12px;
  text-transform: lowercase;
}
.title-box-desc {
  font-family: "Instrument Sans", sans-serif;
  font-size: 12px; line-height: 1.75;
  color: rgba(255,255,255,0.75);
  font-weight: 400;
  max-width: 380px;
}

/* ─── Chapter-media hover: show player controls (for A3b fullscreen video) ─── */
.chapter-media:hover .player-bottom-bar.active {
  opacity: 1; pointer-events: all;
}
.chapter-media:hover .player-center-btn.is-playing {
  opacity: 1;
}

/* ============================================================
   SOUND TOGGLE
   ============================================================ */
.sound-toggle {
  position: absolute; bottom: 36px; right: 40px; z-index: 10;
  display: flex; align-items: center; gap: 10px; cursor: pointer; user-select: none;
}
.sound-icon {
  width: 44px; height: 44px; border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.4); background: rgba(0,0,0,0.3);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  display: flex; align-items: center; justify-content: center;
  transition: border-color 0.2s; animation: pulse-ring 2.5s ease infinite;
}
.sound-toggle:hover .sound-icon { border-color: rgba(255,255,255,0.8); }
.sound-label {
  font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.15em; text-transform: uppercase; color: rgba(255,255,255,0.6);
  white-space: nowrap;
}
.sound-toggle.playing .sound-label { color: rgba(255,255,255,0.9); }
@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0   rgba(255,255,255,0.3); }
  60%  { box-shadow: 0 0 0 10px rgba(255,255,255,0); }
  100% { box-shadow: 0 0 0 0   rgba(255,255,255,0); }
}

/* Scroll hint arrow inside hero */
.hero-scroll-hint {
  position: absolute; bottom: 36px; left: 50%; transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  opacity: 0.35; animation: bounce-vert 2s ease infinite; z-index: 6; pointer-events: none;
}
@keyframes bounce-vert {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50% { transform: translateX(-50%) translateY(6px); }
}

/* ============================================================
   MEDIA FILES (non-hero)
   ============================================================ */
.chapter-media {
  width: 100%; min-height: 80vh; position: relative; background: #000;
  display: flex; align-items: center; justify-content: center; overflow: hidden;
}
.chapter-media img, .chapter-media video {
  max-width: 100%; max-height: 100vh;
  width: 100%; height: 100%; object-fit: contain; display: block;
}
.chapter-media.fullscreen { min-height: 100vh; }
.chapter-media.fullscreen video { object-fit: cover; height: 100vh; }
.video-gap { margin-top: 80px; }
/* A3 file 3 — rectangular image on black background (centered, contained) */
.chapter-media.contained-image {
  min-height: 90vh;
  position: relative;
  overflow: hidden;
  background: #000;
  display: flex;
  align-items: center;
  justify-content: center;
}
.chapter-media.contained-image img {
  max-width: 100%;
  max-height: 88vh;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  position: relative;
  z-index: 2;
}

/* ============================================================
   2-COLUMN EDITORIAL GRID
   ============================================================ */
.media-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: #000; }
.media-grid-2 .chapter-media { min-height: 60vh; }
@media (max-width: 768px) { .media-grid-2 { grid-template-columns: 1fr; } }

/* ============================================================
   HORIZONTAL CAROUSEL (Work A5)
   ============================================================ */
.carousel-outer {
  background: #000;
  position: relative;
  overflow: hidden;
}
.carousel-track-wrap {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  cursor: grab;
  display: flex;
  scrollbar-width: none; /* Firefox */
  padding: 40px 0 60px;
}
.carousel-track-wrap::-webkit-scrollbar { display: none; }
.carousel-track-wrap.grabbing { cursor: grabbing; }

.carousel-track {
  display: flex;
  gap: 16px;
  padding: 0 60px;
  align-items: center;
}
.carousel-slide {
  flex: 0 0 auto;
  scroll-snap-align: start;
  border-radius: 2px;
  overflow: hidden;
  background: #111;
  height: 75vh;
  width: auto;
  cursor: zoom-in;
  transition: transform 0.3s ease;
}
.carousel-slide:hover { transform: scale(1.02); }
.carousel-slide img {
  height: 100%;
  width: auto;
  object-fit: cover;
  display: block;
  pointer-events: none;
}

/* Carousel nav dots */
.carousel-nav {
  display: flex; justify-content: center; align-items: center;
  gap: 8px; padding: 0 0 40px;
  background: #000;
}
.carousel-dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: rgba(255,255,255,0.2); cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}
.carousel-dot.active { background: #fff; transform: scale(1.3); }

/* Carousel arrow buttons */
.carousel-arrow {
  position: absolute; top: 50%; z-index: 10;
  transform: translateY(-50%);
  width: 48px; height: 48px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.2);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer; color: #fff; font-size: 18px;
  transition: background 0.2s; user-select: none;
}
.carousel-arrow:hover { background: rgba(255,255,255,0.18); }
.carousel-arrow.prev { left: 20px; }
.carousel-arrow.next { right: 20px; }

/* ============================================================
   CHAPTER SEPARATOR — half height, minimal
   ============================================================ */
.chapter-separator {
  height: 50vh;
  background: #000;
  display: flex; align-items: center; justify-content: center;
  position: relative; overflow: hidden;
}
.separator-inner {
  text-align: center; opacity: 0; transform: translateY(20px);
  transition: opacity 0.7s ease, transform 0.7s ease;
  display: flex; flex-direction: column; align-items: center; gap: 16px;
}
.chapter-separator.in-view .separator-inner { opacity: 1; transform: translateY(0); }

.separator-rule {
  width: 40px; height: 1px; background: rgba(255,255,255,0.2);
}
.separator-title {
  font-family: "Instrument Sans", sans-serif; font-size: 11px; font-weight: 500;
  letter-spacing: 0.35em; text-transform: uppercase; color: rgba(255,255,255,0.6);
}
.separator-next {
  font-family: "Instrument Sans", sans-serif; font-size: 22px; font-weight: 300;
  color: rgba(255,255,255,0.75); letter-spacing: 0.06em; font-style: italic;
}

/* ============================================================
   END-OF-WORK BANNER
   ============================================================ */
.next-work-banner {
  display: flex; text-decoration: none; width: 100%; height: 100vh;
  background: #0a0a0a;
  flex-direction: column; align-items: center; justify-content: center;
  gap: 24px; transition: background 0.4s; cursor: pointer;
}
.next-work-banner:hover { background: #111; }
.next-label { font-family: "Instrument Sans", sans-serif; font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; color: rgba(255,255,255,0.6); }
.next-title { font-family: "Instrument Sans", sans-serif; font-size: clamp(2rem, 5vw, 5rem); font-weight: 300; color: #fff; letter-spacing: -0.02em; display: flex; align-items: center; gap: 20px; }
.next-arrow { font-size: 0.8em; opacity: 0.4; transition: transform 0.3s, opacity 0.3s; }
.next-work-banner:hover .next-arrow { transform: translateX(12px); opacity: 1; }

/* ============================================================
   LIGHTBOX
   ============================================================ */
.lightbox {
  position: fixed; inset: 0; z-index: 1000; background: rgba(0,0,0,0.97);
  display: flex; align-items: center; justify-content: center;
  opacity: 0; pointer-events: none; transition: opacity 0.35s ease;
}
.lightbox.open { opacity: 1; pointer-events: all; }
.lightbox img { max-width: 92vw; max-height: 92vh; object-fit: contain; display: block; }
.lightbox-close {
  position: absolute; top: 28px; right: 36px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,0.1); border: none; cursor: pointer;
  display: flex; align-items: center; justify-content: center; color: #fff; font-size: 20px; transition: background 0.2s;
}
.lightbox-close:hover { background: rgba(255,255,255,0.2); }

/* ============================================================
   PLACEHOLDER WORK PAGES (B, C, D)
   ============================================================ */
.work-placeholder-screen {
  height: 100vh; display: flex; flex-direction: column; align-items: center;
  justify-content: center; gap: 20px; background: #000;
}
.work-placeholder-screen h1 { font-family: "Instrument Sans", sans-serif; font-size: clamp(2rem, 5vw, 4rem); font-weight: 300; color: rgba(255,255,255,0.1); letter-spacing: -0.02em; }
.work-placeholder-screen p { font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.2); }

/* ============================================================
   SCROLL-REVEAL UTILITY
   ============================================================ */
.reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s ease, transform 0.7s ease; }
.reveal.in-view { opacity: 1; transform: translateY(0); }


/* ============================================================
   PAGE TRANSITION — 3-ROW BLACK WIPE
   ============================================================ */
.pt-overlay {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; flex-direction: column;
  pointer-events: none;
}
.pt-row {
  flex: 1;
  background: #0a0a0a;
  transform: translateX(-101%);  /* off-screen left by default */
  will-change: transform;
}


/* ============================================================
   UNIVERSAL CUSTOM VIDEO PLAYER (2026 UI/UX)
   ============================================================ */
.custom-player-wrapper {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9; /* Reserve space on initial render to eliminate CLS */
  overflow: hidden;
  background: #000;
}

.custom-player-wrapper video {
  width: 100%;
  height: 100%;
  display: block;
}

/* ── Overlay (Click to Watch Full Film) ── */
.cp-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.2);
  z-index: 10;
  transition: opacity 0.5s ease;
  pointer-events: none; /* children enable as needed */
}
.is-full-film .cp-overlay,
.is-full-film .cp-center-btn {
  opacity: 0;
  pointer-events: none;
}

.cp-center-btn {
  pointer-events: auto;
  background: rgba(0,0,0,0.6);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 16px 32px;
  border-radius: 30px;
  color: #fff;
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  cursor: pointer;
  transition: all 0.3s ease;
  animation: pulse-ring 3s ease infinite;
}
.cp-center-btn:hover {
  background: rgba(255,255,255,0.1);
  border-color: rgba(255,255,255,0.5);
  transform: scale(1.05);
  animation: none;
}
@keyframes pulse-ring {
  0%, 100% { box-shadow: 0 0 0 0 rgba(255,255,255,0); }
  50%       { box-shadow: 0 0 0 10px rgba(255,255,255,0.07); }
}

/* ── Bottom Controls ── */
.cp-controls {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  padding: 30px 40px 24px;
  background: linear-gradient(to top, rgba(0,0,0,0.8) 0%, transparent 100%);
  display: flex;
  align-items: center;
  gap: 20px;
  z-index: 20;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.4s ease;
}
.is-full-film .cp-controls {
  pointer-events: auto;
}
.custom-player-wrapper:hover.is-full-film .cp-controls,
.is-paused.is-full-film .cp-controls {
  opacity: 1;
}

.cp-playpause {
  background: transparent;
  border: none;
  color: #fff;
  width: 36px;
  height: 36px;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.3);
  transition: transform 0.2s, border-color 0.2s;
}
.cp-playpause:hover {
  transform: scale(1.1);
  border-color: #fff;
}
.cp-playpause svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}

.cp-track {
  flex: 1;
  height: 4px;
  background: rgba(255,255,255,0.2);
  border-radius: 2px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.cp-fill {
  position: absolute;
  top: 0; left: 0; bottom: 0;
  width: 0%;
  background: #E4002B; /* Brand color */
  transition: width 0.1s linear;
}

.cp-time {
  font-family: "Instrument Sans", sans-serif;
  font-size: 11px;
  letter-spacing: 0.1em;
  color: rgba(255,255,255,0.8);
  min-width: 65px;
  text-align: right;
  font-variant-numeric: tabular-nums;
}
/* ============================================================
   WORK DETAIL PAGES (General)
   ============================================================ */
.work-page {
  background: #000;
  color: #fff;
  padding-top: 100px; /* Dedicated header space so logo/menu don't overlap content */
}
@media (max-width: 768px) {
  .work-page {
    padding-top: 80px;
  }
}

/* Un-pin headers on work pages so they scroll away and don't hinder the work view */
.work-page .site-wordmark,
.work-page .menu-toggle,
.work-page .site-nav {
  position: absolute !important;
}
.work-page .site-nav {
  opacity: 1 !important;
  pointer-events: all !important;
}

.chapter { position: relative; width: 100%; border-bottom: 1px solid rgba(255,255,255,0.05); }
.chapter:last-of-type { border-bottom: none; }

/* ============================================================
   PORTFOLIO CAROUSELS & TEXT OVERLAYS (Works A-P)
   ============================================================ */

.portfolio-section {
  position: relative;
  width: 100%;
  margin-bottom: 2px;
  background: #000;
  overflow: hidden;
}

.portfolio-carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none; /* Firefox */
  gap: 2px;
}
.portfolio-carousel::-webkit-scrollbar {
  display: none; /* Chrome/Safari */
}

/* Carousel Navigation Arrows */
.carousel-nav-btn {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  background: rgba(0, 0, 0, 0.4);
  color: #fff;
  border: none;
  width: 50px;
  height: 50px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 10;
  opacity: 0;
  transition: opacity 0.3s ease, background 0.3s ease;
  pointer-events: none;
}
.portfolio-section:hover .carousel-nav-btn {
  opacity: 1;
  pointer-events: auto;
}
.carousel-nav-btn:hover {
  background: rgba(0, 0, 0, 0.8);
}
/* Touch devices have no :hover — keep arrows visible and tappable;
   carousel-arrows.js still overrides opacity/pointer-events per-button at scroll ends */
@media (hover: none) {
  .carousel-nav-btn {
    opacity: 0.6;
    pointer-events: auto;
  }
}
.carousel-nav-btn.prev {
  left: 20px;
}
.carousel-nav-btn.next {
  right: 20px;
}
.carousel-nav-btn svg {
  width: 24px;
  height: 24px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Carousel pagination dots (injected by carousel-arrows.js).
   Buttons are 16px for a usable touch target; the visible dot is the
   ::before so the row still reads as small, subtle markers. */
.carousel-page-dots {
  position: absolute;
  bottom: 14px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 4px;
  z-index: 10;
}
.carousel-page-dot {
  width: 16px;
  height: 16px;
  border: none;
  padding: 0;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}
.carousel-page-dot::before {
  content: '';
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,0.45);
  box-shadow: 0 0 4px rgba(0,0,0,0.6); /* keeps dots visible on light images */
  transition: background 0.2s, transform 0.2s;
}
.carousel-page-dot.active::before {
  background: #fff;
  transform: scale(1.3);
}

.portfolio-carousel-item {
  scroll-snap-align: start;
  flex: 0 0 auto;
  width: 100vw;
  height: 100vh;
  position: relative;
}

.portfolio-carousel-item img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.portfolio-carousel-item video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

#work-h img,
#work-i img,
#work-j img,
#work-k img,
#work-n img,
#work-o img,
#chapter-b3 .portfolio-carousel-item img,
#chapter-b4 .portfolio-carousel-item img {
  object-fit: contain;
}


.portfolio-video-full {
  height: 100vh; /* Matches .work-tile height */
}

.portfolio-video-full video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  display: block;
}

/* Red Text Overlays from Mockups */
.portfolio-text-overlay {
  position: absolute;
  top: 0;
  left: 10vw;
  width: 320px;
  background: #c31b00; /* Deep red from mockups */
  color: #fff;
  padding: 40px;
  box-sizing: border-box;
  z-index: 10;
  min-height: 250px;
  display: flex;
  flex-direction: column;
}

.portfolio-text-overlay h2 {
  font-family: "Instrument Sans", sans-serif;
  font-size: 24px;
  font-weight: 800;
  text-transform: uppercase;
  margin: 0 0 30px 0;
  letter-spacing: 0.05em;
  line-height: 1.2;
}

.portfolio-text-overlay p {
  font-family: 'Courier New', Courier, monospace;
  font-size: 13px;
  line-height: 1.6;
  margin: 0;
  white-space: pre-wrap; /* Honors line breaks */
}

@media (max-width: 768px) {
  .portfolio-text-overlay {
    left: 5vw;
    width: 280px;
    padding: 30px;
  }
}

/* ============================================================
   MOBILE MEDIA SIZING
   Desktop locks every work section to viewport-height boxes and
   lets cover/contain crop or letterbox the media inside. On
   portrait phones that produces cropped images, videos floating
   in black voids, and title boxes hovering over empty space.
   Below 768px (phones and portrait tablets) each section collapses to its media's natural
   height instead.
   KEEP THIS BLOCK LAST: media queries add no specificity, so
   these overrides only win over the desktop rules (e.g.
   .portfolio-video-full { height: 88vh }) by source order.
   ============================================================ */
@media (max-width: 768px) {
  /* Landing page galleries and hero videos */
  .portfolio-carousel { align-items: center; }
  .chapter .portfolio-carousel { min-height: 55vh; }
  .portfolio-carousel-item { height: auto; }
  .portfolio-carousel-item img { height: auto; }
  .portfolio-carousel-item video { height: auto; }
  .portfolio-video-full { height: auto; }
  .portfolio-video-full video { height: auto; }
  .custom-player-wrapper { height: auto; }

  /* Work H: show images fully contained (same as Work I) on mobile/tablet.
     Desktop keeps object-fit: cover for a full-bleed landscape look. */
  #work-h img { object-fit: contain; }

  /* Work B/C tiles: show the full artwork instead of a zoomed crop */
  .work-tile { height: auto; }
  .work-tile img { height: auto; object-fit: contain; }

  /* Work tile CTA: scale to 70% on mobile */
  .work-tile .cp-center-btn {
    transform: scale(0.7);
    transform-origin: center;
  }

  /* Work A and B tile CTAs: move to ~80% down the tile */
  #tile-work-a .tile-meta,
  #tile-work-b .tile-meta {
    justify-content: flex-end !important;
    padding-bottom: 8% !important;
  }

  /* All video CTAs (Work C, D, E + KFC inside page): match Work A size (70%) and placement (~80% down) */
  .cp-overlay {
    align-items: flex-end !important;
    padding-bottom: 8% !important;
  }
  .cp-center-btn {
    transform: scale(0.7) !important;
    transform-origin: center !important;
  }

  /* Work detail pages: chapter heroes and media blocks */
  .chapter-hero { min-height: 55vh; height: auto; display: flex; align-items: center; justify-content: center; }
  .hero-video, .hero-image { height: auto; width: 100%; object-fit: contain; }
  .chapter-media { min-height: 0; }
  .chapter-media img, .chapter-media video { max-height: none; height: auto; }
  .chapter-media.fullscreen { min-height: 0; }
  .chapter-media.fullscreen video { height: auto; object-fit: fill; }
  .video-gap { margin-top: 0; }
  .chapter-media.contained-image { min-height: 0; }
  .chapter-media.contained-image img { max-height: none; }
  /* Two-up editorial grid (KFC ch.4) stacks to one column on mobile; its
     60vh min-height (higher specificity than .chapter-media above) would
     otherwise leave a tall black void around each image. */
  .media-grid-2 .chapter-media { min-height: 0; }

  /* Work B5 horizontal carousel: size slides by width, not 75vh height,
     so portrait images can never exceed the screen width */
  .carousel-track-wrap { padding: 24px 0 40px; }
  .carousel-track { padding: 0 20px; }
  .carousel-slide { height: auto; width: 85vw; }
  .carousel-slide img { width: 100%; height: auto; }

  /* Between-chapter breathing room reads as dead black space on a phone —
     keep the "up next" beat but much tighter */
  .chapter-separator { height: 22vh; }
  .next-work-banner { height: 45vh; }
}

@media (min-width: 769px) {
  .dna-description {
    transform: translateY(-7.33px);
  }
}


/* Mobile chapter layout: standalone heading + description ≤768px */
.mobile-ch-heading,
.mobile-ch-text { display: none; }

@media (max-width: 768px) {
  .chapter-title-box { display: none !important; }
  
  .mobile-ch-heading,
  .mobile-ch-text { display: block; }

  .mobile-ch-heading {
    background: #E4002B;
    padding: 100px 24px 18px;
  }
  .mobile-ch-heading h2 {
    font-family: "Instrument Sans", sans-serif;
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    font-weight: 800;
    text-transform: lowercase;
    color: #fff;
    margin: 0;
    line-height: 1.1;
    letter-spacing: 0.04em;
  }

  .mobile-ch-text {
    position: relative;
    background: #000;
    padding: 30px 24px 40px;
    border-top: 1px solid rgba(255,255,255,0.07);
    border-bottom: 1px solid rgba(255,255,255,0.07);
  }
  .mobile-ch-text p {
    font-family: "Instrument Sans", sans-serif;
    font-size: 15px;
    line-height: 1.8;
    color: rgba(255,255,255,0.8);
    margin: 0;
  }
  /* Subtle indicator to scroll for more work (matches the inside pages) */
  .mobile-ch-text::after {
    content: '↓ SCROLL';
    display: block;
    text-align: center;
    margin-top: 24px;
    font-family: "Instrument Sans", sans-serif;
    font-size: 11px;
    letter-spacing: 0.2em;
    color: rgba(255,255,255,0.4);
    opacity: 0.8;
  }

  /* Landing hero videos (Work C/D/E): solid black behind the media.
     .mobile-ch-heading directly above already supplies the red band, so its
     bottom edge is the true red/black border — the wrapper used to add its
     own red-top gradient half on top of that, doubling the red height and
     pushing the border ~27.5vh below the heading text instead of right
     under it. */
  #work-c .custom-player-wrapper,
  #work-d .custom-player-wrapper,
  #work-e .custom-player-wrapper {
    min-height: 55vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #000;
  }
  #work-c video.custom-video,
  #work-d video.custom-video,
  #work-e video.custom-video {
    display: block;
    width: 100%;
    height: auto;
    object-fit: contain;
    background: transparent;
    /* A 20% black layer over a colour is exactly brightness(0.8), so applying
       it to the video keeps it exposed just as the overlay tint used to. */
    filter: brightness(0.8);
  }
  /* Clear the tint so it can't dull the red bands. The play button is a child
     of the overlay, so it is unaffected. */
  #work-c .cp-overlay,
  #work-d .cp-overlay,
  #work-e .cp-overlay {
    background: transparent;
  }
}

/* ===== DESKTOP FOUNDERS IMAGE (About Us) ===== */
.desktop-founders-img {
  width: 100%;
  max-width: 1920px;
  margin: 0 auto;
  display: block;
  /* Removed top/bottom padding to sit flush if needed, but inheriting the 32px padding-bottom from the header above. */
}
.desktop-founders-img img {
  width: 100%;
  height: auto;
  display: block;
}

@media (max-width: 768px) {
  .desktop-founders-img {
    display: none !important;
  }
}

/* ============================================================
   CHAPTER PAGE INTRO (Work A/B inside pages) — black statement band
   before the chapters start. Desktop is sized to match the DNA
   section's band on the landing page (~400-455px tall at typical
   desktop widths); mobile reuses .mobile-ch-heading's exact
   padding/type convention, just black instead of red.
   ============================================================ */
.chapter-page-intro {
  background: #000;
  color: #fff;
  display: flex;
  align-items: center;
  padding: 140px 6vw;
  box-sizing: border-box;
}
.chapter-page-intro h1,
.chapter-page-intro p {
  font-family: "Instrument Sans", sans-serif;
  font-weight: 800;
  font-size: clamp(1.8rem, 3.4vw, 3.4rem);
  max-width: 850px;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0;
}
@media (max-width: 768px) {
  .chapter-page-intro {
    display: block;
    padding: 100px 24px 40px;
  }
  .chapter-page-intro h1,
  .chapter-page-intro p {
    font-size: clamp(1.8rem, 8vw, 2.5rem);
    text-transform: lowercase;
    line-height: 1.1;
    letter-spacing: 0.04em;
    max-width: none;
  }
}