/* Match the projects page: 1800px outer container including responsive gutters.
   Sections retain full-bleed backgrounds; only their content is constrained. */
:root {
  --site-width: 1800px;
  --site-gutter: clamp(20px, 3.4vw, 64px);
  --site-edge: max(var(--site-gutter), calc((100% - var(--site-width)) / 2 + var(--site-gutter)));
}

main > :is(.section-pad, .hero, .agency-hero, .intro, .founder, .contact,
  .case-hero, .deliverables, .next, .legal-hero, .legal-layout, .thanks, .request),
main > .gallery:has(.gallery-item) {
  padding-left: var(--site-edge);
  padding-right: var(--site-edge);
}

.projects-main {
  max-width: var(--site-width);
  padding-left: var(--site-gutter);
  padding-right: var(--site-gutter);
}

/* Keep the case-study artwork inside the same bounds on large displays. */
@media (min-width: 1800px) {
  .case-hero .hero-art { right: calc(var(--site-edge) + 3vw); }
  .case-hero .case-sticker { right: var(--site-edge); }
}