/* Isolated navigation shared by both pages; no legacy header selectors. */
:root { --nv-header-height: 80px; }
html { scroll-padding-top: calc(var(--nv-header-height) + 16px); }
.nv-header { box-sizing: border-box; position: fixed; inset: 0 0 auto; z-index: 50; height: var(--nv-header-height); display: flex; align-items: center; gap: 28px; padding: 0 clamp(16px, 4vw, 72px); background: #111; border-bottom: 1px solid #303030; color: #f3f3ee; font-family: 'DM Sans', Arial, sans-serif; }
.nv-brand, .nv-brand .brand-accent { flex: none; color: #ed302c; font: 700 22px/1.2 'DM Sans', Arial, sans-serif; letter-spacing: -1px; text-decoration: none; white-space: nowrap; }
.nv-nav { display: flex; align-items: center; gap: 6px; margin-left: auto; }
.nv-nav a { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 12px 14px; border-radius: 6px; color: #aaa9a4; font: 500 14px/1.4 'DM Sans', Arial, sans-serif; text-decoration: none; white-space: nowrap; }
.nv-nav a:hover { background: #222; color: #fff; }
.nv-nav a > span { margin-left: auto; }
.nv-nav a.is-active { color: #fff; background: #282828; }
.nv-nav a.is-active::after { content: ''; width: 5px; height: 5px; border-radius: 50%; background: #ed302c; }
.nv-toggle { display: none; }
.nv-actions { flex: none; }
.nv-actions-placeholder { width: 44px; height: 44px; }
.nv-actions button { width: 44px; height: 44px; border: 1px solid #373735; border-radius: 6px; color: #fff; background: #202020; }
.nv-header a:focus-visible, .nv-header button:focus-visible { outline: 2px solid #f3f3ee; outline-offset: 3px; }
.navigation-backdrop { position: fixed; inset: 0; z-index: 49; border: 0; padding: 0; background: #0009; cursor: pointer; }
.navigation-backdrop[hidden] { display: none; }
main#main { padding-top: var(--nv-header-height); }
.hero-intro h1, .hero h1.studio-masthead { font: 400 clamp(110px, 21vw, 300px)/.9 'Bebas Neue', Impact, sans-serif; letter-spacing: -.025em; text-transform: uppercase; text-wrap: nowrap; }
.hero-intro h1 .masthead-name, .hero h1.studio-masthead .masthead-name { display: block; margin-bottom: 18px; font: 400 clamp(32px, 3.5vw, 48px)/1.1 'DM Sans', Arial, sans-serif; letter-spacing: -.04em; text-transform: none; color: #f3f3ee; }
@media (max-width: 1100px) {
  :root { --nv-header-height: 72px; }
  html.navigation-open { overflow: hidden; }
  .nv-header { gap: 10px; }
  .nv-brand, .nv-brand .brand-accent { font-size: clamp(18px, 4.5vw, 22px); }
  .nv-toggle { display: inline-flex; align-items: center; justify-content: center; gap: 10px; margin-left: auto; min-width: 88px; height: 44px; padding: 0 12px; border: 1px solid #404040; border-radius: 6px; background: #242424; color: #fff; font: 500 14px/1 'DM Sans', Arial, sans-serif; cursor: pointer; }
  .nv-toggle span { font-size: 20px; }
  .nv-nav { box-sizing: border-box; display: none; position: absolute; top: 100%; left: 0; right: 0; margin: 0; padding: 12px 16px max(20px, env(safe-area-inset-bottom)); max-height: calc(100vh - 72px); max-height: calc(100dvh - 72px); overflow-y: auto; overscroll-behavior: contain; background: #171717; border-bottom: 1px solid #373735; box-shadow: 0 18px 32px #0005; }
  .nv-header.nav-open .nv-nav { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
  .nv-nav a { box-sizing: border-box; min-height: 52px; padding: 14px 16px; font-size: 17px; }
  .nv-nav a.is-active { background: #ed302c18; box-shadow: inset 3px 0 #ed302c; }
}
@media (max-width: 700px) {
  .hero-intro h1, .hero h1.studio-masthead { font-size: clamp(100px, 25vw, 175px); }
}