/* ---- video clip gallery ---- */
 
    .vc-section {
      margin-top: 8px;
      font-family: "Gotham", sans-serif;
    }
 
    .vc-section h3 {
      font-family: "Heatwave";
      color: var(--highlight);
      text-align: center;
      font-size: 24px;
      letter-spacing: 1px;
      margin: 0 0 4px;
    }
 
    .vc-section .vc-caption-sub {
      text-align: center;
      color: var(--highlight);
      font-size: 12px;
      font-style: italic;
      opacity: 0.75;
      margin: 0 0 16px;
    }
 
    .vc-grid {
      display: grid;
      grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
      gap: 8px;
    }
 
    .vc-grid button {
      all: unset;
      cursor: pointer;
      position: relative;
      display: block;
      aspect-ratio: 1 / 1;
      border: 3px solid var(--highlight);
      background: var(--surface);
      overflow: hidden;
    }
 
    .vc-grid button:hover,
    .vc-grid button:focus-visible {
      border-color: var(--primary);
      outline: none;
    }
 
    .vc-grid img,
    .vc-grid canvas {
      width: 100%;
      height: 100%;
      object-fit: cover;
      display: block;
    }
 
    /* loading shimmer while thumbnail is captured */
    .vc-grid button.vc-thumb-loading {
      background: linear-gradient(90deg, var(--surface) 25%, var(--border) 50%, var(--surface) 75%);
      background-size: 200% 100%;
      animation: vc-shimmer 1.4s infinite;
    }
 
    @keyframes vc-shimmer {
      0% { background-position: 200% 0; }
      100% { background-position: -200% 0; }
    }
 
    /* play icon overlay on thumbnails */
    .vc-grid .vc-play-badge {
      position: absolute;
      inset: 0;
      display: flex;
      align-items: center;
      justify-content: center;
      pointer-events: none;
    }
 
    .vc-grid .vc-play-badge::after {
      content: "";
      width: 0;
      height: 0;
      border-top: 10px solid transparent;
      border-bottom: 10px solid transparent;
      border-left: 16px solid var(--highlight);
      filter: drop-shadow(0 0 3px rgba(0,0,0,0.6));
      margin-left: 3px;
    }
 
    /* ---- player overlay ---- */
 
    .vc-overlay {
      position: fixed;
      inset: 0;
      background: rgba(23, 55, 94, 0.94);
      display: none;
      align-items: center;
      justify-content: center;
      z-index: 999;
      padding: 40px 16px;
    }
 
    .vc-overlay.vc-open {
      display: flex;
    }
 
    .vc-overlay figure {
      margin: 0;
      max-width: 100%;
      max-height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 10px;
    }
 
    .vc-overlay video {
      max-width: min(85vw, 800px);
      max-height: 75vh;
      width: auto;
      height: auto;
      object-fit: contain;
      border: 4px solid var(--highlight);
      background: #000;
    }
 
    .vc-overlay figcaption {
      color: var(--highlight);
      font-size: 12px;
      letter-spacing: 0.5px;
      text-align: center;
    }
 
    .vc-overlay .vc-dismiss {
      all: unset;
      cursor: pointer;
      position: absolute;
      top: 18px;
      right: 24px;
      color: var(--highlight);
      font-family: "Heatwave";
      font-size: 26px;
      line-height: 1;
    }
 
    .vc-overlay .vc-dismiss:hover {
      color: var(--primary);
    }
 
    .vc-overlay .vc-step {
      all: unset;
      cursor: pointer;
      color: var(--highlight);
      font-family: "Heatwave";
      font-size: 34px;
      padding: 10px 14px;
    }
 
    .vc-overlay .vc-step:hover {
      color: var(--primary);
    }
 
    .vc-overlay .vc-step-row {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 24px;
    }
 
    @media (max-width: 480px) {
      .vc-overlay video { max-width: 90vw; max-height: 60vh; }
      .vc-overlay .vc-step { font-size: 26px; padding: 6px 10px; }
    }
 
    @media (prefers-reduced-motion: reduce) {
      * { transition: none !important; animation: none !important; }
    }