:root {
  /* Typography */

  --step--2: clamp(0.7813rem, 0.7736rem + 0.0341vw, 0.8rem);
  --step--1: clamp(0.9375rem, 0.9119rem + 0.1136vw, 1rem);
  --step-0: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --step-1: clamp(1.35rem, 1.2631rem + 0.3864vw, 1.5625rem);
  --step-2: clamp(1.62rem, 1.4837rem + 0.6057vw, 1.9531rem);
  --step-3: clamp(1.944rem, 1.7405rem + 0.9044vw, 2.4414rem);
  --step-4: clamp(2.3328rem, 2.0387rem + 1.3072vw, 3.0518rem);
  --step-5: clamp(2.7994rem, 2.384rem + 1.8461vw, 3.8147rem);
  --step-6: clamp(3.3592rem, 2.7828rem + 2.5621vw, 4.7684rem);
  --step-7: clamp(4.0311rem, 3.2418rem + 3.508vw, 5.9605rem);
  --step-8: clamp(4.8373rem, 3.7682rem + 4.7514vw, 7.4506rem);
  --step-9: clamp(5.8048rem, 4.3695rem + 6.379vw, 9.3132rem);
  --step-10: clamp(6.9657rem, 5.0529rem + 8.5015vw, 11.6415rem);

  --font-family: "Geist", "Arial";

  --primary: oklab(24.776% 0 -0.00003);
  --subtle: oklab(24.776% 0 -0.00003 / 0.502);
  --muted: oklab(24.776% 0 -0.00003 / 0.376);
  --faint: oklab(24.776% 0 -0.00003 / 0.251);

  /* Spacing */

  --space-3xs: clamp(0.3125rem, 0.3125rem + 0vw, 0.3125rem);
  --space-2xs: clamp(0.5625rem, 0.5369rem + 0.1136vw, 0.625rem);
  --space-xs: clamp(0.875rem, 0.8494rem + 0.1136vw, 0.9375rem);
  --space-s: clamp(1.125rem, 1.0739rem + 0.2273vw, 1.25rem);
  --space-m: clamp(1.6875rem, 1.6108rem + 0.3409vw, 1.875rem);
  --space-l: clamp(2.25rem, 2.1477rem + 0.4545vw, 2.5rem);
  --space-xl: clamp(3.375rem, 3.2216rem + 0.6818vw, 3.75rem);
  --space-2xl: clamp(4.5rem, 4.2955rem + 0.9091vw, 5rem);
  --space-3xl: clamp(6.75rem, 6.4432rem + 1.3636vw, 7.5rem);

  /* One-up pairs */
  --space-3xs-2xs: clamp(0.3125rem, 0.1847rem + 0.5682vw, 0.625rem);
  --space-2xs-xs: clamp(0.5625rem, 0.4091rem + 0.6818vw, 0.9375rem);
  --space-xs-s: clamp(0.875rem, 0.7216rem + 0.6818vw, 1.25rem);
  --space-s-m: clamp(1.125rem, 0.8182rem + 1.3636vw, 1.875rem);
  --space-m-l: clamp(1.6875rem, 1.3551rem + 1.4773vw, 2.5rem);
  --space-l-xl: clamp(2.25rem, 1.6364rem + 2.7273vw, 3.75rem);
  --space-xl-2xl: clamp(3.375rem, 2.7102rem + 2.9545vw, 5rem);
  --space-2xl-3xl: clamp(4.5rem, 3.2727rem + 5.4545vw, 7.5rem);

  /* Custom pairs */
  --space-s-l: clamp(1.125rem, 0.5625rem + 2.5vw, 2.5rem);
}

body {
  font-family: var(--font-family);
  color: var(--primary);
  font-size: var(--step-0);
}

/* ─── LAYER SYSTEM ─────────────────────────────────────────
   L1 + L2 live inside <main>. Main scrolls as one unit
   above the footer, which is pinned behind it.
   ─────────────────────────────────────────────────────────── */

/* CHANGED: added position, z-index, background, transform
   background is load-bearing — without it footer bleeds through */
main {
  position: relative;
  z-index: 1;
  background: #ffffff;
  transform: translate3d(
    0,
    0,
    0
  ); /* Safari: prevents z-index flicker on scroll-up */
  margin-block-end: 3rem;
}

/* ─── L1: HERO ─────────────────────────────────────────────── */

/* CHANGED: removed z-index (now lives on main), kept everything else */
.hero {
  height: 100dvh;
  padding-inline: var(--space-s);
  padding-block: var(--space-s);

  position: relative;
  /* z-index removed — main handles stacking now */
}

.hero-bg {
  border-radius: 160px 8px 8px 8px;
  width: 100%;
  height: 100%;

  background-image: url("https://res.cloudinary.com/daxz1n8bz/image/upload/v1776346849/People_Holding_Hands_xfkal1.jpg");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;

  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.hero-text {
  grid-column: 3 / 3;
  grid-row: -2 / -1;

  justify-self: end;
  align-self: end;

  padding-inline: var(--space-m);
  padding-block: var(--space-m);

  font-size: var(--step-9);
  color: white;
  letter-spacing: -6px;
}

/* ─── L2: CASE ─────────────────────────────────────────────── */

.case {
  padding-inline: var(--space-2xl-3xl);
}

/* Images */

.screens {
  display: flex;
  flex-direction: column;
  gap: 24px;
  margin-block-start: 13rem;
}

.img {
  width: 100%;
}

.case-study-header {
  max-width: 900px;
  margin-inline-end: auto;
  padding: 60px 20px 0px 20px;
}

.intro-text p {
  font-size: var(--step-1);
  margin-bottom: 60px;
  max-width: 800px;
}

.metadata-table {
  border-top: 1px solid #d1d1d1;
  margin-bottom: 80px;
}

.metadata-row {
  display: flex;
  padding: 20px 0;
  border-bottom: 1px solid #d1d1d1;
  align-items: flex-start;
}

.metadata-row .label {
  flex: 0 0 30%;
  font-weight: 500;
  color: #1a1a1a;
}

.metadata-row .value {
  flex: 1;
  color: #1a1a1a;
  font-weight: 400;
}

.summary {
  max-inline-size: 1200px;
  font-size: var(--step-1);
  margin-block-end: 40px;
}

@media (max-width: 600px) {
  .metadata-row {
    flex-direction: column;
  }
  .metadata-row .label {
    margin-bottom: 8px;
  }
}

.descriptions {
  margin-block-start: 3rem;
  border-left: 1px dashed rgba(74, 102, 112, 0.22);
  padding-inline-start: var(--space-xs);
}

.descriptions .rationale {
  font-size: var(--step-1);
  margin-block-end: 1rem;
}

/* ─── L3: FOOTER ───────────────────────────────────────────────
   CHANGED:
   - position: sticky  →  pins to bottom of viewport
   - bottom: 0         →  docks to bottom edge
   - z-index: 0        →  sits behind main (z-index: 1)
   - removed margin-block-start: 2rem  →  no gap between main and footer,
     the reveal needs them flush; any gap would show footer
     peeking before the scroll ends
   ─────────────────────────────────────────────────────────── */

footer {
  position: sticky;
  bottom: 0;
  left: 0;
  z-index: 0;

  border-top: 1px solid #e5e7eb;
  background-color: rgb(243, 246, 247);

  background-image:
    linear-gradient(#e5e7eb80 1px, transparent 1px),
    linear-gradient(90deg, #e5e7eb80 1px, transparent 1px);
  background-size: 24px 24px;
}

/* Mobile styles */

@media (max-width: 768px) {
  .hero-text {
    grid-column: 2 / 3;
    align-self: start;
  }

  .case {
    padding-inline: var(--space-s);
  }
}

.footer-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: var(--space-2xl) var(--space-l);
}

/* ── LAYOUT ─────────────────────────────────────────────────
   Mobile: stacked, brand on top.
   Desktop: side by side, both blocks aligned to the bottom.
   ─────────────────────────────────────────────────────────── */
.footer-top {
  display: flex;
  flex-direction: column;
  gap: var(--space-xl);
}

@media (min-width: 768px) {
  .footer-top {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
  }
}

/* ── BRAND: big name, muted descriptor ─────────────────────── */
.footer-brand {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}

.footer-brand h3 {
  font-size: var(--step-4);
  font-weight: 700;
  letter-spacing: -0.03em;
  line-height: 1;
  color: #1a1a1a;
  margin: 0;
}

.footer-brand p {
  font-size: var(--step-0);
  color: #888;
  line-height: 1.5;
  margin: 0;
  max-width: 28ch;
}

/* ── CONNECT: small label, big links ───────────────────────── */
.footer-nav {
  display: flex;
  flex-direction: column;
  gap: var(--space-s);
}

/* "Let's connect" — treated as a small eyebrow label, not a heading */
.nav-label {
  display: block;
  font-size: var(--step--1);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: #aaa;
}

.footer-nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}

/* Links match the visual weight of the brand name */
.footer-nav a {
  display: inline-block;
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1.2;
  color: #00000095;
  text-decoration: none;
  transition: opacity 0.15s ease;
}

.footer-nav a:hover {
  color: #0a66c2;
}