Video — Testimonials

:root {
  --bg: #0a0a0b;
  --surface: #141416;
  --surface-2: #1c1c1f;
  --amber: #ffb020;
  --amber-d: #e6971a;
  --red: #ff4d4d;
  --ink: #f4f4f6;
  --muted: #8a8a92;
  --line: rgba(255, 255, 255, 0.10);
  --line-2: rgba(255, 255, 255, 0.18);
  --white: #fff;
  --r-sm: 6px;
  --r-md: 10px;
  --r-lg: 16px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(900px 500px at 80% -10%, rgba(255, 176, 32, 0.08), transparent 60%),
    var(--bg);
  color: var(--ink);
  font-family: Inter, system-ui, -apple-system, sans-serif;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.wrap {
  max-width: 1120px;
  margin: 0 auto;
  padding: 28px 20px 72px;
}

h1, h2 { margin: 0; letter-spacing: -0.02em; }

/* ---------- Hero (letterbox) ---------- */
.hero {
  position: relative;
  border-radius: var(--r-lg);
  overflow: hidden;
  background:
    linear-gradient(180deg, rgba(255, 176, 32, 0.06), transparent 40%),
    url("https://images.unsplash.com/photo-1485846234645-a62644f84728?auto=format&fit=crop&w=1400&q=60") center/cover,
    var(--surface);
  border: 1px solid var(--line);
}
.hero::after {
  content: "";
  position: absolute; inset: 0;
  background: linear-gradient(180deg, rgba(10, 10, 11, 0.55), rgba(10, 10, 11, 0.9));
  pointer-events: none;
}
.bar {
  position: relative;
  z-index: 2;
  background: #000;
  height: 46px;
  display: flex;
  align-items: center;
}
.bar-bottom {
  justify-content: space-between;
  padding: 0 18px;
  border-top: 1px solid rgba(255, 255, 255, 0.06);
}
.bar-top { border-bottom: 1px solid rgba(255, 255, 255, 0.06); }
.tc {
  font-family: "JetBrains Mono", monospace;
  color: var(--amber);
  font-size: 14px;
  font-weight: 600;
  letter-spacing: 0.06em;
}
.tc-label {
  font-family: "JetBrains Mono", monospace;
  color: var(--muted);
  font-size: 11px;
  letter-spacing: 0.14em;
}
.hero-inner {
  position: relative;
  z-index: 2;
  padding: 46px 40px 40px;
}
.kicker {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", monospace;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--muted);
  margin-bottom: 18px;
}
.rec {
  width: 9px; height: 9px; border-radius: 50%;
  background: var(--red);
  box-shadow: 0 0 10px var(--red);
  animation: blink 1.6s steps(2) infinite;
}
@keyframes blink { 50% { opacity: 0.25; } }
.hero h1 {
  font-size: clamp(28px, 5vw, 48px);
  font-weight: 800;
  max-width: 16ch;
  line-height: 1.05;
}
.lede {
  color: var(--muted);
  max-width: 52ch;
  margin: 16px 0 26px;
  font-size: 16px;
}
.hero-stats { display: flex; gap: 30px; flex-wrap: wrap; }
.stat b {
  display: block;
  font-size: 26px;
  font-weight: 800;
  color: var(--amber);
  font-family: "JetBrains Mono", monospace;
}
.stat span { color: var(--muted); font-size: 12px; letter-spacing: 0.04em; }

/* ---------- Section heads ---------- */
.section-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 52px 0 20px;
  flex-wrap: wrap;
}
.section-head h2 { font-size: 22px; font-weight: 700; display: flex; align-items: center; gap: 10px; }
.count {
  font-family: "JetBrains Mono", monospace;
  font-size: 13px;
  color: var(--amber);
  background: rgba(255, 176, 32, 0.12);
  border: 1px solid rgba(255, 176, 32, 0.3);
  padding: 2px 9px;
  border-radius: 999px;
}

/* ---------- Carousel ---------- */
.carousel-ctrl { display: flex; gap: 8px; }
.nav {
  width: 40px; height: 40px;
  border-radius: var(--r-md);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.15s ease, background 0.2s ease, border-color 0.2s ease;
}
.nav:hover { background: var(--amber); color: #111; border-color: var(--amber); transform: translateY(-1px); }
.nav:active { transform: translateY(0) scale(0.96); }

.carousel {
  position: relative;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background:
    linear-gradient(180deg, var(--surface), var(--surface-2));
  overflow: hidden;
}
.carousel:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }
.track { display: flex; transition: transform 0.55s cubic-bezier(0.5, 0, 0.15, 1); }
.slide {
  min-width: 100%;
  padding: 44px 48px 40px;
}
.slide .qmark {
  font-family: Georgia, serif;
  font-size: 72px;
  line-height: 0.4;
  color: var(--amber);
  opacity: 0.6;
}
.slide blockquote {
  margin: 22px 0 30px;
  font-size: clamp(19px, 2.6vw, 27px);
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: -0.01em;
  max-width: 34ch;
}
.slide-foot { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.logo-mono {
  width: 52px; height: 52px;
  border-radius: var(--r-md);
  display: grid; place-items: center;
  font-weight: 800;
  font-size: 18px;
  color: #111;
  flex: none;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4);
}
.who b { display: block; font-size: 15px; }
.who span { color: var(--muted); font-size: 13px; }
.slide-meta { margin-left: auto; text-align: right; }
.slide-tc {
  font-family: "JetBrains Mono", monospace;
  color: var(--amber);
  font-size: 12px;
  display: block;
}
.slide-type {
  font-size: 11px;
  color: var(--muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.stars { display: inline-flex; gap: 2px; }
.stars svg { width: 17px; height: 17px; }
.stars .on { fill: var(--amber); }
.stars .off { fill: rgba(255, 255, 255, 0.16); }

.dots {
  display: flex;
  gap: 8px;
  justify-content: center;
  padding: 0 0 22px;
}
.dot {
  width: 26px; height: 5px;
  border-radius: 999px;
  border: none;
  background: var(--line-2);
  cursor: pointer;
  padding: 0;
  transition: background 0.25s ease, width 0.25s ease;
}
.dot.is-active { background: var(--amber); width: 40px; }
.dot:focus-visible { outline: 2px solid var(--amber); outline-offset: 3px; }

/* ---------- Filters ---------- */
.filters { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  background: var(--surface-2);
  border: 1px solid var(--line);
  color: var(--muted);
  padding: 8px 15px;
  border-radius: 999px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  font-family: inherit;
  transition: all 0.18s ease;
}
.chip:hover { color: var(--ink); border-color: var(--line-2); }
.chip.is-active { background: var(--amber); color: #111; border-color: var(--amber); }
.chip:focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
  gap: 16px;
}
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  padding: 22px;
  position: relative;
  overflow: hidden;
  transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, opacity 0.35s ease;
  animation: rise 0.4s both;
}
@keyframes rise { from { opacity: 0; transform: translateY(10px); } }
.card::before {
  content: "";
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--amber);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.25s ease;
}
.card:hover, .card:focus-within {
  transform: translateY(-4px);
  border-color: var(--line-2);
  box-shadow: 0 14px 34px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 176, 32, 0.15);
}
.card:hover::before, .card:focus-within::before { transform: scaleY(1); }
.card.hide { display: none; }
.card-top { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.card-top .logo-mono { width: 40px; height: 40px; font-size: 15px; }
.card-top .who b { font-size: 14px; }
.badge {
  margin-left: auto;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--amber);
  background: rgba(255, 176, 32, 0.1);
  border: 1px solid rgba(255, 176, 32, 0.25);
  padding: 3px 8px;
  border-radius: 999px;
  font-weight: 700;
}
.card p {
  margin: 0 0 16px;
  color: #d6d6db;
  font-size: 14.5px;
}
.card-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-top: 1px solid var(--line);
  padding-top: 12px;
}
.card-foot .ftc {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--muted);
}

/* ---------- Filmstrip ---------- */
.strip {
  margin-top: 56px;
  border-top: 1px solid var(--line);
  padding-top: 28px;
  overflow: hidden;
}
.strip-label {
  display: block;
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--muted);
  margin-bottom: 18px;
}
.strip-track {
  display: flex;
  gap: 14px;
  animation: marquee 26s linear infinite;
  width: max-content;
}
.strip:hover .strip-track { animation-play-state: paused; }
@keyframes marquee { to { transform: translateX(-50%); } }
.strip-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 18px;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  white-space: nowrap;
  color: var(--muted);
  font-weight: 700;
  font-size: 14px;
}
.strip-item .logo-mono { width: 26px; height: 26px; font-size: 11px; border-radius: var(--r-sm); }

/* ---------- Toast ---------- */
.toast {
  position: fixed;
  left: 50%;
  bottom: 26px;
  transform: translate(-50%, 20px);
  background: var(--surface-2);
  border: 1px solid var(--line-2);
  color: var(--ink);
  padding: 12px 18px;
  border-radius: var(--r-md);
  font-size: 14px;
  font-weight: 600;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s ease, transform 0.25s ease;
  z-index: 50;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }
.toast::before { content: "● "; color: var(--amber); }

/* ---------- Responsive ---------- */
@media (max-width: 520px) {
  .wrap { padding: 18px 14px 56px; }
  .hero-inner { padding: 32px 22px 30px; }
  .bar { height: 38px; }
  .hero-stats { gap: 20px; }
  .slide { padding: 30px 24px 28px; }
  .slide-meta { margin-left: 0; text-align: left; width: 100%; }
  .section-head { margin: 40px 0 16px; }
  .filters { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .chip { flex: none; }
  .grid { grid-template-columns: 1fr; }
  .nav { width: 36px; height: 36px; }
}

(function () {
  "use strict";

  // ---------- Data ----------
  var GRADS = {
    a: "linear-gradient(135deg,#ffb020,#e6971a)",
    b: "linear-gradient(135deg,#ff4d4d,#b81d1d)",
    c: "linear-gradient(135deg,#5eead4,#0d9488)",
    d: "linear-gradient(135deg,#a78bfa,#6d28d9)",
    e: "linear-gradient(135deg,#60a5fa,#1d4ed8)",
    f: "linear-gradient(135deg,#f472b6,#be185d)"
  };

  var DATA = [
    { name: "Mara Volkov", role: "CMO, Nord Athletic", brand: "NA", grad: "a", type: "commercial", stars: 5, tc: "00:14:22:08",
      quote: "Aperture turned a two-day shoot into a hero spot that lifted our launch conversions by 34%. The color grade alone made the product look like it cost triple." },
    { name: "Desmond Kerr", role: "Director, Wildlands Doc", brand: "WD", grad: "c", type: "documentary", stars: 5, tc: "00:41:09:12",
      quote: "They embedded with us for three weeks in the field and never dropped a frame. The final cut made grown festival programmers cry — twice." },
    { name: "Lena Ortiz", role: "Artist, Neon Halo", brand: "NH", grad: "d", type: "music", stars: 5, tc: "00:03:47:21",
      quote: "My music video hit a million views in nine days. Every strobe, every match cut, exactly the vision in my head — but sharper." },
    { name: "Priya Raman", role: "Head of Events, Loop Summit", brand: "LS", grad: "e", type: "event", stars: 4, tc: "01:02:33:00",
      quote: "A four-camera live event delivered as a polished recap by the next morning. Our sponsors asked who shot it before the coffee was cold." },
    { name: "Théo Marchand", role: "Founder, Atlas Coffee", brand: "AC", grad: "b", type: "commercial", stars: 5, tc: "00:09:58:14",
      quote: "The brand film they cut is still our top-performing ad eighteen months later. Nobody else understood the light in our roastery like they did." },
    { name: "Ingrid Sø", role: "Producer, Cold Water", brand: "CW", grad: "c", type: "documentary", stars: 5, tc: "00:57:12:03",
      quote: "Ethical, patient, and technically flawless. The underwater sequences alone got us distribution we could never have afforded on our budget." },
    { name: "Jasper Cole", role: "A&R, Static Records", brand: "SR", grad: "d", type: "music", stars: 4, tc: "00:04:11:19",
      quote: "We booked them for one video and signed a slate deal for the whole roster. Turnaround is fast and the treatments always beat the brief." },
    { name: "Noor Haddad", role: "VP Brand, Vela Motors", brand: "VM", grad: "e", type: "commercial", stars: 5, tc: "00:22:40:06",
      quote: "Cinematic without being precious. They shot our EV like a feature film and kept every deliverable on spec across nine markets." },
    { name: "Elias Brandt", role: "Curator, Frame Fest", brand: "FF", grad: "a", type: "event", stars: 5, tc: "00:48:27:15",
      quote: "Our festival aftermovie set the tone for the entire following year of submissions. Directors literally cite it in their applications now." },
    { name: "Cora Nakamura", role: "Owner, Studio Fold", brand: "SF", grad: "f", type: "documentary", stars: 5, tc: "00:33:05:22",
      quote: "A quiet, human portrait of our workshop that we never could have made ourselves. It reads like poetry and still sells the craft." },
    { name: "Milo Vance", role: "Manager, Dust & Echo", brand: "DE", grad: "d", type: "music", stars: 5, tc: "00:02:59:11",
      quote: "Performance video, narrative video, and a vertical cut for socials — all from one shoot day, all genuinely excellent. Rare crew." },
    { name: "Sana Qureshi", role: "Director of Comms, Beacon", brand: "BC", grad: "b", type: "commercial", stars: 4, tc: "00:16:44:09",
      quote: "Clear communication from the first call to final delivery. They flagged risks early and still came in under the timeline we feared." }
  ];

  // ---------- Helpers ----------
  function el(tag, cls, html) {
    var n = document.createElement(tag);
    if (cls) n.className = cls;
    if (html != null) n.innerHTML = html;
    return n;
  }

  function starsHTML(n) {
    var s = '<span class="stars" role="img" aria-label="' + n + ' out of 5 stars">';
    for (var i = 1; i <= 5; i++) {
      s += '<svg viewBox="0 0 24 24" aria-hidden="true"><path class="' + (i <= n ? "on" : "off") +
        '" d="M12 2l2.9 6.3 6.9.7-5.1 4.7 1.4 6.8L12 17.8 5.9 20.5l1.4-6.8L2.2 9l6.9-.7z"/></svg>';
    }
    return s + "</span>";
  }

  function logoHTML(brand, grad, cls) {
    return '<div class="logo-mono ' + (cls || "") + '" style="background:' + GRADS[grad] + '">' + brand + "</div>";
  }

  var toastEl = document.getElementById("toast");
  var toastTimer;
  function toast(msg) {
    toastEl.textContent = msg;
    toastEl.classList.add("show");
    clearTimeout(toastTimer);
    toastTimer = setTimeout(function () { toastEl.classList.remove("show"); }, 2200);
  }

  // ---------- Carousel ----------
  var featured = DATA.slice(0, 5);
  var track = document.getElementById("track");
  var dotsWrap = document.getElementById("dots");
  var index = 0;

  featured.forEach(function (t, i) {
    var slide = el("div", "slide");
    slide.setAttribute("role", "group");
    slide.setAttribute("aria-roledescription", "slide");
    slide.setAttribute("aria-label", (i + 1) + " of " + featured.length);
    slide.innerHTML =
      '<div class="qmark" aria-hidden="true">&ldquo;</div>' +
      "<blockquote>" + t.quote + "</blockquote>" +
      '<div class="slide-foot">' +
        logoHTML(t.brand, t.grad) +
        '<div class="who"><b>' + t.name + "</b><span>" + t.role + "</span></div>" +
        '<div class="slide-meta">' +
          starsHTML(t.stars) +
          '<span class="slide-tc">' + t.tc + "</span>" +
          '<span class="slide-type">' + t.type + "</span>" +
        "</div>" +
      "</div>";
    track.appendChild(slide);

    var dot = el("button", "dot" + (i === 0 ? " is-active" : ""));
    dot.setAttribute("role", "tab");
    dot.setAttribute("aria-label", "Testimonial " + (i + 1));
    dot.addEventListener("click", function () { go(i, true); });
    dotsWrap.appendChild(dot);
  });

  function go(i, user) {
    index = (i + featured.length) % featured.length;
    track.style.transform = "translateX(-" + index * 100 + "%)";
    Array.prototype.forEach.call(dotsWrap.children, function (d, di) {
      d.classList.toggle("is-active", di === index);
      d.setAttribute("aria-selected", di === index ? "true" : "false");
    });
    if (user) restart();
  }

  document.getElementById("next").addEventListener("click", function () { go(index + 1, true); });
  document.getElementById("prev").addEventListener("click", function () { go(index - 1, true); });

  var carousel = document.getElementById("carousel");
  carousel.addEventListener("keydown", function (e) {
    if (e.key === "ArrowRight") { go(index + 1, true); e.preventDefault(); }
    if (e.key === "ArrowLeft") { go(index - 1, true); e.preventDefault(); }
  });

  // touch swipe
  var startX = null;
  carousel.addEventListener("touchstart", function (e) { startX = e.touches[0].clientX; }, { passive: true });
  carousel.addEventListener("touchend", function (e) {
    if (startX == null) return;
    var dx = e.changedTouches[0].clientX - startX;
    if (Math.abs(dx) > 40) go(index + (dx < 0 ? 1 : -1), true);
    startX = null;
  });

  // autoplay
  var timer;
  function play() { timer = setInterval(function () { go(index + 1); }, 5000); }
  function stop() { clearInterval(timer); }
  function restart() { stop(); play(); }
  carousel.addEventListener("mouseenter", stop);
  carousel.addEventListener("mouseleave", play);
  carousel.addEventListener("focusin", stop);
  carousel.addEventListener("focusout", play);
  play();

  // ---------- Grid + filters ----------
  var grid = document.getElementById("grid");
  var countEl = document.getElementById("count");

  DATA.forEach(function (t) {
    var card = el("article", "card");
    card.setAttribute("tabindex", "0");
    card.dataset.type = t.type;
    card.innerHTML =
      '<div class="card-top">' +
        logoHTML(t.brand, t.grad) +
        '<div class="who"><b>' + t.name + "</b><span>" + t.role + "</span></div>" +
        '<span class="badge">' + t.type + "</span>" +
      "</div>" +
      "<p>&ldquo;" + t.quote + "&rdquo;</p>" +
      '<div class="card-foot">' +
        starsHTML(t.stars) +
        '<span class="ftc">' + t.tc + "</span>" +
      "</div>";
    grid.appendChild(card);
  });

  var chips = document.querySelectorAll(".chip");
  function applyFilter(f) {
    var shown = 0;
    Array.prototype.forEach.call(grid.children, function (c) {
      var match = f === "all" || c.dataset.type === f;
      c.classList.toggle("hide", !match);
      if (match) { shown++; c.style.animation = "none"; void c.offsetWidth; c.style.animation = ""; }
    });
    countEl.textContent = shown;
  }

  chips.forEach(function (chip) {
    chip.addEventListener("click", function () {
      chips.forEach(function (c) { c.classList.remove("is-active"); });
      chip.classList.add("is-active");
      var f = chip.dataset.filter;
      applyFilter(f);
      toast(f === "all" ? "Showing every review" : "Filtered: " + chip.textContent);
    });
  });
  countEl.textContent = DATA.length;

  // ---------- Logo filmstrip (duplicated for seamless marquee) ----------
  var strip = document.getElementById("strip");
  function buildStrip() {
    DATA.forEach(function (t) {
      var item = el("div", "strip-item");
      item.innerHTML = logoHTML(t.brand, t.grad) + "<span>" + t.role.split(", ").pop() + "</span>";
      strip.appendChild(item);
    });
  }
  buildStrip(); buildStrip();

  // ---------- Hero timecode ticker ----------
  var heroTc = document.getElementById("heroTc");
  var frames = 0;
  function pad(n) { return n < 10 ? "0" + n : "" + n; }
  setInterval(function () {
    frames = (frames + 1) % (24 * 60 * 60 * 24);
    var f = frames % 24;
    var totalSec = Math.floor(frames / 24);
    var s = totalSec % 60;
    var m = Math.floor(totalSec / 60) % 60;
    var h = Math.floor(totalSec / 3600) % 24;
    heroTc.textContent = pad(h) + ":" + pad(m) + ":" + pad(s) + ":" + pad(f);
  }, 42);

})();

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>Aperture Films — Client Testimonials</title>
  <link rel="preconnect" href="https://fonts.googleapis.com" />
  <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
  <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;600&display=swap" rel="stylesheet" />
  <link rel="stylesheet" href="style.css" />
</head>
<body>
  <main class="wrap">

    <!-- Letterboxed cinematic hero -->
    <header class="hero" role="banner">
      <div class="bar bar-top" aria-hidden="true"></div>
      <div class="hero-inner">
        <span class="kicker"><span class="rec" aria-hidden="true"></span> APERTURE FILMS · REEL 2026</span>
        <h1>What our clients say after the wrap.</h1>
        <p class="lede">Boutique video production for brands, artists and stories worth telling. Here is the color-graded truth from the people we shot with.</p>
        <div class="hero-stats">
          <div class="stat"><b>4.9</b><span>avg. rating</span></div>
          <div class="stat"><b>210+</b><span>projects shipped</span></div>
          <div class="stat"><b>38</b><span>festival selects</span></div>
        </div>
      </div>
      <div class="bar bar-bottom" aria-hidden="true">
        <span class="tc" id="heroTc">00:00:00:00</span>
        <span class="tc-label">TIMECODE · 24FPS</span>
      </div>
    </header>

    <!-- Featured carousel -->
    <section class="featured" aria-label="Featured testimonial">
      <div class="section-head">
        <h2>Featured cut</h2>
        <div class="carousel-ctrl">
          <button class="nav" id="prev" aria-label="Previous testimonial">&#8592;</button>
          <button class="nav" id="next" aria-label="Next testimonial">&#8594;</button>
        </div>
      </div>

      <div class="carousel" id="carousel" tabindex="0" role="region" aria-roledescription="carousel" aria-label="Client quotes">
        <div class="track" id="track"><!-- slides injected --></div>
        <div class="dots" id="dots" role="tablist" aria-label="Choose testimonial"></div>
      </div>
    </section>

    <!-- Filter + grid -->
    <section class="grid-section" aria-label="All testimonials">
      <div class="section-head">
        <h2>Every review <span class="count" id="count">12</span></h2>
        <div class="filters" role="group" aria-label="Filter by production type">
          <button class="chip is-active" data-filter="all">All</button>
          <button class="chip" data-filter="commercial">Commercial</button>
          <button class="chip" data-filter="documentary">Documentary</button>
          <button class="chip" data-filter="music">Music video</button>
          <button class="chip" data-filter="event">Event</button>
        </div>
      </div>
      <div class="grid" id="grid"><!-- cards injected --></div>
    </section>

    <!-- Logo filmstrip -->
    <section class="strip" aria-label="Clients we have worked with">
      <span class="strip-label">TRUSTED ON SET BY</span>
      <div class="strip-track" id="strip"></div>
    </section>

  </main>

  <div class="toast" id="toast" role="status" aria-live="polite"></div>
  <script src="script.js"></script>
</body>
</html>