/* ─────────────────────────────────────────────
   Outmark: the work, shown as it was posted.
   Real Reels and ads from client accounts. Each card shows a poster, plays a
   short muted preview while it is on screen, and opens the full piece with
   sound on tap. Used by the homepage, /work, /paid-ads, /outmark-system and
   /services. Needs glass.css for the tokens; work.js does the playing.
   ───────────────────────────────────────────── */

.work-grid { display: grid; grid-template-columns: repeat(var(--work-cols, 4), minmax(0, 1fr)); gap: 16px; }
.work-grid.cols-3 { --work-cols: 3; }
.work-grid.cols-5 { --work-cols: 5; }
.work-grid.cols-6 { --work-cols: 6; }
.work-card { margin: 0; min-width: 0; }

.work-thumb {
  position: relative; display: block; width: 100%;
  aspect-ratio: 9 / 16; padding: 0; border: 0;
  border-radius: var(--r-md); overflow: hidden;
  background: #16120f; cursor: pointer;
  box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 18px 40px -20px rgba(30,15,5,0.45);
  transition: transform 350ms var(--ease), box-shadow 350ms var(--ease);
  font: inherit; color: inherit; text-align: left;
}
.work-thumb:hover { transform: translateY(-3px); box-shadow: 0 1px 0 rgba(255,255,255,0.10) inset, 0 26px 50px -22px rgba(30,15,5,0.55); }
.work-thumb:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }
.work-thumb picture, .work-thumb img, .work-thumb video {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block;
}
.work-thumb video { opacity: 0; transition: opacity 400ms var(--ease); }
.work-card.is-playing .work-thumb video { opacity: 1; }
.work-thumb::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: linear-gradient(to top, rgba(8,6,4,0.55) 0%, rgba(8,6,4,0) 42%);
}
.work-tag {
  position: absolute; top: 10px; left: 10px; z-index: 2;
  font-size: 10px; font-weight: 650; font-variation-settings: 'wght' 650;
  letter-spacing: 0.08em; text-transform: uppercase; color: #fff;
  padding: 5px 10px; border-radius: var(--r-pill);
  background: rgba(20,16,12,0.45);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.22);
}
.work-tag.ad { background: var(--grad); border-color: transparent; box-shadow: 0 4px 12px rgba(255,79,0,0.35); }
.work-play {
  position: absolute; right: 10px; bottom: 10px; z-index: 2;
  width: 40px; height: 40px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.18);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(255,255,255,0.28);
  transition: background 200ms var(--ease), transform 200ms var(--ease-spring);
}
.work-play svg { margin-left: 2px; }
.work-thumb:hover .work-play { background: var(--orange); border-color: transparent; transform: scale(1.08); }
.work-views {
  position: absolute; left: 12px; bottom: 14px; z-index: 2;
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 13px; font-weight: 680; font-variation-settings: 'wght' 680; color: #fff;
  text-shadow: 0 1px 6px rgba(0,0,0,0.45);
}
.work-views::before {
  content: ''; width: 14px; height: 14px; flex-shrink: 0;
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z'/%3E%3Ccircle cx='12' cy='12' r='3'/%3E%3C/svg%3E") center / contain no-repeat;
}
.work-info { display: flex; flex-direction: column; gap: 2px; padding: 10px 2px 0; }
.work-client { font-size: 11px; font-weight: 650; font-variation-settings: 'wght' 650; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-2); }
.work-title { font-size: 14px; font-weight: 600; line-height: 1.35; color: var(--ink); }
.on-dark .work-client { color: rgba(255,255,255,0.55); }
.on-dark .work-title { color: #fff; }
.on-dark .work-thumb { box-shadow: 0 0 0 1px rgba(255,255,255,0.10), 0 18px 40px -20px rgba(0,0,0,0.6); }

/* section footer link under a grid */
.work-more { margin-top: 26px; font-size: 15px; }
.work-more a { font-weight: 600; text-decoration: underline; text-decoration-color: var(--orange); text-decoration-thickness: 2px; text-underline-offset: 4px; }
.on-dark .work-more, .on-dark .work-more a { color: #fff; }

/* ── HERO PHONES: two real posts, the front one a Reel, the back one an ad ── */
.phone-stack { position: relative; width: 100%; max-width: 420px; aspect-ratio: 4 / 5; margin: 0 auto; z-index: 1; }
.phone-stack .work-card { position: absolute; width: 56%; }
.phone-stack .work-card.front { left: 4%; bottom: 0; z-index: 2; transform: rotate(-3deg); }
.phone-stack .work-card.back { right: 2%; top: 0; z-index: 1; transform: rotate(4deg); }
.phone-stack .work-thumb {
  border-radius: 30px; padding: 7px; background: #0e0c0b;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.10), 0 30px 60px -24px rgba(40,18,4,0.55), 0 8px 18px -10px rgba(40,18,4,0.35);
}
.phone-stack .work-thumb picture, .phone-stack .work-thumb img, .phone-stack .work-thumb video { inset: 7px; width: calc(100% - 14px); height: calc(100% - 14px); border-radius: 23px; }
.phone-stack .work-thumb::after { inset: 7px; border-radius: 23px; }
.phone-stack .work-thumb:hover { transform: translateY(-4px); }
.phone-chip {
  position: absolute; z-index: 3;
  display: flex; flex-direction: column; gap: 1px;
  padding: 10px 14px; border-radius: 16px;
  background: var(--glass-bg-strong);
  -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border); box-shadow: var(--glass-shadow-sm);
  pointer-events: none; white-space: nowrap;
}
.phone-chip b { font-size: 17px; font-weight: 720; letter-spacing: -0.03em; line-height: 1.15; background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.phone-chip span { font-size: 11px; font-weight: 600; color: var(--ink-2); }
.phone-chip.one { left: -4%; top: 30%; }
.phone-chip.two { right: -2%; bottom: 14%; }

/* ── LIGHTBOX for the full piece with sound ── */
.work-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 14px;
  padding: 24px;
  background: rgba(14,9,5,0.72);
  -webkit-backdrop-filter: blur(20px) saturate(140%); backdrop-filter: blur(20px) saturate(140%);
}
.work-lightbox[hidden] { display: none; }
.work-lb-frame {
  position: relative; height: min(84vh, 860px); max-width: 92vw; aspect-ratio: 9 / 16;
  border-radius: var(--r-lg); overflow: hidden; background: #000;
  box-shadow: 0 0 0 1px rgba(255,255,255,0.16), 0 50px 110px -30px rgba(0,0,0,0.7);
}
.work-lb-frame video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; background: #000; }
.work-lb-caption { color: rgba(255,255,255,0.8); font-size: 14px; text-align: center; max-width: 92vw; }
.work-lb-close {
  position: fixed; top: 18px; right: 18px;
  width: 48px; height: 48px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.16); color: #fff; font-size: 20px; line-height: 1; cursor: pointer;
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  border: 1px solid rgba(255,255,255,0.3);
}
.work-lb-close:hover { background: rgba(255,255,255,0.28); }
.work-lb-close:focus-visible { outline: 3px solid var(--orange); outline-offset: 3px; }

/* ── RESULT CARDS: one client, its numbers, one visual ── */
.result-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
.result-card { padding: 34px 32px; border-radius: var(--r-xl); display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 24px; align-items: start; }
.result-card .result-kicker { font-size: 11.5px; font-weight: 650; font-variation-settings: 'wght' 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--orange); }
.result-card h3 { font-size: 24px; font-weight: 700; letter-spacing: -0.03em; margin: 6px 0 4px; }
.result-card .result-what { font-size: 14px; color: var(--ink-2); margin-bottom: 18px; }
.result-big { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; padding-top: 16px; border-top: 1px solid rgba(22,19,16,0.08); }
.result-big b { display: block; font-size: clamp(32px, 4vw, 44px); font-weight: 720; letter-spacing: -0.045em; line-height: 1; }
.result-big b.grad { background: var(--grad); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.result-big span { display: block; font-size: 12.5px; color: var(--ink-2); margin-top: 6px; line-height: 1.4; }
.result-card .result-line { margin-top: 18px; font-size: 14.5px; line-height: 1.6; color: var(--ink); }
.result-card .result-proof { align-self: stretch; }
.result-card .result-proof .work-thumb { border-radius: 14px; }
.result-shot { display: block; width: 100%; height: auto; border-radius: 14px; box-shadow: 0 18px 40px -22px rgba(30,15,5,0.45); }
.result-shot-cap { font-size: 11.5px; color: var(--ink-2); margin-top: 8px; line-height: 1.4; }

/* ── RESPONSIVE ── */
@media (max-width: 1100px) { .work-grid.cols-6 { --work-cols: 3; } .work-grid.cols-5 { --work-cols: 3; } }
@media (max-width: 960px) {
  .work-grid { --work-cols: 3; }
  .result-grid { grid-template-columns: 1fr; }
  .phone-stack { max-width: 340px; }
}
@media (max-width: 640px) {
  .work-grid, .work-grid.cols-3, .work-grid.cols-5, .work-grid.cols-6 { --work-cols: 2; gap: 12px; }
  .result-card { grid-template-columns: minmax(0, 1fr) 112px; padding: 26px 22px; gap: 16px; }
  .phone-chip b { font-size: 15px; }
  .phone-chip { padding: 8px 11px; }
}
@media (max-width: 400px) {
  .result-card { grid-template-columns: 1fr; }
  .result-card .result-proof { max-width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .work-thumb, .work-thumb video, .work-play { transition: none; }
  .work-thumb:hover, .phone-stack .work-thumb:hover { transform: none; }
}