/* ========================================================================== 
   Shared header refresh — mountain trailhead sign / 2026-09-09
   Loaded after the existing page and brush-up styles on TOP and lower pages.
   ========================================================================== */

:root{
  --hdr-paper:rgba(252,251,247,.94);
  --hdr-paper-solid:#fcfbf7;
  --hdr-deep:#082f43;
  --hdr-blue:#14658a;
  --hdr-sky:#8edcf7;
  --hdr-line:rgba(8,47,67,.14);
  --hdr-ease:cubic-bezier(.22,1,.36,1);
}

.site-header,
.hero-header{
  min-height:84px;
  padding:12px clamp(18px,2vw,34px);
  isolation:isolate;
  z-index:600;
  border-bottom:0;
  background-color:var(--hdr-paper-solid);
  background-image:
    radial-gradient(circle at 15% -70%,rgba(142,220,247,.22),transparent 38%),
    linear-gradient(105deg,rgba(255,255,255,.98),var(--hdr-paper) 58%,rgba(242,248,250,.95));
  box-shadow:0 8px 28px rgba(8,47,67,.08),inset 0 1px 0 rgba(255,255,255,.9);
  -webkit-backdrop-filter:blur(16px) saturate(108%);
  backdrop-filter:blur(16px) saturate(108%);
  transition:background-color .25s ease,box-shadow .25s ease;
}

.site-header::after,
.hero-header::after{
  content:"";
  position:absolute;
  z-index:2;
  right:clamp(18px,4vw,54px);
  bottom:0;
  left:clamp(18px,4vw,54px);
  height:1px;
  background-image:linear-gradient(90deg,transparent 0,var(--hdr-blue) 18%,var(--hdr-sky) 50%,var(--hdr-blue) 82%,transparent 100%);
  opacity:.72;
  pointer-events:none;
}

body.is-scrolled .site-header,
body.is-scrolled .hero-header{
  background-color:rgba(252,251,247,.98);
  box-shadow:0 12px 32px rgba(8,47,67,.12),inset 0 1px 0 rgba(255,255,255,.95);
}

.izmg-header-spacer{height:84px}

/* Typographic wordmark: quiet English caption above the Japanese name. */
.site-header .brand,
.hero-header .brand{
  position:relative;
  z-index:3;
  flex:0 0 auto;
  min-width:150px;
  padding:2px 0;
  line-height:1.15;
  transition:color .2s ease;
}

.site-header .brand::before,
.hero-header .brand::before,
.site-header .brand::after,
.hero-header .brand::after{content:none}

.site-header .brand small,
.hero-header .brand small{
  color:var(--hdr-blue);
  font-size:8.5px;
  font-weight:700;
  letter-spacing:.28em;
}

.site-header .brand strong,
.hero-header .brand strong{
  margin-top:5px;
  color:var(--hdr-deep);
  font-size:26px;
  font-weight:600;
  letter-spacing:.18em;
}

/* Navigation sits on one quiet surface instead of reading as loose utilities. */
@media(min-width:1081px){
  .site-header .global-nav,
  .hero-header .hero-nav{
    display:flex;
    align-items:center;
    flex-wrap:nowrap;
    gap:3px;
    margin-left:clamp(18px,2.1vw,34px);
    padding:5px;
    border:1px solid rgba(8,47,67,.10);
    border-radius:999px;
    background:rgba(255,255,255,.58);
    box-shadow:inset 0 1px 0 rgba(255,255,255,.9),0 4px 14px rgba(8,47,67,.04);
  }

  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve),
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve){
    position:relative;
    padding:8px 7px 9px;
    border:0;
    border-radius:999px;
    color:var(--hdr-deep);
    font-size:clamp(10.5px,.78vw,12px);
    font-weight:600;
    letter-spacing:.08em;
    white-space:nowrap;
    transition:color .2s ease,background-color .2s ease;
  }

  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve)::after,
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve)::after{
    right:auto;
    bottom:3px;
    left:50%;
    width:22px;
    height:2px;
    border-radius:999px;
    background-color:transparent;
    background-image:linear-gradient(90deg,var(--hdr-blue),var(--hdr-sky));
    transform:translateX(-50%) scaleX(0);
    transform-origin:center;
    transition:transform .28s var(--hdr-ease);
  }

  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):hover,
  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):focus-visible,
  .site-header .global-nav a[aria-current="page"]:not(.nav-reserve):not(.bru-nav-reserve),
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):hover,
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):focus-visible,
  .hero-header .hero-nav a[aria-current="page"]:not(.nav-reserve):not(.bru-nav-reserve){
    color:var(--hdr-blue);
    border-color:transparent;
    background:rgba(20,101,138,.075);
  }

  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):hover::after,
  .site-header .global-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):focus-visible::after,
  .site-header .global-nav a[aria-current="page"]:not(.nav-reserve):not(.bru-nav-reserve)::after,
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):hover::after,
  .hero-header .hero-nav a:not(.nav-ig):not(.nav-reserve):not(.bru-nav-reserve):focus-visible::after,
  .hero-header .hero-nav a[aria-current="page"]:not(.nav-reserve):not(.bru-nav-reserve)::after{
    right:auto;
    left:50%;
    transform:translateX(-50%) scaleX(1);
  }
}

/* One visual language for reservation, phone, Instagram and the menu trigger. */
@media(min-width:901px){
  .site-header .global-nav a.nav-reserve,
  .site-header .global-nav a.bru-nav-reserve,
  .hero-header .hero-nav a.nav-reserve,
  .hero-header .hero-nav a.bru-nav-reserve{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    height:40px;
    padding:0 16px;
    border:1px solid transparent;
    border-radius:4px 16px 4px 16px;
    color:#fff;
    background:#0d536f;
    background-image:linear-gradient(135deg,#0b435e,#176f91);
    box-shadow:0 5px 14px rgba(8,47,67,.18),inset 0 1px 0 rgba(255,255,255,.18);
    font-size:11px;
    letter-spacing:.08em;
    transition:transform .22s var(--hdr-ease),box-shadow .22s ease,background-color .22s ease;
  }

  .site-header .global-nav a.nav-reserve::after,
  .site-header .global-nav a.bru-nav-reserve::after,
  .hero-header .hero-nav a.nav-reserve::after,
  .hero-header .hero-nav a.bru-nav-reserve::after{display:none}

  .site-header .global-nav a.nav-reserve:hover,
  .site-header .global-nav a.bru-nav-reserve:hover,
  .hero-header .hero-nav a.nav-reserve:hover,
  .hero-header .hero-nav a.bru-nav-reserve:hover{
    transform:translateY(-1px);
    box-shadow:0 9px 20px rgba(8,47,67,.24),inset 0 1px 0 rgba(255,255,255,.2);
  }

  .site-header .global-nav .nav-ig,
  .hero-header .hero-nav .nav-ig{
    display:inline-grid;
    width:36px;
    height:36px;
    padding:0;
    place-items:center;
    border:1px solid rgba(8,47,67,.11);
    border-radius:50%;
    color:var(--hdr-deep);
    background:rgba(255,255,255,.82);
    transition:color .2s ease,background-color .2s ease,transform .22s var(--hdr-ease);
  }

  .site-header .global-nav .nav-ig:hover,
  .hero-header .hero-nav .nav-ig:hover{
    color:#fff;
    border-color:var(--hdr-blue);
    background:var(--hdr-blue);
    transform:translateY(-1px);
  }
}

.site-header .bru-tel,
.hero-header .bru-tel{display:none}

@media(min-width:1200px){
  .site-header .bru-tel,
  .hero-header .bru-tel{
    display:flex;
    flex:0 0 auto;
    align-items:center;
    margin-left:auto;
    white-space:nowrap;
  }

  .site-header .bru-tel .n,
  .hero-header .bru-tel .n{
    display:inline-flex;
    flex:0 0 auto;
    align-items:center;
    justify-content:center;
    gap:8px;
    height:42px;
    padding:0 14px;
    border:1px solid rgba(8,47,67,.18);
    border-radius:4px 16px 4px 16px;
    color:var(--hdr-deep);
    background:rgba(255,255,255,.82);
    box-shadow:0 4px 12px rgba(8,47,67,.06),inset 0 1px 0 rgba(255,255,255,.9);
    font-size:16px;
    line-height:1;
    white-space:nowrap;
    transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .22s var(--hdr-ease),box-shadow .22s ease;
  }

  .site-header .bru-tel .n svg,
  .hero-header .bru-tel .n svg{
    flex:0 0 auto;
    width:17px;
    height:17px;
  }

  .site-header .bru-tel .n:hover,
  .hero-header .bru-tel .n:hover{
    color:#fff;
    border-color:var(--hdr-blue);
    background:var(--hdr-blue);
    box-shadow:0 8px 18px rgba(8,47,67,.18);
    transform:translateY(-1px);
  }
}

.site-header .menu-button,
.hero-header .menu-button{
  position:relative;
  display:inline-flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:center;
  gap:9px;
  height:42px;
  margin-left:12px;
  padding:0 15px;
  border:1px solid rgba(8,47,67,.38);
  border-radius:4px 16px 4px 16px;
  color:var(--hdr-deep);
  background:rgba(255,255,255,.86);
  box-shadow:0 4px 12px rgba(8,47,67,.07),inset 0 1px 0 rgba(255,255,255,.92);
  font-size:10px;
  font-weight:700;
  letter-spacing:.16em;
  line-height:1;
  transition:color .2s ease,border-color .2s ease,background-color .2s ease,transform .22s var(--hdr-ease),box-shadow .22s ease;
}

.site-header .menu-button::before,
.hero-header .menu-button::before{
  content:"";
  width:14px;
  height:1px;
  background:currentColor;
  box-shadow:0 5px 0 currentColor;
  transform:translateY(-2.5px);
}

.site-header .menu-button:hover,
.site-header .menu-button:focus-visible,
.hero-header .menu-button:hover,
.hero-header .menu-button:focus-visible{
  color:#fff;
  border-color:var(--hdr-deep);
  background:var(--hdr-deep);
  box-shadow:0 9px 20px rgba(8,47,67,.20);
  transform:translateY(-1px);
}

.site-header .brand:focus-visible,
.hero-header .brand:focus-visible,
.site-header a:focus-visible,
.hero-header a:focus-visible,
.site-header button:focus-visible,
.hero-header button:focus-visible{
  outline:2px solid var(--hdr-sky);
  outline-offset:3px;
}

/* Fold the crowded utility row before it can wrap. MENU opens the full sitemap. */
@media(min-width:901px) and (max-width:1080px){
  .site-header .global-nav:not(.is-open),
  .hero-header .hero-nav:not(.is-open){display:none!important}
  .site-header .menu-button,
  .hero-header .menu-button{margin-left:auto}
}

@media(min-width:1081px) and (max-width:1199px){
  .site-header .menu-button,
  .hero-header .menu-button{margin-left:auto}
}

@media(max-width:900px){
  .site-header,
  .hero-header{
    min-height:72px;
    padding:11px 18px;
    background-color:rgba(252,251,247,.97);
    background-image:
      radial-gradient(circle at 12% -80%,rgba(142,220,247,.20),transparent 46%),
      linear-gradient(105deg,#fff,var(--hdr-paper-solid));
    box-shadow:0 7px 22px rgba(8,47,67,.09);
  }

  .site-header::after,
  .hero-header::after{right:18px;left:18px}

  .izmg-header-spacer{height:72px}

  .site-header .brand,
  .hero-header .brand{
    min-width:0;
    padding-left:0;
  }

  .site-header .brand small,
  .hero-header .brand small{font-size:7.5px;letter-spacing:.23em}

  .site-header .brand strong,
  .hero-header .brand strong{margin-top:4px;font-size:23px;letter-spacing:.16em}

  .site-header .menu-button,
  .hero-header .menu-button{margin-left:auto;padding:0 14px}

  body.nav-open .menu-button::before{display:none}
}

@media(max-width:380px){
  .site-header,
  .hero-header{padding-right:14px;padding-left:14px}
  .site-header .brand small,
  .hero-header .brand small{font-size:7px;letter-spacing:.18em}
  .site-header .brand strong,
  .hero-header .brand strong{font-size:22px}
  .site-header .menu-button,
  .hero-header .menu-button{padding:0 12px}
}

@media(prefers-reduced-motion:reduce){
  .site-header .brand::before,
  .hero-header .brand::before,
  .site-header a,
  .hero-header a,
  .site-header button,
  .hero-header button{transition:none!important}
}