.site-header {
    position: sticky;
    top: 0;
    z-index: 100;
    padding: var(--header-padding-y) 0;
    background-color: rgba(var(--cream), 1);
    border-bottom: 1px solid rgba(var(--terra-green), 0.125);
}

.site-header .header-row {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-header .header-logo {
    display: flex;
    width: fit-content;
}

.site-header .header-logo img {
    display: block;
    width: 293px;
    height: auto;
    max-width: none;
}

/* Desktop nav: Platform (a dropdown), four plain links, and the Book a Demo button, all one
   flex row with the same gap throughout, the gap from "Log in" to the button matches every
   other gap between nav items. Hidden at lg and below, replaced by the hamburger menu:
   references/new-header-mobile.png shows only the logo and that button, not a reflowed nav. */
.site-header .header-nav {
    display: flex;
    align-items: center;
    gap: 32px;
}

.site-header .header-nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 0;
    font-family: var(--font-body);
    font-size: 16px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-nav-link:hover,
.site-header .header-nav-link:focus,
.site-header .header-nav-link:active,
.site-header .header-nav-link:visited {
    color: rgba(var(--charcoal), 1);
    text-decoration: none;
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-nav-link:hover,
.site-header .header-nav-link:focus {
    text-decoration: underline;
}

/* Bootstrap's .dropdown-toggle adds its own small triangle by default; this uses the inline SVG chevron instead. */
.site-header .header-nav-toggle.dropdown-toggle::after {
    display: none;
}

/* Padding + a matching negative margin grows the click target around the small chevron
   without shifting it visually or changing the 6px gap to "Platform". */
.site-header .header-nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 6px;
    margin: -6px;
    color: rgba(var(--charcoal), 1);
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-nav-toggle:hover,
.site-header .header-nav-toggle:focus,
.site-header .header-nav-toggle:active {
    color: rgba(var(--charcoal), 1);
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-nav-toggle .chevron {
    flex: none;
    transition: transform 0.2s ease;
}

/* chevron-up.svg rests pointing up; rotated 180deg to point down for the closed state. Reads the
   toggle's own aria-expanded rather than the dropdown wrapper's .show class: Bootstrap only adds
   .show to the .dropdown-menu itself, never to the .header-nav-item wrapper. */
.site-header .header-nav-toggle[aria-expanded="false"] .chevron {
    transform: rotate(180deg);
}

/* Platform is a split control: "Platform" is a plain link to platform.html
   (.header-nav-link, same as every other nav item), the chevron next to it is a separate
   button that opens the megamenu. Clicking the word navigates, clicking the arrow opens the
   menu. Bootstrap's .dropdown also sets its own position: relative on this wrapper, which
   would anchor the megamenu to just the width of "Platform" plus the chevron; turned off
   here so .header-megamenu's position: absolute (below) resolves against .header-row
   instead, giving the full-width panel (references/Nav Menu Components.jpg). */
.site-header .header-nav-item.dropdown {
    display: flex;
    align-items: center;
    gap: 6px;
    position: static;
}

.site-header .header-megamenu {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin-top: 16px !important;
    padding: 32px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--dark-green), 0.15);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(var(--dark-green), 0.12);
}

.site-header .header-megamenu-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px 40px;
}

.site-header .header-megamenu-item {
    display: grid;
    grid-template-columns: 32px 1fr;
    align-content: start;
    column-gap: 16px;
    text-decoration: none;
}

.site-header .header-megamenu-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    grid-row: 1 / 3;
    width: 32px;
    height: 32px;
    color: rgba(var(--dark-green), 1);
    background-color: rgba(var(--dark-green), 0.1);
    border-radius: 4px;
}

.site-header .header-megamenu-item .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(var(--terra-green), 1);
}

.site-header .header-megamenu-item .description {
    margin-top: 2px;
    font-size: 13px;
    line-height: 1.5;
    color: rgba(var(--charcoal), 0.75);
}

.site-header .header-megamenu-item:hover .title,
.site-header .header-megamenu-item:focus .title {
    text-decoration: underline;
}

/* Insights is a dropdown too, but a small single-column list (icon + label only, no
   description), not a full-width megamenu. Reuses .header-nav-item.dropdown's
   position: static, so this panel's position: absolute resolves against .header-row like
   the megamenu's does, but anchored to the row's right edge (right: 0, no left: 0) since
   there are only two items. left: auto !important is required: even with
   data-bs-display="static", Bootstrap's dropdown JS still adds [data-bs-popper], and
   Bootstrap's own [data-bs-popper] CSS forces left: 0. With a fixed width and both left and
   right set, the box is over-constrained and the browser drops "right", so the panel
   anchored to the row's left edge instead. The megamenu doesn't hit this since it sets both
   left: 0 and right: 0 itself. Width/gap here are a judgment call, no spec for this yet. */
.site-header .header-insights-menu {
    position: absolute;
    top: 100%;
    left: auto !important;
    right: 0;
    width: 320px;
    margin-top: 16px !important;
    padding: 24px;
    flex-direction: column;
    gap: 32px;
    background-color: rgba(var(--white), 1);
    border: 1px solid rgba(var(--dark-green), 0.15);
    border-radius: 4px;
    box-shadow: 0 4px 16px rgba(var(--dark-green), 0.12);
}

/* display must stay scoped to .show, or it overrides Bootstrap's own .dropdown-menu display:
   none default and the panel renders permanently open regardless of the .show class. */
.site-header .header-insights-menu.show {
    display: flex;
}

.site-header .header-insights-menu-item {
    display: flex;
    align-items: center;
    gap: 16px;
    text-decoration: none;
}

.site-header .header-insights-menu-item .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    color: rgba(var(--dark-green), 1);
    background-color: rgba(var(--dark-green), 0.1);
    border-radius: 4px;
}

.site-header .header-insights-menu-item .title {
    font-size: 16px;
    font-weight: 500;
    line-height: 1.4;
    color: rgba(var(--terra-green), 1);
}

.site-header .header-insights-menu-item:hover .title,
.site-header .header-insights-menu-item:focus .title {
    text-decoration: underline;
}

/* The hamburger: hidden above lg, shown at lg and below (see the media query). menu-open.svg
   already draws its own rounded background and border, so the button itself just wraps it. */
.site-header .header-menu-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

.site-header .header-menu-toggle:hover,
.site-header .header-menu-toggle:focus,
.site-header .header-menu-toggle:active {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-menu-toggle svg {
    display: block;
}

/* Bootstrap's own .offcanvas class handles the slide-in, the backdrop, and the fixed positioning;
   this only overrides colors and width to match the brand. */
.site-header .header-mobile-menu {
    --bs-offcanvas-width: 380px;
    color: rgba(var(--charcoal), 1);
    background-color: rgba(var(--cream), 1);
}

.site-header .header-mobile-menu .offcanvas-header {
    justify-content: space-between;
    padding: 20px;
    border-bottom: 1px solid rgba(var(--terra-green), 0.125);
}

.site-header .header-mobile-menu .offcanvas-header .header-logo img {
    width: 160px;
}

/* menu-close.svg already draws its own rounded background, so the button itself just wraps it. */
.site-header .header-mobile-close {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 24px;
    padding: 0;
    background-color: transparent;
    border: 0;
    box-shadow: none;
    cursor: pointer;
}

.site-header .header-mobile-close:hover,
.site-header .header-mobile-close:focus,
.site-header .header-mobile-close:active {
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-mobile-menu .offcanvas-body {
    display: flex;
    flex-direction: column;
    padding: 0;
}

.site-header .header-mobile-nav {
    display: flex;
    flex-direction: column;
}

.site-header .header-mobile-nav-item {
    border-bottom: 1px solid rgba(var(--terra-green), 0.125);
}

/* Platform is a split control here too, same as the desktop megamenu: "Platform" is a plain
   link to platform.html (.header-mobile-link, same as every other row), the chevron next to
   it is a separate button that expands the inline icon list. Link's own border-bottom is
   suppressed since the row's real divider is already on the parent .header-mobile-nav-item. */
.site-header .header-mobile-nav-item-row {
    display: flex;
    align-items: stretch;
}

.site-header .header-mobile-nav-item-row .header-mobile-link {
    flex: 1 1 auto;
    border-bottom: 0;
}

.site-header .header-mobile-nav-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    color: rgba(var(--charcoal), 1);
    background-color: transparent;
    border: 0;
    box-shadow: none;
}

.site-header .header-mobile-nav-toggle .chevron {
    flex: none;
    transition: transform 0.2s ease;
}

/* chevron-up.svg rests pointing up; rotated 180deg to point down for the closed state. */
.site-header .header-mobile-nav-toggle[aria-expanded="false"] .chevron {
    transform: rotate(180deg);
}

/* display: flex only applies once Bootstrap's Collapse has added .show or .collapsing; a
   plain .collapse (closed) falls through to Bootstrap's own .collapse:not(.show) { display:
   none }. An unconditional display: flex here used to beat that rule (main.css loads after
   Bootstrap's CSS), so the list popped back to full height the instant Bootstrap's JS cleared
   its inline height at the end of the closing transition, as if it had reopened itself. */
/* Shared by Platform's and Insights' mobile accordion lists, same recipe both places. */
.site-header .header-mobile-platform-list.show,
.site-header .header-mobile-platform-list.collapsing,
.site-header .header-mobile-insights-list.show,
.site-header .header-mobile-insights-list.collapsing {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.site-header .header-mobile-platform-list,
.site-header .header-mobile-insights-list {
    margin: 0;
    padding: 4px 20px 20px;
    list-style: none;
}

.site-header .header-mobile-platform-list a,
.site-header .header-mobile-insights-list a {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 8px 0;
    font-size: 15px;
    color: rgba(var(--terra-green), 1);
    text-decoration: none;
}

.site-header .header-mobile-platform-list a:hover,
.site-header .header-mobile-platform-list a:focus,
.site-header .header-mobile-insights-list a:hover,
.site-header .header-mobile-insights-list a:focus {
    text-decoration: underline;
}

.site-header .header-mobile-platform-list .icon,
.site-header .header-mobile-insights-list .icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 32px;
    height: 32px;
    color: rgba(var(--dark-green), 1);
    background-color: rgba(var(--dark-green), 0.1);
    border-radius: 4px;
}

.site-header .header-mobile-link {
    display: block;
    padding: 20px;
    font-size: 16px;
    font-weight: 500;
    color: rgba(var(--charcoal), 1);
    text-decoration: none;
    border-bottom: 1px solid rgba(var(--terra-green), 0.125);
}

.site-header .header-mobile-link:hover,
.site-header .header-mobile-link:focus,
.site-header .header-mobile-link:visited {
    color: rgba(var(--charcoal), 1);
}

.site-header .header-mobile-link:hover,
.site-header .header-mobile-link:focus {
    text-decoration: underline;
}

.site-header .header-mobile-cta {
    justify-content: center;
    width: calc(100% - 40px);
    margin: 20px;
}

/* lg: references/new-header-mobile.png. No tablet-specific reference beyond the logo width,
   assumes the same collapsed nav as phone, just with the 180px logo. */
@media (max-width: 991.98px) {
    .site-header .header-logo img {
        width: 180px;
    }

    .site-header .header-nav {
        display: none;
    }

    .site-header .header-menu-toggle {
        display: flex;
    }
}

/* sm */
@media (max-width: 575.98px) {
    .site-header .header-logo img {
        width: 160px;
    }
}