html.lang-en .hero_title {
text-transform: uppercase;
font-family: var(--font-secondary);
} html.lang-en .vertical-label {
position: absolute;
top: 0;
left: 0;
width: 100%;
text-align: center;
font-size: 14px;
color: white;
background-color: rgba(20, 71, 56, 0.8);
padding: 8px 12px;
white-space: wrap;
writing-mode: horizontal-tb;
height: fit-content;
z-index: 1;
line-height: 100%;
} .l-contents__inner {
margin-bottom: 0;
} .c-section.p-section-front-page-content {
display: none;
}   .language-switcher {
display: flex;
align-items: center;
justify-content: center;
gap: 10px; } .lang-button {
writing-mode: vertical-rl;
text-orientation: upright;
font-size: clamp(10px, 1.1vw, 22px);
line-height: 150%;
font-family: 'Zen Old Mincho'; }
.lang-button:hover {
opacity: 50%;
} .lang-divider {
width: 1px;
height: 2.5em;
background-color: white;
}  .custom-language-switcher {
display: flex; 
list-style: none; 
align-items: center;
justify-content: center;
will-change: transform;
}
.custom-language-switcher .lang-item {
display: flex;
align-items: center;
}
.custom-language-switcher .lang-item.en_US{
font-family: 'Zen Old Mincho', serif; }
.custom-language-switcher .lang-item a {
writing-mode: vertical-rl;
text-orientation: upright;
}
.custom-language-switcher .lang-item a:hover {
opacity: 0.5;
} .custom-language-switcher .lang-item:not(:last-child)::after {
content: "";
display: block;
width: 1px;
height: 2.5em; 
background-color: white;
margin-left: 5px;   
margin-right: 5px;
}  .sticky-container{
position: fixed;
display: flex;
bottom: 20px;
width: 100dvw;
z-index: 3;
align-items: center;
justify-content: space-between;
padding: 0 20px;
}
.sticky-container >*{
background-color: var(--color-primary);
border-color: var(--color-primary);
cursor: pointer;
opacity: 0;
}
#sticky-reserve{
background-color: var(--color-primary);
border-color: var(--color-primary);
}
#sticky-reserve:hover {
background-color: white;
color: var(--color-primary); } .instagram-sticky-link {
display: flex;
padding: 8px;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
cursor: pointer;
} .instagram-sticky-link svg {
width: 32px;
height: 32px;
fill: white;
} .insta-link:hover,
.instagram-sticky-link:hover {
background-color: #144738c1;
opacity: 0.5;
} .instagram-sticky-link {
opacity: 0;
pointer-events: none;
transition: all 0.5s ease;
}
.instagram-sticky-link.visible, #sticky-reserve.visible {
opacity: 1;
pointer-events: auto;
}
.insta-link {
display: inline-block;
justify-content: center;
align-items: center;
}
.insta-link svg {
width: 30px;
height: 30px;
} .btn.btn--secondary.btn--reserve{
background-color: inherit;
width: fit-content;
height: fit-content;
padding: 15px;
}
.btn.btn--secondary.btn--reserve:hover {
background-color: white; }  #main-nav {
position: sticky;
display: flex;
justify-content: space-between;
align-items: center; left: 0;
right: 0;
height: 75px;
gap: 10px;
top: 0;
padding: 0 20px;
z-index: 999;
padding: 10px 20px;
will-change: transform;
font-family: var(--font-secondary) , var(--font-primary);
} .home #main-nav  {
position: fixed;
}
.home #main-nav::before {
pointer-events: none;
opacity: var(--header-bg-opacity, 0);
} .nav-logo {
height: 100%;
display: flex;
align-items: center;
transition: opacity 0.5s ease;
}
.nav-logo img {
max-height: 50px;
width: auto;
height: auto;
object-fit: contain;
display: block;
}
.nav-logo:hover {
opacity: 0.5;
}
nav { } .nav-links {
display: flex;
list-style: none;
margin: 0 auto;
padding: 0;
white-space: nowrap;
gap: clamp(15px, 1.2vw, 22px);
justify-content: center;
color: white;
letter-spacing: 0.2em;
}
.nav-links >li { font-size: clamp(10px, 1.2vw, 22px); }
.nav-links >li:hover {
opacity: 0.5;
transition: 0.5s ease;
}   .nav-desktop-links{
display: flex;
align-items: center;
gap: 20px;
}
.nav-controls {
display: flex;
align-items: center;
gap: 20px;
}
.nav-controls > #burger{
display: none;
}
#nav-mobile-dropdown {
display: none;
}   @media (max-width: 1024px) {
.home #main-nav::before {
opacity: 1;
}
#main-nav{
position: fixed;
height: fit-content;
padding: 10px;
}
.nav-logo img {
height: clamp(30px, 5vw, 80px);
margin: 0;
padding: 0;
} .nav-controls> #burger {
width: 30px;
height: 20px;
display: flex;
flex-direction: column;
cursor: pointer; align-self: center;
justify-self: center;
background-color: transparent !important;
background: none;
border: none;
gap: 10px;
}
.bar {
width: 24px;
height: 3px;
background-color: #ffffff;
border-radius: 2px;
transition: transform 0.5s ease, top 0.5s ease;
} .top {
top: 0;
}
.bottom {
bottom: 0;
}
.burger.cross .top {
transform: rotate(45deg) translateY(5px) translateX(4px);
}
.burger.cross .bottom {
transform: rotate(-45deg) translateY(-5px) translateX(4px);
}
.burger:hover {
opacity: 0.5;
}
.nav-links {
flex-direction: column;
align-items: center;
} .nav-mobile-dropdown >.nav-links li {
font-size: clamp(18px, 2.7vw, 30px);
}
.nav-desktop-links {
display: none; 
}
#navbar-desktop-reserve{
display: none;
}
#nav-mobile-dropdown {
position: absolute;
top: 100%;
left: 0;
right: 0;
width: 100dvw;
height: 100dvh;
display: flex;
flex-direction: column;
align-items: center;
gap: 1em;
transform: translateY(-100%);
opacity: 0;
pointer-events: none;
transition:
transform 0.5s ease,
opacity 0.5s ease,
pointer-events 0s 0.5s;
z-index: -2;
}
#nav-mobile-dropdown.is-open {
transform: translateY(0);
opacity: 1;
pointer-events: auto;
}
.nav-controls> #burger.cross .top {
transform: rotate(45deg) translateY(5px) translateX(4px);
}
.nav-controls> #burger.cross .bottom {
transform: rotate(-45deg) translateY(-5px) translateX(4px);
}
}