@font-face {
  font-family: "Open Sans";
  font-style: normal;
  font-weight: 300 800;
  font-stretch: 100%;
  font-display: swap;
  src: url("assets/fonts/open-sans-latin-variable.woff2") format("woff2");
}

:root {
  --green: #34c672;
  --black: #151c1e;
  --charcoal: #2d3233;
  --white: #f5f7f6;
  --muted: #aab2b1;
  --rule: rgba(245, 247, 246, 0.18);
  --page: min(1440px, calc(100vw - 64px));
  --ease: cubic-bezier(.16, 1, .3, 1);
  --raised: #1b2325;
  --paper: #eef1ef;
  --ink: #182022;
  --paper-rule: rgba(21, 28, 30, .18);

  --hero-title-size: 118px;
  --hero-body-size: 21px;
  --hero-signal-size: 22px;
  --reveal-statement-size: 96px;
  --detail-copy-size: 25px;
  --detail-logo-size: 16px;
}

* { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  background: var(--black);
  /* A dark scrollbar track, so browsers that always show scrollbars don't draw a
     grey column down the right of the page. */
  scrollbar-color: #3a4345 var(--black);
}

body {
  margin: 0;
  color: var(--white);
  background: var(--black);
  font-family: "Open Sans", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
}

::selection {
  color: var(--black);
  background: var(--green);
}

a { color: inherit; }

a:focus-visible,
button:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}

.skip-link {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 20;
  padding: 12px 16px;
  color: var(--black);
  background: var(--green);
  font-weight: 700;
  transform: translateY(-160%);
}

.skip-link:focus { transform: translateY(0); }

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

.field-bg {
  position: fixed;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}

main { position: relative; z-index: 1; }

.hero-field {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  pointer-events: none;
  opacity: .96;
}

.hero {
  position: relative;
  min-height: max(100svh, 900px);
  overflow: hidden;
  isolation: isolate;
  display: grid;
  grid-template-rows: minmax(0, 1fr) auto;
  padding-top: 104px;
  background: transparent;
}

/* Client logos riding the background wave (script.js). */
.hero-logos {
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  display: none;
  width: 100%;
  height: 100vh;
  pointer-events: none;
}

/* Wide screens: logos steer round the text. Anything smaller: a fainter stream right
   across the screen, behind the text (script.js decides which). */
.js .hero-logos { display: block; }

.hero-logos span {
  position: absolute;
  top: 0;
  left: 0;
  opacity: 0;
  will-change: transform, opacity;
}

.hero-logos img {
  display: block;
  height: 24px;
  width: auto;
  max-width: 116px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
}

.hero-logos .logo-keep-tones img { filter: grayscale(1) invert(1) brightness(1.4); }

.hero-shade {
  position: absolute;
  inset: 0;
  z-index: -2;
  background:
    linear-gradient(90deg, rgba(21, 28, 30, .99) 0%, rgba(21, 28, 30, .9) 34%, rgba(21, 28, 30, .25) 72%, rgba(21, 28, 30, .25) 100%),
    linear-gradient(180deg, rgba(21, 28, 30, .35), transparent 42%, rgba(21, 28, 30, .82));
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 30;
  width: var(--page);
  height: 104px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(21, 28, 30, .96);
  border-bottom: 1px solid var(--rule);
}

.brand {
  display: block;
  width: 132px;
  height: 44px;
  overflow: hidden;
}

.brand-crop {
  display: block;
  position: relative;
  width: 132px;
  height: 44px;
  overflow: hidden;
}

.brand img {
  position: absolute;
  width: 410px;
  max-width: none;
  left: -139px;
  top: -93px;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 30px;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.site-nav a {
  text-decoration: none;
  text-underline-offset: 7px;
}

.site-nav a:not(.nav-contact):hover { text-decoration: underline; }

.nav-contact {
  padding: 14px 18px;
  color: var(--black);
  background: var(--green);
  transition: background-color 160ms ease, transform 160ms ease;
}

.nav-contact:hover { background: #43d381; transform: translateY(-1px); }

.menu-toggle { display: none; }

.hero-layout {
  grid-row: 1;
  width: var(--page);
  min-height: 0;
  margin: 0 auto;
  display: flex;
  align-items: center;
  padding: 44px 0 40px;
}

.hero-copy { max-width: 1120px; }

/* The one scale figure. On a wide screen it sits in its own column to the right of
   the headline, sharing the baseline of "advantage.", with its label level with the
   paragraph. It counts up once on load (script.js). */
@media (min-width: 900px) {
  .hero-copy {
    flex: 1;
    max-width: none;
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    column-gap: 48px;
  }

  .hero-copy > h1,
  .hero-copy > p:not(.hero-stat),
  .hero-actions { grid-column: 1; }

  .hero-copy .hero-stat-value {
    grid-column: 2;
    grid-row: 1;
    align-self: end;
    align-self: last baseline;
    justify-self: end;
    text-align: right;
  }

  .hero-copy .hero-stat-value::before { margin-left: auto; }

  .hero-copy .hero-stat-label {
    grid-column: 2;
    grid-row: 2;
    justify-self: end;
    max-width: min(300px, 26vw);
    margin-top: 36px;
    text-align: right;
  }
}

/* Its parts sit straight in the copy grid, so the wrapper has no box of its own. */
.hero-stat { display: contents; }

.hero-stat-value {
  display: block;
  color: var(--white);
  font-size: calc(clamp(62px, 7.4vw, var(--hero-title-size)) * .75);
  font-weight: 800;
  line-height: .89;
  letter-spacing: -.04em;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.hero-stat-value::before {
  display: block;
  width: 48px;
  height: 2px;
  margin-bottom: 22px;
  background: var(--green);
  content: "";
}

/* A short word after the figure says what it counts: 33bn+ TOKENS. */
.hero-stat-unit {
  margin-left: .45em;
  color: var(--green);
  font-size: .28em;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

/* The rotating figures leave upwards and the next one rises in from below (script.js). */
.hero-stat-number {
  display: inline-block;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.hero-stat-number.is-out,
.hero-stat-label.is-out { opacity: 0; transform: translateY(-12px); }

.hero-stat-number.is-below,
.hero-stat-label.is-below { opacity: 0; transform: translateY(12px); transition: none; }

.hero-stat-label.is-rotating {
  animation: none;
  transition: opacity 420ms var(--ease), transform 420ms var(--ease);
}

.hero-stat-label {
  display: block;
  margin-top: 16px;
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.6;
  letter-spacing: .12em;
  text-transform: uppercase;
  text-wrap: balance;
}

h1 {
  max-width: none;
  margin: 0;
  font-size: clamp(62px, 7.4vw, var(--hero-title-size));
  font-weight: 800;
  line-height: .89;
  letter-spacing: -.04em;
}

.headline-accent { color: var(--green); }

/* Each headline line rises from behind its own mask. The padding keeps descenders visible. */
.hero-line {
  display: block;
  overflow: hidden;
  padding-bottom: .14em;
  margin-bottom: -.14em;
}

.hero-line > span { display: block; }

/* One-off hero entrance. Only runs when JS has flagged the page, so no-JS visitors see it static. */
.js .hero-line > span { animation: hero-rise 900ms var(--ease) both; }
.js .hero-line:nth-child(1) > span { animation-delay: 120ms; }
.js .hero-line:nth-child(2) > span { animation-delay: 200ms; }
.js .hero-line:nth-child(3) > span {
  animation: hero-rise 900ms var(--ease) 280ms both, accent-in 700ms ease 760ms both;
}
.js .hero-copy > p:not(.hero-stat) { animation: hero-fade 800ms var(--ease) 560ms both; }
.js .hero-actions { animation: hero-fade 800ms var(--ease) 680ms both; }
.js .hero-stat-value,
.js .hero-stat-label { animation: hero-fade 800ms var(--ease) 620ms both; }
.js .hero-stat-value::before { animation: rule-draw 900ms var(--ease) 760ms both; }
.js .signal-item { animation: signal-in 900ms var(--ease) both; }
.js .signal-item:nth-child(1) { animation-delay: 820ms; }
.js .signal-item:nth-child(2) { animation-delay: 920ms; }
.js .signal-item:nth-child(3) { animation-delay: 1020ms; }
.js .signal-copy::before { animation: rule-draw 900ms var(--ease) both; }
.js .signal-item:nth-child(1) .signal-copy::before { animation-delay: 1000ms; }
.js .signal-item:nth-child(2) .signal-copy::before { animation-delay: 1100ms; }
.js .signal-item:nth-child(3) .signal-copy::before { animation-delay: 1200ms; }

@keyframes hero-rise {
  from { transform: translateY(105%); }
  to { transform: none; }
}

@keyframes accent-in {
  from { color: var(--white); }
  to { color: var(--green); }
}

@keyframes hero-fade {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: none; }
}

@keyframes signal-in {
  from { opacity: 0; transform: translateX(18px); }
  to { opacity: 1; transform: none; }
}

@keyframes rule-draw {
  from { transform: scaleX(0); }
  to { transform: scaleX(1); }
}

.hero-copy > p:not(.hero-stat) {
  max-width: 650px;
  margin: 34px 0 0;
  color: #d6dcda;
  font-size: clamp(17px, 1.35vw, var(--hero-body-size));
  line-height: 1.58;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 38px;
}

.button {
  min-height: 52px;
  padding: 0 20px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 28px;
  border: 1px solid transparent;
  text-decoration: none;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  transition: color 180ms ease, background-color 180ms ease, border-color 180ms ease, transform 180ms ease;
}

.button svg {
  width: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.button-primary { color: var(--black); background: var(--green); }
.button-primary:hover { background: #43d381; transform: translateY(-2px); }

.button-secondary {
  color: var(--white);
  border-color: rgba(245, 247, 246, .35);
  background: rgba(21, 28, 30, .34);
}

.button-secondary:hover { border-color: var(--white); background: rgba(21, 28, 30, .72); }

.signal-panel {
  grid-row: 2;
  width: var(--page);
  min-height: 188px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
}

.signal-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  padding: 14px clamp(18px, 2vw, 32px);
  text-align: center;
}

.signal-item + .signal-item { border-left: 1px solid var(--rule); }

.signal-image-wrap {
  height: 70px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.signal-image {
  display: block;
  max-width: 100%;
  width: auto;
  object-fit: contain;
  mix-blend-mode: lighten;
}

.signal-image-team { height: 62px; }
.signal-image-locations { height: 70px; }
.signal-image-world { height: 64px; }

.signal-copy { min-width: 0; }

.signal-copy::before {
  display: block;
  width: min(220px, 100%);
  height: 1px;
  margin: 10px auto 9px;
  background: rgba(245, 247, 246, .16);
  content: "";
}

.signal-item strong,
.signal-item span { display: block; }

.signal-item strong {
  margin-bottom: 4px;
  color: var(--white);
  font-size: clamp(16px, 1.4vw, var(--hero-signal-size));
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  letter-spacing: .02em;
}

.signal-item span {
  color: var(--muted);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .11em;
  line-height: 1.4;
  text-transform: uppercase;
}

.pin-scrim {
  position: absolute;
  inset: 0;
  background: rgba(21, 28, 30, .58);
}

.offer {
  position: relative;
  padding-block: clamp(96px, 14vh, 168px) clamp(48px, 7vh, 88px);
}

.offer-inner {
  position: relative;
  width: var(--page);
  margin: 0 auto;
}

.offer-intro {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.reveal-statement {
  margin: 20px 0 0;
  font-size: clamp(40px, 6vw, var(--reveal-statement-size));
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.reveal-statement .word { color: var(--white); }

.offer-intro > p {
  max-width: 480px;
  margin: 0;
  color: #bdc5c3;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}

.capability-grid {
  margin: clamp(48px, 7vh, 80px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.capability {
  display: grid;
  grid-template-rows: subgrid;
  grid-row: span 3;
  align-content: start;
  padding: clamp(24px, 2.6vw, 40px);
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: rgba(21, 28, 30, .6);
  transition: opacity 520ms var(--ease), transform 720ms var(--ease), background-color 240ms ease;
}

.offer.is-enhanced .capability:not(.is-visible) {
  opacity: 0;
  transform: translateY(20px);
}

.capability:nth-child(2) { transition-delay: 90ms; }
.capability:nth-child(3) { transition-delay: 180ms; }

.capability-icon {
  display: block;
  width: 56px;
  height: 56px;
  margin-bottom: 32px;
}

.capability h3 {
  margin: 0;
  font-size: clamp(22px, 1.8vw, 28px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.capability > p {
  margin: 14px 0 0;
  color: #bdc5c3;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}

/* The field is fixed behind the whole page. Now that it runs brighter for the hero,
   hold it back under the body copy so the text stays clean. */
.what-we-do::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background: rgba(21, 28, 30, .78);
}

.what-we-do {
  position: relative;
  isolation: isolate;
}

.what-we-do-detail {
  position: relative;
  padding: clamp(64px, 9vh, 112px) 0 clamp(48px, 6vh, 84px);
}

.what-we-do-detail-inner {
  position: relative;
  width: var(--page);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: clamp(56px, 7vh, 96px);
}

.detail-showcase {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: clamp(28px, 4vh, 44px);
  text-align: left;
}

.section-eyebrow {
  margin: 0;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.workflow {
  width: 100%;
  padding-block: clamp(24px, 4vh, 48px);
}

.workflow-intro {
  max-width: 760px;
  margin-bottom: clamp(48px, 7vh, 80px);
}

.workflow-intro h3 {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.workflow-track { position: relative; }

.workflow-line {
  position: absolute;
  background: rgba(245, 247, 246, .18);
  overflow: hidden;
  pointer-events: none;
}

.workflow-line-progress {
  position: absolute;
  inset: 0;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  will-change: transform;
}

.workflow-steps {
  --workflow-gap: clamp(24px, 3vw, 48px);
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--workflow-gap);
}

.workflow-step {
  position: relative;
  padding-top: 44px;
  transition: opacity 520ms var(--ease), transform 720ms var(--ease);
}

.workflow.is-enhanced .workflow-step:not(.is-reached) {
  opacity: .3;
  transform: translateY(16px);
}

.workflow-node {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
  width: 13px;
  height: 13px;
  border: 1px solid #697270;
  background: var(--black);
  transition: border-color 360ms ease, background-color 360ms ease, box-shadow 360ms ease;
}

.workflow-step.is-reached .workflow-node {
  border-color: var(--green);
  background: var(--green);
  box-shadow: 0 0 0 7px rgba(52, 198, 114, .1);
}

.workflow-number {
  display: block;
  color: var(--green);
  font-size: 14px;
  font-weight: 800;
  letter-spacing: .1em;
}

.workflow-step h4 {
  margin: 14px 0 0;
  font-size: clamp(21px, 1.7vw, 27px);
  font-weight: 800;
  line-height: 1.12;
  letter-spacing: -.02em;
}

.workflow-step > p {
  margin: 14px 0 0;
  color: #bdc5c3;
  font-size: clamp(15px, 1.1vw, 17px);
  line-height: 1.6;
}

.engage {
  width: 100%;
  padding-block: clamp(40px, 7vh, 88px) clamp(40px, 6vh, 72px);
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: start;
  text-align: left;
}

.engage-intro h3 {
  margin: 18px 0 0;
  font-size: clamp(30px, 3.2vw, 48px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
  text-wrap: balance;
}

.engage-list {
  margin: 0;
  border-top: 1px solid var(--rule);
}

.engage-legend {
  padding: 12px 0 0;
  color: #7f8987;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.engage-row {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  gap: 24px;
  align-items: start;
  padding-block: clamp(22px, 2.8vh, 30px);
  border-bottom: 1px solid var(--rule);
}

.engage-level {
  display: flex;
  gap: 4px;
  padding-top: 8px;
}

.engage-level i {
  display: block;
  width: 12px;
  height: 12px;
  border: 1px solid #697270;
  background: transparent;
}

.engage-level i.is-on {
  border-color: var(--green);
  background: var(--green);
}

.engage-copy h4 {
  margin: 0;
  font-size: clamp(19px, 1.6vw, 24px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.engage-copy p {
  margin: 8px 0 0;
  color: #bdc5c3;
  font-size: clamp(15px, 1.15vw, 18px);
  line-height: 1.55;
}

.engage-when {
  color: #7f8987 !important;
  font-size: 14px !important;
}

.engage-row-partner h4 { color: var(--green); }

/* Stake blocks fill in one by one when the list scrolls into view. Delays are set per block in script.js. */
.engage.is-enhanced .engage-level i.is-on {
  border-color: #697270;
  background: transparent;
  transition: background-color 280ms ease var(--fill-delay, 0ms), border-color 280ms ease var(--fill-delay, 0ms);
}

.engage.is-enhanced .engage-row.is-visible .engage-level i.is-on {
  border-color: var(--green);
  background: var(--green);
}

.engage.is-enhanced .engage-row-partner h4 {
  color: var(--white);
  transition: color 400ms ease var(--fill-delay, 0ms);
}

.engage.is-enhanced .engage-row-partner.is-visible h4 { color: var(--green); }

/* Anchor targets clear the fixed header. */
#capabilities,
#how-we-work,
#work,
#engage,
#people,
#contact { scroll-margin-top: 112px; }

.closing {
  position: relative;
  padding-block: clamp(80px, 12vh, 144px);
  background: var(--black);
  border-top: 1px solid var(--rule);
}

.closing-inner {
  width: var(--page);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
}

.closing-copy h2 {
  margin: 20px 0 0;
  font-size: clamp(40px, 5.6vw, 88px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.04em;
  text-wrap: balance;
}

.closing-copy > p:not(.section-eyebrow) {
  max-width: 620px;
  margin: 24px 0 0;
  color: #bdc5c3;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.55;
}

.closing-actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 20px;
}

.closing-email {
  color: var(--white);
  font-size: clamp(18px, 1.6vw, 24px);
  font-weight: 700;
  text-decoration: none;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 4px;
  transition: border-color 180ms ease, color 180ms ease;
}

.closing-email:hover { color: var(--green); border-color: var(--green); }

.site-footer {
  position: relative;
  z-index: 1;
  background: var(--black);
  border-top: 1px solid var(--rule);
}

.footer-inner {
  width: var(--page);
  margin: 0 auto;
  padding-block: 56px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr);
  gap: clamp(40px, 6vw, 96px);
  align-items: start;
}

.footer-columns {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 40px;
}

.footer-columns .footer-brand { grid-column: 1 / -1; }

.office-map {
  margin: 0;
  max-width: 720px;
  justify-self: end;
  width: 100%;
}

.office-map-frame {
  position: relative;
  width: 100%;
}

/* The map's dots carry a higher opacity in the file so they survive being drawn
   under a pixel wide on a phone. Desktop is dialled back here to where it was. */
.office-map-frame img {
  display: block;
  width: 100%;
  height: auto;
  opacity: .58;
}

.office-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  display: flex;
  align-items: center;
  gap: 10px;
  transform: translate(-6px, -6px);
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  white-space: nowrap;
}

.office-pin i {
  position: relative;
  display: block;
  width: 12px;
  height: 12px;
  background: var(--green);
  flex: none;
}

.office-pin i::before {
  position: absolute;
  inset: -6px;
  border: 1px solid var(--green);
  content: "";
  animation: pin-ring 2400ms var(--ease) infinite;
}

.office-pin > span { padding-top: 1px; }

.office-pin-below { flex-direction: row; }

@keyframes pin-ring {
  0% { transform: scale(.6); opacity: .9; }
  70%, 100% { transform: scale(1.6); opacity: 0; }
}

.footer-brand p,
.footer-contact p {
  margin: 16px 0 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.footer-nav,
.footer-offices,
.footer-contact {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.footer-nav a,
.footer-offices a,
.footer-contact a {
  color: var(--white);
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
}

.footer-nav a:hover,
.footer-offices a:hover,
.footer-contact a:hover { color: var(--green); }

.footer-contact p { margin-top: 4px; }

.footer-offices { gap: 24px; }

.footer-offices address {
  font-style: normal;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.6;
}

.footer-offices address strong {
  display: block;
  margin-bottom: 4px;
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.footer-offices address a { display: inline-block; margin-top: 4px; font-weight: 600; }

.footer-base {
  width: var(--page);
  margin: 0 auto;
  padding-block: 20px 28px;
  border-top: 1px solid var(--rule);
}

.footer-base p {
  max-width: 900px;
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.6;
}

.footer-base p + p { margin-top: 8px; color: #7f8987; }

.people {
  position: relative;
  padding-block: clamp(72px, 11vh, 140px);
  background: var(--black);
  border-top: 1px solid var(--rule);
}

.people-inner {
  width: var(--page);
  margin: 0 auto;
}

.people-intro { max-width: 900px; }

.people-intro h2 {
  margin: 18px 0 0;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.people-intro > p:not(.section-eyebrow) {
  margin: 20px 0 0;
  color: var(--muted);
  font-size: 17px;
  line-height: 1.6;
}

.people-grid {
  margin: clamp(40px, 6vh, 64px) 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 3vw, 40px);
}

/* Text only for now, with a green rule along the top. */
.person-card {
  display: flex;
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--rule);
  border-top: 2px solid var(--green);
}

.person-copy {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
}

.person-card strong {
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 800;
  letter-spacing: -.02em;
}

.person-role {
  margin-top: 6px;
  color: var(--green);
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.person-card p {
  margin: 14px 0 0;
  color: #bdc5c3;
  font-size: 15px;
  line-height: 1.55;
}


.detail-divider {
  width: 100%;
  height: 1px;
  background: var(--rule);
}

.work {
  width: 100%;
  --work-gap: 24px;
  --work-per-view: 3;
}

.work-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-bottom: 28px;
}

.work-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}

.work-controls[hidden] { display: none; }

.work-count {
  color: var(--muted);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .12em;
  font-variant-numeric: tabular-nums;
}

.work-arrow {
  position: absolute;
  top: 50%;
  z-index: 2;
  width: 44px;
  height: 44px;
  display: grid;
  place-items: center;
  border: 1px solid rgba(245, 247, 246, .35);
  color: var(--white);
  background: var(--black);
  cursor: pointer;
  transform: translateY(-50%);
  transition: border-color 160ms ease, color 160ms ease, opacity 160ms ease, visibility 160ms;
}

.work-arrow-previous { left: -22px; }
.work-arrow-next { right: -22px; }

.work-arrow svg {
  width: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}

.work-arrow:hover { border-color: var(--green); color: var(--green); }
.work-arrow:focus-visible { outline: 3px solid var(--green); outline-offset: 3px; }
.work-arrow:disabled,
.work-arrow[hidden] { opacity: 0; visibility: hidden; pointer-events: none; }

.work-viewport { position: relative; width: 100%; }

.work-track {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  gap: var(--work-gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-behavior: smooth;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
}

.work-track::-webkit-scrollbar { display: none; }

.work-track:focus-visible {
  outline: 3px solid var(--green);
  outline-offset: 5px;
}

.case-card {
  flex: 0 0 calc((100% - var(--work-gap) * (var(--work-per-view) - 1)) / var(--work-per-view));
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--white);
  background: var(--raised);
  border: 1px solid var(--rule);
  scroll-snap-align: start;
}

.case-topline {
  min-height: 48px;
  padding: 0 24px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  transition: background-color 180ms ease, color 180ms ease, border-color 180ms ease;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.case-topline p { margin: 0; }
.case-topline p::before { color: var(--green); content: "\25A0"; margin-right: 10px; }

.case-body {
  min-height: 0;
  padding: 28px 24px 24px;
  display: flex;
  flex-direction: column;
}

.client-lockup { width: 128px; height: 38px; display: flex; align-items: center; }
.client-lockup img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: left center; filter: brightness(0) invert(1); }
.client-lockup-dark { padding: 8px 12px; background: var(--black); }

.text-lockup {
  width: max-content;
  color: var(--muted);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.25;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.text-lockup-veriphy {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--white);
  font-size: 14px;
  letter-spacing: .16em;
}

.text-lockup-veriphy span { width: 13px; height: 13px; background: var(--green); }

.case-body h3 {
  margin: 28px 0 12px;
  font-size: clamp(22px, 1.8vw, 27px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.case-body > p {
  margin: 0 0 24px;
  color: #bdc5c3;
  font-size: 15px;
  line-height: 1.55;
}

.case-visual {
  min-height: 220px;
  margin-top: auto;
  padding: 16px;
  display: grid;
  grid-template-rows: auto 1fr auto;
  color: var(--white);
  background: var(--black);
  border: 1px solid var(--rule);
  overflow: hidden;
}

.visual-label {
  display: flex;
  justify-content: space-between;
  color: #9da6a4;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.visual-label strong { color: var(--green); }

.case-visual > p {
  margin: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  color: #929c99;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.case-visual > p span { width: 3px; height: 3px; background: var(--green); }

.document-flow,
.market-chart,
.vision-grid { position: relative; min-height: 0; }

.document-flow { overflow: hidden; }

.document-page {
  position: absolute;
  width: auto;
  height: 74%;
  aspect-ratio: .76;
  border: 1px solid rgba(245,247,246,.42);
  background: repeating-linear-gradient(180deg, transparent 0 11px, rgba(245,247,246,.15) 11px 12px);
}

.page-one { top: 16%; left: 8%; opacity: .35; transform: rotate(-7deg); }
.page-two { top: 12%; left: 20%; opacity: .58; transform: rotate(-2deg); }
.page-three { top: 8%; left: 33%; background-color: #20282a; transform: rotate(4deg); }

.flow-line {
  position: absolute;
  right: 2%;
  top: 52%;
  width: 37%;
  height: 1px;
  background: var(--green);
}

.flow-node {
  position: absolute;
  right: 1%;
  width: 7px;
  height: 7px;
  border: 1px solid var(--green);
  background: var(--black);
}

.node-one { top: calc(52% - 3px); }
.node-two { top: 34%; right: 19%; }
.node-three { top: 69%; right: 19%; }

.market-chart {
  margin: 22px 2px 12px;
  display: flex;
  align-items: end;
  gap: 7px;
  border-bottom: 1px solid rgba(245,247,246,.34);
  background: repeating-linear-gradient(180deg, rgba(245,247,246,.08) 0 1px, transparent 1px 32%);
}

.market-chart i {
  position: relative;
  z-index: 1;
  flex: 1;
  height: var(--h);
  background: #57615f;
}

.market-chart i:nth-last-of-type(-n+3) { background: var(--green); }

.market-chart span {
  position: absolute;
  left: 2%;
  right: 2%;
  bottom: 36%;
  height: 1px;
  background: var(--white);
  transform: rotate(-13deg);
  transform-origin: left;
}

.vision-grid {
  margin: 20px 0 12px;
  border: 1px solid rgba(245,247,246,.16);
  background:
    linear-gradient(rgba(245,247,246,.09) 1px, transparent 1px),
    linear-gradient(90deg, rgba(245,247,246,.09) 1px, transparent 1px);
  background-size: 25% 25%;
}

.vision-grid::before,
.vision-grid::after {
  position: absolute;
  background: rgba(52,198,114,.54);
  content: "";
}

.vision-grid::before { left: 50%; top: 0; bottom: 0; width: 1px; }
.vision-grid::after { top: 50%; left: 0; right: 0; height: 1px; }

.vision-grid i {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 76%;
  aspect-ratio: 1;
  border: 1px solid rgba(52,198,114,.34);
  border-radius: 50%;
  transform: translate(-50%, -50%);
}

.target {
  position: absolute;
  z-index: 1;
  width: 16px;
  height: 16px;
  border: 1px solid var(--green);
}

.target::after { position: absolute; inset: 5px; background: var(--green); content: ""; }
.target-one { top: 22%; left: 28%; }
.target-two { top: 59%; left: 63%; }
.target-three { top: 34%; right: 12%; }

/* A fixed height, not a minimum: the rail is the last grid row on every card,
   so a label that wraps to an extra line would push that card's diagram and
   numbers out of line with the cards beside it. */
.case-metrics {
  height: 100px;
  margin: 0;
  padding: 0 24px;
  display: flex;
  color: var(--ink);
  background: var(--paper);
}

.case-metrics div {
  flex: 1;
  min-width: 0;
  padding: 14px 14px 12px 0;
  display: flex;
  flex-direction: column-reverse;
  justify-content: center;
}

.case-metrics div + div { padding-left: 18px; border-left: 1px solid var(--paper-rule); }

.case-metrics dt {
  margin-top: 6px;
  color: #56605f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.case-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(18px, 1.5vw, 24px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.work-foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px 16px;
  margin-top: 20px;
}

.work-dots {
  display: flex;
  gap: 8px;
}

/* On a phone the next card peeks in from the right, and the first time the carousel
   comes into view the cards slide left and back twice to show that it swipes. */
.work-track.is-nudging .case-card { animation: work-nudge 1.1s var(--ease) 2; }

@keyframes work-nudge {
  0%, 100% { transform: none; }
  35% { transform: translateX(-44px); }
}

.work-dots[hidden] { display: none; }

.work-dot {
  width: 32px;
  height: 24px;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}

.work-dot::before {
  display: block;
  height: 2px;
  background: rgba(245, 247, 246, .25);
  content: "";
  transition: background-color 180ms ease;
}

.work-dot[aria-selected="true"]::before { background: var(--green); }

.logo-wall { width: 100%; }

.logo-wall-title { margin-bottom: 32px; }

.marquee {
  display: flex;
  flex-direction: column;
  gap: 22px;
  overflow: hidden;
  padding-block: 28px;
  border-top: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent);
}

.marquee-track {
  display: flex;
  align-items: center;
  width: max-content;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* script.js duplicates each row's logos to make the loop, so only animate once it
   has run. Without it the row simply sits still rather than sliding into a gap. */
.js .marquee-track {
  animation: marquee-scroll var(--marquee-duration, 38s) linear infinite;
}

.js .marquee-track.is-reversed { animation-name: marquee-scroll-reverse; }

.marquee:hover .marquee-track { animation-play-state: paused; }

/* Spacing sits on every item (not flex gap) so both halves of the loop are exactly equal and the restart is seamless. */
.marquee-track li { display: flex; flex: none; align-items: center; justify-content: center; height: 48px; margin-right: clamp(48px, 6vw, 88px); }

/* Set by script.js: each logo is cropped to its visible artwork and sized to a similar visual area. */
.marquee-track li.is-fitted { overflow: hidden; }
.marquee-track li.is-fitted img { height: auto; max-width: none; }

.marquee-track img {
  display: block;
  height: 30px;
  width: auto;
  max-width: 140px;
  object-fit: contain;
  filter: grayscale(1) brightness(0) invert(1);
  opacity: .55;
  transition: opacity 180ms ease;
}

.marquee-track img:hover { opacity: 1; }

/* Marks drawn as a solid shape with knocked-out detail would turn into a blank blob with the flat white filter. */
.marquee-track .logo-keep-tones img { filter: grayscale(1) invert(1) brightness(1.4); }

@keyframes marquee-scroll {
  from { transform: translateX(0); }
  to { transform: translateX(-50%); }
}

@keyframes marquee-scroll-reverse {
  from { transform: translateX(-50%); }
  to { transform: translateX(0); }
}

/* Not enough width to keep the figure beside the headline, so it drops under the
   buttons, left aligned with them. Phones centre it (below). */
@media (max-width: 899px) {
  .hero-stat-value { margin-top: 44px; font-size: clamp(48px, 7vw, 68px); }
}

@media (max-width: 980px) {
  :root { --page: calc(100vw - 48px); }
  .workflow-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 56px; }
  .work { --work-per-view: 2; }
  .offer-intro { grid-template-columns: 1fr; gap: 24px; }
  .capability-grid { grid-template-columns: 1fr; }
  .closing-inner { grid-template-columns: 1fr; align-items: start; }
  .engage { grid-template-columns: 1fr; }
  .footer-inner { grid-template-columns: 1fr; }
  /* One column here, so cap the card or the bio stretches across the whole page. */
  .people-grid { grid-template-columns: 1fr; max-width: 580px; }
  .office-map { justify-self: start; max-width: none; }
  .office-map-frame img { opacity: .8; }
  .hero-copy { max-width: 780px; }
  .signal-item { padding-inline: 14px; }
  .signal-item strong { font-size: 16px; }
  .signal-item span { max-width: 130px; }
}

/* Five links and the button stop fitting beside the logo below about 950px, so
   tablets and narrow windows get the menu button too. */
@media (max-width: 1023px) {
  .menu-toggle {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    padding: 0;
    border: 0;
    color: var(--white);
    background: transparent;
    font: 700 11px/1 "Open Sans", Arial, sans-serif;
    letter-spacing: .1em;
    text-transform: uppercase;
  }

  .menu-lines,
  .menu-lines::before {
    display: block;
    width: 22px;
    height: 1px;
    background: currentColor;
    content: "";
    transition: transform 180ms ease;
  }

  .menu-lines::before { transform: translateY(6px); }
  .menu-toggle[aria-expanded="true"] .menu-lines { transform: rotate(45deg); }
  .menu-toggle[aria-expanded="true"] .menu-lines::before { transform: rotate(90deg); }

  .site-nav {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 4;
    display: none;
    align-items: stretch;
    gap: 0;
    padding: 16px 16px 20px;
    background: rgba(21, 28, 30, .98);
    border-bottom: 1px solid rgba(245, 247, 246, .35);
  }

  .site-nav.is-open { display: grid; }
  .site-nav a { padding: 16px; }
  .nav-contact { margin-top: 8px; text-align: center; }
}

@media (max-width: 720px) {
  :root { --page: calc(100vw - 32px); }
  .hero { grid-template-rows: auto auto; align-content: start; min-height: 0; padding: 80px 0 56px; }
  /* On a phone there is no room to keep the field to one side, so shade vertically
     behind the copy and let the field carry the lower half of the screen. */
  .hero-shade {
    background:
      linear-gradient(180deg, rgba(21, 28, 30, .86) 0%, rgba(21, 28, 30, .72) 34%, rgba(21, 28, 30, .3) 62%, rgba(21, 28, 30, .55) 100%);
  }
  .site-header { height: 80px; }
  .brand { width: 112px; height: 38px; }
  .brand-crop { width: 112px; height: 38px; }
  .brand img { width: 350px; left: -119px; top: -80px; }

  .hero-layout {
    min-height: 0;
    align-items: start;
    padding: 50px 0 28px;
  }

  .hero-stat-value { margin-top: 40px; font-size: clamp(46px, 13vw, 60px); text-align: center; }
  .hero-stat-value::before { margin: 0 auto 16px; }
  .hero-stat-label { margin-top: 12px; font-size: 11px; text-align: center; }

  h1 { font-size: clamp(42px, 11.5vw, 60px); max-width: none; }
  .hero-copy > p:not(.hero-stat) { margin-top: 26px; font-size: 17px; }
  .hero-actions { flex-direction: column; align-items: stretch; margin-top: 32px; }
  .button { width: 100%; }
  .signal-panel {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    min-height: 176px;
  }
  .signal-item {
    min-width: 0;
    display: flex;
    padding: 12px 8px;
  }
  .signal-item + .signal-item { border-left: 1px solid var(--rule); }
  .signal-image-wrap { height: 48px; }
  .signal-image-team { height: 42px; }
  .signal-image-locations { height: 48px; }
  .signal-image-world { height: 44px; }
  .signal-copy::before { margin: 7px auto 6px; }
  .signal-item strong { margin-bottom: 6px; font-size: 12px; white-space: normal; }
  .signal-item span { margin: 0; font-size: 12px; letter-spacing: .05em; }
  /* Three shorter rows, so the logos can be bigger without a long wait for a full pass. */
  .marquee { gap: 30px; }
  .marquee-track li { margin-right: 34px; }
  .marquee-track img { height: 32px; max-width: 132px; }
  .marquee-track li.is-fitted img { max-width: none; }
  .offer { padding-block: 56px 16px; }
  .offer-intro { grid-template-columns: 1fr; gap: 20px; }
  .reveal-statement { font-size: clamp(36px, 11vw, 48px); }
  .capability-grid { grid-template-columns: 1fr; margin-top: 36px; }
  .what-we-do-detail { padding: 48px 0 40px; }
  .what-we-do-detail-inner { gap: 40px; }
  .detail-showcase { gap: 24px; }
  .workflow-intro { margin-bottom: 40px; }
  .workflow-steps { grid-template-columns: 1fr; gap: 40px; }
  .workflow-step { padding: 0 0 0 38px; }
  .workflow-node { top: 4px; }
  .workflow-line-progress { transform-origin: top; }
  .people-grid { grid-template-columns: 1fr; gap: 20px; }
  .closing { padding-block: 64px; }
  .engage-row { grid-template-columns: 56px minmax(0, 1fr); gap: 16px; }
  .closing-inner { grid-template-columns: 1fr; gap: 32px; }
  .closing-actions { align-items: stretch; }
  .closing-email { align-self: flex-start; }
  .footer-inner { gap: 40px; padding-block: 40px; }
  .footer-columns { grid-template-columns: 1fr; gap: 28px; }
  .office-pin { font-size: 10px; gap: 8px; }
  .office-pin i { width: 9px; height: 9px; }
  .office-pin i::before { inset: -4px; }
  #capabilities, #how-we-work, #engage, #work, #people, #contact { scroll-margin-top: 88px; }
  .work { --work-per-view: 1; --work-gap: 12px; }
  .case-card { flex-basis: 86%; }
  .work-head { margin-bottom: 20px; }
  .case-body { padding: 20px 18px 18px; }
  .case-body h3 { margin: 18px 0 10px; font-size: 23px; }
  .case-body > p { margin-bottom: 18px; font-size: 14px; line-height: 1.5; }
  .case-visual { min-height: 140px; padding: 12px 14px; }
  .work-arrow { display: none; }
  .work-dots { gap: 6px; }
  .work-dot { width: 22px; }
  .case-metrics { padding: 0 18px; }
  .case-metrics div + div { padding-left: 12px; }
  .case-metrics dd { font-size: 20px; }
  .logo-wall-title { margin-bottom: 20px; }
  .marquee-track li { height: 46px; }
}

@media (max-height: 820px) and (min-width: 721px) {
  .hero {
    min-height: 100svh;
    grid-template-rows: minmax(0, 1fr) auto;
    padding-top: 80px;
  }

  .site-header { height: 80px; }
  .hero-layout { padding: 22px 0 18px; }
  h1 { font-size: clamp(54px, 6.5vw, 88px); }
  .hero-copy > p:not(.hero-stat) { margin-top: 20px; font-size: 16px; }
  .hero-stat-value { font-size: calc(clamp(54px, 6.5vw, 88px) * .75); }
  .hero-actions { margin-top: 26px; }
  .button { min-height: 48px; }

  .signal-panel { min-height: 148px; }
  .signal-item { padding-block: 10px; }
  .signal-image-wrap { height: 50px; }
  .signal-image-team { height: 44px; }
  .signal-image-locations { height: 50px; }
  .signal-image-world { height: 46px; }
  .signal-copy::before { margin: 6px auto; }
  .signal-item strong { margin-bottom: 3px; font-size: 16px; }
  .signal-item span { font-size: 11px; }
}

@media (max-height: 820px) and (min-width: 900px) {
  .hero-copy .hero-stat-label { margin-top: 22px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { scroll-behavior: auto !important; transition-duration: .01ms !important; }
  .js .marquee-track { animation: none; }
  .work-track { scroll-behavior: auto; }
  .work-track.is-nudging .case-card { animation: none; }
  .office-pin i::before { animation: none; opacity: .6; transform: none; }
  .js .hero-line > span,
  .js .hero-stat-value,
  .js .hero-stat-label,
  .js .hero-stat-value::before,
  .js .hero-copy > p:not(.hero-stat),
  .js .hero-actions,
  .js .signal-item,
  .js .signal-copy::before { animation: none; }
  .workflow-line-progress { transform: none !important; }
  .workflow.is-enhanced .workflow-step,
  .offer.is-enhanced .capability { opacity: 1; transform: none; }
}

/* ------------------------------------------------------------------
   Notes: the homepage strip, the index page and the article pages.
   Markup for all three is generated by tools/templates.mjs.
   ------------------------------------------------------------------ */

.notes-strip {
  position: relative;
  padding-block: clamp(72px, 11vh, 140px);
  background: var(--black);
  border-top: 1px solid var(--rule);
}

.notes-strip-inner,
.notes-index-inner {
  width: var(--page);
  margin: 0 auto;
}

.note-article-inner,
.note-cta-inner,
.note-related-inner {
  width: var(--page);
  max-width: 820px;
  margin: 0 auto;
}

.notes-strip-head {
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 32px;
  padding-bottom: 40px;
}

.notes-strip-head h2,
.notes-index h1 {
  margin: 18px 0 0;
  max-width: 18ch;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.notes-strip-link,
.note-back {
  flex-shrink: 0;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--green);
  transition: color 180ms ease;
}

.notes-strip-link:hover,
.note-back:hover { color: var(--green); }

/* The hairlines are drawn on the cards rather than showing a grid background through
   the gaps, so a short last row leaves plain background instead of a grey block. */
.note-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  border-top: 1px solid var(--rule);
  border-left: 1px solid var(--rule);
}

.note-card {
  display: flex;
  flex-direction: column;
  padding: 24px;
  border-right: 1px solid var(--rule);
  border-bottom: 1px solid var(--rule);
  background: var(--black);
  text-decoration: none;
  transition: background-color 220ms var(--ease);
}

.note-card:hover { background: var(--raised); }

.note-visual {
  display: block;
  position: relative;
  aspect-ratio: 16 / 9;
  max-height: 240px;
  overflow: hidden;
  background: var(--charcoal);
}

.note-cover {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1) contrast(1.05);
}

.note-block {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  padding: 16px 18px;
  background:
    linear-gradient(135deg, rgba(52, 198, 114, .16), transparent 58%),
    repeating-linear-gradient(135deg, rgba(245, 247, 246, .05) 0 1px, transparent 1px 12px),
    var(--charcoal);
  border-top: 2px solid var(--green);
}

.note-block-tag {
  color: var(--white);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.note-block-number {
  color: rgba(245, 247, 246, .22);
  font-size: 56px;
  font-weight: 800;
  line-height: .8;
  letter-spacing: -.04em;
}

.note-meta {
  display: flex;
  gap: 14px;
  margin-top: 22px;
  color: var(--muted);
  font-size: 13px;
  letter-spacing: .04em;
}

.note-meta span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 14px;
  background: var(--rule);
  vertical-align: -1px;
}

.note-title {
  margin-top: 14px;
  font-size: clamp(20px, 1.6vw, 24px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.note-summary {
  margin-top: 12px;
  color: #bdc5c3;
  font-size: 16px;
  line-height: 1.6;
}

.note-more {
  margin-top: auto;
  padding-top: 24px;
  color: var(--green);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.note-card:hover .note-more { color: #43d381; }

/* Index page */

.page-notes { background: var(--black); }

.notes-index { padding: 172px 0 clamp(80px, 12vh, 144px); }

.notes-index-intro {
  max-width: 62ch;
  margin: 24px 0 56px;
  color: #bdc5c3;
  font-size: clamp(17px, 1.35vw, 21px);
  line-height: 1.58;
}

.note-grid-index { grid-auto-rows: 1fr; }

/* Article page */

.note-article { padding-top: 172px; }

.note-article .section-eyebrow { margin-top: 40px; }

.note-article h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.note-article-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  margin: 24px 0 0;
  padding-bottom: 32px;
  border-bottom: 1px solid var(--rule);
  color: var(--muted);
  font-size: 14px;
  letter-spacing: .04em;
}

.note-article-meta span::before {
  content: "";
  display: inline-block;
  width: 1px;
  height: 11px;
  margin-right: 14px;
  background: var(--rule);
  vertical-align: -1px;
}

.note-placeholder {
  margin: 28px 0 0;
  padding: 16px 20px;
  border: 1px dashed rgba(245, 247, 246, .3);
  color: var(--muted);
  font-size: 14px;
}

.note-article-cover {
  width: 100%;
  margin-top: 40px;
  filter: grayscale(1) contrast(1.05);
}

.note-body { padding-block: 8px 72px; }

.note-body h2 {
  margin: 56px 0 0;
  font-size: clamp(22px, 2vw, 30px);
  font-weight: 800;
  line-height: 1.15;
  letter-spacing: -.025em;
}

.note-body h3 {
  margin: 40px 0 0;
  font-size: clamp(19px, 1.5vw, 23px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -.02em;
}

.note-body p,
.note-body li {
  color: #cbd2d0;
  font-size: 18px;
  line-height: 1.68;
}

.note-body p { margin: 20px 0 0; }
.note-body ul,
.note-body ol { margin: 20px 0 0; padding-left: 22px; }
.note-body li { margin-top: 8px; }
.note-body li::marker { color: var(--green); }
.note-body strong { color: var(--white); font-weight: 700; }

.note-body blockquote {
  margin: 36px 0 0;
  padding-left: 24px;
  border-left: 2px solid var(--green);
}

.note-body blockquote p {
  margin: 0;
  color: var(--white);
  font-size: 21px;
  line-height: 1.5;
}

.note-body code {
  padding: 2px 6px;
  background: rgba(245, 247, 246, .08);
  font-size: .92em;
}

.note-body hr {
  margin: 48px 0 0;
  border: 0;
  border-top: 1px solid var(--rule);
}

.note-body a {
  color: var(--white);
  text-decoration-color: rgba(245, 247, 246, .35);
  text-underline-offset: 4px;
}

.note-body a:hover { color: var(--green); text-decoration-color: var(--green); }

.note-cta {
  padding-block: clamp(56px, 8vh, 88px);
  border-block: 1px solid var(--rule);
}

.note-cta h2 {
  margin: 0;
  font-size: clamp(26px, 2.6vw, 38px);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.03em;
}

.note-cta p {
  max-width: 54ch;
  margin: 16px 0 28px;
  color: #bdc5c3;
  font-size: 17px;
  line-height: 1.58;
}

.note-related { padding-block: clamp(56px, 8vh, 96px); }
.note-related .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }

@media (max-width: 1080px) {
  .note-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  /* The homepage strip always carries three, which leaves one alone in two columns.
     Show the newest two here; "All notes" sits right above for the rest. */
  .notes-strip .note-card:nth-child(n + 3) { display: none; }
}

@media (max-width: 720px) {
  .notes-strip .note-card:nth-child(n + 3) { display: grid; }
}

@media (max-width: 720px) {
  .note-grid,
  .note-related .note-grid { grid-template-columns: minmax(0, 1fr); }
  .notes-strip-head { flex-direction: column; align-items: flex-start; gap: 20px; }
  .notes-index { padding-top: 132px; }
  .note-article { padding-top: 132px; }
  .note-body p, .note-body li { font-size: 17px; }

  /* Phones get compact rows: a square crop of the artwork beside the date and title.
     Full cards ran to nearly a screen each, so three of them was a long scroll. */
  .note-card {
    display: grid;
    grid-template-columns: 88px minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 16px;
    padding: 16px;
  }
  .note-visual { grid-row: 1 / span 2; width: 88px; aspect-ratio: 1; }
  .note-meta { margin-top: 0; gap: 10px; font-size: 12px; white-space: nowrap; }
  .note-meta span::before { margin-right: 10px; }
  .note-title { margin-top: 6px; font-size: 17px; line-height: 1.25; }
  .note-summary,
  .note-more { display: none; }
  .note-block { padding: 10px; }
  .note-block-tag { display: none; }
  .note-block-number { font-size: 36px; }
}

.note-cover-art { filter: none; }

.notes-index .note-back { display: inline-block; margin-bottom: 28px; }
.note-article .note-back { display: inline-block; }

/* Case studies ------------------------------------------------------------ */

.case-card-linked { position: relative; transition: border-color 180ms ease; }
.case-card-linked:hover { border-color: var(--green); }

/* Green stays an accent: it only appears while a card is being pointed at or
   focused, where it means the same thing as everywhere else on the card, live
   and active. It also makes clear that the whole card is the link. */
.case-card-linked:hover .case-topline,
.case-card-linked:focus-within .case-topline {
  color: #0d1415;
  background: var(--green);
  border-bottom-color: var(--green);
}

.case-card-linked:hover .case-topline p::before,
.case-card-linked:focus-within .case-topline p::before { color: #0d1415; }

.case-more {
  margin: 0 0 24px;
  color: var(--green);
  font-size: 13px;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  text-decoration: none;
}

.case-more::after { position: absolute; inset: 0; content: ""; }
.case-card-linked:hover .case-more { color: #43d381; }
.case-more:focus-visible { outline: none; }
.case-card-linked:focus-within { outline: 3px solid var(--green); outline-offset: 4px; }

.work-all {
  display: inline-block;
  margin-top: 28px;
  padding-bottom: 6px;
  color: var(--white);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: .04em;
  text-decoration: none;
  border-bottom: 1px solid var(--green);
  transition: color 180ms ease;
}

.work-all:hover { color: var(--green); }

/* Visual: many source systems converging into one */

.converge-field {
  position: relative;
  min-height: 0;
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 26% 34px;
  align-items: center;
}

.converge-stack { display: grid; gap: 5px; }
.converge-stack i { height: 5px; background: #57615f; }
.converge-stack i:nth-child(2) { width: 84%; }
.converge-stack i:nth-child(3) { width: 93%; }
.converge-stack i:nth-child(4) { width: 71%; }
.converge-stack i:nth-child(6) { width: 88%; }

.converge-spine { position: relative; align-self: stretch; }

.converge-spine::before {
  position: absolute;
  left: 4px;
  top: 14%;
  bottom: 14%;
  right: 50%;
  border: 1px solid var(--green);
  border-right: 0;
  content: "";
}

.converge-spine::after {
  position: absolute;
  left: 50%;
  right: 0;
  top: 50%;
  height: 1px;
  background: var(--green);
  content: "";
}

.converge-out { position: relative; width: 34px; height: 34px; border: 1px solid var(--green); }
.converge-out::after { position: absolute; inset: 10px; background: var(--green); content: ""; }

/* Visual: statement lines resolving into a summary */

.ledger-field {
  position: relative;
  min-height: 0;
  margin: 18px 0 12px;
  display: grid;
  grid-template-columns: minmax(0, 1fr) 58px;
  gap: 18px;
  align-items: center;
}

.ledger-rows { display: grid; gap: 6px; }
.ledger-rows i { height: 4px; background: #57615f; }
.ledger-rows i:nth-child(odd) { width: 92%; }
.ledger-rows i:nth-child(3) { width: 64%; }
.ledger-rows i:nth-child(5) { width: 78%; }
.ledger-rows i:nth-child(6) { width: 55%; }

.ledger-scan {
  position: absolute;
  left: 0;
  right: 76px;
  top: 50%;
  height: 1px;
  background: var(--green);
}

.ledger-scan::before,
.ledger-scan::after {
  position: absolute;
  top: -3px;
  width: 7px;
  height: 7px;
  background: var(--green);
  content: "";
}

.ledger-scan::before { left: -1px; }
.ledger-scan::after { right: -1px; }

.ledger-summary {
  height: 100%;
  display: flex;
  align-items: end;
  gap: 6px;
  border-bottom: 1px solid rgba(245, 247, 246, .34);
}

.ledger-summary i {
  flex: 1;
  height: var(--h);
  border: 1px solid var(--green);
  background: rgba(52, 198, 114, .2);
}

/* Work index and case study pages */

.work-index { padding: 172px 0 clamp(80px, 12vh, 144px); }

.work-index-inner,
.case-related-inner {
  width: var(--page);
  margin: 0 auto;
}

.work-index h1 {
  margin: 18px 0 0;
  max-width: 18ch;
  font-size: clamp(36px, 4.4vw, 64px);
  font-weight: 800;
  line-height: 1.08;
  letter-spacing: -.035em;
}

.work-index-intro {
  max-width: 58ch;
  margin: 24px 0 0;
  color: #bdc5c3;
  font-size: 18px;
  line-height: 1.6;
}

.work-index .note-back { display: inline-block; margin-bottom: 28px; }

.case-grid {
  margin: 44px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.case-grid .case-card { flex: none; }

.case-article { padding-top: 172px; }

.case-article-inner,
.case-outcomes-inner {
  width: var(--page);
  max-width: 820px;
  margin: 0 auto;
}

.case-article .note-back { display: inline-block; }
.case-article .section-eyebrow { margin-top: 40px; }

.case-article h1 {
  margin: 18px 0 0;
  font-size: clamp(34px, 4vw, 58px);
  font-weight: 800;
  line-height: 1.06;
  letter-spacing: -.035em;
}

.case-lead {
  max-width: 60ch;
  margin: 24px 0 0;
  color: #bdc5c3;
  font-size: 19px;
  line-height: 1.6;
}

.case-hero { padding-top: 44px; }

.case-hero-inner {
  width: var(--page);
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1.5fr) minmax(0, 1fr);
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.case-hero .case-visual { margin-top: 0; min-height: 268px; }

.case-hero-metrics {
  margin: 0;
  display: grid;
  align-content: center;
  background: var(--paper);
}

.case-hero-metrics div {
  padding: 20px 22px;
  display: flex;
  flex-direction: column-reverse;
}

.case-hero-metrics div + div { border-top: 1px solid var(--paper-rule); }

.case-hero-metrics dt {
  margin-top: 8px;
  color: #56605f;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
}

.case-hero-metrics dd {
  margin: 0;
  color: var(--ink);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.case-article .note-body { padding-block: 40px 64px; }

.case-outcomes {
  padding-block: clamp(48px, 7vh, 80px);
  border-top: 1px solid var(--rule);
}

.case-outcomes dl {
  margin: 28px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1px;
  background: var(--rule);
  border: 1px solid var(--rule);
}

.case-outcomes dl div { padding: 26px 22px; background: var(--black); }

.case-outcomes dt {
  color: var(--green);
  font-size: clamp(24px, 2.6vw, 34px);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.03em;
}

.case-outcomes dd {
  margin: 14px 0 0;
  color: #bdc5c3;
  font-size: 15px;
  line-height: 1.55;
}

.case-related { padding-block: clamp(56px, 8vh, 96px); }
.case-grid-related { grid-template-columns: repeat(2, minmax(0, 1fr)); margin-top: 32px; }

@media (max-width: 1080px) {
  .case-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 860px) {
  .case-hero-inner { grid-template-columns: minmax(0, 1fr); }
  .case-hero-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .case-hero-metrics div + div { border-top: 0; border-left: 1px solid var(--paper-rule); }
  .case-outcomes dl { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .case-grid,
  .case-grid-related { grid-template-columns: minmax(0, 1fr); }
  .work-index { padding-top: 132px; }
  .case-article { padding-top: 132px; }
  .case-hero-metrics { grid-template-columns: minmax(0, 1fr); }
  .case-hero-metrics div + div { border-top: 1px solid var(--paper-rule); border-left: 0; }
}