/* JN COS TECH — header / first-section stability fix
   Keeps the header geometry identical before and after common.js loads,
   and removes the desktop hover dead-zone between the header and page. */

:root{
  --header-h:98px!important;
}

.site-header{
  height:98px!important;
  min-height:98px!important;
  margin:0!important;
  overflow:visible!important;
  background:#fff!important;
  border-bottom:1px solid #e8dfd9!important;
  backdrop-filter:none!important;
  -webkit-backdrop-filter:none!important;
}

.site-header + main{
  margin-top:0!important;
}

/* ---------------------------------------------------------
   Shared subpage hero image — HOME IS EXCLUDED
   One approved image is used across every menu-page hero.
   The previous near-opaque ivory overlays were the reason the
   image looked like a flat solid background, so they are reduced.
--------------------------------------------------------- */
body.public-page:not(.home-page) :is(
  .about-hero,
  .product-hero,
  .subpage-hero,
  .oem-hero,
  .contact-hero,
  .inquiry-hero,
  .legal-hero,
  .content-hero
){
  position:relative!important;
  overflow:hidden!important;
  background-color:#e9e1da!important;
  background-image:url('https://cdn.imweb.me/upload/S20260219b829e728b3f2e/d698bde10a91f.jpg?v=20260816-1100')!important;
  background-size:cover!important;
  background-position:center center!important;
  background-repeat:no-repeat!important;
  border-bottom:1px solid rgba(47,32,27,.08)!important;
}

/* Existing page-specific image layers are normalized to the same source. */
body.public-page:not(.home-page) :is(.product-hero,.contact-hero)::before,
body.public-page:not(.home-page) :is(.about-hero-bg,.oem-hero-bg){
  background-image:url('https://cdn.imweb.me/upload/S20260219b829e728b3f2e/d698bde10a91f.jpg?v=20260816-1100')!important;
  background-position:center center!important;
  background-size:cover!important;
  background-repeat:no-repeat!important;
  filter:saturate(.82) contrast(.98)!important;
  opacity:.88!important;
}

/* IMPORTANT: old page styles used 0.9–0.98 ivory masks, which hid the photo.
   Keep only a light readability veil so the supplied image is clearly visible. */
body.public-page:not(.home-page) :is(
  .about-hero,
  .product-hero,
  .subpage-hero,
  .oem-hero,
  .contact-hero
)::after{
  background:linear-gradient(
    90deg,
    rgba(244,239,235,.48) 0%,
    rgba(244,239,235,.32) 52%,
    rgba(244,239,235,.12) 100%
  )!important;
}

/* Keep hero copy above any image/overlay layers. */
body.public-page:not(.home-page) :is(
  .about-hero,
  .product-hero,
  .subpage-hero,
  .oem-hero,
  .contact-hero,
  .inquiry-hero,
  .legal-hero,
  .content-hero
) > .site-container,
body.public-page:not(.home-page) .subpage-hero-grid{
  position:relative!important;
  z-index:2!important;
}

/* Unified hero title scale.
   Subpage titles were 21–30px; this is exactly 20% larger (about 25–36px).
   Home now follows the same scale so every hero title feels consistent. */
html body.public-page main :is(
  .home-hero,
  .about-hero,
  .product-hero,
  .subpage-hero,
  .oem-hero,
  .contact-hero,
  .inquiry-hero,
  .legal-hero,
  .content-hero
) h1{
  font-size:clamp(25px,2.52vw,36px)!important;
  line-height:1.12!important;
}

@media (min-width:1025px){
  .nav-capabilities{
    padding-bottom:0!important;
    margin-bottom:0!important;
  }

  .nav-capabilities::after{
    left:-16px!important;
    right:-16px!important;
    top:100%!important;
    height:8px!important;
  }

  .nav-capabilities-menu{
    margin-top:8px!important;
  }
}

@media (max-width:1024px){
  :root{--header-h:76px!important}

  .site-header{
    height:76px!important;
    min-height:76px!important;
  }

  body.public-page:not(.home-page) :is(
    .about-hero,
    .product-hero,
    .subpage-hero,
    .oem-hero,
    .contact-hero,
    .inquiry-hero,
    .legal-hero,
    .content-hero
  ),
  body.public-page:not(.home-page) :is(.product-hero,.contact-hero)::before,
  body.public-page:not(.home-page) :is(.about-hero-bg,.oem-hero-bg){
    background-position:58% center!important;
  }

  /* Critical mobile navigation fallback. This deliberately uses high specificity
     so desktop dropdown/card rules can never create a left/right split on phones. */
  html body.public-page .site-header .site-nav > .nav-capabilities{
    position:relative!important;
    display:block!important;
    width:100%!important;
    height:auto!important;
    min-height:64px!important;
    margin:0!important;
    padding:0!important;
    overflow:visible!important;
  }

  html body.public-page .site-header .nav-capabilities-trigger{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    justify-content:space-between!important;
    width:100%!important;
    height:64px!important;
    min-height:64px!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid #dfd5ce!important;
    background:#fff!important;
    color:#2f1b13!important;
    font-size:17px!important;
  }

  html body.public-page .site-header .nav-capabilities-menu{
    position:static!important;
    inset:auto!important;
    left:auto!important;
    right:auto!important;
    top:auto!important;
    bottom:auto!important;
    display:none!important;
    float:none!important;
    clear:both!important;
    width:100%!important;
    max-width:none!important;
    min-width:0!important;
    height:auto!important;
    max-height:none!important;
    margin:0!important;
    padding:0!important;
    border:0!important;
    border-bottom:1px solid #dfd5ce!important;
    background:#faf7f5!important;
    box-shadow:none!important;
    opacity:1!important;
    visibility:visible!important;
    pointer-events:auto!important;
    transform:none!important;
  }

  html body.public-page .site-header .nav-capabilities.is-open .nav-capabilities-menu{
    display:block!important;
  }

  html body.public-page .site-header .nav-capabilities-eyebrow,
  html body.public-page .site-header .nav-capability-link > small{
    display:none!important;
  }

  html body.public-page .site-header .nav-capability-link{
    position:relative!important;
    display:flex!important;
    align-items:center!important;
    width:100%!important;
    max-width:none!important;
    min-height:58px!important;
    height:auto!important;
    margin:0!important;
    padding:16px 14px 16px 18px!important;
    border:0!important;
    border-top:1px solid #eee4dd!important;
    background:#faf7f5!important;
    color:#2f1b13!important;
    box-shadow:none!important;
    transform:none!important;
  }

  html body.public-page .site-header .nav-capability-link > span{
    display:block!important;
    flex:1 1 auto!important;
    color:#2f1b13!important;
    font-size:15px!important;
    line-height:1.35!important;
    font-weight:700!important;
  }

  html body.public-page .site-header .nav-capability-link > b{
    position:static!important;
    flex:0 0 auto!important;
    margin-left:auto!important;
    transform:none!important;
    color:#9a745d!important;
  }
}