/* Shared language control. Keep it outside menus hidden on small screens. */
.language-switcher[hidden] { display: none; }
.language-switcher { flex: 0 0 auto; justify-self: end; }
.language-switcher select {
  min-height: 44px;
  max-width: 100%;
  padding: 10px 12px;
  border: 1px solid #a5b9c6;
  border-radius: 8px;
  background: #fff;
  color: #17324a;
  font: 500 14px/1.4 "Noto Sans TC", sans-serif;
  cursor: pointer;
  color-scheme: light;
}
.language-switcher select:hover { border-color: #1677b8; background: #f4f8fb; }
.language-switcher select:focus-visible { outline: 3px solid #1677b8; outline-offset: 3px; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; }
.site-header, header > nav {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 20px;
  height: auto;
}
.site-header > .header-links, header .nav-links { justify-content: flex-end; flex-wrap: wrap; gap: 14px; }
header > nav { min-height: 88px; }
header .brand { min-width: 0; }
header:not(.site-header):not(.shell) { display: flex; justify-content: space-between; align-items: center; gap: 16px; }
html[lang="en"] h1, html[lang="en"] h2, html[lang="en"] h3 { letter-spacing: -.025em; }
html[lang="en"] h1 span { white-space: normal; }
html[lang="en"] .hero h1 { font-size: clamp(34px, 4.4vw, 62px); line-height: 1.16; }
html[lang="en"] .hero h1 .accent { font-size: .72em; }
html[lang="en"] .inner-voice::before { content: "Service focus"; }
html[lang="en"] .service-card.recommended::after { content: "Recommended"; }
html[lang="en"] .flow-card ul { columns: 1; }
html[lang="en"] .flow-card li { font-family: inherit; }
html[lang="en"] .overview-status { gap: 12px; }
html[lang="en"] .contact { max-width: 58ch; }
html[lang="en"] .owner-copy p { max-width: 45ch; }
@media (max-width: 1100px) {
  .site-header, header > nav { grid-template-columns: minmax(0, 1fr) auto; gap: 16px; padding-block: 20px; }
  .site-header > .header-links, header .nav-links { grid-column: 1 / -1; grid-row: 2; justify-content: flex-start; }
  .language-switcher { grid-column: 2; grid-row: 1; }
}
@media (max-width: 520px) {
  .site-header > div.language-switcher { width: auto; justify-content: flex-end !important; }
  .site-header > .header-links { width: 100%; }
  .language-switcher select { font-size: 16px; padding-inline: 8px; }
  html[lang="en"] .owner-copy h2 { font-size: 36px; }
  html[lang="en"] .hero h1 { font-size: clamp(30px, 8vw, 42px); }
  html[lang="en"] .overview-status { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  html[lang="en"] .contact { overflow-wrap: anywhere; }
  html[lang="en"] .cta { flex-wrap: wrap; }
}
@media (max-width: 380px) {
  header .brand { gap: 7px; font-size: 16px; }
  header .brand small, header .brand-name small { font-size: 7px; letter-spacing: .08em; }
  header .brand img, header .brand-mark { width: 30px; height: 30px; }
}