/* Shared site header: the same navigation on every page (home, contact, privacy). */
.site-header, .site-header *, .site-header *::before, .site-header *::after { box-sizing: border-box; }
.site-header {
  position: fixed; top: 16px; left: 50%; z-index: 100;
  width: min(1040px, 100% - 32px); height: 60px; transform: translateX(-50%);
  display: flex; align-items: center; gap: 28px; padding: 0 10px 0 18px;
  border-radius: 999px; border: 1px solid transparent;
  transition: background-color 0.35s ease, border-color 0.35s ease, backdrop-filter 0.35s ease;
}
.site-header.is-scrolled {
  background: rgba(19, 19, 19, 0.72); border-color: var(--line, rgba(255, 255, 255, 0.08));
  backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
}
.site-header a { text-decoration: none; }
.brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 600; font-size: 16px; letter-spacing: -0.02em; color: var(--text, #ededed); }
.brand img { width: 28px; height: 28px; border-radius: 8px; }
.nav { display: flex; gap: 4px; margin-inline-end: auto; }
.nav a { padding: 8px 12px; border-radius: 999px; font-size: 14px; color: var(--muted, #a3a3a3); transition: color 0.2s ease, background-color 0.2s ease; }
.nav a:hover, .nav a[aria-current="page"] { color: var(--text, #ededed); background: rgba(255, 255, 255, 0.05); }
.header-actions { display: flex; align-items: center; gap: 6px; }
.icon-link { width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; color: var(--muted, #a3a3a3); transition: color 0.2s ease, background-color 0.2s ease; }
.icon-link:hover { color: var(--text, #ededed); background: rgba(255, 255, 255, 0.06); }
.icon-link svg { width: 20px; height: 20px; }
.menu { display: none; position: relative; }
.menu summary { list-style: none; cursor: pointer; }
.menu summary::-webkit-details-marker { display: none; }
.menu-panel {
  position: absolute; right: 0; top: calc(100% + 10px); width: 220px; padding: 8px;
  background: var(--surface, #131313); border: 1px solid var(--line-2, rgba(255, 255, 255, 0.14)); border-radius: 18px; display: grid;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6);
}
.menu-panel a { padding: 10px 12px; border-radius: 10px; color: var(--muted, #a3a3a3); }
.menu-panel a:hover, .menu-panel a[aria-current="page"] { background: var(--surface-2, #1a1a1a); color: var(--text, #ededed); }

@media (max-width: 900px) {
  .nav { display: none; }
  .menu { display: block; }
  .header-actions { margin-inline-start: auto; }
  .header-actions .btn { display: none; }
}

@media (max-width: 640px) {
  /* A bar pinned to the top edge instead of a floating pill */
  .site-header {
    top: 0; width: 100%; height: calc(60px + env(safe-area-inset-top)); padding: env(safe-area-inset-top) 8px 0 16px;
    border-radius: 0; border-width: 0 0 1px; background: rgba(10, 10, 10, 0.86);
    backdrop-filter: blur(18px) saturate(140%); -webkit-backdrop-filter: blur(18px) saturate(140%);
  }
  .site-header.is-scrolled { background: rgba(10, 10, 10, 0.92); }
  .menu { position: static; }
  .menu-panel { left: 12px; right: 12px; width: auto; top: calc(100% + 8px); }
  .menu-panel a { padding: 14px 16px; font-size: 16px; }
}