:root {
  /* colour */
  --bg: #0b0212;
  --ink: #141212;
  --ink-hover: #2a2626;
  --ink-soft: rgba(20, 18, 18, 0.8);
  --white: #fff;
  --muted: rgba(255, 255, 255, 0.55);
  --soft: rgba(255, 255, 255, 0.7);
  --line: rgba(255, 255, 255, 0.12);
  --line-strong: rgba(255, 255, 255, 0.35);
  --accent: #a88bff;
  --accent-hover: #b9a0ff;
  --chip: #f1edff;                      /* accent tint, chips on white cards */
  --chip-ink: #3b2c7a;                  /* deep accent, chip text and icons */
  --chip-on-colour: rgba(255, 255, 255, 0.55);  /* chips on coloured step cards */
  --red: #c4453a;
  --yellow: #f0c040;
  --blue: #8fc7fa;
  /* plaque edges: darker shades of the stat colours, plus shared plastic light/shadow */
  --red-edge: #8e2c24;
  --yellow-edge: #b88a1e;
  --blue-edge: #5a95cc;
  --gloss: rgba(255, 255, 255, 0.16);
  --lip: rgba(255, 255, 255, 0.5);
  --lip-shade: rgba(0, 0, 0, 0.12);
  --glare: rgba(255, 255, 255, 0.6);
  --drop: rgba(0, 0, 0, 0.35);
  --salmon: #f5bfa8;
  --step-yellow: #f7d080;
  --grey: #46424c;
  --navy: #142a66;

  /* type scale (major third, 16px base); display sizes scale with the viewport */
  --text-xs: 0.75rem;                                    /* 12 labels, legal */
  --text-sm: 0.875rem;                                   /* 14 nav, buttons, pills */
  --text-base: 1rem;                                     /* 16 body */
  --text-md: clamp(1.0625rem, 1rem + 0.25vw, 1.125rem);  /* 17-18 lead, small headings */
  --text-lg: clamp(1.25rem, 1.1rem + 0.4vw, 1.5rem);     /* 20-24 card headings */
  --text-xl: clamp(1.75rem, 1.4rem + 1vw, 2.25rem);      /* 28-36 section headings, figures */
  --text-2xl: clamp(2.125rem, 1.5rem + 2vw, 3rem);       /* 34-48 banner */
  --text-3xl: clamp(2rem, 1.6rem + 2.2vw, 3.5rem);       /* 32-56 hero */

  /* spacing scale (4px grid) */
  --space-2xs: 4px;
  --space-xs: 8px;
  --space-sm: 12px;
  --space-md: 16px;
  --space-lg: 24px;
  --space-xl: 32px;
  --space-2xl: 48px;
  --space-3xl: 64px;

  /* fluid layout spacing */
  --pad-page: clamp(1rem, 0.5rem + 2.5vw, 3rem);         /* 16-48 page side margins */
  --pad-card: clamp(1.25rem, 1rem + 1vw, 1.75rem);       /* 20-28 inside cards and panels */
  --section-sm: clamp(2.5rem, 2rem + 2vw, 3.5rem);       /* 40-56 between closely related sections */
  --section: clamp(3rem, 2rem + 4vw, 5rem);              /* 48-80 default section gap */
  --section-lg: clamp(4rem, 2.5rem + 6vw, 7rem);         /* 64-112 before the closing banner */

  /* type weights: one for headings, one for body; Inter's opsz axis tunes letterforms to size */
  --weight-heading: 500;
  --weight-body: 400;

  --radius: 8px;
  --radius-lg: 12px;

  /* interaction */
  --accent-press: #9473f5;
  --ink-press: #000;
  --ease-out: cubic-bezier(0.23, 1, 0.32, 1);
  --ease-in-out: cubic-bezier(0.65, 0, 0.35, 1);
  --dur-fast: 160ms;
  --dur-press: 90ms;
  --dur-sweep: 420ms;
}

*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
html, body { overflow-x: clip; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--white);
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: var(--text-base);
  font-weight: var(--weight-body);
  font-optical-sizing: auto;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
h1, h2, h3 { overflow-wrap: anywhere; min-width: 0; }
ul, ol { list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:focus-visible, .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.nb { white-space: nowrap; }

/* layout */
.page {
  display: grid;
  grid-template-columns: 260px minmax(0, 1fr);
  gap: clamp(1.5rem, 1rem + 2vw, 3rem);
  max-width: 1440px;
  margin: 0 auto;
  padding: 0 var(--pad-page);
}
.side {
  position: sticky;
  top: 0;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 18px;
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
  padding: var(--space-xl) 0 var(--space-lg);
}
.main {
  display: flex;
  flex-direction: column;
  padding: var(--space-xl) 0 var(--space-2xl);
  min-width: 0;
}

/* sidebar */
/* portrait fills leftover sidebar height, capped, so the sidebar fits one screen */
.portrait { flex: 1 1 0; width: 100%; min-height: 120px; max-height: 300px; object-fit: cover; object-position: center 25%; border-radius: var(--radius-lg); }
.side > :not(.portrait) { flex-shrink: 0; }
.side-head { padding: 0 2px; }
.name { font-size: var(--text-md); font-weight: 600; letter-spacing: -0.3px; }
.role { font-size: var(--text-sm); color: var(--muted); }
.side-nav { display: flex; flex-direction: column; gap: var(--space-sm); padding: 0 2px; font-size: var(--text-sm); }
/* sidebar section links: no underline (they jump within the page, not away);
   an arrow drops in at the start, pointing where the jump goes (nav.js sets data-dir), and the label slides right */
.side-nav a { position: relative; transition: opacity var(--dur-press) var(--ease-out); }
.side-nav a > span { display: inline-block; transition: transform var(--dur-fast) var(--ease-out); }
.side-nav a::before {
  content: "↓";
  content: "↓" / "";  /* empty alt text: decorative, screen readers skip it */
  position: absolute; left: 0; top: 50%;
  opacity: 0;
  /* --arrow-from: which side it slides in from; --arrow-rot: 0 points down, 180deg points up */
  transform: translateY(calc(-50% + var(--arrow-from, -5px))) rotate(var(--arrow-rot, 0deg));
  transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out);
}
/* text links that leave the page: one signal, a hairline underline fades in and rises toward the text */
.mail, .footer a {
  text-decoration: underline 1px transparent;
  text-underline-offset: 7px;
  transition: text-decoration-color var(--dur-fast) var(--ease-out), text-underline-offset var(--dur-fast) var(--ease-out), opacity var(--dur-press) var(--ease-out);
}
.link-arrow { display: inline-block; margin-left: 0.3em; transition: transform var(--dur-fast) var(--ease-out); }
/* direction from nav.js: up flips the arrow and slides it in from below; "here" (already at that section) shows a dot */
.side-nav a[data-dir="up"] { --arrow-rot: 180deg; --arrow-from: 5px; }
.side-nav a[data-dir="here"]::before { content: "•"; content: "•" / ""; --arrow-from: 0px; }
/* focus-visible gets the same arrow so keyboard users see where the link goes */
.side-nav a:focus-visible::before { opacity: 1; transform: translateY(-50%) rotate(var(--arrow-rot, 0deg)); }
.side-nav a:focus-visible > span { transform: translateX(1.15em); }
@media (hover: hover) {
  .side-nav a:hover::before { opacity: 1; transform: translateY(-50%) rotate(var(--arrow-rot, 0deg)); }
  .side-nav a:hover > span { transform: translateX(1.15em); }
  .mail:hover, .footer a:hover { text-decoration-color: currentColor; text-underline-offset: 4px; }
  a:hover .arrow-ne { transform: translate(2px, -2px); }
  a:hover .arrow-up { transform: translateY(-2px); }
}
.side-nav a:active, .mail:active, .footer a:active { opacity: 0.7; }
.side-blurb { font-size: var(--text-sm); line-height: 1.45; }
.rule { width: 100%; height: 1px; margin: 0; border: 0; background: var(--line); }
.socials { display: flex; gap: var(--space-xs); }
.social {
  position: relative;
  display: grid; place-items: center;
  width: 32px; height: 32px; border-radius: 100px;
  border: 1px solid var(--line-strong);
}
/* invisible padding grows the 32px circle to a 44px tap target */
.social::before { content: ""; position: absolute; inset: -6px; }
.social { transition: border-color var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-press) var(--ease-out); }
@media (hover: hover) {
  .social:hover { border-color: var(--accent); color: var(--accent); }
}
.social:active { transform: scale(0.94); }
.mail { font-size: var(--text-sm); }

/* hero */
.hero { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg); }
/* entrance: headline, lead, button and stats rise in once, 70ms apart */
@keyframes rise { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: no-preference) {
  /* backwards fill: holds the start state during the delay, then lets go so motion.js can move the CTA */
  .hero > * { animation: rise 600ms var(--ease-out) backwards; }
  .hero > :nth-child(2) { animation-delay: 70ms; }
  .hero > :nth-child(3) { animation-delay: 140ms; }
  .hero > :nth-child(4) { animation-delay: 210ms; }
}
h1 {
  max-width: 800px;
  font-size: var(--text-3xl); font-weight: var(--weight-heading); line-height: 1.05; letter-spacing: -0.01em;
  text-wrap: balance;
}
.lead { max-width: 560px; font-size: var(--text-md); line-height: 1.5; color: var(--soft); text-wrap: pretty; }
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 20px; border-radius: var(--radius);
  font-size: var(--text-sm); font-weight: 500;
  white-space: nowrap;
  position: relative; overflow: hidden; isolation: isolate;
  transition: color var(--dur-sweep) var(--ease-out), translate var(--dur-press) var(--ease-out);
}
/* the sweep: a contrasting fill parked below the button, rises on hover */
.btn::before {
  content: "";
  position: absolute; inset: 0; z-index: -1;
  background: var(--btn-sweep);
  transform: translateY(101%);
  transition: transform var(--dur-sweep) var(--ease-out), background-color var(--dur-press) var(--ease-out);
}
.btn-accent { --btn-sweep: var(--white); background: var(--accent); color: var(--ink); }
.btn-dark { --btn-sweep: var(--accent); background: var(--ink); color: var(--white); border-radius: 100px; padding: 14px 28px; font-weight: 400; }
/* the arrow swap: two arrows in a 1em window; the visible one exits right as the second enters from the left */
.btn-arrow { display: inline-flex; width: 1em; overflow: hidden; }
.btn-arrow > span { flex: none; width: 1em; text-align: center; transform: translateX(-100%); transition: transform var(--dur-sweep) var(--ease-out); }
@media (hover: hover) {
  .btn:hover::before { transform: translateY(0); }
  .btn-dark:hover { color: var(--ink); }
  .btn:hover .btn-arrow > span { transform: translateX(0); }
}
/* press: the button sinks 1px (translate composes with the magnetic transform from motion.js) and the sweep deepens */
.btn:active { translate: 0 1px; }
.btn-accent:active::before { background: var(--chip); }
.btn-dark:active::before { background: var(--accent-press); }
.btn:active::before { transform: translateY(0); }

.stats { display: flex; gap: var(--space-sm); flex-wrap: wrap; padding: var(--space-xs) 0 var(--space-xs); }
/* plastic plaques: a darker edge below gives thickness, a bright lip runs along the top,
   a diagonal gloss sits on the face; motion.js tilts them toward the cursor and moves the glare */
.stat {
  --edge: 2px;
  position: relative;
  display: flex; flex-direction: column; gap: var(--space-md);
  width: 160px; padding: var(--space-md); border-radius: var(--radius-lg); color: var(--ink);
  background-image: linear-gradient(135deg, var(--gloss) 0%, transparent 45%);
  box-shadow:
    inset 0 1px 0 var(--lip),
    inset 0 -1px 0 var(--lip-shade),
    0 var(--edge) 0 var(--stat-edge),
    0 calc(var(--edge) + 5px) 14px var(--drop);
  transition: box-shadow var(--dur-sweep) var(--ease-out);
}
/* glare: a soft light spot at the cursor (--mx/--my, set by motion.js), blended into the colour */
.stat::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 30%) var(--my, 0%), var(--glare), transparent 60%);
  mix-blend-mode: soft-light;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--dur-sweep) var(--ease-out);
}
.stat strong { font-size: var(--text-xl); font-weight: 500; line-height: 1.1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.stat span { font-size: var(--text-xs); font-weight: 500; letter-spacing: 0.04em; text-transform: uppercase; }
.stat-red { background-color: var(--red); --stat-edge: var(--red-edge); }
.stat-yellow { background-color: var(--yellow); --stat-edge: var(--yellow-edge); }
.stat-blue { background-color: var(--blue); --stat-edge: var(--blue-edge); }
@media (hover: hover) {
  .stat:hover { --edge: 3px; }
  .stat:hover::after { opacity: 1; }
}
/* idle float: a 1.5px drift, out of phase per tile; uses `translate` so it composes with the GSAP tilt transform */
@keyframes float { from { translate: 0 0; } to { translate: 0 -1.5px; } }
@media (prefers-reduced-motion: no-preference) {
  .stat { animation: float 4s var(--ease-in-out) infinite alternate; }
  .stat-yellow { animation-delay: -1.4s; }
  .stat-blue { animation-delay: -2.7s; }
}

/* section rhythm: gaps vary with how closely sections relate */
.clients { margin-top: var(--section-sm); }
.services, .different, .steps, .footer { margin-top: var(--section); }
.banner { margin-top: var(--section-lg); }

/* logos */
.eyebrow { font-size: var(--text-xs); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); }
.clients { border-top: 1px solid var(--line); padding-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-md); }
/* logo marquee: two rows drifting in opposite directions, edges fade into the page background */
.marquee {
  --marquee-gap: 64px;
  --marquee-fade: clamp(48px, 14%, 160px);
  position: relative;
  overflow: hidden;
}
.marquee::before, .marquee::after {
  content: "";
  position: absolute;
  top: 0; bottom: 0;
  z-index: 1;
  width: var(--marquee-fade);
  pointer-events: none;
}
.marquee::before { left: 0; background: linear-gradient(to right, var(--bg), transparent); }
.marquee::after { right: 0; background: linear-gradient(to left, var(--bg), transparent); }
.marquee-track { display: flex; width: max-content; animation: marquee 40s linear infinite; }
.marquee-reverse .marquee-track { animation-direction: reverse; animation-duration: 46s; }
.marquee-group { display: flex; align-items: center; gap: var(--marquee-gap); padding-right: var(--marquee-gap); }
.marquee-group li { flex: none; display: flex; align-items: center; height: 64px; }
.marquee-group img { width: auto; max-width: none; }
@keyframes marquee { to { transform: translateX(-50%); } }
@media (hover: hover) {
  html:not(.js-motion) .marquee:hover .marquee-track { animation-play-state: paused; }
}
/* motion.js drives the loop when GSAP loads, so hover can ease it to a stop */
.js-motion .marquee-track { animation: none; }
.logo-h30 { height: 30px; }
.logo-h34 { height: 34px; }
.logo-h44 { height: 44px; }
.logo-h64 { height: 64px; }
.logo-white { filter: brightness(0) invert(1); }

/* sections */
h2 { font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: 1.1; letter-spacing: -0.01em; }
.services, .different, .steps { display: flex; flex-direction: column; gap: var(--space-lg); }
.services { gap: var(--space-md); }
.services h2 { margin-bottom: var(--space-xs); }

.card { background: var(--white); color: var(--ink); border-radius: var(--radius); padding: var(--pad-card); }
.card-split { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.4fr); gap: var(--space-lg); align-items: start; }
.card h3 { font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: 1.15; }
.card p { font-size: var(--text-base); line-height: 1.55; text-wrap: pretty; }
.card ul + p { margin-top: var(--space-md); }

.pills { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
/* soft filled chips: accent tint on white cards, translucent white on coloured step cards */
.pills li {
  padding: 6px var(--space-sm); border-radius: 100px;
  background: var(--chip); color: var(--chip-ink);
  font-size: var(--text-sm); font-weight: 500; line-height: 1.4;
}
.step .pills li { background: var(--chip-on-colour); color: var(--ink); }
/* platform pills lead with a Hugeicons line icon (stroke-rounded, free set) */
.pills li:has(.pill-icon) { display: inline-flex; align-items: center; gap: 6px; padding-left: 10px; }
.pill-icon { flex: none; width: 16px; height: 16px; }

/* both panels always match the taller one: stretch side by side, equal rows (1fr) when stacked on mobile */
.compare { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-auto-rows: 1fr; gap: var(--space-md); align-items: stretch; }
.panel { padding: var(--pad-card); border-radius: var(--radius); display: flex; flex-direction: column; gap: var(--space-lg); }
.panel h3 { font-size: var(--text-lg); font-weight: var(--weight-heading); line-height: 1.15; }
.panel ul { display: flex; flex-direction: column; gap: var(--space-sm); }
.panel li { font-size: var(--text-base); line-height: 1.5; text-wrap: pretty; }
.panel-grey { background: var(--grey); }
.panel-navy { background: var(--navy); }
/* drawn list marks (circle + cross / tick), sized to sit on the first line of a 24px line box */
.marks-x li, .marks-check li { display: grid; grid-template-columns: 20px minmax(0, 1fr); column-gap: var(--space-sm); }
.marks-x li::before, .marks-check li::before {
  content: "";
  width: 20px; height: 20px; margin-top: 2px;
  background: var(--mark-color);
  -webkit-mask: var(--mark) center / contain no-repeat;
  mask: var(--mark) center / contain no-repeat;
}
.marks-x {
  --mark-color: var(--muted);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M15 9l-6 6M9 9l6 6'/%3E%3C/svg%3E");
}
.marks-check {
  --mark-color: var(--blue);
  --mark: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M8 12.5l2.5 2.5L16 9'/%3E%3C/svg%3E");
}

.steps ol { display: flex; flex-direction: column; gap: var(--space-md); }
.step {
  display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: var(--space-lg);
  padding: var(--pad-card); border-radius: var(--radius); color: var(--ink);
}
.num { font-size: var(--text-xl); font-weight: var(--weight-heading); line-height: 1; letter-spacing: -0.01em; font-variant-numeric: tabular-nums; }
.step h3 { font-size: var(--text-md); font-weight: var(--weight-heading); line-height: 1.2; }
.step p { margin-top: var(--space-xs); font-size: var(--text-base); line-height: 1.55; text-wrap: pretty; }
.step .pills { margin-top: var(--space-md); }
.step-blue { background: var(--blue); }
.step-salmon { background: var(--salmon); }
.step-yellow { background: var(--step-yellow); }

.banner {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-lg);
  padding: clamp(2rem, 1rem + 4vw, 3.5rem) clamp(1.25rem, 0.5rem + 3vw, 2.5rem);
  background: var(--white); color: var(--ink); border-radius: var(--radius);
}
.banner h2 { font-size: var(--text-2xl); line-height: 1.1; letter-spacing: -0.01em; max-width: 520px; text-wrap: balance; }
.banner p { max-width: 520px; font-size: var(--text-md); line-height: 1.45; color: var(--ink-soft); text-wrap: pretty; }

/* footer */
.footer { border-top: 1px solid var(--line); padding-top: var(--space-xl); display: flex; flex-direction: column; gap: var(--space-xl); }
.footer-cols { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: var(--space-lg); align-items: start; }
.footer-blurb { font-size: var(--text-sm); color: var(--muted); }
.footer ul { margin-top: var(--space-2xs); display: flex; flex-direction: column; font-size: var(--text-sm); }
/* 44px-tall rows keep footer links tappable; links never wrap */
.footer li a, .footer-bar a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
.footer-bar {
  display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 0 var(--space-md);
  padding-top: var(--space-2xs); border-top: 1px solid var(--line);
  font-size: var(--text-xs); color: var(--muted);
}

/* touch screens wider than the mobile layout (e.g. tablets) still get 44px sidebar targets */
@media (pointer: coarse) {
  .side-nav { gap: 0; }
  .side-nav a, .mail { display: flex; align-items: center; min-height: 44px; }
}

/* tablet */
@media (max-width: 1100px) {
  .page { grid-template-columns: 220px minmax(0, 1fr); }
}

/* mobile */
@media (max-width: 800px) {
  .page { display: block; }
  .side {
    position: static;
    height: auto;
    overflow: visible;
    display: grid;
    grid-template-columns: 72px minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-xs) 14px;
    padding: var(--space-lg) 0 0;
  }
  .portrait { grid-column: 1; grid-row: 1; width: 72px; height: 72px; min-height: 0; max-height: none; aspect-ratio: 1; border-radius: 100px; }
  .side-head { grid-column: 2; grid-row: 1; }
  .socials { grid-column: 3; grid-row: 1; padding-right: 6px; }
  /* section links become one row under the header */
  .side-nav { grid-column: 1 / -1; grid-row: 2; flex-direction: row; flex-wrap: wrap; gap: 0 var(--space-lg); padding: 0; }
  .side-nav a { display: inline-flex; align-items: center; min-height: 44px; white-space: nowrap; }
  .side-blurb, .rule, .mail { display: none; }
  .main { padding: var(--space-lg) 0 var(--space-xl); }
  h1 { line-height: 1.08; }
  .stats { flex-wrap: nowrap; gap: var(--space-xs); width: 100%; }
  .stat { flex: 1 1 0; width: auto; padding: var(--space-sm); gap: var(--space-sm); }
  .stat strong { font-size: var(--text-lg); }
  .marquee { --marquee-gap: 44px; }
  .marquee-group li { height: 52px; }
  .logo-h30 { height: 24px; }
  .logo-h34 { height: 28px; }
  .logo-h44 { height: 36px; }
  .logo-h64 { height: 52px; }
  .card-split { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); }
  .compare { grid-template-columns: minmax(0, 1fr); }
  .step { grid-template-columns: 40px minmax(0, 1fr); gap: var(--space-sm); }
  .footer-cols { grid-template-columns: minmax(0, 1fr); gap: var(--space-lg); }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  /* keep the colour change, drop the movement: sweep and arrow swap become an instant state change */
  .btn, .btn::before, .btn-arrow > span, .link-arrow, .social, .side-nav a, .side-nav a::before, .side-nav a > span, .mail, .footer a { transition: none; }
  .btn:active { translate: none; }
  .social:active { transform: none; }
  a:hover .link-arrow { transform: none; }
  /* no drift: rows become swipeable instead */
  .marquee { overflow-x: auto; }
  .marquee-track { animation: none; }
  .marquee-group[aria-hidden] { display: none; }
}