/* Shared language controls remain visible when the main navigation collapses. */
.language-switcher{display:flex;align-items:center;gap:3px;flex-shrink:0;white-space:nowrap;font-size:12px;line-height:1.4}
.language-switcher a{display:inline-flex;align-items:center;justify-content:center;padding:6px 8px;border:1px solid transparent;border-radius:5px;opacity:.65;color:inherit}
.language-switcher a:hover{opacity:1}
.language-switcher a[aria-current="page"]{border-color:currentColor;opacity:1;font-weight:700}
header .language-switcher{display:flex}
/* Keep each desktop navigation label and the wordmark on one line. */
.nav .mark,.nav .nav-links,.nav .nav-links a{flex-shrink:0;white-space:nowrap}
header:not(.nav)>nav:not(.language-switcher) a,header:not(.nav)>.contact{white-space:nowrap}
html:lang(en) body{word-break:normal;overflow-wrap:break-word}
html:lang(ja) body{word-break:normal;overflow-wrap:break-word;line-break:strict;--body:'Noto Sans JP','PretendardVariable',sans-serif;font-family:'Noto Sans JP',sans-serif}
html:lang(ja){--display:'Archivo','Noto Sans JP',sans-serif}
html:lang(en) .hero h1{letter-spacing:-.045em}
html:lang(en) .scene-copy h2{font-size:clamp(24px,2.8vw,43px);line-height:1.2}
html:lang(en) .hero-text h1{font-size:clamp(46px,5.7vw,90px);line-height:1.12}
html:lang(ja) .hero-text h1{font-size:clamp(40px,5.8vw,92px);line-height:1.35;letter-spacing:-.04em}
html:lang(en) .worker-panel{max-width:340px}
html:lang(en) .product-tabs button{white-space:normal}
html:lang(en) .timeline button{white-space:normal}
html:lang(en) .beacon-label{min-width:145px}
@media(max-width:1320px){.nav .mark span{display:none}.nav-in{gap:16px}.nav-links{gap:18px}}
@media(min-width:1101px){
  html:lang(en) .nav-in,html:lang(ja) .nav-in{max-width:1440px;gap:20px}
  html:lang(en) .nav-links,html:lang(ja) .nav-links{gap:24px}
}
@media(min-width:1101px) and (max-width:1320px){
  html:lang(en) .nav-in,html:lang(ja) .nav-in{gap:14px}
  html:lang(en) .nav-links,html:lang(ja) .nav-links{gap:14px;font-size:13px}
}
@media(max-width:1100px){.nav .nav-links{display:none}header:not(.nav)>nav:not(.language-switcher){display:none}}
@media(max-width:700px){
  header:not(.nav){display:flex;flex-wrap:wrap;gap:12px;align-items:center}
  header:not(.nav)>.language-switcher{margin-left:auto}
  header:not(.nav)>.contact{flex-basis:100%;text-align:right;margin:0;font-size:12px}
  html:lang(en) .hero-text h1{font-size:clamp(36px,9vw,60px)}
  html:lang(ja) .hero-text h1{font-size:clamp(34px,8.5vw,56px)}
  html:lang(en) .scene-copy h2{font-size:26px}
  html:lang(en) .scene-copy p{font-size:12px;line-height:1.6}
  .language-switcher{font-size:11px}
  .language-switcher a{padding:5px 6px}
}
@media(max-width:560px){
  .nav-in{flex-wrap:wrap;gap:10px 12px}
  .nav .language-switcher{margin-left:auto}
  .nav-in>.pill{padding:6px 12px;font-size:11px;margin-left:auto}
  html:lang(en) .spec b{font-size:22px}
  html:lang(en) .cmp-tag{font-size:10px;letter-spacing:0}
  html:lang(en) .readout .k{font-size:13px}
  html:lang(en) .worker-panel{margin-top:10px}
}
/* Translated scenario titles need the full width on small screens. */
@media(max-width:700px){
  .scene-copy .scene-counter{position:static;display:flex;align-items:baseline;gap:8px;text-align:left;margin-top:8px}
  .scene-copy .scene-counter strong{font-size:22px;line-height:1.2}
  .scene-copy .scene-counter span{font-size:10px;max-width:none;margin:0}
  html:lang(en) .scene-copy h2{font-size:23px}
}