/* ============================================================
   SLOSS AUDIO - v2 "quiet cut"
   Near-black · warm white · Inter only · content first
   ============================================================ */

:root {
  --bg: #0a0a0a;
  --bg-2: #111110;
  --text: #f2f0eb;
  --muted: #9b978e;
  --faint: #55524c;
  --line: #2e2c2a;      /* ~30% brighter than the original #232220 - the first
                            pass at +15% still read as too subtle. Every
                            border/divider sitewide uses this variable, so this
                            keeps them all thematically consistent. */
  --accent: #d6a747;      /* gold - main accent: hero line, underlines, interactive */
  --accent-2: var(--accent);  /* small labels now share the same gold as the big
                                  moments. Was a separate muted grey, but that left
                                  gold feeling too rare across the page; tying it to
                                  --accent means every gold reference moves together
                                  if the color is ever adjusted again. */
  --gold-hi: #e9c376;     /* gold highlight for metallic gradients */
  --gold-lo: #ab8433;     /* gold shadow */
  --font: "Inter", -apple-system, "Helvetica Neue", sans-serif;
  /* shared by .section padding and .rule margin-bottom, so the gap
     above a divider (previous section's bottom padding) and the gap
     below it (this rule's margin) are always the exact same number,
     not two independent values that only looked equal by accident.
     Slightly smaller than the original section padding. */
  --section-gap: clamp(3rem, 6vw, 4.8rem);
  /* divider-to-heading and heading-to-content are a tighter, separate pair:
     they read as one cohesive group, distinct from the bigger breathing room
     between one section's content and the next section's divider. */
  --heading-gap: 2.4rem;
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  /* The nav is sticky and 64px tall, so an un-offset anchor jump parks the
     section top underneath it and hides the heading. scroll-padding-top applies
     to every anchor on the page automatically, and the same value works on
     mobile and desktop because the nav height does not change. */
  scroll-padding-top: 84px;
}

body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--text);
  line-height: 1.6;
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
}

img, video, iframe { max-width: 100%; display: block; }

a { color: inherit; text-decoration: none; }

::selection { background: var(--accent); color: #0a0a0a; }

.inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
}

/* ---------- type scale ---------- */

.kicker {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}

.h-section {
  font-size: clamp(1.5rem, 3vw, 2.1rem);
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  line-height: 1.15;
  color: #ffffff;
}

.rule {
  border: 0;
  border-top: 1px solid var(--line);
  margin: 0 0 var(--heading-gap);   /* matches .section-head's margin-bottom exactly,
                                        so divider-to-heading equals heading-to-content */
}

/* ============================================================
   NAV
   ============================================================ */

.nav {
  position: sticky;
  top: 0;
  z-index: 60;
  background: rgba(10, 10, 10, 0.95);
  border-bottom: 1px solid var(--line);
}

.nav-inner {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 56px);
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.brand {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  white-space: nowrap;
}
.brand span { color: var(--accent); font-weight: 700; }

.nav-links {
  display: flex;
  align-items: center;
  gap: clamp(1.1rem, 2.5vw, 2.2rem);
}

.nav-links a {
  font-size: 0.86rem;
  font-weight: 500;
  color: var(--muted);
  transition: color 0.15s;
}
.nav-links a:hover, .nav-links a.active { color: var(--text); }

.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 2px;
  background: var(--text);
  margin: 5px 0;
}

/* ============================================================
   HERO
   ============================================================ */

.hero {
  /* reverted to the original values: large top gap, tighter bottom. Deliberately
     asymmetric - this is the spacing Brian preferred. */
  padding: clamp(5rem, 12vw, 9rem) 0 clamp(3.5rem, 7vw, 6rem);
}

.hero .kicker { margin-bottom: 1.4rem; }

.hero .kicker-under {
  margin-top: 1.5rem;
  margin-bottom: 0;
  color: var(--faint);
}

.hero h1 {
  font-size: clamp(2rem, 4.6vw, 3.6rem);
  font-weight: 800;
  letter-spacing: 0.02em;
  line-height: 1.08;
  text-transform: uppercase;
  max-width: 21ch;
}

.hero h1 em {
  font-style: normal;
  color: var(--accent);
}

.hero-sub {
  margin-top: 1.6rem;
  color: var(--muted);
  max-width: 56ch;
  font-size: 1.02rem;
}
.hero-sub strong { color: var(--text); font-weight: 600; }
.hero-sub .brand-inline {
  font-size: 1.35em;
  font-weight: 800;
  letter-spacing: 0.02em;
}

/* ============================================================
   SECTIONS
   ============================================================ */

.section { padding: var(--section-gap) 0; }

.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: var(--heading-gap);   /* same variable as .rule, guaranteed to match */
}


/* ============================================================
   WORK - inline players
   ============================================================ */

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(1.6rem, 3vw, 2.6rem) clamp(1.4rem, 2.5vw, 2.2rem);
}

.player {
  grid-column: span 1;
}

.player.wide { grid-column: span 2; }

.player-frame {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--bg-2);
  overflow: hidden;
  cursor: pointer;
}

.player-frame > img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.player-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: opacity 0.2s;
}
.player-frame:hover img { opacity: 0.85; }

.player-frame .play {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  pointer-events: none;
}
.player-frame .play i {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: rgba(10, 10, 10, 0.72);
  border: 1px solid rgba(242, 240, 235, 0.5);
  display: grid;
  place-items: center;
  font-style: normal;
  font-size: 0.95rem;
  color: var(--text);
  padding-left: 3px;
  transition: background 0.15s, border-color 0.15s;
}
.player-frame:hover .play i {
  background: var(--accent);
  border-color: var(--accent);
  color: #0a0a0a;
}

.player-frame iframe,
.player-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

/* Never crop the picture. An earlier version used object-fit:cover here so a
   2.39:1 master would fill the 16:9 card without bars, but that quietly sliced
   both ends off the frame. Shape the card to the master instead. */
.player-frame video { object-fit: contain; }

/* scope masters: card matches the film, so no crop and no letterbox */
.player.scope .player-frame { aspect-ratio: 1920 / 802; }

.player-caption {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 1rem;
  padding-top: 0.75rem;
}

.player-caption h3 {
  font-size: 0.95rem;
  font-weight: 600;
  letter-spacing: 0.01em;
}

.player-caption .role {
  font-size: 0.78rem;
  color: var(--muted);
  white-space: nowrap;
  flex-shrink: 0;
}

/* ============================================================
   FILMS - poster wall
   ============================================================ */

.poster-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}

/* featured block: top-priority films, bigger cells */
.poster-grid.featured {
  grid-template-columns: repeat(4, 1fr);
  margin-bottom: 1rem;
}
.poster.hero-poster {
  grid-column: span 2;
  grid-row: span 2;
}
/* Featured cards deliberately do NOT force their info visible: they used to,
   which meant 5 posters behaved differently from the other 22 for no reason.
   They reveal on hover like everything else. Only the title scales up a little,
   because those cards are physically larger. */
.poster-grid.featured .poster-info h3 { font-size: 0.95rem; }

.poster {
  position: relative;
  background: var(--bg-2);
  overflow: hidden;
}

.poster img {
  aspect-ratio: 2 / 3;
  object-fit: cover;
  width: 100%;
  height: 100%;
  transition: opacity 0.2s;
}
.poster:hover img { opacity: 0.75; }

.poster.landscape { grid-column: span 2; }
.poster.landscape img { aspect-ratio: auto; }

.poster-info {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.8rem 0.8rem 0.7rem;
  background: linear-gradient(transparent, rgba(5, 5, 5, 0.92) 60%);
  opacity: 0;
  transition: opacity 0.2s;
}
.poster:hover .poster-info { opacity: 1; }

.poster-info h3 { font-size: 0.85rem; font-weight: 700; }
.poster-info p { color: var(--muted); font-size: 0.72rem; margin-top: 1px; }

.poster.playable { cursor: pointer; }

.poster-badge {
  position: absolute;
  top: 0.7rem;
  left: 0.7rem;
  z-index: 2;
  background: rgba(5, 5, 5, 0.82);
  border: 1px solid rgba(242, 240, 235, 0.3);
  color: var(--text);
  font-size: 0.6rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 0.32rem 0.6rem;
}

/* film overlay player */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 100;
  background: rgba(5, 5, 5, 0.96);
  display: none;
  align-items: center;
  justify-content: center;
  padding: clamp(12px, 3vw, 40px);
}
.overlay.open { display: flex; }

.overlay-inner { width: min(1080px, 100%); }

.overlay-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: #000;
}
.overlay-frame iframe,
.overlay-frame video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  background: #000;
}

.overlay-title {
  padding-top: 0.8rem;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--muted);
}

.overlay-close {
  position: absolute;
  top: 18px;
  right: 22px;
  background: none;
  border: 1px solid var(--faint);
  color: var(--text);
  width: 42px;
  height: 42px;
  border-radius: 50%;
  font-size: 1rem;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s;
}
.overlay-close:hover { border-color: var(--accent); color: var(--accent); }

.films-note { margin-top: 1.6rem; color: var(--faint); font-size: 0.85rem; }
.films-note a { color: var(--muted); border-bottom: 1px solid var(--faint); }
.films-note a:hover { color: var(--text); }

/* ============================================================
   CLIENTS - plain text row
   ============================================================ */

.clients-row {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem 2.4rem;
  align-items: baseline;
}

.clients-row span {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0.04em;
}

/* logo wall: flex-wrapped, consistent sizing, color logos */
.clients-wall,
.clients-extra {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 1.5rem 2rem;
}

.client-logo {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 58px;
  padding: 0 0.2rem;
}
/* portrait/vertical logos need more height to read at all */
.client-logo img.tall { max-height: 56px; }
.client-logo img {
  height: auto;
  max-height: 40px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  opacity: 0.9;
  transition: opacity 0.2s, transform 0.2s;
}
.client-logo:hover img { opacity: 1; transform: scale(1.06); }
/* white-treatment for inherently-dark marks so they show on the dark bg */
.client-logo img.invert { filter: brightness(0) invert(1); opacity: 0.82; }
.client-logo:hover img.invert { opacity: 1; }
/* for logos whose artwork has an opaque light background (reads as a badge) */
.client-logo img.chip {
  border-radius: 8px;
  background: #fff;
}

.client-logo.wm {
  font-weight: 700;
  font-size: 1.02rem;
  color: var(--text);
  letter-spacing: 0.02em;
  opacity: 0.85;
  white-space: nowrap;
}
.client-logo.wm:hover { opacity: 1; }

/* client groups: Film / Commercial */
.client-group + .client-group { margin-top: 2.6rem; }
.group-label {
  display: block;
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--accent-2);
  text-align: center;
  margin-bottom: 1.3rem;
}
.group-label::after {
  content: "";
  display: block;
  width: 26px;
  height: 1px;
  background: var(--line);
  margin: 0.7rem auto 0;
}

/* ---- hover name tooltip ---- */
.client-logo { position: relative; }

.client-logo::after,
.client-logo::before {
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s cubic-bezier(.2,.8,.3,1);
}

/* the bubble */
.client-logo::after {
  content: attr(data-name);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translate(-50%, 6px) scale(0.96);
  white-space: nowrap;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--text);
  padding: 0.5rem 0.85rem;
  border-radius: 8px;
  background: linear-gradient(180deg, #201f1c, #141312);
  border: 1px solid rgba(242, 240, 235, 0.13);
  box-shadow: 0 10px 26px -8px rgba(0,0,0,0.85), inset 0 1px 0 rgba(255,255,255,0.06);
  z-index: 20;
}

/* the caret */
.client-logo::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 5px);
  left: 50%;
  transform: translate(-50%, 6px) rotate(45deg);
  width: 9px;
  height: 9px;
  background: #161513;
  border-right: 1px solid rgba(242, 240, 235, 0.13);
  border-bottom: 1px solid rgba(242, 240, 235, 0.13);
  border-radius: 1px;
  z-index: 21;
}

.client-logo:hover::after { opacity: 1; transform: translate(-50%, 0) scale(1); }
.client-logo:hover::before { opacity: 1; transform: translate(-50%, 0) rotate(45deg); }

@media (hover: none) {
  .client-logo::after, .client-logo::before { display: none; }
}

/* see-more reveal (unused now, kept for the shop page) */
.clients-more {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 1.8rem;
}
.see-more {
  font-family: inherit;
  font-size: 0.76rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  background: transparent;
  border: 1px solid var(--line);
  border-radius: 999px;
  padding: 0.55rem 1.3rem;
  cursor: pointer;
  transition: all 0.18s;
}
.clients-more:hover .see-more,
.clients-more.open .see-more,
.clients-more:focus-within .see-more { color: var(--accent); border-color: var(--accent); }

.clients-extra {
  width: 100%;
  display: none;
  opacity: 0;
  transition: opacity 0.3s ease;
}
/* Driven by a click toggle (script.js) so it works on touch and stays open.
   Deliberately a plain show/hide: an animated max-height reveal kept collapsing
   to zero height, and a portfolio section being reachable matters more than the
   transition looking smooth. */
.clients-more.open .clients-extra {
  display: flex;
  opacity: 1;
  margin-top: 2rem;
}
.clients-extra::before {
  content: "";
  width: 100%;
  height: 1px;
  background: var(--line);
  margin-bottom: 1.4rem;
}

/* ============================================================
   INTERACTIVE / DEVICES / VOICE
   ============================================================ */

.credits-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 1rem;
}
/* compact cards, centred, so they don't dominate the page */
.credits-grid.three {
  grid-template-columns: repeat(6, minmax(0, 150px));
  justify-content: center;
  gap: 0.9rem;
}
@media (max-width: 900px) { .credits-grid.three { grid-template-columns: repeat(3, minmax(0,150px)); } }
@media (max-width: 520px) { .credits-grid.three { grid-template-columns: repeat(2, minmax(0,150px)); } }

.credit-card {
  position: relative;
  border: 1px solid var(--line);
  border-radius: 10px;
  overflow: hidden;
  background: var(--bg-2);
  display: flex;
  flex-direction: column;
  transition: border-color 0.2s, transform 0.2s;
}
a.credit-card:hover { border-color: var(--accent); transform: translateY(-3px); }

/* image is the hero: nothing cropped, everything fully visible */
.credit-media {
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  padding: 0.7rem;
  background: #0b0b0a;
  overflow: hidden;
}
.credit-media img {
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: auto;
  object-fit: contain;
  transition: transform 0.35s ease, opacity 0.25s ease;
}
.credit-card:hover .credit-media img { transform: scale(1.03); opacity: 0.28; }

/* info revealed on hover, over the image */
.credit-hover {
  position: absolute;
  inset: 0 0 auto 0;
  aspect-ratio: 1 / 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.8rem;
  text-align: center;
  opacity: 0;
  transform: translateY(6px);
  transition: opacity 0.22s ease, transform 0.28s cubic-bezier(.2,.8,.3,1);
  pointer-events: none;
}
.credit-card:hover .credit-hover { opacity: 1; transform: translateY(0); }
.ch-role {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.ch-desc {
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--text);
}

.credit-body {
  padding: 0.55rem 0.5rem 0.65rem;
  border-top: 1px solid var(--line);
  margin-top: auto;
}
.credit-body h3 { font-size: 0.72rem; line-height: 1.25; font-weight: 700; text-align: center; }

/* ============================================================
   ABOUT
   ============================================================ */

.about-grid {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: clamp(2.5rem, 5vw, 5rem);
  align-items: stretch;   /* was start, which left an L-shaped void under the
                             photo because it is 1.59:1 landscape and ends well
                             above the bottom of the text column */
}

.about-photo { height: 100%; }
.about-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;      /* fills the column so the two-column block reads as
                             one solid shape instead of a photo floating above
                             empty space */
  object-position: center;
}
.about-body .statement {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
  font-weight: 700;
  line-height: 1.4;
  letter-spacing: 0.01em;
  text-transform: uppercase;
  margin-bottom: 1.6rem;
}

.about-body p { color: var(--text); margin-bottom: 1.1rem; max-width: 62ch; }
.about-body p strong { color: var(--text); font-weight: 600; }
.about-body a { color: var(--text); border-bottom: 1px solid var(--faint); }
.about-body a:hover { border-color: var(--accent); }

/* awards list */

.list-block { margin-top: 2.6rem; }

/* Awards form a full-width band under the two-column About block. Deliberately
   NOT a narrow centred box: at 620px its edges lined up with neither the photo's
   left edge nor the text column's, giving the eye a third competing vertical
   edge. Full width means the band shares the same edges as everything else. */
.awards-block {
  max-width: none;
  margin: calc(var(--section-gap) * 0.8) 0 0;
  text-align: center;
}
.awards-block h3 { margin-bottom: 1.7rem; }   /* more air down to the laurels */

.list-block h3 {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 1rem;
}


/* ---- laurels: only the three festival honours get one ----
   Deliberately restrained. The remaining awards stay a plain list below,
   so the section reads as confident rather than desperate. */
.laurel-row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: clamp(1rem, 3vw, 1.8rem);
  margin-bottom: 1.7rem;   /* more air down to the scroll box */
}
.laurel-award {
  flex: 0 1 150px;
  min-width: 120px;
  text-align: center;
}
.laurel-art {
  position: relative;
  width: 82px;
  height: 66px;
  margin: 0 auto 0.3rem;
  color: var(--accent);              /* gold, tints the currentColor svg */
  display: grid;
  place-items: center;
}
.laurel-art svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}
.laurel-yr {
  position: relative;
  z-index: 2;
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.02em;
  color: var(--text);
}
.laurel-name {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  margin-bottom: 0.1rem;
}
.laurel-film {
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.2;
}
.laurel-fest {
  font-size: 0.62rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.05rem;
}

/* scroll box: per-row underlines removed, and a fixed height means future awards
   extend the scroll area rather than the page */
.award-scroll {
  max-width: 620px;      /* narrower than the full band - full width read as too
                            wide and stranded the years far from the titles */
  margin: 0 auto;
  max-height: 118px;
  overflow-y: auto;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 0.35rem 0.9rem;
  text-align: left;
  /* Both properties are needed. Styling only the -webkit- pseudo-elements left
     the standard scrollbar-color unset, so the browser fell back to the OS
     default and drew a bright white bar on this dark panel. */
  scrollbar-width: thin;
  scrollbar-color: #3a3835 transparent;
}
.award-scroll::-webkit-scrollbar { width: 7px; }
.award-scroll::-webkit-scrollbar-track { background: transparent; }
.award-scroll::-webkit-scrollbar-thumb { background: #3a3835; border-radius: 4px; }
.award-scroll::-webkit-scrollbar-thumb:hover { background: #4a4844; }

.award-list { list-style: none; }
.award-list li {
  display: flex;
  gap: 0.7rem;
  padding: 0.32rem 0;
  font-size: 0.86rem;
  color: var(--muted);
}
/* nowrap so a long entry never splits the award name across two lines */
.award-list li b { color: var(--accent); font-weight: 600; white-space: nowrap; }
.award-list li span:last-child { margin-left: auto; color: var(--faint); white-space: nowrap; }



/* ============================================================
   TESTIMONIALS - centered one-at-a-time carousel
   Scroll-snap does the heavy lifting: native touch swipe + momentum
   for free, arrows/dots just scroll the viewport. One card visible,
   centered in the section rather than pinned to a column edge.
   ============================================================ */
.testimonials {
  max-width: 820px;      /* wider = fewer wrapped lines = far less vertical space */
  margin: 1.6rem auto 0; /* divider dropped: the awards box already separates this */
  text-align: center;
}

/* the carousel already ends with small, airy nav buttons, so this section needs
   less bottom padding than the shared --section-gap gives every other section */
#about { padding-bottom: 2.2rem; }
/* matches .list-block h3 ("Select Awards & Festivals") exactly */
.testi-head {
  font-size: 0.95rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text);
  margin-bottom: 0.4rem;
}
.testi-viewport {
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  outline: none;
}
.testi-viewport::-webkit-scrollbar { display: none; }
.testi-track {
  display: flex;
  /* the tallest quote sets the track height; without this, shorter quotes get
     vertically centred and open a large gap under the "Kind Words" heading */
  align-items: flex-start;
}
.testi-card {
  flex: 0 0 100%;
  scroll-snap-align: center;
  scroll-snap-stop: always;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0.5rem clamp(0.5rem, 2vw, 1.2rem);
  min-height: 0;                    /* no forced height at all */
}
.testi-card p {
  color: var(--muted);              /* darker/quieter now - About carries the brightness */
  font-size: clamp(0.85rem, 1.1vw, 0.95rem);   /* smaller */
  line-height: 1.5;
  font-weight: 400;
  margin: 0 auto;
  max-width: 78ch;                  /* wide: fewer wrapped lines */
}
.testi-card footer {
  margin-top: 0.7rem;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.testi-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 1.4rem;
  margin-top: 0.4rem;
}
.testi-arrow {
  background: transparent;
  border: 1px solid var(--line);
  color: var(--muted);
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  display: grid;
  place-items: center;
  transition: color 0.18s, border-color 0.18s;
  flex-shrink: 0;
}
.testi-arrow:hover { color: var(--accent); border-color: var(--accent); }
.testi-dots {
  display: flex;
  gap: 0.55rem;
  align-items: center;
}
.testi-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 0;
  padding: 0;
  background: var(--line);
  cursor: pointer;
  transition: background 0.18s, transform 0.18s;
}
.testi-dot:hover { background: var(--faint); }
.testi-dot.is-active { background: var(--accent); transform: scale(1.25); }

/* iOS reads two quick taps on a small control as a double-tap and zooms the
   page - exactly what happens when you click through the carousel. This keeps
   tapping and scrolling but disables the double-tap-zoom gesture on controls.
   Deliberately scoped to controls rather than disabling page zoom globally,
   which would break pinch-to-zoom for anyone who needs it. */
.testi-arrow,
.testi-dot,
.see-more,
.nav-toggle,
.player-frame {
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

/* Touch devices also need bigger targets - a small dot is what makes you tap
   twice in the first place. Written twice on purpose: the media query is the
   standard, and the .no-hover class (set by script.js) is the version that is
   actually testable and covers hybrid devices that report hover inconsistently. */
@media (hover: none) {
  .testi-arrow { width: 42px; height: 42px; }
  .testi-dot {
    box-sizing: content-box;
    padding: 7px;                   /* 22px tap target, dot still reads as 8px */
    background-clip: content-box;
  }
}
.no-hover .testi-arrow { width: 42px; height: 42px; }
.no-hover .testi-dot {
  box-sizing: content-box;
  padding: 7px;
  background-clip: content-box;
}

/* ============================================================
   STUDIO - compact spec columns
   ============================================================ */

.studio-grid2 {
  display: grid;
  grid-template-columns: 0.7fr 1.3fr;
  gap: clamp(2rem, 5vw, 4rem);
  /* top-aligned, not centred: the spec list is shorter than the photo, and
     centring it left the first label floating in the middle of the frame */
  align-items: start;
}

.studio-photo {
  position: relative;
  border-radius: 12px;
  overflow: hidden;
  background: #0d0d0c;
}
.studio-photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: 3 / 4;
}
.studio-photo .ph-note {
  position: absolute;
  inset: auto 0 0 0;
  padding: 1.6rem 1rem 0.7rem;
  background: linear-gradient(transparent, rgba(5,5,5,0.85));
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
}
.studio-photo.empty { display: grid; place-items: center; border: 1px dashed var(--line); }
.studio-photo.empty img { display: none; }
.studio-photo.empty .ph-note { position: static; background: none; padding: 0; }

.studio-specs { display: grid; gap: 1.6rem; }
.spec-row { display: grid; gap: 0.35rem; }
.spec-k {
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}
.spec-v {
  font-size: clamp(1rem, 1.6vw, 1.18rem);
  color: var(--text);
  line-height: 1.5;
}

.spec-cols {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: clamp(1.5rem, 4vw, 3rem);
}

.spec-cols h3 {
  font-size: 0.8rem;
  font-weight: 800;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin-bottom: 0.9rem;
  color: var(--text);
}

.spec-cols ul { list-style: none; }
.spec-cols li {
  padding: 0.4rem 0;
  border-bottom: 1px solid var(--line);
  font-size: 0.88rem;
  color: var(--muted);
}
.spec-cols li span { color: var(--faint); margin-right: 0.5rem; }

/* ============================================================
   LAB (page + teaser)
   ============================================================ */

.lab-teaser-link {
  display: block;
  border: 1px solid var(--line);
  padding: clamp(1.8rem, 4vw, 2.8rem);
  transition: border-color 0.2s, background 0.2s;
}
.lab-teaser-link:hover { border-color: var(--accent); background: var(--bg-2); }
.lab-teaser-link .h-section { margin-bottom: 0.6rem; }
.lab-teaser-link p { color: var(--muted); max-width: 60ch; }
.lab-teaser-link .go {
  display: inline-block;
  margin-top: 1.2rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
}

.field-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
}

.field-card { position: relative; overflow: hidden; }
.field-card img { aspect-ratio: 4 / 5; object-fit: cover; }
.field-card figcaption {
  padding-top: 0.6rem;
  font-size: 0.75rem;
  color: var(--faint);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.tool-list { list-style: none; }
.tool-list li {
  display: grid;
  grid-template-columns: 200px 1fr auto;
  gap: 1.5rem;
  padding: 1.4rem 0;
  border-bottom: 1px solid var(--line);
  align-items: baseline;
}
.tool-list h3 { font-size: 1.05rem; font-weight: 700; }
.tool-list .kind { display: block; font-size: 0.75rem; color: var(--faint); margin-top: 2px; }
.tool-list p { color: var(--muted); font-size: 0.92rem; max-width: 62ch; }
.tool-list .status {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--accent-2);
  white-space: nowrap;
}

/* ============================================================
   CONTACT + FOOTER
   ============================================================ */

.contact { text-align: left; }

.contact-email {
  display: inline-block;
  font-size: clamp(1.6rem, 4vw, 3rem);
  font-weight: 800;
  letter-spacing: 0.01em;
  border-bottom: 2px solid var(--line);
  padding-bottom: 6px;
  transition: border-color 0.2s;
}
.contact-email:hover { border-color: var(--accent); }

.contact-links {
  margin-top: 1.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: 1.8rem;
}
.contact-links a {
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.contact-links a:hover { color: var(--text); }

.footer {
  border-top: 1px solid var(--line);
  padding: 1.6rem 0 2rem;
  margin-top: 2rem;
}

.footer-inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--faint);
}

.footer-sloth {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
/* badge art carries its own dark field, so it needs no plate behind it */
.footer-sloth img { height: 44px; width: auto; opacity: 0.9; }

/* ============================================================
   SCROLL METER - stereo peak meter that fires as you scroll
   ============================================================ */

.scroll-meter {
  position: fixed;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 40;
  display: flex;
  gap: 5px;
  pointer-events: none;
}

.scroll-meter .ch {
  display: flex;
  flex-direction: column-reverse;
  gap: 3px;
}

.scroll-meter .seg {
  width: 8px;
  height: 13px;
  border-radius: 2px;
  background: #171614;
  transition: none;
}

/* lit colors + glow are set inline by JS (green / copper / red zones) */

/* ---- phone: the meter rides in the sticky nav instead of the right edge ---- */
.scroll-meter.in-nav {
  position: static;
  transform: none;
  z-index: auto;
  margin-left: auto;      /* pushes it right so it sits beside the menu button */
  align-items: flex-end;
  gap: 3px;
}
.scroll-meter.in-nav .ch { gap: 2px; }
.scroll-meter.in-nav .seg {
  width: 4px;
  height: 4px;
  border-radius: 1px;
}

@media (max-width: 960px) {
  /* only the fixed right-edge version is hidden; the nav one stays */
  .scroll-meter:not(.in-nav) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-meter { display: none; }
}

/* ============================================================
   RESPONSIVE
   ============================================================ */

@media (max-width: 960px) {
  .poster-grid { grid-template-columns: repeat(3, 1fr); }
  .spec-cols { grid-template-columns: 1fr 1fr; }
  .field-grid { grid-template-columns: repeat(2, 1fr); }
  .tool-list li { grid-template-columns: 1fr; gap: 0.4rem; }
}

@media (max-width: 760px) {
  .nav-links {
    position: fixed;
    top: 64px;
    right: 0;
    left: 0;
    background: var(--bg);
    border-bottom: 1px solid var(--line);
    flex-direction: column;
    align-items: flex-start;
    padding: 1.2rem clamp(20px, 5vw, 32px) 1.6rem;
    gap: 1.1rem;
    display: none;
  }
  .nav-links.open { display: flex; }
  .nav-toggle { display: block; }

  .work-grid { grid-template-columns: 1fr; }
  .player.wide { grid-column: span 1; }
  .about-grid { grid-template-columns: 1fr; }
  .poster-grid, .poster-grid.featured { grid-template-columns: repeat(2, 1fr); }
  .spec-cols { grid-template-columns: 1fr; }

  /* This was the only grid on the site with no mobile override, so it stayed
     two columns on a phone: a 145px-wide photo stranded in a 280px-tall box
     next to a text column twice its height. Stack it like everything else,
     and swap the portrait crop for a landscape one since full-width 3:4 would
     be absurdly tall on a narrow screen. */
  .studio-grid2 { grid-template-columns: 1fr; }
  .studio-photo img { aspect-ratio: 16 / 10; }

  /* ---- mobile-only poster wall fixes ----
     Desktop keeps the big 2x2 hero treatment (unchanged above 760px).
     On mobile: the hero poster was spanning 2 cols at a 2:3 ratio, making it
     enormous and visually disconnected from the grid below it. Same size as
     everything else instead. That makes the featured row odd (5 cards), so a
     6th card is pulled up from the main list via JS (see script.js) to complete
     it. "dense" packing lets the main list backfill the gaps that landscape
     (2-wide) cards otherwise leave next to the single card before them. */
  .poster.hero-poster { grid-column: span 1; grid-row: auto; }
  .poster-grid, .poster-grid.featured { grid-auto-flow: dense; }

  /* ---- poster titles on touch ----
     The info panel was revealed on :hover, which a phone can never trigger, so
     only the featured cards (which force it visible) showed a title and the
     other 21 showed nothing at all. Move it out from over the artwork and set
     it below the poster instead - the same shape the Commercial video cards
     already use, so it reads as part of the site rather than a new pattern.
     Applied to every poster so the whole wall behaves one way. */
  .poster { overflow: visible; background: none; align-self: start; }
  /* height:100% (needed when the caption was absolutely positioned) would fight
     a caption that is now in normal flow, so let the image size itself from its
     aspect-ratio and the poster grow to image + caption */
  .poster img { height: auto; border-radius: 2px; }

  .poster-info,
  .poster-grid.featured .poster-info {
    position: static;
    opacity: 1;
    background: none;
    padding: 0.4rem 0.1rem 0;
  }
  .poster-info h3,
  .poster-grid.featured .poster-info h3 {
    font-size: 0.74rem;
    font-weight: 600;
    line-height: 1.25;
  }
  .poster-info p {
    font-size: 0.63rem;
    line-height: 1.3;
    margin-top: 2px;
  }
  /* the gradient scrim only existed to make text legible over the art */
  .poster-badge { top: 0.45rem; left: 0.45rem; }
}

/* ---------- clients wall on small screens ----------
   At 130px per logo plus 2rem gaps the row is wider than a phone, so marks
   at the right edge got clipped by the container's overflow:hidden. */
@media (max-width: 560px) {
  .clients-wall,
  .clients-extra {
    gap: 1.1rem 1rem;
  }
  .client-logo {
    height: 46px;
    padding: 0;
  }
  .client-logo img {
    max-height: 30px;
    max-width: 88px;
  }
  .client-logo img.tall { max-height: 40px; }
}

/* ---------- games/devices cards on touch ----------
   The detail lived in a hover overlay, which a phone can never trigger, so the
   role and story were invisible on mobile. On hover-less devices show them as
   ordinary text under the title instead of hiding them behind an interaction. */
@media (hover: none) {
  .credit-card {
    display: flex;
    flex-direction: column;
  }
  .credit-media { order: 1; }
  .credit-body  { order: 2; margin-top: 0; }
  .credit-hover {
    order: 3;
    position: static;
    aspect-ratio: auto;
    opacity: 1 !important;
    transition: none;
    transform: none;
    pointer-events: auto;
    text-align: center;
    padding: 0 0.5rem 0.7rem;
    gap: 0.3rem;
  }
  /* no hover, so never leave the artwork dimmed */
  .credit-card .credit-media img { opacity: 1; }
  .ch-desc { font-size: 0.68rem; }
}

/* same rules, keyed off the JS-detected class (see script.js) */
.no-hover .credit-card { display: flex; flex-direction: column; }
.no-hover .credit-media { order: 1; }
.no-hover .credit-body  { order: 2; margin-top: 0; }
.no-hover .credit-hover {
  order: 3;
  position: static;
  aspect-ratio: auto;
  opacity: 1 !important;
  transition: none;
  transform: none;
  pointer-events: auto;
  text-align: center;
  padding: 0 0.5rem 0.7rem;
  gap: 0.3rem;
}
.no-hover .credit-card .credit-media img { opacity: 1; }
.no-hover .ch-desc { font-size: 0.68rem; }