/* LEGAL DISCLAIMER
 *
 * These Fonts are licensed only for use on these domains and their subdomains:
 * slik.com.au
 *
 * It is illegal to download or use them on other websites.
 *
 * While the @font-face statements below may be modified by the client, this
 * disclaimer may not be removed.
 *
 * Optimo webfonts are protected by copyright law and provided under license. To modify, alter, translate, convert, decode or reverse engineer in any manner whatsoever, including converting the Font Software into a different format is strictly prohibited. The webfont files are not to be used for anything other than web font use.
 *
 * optimo.ch
 */

@font-face {
  font-family: 'Rand';
  src: url('../fonts/Rand-Regular.woff2') format('woff2'),
       url('../fonts/Rand-Regular.woff') format('woff');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rand';
  src: url('../fonts/Rand-Medium.woff2') format('woff2'),
       url('../fonts/Rand-Medium.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Rand';
  src: url('../fonts/Rand-Bold.woff2') format('woff2'),
       url('../fonts/Rand-Bold.woff') format('woff');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

/* ------------------------------------------------------------------
   Tokens
------------------------------------------------------------------ */
:root {
  --dark: #1e1e1e;
  --mint: #c5ffc5;
  --purple: #7c00ff;
  --yellow: #ffee04;
  --blue: #01a0e2;
  --green: #00903c;
  --red: #fd3c30;
  --lavender: #c3a6d0;
  --orange: #ff6602;
  --pink: #ffdbe3;
  --white: #ffffff;
  --offwhite: #f2f2f2;
  --gray: #9d9d9d;
  --line-dark: #333333;
  --line-light: #e9e9e9;

  --cell: 81px;
  --half: 40.5px;
  --container: 1120px;
  --gutter: 40px;

  --font: 'Rand', system-ui, -apple-system, 'Segoe UI', 'Helvetica Neue', Arial, sans-serif;
  --mono: 'JetBrains Mono', 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace;

  --h-display: clamp(44px, 5.556vw, 80px);
  --body: clamp(17px, 1.39vw, 20px);
}

/* ------------------------------------------------------------------
   Base
------------------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  font-family: var(--font);
  font-weight: 400;
  font-size: var(--body);
  line-height: 1.1;
  color: var(--dark);
  background: var(--dark);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
ul, ol { list-style: none; margin: 0; padding: 0; }
h1, h2, h3, p { margin: 0; font-weight: inherit; }
pre { margin: 0; }
:focus-visible { outline: 2px solid var(--yellow); outline-offset: 3px; }
::selection { background: var(--purple); color: #fff; }

.skip-link {
  position: absolute; left: -999px; top: 0; z-index: 200;
  background: var(--yellow); color: var(--dark); padding: 8px 16px; font-weight: 700;
}
.skip-link:focus { left: 16px; top: 16px; }

/* Elements GSAP reveals; hidden only when JS is available */
.js [data-anim], .js [data-split] { visibility: hidden; }

.container { width: min(var(--container), 100% - 2 * var(--gutter)); margin-inline: auto; }
section, .site-footer { position: relative; overflow: hidden; }

.display {
  font-weight: 700;
  font-size: var(--h-display);
  line-height: 1;
  letter-spacing: -0.01em;
  text-wrap: balance;
}
.display .line-mask { padding-bottom: 0.08em; margin-bottom: -0.08em; }

.c-mint { color: var(--mint); }
.c-purple { color: var(--purple); }
.c-green { color: var(--green); }
.c-red { color: var(--red); }

.bg-purple { background: var(--purple); }
.bg-mint { background: var(--mint); }
.bg-yellow { background: var(--yellow); }
.bg-blue { background: var(--blue); }
.bg-green { background: var(--green); }
.bg-red { background: var(--red); }
.bg-lavender { background: var(--lavender); }
.bg-orange { background: var(--orange); }
.bg-pink { background: var(--pink); }
.bg-white { background: var(--white); }
.bg-dark { background: var(--dark); }

.link { color: var(--purple); }
.link:hover { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* Pixel icons */
.icon { display: block; height: 1em; width: auto; }

/* Decorative pixel squares */
.px { position: absolute; width: var(--half); height: var(--half); pointer-events: none; z-index: 1; }
.px--m { width: var(--cell); height: var(--cell); }
.px--grad-mint { background: linear-gradient(90deg, var(--mint) 0%, #fff 100%); }
.px--grad-mint-dark { background: linear-gradient(90deg, var(--mint) 0%, var(--dark) 100%); }

/* ------------------------------------------------------------------
   Buttons
------------------------------------------------------------------ */
.btn {
  display: inline-flex; align-items: center; gap: 13px;
  height: 48px; padding: 0 26px 0 33px; border-radius: 999px;
  font-size: 13px; font-weight: 700; line-height: 1; white-space: nowrap;
  transition: background-color .2s, color .2s, border-color .2s;
}
.btn .icon { height: 13px; flex: none; transition: transform .25s steps(3); }
.btn--mint { background: var(--mint); color: var(--green); }
.btn--mint:hover { background: #fff; }
.btn--mint:hover .icon { transform: translateX(5px); }
.btn--outline { border: 1px solid var(--mint); color: var(--mint); }
.btn--outline:hover { background: rgba(197, 255, 197, .12); }
.btn--outline:hover .icon { transform: translateY(4px); }
.btn--outline .icon { height: 16px; }
.btn--nav { height: 50px; padding: 0 30px 0 32px; text-transform: uppercase; letter-spacing: .02em; }
.btn--lg { height: 52px; padding: 0 30px 0 36px; }

/* ------------------------------------------------------------------
   Logo
------------------------------------------------------------------ */
.logo {
  --logo-height: 90px;
  display: inline-flex; align-items: center;
  height: var(--logo-height);
}
.logo__img {
  height: var(--logo-height);
  width: auto;
  display: block;
}

/* ------------------------------------------------------------------
   Header
------------------------------------------------------------------ */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 100;
  padding: 35px 72px 0;
  transition: transform .45s cubic-bezier(.4, 0, .2, 1), background-color .3s;
}
.site-header__inner { display: flex; align-items: flex-start; justify-content: space-between; }
.site-header.is-hidden { transform: translateY(-110%); }
.site-header.is-scrolled {
  padding: 12px 72px;
  background: rgba(30, 30, 30, .92);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
/* Logo shrinks cleanly */
.site-header .logo { transform-origin: left center; transition: transform .35s ease; }
.site-header.is-scrolled .logo { transform: scale(.4444); height: 40px; }
.site-header.is-scrolled .nav { height: 40px; }
.site-header.is-scrolled .btn--nav { height: 40px; }

.nav { display: flex; align-items: center; gap: 40px; height: 50px; }
.nav__link {
  position: relative; font-size: 12px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: #fff;
}
.nav__link::after {
  content: ""; position: absolute; left: 0; right: 100%; bottom: -7px; height: 2px; background: var(--mint);
  transition: right .3s steps(5);
}
.nav__link:hover::after, .nav__link:focus-visible::after { right: 0; }

/* ------------------------------------------------------------------
   Hero
------------------------------------------------------------------ */
.hero { background: var(--dark); color: #fff; min-height: 806px; padding-top: 117px; }
.hero__grid, .quick__grid {
  position: absolute; inset: 0; pointer-events: none;
  background-image:
    linear-gradient(to right, var(--line-dark) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-dark) 1px, transparent 1px);
  background-size: var(--cell) var(--cell);
  background-position: calc(50% - var(--half)) 36px;
}
.hero__inner { position: relative; height: 689px; }

.hero__collage {
  position: absolute; top: 0; right: calc(50% + 81px);
  width: 648px; aspect-ratio: 16 / 17;
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(17, minmax(0, 1fr));
  container-type: inline-size;
}
.tile {
  position: relative; overflow: hidden; min-width: 0; min-height: 0;
  grid-column: var(--c) / span var(--w, 1);
  grid-row: var(--r) / span var(--h, 1);
}
.tile > img:not(.icon) { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile--center { display: grid; place-items: center; }
.tile--center .icon { position: static; object-fit: contain; }
.tile--bluegrad { background: linear-gradient(90deg, #01a0e2 0%, #0c5f96 55%, #1e1e1e 100%); }
.tile__icon-heart { width: 52%; height: auto; color: var(--dark); }

.tile--code { background: var(--dark); }
.code {
  position: absolute; inset: 0;
  padding: 1.4cqw 1.4cqw; font-family: var(--mono); font-size: 1.62cqw; line-height: 1.2;
  color: #d9d9d9; white-space: normal; overflow: hidden;
}
.code-line { display: block; white-space: pre; }
.code b { font-weight: 400; color: #5aa8f2; }
.code i { font-style: normal; color: #f0d75a; }
.code-cursor { display: inline-block; width: .55em; height: 1em; background: var(--mint); vertical-align: -.15em; animation: blink 1s steps(2) infinite; }
@keyframes blink { 50% { opacity: 0; } }

.hero__content { position: absolute; left: 50%; top: 96px; width: 620px; max-width: calc(50% - 20px); }
.hero__title { color: #fff; }
.hero__sub { margin-top: 37px; font-size: 20px; line-height: 1.1; }
.hero__actions { margin-top: 44px; display: flex; flex-wrap: wrap; gap: 30px 30px; }

.scroll-hint {
  position: absolute; right: 32px; bottom: 16px; z-index: 2;
  display: flex; align-items: flex-end; gap: 7px;
  color: var(--yellow); font-family: var(--mono); font-size: 12px; letter-spacing: .06em;
}
.scroll-hint__label { writing-mode: vertical-rl; transform: rotate(180deg); line-height: 1; }
.scroll-hint__line { display: block; width: 2px; height: 45px; background: var(--yellow); }

/* ------------------------------------------------------------------
   Marquee
------------------------------------------------------------------ */
.marquee { position: relative; height: 64px; background: var(--yellow); color: var(--dark); overflow: hidden; display: flex; align-items: center; }
.marquee__track { display: flex; will-change: transform; }
.marquee__set { display: flex; align-items: center; flex: none; }
.marquee__item { padding: 0 30px; font-size: 15px; font-weight: 700; text-transform: uppercase; letter-spacing: .01em; white-space: nowrap; }
.marquee__sep { display: block; width: 9px; height: 9px; flex: none; }
.marquee__sep svg { display: block; width: 100%; height: 100%; }

/* ------------------------------------------------------------------
   The volume exploded
------------------------------------------------------------------ */
.volume { background: var(--mint); color: var(--dark); padding: 114px 0 96px; min-height: 720px; }
.volume__inner { display: grid; grid-template-columns: minmax(0, 1fr) 416px; column-gap: 164px; align-items: start; }
.volume .display { line-height: 1.1; }
.volume__copy { margin-top: 21px; max-width: 540px; }
.volume__copy p + p { margin-top: 1.1em; }
.treemap { position: relative; margin-top: 40px; }
.treemap__svg { display: block; width: 100%; height: auto; }
.treemap__dot { position: absolute; left: -41px; top: -30px; width: 41px; height: 40px; background: var(--dark); }

/* ------------------------------------------------------------------
   Services
------------------------------------------------------------------ */
.services { background: var(--dark); color: #fff; padding: 113px 0 118px; }
.services__lead { margin-top: 36px; color: var(--gray); }
.services__grid { margin-top: 22px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.service {
  display: flex; flex-direction: column; min-height: 270px; padding: 33px 16px 25px;
  transition: transform .25s steps(3);
}
.service:hover { transform: translateY(-4px); }
.service--purple { background: var(--purple); color: #fff; }
.service--mint { background: var(--mint); color: var(--dark); }
.service--yellow { background: var(--yellow); color: var(--dark); }
.service__icon { display: block; height: 64px; }
.service__icon .icon { height: 64px; }
.service__title { margin-top: 38px; font-size: 32px; line-height: 1; font-weight: 400; letter-spacing: -0.005em; }
.service__desc { margin-top: auto; padding-top: 24px; font-size: 12px; line-height: 13px; max-width: 270px; }
.service--purple .service__desc { color: rgba(255, 255, 255, .9); }

/* ------------------------------------------------------------------
   Quick wins
------------------------------------------------------------------ */
.quick { background: #fff; color: var(--dark); padding: 167px 0 80px; }
.quick__grid {
  background-image:
    linear-gradient(to right, var(--line-light) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-light) 1px, transparent 1px);
  background-position: calc(50% - var(--half)) 80px;
}
.quick .container { position: relative; z-index: 2; }
.quick__sub { margin-top: 42px; color: var(--gray); max-width: 560px; }
.steps { margin-top: 63px; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.step {
  display: flex; flex-direction: column; min-height: 334px; padding: 33px 16px 60px;
  background: #fff; border: 1px solid var(--dark);
  transition: background-color .25s;
}
.step:hover { background: #fafafa; }
.step__icon { display: flex; align-items: flex-start; height: 80px; }
.icon--chat-purple { height: 76px; }
.icon--chevron { height: 64px; }
.icon--code { height: 67px; }
.step__title { margin-top: 62px; font-size: 32px; line-height: 1; font-weight: 400; letter-spacing: -0.005em; }
.step__desc { margin-top: auto; padding-top: 24px; font-size: 12px; line-height: 13px; max-width: 320px; }

/* ------------------------------------------------------------------
   In your house
------------------------------------------------------------------ */
.inhouse { background: var(--purple); color: #fff; min-height: 647px; padding: 158px 0 120px; }
.inhouse__collage {
  position: absolute; left: calc(50% - 729px); top: 80px;
  width: 648px; aspect-ratio: 16 / 14;
  display: grid; grid-template-columns: repeat(16, minmax(0, 1fr)); grid-template-rows: repeat(14, minmax(0, 1fr));
  container-type: inline-size;
}
.inhouse__inner { position: relative; z-index: 2; display: grid; grid-template-columns: 1fr 1fr; }
.inhouse__content { grid-column: 2; padding-left: 7px; max-width: 575px; }
.inhouse__copy { margin-top: 37px; }

.tile__icon-image { width: 42%; height: auto; color: var(--dark); }
.tile__icon-house { width: 54%; height: auto; color: var(--dark); }
.tile--cool { background: linear-gradient(90deg, #01a0e2 0%, #7c00ff 100%); }
.tile--warm { background: linear-gradient(90deg, #ff6602 0%, #c93a95 55%, #7c00ff 100%); }
.tile--dash { display: grid; place-items: center; }
.dash__svg { display: block; width: 100%; height: 100%; }
.tile--label { display: flex; align-items: center; padding-left: 5.5%; font-size: 1.85cqw; font-weight: 700; color: var(--dark); white-space: nowrap; }

.tile--phone { display: flex; flex-direction: column; align-items: center; padding: 3% 5.5% 5.5%; }
.phone__bar { position: relative; display: block; width: 100%; height: 2px; background: var(--dark); }
.phone__bar i { position: absolute; left: 0; top: 0; height: 100%; width: 100%; background: var(--green); transform-origin: left center; transform: scaleX(.3); }
.phone__play { position: static; width: 38%; height: auto; color: var(--dark); margin: auto 0; object-fit: contain; }
.phone__foot { display: flex; align-items: center; gap: 7%; width: 100%; }
.phone__foot-line { display: block; flex: 0 0 66%; height: 5px; background: var(--dark); }
.phone__dot { display: block; width: 5px; height: 5px; background: var(--dark); }

/* ------------------------------------------------------------------
   Marketing
------------------------------------------------------------------ */
.marketing { background: var(--yellow); color: var(--dark); padding: 116px 0 115px; }
.marketing__inner { display: grid; grid-template-columns: minmax(0, 1fr) 365px; column-gap: 195px; align-items: start; }
.marketing__copy { margin-top: 37px; color: var(--gray); max-width: 560px; }
.quote { margin-top: 9px; min-height: 335px; padding: 34px 17px 30px; background: var(--dark); color: #fff; }
.quote__icon { height: 72px; }
.quote__text { margin-top: 87px; font-size: 32px; line-height: 1; letter-spacing: -0.005em; }

/* ------------------------------------------------------------------
   Partners
------------------------------------------------------------------ */
.partners { background: var(--mint); color: var(--dark); padding: 114px 0 120px; }
.team { margin-top: 31px; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; align-items: start; }
.member__photo { clip-path: inset(0 0 0 0); overflow: hidden; }
.member__photo img { width: 100%; aspect-ratio: 268 / 272; object-fit: cover; }
.member__toggle { display: flex; align-items: flex-start; justify-content: space-between; width: 100%; text-align: left; }
.member__meta { display: block; padding-top: 8px; font-size: 13px; line-height: 15px; }
.member__name { display: block; font-weight: 700; }
.member__role { display: block; }
.member__icon { display: grid; place-items: center; flex: none; width: 40px; height: 40px; background: var(--dark); color: #fff; transition: background-color .2s; }
.member__toggle:hover .member__icon { background: var(--purple); }
.member__icon .icon { height: 24px; }
.member__arrow-up { display: none; color: var(--yellow); }
.member.is-open .member__arrow-up { display: block; }
.member.is-open .member__arrow-down { display: none; }
.member__bio { overflow: hidden; }
.member__bio p { padding-top: 19px; font-size: 12px; line-height: 14px; }
.member__bio p + p { padding-top: 14px; }

/* ------------------------------------------------------------------
   CTA
------------------------------------------------------------------ */
.cta { background: var(--dark); color: #fff; text-align: center; padding: 114px 0 106px; min-height: 475px; }
.cta .container { position: relative; z-index: 2; }
.cta .btn { margin-top: 43px; }
.cta__fallback { margin-top: 24px; font-size: 15px; color: rgba(255, 255, 255, .72); }
.cta__fallback a { color: var(--mint); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.cta__fallback a:hover { color: #fff; }
/* Revealed on click, in case the mailto: never opens a mail client */
.js .cta__fallback {
  opacity: 0; visibility: hidden; transform: translateY(8px);
  transition: opacity .5s ease, transform .5s ease;
}
.js .cta__fallback.is-visible { opacity: 1; visibility: visible; transform: none; }

/* ------------------------------------------------------------------
   Footer
------------------------------------------------------------------ */
.site-footer { background: var(--dark); color: #fff; min-height: 94px; display: flex; align-items: center; padding: 20px 72px; }
.site-footer__inner { display: flex; align-items: center; width: 100%; gap: 24px; }
.site-footer .logo { --logo-height: 28px; }
.site-footer__tag { margin-left: 56px; font-size: 12px; color: var(--gray); }
.site-footer__right { margin-left: auto; display: flex; align-items: center; gap: 76px; font-size: 13px; font-weight: 700; }
.site-footer__link:hover { color: var(--mint); }
.backtop { display: inline-flex; align-items: center; gap: 10px; }
.backtop .icon { height: 16px; transition: transform .25s steps(3); }
.backtop:hover .icon { transform: translateY(-4px); }

/* ------------------------------------------------------------------
   Responsive
------------------------------------------------------------------ */
@media (max-width: 1440px) {
  .site-header { padding-left: 5vw; padding-right: 5vw; }
  .site-header.is-scrolled { padding-left: 5vw; padding-right: 5vw; }
  .site-footer { padding-left: 5vw; padding-right: 5vw; }
}

@media (max-width: 1240px) {
  .hero__content { width: 560px; }
  .volume__inner { column-gap: 64px; }
  .marketing__inner { column-gap: 64px; }
}

@media (max-width: 1100px) {
  .logo { --logo-height: 52px; }
  .site-header.is-scrolled .logo { transform: scale(.7); height: 36px; }
  .nav { gap: 28px; }
  .hero { min-height: 0; padding-top: 150px; padding-bottom: 60px; }
  .hero__inner { height: auto; display: flex; flex-direction: column; gap: 56px; padding: 0 var(--gutter); }
  .hero__content { position: static; order: -1; width: min(620px, 100%); max-width: none; margin-inline: auto; }
  .hero__collage { position: relative; right: auto; width: min(648px, 100%); margin-inline: auto; }
  .hero .px { display: none; }

  .volume__inner { grid-template-columns: 1fr; row-gap: 56px; }
  .treemap { max-width: 416px; margin-top: 0; margin-left: 41px; }

  .inhouse { display: flex; flex-direction: column; padding: 96px 0 0; }
  .inhouse__collage { position: relative; left: auto; top: auto; width: min(648px, calc(100% - 2 * var(--gutter))); margin: 56px auto 0; }
  .inhouse__inner { order: -1; width: min(var(--container), 100% - 2 * var(--gutter)); grid-template-columns: 1fr; }
  .inhouse__content { grid-column: 1; padding-left: 0; }

  .marketing__inner { grid-template-columns: 1fr; row-gap: 48px; }
  .quote { max-width: 420px; }

  .services__grid, .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .team { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px 16px; }
}

@media (max-width: 800px) {
  :root { --gutter: 24px; }
  .site-header { padding: 16px 20px 0; }
  .site-header.is-scrolled { padding: 10px 20px; }
  .site-header__inner { align-items: center; gap: 16px; }
  .logo { --logo-height: 32px; flex-shrink: 0; }
  .site-header.is-scrolled .logo { transform: none; height: 28px; }
  .nav { display: flex; align-items: center; gap: 12px; height: 36px; margin-left: auto; }
  .nav__link {
    display: inline-block;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .02em;
    padding: 6px 2px;
    white-space: nowrap;
  }
  .nav__link::after { bottom: -2px; }
  .btn--nav { height: 36px; padding: 0 14px 0 16px; font-size: 11px; gap: 8px; flex-shrink: 0; }

  @media (max-width: 480px) {
    .site-header { padding: 12px 12px 0; }
    .site-header.is-scrolled { padding: 8px 12px; }
    .site-header__inner { gap: 8px; }
    .logo { --logo-height: 24px; }
    .site-header.is-scrolled .logo { height: 22px; }
    .nav { gap: 6px; height: 30px; }
    .nav__link { font-size: 10px; padding: 4px 1px; }
    .btn--nav { height: 30px; padding: 0 8px 0 10px; font-size: 10px; gap: 4px; }
  }

  .hero { padding-top: 120px; }
  .hero__sub { margin-top: 28px; }
  .hero__actions { margin-top: 32px; gap: 16px; }
  .scroll-hint { display: none; }

  .marquee { height: 52px; }
  .marquee__item { font-size: 13px; padding: 0 22px; }

  .volume, .services, .quick, .marketing, .partners, .cta { padding-top: 88px; padding-bottom: 80px; }
  .volume { min-height: 0; }
  .treemap { margin-left: 0; }
  .treemap__dot { display: none; }
  .services__grid, .steps { grid-template-columns: 1fr; }
  .service { min-height: 230px; }
  .step { min-height: 280px; padding-bottom: 40px; }
  .step__title { margin-top: 40px; }
  .quick { padding-top: 96px; }
  .team { grid-template-columns: 1fr; gap: 28px; }
  .member__photo img { aspect-ratio: 4 / 3; }
  .cta { min-height: 0; }
  .site-footer__inner { flex-wrap: wrap; gap: 16px 24px; }
  .site-footer__tag { margin-left: 0; flex: 1 0 100%; order: 3; }
  .site-footer__right { gap: 32px; }

  /* keep the pixel accents small on phones */
  .px { width: 24px; height: 24px; }
  .px--m { width: 48px; height: 48px; }
  .px--grad-mint, .px--grad-mint-dark { display: none; }
  .services .px, .quick .px, .marketing .px, .partners .px, .volume .px, .cta .px:not(.bg-purple) { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .code-cursor { animation: none; }
  .btn .icon, .nav__link::after, .backtop .icon, .service { transition: none; }
}