/* =============================================================================
   Sound & Motion Studios — Stylesheet (wp-replica branch)
   =============================================================================
   PURPOSE: mimic the look of the live WordPress site (soundandmotion.co.za) so
   the new, JSON-driven site can go live NOW, while the team is still settling
   the eventual design. Structure, data and URLs are identical to `main` — this
   branch changes appearance only. When the new design is agreed, production
   switches back to `main`; nothing here needs migrating.

   PROVENANCE OF THESE VALUES: the WordPress site runs The7 theme, which emits
   its whole design system as CSS custom properties at
   /wp-content/uploads/the7-css/css-vars.css. The palette, the type stack and
   the type scale below are read from that file, not eyeballed. Original names
   are noted in comments so they can be re-checked against the live site.

   NOT PIXEL-IDENTICAL, and deliberately so. The7 + Elementor + Revolution
   Slider generate many thousands of lines of CSS. This matches the palette,
   typography, type scale and section rhythm — the things that make it read as
   the same site — rather than chasing every margin.

   THEMING MODEL — read before editing:
   Every component is styled against semantic variables (--bg, --ink, --line…).
   :root holds the LIGHT values. The dark band sections (.hero, .page-header,
   .cta-band, .site-footer) re-declare those same variables with dark values,
   so any component placed inside adapts automatically. Edit the token blocks,
   not the component rules.
   ============================================================================= */

/* The7's exact stack: Michroma for headings, Arimo for body and UI, Lato for
   the smallest heading level. Roboto is loaded by the theme for menu extras. */
@import url('https://fonts.googleapis.com/css2?family=Michroma&family=Arimo:ital,wght@0,400;0,500;0,600;0,700;1,400;1,700&family=Lato:ital,wght@0,300;0,400;0,700;1,400&family=Roboto:ital,wght@0,300;0,400;0,500;0,700;1,400&display=swap');

:root {
  /* ----- Light theme tokens ----- */
  --bg: #f8f8f9;            /* the7-body-bg-color */
  --bg-2: #ffffff;          /* raised surfaces: cards, header */
  --bg-3: #eceef1;          /* sunken surfaces: image placeholders, hovers */
  --ink: #2f3237;           /* headings — darkened from base for heading weight */
  --ink-mute: #474747;      /* the7-base-color — body copy */
  --ink-dim: #787d85;       /* the7-input-color — labels, captions */
  --ink-lead: #7a7a7a;      /* MEASURED: colour of the large intro paragraphs */
  --line: rgba(173, 176, 182, 0.36);  /* the7-footer-outline-color */
  --line-solid: #dfe1e5;

  /* ----- Brand ----- */
  --accent: #00a1e1;        /* the7-accent-color */
  --accent-ink: #007ab0;    /* darkened cyan that passes contrast AS TEXT on light */
  --accent-2: #36b6e8;
  --navy: #004a98;          /* the7-menu-decor-color — the logo navy */
  --navy-ink: #0b3d77;

  /* ----- Dark band tokens ----- */
  /* The banner videos carry white text over a darkening gradient, so the bands
     stay dark even though the body is light — same as the WP site. */
  --dark-bg: #14171c;
  --dark-bg-2: #1c2026;
  --dark-ink: #ffffff;
  --dark-ink-mute: rgba(255, 255, 255, 0.75);   /* the7 uses this exact value */
  --dark-ink-dim: rgba(255, 255, 255, 0.55);
  --dark-line: rgba(255, 255, 255, 0.23);       /* the7 uses this exact value */

  /* ----- Medal tones for accolade badges (legible on light) ----- */
  --medal-gold: #9c7c1d;
  --medal-silver: #66727d;
  --medal-bronze: #9a5f25;

  /* ----- Typography ----- */
  /* Michroma is a wide, geometric, all-caps-feeling display face. It has ONE
     weight (400) and very wide sidebearings, so headings need NEGATIVE tracking
     and tighter line-height than a normal sans, and must never be bolded —
     there is no bold cut, so the browser would synthesise a smeared one. */
  --font-display: 'Michroma', 'Arial Black', Impact, sans-serif;
  --font-body: 'Arimo', Helvetica, Arial, Verdana, sans-serif;
  --font-alt: 'Lato', Helvetica, Arial, sans-serif;
  /* Elementor sets the big centred intro paragraphs in Roboto, not the theme's
     Arimo. Measured off the live homepage: Roboto 25.5px/30px, #7a7a7a. */
  --font-lead: 'Roboto', Helvetica, Arial, sans-serif;

  /* ----- Layout ----- */
  --max: 1250px;            /* the7-content-width */
  --gutter: clamp(1.25rem, 4vw, 3rem);
  --radius: 4px;            /* MEASURED off the live buttons — not square */
  --shadow-1: 0 1px 2px rgba(20, 23, 28, 0.05), 0 1px 8px rgba(20, 23, 28, 0.04);
  --shadow-2: 0 10px 30px rgba(20, 23, 28, 0.10), 0 2px 8px rgba(20, 23, 28, 0.05);

  color-scheme: light;
}

/* The dark "screening room" bands. Re-declare the semantic tokens so every
   component inside adapts without its own dark rules. */
.hero, .page-header, .cta-band, .site-footer {
  --bg: var(--dark-bg);
  --bg-2: var(--dark-bg-2);
  --bg-3: #16293c;
  --ink: var(--dark-ink);
  --ink-mute: var(--dark-ink-mute);
  --ink-dim: var(--dark-ink-dim);
  --line: var(--dark-line);
  --accent-ink: var(--accent-2);  /* bright cyan reads better as text on dark */
  --navy: #5aa9e6;
  color-scheme: dark;
}

/* Reset --------------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body {
  font-size: 15px;          /* the7-base-font-size */
  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; }
::selection { background: rgba(0, 161, 225, 0.25); }

/* Typography ---------------------------------------------------------------- */
/* The7's scale, converted from px to rem and made fluid:
     h1 52/62  h2 34/44  h3 25/36  h4 20/32  h5 16/26  h6 14/26 (Lato)
   Michroma runs wide and has a single 400 weight — never set a heavier weight
   here or the browser synthesises a smeared faux-bold. The negative tracking
   pulls back some of its very generous default sidebearings. */
h1, h2, h3, h4, h5 {
  font-family: var(--font-display);
  font-weight: 400;
  /* The live site runs Michroma at its natural tracking. Resist the urge to
     tighten it — the wide spacing IS the look. */
  letter-spacing: normal;
  color: var(--ink);
  text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 3.6vw, 3.25rem); line-height: 1.19; }
h2 { font-size: clamp(1.4rem, 2.6vw, 2.125rem); line-height: 1.29; }
h3 { font-size: clamp(1.1rem, 1.8vw, 1.5625rem); line-height: 1.44; }
h4 { font-size: 1.25rem; line-height: 1.6; }
h5 { font-size: 1rem; line-height: 1.625; }
h6 {
  font-family: var(--font-alt);
  font-size: 0.875rem;
  line-height: 1.857;
  font-weight: 700;
  color: var(--ink);
}
/* The live site's section labels ("POST PRODUCTION", "MUSIC & SCORE") are
   Michroma 25px/36px in brand cyan — not a tiny letter-spaced caps label.
   Ours carry longer strings so they're set smaller, but the face and the
   colour are what make them read as the same element. */
.eyebrow {
  font-family: var(--font-display);
  font-size: 0.82rem;
  font-weight: 400;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--accent);
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
}
/* The dark design puts a short cyan rule before each eyebrow. The live site has
   no such mark, and centred in a page header it reads as a stray dash — so the
   replica drops it. */
.eyebrow::before { content: none; }
.eyebrow-mute { color: var(--ink-dim); }

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

/* Header -------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, 0.88);
  backdrop-filter: blur(16px) saturate(1.4);
  -webkit-backdrop-filter: blur(16px) saturate(1.4);
  border-bottom: 1px solid var(--line);
}
.header-inner {
  max-width: var(--max);
  margin: 0 auto;
  padding: 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: 1.9rem;
  align-items: center;
}
.site-nav a {
  font-family: var(--font-body);
  /* MEASURED off the live nav: Arimo 17px, weight 400, no transform — the caps
     you see are literal text in the menu labels, not text-transform. Our labels
     are sentence-case, so we keep uppercase here to match what's on screen. */
  font-size: 17px;
  font-weight: 400;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--ink-mute);   /* the7-menu-color #474747 */
  position: relative;
  padding-block: 0.3rem;
}
.site-nav a:hover { color: var(--accent); }   /* the7-menu-active-color */
.site-nav a.active { color: var(--accent); }
.site-nav a.active::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--accent);
}

/* Post submenu -------------------------------------------------------------- */
/* "Post" is both a destination (the full portfolio) and a parent. The <a> stays
   a real link; the caret is a separate button that only matters on touch, where
   there is no hover to open the panel with. */
.nav-group { position: relative; display: flex; align-items: center; gap: 0.35rem; }
.nav-group-toggle {
  width: 0.9rem;
  height: 0.9rem;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  position: relative;
}
.nav-group-toggle::before {
  content: '';
  position: absolute;
  inset: 0;
  margin: auto;
  width: 5px;
  height: 5px;
  border-right: 2px solid var(--ink-mute);
  border-bottom: 2px solid var(--ink-mute);
  transform: translateY(-2px) rotate(45deg);
  transition: transform 0.2s ease, border-color 0.2s ease;
}
.nav-group:hover .nav-group-toggle::before,
.nav-group.active .nav-group-toggle::before { border-color: var(--accent); }

.nav-submenu {
  position: absolute;
  top: 100%;
  left: -1.1rem;
  min-width: 13rem;
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border: 1px solid var(--line);
  box-shadow: var(--shadow-2);
  padding: 0.5rem 0;
  margin-top: 0.7rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
  z-index: 60;
}
.nav-group:hover .nav-submenu,
.nav-group:focus-within .nav-submenu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}
.nav-submenu a {
  padding: 0.65rem 1.2rem;
  letter-spacing: 0.1em;
  white-space: nowrap;
}
.nav-submenu a::after { display: none; }
.nav-submenu a:hover { color: var(--accent); background: var(--bg-3); }

.nav-toggle {
  display: none;
  flex-direction: column;
  gap: 5px;
  padding: 0.5rem;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  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: #ffffff;
    border-bottom: 1px solid var(--line);
    box-shadow: var(--shadow-2);
    flex-direction: column;
    gap: 0;
    padding: 0.6rem var(--gutter) 1rem;
    transform: translateY(-110%);
    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);
    width: 100%;
  }
  .site-nav a:last-child { border-bottom: none; }
  .site-nav a.active::after { display: none; }

  /* No hover on touch — lay the submenu out inline and let the caret expand it. */
  .nav-group {
    flex-wrap: wrap;
    align-items: baseline;
    width: 100%;
    border-bottom: 1px solid var(--line);
  }
  .nav-group > a { flex: 1; border-bottom: none; width: auto; }
  .nav-group-toggle { width: 2.5rem; height: 2.5rem; }
  .nav-submenu {
    position: static;
    flex-basis: 100%;
    min-width: 0;
    border: 0;
    box-shadow: none;
    margin: 0;
    padding: 0 0 0.5rem 1rem;
    background: none;
    display: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }
  .nav-group.open .nav-submenu { display: flex; }
  .nav-group.open .nav-group-toggle::before { transform: translateY(0) rotate(-135deg); }
  .nav-submenu a { padding: 0.7rem 0; 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(--dark-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. */
.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; }
/* Static-poster fallback used when the user is on a metered/slow
   connection — see SM._shouldSkipBannerVideo() for the trigger logic. */
.banner-poster {
  position: absolute;
  inset: 0;
  background-size: cover;
  background-position: center;
  background-color: var(--dark-bg-2);
}
/* Belt-and-braces: even if our JS detection missed the user's preference,
   honour `prefers-reduced-data: reduce` at the CSS level by hiding the
   <video> element. The poster attribute on the <video> tag still shows. */
@media (prefers-reduced-data: reduce) {
  .banner-video video { display: none; }
}
.banner-video::after {
  /* Two scrims: a left-weighted one protecting the (left-aligned) headline
     even over very bright video frames, and a vertical fade that blends the
     band into its own dark background colour at the bottom. */
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgba(8, 20, 32, 0.72) 0%, rgba(8, 20, 32, 0.45) 55%, rgba(8, 20, 32, 0.22) 100%),
    linear-gradient(180deg, rgba(8, 20, 32, 0.38) 0%, rgba(8, 20, 32, 0.52) 60%, rgba(8, 20, 32, 0.94) 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;
  background:
    radial-gradient(ellipse at 80% -20%, rgba(0, 161, 225, 0.18), transparent 55%),
    var(--dark-bg);
  color: var(--ink);
  padding-block: clamp(5.5rem, 13vw, 10rem) clamp(4rem, 8vw, 6rem);
  overflow: hidden;
}
.hero-inner {
  position: relative;
  max-width: 1100px;
}

/* Wordmark hero — MEASURED off the live homepage:
     section 642px tall, background image cover/centre,
     black overlay at 50% opacity,
     wordmark PNG 702x106 centred on both axes, and no text at all.
   The banner video sits behind it in place of the live site's static desk.jpg;
   to use a still instead, drop `home` from SM.bannerVideos and give
   .hero-wordmark a background-image. */
.hero-wordmark {
  padding-block: 0;
  min-height: 642px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.hero-wordmark .hero-inner {
  display: flex;
  justify-content: center;
  width: 100%;
}
.hero-wordmark-mark {
  margin: 0;
  line-height: 0;
}
.hero-wordmark-mark img {
  width: 702px;
  max-width: min(78vw, 702px);
  height: auto;
}
/* The live hero darkens its background with a flat 50% black wash rather than
   the gradient used on `main`. Exactly ONE scrim must apply — the banner video
   already carries its own ::after, so the hero's ::before is only for the
   no-video case. Letting both render stacks to ~75% and crushes the picture. */
.hero-wordmark.has-video .banner-video::after,
.hero-wordmark:not(.has-video)::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
}
.hero-wordmark .hero-inner { z-index: 2; }

/* Intro band under the hero — the live site's single large centred grey line. */
.hero-intro { text-align: center; }
.hero-intro .hero-lead {
  margin-inline: auto;
  color: var(--ink-lead);
  max-width: 62ch;
}
.hero-intro .hero-meta { justify-content: center; }
.hero h1 {
  font-weight: 300;
  letter-spacing: -0.035em;
  margin-block: 1.5rem 2rem;
  text-wrap: balance;
}
.hero h1 em {
  font-style: normal;
  font-weight: 400;
  color: var(--accent-2);
}
.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. */
.hero-meta-clients {
  flex-basis: 100%;
}
.hero-meta-clients .value {
  font-size: 1.05rem;
  font-style: normal;
  font-weight: 300;
  line-height: 1.55;
  max-width: 70ch;
  color: var(--ink-mute);
}
/* MEASURED off the live homepage intro: Roboto 25.5px/30px, weight 400.
   Noticeably larger and lighter in colour than a normal body paragraph — this
   scale difference is a big part of why the WP site reads the way it does. */
.hero-lead {
  font-family: var(--font-lead);
  font-size: clamp(1.15rem, 1.9vw, 1.59rem);
  line-height: 1.18;
  color: var(--ink-mute);
  max-width: 46ch;
  font-weight: 400;
}

/* Photo bands (home) -------------------------------------------------------- */
/* The live homepage's two signature sections: a full-bleed dark photograph with
   a cyan Michroma heading, one paragraph and a call to action, all centred.
   MEASURED off the live page — 375px and 384px tall, heading 25px/36px in
   #00a1e1, body copy white and centred, buttons white-outlined. */
.photo-band {
  position: relative;
  background-size: cover;
  background-position: center;
  background-color: var(--dark-bg);
  padding-block: clamp(4rem, 7vw, 7rem);
  text-align: center;
  color: var(--dark-ink);
}
/* The source photographs are already darkened, so this is a light lift only —
   enough to hold white text at any crop without flattening the image. */
.photo-band::before {
  content: '';
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.35);
}
.photo-band > .container {
  position: relative;
  display: grid;
  grid-template-columns: 64% 1fr;
  align-items: center;
  gap: 2rem;
}
.photo-band-copy { text-align: center; }
.photo-band-title {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 1.75vw, 1.5625rem);   /* 25px at full size */
  line-height: 1.44;
  font-weight: 400;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 1rem;
}
.photo-band-text {
  font-family: var(--font-lead);
  font-size: clamp(0.95rem, 1.15vw, 1.0625rem);
  line-height: 1.55;
  color: #ffffff;
  max-width: 62ch;
  margin: 0 auto;
}
/* Buttons stack in the right-hand column — Music & Score has two. */
.photo-band-actions {
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
  align-items: stretch;
}
.photo-band-actions .btn { justify-content: center; }

@media (max-width: 860px) {
  .photo-band > .container { grid-template-columns: 1fr; gap: 2rem; }
  .photo-band-actions { align-items: center; }
  .photo-band-actions .btn { min-width: 15rem; }
}
/* Buttons on a photograph take the white outline treatment, same as the hero. */
.photo-band .btn {
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
}
.photo-band .btn:hover { background: #ffffff; color: var(--ink); }

/* Service icon rows (home) --------------------------------------------------- */
/* Five icon+label services on white, directly under each photo band. The icons
   are the studio's own line drawings, recovered from the WordPress media
   library — they had been dropped from this site years ago. */
.icon-row { padding-block: clamp(2rem, 3.5vw, 2.75rem); background: var(--bg-2); }
.icon-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1.5rem;
  align-items: start;
}
.icon-item { text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.85rem; }
.icon-item img {
  height: 35px;
  width: auto;
  /* Source PNGs are mid-grey line art; this keeps them consistent with the
     body-copy colour rather than fighting it. */
  opacity: 0.75;
}
.icon-item p {
  font-family: var(--font-body);
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--ink-mute);
  max-width: 18ch;
  margin: 0;
}
@media (max-width: 900px) { .icon-grid { grid-template-columns: repeat(2, 1fr); gap: 2rem 1.5rem; } }
@media (max-width: 480px) { .icon-grid { grid-template-columns: 1fr; } }

/* Testimonials + CTA on a photograph ---------------------------------------- */
.testimonial-section { padding-block: clamp(3rem, 5vw, 4rem); }
.cta-band-photo {
  background-size: cover;
  background-position: center;
  background-color: var(--dark-bg);
  position: relative;
  border: 0;
}
.cta-band-photo::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.45); }
.cta-band-photo > .container { position: relative; }
.cta-band-photo h2 {
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.1vw, 1.875rem);   /* 30px at full size */
  font-weight: 400;
  font-style: normal;
  color: #ffffff;
  margin-bottom: 1.75rem;
}
.cta-band-photo .btn { border-color: #ffffff; color: #ffffff; background: transparent; }
.cta-band-photo .btn:hover { background: #ffffff; color: var(--ink); }

/* 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: 3.5rem;
}
.service-header h2 { max-width: 20ch; margin-top: 0.6rem; }
.service-grid {
  display: grid;
  /* Fixed column counts at each breakpoint so 8 service items always fill
     a complete grid. */
  grid-template-columns: 1fr;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
}
@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: 0.8rem;
  min-height: 180px;
  transition: background 0.3s ease;
}
.service-item:hover { background: #f2fafe; }
.service-item .icon {
  width: 36px;
  height: 36px;
  opacity: 0.9;
  /* 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 h3,
.service-item h4 {
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  line-height: 1.45;
  color: var(--navy);
}
.service-item p { color: var(--ink-mute); font-size: 0.9rem; }

/* Page header (interior pages) --------------------------------------------- */
.page-header {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(ellipse at 85% -30%, rgba(0, 161, 225, 0.16), transparent 55%),
    var(--dark-bg);
  color: var(--ink);
  padding-block: clamp(4.5rem, 9vw, 7.5rem) clamp(3rem, 5vw, 4.5rem);
}
/* MEASURED off the live interior pages (/post-production/ etc.): the title band
   is centred, Michroma 52px/62px in white, with a small Arimo 15px subtitle
   under it. The live markup sets weight 600 on a font that only ships a 400 —
   the browser synthesises a smeared faux-bold. We keep 400 deliberately. */
.page-header { text-align: center; }
.page-header .eyebrow { justify-content: center; }
.page-header h1 {
  margin-top: 1.1rem;
  margin-inline: auto;
  max-width: 24ch;
  font-size: clamp(1.9rem, 3.6vw, 3.25rem);
  line-height: 1.19;
  text-wrap: balance;
}
.page-header-lead {
  font-family: var(--font-lead);
  font-size: clamp(1.05rem, 1.6vw, 1.4rem);
  line-height: 1.25;
  margin-inline: auto;
  color: var(--ink-mute);
  max-width: 50ch;
  margin-top: 1.5rem;
  font-weight: 400;
}

/* 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);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
  overflow: hidden;
}
.project-card:hover {
  border-color: var(--accent);
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
}
.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(8, 20, 32, 0.55));
  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(--accent-ink);
  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);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink-mute);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  transition: all 0.2s ease;
}
.filter-btn:hover {
  border-color: var(--navy);
  color: var(--navy);
}
.filter-btn.active {
  background: var(--navy);
  border-color: var(--navy);
  color: #fff;
}
/* Search field — sits at the right end of the filter bar. */
.filter-search {
  margin-left: auto;
  min-width: 220px;
  padding: 0.55rem 1.1rem;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--bg-2);
  color: var(--ink);
  font: inherit;
  font-size: 0.85rem;
  letter-spacing: 0.02em;
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
  -webkit-appearance: none;
  appearance: none;
}
.filter-search::placeholder {
  color: var(--ink-dim);
  letter-spacing: 0.05em;
}
.filter-search:hover { border-color: var(--ink-dim); }
.filter-search:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(0, 161, 225, 0.18);
}
/* 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-ink); }
@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. */
.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;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
  transition: transform 0.3s ease, box-shadow 0.3s ease, border-color 0.3s ease;
}
.team-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-2);
  border-color: var(--accent);
}
.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 (Safari flickers
     otherwise — see SMwebsite.md). */
  transform: translateZ(0);
  will-change: filter;
  filter: grayscale(0.45);
  transition: filter 0.4s ease;
  image-rendering: auto;
}
.team-card:hover .team-card-image { filter: grayscale(0); }
.team-card-body {
  padding: 1rem 1.2rem 1.2rem;
}
.team-card-body h3 {
  font-size: 1.05rem;
  font-weight: 500;
}
.team-card-body p {
  font-size: 0.8rem;
  color: var(--accent-ink);
  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);
}
.project-detail-poster {
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  position: sticky;
  top: 5.5rem;
}
/* NOTE: this media query MUST come AFTER the base .project-detail-poster
   rule above — source order decides which wins (equal specificity). */
@media (max-width: 800px) {
  .project-detail-hero { grid-template-columns: 1fr; gap: 2rem; }
  /* Single column on mobile — drop sticky so the poster scrolls away. */
  .project-detail-poster { position: static; top: auto; }
}
.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: normal;
  color: var(--accent-ink);
  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;
}

/* Buttons -------------------------------------------------------------------- */
/* MEASURED off the live "OUR POST WORK" button: transparent fill, 2px border,
   4px radius, Arimo 18px/700, padding 17px 24px 16px. Outlined, not solid —
   and the pill shape from the previous design is the single biggest
   "not-WordPress" tell, so it goes. */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  padding: 17px 24px 16px;
  border: 2px solid var(--accent);
  border-radius: var(--radius);
  background: transparent;
  color: var(--accent-ink);
  font-family: var(--font-body);
  font-size: 18px;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  font-weight: 700;
  transition: all 0.2s ease;
}
.btn:hover { background: var(--accent); border-color: var(--accent); color: #ffffff; }
.btn:hover {
  background: var(--navy);
  color: #fff;
}
.btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}
/* On the dark video bands the live site draws the same button in white. */
.hero .btn, .page-header .btn, .cta-band .btn {
  border-color: #ffffff;
  color: #ffffff;
  background: transparent;
}
.hero .btn:hover, .page-header .btn:hover, .cta-band .btn:hover {
  background: #ffffff;
  color: var(--ink);
}
.btn-solid:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #062536;
}
.btn-ghost {
  background: transparent;
  border-color: var(--accent);
  color: var(--accent-ink);
}
.btn-ghost:hover {
  border-color: var(--accent);
  background: var(--accent);
  color: #ffffff;
}
/* Inside dark bands the navy-on-dark outline doesn't read — flip to cyan. */
.hero .btn, .page-header .btn, .cta-band .btn {
  border-color: var(--accent);
  color: var(--accent-2);
}
.hero .btn:hover, .page-header .btn:hover, .cta-band .btn:hover {
  background: var(--accent);
  color: #062536;
}
.hero .btn-solid, .page-header .btn-solid, .cta-band .btn-solid {
  background: var(--accent);
  border-color: var(--accent);
  color: #062536;
}
.hero .btn-solid:hover, .page-header .btn-solid:hover, .cta-band .btn-solid:hover {
  background: #fff;
  border-color: #fff;
  color: var(--dark-bg);
}

/* In-page trailer player (facade pattern — see SMwebsite.md). */
.trailer-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: var(--dark-bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow-1);
}
.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(--dark-bg-2);
  background-size: cover;
  background-position: center;
  cursor: pointer;
  border: 0;
  padding: 0;
  color: inherit;
}
/* Subtle vignette so the play button always reads cleanly on the thumb. */
.trailer-facade::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(0,0,0,0.15) 0%, rgba(0,0,0,0.5) 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.04) 0%, rgba(0,0,0,0.35) 100%);
}
/* The play button — 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(8, 20, 32, 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. */
.detail-section-footer {
  margin-top: 4rem;
  padding-top: 2.5rem;
  border-top: 1px solid var(--line);
}
.detail-section-title {
  font-family: var(--font-body);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--accent-ink);
  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(190px, 1fr));
  gap: 0.8rem;
}
.crew-item {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.6rem 0.8rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  transition: all 0.2s ease;
}
.crew-item:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-1);
}
.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: 600;
  line-height: 1.2;
}
.crew-item-info p {
  font-size: 0.72rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
  line-height: 1.3;
}

/* Accolade list on PROJECT detail pages (.accolades-list / .accolade-row) ----- */
.accolades-list {
  display: grid;
  gap: 0.8rem;
}
.accolade-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 1rem;
  align-items: center;
  padding: 0.9rem 1.1rem;
  background: var(--bg-2);
  border: 1px solid var(--line);
  border-radius: var(--radius);
}
.accolade-row h4 {
  font-family: var(--font-body);
  font-size: 0.95rem;
  font-weight: 600;
}
.accolade-row .meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  margin-top: 0.15rem;
}

/* Accolades page (project-grouped cards) ------------------------------------- */
.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);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.accolade-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.accolade-card-poster {
  display: block;
  aspect-ratio: 2 / 3;
  background-size: cover;
  background-position: center;
  background-color: var(--bg-3);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  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.04); }
.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-ink); }
.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);
  border-radius: var(--radius);
}
.accolade-item-text {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.accolade-item-text strong {
  font-weight: 600;
  font-size: 0.98rem;
  color: var(--ink);
}
.accolade-meta {
  font-size: 0.82rem;
  color: var(--ink-mute);
  letter-spacing: 0.02em;
}
/* Result badges. Real medal tones now that the background is light. */
.accolade-result {
  font-family: var(--font-body);
  font-size: 0.72rem;
  font-weight: 700;
  padding: 0.35rem 0.9rem;
  border: 1.5px solid var(--line);
  border-radius: var(--radius);
  white-space: nowrap;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
}
.accolade-result.winner  { color: var(--accent-ink);   border-color: var(--accent);       background: rgba(0, 161, 225, 0.08); }
.accolade-result.nominee { color: var(--ink-mute); }
.accolade-result.bronze  { color: var(--medal-bronze); border-color: var(--medal-bronze); background: rgba(154, 95, 37, 0.07); }
.accolade-result.silver  { color: var(--medal-silver); border-color: var(--medal-silver); background: rgba(102, 114, 125, 0.07); }
.accolade-result.gold    { color: var(--medal-gold);   border-color: var(--medal-gold);   background: rgba(156, 124, 29, 0.08); }
.accolade-result.listed  { color: var(--accent-ink);   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);
  border-radius: var(--radius);
  box-shadow: var(--shadow-2);
  filter: grayscale(0.25);
}
.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: normal;
  color: var(--accent-ink);
  font-size: 1.15rem;
  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: 0 1.25rem;
  text-align: center;
  background: none;
  border: 0;
  box-shadow: none;
}
.testimonial-author {
  font-family: var(--font-display);
  font-size: 1.125rem;            /* 18px, as measured on the live site */
  font-weight: 400;
  line-height: 1.4;
  color: var(--navy);
  margin-bottom: 0.9rem;
}
.testimonial blockquote {
  font-family: var(--font-body);
  font-style: normal;
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--ink-mute);
  margin: 0 0 0.9rem;
  font-weight: 400;
}
.testimonial-title {
  font-size: 0.78rem;
  color: var(--ink-dim);
}

/* CTA band ------------------------------------------------------------------ */
.cta-band {
  background:
    radial-gradient(ellipse at 50% 130%, rgba(0, 161, 225, 0.22), transparent 60%),
    var(--dark-bg);
  color: var(--ink);
  padding-block: clamp(4rem, 8vw, 6rem);
  text-align: center;
}
.cta-band h2 {
  font-style: normal;
  font-weight: 400;
  margin-bottom: 2rem;
}
.cta-band .accent { color: var(--accent-2); font-style: normal; }

/* 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);
  border-radius: var(--radius);
  background: var(--bg-2);
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
}
.location-card:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-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-ink); }
.location-card a:hover { color: var(--navy); }

/* Footer -------------------------------------------------------------------- */
.site-footer {
  background: var(--dark-bg);
  color: var(--ink);
  border-top: 3px solid var(--accent);
  padding-block: 3rem 2rem;
}
/* The logo PNG is navy+cyan — invisible on the dark footer. Render it white. */
.site-footer .brand-logo {
  filter: brightness(0) invert(1);
  opacity: 0.92;
}
.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.4rem;
}
.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-2);
  letter-spacing: 0.05em;
}
.footer-top:hover { color: #fff; }

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

/* 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: normal;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.4;
}

.score-tracks {
  display: grid;
  gap: 1.2rem;
}
.track {
  display: grid;
  /* 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);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.track:hover {
  border-color: var(--accent);
  box-shadow: var(--shadow-2);
}
.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: var(--radius);
  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-ink);
  text-decoration: none;
}
.track-project:hover { color: var(--navy); text-decoration: underline; }
.track audio {
  width: 100%;
  margin-top: 0.4rem;
  color-scheme: light;
}
@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;
  font-size: clamp(1.6rem, 2.6vw, 2.2rem);
}
.facility-section p {
  color: var(--ink-mute);
  font-size: 1.02rem;
  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);
  border-radius: var(--radius);
  background-color: var(--bg-3);
  background-size: cover;
  background-position: center;
  cursor: zoom-in;
  padding: 0;
  box-shadow: var(--shadow-1);
  transition: border-color 0.25s ease, transform 0.4s ease, box-shadow 0.4s ease;
}
.facility-image:hover,
.facility-image:focus-visible {
  border-color: var(--accent);
  transform: translateY(-2px);
  box-shadow: var(--shadow-2);
  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(4, 10, 17, 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-radius: var(--radius);
  background: #000;
}
.lightbox-figure figcaption {
  font-family: var(--font-body);
  font-size: 0.78rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #c4d2dd;
  text-align: center;
  display: flex;
  gap: 1rem;
  align-items: center;
  justify-content: center;
}
.lightbox-counter {
  color: #7e92a2;
}
/* 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: #fff;
  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: #062536;
  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: #fff;
  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: #062536;
  outline: none;
}

/* FAQ page ------------------------------------------------------------------- */
.faq-list {
  display: grid;
  gap: 1px;
  background: var(--line);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  max-width: 900px;
}
.faq-item {
  background: var(--bg-2);
  padding: 1.8rem 2rem;
}
.faq-item h3 {
  font-family: var(--font-display);
  font-size: 1.25rem;
  font-weight: 500;
  margin-bottom: 0.7rem;
  color: var(--ink);
}
.faq-item p {
  color: var(--ink-mute);
  font-size: 1rem;
  line-height: 1.65;
  max-width: 70ch;
}
.faq-item a { color: var(--accent-ink); }
.faq-item a:hover { color: var(--navy); text-decoration: underline; }

/* 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; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .fade-up { animation: none; }
  *, *::before, *::after { transition-duration: 0.01ms !important; }
}