/* Marzex Technologies, edition 4.2 (experiment): What We Do (revamp.html #what-we-do).
   Two layouts from one piece of markup. Without motion (no script, reduced motion) it is a plain section: the lock-on
   photo, the title, then one block per service line with six of its tiles. With motion, marzex-wwd.js adds .wwd-live
   to <html> and the section becomes a tall track holding a sticky full-screen stage, where the lock-on photo opens to
   the full screen, the lock-on box breaks away and follows the story, and each service line's tiles orbit its name and
   then pour into its letters. The head script sets .wwd-live before first paint so the page doesn't jump. */

/* ---------- Plain section ---------- */
.wwd { position: relative; }
.wwd__lock { margin: 0; }
.wwd__sizer { display: none; }
.wwd__frame { border-radius: var(--r-3xl); }
.lock__dark { fill: var(--ink); fill-rule: evenodd; opacity: 0; }

.wwd__intro, .wwd__field, .wwd__end {
  max-width: calc(var(--container) + 2 * var(--margin)); margin-inline: auto; padding-inline: var(--margin);
}
.wwd__intro { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1rem; align-items: end; padding-top: 6rem; }
.wwd__title { grid-column: 1 / 9; font: 400 clamp(3rem, 8vw, 7.5rem)/.95 var(--sans); letter-spacing: -.035em; }
.wwd__lede { grid-column: 9 / 13; justify-self: end; }
.wwd__line { display: block; }

.wwd__field { display: grid; gap: 4.5rem; margin-top: 4rem; }
.wwd__ch { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1.5rem; padding-top: 1.5rem; border-top: 1px solid var(--rule); }
.wwd__word { grid-column: 1 / -1; font: 500 clamp(2.5rem, 8.5vw, 7.5rem)/.9 var(--sans); letter-spacing: -.02em; text-transform: uppercase; }
.wwd__info { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--col-gap); row-gap: 1rem; align-items: start; }
.wwd__num { grid-column: 1 / 4; }
.wwd__blurb { grid-column: 4 / 8; max-width: 40ch; }
.wwd__offers { grid-column: 9 / 13; list-style: none; display: grid; gap: .5rem; }
.wwd__set { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: var(--stack); }
.wwd__tile { position: relative; overflow: hidden; aspect-ratio: 4 / 3; border-radius: var(--r-lg); background: var(--gunmetal); }
.wwd__tile:nth-child(n+7) { display: none; }
.wwd__tile img, .wwd__tile video { display: block; width: 100%; height: 100%; object-fit: cover; filter: var(--grade); }
.wwd__shade, .wwd__lift, .wwd__knock, .wwd__scrim, .wwd__ret, .wwd__nav { display: none; }

.wwd__end { margin-top: 5rem; }
.wwd__end-in { display: grid; gap: 1.25rem; }
.wwd__index { list-style: none; border-top: 1px solid var(--rule); }
.wwd__index li { position: relative; border-bottom: 1px solid var(--rule); }
.wwd__index a {
  display: grid; grid-template-columns: 3.5rem minmax(0, 1fr) auto; align-items: center; gap: 1rem; padding: 1.1rem 0;
  font: 400 clamp(1.75rem, 3.2vw, 2.75rem)/1.1 var(--sans); letter-spacing: -.02em; text-decoration: none;
}
.wwd__index .icon { width: 1rem; height: 1rem; opacity: .5; transition: opacity var(--t-hover) var(--ease-cubic), translate var(--t-hover) var(--ease-cubic); }
.wwd__index a:hover .icon { opacity: 1; translate: 2px -2px; }
.wwd__index-name { transition: opacity var(--t-hover) var(--ease-cubic); }
.wwd__index a:hover .wwd__index-name { opacity: .6; }
.wwd__actions { display: flex; flex-wrap: wrap; align-items: center; gap: .75rem 1.25rem; margin-top: 1rem; }
.wwd + .strip, .wwd .strip { margin-top: 5rem; }

@media (max-width: 768px) {
  .wwd__frame { border-radius: var(--r-2xl); }
  .wwd__intro { padding-top: 4rem; }
  .wwd__title, .wwd__lede, .wwd__num, .wwd__blurb, .wwd__offers { grid-column: 1 / -1; justify-self: start; }
  .wwd__set { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .wwd__index a { grid-template-columns: 2.5rem minmax(0, 1fr) auto; }
}

/* ---------- Live: a sticky stage over a tall track ---------- */
.wwd-live .wwd__track { height: calc(var(--wwd-units, 1100) * 1vh + 100vh); height: calc(var(--wwd-units, 1100) * 1vh + 100svh); }
.wwd-live .wwd__stage {
  position: sticky; top: 0; height: 100vh; height: 100svh; overflow: clip;
  background: var(--ink); color: var(--paper);
}

/* Type in the stage waits for marzex-wwd.js to split it (it does once the fonts are in) */
.wwd-live:not(.wwd-ready) :is(.wwd__intro, .wwd__field, .wwd__ret, .wwd__nav, .wwd__end) { visibility: hidden; }

/* The lock-on photo keeps its plain layout until the script is ready, then the sizer holds the card's place (16:9,
   4:5 on phones) and the frame fills the stage, clipped down to the card, then opened. */
.wwd-ready .wwd__lock { position: absolute; inset: 0; z-index: 1; }
.wwd-ready .wwd__sizer { display: block; aspect-ratio: 16 / 9; border-radius: var(--r-3xl); visibility: hidden; }
.wwd-ready .wwd__frame { position: absolute; inset: 0; aspect-ratio: auto; border-radius: 0; background: var(--ink); }
.wwd-ready .wwd__lock .lock-view { inset: 0 auto auto 0; width: 100%; height: 100%; aspect-ratio: auto; transform-origin: 0 0; will-change: transform; }
.wwd-ready .lock__mark, .wwd-ready .wwd__lock .lock__tag { display: none; }
.wwd-ready .wwd__cap { position: relative; }

/* Title: centre stage once the screen has gone black */
.wwd-live .wwd__intro {
  position: absolute; inset: 0; z-index: 3; max-width: none; margin: 0; padding: 0 var(--margin);
  display: grid; grid-template-columns: minmax(0, 1fr); place-content: center; justify-items: center; row-gap: 1.75rem;
  text-align: center; pointer-events: none;
}
.wwd-live .wwd__title { grid-column: 1; justify-self: center; font-size: clamp(3rem, min(11vw, 20svh), 12rem); line-height: .9; white-space: nowrap; }
.wwd-live .wwd__lede { grid-column: 1; justify-self: center; opacity: 0; }

/* Field: tiles, the solid names and the knockout share one isolated group, so the knockout (ink with paper letters,
   multiplied) shows the tiles only through the letters. Tiles take a z-index from their depth in the orbit:
   behind the name (50) on the far side, in front of it on the near side. */
.wwd-live .wwd__field { position: absolute; inset: 0; z-index: 2; isolation: isolate; display: block; max-width: none; margin: 0; padding: 0; pointer-events: none; }
.wwd-live .wwd__ch, .wwd-live .wwd__set { display: contents; }
.wwd-live .wwd__ch { border: 0; }
.wwd-live .wwd__word {
  position: absolute; left: 50%; top: 46%; z-index: 50; margin: 0; text-align: center; white-space: nowrap;
  font-size: clamp(2.5rem, min(11.5vw, 21svh), 13rem); line-height: .86;
  transform: translate(calc(-50% + var(--wx, 0px)), calc(-50% + var(--wy, 0px)));
}
.wwd-live .wwd__line { overflow: clip; padding: .1em .08em .14em; margin: -.1em -.08em -.14em; }
.wwd-live .wwd__c { display: inline-block; will-change: transform; }
.wwd-live .wwd__tile {
  position: absolute; left: 0; top: 0; width: 10px; height: 10px; aspect-ratio: auto; display: block;
  border-radius: 12px; visibility: hidden; contain: strict; will-change: transform, opacity;
}
.wwd-live .wwd__tile img, .wwd-live .wwd__tile video { filter: none; }
.wwd-live .wwd__shade { display: block; position: absolute; inset: 0; background: var(--ink); opacity: 0; }
/* The lift: the letters again in paper at a low opacity over the tiles, so a dark clip still reads as a letter */
.wwd-live .wwd__lift { display: block; position: absolute; inset: 0; z-index: 150; opacity: 0; visibility: hidden; }
.wwd-live .wwd__lift .wwd__word { color: var(--paper); }
.wwd-live .wwd__knock { display: block; position: absolute; inset: 0; z-index: 200; background: var(--ink); mix-blend-mode: multiply; opacity: 0; visibility: hidden; }
.wwd-live .wwd__knock .wwd__word { color: #fff; }
.wwd-live .wwd__scrim { display: block; position: absolute; inset: auto 0 0; height: 45%; z-index: 250; background: var(--scrim); opacity: 0; }

/* Service line copy: blurb bottom left, what we build bottom right, above the chapter bar */
.wwd-live .wwd__info {
  position: absolute; left: 0; right: 0; bottom: calc(var(--margin) + 4.5rem); z-index: 300; padding-inline: var(--margin);
  grid-template-columns: repeat(12, minmax(0, 1fr)); align-items: end;
}
.wwd-live .wwd__num { display: none; }
.wwd-live .wwd__blurb { grid-column: 1 / 5; max-width: 34ch; opacity: 0; }
.wwd-live .wwd__offers { grid-column: 9 / 13; justify-items: end; gap: .4rem; text-align: right; }
.wwd-live .wwd__offers li { opacity: 0; }

/* The lock-on box, broken away from the photo: same 2px signal stroke corner to corner, same 8px handles, same tag */
.wwd-live .wwd__ret { display: block; position: absolute; left: 0; top: 0; z-index: 4; width: 10px; height: 10px; pointer-events: none; will-change: transform; }
.wwd__ret-box {
  position: absolute; inset: -1px; border: 2px solid transparent;
  border-image: linear-gradient(to bottom right, var(--flare), #ad5ab8, var(--iris)) 1;
  animation: wwd-acquire .6s var(--ease-expo) 1.35s backwards;
}
.wwd__ret-box i { position: absolute; width: 8px; height: 8px; animation: wwd-fade .2s linear 1.75s backwards; }
.wwd__ret-box i:nth-child(1) { left: -4px; top: -4px; background: var(--flare); }
.wwd__ret-box i:nth-child(2) { right: -4px; top: -4px; background: #ad5ab8; }
.wwd__ret-box i:nth-child(3) { left: -4px; bottom: -4px; background: #ad5ab8; }
.wwd__ret-box i:nth-child(4) { right: -4px; bottom: -4px; background: var(--iris); }
.wwd__ret-tag {
  position: absolute; left: -1px; bottom: calc(100% + .5rem); margin: 0;
  padding: .3rem .45rem; border-radius: var(--r-sm); background: var(--ink); color: var(--flare); white-space: nowrap;
  animation: wwd-fade .3s linear 1.9s backwards;
}
@keyframes wwd-acquire { from { opacity: 0; transform: scale(1.4); } }
@keyframes wwd-fade { from { opacity: 0; } }

/* Chapter bar: three 1px tracks fill as each line plays; a press jumps to that line */
.wwd-live .wwd__nav { display: block; position: absolute; left: 0; right: 0; bottom: var(--margin); z-index: 5; padding-inline: var(--margin); opacity: 0; visibility: hidden; }
.wwd__nav-in { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 42rem; margin-inline: auto; }
.wwd__nav button {
  display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; column-gap: .6rem; row-gap: .7rem;
  min-height: 44px; padding: .25rem 0; border: 0; background: none; color: inherit; text-align: left; cursor: pointer;
  opacity: .5; transition: opacity var(--t-hover) var(--ease-cubic);
}
.wwd__nav button:hover, .wwd__nav button[aria-current="step"] { opacity: 1; }
.wwd__nav button:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; }
.wwd__bar { grid-column: 1 / -1; position: relative; height: 1px; overflow: hidden; background: color-mix(in srgb, var(--paper) 22%, transparent); }
.wwd__fill { position: absolute; inset: 0; background: var(--paper); transform-origin: 0 50%; transform: scaleX(0); }
.wwd__nav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Finale: the three lines as an index, then the way on */
.wwd-live .wwd__end {
  position: absolute; inset: 0; z-index: 6; max-width: none; margin: 0; padding: calc(var(--header-h) + 1rem) var(--margin) var(--margin);
  display: grid; place-items: center; opacity: 0; visibility: hidden;
}
.wwd-live .wwd__end-in { width: min(100%, 56rem); }
.wwd-live .wwd__index { border-top: 0; }
.wwd-live .wwd__index li { border-bottom: 0; }
.wwd__rule { position: absolute; left: 0; right: 0; height: 1px; background: var(--rule); transform-origin: 0 50%; }
.wwd__rule--top { top: 0; }
.wwd__rule--bot { bottom: 0; }

@media (max-width: 768px) {
  .wwd-ready .wwd__sizer { aspect-ratio: 4 / 5; border-radius: var(--r-2xl); }
  .wwd-live .wwd__title { font-size: clamp(2.75rem, 13vw, 5rem); }
  .wwd-live .wwd__word { top: 44%; font-size: clamp(2rem, 11.5vw, 5rem); }
  .wwd-live .wwd__info { bottom: calc(var(--margin) + 4rem); }
  .wwd-live .wwd__blurb { grid-column: 1 / -1; max-width: 32ch; }
  .wwd-live .wwd__offers { display: none; }
  .wwd-live .wwd__nav { padding-right: calc(64px + 1rem + var(--margin)); }
  .wwd__nav-in { gap: .5rem; margin-inline: 0; }
  .wwd__nav-name { display: none; }
}