/* MOUND navigation — foundation header (DESIGN.md §5)
   One row: MOUND ADVISORY GROUP lockup left; Solutions · Industries · Insights ·
   Resources · About + REACH US button right, on the same line (≥1200px).
   No rule beneath the bar. Transparent over the homepage hero; "nav glass"
   (translucent Deep Forest, 18px blur) once scrolled — as in the foundation reference. */

.site-header {
  --top-h: 78px;
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  background: var(--forest);
  color: var(--bone);
  border-bottom: 0;
  font-family: var(--font-sans);
  transition:
    background-color 0.3s var(--ease),
    box-shadow 0.3s var(--ease),
    backdrop-filter 0.3s var(--ease),
    -webkit-backdrop-filter 0.3s var(--ease);
}
@media (min-width: 1200px) {
  .site-header { --top-h: 94px; }
}

/* Over the hero photograph: fully transparent, no tint */
.site-header--overlay:not(.is-solid) { background: transparent; }

/* Nav glass — scrolled, or a dropdown open over the hero */
.site-header.is-scrolled,
.site-header--overlay.is-solid {
  background: rgba(13, 37, 31, 0.74);
  box-shadow: 0 12px 36px rgba(5, 18, 14, 0.16);
  -webkit-backdrop-filter: blur(18px) saturate(122%);
  backdrop-filter: blur(18px) saturate(122%);
}
/* Mobile menu open: solid, and no backdrop-filter (it would trap the fixed panel) */
.site-header.is-menu-open {
  background: var(--forest);
  box-shadow: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}

/* ---------- Announcement banner (above the bar) ---------- */
.announce {
  height: var(--announce-h);
  overflow: hidden;
  background: var(--evergreen);
  color: var(--bone);
}
html.announce-off .announce { display: none; }
.announce__inner {
  position: relative;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding-right: 52px;
}
.announce__text {
  margin: 0;
  font-size: 12.5px;
  letter-spacing: 0.02em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.announce__link {
  margin-left: 14px;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-decoration: none;
  color: var(--brass-light);
  white-space: nowrap;
}
.announce__link span { display: inline-block; transition: transform var(--dur-fast) var(--ease); }
.announce__link:hover { color: var(--bone); }
.announce__link:hover span { transform: translateX(3px); }
.announce__close {
  position: absolute;
  right: calc(var(--site-margin) - 14px);
  top: 50%;
  transform: translateY(-50%);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: none;
  color: var(--limestone);
  cursor: pointer;
}
.announce__close:hover { color: var(--bone); }
@media (max-width: 480px) {
  .announce__inner { justify-content: flex-start; }
  .announce__text { font-size: 12px; }
  .announce__link { margin-left: 8px; font-size: 12px; }
}
@media (max-width: 360px) {
  .announce__inner { padding-right: 40px; }
  .announce__text, .announce__link { font-size: 11px; letter-spacing: 0; }
  .announce__link { margin-left: 6px; }
}

/* ---------- Bar: lockup left, menu + REACH US right, one line ---------- */
.site-header__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 30px;
  height: var(--top-h);
}

.wordmark {
  display: block;
  flex: none;
  /* Phones: as wide as the bar allows, leaving ~28px before the menu icon (26px bars) */
  width: min(390px, calc(100vw - 2 * var(--site-margin) - 54px));
  color: inherit;
  text-decoration: none;
}
.wordmark .lockup { display: block; width: 100%; height: auto; }
@media (min-width: 1200px) {
  /* Desktop: 30% larger than the 03C reference size (clamp(330px, 34vw, 500px));
     it gives way only as much as the menu needs to stay on the same line. */
  .wordmark { width: auto; flex: 0 1 clamp(429px, 44.2vw, 650px); min-width: 330px; }
}

.primary-nav { display: none; }
@media (min-width: 1200px) {
  .primary-nav { display: flex; flex: none; align-items: stretch; gap: clamp(20px, 2.2vw, 32px); height: 100%; }
}

.primary-nav__list {
  display: flex;
  align-items: stretch;
  gap: clamp(20px, 2.2vw, 32px);
  margin: 0;
  padding: 0;
  list-style: none;
}

.primary-nav__item {
  position: relative;
  display: flex;
  align-items: center;
}

.primary-nav__trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 0;
  border: 0;
  background: none;
  font-family: var(--font-sans);
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: 0.02em;
  color: inherit;
  white-space: nowrap;
  cursor: pointer;
  text-shadow: 0 1px 20px rgba(0, 0, 0, 0.22);
}
.primary-nav__trigger::after {
  content: "";
  position: absolute;
  left: 0;
  right: 100%;
  bottom: 1px;
  height: 1px;
  background: currentColor;
  transition: right 0.25s var(--ease);
}
.primary-nav__item.is-current > .primary-nav__trigger::after,
.primary-nav__item.is-open > .primary-nav__trigger::after,
.primary-nav__trigger:hover::after { right: 0; }

.chevron {
  width: 5px;
  height: 5px;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--dur-fast) var(--ease);
}
.primary-nav__item.is-open .chevron { transform: translateY(1px) rotate(-135deg); }

.header-cta {
  align-self: center;
  display: inline-flex;
  align-items: center;
  padding: 11px 20px;
  border: 1px solid rgba(244, 240, 231, 0.7);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
  white-space: nowrap;
  transition: background-color var(--dur-fast) var(--ease), color var(--dur-fast) var(--ease);
}
.header-cta:hover,
.header-cta[aria-current="page"] { background: var(--bone); color: var(--forest); }

/* Dropdown panel */
.dropdown {
  position: absolute;
  top: 100%;
  left: -24px;
  min-width: 272px;
  padding: 14px 0;
  background: var(--bone);
  color: var(--ink);
  border: 1px solid var(--limestone);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-6px);
  transition:
    opacity var(--dur-fast) var(--ease),
    transform var(--dur-fast) var(--ease),
    visibility 0s linear var(--dur-fast);
}
.primary-nav__item.is-open > .dropdown {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

/* Grouped dropdown (What We Do, Perspectives): columns with headings, right-aligned */
.dropdown--grouped {
  left: auto;
  right: -24px;
  display: grid;
  gap: 8px;
  padding: 22px 8px 18px;
}
.dropdown--cols-2 { grid-template-columns: repeat(2, minmax(210px, 1fr)); }
.dropdown--cols-3 { grid-template-columns: repeat(3, minmax(210px, 1fr)); }
.dropdown__heading {
  padding: 0 16px 10px;
  margin: 0 16px 6px 16px;
  padding-inline: 0;
  border-bottom: 1px solid var(--limestone);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--clay-deep);
}
.dropdown--grouped .dropdown__link { padding: 8px 16px; font-size: 14px; }

.dropdown__list { margin: 0; padding: 0; list-style: none; }

.dropdown__link {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  padding: 10px 24px;
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.35;
  text-decoration: none;
  color: var(--ink);
  transition: color var(--dur-fast) var(--ease), background-color var(--dur-fast) var(--ease);
}
.dropdown__text { display: flex; flex-direction: column; gap: 2px; }
.dropdown__sub { font-size: 13px; line-height: 1.3; color: var(--stone-gray); }
.dropdown__link .arrow {
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
}
.dropdown__link:hover,
.dropdown__link:focus-visible { color: var(--clay-deep); background: rgba(216, 208, 194, 0.35); }
.dropdown__link:hover .arrow,
.dropdown__link:focus-visible .arrow { opacity: 1; transform: none; }
.dropdown__link:focus-visible { outline-offset: -2px; }
.dropdown__link[aria-current="page"] { color: var(--evergreen); box-shadow: inset 2px 0 0 var(--clay); }

/* ---------- Mobile menu ---------- */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
@media (min-width: 1200px) {
  .menu-toggle { display: none; }
}

.menu-toggle__bars,
.menu-toggle__bars::before,
.menu-toggle__bars::after {
  display: block;
  width: 26px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.menu-toggle__bars { position: relative; }
.menu-toggle__bars::before,
.menu-toggle__bars::after { content: ""; position: absolute; left: 0; }
.menu-toggle__bars::before { top: -7px; }
.menu-toggle__bars::after { top: 7px; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars { background: transparent; }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::before { transform: translateY(7px) rotate(45deg); }
.menu-toggle[aria-expanded="true"] .menu-toggle__bars::after { transform: translateY(-7px) rotate(-45deg); }

.mobile-menu {
  position: fixed;
  inset: calc(var(--top-h) + var(--announce-h)) 0 0 0;
  z-index: 99;
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--forest);
  color: var(--bone);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--dur-fast) var(--ease), visibility 0s linear var(--dur-fast);
}
.mobile-menu.is-open { opacity: 1; visibility: visible; transition-delay: 0s; }
@media (min-width: 1200px) {
  .mobile-menu { display: none; }
}

.mobile-menu__inner { padding-block: 12px 48px; }
.mobile-menu__list { margin: 0; padding: 0; list-style: none; }
.mobile-menu__section { border-bottom: 1px solid rgba(244, 240, 231, 0.2); }

.mobile-menu__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  font-family: var(--font-serif);
  font-size: 28px;
  font-weight: 400;
  line-height: 1.1;
  text-align: left;
  color: inherit;
  cursor: pointer;
}
.mobile-menu__section.is-current .mobile-menu__trigger { color: var(--brass); }
.mobile-menu__direct { text-decoration: none; }
.mobile-menu__direct .arrow { font-family: var(--font-sans); font-size: 18px; }

.mobile-menu__icon { position: relative; flex: none; width: 16px; height: 16px; }
.mobile-menu__icon::before,
.mobile-menu__icon::after {
  content: "";
  position: absolute;
  top: 50%;
  left: 0;
  width: 16px;
  height: 1px;
  background: currentColor;
  transition: transform var(--dur-fast) var(--ease);
}
.mobile-menu__icon::after { transform: rotate(90deg); }
.mobile-menu__trigger[aria-expanded="true"] .mobile-menu__icon::after { transform: rotate(0deg); }

.mobile-menu__panel { padding-bottom: 18px; }
.mobile-menu__panel[hidden] { display: none; }
.mobile-menu__heading {
  margin: 14px 0 4px;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--brass);
}
.mobile-menu__sublist { margin: 0; padding: 0; list-style: none; }
.mobile-menu__link {
  display: block;
  padding: 9px 0;
  font-size: 16px;
  color: var(--limestone);
  text-decoration: none;
}
.mobile-menu__link:hover { color: var(--bone); }
.mobile-menu__link[aria-current="page"] { color: var(--bone); text-decoration: underline; text-decoration-color: var(--clay); text-underline-offset: 5px; }
.mobile-menu__sub { display: block; margin-top: 2px; font-size: 13px; color: rgba(216, 208, 194, 0.7); }

.mobile-menu__cta {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 36px;
  padding: 18px 20px;
  border: 1px solid rgba(244, 240, 231, 0.6);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--bone);
}
.mobile-menu__cta:hover { background: var(--bone); color: var(--forest); }