/* Shared header: direct demo action, with secondary links in a mobile menu. */
.header{position:relative;z-index:10}
.header>a.brand,.footer>.brand{width:143.6px}
.header-actions{display:flex;align-items:center;gap:30px}
.header .desktop-navigation{display:flex;align-items:center;gap:30px}
.header .desktop-navigation a{display:flex;align-items:center;min-height:44px;font-size:13px}
.header .nav-contact{display:inline-flex;align-items:center;justify-content:center;white-space:nowrap;min-height:48px;font-size:15px;padding:13px 22px}
.header .nav-contact:hover{background:#b45c32;color:var(--paper)}
.mobile-navigation{display:none}
@media(max-width:800px){
  .header{gap:12px;padding:18px 0}
  .header-actions{gap:8px}
  .header .desktop-navigation{display:none}
  .header .nav-contact{min-height:44px;padding:10px 14px;font-size:12px}
  .mobile-navigation{display:block}
  .mobile-navigation>summary{display:flex;align-items:center;justify-content:center;width:44px;height:44px;cursor:pointer;list-style:none;border:1px solid var(--line);border-radius:50%}
  .mobile-navigation>summary::-webkit-details-marker{display:none}
  .menu-icon{position:relative;width:17px;height:10px;border-top:1.5px solid currentColor;border-bottom:1.5px solid currentColor}
  .mobile-navigation[open] .menu-icon{border:0}
  .mobile-navigation[open] .menu-icon::before,.mobile-navigation[open] .menu-icon::after{content:'';position:absolute;top:4px;left:0;width:17px;border-top:1.5px solid currentColor;transform:rotate(45deg)}
  .mobile-navigation[open] .menu-icon::after{transform:rotate(-45deg)}
  .header .mobile-navigation nav{position:absolute;top:calc(100% - 4px);left:0;right:0;display:flex;flex-direction:column;align-items:stretch;gap:0;padding:8px 16px;background:var(--paper);border:1px solid var(--line);border-radius:16px;box-shadow:0 12px 24px #1916120a}
  .header .mobile-navigation nav a{display:flex;align-items:center;min-height:52px;font-size:16px;padding:8px 4px}
  .header .mobile-navigation nav a+a{border-top:1px solid var(--line)}
}
@media(max-width:360px){
  .header{gap:8px}
  .header .nav-contact{padding-inline:10px}
}

@media(max-width:700px){.header>a.brand,.footer>.brand{width:130.6px}}
