/* ═══════════════════════════════════════════════════════
   ONSET FILMS — STYLESHEET (Light Theme)
   Structure: Tokens → Reset → Global → Nav → Sections
═══════════════════════════════════════════════════════ */

/* ─── 0. CUSTOM FONTS ─── */
@font-face {
  font-family: 'SuisseIntl';
  src: url('suisse-intl-bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ─── 1. DESIGN TOKENS ─── */
:root {
  /* Colors — Light Theme */
  --color-bg:        #fdfbf2;   /* faint warm off-white, barely-there pale-yellow tint */
  --color-surface:   #f2f2f2;   /* slightly darker surface */
  --color-border:    #000000;   /* bold black lines */
  --color-grey-mid:  #999999;   /* mid grey labels */
  --color-grey-light:#555555;   /* body copy */
  --color-text:      #111111;   /* near-black main text */
  --color-white:     #000000;   /* pure black accent */

  /* Typography */
  --font-serif: 'Satoshi', sans-serif;
  --font-mono:  'Space Mono', monospace;

  /* Spacing scale (multiples of 8px) */
  --sp-1: 8px;
  --sp-2: 16px;
  --sp-3: 24px;
  --sp-4: 32px;
  --sp-6: 48px;
  --sp-8: 64px;
  --sp-10: 80px;
  --sp-12: 96px;
  --sp-16: 128px;

  /* Transitions */
  --ease: cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --transition: 0.6s var(--ease);
}

/* Dark mode — same tokens, inverted. Toggled via [data-theme="dark"] on <html>. */
:root[data-theme="dark"] {
  --color-bg:        #000000;
  --color-surface:   #0d0d0d;
  --color-border:    #f8edcf;   /* pale-yellow lines */
  --color-grey-mid:  #666666;
  --color-grey-light:#aaaaaa;
  --color-text:      #fdfbf2;   /* off-white — same as the light theme background */
  --color-white:     #ffffff;
}

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

/* Guarantees the native hidden attribute always wins, even over
   elements whose own class sets a display value (flex/grid/etc.) */
[hidden] { display: none !important; }

html {
  scroll-behavior: smooth;
  font-size: 16px;
  overscroll-behavior-x: none;
  background: var(--color-bg);
}

body {
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-mono);
  line-height: 1.6;
  overflow-x: hidden;
  overscroll-behavior-x: none;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

a { color: inherit; text-decoration: none; }
ul { list-style: none; }
img, svg { display: block; }
button { background: none; border: none; font-family: inherit; }

/* ─── 3. NOISE CANVAS ─── */
#noise-canvas {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
  opacity: 0;
  will-change: transform;
  mix-blend-mode: screen;
}

/* ─── 4. CUSTOM CURSOR — disabled, using default OS cursor ─── */
#cursor { display: none; }

/* ─── 5. SOUND TOGGLE ─── */
#sound-toggle {
  position: fixed;
  top: var(--sp-4);
  left: var(--sp-4);
  z-index: 1000;
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--color-grey-mid);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: color 0.3s;
  cursor: pointer;
}
#sound-toggle:hover { color: var(--color-text); }

/* ─── 6. NAVIGATION ─── */
#navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: 12px var(--sp-3);
  background: var(--color-bg);
  border: 2px solid var(--color-border);
  transition: background 0.4s, border-color 0.4s;
}

/* Nav text stays dark when bar is opaque */
#navbar.scrolled .nav-logo,
#navbar.scrolled .nav-links a {
  color: var(--color-text);
}
#navbar.scrolled .hamburger span {
  background: var(--color-text);
}

.nav-logo {
  display: flex;
  align-items: center;
}

.logo-img {
  height: 36px;
  width: auto;
  margin-left: 10px;
  display: block;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;
}

/* Each menu item sits in its own bordered box — arrow included for dropdown items */
.nav-links > li {
  display: flex;
  align-items: center;
  border: none;
  padding: 5px;
  transition: background 0.25s, color 0.25s;
}
.nav-links > li:hover { background: #f8edcf; }
.nav-links > li:hover:not(:last-child) a,
.nav-links > li:hover:not(:last-child) button {
  color: #111111;
}

/* Last item (Contact) reads as the CTA — filled, inverts on hover */
.nav-links > li:last-child {
  background: #f8edcf;
}
.nav-links > li:last-child a { color: #111111; }
.nav-links > li:last-child:hover {
  background: var(--color-text);
}
.nav-links > li:last-child:hover a {
  color: var(--color-bg);
}

.nav-links a,
.nav-links button {
  font-family: 'Inter', var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s;
}

/* Dark/FR toggle pair — now its own group at the left of the navbar,
   where the logo used to sit; .nav-links keeps its margin-left:auto so
   the menu items stay pinned to the right independent of this group */
.nav-toggles {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding-left: var(--sp-3);
}
.nav-toggles .lang-toggle {
  font-family: 'Inter', var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  border-bottom: none;
  padding: 0;
}
#theme-toggle {
  font-family: 'Inter', var(--font-mono);
  font-weight: 400;
  font-size: 1rem;
  letter-spacing: 0;
  text-transform: none;
  color: var(--color-text);
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s;
}

/* Hamburger */
.lang-toggle {
  background: none;
  border: none;
  border-bottom: 1px solid rgba(0,0,0,0.4);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  padding: 0 6px 2px 6px;
  cursor: pointer;
  transition: border-bottom-color 0.2s;
}
.lang-toggle:hover {
  border-bottom-color: var(--color-text);
}
.lang-toggle .lang-icon { margin-right: 4px; }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
}
.hamburger span {
  display: block;
  width: 22px;
  height: 1px;
  background: var(--color-text);
  transition: transform 0.3s, background 0.3s;
}
.hamburger.active span { background: var(--color-text); }

/* Mobile overlay backdrop */
#menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 849;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0s ease 0.1s;
}
#menu-overlay.visible {
  opacity: 1;
  pointer-events: all;
}

/* Mobile drawer */
.mobile-menu {
  position: fixed;
  top: 0; right: 0;
  width: 50%;
  height: 50vh;
  background: var(--color-bg);
  z-index: 850;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: translateX(100%);
  transition: transform 0.6s cubic-bezier(0.76, 0, 0.24, 1);
  border-radius: 0;
}
.mobile-menu.open { transform: translateX(0); }
.mobile-menu ul {
  display: flex;
  flex-direction: column;
  gap: 0;
  text-align: left;
  width: 100%;
  padding: var(--sp-8) var(--sp-6) 0;
}
.mobile-menu ul li {
  padding: 10px 0;
}
.mobile-menu ul li:not(:last-child) {
  border-bottom: 2px solid var(--color-border);
}
.mobile-menu a {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 300;
  font-size: 1.2rem;
  letter-spacing: 0.04em;
  color: var(--color-text);
  display: inline-block;
  transition: transform 0.3s var(--ease), color 0.3s;
}
.mobile-menu a:hover {
  transform: scale(1.12);
  color: var(--color-grey-mid);
}

/* ─── 7. SECTION BASE ─── */
.section {
  position: relative;
  z-index: 1;
  padding: var(--sp-16) var(--sp-8);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.section-header { margin-bottom: var(--sp-8); }

.section-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}

.section-header h2 {
  font-family: var(--font-serif);
  font-size: clamp(2rem, 5vw, 3.5rem);
  font-weight: 700;
  line-height: 1.1;
  color: var(--color-text);
  text-transform: uppercase;
}

/* ─── 8. SCROLL REVEAL ─── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity 0.8s var(--ease), transform 0.8s var(--ease);
}
.reveal.visible {
  opacity: 1;
  transform: translateY(0);
}
.reveal:nth-child(2) { transition-delay: 0.1s; }
.reveal:nth-child(3) { transition-delay: 0.2s; }
.reveal:nth-child(4) { transition-delay: 0.3s; }

/* ─── 8b. MASTHEAD (split-headline masthead + full-bleed reel) ─── */
.masthead {
  position: relative;
  z-index: 1;
  padding: calc(74px + var(--sp-6) + var(--sp-2)) var(--sp-8) 0;
}
.masthead-top {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  font-family: var(--font-mono);
  font-size: 1.15rem;
  -webkit-text-stroke: 0.4px currentColor; /* semi-bold look — Space Mono has no weight between 400 and 700 */
  letter-spacing: 0.18em;
  color: var(--color-text);
  padding-bottom: var(--sp-2);
}
.masthead-meta-left, .masthead-meta-right {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.masthead-meta-left { padding-left: 4px; }
/* Desktop: tagline size scales with the logo (min(100%, 1100px) of the masthead).
   The ÷ 43.03 keeps the size it had when the longer sentence spanned the full logo
   width — about 25px on wide screens — so shorter wording stays the same size */
.masthead { container-type: inline-size; }
@media (min-width: 701px) {
  .masthead-top { font-size: calc((min(100cqw, 1100px) - 4px) / 43.03); }
  .masthead-meta-left span { white-space: nowrap; }
}
.masthead-meta-right { text-align: right; }

.masthead-headline {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3.5rem, 11vw, 9rem);
  line-height: 0.9;
  letter-spacing: 0.08em;
  margin-bottom: var(--sp-1);
}
.masthead-logo-img {
  width: min(100%, 1100px);
  height: auto;
  display: block;
}
/* Logo PNG is black on transparent — tint it off-white (#fdfbf2) in dark mode */
:root[data-theme="dark"] .masthead-logo-img {
  filter: invert(96%) sepia(10%) saturate(110%);
}
.masthead-dot {
  display: inline-block;
  width: 0.16em;
  height: 0.16em;
  background: #c2543a; /* terracotta accent — placeholder, matches hero-bold-accent */
  margin: 0 0.05em;
  transform: translateY(-0.08em);
}
.masthead-outline {
  color: transparent;
  -webkit-text-stroke: 2px var(--color-text);
}

.masthead-video {
  position: relative;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
}
.masthead-video .project-feature-frame {
  aspect-ratio: 2.2 / 1;
  border: none;
  border-radius: 0;
  background: var(--color-surface);
}
.masthead-still {
  display: block;
  width: 100%;
  aspect-ratio: 2.2 / 1;
  object-fit: cover;
  object-position: center 55%; /* keeps the two figures and the sun in frame */
}

@media (max-width: 700px) {
  .masthead { padding-left: var(--sp-2); padding-right: var(--sp-2); } /* logo + tagline sit to the left on phones */
  .masthead-meta-left { padding-left: 0; }
  .masthead-top { font-size: 1rem; line-height: 1.35; } /* tagline: a bit smaller, tighter lines */
  .masthead-top { flex-direction: column; gap: var(--sp-2); }
  .masthead-meta-right { text-align: left; }
  .masthead-video .project-feature-frame,
  .masthead-still { aspect-ratio: 4 / 3; }
}

/* ─── 8c. STUDIO INTRO (description + role list, under the reel) ─── */
.studio-intro {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-8);
  padding: var(--sp-6) var(--sp-8) var(--sp-3);
  border-bottom: 2px solid var(--color-border);
}
.studio-intro-desc {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  line-height: 1.5;
  color: var(--color-text);
  max-width: 640px;
}
.studio-intro-roles {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .studio-intro { flex-direction: column; gap: var(--sp-4); }
  .studio-intro-roles { align-items: flex-start; }
}

/* ─── 8d. TICKER (scrolling category marquee) ─── */
.ticker {
  overflow: hidden;
  background: #111111;
  border-bottom: 2px solid var(--color-border);
}
.ticker-track {
  display: flex;
  align-items: center;
  width: max-content;
  white-space: nowrap;
  animation: ticker-scroll 26s linear infinite;
}
.ticker-track span:not(.ticker-star) {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #ffffff;
  padding: var(--sp-3) var(--sp-4);
}
:root[data-theme="dark"] .ticker-track span:not(.ticker-star) { color: var(--color-text); }
.ticker-star {
  display: inline-block;
  vertical-align: middle;
  width: 7px;
  height: 7px;
  background: #c2543a;
  transform: rotate(45deg);
  margin: 0 var(--sp-2);
}
@keyframes ticker-scroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ─── 8e. CATEGORIES (giant numbered rows, link into projects.html filters) ─── */
.categories { border-bottom: 4px solid var(--color-border); }
.categories-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  padding: var(--sp-3) var(--sp-8);
  border-bottom: 2px solid var(--color-border);
  background: #f8edcf;
}
.categories-top .kicker-label { color: #111111; font-size: 0.85rem; }
.categories-top .categories-title { font-size: 1rem; } /* home "Projects" bar — a touch bigger */
#services { scroll-margin-top: 90px; border-bottom: 1px solid var(--color-border); } /* clears the fixed navbar when jumped to via #services */
.categories-count {
  font-family: var(--font-mono);
  font-size: 0.85rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111111;
}
.category-row {
  position: relative;
  display: flex;
  align-items: baseline;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-8);
  border-bottom: 2px solid var(--color-border);
  background-color: transparent;
  transition: background-color 0.25s, padding-left 0.25s;
}
.category-row:last-child { border-bottom: none; }
/* Image + scrim live on ::before as one layer so they cross-fade in via
   opacity on hover, instead of the image snapping in instantly the way a
   changing background-image would (background-image can't be transitioned).
   Rows with no --hover-img set yet just resolve to no background here, so
   the row's own pale-yellow hover fill below shows through untouched. */
.category-row::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(rgba(0, 0, 0, 0.2), rgba(0, 0, 0, 0.2)), var(--hover-img);
  background-size: cover;
  background-position: var(--hover-pos, center 30%);
  opacity: 0;
  transition: opacity 0.35s;
  pointer-events: none;
}
.category-row:hover {
  background-color: #f8edcf; /* shows until a hover image is uploaded for this category */
  padding-left: calc(var(--sp-8) + var(--sp-2));
}
.category-row:hover::before { opacity: 1; }
.category-row > * { position: relative; z-index: 1; }
.category-row:hover .category-name,
.category-row:hover .category-tags {
  color: var(--hover-text, #111111);
}
.category-index {
  display: inline-block;
  align-self: center;
  flex-shrink: 0;
  width: 11px;
  height: 11px;
  background: #c2543a;
  transform: rotate(45deg);
}
.category-name {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.8rem, 5vw, 3.2rem);
  line-height: 1;
  color: var(--color-text);
  flex: 1;
  transition: color 0.25s;
}
.category-tags {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-text);
  white-space: nowrap;
  transition: color 0.25s;
}
@media (max-width: 700px) {
  .category-row { flex-wrap: wrap; padding: var(--sp-3) var(--sp-4); }
  .category-row:hover { padding-left: calc(var(--sp-4) + var(--sp-2)); }
  .categories-top { padding: var(--sp-3) var(--sp-4); }
}

/* ─── 8f. SERVICES GRID BOLD (bordered grid, any number of items/rows) ─── */
.services-grid-bold {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--color-border);
  border-bottom: none; /* the last row's own cell borders already draw this edge — avoids a doubled-up line */
}
@media (max-width: 900px) {
  .services-grid-bold { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 480px) {
  .services-grid-bold { grid-template-columns: 1fr; }
}
.service-col {
  padding: var(--sp-3);
  border: 2px solid var(--color-border);
  margin: -2px 0 0 -2px;
  transition: background 0.25s;
}
.service-col:hover {
  background: #f8edcf;
  border-right-color: #111111;
  border-bottom-color: #111111;
  border-left-color: #111111;
  z-index: 1; /* wins the shared-edge overlap against neighboring cells, but leaves border-top-color alone so the strip's own top boundary line stays one unbroken line across the whole row */
}
.service-col:hover h3,
.service-col:hover p,
.service-col:hover ul li { color: #111111; }
.service-col-index {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.68rem;
  color: #c2543a;
  margin-bottom: var(--sp-1);
}
.service-col-collapse {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-1);
  font-family: var(--font-mono);
  font-size: 0.95rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #111111;
  transition: opacity 0.25s;
}

.service-col-photo {
  position: relative;
  padding: 0;
  display: block;
  width: 100%;
  background: #f8edcf;
  cursor: pointer;
  text-align: left;
}
.service-col-photo::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  background: rgba(0, 0, 0, 0);
  transition: background 0.25s;
  pointer-events: none;
}
.service-col-photo:hover::before { background: rgba(0, 0, 0, 0.06); }
.service-col-photo .service-col-collapse {
  position: absolute;
  top: var(--sp-3);
  left: var(--sp-3);
  z-index: 2;
}
.service-col h3 {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  color: var(--color-text);
  margin-bottom: var(--sp-2);
  line-height: 1;
  min-height: 2.15em;
}
.service-col p {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  line-height: 1.5;
}
.service-col ul {
  list-style: none;
  padding: 0;
  margin: var(--sp-1) 0 0;
  border-top: 1px solid var(--color-grey-mid);
}
.service-col ul li {
  font-family: 'Satoshi', sans-serif;
  font-size: 1rem;
  color: var(--color-text);
  line-height: 1.4;
  padding: var(--sp-1) 0;
  border-bottom: 1px solid var(--color-grey-mid);
}
.service-col ul li:last-child { border-bottom: none; }
/* Hover reveal — cells collapse to just the title and expand to show the list on hover.
   max-height animates the open/close (20rem is comfortably above the longest list).
   Touch screens have no hover, so they keep showing the lists. */
@media (hover: hover) {
  .service-col ul {
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    margin-top: 0;
    border-top-color: transparent;
    transition: max-height 0.4s ease, opacity 0.3s, margin-top 0.4s, border-top-color 0.3s;
  }
  .service-col:hover ul,
  .service-col:focus-within ul {
    max-height: 20rem;
    opacity: 1;
    margin-top: var(--sp-1);
    border-top-color: var(--color-grey-mid);
  }
}
.services-view-all {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: none;
  border: 2px solid var(--color-border);
  border-top: none;
  border-bottom-width: 4px;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: background 0.25s, color 0.25s;
}
.services-view-all:hover { background: #f8edcf; color: #111111; }

/* ─── 9. HERO ─── */
.hero {
  padding: 0;
  align-items: center;
  justify-content: center;
  background: transparent;
  min-height: 100vh;
}

.hero-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: var(--sp-1);
}

/* Hero logo */
.hero-logo {
  width: clamp(200px, 40vw, 560px);
  height: auto;
  display: block;
  transition-delay: 0.2s;
}

/* Slogan under logo */
.hero-slogan.reveal {
  transform: none;
}
.hero-slogan.reveal.visible {
  transform: none;
}

.hero-slogan {
  font-family: 'Satoshi', sans-serif;
  font-size: clamp(0.8rem, 3.5vw, 2.2rem);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-text);
  transition-delay: 0.5s;
}

/* scroll hint removed — hero is now a pure splash screen */

/* ─── 9b. HERO BOLD (bold landing-hero CTA section) ─── */
.kicker-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}
.contact-split .kicker-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.contact-split .kicker-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #c2543a;
  transform: rotate(45deg);
}

.hero-bold {
  position: relative;
  z-index: 1;
  padding: var(--sp-6) var(--sp-8) var(--sp-12);
  border-bottom: 2px solid var(--color-border);
}
.hero-bold-top {
  display: flex;
  justify-content: center;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: var(--sp-6);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: var(--sp-10);
}
.hero-bold-label {
  display: flex;
  align-items: center;
  gap: 8px;
}
.hero-bold-label::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  background: #c2543a;
  transform: rotate(45deg);
}
.hero-bold-headline {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(3rem, 9vw, 7rem);
  line-height: 1;
  text-align: center;
  color: var(--color-text);
  margin-bottom: var(--sp-8);
}
.hero-bold-accent {
  color: #c2543a; /* terracotta accent — placeholder, easy to retune */
}
.hero-bold-desc {
  max-width: 760px;
  margin: 0 auto var(--sp-8);
  text-align: center;
  font-family: 'Satoshi', sans-serif;
  font-size: 1.35rem;
  line-height: 1.6;
  color: var(--color-text);
}
.hero-bold-actions {
  display: flex;
  justify-content: center;
  gap: var(--sp-3);
  flex-wrap: wrap;
}
.btn-fill, .btn-outline {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--sp-3) var(--sp-6);
  border: 2px solid var(--color-border);
  transition: background 0.25s, color 0.25s;
}
.btn-fill { background: #f8edcf; color: #111111; }
.btn-fill:hover { background: var(--color-text); color: var(--color-bg); }
.btn-outline { background: none; color: var(--color-text); }
.btn-outline:hover { background: var(--color-text); color: var(--color-bg); }

@media (max-width: 700px) {
  .hero-bold-headline { font-size: clamp(2.2rem, 12vw, 4rem); }
  .hero-bold-top { flex-direction: column; align-items: center; gap: var(--sp-1); }
  .hero-bold-actions .btn-fill { display: none; } /* phones: only "See Our Work" */
  .hero-bold-desc { font-size: 1.1rem; } /* phones keep the smaller size */
}

/* ─── 9c. CONTACT SPLIT (two-column footer-style block) ─── */
.contact-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-top: 2px solid var(--color-border);
  border-bottom: 2px solid var(--color-border);
  background: #f8edcf;
}
.contact-split-col {
  padding: var(--sp-10) var(--sp-8);
  border-right: 2px solid var(--color-border);
}
.contact-split-col:last-child { border-right: none; }
.contact-split-email {
  display: block;
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  /* one line: the address is ~13.8em wide, so size it to the column (half the
     page minus its 2 × 64px padding), with a little room to spare */
  font-size: min(3rem, calc((50vw - 128px) / 14.5));
  white-space: nowrap;
  line-height: 1.1;
  color: var(--color-text);
  margin: var(--sp-3) 0 var(--sp-4);
}
.contact-split-note,
.contact-split-info {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.95rem;
  color: var(--color-grey-light);
  margin-bottom: var(--sp-2);
}
.contact-split-info a { color: var(--color-grey-light); transition: color 0.25s; }
.contact-split-info a:hover { color: var(--color-text); }
.contact-split .section-label,
.contact-split-email { color: #111111; }
.contact-split-note,
.contact-split-info,
.contact-split-info a { color: #333333; }
.contact-split-info a:hover { color: #111111; }
/* Dark mode — drop the beige panel so it matches the rest of the dark page */
:root[data-theme="dark"] .contact-split { background: var(--color-bg); }
:root[data-theme="dark"] .contact-split-email,
:root[data-theme="dark"] .contact-split-info a:hover { color: var(--color-text); }
:root[data-theme="dark"] .contact-split-note,
:root[data-theme="dark"] .contact-split-info,
:root[data-theme="dark"] .contact-split-info a { color: var(--color-grey-light); }

@media (max-width: 700px) {
  .contact-split { grid-template-columns: 1fr; }
  /* phones: the two columns read as one box — no divider, "Direct" follows the note */
  .contact-split-col { border-right: none; }
  .contact-split-col:first-child { padding-bottom: 0; }
  .contact-split-col:last-child { padding-top: var(--sp-4); }
  .contact-split-email { font-size: calc((100vw - 128px) / 14.5); } /* column is full width here */
}

/* ─── 10. ABOUT ─── */

/* About hero — headline uses the same outline-word + terracotta-dot
   technique as the homepage masthead (.masthead-outline / .masthead-dot) */
.about-hero {
  padding: calc(74px + var(--sp-8)) var(--sp-8) var(--sp-8);
  border-bottom: 2px solid var(--color-border);
}
.about-hero-top {
  display: flex;
  justify-content: space-between;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-6);
  border-bottom: 2px solid var(--color-border);
}
.about-hero-headline {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  line-height: 1;
  color: var(--color-text);
  margin: 0 auto var(--sp-6);
  max-width: 1100px;
  text-align: center;
}
.about-hero-body { max-width: 900px; margin: 0 auto; text-align: center; }
.about-hero-body p {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.2rem;
  line-height: 1.7;
  color: var(--color-grey-light);
  margin-bottom: var(--sp-3);
}
.about-hero-body p:last-child { margin-bottom: 0; }
@media (max-width: 700px) {
  /* phones: label left, "Paris, France" right on the same line */
  .about-hero-top { align-items: center; gap: var(--sp-2); }
  .about-hero { border-bottom: none; } /* the footer's own top line is enough */
}

/* Closing team statement — mirrors the reference site's "one person" close,
   but with two named team members + photos, since Onset Films is a two-person studio */
.team-statement {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 2px solid var(--color-border);
}
.team-statement-text {
  padding: var(--sp-10) var(--sp-8);
  border-right: 2px solid var(--color-border);
}
.team-statement-headline {
  font-family: 'SuisseIntl', var(--font-serif);
  font-weight: 700;
  text-transform: uppercase;
  font-size: clamp(2rem, 4vw, 3.4rem);
  line-height: 1.05;
  color: var(--color-text);
  margin: var(--sp-2) 0 var(--sp-4);
}
.highlight-yellow {
  background: #f8edcf;
  color: #111111;
  padding: 0 6px;
}
.team-statement-text p {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--color-text);
  max-width: 480px;
}
.team-statement-photos {
  display: grid;
  grid-template-columns: 1fr 1fr;
}
.team-statement-photo {
  position: relative;
  border-left: 2px solid var(--color-border);
  overflow: hidden;
}
.team-statement-photo:first-child { border-left: none; }
.team-statement-photo img {
  width: 100%;
  height: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}
.team-statement-caption {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: var(--sp-2) var(--sp-3);
  background: rgba(17, 17, 17, 0.85);
}
.team-statement-caption span {
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #ffffff;
}
.team-statement-caption span:first-child { font-weight: 700; }
@media (max-width: 700px) {
  .team-statement { grid-template-columns: 1fr; }
  .team-statement-text { border-right: none; border-bottom: 2px solid var(--color-border); padding: var(--sp-6) var(--sp-4); }
}
@media (max-width: 480px) {
  .team-statement-photos { grid-template-columns: 1fr; }
  .team-statement-photo { border-left: none; border-top: 2px solid var(--color-border); }
  .team-statement-photo:first-child { border-top: none; }
}

/* ─── 10b. TEAM PAGE ─── */
.team-section {
  width: 100%;
  padding: var(--sp-12) var(--sp-8);
  box-sizing: border-box;
}

.team-section--l2 {
  padding-left: 0;
  padding-right: 0;
}

.team-inner {
  width: 100%;
}

.team-member {
  display: flex;
  gap: 0;
  align-items: center;
  justify-content: center;
  padding: var(--sp-8) 0;
}

.team-photo-wrap {
  flex-shrink: 0;
  width: 300px;
  margin-left: var(--sp-10);
  margin-right: 112px;
  display: flex;
  flex-direction: column;
}

.team-photo-placeholder {
  width: 300px;
  aspect-ratio: 3 / 4;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}

.team-photo-wrap img {
  width: 300px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
}

.team-info {
  flex: 1;
  padding-top: var(--sp-1);
  max-width: 640px;
  padding-right: var(--sp-8);
}

.team-name {
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  margin: var(--sp-3) 0 var(--sp-2);
  line-height: 1.1;
}

.team-role {
  display: block;
  font-family: 'Satoshi', sans-serif;
  font-size: 1.15rem;
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-text);
  margin-top: 0;
  margin-bottom: 0;
  width: 100%;
  white-space: nowrap;
}

.team-bio p {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.1rem;
  color: var(--color-text);
  line-height: 1.8;
  margin-bottom: var(--sp-3);
  text-align: justify;
}

.team-bio p:last-child { margin-bottom: 0; }

.team-bio-heading {
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  color: var(--color-text);
  margin: var(--sp-5) 0 var(--sp-3);
  font-weight: 400;
}

.team-bio-list {
  list-style: none;
  padding: 0;
  margin: 0;
  margin-left: 3px;
}

.team-bio-list li {
  font-family: 'Satoshi', sans-serif;
  font-size: 1.05rem;
  color: var(--color-text);
  line-height: 1.7;
  padding-left: var(--sp-4);
  position: relative;
  margin-bottom: var(--sp-1);
}

.team-bio-list li::before {
  content: '•';
  position: absolute;
  left: calc(var(--sp-4) / 2);
  transform: translateX(-50%);
  color: var(--color-text);
}

.team-divider {
  border: none;
  border-top: 2px solid var(--color-border);
  margin: 0;
}

/* ── LAYOUT 2: side by side ── */
.team-layout-2 {
  display: flex;
  flex-direction: row;
  align-items: stretch;
}

.team-col {
  flex: 0 0 calc(50% - 0.5px);
  min-width: 0;
}

.team-col-divider {
  width: 1px;
  background: var(--color-border);
  flex-shrink: 0;
  margin: var(--sp-8) 0;
}

.team-layout-2 .team-member {
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: var(--sp-8) var(--sp-8) var(--sp-8);
}

.team-layout-2 .team-photo-wrap {
  width: 100%;
  flex-shrink: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

.team-layout-2 .team-photo-wrap img {
  width: 240px;
  aspect-ratio: 3 / 4;
  object-fit: cover;
  display: block;
  margin: 0 auto;
}

.team-layout-2 .team-name {
  font-size: 1.6rem;
  font-weight: 100;
  margin-top: var(--sp-3);
  margin-bottom: var(--sp-1);
  text-align: center;
}

.team-col:first-child .team-role,
.team-col:last-child .team-role {
  text-align: center;
  text-align-last: center;
}

.role-sep {
  margin: 0 0.5em;
}

.team-layout-2 .team-role {
  display: block;
  width: 240px;
  margin: 0 auto;
  text-align: justify;
  text-align-last: justify;
  white-space: nowrap;
  font-size: 1.3rem;
  font-weight: 350;
  letter-spacing: 0.05em;
}

.team-col:first-child .team-role {
  transform: translateX(0px);
}

.team-layout-2 .team-info {
  width: 100%;
  max-width: none;
  overflow: visible;
  padding: var(--sp-6) 0 0;
  padding-right: 0;
}

.team-layout-2 .team-bio p {
  font-size: 1.05rem;
  line-height: 1.85;
}

@media (max-width: 900px) {
  .team-layout-2 { flex-direction: column; }
  .team-col { flex: 0 0 auto; width: 100%; }
  .team-col-divider { width: 100%; height: 1px; margin: 0; }
  .team-layout-2 .team-member { padding: var(--sp-8) var(--sp-4); }
  .team-layout-2 .team-photo-wrap { width: 100%; margin-right: 0; }
  .team-layout-2 .team-photo-wrap img { width: 300px; }
  .team-layout-2 .team-role { white-space: nowrap; width: 75%; max-width: 240px; }
}

@media (max-width: 768px) {
  .team-section { padding: var(--sp-8) var(--sp-4); }
  .team-member { flex-direction: column; gap: var(--sp-5); align-items: center; }
  .team-photo-wrap { width: 100%; margin-left: 0; margin-right: 0; display: flex; flex-direction: column; }
  .team-photo-placeholder { width: 100%; aspect-ratio: 3 / 4; }
  .team-photo-wrap img { width: 100%; height: auto; aspect-ratio: 3 / 4; }
  .team-info { max-width: 100%; padding-right: 0; }
  .team-layout-2 .team-member { padding: var(--sp-8) var(--sp-1); }
  .team-layout-2 .team-photo-wrap { width: 100%; margin-right: 0; }
  .team-layout-2 .team-photo-wrap img { width: 75%; max-width: 300px; display: block; margin: 0 auto; }
  .team-layout-2 .team-role { white-space: nowrap; width: 75%; max-width: 240px; }
}

/* ─── 11. PROJECTS ─── */
.projects { border-top: 2px solid var(--color-border); }

.projects-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--sp-3);
  max-width: 1100px;
}

.project-card {
  border: 2px solid var(--color-border);
  padding: var(--sp-4);
  background: var(--color-surface);
  color: var(--color-text);
  border-radius: 12px;
  transition: border-color 0.3s, box-shadow 0.3s, transform 0.3s var(--ease);
}
.project-card:hover {
  border-color: var(--color-grey-light);
  box-shadow: 0 4px 32px rgba(0,0,0,0.12);
  transform: translateY(-3px);
}

.card-top {
  display: flex;
  justify-content: space-between;
  margin-bottom: var(--sp-3);
}
.project-genre {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  border: 2px solid var(--color-border);
  padding: 3px 8px;
}
.project-year { font-size: 0.65rem; color: var(--color-grey-mid); }

.project-title {
  font-family: var(--font-serif);
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}

/* Waveform */
.waveform {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 32px;
  margin-bottom: var(--sp-3);
}
.waveform span {
  flex: 1;
  background: var(--color-border);
  border-radius: 2px;
}
.waveform span:nth-child(1)  { height: 30%; }
.waveform span:nth-child(2)  { height: 60%; }
.waveform span:nth-child(3)  { height: 90%; }
.waveform span:nth-child(4)  { height: 50%; }
.waveform span:nth-child(5)  { height: 75%; }
.waveform span:nth-child(6)  { height: 40%; }
.waveform span:nth-child(7)  { height: 100%; }
.waveform span:nth-child(8)  { height: 65%; }
.waveform span:nth-child(9)  { height: 85%; }
.waveform span:nth-child(10) { height: 45%; }
.waveform span:nth-child(11) { height: 70%; }
.waveform span:nth-child(12) { height: 55%; }
.waveform span:nth-child(13) { height: 80%; }
.waveform span:nth-child(14) { height: 35%; }
.waveform span:nth-child(15) { height: 60%; }

.waveform.playing span {
  background: var(--color-grey-light);
  animation: wave-bar 0.8s ease-in-out infinite alternate;
}
.waveform.playing span:nth-child(odd)  { animation-duration: 0.6s; }
.waveform.playing span:nth-child(even) { animation-duration: 0.9s; }

@keyframes wave-bar {
  from { height: 15%; }
  to   { height: 100%; }
}

/* Player controls */
.player-controls {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
}
.play-btn {
  width: 36px;
  height: 36px;
  border: 2px solid var(--color-border);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color 0.3s, background 0.3s;
}
.play-btn:hover {
  border-color: var(--color-grey-mid);
  background: rgba(0,0,0,0.06);
}
.play-btn svg {
  width: 12px;
  height: 12px;
  fill: var(--color-text);
  stroke: none;
}
.hidden { display: none !important; }

.progress-bar {
  flex: 1;
  height: 1px;
  background: var(--color-border);
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  width: 0%;
  background: var(--color-grey-mid);
  transition: width 0.1s linear;
}
.time-display {
  font-size: 0.6rem;
  color: var(--color-grey-mid);
  white-space: nowrap;
  min-width: 28px;
}

/* ─── 11b. VIDEO CAROUSEL ─── */
.projects-carousel {
  position: relative;
  z-index: 1;
  padding: 0;
  background: var(--color-bg);
  line-height: 0;
}

.carousel-viewport {
  position: relative;
  width: 100%;
  height: clamp(260px, 55vh, 620px);
  overflow: hidden;
  background: var(--color-bg);
  perspective: 1000px;
}

.carousel-track {
  display: flex;
  align-items: center;
  height: 100%;
  gap: 10px;
  padding: 4px 10px;
  box-sizing: border-box;
  will-change: transform;
  position: relative;
}

.carousel-slide {
  flex: 1;
  height: 65%;
  position: relative;
  overflow: hidden;
  border-radius: 0;
  opacity: 0.45;
  will-change: transform;
  transition: flex   1.4s cubic-bezier(0.16, 1, 0.3, 1),
              height 1.4s cubic-bezier(0.16, 1, 0.3, 1),
              opacity 1.4s cubic-bezier(0.16, 1, 0.3, 1);
}

.carousel-slide.active {
  flex: 1.6;
  height: 100%;
  opacity: 1;
}



.carousel-video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Cover image overlay — shown instantly on side slides, hidden on active center */
.carousel-cover {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #eeeeee center / cover no-repeat;
  opacity: 1;
  transition: opacity 1.6s ease;
  pointer-events: none;
}
.carousel-slide.cover-fade .carousel-cover {
  opacity: 0;
}

.carousel-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--sp-2);
  pointer-events: none;
}

/* hide placeholder once a real video is loaded and playing */
.carousel-slide.has-video .carousel-placeholder { display: none; }

.carousel-num {
  font-family: var(--font-serif);
  font-size: clamp(3.5rem, 9vw, 7rem);
  font-weight: 700;
  color: #d9d9d9;
  line-height: 1;
  letter-spacing: -0.02em;
}

.carousel-hint {
  font-family: var(--font-mono);
  font-size: 0.6rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: #c9c9c9;
}

.carousel-arrow {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;
  color: #ffffff;
  cursor: pointer;
  transition: opacity 0.3s;
  padding: var(--sp-2);
  opacity: 0.35;
}
.carousel-arrow svg {
  width: 10px;
  height: 16px;
  display: block;
}
.carousel-arrow:hover { opacity: 0.7; }
#carousel-prev { left: var(--sp-3); }
#carousel-next { right: var(--sp-3); }

.carousel-sound {
  position: absolute;
  bottom: var(--sp-2);
  right: var(--sp-3);
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #f0f0f0;
  cursor: pointer;
  transition: color 0.3s;
  padding: 6px;
}
.carousel-sound:hover { color: #fff; }
.carousel-sound svg { width: 18px; height: 18px; }

.carousel-indicators {
  display: none;
}

/* Play button — shown over the active slide when it has a linked YouTube video */
.carousel-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 8;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.carousel-play-btn svg { width: 22px; height: 22px; margin-left: 3px; }
.carousel-play-btn:hover { background: rgba(0, 0, 0, 0.65); transform: translate(-50%, -50%) scale(1.08); }
.carousel-play-btn.hidden { display: none; }

/* ─── 11c. VIDEO OVERLAY (plays in place, filling the carousel rectangle) ─── */
.video-modal {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: none;
  background: #000;
}
.video-modal.open { display: block; }

.video-modal iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.video-modal-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 21;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: #f0f0f0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.video-modal-close:hover { opacity: 1; }

@media (max-width: 600px) {
  .carousel-play-btn { width: 52px; height: 52px; }
  .carousel-play-btn svg { width: 18px; height: 18px; }
}

.carousel-dot {
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--color-border);
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.carousel-dot.active {
  background: var(--color-grey-mid);
  transform: scale(1.4);
}

/* ─── 11c. PROJECTS LIST ─── */
.projects-list {
  border-top: 2px solid var(--color-border);
}

.projects-list-inner {
  max-width: 1100px;
}

.projects-list-title {
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: clamp(2.4rem, 6vw, 5rem);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
  letter-spacing: -0.01em;
}

/* ─── ALL-PROJECTS GRID (one page, filterable by category) ─── */
.projects-filters {
  display: flex;
  flex-wrap: wrap;
  border: 2px solid var(--color-border);
  margin: var(--sp-2) calc(-1 * var(--sp-8)) -2px;
}
.projects-filter {
  flex: 1;
  min-width: 120px;
  background: none;
  border: none;
  border-right: 2px solid var(--color-border);
  border-top: 2px solid var(--color-border);
  margin-top: -2px;
  padding: var(--sp-3) var(--sp-2);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
  transition: background 0.25s, color 0.25s;
}
.projects-filter[data-filter="all"] {
  flex: 0 0 auto;
  min-width: auto;
  padding-left: var(--sp-8);
  padding-right: var(--sp-8);
}
/* Light mode only — "All" stays beige even when another filter is selected */
:root:not([data-theme="dark"]) .projects-filter[data-filter="all"]:not(.active) {
  background: #f8edcf;
  color: #111111;
}
.projects-filter:last-child { border-right: none; }
.projects-filter:hover:not(.active) { background: #f8edcf; color: #111111; }
.projects-filter.active {
  background: var(--color-text);
  color: var(--color-bg);
}
:root[data-theme="dark"] .projects-filter.active { background: #f8edcf; color: #111111; }
.projects-filter-toggle { display: none; } /* mobile only — see the 560px block below */

.projects-grid-wall {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border: 2px solid var(--color-border);
  /* full-bleed: .section's own horizontal padding is the only thing between
     this and the true viewport edge, so cancel exactly that (not vw math,
     which breaks unless the ancestor happens to be perfectly centered) */
  margin-left: calc(-1 * var(--sp-8));
  margin-right: calc(-1 * var(--sp-8));
}

.project-tile {
  border: 2px solid var(--color-border);
  margin: -1px 0 0 -1px;
  display: flex;
  flex-direction: column;
}
.project-tile.is-hidden { display: none; }

.project-tile-media { position: relative; }
.project-tile-media .project-feature-frame { border: none; border-radius: 0; }

.project-tile-info {
  padding: var(--sp-3);
  flex: 1;
  display: flex;
  flex-direction: column;
  transition: background 0.25s;
}
.project-tile:hover .project-tile-info { background: #f8edcf; }
.project-tile:hover .project-tile-info * { color: #111111; }
.project-tile-top {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--color-text);
  margin-bottom: var(--sp-2);
}
.project-tile-category { text-transform: uppercase; white-space: nowrap; }
.project-tile-title {
  font-family: var(--font-serif);
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--color-text);
  line-height: 1.15;
  margin-bottom: var(--sp-2);
}
@media (max-width: 1200px) {
  .projects-grid-wall { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  /* .section's own horizontal padding shrinks to --sp-4 at this breakpoint,
     so the full-bleed cancel-out has to shrink along with it (see the
     full-bleed note above) instead of zeroing out and leaving a gap */
  .projects-grid-wall {
    grid-template-columns: repeat(2, 1fr);
    margin-left: calc(-1 * var(--sp-4));
    margin-right: calc(-1 * var(--sp-4));
  }
  .projects-filters { margin-left: calc(-1 * var(--sp-4)); margin-right: calc(-1 * var(--sp-4)); }
  .projects-filter { min-width: 100px; font-size: 0.62rem; }
}
@media (max-width: 480px) {
  /* .section's padding shrinks again to --sp-2 at this breakpoint */
  .projects-grid-wall { margin-left: calc(-1 * var(--sp-2)); margin-right: calc(-1 * var(--sp-2)); }
  .projects-filters { margin-left: calc(-1 * var(--sp-2)); margin-right: calc(-1 * var(--sp-2)); }
}
@media (max-width: 560px) {
  .projects-grid-wall { grid-template-columns: 1fr; }
}

/* Filters become a dropdown whenever the buttons can't all fit on one line —
   ProjectFilter (main.js) measures that and adds .is-dropdown. The toggle shows
   the current category ("ALL ▾"); the other categories stack under it while open. */
.projects-filters.is-dropdown { flex-direction: column; }
.projects-filters.is-dropdown .projects-filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: none;
  border: none;
  padding: var(--sp-3) var(--sp-4);
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--color-text);
}
.projects-filter-toggle-arrow {
  width: 8px;
  height: 8px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.25s;
}
.projects-filters.open .projects-filter-toggle-arrow { transform: translateY(2px) rotate(-135deg); }
.projects-filters.is-dropdown .projects-filter,
.projects-filters.is-dropdown .projects-filter[data-filter="all"] {
  display: none;
  flex: none;
  width: 100%;
  min-width: 0;
  margin-top: 0;
  border-right: none;
  border-top: 2px solid var(--color-border);
  padding: var(--sp-3) var(--sp-4);
  text-align: left;
}
.projects-filters.is-dropdown.open .projects-filter { display: block; }
.projects-filters.is-dropdown.open .projects-filter.active { display: none; } /* already shown on the toggle */
/* in the list, "All" looks like the other options (no permanent beige) */
:root:not([data-theme="dark"]) .projects-filters.is-dropdown .projects-filter[data-filter="all"]:not(.active) { background: none; color: var(--color-text); }

/* ─── PROJECT TABS ─── */
.project-tabs-wrap {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  margin-bottom: var(--sp-2);
}

.project-tabs {
  display: flex;
  align-items: center;
  gap: 0;
  flex: 1;
  min-width: 0;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: var(--sp-3);
}
.project-tabs::-webkit-scrollbar { display: none; }

.project-tabs-arrow {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  margin-bottom: var(--sp-3);
  color: var(--color-grey-mid);
  cursor: pointer;
  transition: color 0.3s, opacity 0.3s;
}
.project-tabs-arrow:hover { color: var(--color-text); }
.project-tabs-arrow svg { width: 9px; height: 14px; display: block; }
.project-tabs-arrow.is-hidden { visibility: hidden; }

.project-tabs .project-tab:not(:last-child)::after {
  content: '';
  display: inline-block;
  width: 1px;
  height: 1em;
  background: var(--color-border);
  margin: 0 var(--sp-4);
  vertical-align: middle;
}

.project-tab {
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: 1.1rem;
  letter-spacing: 0.02em;
  text-transform: none;
  white-space: nowrap;
  flex-shrink: 0;
  color: var(--color-grey-mid);
  transition: color 0.25s;
}

.project-tab.active {
  color: var(--color-text);
}

.project-tab:hover {
  color: var(--color-text);
}

.project-tab-panel {
  display: none;
}

.project-tab-panel.active {
  display: block;
}

.projects-category {
  margin-bottom: var(--sp-6);
}

.category-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 0.58rem;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  padding-bottom: var(--sp-1);
  border-bottom: 2px solid var(--color-border);
  margin-bottom: 0;
}

.music-play-btn {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--color-grey-mid);
  margin-left: 0;
  padding: 6px 4px;
  border-radius: 4px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  transition: color 0.2s, background 0.2s;
}
.music-play-btn svg { width: 13px; height: 15px; }
.music-play-btn:hover { color: var(--color-text); }
.music-play-btn.playing { color: var(--color-text); }
.music-play-btn.playing svg,
.music-play-btn.paused svg { display: none; }

.music-pause-icon {
  display: none;
  gap: 3px;
  align-items: center;
  height: 15px;
}
.music-pause-icon i {
  display: block;
  width: 2px;
  height: 12px;
  background: currentColor;
  border-radius: 1px;
}
.music-play-btn.paused { color: var(--color-text); }
.music-play-btn.paused .music-pause-icon { display: flex; }
.music-play-btn.paused .music-wave { display: none; }

.music-wave {
  display: none;
  align-items: flex-end;
  gap: 2.5px;
  height: 15px;
}
.music-play-btn.playing .music-wave { display: flex; }
.music-wave i {
  display: block;
  width: 2px;
  border-radius: 1px;
  background: currentColor;
  animation: wave-bar 1.1s ease-in-out infinite;
}
.music-wave i:nth-child(1) { animation-delay: 0s; }
.music-wave i:nth-child(2) { animation-delay: 0.18s; }
.music-wave i:nth-child(3) { animation-delay: 0.36s; }
.music-wave i:nth-child(4) { animation-delay: 0.54s; }
@keyframes wave-bar {
  0%, 100% { height: 4px; }
  50% { height: 15px; }
}

.music-timer {
  font-family: var(--font-serif);
  font-size: 11px;
  color: var(--color-grey-mid);
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  white-space: nowrap;
  pointer-events: none;
  margin-left: 6px;
  transition: opacity 0.3s ease, max-width 0.3s ease;
}
.music-play-btn.playing .music-timer,
.music-play-btn.paused .music-timer {
  opacity: 1;
  max-width: 100px;
}

.ep-toggle { margin-left: 0; }
.ep-toggle svg { transition: transform 0.3s cubic-bezier(0.76, 0, 0.24, 1); }
.music-ep.open .ep-toggle svg { transform: rotate(90deg); }

.ep-tracklist {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s cubic-bezier(0.76, 0, 0.24, 1);
  padding-left: calc((var(--sp-3) + 21px + var(--sp-4)) / 2);
}
.music-ep.open .ep-tracklist { max-height: 600px; }

.ep-title-row {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}
.ep-title-row h3 {
  cursor: pointer;
}

.ep-track {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) 0;
  border-top: 1px solid rgba(0,0,0,0.08);
}
.ep-track h3 { color: var(--color-text); }
.ep-track .music-play-btn { margin-left: 0; }

.project-item {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 2px solid var(--color-border);
  cursor: pointer;
}

.project-thumb {
  width: 56px;
  height: 56px;
  object-fit: cover;
  border-radius: 4px;
  flex-shrink: 0;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.project-item:hover .project-thumb { opacity: 1; }
.project-item:hover { padding-left: 0; }

.project-item .service-body { flex: 1; }
.project-item .service-body h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.1rem, 2.2vw, 1.5rem);
  font-weight: 500;
  color: var(--color-text);
  transition: color 0.3s;
}
.project-item:hover .service-body h3 { color: var(--color-text); }

.project-genre-tag {
  font-size: 0.58rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  min-width: 70px;
  text-align: right;
}

.project-year-tag {
  font-size: 0.62rem;
  letter-spacing: 0.08em;
  color: var(--color-grey-mid);
  min-width: 36px;
  text-align: right;
}

.project-item .service-arrow {
  font-size: 1rem;
  color: var(--color-grey-mid);
  transition: transform 0.3s var(--ease), color 0.3s;
}
.project-item:hover .service-arrow {
  transform: translateX(6px);
  color: var(--color-text);
}

/* ─── 11d. PROJECT FEATURE (title/desc + inline-playing video, one per project) ─── */
.project-feature {
  display: flex;
  align-items: center;
  gap: var(--sp-8);
  padding: var(--sp-8) 0;
  border-bottom: 2px solid var(--color-border);
}

.project-feature-info {
  flex: 1;
  max-width: 420px;
}
.project-feature-title {
  font-family: var(--font-serif);
  font-size: clamp(1.8rem, 3vw, 2.4rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  line-height: 1.1;
  text-transform: uppercase;
}
.project-feature-meta {
  font-family: var(--font-mono);
  font-size: 0.75rem;
  letter-spacing: 0.05em;
  color: var(--color-grey-mid);
  margin-bottom: var(--sp-4);
}
.project-feature-desc {
  font-size: 0.95rem;
  line-height: 1.75;
  color: var(--color-grey-light);
  margin-bottom: var(--sp-6);
}
.project-feature-credit {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-grey-mid);
  margin-bottom: var(--sp-2);
}

/* Optional festivals/awards list — only present on some projects */
.project-feature-festivals-label {
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.05em;
  color: var(--color-grey-mid);
  margin-top: var(--sp-4);
  margin-bottom: var(--sp-2);
}
.project-feature-festival-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.project-feature-festival-list li {
  font-size: 0.85rem;
  line-height: 1.6;
  color: var(--color-grey-light);
  padding-left: var(--sp-3);
  position: relative;
  margin-bottom: var(--sp-1);
}
.project-feature-festival-list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: var(--color-grey-mid);
}

/* Optional press/article links — only present on some projects */
.project-feature-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-1) var(--sp-4);
  margin-top: var(--sp-4);
}
.project-feature-links a {
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  color: var(--color-text);
  text-decoration: underline;
  text-underline-offset: 3px;
  transition: color 0.3s;
}
.project-feature-links a:hover { color: var(--color-grey-mid); }

/* Optional photo gallery — sits below the title/video row, full width */
.project-feature-gallery {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-3);
  margin-top: var(--sp-8);
}
.project-feature-gallery img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  display: block;
}
@media (max-width: 700px) {
  .project-feature-gallery { grid-template-columns: repeat(2, 1fr); }
}

/* "Next project" control — cycles to the next tab, at the end of each panel's text column */
.project-feature-next {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  margin-top: var(--sp-6);
  background: none;
  border: none;
  padding: 0;
  cursor: pointer;
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  transition: color 0.3s;
}
.project-feature-next-arrow {
  display: inline-block;
  transition: transform 0.3s var(--ease);
}
.project-feature-next:hover {
  color: var(--color-text);
}
.project-feature-next:hover .project-feature-next-arrow {
  transform: translateX(4px);
}

.project-feature-media { flex: 1.4; }

.project-feature-frame {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
}
.project-feature-frame img.project-feature-thumb,
.project-feature-frame video.project-feature-thumb {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Play button — always visible until the linked video is opened */
.project-play-btn {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 5;
  width: 64px;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: #ffffff;
  cursor: pointer;
  transition: background 0.3s, transform 0.3s;
}
.project-play-btn svg { width: 22px; height: 22px; margin-left: 3px; }
.project-play-btn:hover { background: rgba(0, 0, 0, 0.65); transform: translate(-50%, -50%) scale(1.08); }

/* Video plays in place, filling the frame exactly — no new tab */
.project-video-overlay {
  position: absolute;
  inset: 0;
  z-index: 10;
  display: none;
  background: #000;
}
.project-video-overlay.open { display: block; }
.project-video-overlay iframe,
.project-video-overlay video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.project-video-overlay video { object-fit: cover; }
.project-video-close {
  position: absolute;
  top: var(--sp-2);
  right: var(--sp-2);
  z-index: 11;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.55);
  font-family: var(--font-mono);
  font-size: 1.25rem;
  line-height: 1;
  color: #f0f0f0;
  cursor: pointer;
  opacity: 0.85;
  transition: opacity 0.3s;
}
.project-video-close:hover { opacity: 1; }

/* ─── PROJECT LIGHTBOX — the whole tile acts as a button; opens a widget
   with the video on top and (if present) the stills stacked below it ─── */
.project-tile-clickable { cursor: pointer; }
.project-tile-clickable .project-play-btn { pointer-events: none; } /* the tile itself is the click target */

.stills-lightbox {
  position: fixed;
  inset: 0;
  z-index: 2000;
  display: none;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.8); /* dark backdrop — the video and stills sit straight on it, no card */
  padding: var(--sp-6) var(--sp-4);
}
.stills-lightbox.open { display: flex; }
.stills-lightbox-card {
  position: relative;
  width: 100%;
  max-width: 1100px;
  max-height: 90vh;
  background: none;
  display: flex;
}
.stills-lightbox-track {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: var(--sp-6);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.stills-lightbox-track .lightbox-video {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.stills-lightbox-track .lightbox-video iframe,
.stills-lightbox-track .lightbox-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.stills-lightbox-track .lightbox-title {
  font-family: var(--font-serif);
  font-size: clamp(1.4rem, 2.5vw, 2rem);
  font-weight: 700;
  text-transform: uppercase;
  line-height: 1.1;
  color: #ffffff;
  margin-bottom: calc(-1 * var(--sp-2)); /* sits closer to the credit line below it */
}
.stills-lightbox-track .lightbox-credit {
  font-family: var(--font-mono);
  font-size: 0.8rem;
  letter-spacing: 0.02em;
  line-height: 1.6;
  color: #ffffff; /* white — always on the dark backdrop, in both themes */
}
.stills-lightbox-track .lightbox-stills {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--sp-1); /* space between stills */
}
.stills-lightbox-track .lightbox-stills img {
  height: 100%;
  object-fit: cover;
  aspect-ratio: 4 / 3;
  margin: 0;
  border: none;
}
.stills-lightbox-track img {
  width: 100%;
  height: auto;
  display: block;
  border: 2px solid var(--color-border);
}
.stills-lightbox-close {
  position: fixed; /* pinned to the screen's top-right corner, clear of the video */
  top: var(--sp-3);
  right: var(--sp-3);
  z-index: 2001;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-surface);
  border: 2px solid var(--color-border);
  font-size: 1.3rem;
  line-height: 1;
  color: var(--color-text);
  cursor: pointer;
  transition: background 0.3s;
}
.stills-lightbox-close:hover { background: #f8edcf; color: #111111; }

@media (max-width: 900px) {
  .project-feature { flex-direction: column; align-items: flex-start; gap: var(--sp-4); }
  .project-feature-info { max-width: 100%; }
}
@media (max-width: 560px) {
  .stills-lightbox { padding: var(--sp-3); }
  .stills-lightbox-card { max-height: 90vh; }
  .stills-lightbox-track { padding: var(--sp-4); }
  .stills-lightbox-close { top: var(--sp-2); right: var(--sp-2); width: 32px; height: 32px; font-size: 1.1rem; }
  .stills-lightbox-track .lightbox-stills { grid-template-columns: repeat(2, 1fr); }
}

/* ─── PROJECT FEATURE — STACKED VARIANT (centered title/subtitle above, video full-width below) ─── */
.project-feature-stack {
  padding: var(--sp-8) 0;
  border-bottom: 2px solid var(--color-border);
}

.project-feature-stack-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto var(--sp-6);
}
.project-feature-stack-title {
  font-family: var(--font-serif);
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  line-height: 1.25;
  text-transform: uppercase;
}
.project-feature-stack-subtitle {
  font-size: 0.85rem;
  color: var(--color-grey-mid);
  line-height: 1.8;
}

.project-feature-stack-media {
  position: relative;
  max-width: 900px;
  margin: 0 auto;
}

.project-feature-stack-next {
  display: flex;
  justify-content: center;
  margin-top: var(--sp-6);
}

/* ─── 12. SERVICES ─── */
.services { border-top: 2px solid var(--color-border); }
.services-list { max-width: 1100px; }

.service-item {
  display: flex;
  align-items: flex-start;
  gap: var(--sp-4);
  padding: var(--sp-4) 0;
  border-bottom: 2px solid var(--color-border);
  cursor: pointer;
  transition: padding-left 0.3s var(--ease);
}
.service-item:first-of-type { border-top: 2px solid var(--color-border); }
.service-item:hover { padding-left: var(--sp-2); }

.service-number {
  font-size: 0.65rem;
  letter-spacing: 0.1em;
  color: var(--color-grey-mid);
  padding-top: 4px;
  min-width: 28px;
}
.service-body { flex: 1; }
.service-body h3 {
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2.5vw, 1.6rem);
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: var(--sp-1);
  transition: color 0.3s;
  text-transform: uppercase;
}
.service-body p {
  font-family: 'Satoshi', sans-serif;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--color-text);
  max-width: none;
  white-space: nowrap;
  line-height: 1.7;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transition: max-height 0.4s var(--ease), opacity 0.4s;
}
.service-item:hover .service-body p {
  max-height: 80px;
  opacity: 1;
}
.service-arrow {
  font-size: 1rem;
  color: var(--color-grey-mid);
  padding-top: 2px;
  transition: transform 0.3s var(--ease), color 0.3s;
}
.service-item:hover .service-arrow {
  transform: translateX(6px);
  color: var(--color-text);
}

/* ─── 13. CONTACT ─── */

/* Centers the .contact-split rectangle in the remaining space between the
   fixed navbar and the footer, instead of it sitting right under the nav
   with all the leftover space collapsing to the bottom of the page. */
.contact-hero {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 74px 0; /* equal top/bottom so centering is symmetric, just clears the fixed navbar */
}

@media (max-width: 768px) {
  .hero-slogan { white-space: normal; text-align: center; padding: 0 var(--sp-4); }
  .mobile-menu { width: 50%; }
}


.contact {
  border-top: 2px solid var(--color-border);
  min-height: 100vh;
}
.contact-inner { max-width: 700px; }

.contact-form {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-4);
}
.form-group {
  display: flex;
  flex-direction: column;
  gap: var(--sp-1);
}
.form-group label {
  font-size: 0.6rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
}
.form-group input,
.form-group textarea {
  background: transparent;
  border: none;
  border-bottom: 2px solid var(--color-border);
  color: var(--color-text);
  font-family: var(--font-mono);
  font-size: 0.85rem;
  padding: var(--sp-2) 0;
  outline: none;
  transition: border-color 0.3s;
  resize: none;
}
.form-group input:focus,
.form-group textarea:focus { border-color: var(--color-grey-light); }
.form-group input::placeholder,
.form-group textarea::placeholder { color: var(--color-grey-mid); }

.submit-btn {
  align-self: flex-start;
  margin-top: var(--sp-2);
  font-family: var(--font-mono);
  font-size: 0.7rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-text);
  border: 2px solid var(--color-border);
  padding: var(--sp-2) var(--sp-4);
  transition: background 0.3s, border-color 0.3s, color 0.3s;
}
.submit-btn:hover {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}

.contact-links {
  margin-top: var(--sp-8);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.contact-links > a {
  font-size: 0.75rem;
  color: var(--color-grey-light);
  transition: color 0.3s;
}
.contact-links > a:hover { color: var(--color-text); }

.social-links { display: flex; gap: var(--sp-4); }
.social-links a {
  font-size: 0.65rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--color-grey-mid);
  transition: color 0.3s;
  position: relative;
}
.social-links a::after {
  content: '';
  position: absolute;
  bottom: -2px; left: 0;
  width: 0; height: 1px;
  background: var(--color-text);
  transition: width 0.3s;
}
.social-links a:hover { color: var(--color-text); }
.social-links a:hover::after { width: 100%; }

/* ─── 15. FOOTER ─── */
.footer {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  margin-top: auto;
  padding: var(--sp-4) var(--sp-8);
  border-top: 2px solid var(--color-border);
  font-size: 0.75rem;
  letter-spacing: 0.1em;
  color: var(--color-text);
  font-family: 'Satoshi', sans-serif;
  font-weight: 300;
}
.footer-right {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
}

/* ─── 15. PAGE HEADER (used on inner pages) ─── */
.page-hero {
  position: relative;
  z-index: 1;
  padding: calc(var(--sp-16) + var(--sp-8)) var(--sp-8) var(--sp-8);
  border-bottom: 2px solid var(--color-border);
}
.page-hero .section-label {
  margin-bottom: var(--sp-3);
}
/* Groups a heading + its own tab bar + panels, so multiple independent
   project groups (e.g. Documentaries, Editing) can sit on one page */
.project-section { margin-bottom: var(--sp-12); }
.project-section + .project-section {
  padding-top: var(--sp-8);
  border-top: 2px solid var(--color-border);
}

.page-hero-super {
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: clamp(2.6rem, 7vw, 5.5rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--color-text);
  margin-bottom: var(--sp-3);
  text-transform: uppercase;
}
.page-hero h1 {
  font-family: 'SuisseIntl', var(--font-serif);
  font-size: clamp(1.4rem, 2.8vw, 2.8rem);
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  white-space: nowrap;
  text-transform: uppercase;
}

/* ─── 16. RESPONSIVE ─── */
@media (max-width: 900px) {
  .logo-img { height: 26px; margin-left: 0px; }
  .service-body p { white-space: normal; max-width: 100%; }
  .section { padding: var(--sp-12) var(--sp-4); }
  .projects-grid { grid-template-columns: 1fr; }
  #navbar { padding: var(--sp-3) var(--sp-4); }
  .nav-links { display: none; }
  .hamburger { display: flex; margin-left: auto; }
  .hamburger span:nth-child(2) { display: none; }
  .footer { flex-direction: row; justify-content: space-between; align-items: center; padding: var(--sp-4); }
  .footer-slogan { display: none; }
  .hero-content { padding: var(--sp-8) var(--sp-4); }
  .page-hero { padding: calc(var(--sp-12) + var(--sp-4)) var(--sp-4) var(--sp-6); }
  .about-hero { padding: calc(var(--sp-12) + var(--sp-4)) var(--sp-4) var(--sp-6); }
  .project-item .service-body h3 { font-size: clamp(0.95rem, 2.8vw, 1.3rem); }
  .projects-list-title { font-size: clamp(1.4rem, 4vw, 2rem); }
  .project-tab { font-size: 0.95rem; }
  .carousel-indicators { display: flex; justify-content: center; gap: var(--sp-2); padding: var(--sp-2) 0; }
}
@media (max-width: 480px) {
  .hero-title { font-size: clamp(3rem, 18vw, 6rem); }
  .hero-slogan { font-size: clamp(0.75rem, 4.5vw, 1.1rem); white-space: normal; text-align: center; padding: 0 var(--sp-3); }
  .contact-inner { max-width: 100%; }
  .page-hero h1 { white-space: normal; font-size: clamp(1.2rem, 5vw, 1.8rem); }
  .carousel-viewport { height: clamp(200px, 50vw, 300px); background: var(--color-bg); }
  .carousel-video { object-fit: cover; }
  .carousel-slide { flex: 0.4; height: 75%; }
  .carousel-slide.active { flex: 2.5; height: 100%; }
  .mobile-menu { width: 50%; }
  .contact-third { padding: var(--sp-2) var(--sp-3); }
  .contact-third-value { font-size: 0.82rem; }
  .section { padding: var(--sp-8) var(--sp-2); }
  .projects-list-inner { padding: 0 var(--sp-2); }
  .project-item { padding: var(--sp-2) 0; gap: var(--sp-2); }
  .project-item .service-body h3 { font-size: 0.9rem; }
  .service-body h3 { font-size: clamp(1rem, 4vw, 1.3rem); }
  .ep-tracklist { padding-left: var(--sp-3); }
  .music-timer { font-size: 10px; }
  .ep-title-row h3 { font-size: 0.9rem; }
  .ep-track h3 { font-size: 0.85rem; }
  .footer { font-size: 0.65rem; }
}