/* Case-study card styles for /work/ (release-ui, from the IA mockup). Copied unchanged from the Home inline style u2 (tokens block, card and figure rules, and the U7 round 1 tile-tone overrides) so the cards match Home exactly. */
:root {
  --a-d: var(--zc-a9beff); --a-fd: var(--zc-8ea8ff); --a-tint: var(--zc-dfe6ff); --glow-rgb: 150 172 255;
  --a-tl: var(--zc-2f4bd0); --a-fl: var(--zc-3f5ee6);
  --n0: var(--zc-000); --n1: var(--zc-05070d); --n2: var(--zc-0b1020); --n-ink: var(--zc-f5f5f7); --n-mute: var(--zc-a9b1c0); --n-faint: var(--zc-8a93a6);
  --ember: var(--a-d); --ember-2: var(--a-tint);
  --d1: .3s; --d2: .8s; --d3: 1.6s; --ease-io: cubic-bezier(.65, 0, .35, 1);
  --r-xl: 32px; --u2-max: 1344px;
  --t-name: clamp(3.4rem, 1rem + 8.6vw, 9.25rem);
  --t-stmt: clamp(1.6rem, 1.05rem + 2.4vw, 2.9rem);
  --t-card: clamp(1.5rem, 1.2rem + 1.2vw, 2rem);
  --mute: var(--muted); --surf: var(--surface); --bg-2: var(--surface-2); --tile: var(--surface);
  --acc-f: var(--a-fd); --acc: var(--accent);
}
:root[data-theme="light"] { --acc-f: var(--a-fl); --acc: var(--a-tl); --tile: var(--zc-fff); }
.night, .stage { --bg: var(--zc-000); --surface: var(--zc-121218); --surface-2: var(--zc-1b1b22); --ink: var(--zc-f5f5f7); --ink-2: var(--zc-d2d2d7); --muted: var(--zc-a9b1c0); --mute: var(--zc-a9b1c0); --surf: var(--zc-15151b); --bg-2: var(--zc-1b1b22);
  --line: var(--zc-rgba-255-255-255-1); --line-2: var(--zc-rgba-255-255-255-22); --acc: var(--a-d); --acc-f: var(--a-fd); --accent: var(--a-d); --btn: var(--zc-f5f5f7); --btn-ink: var(--zc-05070d); --shadow: none; color: var(--ink); color-scheme: dark; }
.u2w { max-width: calc(var(--u2-max) + 2 * var(--gut)); margin: 0 auto; padding: 0 var(--gut); }
.gc { flex: 0 0 min(1060px, 86vw); scroll-snap-align: start; }
.gcard { position: relative; display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); height: 100%; min-height: min(600px, 72vh); border-radius: var(--r-xl); background: var(--surface); overflow: hidden; box-shadow: var(--shadow); }
.gc-v { position: relative; display: grid; place-items: center; margin: 12px; padding: clamp(20px, 2.6vw, 40px); border-radius: 24px; background: radial-gradient(120% 90% at 20% 0%, var(--zc-121a30), var(--zc-05070d) 62%); color: var(--n-ink); overflow: hidden; --acc-f: var(--a-fd); --acc: var(--a-d); }
.gc-t { display: flex; flex-direction: column; justify-content: center; padding: clamp(24px, 3vw, 48px); }
.gc-k { margin: 0; font-size: 15px; font-weight: 500; color: var(--muted); }
.gc-h { margin: 8px 0 0; font-size: var(--t-card); font-weight: 600; letter-spacing: -.03em; line-height: 1.1; text-wrap: balance; }
.gc-p { margin: 14px 0 0; font-size: var(--fs-card); line-height: 1.5; color: var(--ink-2); }
.gc-r { margin: 18px 0 28px; padding-left: 14px; border-left: 2px solid var(--acc-f); font-weight: 600; line-height: 1.4; }
.gc-a { align-self: flex-start; }
.gc-a::after { content: ""; position: absolute; inset: 0; z-index: 2; border-radius: var(--r-xl); }   /* the whole card is the link */
.gc-a:focus-visible { outline: none; }
.gc-a:focus-visible::after { outline: 2px solid var(--accent); outline-offset: -3px; }
.gcard:hover .gc-a .arr { transform: translateX(3px); }
.earlier { margin: 0; }
/* the Dasalla figure (night): the portfolio, then its channels as routes */
.dsfig { margin: 0; width: 100%; }
.dsfig svg { width: 100%; height: auto; overflow: visible; }
.ds-cap { font: 500 12px var(--mono); letter-spacing: .12em; text-transform: uppercase; fill: var(--n-mute); }
.ds-big { font: 600 74px var(--sans); letter-spacing: -.05em; fill: var(--n-ink); }
.ds-sub { font: 500 15px var(--sans); fill: var(--n-mute); }
.ds-bar { fill: url(#dsBar); filter: drop-shadow(0 0 12px rgb(var(--glow-rgb) / .45)); }
.ds-ln { stroke: var(--zc-rgba-255-255-255-22); stroke-width: 1.6; }
.ds-pulse { stroke: var(--a-d); stroke-width: 2.6; stroke-linecap: round; stroke-dasharray: .08 1.2; stroke-dashoffset: 1.1; filter: drop-shadow(0 0 4px rgb(var(--glow-rgb) / .95)); }
.ds-st circle { fill: var(--zc-05070d); stroke: var(--a-d); stroke-width: 2; }
.ds-lab { font: 560 19px var(--sans); fill: var(--n-ink); }
.ds-lab2 { font-size: 17px; fill: var(--n-ink); }
@keyframes u2-pulse { from { stroke-dashoffset: 1.1; } to { stroke-dashoffset: -.1; } }
/* the pipeline schematic (my business) */
.pfig { margin: 0; width: 100%; }
.pfig svg { width: 100%; height: auto; overflow: visible; }
.pp-pg { fill: var(--zc-rgba-255-255-255-16); }
@media (prefers-reduced-motion: no-preference) { .pp-pg { animation: u2-pg 4.6s var(--ease-io) infinite; animation-delay: calc(var(--i) * -.2s); } .pp-pulse { animation: u2-pulse 3s linear infinite; animation-delay: calc(var(--k) * -1s); } }
@keyframes u2-pg { 0%, 70%, 100% { fill: var(--zc-rgba-255-255-255-16); } 80% { fill: var(--a-d); } }
.pp-cap { font: 500 12.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; fill: var(--n-mute); }
.pp-ln { fill: none; stroke: var(--zc-rgba-255-255-255-2); stroke-width: 1.6; }
.pp-pulse { fill: none; stroke: var(--a-d); stroke-width: 2.4; stroke-linecap: round; stroke-dasharray: .07 1.2; stroke-dashoffset: 1.1; filter: drop-shadow(0 0 4px rgb(var(--glow-rgb) / .9)); }
.pp-node rect { fill: var(--zc-10141f); stroke: var(--zc-rgba-255-255-255-28); stroke-width: 1.2; }
.pp-node text { font: 500 15px var(--mono); fill: var(--n-ink); }
.pp-out circle { fill: var(--zc-05070d); stroke: var(--a-d); stroke-width: 2; }
.pp-lab { font: 560 19px var(--sans); fill: var(--n-ink); }
.pfig-n { margin-top: 10px; font: 400 12px var(--mono); color: var(--n-mute); }
/* real screenshots in quiet browser chrome */
.frames { position: relative; width: 100%; aspect-ratio: 16 / 11; perspective: 1400px; }
.bframe { position: absolute; margin: 0; border-radius: 14px; overflow: hidden; background: var(--zc-0d1018); box-shadow: 0 2px 4px var(--zc-rgba-0-0-0-3), 0 30px 60px -20px var(--zc-rgba-0-0-0-7); }
.bf-bar { display: flex; align-items: center; gap: 6px; height: 28px; padding: 0 12px; background: linear-gradient(var(--zc-171b26), var(--zc-10131c)); border-bottom: 1px solid var(--zc-rgba-255-255-255-06); }
.bf-bar i { width: 9px; height: 9px; border-radius: 50%; background: var(--zc-rgba-255-255-255-16); }
.bf-bar span { margin-left: 10px; font: 400 11px var(--mono); color: var(--zc-8d95a6); padding: 2px 10px; border-radius: 6px; background: var(--zc-rgba-255-255-255-05); }
.bframe img { display: block; width: 100%; height: auto; }
.bf-back { width: 74%; right: 0; top: 0; transform: rotateY(-14deg) rotateX(4deg) translateZ(-60px); opacity: .8; transition: transform .9s var(--ease); }
.bf-front { width: 82%; left: 0; bottom: 0; transform: rotateY(-10deg) rotateX(3deg); transition: transform .9s var(--ease); }
.gcard:hover .bf-front { transform: rotateY(-4deg) rotateX(1deg) translateY(-6px); }
.gcard:hover .bf-back { transform: rotateY(-8deg) rotateX(2deg) translateZ(-40px) translateY(-10px); }

.gcard { background: var(--zc-f5f5f7); }
:root[data-theme="dark"] .gcard { background: var(--zc-1d1d1f); }
.gc-v { --tile: var(--zc-fff); background: var(--zc-fff); --n-ink: var(--zc-1d1d1f); --n-mute: var(--zc-6e6e73); --a-d: var(--zc-0066cc); --acc: var(--zc-0066cc); --acc-f: var(--zc-0066cc); --g-line: var(--zc-rgba-0-0-0-16); --g-line-2: var(--zc-rgba-0-0-0-28); --pg-off: color-mix(in srgb, var(--zc-1d1d1f) 12%, transparent); color: var(--n-ink); }
:root[data-theme="dark"] .gc-v { --tile: var(--zc-000); background: var(--zc-000); --n-ink: var(--zc-f5f5f7); --n-mute: var(--zc-a1a1a6); --a-d: var(--zc-a9beff); --acc: var(--zc-a9beff); --acc-f: var(--zc-a9beff); --g-line: var(--zc-rgba-255-255-255-18); --g-line-2: var(--zc-rgba-255-255-255-30); --pg-off: color-mix(in srgb, var(--zc-f5f5f7) 12%, transparent); }
/* kickers and node text: sans, as written, no caps */
.ds-cap, .pp-cap { font: 600 13px var(--sans); letter-spacing: 0; text-transform: none; fill: var(--n-mute); }
.pp-node text { font: 600 15px var(--sans); fill: var(--n-ink); }
.pfig-n { font: 400 14px var(--sans); color: var(--n-mute); }
/* no glow: a flat accent bar, flat pulses, station circles in the tile colour */
.ds-bar { fill: var(--a-d); filter: none; }
.ds-pulse, .pp-pulse { filter: none; }
.ds-ln, .pp-ln { stroke: var(--g-line-2); }
.ds-st circle, .pp-out circle { fill: var(--tile); stroke: var(--a-d); }
.pp-node rect { fill: var(--tile); stroke: var(--g-line-2); }
/* the blinking page squares: off colour from the ink, on colour the accent (u2-pg hard-codes white) */
.pp-pg { fill: var(--pg-off); }
@keyframes u7-pg { 0%, 70%, 100% { fill: var(--pg-off); } 80% { fill: var(--a-d); } }
@media (prefers-reduced-motion: no-preference) { .pp-pg { animation: u7-pg 4.6s var(--ease-io) infinite; animation-delay: calc(var(--i) * -.2s); } }
/* Pause motion: the hero's .pz look at the paddle size, first in the row */
/* without JS nothing could pause the loops, so they hold still */

/* Static case-study grid (release-ui, from the IA mockup). Replaces the Home carousel; reuses the .gcard / .gc-* card styles unchanged.
   2 columns from 861px, 1 column on phones. The card is stacked (figure on top, text below) because each cell is half width. */
.cgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(16px, 2vw, 24px); margin: 0; padding: 0; list-style: none; }
.cgrid .gc { flex: none; min-width: 0; }
.cgrid .gcard { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto 1fr; min-height: 0; }
.cgrid .gc-v { height: clamp(260px, 27vw, 380px); min-height: 0; padding: clamp(16px, 2vw, 28px); }
.cgrid .dsfig, .cgrid .pfig { display: flex; flex-direction: column; align-items: center; justify-content: center; height: 100%; min-height: 0; }
.cgrid .dsfig svg { width: 100%; height: 100%; }
.cgrid .pfig svg { width: 100%; height: auto; min-height: 0; flex: 0 1 auto; max-height: calc(100% - 28px); }
.cgrid .frames { width: auto; height: 100%; max-width: 100%; }
.cgrid .gc-t { justify-content: flex-start; }
.cgrid .gc-r { margin-bottom: 24px; }
.cgrid .gc-a { margin-top: auto; }
@media (max-width: 860px) {
  .cgrid { grid-template-columns: minmax(0, 1fr); }
  .cgrid .gc-v { height: clamp(240px, 62vw, 340px); }
}
@media (max-width: 760px) { .cgrid .gc-v { margin: 8px; padding: 16px; } }
/* /work/ page header (one column; the .fh pattern from For your team) */
.wk-h .fh-grid { grid-template-columns: minmax(0, 1fr); }
.wk-body { padding: 0 var(--gut) var(--sp7, 96px); }