:root {
  --ink: oklch(14% 0.018 245);
  --ink-2: oklch(19% 0.018 245);
  --charcoal: oklch(24% 0.014 245);
  --paper: oklch(94% 0.016 80);
  --paper-2: oklch(88% 0.02 82);
  --chalk: oklch(97% 0.006 82);
  --soft: oklch(53% 0.018 245);
  --line: oklch(78% 0.016 82);
  --signal: oklch(58% 0.17 34);
  --amber: oklch(78% 0.12 78);
  --moss: oklch(58% 0.09 154);
  --page: clamp(1rem, 2.3vw, 2.2rem);
  --ease: cubic-bezier(.22, 1, .36, 1);
  --fast: cubic-bezier(.32, .72, 0, 1);
  --sans: "Archivo", sans-serif;
  --display: "Bricolage Grotesque", sans-serif;
  --serif: "Source Serif 4", serif;
  --mono: "Sometype Mono", monospace;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  min-width: 320px;
  margin: 0;
  color: var(--ink);
  background:
    linear-gradient(90deg, oklch(25% 0.015 245 / .04) 1px, transparent 1px),
    linear-gradient(0deg, oklch(25% 0.015 245 / .035) 1px, transparent 1px),
    var(--paper);
  background-size: 48px 48px;
  font-family: var(--sans);
  -webkit-font-smoothing: antialiased;
  text-rendering: geometricPrecision;
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
  opacity: .16;
  mix-blend-mode: multiply;
  background-image:
    repeating-radial-gradient(circle at 20% 30%, oklch(20% 0.01 80 / .14) 0 1px, transparent 1px 5px),
    repeating-linear-gradient(90deg, transparent 0 4px, oklch(20% 0.01 80 / .05) 4px 5px);
}

img,
video {
  display: block;
  max-width: 100%;
}

a {
  color: inherit;
  text-decoration: none;
}

button,
input,
select {
  font: inherit;
}

.site-header {
  position: sticky;
  top: .75rem;
  z-index: 10;
  width: calc(100% - (var(--page) * 2));
  min-height: 3.65rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin: .75rem var(--page) 0;
  padding: .42rem .5rem .42rem .7rem;
  border: 1px solid oklch(97% 0.006 82 / .16);
  color: var(--chalk);
  background: oklch(13% 0.018 245 / .92);
  backdrop-filter: blur(18px);
  box-shadow: 0 16px 50px oklch(8% 0.015 245 / .22);
}

.brand,
.site-header nav {
  display: flex;
  align-items: center;
}

.brand {
  min-height: 2.5rem;
  white-space: nowrap;
}

.brand img {
  width: auto;
  height: clamp(1.45rem, 2vw, 1.85rem);
  display: block;
}

.site-header nav {
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: .12rem;
}

.site-header nav a {
  min-height: 2.5rem;
  display: inline-flex;
  align-items: center;
  padding: .2rem .72rem;
  color: oklch(97% 0.006 82 / .78);
  font-size: .82rem;
  font-weight: 800;
  white-space: nowrap;
  transition:
    color .22s var(--fast),
    background-color .22s var(--fast),
    transform .22s var(--fast);
}

.site-header nav a:hover {
  color: var(--ink);
  background: var(--amber);
  transform: translateY(-1px);
}

.eyebrow,
.wall-card span,
.note-card span,
.workflow-grid span,
.stage-copy span,
.work-group span,
.video-choice span,
.about-board span,
.version-frame span,
.version-stack span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  line-height: 1.1;
  text-transform: uppercase;
}

.reveal {
  opacity: 0;
  transform: translateY(1.6rem);
  transition:
    opacity .7s var(--ease),
    transform .7s var(--ease);
}

.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}

.hero {
  min-height: calc(100svh - 4.4rem);
  display: grid;
  grid-template-columns: minmax(20rem, .72fr) minmax(0, 1fr);
  gap: 1px;
  margin: .75rem var(--page) 0;
  background: oklch(31% 0.018 245 / .3);
}

.hero-copy,
.hero-reel {
  min-height: 42rem;
  position: relative;
  overflow: hidden;
}

.hero-copy {
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: clamp(2rem, 5.8vw, 6.5rem);
  color: var(--chalk);
  background:
    linear-gradient(145deg, oklch(22% 0.03 245), oklch(11% 0.015 245) 64%),
    var(--ink);
}

.hero-copy::after {
  content: "TPF";
  position: absolute;
  top: -.12em;
  right: -.08em;
  color: oklch(97% 0.006 82 / .035);
  font-family: var(--display);
  font-size: clamp(12rem, 33vw, 33rem);
  font-weight: 900;
  line-height: .72;
}

.hero-copy > * {
  position: relative;
  z-index: 1;
}

.hero h1,
.archive-hero h1,
.notes-hero h1,
.localise-hero h1,
.note-detail-hero h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  letter-spacing: 0;
  text-wrap: balance;
}

.hero h1 {
  max-width: 8.7ch;
  font-size: clamp(3.55rem, 5.55vw, 7.2rem);
  line-height: .82;
}

.hero-copy p:not(.eyebrow) {
  max-width: 28rem;
  margin: 0;
  color: oklch(97% 0.006 82 / .78);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 1.65vw, 1.65rem);
  line-height: 1.18;
  text-wrap: pretty;
}

.hero-reel {
  display: grid;
  align-content: end;
  background: var(--ink);
}

.hero-reel video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: saturate(.88) contrast(1.04);
}

.hero-reel::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 58%, oklch(10% 0.018 245 / .35)),
    linear-gradient(90deg, oklch(10% 0.018 245 / .2), transparent 42%);
}

.pill-link {
  width: max-content;
  min-height: 3.05rem;
  display: inline-flex;
  align-items: center;
  gap: .8rem;
  padding: .28rem .32rem .28rem 1rem;
  color: var(--ink);
  background: var(--amber);
  font-size: .86rem;
  font-weight: 900;
  transition:
    transform .24s var(--fast),
    background-color .24s var(--fast),
    color .24s var(--fast);
}

.pill-link i {
  width: 2.42rem;
  height: 2.42rem;
  display: grid;
  place-items: center;
  color: var(--chalk);
  background: var(--ink);
  font-style: normal;
  transition: transform .24s var(--fast);
}

.pill-link:hover {
  color: var(--chalk);
  background: var(--signal);
  transform: translateY(-2px);
}

.pill-link:hover i {
  transform: translate(2px, -2px);
}

.pill-link-dark {
  color: var(--ink);
  background: var(--chalk);
}

.call .pill-link {
  color: var(--chalk);
  background: var(--signal);
}

.call .pill-link i {
  color: var(--ink);
  background: var(--chalk);
}

.call .pill-link:hover {
  color: var(--ink);
  background: var(--amber);
}

.call .pill-link:hover i {
  color: var(--chalk);
  background: var(--ink);
}

.statement {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(18rem, .72fr);
  gap: 1px;
  margin: 1px var(--page) 0;
  background: var(--line);
}

.statement p {
  min-height: 14rem;
  display: grid;
  align-content: end;
  margin: 0;
  padding: clamp(1rem, 3vw, 2.6rem);
  background: var(--paper);
  color: var(--ink);
  font-family: var(--serif);
  font-size: clamp(1.45rem, 3.2vw, 3.8rem);
  font-weight: 650;
  line-height: .98;
  text-wrap: balance;
}

.statement p:first-child {
  color: var(--chalk);
  background: var(--signal);
  font-family: var(--display);
  font-weight: 900;
}

.work,
.route-board,
.call,
.archive-hero,
.notes-hero,
.localise-hero,
.about-hero,
.about-intro,
.about-frame,
.about-strip,
.about-board,
.about-split,
.about-work-with,
.about-note,
.localise-proof,
.ai-band,
.workflow-grid,
.notes-grid,
.note-detail {
  margin-inline: var(--page);
}

.work {
  --work-divider: oklch(22% 0.015 245 / .72);

  padding-block: clamp(3rem, 6vw, 6.5rem);
}

.section-head {
  display: grid;
  gap: 1px;
  margin-bottom: 1px;
  background: var(--work-divider);
}

.pillar-cue {
  width: max-content;
  max-width: min(100%, 21rem);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .45rem;
  margin: .95rem auto 0;
  color: var(--signal);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 900;
  letter-spacing: .05em;
  line-height: 1.12;
  text-align: center;
  text-transform: uppercase;
}

.pillar-cue::after {
  content: "";
  width: 0;
  height: 0;
  border-left: .28rem solid transparent;
  border-right: .28rem solid transparent;
  border-top: .42rem solid var(--signal);
  transform: translateY(.04rem);
}

.pillar-dark .pillar-cue {
  color: var(--amber);
}

.pillar-dark .pillar-cue::after {
  border-top-color: var(--amber);
}

.work-axis {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--work-divider);
}

.work-axis span {
  min-height: clamp(10rem, 18vw, 16rem);
  display: grid;
  place-items: center;
  margin: 0;
  padding: clamp(1rem, 2.6vw, 2.4rem);
  background: var(--paper);
  box-shadow: inset 0 -1px 0 var(--work-divider);
  font-family: var(--display);
  font-size: clamp(4.4rem, 10.5vw, 12rem);
  font-weight: 900;
  line-height: .82;
  text-align: center;
  text-wrap: balance;
}

.work-axis span:last-child {
  color: var(--chalk);
  background: var(--ink);
}

.work-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  background: var(--work-divider);
}

.pillar {
  display: grid;
  align-content: start;
  min-height: 44rem;
}

.pillar-axis {
  display: none;
}

.pillar-light {
  background: var(--paper);
}

.pillar-dark {
  color: var(--chalk);
  background: var(--ink);
}

.pillar-head {
  position: relative;
  min-height: clamp(14rem, 20vw, 20rem);
  display: grid;
  place-items: center;
  padding: clamp(1rem, 2.6vw, 2.4rem);
  text-align: center;
}

.pillar-head span {
  position: absolute;
  left: clamp(1rem, 2.6vw, 2.4rem);
  bottom: clamp(1rem, 2.6vw, 2.4rem);
  color: var(--signal);
  font-family: var(--mono);
  font-size: .9rem;
  font-weight: 900;
}

.pillar-dark .pillar-head span {
  color: var(--amber);
}

.pillar-head h3 {
  max-width: 12.5ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.95rem, 5.35vw, 5.75rem);
  font-weight: 900;
  line-height: .84;
  text-wrap: balance;
}

.pillar-head p {
  max-width: 24rem;
  margin: .8rem auto 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.5vw, 1.35rem);
  line-height: 1.14;
}

.pillar-dark .pillar-head p {
  color: oklch(97% 0.006 82 / .68);
}

.pillar-stage {
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translateY(-.8rem);
  transition:
    max-height .62s var(--ease),
    opacity .42s var(--ease),
    transform .52s var(--ease);
}

.pillar.is-open .pillar-stage {
  max-height: 60rem;
  opacity: 1;
  transform: translateY(0);
}

.stage-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: var(--ink);
}

.stage-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.stage-copy {
  display: grid;
  gap: .42rem;
  padding: 1rem;
  background: var(--paper-2);
}

.pillar-dark .stage-copy {
  background: var(--ink-2);
}

.stage-copy strong {
  font-family: var(--display);
  font-size: clamp(2rem, 3.8vw, 4rem);
  line-height: .88;
}

.stage-copy p {
  max-width: 34rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.05rem;
  line-height: 1.22;
}

.pillar-dark .stage-copy p {
  color: oklch(97% 0.006 82 / .68);
}

.work-groups {
  display: grid;
  gap: 1px;
  background: var(--work-divider);
}

.work-group-block {
  display: grid;
  grid-template-rows: auto 0fr;
  overflow: hidden;
  transition: grid-template-rows .42s var(--ease);
}

.work-group-block.is-open {
  grid-template-rows: auto 1fr;
}

.work-group,
.video-choice,
.archive-filter {
  border: 0;
  cursor: pointer;
  text-align: left;
}

.work-group {
  min-height: 6rem;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 7rem;
  gap: .35rem 1rem;
  align-content: center;
  padding: 1rem;
  color: inherit;
  background: oklch(96% 0.014 80);
  box-shadow: inset 0 0 0 1px oklch(22% 0.015 245 / .08);
  transition:
    background-color .22s var(--fast),
    color .22s var(--fast),
    opacity .22s var(--fast),
    transform .22s var(--fast);
}

.pillar-dark .work-group {
  background: var(--ink-2);
}

.work-group:hover,
.work-group.is-active {
  color: var(--ink);
  background: var(--amber);
  box-shadow: inset 0 0 0 1px oklch(22% 0.015 245 / .22);
  transform: translateY(-1px);
}

.work-groups:has(.work-group.is-active) .work-group:not(.is-active) {
  opacity: .38;
}

.work-group span,
.work-group strong,
.work-group p {
  grid-column: 1;
}

.work-group strong {
  font-family: var(--display);
  font-size: clamp(1.4rem, 2.5vw, 2.1rem);
  line-height: .9;
}

.work-group p {
  margin: 0;
  color: currentColor;
  opacity: .68;
  font-family: var(--serif);
  font-size: .98rem;
  line-height: 1.12;
}

.work-group small {
  grid-column: 2;
  grid-row: 1 / span 3;
  align-self: center;
  display: grid;
  justify-items: end;
  gap: .35rem;
  color: currentColor;
  opacity: .72;
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.work-group small span {
  grid-column: auto;
  color: currentColor;
}

.work-group small b {
  font-style: normal;
}

.work-group small b::before {
  content: "Show videos";
}

.work-group.is-active small b::before {
  content: "Hide videos";
}

.video-list {
  min-height: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  overflow: hidden;
  background: var(--line);
  opacity: 0;
  transform: translateY(-.4rem);
  transition:
    opacity .28s var(--ease),
    transform .36s var(--ease);
}

.work-group-block.is-open .video-list {
  opacity: 1;
  transform: translateY(0);
}

.video-choice {
  min-height: 5rem;
  display: grid;
  align-content: space-between;
  gap: .45rem;
  padding: .86rem;
  color: inherit;
  background: var(--paper-2);
  transition:
    background-color .2s var(--fast),
    color .2s var(--fast),
    transform .2s var(--fast),
    opacity .2s var(--fast);
}

.pillar-dark .video-choice {
  background: oklch(22% 0.016 245);
}

.video-choice:hover,
.video-choice.is-active {
  color: var(--ink);
  background: var(--moss);
  transform: translateY(-1px);
}

.video-list:has(.video-choice.is-active) .video-choice:not(.is-active) {
  opacity: .42;
}

.video-choice strong {
  font-size: 1.08rem;
  font-weight: 900;
  line-height: .95;
}

.route-board {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-bottom: 1px;
  background: var(--line);
}

.route-board-single {
  grid-template-columns: 1fr;
}

.route-board-single a {
  min-height: 15rem;
}

.route-board a {
  min-height: 20rem;
  display: grid;
  align-content: space-between;
  gap: 1.2rem;
  padding: 1.2rem;
  background: var(--paper);
  transition:
    background-color .24s var(--fast),
    color .24s var(--fast),
    transform .24s var(--fast);
}

.route-board a:hover {
  color: var(--chalk);
  background: var(--ink);
  transform: translateY(-2px);
}

.route-board span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: .75rem;
  font-weight: 900;
  text-transform: uppercase;
}

.route-board strong {
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(2.2rem, 4vw, 4.6rem);
  font-weight: 900;
  line-height: .86;
}

.route-board p {
  max-width: 18rem;
  margin: 0;
  color: currentColor;
  opacity: .72;
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.16;
}

.call {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(18rem, .72fr);
  gap: 1px;
  margin-bottom: var(--page);
  color: var(--chalk);
  background: var(--line);
}

.call > div {
  min-height: 24rem;
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2.6rem);
  background: var(--ink);
}

.call h2 {
  max-width: 10ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.8rem, 8vw, 8rem);
  font-weight: 900;
  line-height: .82;
}

.call p:not(.eyebrow) {
  max-width: 28rem;
  margin: 0;
  color: oklch(97% 0.006 82 / .72);
  font-family: var(--serif);
  font-size: 1.28rem;
  line-height: 1.18;
}

.archive-page {
  color: var(--chalk);
  background: var(--ink);
}

body.is-lightbox-open {
  overflow: hidden;
}

.archive-hero,
.notes-hero,
.localise-hero,
.about-hero,
.note-detail-hero {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(16rem, .42fr);
  gap: 1px;
  margin-top: .75rem;
  background: var(--line);
}

.archive-hero > *,
.notes-hero > *,
.localise-hero > *,
.about-hero > *,
.note-detail-hero > * {
  display: grid;
  align-content: end;
  margin: 0;
  padding: clamp(1.3rem, 3.4vw, 3rem);
  background: var(--paper);
}

.archive-hero,
.archive-hero > * {
  color: var(--chalk);
  background-color: var(--ink);
}

.archive-hero {
  grid-template-columns: 1fr;
}

.archive-hero h1,
.notes-hero h1,
.localise-hero h1,
.about-hero h1,
.note-detail-hero h1 {
  max-width: 9.5ch;
  font-size: clamp(4.1rem, 10vw, 11rem);
  line-height: .78;
}

.archive-hero p,
.notes-hero p,
.localise-hero p,
.about-hero p,
.note-detail-hero p {
  max-width: 30rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.2rem, 2vw, 1.55rem);
  line-height: 1.16;
}

.archive-hero p {
  color: oklch(97% 0.006 82 / .72);
}

.archive-controls {
  position: sticky;
  top: 5.1rem;
  z-index: 8;
  margin: 1px var(--page);
  background: var(--line);
}

.archive-filter-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
  gap: 1px;
}

.archive-filter {
  min-height: clamp(4.2rem, 5.4vw, 5.6rem);
  display: grid;
  align-content: center;
  padding: clamp(.72rem, 1.05vw, .95rem);
  color: var(--ink);
  background: var(--paper);
  cursor: pointer;
  transition:
    background-color .18s var(--fast),
    color .18s var(--fast),
    transform .18s var(--fast);
}

.archive-filter span {
  font-size: clamp(1rem, 1.28vw, 1.42rem);
  font-weight: 900;
  line-height: .92;
  overflow-wrap: normal;
  text-wrap: nowrap;
  white-space: nowrap;
}

.archive-filter:hover:not(:disabled),
.archive-filter.is-active {
  color: var(--chalk);
  background: var(--signal);
}

.archive-filter:active:not(:disabled) {
  transform: scale(.98);
}

.archive-wall {
  margin: 1px var(--page) var(--page);
}

.wall-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
  grid-auto-rows: .52rem;
  gap: 1px;
  background: oklch(9% 0.016 245);
}

.wall-card {
  grid-row: span var(--row-span);
  position: relative;
  min-height: 12rem;
  display: grid;
  align-content: end;
  overflow: hidden;
  color: var(--chalk);
  background: oklch(9% 0.016 245);
  transition:
    opacity .25s var(--ease),
    transform .25s var(--ease),
    filter .25s var(--ease);
}

.wall-card.is-hidden {
  display: none;
}

.wall-grid.is-filtering .wall-card:not(.is-hidden) {
  animation: archive-card-in .42s var(--ease) both;
  animation-delay: var(--filter-stagger, 0ms);
}

.wall-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  aspect-ratio: var(--media-ratio);
  transform: scale(1.01);
  transition: transform .48s var(--ease);
}

.wall-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 25%, oklch(8% 0.016 245 / .86) 88%),
    linear-gradient(90deg, oklch(8% 0.016 245 / .32), transparent 55%);
}

.wall-card:hover {
  z-index: 2;
  transform: translateY(-2px);
}

.wall-card:hover img {
  transform: scale(1.06);
}

.wall-card span,
.wall-card strong,
.wall-card small {
  position: relative;
  z-index: 1;
  margin-inline: .8rem;
}

.wall-card span {
  color: var(--amber);
  margin-bottom: .24rem;
}

.wall-card strong {
  margin-bottom: .75rem;
  font-family: var(--display);
  font-size: clamp(1.18rem, 2vw, 1.65rem);
  font-weight: 900;
  line-height: .92;
  text-shadow: 0 1px 20px oklch(8% 0.016 245 / .5);
}

.wall-role {
  margin-bottom: .8rem;
  padding: .55rem;
  color: var(--ink);
  background: var(--amber);
  font-family: var(--mono);
  font-size: .66rem;
  font-weight: 900;
  line-height: 1.08;
  text-transform: uppercase;
  opacity: 0;
  transform: translateY(.35rem);
  transition:
    opacity .24s var(--ease),
    transform .24s var(--ease);
}

.wall-card:hover .wall-role {
  opacity: 1;
  transform: translateY(0);
}

@keyframes archive-card-in {
  from {
    opacity: 0;
    transform: translateY(.8rem);
    filter: blur(4px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
    filter: blur(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .wall-grid.is-filtering .wall-card:not(.is-hidden) {
    animation: none;
  }

  .archive-lightbox-panel {
    transition: none;
    transform: none;
  }
}

.archive-lightbox {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: grid;
  place-items: center;
  padding: clamp(.75rem, 2vw, 1.5rem);
  color: var(--chalk);
  opacity: 0;
  transition: opacity .22s var(--fast);
}

.archive-lightbox[hidden] {
  display: none;
}

.archive-lightbox.is-open {
  opacity: 1;
}

.archive-lightbox-backdrop {
  position: absolute;
  inset: 0;
  border: 0;
  cursor: zoom-out;
  background: oklch(7% 0.014 245 / .86);
}

.archive-lightbox-panel {
  position: relative;
  width: min(92rem, 100%);
  max-height: calc(100vh - clamp(1.5rem, 4vw, 3rem));
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  overflow: hidden;
  background: var(--ink);
  opacity: 0;
  transform: translateY(.8rem) scale(.985);
  transition:
    opacity .24s var(--ease),
    transform .24s var(--ease);
  box-shadow: 0 1.8rem 5rem oklch(4% 0.012 245 / .62);
}

.archive-lightbox.is-open .archive-lightbox-panel {
  opacity: 1;
  transform: translateY(0) scale(1);
}

.archive-lightbox-frame {
  position: relative;
  aspect-ratio: 16 / 9;
  background: oklch(4% 0.012 245);
}

.archive-lightbox-frame iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.archive-lightbox-copy {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 1rem;
  align-items: end;
  padding: clamp(.9rem, 2vw, 1.25rem);
  background: var(--ink-2);
}

.archive-lightbox-copy span {
  color: var(--amber);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
}

.archive-lightbox-copy h2 {
  max-width: 22ch;
  margin: .25rem 0 0;
  font-size: clamp(2rem, 4vw, 4rem);
  line-height: .88;
}

.archive-lightbox-copy p {
  max-width: 40rem;
  margin: .45rem 0 0;
  color: oklch(97% 0.006 82 / .68);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  line-height: 1.12;
  text-transform: uppercase;
}

.archive-lightbox-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1px;
  justify-content: flex-end;
  background: oklch(97% 0.006 82 / .18);
}

.archive-lightbox-actions a,
.archive-lightbox-actions button {
  min-height: 2.7rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  padding: .75rem 1rem;
  color: var(--chalk);
  background: var(--ink);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  text-transform: uppercase;
  cursor: pointer;
}

.archive-lightbox-actions a:hover,
.archive-lightbox-actions button:hover,
.archive-lightbox-actions a:focus-visible,
.archive-lightbox-actions button:focus-visible {
  color: var(--ink);
  background: var(--amber);
}

.notes-hero,
.localise-hero,
.about-hero,
.note-detail-hero {
  min-height: 36rem;
}

.about-intro {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(18rem, .44fr);
  gap: 1px;
  margin-top: .75rem;
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--line);
}

.about-intro-head,
.about-hero-copy {
  min-height: clamp(28rem, 48vw, 43rem);
  margin: 0;
  padding: clamp(1.3rem, 3.4vw, 3rem);
  background: var(--paper);
}

.about-intro-head {
  position: relative;
  display: grid;
  align-content: space-between;
  gap: clamp(3rem, 10vw, 10rem);
  overflow: hidden;
  isolation: isolate;
  background: var(--paper);
}

.about-intro-head::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    linear-gradient(90deg, oklch(94% 0.016 80 / .92), oklch(94% 0.016 80 / .72) 62%, oklch(94% 0.016 80 / .38)),
    linear-gradient(180deg, oklch(94% 0.016 80 / .32), oklch(94% 0.016 80 / .86));
}

.about-intro-video {
  position: absolute;
  inset: 0;
  z-index: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .62;
  filter: saturate(.88) contrast(1.08);
  transform: scale(1.02);
}

.about-intro-head > :not(.about-intro-video) {
  position: relative;
  z-index: 2;
}

.about-intro h1 {
  max-width: 12ch;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(3.7rem, 6.35vw, 7.4rem);
  font-weight: 900;
  line-height: .82;
  text-wrap: balance;
}

.about-hero-copy {
  display: grid;
  align-content: end;
  gap: clamp(1rem, 1.7vw, 1.45rem);
}

.about-hero-copy p {
  max-width: 32rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  line-height: 1.14;
}

.about-hero-copy p:last-child {
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.1rem, 1.5vw, 1.45rem);
  font-weight: 650;
  line-height: 1.14;
  text-transform: none;
}

.about-clients {
  margin-top: 1px;
  display: grid;
  grid-template-columns: minmax(16rem, .46fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--line);
}

.about-clients-head {
  min-height: clamp(16rem, 26vw, 26rem);
  display: grid;
  align-content: end;
  gap: .85rem;
  padding: clamp(1.1rem, 2.8vw, 2.4rem);
  background: var(--paper);
}

.about-clients-head h2 {
  max-width: 100%;
  margin: 0;
  color: var(--ink);
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.25vw, 3.95rem);
  font-weight: 900;
  line-height: .88;
  overflow-wrap: normal;
  text-wrap: balance;
}

.about-clients-head p:not(.eyebrow) {
  max-width: 22rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.05rem, 1.45vw, 1.38rem);
  font-weight: 650;
  line-height: 1.14;
}

.client-name-wall {
  list-style: none;
  margin: 0;
  padding: clamp(1.1rem, 2.8vw, 2.4rem);
  display: flex;
  flex-wrap: wrap;
  align-content: center;
  align-items: center;
  gap: .62rem 1rem;
  min-height: clamp(16rem, 26vw, 26rem);
  background: var(--paper-2);
}

.client-name-wall li {
  color: oklch(22% 0.015 245 / .68);
  overflow-wrap: anywhere;
  font-family: var(--mono);
  font-size: clamp(.68rem, .82vw, .86rem);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: 0;
  text-transform: uppercase;
}

.client-name-wall li::after {
  content: "/";
  margin-left: 1rem;
  color: oklch(58% 0.17 34 / .78);
}

.client-name-wall li:last-child::after {
  content: "";
  margin: 0;
}

.about-frame {
  margin-top: 1px;
  background: var(--line);
}

.about-frame img {
  width: 100%;
  height: clamp(18rem, 44vw, 42rem);
  object-fit: cover;
  object-position: center 50%;
  filter: saturate(.9) contrast(1.02);
}

.about-hero h1 {
  max-width: 12ch;
  font-size: clamp(3.3rem, 7.6vw, 8.8rem);
}

.about-strip {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(18rem, 1fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.about-strip p {
  min-height: clamp(13rem, 22vw, 24rem);
  display: grid;
  align-content: end;
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2.8rem);
  background: var(--paper);
  font-family: var(--serif);
  font-size: clamp(1.55rem, 3.5vw, 4rem);
  font-weight: 650;
  line-height: .98;
}

.about-strip p:nth-child(2) {
  max-width: 42rem;
  font-size: clamp(1.22rem, 2.15vw, 2.35rem);
  line-height: 1.08;
}

.about-strip p:first-child {
  color: var(--chalk);
  background: var(--ink);
  font-family: var(--display);
  font-weight: 900;
}

.about-split {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.about-split article {
  min-height: clamp(19rem, 28vw, 28rem);
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.6vw, 2.3rem);
  background: var(--paper);
}

.about-split article:nth-child(2) {
  color: var(--chalk);
  background: var(--ink);
}

.about-split article:nth-child(2) p {
  color: oklch(97% 0.006 82 / .68);
}

.about-split h2,
.about-work-head h2,
.about-note h2 {
  margin: 0;
  font-family: var(--display);
  font-weight: 900;
  text-wrap: balance;
}

.about-split h2 {
  max-width: 17ch;
  font-size: clamp(2.5rem, 4.9vw, 5.8rem);
  line-height: .86;
}

.about-split p,
.about-work-head p,
.about-work-cards p,
.about-note p {
  max-width: 24rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.15rem;
  line-height: 1.16;
}

.about-work-with {
  margin-top: 1px;
  background: var(--line);
}

.about-work-head {
  min-height: clamp(15rem, 26vw, 26rem);
  display: grid;
  align-content: end;
  gap: .8rem;
  padding: clamp(1.2rem, 3vw, 2.8rem);
  background: var(--amber);
}

.about-work-head span,
.about-split span,
.about-work-cards span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.about-work-head h2 {
  max-width: 15ch;
  font-size: clamp(3rem, 7vw, 7.6rem);
  line-height: .82;
}

.about-work-cards {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--line);
}

.about-work-cards article {
  min-height: clamp(10rem, 15vw, 14rem);
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: clamp(1rem, 2.2vw, 2rem);
  background: var(--paper);
}

.about-work-cards article:nth-child(2) {
  background: var(--paper-2);
}

.about-work-cards article:nth-child(3) {
  color: var(--chalk);
  background: var(--ink);
}

.about-work-cards article:nth-child(3) p {
  color: oklch(97% 0.006 82 / .68);
}

.about-work-cards h3 {
  max-width: 12ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.1rem, 3.2vw, 4rem);
  font-weight: 900;
  line-height: .86;
}

.about-note {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(16rem, .44fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.about-note > div {
  min-height: clamp(21rem, 32vw, 32rem);
  display: grid;
  align-content: end;
  gap: 1rem;
  padding: clamp(1.2rem, 3vw, 2.8rem);
  background: var(--paper);
}

.about-note h2 {
  max-width: 13ch;
  font-size: clamp(2.8rem, 5.8vw, 6.4rem);
  line-height: .82;
}

.about-note img {
  width: 100%;
  height: 100%;
  min-height: clamp(18rem, 32vw, 32rem);
  object-fit: cover;
  object-position: center;
  filter: saturate(.82) contrast(1.02);
}

.about-board {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  margin-bottom: var(--page);
  background: var(--line);
}

.about-board article {
  min-height: 25rem;
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 2rem);
  background: var(--paper);
}

.about-board article:nth-child(2) {
  color: var(--chalk);
  background: var(--ink);
}

.about-board article:nth-child(2) p {
  color: oklch(97% 0.006 82 / .68);
}

.about-board article:nth-child(3) {
  background: var(--amber);
}

.about-board h2 {
  max-width: 18ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(1.95rem, 3vw, 3.7rem);
  font-weight: 900;
  line-height: .9;
}

.about-board p {
  max-width: 22rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.12rem;
  line-height: 1.16;
}

.notes-grid,
.workflow-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  margin-top: 1px;
  margin-bottom: var(--page);
  background: var(--line);
}

.note-card,
.workflow-grid article {
  min-height: 26rem;
  position: relative;
  display: grid;
  align-content: end;
  gap: .7rem;
  overflow: hidden;
  padding: 1rem;
  background: var(--paper);
}

.note-large {
  grid-column: span 2;
  grid-row: span 2;
  min-height: 52rem;
}

.note-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: .68;
  filter: saturate(.82) contrast(1.02);
  transition: transform .5s var(--ease);
}

.note-card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, transparent 20%, oklch(94% 0.016 80 / .94) 82%);
}

.note-card:hover img {
  transform: scale(1.05);
}

.note-card span,
.note-card strong,
.note-card p {
  position: relative;
  z-index: 1;
}

.note-card strong,
.workflow-grid h2 {
  max-width: 11ch;
  font-family: var(--display);
  font-size: clamp(2.2rem, 3.6vw, 4.4rem);
  font-weight: 900;
  line-height: .86;
}

.note-card p,
.workflow-grid p {
  max-width: 22rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.13rem;
  line-height: 1.16;
}

.localise-hero {
  grid-template-columns: minmax(0, 1fr);
  color: var(--chalk);
  background: var(--ink);
}

.localise-hero > * {
  justify-items: center;
  text-align: center;
  background: var(--ink);
}

.localise-hero p {
  justify-self: center;
  max-width: min(56rem, calc(100vw - 4rem));
  color: oklch(97% 0.006 82 / .72);
}

.localise-finish-list {
  white-space: nowrap;
}

.localise-hero h1 {
  max-width: 11.4ch;
  margin-inline: auto;
  font-size: clamp(4.2rem, 9.2vw, 10rem);
  text-align: center;
}

.localise-proof {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(18rem, .42fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.localise-loop-frame {
  aspect-ratio: 2 / 1;
  position: relative;
  align-self: start;
  display: grid;
  margin: 0;
  overflow: hidden;
  background: var(--ink);
}

.localise-loop-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  box-shadow:
    inset 0 0 0 1px oklch(97% 0.006 82 / .14),
    inset 0 -7rem 8rem oklch(5% 0.012 245 / .4);
}

.localise-loop-frame video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
}

.localise-proof-copy {
  display: grid;
  place-content: center;
  justify-items: center;
  text-align: center;
  gap: clamp(1.2rem, 3vw, 2.2rem);
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--paper);
}

.localise-proof-copy h2 {
  max-width: 8.5ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 5.8vw, 6.2rem);
  font-weight: 900;
  line-height: .82;
}

.localise-proof-copy p:not(.eyebrow) {
  max-width: 24rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.2rem;
  line-height: 1.16;
}

.localise-proof-copy ul {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.localise-proof-copy li {
  min-height: 4.8rem;
  display: grid;
  align-content: end;
  padding: .75rem;
  background: var(--paper-2);
  color: var(--ink);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 900;
  line-height: 1;
  text-transform: uppercase;
}

.version-frame {
  min-height: clamp(24rem, 42vw, 42rem);
  position: relative;
  display: grid;
  align-content: space-between;
  overflow: hidden;
  padding: clamp(1rem, 3vw, 2.8rem);
  color: var(--chalk);
  background:
    linear-gradient(135deg, oklch(18% 0.02 245), oklch(8% 0.014 245)),
    var(--ink);
}

.version-frame::before {
  content: "";
  position: absolute;
  inset: clamp(1rem, 2vw, 2rem);
  border: 1px solid oklch(97% 0.006 82 / .2);
  background:
    linear-gradient(90deg, transparent 24%, oklch(97% 0.006 82 / .12) 24% 24.4%, transparent 24.4%),
    linear-gradient(0deg, transparent 68%, oklch(97% 0.006 82 / .12) 68% 68.4%, transparent 68.4%);
}

.version-frame::after {
  content: "VERSION";
  position: absolute;
  right: -.06em;
  bottom: -.08em;
  color: oklch(97% 0.006 82 / .04);
  font-family: var(--display);
  font-size: clamp(8rem, 19vw, 19rem);
  font-weight: 900;
  line-height: .75;
}

.version-frame > * {
  position: relative;
  z-index: 1;
}

.version-frame span,
.version-stack span {
  color: var(--amber);
}

.version-frame strong {
  max-width: 8ch;
  font-family: var(--display);
  font-size: clamp(4rem, 10vw, 10rem);
  font-weight: 900;
  line-height: .78;
}

.version-frame small {
  color: oklch(97% 0.006 82 / .7);
  font-family: var(--mono);
  font-size: .74rem;
  font-weight: 900;
  text-transform: uppercase;
}

.version-stack {
  display: grid;
  gap: 1px;
  background: var(--line);
}

.version-stack article {
  display: grid;
  align-content: space-between;
  gap: 1rem;
  padding: clamp(1rem, 2.4vw, 2rem);
  background: var(--paper);
}

.version-stack article:last-child {
  color: var(--chalk);
  background: var(--ink);
}

.version-stack strong {
  max-width: 12ch;
  font-family: var(--display);
  font-size: clamp(2.4rem, 4.6vw, 5rem);
  font-weight: 900;
  line-height: .86;
}

.version-stack p {
  max-width: 20rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.14rem;
  line-height: 1.16;
}

.version-stack article:last-child p {
  color: oklch(97% 0.006 82 / .68);
}

.ai-band {
  display: grid;
  grid-template-columns: minmax(0, .7fr) minmax(20rem, .8fr);
  gap: 1px;
  margin-top: 1px;
  background: var(--line);
}

.ai-band > * {
  margin: 0;
  padding: clamp(1.2rem, 3vw, 2.4rem);
  background: var(--paper);
}

.ai-band h2 {
  max-width: 9ch;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.5rem, 7vw, 7.5rem);
  font-weight: 900;
  line-height: .82;
}

.ai-band ol {
  display: grid;
  gap: 1px;
  padding: 0;
  list-style: none;
  background: var(--line);
}

.ai-band li {
  display: grid;
  grid-template-columns: 3.5rem 1fr;
  gap: 1rem;
  align-items: start;
  padding: 1rem;
  background: var(--paper);
  color: var(--soft);
  font-family: var(--serif);
  font-size: 1.24rem;
  line-height: 1.18;
}

.ai-band li span {
  color: var(--signal);
  font-family: var(--mono);
  font-size: .78rem;
  font-weight: 900;
}

.workflow-grid article {
  min-height: 22rem;
  align-content: space-between;
}

.workflow-grid article:nth-child(2) {
  background: var(--paper-2);
}

.workflow-grid article:nth-child(3) {
  color: var(--chalk);
  background: var(--ink);
}

.workflow-grid article:nth-child(3) p {
  color: oklch(97% 0.006 82 / .68);
}

.workflow-grid article:nth-child(4) {
  background: var(--amber);
}

.note-detail {
  display: grid;
  gap: 1px;
  margin-top: .75rem;
  margin-bottom: var(--page);
  background: var(--line);
}

.note-detail-hero {
  margin: 0;
}

.note-detail-image {
  margin: 0;
  background: var(--ink);
}

.note-detail-image img {
  width: 100%;
  max-height: 72svh;
  object-fit: cover;
}

.note-detail-body {
  display: grid;
  gap: 1rem;
  padding: clamp(1.3rem, 3.5vw, 3.2rem);
  background: var(--paper);
}

.note-detail-body p {
  max-width: 52rem;
  margin: 0;
  color: var(--soft);
  font-family: var(--serif);
  font-size: clamp(1.35rem, 2.4vw, 2.45rem);
  font-weight: 650;
  line-height: 1.06;
}

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

  .reveal {
    opacity: 1;
    transform: none;
  }
}

@media (max-width: 1120px) {
  .work-board,
  .route-board,
  .notes-grid,
  .workflow-grid,
  .about-board,
  .about-work-cards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .archive-filter-row {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .pillar {
    min-height: auto;
  }

  .pillar-head {
    min-height: 20rem;
  }
}

@media (max-width: 820px) {
  .site-header {
    position: static;
    width: auto;
    display: grid;
    grid-template-columns: 1fr;
    align-items: flex-start;
    gap: .45rem;
    margin-inline: .75rem;
    padding: .55rem;
  }

  .site-header nav {
    width: 100%;
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1px;
    background: oklch(97% 0.006 82 / .14);
  }

  .site-header nav a {
    min-height: 2.2rem;
    justify-content: center;
    padding: .2rem .35rem;
    background: oklch(13% 0.018 245 / .86);
    font-size: .76rem;
  }

  .hero,
  .statement,
  .section-head,
  .work-board,
  .call,
  .archive-hero,
  .notes-hero,
  .localise-hero,
  .about-hero,
  .about-intro,
  .about-clients,
  .about-split,
  .about-note,
  .about-strip,
  .localise-proof,
  .ai-band,
  .note-detail-hero {
    grid-template-columns: 1fr;
  }

  .hero,
  .statement,
  .work,
  .route-board,
  .call,
  .archive-hero,
  .archive-controls,
  .archive-wall,
  .notes-hero,
  .localise-hero,
  .about-hero,
  .about-intro,
  .about-clients,
  .about-frame,
  .about-strip,
  .about-board,
  .about-split,
  .about-work-with,
  .about-note,
  .localise-proof,
  .ai-band,
  .workflow-grid,
  .notes-grid,
  .note-detail {
    margin-inline: .75rem;
  }

  .hero-copy,
  .hero-reel {
    min-height: 34rem;
  }

  .about-intro-head,
  .about-hero-copy {
    min-height: auto;
  }

  .about-intro h1 {
    max-width: 11ch;
    font-size: clamp(3.4rem, 15vw, 6rem);
  }

  .about-hero-copy {
    align-content: start;
  }

  .pillar-head {
    min-height: 14rem;
    padding: 1rem;
  }

  .route-board,
  .notes-grid,
  .workflow-grid,
  .about-board,
  .about-split,
  .about-work-cards,
  .work-axis {
    grid-template-columns: 1fr;
  }

  .work-axis {
    display: none;
  }

  .localise-hero h1 {
    max-width: 100%;
    font-size: clamp(3.35rem, 16vw, 4.1rem);
    line-height: .82;
  }

  .localise-loop-frame {
    min-height: 0;
    aspect-ratio: 2 / 1;
  }

  .localise-proof-copy h2 {
    font-size: clamp(2.85rem, 13vw, 4rem);
  }

  .pillar-axis {
    min-height: clamp(7rem, 24vw, 10rem);
    display: grid;
    place-items: center;
    padding: 1rem;
    box-shadow: inset 0 -1px 0 var(--work-divider);
    font-family: var(--display);
    font-size: clamp(3.4rem, 18vw, 6rem);
    font-weight: 900;
    line-height: .82;
    text-align: center;
  }

  .pillar-dark .pillar-axis {
    box-shadow: inset 0 -1px 0 var(--work-divider);
  }

  .note-large {
    grid-column: auto;
    grid-row: auto;
    min-height: 30rem;
  }

  .archive-controls {
    position: static;
  }

  .wall-grid {
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
  }

  .archive-lightbox {
    padding: .75rem;
  }

  .archive-lightbox-copy {
    grid-template-columns: 1fr;
  }

  .archive-lightbox-actions {
    justify-content: stretch;
  }

  .archive-lightbox-actions a,
  .archive-lightbox-actions button {
    flex: 1 1 10rem;
  }

  .about-split h2 {
    font-size: clamp(2.15rem, 7vw, 3.35rem);
    line-height: .92;
  }

  .about-work-cards article {
    min-height: 11rem;
  }

  .client-name-wall {
    justify-content: flex-start;
    min-height: auto;
  }

  .client-name-wall li {
    text-align: left;
  }

  .about-work-head h2,
  .about-note h2 {
    font-size: clamp(2.55rem, 10vw, 4.8rem);
  }
}

@media (max-width: 560px) {
  html,
  body {
    overflow-x: hidden;
  }

  .site-header {
    width: calc(100vw - 1.5rem);
    display: grid;
  }

  .site-header nav {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    justify-content: flex-start;
  }

  .about-clients {
    padding: 0;
  }

  .about-clients-head {
    display: grid;
    gap: .8rem;
  }

  .client-name-wall {
    gap: .55rem .9rem;
    padding: 1rem;
  }

  .client-name-wall li {
    font-size: .72rem;
  }

  .site-header nav a {
    min-width: 0;
    padding-inline: .35rem;
  }

  .localise-hero,
  .localise-proof,
  .ai-band,
  .workflow-grid {
    width: calc(100vw - 1.5rem);
    max-width: calc(100vw - 1.5rem);
  }

  .localise-hero > *,
  .localise-loop-frame,
  .localise-proof-copy {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    overflow: hidden;
  }

  .localise-hero p,
  .localise-proof-copy p:not(.eyebrow) {
    width: min(100%, calc(100vw - 4rem));
    max-width: calc(100vw - 4rem);
    overflow-wrap: anywhere;
  }

  .localise-hero p {
    width: min(18rem, calc(100vw - 3rem));
    max-width: min(18rem, calc(100vw - 3rem));
    font-size: 1.08rem;
  }

  .localise-finish-list {
    white-space: normal;
  }

  .localise-loop-frame {
    min-height: auto;
    aspect-ratio: 2 / 1;
  }

  .localise-loop-frame video {
    height: 100%;
    min-height: 0;
    aspect-ratio: 2 / 1;
    object-fit: contain;
  }

  .localise-proof-copy ul {
    width: min(100%, calc(100vw - 4rem));
    grid-template-columns: 1fr;
  }

  .hero h1,
  .archive-hero h1,
  .notes-hero h1,
  .localise-hero h1,
  .about-hero h1,
  .note-detail-hero h1 {
    font-size: clamp(3.4rem, 18vw, 5.8rem);
  }

  .localise-hero h1 {
    font-size: clamp(2.5rem, 11vw, 2.95rem);
  }

  .localise-proof-copy h2 {
    font-size: clamp(2.35rem, 10.5vw, 2.85rem);
    overflow-wrap: anywhere;
  }

  .work-axis span {
    min-height: 7rem;
    font-size: clamp(3.4rem, 18vw, 5.8rem);
  }

  .hero-copy,
  .hero-reel {
    min-height: 30rem;
  }

  .statement p {
    min-height: 10rem;
  }

  .pillar-head {
    grid-template-columns: 1fr;
  }

  .video-list,
  .archive-filter-row {
    grid-template-columns: 1fr;
  }

  .work-group {
    grid-template-columns: 1fr;
  }

  .work-group small {
    grid-column: 1;
    grid-row: auto;
    justify-items: start;
  }

  .work-group small {
    grid-column: 1;
    grid-row: auto;
  }

  .wall-grid {
    grid-template-columns: 1fr;
  }

  .ai-band li {
    grid-template-columns: 1fr;
  }
}