/*
 * The one site header, on every page. Self-contained and scoped to .site-head
 * so no page stylesheet (reason.css, site-shell.css, content-light.css) can
 * restyle it. Load it LAST on each page.
 */
@font-face {
  font-family: "Instrument Sans";
  font-style: normal;
  font-weight: 400 700;
  font-display: swap;
  src: url("/brand/fonts/instrument-sans-latin.ttf") format("truetype");
}

/* Reserve scrollbar space for consistent header alignment. */
html { scrollbar-gutter: stable; }
.site-head { position: sticky; top: 0; z-index: 20; padding: 0; background: #ff3b1f; border-bottom: 2px solid #111; backdrop-filter: none; color: #111; font-family: "Instrument Sans", system-ui, sans-serif; font-size: 16px; line-height: 1.2; }
.site-head .shell { width: min(1320px, calc(100% - 64px)); max-width: none; padding: 0; margin-inline: auto; }
.site-head .nav-row { min-height: 76px; display: flex; align-items: center; justify-content: space-between; gap: 28px; }
.site-head .brand { display: inline-flex; align-items: center; color: #111; text-decoration: none; }
.site-head .brand-wordmark { display: block; width: auto; height: 24px; }
.site-head .desktop-nav { display: flex; align-items: center; gap: 26px; margin-left: auto; font-size: .95rem; font-weight: 650; line-height: 1.2; }
.site-head .desktop-nav a { color: #111; text-decoration: none; }
.site-head .desktop-nav a:hover,
.site-head .desktop-nav a[aria-current] { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 4px; }
.site-head a.button-small { display: inline-flex; align-items: center; justify-content: center; gap: 14px; min-width: 196px; min-height: 42px; padding: 10px 15px; border: 2px solid #111; border-radius: 2px; background: transparent; color: #111; font: 700 .8rem/1.1 "Instrument Sans", system-ui, sans-serif; text-decoration: none; transform: none; }
.site-head a.button-small:hover { background: #111; border-color: #111; color: #fff; transform: none; }
.site-head :focus-visible { outline: 3px solid #111; outline-offset: 4px; }
.site-head .mobile-nav { display: none; }
.site-head .mobile-nav summary { cursor: pointer; list-style: none; font-weight: 750; }
.site-head .mobile-nav summary::-webkit-details-marker { display: none; }

@media (max-width: 1000px) {
  .site-head .desktop-nav { gap: 15px; font-size: .85rem; }
}

@media (max-width: 900px) {
  .site-head { position: relative; }
  .site-head .shell { width: calc(100% - 36px); }
  .site-head .nav-row { min-height: 66px; }
  .site-head .desktop-nav, .site-head .nav-row > .button { display: none; }
  .site-head .mobile-nav { display: block; position: relative; }
  .site-head .mobile-nav summary { padding: 9px 0 9px 12px; }
  .site-head .mobile-nav nav { position: absolute; top: calc(100% + 11px); right: 0; display: grid; min-width: 235px; padding: 10px; border: 2px solid #111; background: #fff; box-shadow: 5px 5px 0 #111; }
  .site-head .mobile-nav nav a { padding: 11px 12px; color: #111; font-weight: 700; text-decoration: none; }
  .site-head .mobile-nav nav a:hover { background: #ff3b1f; }
}