/* FETCH
   Layout, type scale, spacing and motion follow morpho.org's system: a fluid
   rem where 1rem is one design pixel at a 1440 canvas, a 12 column grid, a
   deliberately small type scale, and grain-fade dividers between sections.
   FK Grotesk and Untitled Sans are licensed, so the faces here are Geist and
   Geist Mono, the closest free neo-grotesques.
   ------------------------------------------------------------------------- */

/* 1rem = one design pixel. Everything below is written in design pixels. */
html { font-size: 1.16667px; }
@media (max-width: 1680px) { html { font-size: 0.0694445vw; } }
@media (max-width: 1280px) { html { font-size: 0.0833333vw; } }
@media (max-width: 767px)  { html { font-size: 1px; } }

html {
  --bg: #121212;
  --bg-panel: #181818;
  --bg-secondary: #222529;

  --c-primary: #fff;
  --c-secondary: #ffffff80;
  --c-tertiary: #ffffff40;
  --c-dim: #ffffff26;
  --c-extra-dim: #ffffff0d;
  --c-body: #9c9d9f;
  --c-border-1: #212121;
  --c-border-2: #424242;

  --accent: #63e6a0;

  --header-height: 80rem;
  --grid-column-count: 12;
  --grid-margin-size: 64rem;
  --grid-gutter-size: 32rem;
  --grid-column-size: 80rem;

  --spacing-XS: 12rem;
  --spacing-S: 24rem;
  --spacing-M: 40rem;
  --spacing-L: 60rem;
  --spacing-XL: 80rem;
  --spacing-XXL: 200rem;

  --ease: cubic-bezier(.36, .2, .07, 1);

  color: var(--c-primary);
  background-color: var(--bg);
  overflow: hidden auto;
  scroll-behavior: smooth;
}

@media (max-width: 1280px) {
  html {
    --grid-column-count: 8;
    --grid-margin-size: 40rem;
    --grid-gutter-size: 32rem;
    --grid-column-size: 112rem;
  }
}

@media (max-width: 767px) {
  html {
    --header-height: 68rem;
    --grid-column-count: 2;
    --grid-margin-size: 16rem;
    --grid-gutter-size: 16rem;
    --grid-column-size: calc((100vw - 32rem - 16rem) / 2);
    --spacing-M: 24rem;
    --spacing-L: 40rem;
    --spacing-XL: 60rem;
    --spacing-XXL: 100rem;
  }
}

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

body {
  margin: 0;
  font-family: Geist, -apple-system, BlinkMacSystemFont, 'Helvetica Neue', sans-serif;
  font-size: 16rem;
  font-weight: 400;
  line-height: 160%;
  -webkit-font-smoothing: antialiased;
  background-color: var(--bg);
}

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

h1, h2, h3, h4, p, dl, dd, figure { margin: 0; }

ul, ol { margin: 0; padding: 0; list-style: none; }

::selection { background: var(--accent); color: #000; }

/* --- type ---------------------------------------------------------------- */

.t-title { font-size: 32rem; font-weight: 300; line-height: 120%; letter-spacing: -0.01em; }
.t-big   { font-size: 60rem; font-weight: 300; line-height: 110%; letter-spacing: -0.015em; }
.t-panel { font-size: 20rem; font-weight: 400; line-height: 160%; }
.t-body  { font-size: 16rem; font-weight: 400; line-height: 160%; color: var(--c-secondary); }
.t-small { font-size: 14rem; font-weight: 400; line-height: 160%; }
.mono    { font-family: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, monospace; }

@media (max-width: 767px) {
  .t-title { font-size: 24rem; }
  .t-big   { font-size: 32rem; }
  .t-panel { font-size: 16rem; }
  .t-body  { font-size: 14rem; }
}

/* --- layout -------------------------------------------------------------- */

.centered {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--grid-margin-size);
}

.section { position: relative; z-index: 0; }

.section-inner { max-width: 1680px; margin: 0 auto; padding: 120rem 0; }

@media (max-width: 767px) { .section-inner { padding: 60rem 0; } }

.cols-6 {
  width: calc(var(--grid-column-size) * 6 + var(--grid-gutter-size) * 5);
  margin: 0 auto;
  text-align: center;
}

@media (max-width: 1280px) { .cols-6 { width: 100%; padding: 0 var(--grid-margin-size); } }

/* The grain fade that closes every section. */
.grain {
  position: absolute;
  inset: auto 0 0;
  height: var(--spacing-XXL);
  z-index: -1;
  pointer-events: none;
}

.grain::before {
  content: '';
  position: absolute;
  inset: 1px 0 0;
  background-color: #777;
  background-image: url(../assets/noise.png);
  background-repeat: repeat-x;
  background-size: auto 100%;
}

.grain::after {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#121212 0%, #121212fc 20%, #121212fa 30%, #121212ed 100%);
}

/* --- header -------------------------------------------------------------- */

.header {
  position: fixed;
  inset: 0 0 auto;
  height: var(--header-height);
  z-index: 20;
  display: flex;
  align-items: center;
  transition: transform .5s var(--ease), background-color .3s linear;
}

.header::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(#121212cc, #12121200);
  opacity: 0;
  transition: opacity .3s linear;
  pointer-events: none;
}

.header.is-scrolled::before { opacity: 1; }
.header.is-hidden { transform: translateY(-100%); }

.header .centered {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-S);
}

.brand { display: flex; align-items: center; gap: 10rem; }
.brand-mark {
  width: 26rem;
  height: auto;
  display: block;
  /* The mark carries its own soft shadow, so it needs no extra treatment. */
}
.brand span { font-size: 16rem; letter-spacing: .14em; font-weight: 400; white-space: nowrap; }

.nav { display: flex; align-items: center; gap: var(--spacing-S); }

.nav a {
  font-size: 16rem;
  color: var(--c-secondary);
  transition: color .3s var(--ease);
}

.nav a:hover { color: var(--c-primary); }

@media (max-width: 767px) { .nav .nav-link { display: none; } }

/* --- buttons ------------------------------------------------------------- */

.btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 4rem;
  height: 44rem;
  padding: 0 var(--spacing-S);
  border-radius: 22rem;
  border: 0;
  font-family: inherit;
  font-size: 16rem;
  line-height: 100%;
  color: var(--c-primary);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  overflow: hidden;
  background: var(--c-dim);
  transition: background-color .4s var(--ease);
}

.btn:hover { background: var(--c-tertiary); }

.btn-primary { background: var(--accent); color: #0b0f0c; }
.btn-primary:hover { background: #7ff0b4; }

.btn-ghost {
  height: 24rem;
  padding: 0;
  border-radius: 0;
  background: none;
  color: var(--c-secondary);
  transition: color .4s var(--ease);
}

.btn-ghost:hover { background: none; color: var(--c-primary); }

@media (max-width: 767px) { .btn { height: 40rem; border-radius: 20rem; font-size: 14rem; } }

/* The label slides up and is replaced by its twin on hover. */
.btn .labels { height: 22rem; overflow: hidden; }

.btn .label {
  display: block;
  transition: transform .4s var(--ease), opacity .4s var(--ease);
}

.btn .label:last-child { opacity: 0; }
.btn:hover .label { transform: translateY(-100%); }
.btn:hover .label:first-child { opacity: 0; }
.btn:hover .label:last-child { opacity: 1; }

/* --- hero ---------------------------------------------------------------- */

.hero { position: relative; z-index: 0; overflow: hidden; }

.hero-canvas { position: fixed; inset: 0; pointer-events: none; }

.hero-layer {
  position: relative;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start;
}

/* The canvas is the hero's first child, so the opening layer is marked
   explicitly rather than selected by position. */
.hero-layer-1 {
  height: calc(100vh - var(--header-height));
  height: calc(100dvh - var(--header-height));
  margin-top: var(--header-height);
}

.hero-layer-3 { height: 66vh; }

.hero-content {
  position: relative;
  margin: 7vh auto 0;
  max-width: calc(var(--grid-column-size) * 8 + var(--grid-gutter-size) * 7);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--spacing-S);
  text-align: center;
}

.hero-values {
  width: 100%;
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--grid-margin-size) 32rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
}

.values { display: flex; align-items: flex-start; gap: 0 var(--spacing-L); }

.value { display: flex; flex-direction: column; gap: 4rem; }

.value-title { font-size: 16rem; color: var(--c-secondary); }

.value-number { font-size: 20rem; line-height: 160%; height: 1.2em; }

.value-number .unit { color: var(--c-secondary); }

.scroll-button {
  font-size: 16rem;
  color: var(--c-secondary);
  transition: color .2s ease-out;
}

.scroll-button:hover { color: var(--c-primary); }

@media (max-width: 767px) {
  .hero-values { flex-direction: column; align-items: flex-start; gap: var(--spacing-S); }
  .values { flex-wrap: wrap; gap: 12rem var(--spacing-S); }
  .value-title { font-size: 14rem; }
  .value-number { font-size: 16rem; }
  .scroll-button { display: none; }
}

/* Middle layer: a fixed, centred statement the sphere passes behind. */
.hero-fixed {
  position: fixed;
  inset: 0;
  margin: auto;
  height: 100%;
  max-width: calc(var(--grid-column-size) * 5 + var(--grid-gutter-size) * 4);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 20rem;
  text-align: center;
  pointer-events: none;
  opacity: 0;
}

@media (max-width: 767px) { .hero-fixed { max-width: 280rem; } }

/* --- panels -------------------------------------------------------------- */

.panels-section { padding-bottom: var(--spacing-XXL); }

.panels-container {
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 calc(var(--grid-margin-size) + var(--grid-column-size));
}

@media (max-width: 1280px) { .panels-container { padding: 0 var(--grid-margin-size); } }

.panels-title { width: calc(var(--grid-column-size) * 4 + var(--grid-gutter-size) * 5); margin: 0 auto; text-align: center; }
.panels-subtitle { width: calc(var(--grid-column-size) * 5 + var(--grid-gutter-size) * 4); margin: var(--spacing-S) auto 0; text-align: center; color: var(--c-secondary); }

@media (max-width: 1280px) {
  .panels-title, .panels-subtitle { width: 100%; padding: 0 var(--grid-margin-size); }
}

.panels { display: flex; flex-direction: column; gap: var(--spacing-XL); margin-top: var(--spacing-L); }

@media (max-width: 767px) { .panels { gap: var(--spacing-S); margin-top: var(--spacing-M); } }

.panel {
  display: flex;
  align-items: stretch;
  min-height: 500rem;
  background-color: var(--bg-panel);
  border-radius: 16rem;
  overflow: hidden;
}

.panel-image-left { flex-direction: row-reverse; }

.panel-content {
  display: flex;
  flex-direction: column;
  width: 50%;
  flex: 0 0 50%;
  padding-bottom: 48rem;
}

.panel-content-padded { padding: 48rem 48rem 0; }

.panel-step { font-size: 14rem; color: var(--c-tertiary); margin-bottom: var(--spacing-XS); }

.panel-description { margin-top: 8rem; color: var(--c-body); font-size: 20rem; line-height: 160%; }

.panel-button { display: flex; flex-grow: 1; align-items: flex-end; justify-content: flex-start; margin-top: var(--spacing-S); padding: 0 48rem; }

.panel-media { position: relative; width: 50%; flex: 0 0 50%; z-index: 0; }

.panel-media-bg { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; }

/* The photograph sits over the gradient, which stays as the fallback if the
   image never loads. A scrim keeps the figures on top readable. */
.panel-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
  filter: saturate(.85) contrast(1.02);
}

.panel-media::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(180deg, #1212120d 0%, #12121259 45%, #121212e0 100%);
  pointer-events: none;
}

/* A media half with nothing sitting on it does not need to be darkened, only
   tied into the panel edge. */
.panel-media-plain::after {
  background: linear-gradient(90deg, #12121200 55%, #12121266 100%);
}

.panel-image-left .panel-media-plain::after {
  background: linear-gradient(270deg, #12121200 55%, #12121266 100%);
}

.panel-media-plain .panel-photo { filter: saturate(.95) contrast(1.02); }

.panel-figure {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* Sit low, so the tiles never cover the animal's face. */
  justify-content: flex-end;
  gap: var(--spacing-XS);
  padding-bottom: var(--spacing-M);
}

@media (max-width: 767px) {
  .panel { flex-direction: column-reverse; min-height: unset; }
  .panel-content, .panel-media { width: 100%; flex: none; }
  .panel-content { padding-bottom: 40rem; }
  .panel-content-padded { padding: var(--spacing-L) 20rem 0; }
  .panel-description { font-size: 16rem; }
  .panel-button { padding: 0 20rem; }
  .panel-media { height: 66vw; }
}

/* Tiles inside a panel's media half. */
.tiles { display: flex; gap: 8rem; }

.tile {
  width: 150rem;
  height: 110rem;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  border-radius: 8rem;
  /* Sits over a photograph, so it needs to darken rather than lighten. */
  background-color: #12121299;
  border: .5px solid #ffffff1f;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: background-color .2s ease-out, border-color .2s ease-out;
}

.tile:hover { background-color: #121212cc; border-color: #ffffff40; }

.tile-value { font-size: 20rem; }
.tile-label { font-size: 14rem; color: var(--c-secondary); }

@media (max-width: 767px) { .tile { width: 120rem; height: 100rem; } }

/* --- recipient ----------------------------------------------------------- */

.disclosure {
  max-width: calc(var(--grid-column-size) * 6 + var(--grid-gutter-size) * 5);
  margin: var(--spacing-M) auto 0;
  padding: 0 var(--grid-margin-size);
  font-size: 14rem;
  line-height: 170%;
  color: var(--c-tertiary);
  text-align: center;
}

@media (max-width: 1280px) { .disclosure { max-width: 100%; } }

/* --- verify -------------------------------------------------------------- */

.verify {
  width: calc(var(--grid-column-size) * 8 + var(--grid-gutter-size) * 7);
  margin: var(--spacing-M) auto 0;
  padding: var(--spacing-S);
  border: .5px solid var(--c-dim);
  border-radius: 16rem;
}

@media (max-width: 1280px) { .verify { width: calc(var(--grid-column-size) * 6 + var(--grid-gutter-size) * 7); } }
@media (max-width: 767px) { .verify { width: auto; margin: var(--spacing-M) var(--grid-margin-size) 0; } }

.verify-title { font-size: 16rem; }
.verify-body { margin-top: 6rem; font-size: 14rem; color: var(--c-secondary); max-width: 62ch; }

.verify-pre {
  margin: var(--spacing-S) 0 0;
  padding: 14rem 16rem;
  border-radius: 8rem;
  background-color: var(--bg-secondary);
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 12rem;
  line-height: 190%;
  color: var(--c-secondary);
  overflow-x: auto;
  white-space: pre;
}

.verify-pre .cmd { color: var(--c-primary); }
.verify-pre .cm { color: var(--c-tertiary); }

/* --- code ---------------------------------------------------------------- */

.code-block {
  position: relative;
  width: calc(var(--grid-column-size) * 8 + var(--grid-gutter-size) * 7);
  margin: var(--spacing-M) auto;
  padding: var(--spacing-S);
  background-color: var(--bg-secondary);
  border-radius: 16rem;
}

@media (max-width: 1280px) { .code-block { width: calc(var(--grid-column-size) * 6 + var(--grid-gutter-size) * 7); } }
@media (max-width: 767px) { .code-block { width: auto; margin: var(--spacing-M) var(--grid-margin-size); } }

.code-tab { font-size: 16rem; }
.code-source-link { position: absolute; top: var(--spacing-S); right: var(--spacing-S); }

.code-pre {
  display: block;
  position: relative;
  max-height: 400rem;
  margin-top: var(--spacing-S);
  overflow: auto;
  font-family: 'Geist Mono', ui-monospace, monospace;
  font-size: 13rem;
  line-height: 180%;
  tab-size: 4;
}

@media (max-width: 767px) { .code-pre { max-height: 280rem; font-size: 11rem; } }

.code-pre::-webkit-scrollbar { width: 8px; height: 8px; }
.code-pre::-webkit-scrollbar-thumb { background: #ffffff4d; border-radius: 4px; }
.code-pre::-webkit-scrollbar-thumb:hover { background: #ffffff80; }

.code-line { display: flex; }

.code-num {
  position: sticky;
  left: 0;
  padding-right: var(--spacing-S);
  color: #fff9;
  background-color: var(--bg-secondary);
  user-select: none;
  text-align: right;
  min-width: 44rem;
}

.tok-key { color: #c792ea; }
.tok-str { color: #c3e88d; }
.tok-com { color: #6b7280; font-style: italic; }
.tok-num { color: #f78c6c; }
.tok-fn  { color: #82aaff; }

.code-facts {
  display: flex;
  justify-content: center;
  gap: var(--spacing-XL);
  margin-top: var(--spacing-M);
  flex-wrap: wrap;
}

.code-fact { text-align: center; }
.code-fact dt { font-size: 14rem; color: var(--c-secondary); }
.code-fact dd { font-size: 16rem; margin-top: 4rem; }

/* --- orders -------------------------------------------------------------- */

.orders-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--spacing-S);
  max-width: 1680px;
  margin: 0 auto;
  padding: 0 var(--grid-margin-size);
}

.orders-wrap {
  max-width: 1680px;
  margin: var(--spacing-M) auto 0;
  padding: 0 var(--grid-margin-size);
}

/* index | product | total | status | when + tx */
.orders-columns,
.order-row {
  display: grid;
  grid-template-columns: 48rem minmax(0, 1fr) 140rem 120rem 220rem;
  gap: var(--spacing-S);
  align-items: start;
}

.orders-columns {
  padding: 12rem 20rem;
  background-color: var(--c-extra-dim);
  border-radius: 8rem;
  font-size: 12rem;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--c-tertiary);
}

.order-row {
  padding: var(--spacing-S) 20rem;
  border-bottom: .5px solid var(--c-dim);
  transition: background-color .2s ease-out;
}

.order-row:hover { background-color: var(--c-extra-dim); }

.order-row .idx { font-size: 14rem; color: var(--c-tertiary); padding-top: 3rem; }

.order-row .product {
  font-size: 16rem;
  line-height: 150%;
  color: var(--c-primary);
  text-decoration: underline;
  text-decoration-color: var(--c-dim);
  text-underline-offset: 3rem;
  transition: text-decoration-color .2s ease-out;
}

.order-row .product:hover { text-decoration-color: var(--accent); }

.order-row .qty { color: var(--c-secondary); text-decoration: none; }

.order-row .ref { display: block; margin-top: 6rem; font-size: 13rem; color: var(--c-tertiary); }
.order-row .ship { display: block; margin-top: 2rem; font-size: 13rem; color: var(--c-secondary); }

.order-row .amount { font-size: 16rem; padding-top: 2rem; }

.pill {
  display: inline-flex;
  align-items: center;
  height: 24rem;
  padding: 0 10rem;
  border-radius: 12rem;
  font-size: 13rem;
  line-height: 1;
  background-color: var(--c-extra-dim);
  color: var(--c-secondary);
}

.pill-paid { background-color: #63e6a01f; color: var(--accent); }
.pill-cancelled { background-color: #ffffff0d; color: var(--c-tertiary); }
.pill-created { background-color: #ffffff14; color: var(--c-secondary); }

.order-when { text-align: right; }
.order-when .date { display: block; font-size: 14rem; color: var(--c-secondary); }

.order-when .tx {
  display: inline-block;
  margin-top: 10rem;
  font-size: 13rem;
  color: var(--accent);
  text-decoration: underline;
  text-decoration-color: #63e6a040;
  text-underline-offset: 3rem;
}

.order-when .tx:hover { text-decoration-color: var(--accent); }
.order-when .no-tx { display: block; margin-top: 10rem; font-size: 13rem; color: var(--c-tertiary); }

.orders-empty {
  margin: 0;
  padding: var(--spacing-XL) 20rem;
  text-align: center;
  color: var(--c-secondary);
  border-bottom: .5px solid var(--c-dim);
}

@media (max-width: 1280px) {
  .orders-columns, .order-row { grid-template-columns: 40rem minmax(0, 1fr) 120rem 110rem 180rem; }
}

@media (max-width: 767px) {
  .orders-columns { display: none; }
  .order-row {
    grid-template-columns: 30rem minmax(0, 1fr) auto;
    row-gap: 10rem;
    padding: var(--spacing-S) 0;
  }
  .order-row .amount { grid-column: 3; text-align: right; }
  .order-row .status { grid-column: 2; }
  .order-when { grid-column: 3; text-align: right; }
  .order-when .date { font-size: 13rem; }
}

/* --- status slots -------------------------------------------------------- */

.slots {
  display: flex;
  flex-wrap: wrap;
  width: calc(var(--grid-column-size) * 10 + var(--grid-gutter-size) * 11);
  margin: var(--spacing-XL) auto 0;
  overflow: hidden;
}

@media (max-width: 1280px) { .slots { width: 100%; padding: 0 var(--grid-margin-size); } }

.slot {
  --border: .5px solid var(--c-dim);
  position: relative;
  width: 25%;
  aspect-ratio: 3;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6rem;
  text-align: center;
  padding: 0 12rem;
}

.slot:nth-child(4n+2), .slot:nth-child(4n+3), .slot:nth-child(4n+4) { border-left: var(--border); }
.slot:nth-child(n+5) { border-top: var(--border); }

.slot-label { font-size: 14rem; color: var(--c-secondary); }
.slot-value { font-size: 16rem; }
.slot-value.is-pending { color: var(--c-tertiary); }
.slot-value.is-live { color: var(--accent); }

@media (max-width: 767px) {
  .slots { width: 100%; }
  .slot { width: 50%; aspect-ratio: 2; }
  .slot:nth-child(4n+3) { border-left: none; }
  .slot:nth-child(n+3) { border-top: var(--border); }
}

/* --- cta + footer -------------------------------------------------------- */

.cta-actions { display: flex; justify-content: center; gap: var(--spacing-XS); margin-top: var(--spacing-M); }

.footer { padding: var(--spacing-XL) 0 var(--spacing-L); }

.footer-grid {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr 1fr;
  gap: var(--spacing-M);
  padding-bottom: var(--spacing-XL);
}

.footer h4 { font-size: 14rem; color: var(--c-secondary); font-weight: 400; margin-bottom: var(--spacing-XS); }
.footer li { margin-bottom: 8rem; }
.footer li a { font-size: 16rem; color: var(--c-primary); transition: opacity .2s; }
.footer li a:hover { opacity: .6; }

.footer-credits {
  padding-top: var(--spacing-S);
  font-size: 13rem;
  line-height: 180%;
  color: var(--c-tertiary);
}

.footer-credits a { text-decoration: underline; text-decoration-color: var(--c-dim); text-underline-offset: 3rem; }
.footer-credits a:hover { text-decoration-color: var(--c-secondary); }

.footer-bottom {
  display: flex;
  justify-content: space-between;
  gap: var(--spacing-S);
  padding-top: var(--spacing-S);
  border-top: .5px solid var(--c-dim);
  font-size: 14rem;
  color: var(--c-tertiary);
}

@media (max-width: 767px) {
  .footer-grid { grid-template-columns: 1fr 1fr; }
  .footer-bottom { flex-direction: column; }
}

/* --- motion -------------------------------------------------------------- */

/* Headline lines are masked and pushed up from below as they enter. */
.split-line { display: block; overflow: hidden; }
.split-line > span {
  display: inline-block;
  transform: translateY(110%);
  transition: transform 1s var(--ease);
}
.is-revealed .split-line > span { transform: translateY(0); }
.split-line:nth-child(2) > span { transition-delay: .08s; }
.split-line:nth-child(3) > span { transition-delay: .16s; }

.reveal {
  opacity: 0;
  transform: translateY(20rem);
  transition: opacity .8s var(--ease), transform .8s var(--ease);
}

.reveal.is-revealed { opacity: 1; transform: none; }
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .split-line > span { transition: none; opacity: 1; transform: none; }
}