/* Bluefront AI: "Our work" on the home page. A static grid on a dark panel (no scroll effects): tiles of two widths,
   hairline borders, a media slot, a caption row with tags, and three commitments. MEDIA NOTES: each tile's media is a
   still image today (.wg-shot img). To add a motion clip later, replace that <img> with
   <video class="wg-video" muted loop playsinline autoplay poster="..."><source src="..." type="video/mp4"></video>;
   the same sizing rules apply to both. */

.work {
  --w-bg: #0a0e1a; --w-line: rgba(255, 255, 255, 0.13); --w-text: #f4f6fb; --w-muted: #a1a9bc;
  background: var(--w-bg); color: var(--w-text);
  padding: clamp(3rem, 6vw, 5.5rem) 0;
}
.work .overline { color: #9db8ff; }
.work__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 1.5rem clamp(2rem, 6vw, 6rem); align-items: end; margin-bottom: clamp(2rem, 4vw, 3.5rem); }
.work__title { margin: 0.7rem 0 0; color: #fff; font-size: clamp(2rem, 3.8vw, 3.4rem); font-weight: 500; letter-spacing: -0.032em; line-height: 1.07; max-width: 16ch; }
.work__lede { margin: 0; color: var(--w-muted); font-size: 1.02rem; line-height: 1.62; max-width: 54ch; }

.work-grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 1px; background: var(--w-line); border: 1px solid var(--w-line); }
.wg-card { display: flex; flex-direction: column; min-width: 0; background: var(--w-bg); }
.wg-card--wide { grid-column: span 7; }
.wg-card--narrow { grid-column: span 5; }

/* media slot */
.wg-media { position: relative; overflow: hidden; margin: 0.6rem 0.6rem 0; border-radius: 8px; isolation: isolate; background: #10152a; }
.wg-card--wide .wg-media { aspect-ratio: 1 / 0.92; }
.wg-card--wide .wg-media--fill { aspect-ratio: 1 / 0.8; }
.wg-card--narrow .wg-media { aspect-ratio: 1 / 1.02; }
.wg-media__glow { position: absolute; inset: 0; z-index: -1; }
.wg-shot { margin: 0; position: absolute; }
.wg-shot img, .wg-shot .wg-video { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center; background: #f6f7fb; }

/* floating: the screen sits in a frame on a coloured backdrop, with the product name set large */
.wg-media--float .wg-shot {
  left: 50%; top: 55%; width: 92%; aspect-ratio: 16 / 10; transform: translate(-50%, -50%);
  border-radius: 12px; overflow: hidden;
  box-shadow: 0 34px 70px -22px rgba(0, 0, 0, 0.7), 0 0 0 1px rgba(255, 255, 255, 0.22);
}
.wg-card--narrow .wg-media--float .wg-shot { width: 92%; top: 52%; }
.wg-media__mark { position: absolute; left: 1.2rem; top: 0.9rem; z-index: 2; font-size: clamp(1.8rem, 3.6vw, 3.2rem); font-weight: 500; letter-spacing: -0.04em; line-height: 1; color: rgba(255, 255, 255, 0.95); }
.wg-media--float .wg-shot { margin-top: 1.6rem; }

/* fill: the screen fills the whole slot, cropped from the top left */
.wg-media--fill .wg-shot { inset: 0; }
.wg-media--fill .wg-shot img, .wg-media--fill .wg-shot .wg-video { object-position: 0 0; }

/* backdrops, one colour family per product */
.wg-t-ledgerloom .wg-media__glow { background: radial-gradient(70% 55% at 85% 8%, rgba(60, 200, 150, 0.45), transparent 62%), linear-gradient(160deg, #0f4a37 0%, #0a2219 58%, #06110d 100%); }
.wg-t-draftline .wg-media__glow { background: radial-gradient(70% 55% at 10% 0%, rgba(110, 125, 255, 0.5), transparent 62%), linear-gradient(160deg, #242c78 0%, #0e1236 60%, #080b22 100%); }
.wg-t-parityflow .wg-media__glow { background: radial-gradient(70% 60% at 88% 4%, rgba(255, 122, 26, 0.55), transparent 62%), linear-gradient(160deg, #2a2a30 0%, #131316 60%, #0a0a0c 100%); }
.wg-t-ordermanager .wg-media__glow { background: radial-gradient(70% 55% at 90% 6%, rgba(120, 150, 255, 0.45), transparent 62%), linear-gradient(160deg, #1f3f94 0%, #0d1838 60%, #070d22 100%); }
.wg-t-epr .wg-media__glow { background: radial-gradient(70% 55% at 86% 6%, rgba(77, 134, 255, 0.55), transparent 62%), linear-gradient(160deg, #1b3f9a 0%, #0c1c48 58%, #060e26 100%); }
.wg-t-timetracker .wg-media__glow { background: radial-gradient(70% 55% at 12% 4%, rgba(56, 189, 248, 0.5), transparent 62%), linear-gradient(160deg, #0d5478 0%, #082a3d 58%, #051722 100%); }

/* caption row */
.wg-cap { display: flex; justify-content: space-between; align-items: center; gap: 0.8rem 1rem; flex-wrap: wrap; padding: 0.95rem 1rem; }
.wg-cap h3 { margin: 0; display: flex; align-items: baseline; flex-wrap: wrap; gap: 0.15rem 0.55rem; font-size: 0.95rem; font-weight: 600; letter-spacing: -0.005em; color: #fff; }
.wg-cap h3 i { align-self: center; width: 6px; height: 6px; background: rgba(255, 255, 255, 0.4); }
.wg-cap h3 span { font-weight: 400; color: var(--w-muted); }
.wg-tags { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0; padding: 0; list-style: none; }
.wg-tags li { padding: 0.28rem 0.55rem; border-radius: 4px; background: rgba(255, 255, 255, 0.1); color: #d3d9e8; font-size: 0.68rem; font-weight: 500; letter-spacing: 0.01em; white-space: nowrap; }

/* a tile with a project page: the name is the link and it covers the whole tile */
.wg-card--link { position: relative; }
.wg-link { color: inherit; text-decoration: none; }
.wg-link::after { content: ""; position: absolute; inset: 0; z-index: 3; border-radius: inherit; }
.wg-link:focus-visible { outline: none; }
.wg-link:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -2px; }
.wg-tags li.wg-tags__more { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--accent-fill, var(--accent)); color: #fff; }
.wg-tags__more svg { width: 12px; height: 12px; transition: transform 0.22s var(--ease); }
.wg-card--link:hover .wg-tags__more svg { transform: translateX(3px); }
.wg-card--link .wg-media .wg-shot { transition: transform 0.6s var(--ease); }
.wg-card--link:hover .wg-media--float .wg-shot { transform: translate(-50%, calc(-50% - 6px)); }

/* commitments (no numbers) */
.wg-commit { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem 1.2rem; margin: 0; padding: 1.1rem 1rem 1.3rem; list-style: none; border-top: 1px solid var(--w-line); }
.wg-commit strong { display: block; color: #fff; font-size: 1.08rem; font-weight: 600; letter-spacing: -0.015em; line-height: 1.2; }
.wg-commit span { display: block; margin-top: 0.4rem; color: var(--w-muted); font-size: 0.8rem; line-height: 1.45; }

/* call to action tile */
.wg-cta { justify-content: center; gap: 0.9rem; padding: clamp(1.6rem, 3vw, 2.6rem); background:
  radial-gradient(90% 70% at 100% 0%, rgba(77, 134, 255, 0.28), transparent 60%), var(--w-bg); }
.wg-cta__kicker { margin: 0; color: #9db8ff; font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; }
.wg-cta h3 { margin: 0; color: #fff; font-size: clamp(1.4rem, 2.2vw, 2rem); font-weight: 500; letter-spacing: -0.025em; line-height: 1.15; max-width: 18ch; }
.wg-cta p:not(.wg-cta__kicker) { margin: 0; color: var(--w-muted); font-size: 0.95rem; line-height: 1.6; max-width: 40ch; }
/* when the projects fill every row, the call to action gets a row of its own: text on the left, button on the right */
.wg-card--full { grid-column: 1 / -1; }
.wg-cta.wg-card--full { display: grid; grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto auto; column-gap: 2rem; align-items: center; }
.wg-cta.wg-card--full > :not(.wg-btn) { grid-column: 1; }
.wg-cta.wg-card--full h3 { max-width: 30ch; }
.wg-cta.wg-card--full .wg-btn { grid-column: 2; grid-row: 1 / -1; align-self: center; margin-top: 0; }

.wg-btn { display: inline-flex; align-items: center; gap: 0.6rem; align-self: flex-start; margin-top: 0.4rem; padding: 0.8rem 1.25rem; border-radius: 999px; background: #fff; color: #0a0e1a; font-weight: 600; font-size: 0.96rem; letter-spacing: -0.005em; transition: transform 0.2s var(--ease), background 0.2s var(--ease); }
.wg-btn:hover { background: #e6edff; transform: translateY(-1px); }
.wg-btn:focus-visible { outline: 3px solid #9db8ff; outline-offset: 3px; }
.wg-btn svg { width: 16px; height: 16px; }
.wg-btn--ghost { background: transparent; color: #fff; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); align-self: auto; margin-top: 0; }
.wg-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); }
.work__more { display: flex; justify-content: center; margin-top: clamp(1.8rem, 3.5vw, 3rem); }

@media (max-width: 1000px) {
  .work__head { grid-template-columns: minmax(0, 1fr); align-items: start; }
  .work__title { max-width: 22ch; }
}
@media (max-width: 900px) {
  .work-grid { grid-template-columns: minmax(0, 1fr); }
  .wg-card--wide, .wg-card--narrow, .wg-card--full { grid-column: auto; }
  .wg-cta.wg-card--full { display: flex; }
  .wg-cta.wg-card--full .wg-btn { margin-top: 0.4rem; align-self: flex-start; }
  .wg-card--wide .wg-media, .wg-card--narrow .wg-media { aspect-ratio: 1 / 0.78; }
}
@media (max-width: 560px) {
  .wg-commit { grid-template-columns: minmax(0, 1fr); gap: 0.9rem; }
  .wg-cap { align-items: flex-start; }
  .wg-media--float .wg-shot, .wg-card--narrow .wg-media--float .wg-shot { width: 92%; }
}

/* ---------- /work page (first version) ---------- */
.wk-hero { padding: clamp(8rem, 14vw, 11rem) 0 clamp(2rem, 4vw, 3rem); background: var(--surface); }
.wk-hero__lede { margin-top: 1.2rem; max-width: 58ch; color: var(--muted); font-size: 1.15rem; line-height: 1.6; }
.wk-list { background: var(--surface); padding: 1rem 0 clamp(4rem, 8vw, 7rem); }
.wk-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(1.4rem, 3vw, 2.4rem); }
.wk-tile { display: grid; align-content: start; background: var(--card); border: 1px solid rgba(var(--ink-rgb), 0.08); border-radius: 2rem; overflow: hidden; box-shadow: 0 30px 70px -45px rgba(var(--shadow-rgb), 0.4); transition: transform 0.3s var(--ease); }
.wk-tile:hover { transform: translateY(-4px); }
.wk-tile__media { position: relative; display: block; aspect-ratio: 16 / 10; background: var(--surface); overflow: hidden; }
.wk-tile__media img, .wk-tile__media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: top center; }
.wk-tile__video { opacity: 0; transition: opacity 0.4s var(--ease); }
.wk-tile.is-playing .wk-tile__video { opacity: 1; }
.wk-tile__play { position: absolute; left: 1rem; bottom: 1rem; padding: 0.4rem 0.8rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; color: #0b1b3f; background: rgba(255, 255, 255, 0.72); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.8); }
.wk-tile__body { padding: clamp(1.4rem, 2.4vw, 2.2rem); }
.wk-tile__kind { font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--accent); }
.wk-tile__body h2 { margin: 0.5rem 0 0; font-size: clamp(1.6rem, 2.4vw, 2.2rem); font-weight: 500; letter-spacing: -0.025em; }
.wk-tile__body p { margin: 0.8rem 0 0; color: var(--muted); line-height: 1.6; }
.wk-tile__body ul { list-style: none; margin: 1rem 0 1.2rem; padding: 0; display: grid; gap: 0.4rem; color: var(--muted-2); font-size: 0.94rem; }
.wk-tile__body li { position: relative; padding-left: 1.1rem; }
.wk-tile__body .wk-tile__case { margin-right: 1.6rem; margin-bottom: 0.6rem; }
.wk-tile__body li::before { content: ""; position: absolute; left: 0; top: 0.6em; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); }
@media (max-width: 900px) { .wk-grid { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Proof band: counter + looping "what we build with" strip ---------- */
.proof__top { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(2rem, 6vw, 6rem); align-items: end; padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.proof__stats--one { display: block; }
.proof__stats--one .proof__stat strong { font-size: clamp(5rem, 11vw, 10rem); line-height: 0.9; letter-spacing: -0.04em; }
.proof__stats--one .proof__stat > span { font-size: 1.05rem; color: var(--muted); margin-top: 1rem; }
.proof__line { margin: 0; max-width: 34ch; color: var(--muted); font-size: clamp(1.1rem, 1.6vw, 1.45rem); line-height: 1.45; letter-spacing: -0.01em; padding-bottom: 0.4rem; }
@media (max-width: 760px) { .proof__top { grid-template-columns: 1fr; align-items: start; } }

.stack { padding-top: clamp(2rem, 4vw, 3rem); }
.stack__label { margin: 0 0 1.6rem; font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted-2); }
.stack__viewport { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); mask-image: linear-gradient(90deg, transparent, #000 9%, #000 91%, transparent); }
.stack__track { display: flex; width: max-content; animation: stack-run 46s linear infinite; }
.stack__set { display: flex; flex-shrink: 0; align-items: center; gap: clamp(3rem, 5vw, 5rem); margin: 0; padding: 0 clamp(1.5rem, 2.5vw, 2.5rem); list-style: none; }
.stack__set li { flex: none; pointer-events: none; user-select: none; }
/* grey, not clickable, never pauses (no hover state on purpose) */
.stack__mark { display: inline-flex; align-items: center; gap: 0.7rem; font-size: clamp(1.25rem, 2vw, 1.7rem); font-weight: 600; letter-spacing: -0.02em; color: rgba(var(--ink-rgb), 0.38); white-space: nowrap; }
.stack__mark img { display: block; height: clamp(26px, 3vw, 36px); width: auto; filter: grayscale(1) brightness(0) invert(1); opacity: 0.38; }
@keyframes stack-run { from { transform: translateX(0); } to { transform: translateX(-50%); } }

/* Reduced motion / Pause motion: a still, wrapped row (second copy hidden) */
@media (prefers-reduced-motion: reduce) {
  .stack__track { animation: none; width: auto; }
  .stack__set { flex-wrap: wrap; gap: 1.5rem 3rem; padding: 0; }
  .stack__set[aria-hidden="true"] { display: none; }
  .stack__viewport { -webkit-mask-image: none; mask-image: none; }
}
html[data-motion="off"] .stack__track { animation: none; width: auto; }
html[data-motion="off"] .stack__set { flex-wrap: wrap; gap: 1.5rem 3rem; padding: 0; }
html[data-motion="off"] .stack__set[aria-hidden="true"] { display: none; }
html[data-motion="off"] .stack__viewport { -webkit-mask-image: none; mask-image: none; }

/* ---------- Four-counter row (overrides the earlier single-counter layout) ---------- */
.proof__stats--four { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(1.5rem, 3vw, 3rem); padding-bottom: clamp(2.5rem, 5vw, 4rem); border-bottom: 1px solid rgba(var(--ink-rgb), 0.1); }
.proof__stats--four .proof__stat strong { font-size: clamp(3.4rem, 7.5vw, 7rem); line-height: 0.92; letter-spacing: -0.04em; }
.proof__stats--four .proof__stat > span { display: block; max-width: 20ch; margin-top: 0.9rem; font-size: 1rem; line-height: 1.4; color: var(--muted); }
.proof__stats--four + .proof__line { margin-top: 2.25rem; max-width: 60ch; }
@media (max-width: 900px) { .proof__stats--four { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 2.5rem; } }

html[data-theme="dark"] .work-card__kind b { color: #9dbcff; }