/* Cache-busted navigation geometry shared with the React header. */
:root {
  --nlf-header-shell-height:5.3125rem;
  --nlf-header-nav-height:3.25rem;
  --nlf-header-nav-font-size:clamp(.76rem,.75vw,.84rem);
  --nlf-header-nav-font-weight:600;
  --nlf-header-nav-line-height:1;
  --nlf-wordmark-optical-offset:calc(clamp(11.5rem, 15vw, 14.5rem) * .0768875);
  scrollbar-gutter:stable;
}
.content-header {
  height:var(--nlf-header-shell-height);
  border-bottom:1px solid transparent;
  background:#fcfbf8;
  color:#0b1b2b;
  backdrop-filter:none;
  transition:opacity 320ms cubic-bezier(.22,1,.36,1),background-color 320ms cubic-bezier(.22,1,.36,1),color 320ms cubic-bezier(.22,1,.36,1),box-shadow 320ms cubic-bezier(.22,1,.36,1);
}
.has-light-header-surface .content-header,
.has-light-header-surface .content-header.is-at-top { border-bottom-color:#d6ddd9; background:#fcfbf8; box-shadow:0 .5rem 1.5rem rgb(11 27 43 / 7%); color:#0b1b2b; }
.content-header.is-scrolled { border-bottom-color:#d6ddd9; background:#fcfbf8; box-shadow:0 .75rem 2.25rem rgb(11 27 43 / 9%); color:#0b1b2b; }
.content-header.is-over-hero { border-bottom-color:transparent; background:transparent; box-shadow:none; color:#fcfbf8; }
.content-header.is-over-hero .content-brand::before { background-image:url("/brand/nattaphak-wordmark-light.svg"); }
.content-header.is-over-hero :is(.content-primary>a,.content-languages a,.content-mobile-menu>summary,.a11y-control__trigger) { color:#fcfbf8; }
.content-header.is-over-hero .content-languages,
.content-header.is-over-hero .content-mobile-languages { border-color:transparent; background:transparent; }
.content-header.is-over-hero .content-mobile-languages > a { color:#fcfbf8; }
.content-header.is-over-hero .content-mobile-languages > a.active { background:rgb(252 251 248 / 16%); color:#fcfbf8; }
.content-header.is-over-hero .content-primary>a::after { background:#a98747; }
.content-header.is-over-hero .content-languages a.active { background:rgb(252 251 248 / 16%); color:#fcfbf8; }
.content-header.is-over-hero .content-consult { background:#fcfbf8; color:#0b1b2b; }
.has-dark-header-hero .content-main { padding-top:0; }
.has-dark-header-hero :is(.content-hero,.service-ssr__hero,.place-hero) { padding-top:var(--nlf-header-shell-height); }
.content-header-inner { padding-inline:var(--gutter,clamp(1.25rem,4vw,4.75rem)); }
.content-header-inner,.content-header-primary { height:100%; min-height:var(--nlf-header-shell-height); }
.content-header .content-brand { min-height:3.75rem; margin-left:calc(var(--nlf-wordmark-optical-offset) * -1); }
.content-header .content-primary > a {
  min-height:var(--nlf-header-nav-height);
  padding-inline:clamp(.55rem,.82vw,.8rem);
  font-size:var(--nlf-header-nav-font-size);
  font-weight:var(--nlf-header-nav-font-weight);
  line-height:var(--nlf-header-nav-line-height);
}
.content-header .content-languages a { font-weight:600; }
html[lang="ja"] .content-header :is(.content-primary > a,.content-languages a,.content-consult) { font-weight:600; }
.content-mobile-menu > summary {
  position: relative;
  width: var(--content-menu-control, 2.75rem);
  height: var(--content-menu-control, 2.75rem);
}

.content-mobile-menu > summary::before,
.content-mobile-menu > summary::after {
  position: absolute;
  right: calc((var(--content-menu-control, 2.75rem) - 1.45rem) / 2);
  width: 1.45rem;
  height: 1px;
  border: 0;
  background: currentColor;
  content: "";
  transform-origin: center;
  transition: transform .2s ease-out, top .2s ease-out, width .2s ease-out;
}

.content-mobile-menu > summary::before { top: calc(50% - .22rem); }
.content-mobile-menu > summary::after { top: calc(50% + .25rem); width: calc(1.45rem * .72); }
.content-mobile-menu[open] > summary::before,
.content-mobile-menu[open] > summary::after { top: 50%; width: 1.45rem; }
.content-mobile-menu[open] > summary::before { transform: rotate(45deg); }
.content-mobile-menu[open] > summary::after { transform: rotate(-45deg); }

@media (min-width: 761px) and (max-width: 1179px) {
  .content-mobile-menu { --content-menu-control: 3.25rem; }
}

@media (max-width:760px) {
  :root { --nlf-header-shell-height:6.75rem; --nlf-wordmark-optical-offset:clamp(.625rem,2.77vw,.875rem); }
  .content-header-inner { padding-inline:var(--gutter,.875rem); }
  .content-mobile-languages { margin-inline:-.875rem; }
  .content-header { height:var(--nlf-header-shell-height); }
  .content-header,
  .content-header.is-scrolled,
  .has-light-header-surface .content-header,
  .has-light-header-surface .content-header.is-over-hero { border-bottom-color:transparent; }
  .content-header-inner { min-height:var(--nlf-header-shell-height); }
  .content-header-primary { min-height:4.25rem; height:4.25rem; }
  .content-header .content-brand { min-height:3.25rem; }
  .has-light-header-surface .content-header,
  .has-light-header-surface .content-header.is-over-hero { border-bottom-color:#d6ddd9; background:#fcfbf8; box-shadow:0 .5rem 1.5rem rgb(11 27 43 / 7%); color:#0b1b2b; }
  .has-light-header-surface .content-header.is-over-hero .content-brand::before { background-image:url("/brand/nattaphak-wordmark.svg"); }
  .has-light-header-surface .content-header.is-over-hero :is(.content-primary>a,.content-languages a,.content-mobile-menu>summary,.a11y-control__trigger) { color:#0b1b2b; }
  .has-light-header-surface .content-header.is-over-hero .content-consult { background:#0b1b2b; color:#fcfbf8; }
  .has-light-header-surface .content-header.is-over-hero .content-mobile-languages { border-top-color:transparent; background:#fcfbf8; }
  .has-light-header-surface .content-header.is-over-hero .content-mobile-languages>a { color:#304454; }
  .has-light-header-surface .content-header.is-over-hero .content-mobile-languages>a.active { background:#0b1b2b; color:#fcfbf8; }
}

@media (prefers-reduced-motion: reduce) {
  .content-mobile-menu > summary::before,
  .content-mobile-menu > summary::after { transition-duration: .01ms; }
}