/* Shared mobile drawer navigation */
.mobile-nav-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fef9f3;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.mobile-nav-close {
display: inline-flex;
align-items: center;
justify-content: center;
width: 2.9rem;
height: 2.9rem;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fef9f3;
transition: color 0.2s ease, opacity 0.2s ease, transform 0.2s ease;
}

.mobile-nav-toggle:hover {
color: #ffffff;
opacity: 0.92;
}

.mobile-nav-close:hover {
color: #ffffff;
opacity: 0.92;
}

.mobile-nav-toggle:focus-visible,
.mobile-nav-close:focus-visible {
outline: 2px solid rgba(254, 249, 243, 0.8);
outline-offset: 2px;
}

.mobile-nav-toggle svg {
width: 1.45rem;
height: 1.45rem;
}

.mobile-nav-close svg {
width: 1.45rem;
height: 1.45rem;
}

.mobile-nav-backdrop {
position: fixed;
inset: 0;
z-index: 55;
opacity: 0;
pointer-events: none;
background: rgba(10, 16, 24, 0.56);
backdrop-filter: blur(2px);
transition: opacity 0.22s ease;
}

.mobile-nav-drawer {
position: fixed;
top: 0;
left: 0;
bottom: 0;
z-index: 60;
width: min(84vw, 320px);
display: flex;
flex-direction: column;
background: rgba(17, 26, 38, 0.97);
border-right: 1px solid rgba(254, 249, 243, 0.08);
box-shadow: 24px 0 56px rgba(0, 0, 0, 0.35);
transform: translateX(-102%);
transition: transform 0.24s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobile-nav-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding: 1.1rem 1.25rem 0.9rem;
border-bottom: 1px solid rgba(254, 249, 243, 0.08);
}

.mobile-nav-links {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.75rem 0.8rem 1rem;
}

.mobile-nav-link {
display: block;
padding: 0.8rem 0.9rem;
border: 1px solid transparent;
border-radius: 0.8rem;
color: #97a0a3;
font-size: 0.95rem;
font-weight: 500;
letter-spacing: 0.01em;
text-decoration: none;
transition: color 0.2s ease, border-color 0.2s ease, background-color 0.2s ease;
}

.mobile-nav-link:hover {
color: #fef9f3;
background: rgba(254, 249, 243, 0.04);
border-color: rgba(254, 249, 243, 0.12);
}

.mobile-nav-link.is-active {
color: #fef9f3;
background: transparent;
border-color: transparent;
}

.mobile-nav-footer {
margin-top: auto;
padding: 1rem 0.8rem 1.35rem;
border-top: 1px solid rgba(254, 249, 243, 0.08);
}

.mobile-nav-contact {
display: block;
width: 100%;
padding: 0.8rem 0.9rem;
border: 1px solid rgba(151, 160, 163, 0.3);
border-radius: 0.8rem;
color: #fef9f3;
font-size: 0.9rem;
font-weight: 600;
text-align: center;
text-decoration: none;
background: rgba(25, 37, 54, 0.8);
transition: border-color 0.2s ease, background-color 0.2s ease;
}

.mobile-nav-contact:hover {
border-color: rgba(254, 249, 243, 0.4);
background: rgba(25, 37, 54, 0.96);
}

body.mobile-nav-open {
overflow: hidden;
}

body.mobile-nav-open .mobile-nav-backdrop {
opacity: 1;
pointer-events: auto;
}

body.mobile-nav-open .mobile-nav-drawer {
transform: translateX(0);
}

@media (min-width: 768px) {
.mobile-nav-toggle,
.mobile-nav-backdrop,
.mobile-nav-drawer {
display: none !important;
}
}

@media (max-width: 767px) {
.site-nav-row {
position: relative;
justify-content: center;
}

.site-nav-start {
width: 100%;
justify-content: center;
}

.site-nav-brand {
margin: 0 auto;
}

.mobile-nav-toggle {
position: absolute;
left: 0;
top: 50%;
transform: translateY(-50%);
}
}

@media (prefers-reduced-motion: reduce) {
.mobile-nav-toggle,
.mobile-nav-close,
.mobile-nav-backdrop,
.mobile-nav-drawer,
.mobile-nav-link,
.mobile-nav-contact {
transition: none;
}
}