/* Grizzly Beam — /work/ (spec: specs/work-build-spec.md)
   Trionn /work masonry pattern: staggered 2-col grid, measured geometry
   x58 w590 / x864 w518 / x389 w662 @1440 → % ratios. */

/* ---------- 1 · Hero ---------- */
.wk-hero { display: flex; align-items: center; justify-content: center; }
/* ---------- 2 · The reel (ink) ---------- */
/* The only amber in this view is the play button (brand book rev2: 1 accent/view). */
.wk-reel { background: var(--ink); color: var(--tx-l); padding-block: 9rem 8rem; }
.wk-reel__ctr { max-width: 78rem; }
.wk-reel__eyebrow { color: rgba(236, 232, 225, 0.65); }
.wk-reel__title {
  font-size: 3.4rem; line-height: 1.1; letter-spacing: -0.008em;
  font-weight: var(--w-h1); color: var(--tx-l); margin-top: 1.6rem; max-width: 46rem;
}
.wk-reel__sub {
  font-family: var(--f-body); font-size: 1.45rem; line-height: 1.55;
  color: rgba(236, 232, 225, 0.7); max-width: 44rem; margin-top: 1.6rem;
}
.wk-reel__stage { padding-inline: 2.8125rem; margin-top: 4.4rem; }
.wk-reel__frame {
  position: relative; width: 100%; max-width: 96rem; margin-inline: auto;
  aspect-ratio: 16 / 9; border-radius: var(--r-14); overflow: hidden;
  background: #0F1014; border: 1px solid rgba(236, 232, 225, 0.1);
  box-shadow: var(--el-lg);
}
.wk-reel__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
.wk-reel__play {
  position: absolute; inset: 0; margin: auto; width: max-content; height: max-content;
  display: flex; align-items: center; gap: 0.9rem;
  padding: 1.05rem 1.9rem; border: 0; cursor: pointer;
  border-radius: var(--r-10); background: var(--amber); color: var(--ink);
  font-family: var(--f-disp); font-weight: var(--w-h3); font-size: 1.05rem;
  transition: background 0.35s ease, transform 0.35s ease, opacity 0.3s ease;
}
.wk-reel__play:hover { background: var(--amber-hover); }
.wk-reel__play:active { transform: scale(0.97); }
.wk-reel__play svg { width: 1.1rem; height: 1.1rem; }
.wk-reel__frame.is-playing .wk-reel__play { opacity: 0; pointer-events: none; }
.wk-reel__frame.is-playing:hover .wk-reel__play { opacity: 1; pointer-events: auto; }
.wk-reel__frame.is-playing .wk-reel__play svg polygon { display: none; }
.wk-reel__dur {
  position: absolute; right: 1.3rem; bottom: 1.1rem;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.14em;
  color: rgba(236, 232, 225, 0.7);
  background: rgba(18, 19, 23, 0.55); padding: 0.28rem 0.55rem;
  border-radius: var(--r-6);
}

/* ---------- 3 · Project grid ---------- */
.wk-grid { background: var(--paper); color: var(--ink); padding-block: 8rem; }
.wk-grid__inner { position: relative; }
.wk-grid__head { max-width: 62rem; margin-bottom: 5rem; }
.wk-grid__title {
  font-size: 3.1rem; line-height: 1.12; letter-spacing: -0.006em;
  font-weight: var(--w-h1); max-width: 40rem;
}
.wk-grid__note {
  font-family: var(--f-body); font-size: 1.3rem; line-height: 1.55;
  color: var(--tx-g); max-width: 38rem; margin-top: 1.3rem;
}

.wkp-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6rem 3.4rem; }
/* Staggered column: the second column drops lower, as on the home page hero grid. */
.wkp:nth-child(even) { margin-top: 6rem; }

.wkp__frame {
  position: relative; aspect-ratio: 16 / 9; overflow: hidden;
  border-radius: var(--r-10); background: #16181C;
  border: 1px solid var(--stone2);
}
.wkp__vid { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Cards without a recording carry the static mockup from the home page; same
   frame as the video (16/9, cover), so the 3:2 mockup is cropped by height. */
.wkp__shot { width: 100%; height: 100%; object-fit: cover; display: block; }
.wkp__n {
  position: absolute; left: 1.1rem; top: 0.9rem;
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.18em;
  color: rgba(236, 232, 225, 0.85);
  background: rgba(18, 19, 23, 0.55); padding: 0.24rem 0.5rem;
  border-radius: var(--r-6);
}
.wkp__info { padding-top: 1.6rem; }
.wkp__meta {
  font-family: var(--f-mono); font-size: 0.8rem; letter-spacing: 0.16em;
  text-transform: uppercase; color: var(--tx-g);
}
.wkp__kind { color: var(--ink); font-weight: 600; }
.wkp__sep { margin-inline: 0.5em; }
.wkp__title { font-size: 2.1rem; line-height: 1.25; font-weight: var(--w-h3); margin-top: 0.7rem; }
.wkp__desc { color: var(--tx-g); margin-top: 0.8rem; max-width: 34rem; }
.wkp__stack {
  font-family: var(--f-mono); font-size: 0.78rem; letter-spacing: 0.1em;
  color: var(--tx-g); opacity: 0.72; margin-top: 1.1rem;
}

/* ---------- 3 · Founding clients (ink) ---------- */
/* Backdrop: the same beam field as "Our services" on the home page. Markup is
   components/BeamField.astro, styles (.hs__bg/.hsbg*) live in core.css, so nothing is
   duplicated here — the section only has to become the positioning context and clip
   the beams, exactly like .hs does in home.css.

   No wrapper needed: .wk-found is a single ink block between .wk-grid (light) above and
   the footer below. The light .svc-closer that used to follow it was removed on
   2026-09-21, so the field's bottom edge now meets .ftr (ink-deep) directly. */
.wk-found { position: relative; overflow: clip; background: var(--ink); color: var(--tx-l); padding-block: 10rem; }
.wk-found__ctr { position: relative; z-index: 1; }
.wk-found__eyebrow { color: rgba(236, 232, 225, 0.65); }
.wk-found__title {
  font-size: 3.75rem; line-height: 1.08; letter-spacing: -0.008em; font-weight: var(--w-display);
  color: var(--tx-l); margin-top: 1.8rem; max-width: 62rem;
}
.wk-found__body {
  font-family: var(--f-body);
  font-size: 1.55rem; line-height: 1.55;
  color: rgba(236, 232, 225, 0.72);
  max-width: 52rem; margin-top: 3rem;
}
.wk-found__ctas { display: flex; gap: 2.8rem; align-items: center; margin-top: 3.4rem; }
.wk-found__ctas .ulink { padding-bottom: 0.35em; color: var(--tx-l); }

/* ---------- Responsive ---------- */
@media (max-width: 1023px) {
  .wk-grid { padding-block: 6rem; }
  .wk-found__ctas { flex-wrap: wrap; }
}
@media (max-width: 767px) {
  .wk-found { padding-block: 6rem; }
  .wk-found__title { font-size: 2.6rem; }
  .wk-found__body { font-size: 1.35rem; }
  .wk-found__ctas { flex-direction: column; align-items: flex-start; gap: 2rem; }
}

/* ---------- Responsive · reel + grid ---------- */
@media (max-width: 1023px) {
  .wk-reel { padding-block: 6.5rem 6rem; }
  .wk-reel__title { font-size: 2.6rem; }
  .wkp-list { grid-template-columns: 1fr; gap: 4.5rem; }
  .wkp:nth-child(even) { margin-top: 0; }
  .wk-grid__head { margin-bottom: 3.5rem; }
  .wk-grid__title { font-size: 2.5rem; }
}
@media (max-width: 767px) {
  .wk-reel__stage { padding-inline: 1.6rem; }
  .wk-reel__title { font-size: 2.1rem; }
  .wk-reel__sub { font-size: 1.25rem; }
  .wk-reel__play { padding: 0.85rem 1.4rem; font-size: 0.95rem; }
  .wk-grid { padding-block: 5.5rem; }
  .wkp__title { font-size: 1.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .wk-reel__play { transition: none; }
}