:root {
  color-scheme: light dark;

  /* Colour scale — warm neutral: R = G, B = R − 1 */
  --colour-0: light-dark(#ffffff, #000000);
  --colour-1: light-dark(#fafaf9, #0a0a09);
  --colour-2: light-dark(#f5f5f4, #171716);
  --colour-3: light-dark(#e5e5e4, #262625);
  --colour-4: light-dark(#d4d4d3, #40403f);
  --colour-5: light-dark(#a3a3a2, #525251);
  --colour-6: #737372;
  --colour-7: light-dark(#525251, #a3a3a2);
  --colour-8: light-dark(#40403f, #d4d4d3);
  --colour-9: light-dark(#262625, #e5e5e4);
  --colour-10: light-dark(#171716, #f5f5f4);
  --colour-11: light-dark(#0a0a09, #fafaf9);
  --colour-12: light-dark(#000000, #ffffff);
  --colour-video-border: #f9f9f9;

  --text-primary: var(--colour-9);
  --text-secondary: var(--colour-6);

  /* Size tokens — mobile defaults; type + 12/24/48 step at 768px. 8pt grid + 4pt sub-grid. */
  --font-size-12: 12px;
  --font-size-16: 16px;

  --font-family-sans: "Graphik", ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Helvetica Neue", sans-serif;
  --font-weight-400: 400;
  --line-height: 1.5;

  --radius-2: 2px;
  --radius-4: 4px;
  --radius-full: 9999px;

  --spacing-4: 4px;
  --spacing-8: 8px;
  --spacing-12: 12px;
  --spacing-16: 16px;
  --spacing-24: 24px;
  --spacing-48: 48px;

  --size-24: 24px;
  --size-32: 32px;
  --size-40: 40px;
  --size-48: 48px;
  --size-56: 56px;
  --size-64: 64px;
  --tool-tile: var(--size-48);
  --tool-icon: var(--spacing-16);
  --tool-gap: var(--spacing-12);
  --tool-radius: calc(var(--spacing-8) * 2 / 3);

  --blur-8: 8px;
  --width-100: 100%;
  --border-width-1: 1px;
  --border-width-3: 3px;
  --shadow-media-offset: 4px;
  --shadow-media-blur: 4px;
  --shadow-media: color-mix(in srgb, light-dark(#d4d4d3, #171716) 25%, transparent);

  --duration-250: 250ms;
  --duration-500: 500ms;
  --duration-1000: 1000ms;

  --reveal-fade: var(--duration-500);
  --reveal-stagger: 62.5ms;
  --scale-behind: 0.95;

  --chip-background: color-mix(in srgb, var(--colour-4) 50%, transparent);

  --background: var(--colour-2);
  --surface: var(--colour-3);
  --border-colour: var(--colour-3);
}

:root[data-theme="light"] {
  color-scheme: light;
}

:root[data-theme="dark"] {
  color-scheme: dark;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--surface);
  color: var(--text-primary);
}

@keyframes reveal {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes reveal-scale {
  from {
    opacity: 0;
    transform: scale(var(--scale-behind));
  }

  to {
    opacity: 1;
    transform: scale(1);
  }
}

@property --email-color {
  syntax: "<color>";
  inherits: false;
  initial-value: #737372;
}

@property --email-highlight {
  syntax: "<color>";
  inherits: false;
  initial-value: #a3a3a2;
}

@keyframes email-shimmer {
  from { background-position: 100% center; }
  50% { background-position: 0% center; }
  to { background-position: 0% center; }
}

/* Hold first paint until scroll is forced to 0 (see navigation.js). */
html:not(.is-ready) body {
  opacity: 0;
}

html:not(.is-ready) [data-reveal],
html:not(.is-ready) [data-reveal-scale] {
  animation: none;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root),
  ::view-transition-new(root) {
    animation-duration: var(--duration-500);
    animation-timing-function: ease-in-out;
    mix-blend-mode: normal;
  }

  html.is-chrome-settled {
    --reveal-delay: calc(var(--reveal-stagger) * -3);
  }

  [data-reveal] {
    --reveal-i: attr(data-reveal type(<number>), 0);
    --reveal-part: attr(data-reveal-part type(<number>), 0);
    animation: reveal var(--reveal-fade) ease-in-out both;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-stagger) * (var(--reveal-i, 0) + var(--reveal-part, 0)));
  }

  [data-reveal-scale] {
    transform-origin: center;
    animation: reveal-scale var(--duration-500) ease-in-out both;
    animation-delay: calc(var(--reveal-delay, 0ms) + var(--reveal-stagger) * (var(--reveal-i, 0) + var(--reveal-part, 0)));
  }

  html.is-chrome-settled [data-chrome] {
    animation: none;
    opacity: 1;
  }

  html.is-history-enter main > :not(header):not(footer) {
    animation: reveal var(--duration-500) ease-in-out both !important;
  }

  html.is-page-exit main > :not(header):not(footer),
  html.is-page-exit .back-button {
    animation: none;
    opacity: 0;
    transition: opacity var(--duration-500) ease-in-out;
  }

  @media (hover: hover) {
    .case-study .work-image img {
      transition: transform var(--duration-500) ease-in-out;
    }

    .case-study a:hover .work-image img {
      transform: scale(1.05);
    }
  }
}

@font-face {
  font-family: "Graphik";
  src: url("/fonts/graphik_regular_web.woff2") format("woff2");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--background);
  color: var(--text-secondary);
  font-size: var(--font-size-12);
  line-height: var(--line-height);
  font-family: var(--font-family-sans);
  font-weight: var(--font-weight-400);
  -webkit-font-smoothing: antialiased;
}

main {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-48);
  inline-size: var(--width-100);
  margin-inline: auto;
  padding: var(--spacing-24);
}

.not-found {
  min-block-size: 100dvb;
  align-items: center;
  justify-content: center;
}

@media (min-width: 768px) {
  :root {
    --font-size-12: 16px;
    --font-size-16: 20px;
    --radius-2: 4px;
    --radius-4: 8px;
    --spacing-12: 16px;
    --spacing-24: 32px;
    --spacing-48: 64px;
    --tool-tile: var(--size-64);
    --tool-icon: var(--size-24);
    --tool-gap: var(--spacing-16);
    --tool-radius: var(--radius-4);
  }

  main {
    max-inline-size: 576px;
    padding-inline: 0;
  }

  .back-button {
    padding: var(--spacing-8) var(--spacing-12);
  }
}

h1,
h2,
h3 {
  margin: 0;
  color: var(--text-primary);
  font-size: var(--font-size-12);
  font-weight: var(--font-weight-400);
  font-family: var(--font-family-sans);
}

p {
  margin: 0;
}

.visually-hidden {
  position: absolute;
  inline-size: var(--border-width-1);
  block-size: var(--border-width-1);
  margin: calc(-1 * var(--border-width-1));
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

a {
  color: var(--text-secondary);
  text-decoration: none;
  transition: color var(--duration-500) ease-in-out;
}

a:hover {
  color: var(--text-primary);
}

.identity {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
}

.identity a {
  color: inherit;
  inline-size: max-content;
}

.avatar {
  display: block;
  inline-size: var(--spacing-48);
  block-size: var(--spacing-48);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.identity-text {
  display: flex;
  flex-direction: column;
}

.identity-text h2 {
  color: var(--text-secondary);
}

.stack,
.section,
.section-info,
.cta,
.learnings {
  display: flex;
  flex-direction: column;
}

.stack {
  gap: var(--spacing-24);
}

.about-copy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  font-size: var(--font-size-16);
  color: var(--text-primary);
}

.case-study a {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-12);
  color: inherit;
}

.case-study a:hover {
  color: inherit;
}

.case-study a:hover h3 {
  color: var(--text-primary);
}

.work-image {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-4);
  overflow: hidden;
}

/* Homepage cards keep a surface fill; outcome blocks let `.image-bg` stagger instead. */
.work-image:not(:has(> .image-bg)) {
  background: var(--surface);
}

.image-bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: var(--surface);
  pointer-events: none;
}

.work-image img {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: var(--width-100);
  block-size: var(--width-100);
  object-fit: cover;
  object-position: center;
}

.case-study-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: var(--spacing-12);
}

.case-study-info p {
  text-align: end;
}

.tools {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: var(--tool-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.tool {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: var(--tool-tile);
  block-size: var(--tool-tile);
  border-radius: var(--tool-radius);
  border: var(--border-width-1) solid var(--border-colour);
}

.tool-chip {
  position: fixed;
  z-index: 40;
  top: 0;
  left: 0;
  padding: var(--spacing-4) var(--spacing-16);
  border-radius: var(--radius-full);
  background: var(--chip-background);
  color: var(--text-secondary);
  font: inherit;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transform: translate3d(0, 0, 0);
  backdrop-filter: blur(var(--blur-8)) saturate(150%);
  transition: opacity var(--duration-250) ease-in-out;
}

.tool-chip.is-visible {
  opacity: 1;
  will-change: transform;
}

.tool .icon {
  display: flex;
  align-items: center;
  justify-content: center;
  inline-size: 100%;
  block-size: 100%;
  color: var(--text-primary);
}

.tool .icon svg {
  display: block;
  inline-size: var(--tool-icon);
  block-size: var(--tool-icon);
}

.rows {
  display: flex;
  flex-direction: column;
}

.row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  padding-block: var(--spacing-12);
  border-block-end: var(--border-width-1) solid var(--border-colour);
}

.row:first-child {
  border-block-start: var(--border-width-1) solid var(--border-colour);
}

.row > :first-child,
.row > :last-child {
  flex: 1 1 50%;
  min-inline-size: 0;
}

.row > :first-child {
  color: var(--text-primary);
}

.row > :last-child {
  text-align: end;
}

.section {
  gap: var(--spacing-24);
}

.section-info {
  gap: var(--spacing-12);
}

.case-study-image {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  aspect-ratio: 4 / 3;
  padding: var(--spacing-48);
  border-radius: var(--radius-4);
  overflow: hidden;
}

.case-study-image > .media-wide {
  position: relative;
}

/* Inset sizing (matching the container padding) instead of percentage
   heights, which mobile Safari fails to resolve inside aspect-ratio flex
   parents. */
.case-study-image > .media-tall {
  position: absolute;
  inset-block: var(--spacing-48);
  inset-inline: 0;
  margin-inline: auto;
}

.media-tall {
  inline-size: fit-content;
  border-radius: var(--radius-2);
  overflow: hidden;
  box-shadow: var(--shadow-media-offset) var(--shadow-media-offset) var(--shadow-media-blur) 0 var(--shadow-media);
}

.media-tall img,
.media-tall video {
  display: block;
  inline-size: auto;
  block-size: var(--width-100);
  border-radius: var(--radius-2);
}

.media-wide {
  inline-size: var(--width-100);
  block-size: auto;
  border-radius: var(--radius-2);
  overflow: hidden;
  box-shadow: var(--shadow-media-offset) var(--shadow-media-offset) var(--shadow-media-blur) 0 var(--shadow-media);
}

.media-wide img,
.media-wide video {
  display: block;
  inline-size: var(--width-100);
  block-size: auto;
  border-radius: var(--radius-2);
}

.jua-page .media-wide:has(.solution-video) {
  position: relative;
}

.jua-page .media-wide:has(.solution-video):not(.is-video-ready) {
  visibility: hidden;
}

.jua-page .media-wide:has(.solution-video)::after {
  content: "";
  position: absolute;
  inset: 0;
  border: var(--border-width-3) solid var(--colour-video-border);
  border-radius: inherit;
  box-sizing: border-box;
  pointer-events: none;
}

.learnings {
  position: relative;
  gap: var(--spacing-12);
  padding: var(--spacing-24);
}

.learnings-frame {
  position: absolute;
  inset: 0;
  border: var(--border-width-1) solid var(--border-colour);
  border-radius: var(--radius-4);
  pointer-events: none;
}

.email-link {
  --email-color: var(--text-secondary);
  --email-highlight: var(--text-primary);

  display: inline-flex;
  align-items: center;
  align-self: flex-start;
  color: var(--text-secondary);
  transition:
    color var(--duration-500) ease-in-out,
    --email-color var(--duration-500) ease-in-out,
    --email-highlight var(--duration-500) ease-in-out;
}

.email-icons {
  position: relative;
  flex: 0 0 var(--spacing-12);
  inline-size: var(--spacing-12);
  block-size: var(--spacing-12);
  margin-inline-start: var(--spacing-8);
  overflow: visible;
  -webkit-text-fill-color: currentColor;
}

.email-icon {
  position: absolute;
  inset: 0;
  display: block;
  inline-size: var(--spacing-12);
  block-size: var(--spacing-12);
  overflow: visible;
  opacity: 0;
  transform: scale(var(--scale-behind));
  transform-origin: center;
  transition:
    opacity var(--duration-250) ease-in-out,
    transform var(--duration-250) ease-in-out;
}

.email-icon-copy {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--duration-250);
}

.email-link.is-copied .email-icon-copy {
  opacity: 0;
  transform: scale(var(--scale-behind));
  transition-delay: 0ms;
}

.email-link.is-copied .email-icon-check {
  opacity: 1;
  transform: scale(1);
  transition-delay: var(--duration-250);
}

.email-link:hover {
  color: var(--text-primary);
  --email-color: var(--text-primary);
  --email-highlight: var(--text-primary);
}

@media (prefers-reduced-motion: no-preference) {
  .email-link {
    --email-reveal-delay: calc(
      var(--reveal-delay, 0ms) + var(--reveal-stagger) * (var(--reveal-i, 0) + var(--reveal-part, 0))
    );

    background: linear-gradient(
      90deg,
      var(--email-color) 0%,
      var(--email-color) 40%,
      var(--email-highlight) 50%,
      var(--email-color) 60%,
      var(--email-color) 100%
    );
    background-size: 250% 100%;
    background-repeat: no-repeat;
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    animation: email-shimmer calc(var(--duration-1000) * 3) linear infinite;
  }

  .email-link[data-reveal] {
    animation:
      reveal var(--reveal-fade) ease-in-out both,
      email-shimmer calc(var(--duration-1000) * 3) linear infinite;
    animation-delay: var(--email-reveal-delay), var(--email-reveal-delay);
  }
}

footer {
  display: flex;
  flex-direction: column;
}

.footer-line {
  border-block-start: var(--border-width-1) solid var(--border-colour);
}

.footer-body {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-12);
  padding-block-start: var(--spacing-12);
}

.back-button {
  position: fixed;
  z-index: 40;
  inset-inline: 0;
  inset-block-end: var(--spacing-24);
  margin-inline: auto;
  inline-size: max-content;
  padding: var(--spacing-4) var(--spacing-12);
  border-radius: var(--radius-full);
  background: var(--chip-background);
  color: var(--text-secondary);
  font: inherit;
  white-space: nowrap;
  visibility: hidden;
  pointer-events: none;
  backdrop-filter: blur(var(--blur-8)) saturate(150%);
  transform: translateY(calc(100% + var(--spacing-24)));
  transition:
    transform var(--duration-250) ease-in-out,
    visibility 0s linear var(--duration-250);
}

.back-button:hover {
  color: var(--text-secondary);
}

.back-button.is-visible {
  visibility: visible;
  pointer-events: auto;
  transform: translateY(0);
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .back-button {
    transform: none;
    transition: none;
  }
}