:root {
  --ink: #0e0c0d;
  --paper: #dadada;
  --white: #fbfbfb;
  --acid: #d5ff69;
  --u: min(0.0694444444vw, 0.1315789474vh);
  --u: min(0.0694444444vw, 0.1315789474dvh);
}

* {
  box-sizing: border-box;
}

html {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
  font-weight: 800;
  width: 100%;
  /* Disable scroll-anchoring globally: when the loop wrap jumps the scroll
     position (and as sticky sections engage) the browser's anchoring tries to
     "keep your place" and nudges the position back — that's the small jitter at
     the footer→header transition. */
  overflow-anchor: none;
}

body {
  margin: 0;
  min-height: 100%;
  background: var(--paper);
  color: var(--ink);
  font-family: "Inter Tight", Arial, Helvetica, sans-serif;
  font-weight: 800;
  width: 100%;
  overflow-x: hidden;
  overflow-y: auto;
}

body.is-booting {
  overflow: hidden;
  background: #08080a;
}

body.is-booting .visual-layer,
body.is-booting .hero,
body.is-booting .manifesto,
body.is-booting .manifesto-runout,
body.is-booting .services,
body.is-booting .method,
body.is-booting .about,
body.is-booting .loop-hero {
  opacity: 0;
}

.preloader {
  --u: min(0.0694444444vw, 0.1315789474vh);
  --u: min(0.0694444444vw, 0.1315789474dvh);
  position: fixed;
  inset: 0;
  z-index: 1000;
  overflow: hidden;
  background: #08080a;
  pointer-events: none;
  isolation: isolate;
}

.preloader-curtain {
  position: absolute;
  inset: -1px;
  z-index: 1;
  background: #08080a;
  transform: translate3d(0, 0, 0);
  will-change: transform;
}

.preloader-curtain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: min(-46vh, -46dvh);
  width: 224vw;
  height: min(96vh, 96dvh);
  border-radius: 0 0 50% 50%;
  background: #08080a;
  transform: translateX(-50%);
  transform-origin: 50% 0;
  opacity: 1;
  will-change: transform, opacity;
}

.preloader-waterfall {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: grid;
  place-items: center;
  perspective: calc(1000 * var(--u));
  transform-style: preserve-3d;
}

.preloader-object {
  position: absolute;
  width: calc(var(--preloader-size, 260) * var(--u));
  height: calc(var(--preloader-size, 260) * var(--u));
  display: grid;
  place-items: center;
  opacity: 0;
  filter: drop-shadow(0 calc(26 * var(--u)) calc(38 * var(--u)) rgb(0 0 0 / 0.28));
  transform-origin: 50% 50%;
  will-change: transform, opacity;
  animation: preloader-object-fall 640ms both;
  animation-delay: var(--preloader-delay, 0ms);
  animation-play-state: paused;
}

.preloader-object img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.preloader.is-playing .preloader-object {
  animation-play-state: running;
}

.preloader-object-cow {
  --preloader-size: 220;
  --preloader-delay: 70ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: -18deg;
  --preloader-rotate-mid: 7deg;
  --preloader-rotate-end: 26deg;
}

.preloader-object-grapes {
  --preloader-size: 200;
  --preloader-delay: 180ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: 24deg;
  --preloader-rotate-mid: -8deg;
  --preloader-rotate-end: -28deg;
}

.preloader-object-bird {
  --preloader-size: 235;
  --preloader-delay: 290ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: -28deg;
  --preloader-rotate-mid: 10deg;
  --preloader-rotate-end: 34deg;
}

.preloader-object-brunette {
  --preloader-size: 195;
  --preloader-delay: 400ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: 18deg;
  --preloader-rotate-mid: -6deg;
  --preloader-rotate-end: -24deg;
}

.preloader-object-blonde {
  --preloader-size: 190;
  --preloader-delay: 510ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: -12deg;
  --preloader-rotate-mid: 9deg;
  --preloader-rotate-end: 24deg;
}

.preloader-object-tv {
  --preloader-size: 215;
  --preloader-delay: 620ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: -20deg;
  --preloader-rotate-mid: 8deg;
  --preloader-rotate-end: 30deg;
}

.preloader-object-cup {
  --preloader-size: 135;
  --preloader-delay: 730ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: 14deg;
  --preloader-rotate-mid: -10deg;
  --preloader-rotate-end: -22deg;
}

.preloader-object-blob {
  --preloader-size: 220;
  --preloader-delay: 840ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: 22deg;
  --preloader-rotate-mid: -7deg;
  --preloader-rotate-end: -30deg;
}

.preloader-object-shawarma {
  --preloader-size: 200;
  --preloader-delay: 950ms;
  --preloader-x: 0vw;
  --preloader-rotate-start: -20deg;
  --preloader-rotate-mid: 8deg;
  --preloader-rotate-end: 28deg;
}

.preloader.is-leaving .preloader-waterfall {
  opacity: 0;
  transition: opacity 260ms ease;
}

.preloader.is-leaving {
  background: transparent;
  transition: background-color 0ms linear 140ms;
}

.preloader.is-leaving .preloader-curtain {
  transform: translate3d(0, -152%, 0);
  transition: transform 1080ms cubic-bezier(0.68, 0, 0.14, 1);
}

.preloader.is-leaving .preloader-curtain::after {
  animation: preloader-curtain-arc 1080ms cubic-bezier(0.68, 0, 0.14, 1) both;
}

@keyframes preloader-curtain-arc {
  0% {
    opacity: 1;
    border-radius: 0 0 50% 50% / 0 0 34% 34%;
    transform: translateX(-50%) translateY(0) scaleX(1.02) scaleY(0.62);
  }
  24% {
    opacity: 1;
    border-radius: 0 0 50% 50% / 0 0 128% 128%;
    transform: translateX(-50%) translateY(13vh) scaleX(1.86) scaleY(1.82);
  }
  48% {
    opacity: 1;
    border-radius: 0 0 50% 50% / 0 0 156% 156%;
    transform: translateX(-50%) translateY(21vh) scaleX(1.46) scaleY(1.9);
  }
  72% {
    opacity: 1;
    border-radius: 0 0 50% 50% / 0 0 94% 94%;
    transform: translateX(-50%) translateY(13vh) scaleX(1.08) scaleY(1.12);
  }
  100% {
    opacity: 1;
    border-radius: 0 0 50% 50% / 0 0 42% 42%;
    transform: translateX(-50%) translateY(5vh) scaleX(0.72) scaleY(0.38);
  }
}

@keyframes preloader-object-fall {
  0% {
    opacity: 0;
    animation-timing-function: cubic-bezier(0.12, 0.72, 0.22, 1);
    transform:
      translate3d(0, 2vh, calc(-70 * var(--u)))
      rotate(var(--preloader-rotate-start))
      scale(0.76);
  }
  12% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.18, 0.86, 0.24, 1);
    transform:
      translate3d(0, 0, calc(62 * var(--u)))
      rotate(var(--preloader-rotate-mid))
      scale(0.96);
  }
  26% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.62, 0, 0.92, 0.42);
    transform:
      translate3d(0, -4.8vh, calc(95 * var(--u)))
      rotate(calc(var(--preloader-rotate-mid) * -0.55))
      scale(1);
  }
  40% {
    opacity: 1;
    animation-timing-function: cubic-bezier(0.26, 0.02, 0.82, 0.18);
    transform:
      translate3d(0, -1.5vh, calc(66 * var(--u)))
      rotate(calc(var(--preloader-rotate-mid) * -0.35))
      scale(0.94);
  }
  72% {
    opacity: 0.92;
    animation-timing-function: cubic-bezier(0.4, 0, 1, 1);
    transform:
      translate3d(0, 30vh, calc(-44 * var(--u)))
      rotate(calc(var(--preloader-rotate-end) * 0.72))
      scale(0.78);
  }
  100% {
    opacity: 0;
    transform:
      translate3d(0, 62vh, calc(-70 * var(--u)))
      rotate(var(--preloader-rotate-end))
      scale(0.66);
  }
}

a,
button {
  color: inherit;
  font: inherit;
}

.hero {
  min-height: 100vh;
  min-height: 100dvh;
  position: sticky;
  top: 0;
  z-index: 15;
  display: grid;
  place-items: center;
  background: transparent;
}

.manifesto {
  position: relative;
  z-index: 20;
  min-height: 100vh;
  min-height: 100dvh;
  background: #08080a;
}

.manifesto-stage {
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
}

.manifesto-panel {
  --m: min(0.0694444444vw, 0.1315789474vh);
  --m: min(0.0694444444vw, 0.1315789474dvh);
  position: relative;
  min-height: 100vh;
  min-height: 100dvh;
  overflow: visible;
  background: #08080a;
  color: #323232;
  padding-top: calc(184 * var(--m));
  padding-bottom: calc(170 * var(--m));
}

.manifesto-label,
.manifesto-kicker,
.manifesto-copy {
  position: absolute;
  z-index: 5;
  margin: 0;
  text-transform: uppercase;
}

.manifesto-label {
  left: calc(30 * var(--m));
  top: calc(65 * var(--m));
  color: #f2f2f2;
  font-size: calc(14 * var(--m));
  line-height: 1.17;
}

.manifesto-kicker {
  left: 50%;
  top: calc(65 * var(--m));
  width: calc(270 * var(--m));
  text-align: center;
  font-size: calc(14 * var(--m));
  line-height: 1.1;
  transform: translateX(-50%);
}

.manifesto-kicker span {
  display: block;
  color: #7a7a7a;
}

.manifesto-kicker strong {
  display: block;
  color: var(--acid);
}

.manifesto-copy {
  position: relative;
  left: auto;
  top: auto;
  width: calc(1066 * var(--m));
  max-width: 78vw;
  margin: 0 auto;
  color: #323232;
  font-size: calc(73 * var(--m));
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  transform: none;
  opacity: 1;
}

.scroll-char {
  color: #323232;
  transition: color 45ms linear;
}

.manifesto-runout {
  height: 0;
  background: #08080a;
}

.method {
  position: relative;
  z-index: 30;
  background: #08080a;
  padding: calc(92 * var(--u)) 0 calc(82 * var(--u));
}

.method-shell {
  width: min(calc(1200 * var(--u)), calc(100vw - 40 * var(--u)));
  margin: 0 auto;
  position: relative;
}

.method-kicker {
  margin: 0 0 calc(78 * var(--u));
  /* a little more breathing room above "creative method" */
  padding-top: calc(44 * var(--u));
  color: #f2f2f2;
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

.method-copy {
  width: calc(1058 * var(--u));
  max-width: 78vw;
  margin: 0 auto;
  color: #323232;
  font-size: calc(72 * var(--u));
  font-weight: 500;
  line-height: 1.05;
  text-align: center;
  letter-spacing: 0;
  text-transform: none;
  position: relative;
  z-index: 2;
}

.method-hotspot {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  margin: 0;
  padding: 0 calc(8 * var(--u));
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  line-height: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  z-index: 1;
  pointer-events: auto;
  transition: color 220ms ease;
}

.method-hotspot.underline-accent {
  text-decoration: none;
}

.method-hotspot-label {
  display: block;
  text-decoration-line: underline;
  text-decoration-color: #ff5490;
  text-decoration-thickness: calc(8 * var(--u));
  text-underline-offset: calc(5 * var(--u));
  text-decoration-skip-ink: none;
  transition: text-decoration-thickness 220ms cubic-bezier(0.22, 1, 0.36, 1);
}

.method-hotspot-line {
  display: none;
}

/* Keyboard focus gets a distinct ring (the section is near-black #08080a, so use the
   accent pink) in addition to the shared hover colour/underline below. */
.method-hotspot:focus-visible {
  outline: calc(2 * var(--u)) solid #ff5490;
  outline-offset: calc(3 * var(--u));
  border-radius: calc(4 * var(--u));
}

.method-hotspot.is-active,
.method-hotspot:hover,
.method-hotspot:focus-visible {
  color: #f6f1ea;
}

.method-hotspot.is-active .method-hotspot-label,
.method-hotspot:hover .method-hotspot-label,
.method-hotspot:focus-visible .method-hotspot-label {
  text-decoration-thickness: calc(14 * var(--u));
}

.method-stickers {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 3;
  /* JS sets --stickers-dy to slide the active cluster to a visible spot near the
     hovered hotspot (see positionStickerCluster). */
  --stickers-dy: 0px;
  transform: translate3d(0, var(--stickers-dy), 0);
  transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1);
}

.method-sticker {
  position: absolute;
  overflow: hidden;
  border: calc(2 * var(--u)) solid rgba(255, 255, 255, 0.92);
  border-radius: calc(18 * var(--u));
  background: rgba(17, 17, 20, 0.88);
  box-shadow:
    0 calc(28 * var(--u)) calc(70 * var(--u)) rgba(0, 0, 0, 0.28),
    0 calc(8 * var(--u)) calc(24 * var(--u)) rgba(0, 0, 0, 0.12),
    0 calc(2 * var(--u)) calc(10 * var(--u)) rgba(255, 255, 255, 0.08) inset;
  opacity: 0;
  filter: blur(calc(10 * var(--u))) saturate(0.82);
  transform:
    translate3d(var(--sticker-x, 0), calc(var(--sticker-y, 0) + (42 * var(--u))), 0)
    rotate(calc(var(--sticker-rotate, 0deg) * 1.16))
    scale(0.72);
  transform-origin: center;
  transition:
    opacity 220ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1),
    filter 480ms cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 420ms ease;
}

.method-sticker img,
.method-sticker-video-el {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.method-sticker.is-active {
  opacity: 1;
  filter: blur(0) saturate(1);
  transform:
    translate3d(var(--sticker-active-x, 0), var(--sticker-active-y, 0), 0)
    rotate(var(--sticker-active-rotate, 0deg))
    scale(1);
}

.vision-card-a {
  left: calc(116 * var(--u));
  top: calc(170 * var(--u));
  width: calc(270 * var(--u));
  height: calc(196 * var(--u));
  --sticker-x: calc(-74 * var(--u));
  --sticker-y: calc(42 * var(--u));
  --sticker-rotate: -13deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: -9deg;
}

.vision-card-b {
  left: calc(306 * var(--u));
  top: calc(235 * var(--u));
  width: calc(188 * var(--u));
  height: calc(154 * var(--u));
  padding: calc(22 * var(--u));
  background: linear-gradient(145deg, rgba(255, 84, 144, 0.16), rgba(126, 109, 255, 0.1)), #121218;
  --sticker-x: calc(-44 * var(--u));
  --sticker-y: calc(72 * var(--u));
  --sticker-rotate: 15deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: 8deg;
}

.vision-card-b img {
  object-fit: contain;
}

.idea-card-a {
  left: calc(290 * var(--u));
  top: calc(98 * var(--u));
  width: calc(246 * var(--u));
  height: calc(180 * var(--u));
  --sticker-x: calc(-42 * var(--u));
  --sticker-y: calc(-58 * var(--u));
  --sticker-rotate: -11deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: -4deg;
}

.idea-card-b {
  right: calc(222 * var(--u));
  top: calc(126 * var(--u));
  width: calc(252 * var(--u));
  height: calc(188 * var(--u));
  --sticker-x: calc(70 * var(--u));
  --sticker-y: calc(-42 * var(--u));
  --sticker-rotate: 14deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: 9deg;
}

.idea-card-c {
  left: calc(462 * var(--u));
  top: calc(245 * var(--u));
  width: calc(134 * var(--u));
  height: calc(120 * var(--u));
  padding: calc(12 * var(--u));
  background: linear-gradient(160deg, rgba(255, 84, 144, 0.2), rgba(240, 139, 255, 0.16)), #15151b;
  --sticker-x: 0;
  --sticker-y: calc(66 * var(--u));
  --sticker-rotate: -18deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: -12deg;
}

.idea-card-c img {
  object-fit: contain;
}

.mood-card-a {
  right: calc(198 * var(--u));
  top: calc(158 * var(--u));
  width: calc(294 * var(--u));
  height: calc(206 * var(--u));
  --sticker-x: calc(92 * var(--u));
  --sticker-y: calc(28 * var(--u));
  --sticker-rotate: 17deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: 11deg;
}

.mood-card-b {
  right: calc(70 * var(--u));
  top: calc(242 * var(--u));
  width: calc(248 * var(--u));
  height: calc(170 * var(--u));
  --sticker-x: calc(56 * var(--u));
  --sticker-y: calc(74 * var(--u));
  --sticker-rotate: -9deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: -5deg;
}

.mood-card-c {
  right: calc(308 * var(--u));
  top: calc(336 * var(--u));
  width: calc(116 * var(--u));
  height: calc(116 * var(--u));
  padding: calc(10 * var(--u));
  border-radius: 50%;
  background: linear-gradient(150deg, rgba(255, 84, 144, 0.28), rgba(255, 84, 144, 0.12)), #17171b;
  --sticker-x: calc(18 * var(--u));
  --sticker-y: calc(82 * var(--u));
  --sticker-rotate: 10deg;
  --sticker-active-x: 0;
  --sticker-active-y: 0;
  --sticker-active-rotate: 4deg;
}

.mood-card-c img {
  object-fit: contain;
}

.method-transition {
  --method-transition-curtain-y: 0px;
  --method-transition-arc-y: 0px;
  --method-transition-arc-scale-x: 1.04;
  --method-transition-arc-scale-y: 0.62;
  --method-transition-arc-radius: 36%;
  position: relative;
  z-index: 26;
  height: min(78vh, 78dvh);
  margin-top: -1px;
  margin-bottom: min(-52vh, -52dvh);
  /* Clip the 212vw arc curtain horizontally (it would otherwise create page-wide
     horizontal scroll). overflow-x:clip leaves the vertical slide animation free
     and, unlike overflow:hidden, doesn't turn this into a sticky scroll-container. */
  overflow-x: clip;
  background: var(--paper);
  isolation: isolate;
  pointer-events: none;
}

.method-transition-curtain {
  position: absolute;
  left: 0;
  top: -2px;
  width: 100%;
  height: min(118vh, 118dvh);
  background: #08080a;
  transform: translate3d(0, var(--method-transition-curtain-y), 0);
  will-change: transform;
}

.method-transition-curtain::after {
  content: "";
  position: absolute;
  left: 50%;
  bottom: min(-30vh, -30dvh);
  width: 212vw;
  height: min(72vh, 72dvh);
  border-radius: 0 0 50% 50% / 0 0 var(--method-transition-arc-radius)
    var(--method-transition-arc-radius);
  background: #08080a;
  transform:
    translateX(-50%)
    translateY(var(--method-transition-arc-y))
    scaleX(var(--method-transition-arc-scale-x))
    scaleY(var(--method-transition-arc-scale-y));
  transform-origin: 50% 0;
  will-change: transform, border-radius;
}

.about {
  position: relative;
  overflow: hidden;
  background: var(--paper);
  color: var(--ink);
  padding: calc(140 * var(--u)) 0 calc(440 * var(--u));
}

.about-shell {
  width: min(calc(1400 * var(--u)), calc(100vw - 40 * var(--u)));
  margin: 0 auto;
  position: relative;
  z-index: 30;
}

.about-kicker {
  margin: 0 0 calc(50 * var(--u));
  color: var(--ink);
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
}

.about-title {
  width: calc(1110 * var(--u));
  max-width: 92vw;
  margin: 0 auto;
  color: var(--ink);
  font-size: calc(82 * var(--u));
  font-weight: 500;
  line-height: 1.08;
  text-align: center;
  letter-spacing: -0.03em;
}

.about-reveal-line {
  display: block;
  overflow: hidden;
  padding: 0.08em 0 0.14em;
  margin: -0.08em 0 -0.14em;
}

.about-reveal-line-inner {
  display: block;
  transform: translate3d(0, 118%, 0);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 920ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 380ms ease;
  transition-delay: var(--line-delay, 0ms);
}

.about.is-visible .about-reveal-line-inner {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}

.about-grid {
  position: relative;
  z-index: 2;
  margin-top: calc(72 * var(--u));
  display: grid;
  /* Two equal halves of the centred shell: the column boundary sits at the shell's
     horizontal centre, which (shell is margin:0 auto) is exactly 50vw. With the
     photo right-aligned in the left half its right edge lands on 50vw at any width. */
  grid-template-columns: 1fr 1fr;
  gap: 0;
  align-items: start;
}

.about-reveal-block {
  transform: translate3d(0, calc(60 * var(--u)), 0) scale(0.96);
  opacity: 0;
  will-change: transform, opacity;
  transition:
    transform 980ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 420ms ease;
  transition-delay: var(--block-delay, 0ms);
}

.about.is-visible .about-reveal-block {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.about-portrait {
  /* smaller than before (per prototype); right edge pinned to 50vw via the grid */
  justify-self: end;
  width: calc(560 * var(--u));
  height: calc(746 * var(--u));
  margin: 0;
  background: #262324;
  overflow: hidden;
  position: relative;
}

.about-portrait-photo {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about-copy {
  width: calc(490 * var(--u));
  justify-self: end;
  padding-top: calc(58 * var(--u));
  transform: translateX(calc(-34 * var(--u)));
}

.about-copy-text {
  margin: 0;
  color: var(--ink);
  font-size: calc(16 * var(--u));
  line-height: 1.04;
  text-transform: uppercase;
  text-align: left;
}

.about-copy-text + .about-copy-text {
  margin-top: 0;
}

/* Run-on layout as in the macet: the second sentence starts on the "designers."
   line (in the first paragraph) and flows straight into this block with no gap;
   only these continuation lines carry the hanging indent. */
.about-copy-text-secondary {
  margin-top: 0;
  margin-left: calc(46 * var(--u));
}

.about-link {
  display: inline-block;
  margin-top: calc(26 * var(--u));
  margin-left: calc(46 * var(--u));
  color: var(--ink);
  font-size: calc(16 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  text-decoration-line: underline;
  text-decoration-thickness: calc(2 * var(--u));
  text-underline-offset: calc(6 * var(--u));
  text-decoration-color: var(--ink);
  /* .about-reveal-line clips with overflow:hidden, which would cut off the
     underline below the text — allow it to show (the reveal is a fade+rise, so
     it doesn't need the clip). */
  overflow: visible;
  cursor: pointer;
  transition: color 200ms ease, text-decoration-color 200ms ease;
}

.about-link:hover,
.about-link:focus-visible {
  color: #ff5490;
  text-decoration-color: #ff5490;
}

.about-link:focus-visible {
  outline: calc(2 * var(--u)) solid #ff5490;
  outline-offset: calc(4 * var(--u));
  border-radius: calc(4 * var(--u));
}

.about-ornaments {
  --about-float-scale: 0.72;
  position: absolute;
  z-index: 4;
  left: 50%;
  right: auto;
  top: calc(792 * var(--u));
  bottom: auto;
  width: 100vw;
  height: calc(660 * var(--u));
  transform: translateX(-50%);
  pointer-events: none;
}

.about-float {
  --about-x: 0px;
  --about-y: 0px;
  --about-rz: 0deg;
  position: absolute;
  will-change: transform;
  /* scale() shrinks each ornament around its own centre (per prototype, a smaller
     band) without disturbing the parallax translate/rotate the render loop writes. */
  transform:
    translate3d(var(--about-x), var(--about-y), 0)
    rotate(var(--about-rz))
    scale(var(--about-float-scale, 1));
  transform-origin: center;
  filter: drop-shadow(0 calc(28 * var(--u)) calc(36 * var(--u)) rgba(14, 12, 13, 0.18));
}

.about-float img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

/* Ornaments: bigger (~1.13x) and arranged on a light diagonal — LEFT items sit
   lower (larger top), RIGHT items higher (smaller top), less pronounced than the hero. */
.about-float-certificate-blue {
  left: calc(-42 * var(--u));
  top: calc(108 * var(--u));
  width: calc(531 * var(--u));
  height: calc(654 * var(--u));
}

.about-float-bird {
  left: calc(300 * var(--u));
  top: calc(150 * var(--u));
  width: calc(549 * var(--u));
  height: calc(549 * var(--u));
}

.about-float-bag {
  left: calc(600 * var(--u));
  top: calc(110 * var(--u));
  width: calc(502 * var(--u));
  height: calc(407 * var(--u));
}

.about-float-flower {
  left: calc(540 * var(--u));
  top: calc(400 * var(--u));
  width: calc(375 * var(--u));
  height: calc(375 * var(--u));
}

.about-float-hat {
  right: calc(300 * var(--u));
  top: calc(-16 * var(--u));
  width: calc(284 * var(--u));
  height: calc(284 * var(--u));
}

.about-float-mark {
  right: calc(360 * var(--u));
  top: calc(220 * var(--u));
  width: calc(423 * var(--u));
  height: calc(423 * var(--u));
}

.about-float-certificate-black {
  right: calc(-34 * var(--u));
  top: calc(48 * var(--u));
  width: calc(506 * var(--u));
  height: calc(581 * var(--u));
}

.loop-hero {
  position: relative;
  /* Taller than one viewport so the wrap can trigger with scroll runway below
     the seam (the sticky stage keeps the hero clone framed the whole time).
     JS floors min-height to 1.6x innerHeight; keep the CSS in sync. */
  height: 160vh;
  height: 160dvh;
  background: var(--paper);
  /* MUST be `clip`, not `hidden`: `overflow: hidden` makes this element a scroll
     container, which becomes the sticky scroll-port for .loop-hero-stage and stops
     it pinning to the VIEWPORT top — the clone then scrolls up with the page by the
     overshoot, and the wrap snaps it back down (the seam jitter). `clip` clips the
     same overflow but is NOT a scroll container, so the stage pins to the viewport
     and the clone holds the resting hero steady for the whole runway. */
  overflow: clip;
}

.loop-hero-stage {
  /* Must match .visual-layer's unit exactly so the cloned objects/captions stay
     pixel-aligned with the hero — pin it here so a mobile :root --u override
     can't leak in and break the loop seam. */
  --u: min(0.0694444444vw, 0.1315789474vh);
  --u: min(0.0694444444vw, 0.1315789474dvh);
  position: sticky;
  top: 0;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

/* The loop objects reuse the hero .object markup/classes verbatim so they match
   the hero's resting positions, sizes, crops and rotations exactly. Only the
   positioning context changes: absolute inside the stage instead of fixed. */
.loop-hero-stage .object {
  position: absolute;
}

.loop-caption {
  position: absolute;
  z-index: 12;
  margin: 0;
  color: var(--ink);
  text-transform: uppercase;
  font-size: calc(14 * var(--u));
  line-height: 1.17;
}

.loop-caption-left {
  left: calc(20 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(140 * var(--u));
}

.loop-caption-center {
  left: 50%;
  bottom: calc(12 * var(--u));
  width: calc(568 * var(--u));
  text-align: center;
  transform: translateX(-50%);
}

.loop-caption-right {
  right: calc(23 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(170 * var(--u));
  text-align: right;
}

.visual-layer {
  --u: min(0.0694444444vw, 0.1315789474vh);
  --u: min(0.0694444444vw, 0.1315789474dvh);
  position: fixed;
  inset: 0;
  z-index: 60;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  pointer-events: none;
}

.scene {
  --u: min(0.0694444444vw, 0.1315789474vh);
  --u: min(0.0694444444vw, 0.1315789474dvh);
  position: relative;
  width: 100%;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  background: transparent;
  cursor: default;
}

.color-wipe {
  position: fixed;
  inset: 0;
  z-index: 10;
  width: 100vw;
  height: 100vh;
  height: 100dvh;
  background: var(--wipe-color);
  clip-path: circle(0 at var(--wipe-x) var(--wipe-y));
  transition:
    clip-path 920ms cubic-bezier(0.22, 0.78, 0.18, 1),
    opacity 300ms ease;
  will-change: clip-path;
  pointer-events: none;
}

.color-wipe.is-active {
  clip-path: circle(150vmax at var(--wipe-x) var(--wipe-y));
}

.color-wipe.is-exiting {
  opacity: 0;
  transition: opacity 300ms ease;
}

.hover-badge {
  position: absolute;
  left: 0;
  top: 0;
  z-index: 80;
  width: calc(112 * var(--u));
  height: calc(112 * var(--u));
  border-radius: 50%;
  display: grid;
  place-items: center;
  padding: calc(18 * var(--u));
  background: var(--white);
  color: var(--ink);
  text-align: center;
  text-transform: uppercase;
  font-size: calc(11.5 * var(--u));
  line-height: 1.05;
  letter-spacing: 0;
  opacity: 0;
  transform: translate3d(50vw, 50dvh, 0) translate(-50%, -50%) scale(0.65);
  transform-origin: center;
  will-change: transform, opacity;
  transition: opacity 260ms ease;
  pointer-events: none;
}

.topbar {
  position: fixed;
  left: calc(20 * var(--u));
  right: calc(23 * var(--u));
  top: calc(22 * var(--u));
  height: calc(38 * var(--u));
  z-index: 70;
  display: flex;
  align-items: center;
  justify-content: space-between;
  pointer-events: auto;
}

.logo {
  position: absolute;
  left: 0;
  top: calc(7 * var(--u));
  width: calc(239 * var(--u));
  height: calc(31 * var(--u));
  display: block;
  object-fit: contain;
  object-position: left center;
  pointer-events: none;
  transition: filter 240ms ease;
}

/* The dark ink logo is invisible while the topbar overlays a dark section
   (services / method, #08080a). JS toggles body.topbar-dark; invert it there. */
body.topbar-dark .logo {
  filter: invert(1);
}

.pill,
.round-pill,
.brief-pill {
  min-height: calc(38 * var(--u));
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
  text-transform: uppercase;
  /* font/colour/cursor inherit so the language pills work as <button>s (which do
     not inherit these from UA styles) and stay identical to the <a> brief pill. */
  font-family: inherit;
  font-weight: inherit;
  color: inherit;
  cursor: pointer;
  font-size: calc(14 * var(--u));
  line-height: 1;
  letter-spacing: 0;
  background: var(--white);
  pointer-events: auto;
  transition: background-color 180ms ease;
}

/* Active language (desktop topbar switcher) mirrors the in-menu .menu-lang-btn. */
.actions .round-pill[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.round-pill:focus-visible,
.brief-pill:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ink);
  outline-offset: calc(2 * var(--u));
}

.round-pill::-moz-focus-inner,
.brief-pill::-moz-focus-inner {
  border: 0;
}

.menu {
  position: absolute;
  left: 50%;
  top: 0;
  width: calc(90 * var(--u));
  min-height: calc(38 * var(--u));
  gap: calc(4 * var(--u));
  padding: 0 calc(11 * var(--u)) calc(1 * var(--u));
  transform: translateX(-50%);
  cursor: pointer;
}

.menu img {
  width: calc(4.316 * var(--u));
  height: calc(11.51 * var(--u));
}

/* Hide the ring for mouse/touch focus only; keyboard focus keeps a visible ring
   (WCAG 2.4.7) — mirrors the .menu-lang-btn treatment. */
.menu:focus:not(:focus-visible),
.menu:active {
  outline: none;
}

.menu:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ink);
  outline-offset: calc(2 * var(--u));
}

.menu::-moz-focus-inner {
  border: 0;
}

.actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0;
  position: relative;
  z-index: 145;
}

.menu-overlay {
  position: fixed;
  inset: 0;
  z-index: 120;
  pointer-events: auto;
  --menu-edge-gap: calc(12 * var(--u));
  --menu-anchor-left: calc(50vw - (45 * var(--u)));
  --menu-anchor-top: var(--menu-edge-gap);
  --menu-drawer-padding-left: calc(28 * var(--u));
  --menu-origin-x: 0px;
  --menu-origin-y: 0px;
  --menu-origin-scale-x: 0.12;
  --menu-origin-scale-y: 0.05;
}

.menu-overlay[hidden] {
  display: none;
}

.menu-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(218, 218, 218, 0.18);
  backdrop-filter: blur(calc(18 * var(--u)));
  -webkit-backdrop-filter: blur(calc(18 * var(--u)));
  opacity: 0;
  transition: opacity 360ms ease;
}

body.menu-open .menu-backdrop {
  opacity: 1;
}

.menu-parrot {
  position: absolute;
  z-index: 2;
  left: calc(var(--menu-anchor-left) - var(--menu-drawer-padding-left) - calc(205 * var(--u)));
  top: calc(var(--menu-anchor-top) + calc(76 * var(--u)));
  width: calc(422 * var(--u));
  height: calc(422 * var(--u));
  object-fit: contain;
  pointer-events: none;
  opacity: 0;
  transform:
    translate3d(calc(24 * var(--u)), calc(12 * var(--u)), 0)
    rotate(-10deg)
    scale(0.88);
  transform-origin: 80% 50%;
  will-change: transform, opacity;
  transition:
    opacity 260ms ease,
    transform 760ms cubic-bezier(0.16, 1, 0.3, 1);
}

body.menu-open .menu-parrot {
  opacity: 1;
  transform:
    translate3d(0, 0, 0)
    rotate(-10deg)
    scale(1);
  transition-delay: 180ms;
}

.menu-drawer {
  position: absolute;
  z-index: 3;
  top: var(--menu-anchor-top);
  left: calc(var(--menu-anchor-left) - var(--menu-drawer-padding-left));
  width: min(
    calc(930 * var(--u)),
    calc(100vw - var(--menu-anchor-left) + var(--menu-drawer-padding-left) - var(--menu-edge-gap))
  );
  height: calc(100dvh - (var(--menu-edge-gap) * 2));
  /* top padding reserves room for the overlay Close button (pinned at the Menu
     button centre, which sits over the drawer's top) so the nav doesn't collide. */
  padding: calc(64 * var(--u)) calc(28 * var(--u)) calc(28 * var(--u)) var(--menu-drawer-padding-left);
  border-radius: calc(28 * var(--u));
  background: rgba(251, 251, 251, 0.98);
  color: var(--ink);
  display: grid;
  grid-template-rows: 1fr auto;
  gap: calc(24 * var(--u));
  box-shadow:
    0 calc(32 * var(--u)) calc(80 * var(--u)) rgba(14, 12, 13, 0.12),
    0 calc(1 * var(--u)) 0 rgba(255, 255, 255, 0.45) inset;
  transform-origin: top left;
  transform:
    translate3d(var(--menu-origin-x), var(--menu-origin-y), 0)
    scale(var(--menu-origin-scale-x), var(--menu-origin-scale-y));
  opacity: 0;
  clip-path: inset(0 round calc(28 * var(--u)));
  overflow: hidden;
  will-change: transform, opacity, border-radius;
  transition:
    transform 840ms cubic-bezier(0.16, 0.96, 0.19, 1),
    opacity 280ms ease,
    border-radius 840ms cubic-bezier(0.16, 0.96, 0.19, 1);
}

body.menu-open .menu-drawer {
  transform: translate3d(0, 0, 0) scale(1);
  opacity: 1;
}

.menu-primary,
.menu-footer {
  opacity: 0;
  transform: translate3d(0, calc(26 * var(--u)), 0);
  transition:
    transform 680ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 260ms ease;
}

body.menu-open .menu-primary,
body.menu-open .menu-footer {
  opacity: 1;
  transform: translate3d(0, 0, 0);
}

body.menu-open .menu-primary {
  transition-delay: 170ms;
}

body.menu-open .menu-footer {
  transition-delay: 220ms;
}

/* Close lives in the (untransformed, fixed) overlay and is pinned to the Menu
   button's centre — so it appears exactly where "Menu" was and never shifts or
   scales while the drawer does its FLIP open animation. JS sets the anchor vars
   from the live button rect (works on desktop and the auto-width mobile button). */
.menu-close {
  position: fixed;
  left: var(--menu-anchor-center-x, 50vw);
  top: var(--menu-anchor-center-y, calc(31 * var(--u)));
  z-index: 6;
  min-height: calc(38 * var(--u));
  padding: 0 calc(6 * var(--u));
  border: 0;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: calc(4 * var(--u));
  background: transparent;
  color: var(--ink);
  font: inherit;
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  opacity: 0;
  transform: translate(-50%, -50%);
  transition: opacity 240ms ease;
}

body.menu-open .menu-close {
  opacity: 1;
  transition-delay: 160ms;
}

.menu-close:focus:not(:focus-visible),
.menu-close:active {
  outline: none;
}

.menu-close:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ink);
  outline-offset: calc(2 * var(--u));
}

.menu-close::-moz-focus-inner {
  border: 0;
}

.menu-close img {
  width: calc(4.316 * var(--u));
  height: calc(11.51 * var(--u));
}

.menu-primary {
  align-self: start;
  display: grid;
  gap: 0;
  padding: 0 calc(10 * var(--u)) 0 0;
}

.menu-primary a {
  color: inherit;
  width: fit-content;
  max-width: 100%;
  font-size: clamp(calc(48 * var(--u)), 7vw, calc(102 * var(--u)));
  font-weight: 600;
  line-height: 0.86;
  text-transform: uppercase;
  text-decoration: none;
  letter-spacing: -0.045em;
  white-space: nowrap;
  /* Enlarge the overflow:hidden clip box so glyph ascenders/descenders aren't cut
     (line-height 0.86 is intentionally tight); the equal negative margin keeps the
     stacked rhythm unchanged. The slide-up reveal still hides the pre-reveal line. */
  overflow: hidden;
  padding: 0.16em 0 0.22em;
  margin: -0.16em 0 -0.22em;
  transition: color 180ms ease;
}

.menu-primary-line {
  display: block;
  transform: translate3d(0, 108%, 0) skewY(5deg);
  transform-origin: left top;
  opacity: 0;
  filter: blur(calc(6 * var(--u)));
  transition:
    transform 860ms cubic-bezier(0.16, 1, 0.3, 1),
    opacity 320ms ease,
    filter 720ms cubic-bezier(0.18, 1, 0.36, 1);
}

body.menu-open .menu-primary-line {
  transform: translate3d(0, 0, 0) skewY(0deg);
  opacity: 1;
  filter: blur(0);
}

.menu-primary a:nth-child(1) .menu-primary-line { transition-delay: 120ms; }
.menu-primary a:nth-child(2) .menu-primary-line { transition-delay: 160ms; }
.menu-primary a:nth-child(3) .menu-primary-line { transition-delay: 200ms; }
.menu-primary a:nth-child(4) .menu-primary-line { transition-delay: 240ms; }
.menu-primary a:nth-child(5) .menu-primary-line { transition-delay: 280ms; }

.menu-close span,
.menu-footer a,
.actions a,
.actions button {
  transition:
    transform 420ms cubic-bezier(0.18, 1, 0.36, 1),
    opacity 220ms ease;
}

body.menu-open .menu-close span {
  animation: menuCloseDrift 620ms cubic-bezier(0.16, 1, 0.3, 1);
}

.menu-primary a.menu-primary-accent {
  color: #ff7db3;
}

.menu-primary a:hover {
  color: #ff7db3;
}

.menu-primary a.menu-primary-accent:hover {
  color: var(--acid);
}

.menu-footer {
  display: grid;
  grid-template-rows: auto auto;
  align-items: end;
  gap: calc(20 * var(--u));
  padding: 0 calc(10 * var(--u)) 0 0;
}

.menu-footer-links {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  align-items: flex-end;
  gap: calc(16 * var(--u));
}

.menu-lang {
  justify-self: start;
  /* Desktop keeps the topbar Eng/Esp pills, so hide the in-menu switcher here;
     mobile (where the topbar pills are hidden) re-shows it in the media query. */
  display: none;
  align-items: center;
  gap: calc(6 * var(--u));
}

.menu-lang-btn {
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  cursor: pointer;
  min-height: calc(34 * var(--u));
  padding: 0 calc(15 * var(--u));
  border-radius: 999px;
  background: rgba(14, 12, 13, 0.06);
  color: var(--ink);
  font: inherit;
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  transition: background-color 180ms ease, color 180ms ease;
}

.menu-lang-btn:hover {
  background: var(--acid);
}

.menu-lang-btn.is-active,
.menu-lang-btn[aria-pressed="true"] {
  background: var(--ink);
  color: var(--white);
}

.menu-lang-btn:focus-visible {
  outline: calc(2 * var(--u)) solid var(--ink);
  outline-offset: calc(2 * var(--u));
}

.menu-lang-btn::-moz-focus-inner {
  border: 0;
}

.menu-footer a {
  color: inherit;
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  transition: color 180ms ease;
}

.menu-footer a:hover {
  color: #ff7db3;
}

.menu-footer-links a:nth-child(1) { justify-self: start; }
.menu-footer-links a:nth-child(2) { justify-self: center; }
.menu-footer-links a:nth-child(3) { justify-self: end; }

@keyframes menuCloseDrift {
  0% {
    opacity: 0;
    transform: translate3d(0, calc(10 * var(--u)), 0);
  }
  100% {
    opacity: 1;
    transform: translate3d(0, 0, 0);
  }
}

body.menu-open .hero,
body.menu-open .manifesto,
body.menu-open .services,
body.menu-open .method,
body.menu-open .about,
body.menu-open .loop-hero,
body.menu-open .object,
body.menu-open .hover-badge,
body.menu-open .caption {
  filter: blur(calc(10 * var(--u)));
}

body.menu-open .actions,
body.menu-open .menu {
  opacity: 1;
}

body.menu-open .actions {
  pointer-events: auto;
}

.round-pill {
  width: calc(50 * var(--u));
  min-height: calc(38 * var(--u));
}

.brief-pill {
  width: calc(126 * var(--u));
  min-height: calc(38 * var(--u));
  background: var(--acid);
}

.menu:hover,
.round-pill:hover {
  background: var(--acid);
}

.brief-pill:hover {
  background: #ff5490;
}

.object {
  --tx: 0px;
  --ty: 0px;
  --scroll-x: 0px;
  --scroll-y: 0px;
  --scroll-scale: 1;
  --rz: 0deg;
  --base-rot: 0deg;
  --float: 0px;
  position: fixed;
  z-index: 40;
  display: grid;
  place-items: center;
  will-change: transform;
  transform:
    translate3d(
      calc(var(--tx) + var(--scroll-x)),
      calc(var(--ty) + var(--float) + var(--scroll-y)),
      0
    )
    rotate(var(--rz))
    rotate(var(--base-rot))
    scale(var(--scroll-scale));
  transform-origin: 50% 50%;
  transition: filter 260ms ease;
  pointer-events: none;
}

.rotator {
  --hover-x: 0px;
  --hover-y: 0px;
  display: grid;
  place-items: center;
  transform-origin: 50% 50%;
  transition: transform 540ms cubic-bezier(0.22, 1, 0.36, 1);
}

.sprite {
  position: relative;
  transform-origin: 50% 50%;
  transition: transform 980ms cubic-bezier(0.16, 1, 0.3, 1);
}

.object img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: contain;
  user-select: none;
  pointer-events: none;
}

.cow {
  left: calc(50vw + (-868.87 * var(--u)));
  top: calc(50vh + (-217.94 * var(--u)));
  top: calc(50dvh + (-217.94 * var(--u)));
  width: calc(503.571 * var(--u));
  height: calc(503.571 * var(--u));
  z-index: 7;
}

.cow .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-4.8deg);
}

.cow .sprite {
  width: calc(466.22 * var(--u));
  height: calc(466.22 * var(--u));
}

.grapes {
  left: calc(50vw + (-566.12 * var(--u)));
  top: calc(50vh + (-366.32 * var(--u)));
  top: calc(50dvh + (-366.32 * var(--u)));
  width: calc(401.563 * var(--u));
  height: calc(497.294 * var(--u));
  z-index: 5;
}

.grapes .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(18.07deg);
}

.grapes .sprite {
  width: calc(281.707 * var(--u));
  height: calc(431.177 * var(--u));
  overflow: hidden;
}

.grapes img {
  position: absolute;
  left: -36.97%;
  top: -2.52%;
  width: 176.82%;
  height: 115.53%;
  max-width: none;
}

.brunette {
  left: calc(50vw + (-459.96 * var(--u)));
  top: calc(50vh + (-87.28 * var(--u)));
  top: calc(50dvh + (-87.28 * var(--u)));
  width: calc(387.733 * var(--u));
  height: calc(387.733 * var(--u));
  z-index: 8;
}

.brunette .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-8.19deg);
}

.brunette .sprite {
  width: calc(342.422 * var(--u));
  height: calc(342.422 * var(--u));
}

.bird {
  left: calc(50vw + (-304.07 * var(--u)));
  top: calc(50vh + (-335.63 * var(--u)));
  top: calc(50dvh + (-335.63 * var(--u)));
  width: calc(529.424 * var(--u));
  height: calc(529.424 * var(--u));
  z-index: 6;
}

.bird .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-17.3deg);
}

.bird .sprite {
  width: calc(422.831 * var(--u));
  height: calc(422.831 * var(--u));
}

.blob {
  left: calc(50vw + (-176.92 * var(--u)));
  top: calc(50vh + (-147.28 * var(--u)));
  top: calc(50dvh + (-147.28 * var(--u)));
  width: calc(492.456 * var(--u));
  height: calc(492.456 * var(--u));
  z-index: 9;
}

.blob .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(6.36deg);
}

.blob .sprite {
  width: calc(445.795 * var(--u));
  height: calc(445.795 * var(--u));
}

.blonde {
  left: calc(50vw + (75.1 * var(--u)));
  top: calc(50vh + (-330.13 * var(--u)));
  top: calc(50dvh + (-330.13 * var(--u)));
  width: calc(383.028 * var(--u));
  height: calc(392.97 * var(--u));
  z-index: 4;
}

.blonde .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-6.09deg);
}

.blonde .sprite {
  width: calc(346.975 * var(--u));
  height: calc(358.168 * var(--u));
  overflow: hidden;
}

.blonde img {
  position: absolute;
  left: -42.47%;
  top: 0;
  width: 184.95%;
  height: 100%;
  max-width: none;
}

.object.is-hovered .sprite {
  transform: scale(1.085);
}

.tv {
  left: calc(50vw + (225.51 * var(--u)));
  top: calc(50vh + (-163.56 * var(--u)));
  top: calc(50dvh + (-163.56 * var(--u)));
  width: calc(491.687 * var(--u));
  height: calc(491.687 * var(--u));
  z-index: 8;
}

.tv .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(8.5deg);
}

.tv .sprite {
  width: calc(432.511 * var(--u));
  height: calc(432.511 * var(--u));
}

.cup {
  left: calc(50vw + (169.62 * var(--u)));
  top: calc(50vh + (90.69 * var(--u)));
  top: calc(50dvh + (90.69 * var(--u)));
  width: calc(148.246 * var(--u));
  height: calc(191.882 * var(--u));
  z-index: 11;
}

.cup .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-11.3deg);
}

.cup .sprite {
  width: calc(116.749 * var(--u));
  height: calc(172.354 * var(--u));
  overflow: hidden;
}

.cup img {
  position: absolute;
  left: -36.78%;
  top: -9.18%;
  width: 173.56%;
  height: 117.57%;
  max-width: none;
}

.shawarma {
  left: calc(50vw + (486.66 * var(--u)));
  top: calc(50vh + (-302.15 * var(--u)));
  top: calc(50dvh + (-302.15 * var(--u)));
  width: calc(325.544 * var(--u));
  height: calc(445.239 * var(--u));
  z-index: 10;
}

.shawarma .rotator {
  transform: translate3d(var(--hover-x), var(--hover-y), 0) rotate(-21.37deg);
}

.shawarma .sprite {
  width: calc(191.861 * var(--u));
  height: calc(403.035 * var(--u));
  overflow: hidden;
}

.shawarma img {
  position: absolute;
  left: -57.11%;
  top: 0;
  width: 210.07%;
  height: 100%;
  max-width: none;
}

.visual-layer .object {
  z-index: 60;
}

.caption {
  position: absolute;
  z-index: 15;
  margin: 0;
  text-transform: uppercase;
  font-size: calc(14 * var(--u));
  /* inherit the 800 weight so promoting .caption-center to an <h1> (for a real
     document heading) stays visually identical to the surrounding <p> captions
     instead of picking up the UA bold(700). */
  font-weight: inherit;
  line-height: 1.17;
  letter-spacing: 0;
  opacity: 1;
  transition: opacity 180ms ease;
}

.scene.is-captions-hidden .caption,
body.hero-captions-hidden .caption {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

/* During a loop wrap the hero captions must appear instantly (matching the loop
   captions), with no 180ms fade-in — otherwise they blink at the seam. */
body.loop-snapping .caption {
  transition: none;
}

.caption-left {
  left: calc(20 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(140 * var(--u));
}

.caption-center {
  left: 50%;
  bottom: calc(12 * var(--u));
  width: calc(568 * var(--u));
  max-width: none;
  text-align: center;
  transform: translateX(-50%);
}

.caption-right {
  right: calc(23 * var(--u));
  bottom: calc(12 * var(--u));
  width: calc(170 * var(--u));
  text-align: right;
}

.services {
  --services-kicker-top: calc(132 * var(--u));
  --services-kicker-height: calc(16 * var(--u));
  --services-kicker-gap: calc(80 * var(--u));
  --services-flow-gap: calc(112 * var(--u));
  --services-card-top: calc(
    var(--services-kicker-top) + var(--services-kicker-height) + var(--services-kicker-gap)
  );
  --services-release-y: 0px;
  position: relative;
  z-index: 25;
  background: #08080a;
  padding: 0;
}

.services-shell {
  width: min(calc(1200 * var(--u)), calc(100vw - 40 * var(--u)));
  margin: 0 auto;
  padding-top: var(--services-kicker-top);
  perspective: calc(1800 * var(--u));
  perspective-origin: 50% 0;
}

.services-kicker {
  /* Pinned at the top while you scroll through the card stack, then exits UPWARD
     in sync with the stack's release — driven by --services-kicker-exit (0..1,
     set each frame by updateServiceCards = the cards' groupRelease). So it leaves
     together with all the cards, not early and not lingering after them. */
  position: sticky;
  top: var(--services-kicker-top);
  z-index: 50;
  margin: 0;
  min-height: var(--services-kicker-height);
  color: #f2f2f2;
  font-size: calc(14 * var(--u));
  line-height: 1.1;
  text-transform: uppercase;
  text-align: center;
  transform: translate3d(0, calc(var(--services-kicker-exit, 0) * -200 * var(--u)), 0);
}

.services-stack {
  position: relative;
  padding-top: var(--services-kicker-gap);
  padding-bottom: calc(24 * var(--u));
}

.service-card {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) minmax(calc(260 * var(--u)), 0.98fr);
  gap: calc(12 * var(--u));
  min-height: calc(370 * var(--u));
  margin: 0 auto;
  padding: calc(24 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)) calc(24 * var(--u));
  border-radius: calc(18 * var(--u));
  overflow: hidden;
  width: min(calc(1160 * var(--u)), 100%);
  transform-origin: top center;
  will-change: transform, width, opacity;
  backface-visibility: hidden;
  transform-style: preserve-3d;
}

.services-stack .service-card {
  position: sticky;
}

.services-stack .service-card:nth-child(1) {
  top: var(--services-card-top);
}

.services-stack .service-card:nth-child(2) {
  top: var(--services-card-top);
}

.services-stack .service-card:nth-child(3) {
  top: var(--services-card-top);
}

.services-stack .service-card:nth-child(4) {
  top: var(--services-card-top);
}

.services-stack .service-card:nth-child(5) {
  top: var(--services-card-top);
}

.services-stack .service-card + .service-card {
  margin-top: var(--services-flow-gap);
}

.service-card-lime {
  background: #c5ee5b;
}

.service-card-pink {
  background: #ff5490;
}

.service-card-violet {
  background: #7e6dff;
}

.service-card-lilac {
  background: #f08bff;
}

.service-card-white {
  background: #ffffff;
}

.service-card-meta {
  position: absolute;
  left: calc(28 * var(--u));
  top: calc(24 * var(--u));
  display: flex;
  gap: calc(56 * var(--u));
  color: #08080a;
  font-size: calc(14 * var(--u));
  line-height: 1;
  text-transform: uppercase;
}

.service-card-body {
  align-self: end;
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
  gap: calc(24 * var(--u));
  align-items: end;
  padding-top: calc(84 * var(--u));
  position: relative;
  z-index: 2;
}

.service-card-body h2 {
  margin: 0;
  color: #08080a;
  font-size: calc(58 * var(--u));
  line-height: 0.92;
  text-transform: uppercase;
}

.service-card-body p {
  margin: 0 0 calc(6 * var(--u));
  max-width: calc(270 * var(--u));
  color: #08080a;
  font-size: calc(16 * var(--u));
  line-height: 1.05;
  text-transform: uppercase;
}

.service-card-media {
  position: relative;
  min-height: calc(314 * var(--u));
  border-radius: calc(14 * var(--u));
  overflow: hidden;
  margin-top: calc(-14 * var(--u));
  margin-right: 0;
  margin-bottom: 0;
}

.service-card-media-video {
  background: #4f4944;
}

.service-card.is-stacked {
  z-index: 1;
}

.service-card.is-active {
  z-index: 20;
}

.service-card.is-next {
  z-index: 24;
}

.service-card-video {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
}

/* Stretched link making the whole service card navigate to its service page,
   without wrapping the article (which would disturb the 3D scroll-stack
   transforms applied to .service-card). z-index is local to the card's own
   stacking context (the card has transform), so only the topmost card in the
   sticky stack is clickable. */
.service-card-link {
  position: absolute;
  inset: 0;
  z-index: 6;
  border-radius: inherit;
  text-decoration: none;
}

.service-card-link:focus-visible {
  outline: calc(3 * var(--u)) solid #08080a;
  outline-offset: calc(-6 * var(--u));
}

/* =========================================================================
   MOBILE / ADAPTIVE (first pass)
   The desktop "canvas" unit --u = min(0.0694vw, 0.1316dvh) collapses to ~0.27px
   on a phone, shrinking the whole desktop layout. Here we:
   - raise :root --u to a readable ~0.9px so page sections (manifesto, services,
     method, about) render at sane sizes, then cap their widths to the viewport;
   - KEEP the hero/loop object collage on the natural (small) unit so the objects
     still fit a narrow screen AND the loop clone stays pixel-matched to the hero;
   - size the chrome that lives inside .visual-layer (topbar, captions) explicitly
     in px since it shares the natural unit;
   - reflow every section to a single column, including vertical service cards
     that keep the sticky 3D stack.
   Breakpoint is 900px (not 700) so portrait tablets and large phones get this
   reflowed layout instead of the desktop canvas unit, which—being a min() of a vw
   AND a dvh term—shrinks below 1px on any viewport narrower/shorter than the
   1440x760 reference (≈53% scale, ~7px text on a 768px tablet).
   ========================================================================= */
@media (max-width: 900px) {
  :root {
    --u: min(0.23vw, 0.92px);
  }

  /* ---------- Boot screen (mobile): icons 2x bigger. The preloader pins its own
     --u to the natural unit (so it ignores the :root bump above), which left the
     falling icons small on phones. Doubling just the preloader's --u scales the
     icon size + drop-shadow x2; the fall travel is vh-based (unchanged) and the
     z-depth + perspective are both --u-based so the 3D foreshortening is identical
     — a clean 2x of the whole boot composition. */
  .preloader {
    --u: min(0.1388888889vw, 0.2631578947dvh);
  }

  /* ---------- Hero collage (mobile): big, screen-filling, diagonal (right higher /
     left lower). The sprite fills its object box so the VISIBLE image grows with the
     box (the box alone wouldn't — the sprite is centred and --u-sized otherwise).
     Boxes use vw/vh and are sized to each sprite's native aspect; this also drives
     the loop-hero clone (shared classes, vw resolves identically) keeping the seam.
     Sprites are sized explicitly in vw (not 100%) — the cropped shapes' image is
     position:absolute so a %-height sprite would collapse to 0. */
  /* Per Главный экран мобилка.pdf: a vertical, overlapping diagonal collage —
     crow top-left, pink TV top-centre, shawarma top-right, big blonde head in
     the centre with the quilted bag (bird.png) just below it, brunette + grapes
     lower-left, smiley cup right, cow in the pink hoodie at the bottom-centre.
     The loop-hero clone shares these classes (vw/vh resolves identically), so
     the seam stays pixel-matched. */
  .cow .sprite { width: 60.2vw; height: 60.2vw; }
  .grapes .sprite { width: 29vw; height: 44.39vw; }
  .bird .sprite { width: 59.55vw; height: 59.55vw; }
  .brunette .sprite { width: 53.89vw; height: 53.89vw; }
  .blob .sprite { width: 65.97vw; height: 65.97vw; }
  .tv .sprite { width: 49.79vw; height: 49.79vw; }
  .blonde .sprite { width: 54.48vw; height: 56.24vw; }
  .cup .sprite { width: 18.68vw; height: 27.58vw; }
  /* Fill each box like Figma's image fills (cover): square assets are unaffected,
     blonde/cup/grapes get the cropped fill the mockup uses. */
  .visual-layer .object img,
  .loop-hero .object img { object-fit: cover; }

  /* Positions tuned to Главный экран мобилка.pdf via centroid alignment (the
     loop-hero clone shares these classes, so the seam stays matched). */
  /* Positions tuned to Главный экран мобилка.pdf via centroid alignment; sizes
     tuned to each object's measured box (the loop-hero clone shares these
     classes, so the seam stays matched). Enlarging keeps the object centred by
     compensating left/top by half the size delta. */
  /* Per the latest mobile mockup: shawarma is dropped, the collage is pulled into
     the upper ~75% and the bottom strip is freed for the returned captions (the
     description bottom-right + "concept-led design agency" bottom-left). The
     loop-hero clone shares these classes, so the seam stays pixel-matched. */
  /* shawarma removed on mobile (one fewer 3D element per the new mockup); hiding
     the shared class drops it from the loop-hero clone too, keeping the seam. */
  .shawarma { display: none; }
  /* crow (blob.png) — upper-centre-left */
  .bird { left: 24.62vw; top: 5vh; top: 5dvh; width: 59.55vw; height: 59.55vw; --base-rot: -10.99deg; }
  /* pink TV "LETS MAKE IT FANCY" — top-right (where shawarma used to sit) */
  .tv { left: 55.71vw; top: 0.41vh; top: 0.41dvh; width: 49.79vw; height: 49.79vw; --base-rot: 8.5deg; }
  /* blonde head — large, centre-right */
  .blonde { left: 34.37vw; top: 19.58vh; top: 19.58dvh; width: 54.48vw; height: 56.24vw; --base-rot: -6.09deg; }
  /* quilted bag (bird.png) — centre, below the blonde head */
  .blob { left: 40.12vw; top: 33.06vh; top: 33.06dvh; width: 65.97vw; height: 65.97vw; --base-rot: 6.36deg; }
  /* brunette — left, mid */
  .brunette { left: 1.51vw; top: 35.99vh; top: 35.99dvh; width: 53.89vw; height: 53.89vw; --base-rot: -8.19deg; }
  /* smiley cup — right, mid */
  .cup { left: 77.65vw; top: 54.89vh; top: 54.89dvh; width: 18.68vw; height: 27.58vw; --base-rot: -11.3deg; }
  /* cow in the pink hoodie — lower-left */
  .cow { left: -14.48vw; top: 54.27vh; top: 54.27dvh; width: 60.2vw; height: 60.2vw; --base-rot: -9.67deg; }
  /* grapes — centre-left, low */
  .grapes { left: 17.45vw; top: 66.91vh; top: 66.91dvh; width: 29vw; height: 44.39vw; --base-rot: 18.07deg; }

  /* Explicit front-to-back order for the overlapping collage. Written as
     .object.NAME (specificity 0,2,0) so the SAME stacking applies to BOTH the
     fixed hero objects (otherwise pinned to z-index:60 by .visual-layer .object)
     AND the loop-hero clones (otherwise on their desktop per-object z) — so the
     two compositions are pixel- AND layer-identical and the loop seam can't pop. */
  /* Front-to-back order taken from the Figma frame's layer order (node sequence
     back→front): crow, TV, bag, cup, blonde, brunette, cow, grapes. So the bag
     sits behind the heads, the cup behind the heads, the cow in front of the
     heads, and the grapes are front-most. */
  .object.bird { z-index: 1; }      /* crow — backmost */
  .object.tv { z-index: 2; }
  .object.blob { z-index: 3; }      /* quilted bag — behind the heads */
  .object.cup { z-index: 4; }
  .object.blonde { z-index: 5; }
  .object.brunette { z-index: 6; }
  .object.cow { z-index: 7; }
  .object.grapes { z-index: 8; }    /* front-most */

  /* ---------- Topbar (natural unit → size in px) ----------
     Mobile chrome matched to Главный/Последний экран мобилка.pdf (390-px frame).
     Applied to ALL pages (the service pages reuse styles.css and follow the same
     mobile chrome): big logo top-left, MENU pill top-right, SHARE A BRIEF pinned
     to the viewport's bottom-right corner. */
  .topbar {
    left: 14px;
    right: 14px;
    top: 12px;
    height: 38px;
  }

  /* Logo is noticeably larger on mobile in the mockup (~182px wide, not 132). */
  .logo {
    top: 7px;
    width: 182px;
    height: 24px;
  }

  .pill,
  .round-pill,
  .brief-pill,
  .menu {
    min-height: 38px;
    font-size: 13px;
  }

  /* MENU pill → top-RIGHT corner. The desktop rule centres it (position:absolute;
     left:50%; translateX(-50%)); reset that and pin it to the bar's right edge. */
  .menu {
    position: absolute;
    left: auto;
    right: 0;
    top: 0;
    transform: none;
    width: auto;
    gap: 4px;
    padding: 0 12px 1px;
    font-size: 14px;
  }

  .menu img {
    width: 3px;
    height: 8px;
  }

  /* Tuck the language toggles into the menu on phones to keep the bar uncluttered. */
  .actions .round-pill {
    display: none;
  }

  /* SHARE A BRIEF / "send a brief" leaves the topbar and pins to the viewport's
     bottom-right corner. On the home page it is NOT cloned into the loop-hero
     (only .object / .loop-caption are), so a fixed position is safe for the loop
     seam. Keeps its acid background from the desktop rule; z-index sits above the
     3D collage (.object are z≤60). */
  .brief-pill {
    position: fixed;
    left: auto;
    right: 15px;
    bottom: 11px;
    width: auto;
    min-height: 40px;
    padding: 0 38px;
    font-size: 14px;
    z-index: 80;
  }

  /* ---------- Hero + loop captions (natural unit → size in px, identical on both
     so the loop seam stays pixel-perfect) ---------- */
  /* Captions return on mobile (latest mockup): "concept-led design agency"
     bottom-left and the description (the page <h1>) bottom-right, above the
     SHARE A BRIEF pill. Hero and loop-caption positions are kept identical so the
     loop seam stays pixel-perfect. "let's meet in barcelona" isn't in the mockup
     — keep it hidden on both. */
  .caption-right,
  .loop-caption-right {
    display: none;
  }

  .caption-left,
  .loop-caption-left {
    left: 14px;
    bottom: 18px;
    width: 150px;
    font-size: 13px;
    line-height: 1.18;
  }

  .caption-center,
  .loop-caption-center {
    left: auto;
    right: 15px;
    bottom: 74px;
    width: 185px;
    max-width: 185px;
    text-align: left;
    transform: none;
    font-size: 15px;
    line-height: 1.12;
  }

  /* The desktop forces a line break mid-sentence; on the narrow mobile block let
     the description wrap naturally instead (matches the mockup's line breaks). */
  .caption-center br,
  .loop-caption-center br {
    display: none;
  }

  /* ---------- Manifesto ---------- */
  .manifesto-panel {
    --m: min(0.23vw, 0.92px);
    padding-top: calc(120 * var(--m));
    padding-bottom: calc(120 * var(--m));
  }

  .manifesto-label {
    left: calc(20 * var(--m));
    top: calc(36 * var(--m));
    font-size: calc(12 * var(--m));
  }

  .manifesto-kicker {
    left: auto;
    right: calc(20 * var(--m));
    top: calc(36 * var(--m));
    width: 46vw;
    text-align: right;
    transform: none;
    font-size: calc(12 * var(--m));
  }

  .manifesto-copy {
    width: 90vw;
    max-width: 90vw;
    font-size: clamp(24px, 7.4vw, 34px);
    line-height: 1.08;
  }

  /* ---------- Services: vertical cards, 3D sticky stack preserved ---------- */
  .services {
    --services-kicker-top: calc(92 * var(--u));
    --services-kicker-gap: calc(44 * var(--u));
    --services-flow-gap: calc(64 * var(--u));
  }

  .services-shell {
    width: calc(100vw - 28px);
    perspective: calc(1400 * var(--u));
  }

  .service-card {
    grid-template-columns: 1fr;
    gap: calc(16 * var(--u));
    min-height: 0;
    width: 100%;
    padding: calc(20 * var(--u)) calc(16 * var(--u)) calc(16 * var(--u));
    border-radius: calc(20 * var(--u));
  }

  .service-card-meta {
    left: calc(20 * var(--u));
    top: calc(18 * var(--u));
    gap: calc(28 * var(--u));
    font-size: calc(13 * var(--u));
  }

  .service-card-body {
    grid-template-columns: 1fr;
    gap: calc(12 * var(--u));
    padding-top: calc(52 * var(--u));
    align-items: start;
  }

  .service-card-body h2 {
    font-size: clamp(34px, 11vw, 52px);
    line-height: 0.94;
  }

  .service-card-body p {
    max-width: none;
    font-size: calc(15 * var(--u));
    line-height: 1.1;
  }

  .service-card-media {
    min-height: 0;
    /* square (was 16/11 elongated) → bigger, more massive video on mobile */
    aspect-ratio: 1 / 1;
    align-self: stretch;
    margin-top: calc(4 * var(--u));
  }

  /* ---------- Method: keep the statement + tappable hotspots, drop the
     desktop-positioned hover stickers (they don't work on touch) ---------- */
  .method {
    padding: calc(64 * var(--u)) 0 calc(56 * var(--u));
  }

  .method-shell {
    width: calc(100vw - 28px);
  }

  .method-kicker {
    margin-bottom: calc(40 * var(--u));
    padding-top: calc(28 * var(--u));
  }

  .method-copy {
    width: 100%;
    max-width: 100%;
    font-size: clamp(24px, 7.4vw, 34px);
    line-height: 1.08;
  }

  .method-hotspot-label {
    text-decoration-thickness: calc(6 * var(--u));
  }

  .method-stickers {
    display: none;
  }

  /* ---------- Method → About transition curtain ---------- */
  /* Smaller transition curtain on mobile so it stops overlapping the content. */
  .method-transition {
    height: min(44vh, 44dvh);
    margin-bottom: min(-28vh, -28dvh);
  }

  /* ---------- About: single column ---------- */
  .about {
    /* Bottom padding must clear the ornament band below the copy (the section is
       overflow:hidden, so a short padding would clip it). */
    padding: calc(80 * var(--u)) 0 800px;
  }

  .about-shell {
    width: calc(100vw - 28px);
  }

  .about-kicker {
    margin-bottom: calc(36 * var(--u));
  }

  .about-title {
    width: 100%;
    max-width: 100%;
    font-size: clamp(30px, 9vw, 46px);
    line-height: 1.05;
  }

  .about-grid {
    grid-template-columns: 1fr;
    gap: calc(40 * var(--u));
    margin-top: calc(44 * var(--u));
  }

  .about-portrait {
    width: 100%;
    height: auto;
    aspect-ratio: 650 / 760;
  }

  .about-copy {
    width: 100%;
    justify-self: stretch;
    padding-top: 0;
    transform: none;
  }

  .about-copy-text,
  .about-link {
    font-size: calc(15 * var(--u));
  }

  .about-copy-text-secondary,
  .about-link {
    margin-left: calc(40 * var(--u));
  }

  /* Single-screen ornament collage below the copy, matched to Последний экран
     мобилка.pdf (390-px frame) by measuring each ornament's box: blue Awwwards
     cert (top-left) → beige owl (top-centre) → good-company box (right) → rainbow
     pompom (centre) → Applaud hat (left) → purple swirl (centre) → black "Website
     of the day" award (right-low). left/width/height in vw (scale with the
     viewport); top in px (the collage is a fixed-height band). top:100% anchors
     to the bottom edge of the copy; .about's bottom padding clears the band. */
  .about-ornaments {
    --about-float-scale: 1;
    top: calc(100% + 16px);
    bottom: auto;
    height: 740px;
  }

  /* Box aspect = each asset's intrinsic aspect (no distortion, predictable
     contain-fit): cert 412x507, owl 485x485, box 470x381, pompom 343x343,
     hat 354x354, swirl 503x503, award 437x502. */
  .about-float-certificate-blue { left: 0vw;  top: 68px;  width: 43vw; height: 53vw; }
  .about-float-bird            { left: 30vw; top: 95px;  width: 50vw; height: 50vw; }
  .about-float-bag             { left: 54vw; top: 230px; width: 52vw; height: 42vw; right: auto; }
  .about-float-flower          { left: 42vw; top: 365px; width: 40vw; height: 40vw; }
  .about-float-hat             { left: 2vw;  top: 420px; width: 54vw; height: 54vw; right: auto; }
  .about-float-mark            { left: 40vw; top: 455px; width: 50vw; height: 50vw; right: auto; }
  .about-float-certificate-black { left: 51vw; top: 485px; width: 56vw; height: 64vw; right: auto; }

  /* ---------- Menu drawer: full-bleed sheet ---------- */
  .menu-overlay {
    --menu-edge-gap: 12px;
  }

  .menu-drawer {
    left: 12px;
    right: 12px;
    width: auto;
    padding: 56px 18px 22px;
    border-radius: 22px;
    gap: 18px;
  }

  .menu-parrot {
    display: none;
  }

  .menu-primary a {
    font-size: clamp(34px, 11vw, 56px);
  }

  .menu-footer {
    gap: 14px;
  }

  /* Stack the footer links on phones so the long email gets its natural width
     instead of overflowing a cramped 1fr column. */
  .menu-footer-links {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .menu-footer-links a:nth-child(1),
  .menu-footer-links a:nth-child(2),
  .menu-footer-links a:nth-child(3) {
    justify-self: start;
  }

  .menu-footer a {
    font-size: 12px;
  }

  .menu-lang {
    display: inline-flex;
    gap: 8px;
  }

  .menu-lang-btn {
    min-height: 34px;
    padding: 0 14px;
    font-size: 12px;
  }

  .menu-lang-btn:focus-visible {
    outline-width: 2px;
    outline-offset: 2px;
  }

  .menu-close {
    min-height: 36px;
    padding: 0 10px;
    font-size: 12px;
  }

  .menu-close img {
    width: 3px;
    height: 8px;
  }
}

@media (prefers-reduced-motion: reduce) {
  /* Neutralise every slide/blur/scale reveal (about lines, menu items & drawer
     FLIP, parrot, stickers, color-wipe, curtain) for motion-sensitive users.
     Transitions are made instant rather than removed so JS that waits on
     transitionend still fires. The rAF parallax is separately stilled by the
     .object / .about transform:none rules below. */
  *,
  *::before,
  *::after {
    animation-duration: 0.001ms !important;
    animation-delay: 0ms !important;
    transition-duration: 0.001ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
  }

  .preloader-object,
  .preloader.is-leaving .preloader-curtain {
    animation: none;
    transition: none;
  }

  .preloader-object {
    opacity: 0;
  }

  .object {
    transition: none;
    transform: none;
  }

  .method-transition {
    height: calc(24 * var(--u));
  }

  .method-transition-curtain {
    display: none;
  }

  .about {
    transform: none;
  }
}