/* ============================================================
   /proof - the wall

   One job: volume you can verify. The page is the home page's header and hero
   treatment, then nothing but reels. No feature cards, no explanation, no
   second pitch. Tiles are small on purpose - the point is how many there are,
   and a small tile reads as quantity where a big one reads as a portfolio.
   ============================================================ */

/* ---------- counts ---------- */
.proof-counts .stat-n { font-size: clamp(46px, 6.4vw, 92px); }
.proof-counts .stat-n sub {
  font-size: .34em; font-weight: 600; letter-spacing: -0.02em;
  vertical-align: baseline; color: var(--faint); margin-left: 4px;
}

/* ---------- filters ---------- */
/* their own row under the header: right-aligned beside it, four chips wrapped
   into a ragged second line against the headline */
.wall-filters { display: flex; flex-wrap: wrap; gap: 8px; margin-top: -18px; }
.wall-filter {
  padding: 9px 18px; border-radius: 999px;
  border: 1px solid var(--line-strong); background: rgba(var(--tint),.03);
  font-size: 14px; font-weight: 600; letter-spacing: -0.015em; color: var(--dim);
  transition: color .15s ease, border-color .15s ease, background .15s ease;
}
.wall-filter:hover { color: var(--ink); border-color: rgba(47,107,255,.45); }
/* --accent-deep, not --accent: white on #2F6BFF lands at 4.49:1, a hair under */
.wall-filter[aria-pressed="true"] {
  color: #fff; background: var(--accent-deep); border-color: var(--accent-deep);
}
.wall-filter .n { opacity: .6; margin-left: 6px; font-variant-numeric: tabular-nums; }
.wall-filter[aria-pressed="true"] .n { opacity: .75; }

/* ---------- the grid ---------- */
.wall {
  display: grid; gap: 10px;
  grid-template-columns: repeat(6, 1fr);
  margin-top: 34px;
}
.wall-item { display: block; }
.wall-item[hidden] { display: none; }
.wall-tile {
  position: relative; width: 100%; aspect-ratio: 9 / 16;
  border-radius: 12px; overflow: hidden; cursor: pointer;
  background: var(--panel);
  border: 1px solid var(--edge);
  transition: transform .2s cubic-bezier(.22,.61,.36,1), border-color .2s ease;
}
.wall-tile img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .35s cubic-bezier(.22,.61,.36,1), filter .2s ease;
}
.wall-tile:hover { transform: translateY(-3px); border-color: rgba(47,107,255,.55); }
.wall-tile:hover img { transform: scale(1.05); }
.wall-tile:focus-visible { outline: 2px solid var(--accent-lite); outline-offset: 3px; }
/* the caption only surfaces on hover: 71 captions at once is a wall of text */
.wall-cap {
  position: absolute; inset: auto 0 0 0; padding: 26px 10px 10px;
  background: linear-gradient(180deg, transparent, rgba(8,9,12,.92) 62%);
  font-size: 11.5px; line-height: 1.3; font-weight: 600; letter-spacing: -0.015em;
  color: #fff;
  opacity: 0; transform: translateY(6px);
  transition: opacity .2s ease, transform .2s ease;
}
.wall-tile:hover .wall-cap, .wall-tile:focus-visible .wall-cap { opacity: 1; transform: none; }
.wall-dur {
  position: absolute; top: 7px; right: 7px;
  padding: 2px 6px; border-radius: 5px;
  background: rgba(8,9,12,.66); backdrop-filter: blur(6px);
  font-size: 10.5px; font-weight: 600; color: #fff;
  font-variant-numeric: tabular-nums;
}
.wall-note { margin-top: 26px; font-size: 12.5px; line-height: 1.6; color: var(--faint); max-width: 700px; }
.wall-note b { color: var(--ink-soft); font-weight: 700; }

/* the confirmed-posted mark. small and always on: it is the one piece of
   information on a tile worth carrying without a hover. */
.wall-live {
  position: absolute; top: 7px; left: 7px;
  display: inline-flex; align-items: center; gap: 3px;
  padding: 2px 6px 2px 4px; border-radius: 5px;
  background: rgba(23,134,74,.9); backdrop-filter: blur(6px);
  font-size: 9.5px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff;
}
.wall-live svg { width: 10px; height: 10px; }

/* ---------- lightbox ---------- */
.lb {
  position: fixed; inset: 0; z-index: 90;
  display: flex; align-items: center; justify-content: center;
  background: rgba(4,5,7,.92); backdrop-filter: blur(20px);
  opacity: 0; pointer-events: none; transition: opacity .22s ease;
}
.lb.open { opacity: 1; pointer-events: auto; }
.lb-stage { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; }
.lb-frame {
  position: relative;
  width: min(88vw, calc((100vh - 190px) * 0.5625));
  aspect-ratio: 9 / 16;
  border-radius: 18px; overflow: hidden; background: #000;
  border: 1px solid rgba(255,255,255,.14);
  box-shadow: 0 40px 100px rgba(0,0,0,.7);
}
.lb-frame video { width: 100%; height: 100%; object-fit: cover; display: block; }
.lb-meta { text-align: center; max-width: 460px; }
.lb-client {
  font-size: 11.5px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-lite);
}
.lb-cap { margin-top: 7px; font-size: 17px; font-weight: 600; letter-spacing: -0.025em; color: #fff; }
.lb-pos { margin-top: 6px; font-size: 12.5px; color: #8C9099; font-variant-numeric: tabular-nums; }
.lb-close, .lb-nav {
  position: absolute; z-index: 2;
  width: 46px; height: 46px; border-radius: 50%;
  display: grid; place-items: center; color: #fff;
  background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2);
  backdrop-filter: blur(10px);
  transition: background .15s ease, transform .12s ease;
}
.lb-close:hover, .lb-nav:hover { background: rgba(255,255,255,.2); }
.lb-close:active, .lb-nav:active { transform: scale(.94); }
.lb-close { top: 22px; right: 22px; font-size: 22px; line-height: 1; }
.lb-nav svg { width: 20px; height: 20px; }
.lb-prev { left: 22px; top: 50%; margin-top: -23px; }
.lb-next { right: 22px; top: 50%; margin-top: -23px; }
.lb-nav[disabled] { opacity: .25; pointer-events: none; }

/* ---------- socials ----------
   Rendered only when a real capture exists. There is no placeholder state on
   purpose: a fake client profile is the exact thing this page is meant to
   disprove. */
.socials { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.social-card {
  border-radius: var(--r-lg); overflow: hidden;
  border: 1px solid var(--edge); background: var(--panel);
}
.social-card img { width: 100%; display: block; }
.social-card .sc-foot {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px; border-top: 1px solid var(--edge);
  font-size: 14px; font-weight: 600; letter-spacing: -0.02em;
}
.social-card .sc-foot .sc-h { color: var(--faint); font-weight: 500; margin-left: auto; }

@media (max-width: 1180px) { .wall { grid-template-columns: repeat(5, 1fr); } }
@media (max-width: 980px)  { .wall { grid-template-columns: repeat(4, 1fr); } }
@media (max-width: 720px) {
  .wall { grid-template-columns: repeat(3, 1fr); gap: 7px; }
  .wall-cap { display: none; }          /* no hover on touch, so it never showed */
  .wall-dur { font-size: 9.5px; padding: 1px 5px; }
  .socials { grid-template-columns: 1fr; }
  .lb-frame { width: min(92vw, calc((100vh - 220px) * 0.5625)); border-radius: 14px; }
  .lb-close { top: 14px; right: 14px; }
  /* thumb-reachable, and off the video */
  .lb-prev, .lb-next { top: auto; bottom: 18px; margin-top: 0; }
  .lb-prev { left: 22%; }
  .lb-next { right: 22%; }
  .wall-filters { gap: 6px; }
  .wall-filter { padding: 8px 14px; font-size: 13px; }
}
@media (max-width: 420px) { .wall { grid-template-columns: repeat(3, 1fr); } }

@media (prefers-reduced-motion: reduce) {
  .wall-tile, .wall-tile img, .wall-cap { transition: none; }
}