.page-shell {
  width: min(100%, calc(var(--content-width) + (2 * var(--page-gutter))));
  min-height: 100vh;
  margin-inline: auto;
  padding: var(--page-block) var(--page-gutter);
}
.page-shell--home { display: flex; flex-direction: column; gap: var(--space-4); }
.home-main { display: flex; min-height: 0; flex: 1; flex-direction: column; gap: var(--space-4); }
html:has(body.home-page),
body.home-page { width: 100%; height: 100dvh; min-height: 0; max-height: 100dvh; overflow: hidden; overscroll-behavior: none; }
.page-shell--home { height: 100dvh; min-height: 0; max-height: 100dvh; overflow: hidden; }
.page-shell--interior { display: flex; flex-direction: column; }
.about-page { height: 100dvh; min-height: 0; max-height: 100dvh; overflow: hidden; }
.about-page .page-shell--interior { position: relative; height: 100dvh; min-height: 0; max-height: 100dvh; gap: clamp(.5rem, 1.25dvh, 1rem); overflow: hidden; padding-block: var(--page-block) 2rem; }
.interior-main { display: flex; width: 100%; flex: 1; flex-direction: column; justify-content: center; padding-block: 5rem; }
.interior-main h1 { margin-block: .5rem 2rem; font-size: clamp(2.75rem, 6vw, 5.5rem); }
.interior-main--about { position: relative; z-index: 2; min-height: 0; align-items: center; flex: 1; padding-block: clamp(.5rem, 1.5dvh, 1rem); }
.about-page .case-study-header,
.about-page .site-footer { position: relative; z-index: 3; }
@media (min-width: 761px) {
  .page-shell--home,
  .home-main { gap: var(--space-6); }
  .page-shell--home { height: 100dvh; min-height: 0; }
  .home-main { min-height: 0; flex: 1; }
}
@media (min-width: 761px) and (max-height: 900px) {
  .page-shell--home,
  .home-main { gap: clamp(.75rem, 2dvh, 1.5rem); }
}
@media (max-width: 760px) {
  .page-shell { padding-block: 1.5rem; }
  html:has(body.home-page),
  body.home-page { height: auto; min-height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior-y: auto; }
  .home-page .page-shell--home { height: auto; min-height: 100dvh; max-height: none; gap: 36px; overflow: visible; padding: 1.5rem 1rem max(.75rem, env(safe-area-inset-bottom)); }
  .home-main { gap: 0; }
  html:has(body.about-page),
  body.about-page { width: 100%; height: auto; min-height: 100dvh; max-height: none; overflow-x: hidden; overflow-y: auto; overscroll-behavior-x: none; overscroll-behavior-y: auto; }
  .about-page .page-shell--interior { width: 100%; height: auto; min-height: 100dvh; max-height: none; gap: 8px; overflow: visible; padding-block: 12px; }
  .interior-main--about { z-index: 2; min-height: 0; flex: none; justify-content: flex-start; overflow: visible; padding-block: 0; }
}