/* Primary site stylesheet for Nervure custom layout and content polish. */

:root {
  --nv-section-pad-y: 72px;
  --nv-section-pad-x: 80px;
  --nv-section-pad-y-mobile: 56px;
  --nv-section-pad-x-mobile: 40px;
  --nv-heading-gap: 24px;
  --nv-body-top-gap: 14px;
  --nv-frame-ratio: 16 / 10;
  --nv-frame-max-h-desktop: 720px;
  --nv-frame-max-h-mobile: 520px;
}

/* Hero media */
#hero .grid-layout > .background-video:first-child {
  min-height: 64vh !important;
}

#hero .grid-layout > .background-video:first-child > video {
  object-fit: contain !important;
  background-size: contain !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
}

/* Collapse inherited full-height sections from the mirrored export */
section#audiences.section-dark {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding-top: 72px !important;
  padding-bottom: 0 !important;
  margin-bottom: 0 !important;
}

section#audiences.section-dark > .container-max {
  margin-bottom: 24px !important;
}

section#audiences.section-dark .section-base,
section#audiences.section-dark section.section-dark,
section#audiences.section-dark section.section-base {
  min-height: unset !important;
  height: auto !important;
  justify-content: flex-start !important;
}

section#audiences.section-dark > section#audience-furniture.section-dark {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding: 20px 80px !important;
  margin: 0 !important;
}

section#audiences.section-dark > section#audience-furniture.section-dark > div {
  margin: 0 !important;
  padding: 0 !important;
}

section#audiences.section-dark > section#audience-engineering:not(.section-dark) {
  min-height: 0 !important;
  height: auto !important;
  padding: 0 !important;
  margin: 0 !important;
}

section#audiences.section-dark > section#audience-engineering:not(.section-dark) > .section-base {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding: 20px 80px 0 !important;
  margin: 0 !important;
}

section#contact.cta-section {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding: 72px 80px !important;
  margin-top: 0 !important;
}

section#contact.cta-section .container-max {
  margin-top: 0 !important;
}

section#about.section-base {
  min-height: 0 !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding: 72px 80px !important;
  margin: 0 !important;
}

#contact,
section#contact,
#about,
section#about {
  min-height: unset !important;
  height: auto !important;
  justify-content: flex-start !important;
  padding: 72px 80px !important;
  margin: 0 !important;
}

section#audiences.section-dark ~ section.section-base,
section#audiences.section-dark ~ section.cta-section {
  min-height: unset !important;
  height: auto !important;
  justify-content: flex-start !important;
}

/* Audience layouts */
section#audience-furniture.section-dark > div > .audience-grid {
  display: grid !important;
  grid-template-columns: minmax(420px, 1.2fr) minmax(300px, 1fr) !important;
  grid-auto-rows: min-content !important;
  row-gap: 20px !important;
  align-items: start !important;
  column-gap: clamp(28px, 4vw, 72px) !important;
  width: 100% !important;
  max-width: none !important;
}

section#audience-furniture .audience-grid > .background-video:first-child {
  grid-column: 1 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--nv-frame-ratio) !important;
  max-height: min(62vh, var(--nv-frame-max-h-desktop)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

section#audience-furniture .audience-grid > .background-video:first-child > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

section#audience-furniture .audience-grid > .h2-audience,
section#audience-furniture .audience-grid > .body-text-on-dark {
  grid-column: 2 !important;
  max-width: 62ch;
}

section#audience-furniture .audience-grid > .h2-audience {
  grid-row: 1 !important;
  position: static !important;
  margin: 0 0 12px 0 !important;
  align-self: start !important;
}

section#audience-furniture .audience-grid > .body-text-on-dark {
  grid-row: 2 !important;
  position: static !important;
  margin: 0 !important;
  align-self: start !important;
}

section#audiences.section-dark > section#audience-engineering:not(.section-dark) {
  display: block !important;
}

section#audiences.section-dark > section#audience-engineering:not(.section-dark) > .section-base {
  display: block !important;
  min-height: 0 !important;
  height: auto !important;
  padding-bottom: 56px !important;
}

/* Shared section rhythm */
section#principle,
section#process,
section#audiences,
section#contact,
section#about,
section#audiences > section#audience-furniture,
section#audiences > section#audience-engineering {
  padding-top: var(--nv-section-pad-y) !important;
  padding-bottom: var(--nv-section-pad-y) !important;
}

section#principle,
section#process,
section#audiences,
section#contact,
section#about {
  padding-left: var(--nv-section-pad-x) !important;
  padding-right: var(--nv-section-pad-x) !important;
}

section#principle .h2-light,
section#process .h2-section,
section#audiences .h2-light,
section#audience-furniture .h2-audience,
section#audience-engineering .h2-audience,
section#contact .h2-section,
section#about .h2-section {
  margin-bottom: var(--nv-heading-gap) !important;
}

section#principle .overline-light,
section#process .overline,
section#audiences .overline-light,
section#audience-furniture .overline-light,
section#audience-engineering .overline-light,
section#about .overline {
  margin-bottom: 28px !important;
}

section#principle .body-text-on-dark,
section#process .body-text,
section#audiences .body-text-on-dark,
section#audience-furniture .body-text-on-dark,
section#audience-engineering .body-text-on-dark,
section#contact .body-text-centered,
section#about .body-text,
section#about .manifesto-text {
  margin-top: var(--nv-body-top-gap) !important;
  max-width: 62ch;
}

section#process > .container-max,
section#principle > .container-max,
section#audiences > .container-max,
section#contact > .container-max,
section#about > .container-max {
  max-width: 1160px !important;
}

section#audience-engineering > .section-base > .audience-grid {
  display: grid !important;
  grid-template-columns: minmax(300px, 1fr) minmax(420px, 1.2fr) !important;
  grid-auto-rows: min-content !important;
  row-gap: 32px !important;
  align-items: start !important;
  column-gap: clamp(28px, 4vw, 72px) !important;
  width: 100% !important;
  max-width: none !important;
  min-height: 0 !important;
  padding-bottom: 0 !important;
}

section#audience-engineering > .section-base .h2-audience {
  color: var(--_nervure-tokens---text-primary) !important;
}

section#audience-engineering > .section-base .body-text-on-dark {
  color: var(--_nervure-tokens---text-secondary) !important;
}

section#audience-engineering .audience-grid > .h2-audience,
section#audience-engineering .audience-grid > .body-text-on-dark {
  grid-column: 1 !important;
  max-width: 62ch;
}

section#audience-engineering .audience-grid > .h2-audience {
  grid-row: 1 !important;
  position: static !important;
  margin: 0 0 12px 0 !important;
  align-self: start !important;
}

section#audience-engineering .audience-grid > .body-text-on-dark {
  grid-row: 2 !important;
  position: static !important;
  margin: 0 !important;
  align-self: start !important;
}

section#audience-engineering .audience-grid > .background-video:first-child {
  grid-column: 2 !important;
  grid-row: 1 / span 2 !important;
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: 0 !important;
  aspect-ratio: var(--nv-frame-ratio) !important;
  max-height: min(62vh, var(--nv-frame-max-h-desktop)) !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

section#audience-engineering .audience-grid > .background-video:first-child > video {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (max-width: 991px) {
  #hero .grid-layout > .background-video:first-child {
    min-height: 52vh !important;
  }

  section#audience-engineering > .section-base > .audience-grid {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }

  section#audiences.section-dark {
    padding-top: 56px !important;
    padding-bottom: 0 !important;
  }

  section#audiences.section-dark > section#audience-furniture.section-dark {
    padding: 16px 40px !important;
  }

  section#audiences.section-dark > section#audience-engineering:not(.section-dark) > .section-base {
    padding: 20px 40px 40px !important;
  }

  section#principle,
  section#process,
  section#audiences,
  section#contact,
  section#about,
  section#audiences > section#audience-furniture,
  section#audiences > section#audience-engineering {
    padding-top: var(--nv-section-pad-y-mobile) !important;
    padding-bottom: var(--nv-section-pad-y-mobile) !important;
  }

  section#principle,
  section#process,
  section#audiences,
  section#contact,
  section#about {
    padding-left: var(--nv-section-pad-x-mobile) !important;
    padding-right: var(--nv-section-pad-x-mobile) !important;
  }

  section#audiences.section-dark + section#contact.cta-section,
  section#contact.cta-section {
    padding: 56px 40px !important;
  }

  section#about.section-base {
    padding: 56px 40px !important;
  }

  #contact,
  #about {
    padding: 56px 40px !important;
  }

  section#audience-furniture.section-dark > div > .audience-grid {
    grid-template-columns: 1fr !important;
    row-gap: 20px !important;
  }

  section#audience-furniture .audience-grid > .background-video:first-child,
  section#audience-furniture .audience-grid > .h2-audience,
  section#audience-furniture .audience-grid > .body-text-on-dark {
    grid-column: auto !important;
    grid-row: auto !important;
  }

  section#audience-furniture .audience-grid > .background-video:first-child {
    height: auto !important;
    aspect-ratio: var(--nv-frame-ratio) !important;
    max-height: min(56vh, var(--nv-frame-max-h-mobile)) !important;
  }

  section#audience-engineering .audience-grid > .background-video:first-child,
  section#audience-engineering .audience-grid > .h2-audience,
  section#audience-engineering .audience-grid > .body-text-on-dark {
    grid-column: auto !important;
  }

  section#audience-engineering .audience-grid > .background-video:first-child {
    height: auto !important;
    aspect-ratio: var(--nv-frame-ratio) !important;
    max-height: min(56vh, var(--nv-frame-max-h-mobile)) !important;
  }
}