:root {
  --ink: #161d2a;
  --saffron: #f4b942;
  --ice: #cfe5f4;
  --rose: #d94a64;
  --jade: #3f8f78;
  --milk: #f7f1e6;
  --white: #fffdf8;
  --display: "Faculty Glyphic", "Times New Roman", serif;
  --sans: "Commissioner", "Arial", sans-serif;
  --pad: clamp(1.1rem, 3vw, 3.5rem);
  --header: 4.4rem;
}

@property --handoff-word {
  syntax: "<length>";
  inherits: false;
  initial-value: 14rem;
}

@property --handoff-photo {
  syntax: "<length>";
  inherits: false;
  initial-value: 34vw;
}

html,
body {
  overflow-x: hidden;
  max-width: 100%;
}

* {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  background: var(--milk);
}

body {
  margin: 0;
  background: var(--milk);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: 1.05rem;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
}

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

.detail a,
.legal a,
.about-prose a,
.film__body a,
.enquiry__note a,
.stage a,
.notice a,
.thanks a,
.about-bridge a {
  text-decoration: underline;
  text-underline-offset: 0.18em;
}

button,
input,
textarea {
  font-family: inherit;
}

a {
  color: inherit;
}

::selection {
  background: var(--saffron);
  color: var(--ink);
}

.skip {
  position: absolute;
  left: 1rem;
  top: -4rem;
  background: var(--ink);
  color: var(--milk);
  padding: 0.6rem 0.8rem;
  z-index: 100;
}

.skip:focus {
  top: 0.6rem;
}

.mast {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  min-height: var(--header);
  padding: 0.55rem var(--pad);
  background: var(--milk);
}

.mast__brand {
  display: block;
  line-height: 0;
}

.mast__brand img {
  height: 2.4rem;
  width: auto;
}

.mast__actions {
  display: flex;
  align-items: center;
  gap: 0.4rem 1.1rem;
}

.mast__work,
.mast__menu,
.takeover__close {
  appearance: none;
  background: transparent;
  border: 0;
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 600;
  font-size: 0.92rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  text-decoration: none;
  padding: 0.45rem 0.2rem;
  cursor: pointer;
}

.mast__work,
.takeover__close,
.link {
  position: relative;
  z-index: 0;
  text-decoration: none;
}

.mast__work::before,
.takeover__close::before,
.link::before {
  content: "";
  position: absolute;
  left: -0.2rem;
  bottom: 0.15rem;
  width: 0.42rem;
  height: 0.85em;
  background: var(--saffron);
  z-index: -1;
  transition: width 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.mast__work:hover::before,
.mast__work:focus-visible::before,
.takeover__close:hover::before,
.takeover__close:focus-visible::before,
.link:hover::before,
.link:focus-visible::before {
  width: calc(100% + 0.45rem);
}

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  min-height: 3.1rem;
  padding: 0.85rem 1.35rem;
  border: 0;
  border-radius: 4px;
  background: var(--saffron);
  color: var(--ink);
  font-weight: 600;
  font-size: 1rem;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.btn__sweep {
  position: absolute;
  inset: 0;
  background: var(--jade);
  transform: translateX(-105%);
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.btn:hover .btn__sweep,
.btn:focus-visible .btn__sweep {
  transform: translateX(0);
}

.btn__label {
  position: relative;
  z-index: 1;
}

.btn--rose {
  background: var(--rose);
  color: var(--white);
}

.btn--rose .btn__sweep {
  background: var(--ink);
}

:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 3px;
}

.takeover {
  position: fixed;
  inset: 0;
  z-index: 70;
  overflow: hidden;
}

.takeover[hidden] {
  display: none;
}

.takeover__layer {
  position: absolute;
  inset: 0;
  transform: translate3d(-105%, 0, 0);
}

.takeover__layer--rose {
  background: var(--rose);
}

.takeover__layer--ice {
  background: var(--ice);
}

.takeover__layer--ink {
  background: var(--ink);
}

.takeover.is-open .takeover__layer--rose {
  animation: layer-in 420ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.takeover.is-open .takeover__layer--ice {
  animation: layer-in 460ms 70ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.takeover.is-open .takeover__layer--ink {
  animation: layer-in 480ms 140ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.takeover.is-closing .takeover__layer {
  animation: layer-out 280ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.takeover.is-closing .takeover__layer--ice {
  animation-delay: 40ms;
}

.takeover.is-closing .takeover__layer--rose {
  animation-delay: 80ms;
}

@keyframes layer-in {
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes layer-out {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(105%, 0, 0);
  }
}

.takeover__panel {
  position: relative;
  z-index: 2;
  height: 100%;
  color: var(--milk);
  display: grid;
  grid-template-columns: minmax(0, 1.3fr) minmax(12rem, 0.7fr);
  grid-template-rows: auto 1fr auto;
  gap: 1.5rem 4vw;
  padding: calc(var(--header) + 0.5rem) var(--pad) 2rem;
  opacity: 0;
  pointer-events: none;
}

.takeover.is-open .takeover__panel {
  animation: panel-in 200ms 460ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
  pointer-events: auto;
}

@keyframes panel-in {
  to {
    opacity: 1;
  }
}

.takeover__close {
  color: var(--milk);
  justify-self: end;
  grid-column: 2;
  grid-row: 1;
}

.takeover__close::before {
  background: var(--saffron);
}

.takeover__nav {
  grid-column: 1;
  grid-row: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
}

.takeover__nav a {
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 5.6rem);
  line-height: 1.08;
  text-decoration: none;
  color: var(--milk);
}

.takeover__nav a[aria-current="page"] {
  color: var(--saffron);
}

.takeover__shot {
  grid-column: 2;
  grid-row: 2;
  margin: 0;
  align-self: end;
  width: min(100%, 18rem);
  justify-self: end;
  overflow: hidden;
}

.takeover__shot img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.takeover__phrase,
.takeover__contact {
  margin: 0;
}

.takeover__phrase {
  grid-column: 1;
  grid-row: 3;
  max-width: 22rem;
  font-size: 1rem;
}

.takeover__contact {
  grid-column: 2;
  grid-row: 3;
  justify-self: end;
  text-align: right;
  font-weight: 500;
}

.takeover__contact a {
  display: block;
  color: var(--milk);
  text-decoration: none;
}

html.menu-lock,
html.menu-lock body {
  overflow: hidden;
  max-width: 100%;
}

.opening {
  display: grid;
  grid-template-columns: minmax(16rem, 36%) minmax(0, 1fr);
  grid-template-rows: auto 1fr auto;
  min-height: 100vh;
  min-height: 100dvh;
  padding: var(--header) 0 0;
  background: var(--milk);
  position: relative;
  overflow: hidden;
}

.opening__name {
  grid-column: 1;
  grid-row: 1;
  margin: 1.2rem 0 0;
  padding: 0 var(--pad);
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

.opening__title {
  grid-column: 1;
  grid-row: 2;
  align-self: end;
  margin: 0;
  padding: 0 var(--pad) 0.4rem;
  font-family: var(--display);
  font-size: clamp(2.5rem, 4vw, 4.4rem);
  font-weight: 400;
  line-height: 1.16;
  letter-spacing: -0.02em;
  animation: title-crop 380ms cubic-bezier(0.2, 0.6, 0.2, 1) both;
}

@keyframes title-crop {
  from {
    clip-path: inset(0 0 100% 0);
  }
  to {
    clip-path: inset(0 0 0 0);
  }
}

.opening__note {
  grid-column: 1;
  grid-row: 3;
  margin: 1.2rem 0 2.2rem;
  padding: 0 var(--pad);
  max-width: 28rem;
  font-size: 1rem;
}

.opening__shot {
  grid-column: 2;
  grid-row: 1 / span 3;
  position: relative;
  min-height: 78vh;
  margin-right: -7vw;
  margin-top: 0.6rem;
  overflow: hidden;
}

.opening__base,
.opening__alt {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.opening__base {
  position: absolute;
  inset: 0;
  object-position: 48% 42%;
}

.opening__alt {
  position: absolute;
  inset: 0;
  object-position: 72% 92%;
  pointer-events: none;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360'%3E%3Cpath fill='black' d='M30 230C150 70 280 310 490 160C690 20 860 300 1100 150C1160 110 1180 180 1170 210C1040 300 900 80 700 210C520 330 360 40 180 170C100 230 40 180 30 260Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 360'%3E%3Cpath fill='black' d='M30 230C150 70 280 310 490 160C690 20 860 300 1100 150C1160 110 1180 180 1170 210C1040 300 900 80 700 210C520 330 360 40 180 170C100 230 40 180 30 260Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 145% 70%;
  mask-size: 145% 70%;
  animation: opening-mask 580ms cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

@keyframes opening-mask {
  0% {
    -webkit-mask-position: -95% 28%;
    mask-position: -95% 28%;
    opacity: 1;
  }
  72% {
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 130% 46%;
    mask-position: 130% 46%;
    opacity: 0;
    visibility: hidden;
  }
}

.opening__gesture {
  position: absolute;
  width: 130%;
  height: 42%;
  left: -78%;
  top: 30%;
  color: var(--saffron);
  pointer-events: none;
  animation: opening-gesture 580ms cubic-bezier(0.65, 0, 0.2, 1) forwards;
}

.opening__gesture path {
  fill: currentColor;
}

@keyframes opening-gesture {
  to {
    transform: translate3d(155%, 0, 0);
  }
}

.opening__nudge {
  position: absolute;
  left: 14%;
  top: 38%;
  width: 26%;
  height: 18%;
  overflow: hidden;
  pointer-events: none;
}

.opening__nudge img {
  position: absolute;
  width: 384.6%;
  height: 555.6%;
  max-width: none;
  left: -53.8%;
  top: -211%;
  object-fit: cover;
  object-position: 48% 42%;
  transition: transform 220ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.opening__shot:hover .opening__nudge img {
  transform: translate3d(3.2%, -2.4%, 0);
}

.opening__cta {
  position: absolute;
  left: 38%;
  bottom: 6vh;
  z-index: 3;
}

.position {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: 6vw;
  min-height: 88vh;
  padding: 16vh var(--pad) 18vh;
  background: var(--white);
  overflow: hidden;
}

.position__aside {
  position: relative;
  z-index: 1;
  margin: 0;
  max-width: 28rem;
  padding-top: 8vh;
  font-size: 1.02rem;
}

.position__statement {
  position: relative;
  z-index: 1;
  align-self: end;
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3.2rem, 6.6vw, 7.2rem);
  font-weight: 400;
  line-height: 1.08;
}

.position__gesture {
  position: absolute;
  width: min(78vw, 64rem);
  left: 18%;
  top: 28%;
  color: var(--rose);
  z-index: 0;
  pointer-events: none;
  transform: translate3d(-115%, 0, 0);
}

.position__gesture path {
  fill: currentColor;
}

.js .position.is-live .position__gesture {
  animation: pass-once 860ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes pass-once {
  to {
    transform: translate3d(120%, 0, 0);
  }
}

.cut-a {
  background: var(--saffron);
  padding: 7vh var(--pad) 0;
  overflow: hidden;
}

.cut-a__copy {
  display: grid;
  grid-template-columns: minmax(10rem, 16rem) minmax(0, 32rem);
  gap: 2rem 8vw;
  align-items: end;
  margin-bottom: 2rem;
}

.cut-a__copy h2,
.cut-c__title,
.word__title,
.evidence__copy h2,
.character__statement,
.poster h2,
.film h2,
.about-open h1,
.page-title,
.legal h1,
.thanks h1,
.svc-intro h1,
.contact-page h1 {
  font-family: var(--display);
  font-weight: 400;
}

.cut-a__copy h2 {
  margin: 0;
  font-size: clamp(1.4rem, 2vw, 2rem);
  line-height: 1;
}

.cut-a__copy p {
  margin: 0;
  max-width: 36rem;
  font-size: 1.08rem;
}

.cut-a__frame {
  position: relative;
  margin: 0 0 0 8vw;
  overflow: hidden;
  height: min(78vh, 52rem);
}

.cut-a__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.double__wide {
  object-position: 50% 60%;
}

.double__tight {
  position: absolute;
  inset: 0;
  object-position: 30% 80%;
  transform: scale(1.28);
  transform-origin: 30% 80%;
}

.js .double__tight {
  clip-path: inset(0 0 0 0);
}

.js .cut-a.is-live .double__tight {
  animation: detail-leave 680ms 520ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes detail-leave {
  to {
    clip-path: inset(0 0 100% 0);
  }
}

.js .cut-a__frame {
  clip-path: inset(0 100% 0 0);
}

.js .cut-a.is-live .cut-a__frame {
  animation: sweep-reveal 640ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes sweep-reveal {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.cut-b {
  background: var(--white);
  padding: 12vh var(--pad) 8vh;
  overflow: hidden;
}

.cut-b__kicker {
  margin: 0 0 1rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.handoff {
  display: grid;
  grid-template-columns: minmax(0, 1fr) var(--handoff-word) var(--handoff-photo);
  align-items: end;
  gap: 0 1rem;
}

.handoff__lead,
.handoff__word {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(3rem, 6vw, 6.4rem);
  line-height: 1.08;
}

.handoff__word {
  overflow: hidden;
  white-space: nowrap;
}

.handoff__photo {
  margin: 0;
  overflow: hidden;
  align-self: stretch;
  min-height: 16rem;
}

.handoff__photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.cut-b__text {
  max-width: 34rem;
  margin: 2.5rem 0 0;
  margin-left: 42%;
}

.js .cut-b__kicker,
.js .handoff__lead,
.js .handoff__word,
.js .cut-b__text {
  clip-path: inset(0 0 100% 0);
}

.js .cut-b.is-live .cut-b__kicker,
.js .cut-b.is-live .handoff__lead,
.js .cut-b.is-live .handoff__word,
.js .cut-b.is-live .cut-b__text {
  animation: hard-cut 80ms steps(1, end) forwards;
}

@keyframes hard-cut {
  to {
    clip-path: inset(0 0 0 0);
  }
}

.cut-c {
  display: grid;
  grid-template-columns: minmax(0, 65vw) minmax(0, 1fr);
  min-height: 92vh;
  background: var(--milk);
  overflow: hidden;
}

.cut-c__field {
  background: var(--ice);
  padding: 12vh var(--pad) 8vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 88vh;
}

.cut-c__title {
  margin: 0;
  font-size: clamp(3.4rem, 7vw, 7rem);
  line-height: 1.05;
}

.cut-c__title span {
  display: block;
}

.cut-c__field p {
  max-width: 28rem;
  margin: 2rem 0 0;
}

.cut-c__photo {
  margin: 0;
  align-self: end;
  width: min(78%, 22rem);
  justify-self: start;
  padding-bottom: 8vh;
}

.cut-c__photo img {
  width: 100%;
  aspect-ratio: 3 / 4.2;
  object-fit: cover;
  object-position: 62% 40%;
}

.evidence {
  background: var(--milk);
  overflow: hidden;
}

.evidence__stage {
  position: relative;
  margin: 0;
  height: min(86vh, 58rem);
  overflow: hidden;
  background: var(--ink);
}

.evidence__wide,
.evidence__tight {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.evidence__wide {
  object-position: 50% 50%;
}

.evidence__tight {
  position: absolute;
  inset: 0;
  object-position: 82% 46%;
  transform: scale(1.45);
  transform-origin: 80% 50%;
  opacity: 0;
}

.evidence__gesture {
  position: absolute;
  width: 78%;
  height: 70%;
  left: -70%;
  top: 16%;
  color: var(--jade);
  pointer-events: none;
}

.evidence__gesture path {
  fill: currentColor;
}

.js .evidence.is-live .evidence__tight {
  opacity: 1;
  -webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500'%3E%3Cpath fill='black' d='M20 300C180 80 360 420 640 210C900 20 1100 390 1360 180C1380 240 1200 80 980 250C760 420 540 40 280 220C140 310 40 220 20 360Z'/%3E%3C/svg%3E");
  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1400 500'%3E%3Cpath fill='black' d='M20 300C180 80 360 420 640 210C900 20 1100 390 1360 180C1380 240 1200 80 980 250C760 420 540 40 280 220C140 310 40 220 20 360Z'/%3E%3C/svg%3E");
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: 90% 80%;
  mask-size: 90% 80%;
  animation: evidence-mask 980ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

.js .evidence.is-live .evidence__gesture {
  animation: evidence-pass 980ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes evidence-mask {
  0% {
    -webkit-mask-position: -80% 20%;
    mask-position: -80% 20%;
    opacity: 1;
  }
  70% {
    opacity: 1;
  }
  100% {
    -webkit-mask-position: 130% 30%;
    mask-position: 130% 30%;
    opacity: 0;
  }
}

@keyframes evidence-pass {
  to {
    transform: translate3d(210%, 0, 0);
  }
}

.evidence__copy {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2rem 4vw;
  padding: 6vh var(--pad) 8vh;
}

.evidence__label {
  margin: 0 0 0.6rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.evidence__copy h2 {
  margin: 0;
  font-size: clamp(2.2rem, 4vw, 4rem);
  line-height: 0.92;
}

.evidence__body p {
  margin: 0 0 0.9rem;
}

.evidence__body p:last-child {
  margin-bottom: 1.2rem;
}

.words {
  background: var(--white);
  overflow: hidden;
}

.word {
  position: relative;
  padding: 8vh var(--pad);
  overflow: hidden;
}

.word__title {
  position: relative;
  z-index: 1;
  margin: 0;
  font-size: clamp(3.4rem, 9vw, 8.4rem);
  line-height: 1.05;
}

.word__title::before {
  content: "";
  position: absolute;
  left: 0;
  top: 46%;
  width: 46%;
  height: 0.38em;
  background: var(--swipe, var(--rose));
  transform: translate3d(-120%, 0, 0);
  z-index: -1;
}

.js .word.is-live .word__title::before {
  animation: swipe 620ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes swipe {
  to {
    transform: translate3d(150%, 0, 0);
  }
}

.word__text {
  margin: 1rem 0 0;
  max-width: 34rem;
  font-size: 1.05rem;
}

.word__shot {
  margin: 0;
  overflow: hidden;
}

.word__shot img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.js .word__shot img {
  clip-path: polygon(0 100%, 0 100%, 0 100%);
}

.js .word.is-live .word__shot img {
  animation: shot-mask 460ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes shot-mask {
  to {
    clip-path: polygon(0 0, 100% 8%, 100% 100%, 0 100%);
  }
}

.word--data { --swipe: #d94a64; }
.word--ads { --swipe: #f4b942; }
.word--pr { --swipe: #3f8f78; }
.word--mkt { --swipe: #161d2a; }
.word--api { --swipe: #d94a64; }
.word--media { --swipe: #3f8f78; }
.word--consult { --swipe: #f4b942; }
.word--care { --swipe: #161d2a; }
.word--web { --swipe: #d94a64; }

.word--data {
  display: grid;
  grid-template-columns: minmax(0, 26rem) minmax(0, 1fr);
  gap: 2rem 4vw;
  align-items: end;
  background: var(--milk);
}

.word--data .word__shot {
  height: 18rem;
}

.word--ads {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 16rem;
  gap: 2rem;
  align-items: center;
  min-height: 62vh;
}

.word--ads .word__shot {
  height: 20rem;
}

.word--ads .word__text {
  grid-column: 1;
}

.word--pr .word__text {
  margin-left: 38vw;
}

.word--mkt {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  gap: 1.5rem 3vw;
  background: var(--ice);
}

.word--mkt .word__text {
  grid-column: 1 / -1;
  order: -1;
  max-width: 40rem;
}

.word--mkt .word__shot {
  height: 7.5rem;
  align-self: end;
}

.word--api .word__shot {
  margin-top: 2rem;
  height: 16rem;
  width: min(100%, 46rem);
  margin-left: 18vw;
}

.word--media .word__text {
  max-width: 24rem;
  margin-left: 8vw;
}

.word--consult .word__title {
  font-size: clamp(2.4rem, 5vw, 4.4rem);
}

.word--consult .word__text {
  max-width: 46rem;
  font-size: 1.2rem;
}

.word--care {
  display: grid;
  grid-template-columns: 8.5rem minmax(0, 1fr);
  gap: 1.5rem 2rem;
  align-items: center;
}

.word--care .word__shot {
  height: 8.5rem;
}

.word--web .word__title {
  font-size: clamp(2.6rem, 6vw, 5.5rem);
  max-width: 16ch;
}

.character {
  background: var(--ink);
  color: var(--milk);
  padding: 14vh var(--pad) 0;
  overflow: hidden;
}

.character :focus-visible {
  outline-color: var(--milk);
}

.character__statement {
  margin: 0;
  max-width: 12ch;
  font-size: clamp(3rem, 6.5vw, 6.6rem);
  line-height: 1.08;
}

.character__layout {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(0, 1fr);
  gap: 3rem 6vw;
  margin-top: 6vh;
  padding-bottom: 8vh;
}

.character__desc {
  margin: 0 0 1.4rem;
  max-width: 34rem;
}

.facts {
  margin: 0;
  display: grid;
  gap: 0.85rem;
}

.facts div {
  display: grid;
  grid-template-columns: 7rem minmax(0, 1fr);
  gap: 1rem;
}

.facts dt {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.facts dd {
  margin: 0;
}

.facts a {
  color: var(--milk);
}

.character__frame {
  margin: 0 0 0 auto;
  width: min(78%, 62rem);
  height: min(62vh, 36rem);
  overflow: hidden;
  background: #0e141e;
}

.character__frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 60% 50%;
}

.js .character__frame img {
  transform: translate3d(0, 105%, 0);
}

.js .character.is-live .character__frame img {
  animation: rise 520ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

@keyframes rise {
  to {
    transform: translate3d(0, 0, 0);
  }
}

.character__ice {
  position: relative;
  height: 0;
}

.character__ice svg {
  position: absolute;
  width: min(28vw, 18rem);
  right: 4vw;
  bottom: 1rem;
  color: var(--ice);
  transform: translate3d(120%, 0, 0);
  pointer-events: none;
}

.character__ice path {
  fill: currentColor;
}

.js .character.is-live .character__ice svg {
  animation: corner 520ms 560ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
}

@keyframes corner {
  to {
    transform: translate3d(-10%, 0, 0);
  }
}

.directory {
  position: relative;
  min-height: 80vh;
  padding: 10vh var(--pad) 12vh;
  background: var(--milk);
  overflow: hidden;
}

.directory__label {
  margin: 0 0 2rem;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.directory__list {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.35rem;
  max-width: calc(100% - 12rem);
}

.directory__item {
  display: inline-block;
  color: var(--ink);
  text-decoration: none;
  font-weight: 600;
  line-height: 1.15;
  background-image: linear-gradient(var(--saffron), var(--saffron));
  background-repeat: no-repeat;
  background-position: 0 100%;
  background-size: 0 100%;
  transition: background-size 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.directory__item:hover,
.directory__item:focus-visible {
  background-size: 100% 100%;
}

.directory__item.is-xl {
  font-size: clamp(2rem, 4vw, 3.5rem);
}

.directory__item.is-lg {
  font-size: clamp(1.35rem, 2.2vw, 2rem);
}

.directory__item.is-md {
  font-size: clamp(1.02rem, 1.4vw, 1.25rem);
}

.shift-0 { margin-left: 0; }
.shift-1 { margin-left: 8vw; }
.shift-2 { margin-left: 18vw; }
.shift-3 { margin-left: 3vw; }
.shift-4 { margin-left: 28vw; }
.shift-5 { margin-left: 12vw; }

.directory__preview {
  position: absolute;
  right: var(--pad);
  bottom: 10vh;
  width: 11rem;
  height: 8.2rem;
  margin: 0;
  overflow: hidden;
  background: var(--ice);
}

.directory__preview img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.field {
  background: var(--jade);
  color: var(--white);
  padding: 10vh var(--pad) 12vh;
  overflow: hidden;
}

.field :focus-visible {
  outline-color: var(--white);
}

.field__top {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr);
  gap: 2rem 4vw;
  margin-bottom: 6vh;
}

.field h2,
.contact-page h1 {
  margin: 0;
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.8rem, 5vw, 5rem);
  line-height: 0.9;
}

.field__facts {
  justify-self: end;
  max-width: 26rem;
}

.field__facts a,
.contact-facts a,
.colophon a,
.about-bridge a {
  color: inherit;
}

.field__facts p,
.contact-facts p {
  margin: 0 0 0.7rem;
}

.enquiry {
  display: grid;
  grid-template-columns: 38% 58%;
  column-gap: 4%;
  row-gap: 1.1rem;
}

.control--message,
.enquiry__actions,
.enquiry__note {
  grid-column: 1 / -1;
}

.control label {
  position: relative;
  z-index: 0;
  display: inline-block;
  margin-bottom: 0.4rem;
  font-weight: 600;
  font-size: 0.92rem;
}

.control .wash {
  position: absolute;
  z-index: -1;
  inset: -0.12rem -0.35rem;
  background: var(--saffron);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 200ms cubic-bezier(0.2, 0.7, 0.2, 1);
}

.control:focus-within .wash {
  transform: scaleX(1);
}

.field .control:focus-within label {
  color: var(--ink);
}

.control input,
.control textarea {
  width: 100%;
  border: 1px solid transparent;
  border-radius: 3px;
  background: var(--white);
  color: var(--ink);
  padding: 0.95rem 0.9rem;
  font-size: 1rem;
}

.control textarea {
  min-height: 11rem;
  resize: vertical;
}

.control.is-error input,
.control.is-error textarea {
  border-color: var(--rose);
}

.control .err {
  display: block;
  min-height: 1.2rem;
  margin-top: 0.3rem;
  color: var(--rose);
  font-size: 0.92rem;
  font-weight: 600;
}

.contact-page .control .err {
  color: var(--rose);
}

.enquiry__note {
  margin: 0;
  max-width: 40rem;
  font-size: 0.95rem;
}

.hp {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  border: 0;
}

.colophon {
  display: grid;
  grid-template-columns: 1.2fr 1fr auto;
  gap: 1.5rem 2rem;
  padding: 3rem var(--pad) 2.5rem;
  background: var(--ink);
  color: var(--milk);
  font-size: 0.95rem;
}

.colophon p {
  margin: 0 0 0.4rem;
}

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

.colophon a {
  text-decoration: none;
}

.colophon a:hover {
  text-decoration: underline;
}

.svc-intro {
  padding: calc(var(--header) + 3rem) var(--pad) 3rem;
  background: var(--milk);
}

.svc-intro h1,
.page-title,
.legal h1,
.thanks h1 {
  margin: 0;
  font-size: clamp(3rem, 6vw, 5.5rem);
  line-height: 0.9;
}

.svc-intro__lead,
.page-lead {
  max-width: 36rem;
  font-size: 1.15rem;
}

.svc-index {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem 1.2rem;
  max-width: 50rem;
  margin-top: 1.5rem;
}

.svc-index a {
  font-weight: 600;
  text-decoration: none;
  background-image: linear-gradient(var(--saffron), var(--saffron));
  background-repeat: no-repeat;
  background-size: 0 100%;
  background-position: 0 100%;
  transition: background-size 180ms linear;
}

.svc-index a:hover,
.svc-index a:focus-visible {
  background-size: 100% 100%;
}

.poster {
  position: relative;
  overflow: hidden;
}

.poster--a {
  min-height: 88vh;
  background: var(--ink);
}

.poster--a img {
  width: 100%;
  height: 88vh;
  object-fit: cover;
  object-position: 40% 60%;
}

.poster--a h2 {
  position: absolute;
  left: var(--pad);
  bottom: 2rem;
  margin: 0;
  color: var(--white);
  font-size: clamp(1.6rem, 3vw, 2.6rem);
}

.poster__gesture {
  position: absolute;
  width: 70%;
  left: 0;
  top: 18%;
  color: var(--saffron);
  pointer-events: none;
}

.poster__gesture path,
.poster__rose path {
  fill: currentColor;
}

@media (prefers-reduced-motion: no-preference) {
  .js .poster__gesture {
    transform: translate3d(-55%, 0, 0);
  }

  .js .poster.is-live .poster__gesture {
    animation: poster-in 700ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }
}

@keyframes poster-in {
  to {
    transform: translate3d(6%, 0, 0);
  }
}

.poster--b {
  min-height: 78vh;
  background: var(--ink);
  color: var(--milk);
  display: grid;
  grid-template-columns: minmax(0, 1fr) 9rem;
  gap: 2rem;
  align-items: end;
  padding: 18vh var(--pad) 8vh;
}

.poster--b h2 {
  margin: 0;
  font-size: clamp(3.4rem, 8vw, 7.5rem);
  line-height: 0.86;
}

.poster--b img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.poster__rose {
  position: absolute;
  width: min(46vw, 32rem);
  left: 6%;
  bottom: 12%;
  color: var(--rose);
  pointer-events: none;
}

@media (prefers-reduced-motion: no-preference) {
  .js .poster__rose {
    transform: translate3d(-120%, 0, 0);
  }

  .js .poster.is-live .poster__rose {
    animation: rose-hold 760ms cubic-bezier(0.7, 0, 0.2, 1) forwards;
  }
}

@keyframes rose-hold {
  to {
    transform: translate3d(0, 0, 0);
  }
}

.poster--c figure {
  margin: 0;
}

.poster--c img {
  width: 100%;
  height: min(78vh, 48rem);
  object-fit: cover;
}

.poster--c h2 {
  margin: 0;
  padding: 1.2rem var(--pad) 2rem;
  background: var(--white);
  font-size: clamp(2.4rem, 5vw, 4.6rem);
}

.detail {
  padding: 8vh var(--pad) 10vh;
}

.detail h3 {
  margin: 0 0 0.8rem;
  font-family: var(--sans);
  font-weight: 600;
  font-size: 1.35rem;
}

.detail p {
  margin: 0 0 1rem;
}

.detail--milk {
  background: var(--milk);
}

.detail--ice {
  background: var(--ice);
}

.detail--jade {
  background: var(--jade);
  color: var(--milk);
}

.detail__grid {
  display: grid;
  grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr);
  gap: 2rem 4vw;
}

.detail__narrow {
  max-width: 28rem;
}

.detail__wide {
  max-width: 40rem;
}

.detail__reveal {
  margin: 2.5rem 0 0;
  width: min(100%, 28rem);
  overflow: hidden;
}

.detail__reveal img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.js .detail__reveal img {
  clip-path: inset(0 0 100% 0);
}

.js .detail.is-live .detail__reveal img {
  animation: shot-mask 420ms cubic-bezier(0.2, 0.7, 0.2, 1) forwards;
}

.detail__support {
  margin: 2rem 0 0;
  width: min(100%, 24rem);
}

.detail__support img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
}

.stages {
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--white);
}

.stage {
  padding: 6vh var(--pad);
  border-top: 1px solid rgba(22, 29, 42, 0.14);
}

.stage span {
  display: block;
  font-weight: 600;
  letter-spacing: 0.08em;
}

.stage h2 {
  margin: 0.3rem 0;
  font-family: var(--display);
  font-weight: 400;
  line-height: 0.9;
}

.stage p {
  margin: 0;
  max-width: 36rem;
}

.stage--xl h2 { font-size: clamp(4rem, 10vw, 8rem); }
.stage--lg h2 { font-size: clamp(2.8rem, 6vw, 5rem); }
.stage--md h2 { font-size: clamp(2rem, 4vw, 3.2rem); }
.stage--ice { background: var(--ice); }
.stage--milk { background: var(--milk); }

.about-open {
  display: grid;
  grid-template-columns: minmax(12rem, 36%) minmax(0, 1fr);
  min-height: 92vh;
  padding-top: var(--header);
  background: var(--milk);
  overflow: hidden;
}

.about-open figure {
  margin: 0;
  min-height: 92vh;
}

.about-open img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 50% 30%;
}

.about-open__statement {
  padding: 10vh var(--pad) 2rem;
}

.about-open h1 {
  margin: 0;
  max-width: 10ch;
  font-size: clamp(3rem, 5.4vw, 5.8rem);
  line-height: 0.9;
}

.about-prose {
  padding: 16vh var(--pad) 8vh;
  background: var(--white);
}

.about-prose h2 {
  margin: 2.5rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 1.5rem;
  font-weight: 600;
}

.about-prose p,
.about-bridge p,
.film p,
.detail p,
.legal p,
.legal li {
  max-width: 42rem;
}

.about-split {
  display: grid;
  grid-template-columns: minmax(0, 0.7fr) minmax(0, 1fr);
  gap: 2rem 6vw;
}

.about-wide {
  margin: 0;
  overflow: hidden;
}

.about-wide img {
  width: 100%;
  height: 42vh;
  object-fit: cover;
  object-position: 50% 60%;
}

.about-bridge {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 2rem;
  padding: 6vh var(--pad) 8vh;
  background: var(--milk);
}

.film {
  background: var(--white);
  overflow: hidden;
}

.film__open,
.film__second,
.film__detail {
  margin: 0;
}

.film__open img {
  width: 100%;
  height: min(82vh, 50rem);
  object-fit: cover;
}

.film__head,
.film__body {
  padding: 4vh var(--pad);
}

.film h2 {
  margin: 0.2rem 0 0;
  font-size: clamp(2.6rem, 5vw, 4.8rem);
  line-height: 0.9;
}

.film__label {
  margin: 0;
  font-size: 0.82rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}

.film__body {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.1fr);
  gap: 1rem 4vw;
}

.film__body h3 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.film__second {
  width: min(70%, 52rem);
  margin-left: auto;
}

.film__second img {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.film__detail {
  width: min(28%, 18rem);
  margin: 2rem 0 4rem var(--pad);
}

.film__detail img {
  width: 100%;
  aspect-ratio: 1;
  object-fit: cover;
}

.intertitle {
  background: var(--saffron);
  color: var(--ink);
  min-height: 42vh;
  display: flex;
  align-items: flex-end;
  padding: 8vh var(--pad);
}

.intertitle--ink {
  background: var(--ink);
  color: var(--milk);
}

.intertitle p {
  margin: 0;
  font-family: var(--display);
  font-size: clamp(2.8rem, 7vw, 6rem);
  line-height: 0.9;
}

.contact-page {
  background: var(--ice);
  color: var(--ink);
  padding: calc(var(--header) + 2rem) var(--pad) 6rem;
  overflow: hidden;
}

.contact-page h1 {
  font-size: clamp(1.4rem, 2vw, 1.8rem);
  margin-bottom: 1rem;
}

.contact-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(12rem, 0.55fr);
  gap: 2rem 4vw;
  align-items: start;
}

.contact-facts {
  font-family: var(--display);
  font-size: clamp(1.8rem, 3vw, 2.8rem);
  line-height: 1.15;
}

.contact-facts p {
  max-width: none;
}

.contact-invite {
  max-width: 28rem;
  margin: 1rem 0 2rem;
}

.contact-page .enquiry {
  margin-top: 0.5rem;
}

.contact-page .control input,
.contact-page .control textarea {
  background: var(--white);
}

.contact-page .control .wash {
  background: var(--rose);
}

.contact-shot {
  margin: 1rem 0 0;
  width: min(100%, 16rem);
}

.contact-shot img {
  width: 100%;
  aspect-ratio: 3 / 4;
  object-fit: cover;
}

.legal {
  background: var(--milk);
  padding: calc(var(--header) + 2.5rem) var(--pad) 5rem;
}

.legal h1 {
  margin-bottom: 1rem;
}

.legal h2 {
  margin: 2.2rem 0 0.6rem;
  font-family: var(--sans);
  font-size: 1.35rem;
  font-weight: 600;
  max-width: 42rem;
}

.legal h3 {
  margin: 1.4rem 0 0.4rem;
  font-size: 1.05rem;
  max-width: 42rem;
}

.legal p,
.legal li {
  font-size: 1.02rem;
}

.legal ul,
.legal ol {
  max-width: 42rem;
  padding-left: 1.2rem;
}

.thanks {
  min-height: 100vh;
  padding: calc(var(--header) + 12vh) var(--pad) 6rem;
  background: var(--milk);
}

.thanks p {
  max-width: 36rem;
  font-size: 1.15rem;
}

.notice {
  min-height: 100vh;
  padding: calc(var(--header) + 8vh) var(--pad) 4rem;
  background: var(--milk);
}

.notice h1 {
  font-family: var(--display);
  font-weight: 400;
  font-size: clamp(2.6rem, 6vw, 4.8rem);
  line-height: 0.9;
}

.notice ul {
  max-width: 40rem;
}

@media (min-width: 900px) and (prefers-reduced-motion: no-preference) {
  @supports (animation-timeline: view()) {
    .cut-c__field {
      animation: colour-push linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    .cut-c__photo {
      animation: photo-settle linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 42%;
    }

    .handoff {
      animation: handoff-swap linear both;
      animation-timeline: view();
      animation-range: entry 25% cover 45%;
    }
  }
}

@keyframes colour-push {
  from {
    transform: translate3d(-8vw, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes photo-settle {
  from {
    transform: translate3d(9vw, 0, 0);
  }
  to {
    transform: translate3d(0, 0, 0);
  }
}

@keyframes handoff-swap {
  from {
    --handoff-word: 14rem;
    --handoff-photo: 30vw;
  }
  to {
    --handoff-word: 0rem;
    --handoff-photo: 48vw;
  }
}

@view-transition {
  navigation: auto;
}

::view-transition-group(root) {
  background: var(--saffron);
  animation-duration: 460ms;
}

::view-transition-old(root) {
  animation: 440ms cubic-bezier(0.7, 0, 0.2, 1) both vt-away;
}

::view-transition-new(root) {
  animation: 480ms cubic-bezier(0.2, 0.7, 0.2, 1) both vt-in;
}

@keyframes vt-away {
  0% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(100% 0, 100% 0, 100% 100%, 78% 100%);
  }
}

@keyframes vt-in {
  0% {
    clip-path: polygon(0 8%, 22% 0, 8% 100%, 0 100%);
  }
  100% {
    clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%);
  }
}

@media (max-width: 899px) {
  .takeover__layer--rose,
  .takeover__layer--ice {
    display: none;
  }

  .takeover.is-open .takeover__layer--ink {
    animation-delay: 0ms;
    animation-duration: 240ms;
  }

  .takeover.is-open .takeover__panel {
    animation-delay: 180ms;
  }

  .takeover__panel {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto 1fr auto auto;
    overflow: auto;
  }

  .takeover__close,
  .takeover__nav,
  .takeover__shot,
  .takeover__phrase,
  .takeover__contact {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .takeover__shot {
    width: 9rem;
  }

  .takeover__nav a {
    font-size: clamp(2.4rem, 12vw, 3.4rem);
  }

  .opening {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    min-height: 0;
    padding-bottom: 2.5rem;
  }

  .opening__name,
  .opening__title,
  .opening__note {
    padding-left: var(--pad);
    padding-right: var(--pad);
  }

  .opening__shot {
    order: 0;
    width: 76vw;
    min-height: 62vw;
    height: 70vw;
    margin: 0.8rem 0 1rem auto;
  }

  .opening__name { order: -1; margin-top: 1rem; }
  .opening__title { font-size: clamp(2.5rem, 11vw, 3.6rem); }
  .opening__note { margin-bottom: 1rem; }
  .opening__cta { position: static; margin-left: var(--pad); }
  .opening__nudge { display: none; }
  .opening__gesture { height: 28%; }

  .position {
    grid-template-columns: 1fr;
    min-height: 0;
    padding: 4.5rem var(--pad);
    gap: 2rem;
  }

  .position__aside { padding-top: 0; order: 2; }
  .position__statement { font-size: clamp(2.6rem, 12vw, 4rem); }
  .position__gesture { width: 140%; left: -20%; top: 20%; }

  .cut-a__copy,
  .handoff,
  .cut-c,
  .evidence__copy,
  .word,
  .word--data,
  .word--ads,
  .word--mkt,
  .word--care,
  .character__layout,
  .field__top,
  .enquiry,
  .colophon,
  .detail__grid,
  .about-open,
  .about-split,
  .about-bridge,
  .film__body,
  .contact-layout,
  .poster--b {
    display: flex;
    flex-direction: column;
    grid-template-columns: 1fr;
  }

  .cut-a { padding-top: 3rem; }
  .cut-a__frame { margin-left: var(--pad); height: 68vw; }
  .cut-b { padding: 3.5rem var(--pad); }
  .cut-b__text { margin-left: 0; }
  .handoff__lead,
  .handoff__word { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .handoff__word { white-space: normal; }
  .handoff__photo { min-height: 14rem; width: 100%; }
  .cut-c__field { min-height: 0; padding: 3rem var(--pad); width: 100%; }
  .cut-c__title { font-size: clamp(2.8rem, 13vw, 4.2rem); }
  .cut-c__photo { width: 58vw; padding: 0 0 2rem var(--pad); }
  .evidence__stage { height: 70vw; }
  .evidence__copy { padding: 2rem var(--pad) 3rem; }
  .word { padding: 2.6rem var(--pad); gap: 0.8rem; }
  .word__title { font-size: clamp(2.7rem, 13vw, 4.4rem); }
  .word--pr .word__text,
  .word--media .word__text,
  .word--api .word__shot { margin-left: 0; }
  .word--data .word__shot,
  .word--ads .word__shot,
  .word--api .word__shot { width: 100%; height: 14rem; }
  .word--mkt .word__shot,
  .word--care .word__shot { width: 42vw; height: 8rem; }
  .word--ads { background: var(--ice); }
  .word--api { background: var(--white); }
  .word--media { background: var(--milk); }
  .character { padding: 4rem var(--pad) 0; }
  .character__statement { font-size: clamp(2.6rem, 12vw, 4rem); max-width: none; }
  .character__layout { margin-top: 2rem; padding-bottom: 2rem; }
  .facts div { grid-template-columns: 1fr; gap: 0.15rem; }
  .character__frame { width: 86%; height: 58vw; }
  .directory { min-height: 0; padding: 3rem var(--pad) 4rem; }
  .directory__list { max-width: none; }
  .directory__preview { display: none; }
  .shift-0, .shift-1, .shift-2, .shift-3, .shift-4, .shift-5 { margin-left: 0; }
  .directory__item.is-xl { margin-left: 0; font-size: 1.7rem; }
  .directory__item.is-lg { margin-left: 1.2rem; font-size: 1.25rem; }
  .directory__item.is-md { margin-left: 0.4rem; font-size: 1.05rem; }
  .field { padding: 3.5rem var(--pad) 4rem; }
  .field h2 { font-size: clamp(2.4rem, 11vw, 3.6rem); }
  .enquiry { grid-template-columns: 1fr; }
  .enquiry__actions .btn { width: 100%; }
  .colophon { gap: 1.2rem; }
  .poster--a,
  .poster--a img { min-height: 70vw; height: 74vw; }
  .poster--b { min-height: 0; padding: 4rem var(--pad); }
  .poster--b h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .poster--b img { width: 7rem; }
  .poster--c img { height: 68vw; }
  .detail { padding: 2.5rem var(--pad) 3rem; }
  .about-open { min-height: 0; }
  .about-open figure { width: 74vw; min-height: 78vw; }
  .about-open img { height: 78vw; }
  .about-open__statement { padding: 1.5rem var(--pad) 0; }
  .about-prose { padding: 3rem var(--pad); }
  .about-wide img { height: 46vw; }
  .about-bridge { padding: 2.5rem var(--pad) 3rem; }
  .film__open img { height: 70vw; }
  .film__head,
  .film__body { padding: 1.5rem var(--pad); }
  .film__second { width: 88%; }
  .film__detail { width: 48%; margin: 1rem 0 2rem var(--pad); }
  .contact-page { padding-bottom: 4rem; }
  .contact-facts { font-size: clamp(1.6rem, 7vw, 2.2rem); }
  .stage--xl h2 { font-size: clamp(2.8rem, 12vw, 4rem); }
  .stage { padding: 2rem var(--pad); }
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }

  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }

  .opening__alt,
  .opening__gesture,
  .position__gesture,
  .evidence__tight,
  .evidence__gesture,
  .word__title::before,
  .btn__sweep {
    display: none !important;
  }

  .js .poster__gesture,
  .js .poster__rose,
  .js .character__ice svg {
    transform: none !important;
  }

  .js .cut-a__frame,
  .js .double__tight,
  .js .cut-b__kicker,
  .js .handoff__lead,
  .js .handoff__word,
  .js .cut-b__text,
  .js .word__shot img,
  .js .character__frame img,
  .js .detail__reveal img,
  .opening__title {
    clip-path: none !important;
    transform: none !important;
  }

  .takeover__layer {
    transform: none;
  }

  .takeover.is-open .takeover__panel {
    opacity: 1;
    pointer-events: auto;
  }

  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation: none !important;
  }
}

h1,
h2,
.takeover__nav a,
.intertitle p,
.contact-facts,
.word__title,
.position__statement,
.handoff__lead,
.handoff__word,
.cut-c__title,
.character__statement {
  line-height: 1.12;
}