/* =====================================================================
   /rentals/* — the three search-intent landing pages
   =====================================================================

   One stylesheet serves rentals-audio, rentals-lighting, and
   rentals-projection: the three pages are one layout with the discipline
   swapped, and a shared file is what keeps them from drifting apart.

   The layout is deliberately the landing page's argument without its
   photography — a type-led opening in place of the photo hero, because
   no discipline photograph has been chosen through the placement
   process, and the pages must not force that decision. The catalog
   panel reuses the base readout components so the graphite object here
   is the same object as the landing rail. */

/* =====================================================================
   OPEN
   The statement. Staged line by line by the opening cue, matching the
   landing hero's grammar.
   ===================================================================== */

.rentals-open {
  padding-block: var(--space-5xl) var(--space-4xl);
}

.rentals-eyebrow {
  margin: 0 0 var(--space-lg);
  color: var(--ink-muted);
}

/* rem, not ch: a ch cap on this sans-serif page would resolve against
   the wrong font for the serif display face. */
.rentals-title {
  max-width: 34rem;
}

.rentals-lede {
  max-width: var(--measure-lede);
  margin-top: var(--space-lg);
  color: var(--ink-muted);
}

.rentals-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-2xl);
}

/* =====================================================================
   SHARED SECTION FURNITURE
   ===================================================================== */

.section-eyebrow {
  margin: 0 0 var(--space-lg);
  color: var(--ink-muted);
}

/* =====================================================================
   STOCK
   The discipline's slice of the catalog: prose beside the graphite
   panel of entry points. The panel column is capped so the copy stays
   the wider object.
   ===================================================================== */

.rentals-stock {
  padding-block: var(--space-2xl) var(--space-5xl);
}

.rentals-stock-grid {
  display: grid;
  gap: var(--space-3xl);
}

@media (min-width: 900px) {
  .rentals-stock-grid {
    grid-template-columns: minmax(0, 1fr) minmax(0, 420px);
    gap: var(--space-4xl);
    align-items: start;
  }
}

.rentals-stock-copy {
  max-width: var(--measure-prose);
}

.rentals-stock-copy .headline {
  margin-bottom: var(--space-lg);
}

/* =====================================================================
   FORK
   Where the rental stops and production begins. Ruled off like the
   landing close so it reads as a turn, not another catalog section.
   ===================================================================== */

.rentals-fork {
  padding-block: 0 var(--space-5xl);
}

.rentals-fork-inner {
  max-width: var(--measure-prose);
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--paper-300);
}

.rentals-fork-inner .headline {
  margin-bottom: var(--space-lg);
}

/* =====================================================================
   CLOSE
   Mirrors the landing close: one action, stated plainly.
   ===================================================================== */

.rentals-close {
  padding-block: 0 var(--space-5xl);
}

.rentals-close-inner {
  display: grid;
  gap: var(--space-2xl);
  align-items: end;
  padding-top: var(--space-3xl);
  border-top: 1px solid var(--paper-300);
}

@media (min-width: 900px) {
  .rentals-close-inner {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: var(--space-4xl);
  }
}

.rentals-close-lede {
  margin-top: var(--space-lg);
  color: var(--ink-muted);
}

.rentals-close-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
}