/* Responsive interpretation of Müller-Brockmann's modular grid.
   Shared columns, gutters and an 8px spacing module; existing brand components remain. */
:root {
  --grid-columns: 12;
  --grid-gutter: 24px;
  --grid-margin: 32px;
  --grid-unit: 8px;
  --grid-section: 128px;
  --wrap: min(1200px, calc(100% - var(--grid-margin) * 2));
}
.wrap, .nav-inner { width: var(--wrap); }
.wrap { max-width: 1200px; }
.section, .principle, .final-cta, .company-teaser { padding-block: var(--grid-section); }
.product-intro { padding-bottom: 64px; }
.contexts { padding-bottom: var(--grid-section); }
.kicker, .company-eyebrow { margin-bottom: 24px; }
.hero-actions { gap: 24px; }
main p { text-wrap: pretty; }
.section-lead, .integration-head p, .company-teaser p,
.context-copy p, .image-copy > p, .stakeholder-copy p,
.stakeholder-heading > p, .cases-head p { line-height: 1.6; }
.product-heading, .image-layout, .integration-head, .company-teaser-inner,
.faq-layout, .team-grid, .capture-head, .cases-head, .stakeholder-heading,
.stakeholder-panel, .shared-context, .ecosystem-note, .legal-layout,
.footer-main, .context, .context:nth-child(even) {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), minmax(0, 1fr));
  column-gap: var(--grid-gutter);
  row-gap: 32px;
}
.product-heading > :first-child, .integration-head > :first-child,
.company-teaser-inner > :first-child, .capture-head > :first-child,
.cases-head > :first-child, .stakeholder-heading > :first-child { grid-column: 1 / 7; }
.product-heading > :nth-child(2), .integration-head > :nth-child(2),
.company-teaser-inner > :nth-child(2), .capture-head > :nth-child(2),
.cases-head > :nth-child(2), .stakeholder-heading > :nth-child(2) { grid-column: 8 / -1; }
.product-heading > *, .image-layout > *, .integration-head > *,
.company-teaser-inner > *, .faq-layout > *, .team-grid > *,
.stakeholder-heading > *, .stakeholder-panel > *, .footer-main > * { min-width: 0; }
.hero { padding-block: 192px 128px; }
.hero-layout { display: grid; grid-template-columns: repeat(var(--grid-columns), minmax(0,1fr)); gap: var(--grid-gutter); max-width: 1200px; }
.hero-copy { grid-column: 2 / 12; width: 100%; }
.hero h1 { margin-bottom: 32px; }
.hero-audience { margin-bottom: 32px; }
.hero-lead { max-width: 48rem; margin-bottom: 48px; }
.industry-hero, .overview-hero { padding-top: 192px; }
.industry-hero h1 { max-width: 100%; width: calc((100% - 11 * var(--grid-gutter)) / 12 * 10 + 9 * var(--grid-gutter)); margin-bottom: 32px; }
.industry-hero .hero-lead { max-width: 48rem; }
.context, .context:nth-child(even) { min-height: 560px; }
.context .context-copy, .context:nth-child(even) .context-copy {
  grid-column: 1 / 6; grid-row: 1; order: 0;
  padding: 72px 0; border-inline: 0;
}
.context .context-visual, .context:nth-child(even) .context-visual {
  grid-column: 7 / -1; grid-row: 1; order: 0; padding: 72px 24px;
}
.context:nth-child(even) .context-copy { grid-column: 8 / -1; }
.context:nth-child(even) .context-visual { grid-column: 1 / 7; }
.context-copy h3 { margin-bottom: 24px; }
.context-copy .number { margin-bottom: 40px; }
.context-copy p { max-width: 100%; }
.image-layout { padding-block: 0; border: 0; }
.image-layout > :first-child, .stakeholder-panel > :first-child { grid-column: 1 / 6; }
.image-layout > :nth-child(2), .stakeholder-panel > :nth-child(2) { grid-column: 7 / -1; }
.photo-workflow { justify-self: center; }
.integration-head { padding-block: 0; }
.principle-grid { gap: 64px; }
.principle-intro { max-width: 996px; }
.principle-copy { max-width: 792px; }
.faq-intro { grid-column: 1 / 5; }
.faq-list { grid-column: 6 / -1; }
.team-head, .capture-head, .cases-head, .stakeholder-heading { margin-bottom: 64px; }
.team-grid > :nth-child(1) { grid-column: 1 / 4; }
.team-grid > :nth-child(2) { grid-column: 4 / 7; }
.team-grid > :nth-child(3) { grid-column: 7 / -1; }
.person { width: 100%; padding-top: 24px; }
.person-image { width: 100%; max-width: 280px; margin-bottom: 24px; }
.talk-card { padding: 32px; }
.stakeholder-panel { padding-block: 64px 32px; }
.stakeholder-copy { max-width: none; }
.shared-context, .ecosystem-note { padding-block: 32px; margin-top: 32px; }
.shared-context > :first-child, .ecosystem-note > :first-child { grid-column: 1 / 6; }
.shared-context > :nth-child(2), .ecosystem-note > :nth-child(2) { grid-column: 7 / -1; }
.usecase-content { grid-template-columns: repeat(3,minmax(0,1fr)); gap: 24px; padding: 8px 0 32px; }
.directory-list { column-gap: 24px; }
.final-cta h2 { max-width: 996px; margin-bottom: 40px; }
.footer-main { padding-bottom: 64px; }
.footer-main > :first-child { grid-column: 1 / 5; }
.footer-main > :nth-child(2) { grid-column: 7 / 10; }
.footer-main > :nth-child(3) { grid-column: 10 / -1; }
.footer-main:has(> :nth-child(4)) > :nth-child(2) { grid-column: 6 / 8; }
.footer-main:has(> :nth-child(4)) > :nth-child(3) { grid-column: 8 / 10; }
.footer-main > :nth-child(4) { grid-column: 10 / -1; }
.footer-col a { max-width: 100%; }
.legal-layout { padding-block: 96px 128px; }
.legal-layout > .contents { grid-column: 1 / 4; }
.legal-copy { grid-column: 5 / -1; }
.legal-section { padding-bottom: 48px; margin-bottom: 48px; }
@media (max-width: 980px) {
  :root { --grid-columns: 8; --grid-margin: 24px; --grid-section: 96px; }
  .hero { padding-block: 160px 96px; }
  .hero-copy { grid-column: 1 / -1; }
  .industry-hero, .overview-hero { padding-top: 160px; }
  .industry-hero h1 { width: 100%; }
  .product-heading > *, .integration-head > *, .company-teaser-inner > *,
  .capture-head > *, .cases-head > *, .stakeholder-heading > *,
  .image-layout > *, .faq-layout > *, .legal-layout > .contents, .legal-copy {
    grid-column: 1 / -1 !important;
  }
  .product-heading, .capture-head, .cases-head, .stakeholder-heading { align-items: start; }
  .context, .context:nth-child(even) { min-height: auto; }
  .context .context-copy, .context:nth-child(even) .context-copy { grid-column: 1 / -1; grid-row: 1; padding-block: 48px 0; }
  .context .context-visual, .context:nth-child(even) .context-visual { grid-column: 1 / -1; grid-row: 2; padding-block: 16px 64px; }
  .context-copy p { max-width: 42rem; }
  .team-grid > :nth-child(1) { grid-column: 1 / 5; }
  .team-grid > :nth-child(2) { grid-column: 5 / -1; }
  .team-grid > :nth-child(3) { grid-column: 1 / -1; }
  .person-image { max-width: 280px; }
  .stakeholder-panel > :first-child, .shared-context > :first-child, .ecosystem-note > :first-child { grid-column: 1 / 5; }
  .stakeholder-panel > :nth-child(2), .shared-context > :nth-child(2), .ecosystem-note > :nth-child(2) { grid-column: 5 / -1; }
  .footer-main > :nth-child(odd), .footer-main:has(> :nth-child(4)) > :nth-child(3) { grid-column: 1 / 5; }
  .footer-main > :nth-child(even), .footer-main:has(> :nth-child(4)) > :nth-child(2) { grid-column: 5 / -1; }
  .legal-layout > .contents { position: static; }
}
@media (max-width: 660px) {
  :root { --grid-columns: 4; --grid-gutter: 16px; --grid-margin: 16px; --grid-section: 80px; }
  .hero { padding-block: 128px 80px; }
  .hero h1 { margin-bottom: 24px; }
  .hero-audience { margin-bottom: 24px; }
  .hero-lead { margin-bottom: 32px; }
  .hero-actions { gap: 16px; }
  .industry-hero, .overview-hero { padding-top: 128px; }
  .product-intro { padding-bottom: 48px; }
  .contexts { padding-bottom: 0; }
  .context .context-copy, .context:nth-child(even) .context-copy { padding-top: 48px; }
  .context .context-visual, .context:nth-child(even) .context-visual { padding: 0 0 48px; }
  .context-copy .number { margin-bottom: 24px; }
  .image-layout { padding-block: 0; }
  .team-head, .capture-head, .cases-head, .stakeholder-heading { margin-bottom: 40px; }
  .team-grid > *, .stakeholder-panel > *, .shared-context > *, .ecosystem-note > *,
  .footer-main > *, .footer-main:has(> :nth-child(4)) > * { grid-column: 1 / -1 !important; }
  .team-grid { row-gap: 40px; }
  .person-image { max-width: 280px; }
  .stakeholder-panel { padding-block: 32px; }
  .usecase-content { grid-template-columns: minmax(0,1fr); gap: 24px; padding: 0 0 32px 40px; }
  .legal-layout { padding-block: 48px 80px; }
  .legal-section { margin-bottom: 32px; padding-bottom: 32px; }
  .footer-main { row-gap: 32px; padding-bottom: 48px; }
}