/* Phone menu (2026-10-07). Desktop is unchanged. At 820px and below the main menu folds behind one button,
   but only once site-menu.js has run (it adds .menu-js to <html>). Without the script the full menu shows as before. */
.pr-menu{display:none}
@media (max-width:820px){
  .menu-js .pr-header .pr-header-in{flex-wrap:wrap;align-items:center}
  .menu-js .pr-header .pr-menu{display:inline-flex;margin-left:auto;align-items:center;padding:9px 16px;border:1px solid rgba(239,244,236,.35);border-radius:6px;background:transparent;color:#EFF4EC;font:inherit;font-weight:600;cursor:pointer}
  .menu-js .pr-header .pr-menu:focus-visible{outline:2px solid #C9A24B;outline-offset:2px}
  .menu-js .pr-header .pr-nav{display:none;flex-basis:100%;flex-direction:column;align-items:flex-start;gap:14px;padding:16px 0 6px}
  .menu-js .pr-header .pr-nav.open{display:flex}
  .menu-js .pr-header .pr-nav .pr-btn-gold{display:inline-flex}
}

/* Grouped menu (8 Oct 2026): two dropdowns, What we do and Resources, so the top line stays clean.
   Desktop: opens on hover, keyboard focus or click. Phone (menu-js): every group shows open under its heading. */
.pr-dd{position:relative;display:inline-flex;align-items:center}
.pr-dd-btn{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:0;margin:0;color:#EFF4EC;font:inherit;font-size:15px;font-weight:600;cursor:pointer}
.pr-dd-btn::after{content:"";width:7px;height:7px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);opacity:.8}
.pr-dd-btn:hover,.pr-dd.open .pr-dd-btn{color:#C9A24B}
.pr-dd-btn:focus-visible{outline:2px solid #C9A24B;outline-offset:4px;border-radius:3px}
.pr-dd-menu{position:absolute;top:100%;left:-14px;z-index:60;display:none;flex-direction:column;min-width:240px;padding:14px 8px 8px;margin-top:0}
.pr-dd-menu::before{content:"";position:absolute;inset:8px 0 0 0;background:#172A1F;border:1px solid rgba(239,244,236,.16);border-radius:10px;box-shadow:0 18px 40px rgba(0,0,0,.35);z-index:-1}
.pr-nav .pr-dd-menu a{display:block;padding:9px 12px;border-radius:7px;white-space:nowrap}
.pr-nav .pr-dd-menu a:hover,.pr-nav .pr-dd-menu a:focus-visible{background:rgba(239,244,236,.08);color:#C9A24B}
/* with the script, only .open shows a menu, so aria-expanded always matches; without it, hover and focus still work */
.pr-dd.open .pr-dd-menu{display:flex}
html:not(.dd-js) .pr-dd:hover .pr-dd-menu,html:not(.dd-js) .pr-dd:focus-within .pr-dd-menu{display:flex}
@media (max-width:820px){
  .pr-dd{display:block;width:100%}
  .menu-js .pr-header .pr-dd-btn{cursor:default;color:#C9A24B;font-size:13px;letter-spacing:.08em;text-transform:uppercase}
  .menu-js .pr-header .pr-dd-btn::after{display:none}
  .menu-js .pr-header .pr-dd-menu{position:static;display:flex;min-width:0;padding:6px 0 0 0}
  .menu-js .pr-header .pr-dd-menu::before{display:none}
  .menu-js .pr-header .pr-dd-menu a{padding:7px 0}
}
/* Header height as one variable. The logo and "Top" links go to #top; where #top is the hero (not the body), keep it clear of the sticky header so it lands at the true top. */
:root{--pr-nav-h:98px}
#top{scroll-margin-top:var(--pr-nav-h)}
/* Hide on scroll down, return on scroll up (site-header.js). */
html.hh-js .pr-header{transition:transform .3s ease,padding .25s ease,box-shadow .25s ease;will-change:transform}
html.hh-js .pr-header.pr-hide{transform:translateY(-100%);box-shadow:none}
html.hh-js .pr-header.pr-hide:focus-within,html.hh-js .pr-header.pr-hide:has(:focus-visible){transform:none} /* never leave focus off screen */
@media (prefers-reduced-motion:reduce){html.hh-js .pr-header{transition:none}}