/* Shared navigation: click/tap disclosure on desktop; visible groups on mobile. */
.site-header { --nav-surface: #fffdfb; --nav-hover: #fae8dc; --nav-border: #e6c8b6; --nav-accent: var(--rust,#873d25); --nav-font: var(--body,Poppins,Arial,sans-serif); }
.site-header { --nav-surface: #faf7f1; --nav-hover: #eee3d7; --nav-border: #cab39d; --nav-accent: var(--accent); }
.header.site-header { z-index: 40; background: var(--nav-surface); box-shadow: 0 3px 18px #29252205; }
.site-header .header-inner { min-height: 86px; gap: 8px 28px; flex-wrap: wrap; }
html { scroll-padding-top: calc(var(--site-header-height,86px) + 24px); }
.primary-nav { margin-left: auto; }
.primary-nav ul, .mobile-nav ul { list-style: none; padding: 0; margin: 0; }
.nav-list { display: flex; align-items: center; gap: 6px; }
.nav-link, .nav-trigger { display: inline-flex; gap: 9px; align-items: center; justify-content: center; min-height: 46px; padding: 11px 14px; border: 1px solid transparent; border-radius: 8px; background: transparent; color: var(--ink); font: 600 .9375rem/1.6 var(--nav-font); text-decoration: none; }
.nav-link:hover, .nav-link[aria-current="page"], .mobile-shortcuts a[aria-current="page"], .nav-trigger:hover, .nav-trigger[aria-expanded="true"] { background: var(--nav-hover); border-color: var(--nav-border); }
.nav-caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); margin-left: 3px; }
.nav-trigger[aria-expanded="true"] .nav-caret { transform: translateY(2px) rotate(225deg); }
.nav-panel { position: absolute; top: calc(100% + 10px); left: 50%; transform: translateX(-50%); width: min(760px,calc(100vw - 48px)); max-height: calc(100dvh - var(--site-header-height,86px) - 20px); overflow-y: auto; padding: 26px; border: 1px solid #d8c5b7; border-radius: 18px; background: var(--nav-surface); box-shadow: 0 18px 45px #29252224; }
.nav-panel[hidden] { display: none; }
.nav-panel-label { margin: 0 10px 16px; color: var(--nav-accent); font-size: .875rem; font-weight: 600; letter-spacing: .045em; text-transform: uppercase; }
.nav-panel ul { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.nav-panel li { min-width: 0; }
.nav-card { display: flex; gap: 15px; align-items: flex-start; min-height: 95px; padding: 16px 13px; border: 1px solid transparent; border-radius: 12px; text-decoration: none; }
.nav-card:hover, .nav-card[aria-current="page"] { background: var(--nav-hover); border-color: var(--nav-border); }
.nav-card .icon-tile { width: 42px; height: 42px; border-radius: 11px; }
.nav-card .icon { width: 26px; height: 26px; }
.nav-card strong { display: block; color: var(--ink); font-size: .9375rem; line-height: 1.6; }
.nav-card small { display: block; margin-top: 4px; color: var(--muted); font-size: .875rem; line-height: 1.6; }
.nav-panel-bottom { border-top: 1px solid var(--line); padding: 17px 10px 0; margin: 17px 0 0; display: flex; align-items: center; justify-content: space-between; gap: 18px; }
.nav-panel-bottom span { color: var(--muted); font-size: .875rem; }
.nav-panel-bottom a { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; font-weight: 600; }
.site-header .header-actions { gap: 16px; }
.site-header .login { display: inline-flex; align-items: center; min-height: 44px; font-size: .875rem; }
.site-header .header-actions .btn { min-height: 46px; }
.site-header .menu-button { display: none; }
.site-header .mobile-nav { display: none; }
.site-header .mobile-nav[hidden] { display: none; }
.mobile-menu-icon { width: 22px; height: 22px; }
.menu-button[aria-expanded="false"] .menu-close, .menu-button[aria-expanded="true"] .menu-lines { display: none; }
.nav-section-target { scroll-margin-top: 110px; }
@media(max-width:1200px) {
 .site-header .header-inner { gap: 20px; }
 .nav-list { gap: 2px; }
 .nav-link, .nav-trigger { padding: 11px 10px; }
 .site-header .header-actions .login { display: none; }
}
@media(max-width:1100px) {
 .primary-nav { display: none; }
 .site-header .header-actions { margin-left: auto; }
 .site-header .menu-button { display: inline-flex; margin-left: 0; min-height: 46px; padding: 10px 13px; border-color: #b7a699; }
 .site-header .menu-button[aria-expanded="true"] { background: var(--nav-hover); border-color: #a5775e; }
 .site-header .mobile-nav:not([hidden]) { display: block; max-height: calc(100dvh - var(--site-header-height,86px)); padding: 20px 24px 28px; overscroll-behavior: contain; }
 .mobile-nav-inner { max-width: 760px; margin: auto; }
 .mobile-groups { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; }
 .site-header .mobile-nav-heading { margin: 0 0 10px; font: 600 .875rem/1.5 var(--nav-font); letter-spacing: .045em; text-transform: uppercase; color: var(--nav-accent); }
 .site-header .mobile-nav li a { display: flex; gap: 12px; align-items: center; min-height: 48px; padding: 11px 10px; border: 1px solid transparent; border-radius: 8px; font-size: .9375rem; line-height: 1.65; }
 .mobile-nav li a[aria-current="page"], .mobile-nav li a:hover { background: var(--nav-hover); border-color: var(--nav-border); }
 .mobile-nav .icon { width: 23px; height: 23px; color: var(--nav-accent); }
 .mobile-shortcuts { display: flex; flex-wrap: wrap; gap: 4px 13px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); }
 .site-header .mobile-shortcuts a { min-height: 44px; padding: 10px; font-size: .9375rem; font-weight: 600; }
 .mobile-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 16px; }
 .site-header .mobile-actions .btn { display: flex; align-items: center; min-height: 48px; padding: 12px 14px; margin: 0; }
 .site-header .mobile-actions .mobile-login { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 12px 14px; font-weight: 600; text-decoration: underline; }
}
@media(max-width:600px) {
 .site-header .header-inner { min-height: 74px; gap: 14px; }
 .site-header .header-actions { display: none; }
 .site-header .menu-button { margin-left: auto; min-height: 44px; }
 .site-header .mobile-nav:not([hidden]) { max-height: calc(100dvh - var(--site-header-height,74px)); padding: 21px 20px 26px; }
 .mobile-groups { grid-template-columns: 1fr; gap: 23px; }
 .mobile-nav-heading { margin-bottom: 8px; }
 .site-header .mobile-nav li a { min-height: 46px; padding: 9px 10px; }
 .mobile-shortcuts { gap: 2px 8px; margin-top: 18px; }
 .mobile-actions { grid-template-columns: 1fr; gap: 4px; }
}
@media(forced-colors:active) {
 .nav-card[aria-current="page"], .nav-trigger[aria-expanded="true"], .mobile-nav li a[aria-current="page"] { border: 2px solid currentColor; }
 .icon-tile { border: 1px solid currentColor; }
}

/* Sticky header: it keeps its slot over the hero and sticks while the page scrolls.
   The frame clips instead of hiding overflow, so it is no scroll container and
   sticky follows the viewport. The negative bottom margin lets the hero slide
   under the header exactly as the old absolute header did. */
.page-frame { overflow: clip; }
.header.site-header {
  position: sticky;
  top: 12px;
  left: auto;
  right: auto;
  margin: 25px 28px calc(-1 * (var(--site-header-height, 78px) + 26px));
  transition: box-shadow .25s, background-color .25s;
}
.header.site-header.is-scrolled { background: #faf7f1f7; box-shadow: 0 10px 30px #2925221f; }
.site-header .mobile-nav:not([hidden]) {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  right: 0;
  overflow-y: auto;
  border: 1px solid var(--nav-border);
  border-radius: inherit;
  background: var(--nav-surface);
  box-shadow: 0 18px 45px #29252224;
}
@media (max-width: 800px) {
  .header.site-header { top: 8px; margin: 16px 16px calc(-1 * (var(--site-header-height, 68px) + 17px)); }
  .site-header .mobile-nav:not([hidden]) { max-height: calc(100dvh - var(--site-header-height, 68px) - 32px); }
}
@media (max-width: 600px) {
  .header.site-header { top: 8px; margin: 12px 12px calc(-1 * (var(--site-header-height, 64px) + 13px)); }
}
@media (prefers-reduced-motion: reduce) { .header.site-header { transition: none; } }

/* Language switcher: a compact disclosure in the header, a row in the mobile menu. */
.site-header .lang-switch { position: relative; }
.site-header .lang-trigger { min-height: 44px; padding: 8px 6px; font-size: .8125rem; font-weight: 600; letter-spacing: .04em; }
.site-header .lang-panel { left: auto; right: 0; transform: none; width: 190px; padding: 8px; }
.site-header .lang-panel ul { display: block; list-style: none; margin: 0; padding: 0; }
.site-header .lang-panel a { display: block; padding: 10px 12px; border-radius: 10px; font-size: .9375rem; text-decoration: none; color: var(--ink); }
.site-header .lang-panel a:hover { background: var(--nav-hover); }
.site-header .lang-panel a[aria-current="true"] { font-weight: 600; background: var(--nav-hover); }
.site-header .mobile-languages { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.site-header .mobile-languages a { display: inline-flex; align-items: center; min-height: 44px; padding: 8px 16px; border: 1px solid var(--nav-border); border-radius: 50px; font-size: .9375rem; text-decoration: none; color: var(--ink); }
.site-header .mobile-languages a[aria-current="true"] { background: var(--ink); border-color: var(--ink); color: #fff; }