/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  T O K E N S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* Layout: one dark ground, type at statement scale on the left edge, a single pink pixel that travels through the page. */
  :root {
    color-scheme: dark;            /* the brand is dark throughout, by decision */
    --ground: #0E1013;             /* page background */
    --ink: #ECEEF1;                /* primary text */
    --soft: #99A0AC;               /* secondary text */
    --pink: #E31C79;               /* PANTONE 213 C, the only accent */
    --on-pink: #FFFFFF;            /* text on the pink button */
    --rule: #23272E;               /* hairlines */
    --tile: #15181D;               /* placeholder image ground */
    --tile-2: #1B1F26;             /* placeholder pixel pattern */

    --display: "Manrope", "Avenir Next", "Segoe UI", system-ui, sans-serif;
    --mono: "DM Mono", ui-monospace, "SFMono-Regular", Menlo, Consolas, monospace;

    --step-hero: clamp(2.6rem, 5.9vw, 5.6rem);   /* sized so each headline line holds on one row */
    --step-h2: clamp(1.9rem, 4.4vw, 3.5rem);
    --step-lead: clamp(1.15rem, 1.9vw, 1.5rem);
    --step-label: clamp(0.9rem, 1.15vw, 1.05rem);   /* section labels: about 14px on a phone, 16 to 17px on a desktop */
    --gutter: clamp(16px, 4vw, 48px);
    --section: clamp(72px, 11vw, 160px);
  }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  B A S E  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  *, *::before, *::after { box-sizing: border-box; }
  body {
    background: var(--ground);
    color: var(--ink);
    font-family: var(--display);
    font-size: 1rem;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
  }
  h1, h2, h3, p { margin: 0; }
  h1, h2, h3 { font-weight: 600; text-wrap: balance; }
  a { color: inherit; }
  :focus-visible { outline: 2px solid var(--pink); outline-offset: 4px; }
  .wrap { max-width: 1280px; margin-inline: auto; padding-inline: var(--gutter); }
  .mono {
    font-family: var(--mono);
    font-size: 0.72rem;
    letter-spacing: 0.09em;
    text-transform: uppercase;
    color: var(--soft);
  }
  /* section labels: the mono line that names each section, sized up from the small print so it reads at a glance */
  .mono.label { font-size: var(--step-label); letter-spacing: 0.08em; }
  /* the pixel: the square from the logo, reused as punctuation */
  .px {
    display: inline-block;
    width: 0.17em;
    height: 0.17em;
    margin-left: 0.05em;
    background: var(--pink);
  }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  R I B B O N  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .ribbon { border-bottom: 1px solid var(--rule); }
  .ribbon .wrap { display: flex; flex-wrap: wrap; gap: 4px 20px; justify-content: space-between; padding-block: 9px; }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  N A V  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .nav {
    position: sticky;
    top: env(safe-area-inset-top, 0px);
    z-index: 5;
    background: color-mix(in srgb, var(--ground) 86%, transparent);
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
  }
  .nav .wrap { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding-block: 18px; }
  .logo { display: block; width: 168px; flex: none; }
  .logo svg { display: block; width: 100%; height: auto; }
  .logo .lg-ink { fill: var(--ink); }
  .logo .lg-pink { fill: var(--pink); }
  .links { display: flex; align-items: center; gap: clamp(16px, 2.4vw, 34px); }
  .links a { font-size: 0.92rem; font-weight: 500; text-decoration: none; color: var(--soft); transition: color 0.25s ease; }
  .links a:not(.btn):hover, .links a.is-here { color: var(--pink); }   /* pink under the pointer, and pink for as long as you are in the section it leads to */
  @media (max-width: 860px) { .links a:not(.btn) { display: none; } }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  B U T T O N S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .btn {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 13px 20px;
    border: 1px solid var(--rule);
    font-size: 0.92rem;
    font-weight: 600;
    text-decoration: none;
    color: var(--ink);
    overflow: hidden;
    isolation: isolate;
    transition: border-color 0.3s ease, color 0.3s ease;
  }
  /* pink floods in from the left edge, one hard edge, no fade */
  .btn::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: -1;
    background: var(--pink);
    transform: scaleX(0);
    transform-origin: left center;
    transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1);
  }
  .btn:hover { border-color: var(--pink); color: var(--on-pink); }
  .btn:hover::before { transform: scaleX(1); }
  .links a.btn { color: var(--ink); }
  .links a.btn:hover { color: var(--on-pink); }
  .btn.solid { border-color: var(--pink); color: var(--on-pink); }
  .btn.solid::before { transform: scaleX(1); }
  .btn.solid:hover::before { transform: scaleX(1); filter: brightness(1.12); }
  .btn i { width: 7px; height: 7px; background: currentColor; display: block; }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  H E R O  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .hero { padding-block: clamp(40px, 5.5vw, 84px) clamp(56px, 8vw, 112px); }
  .hero-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr); gap: clamp(32px, 5vw, 72px); align-items: center; }
  @media (max-width: 900px) { .hero-grid { grid-template-columns: minmax(0, 1fr); } }
  .hero .mono { margin-bottom: clamp(20px, 3vw, 36px); }
  .hero h1 { font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.045em; }
  /* each line rises out of its own mask, like a layer being switched on */
  .hero h1 .line { display: block; overflow: hidden; padding-bottom: 0.14em; margin-bottom: -0.1em; } /* room for descenders inside the mask */
  .hero h1 .line > span { display: inline-block; white-space: nowrap; animation: rise 0.95s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
  .hero h1 .line:nth-child(2) > span { animation-delay: 0.09s; }
  .hero h1 .line:nth-child(3) > span { animation-delay: 0.18s; }
  .hero h1 .px { animation: blink 0.9s steps(1, end) 1.1s 3 backwards; } /* backwards only: after three blinks the pixel returns to solid and holds as the full stop */
  .lead { margin-top: clamp(22px, 3vw, 38px); font-size: var(--step-lead); line-height: 1.35; font-weight: 500; letter-spacing: -0.015em; }
  .hero-copy p.body { margin-top: 16px; max-width: 50ch; color: var(--soft); }
  .cta { margin-top: clamp(26px, 3.4vw, 42px); display: flex; flex-wrap: wrap; gap: 12px; }

  /* the stage: the pixel story, drawn on canvas */
  .stage { min-width: 0; }
  .stage canvas { display: block; width: 100%; max-width: 100%; aspect-ratio: 18 / 14; }
  .stage-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--rule); }
  .stage-foot .mono { margin: 0; color: var(--ink); }
  .steps { display: flex; gap: 8px; }
  .steps button {
    width: 12px;
    height: 12px;
    padding: 0;
    border: 0;
    background: var(--rule);
    cursor: pointer;
    transition: background 0.25s ease, transform 0.25s ease;
  }
  .steps button:hover { background: var(--soft); }
  .steps button[aria-pressed="true"] { background: var(--pink); transform: scale(1.25); }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  S E C T I O N S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .block { padding-block: var(--section); border-top: 1px solid var(--rule); }
  /* A section that ends on its own rule hands straight over to the next one: no second gap, no second line. */
  .block.runs-on { padding-bottom: 0; }              /* the section already closes on a rule of its own (the client row, the last service row), so no air below it */
  .block.runs-on + .block { border-top: 0; }         /* and the next section does not draw another rule 160px later */
  .head { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 12px 24px; margin-bottom: clamp(36px, 5vw, 72px); }
  .head .mono { grid-column: 1 / span 3; padding-top: 1em; }
  .head h2 { grid-column: 4 / -1; font-size: var(--step-h2); line-height: 1.04; letter-spacing: -0.035em; max-width: 18ch; }
  @media (max-width: 760px) { .head .mono, .head h2 { grid-column: 1 / -1; } .head .mono { padding-top: 0; } }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  S E R V I C E S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .svc { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--rule); }
  .svc li {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: 6px 24px;
    align-items: baseline;
    padding-block: clamp(18px, 2.4vw, 30px);
    border-bottom: 1px solid var(--rule);
  }
  /* the name is the link. Its box hugs the words and never moves, so the pointer stays on it while the letters inside glitch and fill */
  .svc .name {
    grid-column: 1 / span 6;
    justify-self: start;        /* the box hugs the words, so only the word answers the pointer and not the empty row */
    font-size: clamp(1.5rem, 3.4vw, 2.7rem);
    font-weight: 600;
    letter-spacing: -0.035em;
    line-height: 1.1;
    color: var(--ink);
    text-decoration: none;
  }
  /* the letters: everything that paints or moves happens here, inside the still box of the link */
  .svc .name-ink, .partners .title-ink {
    display: inline-block;
    padding-block: 0.14em;      /* room for descenders inside the painted box */
    margin-block: -0.14em;      /* the same amount taken back, so the row keeps its height */
    transition: color 0.3s ease;
  }
  .svc .desc { grid-column: 7 / -1; color: var(--soft); max-width: 44ch; transition: color 0.3s ease; }
  /* fallback: where type cannot be used as a mask, the name simply turns pink */
  .svc .name:hover .name-ink, .svc .name:focus-visible .name-ink,
  .partners h2.is-on .title-ink { color: var(--pink); }
  /* the description brightens with its name: the rest of the row is plain text and answers nothing itself */
  .svc li:has(.name:hover) .desc, .svc li:has(.name:focus-visible) .desc, .svc li.is-live .desc { color: var(--ink); }

  /* the name fills with pink liquid from its first letter to its last: a solid body with a rippled leading edge, and a paler wash running just ahead of it */
  @supports ((-webkit-background-clip: text) or (background-clip: text)) {
    .svc .name-ink, .partners .title-ink {
      /* Two long pink sheets, each ending in a wave on its right edge, tiled down the height of the type, over a full layer of ink.
         The pink is the brand accent #E31C79 written into the images, because an image cannot read a CSS variable. */
      background-image:
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='24' viewBox='0 0 2000 24'%3E%3Cpath fill='%23E31C79' d='M0 0H1984Q1996 6 1984 12T1984 24H0Z'/%3E%3C/svg%3E"),
        url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='2000' height='34' viewBox='0 0 2000 34'%3E%3Cpath fill='%23E31C79' fill-opacity='0.5' d='M0 0H1991Q2000 8.5 1991 17T1991 34H0Z'/%3E%3C/svg%3E"),
        linear-gradient(var(--ink), var(--ink));
      background-repeat: repeat-y, repeat-y, no-repeat;
      background-size: 2000px 24px, 2000px 34px, 100% 100%;   /* each sheet is 2000px long, longer than any name; 24px and 34px are one wave each */
      background-position-x: -2000px, -2000px, 0;              /* both sheets wait wholly off the left edge */
      background-position-y: 0, 0, 0;
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
      -webkit-text-fill-color: transparent;
      transition: background-position-x 1.5s cubic-bezier(0.4, 0, 0.2, 1);   /* unhurried: a slow start and a soft landing, the way a pour gathers and settles */
    }
    .svc .name:hover .name-ink, .svc .name:focus-visible .name-ink,
    .partners h2.is-on .title-ink {                                   /* the partners heading: for as long as its section is on screen */
      background-position-x: calc(100% + 30px), calc(100% + 30px), 0;   /* 30px past the last letter: the deepest trough of a wave sits 22px in from a sheet's end, so both run clear off the type */
      color: transparent;
      animation: slosh 1.3s linear infinite, name-glitch 0.28s steps(1, end) 1;   /* the ripple runs for as long as the name is held; the glitch fires once */
    }
  }
  /* the "+ Visualize" button: phone sizes only, under 800px, where the hover display is off.
     It opens the full-screen display, which stays until closed. Tapping the name still opens the service. */
  .svc .more {
    display: none;
    grid-column: 1 / span 6;
    grid-row: 2;                /* straight under the name */
    justify-self: start;
    align-items: center;
    gap: 9px;
    min-height: 44px;           /* a comfortable target for a thumb */
    margin-top: 6px;
    padding: 0 16px 0 13px;
    border: 1px solid var(--rule);
    background: none;
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.25s ease;
  }
  .svc .more-sign { color: var(--pink); font-size: 1.5em; line-height: 1; }   /* the plus, and the minus it becomes, sized up from the small print */
  @media (max-width: 799px) {
    .svc .more { display: inline-flex; }
    .svc .name { grid-row: 1; }
    .svc .desc { grid-row: 1 / span 2; }   /* the description keeps its column and runs beside both the name and the button */
  }

  @media (max-width: 760px) {
    .svc .name, .svc .desc, .svc .more { grid-column: 1 / -1; }
    .svc .name, .svc .desc, .svc .more { grid-row: auto; }   /* stacked: name, button, description, examples */
  }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  P R E V I E W  L A Y E R  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* A heads-up display that comes up over the whole page while a service name is held, like a second screen in front of the site.
     The whole page drops far behind it, dark and heavily blurred, and that service's pixel animation fills the screen. */
  .hud {
    --hud-inset: 18px;             /* how far the frame sits in from the edge of the screen */
    position: fixed;
    inset: 0;
    z-index: 30;                   /* above the page, the nav (5) and the progress line (9) */
    pointer-events: none;          /* it never takes a click or a hover away from the page under it */
    visibility: hidden;
  }
  .hud.is-on, .hud.is-leaving { visibility: visible; }

  /* the veil: what turns the page into a background */
  .hud-veil {
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ground) 72%, transparent);   /* dark: the page is only a glow far behind the display */
    opacity: 0;
    transition: opacity 0.3s ease;
  }
  .hud-veil::after {               /* faint scan lines, one every 4px */
    content: "";
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(to bottom, transparent 0 3px, color-mix(in srgb, var(--ink) 3%, transparent) 3px 4px);
  }
  .hud.is-on .hud-veil { opacity: 1; }
  /* while the display is up the page itself goes out of focus, evenly to every edge of the screen (a blur seen through the glass thins out at the edges) */
  body > :not(.hud) { transition: filter 0.3s ease; }
  html.hud-up body > :not(.hud) { filter: blur(28px) saturate(0.7); }   /* 28px: nothing on the page can be read, only its shapes and colour */

  /* everything drawn on the glass: the frame at the edges and the stage */
  .hud-glass { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease 0.1s; }
  .hud.is-on .hud-glass { opacity: 1; animation: hud-in 0.42s steps(1, end) 1; }
  .hud.is-leaving .hud-glass { opacity: 1; transition: none; animation: hud-out 0.24s steps(1, end) 1 forwards; }

  /* the frame: corner brackets and small print at the edges of the screen, so the layer reads as a display */
  .hud-corner { position: absolute; width: 22px; height: 22px; border: 1px solid var(--soft); }
  .hud-corner.tl { left: var(--hud-inset); top: var(--hud-inset); border-right: 0; border-bottom: 0; }
  .hud-corner.tr { right: var(--hud-inset); top: var(--hud-inset); border-left: 0; border-bottom: 0; }
  .hud-corner.bl { left: var(--hud-inset); bottom: var(--hud-inset); border-right: 0; border-top: 0; }
  .hud-corner.br { right: var(--hud-inset); bottom: var(--hud-inset); border-left: 0; border-top: 0; }
  .hud-tag { position: absolute; margin: 0; white-space: nowrap; }
  .hud-tag b { font-weight: 500; color: var(--ink); }
  .hud-tag.tl { left: 54px; top: 22px; }
  .hud-tag.tr { right: 54px; top: 22px; }
  .hud-tag.bl { left: 54px; bottom: 22px; }
  .hud-tag.br { right: 54px; bottom: 22px; }
  .hud-tag.bc { left: 50%; bottom: 22px; transform: translateX(-50%); padding-bottom: 9px; text-align: center; }
  .hud-tag.bc::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 34px; height: 3px; margin-left: -17px; background: var(--pink); }
  .hud-ruler {                     /* a row of tick marks at the top, one every 14px, with a pink centre mark */
    position: absolute;
    left: 50%;
    top: 24px;
    width: min(434px, 34vw);
    height: 8px;
    transform: translateX(-50%);
    background: repeating-linear-gradient(to right, color-mix(in srgb, var(--soft) 60%, transparent) 0 1px, transparent 1px 14px);
  }
  .hud-ruler::after { content: ""; position: absolute; left: 50%; top: -4px; width: 1px; height: 16px; background: var(--pink); }

  /* the stage: the service's pixel animation, centred and as large as the screen allows. The script sizes the canvas in whole device pixels. */
  .hud-stage { position: absolute; inset: 0; display: grid; place-items: center; }
  .hud-stage canvas { display: block; }

  /* opened by the button: it takes taps, the page under it stops scrolling, and it has its own way out and a way into the service */
  .hud.is-modal { pointer-events: auto; }
  html.hud-modal { overflow: hidden; }
  .hud-close, .hud-go { display: none; }
  .hud.is-modal .hud-close, .hud.is-modal .hud-go {
    position: absolute;
    z-index: 2;                    /* above the stage, which covers the whole screen */
    top: 14px;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;              /* a comfortable target for a thumb */
    padding: 0 14px;
    border: 1px solid var(--rule);
    background: color-mix(in srgb, var(--ground) 70%, transparent);
    color: var(--ink);
    text-decoration: none;
    cursor: pointer;
  }
  .hud.is-modal .hud-close { right: 14px; border-color: var(--pink); }
  .hud.is-modal .hud-go { left: 14px; }
  .hud.is-modal .hud-close:focus-visible, .hud.is-modal .hud-go:focus-visible { outline: 2px solid var(--pink); outline-offset: 3px; }
  .hud.is-modal .hud-tag.tl, .hud.is-modal .hud-tag.tr, .hud.is-modal .hud-tag.br, .hud.is-modal .hud-ruler,
  .hud.is-modal .hud-corner.tl, .hud.is-modal .hud-corner.tr { display: none; }   /* the two buttons take the top corners */

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  P R O D U C E D  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .made { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 24px; }
  .made h2 { grid-column: 1 / span 8; font-size: clamp(2.3rem, 6.4vw, 5.4rem); line-height: 0.98; letter-spacing: -0.045em; }
  .made .side { grid-column: 9 / -1; align-self: end; min-width: 0; }
  .made .side p { color: var(--soft); max-width: 40ch; }
  .made .side p + p { margin-top: 14px; }
  .made .kinds { margin-top: 22px; color: var(--ink); line-height: 2; text-wrap: balance; }   /* balanced, so one word is never left alone on the second line */
  /* The pink pixel does the dividing here, the same square that ends every heading. */
  .made .kind { white-space: nowrap; }               /* a word and its pixel stay together, so a line never starts with a pixel */
  .kind-px {
    display: inline-block;
    width: 0.5em;                                    /* half the height of the small type: a pixel, not a block */
    height: 0.5em;
    margin-left: 0.6em;                              /* one character of air before the pixel, the same as the space after it */
    background: var(--pink);
    vertical-align: 0.1em;                           /* lifts the square onto the middle of the capitals */
  }
  @media (max-width: 900px) { .made h2, .made .side { grid-column: 1 / -1; } }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  R E A D Y  F I L M  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  /* Behind "Now it's ready to use": five short clips of the work swipe past on a loop, out of focus and under a dark veil. */
  /* Lean on purpose: one small file with the blur and the swipes already in it, so the browser only plays it. The veil stays here so its darkness can be tuned. */
  .ready {
    position: relative;
    overflow: hidden;              /* the film is cropped to the section */
    isolation: isolate;            /* keeps the film behind this section's text and nowhere else */
    --ready-veil: 85%;             /* how much of the dark ground sits over the film */
  }
  .ready-film { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  .ready-film video { display: block; width: 100%; height: 100%; object-fit: cover; }   /* fills the section at any shape, cropping the edges */
  .ready-film::after {             /* the veil: the page's own dark, laid over the film */
    content: "";
    position: absolute;
    inset: 0;
    background: color-mix(in srgb, var(--ground) var(--ready-veil), transparent);
  }
  /* the small line keeps time: at rest every word is lit; while the film plays, only the word for the clip on screen */
  .ready.is-playing .kind { color: var(--soft); transition: color 0.2s ease; }
  .ready.is-playing .kind.is-lit { color: var(--ink); }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  W O R K  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .slot {
    position: relative;
    background-color: var(--tile);
    background-image: repeating-conic-gradient(var(--tile-2) 0% 25%, transparent 0% 50%);
    background-size: 28px 28px;     /* two 14px pixels per repeat */
    overflow: hidden;
    max-width: 100%;
  }
  .slot .mono { position: absolute; left: 14px; bottom: 12px; }
  .slot::after { content: ""; position: absolute; right: 14px; top: 14px; width: 10px; height: 10px; background: var(--pink); transition: transform 0.45s cubic-bezier(0.2, 0.8, 0.2, 1); }

  /* the logo wall: every client logo in the same off-white, one slow belt, so the pink pixel stays the only colour on the page */
  .logos {
    margin-top: clamp(56px, 8vw, 110px);
    display: flex;
    align-items: center;
    gap: 14px clamp(20px, 3vw, 40px);
    padding-block: 26px;
    border-block: 1px solid var(--rule);
    --logo-scale: 1;               /* logos are shown at their balanced size; phones shrink them with this one number */
    --logo-drift: 105s;             /* one full pass of the 25 logos: slow enough to read each name */
  }
  .logos-label { flex: none; margin: 0; }
  .logos-belt {
    flex: 1;
    min-width: 0;
    overflow: hidden;              /* the belt is far wider than the page and must not widen it */
    -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);   /* logos fade in and out at the ends instead of being cut */
    mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent);
  }
  .logos-track {
    display: flex;
    align-items: center;
    width: max-content;
    margin: 0;
    padding: 0;
    list-style: none;
    animation: logos-drift var(--logo-drift) linear infinite;
  }
  .logos-track li { flex: none; padding-inline: clamp(18px, 2.6vw, 36px); }   /* spacing is padding, not gap, so the two runs are exactly equal and the loop meets itself */
  .logos-track img { display: block; width: calc(var(--w) * var(--logo-scale)); height: auto; max-width: none; opacity: 0.72; transition: opacity 0.3s ease; }   /* a little dimmed at rest, full strength under the pointer */
  .logos-belt:not(.is-grabbable):hover .logos-track { animation-play-state: paused; }   /* the belt holds still while someone is looking closely; once the script runs, it does this itself */
  /* with the script running the belt can be grabbed: held to stop it, dragged to pull it either way, flicked to send it coasting */
  .logos-belt.is-grabbable { cursor: grab; touch-action: pan-y; -webkit-user-select: none; user-select: none; }   /* a finger moving up and down still scrolls the page; sideways belongs to the belt */
  .logos-belt.is-grabbing { cursor: grabbing; }
  .logos-belt.is-grabbable img { -webkit-user-drag: none; pointer-events: none; }  /* the browser's own image dragging would fight the pull */
  .logos-track li:hover img { opacity: 1; }
  .logos-track a { display: block; cursor: pointer; }                           /* a logo with a known website is a link to it, opened in a new tab */
  .logos-track a:focus-visible img { opacity: 1; }
  @media (max-width: 620px) {
    .logos { flex-direction: column; align-items: flex-start; --logo-scale: 0.8; --logo-drift: 89s; }   /* label above the belt; logos a fifth smaller */
    .logos-belt { width: 100%; }
  }
  /* with motion turned off the belt becomes a still wall: one run of logos, wrapped onto as many rows as it needs */
  @media (prefers-reduced-motion: reduce) {
    .logos-belt { -webkit-mask-image: none; mask-image: none; }
    .logos-track { width: auto; flex-wrap: wrap; row-gap: 22px; }
    .logos-track li[aria-hidden="true"] { display: none; }
  }
  /* the gallery: real work on old tubes. Every tile sits in black and white under still scan lines (the rolling band was removed, 9 Oct 2026: it read as fake).
     Reach for one and it shudders gently into colour. No captions: the work speaks. */
  .gallery { columns: 4 200px; column-gap: 14px; }   /* straight under the section heading, which already leaves the gap */
  @media (max-width: 620px) { .gallery { columns: 2; column-gap: 10px; } }   /* two across on a phone: one column made the gallery nearly five screens tall ahead of everything else */
  .shot {
    position: relative;
    display: block;
    break-inside: avoid;
    margin-bottom: 14px;
    aspect-ratio: var(--shape, 4 / 3);          /* each piece is cropped to one of a few shapes, so the wall stays tidy */
    overflow: hidden;
    background: var(--tile);
  }
  @media (max-width: 620px) { .shot { margin-bottom: 10px; } }
  .shot img, .shot-film {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: var(--focus, 50% 50%);     /* where the crop holds on to the piece */
    filter: grayscale(1) contrast(1.08) brightness(0.74);   /* at rest: no colour, a touch more contrast, dimmed to sit with the page */
    transition: filter 0.5s ease;
    animation: shot-out 0.16s steps(1, end) 1;  /* a small twitch back to grey whenever the tile lets go */
  }
  /* scan lines: one dark line every third pixel, like the face of a tube */
  .shot::before, .about .portrait::before {
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;
    background: repeating-linear-gradient(to bottom, transparent 0 2px, rgba(0, 0, 0, 0.3) 2px 3px);
    opacity: 0.55;
    transition: opacity 0.4s ease;
  }
  /* a tile coming on: it cuts into colour and the lines thin out, as if the set had found its signal.
     Two things turn a tile on. Scrolling: the script marks the tiles crossing the middle of the screen, so colour travels through the wall as the page moves.
     And a pointer resting on a tile, where there is one. */
  .shot.is-on img, .shot.is-on .shot-film { filter: none; animation: shot-in 0.24s steps(1, end) 1; }
  .shot.is-on::before { opacity: 0.22; }
  @media (hover: hover) and (pointer: fine) {
    .shot:hover img, .shot:hover .shot-film { filter: none; animation: shot-in 0.24s steps(1, end) 1; }
    .shot:hover::before { opacity: 0.22; }
  }
  /* a tile is a button: press it and the piece opens large */
  button.shot {
    width: 100%;
    padding: 0;
    border: 0;
    font: inherit;
    color: inherit;
    cursor: zoom-in;
    -webkit-appearance: none;
    appearance: none;
  }
  .shot:focus-visible { outline-offset: 2px; }                                   /* the pink ring sits just off the picture */
  .shot:focus-visible img, .shot:focus-visible .shot-film { filter: none; }      /* reached by keyboard, a tile shows its colour too */

  /* the large view: one piece, full colour, no lines and no static. Closed by its button, the Escape key, or a press on the dark around it. */
  .lightbox {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    max-width: none;               /* a dialog is boxed in by default; this one is the whole screen */
    max-height: none;
    margin: 0;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--ink);
    overflow: hidden;
    touch-action: pinch-zoom;      /* a finger can still pinch in on the piece, but the page behind does not scroll */
  }
  .lightbox[open] { display: grid; place-items: center; }
  .lightbox::backdrop { background: rgba(14, 16, 19, 0.95); }                    /* the page ground, almost solid */
  .lightbox-stage img, .lightbox-stage video {
    display: block;
    max-width: 92vw;               /* a little air either side */
    max-height: 76vh;              /* and room underneath for the arrows */
    max-height: 76dvh;
    width: auto;
    height: auto;
    animation: shot-in 0.24s steps(1, end) 1;   /* the same cut the tiles make */
  }
  .lightbox-stage video { height: min(76dvh, 960px); }                           /* the reel is a small file; 960px is one and a half times its size, the most it can take before it goes soft */
  .lightbox-bar {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 18px;
    padding: 16px;
  }
  .lightbox-count { min-width: 8ch; text-align: center; color: var(--soft); font-variant-numeric: tabular-nums; }
  .lightbox-btn {
    min-width: 48px;               /* big enough for a thumb */
    min-height: 48px;
    padding: 0 16px;
    border: 1px solid var(--rule);
    background: rgba(14, 16, 19, 0.7);
    color: var(--ink);
    cursor: pointer;
    transition: border-color 0.3s ease;
  }
  .lightbox-btn:hover { border-color: var(--pink); }
  .lightbox-close { position: absolute; top: 16px; right: 16px; }
  html.is-viewing { overflow: hidden; }                                          /* while a piece is open, the page behind holds still */

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  V O I C E S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .voices { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(28px, 4vw, 56px); }
  @media (max-width: 860px) { .voices { grid-template-columns: minmax(0, 1fr); } }
  .voices figure { margin: 0; min-width: 0; padding-top: 22px; border-top: 1px solid var(--rule); position: relative; }
  .voices figure::before { content: ""; position: absolute; top: -5px; left: 0; width: 9px; height: 9px; background: var(--pink); }
  .voices blockquote { margin: 0; font-size: 1.1rem; line-height: 1.5; letter-spacing: -0.01em; }
  .voices figcaption { margin-top: 18px; }
  /* the lead voice: the newest and longest, given the full row and a larger size so it reads as one statement, not a crowded column */
  .voices .is-lead { grid-column: 1 / -1; }
  .voices .is-lead blockquote { font-size: clamp(1.25rem, 2.1vw, 1.65rem); line-height: 1.42; letter-spacing: -0.015em; max-width: 62ch; text-wrap: pretty; }
  .voices figcaption b { display: block; font-family: var(--display); font-size: 0.95rem; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--ink); }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  A B O U T  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .about { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: clamp(24px, 4vw, 56px); align-items: start; }
  .about .slot { grid-column: 1 / span 4; aspect-ratio: 4 / 5; }
  .about .text { grid-column: 6 / -1; min-width: 0; }
  .about .big { font-size: clamp(1.4rem, 2.9vw, 2.3rem); line-height: 1.22; letter-spacing: -0.03em; font-weight: 500; max-width: 26ch; }
  /* Where the agency sits, said quietly under the statement, with the pixel as its marker. */
  .about .place { margin-top: 16px; color: var(--ink); }      /* 16px keeps it attached to the statement above, not the paragraph below */
  .about .place .kind-px { margin-left: 0; margin-right: 0.8em; }   /* the pixel leads here, so its air moves to the right side */
  .about .text p.body { margin-top: 22px; color: var(--soft); max-width: 56ch; }
  .facts { margin-top: clamp(28px, 4vw, 48px); display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; padding-top: 18px; border-top: 1px solid var(--rule); }
  .facts b { display: block; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; letter-spacing: -0.035em; line-height: 1.1; font-variant-numeric: tabular-nums; }
  .text-link { display: inline-block; margin-top: 26px; font-weight: 600; text-decoration: none; background: linear-gradient(var(--pink), var(--pink)) left bottom / 100% 2px no-repeat; padding-bottom: 5px; transition: background-size 0.4s cubic-bezier(0.2, 0.8, 0.2, 1); }
  .text-link:hover { background-size: 28px 2px; }
  /* the portrait: the gallery's treatment. Dimmed under the same scan lines at rest;
     under the pointer, or as it scrolls through the middle of the screen, it cuts to full strength with the same glitch, and the lines thin out. */
  .about .portrait { grid-column: 1 / span 4; position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; background: var(--tile); }
  .about .portrait img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    filter: grayscale(1) contrast(1.08) brightness(0.74);   /* the tiles' resting look, exactly */
    transition: filter 0.5s ease;
    animation: shot-out 0.16s steps(1, end) 1;
  }
  .about .portrait::after { content: ""; position: absolute; z-index: 2; right: 14px; top: 14px; width: 10px; height: 10px; background: var(--pink); }   /* the same 10px square every slot carries, above the lines */
  .about .portrait.is-on img { filter: none; animation: shot-in 0.24s steps(1, end) 1; }
  .about .portrait.is-on::before { opacity: 0.22; }
  @media (hover: hover) and (pointer: fine) {
    .about .portrait:hover img { filter: none; animation: shot-in 0.24s steps(1, end) 1; }
    .about .portrait:hover::before { opacity: 0.22; }
  }
  @media (max-width: 860px) { .about .slot, .about .portrait { grid-column: 1 / span 7; } .about .text { grid-column: 1 / -1; } }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  P A R T N E R S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .partners { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 20px 24px; align-items: end; }
  .partners h2 { grid-column: 1 / span 7; font-size: var(--step-h2); line-height: 1.04; letter-spacing: -0.035em; max-width: 16ch; }
  .partners .side { grid-column: 9 / -1; min-width: 0; }
  /* the firework show: "Agencies, congratulations, you found your partner." It plays behind the heading for as long as the heading is pouring pink,
     which is while the partners section is on screen. Six bursts of pixel sparks in the page's own pink and ink, each on its own beat. */
  .partners h2 { position: relative; isolation: isolate; }                       /* the show stays behind these letters and nothing else */
  .partners .fireworks { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
  @media (max-width: 620px) { .partners .fireworks { transform: scale(0.65); } }      /* on a phone the bursts are a third smaller, so they stay around the heading and off the edge of the screen */
  .partners .fireworks i {
    position: absolute;
    left: var(--x);
    top: var(--y);
    width: 4px;                    /* one pixel of the brand's grid: the rocket, and the size of every spark */
    height: 4px;
  }
  /* the burst point holds two pieces: the rocket, one pink pixel, and the sparks it carries, which stay hidden until it reaches the top */
  .partners .fireworks i::after, .partners .fireworks i::before {
    content: "";
    position: absolute;
    inset: 0;
    opacity: 0;
  }
  .partners .fireworks i::after { background: var(--pink); }
  .partners .fireworks i::before { transform: scale(0.05); }
  .partners .fireworks .spark-a::before { box-shadow: 107px -6px 0 0 #ECEEF1, 86px 32px 0 0 #ECEEF1, 94px 45px 0 0 #E31C79, 69px 51px 0 0 #E31C79, 43px 69px 0 0 #E31C79, 26px 91px 0 0 #99A0AC, 0px 94px 0 0 #99A0AC, -2px 95px 0 0 #99A0AC, -28px 78px 0 0 #99A0AC, -48px 83px 0 0 #ECEEF1, -54px 59px 0 0 #ECEEF1, -86px 34px 0 0 #E31C79, -95px 28px 0 0 #ECEEF1, -102px -9px 0 0 #E31C79, -84px -17px 0 0 #ECEEF1, -91px -54px 0 0 #E31C79, -74px -59px 0 0 #E31C79, -52px -60px 0 0 #E31C79, -29px -91px 0 0 #E31C79, -7px -107px 0 0 #E31C79, 11px -106px 0 0 #E31C79, 35px -94px 0 0 #E31C79, 64px -84px 0 0 #E31C79, 65px -56px 0 0 #99A0AC, 88px -43px 0 0 #ECEEF1, 85px -20px 0 0 #E31C79; }
  .partners .fireworks .spark-b::before { box-shadow: 61px 1px 0 0 #ECEEF1, 59px 20px 0 0 #ECEEF1, 62px 47px 0 0 #E31C79, 35px 58px 0 0 #E31C79, 30px 67px 0 0 #E31C79, 7px 67px 0 0 #E31C79, -23px 74px 0 0 #ECEEF1, -42px 45px 0 0 #E31C79, -46px 37px 0 0 #E31C79, -70px 19px 0 0 #ECEEF1, -67px 0px 0 0 #E31C79, -62px -13px 0 0 #E31C79, -49px -43px 0 0 #ECEEF1, -46px -60px 0 0 #E31C79, -19px -58px 0 0 #E31C79, 3px -67px 0 0 #E31C79, 13px -66px 0 0 #ECEEF1, 40px -49px 0 0 #E31C79, 56px -43px 0 0 #E31C79, 62px -27px 0 0 #E31C79; }
  .partners .fireworks .spark-c::before { box-shadow: 119px -4px 0 0 #E31C79, 135px 22px 0 0 #E31C79, 102px 30px 0 0 #E31C79, 116px 77px 0 0 #E31C79, 86px 91px 0 0 #E31C79, 65px 85px 0 0 #E31C79, 50px 98px 0 0 #E31C79, 13px 124px 0 0 #E31C79, -2px 121px 0 0 #E31C79, -28px 108px 0 0 #E31C79, -49px 94px 0 0 #ECEEF1, -62px 107px 0 0 #ECEEF1, -73px 90px 0 0 #99A0AC, -102px 83px 0 0 #ECEEF1, -103px 49px 0 0 #E31C79, -103px 14px 0 0 #E31C79, -137px -16px 0 0 #ECEEF1, -136px -25px 0 0 #ECEEF1, -127px -51px 0 0 #E31C79, -89px -49px 0 0 #ECEEF1, -80px -65px 0 0 #E31C79, -63px -123px 0 0 #ECEEF1, -61px -121px 0 0 #ECEEF1, -27px -130px 0 0 #E31C79, 8px -126px 0 0 #ECEEF1, 20px -116px 0 0 #ECEEF1, 36px -122px 0 0 #E31C79, 75px -112px 0 0 #E31C79, 88px -104px 0 0 #E31C79, 93px -63px 0 0 #E31C79, 109px -35px 0 0 #E31C79, 107px -19px 0 0 #99A0AC; }
  .partners h2.is-on .fireworks i::after {
    animation: firework-rise 3.4s var(--wait) infinite;    /* one beat: about a second and a half climbing, then the burst hangs and falls */
  }
  .partners h2.is-on .fireworks i::before {
    animation: firework-burst 3.4s var(--wait) infinite;   /* the same beat, so the sparks open the moment the rocket stops */
  }

  .partners .side p { color: var(--soft); margin-bottom: 22px; max-width: 40ch; }
  @media (max-width: 860px) { .partners h2, .partners .side { grid-column: 1 / -1; } }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  C L O S E  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  .close h2 { font-size: var(--step-hero); line-height: 0.98; letter-spacing: -0.045em; max-width: 12ch; }
  .close .reach { margin-top: clamp(28px, 4vw, 48px); display: flex; flex-wrap: wrap; gap: 10px 40px; color: var(--soft); user-select: all; }
  footer { border-top: 1px solid var(--rule); }
  footer .wrap { display: flex; flex-wrap: wrap; gap: 14px 32px; justify-content: space-between; align-items: center; padding-block: 28px; }
  footer nav { display: flex; flex-wrap: wrap; gap: 8px 22px; }
  footer nav a { text-decoration: none; }
  footer nav a:hover { color: var(--ink); }

  /* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  M O T I O N  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
  @keyframes rise { from { transform: translateY(108%); } to { transform: translateY(0); } }
  @keyframes blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } }
  @keyframes settle { from { opacity: 0.25; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
  @keyframes grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
  /* the two waves drift in opposite directions, one full wave each per cycle, so the leading edge ripples as it travels */
  @keyframes slosh { to { background-position-y: 24px, -34px, 0; } }
  /* glitches: a few hard cuts, slices of the thing shown out of place, then whole. Stepped, so nothing eases. */
  @keyframes name-glitch {
    0% { clip-path: inset(0 0 62% 0); transform: translateX(-6px); }
    18% { clip-path: inset(48% 0 12% 0); transform: translateX(7px); }
    36% { clip-path: inset(18% 0 46% 0); transform: translateX(-3px) skewX(-8deg); }
    54% { clip-path: inset(70% 0 0 0); transform: translateX(5px); }
    72% { clip-path: inset(0 0 0 0); transform: translateX(-2px); }
    100% { clip-path: inset(0 0 0 0); transform: none; }
  }
  /* the display arriving and leaving: hard cuts, slices of it out of place, a flicker, then whole (or gone) */
  @keyframes hud-in {
    0% { opacity: 0; }
    12% { opacity: 1; clip-path: inset(8% 0 58% 0); transform: translateX(-14px); }
    26% { opacity: 0.35; clip-path: inset(52% 0 14% 0); transform: translateX(18px); }
    40% { opacity: 1; clip-path: inset(22% 0 40% 0); transform: translateX(-6px) skewX(-6deg); }
    54% { opacity: 0.6; clip-path: inset(66% 0 0 0); transform: translateX(10px); }
    68% { opacity: 1; clip-path: inset(0 0 0 0); transform: translateX(-3px); }
    82% { opacity: 0.8; clip-path: inset(0 0 0 0); transform: none; }
    100% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
  }
  @keyframes hud-out {
    0% { opacity: 1; clip-path: inset(0 0 0 0); transform: none; }
    20% { opacity: 0.6; clip-path: inset(30% 0 34% 0); transform: translateX(12px); }
    40% { opacity: 1; clip-path: inset(0 0 66% 0); transform: translateX(-16px); }
    60% { opacity: 0.4; clip-path: inset(58% 0 8% 0); transform: translateX(8px) skewX(6deg); }
    80% { opacity: 0.8; clip-path: inset(46% 0 46% 0); transform: translateX(-4px); }
    100% { opacity: 0; clip-path: inset(50% 0 50% 0); transform: none; }
  }
  @keyframes panel-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
  /* the track holds the logos twice, so sliding it by half its width lands exactly where it began */
  @keyframes logos-drift { to { transform: translateX(-50%); } }
  /* a tile coming into colour: a small shudder, never more than 3px, while the colour fades in underneath. Nothing disappears, so it reads as intended, not broken.
     (Softened 10 Oct 2026, Alexander: the old cut threw slices of the picture up to 11px sideways and felt like the site was failing.) */
  @keyframes shot-in {
    0% { transform: translateX(-3px); }
    33% { transform: translateX(2px); }
    66% { transform: translateX(-1px); }
    100% { transform: none; }
  }
  /* and letting go: one quieter twitch on the way back to grey */
  @keyframes shot-out {
    0% { transform: translateX(2px); }
    50% { transform: translateX(-1px); }
    100% { transform: none; }
  }
  /* the rocket: one pixel climbing slowly from below the heading, easing off as it rises, then gone the instant it bursts */
  @keyframes firework-rise {
    0% { opacity: 1; transform: translateY(180px); animation-timing-function: cubic-bezier(0.25, 0.6, 0.35, 1); }   /* starts 180px below its burst point */
    44% { opacity: 1; transform: translateY(0); }
    45%, 100% { opacity: 0; transform: translateY(0); }
  }
  /* the burst: nothing while the rocket climbs, then the sparks fly out from the pixel, hang a moment, and fall a little as they fade */
  @keyframes firework-burst {
    0%, 44% { opacity: 0; transform: scale(0.05); }
    45% { opacity: 1; transform: scale(0.05); animation-timing-function: cubic-bezier(0.12, 0.75, 0.25, 1); }
    80% { opacity: 1; }
    100% { opacity: 0; transform: translateY(26px) scale(1); }
  }
  /* scroll-linked motion only where the browser supports it; everything is fully visible without it */
  @supports (animation-timeline: view()) {
    @media (prefers-reduced-motion: no-preference) {
      .reveal { animation: settle linear both; animation-timeline: view(); animation-range: entry 0% entry 42%; }
      .progress { position: fixed; left: 0; top: 0; z-index: 9; width: 100%; height: 2px; background: var(--pink); transform-origin: left center; animation: grow linear both; animation-timeline: scroll(root); }
    }
  }
  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after { animation: none !important; transition: none !important; }
  }

/* ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓  W O R D P R E S S  ▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓▓ */
/* The few places WordPress itself needs a word: the admin bar, the block wrapper, and screen-reader text. */
.wp-site-blocks { padding: 0; }
.wp-site-blocks > * { margin-block: 0; }
.admin-bar .nav { top: calc(env(safe-area-inset-top, 0px) + 32px); }                         /* clears the admin bar, 32px tall on a desktop */
@media (max-width: 782px) { .admin-bar .nav { top: calc(env(safe-area-inset-top, 0px) + 46px); } }   /* 46px tall on a tablet */
@media (max-width: 600px) { .admin-bar .nav { top: env(safe-area-inset-top, 0px); } }                /* on a phone the admin bar scrolls away */
.screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; }
.shot img { width: 100%; height: 100%; }                                                    /* WordPress adds width and height to every image; the tile decides its size */