/* Shared top navigation + drop-down menu (loaded on every page, after the page's own CSS) */
.site-nav {
  position: fixed; inset: 0 0 auto 0; z-index: 40;
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px var(--pad, 16px);
  font-size: 15px; line-height: 1.4; letter-spacing: -0.01em;
  mix-blend-mode: difference; color: #fff;
}
.site-nav a, .site-nav button {
  justify-self: start; margin-left: -12px;
  font: inherit; color: inherit; background: none; cursor: pointer;
  padding: 4px 12px; border: 1px solid transparent; border-radius: 999px;
  transition: border-color 0.4s var(--ease);
}
.site-nav .site-nav__name { margin-left: 0; padding-left: 0; border: 0; }
.site-nav .site-nav__menu { margin-right: -12px; }
.site-nav .is-active { border-color: currentColor; }
.site-nav a:not(.is-active):not(.site-nav__name):hover,
.site-nav button:not(.is-active):hover { border-color: rgba(255, 255, 255, 0.35); }

.site-nav .roll { display: inline-block; overflow: hidden; height: 1.4em; vertical-align: top; }
.site-nav .roll > span { display: block; transition: transform 0.6s var(--ease); }
.site-nav a:hover > .roll > span, .site-nav button:hover > .roll > span { transform: translateY(-100%); }

/* drop-down menu */
.menu {
  position: fixed; inset: 0; z-index: 35; background: var(--bg); color: var(--fg);
  display: grid; grid-template-columns: 1fr 1fr; gap: var(--pad, 16px);
  padding: 120px var(--pad, 16px) var(--pad, 16px);
  clip-path: inset(0 0 100% 0); visibility: hidden;
  transition: clip-path 0.8s var(--ease), visibility 0s 0.8s;
}
.menu-open .menu { clip-path: inset(0); visibility: visible; transition: clip-path 0.8s var(--ease); }
.menu a { color: inherit; text-decoration: none; }
.menu__links { display: flex; flex-direction: column; align-self: end; }
.menu__links a {
  font-size: clamp(56px, 8vw, 140px); line-height: 0.95; letter-spacing: -0.05em;
  transition: opacity 0.3s, transform 0.6s var(--ease);
}
.menu__links:hover a:not(:hover) { opacity: 0.3; }
.menu__links a:hover { transform: translateX(12px); }
.menu__about { align-self: end; display: grid; gap: 48px; max-width: 640px; }
.menu__about p { font-size: clamp(20px, 2vw, 30px); line-height: 1.15; letter-spacing: -0.025em; }
.menu__lists { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--pad, 16px); font-size: 13px; }
.menu__lists h4 { font-weight: 400; font-size: 11px; text-transform: uppercase; letter-spacing: 0.02em; color: var(--muted); margin-bottom: 8px; }
.menu__lists span { display: block; }
.menu__contact { display: flex; justify-content: space-between; font-size: 13px; }
.menu__contact span { display: flex; gap: 16px; }

/* phones: name + Menu only; the drop-down holds the rest */
@media (max-width: 760px) {
  .site-nav { grid-template-columns: 1fr auto; }
  .site-nav [data-nav] { display: none; }
  .menu { grid-template-columns: 1fr; align-content: end; }
  .menu__lists { grid-template-columns: 1fr 1fr; }
  .menu__contact { flex-direction: column; gap: 12px; }
}
.ico { display: block; }
.menu__contact span { align-items: center; }