/* =========================================================
   PAGE — Landing 4 (Koto sticky-scroll work showcase)
   A compact hero, the work-scroll section (css/sections/
   work-scroll.css), and a contact close. Scoped under .l4-body.
   ========================================================= */

.l4-body .pr-section {
  padding: var(--space-section-y-fluid) 0;
}

.l4-wrap {
  width: var(--shell);
  margin-inline: auto;
}

/* ---- Hero ---- */
.l4-body .l4-hero {
  min-height: 64svh;
  display: grid;
  align-items: end;
  padding-bottom: var(--space-section-head);
}

.l4-hero .l4-wrap {
  display: flex;
  flex-direction: column;
  gap: var(--space-stack-lg);
}

.l4-eyebrow {
  margin: 0;
  font-size: var(--type-micro);
  font-weight: 700;
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--pr-rocket);
}

.l4-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-super);
  line-height: var(--leading-display-tight);
  letter-spacing: var(--tracking-display);
}

.l4-hero p {
  margin: 0;
  max-width: 52ch;
  font-size: var(--type-lede);
  line-height: var(--leading-body-tight);
  opacity: 0.78;
}

/* ---- Contact close ---- */
.l4-contact {
  text-align: center;
}

.l4-contact h2 {
  margin: 0 auto;
  max-width: 16ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading);
}

.l4-contact .pr-button {
  margin-top: var(--space-stack-lg);
}