/* Shared spacing for the main pages. The hero and media dimensions stay independent. */
#main {
  --section-space: clamp(48px, 5vw, 72px);
  --section-entry-space: clamp(36px, 4vw, 56px);
}

/* A consistent rhythm between complete content sections. */
#main > :is(
  .home-introduction, .home-values, .home-montage, .home-films,
  .home-selected-references, .company-responsibility, .company-values,
  .company-location, .company-contact, .reference-gallery, .expertise-section,
  .expertise-values, .expertise-evidence, .resources-section, .download-catalog,
  .contact-team, .contact-message, .cta
) {
  padding-block: var(--section-space);
}

/* Bring the first content closer to the hero, facts band or contact strip. */
#main > :is(.hero, .aligned-hero) + :is(.reference-gallery, .expertise-section, .resources-section, .download-catalog),
#main > .home-facts + .home-introduction,
#main > .company-hero + .company-responsibility,
#main > .contact-hero + .contact-team {
  padding-top: var(--section-entry-space);
}

/* Give the opening photograph and its heading one clean starting edge. */
#main .home-introduction-grid,
#main .company-responsibility-grid,
#main .career-welcome .split {
  align-items: start;
}
#main .home-introduction-visual { align-self: start; }
#main .home-introduction-copy { padding-block: 0; }

@media (max-width: 600px) {
  #main { --section-space: 48px; --section-entry-space: 36px; }
}

/* The opening eyebrow sits on the same baseline on every main subpage. */
#main.videos-page .film-heading {
  border-top: 0;
  padding-top: 0;
}
#main.videos-page .film-heading .eyebrow {
  font-size: .8rem;
  line-height: 1.6;
}

/* Keep general contact details directly below the common section heading. */
#main.contact-page .contact-team .contact-direct {
  padding-block: 0 28px;
  margin-bottom: 40px;
}

/* A complete, clickable brochure also fits the common hero height on mobile. */
@media (max-width: 850px) {
  #main .resources-download-hero .resources-hero-copy { padding-bottom: 16px; }
  #main .resources-download-hero .text-link { margin-top: 16px; }
  #main .brochure-stage { margin-bottom: 16px; }
}
@media (min-width: 541px) and (max-width: 850px) {
  #main .brochure-stage .brochure-feature {
    grid-template-columns: 140px minmax(0, 1fr);
    padding: 20px;
    gap: 20px;
  }
  #main .brochure-stage .download-cover { max-width: 140px; }
  #main .brochure-stage h2 { font-size: 1.25rem; margin-block: 6px; }
  #main .brochure-stage .download-actions { flex-direction: row; }
  #main .brochure-stage .download-actions a { min-height: 44px; padding: 10px 14px; }
}
@media (max-width: 600px) {
  #main.contact-page .contact-team .contact-direct { margin-bottom: 32px; }
}
@media (max-width: 540px) {
  #main.videos-page .film-heading .eyebrow { font-size: .75rem; }
  #main .brochure-stage .brochure-feature { padding: 16px; gap: 8px 18px; }
}
@media (max-width: 360px) {
  #main .resources-download-hero .resources-hero-copy { padding-bottom: 12px; }
  #main .brochure-stage { margin-bottom: 8px; }
  #main .brochure-stage .brochure-feature { padding: 16px; }
  #main > .aligned-hero + section .eyebrow { align-items: flex-start; }
  #main > .aligned-hero + section .eyebrow::before {
    flex: 0 0 24px;
    margin-top: calc(.8em - 1.5px);
  }
}