@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Neue Montreal";
  src: url("./fonts/NeueMontreal-Bold.otf") format("opentype");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Migra";
  src: url("./fonts/Migra-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Migra";
  src: url("./fonts/Migra-Extrabold.otf") format("opentype");
  font-weight: 800;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Migra Italic";
  src: url("./fonts/MigraItalic-Italic.otf") format("opentype");
  font-weight: 400;
  font-style: italic;
  font-display: swap;
}

:root {
  --bg: #eaedef;
  --text: #1e1e1e;
  --black: #000000;
  --page-width: 100%;
  --gutter: 56px;
  --topbar-h: 96px;
}

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

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--bg);
  color: var(--text);
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: inherit;
  text-decoration: none;
}

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

.page {
  position: relative;
  min-height: 100vh;
  overflow-x: clip;
  background: var(--bg);
}

.page-home {
  background: var(--bg);
}

.home-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  width: 100%;
  /* Pull under the sticky topbar so the crystal can sit full-bleed without cutting tips */
  margin-top: calc(var(--topbar-h) * -1);
  padding-top: var(--topbar-h);
  min-height: 80vh;
  min-height: 80dvh;
  overflow: clip;
  background: var(--bg);
}

.home-hero::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 48%;
  pointer-events: none;
  z-index: 1;
  background: linear-gradient(
    180deg,
    rgba(234, 237, 239, 0) 0%,
    rgba(234, 237, 239, 0.35) 45%,
    rgba(234, 237, 239, 0.85) 78%,
    var(--bg) 100%
  );
}

.bg-crystal,
.bg-grain {
  position: absolute;
  pointer-events: none;
  z-index: 0;
}

/*
  Side crop locked at 148% (outer crystals clipped).
  Anchored from the top — never vertically centered — so tips stay intact;
  extra height clips at the bottom into the fade toward Projects.
*/
.bg-crystal {
  --mx: 50%;
  --my: 50%;
  --reveal: 0px;
  --color-opacity: 0;
  top: 0;
  left: 50%;
  width: 148%;
  height: auto;
  aspect-ratio: 2894 / 1080;
  opacity: 0.58;
  mix-blend-mode: multiply;
  transform: translate3d(calc(-47.6% + var(--parallax-x, 0px)), var(--parallax-y, 0px), 0);
  -webkit-mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.15) 84%,
    transparent 100%
  );
  mask-image: linear-gradient(
    180deg,
    #000 0%,
    #000 42%,
    rgba(0, 0, 0, 0.5) 65%,
    rgba(0, 0, 0, 0.15) 84%,
    transparent 100%
  );
}

.bg-crystal-gray,
.bg-crystal-color,
.bg-crystal-color img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.bg-crystal-gray {
  position: relative;
  inset: auto;
  display: block;
  object-fit: cover;
  object-position: 47.6% 50%;
  filter: blur(2px);
  /* Punch a hole under the color reveal so dark edges never stack */
  -webkit-mask-image: radial-gradient(
    circle var(--reveal) at var(--mx) var(--my),
    transparent 0%,
    transparent var(--feather-soft, 22%),
    rgba(0, 0, 0, 0.45) var(--feather-mid, 48%),
    #000 var(--feather-hard, 72%),
    #000 100%
  );
  mask-image: radial-gradient(
    circle var(--reveal) at var(--mx) var(--my),
    transparent 0%,
    transparent var(--feather-soft, 22%),
    rgba(0, 0, 0, 0.45) var(--feather-mid, 48%),
    #000 var(--feather-hard, 72%),
    #000 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  transition: -webkit-mask-image 520ms ease, mask-image 520ms ease;
}

@property --reveal {
  syntax: "<length>";
  inherits: true;
  initial-value: 0px;
}

@property --mx {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

@property --my {
  syntax: "<percentage>";
  inherits: true;
  initial-value: 50%;
}

.bg-crystal-color {
  opacity: var(--color-opacity, 0);
  -webkit-mask-image: radial-gradient(
    circle var(--reveal) at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.88) var(--feather-core, 8%),
    rgba(0, 0, 0, 0.55) var(--feather-soft, 28%),
    rgba(0, 0, 0, 0.22) var(--feather-mid, 52%),
    rgba(0, 0, 0, 0.06) var(--feather-hard, 78%),
    transparent 100%
  );
  mask-image: radial-gradient(
    circle var(--reveal) at var(--mx) var(--my),
    #000 0%,
    rgba(0, 0, 0, 0.88) var(--feather-core, 8%),
    rgba(0, 0, 0, 0.55) var(--feather-soft, 28%),
    rgba(0, 0, 0, 0.22) var(--feather-mid, 52%),
    rgba(0, 0, 0, 0.06) var(--feather-hard, 78%),
    transparent 100%
  );
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}

.bg-crystal-color img {
  object-fit: cover;
  object-position: 47.6% 50%;
}

.bg-grain {
  display: none;
}

.bg-crystal img,
.bg-grain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: 47.6% 50%;
}

.topbar {
  position: sticky;
  top: 0;
  left: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: none;
  height: var(--topbar-h);
  margin: 0;
  padding: 32px var(--gutter);
  background: rgba(234, 237, 239, 0.5);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.topbar-work {
  width: 100%;
  max-width: none;
  background: rgba(234, 237, 239, 0.5);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

.brand-name {
  font-size: 24px;
  letter-spacing: 0.24px;
  line-height: normal;
  white-space: nowrap;
}

.brand-mark {
  position: relative;
  width: 31px;
  height: 42px;
  overflow: hidden;
  flex-shrink: 0;
}

.brand-mark img {
  position: absolute;
  width: 160%;
  height: 120%;
  left: -30%;
  top: -10%;
  max-width: none;
  object-fit: cover;
}

.menu {
  display: flex;
  align-items: center;
  gap: 16px;
}

.nav-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 2px 8px 4px;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.3px;
  text-align: center;
  white-space: nowrap;
  border-bottom: 1px solid transparent;
  transition:
    opacity 160ms ease,
    border-color 160ms ease,
    color 160ms ease;
}

.nav-btn:hover,
.nav-btn:focus-visible {
  opacity: 0.55;
  outline: none;
}

.nav-btn.is-active {
  border-bottom-color: var(--black);
}

.nav-btn .nav-dot {
  display: none;
}

.nav-btn.is-current {
  flex-direction: column;
  height: auto;
  min-height: 32px;
  padding-bottom: 0;
  font-weight: 700;
  border-bottom-color: transparent;
}

.nav-btn.is-current .nav-dot {
  display: block;
}

.nav-btn-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  line-height: 26px;
}

.nav-dot {
  display: block;
  width: 4px;
  height: 4px;
  flex-shrink: 0;
}

.nav-dot img {
  width: 4px;
  height: 4px;
  max-width: none;
}

.page-work {
  background: var(--bg);
}

.page-case {
  background: #ffffff;
}

.work-list {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding-top: 0;
  background: #ffffff;
  scroll-margin-top: var(--topbar-h);
}

.page-home .work-list {
  position: relative;
  z-index: 2;
  padding-top: 0;
  background: var(--bg);
  box-shadow: 0 -24px 48px rgba(30, 30, 30, 0);
  transition: box-shadow 320ms ease;
}

.page-home .work-list.is-elevated {
  box-shadow: 0 -24px 48px rgba(30, 30, 30, 0.04);
}

.case-item {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 48px var(--gutter);
  color: inherit;
  transition: background-color 180ms ease;
}

.case-item:hover,
.case-item:focus-visible {
  background: rgba(234, 237, 239, 0.45);
  outline: none;
}

.page-home .case-item:hover,
.page-home .case-item:focus-visible {
  background: rgba(255, 255, 255, 0.55);
}

.case-item-inner {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  justify-content: space-between;
  gap: 0;
  width: 100%;
  max-width: none;
  min-width: 0;
}

.case-copy {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 24px;
  align-items: flex-start;
  max-width: 800px;
  min-width: 0;
  padding-right: 56px;
  color: var(--text);
}

.case-heading {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: flex-start;
  width: 100%;
}

.case-org {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.28px;
  line-height: normal;
  white-space: nowrap;
}

.case-title {
  margin: 0;
  font-family: "Migra", Georgia, "Times New Roman", serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 52.4px;
}

.case-product {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.18px;
  line-height: 25px;
  white-space: nowrap;
}

.case-summary {
  margin: 0;
  width: 100%;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.3px;
}

.case-summary em {
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-weight: 400;
}

.case-thumb {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  aspect-ratio: 640 / 360;
  border-radius: 8px;
  overflow: hidden;
}

.case-thumb img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: 8px;
  transition: transform 320ms ease;
}

.case-item:hover .case-thumb img,
.case-item:focus-visible .case-thumb img {
  transform: scale(1.03);
}

.site-footer {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 80px var(--gutter) 32px;
}

.site-footer p {
  margin: 0;
  font-size: 18px;
  letter-spacing: 0.18px;
  line-height: 25px;
  color: var(--text);
  white-space: nowrap;
}

.case-detail {
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding: 48px var(--gutter) 96px;
}

.case-detail-back {
  display: inline-flex;
  margin-bottom: 32px;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 26px;
  opacity: 0.7;
  transition: opacity 160ms ease;
}

.case-detail-back:hover,
.case-detail-back:focus-visible {
  opacity: 1;
  outline: none;
}

.case-detail h1 {
  margin: 0 0 12px;
  font-family: "Migra", Georgia, serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1.15;
}

.case-detail .case-product {
  margin-bottom: 24px;
}

.case-detail-note {
  max-width: 42rem;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.3px;
}

.initiatives {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin: 0 auto;
  padding-top: 24px;
}

.initiatives-grid {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  width: 100%;
  padding: 0 var(--gutter) 40px;
}

.initiatives-col {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 48px;
  align-items: stretch;
  min-width: 0;
}

.initiative-card {
  display: flex;
  flex-direction: column;
  gap: 16px;
  align-items: stretch;
  width: 100%;
}

.initiative-media {
  position: relative;
  width: 100%;
  border: 1px solid #f2f2f7;
  border-radius: 8px;
  overflow: hidden;
  background: #f2f2f7;
}

.initiative-media-tall {
  border: 0;
  border-radius: 0;
  background: transparent;
}

.initiative-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
  border-radius: inherit;
}

.initiative-labels {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 0;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}

.initiative-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
  padding-right: 4px;
  min-width: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border: 1px solid var(--black);
  border-radius: 14px;
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
  color: var(--text);
  white-space: nowrap;
}

.initiatives-disclaimer {
  margin: 0;
  width: 100%;
  padding: 0 16px;
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
  text-align: center;
  color: var(--text);
}

.page-about {
  background: var(--bg);
  min-height: 100vh;
}

.about-grain {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 720px;
  transform: none;
  pointer-events: none;
  z-index: 0;
}

.about-grain img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.about {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin: 0 auto;
}

.about-body {
  display: flex;
  gap: 32px;
  align-items: flex-start;
  width: 100%;
  padding: 24px var(--gutter) 10px;
}

.about-profile {
  position: relative;
  width: 368px;
  height: 368px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
}

.about-profile img {
  position: absolute;
  width: 179.74%;
  height: 118.95%;
  left: -44.54%;
  top: 0;
  max-width: none;
  object-fit: cover;
}

.about-copy {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 32px;
  align-items: flex-start;
  min-width: 0;
}

.about-bio {
  width: 100%;
  font-size: 24px;
  letter-spacing: 0.24px;
  line-height: 46px;
  color: var(--text);
}

.about-bio p {
  margin: 0;
}

.about-spacer {
  min-height: 46px;
}

.about-accent {
  font-family: "Migra", Georgia, "Times New Roman", serif;
  font-style: normal;
  font-weight: 400;
}

.about-links {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  flex-wrap: wrap;
}

.about-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  height: 32px;
  padding: 2px 8px 4px;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 26px;
  text-align: center;
  text-decoration: underline;
  text-underline-position: from-font;
  color: var(--text);
  white-space: nowrap;
  transition: opacity 160ms ease;
}

.about-link:hover,
.about-link:focus-visible {
  opacity: 0.55;
  outline: none;
}

.about-link-arrow {
  width: 18px;
  height: 18px;
  max-width: none;
  flex-shrink: 0;
}

.case {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  margin: 0 auto;
}

.case-intro {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 40px var(--gutter) 32px;
}

.case-intro-title {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.case-kicker {
  margin: 0;
  font-size: 24px;
  letter-spacing: 0.24px;
  line-height: normal;
}

.case-title-lg {
  margin: 0;
  font-family: "Migra", Georgia, "Times New Roman", serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 52.4px;
}

.case-subtitle {
  margin: 0;
  font-size: 28px;
  letter-spacing: 0.28px;
  line-height: normal;
}

.case-meta-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 32px;
  width: 100%;
}

.case-meta-label {
  margin: 0 0 0;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.39px;
  line-height: 23px;
}

.case-meta-body {
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
}

.case-meta-body p {
  margin: 0;
}

.case-hero {
  margin: 0;
  width: 100%;
}

.case-hero-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1280 / 557.138671875;
  overflow: hidden;
  background: #4eb8d6;
}

.case-hero-media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  max-width: none;
  object-fit: cover;
}

.case-hero figcaption,
.case-figure figcaption {
  margin: 0;
  padding: 0 16px;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  color: #757575;
}

.case-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 40px 0 0;
}

.case-section {
  width: min(100%, 780px);
  padding: 0 0 56px;
}

.case-section-wide {
  width: min(100%, 900px);
  padding-left: 0;
  padding-right: 0;
}

.case-section-wide > h2,
.case-section-wide > .case-subhead,
.case-section-wide > .case-prose,
.case-section-wide > .case-decision > .case-decision-num,
.case-section-wide > .case-decision > h3,
.case-section-wide > .case-decision > .case-prose {
  padding-left: 60px;
  padding-right: 60px;
}

.case-section-wide > .case-table-wrap {
  padding-left: 16px;
  padding-right: 16px;
}

.case-section h2 {
  margin: 0 0 8px;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 18px;
  font-weight: 400;
  letter-spacing: 0.18px;
  line-height: 25px;
}

.case-subhead {
  margin: 0 0 8px;
  font-family: "Migra", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.case-prose {
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 26px;
  color: var(--text);
}

.case-prose p,
.case-prose ul {
  margin: 0 0 26px;
}

.case-prose p:last-child,
.case-prose ul:last-child {
  margin-bottom: 0;
}

.case-prose em,
.case-prose .is-italic {
  font-style: italic;
}

.case-prose ul {
  padding-left: 22.5px;
}

.case-prose li {
  margin-bottom: 0;
}

.case-figure {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 100%;
  margin: 24px 0 40px;
}

.case-figure img,
.case-video {
  display: block;
  width: 100%;
  height: auto;
  max-width: none;
  background: #c4c4c4;
}

.case-video {
  aspect-ratio: 900 / 547;
  object-fit: cover;
}

.case-decision {
  margin: 0 0 56px;
}

.case-decision-num {
  margin: 0;
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
}

.case-decision h3 {
  margin: 0 0 16px;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.3px;
  line-height: 26px;
}

.case-impact {
  display: flex;
  gap: 16px;
  align-items: stretch;
  width: 100%;
  margin-top: 18px;
}

.case-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  padding: 40px 32px;
  border-radius: 8px;
  background: #f6f6f9;
}

.case-stat-value {
  margin: 0;
  font-family: "Migra", Georgia, serif;
  font-size: 56px;
  font-weight: 800;
  line-height: 51.4px;
}

.case-stat-label {
  margin: 0;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 26px;
  color: #757575;
  white-space: nowrap;
}

.case-stat-label span {
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
}

.case-quotes {
  display: flex;
  flex: 1 1 auto;
  gap: 16px;
  align-items: center;
  min-width: 0;
  padding: 24px;
  border-radius: 8px;
  background: #f6f6f9;
}

.case-quotes blockquote {
  display: flex;
  flex: 1 1 0;
  flex-direction: column;
  gap: 8px;
  align-items: center;
  margin: 0;
  min-width: 0;
  text-align: center;
}

.case-quotes p {
  margin: 0;
  font-family: "Migra", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.case-quotes cite {
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  color: #757575;
}

.case-footnotes {
  margin-top: 16px;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  color: #757575;
}

.case-footnotes p {
  margin: 0;
}

.case-hero-c2 .case-hero-media {
  background: #c4a027;
}

.case-hero-c3 .case-hero-media {
  background: #6fcf56;
}

.case-problem-quotes {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  margin: 16px 0 24px;
  padding: 24px;
  border-radius: 8px;
  background: #f6f6f9;
}

.case-problem-quotes blockquote {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  text-align: center;
}

.case-problem-quotes p {
  margin: 0;
  font-family: "Migra", Georgia, serif;
  font-size: 24px;
  font-weight: 400;
  line-height: normal;
}

.case-problem-quotes cite {
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  color: #757575;
}

.case-stat-banner {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0;
  width: 100%;
  margin: 18px 0 4px;
  padding: 40px 32px 24px;
  border-radius: 8px;
  background: #f6f6f9;
  text-align: center;
}

.case-stat-banner .case-stat-value {
  white-space: nowrap;
}

.case-stat-banner .case-stat-label {
  display: inline;
  white-space: normal;
}

.case-stat-banner .case-stat-label span {
  font-size: 11px;
  letter-spacing: 0.33px;
  line-height: 16px;
  vertical-align: super;
}

.case-figure-wide {
  width: min(100%, 900px);
  margin: 0 0 56px;
}

.case-figure-stack {
  gap: 4px;
}

.case-figure-stack .case-video + .case-video {
  margin-top: 0;
}

.case-prose-padded {
  margin-bottom: 24px;
}

.case-table-wrap {
  width: 100%;
  padding: 36px 16px 0;
}

.case-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

.case-table-row {
  display: grid;
  grid-template-columns: 40px 200px 340px minmax(0, 1fr);
  gap: 16px;
  padding: 8px 0;
  font-size: 13px;
  letter-spacing: 0.39px;
  line-height: 23px;
  border-bottom: 1px solid #f0f2f8;
}

.case-table-head {
  padding-bottom: 8px;
  font-weight: 700;
  border-bottom: 1px solid #dadeea;
}

.case-table-row > div:first-child,
.case-table-row > div:nth-child(2) {
  font-weight: 700;
}

.case-table-head > div {
  font-weight: 700;
}

.case-table-note {
  margin: 8px 0 0;
  font-family: "Neue Montreal", "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-style: italic;
  font-size: 11px;
  line-height: 16px;
  color: #757575;
}

.case-learn {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 8px;
  font-size: 15px;
  letter-spacing: 0.3px;
  line-height: 26px;
}

.case-learn-title {
  margin: 0;
  font-weight: 700;
}

.case-learn p {
  margin: 0;
}

.case-media-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
  width: 100%;
  margin: 0 0 40px;
}

.case-media-pair .case-figure {
  margin: 0;
}

.case-video-square {
  aspect-ratio: 1 / 1;
  object-fit: cover;
}

@media (max-width: 960px) {
  .case-item-inner {
    flex-direction: column-reverse;
    align-items: stretch;
    gap: 28px;
  }

  .case-copy {
    max-width: none;
    padding-right: 0;
  }

  .case-title {
    font-size: 32px;
    line-height: 1.2;
  }

  .case-org {
    font-size: 22px;
  }

  .case-product {
    white-space: normal;
  }

  .case-thumb {
    width: 100%;
  }

  .initiatives-grid {
    flex-direction: column;
    gap: 48px;
  }

  .chip {
    white-space: normal;
  }

  .about-body {
    flex-direction: column;
  }

  .about-profile {
    width: min(100%, 368px);
    height: auto;
    aspect-ratio: 1;
  }

  .about-bio {
    font-size: 20px;
    line-height: 1.55;
  }

  .about-spacer {
    min-height: 1.55em;
  }

  .case-meta-grid {
    grid-template-columns: 1fr 1fr;
    gap: 24px;
  }

  .case-title-lg {
    font-size: 32px;
    line-height: 1.2;
  }

  .case-subtitle {
    font-size: 22px;
  }

  .case-section,
  .case-section-wide {
    width: 100%;
    padding-left: var(--gutter);
    padding-right: var(--gutter);
  }

  .case-section-wide > h2,
  .case-section-wide > .case-subhead,
  .case-section-wide > .case-prose,
  .case-section-wide > .case-decision > .case-decision-num,
  .case-section-wide > .case-decision > h3,
  .case-section-wide > .case-decision > .case-prose {
    padding-left: 0;
    padding-right: 0;
  }

  .case-section-wide > .case-table-wrap {
    padding-left: 0;
    padding-right: 0;
    overflow-x: auto;
  }

  .case-table {
    min-width: 720px;
  }

  .case-media-pair {
    grid-template-columns: 1fr;
  }

  .case-impact,
  .case-quotes {
    flex-direction: column;
  }

  .case-stat {
    width: 100%;
  }
}

.intro {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  min-height: calc(100vh - var(--topbar-h));
  min-height: calc(100dvh - var(--topbar-h));
  margin: 0;
  padding-top: 0;
}

.home-hero .intro {
  z-index: 2;
  min-height: 80vh;
  min-height: 80dvh;
  transform: translate3d(var(--parallax-tx, 0px), var(--parallax-ty, 0px), 0);
  will-change: transform;
}

.intro-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  width: 100%;
  padding: 10px var(--gutter);
}

.headline {
  margin: 0;
  width: 100%;
  max-width: 100%;
  font-size: 40px;
  line-height: 70px;
  font-weight: 400;
  overflow-wrap: break-word;
}

.headline.spacer {
  min-height: 70px;
}

.accent {
  font-family: "Migra", Georgia, "Times New Roman", serif;
  font-size: 45px;
  line-height: 70px;
  font-style: normal;
  font-weight: 400;
}

.continue {
  display: flex;
  align-items: center;
  gap: 32px;
  width: 100%;
  padding: 80px var(--gutter) 32px;
  color: var(--black);
}

.continue-label {
  flex-shrink: 0;
  font-family: "Migra Italic", "Migra", Georgia, serif;
  font-style: italic;
  font-size: 24px;
  letter-spacing: 0.24px;
  line-height: normal;
  white-space: nowrap;
  transition: transform 220ms ease;
}

.continue-rule {
  display: flex;
  flex: 1 1 auto;
  align-items: center;
  min-width: 0;
}

.continue-line {
  display: block;
  flex: 1 1 auto;
  height: 1px;
  min-width: 48px;
  margin-right: -15px;
  background: var(--black);
  transform-origin: left center;
  transition: transform 280ms ease;
}

.continue-arrow {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 30px;
  flex-shrink: 0;
  transition: transform 280ms ease;
}

.continue-arrow img {
  width: 30px;
  height: 16px;
  max-width: none;
  transform: rotate(90deg) scaleY(-1);
}

.continue:hover .continue-label,
.continue:focus-visible .continue-label {
  transform: translateX(4px);
}

.continue:hover .continue-line,
.continue:focus-visible .continue-line {
  transform: scaleX(1.02);
}

.continue:hover .continue-arrow,
.continue:focus-visible .continue-arrow {
  transform: translateX(8px);
}

.continue:focus-visible {
  outline: none;
}

.panel {
  position: relative;
  z-index: 1;
  width: min(100%, var(--page-width));
  min-height: 70vh;
  margin: 0 auto;
  padding: 120px var(--gutter) 96px;
  scroll-margin-top: var(--topbar-h);
}

.panel h2 {
  margin: 0 0 16px;
  font-family: "Migra", Georgia, serif;
  font-size: 45px;
  font-weight: 400;
  line-height: 1.15;
}

.panel p {
  margin: 0;
  max-width: 42rem;
  font-size: 15px;
  line-height: 26px;
  letter-spacing: 0.3px;
}

@media (max-width: 960px) {
  :root {
    --gutter: 24px;
    --topbar-h: 80px;
  }

  .topbar {
    height: auto;
    min-height: var(--topbar-h);
    padding: 20px var(--gutter);
    gap: 16px;
    flex-wrap: wrap;
  }

  .menu {
    width: 100%;
    gap: 8px;
    flex-wrap: wrap;
  }

  .intro {
    min-height: 80vh;
    min-height: 80dvh;
  }

  .headline {
    font-size: 28px;
    line-height: 1.3;
  }

  .accent {
    font-size: 32px;
    line-height: 1.3;
  }

  .headline.spacer {
    min-height: 1.3em;
  }
}