/* Base */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-s));
  scroll-padding-bottom: calc(var(--dock-height) + var(--dock-offset) + var(--space-s));
}

body {
  margin: 0;
  background-color: var(--color-paper);
  color: var(--color-ink);
  font-family: var(--font-sans);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: var(--leading-body);
  font-kerning: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* Selected text in the brand blue; the lighter blue on dark surfaces */

::selection {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.section--dark ::selection,
.reel ::selection {
  background-color: var(--color-blue-light);
  color: var(--color-ink);
}

h1,
h2,
h3 {
  margin: 0;
  font-weight: var(--weight-light);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
  overflow-wrap: break-word;
}

h1,
h2 {
  font-family: var(--font-display);
  font-stretch: var(--stretch-display);
}

h2 {
  font-size: var(--step-3);
  line-height: var(--leading-display);
  margin-bottom: var(--space-l);
}

h3 {
  font-size: var(--step-2);
  font-weight: var(--weight-regular);
  letter-spacing: -0.015em;
}

p {
  margin: 0 0 var(--space-s);
  text-wrap: pretty;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.25em;
}

ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

button {
  font: inherit;
}

.weight-thin {
  font-weight: var(--weight-thin);
}

.weight-regular {
  font-weight: var(--weight-regular);
}

/* Keyboard focus only. Required for accessibility; never shown on mouse click. */

:focus {
  outline: none;
}

:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--focus);
}

[tabindex="-1"]:focus-visible {
  box-shadow: none;
}

[hidden] {
  display: none !important;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* Skip link */

.skip-link {
  position: absolute;
  top: var(--space-s);
  left: var(--space-s);
  z-index: 100;
  padding: var(--space-xs) var(--space-s);
  border-radius: var(--radius-pill);
  background-color: var(--color-ink);
  color: var(--color-paper);
  transform: translateY(-200%);
}

.skip-link:focus {
  transform: none;
}

/* Layout */

.container {
  width: 100%;
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

.section {
  position: relative;
  /* One spacing for every section, so the gap between any two is the same */
  padding-block: var(--section-space);
  background-color: var(--surface);
  color: var(--text);
  overflow: clip;
}

/* Squared paper behind the policies, centred like the hero's grid and fading
   out at the top and bottom of the section */

.section:has(> .paper) {
  isolation: isolate;
}

.paper {
  --paper-cell: 36px;
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--paper-line, var(--grid-line)) 1px, transparent 1px),
    linear-gradient(to bottom, var(--paper-line, var(--grid-line)) 1px, transparent 1px);
  background-size: var(--paper-cell) var(--paper-cell);
  background-position: calc(50% + var(--paper-cell) / 2) 0;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0, #000 22%, #000 78%, transparent 100%);
}

@media print {
  .paper {
    display: none;
  }
}

.eyebrow {
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: var(--space-m);
}

/* Buttons and links */

.button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  padding: 0.6rem 1.4rem;
  border-radius: var(--radius-pill);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--duration-s) var(--ease-out);
}

/* Calls to action use the full brand blue everywhere, on light and dark
   surfaces and in both themes, always with white text (5.9:1) */
.button--primary {
  background-color: var(--color-blue);
  color: #FFFFFF;
}

.button--primary:hover {
  background-color: var(--color-blue-press);
}

.button--primary:active {
  background-color: var(--color-blue-deep);
}

.button--large {
  font-size: var(--step-1);
  font-weight: var(--weight-regular);
  padding: 1.1rem 2.25rem;
  white-space: normal;
  overflow-wrap: anywhere;
}

.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  font-weight: var(--weight-medium);
  color: var(--accent);
  text-decoration: none;
}

.link-arrow::after {
  content: "→";
  transition: transform var(--duration-s) var(--ease-out);
}

.link-arrow:hover::after {
  transform: translateX(5px);
}

/* Availability banner above the header (js/ticker.js). A still row without
   JavaScript or with reduced motion; otherwise it slides in a loop, with a
   pause button. Light brand blue with ink text, so it stands apart from the
   blue header below. It scrolls away with the page; the header stays. */

.ticker {
  position: relative;
  z-index: 51;
  display: flex;
  align-items: center;
  height: 2.25rem;
  background-color: var(--color-blue-light);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
  letter-spacing: 0.01em;
  overflow: hidden;
}

.ticker__window {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
}

.ticker__track {
  display: flex;
  width: max-content;
}

.ticker__list {
  display: flex;
  flex: none;
  margin: 0;
  padding: 0 0 0 var(--gutter);
  list-style: none;
  white-space: nowrap;
}

.ticker__item {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
}

.ticker__item:not(:last-child)::after,
.ticker.is-moving .ticker__item::after {
  content: "";
  width: 0.3rem;
  height: 0.3rem;
  margin-inline: 1.5rem;
  border-radius: 50%;
  background-color: rgb(17 18 22 / 0.45);
}

/* While sliding, the lists drop their start padding so the gap between the
   last line and the repeat matches every other gap, and the two halves of the
   loop stay exactly the same width */
.ticker.is-moving .ticker__list {
  padding-left: 0;
}

.ticker.is-moving .ticker__track {
  animation: ticker-slide 38s linear infinite;
}

.ticker.is-paused .ticker__track,
.ticker.is-moving:hover .ticker__track {
  animation-play-state: paused;
}

@keyframes ticker-slide {
  to { transform: translateX(-50%); }
}

.ticker__toggle {
  --focus: var(--color-ink);
  flex: none;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 100%;
  padding: 0;
  border: 0;
  background-color: var(--color-blue-light);
  color: var(--color-ink);
  cursor: pointer;
  box-shadow: -1rem 0 1rem var(--color-blue-light);
}

.ticker__toggle[hidden] {
  display: none;
}

.ticker__toggle svg {
  width: 0.75rem;
  height: 0.75rem;
}

.ticker__play-icon,
.ticker.is-paused .ticker__pause-icon {
  display: none;
}

.ticker.is-paused .ticker__play-icon {
  display: block;
}

.ticker__toggle:focus-visible {
  box-shadow: inset 0 0 0 2px var(--focus), -1rem 0 1rem var(--color-blue-light);
}

@media print {
  .ticker {
    display: none;
  }
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: var(--header-height);
  padding-inline: max(var(--gutter), calc((100% - var(--container)) / 2 + var(--gutter)));
  --focus: #FFFFFF;
  --surface: var(--color-blue);
  background-color: var(--color-blue);
}

/* Logo: Esam's mark beside the name in capitals, close enough to read as one.
   The mark is a little taller than the capitals and centred on them (half its
   extra height below the baseline); the letters are bold enough to sit with
   the mark's bars. */
.site-header__logo {
  display: inline-flex;
  align-items: baseline;
  gap: 0.25em;
  font-family: var(--font-display);
  font-size: var(--step-1);
  font-stretch: var(--stretch-display);
  font-weight: 550;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #FFFFFF;
  text-decoration: none;
}

.site-header__mark {
  display: block;
  width: auto;
  height: 0.95em;
  margin-bottom: -0.1375em;
}

/* The header is brand blue in both themes, so its button turns white */
.site-header .button--primary {
  background-color: #FFFFFF;
  color: var(--color-blue);
}

.site-header .button--primary:hover {
  background-color: var(--color-paper-low);
}

.site-header .button--primary:active {
  background-color: var(--color-haze);
}

/* Bottom-pinned section menu: frosted glass */

.dock {
  position: fixed;
  left: 0;
  right: 0;
  bottom: var(--dock-offset);
  z-index: 50;
  width: fit-content;
  max-width: calc(100% - var(--space-s) * 2);
  margin-inline: auto;
}

.dock__list {
  display: flex;
  gap: var(--space-2xs);
  min-height: var(--dock-height);
  align-items: center;
  padding: var(--space-xs);
  border-radius: var(--radius-pill);
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
}

/* While the work reel is centred, the menu steps aside for mouse users
   (js/reel-stage.js). It comes back on mouse movement, hover or keyboard focus. */
.dock__list {
  transition:
    opacity var(--duration-m) var(--ease-out),
    translate var(--duration-m) var(--ease-out);
}

.dock-away .dock:not(:focus-within) .dock__list,
.dock-game .dock:not(:focus-within) .dock__list {
  opacity: 0;
  translate: 0 calc(100% + var(--dock-offset));
  pointer-events: none;
}

.dock__link {
  --surface: var(--color-paper);
  --focus: var(--color-blue);
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: var(--radius-pill);
  color: var(--color-ink);
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  text-decoration: none;
  white-space: nowrap;
  transition:
    background-color var(--duration-s) var(--ease-out),
    color var(--duration-s) var(--ease-out);
}

.dock__link:hover {
  background-color: var(--color-blue-tint);
}

.dock__link[aria-current="true"] {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.dock__link:active {
  background-color: var(--color-blue-press);
  color: var(--color-paper);
}

/* Reading bar: a blue copy of the menu, uncovered from the left as the page
   is read (js/dock-progress.js), with a rounded, watery front edge. White
   words on the blue measure 5.9:1; the faint shine at the top keeps at
   least 4.6:1, and the deeper blue at the front edge 8:1. */

.dock__list {
  position: relative;
}

/* A faint rim, so the menu's rounded ends show on any background and the
   blue is always seen starting inside them */
.dock__list {
  box-shadow: var(--glass-shadow), 0 0 0 1px rgb(17 18 22 / 0.08);
}

.dock__fill {
  position: absolute;
  inset: 0;
  display: flex;
  gap: inherit;
  align-items: center;
  padding: inherit;
  border-radius: var(--radius-pill);
  isolation: isolate;
  overflow: hidden;
  background:
    linear-gradient(to bottom, rgb(255 255 255 / 0.14), rgb(255 255 255 / 0) 40%),
    var(--color-blue);
  pointer-events: none;
  clip-path: inset(0 100% 0 0);
}

/* The front of the water is a little deeper in colour, like a drop's edge */
.dock__fill::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--fill-front, 0px) - 3rem);
  z-index: -1;
  width: 3rem;
  background: linear-gradient(to right, rgb(31 58 214 / 0), var(--color-blue-press));
}

.dock__fill-link {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border-radius: var(--radius-pill);
  color: #FFFFFF;
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  white-space: nowrap;
  transition:
    background-color var(--duration-s) var(--ease-out),
    color var(--duration-s) var(--ease-out);
}

.dock__fill-link.is-hovered {
  background-color: rgb(255 255 255 / 0.16);
}

/* The current section stays a pill on the blue too: a deeper blue with a
   light rim, so it carries on smoothly from the real pill underneath.
   White on this blue measures 8:1. */
.dock__fill-link.is-current {
  background-color: var(--color-blue-press);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
}

.dock__fill-link.is-focused {
  box-shadow: 0 0 0 3px var(--color-blue), 0 0 0 6px #FFFFFF;
}

/* The outline traced round the menu before the filling starts */
.dock__trace {
  position: absolute;
  inset: 0;
  z-index: 2;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.dock__trace path {
  fill: none;
  stroke: var(--color-blue);
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-dasharray: 1;
  stroke-dashoffset: 1;
}

.dock__trace.is-empty {
  visibility: hidden;
}

@media (forced-colors: active) {
  .dock__fill,
  .dock__trace {
    display: none;
  }
}

@media (max-width: 26rem) {
  .site-header__logo {
    font-size: var(--step-0);
  }
}

/* Phones: the menu spans the screen and the five links share it, so none gets squeezed */
@media (max-width: 30rem) {
  .dock {
    width: auto;
  }

  .dock__list {
    gap: 0;
    padding: var(--space-2xs);
  }

  .dock__list > li,
  .dock__fill-link {
    flex: 1 1 auto;
  }

  .dock__link,
  .dock__fill-link {
    justify-content: center;
    padding: 0 0.5rem;
  }
}

/* Five menu links on the narrowest phones */
@media (max-width: 22.4rem) {
  .dock__link,
  .dock__fill-link {
    padding: 0 0.45rem;
    font-size: 0.8125rem;
  }
}

/* Back to top: bottom right, beside the menu on wide screens and just above it on phones */

.to-top {
  --surface: var(--color-paper);
  position: fixed;
  right: var(--space-s);
  bottom: calc(var(--dock-offset) + (var(--dock-height) - 3rem) / 2);
  z-index: 50;
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background-color: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  box-shadow: var(--glass-shadow);
  color: var(--color-ink);
  transition:
    opacity var(--duration-m) var(--ease-out),
    translate var(--duration-m) var(--ease-out),
    background-color var(--duration-s) var(--ease-out);
}

.to-top[hidden] {
  display: none;
}

.to-top svg {
  width: 1.25rem;
  height: 1.25rem;
}

.to-top:hover {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.to-top:active {
  background-color: var(--color-blue-press);
  color: var(--color-paper);
}

/* Steps aside with the menu while the work reel is centred or the plan game
   fills the bottom of the screen */
.dock-away .to-top:not(:focus-visible),
.dock-game .to-top:not(:focus-visible) {
  opacity: 0;
  translate: 0 calc(100% + var(--dock-offset));
  pointer-events: none;
}

@media (max-width: 48rem) {
  .to-top {
    bottom: calc(var(--dock-offset) + var(--dock-height) + var(--space-xs));
  }
}

/* Short viewports and high zoom: the header scrolls away to give content room */

@media (max-height: 30rem) {
  .site-header {
    position: static;
  }

  html {
    scroll-padding-top: var(--space-s);
  }
}

/* Values: four coloured squares between the work reel and About, each with
   one corner rounded much further than the others, so every card is a
   slightly different shape. On screens with a mouse the cards sit in a row
   and the one under the pointer (or with keyboard focus) widens to show its
   line of text; touch screens show every card open. The text is always in
   the page for screen readers. */

.values__title {
  margin-bottom: var(--space-m);
  color: var(--text-muted);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-stretch: normal;
  font-weight: var(--weight-regular);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.values__list {
  display: grid;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
}

.value {
  --value-bg: var(--color-blue);
  --value-ink: var(--color-paper);
  --value-focus: var(--color-ink);
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 12rem;
  padding: var(--space-m);
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: var(--value-bg);
  color: var(--value-ink);
  outline: none;
}

.value:focus-visible {
  box-shadow: 0 0 0 3px var(--surface), 0 0 0 6px var(--value-focus);
}

/* One odd corner per card */
.value--clear { border-top-left-radius: 7rem; }
.value--inclusive { border-top-right-radius: 7rem; }
.value--honest { border-bottom-left-radius: 7rem; }
.value--crafted { border-bottom-right-radius: 7rem; }

.value--inclusive { --value-bg: var(--color-haze); --value-ink: var(--color-ink); }
.value--honest { --value-bg: var(--color-ink); --value-ink: var(--color-paper); --value-focus: var(--color-blue); }
.value--crafted { --value-bg: var(--color-blue-light); --value-ink: var(--color-ink); }

.value__number {
  font-size: var(--step--1);
  letter-spacing: 0.08em;
}

.value--clear .value__number {
  align-self: flex-end;
}

/* Cards with a big lower corner keep their words clear of the curve */
.value--honest {
  align-items: flex-end;
  text-align: right;
}

.value--honest .value__number {
  align-self: flex-start;
}

.value--honest .value__text {
  padding-left: 3rem;
}

.value--crafted .value__text {
  padding-right: 3rem;
}

.value__word {
  margin: auto 0 0;
  padding-top: var(--space-s);
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 1.1rem + 1vw, 1.85rem);
  white-space: nowrap;
  font-stretch: var(--stretch-display);
  font-weight: var(--weight-medium);
  line-height: 1;
  letter-spacing: -0.01em;
}

.value__more {
  display: grid;
  grid-template-rows: 1fr;
}

.value__text {
  max-width: 24rem;
  min-height: 0;
  margin: 0;
  padding-top: var(--space-xs);
  overflow: hidden;
  font-size: var(--step-0);
  line-height: 1.45;
}

@media (min-width: 40rem) and (max-width: 63.99rem) {
  .values__list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* Mouse screens: a row of squares; the active card widens and its text fades in */
@media (min-width: 64rem) and (hover: hover) and (pointer: fine) {
  .values__list {
    display: flex;
    height: clamp(17.5rem, 22vw, 19rem);
  }

  .value {
    flex: 1 1 0;
    min-width: 0;
    min-height: 0;
    transition: flex-grow 600ms var(--ease-out), border-radius 600ms var(--ease-out);
  }

  .value__more {
    grid-template-rows: 0fr;
    transition: grid-template-rows 500ms var(--ease-out);
  }

  .value__text {
    opacity: 0;
    transition: opacity 300ms var(--ease-out);
  }

  .value:hover,
  .value:focus-visible {
    flex-grow: 1.7;
  }

  .value:hover .value__more,
  .value:focus-visible .value__more {
    grid-template-rows: 1fr;
  }

  .value:hover .value__text,
  .value:focus-visible .value__text {
    opacity: 1;
    transition-delay: 250ms;
  }
}

@media (prefers-reduced-motion: reduce) {
  .value,
  .value__more,
  .value__text {
    transition: none;
  }
}

@media (forced-colors: active) {
  .value {
    border: 1px solid CanvasText;
  }
}

/* Hero */

.hero {
  padding-top: var(--section-space);
  padding-bottom: var(--section-space);
}

.hero__intro {
  --text-muted: #4B4F5A;
  position: relative;
  z-index: 1;
  text-align: center;
}

/* Hero floats: three images. Without motion they sit in a row
   under the intro; with motion the stage pins and they drift up behind it. */

.hero__floats {
  display: flex;
  gap: var(--space-s);
  width: 100%;
  max-width: var(--container);
  margin: var(--space-xl) auto 0;
  padding-inline: var(--gutter);
}

.float {
  flex: 1;
  aspect-ratio: 5 / 8;
  overflow: hidden;
  border-radius: var(--radius-l);
}

.float__text {
  display: none;
}

.float__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
}

/* Small label naming what each image shows */
.float {
  position: relative;
}

.float__label {
  position: absolute;
  left: var(--space-s);
  bottom: var(--space-s);
  padding: 0.3rem 0.7rem;
  border-radius: var(--radius-pill);
  background-color: rgb(17 18 22 / 0.72);
  color: var(--color-paper);
  font-size: var(--step--1);
  font-weight: var(--weight-regular);
  letter-spacing: 0.02em;
  line-height: 1.3;
}

.float--one { background-color: #D9DCE3; }
.float--two { background-color: #D9DCE3; }
.float--three { background-color: #E7E9EE; }

.hero__stage {
  display: flex;
  flex-direction: column-reverse;
}

/* Pinned only when the screen is tall enough for the whole intro.
   Short screens and high zoom keep the simple layout. 40rem leaves room
   for the header and the bottom menu. */

@media (min-height: 40rem) {
  .motion-ok .hero {
    margin-top: calc(var(--header-height) * -1);
    padding-top: 0;
  }

  .motion-ok .hero__pin {
    height: 360vh;
    height: 360svh;
  }

  .motion-ok .hero__stage {
    position: sticky;
    top: 0;
    display: grid;
    place-items: center;
    height: 100vh;
    height: 100svh;
    padding-top: calc(var(--header-height) + var(--space-m));
    padding-bottom: calc(var(--dock-height) + var(--dock-offset) * 2);
    overflow: clip;
  }

  /* Shorter screens (phones with the browser bars showing, small laptops):
     tighter type so the words sit clear of the header and the menu */
  @media (max-height: 50rem) {
    .motion-ok .hero__title {
      font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.5rem);
      margin-bottom: var(--space-s);
    }

    .motion-ok .hero__lede {
      font-size: var(--step-0);
    }
  }

  .motion-ok .hero__floats {
    position: absolute;
    inset: 0;
    z-index: 0;
    display: block;
    max-width: none;
    margin: 0;
    padding: 0;
  }

  .motion-ok .float {
    position: absolute;
    top: 0;
    width: clamp(14rem, 28vw, 26rem);
    transform: translate3d(0, 110vh, 0);
    will-change: transform;
    /* Dark backing to match the dimmed image, and a precise rounded clip, so the
       blurred edge never lets a light halo show at the corners */
    background-color: #080B28;
    clip-path: inset(0 round var(--radius-l));
  }

  /* Images pass over the words. Inside each image a light copy of the words
     lines up with the real ones, so text flips to light ("negative") only
     where an image is behind it. */

  .motion-ok .hero__floats {
    z-index: 2;
    pointer-events: none;
  }

  /* While the images drift, each shows a ready-made copy of itself: turned
     black and white, softened, then toned from near-black to brand blue, so
     light text stays readable on top (made in advance, so the browser never
     has to blur it live while scrolling). The full image isn't loaded in this
     mode. */
  .motion-ok .float__img {
    display: none;
  }

  .motion-ok .float::before {
    content: "";
    position: absolute;
    inset: 0;
    background-position: 50% 0;
    background-size: cover;
    /* Starts 6% larger so the soft edge sits outside the card */
    transform: scale(calc(1.06 * var(--zoom, 1)));
    transform-origin: 50% 40%;
  }

  .motion-ok .float--one::before {
    background-image: url("../media/hero/float-1-dim.jpg");
    background-image: image-set(url("../media/hero/float-1-dim.webp") type("image/webp"), url("../media/hero/float-1-dim.jpg") type("image/jpeg"));
  }

  .motion-ok .float--two::before {
    background-image: url("../media/hero/float-digital-dim.jpg");
    background-image: image-set(url("../media/hero/float-digital-dim.webp") type("image/webp"), url("../media/hero/float-digital-dim.jpg") type("image/jpeg"));
  }

  .motion-ok .float--three::before {
    background-image: url("../media/hero/float-2-dim.jpg");
    background-image: image-set(url("../media/hero/float-2-dim.webp") type("image/webp"), url("../media/hero/float-2-dim.jpg") type("image/jpeg"));
  }

  /* The label sits on the dimmed image and fades out while it passes behind the words */
  .motion-ok .float__label {
    transition: opacity var(--duration-m) var(--ease-out);
  }

  .motion-ok .float__label.is-hidden {
    opacity: 0;
  }

  /* On arrival a pulsing scroll prompt sits where the call to action will be.
     Once the heading has rolled to "made with Tafidea." the prompt's circle
     stretches into the "Plan your project" button. It hangs just below the
     intro, so the words stay centred on the screen. The button stays out of
     the tab order until it has appeared. */
  .motion-ok .hero__intro .hero__cta {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: var(--space-m);
  }

  /* On shorter screens the prompt sits a little higher, clear of the menu
     at the bottom (main.js measures how much), and drops into the button's
     place as it turns into it */
  .motion-ok .hero__scroll {
    position: absolute;
    top: 0;
    left: 50%;
    display: block;
    translate: -50% calc(-1 * var(--scroll-lift, 0px));
    pointer-events: none;
    transition:
      opacity var(--duration-s) var(--ease-out) 300ms,
      translate 300ms var(--ease-out);
  }

  .motion-ok .hero__scroll-dot {
    position: relative;
    display: grid;
    place-items: center;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 50%;
    background-color: var(--color-blue);
    color: #FFFFFF;
  }

  .motion-ok .hero__scroll-dot::after {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 50%;
    border: 2px solid var(--color-blue);
    animation: scroll-pulse 1800ms var(--ease-out) 2 forwards;
  }

  .motion-ok .hero__scroll-dot svg {
    width: 1.1rem;
    height: 1.1rem;
    animation: scroll-nudge 1800ms ease-in-out 2;
  }

  .motion-ok .hero__scroll-text {
    position: absolute;
    top: 50%;
    left: calc(100% + 0.75rem);
    translate: 0 -50%;
    color: var(--text-muted);
    font-size: var(--step--1);
    letter-spacing: 0.02em;
  }

  .motion-ok .hero__intro .hero__cta-button {
    position: relative;
    height: 2.75rem;
    min-height: 0;
    padding-block: 0;
    color: transparent;
    clip-path: inset(0 calc(50% - 1.375rem) round 1.375rem);
    visibility: hidden;
    transition:
      color var(--duration-s) var(--ease-out),
      clip-path var(--duration-l) var(--ease-out),
      background-color var(--duration-s) var(--ease-out),
      visibility 0s linear var(--duration-l);
  }

  .motion-ok .hero__intro.is-rolled .hero__scroll {
    opacity: 0;
    translate: -50% 0;
  }

  .motion-ok .hero__intro.is-rolled .hero__cta-button {
    color: #FFFFFF;
    clip-path: inset(0 0 round 1.375rem);
    visibility: visible;
    transition:
      color var(--duration-m) var(--ease-out) 650ms,
      clip-path var(--duration-l) var(--ease-out) 300ms,
      background-color var(--duration-s) var(--ease-out),
      visibility 0s linear 300ms;
  }

  @keyframes scroll-pulse {
    0% { opacity: 0.7; transform: scale(1); }
    80%, 100% { opacity: 0; transform: scale(1.7); }
  }

  @keyframes scroll-nudge {
    0%, 100% { translate: 0 -2px; }
    50% { translate: 0 3px; }
  }

  .motion-ok .float__text {
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1;
    margin: 0;
    pointer-events: none;
    will-change: transform;
  }

  .float__text,
  .float__text * {
    color: var(--color-paper) !important;
  }

  .float__text .hero__phrase {
    color: #C9D2FF !important;
  }

  .motion-ok .float--left { left: max(4vw, 1rem); }
  .motion-ok .float--right { right: max(4vw, 1rem); }

  @media (max-width: 40rem) {
    .motion-ok .float {
      width: 62vw;
    }
  }
}

.hero__title {
  font-size: var(--step-4);
  line-height: var(--leading-display);
  max-width: 20ch;
  margin-inline: auto;
  margin-bottom: var(--space-m);
}

.hero__title span {
  display: block;
}

/* First heading line: blue words that change as the visitor scrolls through
   the pinned hero (js/main.js), one discipline at a time. Screen readers get
   the summary line only. */

.hero__title .hero__phrases {
  display: grid;
  overflow: clip;
  overflow-clip-margin: 0.1em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  perspective: 800px;
}

.hero__title .hero__phrase {
  grid-area: 1 / 1;
  align-self: end;
  color: var(--color-blue);
  opacity: 0;
  transform: translateY(100%) rotateX(-70deg);
  transform-origin: 50% 50% -0.4em;
  transition:
    transform 800ms var(--ease-out),
    opacity 600ms var(--ease-out);
}

.hero__title .hero__phrase.is-past {
  transform: translateY(-100%) rotateX(70deg);
}

.hero__title .hero__phrase.is-active {
  opacity: 1;
  transform: none;
}

/* Second heading line rolls once to the brand line near the end of the pin */

.hero__title .hero__roll {
  display: grid;
  overflow: clip;
  overflow-clip-margin: 0.1em;
  padding-bottom: 0.12em;
  margin-bottom: -0.12em;
  perspective: 800px;
}

.hero__title .hero__roll-line {
  grid-area: 1 / 1;
  transform-origin: 50% 50% -0.4em;
  transition:
    transform 900ms var(--ease-out),
    opacity 700ms var(--ease-out);
}

.hero__title .hero__roll-line--brand {
  opacity: 0;
  transform: translateY(100%) rotateX(-70deg);
}

/* "Tafidea" in the brand line gets a blue highlighter stroke, drawn left to
   right once the line has rolled in */
.hero__title .hero__mark {
  display: inline;
  padding-inline: 0.06em;
  margin-inline: -0.06em;
  background-image: linear-gradient(rgb(43 75 255 / 0.5), rgb(43 75 255 / 0.5));
  background-repeat: no-repeat;
  background-position: 0 90%;
  background-size: 0% 0.36em;
  transition: background-size 700ms var(--ease-out);
}

.hero__title.is-rolled .hero__mark {
  background-size: 100% 0.36em;
  transition-delay: 450ms;
}

.hero__title.is-rolled .hero__roll-line:first-child {
  opacity: 0;
  transform: translateY(-100%) rotateX(70deg);
}

.hero__title.is-rolled .hero__roll-line--brand {
  opacity: 1;
  transform: none;
}

/* Squared paper behind the hero, fading out towards the words */

.hero__stage {
  position: relative;
  isolation: isolate;
}

.hero__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center center;
  /* Fades towards the words in the middle, and out at the top and bottom edges so lines never stop abruptly */
  -webkit-mask-image:
    radial-gradient(ellipse 62% 58% at 50% 50%, transparent 0%, rgb(0 0 0 / 0.12) 38%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 62% 58% at 50% 50%, transparent 0%, rgb(0 0 0 / 0.12) 38%, #000 88%),
    linear-gradient(to bottom, transparent 0%, #000 14%, #000 62%, transparent 100%);
  mask-composite: intersect;
}

.hero__paper.is-drawn {
  background-image: none;
}

.hero__paper-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

.hero__lede {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  max-width: 44ch;
  margin-inline: auto;
  color: var(--text-muted);
}

/* Call to action under the intro, leading to the plan game */

.hero__cta {
  margin-top: var(--space-l);
}

/* The scroll prompt only shows with the moving intro (see above) */
.hero__scroll {
  display: none;
}

.hero__cta-button {
  gap: var(--space-xs);
  padding-inline: 1.6rem 1.25rem;
}

.hero__cta-arrow {
  width: 1.1rem;
  height: 1.1rem;
  transition: transform var(--duration-s) var(--ease-out);
}

.hero__cta-button:hover .hero__cta-arrow {
  transform: translateY(3px);
}

.hero__media {
  margin-top: var(--space-l);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--grow-radius, var(--radius-l));
  transform: scale(var(--grow-scale, 1));
  transform-origin: 50% 0;
  will-change: transform;
}

.hero__media-inner {
  position: relative;
  width: 100%;
  height: 100%;
  container-type: size;
}

@media (max-width: 40rem) {
  .hero__media {
    aspect-ratio: 3 / 4.4;
  }
}

/* A soft glow pulses round the card while the reel plays in the middle of the screen */

.hero__media {
  transition: box-shadow var(--duration-l) var(--ease-out);
}

.hero__media.is-centred:has(.reel.is-playing) {
  animation: reel-glow 3.2s ease-in-out infinite;
}

@keyframes reel-glow {
  0%,
  100% {
    box-shadow: 0 0 2.5rem 0.25rem rgb(129 151 255 / 0.28);
  }

  50% {
    box-shadow: 0 0 4.5rem 1rem rgb(129 151 255 / 0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__media.is-centred:has(.reel.is-playing) {
    animation: none;
    box-shadow: 0 0 3.5rem 0.5rem rgb(129 151 255 / 0.45);
  }
}

/* Media buttons: pause, play and replay over video */

.media-button {
  --surface: var(--color-ink);
  --focus: var(--color-blue-light);
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0 1.1rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgb(17 18 22 / 0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--color-paper);
  font-size: var(--step--1);
  cursor: pointer;
  transition: background-color var(--duration-s) var(--ease-out);
}

.media-button:hover {
  background-color: var(--color-blue);
}

.media-button:active {
  background-color: var(--color-blue-press);
}

.media-button__icon {
  position: relative;
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
}

.media-button__icon--pause::before,
.media-button__icon--pause::after {
  content: "";
  position: absolute;
  top: 0;
  width: 0.25rem;
  height: 100%;
  border-radius: 1px;
  background-color: currentColor;
}

.media-button__icon--pause::before { left: 0.05rem; }
.media-button__icon--pause::after { right: 0.05rem; }

[aria-pressed="true"] .media-button__icon--pause::before {
  left: 0.1rem;
  width: 0.65rem;
  border-radius: 0;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

[aria-pressed="true"] .media-button__icon--pause::after {
  display: none;
}

.media-button__icon--skip::before {
  content: "";
  position: absolute;
  inset: 0 0.2rem 0 0;
  background-color: currentColor;
  clip-path: polygon(0 0, 100% 50%, 0 100%);
}

.media-button__icon--skip::after {
  content: "";
  position: absolute;
  top: 0;
  right: 0;
  width: 0.18rem;
  height: 100%;
  border-radius: 1px;
  background-color: currentColor;
}

.media-button__icon--replay {
  border-radius: 50%;
  box-shadow: inset 0 0 0 0.13rem currentColor;
  clip-path: polygon(0 0, 50% 0, 50% 50%, 100% 50%, 100% 100%, 0 100%);
}

/* Selected work reel, inside the growing hero card.
   Without scripts it is a simple list of stills with their captions. */

.hero__media:has(.reel:not(.is-live)) {
  aspect-ratio: auto;
}

.hero__media-inner:has(.reel:not(.is-live)) {
  container-type: normal;
}

.reel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
  gap: var(--space-m);
  padding: var(--space-m);
  background-color: var(--color-ink);
  color: var(--color-paper);
}

.reel__slide {
  margin: 0;
}

.reel__screen {
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: #0B0C0F;
}

.reel__video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 0;
  /* Black and white first; the blue comes from the layers on top */
  filter: grayscale(1) contrast(1.06);
}

/* The work reel in the brand treatment: the black-and-white footage is
   coloured blue (keeping its light and shade), then given a deep blue wash,
   the same family as the hero and service images */
.reel__screen,
.montage__tile {
  position: relative;
  isolation: isolate;
}

.reel__screen::before,
.reel__screen::after,
.montage__tile::before,
.montage__tile::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
}

.reel__screen::before,
.montage__tile::before {
  background-color: var(--color-blue);
  mix-blend-mode: color;
}

.reel__screen::after,
.montage__tile::after {
  background-color: rgb(22 38 127 / 0.38);
  mix-blend-mode: multiply;
}

.reel__montage::before,
.reel__montage::after {
  content: none;
}

@media (forced-colors: active) {
  .reel__video {
    filter: none;
  }

  .reel__screen::before,
  .reel__screen::after,
  .montage__tile::before,
  .montage__tile::after {
    content: none;
  }
}

.reel__caption {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-s);
}

.reel__title {
  font-size: var(--step-1);
  line-height: var(--leading-heading);
  letter-spacing: -0.015em;
}

.reel__title span {
  display: inline-block;
}

.reel__note {
  font-size: var(--step--1);
  font-weight: var(--weight-light);
  line-height: 1.55;
}

.reel__note strong {
  font-weight: var(--weight-regular);
}

.reel__montage {
  display: grid;
  grid-template-columns: 1fr 1fr 0.62fr;
  grid-template-rows: 1fr 1fr;
  gap: 2.5%;
  padding: 2.5%;
  aspect-ratio: 16 / 9;
}

.montage__tile {
  overflow: hidden;
  border-radius: var(--radius-s);
  background-color: var(--color-ink-raised);
}

.montage__tile--c {
  grid-column: 1 / 3;
}

.montage__tile--phone {
  grid-column: 3;
  grid-row: 1 / 3;
}

/* Live: one stage filling the card, slides swing in and out in 3D */

.reel.is-live {
  position: absolute;
  inset: 0;
  display: block;
  padding: 0;
  overflow: hidden;
  background:
    radial-gradient(90% 70% at 70% 15%, rgb(129 151 255 / 0.16), transparent 70%),
    #0E0F12;
}

.reel.is-live .reel__slide {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  padding: 6cqh 16cqw 6cqh 5cqw;
  perspective: 1400px;
  perspective-origin: 50% 40%;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(12%, 0, -260px) rotateY(-28deg) rotateX(10deg);
  transition:
    opacity 700ms var(--ease-out),
    transform 1100ms var(--ease-out),
    visibility 0s linear 1100ms;
}

.reel.is-live .reel__slide.is-active {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition:
    opacity 700ms var(--ease-out),
    transform 1100ms var(--ease-out),
    visibility 0s;
}

.reel.is-live .reel__slide.is-leaving {
  transform: translate3d(-14%, 0, -220px) rotateY(24deg) rotateX(-6deg);
}

/* The dark overlay: dims the whole screen, deepest behind the words */

.reel.is-live .reel__slide::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(to top, rgb(11 12 15 / 0.9) 0%, rgb(11 12 15 / 0.72) 38%, rgb(11 12 15 / 0) 75%),
    linear-gradient(to right, rgb(11 12 15 / 0.55) 0%, rgb(11 12 15 / 0) 60%),
    rgb(11 12 15 / 0.38);
}

.reel.is-live .reel__screen {
  position: relative;
  z-index: 1;
  width: 100%;
  max-height: 100%;
  aspect-ratio: 16 / 9.4;
  box-shadow: 0 30px 70px rgb(0 0 0 / 0.5);
  will-change: transform;
}

.reel.is-live .reel__montage {
  aspect-ratio: 16 / 9;
}

/* A soft blur takes the eye off grain in the recordings */

.reel.is-live .reel__video {
  filter: blur(1.6px);
  transform: scale(1.03);
}

.reel.is-live .reel__caption {
  position: absolute;
  left: clamp(1.25rem, 5cqw, 3.5rem);
  bottom: clamp(1.25rem, 6cqh, 3.5rem);
  z-index: 3;
  max-width: min(52cqw, 34rem);
  margin: 0;
  gap: clamp(0.5rem, 1.6cqh, 1rem);
  color: var(--color-paper);
}

.reel.is-live .reel__title {
  font-size: clamp(1.5rem, 4.4cqw, 3.5rem);
  line-height: 1.04;
  letter-spacing: var(--tracking-display);
  perspective: 600px;
}

.reel.is-live .reel__title span {
  display: block;
  transform-origin: 50% 100%;
  opacity: 0;
  transform: translateY(0.6em) rotateX(-75deg);
  transition:
    opacity 600ms var(--ease-out),
    transform 900ms var(--ease-out);
}

.reel.is-live .reel__note {
  max-width: 44ch;
  font-size: clamp(0.9375rem, 1.35cqw, 1.125rem);
  opacity: 0;
  transform: translateY(0.75rem);
  transition:
    opacity 700ms var(--ease-out),
    transform 700ms var(--ease-out);
}

.reel.is-live .reel__slide.is-active .reel__title span,
.reel.is-live .reel__slide.is-active .reel__note {
  opacity: 1;
  transform: none;
  transition-delay: 450ms;
}

.reel.is-live .reel__slide.is-active .reel__title span + span {
  transition-delay: 600ms;
}

.reel.is-live .reel__slide.is-active .reel__note {
  transition-delay: 800ms;
}

.reel.is-live .reel__controls {
  position: absolute;
  right: clamp(0.75rem, 2.5cqw, 1.75rem);
  bottom: clamp(0.75rem, 2.5cqw, 1.75rem);
  z-index: 4;
  display: flex;
  gap: var(--space-xs);
}

/* Small note in the top-left corner: these are self-initiated projects */

.reel__disclaimer {
  grid-column: 1 / -1;
  justify-self: start;
  margin: 0;
  padding: 0.4rem 0.75rem;
  border-radius: var(--radius-pill);
  background-color: rgb(11 12 15 / 0.6);
  color: var(--color-paper);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
  line-height: 1.3;
}

.reel.is-live .reel__disclaimer {
  position: absolute;
  top: clamp(0.75rem, 2.5cqw, 1.75rem);
  left: clamp(0.75rem, 2.5cqw, 1.75rem);
  z-index: 4;
  max-width: calc(100% - 7rem);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

/* Pagination: "loading bars" inside the card, filling as each clip plays */

.reel__pager {
  position: absolute;
  top: clamp(0.75rem, 2.5cqw, 1.75rem);
  right: clamp(0.75rem, 2.5cqw, 1.75rem);
  z-index: 4;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
  margin: 0;
  padding: var(--space-2xs);
  border-radius: var(--radius-m);
  background-color: rgb(11 12 15 / 0.85);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  list-style: none;
}

.pager__button {
  --surface: #0B0C0F;
  --focus: var(--color-blue-light);
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.5rem;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-stone);
  font: inherit;
  font-size: 0.8125rem;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: color var(--duration-s) var(--ease-out), background-color var(--duration-s) var(--ease-out);
}

.pager__button:hover {
  background-color: rgb(243 244 246 / 0.08);
  color: var(--color-paper);
}

.pager__button[aria-current="true"] {
  color: var(--color-blue-light);
}

.pager__track {
  position: relative;
  overflow: hidden;
  width: clamp(2rem, 5cqw, 3.5rem);
  height: 4px;
  border-radius: var(--radius-pill);
  background-color: rgb(243 244 246 / 0.22);
}

.pager__fill {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--color-blue);
  transform: scaleX(var(--fill, 0));
  transform-origin: 0 50%;
}

/* Narrow or portrait card: pager across the top, words above the controls */

@container (max-width: 40rem) {
  .reel.is-live .reel__slide {
    place-items: start center;
    padding: 17cqw 5cqw 0;
  }

  .reel.is-live .reel__caption {
    left: 5cqw;
    right: 5cqw;
    bottom: calc(2.75rem + clamp(0.75rem, 2.5cqw, 1.75rem) * 2);
    max-width: none;
  }

  .reel.is-live .reel__title {
    font-size: clamp(1.4rem, 7.5cqw, 2.25rem);
  }

  .reel.is-live .reel__note {
    font-size: 0.9375rem;
  }

  .reel__pager {
    top: clamp(0.5rem, 2.5cqw, 1rem);
    left: 5cqw;
    right: 5cqw;
    flex-direction: row;
    transform: none;
  }

  .reel__pager > li {
    flex: 1;
    min-width: 0;
  }

  .pager__button {
    width: 100%;
    padding-inline: 0.35rem;
  }

  .pager__track {
    flex: 1;
    width: auto;
  }

  .reel.is-live .reel__slide::after {
    background:
      linear-gradient(to top, rgb(11 12 15 / 0.94) 0%, rgb(11 12 15 / 0.88) 48%, rgb(11 12 15 / 0.55) 62%, rgb(11 12 15 / 0) 80%),
      rgb(11 12 15 / 0.38);
  }
}

/* About: the Tafidea wordmark with measuring marks, photo and stats */

.about__grid {
  display: grid;
  gap: var(--space-xl);
  align-items: center;
}

@media (min-width: 56rem) {
  .about__grid {
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.85fr);
  }
}

.about__label {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--text-muted);
}

/* The name runs the full width of the page. The seven letters sit in a grid
   of columns sized to each letter, spread so the gaps between them are all
   equal; the measuring marks share the same grid, spanning "Taf" and "idea"
   exactly. Hovering a letter lifts and tilts it onto a blue square (a nod to
   the cursor); when the section first appears the letters ripple once. */

.wordmark {
  margin-bottom: var(--space-xl);
}

/* Set in Anybody at its widest, heavier than the headings: "Taf" in light
   and "idea" in semibold keep the two parts of the name apart */
.wordmark__grid {
  display: grid;
  grid-template-columns: repeat(7, auto);
  justify-content: space-between;
  font-family: var(--font-display);
  font-size: clamp(2.5rem, 11vw, 11rem);
  font-stretch: 150%;
  line-height: 0.92;
  letter-spacing: 0;
}

.wordmark__letter.weight-thin {
  font-weight: 300;
}

.wordmark__letter.weight-regular {
  font-weight: 650;
}

.wordmark__letter {
  position: relative;
  grid-row: 1;
  isolation: isolate;
  padding-inline: 0.04em;
  transition:
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
    color 250ms var(--ease-out);
}

/* The blue square behind a hovered letter, with sharp corners like a grid cell */
.wordmark__letter::before {
  content: "";
  position: absolute;
  inset: 0.1em -0.06em -0.02em;
  z-index: -1;
  background-color: var(--color-blue);
  transform: scale(0.2) rotate(-12deg);
  opacity: 0;
  transition:
    transform 450ms cubic-bezier(0.34, 1.56, 0.64, 1),
    opacity 200ms var(--ease-out);
}

@media (hover: hover) and (pointer: fine) {
  .wordmark__letter:hover {
    color: #FFFFFF;
    transform: translateY(-0.08em) rotate(-6deg);
  }

  .wordmark__letter:nth-child(even):hover {
    transform: translateY(-0.08em) rotate(6deg);
  }

  .wordmark__letter:hover::before {
    opacity: 1;
    transform: none;
  }
}

/* A one-off ripple through the letters when the section comes into view */
.has-motion .wordmark.is-visible .wordmark__letter {
  animation: wordmark-ripple 900ms var(--ease-out) backwards;
  animation-delay: calc(var(--n, 0) * 70ms + 300ms);
}

.wordmark__letter:nth-child(2) { --n: 1; }
.wordmark__letter:nth-child(3) { --n: 2; }
.wordmark__letter:nth-child(4) { --n: 3; }
.wordmark__letter:nth-child(5) { --n: 4; }
.wordmark__letter:nth-child(6) { --n: 5; }
.wordmark__letter:nth-child(7) { --n: 6; }

@keyframes wordmark-ripple {
  0%, 100% { transform: none; }
  40% { transform: translateY(-0.12em); }
}

@media (prefers-reduced-motion: reduce) {
  .wordmark__letter,
  .wordmark__letter::before {
    transition: none;
  }

  .has-motion .wordmark.is-visible .wordmark__letter {
    animation: none;
  }
}

.measure__part {
  grid-row: 2;
  min-width: 0;
  padding-top: 0.75rem;
}

.measure__part--taf {
  grid-column: 1 / 4;
}

.measure__part--idea {
  grid-column: 4 / 8;
}

.measure__part::before {
  content: "";
  display: block;
  height: 0.75rem;
  margin-inline: 0.04em;
  background:
    linear-gradient(var(--color-blue), var(--color-blue)) 0 50% / 100% 1px no-repeat,
    linear-gradient(var(--color-blue), var(--color-blue)) 0 0 / 1px 100% no-repeat,
    linear-gradient(var(--color-blue), var(--color-blue)) 100% 0 / 1px 100% no-repeat;
}

/* Zero width with a full minimum: the labels wrap to the marks' width and
   never push the letter columns apart */
.measure__label {
  display: block;
  width: 0;
  min-width: 100%;
  margin-top: 0.5rem;
  font-family: var(--font-sans);
  font-stretch: normal;
  font-size: 0.875rem;
  line-height: 1.35;
  letter-spacing: 0.01em;
  color: var(--color-blue);
}

.about__lead {
  font-size: var(--step-1);
  line-height: 1.45;
  max-width: 34ch;
}

.about__text p {
  max-width: var(--measure);
}

/* Read more: an accordion that opens above its button */

.more {
  margin-bottom: var(--space-m);
}

.more.is-ready .more__panel {
  display: grid;
  grid-template-rows: 0fr;
  visibility: hidden;
}

.more.is-ready.is-open .more__panel {
  grid-template-rows: 1fr;
  visibility: visible;
}

.more.is-animated .more__panel {
  transition:
    grid-template-rows var(--duration-m) var(--ease-out),
    visibility 0s linear var(--duration-m);
}

.more.is-animated.is-open .more__panel {
  transition:
    grid-template-rows var(--duration-m) var(--ease-out),
    visibility 0s linear 0s;
}

.more__inner {
  min-height: 0;
  overflow: hidden;
}

.more.is-ready .more__inner {
  opacity: 0;
  transform: translateY(0.75rem);
}

.more.is-ready.is-open .more__inner {
  opacity: 1;
  transform: none;
}

.more.is-animated .more__inner {
  transition:
    opacity var(--duration-s) var(--ease-out),
    transform var(--duration-m) var(--ease-out);
}

.more.is-animated.is-open .more__inner {
  transition-delay: 0.1s;
}

.more__toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  min-height: 2.75rem;
  padding: 0.25rem 0;
  border: 0;
  border-radius: var(--radius-s);
  background: none;
  color: var(--color-blue);
  font: inherit;
  font-weight: var(--weight-regular);
  cursor: pointer;
}

.more__toggle[hidden] {
  display: none;
}

.more__toggle::after {
  content: "+";
  display: grid;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 50%;
  background-color: var(--color-blue-tint);
  font-size: 1.125rem;
  font-weight: var(--weight-light);
  line-height: 1;
  transition: transform var(--duration-m) var(--ease-out), background-color var(--duration-s) var(--ease-out);
}

.more.is-open .more__toggle::after {
  transform: rotate(45deg);
}

.more__toggle:hover::after {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

@media (prefers-reduced-motion: reduce) {
  .more.is-animated .more__panel,
  .more.is-animated.is-open .more__panel,
  .more.is-animated .more__inner,
  .more.is-animated.is-open .more__inner,
  .more__toggle::after {
    transition: none;
  }

  .more.is-ready .more__inner {
    transform: none;
  }
}

.about__photo {
  position: relative;
  isolation: isolate;
  margin: 0;
  max-width: 30rem;
  justify-self: center;
  width: 100%;
}

/* Squared paper behind the photo in the darker blue the grid takes on where
   the cursor rests, feathered out so it fades into the page */
.about__photo::before {
  content: "";
  position: absolute;
  inset: -18% -22%;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-ink) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-ink) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center;
  opacity: 0.75;
  -webkit-mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 60%, transparent 100%);
  mask-image: radial-gradient(closest-side, #000 25%, rgb(0 0 0 / 0.5) 60%, transparent 100%);
}

.about__picture {
  display: block;
}

/* The photo is a cut-out on a transparent background, shown whole with no
   frame so the shapes behind it sit straight on the page */
.about__cutout {
  display: block;
  width: 100%;
  height: auto;
}

/* The short note about the site and cookies, set apart in italics */
.about__notice {
  font-style: italic;
}

/* Stats bar */

.stats {
  display: grid;
  gap: var(--space-l);
  margin: var(--space-xl) 0 0;
  padding: clamp(1.75rem, 1rem + 3vw, 3rem);
  border-radius: var(--radius-l);
  background-color: #E7E9EE;
  list-style: none;
  text-align: center;
}

@media (min-width: 48rem) {
  .stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

.stats__item {
  display: grid;
  gap: var(--space-xs);
  align-content: start;
  min-width: 0;
  overflow-wrap: break-word;
}

.stats__value {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.35em;
  font-size: var(--step-2);
  font-weight: var(--weight-regular);
  line-height: 1.1;
  letter-spacing: -0.02em;
  color: var(--color-ink);
}

.stats__arrow {
  width: 1.4em;
  height: 0.45em;
  color: var(--color-blue);
}

.stats__detail {
  color: #4B4F5A;
  font-size: var(--step--1);
  line-height: 1.5;
}

/* Squared paper and fine grain, shared by the stats bar and the project banner.
   Strongest at the edges, fading towards the middle where the words are. */

.stats,
.banner {
  --texture-line: rgb(17 18 22 / 0.08);
  --texture-grain-opacity: 0.2;
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.stats::before,
.banner::before,
.stats::after,
.banner::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.stats::before,
.banner::before {
  background-image:
    linear-gradient(to right, var(--texture-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--texture-line) 1px, transparent 1px);
  background-size: 24px 24px;
  background-position: center center;
  -webkit-mask-image: radial-gradient(ellipse 75% 90% at 50% 50%, rgb(0 0 0 / 0.25) 0%, #000 100%);
  mask-image: radial-gradient(ellipse 75% 90% at 50% 50%, rgb(0 0 0 / 0.25) 0%, #000 100%);
}

.stats::after,
.banner::after {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: var(--texture-grain-opacity);
  mix-blend-mode: multiply;
}

/* Services I offer: one row per discipline, then a contact banner */

.directions__head {
  max-width: 46rem;
  margin-bottom: var(--space-xl);
}

/* The top of Services: heading on the left and, on wide screens, the note
   about blurred previews beside it as a square card, so both sides are filled */

.directions__top {
  display: grid;
  gap: var(--space-m);
  margin-bottom: var(--space-xl);
}

.directions__top .directions__head {
  margin-bottom: 0;
}

@media (min-width: 64rem) {
  .directions__top {
    grid-template-columns: minmax(0, 1fr) minmax(0, 24rem);
    align-items: end;
    gap: var(--space-xl);
  }

  .directions__top .directions__note {
    margin: 0;
  }
}

.directions__label {
  display: block;
  margin-bottom: var(--space-s);
  font-size: var(--step--1);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--color-blue-light);
}

.directions__head h2 {
  margin-bottom: var(--space-s);
}

.directions__lede {
  max-width: 40rem;
  color: var(--text-muted);
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.45;
}

/* Says plainly that the blurred previews are deliberate */
.directions__note {
  max-width: 40rem;
  margin: var(--space-m) 0 0;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-l);
  background-color: #0B0C0F;
  color: var(--color-stone);
  font-size: var(--step--1);
  line-height: 1.55;
}

.directions__list {
  display: grid;
  gap: clamp(1.75rem, 1rem + 2.5vw, 3rem);
  margin: 0 0 var(--space-xl);
  padding: 0;
  list-style: none;
}

.direction {
  display: grid;
  grid-template-columns: auto clamp(4rem, 3rem + 3vw, 6rem) minmax(0, 1fr);
  grid-template-areas:
    "number thumb title"
    ".      thumb tags";
  align-items: center;
  column-gap: clamp(1rem, 0.5rem + 1.5vw, 2rem);
  row-gap: var(--space-xs);
}

@media (min-width: 64rem) {
  .direction {
    grid-template-columns: 2.5rem 6rem minmax(0, 1fr) minmax(0, 31rem);
    grid-template-areas: "number thumb title tags";
  }
}

@media (max-width: 39.99rem) {
  .directions__list {
    gap: 3rem;
  }

  .direction {
    grid-template-columns: clamp(4rem, 3rem + 3vw, 6rem) minmax(0, 1fr);
    grid-template-areas:
      "thumb title"
      "thumb tags";
    row-gap: var(--space-s);
  }

  .direction__number {
    display: none;
  }
}

/* Hover preview (js/services-preview.js): a blurred image under a deep blue
   wash follows the mouse along the list and slides to each service's picture.
   The light service names stay readable where it passes behind them. Mouse and
   wide screens only, never with reduced motion or high-contrast modes. */

.directions__wrap {
  position: relative;
  isolation: isolate;
}

.directions__preview {
  display: none;
}

.has-service-preview .directions__preview {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  display: block;
  width: clamp(16rem, 22vw, 21rem);
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: #1A2A9E;
  pointer-events: none;
  opacity: 0;
  scale: 0.85;
  translate: var(--preview-x, 0) var(--preview-y, 0);
  transition:
    opacity var(--duration-m) var(--ease-out),
    scale var(--duration-m) var(--ease-out),
    translate 450ms var(--ease-out);
  will-change: translate;
}

.has-service-preview .directions__preview.is-shown {
  opacity: 1;
  scale: 1;
}

/* Appearing for the first time: jump straight to the row, then fade in */
.has-service-preview .directions__preview.is-placing {
  transition: opacity var(--duration-m) var(--ease-out), scale var(--duration-m) var(--ease-out);
}

.directions__strip {
  translate: 0 calc(var(--preview-index, 0) * -20%);
  transition: translate 650ms var(--ease-out);
}

.directions__strip picture,
.directions__strip img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.has-service-preview .direction__title {
  position: relative;
  z-index: 1;
}

.direction__number {
  grid-area: number;
  align-self: center;
  color: var(--color-blue-light);
  font-size: var(--step--1);
  letter-spacing: 0.08em;
  font-variant-numeric: tabular-nums;
}

.direction__thumb {
  grid-area: thumb;
  display: block;
  aspect-ratio: 1;
  overflow: hidden;
  border-radius: var(--radius-m);
  background-color: var(--color-ink-raised);
}

.direction__thumb img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: blur(5px);
  transform: scale(1.15);
  transition: transform var(--duration-l) var(--ease-out);
}

.direction:hover .direction__thumb img {
  transform: scale(1.22);
}

.direction__title {
  grid-area: title;
  font-size: clamp(1.75rem, 1rem + 3.4vw, 4rem);
  font-weight: var(--weight-thin);
  line-height: 1.05;
  letter-spacing: -0.03em;
}

/* What each service is */
.direction__ask {
  grid-area: tags;
  position: relative;
  z-index: 1;
  display: grid;
  gap: var(--space-2xs);
}

.direction__desc {
  margin: 0;
  color: var(--color-stone);
  font-size: var(--step--1);
  line-height: 1.55;
}

.direction__links {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--space-m);
  margin: 0;
}

.direction__link {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  color: var(--color-blue-light);
  font-weight: var(--weight-medium);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.3em;
}

.direction__link:hover {
  color: #FFFFFF;
}

.direction__link svg {
  width: 1.1rem;
  height: 1.1rem;
  transition: translate var(--duration-s, 150ms) var(--ease-out);
}

.direction__link:hover svg {
  translate: 0.2rem 0;
}

@media (prefers-reduced-motion: reduce) {
  .direction__link svg {
    transition: none;
  }
}

/* Banner: light grey on the dark section, with a blue button */

.banner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-m);
  padding: clamp(1.5rem, 1rem + 2.5vw, 2.75rem) clamp(1.5rem, 1rem + 3vw, 3.5rem);
  border-radius: var(--radius-l);
  background-color: var(--color-paper-low);
  color: var(--color-ink);
}

.banner__text {
  margin: 0;
  font-size: var(--step-2);
  line-height: 1.15;
  letter-spacing: -0.02em;
}

.banner__button {
  --surface: var(--color-paper-low);
  --focus: var(--color-ink);
  background-color: var(--color-blue);
  color: #FFFFFF;
  font-size: var(--step-0);
  min-height: 3.25rem;
  padding-inline: 1.75rem;
}

.banner__button:hover,
.banner__button:active {
  background-color: var(--color-blue-press);
}

@media (prefers-reduced-motion: reduce) {
  .direction__thumb img {
    transition: none;
  }

  .direction:hover .direction__thumb img {
    transform: scale(1.15);
  }
}

.banner ::selection {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

/* Let's work together: the card game */

.together {
  isolation: isolate;
}

/* Squared paper behind the section, fading out towards the edges */
.together__paper {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image:
    linear-gradient(to right, var(--grid-line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--grid-line) 1px, transparent 1px);
  background-size: 36px 36px;
  background-position: center top;
  -webkit-mask-image:
    radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%);
  -webkit-mask-composite: source-in;
  mask-image:
    radial-gradient(ellipse 80% 70% at 50% 45%, #000 30%, transparent 85%),
    linear-gradient(to bottom, transparent 0%, #000 12%, #000 80%, transparent 100%);
  mask-composite: intersect;
}

.together__head {
  max-width: 44rem;
  margin-bottom: var(--space-l);
}

.together__head h2 {
  margin-bottom: var(--space-s);
}

.together__lede {
  color: var(--text-muted);
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.45;
}

/* The window */

/* Under the plan game: a line for people who already know what they need */
.together__brief {
  max-width: 54rem;
  margin: var(--space-l) auto 0;
  color: var(--text-muted);
  text-align: center;
}

.together__brief a {
  color: var(--accent);
  font-weight: var(--weight-medium);
}

.game {
  overflow: hidden;
  border-radius: var(--radius-l);
  background-color: #FAFAFB;
  box-shadow: 0 24px 60px rgb(17 18 22 / 0.1), 0 2px 6px rgb(17 18 22 / 0.05);
}

/* The game's top bar in a deeper blue than the header and footer, with white
   text and controls */
.game__bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-xs) var(--space-s);
  padding: var(--space-xs) var(--space-s) var(--space-xs) var(--space-m);
  --focus: #FFFFFF;
  background-color: var(--color-blue-press);
  color: #FFFFFF;
}

.crumbs {
  flex: 1 1 0;
  min-width: 0;
}

.game__tools {
  flex: none;
  align-self: flex-start;
}

.crumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.crumbs__item {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

@media (min-width: 40rem) {
  .crumbs__item + .crumbs__item::before {
    content: "›" / "";
    color: rgb(255 255 255 / 0.75);
    font-size: 1.125rem;
  }
}

.crumbs__button {
  --surface: var(--color-blue-press);
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0.4rem 0.9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.16);
  color: #FFFFFF;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: background-color var(--duration-s) var(--ease-out);
}

.crumbs__button:hover {
  background-color: rgb(255 255 255 / 0.26);
}

.crumbs__label {
  color: rgb(255 255 255 / 0.85);
}

.crumbs__value {
  font-weight: var(--weight-medium);
}

.crumbs__current {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.4rem;
  color: #FFFFFF;
  font-size: var(--step--1);
  font-weight: var(--weight-medium);
}

.game__tools {
  display: flex;
  gap: var(--space-2xs);
  margin-left: auto;
}

.game__tool {
  --surface: var(--color-blue-press);
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: #FFFFFF;
  font: inherit;
  font-size: var(--step--1);
  cursor: pointer;
  transition: background-color var(--duration-s) var(--ease-out);
}

.game__tool svg {
  width: 1.1rem;
  height: 1.1rem;
  color: #FFFFFF;
}

.game__tool:hover,
.game__tool[aria-expanded="true"] {
  background-color: rgb(255 255 255 / 0.16);
}

.game__help {
  margin: 0 0 var(--space-l);
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  background-color: #E7E9EE;
  color: var(--color-ink);
  font-size: var(--step--1);
  line-height: 1.55;
}

.game__help p {
  margin: 0;
  max-width: 62ch;
}

/* Workspace, with a fine grain */

.game__space {
  position: relative;
  isolation: isolate;
  padding: clamp(1.5rem, 1rem + 3vw, 3.5rem);
}

.game__space::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.55 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E");
  background-size: 200px 200px;
  opacity: 0.28;
  mix-blend-mode: multiply;
}

.game__question {
  margin-bottom: var(--space-2xs);
  font-size: var(--step-2);
  font-weight: var(--weight-light);
  letter-spacing: -0.02em;
}

.game__question:focus {
  outline: none;
}

.game__hint {
  margin-bottom: var(--space-l);
  color: var(--text-muted);
}

/* Scattered cards */

.deck {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-m);
  min-height: 7rem;
  margin: 0 0 var(--space-l);
  padding: var(--space-s) 0;
  list-style: none;
}

.deck > li {
  transform: translate(var(--x, 0), var(--y, 0)) rotate(var(--r, 0deg));
}

.chip {
  --surface: #FAFAFB;
  --focus: var(--color-blue);
  display: inline-grid;
  align-content: center;
  min-height: 3.25rem;
  padding: 0.75rem 1.25rem;
  border: 0;
  border-radius: var(--radius-s);
  background-color: #FFFFFF;
  color: var(--color-ink);
  font: inherit;
  text-align: left;
  box-shadow: 0 10px 24px rgb(17 18 22 / 0.12), 0 1px 3px rgb(17 18 22 / 0.08);
  cursor: grab;
  touch-action: pan-y;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  transition:
    transform var(--duration-m) var(--ease-out),
    box-shadow var(--duration-s) var(--ease-out);
}

.deck > li:hover .chip,
.deck .chip:focus-visible {
  transform: rotate(calc(var(--r, 0deg) * -1)) translateY(-4px);
  box-shadow: 0 16px 32px rgb(17 18 22 / 0.16), 0 1px 3px rgb(17 18 22 / 0.08);
}

.chip:active {
  cursor: grabbing;
}

.chip--large {
  align-content: end;
  gap: 0.35rem;
  width: 13rem;
  min-height: 7.5rem;
  padding: 1.25rem;
  border-radius: var(--radius-m);
}

.chip__title {
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  line-height: 1.2;
}

.chip--large .chip__title {
  font-size: var(--step-1);
  line-height: 1.15;
}

.chip__detail {
  font-size: var(--step--1);
  color: var(--color-stone-deep);
  line-height: 1.35;
}

.chip[disabled] {
  cursor: default;
}

/* Topic colours. Each topic has a colour and its own texture, so the two
   never rely on colour alone. Steps take a lighter shade of their topic. */

.chip--website,
.swatch--website {
  --tone: #1F7A5C;
  --tint: #DDF3E8;
  --shade: #EEF9F3;
  --texture: repeating-linear-gradient(45deg, rgb(255 255 255 / 0.5) 0 1.5px, transparent 1.5px 5px);
}

.chip--brand,
.swatch--brand {
  --tone: #7A4466;
  --tint: #F1E1EB;
  --shade: #F8F0F5;
  --texture: radial-gradient(rgb(255 255 255 / 0.6) 1px, transparent 1.4px) 0 0 / 5px 5px;
}

.chip--product,
.swatch--product {
  --tone: #2F5A78;
  --tint: #DEE8F0;
  --shade: #EEF4F8;
  --texture:
    linear-gradient(rgb(255 255 255 / 0.5) 1px, transparent 1px) 0 0 / 5px 5px,
    linear-gradient(90deg, rgb(255 255 255 / 0.5) 1px, transparent 1px) 0 0 / 5px 5px;
}

.chip--print,
.swatch--print {
  --tone: #8A6414;
  --tint: #F3E8CC;
  --shade: #F9F3E4;
  --texture: repeating-linear-gradient(0deg, rgb(255 255 255 / 0.5) 0 1.5px, transparent 1.5px 5px);
}

.chip--large.chip--toned {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  background-color: var(--tint);
}

/* The topic's texture, faintly across the top of the big cards */
.chip--large.chip--toned::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--texture), var(--tone);
  opacity: 0.16;
  -webkit-mask-image: linear-gradient(to bottom, #000, transparent 70%);
  mask-image: linear-gradient(to bottom, #000, transparent 70%);
}

.chip--step.chip--toned {
  background-color: var(--shade);
}

.chip--shared {
  background-color: #FFFFFF;
}

.chip__swatches {
  display: inline-flex;
  gap: 0.25rem;
}

.chip--large .chip__swatches {
  margin-bottom: auto;
  padding-bottom: 0.75rem;
}

.chip--step .chip__swatches {
  margin-right: 0.5rem;
  vertical-align: -0.1em;
}

.chip--step {
  display: inline-flex;
  align-items: center;
}

.swatch {
  display: inline-block;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 0.3rem;
  background: var(--texture), var(--tone);
}

.chip--large .swatch {
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 0.45rem;
}

/* The × on a chosen card */

.card {
  position: relative;
  display: inline-grid;
}

.chip-remove {
  --surface: #FAFAFB;
  --focus: var(--color-blue);
  position: absolute;
  top: -0.6rem;
  right: -0.6rem;
  z-index: 2;
  display: none;
  place-items: center;
  width: 1.75rem;
  height: 1.75rem;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background-color: var(--color-ink);
  color: var(--color-paper);
  cursor: pointer;
  box-shadow: 0 2px 6px rgb(17 18 22 / 0.25);
  transition: background-color var(--duration-s) var(--ease-out), transform var(--duration-s) var(--ease-out);
}

.chip-remove svg {
  width: 0.75rem;
  height: 0.75rem;
}

.tray--multi .tray__list .chip-remove {
  display: grid;
}

.chip-remove:hover {
  background-color: var(--color-blue);
  transform: scale(1.08);
}

.drag-ghost .chip-remove {
  display: none;
}

/* Colour key on the steps screen */

.legend {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
  margin: calc(var(--space-s) * -1) 0 var(--space-m);
  padding: 0;
  list-style: none;
  color: var(--color-ink);
  font-size: var(--step--1);
}

.legend li {
  display: inline-flex;
}

/* Each key entry is a small button that makes its steps wiggle (js/project-game.js) */
.legend__button {
  --focus: var(--color-blue);
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  min-height: 2.25rem;
  padding: 0.3rem 0.8rem 0.3rem 0.55rem;
  border: 1px solid rgb(17 18 22 / 0.14);
  border-radius: var(--radius-pill);
  background-color: rgb(255 255 255 / 0.6);
  color: inherit;
  font: inherit;
  cursor: pointer;
  transition: background-color var(--duration-s) var(--ease-out), border-color var(--duration-s) var(--ease-out);
}

.legend__button:hover {
  border-color: var(--color-blue);
  background-color: #FFFFFF;
}

.legend__button:active {
  background-color: var(--color-paper-low);
}

/* A step picked out from the key: a blue ring that fades away */
.card.is-found::after {
  content: "";
  position: absolute;
  inset: -5px;
  z-index: 3;
  border: 2.5px solid var(--color-blue-press);
  border-radius: calc(var(--radius-s) + 5px);
  pointer-events: none;
  animation: found-ring 1.6s var(--ease-out) forwards;
}

@keyframes found-ring {
  0%, 55% { opacity: 1; }
  100% { opacity: 0; }
}

.crumbs__button .chip__swatches {
  align-self: center;
}

.li-ghosted {
  opacity: 0.3;
}

.li-dragging {
  display: none;
}

.chip.is-lifted {
  transform: translateY(-6px) scale(1.04);
  box-shadow: 0 18px 36px rgb(17 18 22 / 0.2);
}

.chip.is-held {
  transform: scale(1.05);
}

.drag-ghost {
  position: fixed;
  z-index: 200;
  margin: 0;
  pointer-events: none;
  rotate: 3deg;
  box-shadow: 0 22px 48px rgb(17 18 22 / 0.25);
}

/* The tray the cards are pulled down into */

/* The tray is a sheet of graph paper: fine lines every 18px, stronger ones every
   36px (the hero's grid), so chosen cards land on squared paper */
.tray {
  --tray-minor: rgb(43 75 255 / 0.07);
  --tray-major: rgb(43 75 255 / 0.14);
  display: grid;
  gap: var(--space-s);
  min-height: 8rem;
  padding: var(--space-m);
  border-radius: var(--radius-m);
  background-color: rgb(43 75 255 / 0.08);
  background-image:
    linear-gradient(to right, var(--tray-major) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tray-major) 1px, transparent 1px),
    linear-gradient(to right, var(--tray-minor) 1px, transparent 1px),
    linear-gradient(to bottom, var(--tray-minor) 1px, transparent 1px);
  background-size: 36px 36px, 36px 36px, 18px 18px, 18px 18px;
  background-position: -1px -1px;
  transition: background-color var(--duration-s) var(--ease-out);
}

.tray.is-target {
  background-color: rgb(43 75 255 / 0.18);
}

.tray__label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  margin: 0;
  color: var(--color-ink);
  text-align: center;
}

.tray__label::before {
  content: "↓" / "";
  font-size: 1.25rem;
  color: var(--color-blue);
}

.tray.is-filled .tray__label,
.tray.has-items .tray__label {
  display: none;
}

.tray__list {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: var(--space-s);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}

.tray__list:empty {
  display: none;
}

.tray--order .tray__list {
  justify-content: flex-start;
}

.tray--order .tray__list > li {
  display: grid;
  gap: 0.35rem;
  counter-increment: step;
}

.tray--order .tray__list > li::before {
  content: counter(step, decimal-leading-zero);
  font-size: 0.8125rem;
  letter-spacing: 0.08em;
  color: var(--color-blue);
}

.tray__list > .tray__slot {
  counter-increment: none;
  width: 9rem;
  min-height: 3.25rem;
  margin-top: 1.35rem;
  border-radius: var(--radius-s);
  background-color: rgb(43 75 255 / 0.22);
}

.tray__list > .tray__slot::before {
  content: none;
}

.game__summary {
  margin: var(--space-m) 0 0;
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  line-height: 1.45;
}

.game__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs) var(--space-s);
  margin-top: var(--space-l);
}

/* Message screen: kept compact, with the buttons beside the message */

.game__result {
  display: grid;
  gap: var(--space-m);
  align-items: start;
}

@media (min-width: 56rem) {
  .game__result {
    grid-template-columns: minmax(0, 1fr) 16rem;
    gap: var(--space-l);
  }
}

.game__side {
  display: grid;
  gap: var(--space-m);
}

.game__actions--result {
  margin-top: 0;
}

@media (min-width: 56rem) {
  .game__actions--result {
    flex-direction: column;
    align-items: stretch;
  }

  .game__actions--result > * {
    justify-content: center;
  }
}

@media (max-width: 40rem) {
  .game__bar {
    padding: var(--space-xs);
  }

  /* On phones the help and reset buttons show their icons only; the names stay for screen readers */
  .game__tool {
    justify-content: center;
    width: 2.75rem;
    padding: 0;
  }

  .game__tool span {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .deck {
    gap: var(--space-xs) var(--space-s);
  }

  .deck > li:has(.chip--large) {
    width: min(100%, 17rem);
  }

  .chip {
    min-height: 2.75rem;
    padding: 0.55rem 0.9rem;
  }

  .chip--large {
    width: 100%;
    min-height: 5.5rem;
    padding: 1rem 1.1rem;
  }

  .chip--step {
    min-height: 2.75rem;
    padding: 0.45rem 0.75rem;
    font-size: var(--step--1);
  }

  .chip--step .chip__title {
    font-size: inherit;
  }

  .deck {
    gap: var(--space-xs);
  }

  /* Less scatter on phones so cards never overlap */
  .deck > li {
    transform: rotate(calc(var(--r, 0deg) * 0.5));
  }

  /* On phones the trail shows just the choices; the labels stay for screen readers */
  .crumbs__label {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .crumbs__button {
    padding: 0.4rem 0.75rem;
  }

  .game__side {
    display: flex;
    flex-direction: column-reverse;
  }

  .message-card__text {
    max-height: 38vh;
  }

  .game__space {
    padding: var(--space-s);
  }

  .message-card {
    padding: var(--space-s);
  }

  .message-card__title {
    margin-bottom: var(--space-xs);
  }

  .tray {
    padding: var(--space-s);
  }

  .tray--order .tray__list {
    flex-direction: column;
    align-items: stretch;
  }

  .tray--order .tray__list > li {
    grid-template-columns: 1.75rem minmax(0, 1fr);
    align-items: center;
  }

  .tray__list > .tray__slot {
    width: auto;
    margin-top: 0;
  }
}

/* Shared buttons */

.button:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.button--secondary {
  background-color: rgb(17 18 22 / 0.07);
  color: var(--text);
}

.button--secondary:hover {
  background-color: rgb(17 18 22 / 0.12);
}

.button-quiet {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0 0.9rem;
  border: 0;
  border-radius: var(--radius-pill);
  background: none;
  color: var(--accent);
  font: inherit;
  font-weight: var(--weight-medium);
  cursor: pointer;
}

.button-quiet:hover {
  background-color: var(--color-blue-tint);
}

/* The finished message */

.message-card {
  --surface: #FFFFFF;
  --focus: var(--color-blue);
  padding: clamp(1.25rem, 1rem + 1.5vw, 2rem);
  border-radius: var(--radius-l);
  background-color: #FFFFFF;
  color: var(--color-ink);
  box-shadow: 0 18px 44px rgb(17 18 22 / 0.12);
}

.message-card__title {
  margin-bottom: var(--space-s);
  font-size: var(--step-2);
}

.message-card__title:focus {
  outline: none;
}

.message-card__text {
  display: block;
  width: 100%;
  margin: 0;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-s);
  background: transparent;
  color: var(--color-ink);
  font: inherit;
  font-size: var(--step-0);
  line-height: 1.55;
  max-height: min(46vh, 24rem);
  overflow-y: auto;
  resize: none;
}

.message-card__text:hover {
  background-color: rgb(43 75 255 / 0.06);
}

.message-card__note {
  margin: 0;
  color: var(--color-stone-deep);
  font-size: var(--step--1);
  line-height: 1.55;
}

/* Contact */

.contact {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  text-align: center;
}

/* Two soft blue glows behind the words. They stay still: anything that moves
   for more than five seconds would need its own pause button. */
.contact::before,
.contact::after {
  content: "";
  position: absolute;
  z-index: -1;
  border-radius: 50%;
  pointer-events: none;
}

.contact::before {
  top: -20%;
  left: 8%;
  width: min(70vw, 52rem);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgb(129 151 255 / 0.2), rgb(129 151 255 / 0) 68%);
}

.contact::after {
  bottom: -30%;
  right: 4%;
  width: min(60vw, 44rem);
  aspect-ratio: 1;
  background: radial-gradient(circle at 50% 50%, rgb(147 166 255 / 0.09), rgb(147 166 255 / 0) 68%);
}

.contact__title {
  font-size: var(--step-4);
  margin-bottom: var(--space-m);
}

.contact__lede {
  font-size: var(--step-1);
  font-weight: var(--weight-light);
  color: var(--text-muted);
  margin-bottom: var(--space-l);
}

/* Policies */

.panel {
  padding: clamp(1.75rem, 1rem + 4vw, 4.5rem);
  border-radius: var(--radius-l);
  background-color: var(--surface-raised);
}

.panel h2 {
  margin-bottom: var(--space-m);
}

.panel__lede {
  max-width: var(--measure);
  font-weight: var(--weight-light);
  color: var(--text-muted);
}

.policies {
  display: grid;
  gap: var(--space-xs);
  margin-top: var(--space-l);
}

.policy {
  border-radius: var(--radius-m);
  background-color: var(--surface);
  transition: background-color var(--duration-s) var(--ease-out);
}

.policy__summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-s);
  min-height: 3.5rem;
  padding: var(--space-s) var(--space-m);
  border-radius: var(--radius-m);
  font-weight: var(--weight-regular);
  cursor: pointer;
  list-style: none;
}

.policy__summary::-webkit-details-marker {
  display: none;
}

.policy__summary::after {
  content: "+";
  flex: none;
  display: grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  background-color: var(--color-blue-tint);
  color: var(--color-blue);
  font-size: 1.25rem;
  font-weight: var(--weight-light);
  line-height: 1;
  transition: transform var(--duration-m) var(--ease-out);
}

.policy[open] .policy__summary::after {
  transform: rotate(45deg);
}

.policy__summary:hover::after {
  background-color: var(--color-blue);
  color: var(--color-paper);
}

.policy__body {
  padding: 0 var(--space-m) var(--space-m);
  max-width: calc(var(--measure) + 3rem);
}

.policy__body h3 {
  margin: var(--space-m) 0 var(--space-2xs);
  font-size: var(--step-0);
  font-weight: var(--weight-regular);
  letter-spacing: 0;
}

.policy__body ul {
  margin: 0 0 var(--space-s);
  padding-left: 1.25rem;
}

.policy__body li {
  margin-bottom: var(--space-2xs);
}

.policy__updated {
  color: var(--text-muted);
  font-size: var(--step--1);
}

/* Short privacy notes where people are about to email */
.contact__privacy {
  max-width: 34rem;
  margin: var(--space-m) auto 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.6;
}

.contact__privacy a,
.game__privacy a {
  color: var(--accent);
}

.game__privacy {
  margin: 0;
  color: var(--text-muted);
  font-size: var(--step--1);
  line-height: 1.55;
}

.policy__body p:last-child {
  margin-bottom: 0;
}

.details-list {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: var(--space-2xs) var(--space-m);
  margin: 0;
}

.details-list dt {
  color: var(--text-muted);
}

.details-list dd {
  margin: 0 0 var(--space-xs);
}

@media (min-width: 40rem) {
  .details-list {
    grid-template-columns: max-content minmax(0, 1fr);
  }

  .details-list dd {
    margin: 0;
  }
}

/* Footer */

/* Footer in the full brand blue, in both themes, with white text (5.9:1) */
.site-footer {
  --focus: #FFFFFF;
  --surface: var(--color-blue);
  padding-block: var(--space-xl) calc(var(--dock-height) + var(--dock-offset) * 2 + var(--space-m));
  background-color: var(--color-blue);
  color: #FFFFFF;
  font-size: var(--step--1);
}

.site-footer__inner {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  align-items: center;
  gap: var(--space-s);
}

.site-footer__inner p {
  margin: 0;
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs) var(--space-m);
}

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  color: #FFFFFF;
  text-decoration: none;
}

.site-footer__links a:hover {
  text-decoration: underline;
  text-underline-offset: 0.3em;
}

/* 404 */

.not-found {
  min-height: 70vh;
  display: flex;
  align-items: center;
}

/* Intro sequence: heading, line under it, logo, contact, tagline, menu.
   Hidden only while js/intro.js says the intro is about to play. */

.intro-pending [data-intro] {
  opacity: 0;
}

.intro-play [data-intro] {
  animation: intro-in 1000ms var(--ease-out) both;
}

.intro-play [data-intro="1"] { animation-delay: 0ms; }
.intro-play [data-intro="2"] { animation-delay: 180ms; }
.intro-play [data-intro="3"] { animation-delay: 520ms; }
.intro-play [data-intro="4"] { animation-delay: 880ms; }
.intro-play [data-intro="5"] { animation-delay: 1020ms; }
.intro-play [data-intro="7"] { animation-delay: 1560ms; }

@keyframes intro-in {
  from {
    opacity: 0;
    translate: 0 1.25rem;
    filter: blur(8px);
  }
}

/* Fine grain across the top of the screen, fading out */

.top-grain {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 60;
  height: 80px;
  pointer-events: none;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.95' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.1 0 0 0 0 0.1 0 0 0 0 0.08 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)'/%3E%3C/svg%3E"),
    linear-gradient(to bottom, rgb(17 18 22 / 0.05), rgb(17 18 22 / 0));
  background-size: 200px 200px, 100% 100%;
  opacity: 0.5;
  mix-blend-mode: multiply;
  -webkit-mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 45%, transparent 100%);
  mask-image: linear-gradient(to bottom, #000 0%, rgb(0 0 0 / 0.6) 45%, transparent 100%);
}

/* Square cursor (js/cursor.js): follows the mouse in blue, drops into
   the hero grid's cells, and shrinks with rounder corners over anything clickable */

.cursor {
  position: fixed;
  top: 0;
  left: 0;
  z-index: 300;
  width: 35px;
  height: 35px;
  border-radius: 0;
  pointer-events: none;
  background-color: rgb(43 75 255 / 0.5);
  mix-blend-mode: multiply;
  opacity: 0;
  transition:
    opacity var(--duration-s) var(--ease-out),
    border-radius var(--duration-s) var(--ease-out),
    background-color var(--duration-s) var(--ease-out);
}

.cursor.is-on {
  opacity: 1;
}

.cursor.is-small {
  border-radius: 7px;
  background-color: rgb(43 75 255 / 0.6);
}

.cursor.is-dark {
  background-color: rgb(147 166 255 / 0.8);
  mix-blend-mode: normal;
}

.cursor.is-dark.is-small {
  background-color: rgb(147 166 255 / 0.85);
}

/* The normal pointer is hidden only while the square is on screen; typing keeps its text cursor */
.has-square-cursor,
.has-square-cursor * {
  cursor: none !important;
}

.has-square-cursor input,
.has-square-cursor textarea,
.has-square-cursor [contenteditable="true"] {
  cursor: text !important;
}

/* Reveal on scroll, only once the script confirms motion is allowed */

.has-motion [data-reveal] {
  opacity: 0;
  transform: translateY(2rem);
  transition:
    opacity var(--duration-l) var(--ease-out),
    transform var(--duration-l) var(--ease-out);
}

.has-motion [data-reveal].is-visible {
  opacity: 1;
  transform: none;
}

[data-magnetic] {
  transition:
    transform var(--duration-m) var(--ease-out),
    background-color var(--duration-s) var(--ease-out);
}

@media (prefers-reduced-motion: no-preference) {
  html:not(.lenis) {
    scroll-behavior: smooth;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

@media print {
  .has-motion [data-reveal] {
    opacity: 1;
    transform: none;
  }

  .dock,
  .to-top,
  .skip-link,
  .top-grain,
  .reel__controls,
  .reel__pager {
    display: none;
  }
}

/* Lenis, from lenis/dist/lenis.css (MIT) */

html.lenis,
html.lenis body {
  height: auto;
}

.lenis:not(.lenis-autoToggle).lenis-stopped {
  overflow: clip;
}

.lenis [data-lenis-prevent],
.lenis [data-lenis-prevent-wheel],
.lenis [data-lenis-prevent-touch],
.lenis [data-lenis-prevent-vertical],
.lenis [data-lenis-prevent-horizontal] {
  overscroll-behavior: contain;
}

.lenis.lenis-smooth iframe {
  pointer-events: none;
}

.lenis.lenis-autoToggle {
  transition-property: overflow;
  transition-duration: 1ms;
  transition-behavior: allow-discrete;
}

/* Brand pattern: Esam's mark repeated in staggered rows, drawn large so only
   parts of it show, very faint behind a few sections. Decorative only. */

.values,
.directions,
.site-footer {
  position: relative;
  isolation: isolate;
}

.values::after,
.directions::after,
.site-footer::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-repeat: repeat;
  background-position: 30% 40%;
  background-size: 68rem auto;
}

.values::after {
  background-image: url("../media/logo/tafidea-pattern-blue.svg");
  opacity: 0.05;
}

.directions::after {
  background-image: url("../media/logo/tafidea-pattern-white.svg");
  opacity: 0.035;
}

.site-footer {
  overflow: hidden;
}

.site-footer::after {
  background-image: url("../media/logo/tafidea-pattern-white.svg");
  background-size: 52rem auto;
  opacity: 0.08;
}

@media (forced-colors: active) {
  .values::after,
  .directions::after,
  .site-footer::after {
    content: none;
  }
}

/* Phones: no floating hero images. On a narrow screen the light copy of the
   words inside each image can't line up exactly with the real words, so
   letters looked doubled where an image crossed the text. Tablets and
   desktops keep them. Hidden images aren't downloaded. */
@media (max-width: 39.99rem) {
  .hero__floats,
  .motion-ok .hero__floats {
    display: none;
  }
}

@media print {
  .values::after,
  .directions::after,
  .site-footer::after {
    content: none;
  }
}