/* The language control stays visible in the header, including on mobile. */
.header{gap:24px}
.header nav{order:1;margin-left:auto;gap:24px}
.site-languages{order:2;display:flex;align-items:center;gap:8px;flex-shrink:0;font-size:13px;white-space:nowrap}
.site-languages a{display:inline-flex;align-items:center;justify-content:center;min-height:44px;color:#a3b0a6;border-bottom:2px solid transparent}
.site-languages a[aria-current=page]{color:#22d36a;border-color:#22d36a}
.site-languages a:hover{color:#fff}
.site-languages>span{color:#59665d}
.menu-toggle{order:3;flex-shrink:0}
.black-film-toolbar{justify-content:flex-end}
html:is([lang=en],[lang=id]) h2,html:is([lang=en],[lang=id]) h3{letter-spacing:-.035em;word-break:normal}
/* Chinese and Japanese: system CJK fonts behind Pretendard (Latin/digits), and break between ideographs — Korean keep-all would stop CJK lines from wrapping. */
html[lang^=zh]{--font:Pretendard,"PingFang SC","Hiragino Sans GB","Noto Sans SC","Microsoft YaHei",Arial,sans-serif}
html[lang=ja]{--font:Pretendard,"Hiragino Sans","Hiragino Kaku Gothic ProN","Noto Sans JP","Yu Gothic",Meiryo,Arial,sans-serif}
html[lang^=zh] body,html[lang=ja] body,html[lang^=zh] .tour-details h3,html[lang=ja] .tour-details h3{word-break:normal}
html:not([lang=ko]) .hero-journey li{white-space:normal}
html:not([lang=ko]) .space-photo figcaption>span{white-space:normal}
html:not([lang=ko]) .black-intro-heading>p{flex-shrink:0}
/* CJK headings have no spaces to break at: balance the lines so a single glyph never dangles on its own line. */
html[lang^=zh] h1,html[lang^=zh] h2,html[lang^=zh] h3,html[lang=ja] h1,html[lang=ja] h2,html[lang=ja] h3{text-wrap:balance}
html:is([lang=en],[lang=id]) .hero h1{font-size:clamp(34px,3vw,48px)}
html:is([lang=en],[lang=id]) .section-top h2{font-size:clamp(34px,3.8vw,54px)}
@media(max-width:1200px){
 .header{gap:18px;padding-inline:24px}
 .header nav{gap:17px}
 .header nav>a{font-size:12px}
 .header nav .button{padding-inline:16px;gap:16px}
}
@media(max-width:1100px){
 .header nav{position:absolute;left:0;right:0;top:var(--header-height);background:#0a160ef5;backdrop-filter:blur(20px);padding:20px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #405a46;display:none;max-height:calc(100dvh - 140px);overflow:auto}
 .header.menu-open nav{display:flex}
 .header nav>a:not(.button){display:block;font-size:17px;padding:15px 5px;border-bottom:1px solid var(--line)}
 .header nav .button{margin-top:20px}
 .site-languages{margin-left:auto}
 .menu-toggle>span{height:1px;background:#fff;width:22px;transition:transform .2s}
 .menu-open .menu-toggle>span:first-child{transform:translateY(3.5px) rotate(45deg)}
 .menu-open .menu-toggle>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
 .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;padding:10px;border:1px solid #ffffff35;background:#04110950;color:white;cursor:pointer}
}
@media(max-width:800px){
 .header{gap:12px;padding-inline:20px}
 .site-languages{font-size:12px;gap:6px}
 .site-languages>span{display:none}
 html:not([lang=ko]) .black-intro-heading>p{flex-shrink:1}
 html:is([lang=en],[lang=id]) .hero h1,html:is([lang=en],[lang=id]) .section-top h2{font-size:clamp(32px,7.9vw,44px)}
 html[lang=ja] .hero h1,html[lang^=zh] .hero h1{font-size:clamp(28px,7.4vw,44px)}
 html[lang=ja] .section-top h2,html[lang^=zh] .section-top h2{font-size:clamp(30px,7.8vw,44px)}
 html:is([lang=en],[lang=id]) .black-intro-specs dt{font-size:11px;line-height:1.5;min-height:33px}
 html:not([lang=ko]) .black-film-caption{flex-wrap:wrap}
}
@media(max-width:380px){
 .header{padding-inline:12px;gap:8px}
 .header .brand{gap:7px}
 .header .brand img{width:82px}
 .header .brand-24{font-size:32px}
 .site-languages{gap:4px;font-size:11px}
}

/* English, Chinese, Japanese and Indonesian menu labels are wider than Korean. Beside the five-language switcher and
   the community link the full menu no longer fits the header's 1424px content width (it wrapped to two lines and squeezed
   the consultation button even at 1920px), so those pages keep the compact menu button on every desktop width. */
@media(min-width:1101px){
 html:not([lang=ko]) .header nav{position:absolute;left:0;right:0;top:var(--header-height);background:#0a160ef5;backdrop-filter:blur(20px);padding:20px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #405a46;display:none;max-height:calc(100dvh - 140px);overflow:auto}
 html:not([lang=ko]) .header.menu-open nav{display:flex}
 html:not([lang=ko]) .header nav>a:not(.button){display:block;font-size:17px;padding:15px 5px;border-bottom:1px solid var(--line)}
 html:not([lang=ko]) .header nav .button{margin-top:20px}
 html:not([lang=ko]) .site-languages{margin-left:auto}
 html:not([lang=ko]) .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;padding:10px;border:1px solid #ffffff35;background:#04110950;color:white;cursor:pointer}
 html:not([lang=ko]) .menu-toggle>span{height:1px;background:#fff;width:22px;transition:transform .2s}
 html:not([lang=ko]) .menu-open .menu-toggle>span:first-child{transform:translateY(3.5px) rotate(45deg)}
 html:not([lang=ko]) .menu-open .menu-toggle>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
/* Korean labels fit on one line only from about 1345px; below that the menu wrapped every item onto two lines.
   Use the compact menu up to 1365px and never let full-menu labels wrap. */
@media(min-width:1101px) and (max-width:1365px){
 html[lang=ko] .header nav{position:absolute;left:0;right:0;top:var(--header-height);background:#0a160ef5;backdrop-filter:blur(20px);padding:20px;flex-direction:column;align-items:stretch;gap:0;border-bottom:1px solid #405a46;display:none;max-height:calc(100dvh - 140px);overflow:auto}
 html[lang=ko] .header.menu-open nav{display:flex}
 html[lang=ko] .header nav>a:not(.button){display:block;font-size:17px;padding:15px 5px;border-bottom:1px solid var(--line)}
 html[lang=ko] .header nav .button{margin-top:20px}
 html[lang=ko] .site-languages{margin-left:auto}
 html[lang=ko] .menu-toggle{display:flex;flex-direction:column;justify-content:center;align-items:center;gap:6px;width:44px;height:44px;padding:10px;border:1px solid #ffffff35;background:#04110950;color:white;cursor:pointer}
 html[lang=ko] .menu-toggle>span{height:1px;background:#fff;width:22px;transition:transform .2s}
 html[lang=ko] .menu-open .menu-toggle>span:first-child{transform:translateY(3.5px) rotate(45deg)}
 html[lang=ko] .menu-open .menu-toggle>span:last-child{transform:translateY(-3.5px) rotate(-45deg)}
}
@media(min-width:1366px){.header nav>a{white-space:nowrap}}

@media(max-width:800px){
 :root{--header-height:120px}
 html{scroll-padding-top:140px}
 .header:has(.site-languages){flex-wrap:wrap;height:auto;min-height:120px;padding-block:8px;row-gap:0}
 .header .site-languages{order:4;width:100%;margin-left:0;justify-content:center;flex-wrap:wrap;gap:0 14px}
 .header .menu-toggle{margin-left:auto}
 .header:has(.site-languages) nav{top:100%}
}

@media(max-width:800px){.inquiry-page main{padding-top:120px}}
@media(max-width:800px){.hero{padding-top:calc(var(--header-height) + 32px)}}