/* HEADER-01: larger original branding and navigation; scene geometry is unchanged. */
:root { --zp-header-height: 132px; }

.header {
  height: var(--zp-header-height);
  padding: 28px 5.5vw;
  gap: 32px;
  background: linear-gradient(180deg, rgba(7,10,16,.98), rgba(7,10,16,.88) 78%, rgba(7,10,16,.66));
}

.header::after {
  content: '';
  position: absolute;
  inset: 100% 0 auto;
  height: 32px;
  background: linear-gradient(180deg, rgba(7,10,16,.66), transparent);
  pointer-events: none;
}

.header .brand {
  flex: 0 0 auto;
  gap: 14px;
  font-size: 26px;
  line-height: 1.2;
  font-weight: 600;
  letter-spacing: .13em;
  white-space: nowrap;
}

.header .brand img {
  flex: 0 0 auto;
  display: block;
  width: 64px;
  height: 64px;
}

.header .brand small {
  margin-top: 7px;
  font-size: 9.5px;
  line-height: 1.4;
  letter-spacing: .14em;
}

.header nav {
  gap: 32px;
  font-size: 16px;
  line-height: 1.4;
  white-space: nowrap;
}

.header nav > a {
  display: inline-flex;
  align-items: center;
  min-height: 48px;
}

.header .contact {
  min-height: 54px;
  padding: 14px 22px;
  font-size: 15px;
}

.header .contact span { margin-left: 24px; }
#motion-toggle { top: calc(var(--zp-header-height) + 16px); }

@media (max-width: 1100px) and (min-width: 768px) {
  .header { gap: 24px; padding-inline: 32px; }
  .header nav { gap: 24px; font-size: 15px; }
  .header .contact { padding-inline: 18px; }
}

@media (max-width: 959px) and (min-width: 768px) {
  :root { --zp-header-height: 120px; }
  .header .brand { gap: 10px; font-size: 23px; }
  .header .brand img { width: 58px; height: 58px; }
  .header .brand small { font-size: 8.5px; }
  .header nav { gap: 18px; font-size: 14px; }
  .header .contact { padding-inline: 14px; font-size: 14px; }
  .header .contact span { margin-left: 16px; }
}

@media (max-width: 767px) {
  :root { --zp-header-height: 104px; }
  .header { padding: 20px 22px; gap: 16px; }
  .header .brand { gap: 8px; font-size: 19px; }
  .header .brand img { width: 48px; height: 48px; }
  .header .brand small { font-size: 8px; margin-top: 6px; }
  .header nav { gap: 0; font-size: 13px; }
  .header nav > a:not(.contact) { display: none; }
  .header .contact { min-height: 46px; font-size: 13px; padding: 11px 14px; }
  .header .contact span { margin-left: 14px; }
}

@media (max-width: 479px) {
  .header .contact span { display: none; }
}

@media (max-width: 359px) {
  :root { --zp-header-height: 100px; }
  .header { padding-inline: 16px; gap: 12px; }
  .header .brand { gap: 6px; }
  .header .brand img { width: 44px; height: 44px; }
  .header .contact { min-height: 44px; font-size: 12px; padding: 10px 11px; }
}