*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: auto;
  overscroll-behavior-y: none;
  background-color: var(--color-cream);
}

body {
  margin: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-optical-sizing: auto;
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  background-color: var(--color-cream);
  min-height: 100vh;
  overscroll-behavior-y: none;
}

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

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

a {
  color: inherit;
  border-radius: var(--radius-links);
}

a:focus-visible,
button:focus-visible,
input:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

h1, h2, h3, h4 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-display);
}

h1,
h2,
h3,
h4,
.hero__intro,
.hero__greeting,
.hero__headline,
.approach__heading,
.approach-principle__title,
.case-card__title,
.about__heading {
  font-optical-sizing: auto;
  font-stretch: var(--font-display-width);
}

p {
  margin: 0;
}

/* PP NeueBit (font-mono / font-neuebit) — shared readable type */
:is(
  .skip-link,
  .section-marker,
  .btn,
  .approach__labels,
  .approach__attribution,
  .approach-principle__index,
  .eyebrow,
  .case-gate__label,
  .case-card__index,
  .case-slideshow__status,
  .case-visual__label,
  .case-visual--timeline li::before,
  .pill,
  .case-visual--methods span
) {
  font-size: var(--text-mono);
  line-height: var(--leading-mono);
  letter-spacing: var(--tracking-mono);
}

:is(.nav-link, .work-card .eyebrow, .summary__meta dt, .summary__list dt) {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
}

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

.skip-link {
  position: absolute;
  left: var(--spacing-16);
  top: calc(var(--spacing-16) * -10);
  z-index: 100;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--surface-ink);
  color: var(--color-paper);
  font-family: var(--font-mono);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-buttons);
}

.skip-link:focus {
  top: var(--spacing-16);
}

.page {
  min-height: 100vh;
}

/* Home: sticky header + scrollable main (intro / approach / work / footer).
   The document itself does not scroll, so iOS Safari leaves its bottom
   toolbar painted over 100dvh. --visual-viewport-height is the visible
   area (set in main.js). 100svh is the fallback before that runs. */

body.home {
  height: var(--visual-viewport-height, 100svh);
  min-height: 0;
  max-height: var(--visual-viewport-height, 100svh);
  overflow: hidden;
  display: grid;
  /* Cream page field. Contact still paints as a dark full-bleed band. */
  background-color: var(--color-cream);
  grid-template-rows: minmax(0, 1fr);
  grid-template-areas: "main";
}

body.home .site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

body.home .page {
  grid-area: main;
  min-height: 0;
  height: 100%;
}

.page--snap {
  position: relative;
  min-height: 0;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior-y: contain;
  scroll-behavior: auto;
  scroll-snap-type: y proximity;
}

.snap-panel {
  box-sizing: border-box;
}

.snap-panel--slide {
  height: 100%;
  min-height: 100%;
  max-height: 100%;
  overflow: hidden;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

.snap-panel--flow {
  height: auto;
  min-height: 100%;
  max-height: none;
  overflow: visible;
}

/* Each section is its own beat on one cream field, with a numbered marker
   at the top and a dark closing band. */

.page--snap .hero {
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  height: auto;
  min-height: 0;
  max-height: none;
  overflow: visible;
  scroll-snap-align: start;
  padding-block: calc(var(--header-height) + var(--spacing-90)) var(--spacing-40);
  background-color: var(--color-cream);
}

.page--snap .approach {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding-block: calc(var(--header-height) + var(--spacing-40)) var(--spacing-40);
  scroll-snap-align: start;
  background: var(--color-cream);
}

.page--snap .work {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: stretch;
  width: 100%;
  max-width: none;
  padding: var(--spacing-40) var(--page-gutter) var(--spacing-64);
  scroll-margin-top: calc(var(--header-height) + var(--spacing-16));
  scroll-snap-align: none;
  background: var(--color-cream);
}

@media (min-width: 521px) {
  .page--snap .work {
    padding-inline: var(--chrome-bar-gutter);
  }
}

@media (min-width: 768px) {
  .page--snap .work {
    padding-block: var(--spacing-80) var(--spacing-120);
  }
}

/* Section marker — mono label sitting on a hairline rule. */

.section-marker {
  display: flex;
  align-items: baseline;
  margin-bottom: var(--spacing-20);
  padding-top: var(--spacing-8);
  border-top: 1px solid var(--color-hairline);
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
}

/* Hero is the landing beat — number it, but no rule at the very top. */
.section-marker--flush {
  padding-top: 0;
  border-top: 0;
}

/* Approach sits under the hero — no hairline at the seam, and the inner gap owns spacing. */
.approach__inner .section-marker {
  margin-bottom: 0;
  padding-top: 0;
  border-top: 0;
}

/* On the dark contact band the hairline and label flip to light. */
.section-marker--invert {
  border-top-color: color-mix(in srgb, var(--color-paper) 24%, transparent);
  color: var(--color-mist);
}

@media (prefers-reduced-motion: reduce) {
  .page--snap {
    scroll-behavior: auto;
  }
}

.wrap {
  width: min(var(--page-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
}

.measure {
  max-width: var(--measure);
}

/* Header */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  overflow: visible;
  overflow-anchor: none;
  color: var(--color-paper);
  background: var(--color-footer-ink);
}

.site-header :is(a, button):focus-visible {
  outline: 2px solid var(--color-paper);
  outline-offset: 3px;
}

.site-header :is(.nav-link, button.btn--mail) {
  font-size: var(--text-header-nav);
  line-height: var(--leading-header-nav);
}

.site-footer .wrap {
  width: min(var(--approach-max), calc(100% - var(--chrome-bar-gutter) * 2));
}

.site-header__inner {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  column-gap: var(--spacing-16);
  box-sizing: border-box;
  width: min(var(--approach-max), calc(100% - var(--chrome-bar-gutter) * 2));
  min-height: var(--chrome-bar-height);
  margin-inline: auto;
  padding: 0;
}

.site-header__inner > .logo {
  justify-self: start;
}

.site-header__inner > .btn--mail {
  justify-self: end;
}

.logo {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  color: var(--color-paper);
  text-decoration: none;
}

.logo__mark {
  display: block;
  width: 30px;
  height: 30px;
  flex-shrink: 0;
  overflow: visible;
  transform-origin: center;
  transition: transform 240ms steps(3);
}

.logo:active .logo__mark {
  transform: scale(0.8) translateY(1px);
  transition: transform 80ms steps(2);
}

.logo__center {
  fill: var(--color-star);
  opacity: 0;
  transition: opacity 240ms steps(3);
}

.logo:hover .logo__center,
.logo:focus-visible .logo__center {
  opacity: 1;
}

.logo__spark {
  fill: var(--color-star);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.logo:hover .logo__spark,
.logo:focus-visible .logo__spark {
  animation:
    logo-spark-in 360ms steps(4) var(--d) both,
    logo-spark-blink 1.6s steps(1) calc(var(--d) + 360ms) infinite;
}

/* Hero phrase hover — same pixel stars, parked on the highlighter stroke. */
.hero__sparks {
  position: absolute;
  left: 0;
  width: 100%;
  height: 0.8em;
  top: calc((100% - 0.8em) * 0.58);
  pointer-events: none;
  overflow: visible;
}

.hero__spark {
  position: absolute;
  width: 28px;
  height: 28px;
  overflow: visible;
  opacity: 0;
  transform: translate(var(--ox), var(--oy)) scale(0.2);
  transform-origin: center;
}

.hero__spark .logo__spark {
  opacity: 1;
}

.hero__spark:nth-child(1) {
  left: 0;
  top: 0;
  --ox: -10px;
  --oy: -12px;
}

.hero__spark:nth-child(2) {
  right: 0;
  top: 0;
  --ox: 10px;
  --oy: -12px;
}

.hero__spark:nth-child(3) {
  right: 0;
  top: 50%;
  --ox: 12px;
  --oy: -50%;
}

.hero__spark:nth-child(4) {
  left: 0;
  bottom: 0;
  --ox: -10px;
  --oy: 10px;
}

.hero__spark:nth-child(5) {
  left: 46%;
  top: 0;
  --ox: -50%;
  --oy: -14px;
}

.hero__spark:nth-child(6) {
  left: 62%;
  bottom: 0;
  --ox: -50%;
  --oy: 12px;
}

@media (hover: hover) and (pointer: fine) {
  .hero__mark:hover .hero__spark {
    animation:
      hero-spark-in 360ms steps(4) var(--d) both,
      hero-spark-blink 1.6s steps(1) calc(var(--d) + 360ms) infinite;
  }
}

@keyframes hero-spark-in {
  from {
    opacity: 0;
    transform: translate(var(--ox), var(--oy)) scale(0.2);
  }

  to {
    opacity: 1;
    transform: translate(var(--ox), var(--oy)) scale(1);
  }
}

@keyframes hero-spark-blink {
  0%,
  100% {
    opacity: 1;
    transform: translate(var(--ox), var(--oy)) scale(1);
  }

  50% {
    opacity: 0.4;
    transform: translate(var(--ox), var(--oy)) scale(0.6);
  }
}

@keyframes logo-spark-in {
  from {
    opacity: 0;
    transform: translate(calc(var(--x) * -0.65), calc(var(--y) * -0.65)) scale(0.2);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes logo-spark-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .logo__mark,
  .logo:active .logo__mark {
    transition: none;
    transform: none;
  }

  .logo__center {
    transition: none;
  }

  .logo:hover .logo__spark,
  .logo:focus-visible .logo__spark {
    animation: none;
    opacity: 1;
  }

  .hero__spark,
  .hero__mark:hover .hero__spark {
    animation: none;
    opacity: 0;
  }
}

.site-nav {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-4);
  justify-self: center;
  grid-column: 2;
}

.site-nav .nav-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  color: var(--color-paper);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  text-decoration: none;
}

.nav-link__dot {
  width: 7px;
  height: 7px;
  flex-shrink: 0;
  background: var(--color-star);
  opacity: 0;
}

.nav-link[aria-current] .nav-link__dot {
  opacity: 1;
}

.site-nav .nav-link:hover,
.site-nav .nav-link:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-star);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  text-decoration: none;
  border: 0;
  cursor: pointer;
  border-radius: var(--radius-buttons);
  padding: var(--spacing-8) var(--spacing-20);
}

.btn--fill {
  background: var(--surface-ink);
  color: var(--color-paper);
}

.btn__icon {
  position: relative;
  display: inline-block;
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.btn__glyph {
  display: block;
  position: absolute;
  inset: 0;
  margin: auto;
  transition: opacity 0.16s ease;
}

.btn__glyph--check {
  opacity: 0;
}

.btn.is-copied .btn__glyph--copy {
  opacity: 0;
}

.btn.is-copied .btn__glyph--check {
  opacity: 1;
}

.btn--mail {
  position: relative;
  flex-shrink: 0;
  width: auto;
  height: auto;
  gap: 8px;
  padding: 8px 14px;
  border: 0;
  border-radius: var(--radius-links);
  background: transparent;
  color: var(--color-paper);
}

.btn--mail:hover,
.btn--mail:focus-visible {
  text-decoration: underline;
  text-decoration-color: var(--color-star);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

button.btn--mail {
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-label);
}

.btn--mail .btn__icon {
  width: 16px;
  height: 13px;
}

.btn--mail .btn__glyph--copy {
  width: 16px;
  height: 13px;
}

.btn--mail .btn__glyph--check {
  width: 13px;
  height: 13px;
}

@media (max-width: 520px) {
  .site-header__inner {
    gap: var(--spacing-8);
    width: min(var(--approach-max), calc(100% - var(--spacing-24) * 2));
  }

  .site-nav .nav-link {
    gap: 6px;
    padding: 6px 8px;
  }

  .btn--mail {
    padding: 6px 10px;
  }
}

.btn--mail[data-copy-email]::after {
  content: attr(data-tip);
  position: absolute;
  top: calc(100% + var(--spacing-8));
  right: 0;
  left: auto;
  z-index: 2;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-star);
  color: var(--colour-primary);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  line-height: var(--leading-caption);
  text-transform: none;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  transform: scale(0.12, 0.28);
  transform-origin: 100% 0%;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-tip-roll) var(--ease-tip-roll),
    border-radius var(--duration-tip-roll) var(--ease-tip-roll);
}

.btn--mail[data-copy-email]:hover::after,
.btn--mail[data-copy-email]:focus::after,
.btn--mail[data-copy-email]:focus-visible::after,
.btn--mail[data-copy-email].is-copied::after {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: var(--radius-buttons);
}

@media (prefers-reduced-motion: reduce) {
  .btn__glyph,
  .btn--mail[data-copy-email]::after {
    transition: none;
    transform: none;
  }

  .btn--mail[data-copy-email]:hover::after,
  .btn--mail[data-copy-email]:focus::after,
  .btn--mail[data-copy-email]:focus-visible::after,
  .btn--mail[data-copy-email].is-copied::after {
    transform: none;
  }
}

.btn--ghost {
  background: transparent;
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}

/* Hero */

.hero {
  text-align: left;
  padding-block: var(--spacing-32) var(--spacing-40);
  background-color: var(--color-cream);
}

.hero__inner {
  width: min(var(--approach-max), calc(100% - var(--chrome-bar-gutter) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-52);
  /* Wide query container so the headline clamp still caps at 60px. */
  container-type: inline-size;
}

.hero__copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  width: 100%;
  max-width: 44rem;
  margin-inline: 0;
}

.hero__identity {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: flex-start;
  gap: 0.35em;
  max-width: 100%;
}

.hero__intro {
  margin: 0;
  color: var(--color-label-accent);
  font-family: var(--font-display);
  font-size: var(--text-heading);
  font-weight: var(--font-weight-medium);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  max-width: 100%;
  text-wrap: balance;
}

.hero__portrait {
  width: 1.9em;
  height: 1.9em;
  border-radius: 999px;
  object-fit: cover;
  object-position: center;
  vertical-align: middle;
  box-shadow: 0 2px 4px rgb(20 20 20 / 0.12), 0 6px 14px rgb(20 20 20 / 0.14);
}

.hero__greeting {
  margin-top: var(--spacing-24);
  width: 100%;
  max-width: none;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-stretch: var(--font-display-width);
  font-optical-sizing: auto;
  font-variation-settings: "wdth" 75;
  font-size: var(--text-hero-greeting);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  text-wrap: balance;
}

.hero__sub {
  margin: var(--spacing-16) 0 0;
  width: 100%;
  max-width: 32rem;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  text-align: left;
}

.hero__sub-line {
  display: block;
}

.hero__cluster {
  white-space: nowrap;
}

body.home .hero__intro,
body.home .hero__greeting,
body.home .hero__sub {
  opacity: 0;
  transform: translateY(14px);
  animation: hero-enter 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

body.home .hero__greeting {
  animation-delay: 280ms;
}

body.home .hero__sub {
  animation-delay: 560ms;
}

@keyframes hero-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  body.home .hero__intro,
  body.home .hero__greeting,
  body.home .hero__sub {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.hero__aside {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: var(--spacing-24);
  align-items: start;
  max-width: none;
}

.hero__philosophy {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.hero__label {
  margin: 0;
  color: var(--color-label-accent);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}

.hero__philosophy-text {
  margin: 0;
  max-width: 42rem;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
}

.hero__toolkit {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-8);
}

@media (max-width: 767px) {
  .hero__inner {
    width: min(var(--approach-max), calc(100% - var(--page-gutter) * 2));
  }

  .hero__aside {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-24);
  }
}

.hero__headline {
  margin-top: var(--spacing-24);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: clamp(var(--text-subheading), 3vw, var(--text-heading));
  line-height: var(--leading-heading);
  letter-spacing: 0;
  color: var(--color-ink-muted);
  max-width: 36ch;
}

.hero__mark {
  position: relative;
  display: inline-block;
  vertical-align: baseline;
  /* Highlighter stroke — JS adds .is-highlighting when the hero enters view */
  background-color: transparent;
  background-image: linear-gradient(
    color-mix(in srgb, var(--color-star) 42%, var(--color-paper)),
    color-mix(in srgb, var(--color-star) 42%, var(--color-paper))
  );
  background-repeat: no-repeat;
  background-size: 0% 0.8em;
  background-position: left 58%;
  box-decoration-break: clone;
  -webkit-box-decoration-break: clone;
  padding: 0 0.1em;
  margin-inline: -0.1em;
}

.hero__apps {
  display: flex;
  align-items: center;
  gap: 7px;
}

.hero__app {
  position: relative;
  display: inline-flex;
  line-height: 0;
  border-radius: 8px;
}

.hero__app--inline {
  vertical-align: -0.38em;
  margin-inline: 0.18em 0.1em;
}

.hero__sub .hero__app--inline:last-of-type {
  margin-inline-end: 0;
}

.hero__app--inline .hero__apps-icon {
  width: 1.5em;
  height: 1.5em;
  border-radius: 0.22em;
}

.hero__apps-icon,
.hero__apps-gitlab {
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.hero__apps-icon {
  display: block;
  width: 44px;
  height: 44px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
}

.hero__apps-gitlab {
  display: flex;
  width: 44px;
  height: 44px;
  padding: 4px;
  box-sizing: border-box;
  align-items: center;
  justify-content: center;
  background: var(--color-paper);
  border: 1px solid var(--color-hairline);
  border-radius: 8px;
  box-shadow: 0 1px 1px rgb(0 0 0 / 0.25);
}

.hero__apps-icon--gitlab {
  width: 30px;
  height: 30px;
  border-radius: 0;
  box-shadow: none;
  object-fit: contain;
  transform: none;
}

.hero__apps-tip {
  position: absolute;
  left: 50%;
  top: calc(100% + var(--spacing-8));
  z-index: 2;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-star);
  color: var(--colour-primary);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  font-style: normal;
  letter-spacing: 0;
  line-height: var(--leading-caption);
  text-transform: none;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  transform: translateX(-50%) scale(0.12, 0.28);
  transform-origin: 50% 0%;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-tip-roll) var(--ease-tip-roll),
    border-radius var(--duration-tip-roll) var(--ease-tip-roll);
}

@media (hover: hover) and (pointer: fine) {
  .hero__app:hover {
    z-index: 2;
  }

  .hero__app:hover > .hero__apps-icon,
  .hero__app:hover > .hero__apps-gitlab {
    transform: scale(1.12);
  }

  .hero__app:hover .hero__apps-tip {
    opacity: 1;
    transform: translateX(-50%) scale(1, 1);
    border-radius: var(--radius-buttons);
  }
}

.hero__app:focus {
  z-index: 2;
}

.hero__app:focus > .hero__apps-icon,
.hero__app:focus > .hero__apps-gitlab {
  transform: scale(1.12);
}

.hero__app:focus .hero__apps-tip {
  opacity: 1;
  transform: translateX(-50%) scale(1, 1);
  border-radius: var(--radius-buttons);
}

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

@media (prefers-reduced-motion: reduce) {
  .hero__apps-icon,
  .hero__apps-gitlab,
  .hero__apps-tip {
    transition: none;
  }

  .hero__app:hover > .hero__apps-icon,
  .hero__app:hover > .hero__apps-gitlab,
  .hero__app:focus > .hero__apps-icon,
  .hero__app:focus > .hero__apps-gitlab {
    transform: none;
  }
}

.hero__mark.is-highlighting {
  /* Starts after the greeting fade-in (~1.38s). */
  animation: hero-highlight 1.6s var(--ease-standard) 1.5s forwards;
}

@keyframes hero-highlight {
  from {
    background-size: 0% 0.8em;
  }

  to {
    background-size: 100% 0.8em;
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero__mark,
  .hero__mark.is-highlighting {
    animation: none;
    background-size: 100% 0.8em;
  }
}

/* Approach */

.approach {
  padding-bottom: var(--section-gap);
}

.approach__inner {
  width: min(var(--approach-max), calc(100% - var(--page-gutter) * 2));
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  container-type: inline-size;
}

.approach__intro {
  max-width: none;
}

.approach__heading {
  font-family: var(--font-display);
  font-size: var(--text-heading);
  line-height: var(--leading-heading);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--spacing-16);
}

.approach__lead {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  color: var(--color-ink);
  margin: 0;
  white-space: nowrap;
}

@container (max-width: 1199px) {
  .approach__lead {
    white-space: normal;
  }
}

.approach__figure {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.approach__labels {
  display: flex;
  gap: var(--spacing-24);
  font-family: var(--font-mono);
  color: var(--color-ink);
}

.approach__labels--top {
  justify-content: space-between;
}

.approach__labels--bottom {
  justify-content: space-between;
}

.approach__labels--bottom span:nth-child(2) {
  /* Center label sits at the transition point in the reference. */
  margin-inline-start: auto;
  margin-inline-end: auto;
}

.approach__stage {
  position: relative;
  width: 100%;
  /* Matches the SVG viewBox (480.11 × 147.21). */
  aspect-ratio: 480.11 / 147.21;
  margin-inline: auto;
  isolation: isolate;
  color: var(--color-ink);
}

.approach__canvas {
  position: absolute;
  inset: 0;
}

.approach__squiggle {
  display: block;
  width: 100%;
  height: 100%;
  user-select: none;
  pointer-events: none;
}

.approach-comment-list {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.approach__attribution {
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
}

.approach__attribution a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 2px;
}

.approach__principles {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--spacing-24);
}

@media (max-width: 767px) {
  .approach__principles {
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-16);
  }
}

.approach-principle {
  background: var(--surface-paper);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  box-shadow: var(--shadow-work);
}

.approach-principle__index {
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
  margin: 0 0 var(--spacing-8);
}

.approach-principle__title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  margin: 0 0 var(--spacing-8);
}

.approach-principle__title em {
  font-style: italic;
  font-weight: inherit;
}

.approach-principle__body {
  margin: 0;
  color: var(--color-ink);
}

.eyebrow {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--spacing-16);
}

/* Figma-style comment composers overlaid on the squiggle.
   Chrome colors mimic Figma's in-progress comment UI, not portfolio tokens. */

.approach-comment {
  --comment-surface: #2c2c2c;
  --comment-ink: #ffffff;
  position: absolute;
  left: var(--comment-x);
  top: var(--comment-y);
  pointer-events: none;
  z-index: 1;
}

.approach-comment__pin,
.approach-comment__bubble {
  opacity: 0;
  transition:
    opacity var(--duration-med) var(--ease-standard),
    transform var(--duration-med) var(--ease-standard);
}

.approach-comment__pin {
  position: absolute;
  left: 0;
  top: 0;
  width: 16px;
  height: 16px;
  border-radius: 50% 50% 50% 0;
  background: var(--pin-color, #6b6b6b);
  transform-origin: 50% 100%;
  transform: translate(-50%, -100%) rotate(-45deg) scale(0.86);
}

.approach-comment__bubble {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
  padding: 6px 6px 6px 12px;
  background: var(--comment-surface);
  color: var(--comment-ink);
  border: 1.5px solid var(--pin-color, #0d99ff);
  border-radius: 12px;
  box-shadow:
    0 0 0 1px color-mix(in srgb, var(--pin-color, #0d99ff) 35%, transparent),
    0 10px 28px rgb(20 20 20 / 0.22);
  transform: translate(0, calc(-50% + 10px)) scale(0.96);
  transform-origin: left center;
}

.approach-comment.is-visible .approach-comment__pin,
.approach-comment__pin.is-visible {
  opacity: 1;
  transform: translate(-50%, -100%) rotate(-45deg) scale(1);
}

.approach__canvas .approach-comment__pin {
  display: none;
  left: var(--comment-x);
  top: var(--comment-y);
}

.approach-comment.is-visible .approach-comment__bubble {
  opacity: 1;
  transform: translate(0, -50%) scale(1);
}

.approach-comment__compose {
  display: flex;
  align-items: center;
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 1;
  letter-spacing: 0;
  white-space: nowrap;
}

.approach-comment__text {
  color: var(--comment-ink);
  line-height: 1;
}

.approach-comment__caret {
  display: inline-block;
  width: 1.5px;
  height: 11px;
  margin-left: 1px;
  background: var(--comment-ink);
  opacity: 0;
  flex: none;
}

.approach-comment.is-typing .approach-comment__caret,
.approach-comment.is-typed .approach-comment__caret {
  opacity: 1;
  animation: approach-caret 1s steps(1, end) infinite;
}

@keyframes approach-caret {
  50% {
    opacity: 0;
  }
}

.approach-comment__send {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--pin-color, #0d99ff);
  color: var(--comment-ink);
  opacity: 0.45;
  flex: none;
}

.approach-comment.is-typing .approach-comment__send,
.approach-comment.is-typed .approach-comment__send {
  opacity: 1;
}

.approach-comment--orange { --pin-color: #e07a3b; }
.approach-comment--yellow { --pin-color: #e6b23a; }
.approach-comment--blue   { --pin-color: #0d99ff; }

@media (prefers-reduced-motion: reduce) {
  .approach-comment__pin,
  .approach-comment__bubble {
    opacity: 1;
    transition: none;
  }

  .approach-comment__pin {
    transform: translate(-50%, -100%) rotate(-45deg) scale(1);
  }

  .approach-comment__bubble {
    transform: translate(0, -50%) scale(1);
  }

  .approach-comment__caret {
    display: none;
    animation: none;
  }

  .approach-comment__send {
    opacity: 1;
  }
}

/* Narrow: pins stay on the squiggle; bubbles become a short list under the axis. */
@container (max-width: 820px) {
  .approach__figure {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: var(--spacing-8);
  }

  .approach__labels--top {
    grid-row: 1;
  }

  .approach__stage {
    display: contents;
    aspect-ratio: unset;
  }

  .approach__canvas {
    position: relative;
    inset: auto;
    grid-row: 2;
    aspect-ratio: 480.11 / 147.21;
  }

  .approach__labels--bottom {
    grid-row: 3;
    flex-wrap: wrap;
    row-gap: var(--spacing-4);
    gap: var(--spacing-8);
  }

  .approach-comment-list {
    position: static;
    inset: auto;
    grid-row: 4;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-8);
    margin-top: var(--spacing-8);
  }

  .approach__attribution {
    grid-row: 5;
  }

  .approach-comment {
    position: static;
    left: auto;
    top: auto;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
  }

  .approach-comment__pin {
    position: relative;
    left: auto;
    top: auto;
    flex: none;
    margin-top: 10px;
    transform: rotate(-45deg) scale(0.86);
  }

  .approach-comment.is-visible .approach-comment__pin {
    transform: rotate(-45deg) scale(1);
  }

  .approach__canvas .approach-comment__pin {
    display: block;
    position: absolute;
    left: var(--comment-x);
    top: var(--comment-y);
    margin-top: 0;
    transform: translate(-50%, -100%) rotate(-45deg) scale(0.86);
  }

  .approach__canvas .approach-comment__pin.is-visible {
    transform: translate(-50%, -100%) rotate(-45deg) scale(1);
  }

  .approach-comment__bubble {
    margin-left: 8px;
    width: max-content;
    max-width: none;
    transform: translate(0, 6px) scale(0.96);
    transform-origin: left top;
  }

  .approach-comment.is-visible .approach-comment__bubble {
    transform: none;
  }
}

@container (max-width: 480px) {
  .approach-comment__compose {
    font-size: 12px;
  }

  .approach-comment__send {
    width: 20px;
    height: 20px;
  }

  .approach-comment__send svg {
    width: 11px;
    height: 11px;
  }
}

/* Work — one-column case cards. */

.work {
  scroll-margin-top: calc(var(--header-height) + var(--spacing-24));
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--work-card-gap);
  width: min(var(--approach-max), 100%);
  margin-inline: auto;
}

.work-card {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--work-card-inner-gap);
  min-width: 0;
  padding: var(--card-padding);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  background: var(--color-work-card);
  text-decoration: none;
  color: inherit;
}

@keyframes work-card-in {
  from {
    opacity: 0;
    transform: translateY(28px);
  }

  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.home .work-card:not(.is-revealed) {
  opacity: 0;
  transform: translateY(28px);
}

.home .work-card.is-revealed {
  animation: work-card-in 0.65s var(--ease-standard) var(--reveal-delay, 0ms) both;
}

.work-card:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 4px;
  border-radius: var(--work-thumb-radius);
}

@media (hover: hover) and (pointer: fine) {
  .work-card.is-revealed {
    transition: transform var(--duration-med) var(--ease-standard);
  }

  .work-card.is-revealed:hover,
  .work-card.is-revealed:focus-visible {
    transform: scale(0.97);
  }
}

@media (prefers-reduced-motion: reduce) {
  .home .work-card:not(.is-revealed),
  .home .work-card.is-revealed {
    opacity: 1;
    transform: none;
    animation: none;
  }

  .work-card {
    transition: none;
  }

  .work-card:hover,
  .work-card:focus-visible {
    transform: none;
  }
}

.work-card__thumb {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  aspect-ratio: var(--work-thumb-ratio);
  border-radius: var(--work-thumb-radius);
  background: var(--color-work-field);
  flex-shrink: 0;
  position: relative;
  overflow: hidden;
  padding: 8% 10%;
}

.work-card__thumb:has(> video, > img) {
  padding: 0;
}

.work-card__stage {
  margin: 0;
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-stretch: var(--font-display-width);
  font-optical-sizing: auto;
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: var(--tracking-display);
  text-align: center;
  color: var(--color-ink);
}

.work-card__thumb :is(video, img) {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.work-card__body {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--spacing-12);
  min-width: 0;
  width: 100%;
  container-type: inline-size;
}

.work-card .eyebrow {
  margin-bottom: 0;
  font-family: var(--font-neuebit);
  font-weight: var(--font-weight-bold);
}

.work-card__title {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
}

.work-card__desc {
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  color: var(--color-work-desc);
}

.work-card .pills,
.case-head .pills {
  gap: var(--work-pill-gap);
  width: 100%;
  max-width: 100%;
}

@media (min-width: 900px) {
  .work-card .pills,
  .case-head .pills {
    flex-wrap: nowrap;
  }
}

.work-card .pill,
.case-head .pill {
  flex: 0 1 auto;
  min-width: 0;
  font-size: clamp(
    var(--work-pill-size-min),
    var(--work-pill-size-fluid),
    var(--work-pill-size-max)
  );
  line-height: 1;
  letter-spacing: 0;
  padding: var(--work-pill-padding-block) var(--work-pill-padding-inline);
  font-weight: var(--font-weight-bold);
  text-transform: uppercase;
  color: var(--colour-secondary);
  border-color: var(--colour-secondary);
  border-width: 0.5px;
}

.thumb {
  aspect-ratio: 4 / 3;
  width: 100%;
  object-fit: cover;
  border-radius: var(--radius-images);
  border: 1px solid var(--color-hairline);
  background: var(--color-mist);
}

.thumb--placeholder {
  display: block;
  background: var(--color-canvas);
}

.pills {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
}

.pill {
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  letter-spacing: var(--pill-tracking);
  white-space: nowrap;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pills);
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  line-height: 1;
  pointer-events: none;
}

/* Case study */

.case {
  padding-block: var(--spacing-40) var(--spacing-80);
}

.case-shell.wrap {
  width: min(var(--case-max), calc(100% - var(--page-gutter) * 2));
}

.case-body {
  min-width: 0;
}

.case-toc {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-8) var(--spacing-16);
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  background: var(--color-cream);
  padding-block: var(--spacing-12);
  margin: 0 calc(var(--page-gutter) * -1) var(--spacing-24);
  padding-inline: var(--page-gutter);
  border-bottom: 1px solid var(--color-hairline);
  overflow-anchor: none;
}

.case-toc:has(.case-toc__menu) {
  display: block;
  padding-block: 0;
}

.case-toc__menu {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  margin: 0;
}

.case-toc__toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  width: 100%;
  padding-block: var(--spacing-12);
  cursor: pointer;
  list-style: none;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-bold);
  line-height: 1.3;
}

.case-toc__toggle::-webkit-details-marker {
  display: none;
}

.case-toc__toggle::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
}

.case-toc__menu[open] .case-toc__toggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.case-toc a,
.case-toc__continued {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-ink-muted);
  font-family: var(--font-body);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  line-height: 1.3;
  text-decoration: none;
  text-transform: none;
  cursor: pointer;
  text-align: left;
}

.case-toc a:hover,
.case-toc a:focus-visible,
.case-toc__continued:hover,
.case-toc__continued:focus-visible {
  color: var(--color-ink);
}

.case-toc a.is-active {
  color: var(--color-label-accent);
  font-weight: var(--font-weight-bold);
}

.case-toc [data-toc-current] {
  color: var(--color-label-accent);
}

.case-toc [hidden] {
  display: none;
}

.case-toc__lock {
  flex-shrink: 0;
  width: 14px;
  height: 14px;
}

.case-toc__continued {
  color: var(--color-ink-muted);
}

.case-toc__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-4);
  padding-bottom: var(--spacing-12);
}

.case-toc__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  width: 100%;
  margin: 0;
}

.case-toc__group-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-8);
  width: 100%;
  box-sizing: border-box;
  padding: 0;
  margin: 0;
  cursor: pointer;
  list-style: none;
  color: inherit;
}

.case-toc__group-toggle::-webkit-details-marker {
  display: none;
}

.case-toc__group-toggle::after {
  content: "";
  flex-shrink: 0;
  width: 7px;
  height: 7px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  color: var(--color-ink-muted);
}

.case-toc__group[open] > .case-toc__group-toggle::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

.case-toc__group-toggle .case-toc__parent {
  flex: 1;
  min-width: 0;
}

.case-toc__sublist {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: var(--spacing-8);
  margin: 0;
  padding: var(--spacing-4) 0 0 var(--spacing-12);
  border-left: 1px solid var(--color-hairline);
}

.case-toc__group:not([open]) .case-toc__sublist {
  padding-top: 0;
}

.case-toc a.case-toc__parent.is-active-within {
  color: var(--color-ink);
  font-weight: var(--font-weight-regular);
}

.case-subsection {
  scroll-margin-top: calc(var(--header-height) + var(--spacing-40));
}

.case-toc__menu a,
.case-toc__menu .case-toc__continued,
.case-toc__list a,
.case-toc__list .case-toc__continued {
  display: flex;
  width: 100%;
  box-sizing: border-box;
  padding-block: var(--spacing-8);
}

.case-section {
  scroll-margin-top: calc(var(--header-height) + var(--spacing-40));
}

.case-body > article {
  margin-top: var(--case-section-gap);
  padding-top: var(--case-section-gap);
  border-top: 1px solid var(--color-hairline);
}

.case-body > article .case-section + .case-section {
  margin-top: var(--case-section-gap);
  padding-top: var(--case-section-gap);
  border-top: 1px solid var(--color-hairline);
}

.case-body > article:has(> .case-process:first-child) {
  border-top: 0;
}

.case-body > article[data-locked-body]:empty {
  display: none;
}

.case-gate {
  margin-top: var(--spacing-80);
  scroll-margin-top: calc(var(--header-height) + var(--spacing-40));
}

.case-gate[data-state="checking"] {
  visibility: hidden;
}

.case-gate__card {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-16);
  width: min(100%, var(--case-gate-max));
  margin-inline: auto;
  padding: var(--spacing-52) clamp(var(--spacing-24), 8vw, var(--spacing-80)) var(--spacing-64);
  background-color: var(--color-footer-ink);
  background-image: image-set(
    url("../img/footer-photo@1x.png") 1x,
    url("../img/footer-photo@2x.png") 2x
  );
  /* Photo is ~4:1 and the person starts just past halfway. Zoom and pin left so the card stays on greenery at every width. */
  background-repeat: no-repeat;
  background-size: auto 170%;
  background-position: left 8%;
  border-radius: var(--radius-cards);
  box-shadow: var(--shadow-gate);
  color: var(--color-cream);
}

.case-gate__card > * {
  position: relative;
  z-index: 1;
}

.case-gate__lock {
  display: block;
  width: 26px;
  height: 32px;
  color: var(--color-star);
}

.case-gate__title {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  font-stretch: var(--font-display-width);
  font-weight: var(--font-weight-regular);
  line-height: var(--spacing-32);
  letter-spacing: 0;
  text-align: center;
}

.case-gate__body {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: 0.16px;
  line-height: var(--leading-body);
  text-align: center;
}

.case-gate__body a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.case-gate__field {
  position: relative;
  width: min(100%, 340px);
}

.case-gate__row {
  display: flex;
  align-items: center;
  gap: var(--spacing-8);
  width: 100%;
  padding: var(--spacing-8) var(--spacing-16);
  background: var(--color-gate-field);
  border-radius: var(--radius-pills);
}

.case-gate__input {
  flex: 1 1 auto;
  min-width: 0;
  padding: 0;
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  letter-spacing: 0.16px;
  line-height: var(--leading-body);
  background: transparent;
  border: 0;
}

.case-gate__input::placeholder {
  color: var(--color-ink);
  opacity: 1;
}

.case-gate__input:focus {
  outline: none;
}

.case-gate__row:focus-within {
  outline: 2px solid var(--color-cream);
  outline-offset: 3px;
}

.case-gate__input[aria-invalid="true"] {
  color: var(--color-ink);
}

.case-gate__reveal,
.case-gate__submit {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  color: var(--color-ink);
  background: transparent;
  border: 0;
  cursor: pointer;
}

.case-gate__reveal:focus,
.case-gate__submit:focus {
  outline: none;
}

.case-gate__reveal[aria-pressed="false"] .case-gate__eye--shut,
.case-gate__reveal[aria-pressed="true"] .case-gate__eye--open {
  display: none;
}

.case-gate__eye {
  display: block;
}

.case-gate__arrow {
  display: block;
}

.case-gate__submit:disabled {
  cursor: progress;
  opacity: 0.6;
}

.case-gate__error {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + var(--spacing-16));
  margin: 0;
  color: var(--color-star);
  font-size: var(--text-body-sm);
  letter-spacing: 0;
  line-height: 1.3;
  text-align: center;
}

.case-section .eyebrow,
.case .summary .eyebrow,
.case-split__copy .eyebrow {
  color: var(--color-label-accent);
}

.case-section .eyebrow {
  margin-bottom: var(--spacing-12);
}

.case-section > .eyebrow:not(:first-child) {
  margin-top: var(--spacing-28);
}

.case-section .eyebrow.case-subsection__label {
  margin: var(--spacing-28) 0 var(--spacing-10);
  color: var(--color-ink-muted);
}

.case-section .case-subsection > .eyebrow.case-subsection__label + h2 {
  margin-top: 0;
}

.case-section .case-figure + .case-subsection {
  margin-top: var(--spacing-40);
}

.case-section .case-figure + .case-subsection > .eyebrow.case-subsection__label {
  margin-top: 0;
}

.case-section .case-figure + .eyebrow.case-subsection__label {
  margin-top: var(--spacing-40);
}

.case-section > .eyebrow.case-subsection__label + h2 {
  margin-top: 0;
}

.case-subsection:first-child .eyebrow.case-subsection__label {
  margin-top: 0;
}

.case-section h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
  margin-bottom: var(--spacing-16);
}

.case-section h3 {
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: 0;
  margin-top: var(--spacing-28);
  margin-bottom: var(--spacing-12);
}

.case-section h3 + p {
  margin-top: var(--spacing-24);
}

@media (min-width: 900px) {
  .case-shell {
    display: grid;
    grid-template-columns: var(--case-nav) minmax(0, 1fr);
    column-gap: var(--spacing-64);
    align-items: start;
  }

  .case-toc {
    flex-direction: column;
    flex-wrap: nowrap;
    justify-content: flex-start;
    align-items: flex-start;
    align-self: start;
    gap: var(--spacing-12);
    top: var(--header-height);
    box-sizing: border-box;
    /* --footer-overlap (set in main.js) keeps the links centered in the
       space the footer has not yet covered. */
    height: calc(100dvh - var(--header-height) - var(--footer-overlap, 0px));
    max-height: none;
    overflow-y: auto;
    /* Top margin cancels .case padding so the nav is pinned from first paint.
       Inline padding keeps focus outlines from being clipped by overflow. */
    /* Negative bottom margin lets the sticky nav stay pinned past the end of
       .case-shell, so the footer scrolls over it instead of pushing it up. */
    margin: calc(var(--spacing-40) * -1) calc(var(--spacing-8) * -1) -100dvh;
    padding: var(--spacing-24) var(--spacing-8);
    background: transparent;
    border-bottom: 0;
  }

  .case-toc:has(.case-toc__menu) {
    display: flex;
    padding: var(--spacing-24) var(--spacing-8);
  }

  .case-toc__menu,
  .case-toc__list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--spacing-12);
    padding: 0;
    width: 100%;
  }

  /* Auto margins center the menu without clipping its top on short viewports. */
  .case-toc__menu {
    margin-block: auto;
  }

  .case-toc__toggle {
    display: none;
  }

  .case-toc__menu a,
  .case-toc__menu .case-toc__continued,
  .case-toc__list a,
  .case-toc__list .case-toc__continued {
    width: auto;
    padding-block: 0;
  }

  .case-toc__sublist {
    gap: var(--spacing-12);
    padding-top: var(--spacing-4);
  }

  .case-section {
    scroll-margin-top: calc(var(--header-height) + var(--spacing-24));
  }
}

.case-head {
  margin-bottom: 0;
  text-align: left;
  container-type: inline-size;
}

.case-head .eyebrow {
  margin-bottom: var(--spacing-8);
}

.case-head__title {
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  letter-spacing: 0;
  margin-bottom: var(--spacing-16);
}

.case__thumb {
  width: 100%;
  margin-bottom: var(--spacing-32);
}

.case__thumb .thumb {
  width: 100%;
  aspect-ratio: var(--case-thumb-ratio);
  object-fit: cover;
  object-position: center;
}

.case__thumb .thumb-media {
  width: 100%;
}

.case__thumb video.thumb {
  display: block;
}

.case-notice {
  display: inline-flex;
  align-items: flex-start;
  gap: var(--spacing-8);
  margin: var(--spacing-24) 0 0;
  padding: var(--spacing-8) var(--spacing-12);
  max-width: 100%;
  background: var(--surface-raised);
  color: var(--color-ink-muted);
  font-size: var(--text-caption);
  line-height: 1.3;
  border-radius: var(--radius-buttons);
}

.case-notice span {
  min-width: 0;
}

.case-notice__lock {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
}

.summary {
  margin: 0;
  padding-top: var(--spacing-40);
  border-top: 0;
}

/* Overview block: “Overview” eyebrow matches Challenge / Solution / Impact terms */
.case .summary .eyebrow,
.case .summary .summary__list dt {
  font-size: var(--text-label);
  line-height: var(--leading-label);
  letter-spacing: var(--tracking-label);
}

.summary__list {
  display: grid;
  gap: var(--case-summary-gap);
  margin: 0;
}

.summary__list > div {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-8);
  align-items: start;
}

@media (min-width: 700px) {
  .summary__list > div {
    grid-template-columns: 9rem minmax(0, 1fr);
    column-gap: var(--spacing-32);
  }
}

.summary__meta {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--spacing-24);
  margin: var(--spacing-24) 0 0;
  padding: var(--spacing-24);
  background: var(--surface-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.summary__meta dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--spacing-8);
}

.summary__meta dd {
  margin: 0;
}

@media (min-width: 700px) {
  .summary__meta {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    column-gap: var(--spacing-32);
    row-gap: var(--spacing-24);
  }

  /* Date / team / toolkit only (org shown in case-head eyebrow) */
  .summary__meta:has(> :nth-child(3):last-child) {
    grid-template-columns: minmax(7.5rem, 0.85fr) minmax(0, 1.35fr) minmax(0, 1fr);
    column-gap: clamp(var(--spacing-32), 5vw, var(--spacing-40));
  }
}

.summary__list dt {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin: 0;
  padding-top: 0.1em;
}

.summary__list dd {
  margin: 0;
}

.summary__list ul {
  margin: 0;
  padding-left: 1.1em;
}

.summary__list li + li {
  margin-top: var(--spacing-8);
}

.case-section p + p,
.case-section p + ul,
.case-section p + ol,
.case-section ul + p,
.case-section ol + p {
  margin-top: var(--spacing-16);
}

.case-section .case-figure + ul,
.case-section .case-figure + ol {
  margin-top: var(--spacing-24);
}

.case-section h2 + .case-figure,
.case-section h3 + .case-figure,
.case-section p + .case-figure,
.case-section ul + .case-figure,
.case-section ol + .case-figure {
  margin-top: var(--spacing-40);
}

.case-section .case-figure + p,
.case-section .case-figure-row + p,
.case-section .case-figure + .case-label {
  margin-top: var(--spacing-24);
}

.case-section p:has(> strong:only-child) + p {
  margin-top: var(--spacing-4);
}

.case-section p:has(> strong:only-child) + .case-figure {
  margin-top: var(--spacing-12);
}

.case-section p + h2,
.case-section ul + h2,
.case-section ol + h2,
.case-section .case-figure + h2,
.case-section .case-callout + h2,
.case-section .case-callout-row + h2,
.case-section .case-card-row + h2,
.case-section .case-card + h2,
.case-section .case-visual + h2,
.case-section .case-slideshow + h2,
.case-section .case-figure-row + h2 {
  margin-top: var(--spacing-40);
}

.case-section ul,
.case-section ol {
  margin: 0;
  padding-left: 1.1em;
}

.case-section ol li::marker {
  font-weight: 700;
}

.case-section li + li {
  margin-top: var(--spacing-8);
}

.case-figure {
  margin: var(--spacing-32) 0 0;
  padding: 0;
  border: 0;
}

.case-section .case-figure + .case-figure {
  margin-top: var(--spacing-10);
}

.case-figure__placeholder {
  width: 100%;
  aspect-ratio: 16 / 9;
  border-radius: var(--radius-images);
  background: var(--color-canvas);
  border: 1px solid var(--color-hairline);
}

.case-process {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin: var(--case-section-gap) 0;
}

.case-process::before {
  content: "";
  position: absolute;
  inset-inline: 0;
  height: 1px;
  background: var(--color-hairline);
}

.case-process .pill {
  position: relative;
  z-index: 1;
  background: var(--color-paper);
  font-size: var(--text-mono);
  text-transform: uppercase;
}

.case-section:has(> .case-process:last-child) + .case-section,
.case-body > article > .case-process + .case-section {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.case-body > article > .case-section + .case-process {
  margin-top: var(--case-section-gap);
}

.case-section .case-callout + .case-figure {
  margin-top: var(--spacing-16);
}

.case-section .case-figure + .case-callout {
  margin-top: var(--spacing-40);
}

.case-figure__open {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  cursor: zoom-in;
  border-radius: var(--radius-images);
}

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

.case-figure img,
.case-figure__open img,
.case-video video {
  width: 100%;
  border-radius: var(--radius-images);
  border: 0;
  background: var(--color-cream);
}

.case-video {
  position: relative;
}

.case-video video {
  display: block;
}

.case-video__toggle {
  position: absolute;
  right: var(--spacing-16);
  bottom: var(--spacing-16);
  width: 40px;
  height: 40px;
  padding: 0;
}

.case-video__icon--play {
  display: none;
}

.case-video__toggle[aria-pressed="true"] .case-video__icon--pause {
  display: none;
}

.case-video__toggle[aria-pressed="true"] .case-video__icon--play {
  display: block;
}

.case-figure figcaption,
.case-caption,
.case-slideshow figcaption,
.case-visual--teams figcaption {
  margin: 0;
  padding: var(--spacing-20) 0 var(--spacing-24);
  font-size: var(--text-caption);
  line-height: var(--leading-body);
  font-style: normal;
  text-align: center;
  color: var(--color-ink-muted);
}

.case-figure-row {
  display: grid;
  gap: var(--spacing-24);
  margin-top: var(--spacing-32);
  align-items: start;
}

.case-figure-row .case-figure {
  margin-top: 0;
}

.case-figure-row .case-figure-unit > p + .case-figure {
  margin-top: var(--spacing-40);
}

.case-section .case-figure-row .case-figure + .case-figure {
  margin-top: 0;
}

.case-figure-row .case-video {
  aspect-ratio: 16 / 9;
  overflow: hidden;
  border-radius: var(--radius-images);
  background: var(--color-cream);
}

.case-figure-row .case-video video {
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: 0;
}

@media (min-width: 700px) {
  .case-figure-row {
    grid-template-columns: 1fr 1fr;
  }
}

.case-split {
  display: grid;
  gap: var(--spacing-24);
  margin-top: var(--spacing-32);
  align-items: center;
}

.case-split + .case-split {
  margin-top: var(--spacing-24);
}

.case-split__placeholder {
  width: 100%;
  aspect-ratio: 16 / 10;
  border-radius: var(--radius-images);
  background: color-mix(in srgb, var(--color-ink) 18%, var(--color-paper));
}

.case-split__media .case-figure {
  margin: 0;
}

.case-split__media .case-figure__open img {
  aspect-ratio: 16 / 10;
  object-fit: cover;
}

.case-split__media .case-figure--video .case-video {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: var(--radius-images);
  background: var(--color-cream);
}

.case-split__media .case-figure--video .case-video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 0;
}

.case-split__copy .eyebrow {
  margin-bottom: var(--spacing-8);
}

.case-section .case-split__copy h3 {
  margin: 0 0 var(--spacing-8);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
}

.case-split__copy p {
  color: var(--color-ink-muted);
}

@media (min-width: 700px) {
  .case-split {
    grid-template-columns: minmax(0, 1.55fr) minmax(12rem, 0.9fr);
    column-gap: var(--spacing-32);
  }

  #final-screens .case-split {
    grid-template-columns: minmax(0, 1fr);
    align-items: start;
  }
}

#final-screens .case-split__copy {
  order: -1;
}

#final-screens .case-split__media {
  min-width: 0;
  max-width: 100%;
}

#final-screens .case-split__media .case-figure__open img {
  width: 100%;
  max-width: 100%;
  height: auto;
  aspect-ratio: auto;
  object-fit: contain;
}

/* Tall portrait mocks (e.g. narrow panel SVGs) — use <!-- visual: split narrow --> */
#final-screens .case-split--narrow .case-split__media {
  max-width: min(100%, 22rem);
  margin-inline: auto;
}

#final-screens .case-split--narrow .case-split__media .case-figure__open {
  display: flex;
  justify-content: center;
}

#final-screens .case-split--narrow .case-split__media .case-figure__open img {
  width: 100%;
}

.case-card-row {
  display: grid;
  gap: var(--spacing-24);
  margin-top: var(--spacing-32);
}

.case-card-row .case-card {
  margin-top: 0;
  height: 100%;
}

@media (min-width: 700px) {
  .case-card-row {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (min-width: 900px) {
  .case-card-row:has(> .case-card:nth-child(3):last-child) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* Draft marker for answers still owed; should not survive to a final version. */
.case-tbc {
  padding: 0 0.25em;
  border-radius: 3px;
  background: var(--color-highlight-yellow);
  color: var(--color-ink);
  font-style: normal;
}

.case-card {
  background: var(--surface-paper);
  border-radius: var(--radius-cards);
  padding: var(--spacing-16);
  box-shadow: var(--shadow-work);
  display: flex;
  flex-direction: column;
  text-align: left;
}

.case-card__index {
  font-family: var(--font-mono);
  color: var(--color-ink-muted);
  margin: 0 0 var(--spacing-8);
}

.case-card__title {
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-display);
  margin: 0 0 var(--spacing-8);
  color: var(--color-ink);
}

.case-section .case-card__title {
  margin-top: 0;
}

.case-card__title em {
  font-style: italic;
  font-weight: inherit;
}

.case-card__body {
  margin: 0;
  color: var(--color-ink);
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  flex: 1;
}

.case-card__body p,
.case-card__body ul {
  margin: 0;
  color: var(--color-ink);
}

.case-card__body ul {
  padding-left: 1.1em;
}

.case-card__body p + ul {
  margin-top: calc(var(--spacing-4) * -1);
}

.case-card__body li + li {
  margin-top: var(--spacing-4);
}

.case-callout-row {
  display: grid;
  gap: var(--spacing-24);
  margin-top: var(--spacing-32);
}

.case-callout-row .case-callout {
  margin-top: 0;
  height: 100%;
}

.case-callout-row > .case-callout:not(.case-callout--pain):not(.case-callout--resolved) {
  background: var(--surface-paper);
  box-shadow: var(--shadow-work);
  padding: var(--spacing-24);
}

.case-callout-row > .case-callout:not(.case-callout--pain):not(.case-callout--resolved)::before {
  display: none;
}

@media (min-width: 700px) {
  .case-callout-row {
    grid-template-columns: 1fr 1fr;
  }
}

.case-callout {
  position: relative;
  margin-top: var(--spacing-32);
  padding: var(--spacing-24) var(--spacing-32) var(--spacing-24) calc(var(--spacing-32) + 8px);
  background: var(--surface-canvas);
  border-radius: var(--radius-cards);
  text-align: left;
}

.case-callout::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 8px;
  background: var(--color-ink);
  border-radius: var(--radius-cards) 0 0 var(--radius-cards);
}

.case-callout--pain {
  background: #ffeded;
}

.case-callout--pain::before {
  background: #c71e1e;
}

.case-label {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.case-label--pain,
.case-callout--pain h3 {
  color: #c71e1e;
}

.case-label--resolved,
.case-callout--resolved h3 {
  color: #00b53b;
}

.case-callout--resolved {
  background: #e3fcec;
}

.case-callout--resolved::before {
  background: #00b53b;
}

.case-callout--stacked {
  background: var(--color-aside-bg);
}

.case-callout--stacked::before {
  width: 4px;
  background: var(--color-aside);
}

.case-callout--stacked h3 {
  color: var(--color-aside);
}

.case-callout h3 {
  margin: 0 0 var(--spacing-12);
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.case-callout p,
.case-callout ul {
  margin: 0;
  color: var(--color-ink);
}

.case-callout p + ul,
.case-callout p + p,
.case-callout ul + p {
  margin-top: var(--spacing-12);
}

.case-callout ul {
  padding-left: 1.1em;
}

.case-callout li + li {
  margin-top: var(--spacing-8);
}

.case-slideshow {
  margin: var(--spacing-32) 0 0;
  padding: 0;
  border: 0;
}

.case-slideshow__frame {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--spacing-8);
}

.case-slideshow__viewport {
  overflow: hidden;
  border-radius: var(--radius-images);
  border: 0;
  background: var(--surface-paper);
}

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

.case-slideshow__track {
  display: flex;
  transition: transform var(--duration-med) var(--ease-standard);
}

.case-slideshow__slide {
  flex: 0 0 100%;
  min-width: 0;
}

.case-slideshow__slide[aria-hidden="true"] {
  pointer-events: none;
}

.case-slideshow__slide .case-figure__open {
  width: 100%;
}

.case-slideshow__slide img {
  width: 100%;
  display: block;
  border: 0;
  border-radius: 0;
  background: var(--surface-paper);
}

.case-slideshow__nav {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pills);
  background: var(--surface-paper);
  color: var(--color-ink);
  cursor: pointer;
}

.case-slideshow__nav:hover {
  background: var(--surface-canvas);
}

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

.case-slideshow__status {
  margin: var(--spacing-12) 0 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  text-align: center;
}

.case-slideshow__dots {
  display: flex;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-8);
}

.case-slideshow__dots button {
  width: 8px;
  height: 8px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pills);
  background: var(--color-hairline);
  cursor: pointer;
}

.case-slideshow__dots button.is-active {
  background: var(--color-ink);
}

.case-slideshow__dots button:focus-visible {
  outline: 2px solid var(--color-ink);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .case-slideshow__track {
    transition: none;
  }
}

.case-visual {
  margin-top: var(--spacing-32);
  display: grid;
  gap: var(--spacing-16);
}

.case-visual--decision {
  grid-template-columns: 1fr;
}

.case-section .case-visual--decision + p {
  margin-top: var(--spacing-32);
}

.case-section .case-visual + p {
  margin-top: var(--spacing-40);
}

.case-visual__card {
  background: var(--surface-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  text-align: left;
}

.case-visual__label {
  font-family: var(--font-mono);
  text-transform: uppercase;
  color: var(--color-ink-muted);
  margin-bottom: var(--spacing-8);
}

.case-visual__card p {
  margin: 0;
}

.case-visual--pillars {
  grid-template-columns: 1fr;
}

.case-visual--pillars > .case-callout {
  margin-top: 0;
  display: grid;
  gap: var(--spacing-24);
}

.case-visual--pillars > .case-callout::before {
  background: var(--color-lavender);
}

.case-visual--pillars article {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: var(--spacing-16);
  align-items: start;
}

.case-visual--pillars article + article {
  padding-top: var(--spacing-24);
  border-top: 1px solid var(--color-hairline);
}

.case-visual--pillars .case-visual__label {
  grid-column: 1;
  grid-row: 1 / -1;
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-bold);
  line-height: var(--leading-body);
  letter-spacing: normal;
  text-transform: none;
  color: var(--color-ink);
}

.case-visual--pillars h3,
.case-visual--pillars .case-visual__lede,
.case-visual--pillars ul {
  grid-column: 2;
}

.case-visual--pillars h3 {
  margin: 0;
}

.case-visual--pillars .case-visual__lede {
  color: var(--color-ink-muted);
  margin: 0;
}

.case-visual--pillars h3 + .case-visual__lede {
  margin-top: var(--spacing-8);
}

.case-visual--pillars .case-visual__lede + ul,
.case-visual--pillars h3 + ul {
  margin-top: var(--spacing-12);
}

.case-visual--pillars ul {
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.case-visual--methods {
  display: flex;
  flex-wrap: wrap;
  gap: var(--pill-gap);
}

.case-visual--methods span {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-pills);
  padding: var(--pill-padding-block) var(--pill-padding-inline);
  font-family: var(--font-mono);
  letter-spacing: var(--pill-tracking);
  line-height: 1;
}

.case-visual--quotes {
  padding: var(--spacing-24) var(--spacing-32);
}

.case-visual--quotes:not(.case-visual--teams) {
  --case-quote-muted: var(--color-ink-muted);
  gap: var(--spacing-12);
  padding-bottom: var(--spacing-16);
  background: var(--surface-paper);
  border: 0.75px solid var(--case-quote-muted);
  border-radius: var(--radius-cards);
}

.case-visual--quotes:not(.case-visual--teams) blockquote {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--text-body);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-body);
  letter-spacing: 0;
}

.case-visual--quotes:not(.case-visual--teams) blockquote::before {
  content: "\201C";
  margin-right: 0.08em;
}

.case-visual--quotes:not(.case-visual--teams) blockquote::after {
  content: "\201D";
  margin-left: 0.08em;
}

.case-quote__attrib {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
  text-align: right;
  color: var(--case-quote-muted, var(--color-ink-muted));
}

.case-visual--teams {
  --teams-font: var(--font-teams);
  --teams-ink: #242424;
  --teams-muted: #616161;
  --teams-bubble: #ffffff;
  --teams-purple: #5b5fc7;
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: none;
  padding: var(--spacing-8) 0 0;
  overflow: visible;
  background: transparent;
  border: none;
  border-radius: 0;
  font-family: var(--teams-font);
}

.teams-chat {
  width: max-content;
  max-width: 100%;
  padding-bottom: var(--spacing-20);
}

.teams-msg {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 0;
}

.case-visual--teams figcaption {
  align-self: stretch;
  padding-top: 0;
  font-family: var(--font-body);
}

.teams-msg__avatar {
  display: grid;
  place-items: center;
  flex: 0 0 32px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--teams-purple);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  line-height: 1;
}

.teams-msg__content {
  min-width: 0;
}

.teams-msg__meta {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 4px;
}

.teams-msg__name {
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  color: var(--teams-ink);
}

.teams-msg__time {
  font-size: 12px;
  font-weight: 400;
  line-height: 1.2;
  color: var(--teams-muted);
}

.case-visual--teams blockquote {
  display: inline-block;
  max-width: 100%;
  margin: 0;
  padding: 8px 12px;
  background: var(--teams-bubble);
  border-radius: 0 8px 8px 8px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
  font-family: var(--teams-font);
  font-size: 14px;
  font-weight: 400;
  line-height: 1.43;
  letter-spacing: 0;
  color: var(--teams-ink);
}

.case-visual--ai {
  margin-top: var(--spacing-32);
  padding: var(--spacing-24);
  background: var(--surface-paper);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-cards);
}

.case-visual--ai .case-visual__label {
  margin-bottom: var(--spacing-12);
}

.case-visual--ai p:last-child {
  margin: 0;
}

.case-visual--timeline {
  display: grid;
  gap: var(--spacing-16);
  padding: 0;
  margin: var(--spacing-32) 0 0;
  list-style: none;
  counter-reset: beat;
}

.case-visual--timeline li {
  position: relative;
  padding-left: var(--spacing-40);
  margin: 0;
  counter-increment: beat;
}

.case-visual--timeline li + li {
  margin-top: var(--spacing-16);
}

.case-visual--timeline li::before {
  content: counter(beat);
  position: absolute;
  left: 0;
  top: 0;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  font-family: var(--font-mono);
  letter-spacing: 0;
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
  border-radius: 50%;
  background: var(--surface-paper);
}

.case-cta {
  margin-top: var(--case-section-gap);
  padding-top: var(--case-section-gap);
  border-top: 1px solid var(--color-hairline);
  text-align: left;
}

.case-cta h2 {
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  letter-spacing: 0;
  margin-bottom: var(--spacing-16);
}

.case-cta p {
  margin: 0 0 var(--spacing-32);
  color: var(--color-ink-muted);
}

.case-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-12);
}

.case-cta .btn--fill {
  grid-area: auto;
  justify-self: start;
}

.case-lightbox {
  position: fixed;
  inset: 0;
  width: min(96vw, 1400px);
  height: min(92vh, 900px);
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  border: 0;
  background: var(--surface-canvas);
  color: var(--color-ink);
  border-radius: var(--radius-cards);
  overflow: hidden;
}

.case-lightbox::backdrop {
  background: rgb(20 20 20 / 0.72);
}

.case-lightbox__frame {
  width: 100%;
  height: 100%;
  overflow: auto;
  display: grid;
  place-items: center;
  padding: var(--spacing-64) var(--spacing-40) var(--spacing-40);
  cursor: zoom-in;
  user-select: none;
  overscroll-behavior: contain;
  touch-action: none;
}

.case-lightbox__frame.is-panning {
  cursor: grabbing;
}

.case-lightbox__img {
  display: block;
  max-width: 100%;
  height: auto;
  transform-origin: center center;
  -webkit-user-drag: none;
  pointer-events: none;
}

.case-lightbox__toolbar {
  position: absolute;
  top: var(--spacing-16);
  right: var(--spacing-16);
  z-index: 2;
  display: flex;
  gap: var(--spacing-8);
}

.case-lightbox__toolbar .btn {
  box-sizing: border-box;
  flex-shrink: 0;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  background: var(--surface-paper);
  color: var(--color-ink);
  border: 1px solid var(--color-hairline);
}

.case-lightbox__toolbar .btn svg {
  display: block;
}

@media (min-width: 700px) {
  .case-visual--decision {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-16);
  }

  .case-visual--timeline {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--spacing-24);
  }

  .case-visual--timeline li {
    padding-left: 0;
    padding-top: var(--spacing-40);
  }

  .case-visual--timeline li + li {
    margin-top: 0;
  }

  .case-visual--timeline li::before {
    top: 0;
  }
}

/* About */

.about.wrap {
  --about-portrait-optical-shift: -12%;
  width: 100%;
  max-width: none;
  margin-inline: 0;
  padding-inline: var(--spacing-16);
  padding-block: var(--spacing-52) var(--spacing-40);
  box-sizing: border-box;
}

@media (min-width: 768px) {
  .about.wrap {
    padding-inline: var(--spacing-52);
    padding-block-start: var(--spacing-80);
  }
}

.about__grid {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-32);
  align-items: center;
  margin-inline: auto;
  max-width: 40rem;
}

.about__intro {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  width: 100%;
  text-align: center;
}

.about__header {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
  width: 100%;
  text-align: center;
}

.about__bio {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-24);
  max-width: none;
  text-align: left;
}

.about__sections {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-40);
  width: 100%;
  text-align: left;
}

.about__heading,
.about__portrait-anchor,
.about__bio,
.about__section {
  opacity: 0;
  transform: translateY(14px);
  animation: about-enter 1100ms cubic-bezier(0.16, 1, 0.3, 1) forwards;
}

.about__portrait-anchor {
  animation-delay: 220ms;
}

.about__bio {
  animation-delay: 440ms;
}

.about__section:nth-child(1) {
  animation-delay: 660ms;
}

.about__section:nth-child(2) {
  animation-delay: 880ms;
}

@keyframes about-enter {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@media (prefers-reduced-motion: reduce) {
  .about__heading,
  .about__portrait-anchor,
  .about__bio,
  .about__section {
    animation: none;
    opacity: 1;
    transform: none;
  }
}

.about__portrait-anchor {
  margin: 0;
  align-self: stretch;
  width: 100%;
  display: flex;
  justify-content: center;
}

.about__portrait {
  margin: 0;
  width: min(100%, 22.5rem);
  margin-inline: auto;
  transform: translateX(var(--about-portrait-optical-shift));
}

.about__heading,
.about__section-heading,
.about__joy {
  color: var(--color-label-accent);
}

.about__heading {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  line-height: var(--leading-heading-lg);
  font-weight: var(--font-weight-medium);
  letter-spacing: var(--tracking-display);
}

.about__joy {
  font-weight: var(--font-weight-regular);
}

.about__portrait img {
  display: block;
  width: 100%;
  height: auto;
  max-width: 100%;
}

.about__section {
  display: flex;
  flex-direction: column;
  gap: var(--spacing-16);
  margin-top: 0;
}

.about__section-heading {
  font-family: var(--font-display);
  font-size: var(--text-heading-sm);
  line-height: var(--leading-heading-sm);
  font-weight: var(--font-weight-medium);
}

.about__rows {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-8);
}

.about__row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--spacing-16);
  padding-bottom: var(--spacing-8);
  border-bottom: 1px solid var(--color-hairline);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
  color: var(--color-ink);
}

.about__detail {
  font-weight: var(--font-weight-regular);
}

.about__org {
  font-weight: var(--font-weight-bold);
}

.about__slash {
  font-family: var(--font-body);
  font-weight: var(--font-weight-regular);
}

.about__year {
  margin-left: auto;
  text-align: right;
  white-space: nowrap;
  font-weight: var(--font-weight-regular);
}

/* Site footer */

.site-footer {
  background: var(--color-footer-ink);
  color: var(--color-cream);
  scroll-margin-top: var(--header-height);
}

.case ~ .site-footer {
  position: relative;
  z-index: 11;
}

.site-footer__hero {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 240px;
  overflow: hidden;
  background: var(--color-footer-ink);
}

.site-footer__photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 72% 42%;
  pointer-events: none;
}

.site-footer__content {
  position: relative;
  z-index: 1;
  display: flex;
  max-width: 520px;
  flex-direction: column;
  align-items: flex-start;
  gap: 18px;
  padding-block: var(--spacing-40);
}

.site-footer__heading {
  font-family: var(--font-display);
  font-size: var(--text-heading-lg);
  font-stretch: var(--font-display-width);
  font-weight: var(--font-weight-regular);
  line-height: var(--leading-heading-lg);
  color: var(--color-cream);
}

.site-footer__copy {
  max-width: 520px;
  color: var(--color-cream);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.site-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--spacing-16);
}

.site-footer__icon {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 53px;
  height: 53px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-pills);
  background: var(--color-cream);
  color: var(--color-ink);
  text-decoration: none;
  cursor: pointer;
  transition: background-color var(--duration-fast) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
  .site-footer__icon:hover {
    background: var(--color-star);
  }
}

.site-footer__icon:focus-visible {
  background: var(--color-star);
}

.site-footer__icon .btn__icon {
  width: 20px;
  height: 20px;
}

.site-footer__icon .btn__glyph--copy {
  width: 15px;
  height: 12px;
}

.site-footer__icon .btn__glyph--check {
  width: 14px;
  height: 14px;
}

.site-footer__icon-img {
  display: block;
  width: 20px;
  height: 20px;
}

.site-footer__icon[aria-disabled="true"]:not([data-tip]) {
  cursor: default;
  pointer-events: none;
}

.site-footer__links[data-cursor-tips] .site-footer__icon[data-tip]::after {
  content: none;
}

.site-footer__cursor-tip {
  position: fixed;
  left: 0;
  top: 0;
  z-index: 10000;
  padding: var(--spacing-8) var(--spacing-12);
  background: var(--color-star);
  color: var(--colour-primary);
  font-family: var(--font-body);
  font-size: var(--text-caption);
  font-weight: var(--font-weight-regular);
  letter-spacing: 0;
  line-height: var(--leading-caption);
  text-transform: none;
  white-space: nowrap;
  border-radius: 2px;
  opacity: 0;
  transform: scale(0.12, 0.28);
  transform-origin: 0% 0%;
  pointer-events: none;
  transition:
    opacity var(--duration-fast) var(--ease-standard),
    transform var(--duration-tip-roll) var(--ease-tip-roll),
    border-radius var(--duration-tip-roll) var(--ease-tip-roll);
}

.site-footer__cursor-tip.is-visible {
  opacity: 1;
  transform: scale(1, 1);
  border-radius: var(--radius-buttons);
}

.site-footer__cursor-tip.is-flip-x {
  transform-origin: 100% 0%;
}

.site-footer__bar {
  display: flex;
  align-items: center;
  box-sizing: border-box;
  min-height: var(--chrome-bar-height);
  background: var(--color-footer-ink);
  padding: 0;
}

.site-footer__bar-inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-12) var(--spacing-24);
}

.site-footer__hope {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  cursor: pointer;
}

.site-footer__hope:hover .site-footer__hope-text,
.site-footer__hope:focus .site-footer__hope-text,
.site-footer__hope:focus-visible .site-footer__hope-text {
  text-decoration: underline;
  text-decoration-color: var(--color-cream);
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}

.site-footer__hope:focus {
  outline: none;
}

.site-footer__hope:focus-visible {
  outline: 2px solid var(--color-cream);
  outline-offset: 4px;
}

.site-footer__hope-arrow {
  display: block;
  width: 9px;
  height: 9px;
  flex-shrink: 0;
}

.site-footer__credit {
  margin: 0;
  color: var(--color-cream);
  font-family: var(--font-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-bold);
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
}

@media (min-width: 768px) {
  .site-footer__hero {
    height: 361px;
    min-height: 361px;
  }
}

@media (max-width: 767px) {
  .site-footer__bar-inner {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (prefers-reduced-motion: reduce) {
  .site-footer__icon {
    transition: none;
  }

  .site-footer__cursor-tip {
    transition: none;
    transform: none;
  }

  .site-footer__cursor-tip.is-visible {
    transform: none;
  }
}

/* Small screens. Desktop token values stay in tokens.css. */
@media (max-width: 767px) {
  :root {
    --text-heading-lg: 32px;
    --leading-heading-lg: 1.15;
    --text-heading-sm: 22px;
    --leading-heading-sm: 1.2;
  }

  .case-head__title,
  .work-card__title,
  .about__heading,
  .site-footer__heading,
  .case-section h2 {
    text-wrap: balance;
  }

  .hero__intro {
    font-size: var(--text-subheading);
  }

  .hero__greeting {
    font-size: clamp(2rem, 10cqi, 2.5rem);
  }

  .page--snap .hero {
    padding-block-start: calc(var(--header-height) + var(--spacing-32));
  }

  .site-header :is(button.btn--mail) {
    font-size: 0;
    gap: 0;
    padding: 8px;
  }

  .about.wrap {
    --about-portrait-optical-shift: -10%;
  }

  .site-footer .wrap {
    width: min(var(--approach-max), calc(100% - var(--page-gutter) * 2));
  }

  .site-footer__credit {
    text-wrap: balance;
  }

  .site-footer__bar {
    padding-top: var(--spacing-32);
    padding-bottom: max(var(--spacing-32), env(safe-area-inset-bottom, 0px));
  }

  .site-footer__photo {
    object-position: 70% 50%;
  }

  .work-grid {
    gap: var(--spacing-40);
  }

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

/* HIGH HOPES 3000 */

.hope-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(440px, calc(100vw - var(--spacing-24) * 2));
  max-height: min(92vh, 900px);
  margin: 0;
  padding: var(--spacing-28) var(--spacing-24) var(--spacing-24);
  border: 1px solid color-mix(in srgb, var(--color-footer-ink) 12%, transparent);
  border-radius: var(--radius-cards);
  background: var(--color-cream);
  color: var(--color-ink);
  font-family: var(--font-body);
  box-shadow: var(--shadow-gate);
  overflow: auto;
}

.hope-dialog[data-state="loading"],
.hope-dialog[data-state="photo"] {
  width: min(520px, calc(100vw - var(--spacing-24) * 2));
}

.hope-dialog::backdrop {
  background: color-mix(in srgb, var(--color-footer-ink) 72%, transparent);
}

.hope-dialog [hidden] {
  display: none !important;
}

.hope-dialog__close {
  position: absolute;
  top: var(--spacing-12);
  right: var(--spacing-12);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-buttons);
  background: var(--color-paper);
  color: var(--color-ink);
  cursor: pointer;
}

.hope-dialog__close svg {
  display: block;
}

.hope-dialog__welcome {
  text-align: center;
  padding: var(--spacing-12) var(--spacing-12) var(--spacing-4);
}

.hope-dialog__kicker {
  margin: 0 0 var(--spacing-8);
  color: var(--color-ink-muted);
  font-family: var(--font-mono);
  font-size: var(--text-mono);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-mono);
  line-height: 1;
  text-transform: uppercase;
}

.hope-dialog__title {
  margin: 0 0 var(--spacing-12);
  color: var(--color-label-accent);
  font-family: var(--font-display);
  font-weight: var(--font-weight-medium);
  font-size: var(--text-heading-sm);
  font-stretch: var(--font-display-width);
  line-height: var(--leading-heading-sm);
}

.hope-dialog__copy {
  margin: 0;
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.hope-dialog__copy + .hope-dialog__copy {
  margin-top: var(--spacing-8);
}

.hope-dialog__error {
  margin: var(--spacing-12) 0 0;
  color: var(--color-error);
  font-size: var(--text-body);
  line-height: var(--leading-body);
}

.hope-flower {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: var(--spacing-16) 0 0;
  padding: var(--spacing-8);
  border: 0;
  background: transparent;
  color: inherit;
  cursor: pointer;
}

.hope-flower__svg {
  display: block;
  width: 64px;
  height: 64px;
  overflow: visible;
}

.hope-flower__petal {
  fill: var(--color-ink);
}

.hope-flower__center {
  fill: var(--color-star);
  opacity: 0;
}

.hope-flower__spark {
  fill: var(--color-star);
  opacity: 0;
  transform-box: fill-box;
  transform-origin: center;
}

.hope-dialog.is-live .hope-flower__center {
  animation: hope-center-in 240ms steps(3) 200ms both;
}

.hope-dialog.is-live .hope-flower__spark {
  animation:
    logo-spark-in 360ms steps(4) var(--d) both,
    logo-spark-blink 1.6s steps(1) calc(var(--d) + 360ms) infinite;
}

.hope-flower:active .hope-flower__svg {
  transform: scale(0.8) translateY(1px);
  transition: transform 80ms steps(2);
}

.hope-dialog__loading {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 240px;
  margin: var(--spacing-12) 0 0;
  padding: var(--spacing-24);
  border-radius: var(--radius-images);
  background: var(--color-mist);
  font-family: var(--font-display);
  font-size: var(--text-subheading);
  font-stretch: var(--font-display-width);
  line-height: var(--leading-subheading);
  text-align: center;
  animation: hope-load-pulse 1.1s var(--ease-standard) infinite;
}

.hope-dialog__stage {
  position: relative;
  margin-top: var(--spacing-8);
  padding: var(--spacing-28);
}

.hope-dialog__img {
  display: block;
  width: 100%;
  max-height: min(360px, 52vh);
  object-fit: contain;
  border-radius: var(--radius-images);
  background: var(--color-mist);
  opacity: 0;
}

.hope-dialog__img.is-in {
  animation: hope-photo-in 1.4s var(--ease-standard) both;
}

.hope-dialog__sparks {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.hope-dialog__spark {
  position: absolute;
  color: var(--color-star);
  font-size: 32px;
  line-height: 1;
  animation:
    hope-spark-in 360ms steps(4) var(--d) both,
    hope-spark-blink 1.6s steps(1) calc(var(--d) + 360ms) infinite;
}

.hope-dialog__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-8);
  margin-top: var(--spacing-16);
}

.hope-dialog__save,
.hope-dialog__redo {
  font-family: var(--font-mono);
  font-weight: var(--font-weight-bold);
  letter-spacing: var(--tracking-mono);
  line-height: 1;
  text-transform: uppercase;
  cursor: pointer;
}

.hope-dialog__save {
  display: inline-flex;
  align-items: center;
  gap: var(--spacing-8);
  padding: var(--spacing-10) var(--spacing-20);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-buttons);
  background: var(--color-paper);
  color: var(--color-ink);
  font-size: var(--text-mono);
}

.hope-dialog__save svg {
  display: block;
}

.hope-dialog__save .hope-dialog__glyph--check {
  display: none;
}

.hope-dialog__save.is-saved .hope-dialog__glyph--down {
  display: none;
}

.hope-dialog__save.is-saved .hope-dialog__glyph--check {
  display: block;
}

.hope-dialog__redo {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-buttons);
  background: var(--color-star);
  color: var(--colour-primary);
}

.hope-dialog__redo svg {
  display: block;
}

@keyframes hope-center-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hope-load-pulse {
  0%,
  100% { opacity: 0.4; }
  50% { opacity: 1; }
}

@keyframes hope-photo-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }

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

@keyframes hope-spark-in {
  from {
    opacity: 0;
    transform: translate(var(--sx), var(--sy)) scale(0.2);
  }
  to {
    opacity: 1;
    transform: translate(0, 0) scale(1);
  }
}

@keyframes hope-spark-blink {
  0%,
  100% {
    opacity: 1;
    transform: scale(1);
  }
  50% {
    opacity: 0.4;
    transform: scale(0.6);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hope-dialog__loading,
  .hope-dialog.is-live .hope-flower__spark,
  .hope-dialog.is-live .hope-flower__center,
  .hope-dialog__spark,
  .hope-dialog__img.is-in,
  .hope-flower:active .hope-flower__svg {
    animation: none;
    transition: none;
    transform: none;
  }

  .hope-flower__spark,
  .hope-flower__center,
  .hope-dialog__spark,
  .hope-dialog__img,
  .hope-dialog__loading {
    opacity: 1;
  }
}