/*
 * Canonical Apeiron Guard site typography, primary navigation, and footer.
 *
 * Page-specific hero colours remain intact. These rules make the brand logo,
 * primary menu, H1 scale, and site-map footer consistent across templates.
 */

/* Shared top-menu typography at every viewport size. */
.hero__links.nav-links,
.product-hero-concept .nav-links,
.company-header .company-nav,
.content-header .nav-links,
.legal-header .nav-links {
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: .02em !important;
}

.hero__links.nav-links > a,
.hero__links.nav-links > .nav-dropdown > .nav-dropdown__trigger,
.product-hero-concept .nav-links > a,
.product-hero-concept .nav-links > .nav-dropdown > .nav-dropdown__trigger,
.company-header .company-nav > a,
.company-header .company-nav > .nav-dropdown > .nav-dropdown__trigger,
.content-header .nav-links > a,
.content-header .nav-links > .nav-dropdown > .nav-dropdown__trigger,
.legal-header .nav-links > a,
.legal-header .nav-links > .nav-dropdown > .nav-dropdown__trigger {
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: normal !important;
  letter-spacing: .02em !important;
  white-space: nowrap !important;
}

@media (min-width: 981px) {
  .hero__links.nav-links,
  .product-hero-concept .nav-links,
  .company-header .company-nav,
  .content-header .nav-links,
  .legal-header .nav-links {
    gap: 6px !important;
    padding: 4px 6px !important;
  }

  .hero__links.nav-links > a,
  .hero__links.nav-links > .nav-dropdown > .nav-dropdown__trigger,
  .product-hero-concept .nav-links > a,
  .product-hero-concept .nav-links > .nav-dropdown > .nav-dropdown__trigger,
  .company-header .company-nav > a,
  .company-header .company-nav > .nav-dropdown > .nav-dropdown__trigger,
  .content-header .nav-links > a,
  .content-header .nav-links > .nav-dropdown > .nav-dropdown__trigger,
  .legal-header .nav-links > a,
  .legal-header .nav-links > .nav-dropdown > .nav-dropdown__trigger {
    min-height: 0 !important;
    padding: 7px 10px !important;
    border-radius: 999px !important;
  }
}

/* Canonical H1 type system. */
#hero-title,
#partner-hero-title,
#about-title,
#contact-title,
.hub-intro h1,
.article-header h1,
.legal-main h1 {
  font-family: Montserrat, Inter, sans-serif !important;
  font-weight: 700 !important;
}

@media (min-width: 761px) {
  .hero--apeiron #hero-title { font-size: 60px !important; }

  .product-hero-concept:not(.partner-hero) #hero-title,
  .partner-hero #partner-hero-title { font-size: 50px !important; }

  #about-title,
  #contact-title,
  .hub-intro h1,
  .article-header h1 { font-size: 60px !important; }

  .legal-main h1 { font-size: 50px !important; }
}

@media (max-width: 760px) {
  #hero-title,
  #partner-hero-title,
  #about-title,
  #contact-title,
  .hub-intro h1,
  .article-header h1,
  .legal-main h1 {
    font-size: 38px !important;
  }
}

/* Canonical 1080px outer grid shared by every public page. */
.hero__nav.site-header,
.product-hero-concept .site-header,
.product-hero-layout,
.company-header__inner,
.content-header__inner,
.legal-header .site-header,
.section-shell,
.partner-page .partner-shell,
.hub-shell,
.article-shell,
.featured-story,
.article-hero,
.article-layout,
.project-summary,
.company-hero__inner,
.company-shell,
.legal-shell,
.site-map-strip__inner,
.site-map-bottom {
  width: min(1080px, calc(100% - 72px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
}

/* Light-page header geometry shared by About, Insights, and Legal. */
.company-header__inner,
.content-header__inner,
.legal-header .site-header {
  min-height: 76px !important;
  position: relative !important;
}

.company-header .brand img,
.content-header .brand img,
.legal-header .brand img {
  width: auto !important;
  height: 46px !important;
}

/* Contact uses the same dark-header colour treatment as product heroes. */
body.contact-page .company-header {
  position: absolute !important;
  inset: 0 0 auto !important;
  width: 100% !important;
  border-bottom: 0 !important;
  background: transparent !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

body.contact-page .company-header__inner {
  padding-top: 30px !important;
}

body.contact-page .company-header .brand img {
  filter: brightness(0) invert(1) brightness(1.22) drop-shadow(0 8px 20px rgba(0,0,0,.22)) drop-shadow(0 0 14px rgba(255,255,255,.22)) !important;
}

body.contact-page .company-nav {
  border-color: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.82) !important;
  background: rgba(8,11,13,.24) !important;
  box-shadow: 0 12px 34px rgba(0,0,0,.14) !important;
  backdrop-filter: blur(12px) !important;
  -webkit-backdrop-filter: blur(12px) !important;
}

body.contact-page .company-nav > a:hover,
body.contact-page .company-nav > a:focus-visible,
body.contact-page .company-nav > a[aria-current="page"],
body.contact-page .nav-dropdown__trigger:hover,
body.contact-page .nav-dropdown__trigger:focus-visible {
  color: #fff !important;
  background: rgba(255,255,255,.10) !important;
}

body.contact-page .company-hero__inner {
  padding-top: clamp(122px, 12vw, 154px) !important;
}

/* Legal uses the canonical light content-page header. */
.legal-header {
  position: relative !important;
  z-index: 40 !important;
  border-bottom: 1px solid rgba(112,65,46,.10) !important;
  background: rgba(251,250,248,.96) !important;
  backdrop-filter: blur(18px) !important;
  -webkit-backdrop-filter: blur(18px) !important;
}

.legal-header .site-header {
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 24px !important;
}

.legal-header .brand img { filter: none !important; }

.legal-header .nav-links {
  border: 1px solid rgba(112,65,46,.14) !important;
  border-radius: 999px !important;
  color: rgba(23,25,27,.72) !important;
  background: rgba(255,255,255,.82) !important;
  box-shadow: 0 12px 32px rgba(112,65,46,.08) !important;
}

/* Canonical site footer shared across every main page. */
.site-map-strip {
  padding: clamp(34px, 4vw, 54px) 0 18px !important;
  color: #fff !important;
  background:
    radial-gradient(circle at 14% 12%, rgba(255,248,240,.34), transparent 30%),
    radial-gradient(circle at 84% 18%, rgba(255,255,255,.10), transparent 24%),
    linear-gradient(135deg, #c5a67e 0%, #c5a67e 68%, #cf945f 100%) !important;
}

.site-map-strip__inner {
  width: min(1080px, calc(100% - 72px)) !important;
  margin: 0 auto !important;
  display: grid !important;
  grid-template-columns: minmax(220px, .85fr) minmax(0, 1.6fr) !important;
  gap: clamp(28px, 5vw, 72px) !important;
  align-items: start !important;
}

.site-map-brand > img {
  width: 132px !important;
  height: auto !important;
  filter: brightness(0) invert(1) !important;
  opacity: .96 !important;
}

.site-map-brand > p {
  max-width: 340px !important;
  margin: 18px 0 0 !important;
  color: rgba(255,255,255,.82) !important;
  font-size: 14px !important;
  line-height: 1.7 !important;
}

.site-map-links {
  display: grid !important;
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  gap: clamp(18px, 3vw, 38px) !important;
}

.site-map-links div {
  display: grid !important;
  gap: 9px !important;
  align-content: start !important;
}

.site-map-links strong {
  color: #fff !important;
  font-family: Montserrat, Inter, sans-serif !important;
  font-size: 12px !important;
  font-weight: 800 !important;
  letter-spacing: .12em !important;
  text-transform: uppercase !important;
}

.site-map-links a {
  color: rgba(255,255,255,.80) !important;
  font-size: 14px !important;
  line-height: 1.35 !important;
}

.site-map-links a:hover,
.site-map-links a:focus-visible { color: #fff !important; }

.site-map-bottom {
  width: min(1080px, calc(100% - 72px)) !important;
  margin: 32px auto 0 !important;
  padding-top: 16px !important;
  border-top: 1px solid rgba(255,255,255,.24) !important;
  color: rgba(255,255,255,.68) !important;
  font-size: 12px !important;
}

.footer-social-links {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 10px !important;
  margin-top: 20px !important;
}

.footer-social-links a {
  width: 38px !important;
  height: 38px !important;
  display: inline-grid !important;
  place-items: center !important;
  border: 1px solid rgba(255,255,255,.30) !important;
  border-radius: 50% !important;
  background: rgba(74,43,30,.28) !important;
}

.site-map-brand .footer-social-links img {
  width: 17px !important;
  height: 17px !important;
  object-fit: contain !important;
  filter: brightness(0) invert(1) !important;
  opacity: 1 !important;
}

@media (max-width: 900px) {
  .company-header__inner,
  .content-header__inner,
  .legal-header .site-header {
    width: calc(100% - 32px) !important;
    min-height: 70px !important;
  }

  .company-header .brand img,
  .content-header .brand img,
  .legal-header .brand img {
    width: 118px !important;
    height: auto !important;
  }

  body.contact-page .company-header__inner {
    min-height: 60px !important;
    padding-top: 16px !important;
  }

  body.contact-page .site-menu-toggle {
    border-color: rgba(255,255,255,.24) !important;
    background: rgba(8,11,13,.24) !important;
  }

  body.contact-page .site-menu-toggle span,
  body.contact-page .site-menu-toggle span::before,
  body.contact-page .site-menu-toggle span::after {
    background: #fff !important;
  }

  body.contact-page .site-menu-toggle[aria-expanded="true"] span {
    background: transparent !important;
  }

  body.contact-page .company-nav {
    top: calc(100% + 8px) !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(13,20,23,.96) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.30) !important;
  }

  body.contact-page .nav-dropdown__panel {
    color: #fff !important;
    background: transparent !important;
  }

  body.contact-page .nav-dropdown__panel a,
  body.contact-page .nav-dropdown__panel strong,
  body.contact-page .nav-dropdown__panel span {
    color: rgba(255,255,255,.88) !important;
  }

  body.contact-page .company-hero__inner {
    padding-top: 108px !important;
  }

  /* Editorial/company mobile navigation matches the main-site dark menu. */
  .content-header .site-menu-toggle,
  .company-header .site-menu-toggle,
  .legal-header .site-menu-toggle {
    position: relative !important;
    width: 46px !important;
    height: 44px !important;
    min-width: 46px !important;
    min-height: 44px !important;
    display: block !important;
    padding: 0 !important;
    border: 1px solid rgba(255,255,255,.24) !important;
    border-radius: 50% !important;
    color: #fff !important;
    background: rgba(8,11,13,.24) !important;
    box-shadow: none !important;
    backdrop-filter: blur(12px) !important;
    -webkit-backdrop-filter: blur(12px) !important;
  }

  .content-header .site-menu-toggle span,
  .content-header .site-menu-toggle span::before,
  .content-header .site-menu-toggle span::after,
  .company-header .site-menu-toggle span,
  .company-header .site-menu-toggle span::before,
  .company-header .site-menu-toggle span::after,
  .legal-header .site-menu-toggle span,
  .legal-header .site-menu-toggle span::before,
  .legal-header .site-menu-toggle span::after {
    content: "" !important;
    position: absolute !important;
    left: 50% !important;
    width: 20px !important;
    height: 2px !important;
    display: block !important;
    margin: 0 !important;
    border: 0 !important;
    border-radius: 999px !important;
    background: #fff !important;
    opacity: 1 !important;
    transition: none !important;
    transform: translateX(-50%) !important;
  }

  .content-header .site-menu-toggle span,
  .company-header .site-menu-toggle span,
  .legal-header .site-menu-toggle span { top: 21px !important; }

  .content-header .site-menu-toggle span::before,
  .company-header .site-menu-toggle span::before,
  .legal-header .site-menu-toggle span::before { top: -6px !important; }

  .content-header .site-menu-toggle span::after,
  .company-header .site-menu-toggle span::after,
  .legal-header .site-menu-toggle span::after { top: 6px !important; }

  .content-header .nav-links,
  .company-header .company-nav,
  .legal-header .nav-links {
    position: absolute !important;
    top: calc(100% + 12px) !important;
    right: 0 !important;
    left: auto !important;
    width: min(260px, calc(100vw - 32px)) !important;
    max-height: calc(100dvh - 108px) !important;
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 4px !important;
    padding: 8px !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    border: 1px solid rgba(255,255,255,.18) !important;
    border-radius: 16px !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(13,20,23,.92) !important;
    box-shadow: 0 24px 70px rgba(0,0,0,.30) !important;
    backdrop-filter: blur(18px) !important;
    -webkit-backdrop-filter: blur(18px) !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: translateY(-8px) scale(.98) !important;
    transform-origin: top right !important;
    transition: opacity .18s ease, transform .18s ease !important;
  }

  .content-header .nav-links.is-open,
  .company-header .company-nav.is-open,
  .legal-header .nav-links.is-open {
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
  }

  body.contact-page .company-header .company-nav {
    background: rgba(13,20,23,.92) !important;
  }

  .content-header .nav-links > a,
  .content-header .nav-dropdown__trigger,
  .company-header .company-nav > a,
  .company-header .nav-dropdown__trigger,
  .legal-header .nav-links > a,
  .legal-header .nav-dropdown__trigger {
    width: 100% !important;
    min-height: 44px !important;
    padding: 11px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    border-radius: 10px !important;
    color: rgba(255,255,255,.88) !important;
    background: transparent !important;
  }

  .content-header .nav-links > a:hover,
  .content-header .nav-links > a:focus-visible,
  .content-header .nav-links > a[aria-current="page"],
  .company-header .company-nav > a:hover,
  .company-header .company-nav > a:focus-visible,
  .company-header .company-nav > a[aria-current="page"],
  .legal-header .nav-links > a:hover,
  .legal-header .nav-links > a:focus-visible,
  .legal-header .nav-links > a[aria-current="page"],
  .content-header .nav-dropdown__trigger:hover,
  .content-header .nav-dropdown__trigger:focus-visible,
  .company-header .nav-dropdown__trigger:hover,
  .company-header .nav-dropdown__trigger:focus-visible,
  .legal-header .nav-dropdown__trigger:hover,
  .legal-header .nav-dropdown__trigger:focus-visible {
    color: #fff !important;
    background: rgba(255,255,255,.10) !important;
  }

  .content-header .nav-dropdown,
  .company-header .nav-dropdown,
  .legal-header .nav-dropdown {
    position: static !important;
    width: 100% !important;
  }

  .content-header .nav-dropdown::after,
  .company-header .nav-dropdown::after,
  .legal-header .nav-dropdown::after { display: none !important; }

  .content-header .nav-dropdown__panel,
  .company-header .nav-dropdown__panel,
  .legal-header .nav-dropdown__panel {
    position: static !important;
    inset: auto !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    max-height: 0 !important;
    margin: 0 !important;
    padding: 0 6px !important;
    overflow: hidden !important;
    border: 0 !important;
    border-radius: 12px !important;
    color: rgba(255,255,255,.88) !important;
    background: rgba(255,255,255,.07) !important;
    box-shadow: none !important;
    opacity: 0 !important;
    pointer-events: none !important;
    transform: none !important;
    transition: max-height .2s ease, opacity .16s ease, padding .2s ease !important;
  }

  .content-header .nav-dropdown.is-open .nav-dropdown__panel,
  .company-header .nav-dropdown.is-open .nav-dropdown__panel,
  .legal-header .nav-dropdown.is-open .nav-dropdown__panel {
    max-height: 260px !important;
    padding: 6px !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  .content-header .nav-dropdown__panel a,
  .company-header .nav-dropdown__panel a,
  .legal-header .nav-dropdown__panel a {
    width: 100% !important;
    min-height: 42px !important;
    padding: 10px !important;
    display: flex !important;
    align-items: center !important;
    border-radius: 9px !important;
    color: rgba(255,255,255,.88) !important;
    background: transparent !important;
  }

  .content-header .nav-dropdown__panel strong,
  .company-header .nav-dropdown__panel strong,
  .legal-header .nav-dropdown__panel strong {
    color: inherit !important;
    font-size: 12px !important;
    line-height: 1.25 !important;
  }

  .content-header .nav-dropdown__panel span,
  .company-header .nav-dropdown__panel span,
  .legal-header .nav-dropdown__panel span { display: none !important; }
}

@media (max-width: 760px) {
  .hero__nav.site-header,
  .product-hero-concept .site-header,
  .product-hero-layout,
  .company-header__inner,
  .content-header__inner,
  .legal-header .site-header,
  .section-shell,
  .partner-page .partner-shell,
  .hub-shell,
  .article-shell,
  .featured-story,
  .article-hero,
  .article-layout,
  .project-summary,
  .company-hero__inner,
  .company-shell,
  .legal-shell,
  .site-map-strip__inner,
  .site-map-bottom {
    width: calc(100% - 32px) !important;
    margin-right: auto !important;
    margin-left: auto !important;
  }

  .site-map-strip__inner,
  .site-map-links { grid-template-columns: 1fr !important; }
}
