/* ==========================================================================
   Lava New Media, 2026 design: the Work index (/work/)

   Sections in the order of design/work-index/WORK-INDEX.md: hero, four
   scenes, the red band, two staged floors, the close.
   Tokens, fonts, masthead, buttons, links, eyebrows, the device frame and
   the footer are lava.css. Grounds: ink, charcoal, white, ink, charcoal,
   red, white, charcoal, ink.

   The staged-object, reveal and close-actions rules under "shared" repeat
   case-study.css's (which repeat home.css's) exactly: this run leaves those
   pages' sheets alone. They belong in lava.css, once, when that is allowed.
   ========================================================================== */

/* --------------------------------------------------------------- shared -- */
/* A screenshot: rounded rectangle, hairline edge, its own ratio (--ar). On
   the dark grounds it is the hairline and nothing else (SPEC.md section 1). */
.shot {
  display: block; position: relative; overflow: hidden;
  border-radius: var(--r-object);
  border: 1px solid var(--edge-dark);
  background: var(--near-black);
}
.shot img { width: 100%; height: auto; aspect-ratio: var(--ar); object-fit: cover; object-position: top; }

/* On white: the light-ground edge and the home page's Ward shadow, scaled
   down on smaller screens as there. */
.shot--light {
  border-color: var(--edge-light); background: var(--white);
  --shadow: 0 40px 80px rgba(15,15,15,0.16), 0 10px 24px rgba(15,15,15,0.08);
  --shadow-hover: 0 40px 80px rgba(15,15,15,0.19), 0 10px 24px rgba(15,15,15,0.10);
  box-shadow: var(--shadow);
}
@media (max-width: 1023px) {
  .shot--light {
    --shadow: 0 24px 48px rgba(15,15,15,0.16), 0 6px 14px rgba(15,15,15,0.08);
    --shadow-hover: 0 24px 48px rgba(15,15,15,0.19), 0 6px 14px rgba(15,15,15,0.10);
  }
}
@media (max-width: 430px) {
  .shot--light {
    --shadow: 0 10px 20px rgba(15,15,15,0.12), 0 2px 6px rgba(15,15,15,0.06);
    --shadow-hover: 0 10px 20px rgba(15,15,15,0.14), 0 2px 6px rgba(15,15,15,0.07);
  }
}

/* Every object is a link: it lifts 4px; on dark its edge brightens, on
   white its shadow deepens by about a fifth. A floor object lifts with its
   caption's link (the whole object and caption are one link). */
.shot, .wi-item .shot { transition: transform 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease); }
a.shot:hover, a.shot:focus-visible, .wi-item:hover .shot, .wi-item:focus-visible .shot { transform: translateY(-4px); border-color: rgba(255, 255, 255, 0.18); }
a.shot--light:hover, a.shot--light:focus-visible, .wi-item:hover .shot--light, .wi-item:focus-visible .shot--light { border-color: var(--edge-light); box-shadow: var(--shadow-hover); }
.wi-item:hover .link__text, .wi-item:focus-visible .link__text { background-size: 100% var(--underline-w); }
.wi-item:hover .link__arrow, .wi-item:focus-visible .link__arrow { left: 3px; }

/* Button plus text link; stacked and full width on the phone. */
.actions { display: flex; align-items: center; gap: 28px; margin-top: 8px; }
@media (max-width: 767px) {
  .actions { flex-direction: column; align-items: stretch; gap: 14px; margin-top: 4px; }
  .actions .link { text-align: center; padding: 8px; }
}

/* Reveals, armed only once lava.js adds .js-anim: fade from 0.001 and rise
   16px when in view, once. */
.js-anim .reveal {
  opacity: 0.001; transform: translateY(16px);
  transition: opacity 500ms var(--ease), transform 500ms var(--ease);
}
.js-anim .reveal.is-visible { opacity: 1; transform: none; }

/* Eyebrows in the colours of each ground: red on white, gold on charcoal. */
.eyebrow--red::before { background: var(--red); }
.eyebrow--red .eyebrow__label { color: var(--red); }
.eyebrow--gold .eyebrow__label { color: var(--gold); }

/* Held phrases ({...} in the copy, cs_text()): whole on one line from 768. */
@media (min-width: 768px) { .cs-keep { display: inline-block; } }
.cs-hero__red { color: var(--red); }

/* The section heading, Raleway 500, and the running line under it. */
.wi-h2 { font: 500 34px/1.25 var(--display); letter-spacing: -0.5px; }
.wi-line { font: 400 17px/1.6 var(--body); }
.wi-story { font-size: 15px; }
@media (max-width: 767px) {
  .wi-h2 { font-size: 28px; line-height: 1.22; }
  .wi-line { font-size: 16px; }
}

/* A scene's label: the gold numeral, then the client and kind in spaced
   capitals. The numeral is a sequence mark, not text (aria-hidden). */
.wi-label { display: flex; align-items: baseline; gap: 16px; }
.wi-label__num { font: 600 14px/1 var(--body); letter-spacing: 1px; color: var(--gold); }
.wi-label__text { font: 600 12px/1.4 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-2); }
.wi-scene--platform .wi-label__text, .wi-scene--picture .wi-label__text, .wi-scene--number .wi-label__text { color: var(--gray-3); }
@media (max-width: 767px) { .wi-label__text { font-size: 11px; } }

/* --------------------------------------------------------------- stages -- */
/* A staged group of objects (the hero stack, the platform tableau): each
   object at its board position (--x, --y, --w in board px of the stage's
   box, --box wide), scaled with the box: --U is one board px here. On the
   phone the 342 stage's own positions (--px, --py, --pw, --pbox). The
   stage is as tall as its lowest object (--h, --hp, worked out by
   work/index.php from each image's own shape). Later objects sit in
   front. */
.wi-tab { container-type: inline-size; }
.wi-tab__box { --U: calc(100cqw / var(--box)); position: relative; height: var(--h); }
.wi-obj {
  position: absolute; display: block;
  left: calc((var(--x) - var(--shift, 0)) * var(--U));
  top: calc(var(--y) * var(--U));
  width: calc(var(--w) * var(--U));
}
@media (max-width: 767px) {
  .wi-tab__box { --U: calc(100cqw / var(--pbox)); height: var(--hp); }
  .wi-obj { left: calc(var(--px) * var(--U)); top: calc(var(--py) * var(--U)); width: calc(var(--pw) * var(--U)); }
}
/* Screened back: full colour under the near-black veil, a #202022 edge.
   Never reduced opacity: the veil is a layer over the picture. */
.shot--screened { border-color: #202022; }
.shot--screened::after { content: ""; position: absolute; inset: 0; background: rgba(11, 11, 12, 0.55); }
/* A linked object or device lifts 4px under the pointer; a dark-ground
   edge brightens. The hero stack does not link, so it does not move. */
a.wi-obj .shot, a.wi-obj .device { transition: transform 240ms var(--ease), border-color 240ms var(--ease); }
a.wi-obj:hover .shot, a.wi-obj:focus-visible .shot, a.wi-obj:hover .device, a.wi-obj:focus-visible .device { transform: translateY(-4px); }
a.wi-obj:hover .shot:not(.shot--screened), a.wi-obj:focus-visible .shot:not(.shot--screened) { border-color: rgba(255, 255, 255, 0.18); }

/* ----------------------------------------------------------------- hero -- */
/* Ink. The copy at the left; the stack off the right edge as a group, the
   one bleed on the site: Ward screened back, Opera clean in front of it,
   the app's home screen on a phone in front of both. From the board at
   1440: the group's box 1100 wide, its right edge 300px past the page's,
   its top 150 below the page's (the 76px header is above the hero, --hdr).
   Between 1280 and 1440 the whole hero scales with the page (--u is one
   board px); above 1440 it holds its 1440 sizes, anchored to the right
   edge. The hero is as tall as the stack needs (--hero-min, from
   work/index.php): its lowest edge, the phone's, plus 105px. */
.wi-hero { background: var(--near-black); color: var(--white); container-type: inline-size; overflow: clip; --hdr: 76px; }
.wi-hero__in { --u: calc(min(100cqw, 1440px) / 1440); position: relative; }
.wi-hero__text { position: relative; z-index: 2; }
.wi-hero__eyebrow { font: 600 12px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); }
.wi-hero h1 { margin-top: 26px; font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; }
.wi-hero__intro { margin-top: 26px; max-width: 520px; font: 400 19px/1.6 var(--body); color: var(--gray-4); }

@media (min-width: 1280px) {
  .wi-hero__in { min-height: var(--hero-min); padding: 160px 0 105px; }
  .wi-hero__text > * { max-width: calc(620 * var(--u)); }
  .wi-hero__text > .wi-hero__intro { max-width: calc(520 * var(--u)); }
  .wi-hero h1 { font-size: calc(76 * var(--u)); letter-spacing: calc(-2.2 * var(--u)); }
  .wi-hero__stack {
    position: absolute; z-index: 1;
    top: calc(var(--top) * var(--u) - var(--hdr));
    right: calc(var(--right) * var(--u));
    width: calc(var(--bw) * var(--u));
  }
}
/* 768 to 1279: the copy, then the stack under it inside the column, whole
   (nothing bleeds): Opera's left edge on the column's, Ward's right edge on
   the column's right, so the box is 940 board px wide. */
@media (max-width: 1279px) {
  .wi-hero__in { padding: 104px 0 112px; }
  .wi-hero h1 { max-width: 11em; font-size: 64px; letter-spacing: -1.8px; }
  .wi-hero__stack { margin: 64px var(--margin) 0; }
  .wi-hero__stack .wi-tab__box { --box: 940 !important; --shift: 80; }
}
@media (min-width: 1280px) and (max-width: 1439px) {
  .wi-hero__intro { font-size: 18px; }
}
@media (max-width: 1023px) { .wi-hero h1 { font-size: 60px; } }
/* The phone: the 342 x 560 stage under the copy. */
@media (max-width: 767px) {
  .wi-hero__in { padding: 64px 0 40px; }
  .wi-hero__eyebrow { font-size: 11px; }
  .wi-hero h1 { margin-top: 18px; font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .wi-hero__intro { margin-top: 18px; font-size: 16px; }
  .wi-hero__stack { margin-top: 40px; }
}

/* --------------------------------------------------------------- scenes -- */
.wi-scene { padding: 140px 0; }
@media (max-width: 1023px) { .wi-scene { padding: 104px 0; } }
@media (max-width: 767px)  { .wi-scene { padding: 72px 0; } }

/* Charcoal meets ink only across a hairline (SPEC.md section 1). */
.wi-scene--platform, .wi-scene--number { border-top: 1px solid var(--hairline-dark); }

/* 01, the platform, charcoal. The label, then the text column (360 at
   1440) beside the tableau (836, its right edge on the column's): the SMA
   desktop with the app's Your Cart and card-picker screens as devices in front.
   The tableau's top sits 80px under the label's, the text's 60px under the
   tableau's, and the lower phone ends 105px above the band's bottom edge.
   768 to 1023: the tableau across the column, the text under it. Phone:
   the 342 stage, then the text. */
.wi-scene--platform { background: var(--charcoal); color: var(--white); padding: 110px 0 105px; }
.wi-scene--platform .wi-label { height: 20px; }
.wi-plat {
  margin-top: 60px;
  display: grid; grid-template-columns: minmax(300px, 360fr) minmax(0, 836fr); column-gap: 76px; align-items: start;
}
.wi-plat__text { grid-column: 1; grid-row: 1; margin-top: 60px; display: flex; flex-direction: column; align-items: flex-start; }
.wi-plat__tab { grid-column: 2; grid-row: 1; }
.wi-plat .wi-line { margin-top: 22px; color: var(--gray-3); font-size: 16px; }
.wi-plat__links { margin-top: 22px; display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
@media (max-width: 1023px) {
  .wi-scene--platform { padding: 104px 0; }
  .wi-plat { margin-top: 40px; grid-template-columns: minmax(0, 1fr); row-gap: 48px; }
  .wi-plat__tab { grid-column: 1; grid-row: 1; }
  .wi-plat__text { grid-column: 1; grid-row: 2; margin-top: 0; max-width: 34em; }
}
@media (max-width: 767px) {
  .wi-scene--platform { padding: 64px 0 72px; }
  .wi-scene--platform .wi-label { height: auto; }
  .wi-plat { margin-top: 24px; row-gap: 28px; }
  .wi-plat .wi-line { margin-top: 18px; font-size: 15px; }
  .wi-plat__links { margin-top: 18px; gap: 8px; }
}

/* 02, the statement, white. The statement at 76 (the page's cap, the home
   H1's size), the second line under it, then the before (420), the after
   (480) and the story column, all three ending on one line. */
.wi-statement { margin-top: 28px; font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; color: var(--ink); }
.wi-statement__sub { margin-top: 18px; font: 500 34px/1.2 var(--display); letter-spacing: -0.5px; color: var(--gray-2); }
.wi-ba {
  margin-top: 56px;
  display: grid; grid-template-columns: 420fr 480fr 292fr; column-gap: 40px; align-items: end;
}
.wi-ba__label { margin-bottom: 10px; font: 600 11px/1.25 var(--body); letter-spacing: 3px; text-transform: uppercase; color: var(--gray-2); }
.wi-ba__text { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; padding-bottom: 8px; }
.wi-scene--statement .wi-line { color: var(--gray-1); }
@media (max-width: 1279px) {
  .wi-ba { grid-template-columns: 420fr 480fr; row-gap: 40px; }
  .wi-ba__text { grid-column: 1 / -1; max-width: 40em; padding-bottom: 0; }
}
@media (max-width: 1023px) {
  .wi-statement { font-size: 64px; letter-spacing: -1.8px; }
  .wi-statement__sub { font-size: 28px; }
  .wi-ba { column-gap: 32px; }
}
@media (max-width: 767px) {
  .wi-statement { margin-top: 18px; font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .wi-statement__sub { margin-top: 14px; font-size: 24px; }
  .wi-ba { margin-top: 32px; grid-template-columns: minmax(0, 1fr); row-gap: 28px; }
  .wi-ba__label { font-size: 10px; }
  .wi-ba__text { gap: 14px; }
}

/* 03, the picture, ink. A 340 text column, its top 40px under the
   object's, and the biggest object on the page (876 at 16:10). */
.wi-scene--picture { background: var(--near-black); color: var(--white); }
.wi-pic { display: grid; grid-template-columns: minmax(300px, 340fr) 876fr; column-gap: 56px; align-items: start; }
.wi-pic__text { display: flex; flex-direction: column; align-items: flex-start; padding-top: 40px; }
.wi-pic .wi-h2 { margin-top: 22px; }
.wi-pic .wi-line { margin-top: 22px; color: var(--gray-3); font-size: 16px; }
.wi-client { margin-top: 22px; font: 600 15px/1.4 var(--body); color: var(--white); }
/* The story link: 22px under the line, as in 04; 8px under the client's
   name when a 'kind' label puts the name there. */
.wi-pic .wi-story { margin-top: 22px; }
.wi-pic .wi-client + .wi-story { margin-top: 8px; }
@media (max-width: 1023px) {
  .wi-pic { grid-template-columns: minmax(0, 1fr); row-gap: 40px; }
  .wi-pic__text { max-width: 34em; padding-top: 0; }
}
/* The phone, as the 390 board: the label, the object, then the words. */
@media (max-width: 767px) {
  .wi-pic { display: flex; flex-direction: column; align-items: flex-start; gap: 0; }
  .wi-pic__text { display: contents; }
  .wi-pic__obj { order: 1; align-self: stretch; margin-top: 18px; }
  .wi-pic .wi-h2 { order: 2; margin-top: 24px; }
  .wi-pic .wi-line { order: 3; margin-top: 18px; font-size: 15px; }
  .wi-client { order: 4; margin-top: 18px; }
  .wi-pic .wi-story { order: 5; margin-top: 18px; }
  .wi-pic .wi-client + .wi-story { margin-top: 8px; }
}

/* 04, the number, charcoal. The label on its own row; then "Since 2005."
   at 76, the headline, the line and the link, ending on the bottom edge of
   the Ward object (600 at 16:10). */
.wi-scene--number { background: var(--charcoal); color: var(--white); }
.wi-number { font: 700 76px/1.02 var(--display); letter-spacing: -2.2px; color: var(--white); white-space: nowrap; }
.wi-numgrid { margin-top: 36px; display: grid; grid-template-columns: 608fr 600fr; column-gap: 64px; align-items: end; }
.wi-numgrid__text { display: flex; flex-direction: column; align-items: flex-start; max-width: 32em; }
.wi-numgrid .wi-h2 { margin-top: 22px; }
.wi-numgrid .wi-line { margin-top: 22px; color: var(--gray-3); font-size: 16px; }
.wi-numgrid .wi-story { margin-top: 22px; }
@media (max-width: 1023px) {
  .wi-number { font-size: 64px; }
  .wi-numgrid { grid-template-columns: minmax(0, 1fr); row-gap: 40px; margin-top: 28px; }
}
/* The phone, as the 390 board: the number and the headline, the object,
   then the line and the link. */
@media (max-width: 767px) {
  .wi-number { font-size: 44px; line-height: 1.04; letter-spacing: -1.4px; }
  .wi-numgrid { display: flex; flex-direction: column; align-items: flex-start; gap: 0; margin-top: 18px; }
  .wi-numgrid__text { display: contents; }
  .wi-numgrid .wi-h2 { margin-top: 18px; }
  .wi-numgrid__obj { order: 1; align-self: stretch; margin-top: 24px; }
  .wi-numgrid .wi-line { order: 2; margin-top: 24px; font-size: 15px; }
  .wi-numgrid .wi-story { order: 3; margin-top: 18px; }
}

/* ------------------------------------------------------------- red band -- */
.wi-band { background: var(--lava-red-band); color: var(--white); padding: 120px 0 128px; }
.wi-band__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 400px); column-gap: 64px; align-items: end; }
.wi-band__heading { max-width: 12em; font: 700 52px/1.08 var(--display); letter-spacing: -1.4px; }
.wi-band__body { font: 400 19px/1.6 var(--body); }
@media (max-width: 1023px) {
  .wi-band { padding: 96px 0 104px; }
  .wi-band__grid { grid-template-columns: minmax(0, 1fr); row-gap: 24px; }
  .wi-band__body { max-width: 32em; }
}
@media (max-width: 767px) {
  .wi-band { padding: 72px 0 80px; }
  .wi-band__heading { font-size: 36px; letter-spacing: -1px; }
  .wi-band__body { font-size: 16px; }
}

/* --------------------------------------------------------------- floors -- */
/* Floor A white, floor B charcoal (so it separates from the ink close).
   The label row, then the staged composition. */
.wi-floor { padding: 130px 0 140px; }
.wi-floor--dark { background: var(--charcoal); color: var(--white); }
.wi-floor--light .wi-h2 { color: var(--ink); }
.wi-floor__head .wi-h2 { margin-top: 18px; }
.wi-stagewrap { margin-top: 72px; container-type: inline-size; }

/* 1024 and up: the staged positions. Each object's x, y and width are
   WORK-INDEX.md's numbers in px of the 1272 column (--x, --y, --w, from
   includes/work-index.php), scaled with the column: --u is one of those px
   at this width. Captions are a fixed 80px and do not scale, so an object
   moves down by what the captions above it lose to scaling (--n is how
   many objects sit above it in a column it shares): exact at 1440 and up,
   never colliding below. The stage is as tall as its lowest object (--C)
   plus the caption, or the floor's composition height (--H) if larger. */
.wi-stage {
  --u: calc(100cqw / 1272);
  --cap: 80px; --capn: 80;
  --lag: calc(var(--cap) - var(--capn) * var(--u));
  position: relative;
  height: calc(max(var(--H) * var(--u), var(--C) * var(--u) + var(--cap)) + var(--N) * var(--lag));
}
.wi-item {
  position: absolute; display: block;
  left: calc(var(--x) * var(--u));
  top: calc(var(--y) * var(--u) + var(--n) * var(--lag));
  width: calc(var(--w) * var(--u));
}
/* An object on the right content margin is placed from the right, so its
   edge is the column's edge exactly, not a sum that rounds. */
.wi-item--end { left: auto; right: 0; }
.wi-cap { display: flex; flex-direction: column; align-items: flex-start; height: var(--cap); padding-top: 16px; }
.wi-item--end .wi-cap { align-items: flex-end; text-align: right; }
.wi-cap__name { font: 600 15px/20px var(--body); }
.wi-cap__kind { margin-top: 4px; font: 600 11px/14px var(--body); letter-spacing: 3px; text-transform: uppercase; }
.wi-cap__link { margin-top: 6px; font-size: 15px; line-height: 20px; }
.wi-floor--light .wi-cap__name { color: var(--ink); }
.wi-floor--light .wi-cap__kind { color: var(--gray-2); }
.wi-floor--dark .wi-cap__name { color: var(--white); }
.wi-floor--dark .wi-cap__kind { color: var(--gray-3); }

/* 768 to 1023: the simplified stagger. Two columns; the big object across
   both; the two medium ones share a row, the second 40px lower; the small
   one alone on the last row, on the side opposite the big one's side at
   1440 (a floor of two is the big one and that one). Columns are 320 at
   768, never narrower. */
@media (max-width: 1023px) {
  .wi-floor { padding: 104px 0 112px; }
  .wi-stagewrap { margin-top: 56px; }
  .wi-stage { height: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; row-gap: 56px; align-items: start; }
  .wi-item { position: static; width: auto; }
  .wi-item--big { grid-row: 1; grid-column: 1 / -1; }
  .wi-item--m1 { grid-row: 2; grid-column: 1; }
  .wi-item--m2 { grid-row: 2; grid-column: 2; margin-top: 40px; }
  .wi-item--small-left { grid-row: 3; grid-column: 1; }
  .wi-item--small-right { grid-row: 3; grid-column: 2; }
  .wi-cap, .wi-item--end .wi-cap { height: auto; align-items: flex-start; text-align: left; }
}

/* Below 768: a stack, every object the column's full width, in floor
   order. */
@media (max-width: 767px) {
  .wi-floor { padding: 72px 0 80px; }
  .wi-floor__head .wi-h2 { margin-top: 14px; }
  .wi-stagewrap { margin-top: 40px; }
  .wi-stage { display: flex; flex-direction: column; gap: 48px; }
  .wi-item--m2 { margin-top: 0; }
}

/* ---------------------------------------------------------------- close -- */
/* Ink, continuous with the footer; the footer's hairline is the seam. */
.wi-close { background: var(--near-black); color: var(--white); }
.wi-close__inner { display: flex; flex-direction: column; align-items: flex-start; gap: 28px; padding-top: 120px; padding-bottom: 100px; }
.wi-close h2 { font: 700 56px/1.08 var(--display); letter-spacing: -1.5px; }
.wi-close__sub { font: 400 19px/1.6 var(--body); color: var(--gray-4); }
.wi-close .actions { align-self: stretch; }
@media (max-width: 1023px) {
  .wi-close__inner { padding-top: 100px; padding-bottom: 88px; }
  .wi-close h2 { font-size: 48px; }
}
@media (max-width: 767px) {
  .wi-close__inner { gap: 18px; padding-top: 64px; padding-bottom: 80px; }
  .wi-close h2 { font-size: 36px; line-height: 1.1; letter-spacing: -1px; }
  .wi-close__sub { font-size: 16px; }
  .wi-close .actions { margin-top: 6px; }
}

/* ------------------------------------------------------- reduced motion -- */
@media (prefers-reduced-motion: reduce) {
  .js-anim .reveal { opacity: 1; transform: none; transition: none; }
  .shot, .wi-item .shot { transition: none; }
  a.shot:hover, a.shot:focus-visible, .wi-item:hover .shot, .wi-item:focus-visible .shot { transform: none; }
}