/* ============================================================
   SITE HEADER (custom CSS — no Tailwind for fast first paint)
   ============================================================ */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background-color 0.4s ease,
    border-color 0.4s ease,
    box-shadow 0.4s ease;
  will-change: background-color, box-shadow;
}
/* Scrim behind the transparent header.
   The logo, menu icon and CTA are white, and hero images can be very bright
   (sunlit sky/water), which left them almost unreadable. A soft top-down
   gradient restores contrast without reading as a solid bar. Taller than the
   header itself so it fades out gradually instead of ending on a hard edge. */
.site-header::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 220%;
  background: linear-gradient(
    to bottom,
    rgba(0, 0, 0, 0.55) 0%,
    rgba(0, 0, 0, 0.25) 45%,
    rgba(0, 0, 0, 0) 100%
  );
  pointer-events: none;
  transition: opacity 0.4s ease;
}

/* Not needed once the header has a solid white background. */
.site-header.is-scrolled::before,
body.bg-header .site-header::before {
  opacity: 0;
}

.insights .site-header{
  border-bottom: 1px solid rgba(235, 235, 235, 1);
}




.site-header.is-scrolled {
  background: #ffffff;
  
  border-bottom-color: rgba(25, 41, 21, 0.08);
  box-shadow: 0 4px 24px rgba(25, 41, 21, 0.07);
  border: 1px solid rgba(235, 235, 235, 1);
}

.site-header__inner {
  width: 100%;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  /* Above the ::before scrim, which is absolutely positioned and would
     otherwise paint over this in-flow content. */
  position: relative;
  z-index: 1;
  padding: clamp(1rem, 0.6rem + 1.2vw, 1.5rem) 0;
  transition: padding 0.35s ease;
}

.site-header.is-scrolled .site-header__inner {
  padding-top: clamp(0.625rem, 0.4rem + 0.75vw, 0.875rem);
  padding-bottom: clamp(0.625rem, 0.4rem + 0.75vw, 0.875rem);
}

.header-offset {
  height: var(--header-h, 72px);
}

.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  color: #192915;
  background: transparent;
  border: 0;
  border-radius: 0.375rem;
  cursor: pointer;
  transition: background-color 0.2s ease, color 0.2s ease;

}

.menu-toggle__icon {
  width: 1.5rem;
  height: 1.5rem;
  fill: #ffffff;
  transition: fill 0.4s ease;
}

.site-header.is-scrolled .menu-toggle__icon {
  fill: #192915;
}

/* Split from :focus-visible on purpose. On a touch device :hover sticks
   after a tap, so the grey pill stayed painted behind the hamburger until
   something else was tapped. Keyboard focus still gets the same treatment
   everywhere. */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover {
    background-color: rgba(25, 41, 21, 0.06);
  }
}

.menu-toggle:focus-visible {
  background-color: rgba(25, 41, 21, 0.06);
}

.menu-toggle:focus-visible {
  outline: 2px solid #192915;
  outline-offset: 2px;
}

.site-menu__close svg {
  pointer-events: none;
}

.site-header__logo {
  display: inline-flex;
  line-height: 0;
  flex: 0 0 auto;
}

.site-header__logo-img { 
  height: 50px;
  object-fit: contain;
  display: block;
  filter: brightness(0) invert(1);
  transition: filter 0.4s ease;
}

.site-header.is-scrolled .site-header__logo-img {
  filter: brightness(0);
}

.header-cta {
  display: inline-flex;
  flex: 0 0 auto;
}

/* Below 1200px the source order runs logo | CTA | hamburger, and the row is
   space-between, so the CTA would float in the middle of the header. Pin it
   to the right instead, immediately before the hamburger — the gap on
   .site-header__inner keeps the two apart. */
@media (max-width: 1199.98px) {
  .header-cta {
    margin-left: auto;
  }
}

/* Desktop: restore original order — hamburger | logo | CTA */
@media (min-width: 1200px) {
  /* Both marks step up at the desktop scale. 50px left the logo looking
     undersized against the full-bleed hero behind it. width:auto so the
     intrinsic 220x65 ratio drives the width from the new height. */
  .site-header__logo-img {
    height: 64px;
    width: auto;
  }

  /* The 24px glyph is sized for a phone header. At the desktop scale it
     read as small next to the logo and the CTA. The button grows with it
     so the icon keeps its padding inside the hit area. */
  .menu-toggle {
    width: 2.875rem;
    height: 2.875rem;
  }

  .menu-toggle__icon {
    width: 2.125rem;
    height: 2.125rem;
  }

  .header-cta {
    order: 3;
  }

  .site-header__logo {
    order: 2;
  }

  .menu-toggle {
    order: 1;
  }
}

/* Compact CTA on phones. btn-xl's padding is sized for the desktop header and
   would push the logo and the hamburger together; this keeps the button a
   comfortable tap target (36px) without crowding them. */
@media (max-width: 767.98px) {
  .header-cta {
    padding: 0.5rem 0.875rem;
    min-height: 2.25rem;
    font-size: 0.8125rem;
    white-space: nowrap;
  }
}

@media (max-width: 480px) {
  .header-cta {
    padding-inline: 0.75rem;
    font-size: 0.75rem;
  }

  .site-header__logo-img {
    width: 138px;
    height: auto;
  }
}

.btn.btn-outline.header-cta{
  border-color:  rgba(255, 255, 255, 0.20);

}

.is-scrolled .header-cta.btn-outline,
body.bg-header .site-header .header-cta.btn-outline {
  border-color: #192915;
  color: #000;
  transition: color 0.45s cubic-bezier(0.4, 0, 0.2, 1), border-color 0.2s ease;
}

.is-scrolled .header-cta.btn-outline::before,
body.bg-header .site-header .header-cta.btn-outline::before {
  background: #192915;
  z-index: -1;
}

.is-scrolled .header-cta.btn-outline:hover,
body.bg-header .site-header .header-cta.btn-outline:hover {
  color: #ffffff;
}

/* ============================================================
   SCROLL-LOCK SHIFT ("header jerk" when an overlay opens)
   ============================================================
   Every full-screen overlay on this site locks the page by putting
   overflow:hidden on <html>/<body>. That removes the scrollbar, the
   viewport gets ~15px wider, and .site-header — being position:fixed,
   i.e. sized against the viewport and not against <body> — grows with
   it. The centred logo slides ~7px and the whole bar visibly snaps.

   The three overlays each tried to compensate the BODY, in three
   different ways, and none of them could reach a fixed element:
     - GLightbox   .gscrollbar-fixer { margin-right: 15px }  (its own CSS)
     - mobile menu body.style.paddingRight = scrollbarWidth  (main.js)
     - video modal nothing at all                            (main.js)

   scrollbar-gutter fixes it at the root instead: the gutter is reserved
   permanently, so overflow:hidden no longer changes the viewport width
   and NOTHING moves — fixed or not — for any of the three overlays.
   Browsers without support (Safari < 18.2) simply fall back to the old
   behaviour; macOS overlay scrollbars have a 0px gutter and never
   jerked in the first place.

   Because the gutter is now always reserved, the compensations above
   became double-compensations and had to go: GLightbox's is cancelled
   here, and the mobile menu's was removed in main.js (see lockScroll).
   The body.gscrollbar-fixer selector is 0,1,1 against GLightbox's
   0,1,0, so it wins on specificity and needs no !important — unlike
   the .gslide-* overrides in sections.css, which fight a same-weight
   CDN rule loaded after us. */
html {
  scrollbar-gutter: stable;
}

body.gscrollbar-fixer {
  margin-right: 0;
}

body.bg-header .site-header {
  background-color: #fff;
}

body.bg-header .site-header .menu-toggle__icon {
  fill: #192915;
}

body.bg-header.site-header .site-header__logo-img {
  filter: brightness(0);
}

body.bg-header .site-header .site-header__logo-img {
  filter: brightness(0);
}

@media (hover: none) {
  .is-scrolled .header-cta.btn-outline:hover,
  body.bg-header .site-header .header-cta.btn-outline:hover {
    color: #000;
  }
}

/* ── Dual-logo swap (WP override of single-image filter approach) ───────── */
.site-header__logo {
  display: inline-grid;
}

.site-header__logo-img {
  grid-area: 1 / 1;
  filter: none;
  transition: opacity 0.4s ease;
}

.site-header__logo--dark {
  opacity: 0;
}

.site-header.is-scrolled .site-header__logo--light,
body.bg-header .site-header .site-header__logo--light {
  opacity: 0;
}

.site-header.is-scrolled .site-header__logo--dark,
body.bg-header .site-header .site-header__logo--dark {
  opacity: 1;
}