/* =========================================================
   PAGE FRAME — Sub-pages (Work, Programs, Studio, Contact)
   Shared layout shell for the dedicated content pages: a tall
   title hero and consistent section rhythm. Composes global
   tokens + components; section content comes from css/sections/*.
   ========================================================= */

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

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

/* ---- Title hero ---- */
.sub-body .sub-hero {
  min-height: 72svh;
  display: grid;
  align-items: end;
  padding-bottom: var(--space-stack-xl);
}

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

.sub-hero .pr-kicker {
  color: var(--pr-rocket);
}

.sub-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);
  text-wrap: balance;
}

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

/* ---- Generic section heading ---- */
.sub-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-form-pad);
  margin-bottom: var(--space-section-head);
  max-width: 60ch;
}

.sub-head h2 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: var(--type-section-sm);
  line-height: var(--leading-display);
  letter-spacing: var(--tracking-heading-soft);
}

.sub-head p {
  margin: 0;
  line-height: var(--leading-body);
  opacity: 0.76;
}

/* ---- Lightweight intra-page next-step row ---- */
.sub-cta-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-row-md);
}