/* =============================================================================
   Sound & Motion Studios — Stylesheet
   =============================================================================
   Aesthetic direction: dark, editorial, cinematic. Audio engineers spend their
   working lives in dimly-lit rooms — the design reflects that, but with the
   studio's two-blue brand palette: a deep navy and a bright cyan.

   To change the look-and-feel, most adjustments can be made in the :root
   section below — colors, fonts, spacing scale.
   ============================================================================= */

@import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,300;0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;0,9..144,800;1,9..144,400&family=Inter+Tight:wght@300;400;500;600;700&display=swap');

:root {
  /* Colors */
  --bg: #0a0a0b;
  --bg-2: #131316;
  --bg-3: #1c1c20;
  --ink: #f4f1ea;
  --ink-mute: #a8a39a;
  --ink-dim: #6b6760;
  --line: #2a2a2f;
  --accent: #00a1e1;       /* studio cyan — primary brand */
  --accent-2: #5dc4ed;     /* lighter cyan for hovers */
  --brand-deep: #004a98;   /* studio navy — secondary brand */
  --gold: #7fbfe0;         /* soft sky blue used where italic accents read on dark */

  /* Typography */
  --font-display: 'Fraunces', Georgia, serif;
  --font-body: 'Inter Tight', system-ui, sans-serif;

  /* Layout */
  --max: 1400px;
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 2px;
}

/* Reset --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-family: var(--font-body);
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  font-weight: 400;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
button { background: none; border: none; cursor: pointer; font: inherit; color: inherit; }

/* Typography ---------------------------------------------------------------- */
h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: 500;
  line-height: 1.05;
  letter-spacing: -0.02em;
}
h1 { font-size: clamp(2.5rem, 7vw, 6rem); font-weight: 400; }
h2 { font-size: clamp(2rem, 4.5vw, 3.5rem); font-weight: 400; }
h3 { font-size: clamp(1.25rem, 2vw, 1.6rem); font-weight: 500; }
h4 { font-size: 1.1rem; font-weight: 500; }
.eyebrow {
  font-family: var(--font-body);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-block;
}
.eyebrow-mute { color: var(--ink-mute); }

/* Layout primitives --------------------------------------------------------- */
.container { max-width: var(--max); margin: 0 auto; padding-inline: var(--gutter); }
.section { padding-block: clamp(4rem, 10vw, 8rem); }
.section-tight { padding-block: clamp(3rem, 6vw, 5rem); }

/* Header -------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(10, 10, 11, 0.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 1.1rem var(--gutter);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}
.brand {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  font-family: var(--font-display);
}
.brand-logo {
  height: 36px;
  width: auto;
  display: block;
}
@media (max-width: 600px) {
  .brand-logo { height: 28px; }
}
.site-nav {
  display: flex;
  gap: 2rem;
  align-items: center;
}
.site-nav a {
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  position: relative;
  padding-block: 0.3rem;
}
.site-nav a:hover, .site-nav a.active { color: var(--ink); }
.site-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--accent);
}
.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--ink);
  transition: all 0.2s ease;
}

@media (max-width: 900px) {
  .nav-toggle { display: flex; }
  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: var(--bg-2);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    gap: 0;
    padding: 1rem var(--gutter);
    transform: translateY(-100%);
    opacity: 0;
    pointer-events: none;
    transition: all 0.3s ease;
  }
  .site-nav.open {
    transform: translateY(0);
    opacity: 1;
    pointer-events: auto;
  }
  .site-nav a {
    padding: 1rem 0;
    border-bottom: 1px solid var(--line);
  }
  .site-nav a:last-child { border-bottom: none; }
}

/* Banner background video --------------------------------------------------- */
/* Used on the hero (home) and page-header (interior pages). The video is
   injected by SM.injectBannerVideo() based on the activePage key passed to
   SM.init(). To change which video plays on which page, edit the
   bannerVideos map in site.js. */
.banner-video {
  position: absolute;
  inset: 0;
  overflow: hidden;
  z-index: 0;
  pointer-events: none;
  background: var(--bg);
}
.banner-video iframe {
  position: absolute;
  top: 50%;
  left: 50%;
  /* Cover-fit a 16:9 iframe inside any aspect-ratio container. */
  width: max(100vw, 177.78vh);
  height: max(56.25vw, 100vh);
  transform: translate(-50%, -50%);
  border: 0;
  pointer-events: none;
  /* Hidden until the YT player reports PLAYING — masks the play/pause chrome
     that briefly flashes on load and when returning from another tab. */
  opacity: 0;
  transition: opacity 350ms ease;
}
.banner-video iframe.is-playing { opacity: 1; }
/* Self-hosted <video> path. Native object-fit handles cover-cropping.
   We fade the video in only once it's actually playing at the resumed
   position — the poster image (set on the <video poster=...> attribute)
   fills the frame underneath until then, hiding any decoder warm-up
   frames or brief play-from-0 flash before our seek lands. */
.banner-video video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  border: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 350ms ease;
}
.banner-video video.is-ready { opacity: 1; }
.banner-video::after {
  /* Darkening + slight bottom fade so headline text stays readable. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(10,10,11,0.55) 0%, rgba(10,10,11,0.7) 60%, rgba(10,10,11,0.92) 100%);
  pointer-events: none;
}
/* When a banner has video, lift the text content above it. */
.hero.has-video .hero-inner,
.page-header.has-video .container { position: relative; z-index: 1; }

/* Hero (home page) ---------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: clamp(5rem, 12vw, 9rem) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.hero::before {
  content: '';
  position: absolute;
  top: -20%;
  right: -10%;
  width: 60%;
  height: 80%;
  background: radial-gradient(circle, rgba(0, 161, 225, 0.10), transparent 70%);
  pointer-events: none;
}
.hero-inner {
  position: relative;
  max-width: 1100px;
}
.hero h1 {
  font-weight: 300;
  letter-spacing: -0.035em;
  margin-block: 1.5rem 2rem;
}
.hero h1 em {
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
}
.hero-meta {
  display: flex;
  gap: 3rem;
  flex-wrap: wrap;
  margin-top: 3rem;
  padding-top: 2rem;
  border-top: 1px solid var(--line);
}
.hero-meta-item {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.hero-meta-item .label {
  font-size: 0.7rem;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-dim);
}
.hero-meta-item .value {
  font-family: var(--font-display);
  font-size: 1.6rem;
  color: var(--accent-2);
}
/* The Clients item carries a long list of names; force it onto its own row
   below the Branches/Years stats and use a smaller, comfortably-readable
   font so it wraps cleanly across multiple lines. */
.hero-meta-clients {
  flex-basis: 100%;
}
.hero-meta-clients .value {
  font-size: 1.05rem;
  font-style: italic;
  font-weight: 300;
  line-height: 1.55;
  max-width: 70ch;
}
.hero-lead {
  font-size: clamp(1.05rem, 1.5vw, 1.3rem);
  color: var(--ink-mute);
  max-width: 60ch;
  font-weight: 300;
  line-height: 1.5;
}

/* Service grid -------------------------------------------------------------- */
.service-section {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.service-header {
  display: flex;
  justify-content: space-between;
  align-items: end;
  flex-wrap: wrap;
  gap: 2rem;
  margin-bottom: 4rem;
}
.service-header h2 { max-width: 18ch; }
.service-grid {
  display: grid;
  /* Fixed column counts at each breakpoint so 8 service items always fill
     a complete grid (no awkward empty cells revealing the divider colour
     in the bottom-right). */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
}
@media (min-width: 600px) {
  .service-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .service-grid { grid-template-columns: repeat(4, 1fr); }
}
.service-item {
  padding: 2rem;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  gap: 1rem;
  min-height: 180px;
  transition: background 0.3s ease;
}
.service-item:hover { background: var(--bg-3); }
.service-item .icon {
  width: 36px;
  height: 36px;
  opacity: 0.85;
  /* tint to brand cyan (#00a1e1) */
  filter: brightness(0) saturate(100%) invert(54%) sepia(99%) saturate(1786%) hue-rotate(165deg) brightness(95%) contrast(101%);
}
.service-item h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  color: var(--ink);
}

/* Page header (interior pages) --------------------------------------------- */
.page-header {
  position: relative;
  overflow: hidden;
  padding-block: clamp(4rem, 8vw, 7rem) clamp(3rem, 5vw, 4rem);
  border-bottom: 1px solid var(--line);
}
.page-header h1 {
  margin-top: 1rem;
  max-width: 22ch;
}
.page-header-lead {
  font-size: clamp(1rem, 1.3vw, 1.2rem);
  color: var(--ink-mute);
  max-width: 60ch;
  margin-top: 1.5rem;
  font-weight: 300;
}

/* Project grid -------------------------------------------------------------- */
.project-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
  gap: 2rem;
}
.project-card {
  display: block;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: all 0.3s ease;
  overflow: hidden;
}
.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-3px);
}
.project-card-image {
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  position: relative;
}
.project-card-image::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 60%, rgba(0,0,0,0.6));
  opacity: 0;
  transition: opacity 0.3s ease;
}
.project-card:hover .project-card-image::after { opacity: 1; }
.project-card-body {
  padding: 1.2rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.project-card-body h3 {
  font-size: 1.05rem;
  font-weight: 500;
  line-height: 1.25;
}
.project-card-year {
  font-size: 0.78rem;
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.project-card-role {
  font-size: 0.85rem;
  color: var(--ink-mute);
  margin-top: 0.5rem;
  line-height: 1.4;
}

/* Filter bar ---------------------------------------------------------------- */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
  padding-bottom: 2rem;
  border-bottom: 1px solid var(--line);
}
.filter-buttons {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.filter-btn {
  padding: 0.5rem 1.1rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink-mute);
  font-size: 0.78rem;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.filter-btn:hover {
  border-color: var(--ink-mute);
  color: var(--ink);
}
.filter-btn.active {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
}
/* Search field — sits at the right end of the filter bar, after the
   category buttons. Pulls right via margin-left:auto so it always hugs
   the trailing edge regardless of how many categories exist. */
.filter-search {
  margin-left: auto;
  min-width: 220px;
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--line);
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, background 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
  border-radius: 0;
}
.filter-search::placeholder {
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.filter-search:hover {
  border-color: var(--ink-mute);
}
.filter-search:focus {
  outline: none;
  border-color: var(--accent);
  background: var(--bg-2);
}
/* Native search clear-button styling on WebKit. */
.filter-search::-webkit-search-cancel-button {
  -webkit-appearance: none;
  appearance: none;
  width: 14px;
  height: 14px;
  background: var(--ink-dim);
  mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3l8 8M11 3l-8 8' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
  -webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14'><path d='M3 3l8 8M11 3l-8 8' stroke='black' stroke-width='1.5' fill='none' stroke-linecap='round'/></svg>") center / contain no-repeat;
  cursor: pointer;
}
.filter-search::-webkit-search-cancel-button:hover {
  background: var(--accent);
}
@media (max-width: 700px) {
  .filter-search {
    margin-left: 0;
    width: 100%;
    min-width: 0;
  }
}

/* Empty-state caption shown below the project grid when no projects match
   the active filter / search. */
.filter-empty {
  color: var(--ink-mute);
  font-size: 0.95rem;
  text-align: center;
  padding: 4rem 0;
}

/* Team grid ----------------------------------------------------------------- */
.team-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 1.5rem;
}
.team-card {
  display: block;
  text-align: left;
  transition: all 0.3s ease;
}
.team-card-image {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center top;
  background-color: var(--bg-3);
  position: relative;
  /* Force the element onto its own GPU compositor layer so the hover
     transition uses a single, stable render path. Without this, Safari
     can switch between CPU- and GPU-rendered paths mid-transition, which
     produces visibly different contrast/sharpness at each end (the
     "4-distinct-states" flicker). */
  transform: translateZ(0);
  will-change: filter;
  filter: grayscale(0.5);
  transition: filter 0.4s ease;
  image-rendering: auto;
}
.team-card:hover .team-card-image { filter: grayscale(0); }
.team-card-body {
  padding-block: 1rem 0;
}
.team-card-body h3 {
  font-size: 1.05rem;
  font-weight: 500;
}
.team-card-body p {
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin-top: 0.25rem;
  line-height: 1.4;
}

/* Project detail page ------------------------------------------------------- */
.project-detail-hero {
  display: grid;
  grid-template-columns: 1fr 1.4fr;
  gap: 4rem;
  align-items: start;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 800px) {
  .project-detail-hero { grid-template-columns: 1fr; gap: 2rem; }
}
.project-detail-poster {
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  position: sticky;
  top: 5rem;
}
.project-detail-info h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-block: 1rem 0.5rem;
}
.project-detail-year {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.3rem;
}
.project-detail-description {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--ink-mute);
  margin-block: 2rem;
  max-width: 60ch;
}
.project-links {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin-bottom: 3rem;
}
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.85rem 1.6rem;
  border: 1px solid var(--accent);
  color: var(--accent);
  font-size: 0.82rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  transition: all 0.2s ease;
}
.btn:hover {
  background: var(--accent);
  color: var(--bg);
}
.btn-solid {
  background: var(--accent);
  color: var(--bg);
}
.btn-solid:hover {
  background: transparent;
  color: var(--accent);
}
.btn-ghost {
  border-color: var(--line);
  color: var(--ink-mute);
}
.btn-ghost:hover {
  border-color: var(--ink);
  background: transparent;
  color: var(--ink);
}

/* In-page trailer player (used on project detail pages). The wrapper
   reserves a 16:9 aspect-ratio box and the iframe fills it absolutely so
   the layout never jumps as the player loads.

   We use a "facade" pattern: until the user clicks, we show our own clean
   poster + play button. Clicking swaps in the heavy YouTube/Vimeo iframe
   with autoplay=1, so the viewer goes straight to playing video without
   ever seeing YouTube's title overlay, channel info, or branding. */
.trailer-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--bg-3);
  border: 1px solid var(--line);
  overflow: hidden;
}
.trailer-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
}
.trailer-facade {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: inherit;
}
/* Subtle vignette so the play button always reads cleanly on top of the
   thumbnail. */
.trailer-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.18) 0%, rgba(0,0,0,0.55) 100%);
  pointer-events: none;
  transition: background 0.2s ease;
}
.trailer-facade:hover::after,
.trailer-facade:focus-visible::after {
  background: linear-gradient(180deg, rgba(0,0,0,0.05) 0%, rgba(0,0,0,0.4) 100%);
}
/* The play button itself — circular, semi-transparent dark, white play
   triangle. Brand cyan on hover. */
.trailer-play {
  position: relative;
  z-index: 1;
  width: clamp(64px, 9vw, 92px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: rgba(10, 10, 11, 0.55);
  border: 2px solid rgba(255, 255, 255, 0.92);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.2s ease, background 0.2s ease, border-color 0.2s ease;
}
.trailer-play::before {
  content: '';
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0.85em 0 0.85em 1.4em;
  border-color: transparent transparent transparent #fff;
  margin-left: 0.25em; /* optical centring of the triangle */
}
.trailer-facade:hover .trailer-play,
.trailer-facade:focus-visible .trailer-play {
  background: var(--accent);
  border-color: var(--accent);
  transform: scale(1.06);
}
.trailer-facade:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 3px;
}

.detail-section { margin-block: 3rem; }
/* Footer-style detail section — used for the IMDb link at the bottom
   of project pages. Top-border + extra spacing to set it apart from
   the accolades / crew sections. */
.detail-section-footer {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.detail-section-title {
  font-size: 0.78rem;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.5rem;
  padding-bottom: 0.8rem;
  border-bottom: 1px solid var(--line);
}

/* Crew list (project page) -------------------------------------------------- */
.crew-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 1.2rem;
}
.crew-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem;
  border: 1px solid transparent;
  transition: all 0.2s ease;
}
.crew-item:hover {
  border-color: var(--line);
  background: var(--bg-2);
}
.crew-item-photo {
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  flex-shrink: 0;
  filter: grayscale(0.3);
}
.crew-item-info h4 {
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 500;
  line-height: 1.2;
}
.crew-item-info p {
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* Accolades ----------------------------------------------------------------- */
/* Accolades are grouped by project: large poster on the left, project
   title and the list of all awards for that project on the right. */
.accolades-grouped {
  display: grid;
  gap: 2rem;
}
.accolade-card {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 2rem;
  align-items: start;
  padding: 1.8rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 0.25s ease;
}
.accolade-card:hover { border-color: var(--accent); }
.accolade-card-poster {
  display: block;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  border-radius: 2px;
  transition: transform 0.4s ease, filter 0.4s ease;
}
/* Music posters are square. */
.accolade-card-poster--square { aspect-ratio: 1 / 1; }
a.accolade-card-poster:hover { transform: translateY(-2px); filter: brightness(1.05); }
.accolade-card-body {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  min-width: 0;
}
.accolade-card-title { display: block; }
.accolade-card-title:hover h3 { color: var(--accent); }
.accolade-card-title h3 {
  font-family: var(--font-display);
  font-size: clamp(1.5rem, 3vw, 2rem);
  font-weight: 500;
  margin-top: 0.4rem;
  line-height: 1.1;
  transition: color 0.2s ease;
}
.accolade-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
  padding: 0;
}
.accolade-item {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1rem;
  background: var(--bg);
  border: 1px solid var(--line);
}
.accolade-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.accolade-item-text strong {
  font-weight: 500;
  font-size: 0.98rem;
  color: var(--ink);
}
.accolade-meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.accolade-result {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 0.92rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--line);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.accolade-result.winner  { color: var(--accent);    border-color: var(--accent);    }
.accolade-result.nominee { color: var(--ink-mute);  }
.accolade-result.bronze  { color: #cd7f32;          border-color: #cd7f32;          }
.accolade-result.silver  { color: #c0c0c0;          border-color: #c0c0c0;          }
.accolade-result.gold    { color: var(--gold);      border-color: var(--gold);      }
.accolade-result.listed  { color: var(--accent-2);  border-color: var(--accent-2);  }

@media (max-width: 800px) {
  .accolade-card {
    grid-template-columns: 140px 1fr;
    gap: 1.5rem;
    padding: 1.2rem;
  }
}
@media (max-width: 540px) {
  .accolade-card {
    grid-template-columns: 1fr;
  }
  .accolade-card-poster {
    width: 50%;
    margin: 0 auto;
  }
  .accolade-item {
    grid-template-columns: 1fr;
    gap: 0.5rem;
  }
  .accolade-result { justify-self: start; }
}

/* Team detail page ---------------------------------------------------------- */
.team-detail-header {
  display: grid;
  grid-template-columns: 280px 1fr;
  gap: 3rem;
  align-items: start;
  padding-block: clamp(3rem, 6vw, 5rem);
}
@media (max-width: 700px) {
  .team-detail-header { grid-template-columns: 1fr; }
}
.team-detail-photo {
  aspect-ratio: 1 / 1;
  background-size: cover;
  background-position: center top;
  background-color: var(--bg-3);
  filter: grayscale(0.3);
}
.team-detail-info h1 {
  font-size: clamp(2.2rem, 4.5vw, 3.5rem);
  margin-bottom: 0.5rem;
}
.team-detail-title {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--gold);
  font-size: 1.1rem;
  margin-bottom: 2rem;
}
.team-detail-bio {
  font-size: 1.05rem;
  line-height: 1.7;
  color: var(--ink-mute);
  max-width: 60ch;
  margin-bottom: 2rem;
}
.team-detail-links {
  display: flex;
  gap: 0.8rem;
  flex-wrap: wrap;
}

/* Testimonials -------------------------------------------------------------- */
.testimonial-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.testimonial {
  padding: 2rem;
  border-left: 2px solid var(--accent);
  background: var(--bg-2);
}
.testimonial blockquote {
  font-family: var(--font-display);
  font-style: italic;
  font-size: 1.1rem;
  line-height: 1.5;
  color: var(--ink);
  margin-bottom: 1.5rem;
  font-weight: 400;
}
.testimonial-author {
  font-size: 0.95rem;
  font-weight: 500;
  color: var(--ink);
}
.testimonial-title {
  font-size: 0.8rem;
  color: var(--ink-mute);
  margin-top: 0.25rem;
}

/* CTA band ------------------------------------------------------------------ */
.cta-band {
  background: var(--bg-2);
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  padding-block: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.cta-band h2 {
  font-style: italic;
  font-weight: 400;
  margin-bottom: 2rem;
}
.cta-band .accent { color: var(--accent); font-style: italic; }

/* Locations / Contact ------------------------------------------------------- */
.locations-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}
.location-card {
  padding: 1.8rem;
  border: 1px solid var(--line);
  background: var(--bg-2);
}
.location-card .flag { font-size: 1.8rem; margin-bottom: 0.8rem; }
.location-card h3 {
  font-family: var(--font-display);
  font-size: 1.5rem;
  margin-bottom: 1rem;
}
.location-card p {
  font-size: 0.95rem;
  color: var(--ink-mute);
  margin-bottom: 0.4rem;
  line-height: 1.5;
}
.location-card a { color: var(--accent); }
.location-card a:hover { color: var(--accent-2); }

/* Footer -------------------------------------------------------------------- */
.site-footer {
  background: var(--bg);
  border-top: 1px solid var(--line);
  padding-block: 3rem 2rem;
}
.footer-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding-inline: var(--gutter);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 1.5rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.footer-mark {
  font-family: var(--font-display);
  font-size: 1.2rem;
  color: var(--ink);
}
.footer-tag {
  font-size: 0.75rem;
  color: var(--ink-dim);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.footer-meta {
  display: flex;
  gap: 2rem;
  align-items: center;
  font-size: 0.85rem;
  color: var(--ink-mute);
}
.footer-top {
  color: var(--accent);
  letter-spacing: 0.05em;
}

/* Back link ----------------------------------------------------------------- */
.back-link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 2rem;
}
.back-link:hover { color: var(--accent); }

/* Score page — reels grid & track list -------------------------------------- */
.reels-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 2rem;
}
.reel {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  margin: 0;
}
.reel figcaption {
  font-family: var(--font-display);
  font-style: italic;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}

.score-tracks {
  display: grid;
  gap: 1.2rem;
}
.track {
  display: grid;
  /* Match the original WP layout: a tall poster on the left (2:3 aspect)
     so film posters aren't cropped, with the title/composer/player on the
     right. */
  grid-template-columns: 140px 1fr;
  gap: 1.5rem;
  align-items: center;
  padding: 1.2rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  transition: border-color 0.2s ease;
}
.track:hover { border-color: var(--accent); }
.track-poster {
  width: 140px;
  aspect-ratio: 2 / 3;
  background-size: contain;          /* show the full poster, no cropping */
  background-repeat: no-repeat;
  background-position: center;
  background-color: var(--bg-3);
  border-radius: 2px;
  flex-shrink: 0;
}
.track-body {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  min-width: 0; /* let the audio element shrink properly */
}
.track-title {
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 500;
  color: var(--ink);
}
.track-meta {
  font-size: 0.85rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
.track-project {
  color: var(--accent);
  text-decoration: none;
}
.track-project:hover { color: var(--accent-2); text-decoration: underline; }
.track audio {
  width: 100%;
  margin-top: 0.4rem;
  /* Standard browser audio UI works fine on dark backgrounds; keep default. */
  color-scheme: dark;
}
@media (max-width: 540px) {
  .track { grid-template-columns: 1fr; gap: 1rem; }
  .track-poster {
    width: 60%;
    margin: 0 auto;
    aspect-ratio: 2 / 3;
    height: auto;
  }
}

/* Facility grid & images ----------------------------------------------------- */
/* Fixed-column grid so photos in the same row sit at the same vertical
   position. Each cell is a flex column with the image pushed to the
   bottom, so descriptions of different lengths don't push photos out
   of alignment. */
.facility-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem;
}
@media (min-width: 720px) {
  .facility-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 1100px) {
  .facility-grid { grid-template-columns: repeat(3, 1fr); }
}
.facility-section {
  display: flex;
  flex-direction: column;
}
.facility-section h2 {
  margin: 0.8rem 0 1rem;
}
.facility-section p {
  color: var(--ink-mute);
  font-size: 1.05rem;
  line-height: 1.7;
}
.facility-section .facility-image {
  margin-top: auto;       /* push image to bottom of cell, aligning rows */
}

/* Image button — clickable thumbnail that opens the gallery lightbox. */
.facility-image {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;
  margin-top: 1.5rem;
  border: 1px solid var(--line);
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
  padding: 0;
  transition: border-color 0.25s ease, transform 0.4s ease, filter 0.4s ease;
  filter: brightness(0.92);
}
.facility-image:hover,
.facility-image:focus-visible {
  border-color: var(--accent);
  filter: brightness(1.05);
  transform: translateY(-2px);
  outline: none;
}

/* Lightbox overlay ---------------------------------------------------------- */
.lightbox {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 3rem);
  background: rgba(5, 5, 7, 0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease;
}
.lightbox.open {
  opacity: 1;
  pointer-events: auto;
}
.lightbox-figure {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1rem;
  max-width: 100%;
  max-height: 100%;
}
.lightbox-figure img {
  max-width: 100%;
  max-height: calc(100vh - 8rem);
  object-fit: contain;
  border: 1px solid var(--line);
  background: var(--bg);
}
.lightbox-figure figcaption {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  text-align: center;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.lightbox-counter {
  color: var(--ink-dim);
}
/* Prev/next navigation arrows for galleries (hidden when only one image). */
.lightbox-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lightbox-prev { left: clamp(1rem, 4vw, 3rem); }
.lightbox-next { right: clamp(1rem, 4vw, 3rem); }
.lightbox-nav:hover,
.lightbox-nav:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  outline: none;
}
.lightbox.single-image .lightbox-nav,
.lightbox.single-image .lightbox-counter { display: none; }
@media (max-width: 600px) {
  .lightbox-nav { width: 40px; height: 40px; font-size: 1.2rem; }
  .lightbox-prev { left: 0.5rem; }
  .lightbox-next { right: 0.5rem; }
}

.lightbox-close {
  position: absolute;
  top: clamp(1rem, 3vw, 2rem);
  right: clamp(1rem, 3vw, 2rem);
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.08);
  border: 1px solid rgba(255, 255, 255, 0.2);
  color: var(--ink);
  font-size: 1.6rem;
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.lightbox-close:hover,
.lightbox-close:focus-visible {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--bg);
  outline: none;
}

/* Animations ---------------------------------------------------------------- */
@keyframes fadeUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.fade-up {
  animation: fadeUp 0.6s ease both;
}
.fade-up:nth-child(2) { animation-delay: 0.05s; }
.fade-up:nth-child(3) { animation-delay: 0.1s; }
.fade-up:nth-child(4) { animation-delay: 0.15s; }