/* 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 {
  position: relative !important;
  inset: auto !important;
  width: 100% !important;
  height: auto !important;
  min-height: clamp(560px, 72vh, 860px) !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden !important;
}

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

@media (min-width: 992px) {
  /* Keep the hero shot anchored when headline copy changes. */
  #hero .hero-inner {
    padding: 128px 40px 40px !important;
  }

  #hero .w-layout-grid.grid-layout.desktop-5-column.tablet-1-column.grid-gap-s {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-rows: 1fr !important;
    position: relative !important;
    height: clamp(680px, 84vh, 980px) !important;
    min-height: 0 !important;
    align-items: end !important;
    isolation: isolate !important;
    overflow: visible !important;
  }

  #hero #w-node-_9d68c7b9-ebb7-bf6b-f47c-58336c9e9fb6-9a17ca88.background-video.utility-image-cover.w-background-video.w-background-video-atom {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: end !important;
    align-self: end !important;
    position: relative !important;
    inset: auto !important;
    width: min(57.8vw, 789px) !important;
    height: auto !important;
    min-height: 0 !important;
    aspect-ratio: 1800 / 1300 !important;
    margin: 0 clamp(-72px, -4vw, -24px) clamp(28px, 3vh, 40px) 0 !important;
    padding: 0 !important;
    display: block !important;
    overflow: hidden !important;
    z-index: 0 !important;
  }

  #hero #w-node-_9d68c7b9-ebb7-bf6b-f47c-58336c9e9fb6-9a17ca88.background-video.utility-image-cover.w-background-video.w-background-video-atom > video {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    object-fit: cover !important;
    object-position: center center !important;
    transform: none !important;
    z-index: 0 !important;
  }

  #hero #w-node-cf0ace40-7373-cb9e-8320-fad056d67500-56d674fb.utility-position-relative.w-node-b1176920-5d75-509c-7b76-b7561d87ba02-9a17ca88 {
    grid-column: 1 !important;
    grid-row: 1 !important;
    justify-self: start !important;
    align-self: end !important;
    position: relative !important;
    inset: auto !important;
    width: max-content !important;
    max-width: none !important;
    margin: 0 0 clamp(-22px, -2vh, -10px) 86% !important;
    padding: 0 !important;
    overflow: visible !important;
    z-index: 1 !important;
  }

  #hero #w-node-cf0ace40-7373-cb9e-8320-fad056d67500-56d674fb.utility-position-relative.w-node-b1176920-5d75-509c-7b76-b7561d87ba02-9a17ca88 .paragraph-xl {
    max-width: 28rem !important;
  }

  #hero #w-node-cf0ace40-7373-cb9e-8320-fad056d67500-56d674fb.utility-position-relative.w-node-b1176920-5d75-509c-7b76-b7561d87ba02-9a17ca88 .button-group {
    width: max-content !important;
    max-width: none !important;
  }

  #hero #w-node-cf0ace40-7373-cb9e-8320-fad056d67500-56d674fb.utility-position-relative.w-node-b1176920-5d75-509c-7b76-b7561d87ba02-9a17ca88 .h1-hero {
    display: inline-block !important;
    width: max-content !important;
    max-width: none !important;
    white-space: nowrap !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: clamp(360px, 60vh, 640px) !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;
  }
}