/* Reference layout; this file is scoped to the homepage navigation. */
body[data-page=home]{--home-nav-height:72px}
body[data-page=home] #mainNav{height:var(--home-nav-height);padding-inline:clamp(24px,4vw,80px);gap:24px;flex-wrap:nowrap;transition:background-color .25s ease,color .25s ease,border-color .25s ease,box-shadow .25s ease}
body[data-page=home] #mainNav .nav-logo{--header-logo-width:190px;flex:0 0 202px;min-height:60px;background:transparent;border-radius:0}
body[data-page=home] #mainNav .nav-links{gap:clamp(0px,.35vw,8px);margin-inline:auto}
body[data-page=home] #mainNav .nav-links a{height:72px;padding-inline:clamp(8px,.7vw,15px);font-size:clamp(13px,1vw,16px);white-space:nowrap;letter-spacing:0;color:var(--kcon-navy)}
body[data-page=home] .nav-actions{display:flex;align-items:center;gap:clamp(16px,1.5vw,30px);flex:none}
body[data-page=home] #mainNav .lang-toggle{border:0;border-radius:0;margin:0;overflow:visible;background:none}
body[data-page=home] #mainNav .lang-btn{background:none;color:var(--kcon-navy);padding:8px 2px;font-size:13px;letter-spacing:.5px;border:0;font-weight:500}
body[data-page=home] #mainNav .lang-btn.active{font-weight:800}
body[data-page=home] #mainNav .lang-btn:first-child{border-right:1px solid currentColor;padding-right:10px;margin-right:8px}
body[data-page=home] #mainNav .nav-phone{display:block;background:none;padding:8px 0;white-space:nowrap;font-size:14px;color:var(--kcon-navy);font-weight:600}
body[data-page=home] .nav-quote{display:flex;align-items:center;justify-content:center;white-space:nowrap;min-height:46px;padding:11px 24px;border-radius:999px;background:var(--kcon-navy);color:#fff;text-decoration:none;font-size:13px;font-weight:700;transition:background-color .25s ease,color .25s ease}
body[data-page=home] #mainNav .hamburger{margin-left:0}
/* The negative margin lets the original photo extend behind the header.
   Its added 72px replaces the same space: the hero's bottom remains stable. */
body.nav-over-hero #mainNav{margin-bottom:calc(-1 * var(--home-nav-height));background:transparent;border-color:transparent;box-shadow:none!important}
body.nav-over-hero #mainNav:before{content:'';position:absolute;inset:0;z-index:-1;pointer-events:none;background:linear-gradient(180deg,#071d4366,transparent)}
body.nav-over-hero #mainNav .nav-links a,body.nav-over-hero #mainNav .nav-phone,body.nav-over-hero #mainNav .lang-btn{color:#fff}
body.nav-over-hero #mainNav .hamburger span{background:#fff}
body.nav-over-hero #mainNav .nav-quote{background:#fff;color:var(--kcon-navy)}
body.nav-over-hero.nav-scrolled #mainNav{background:#fff;border-bottom:1px solid #dce3ec;box-shadow:0 2px 12px #0a2a5e12!important}
body.nav-over-hero.nav-scrolled #mainNav:before{opacity:0}
body.nav-over-hero.nav-scrolled #mainNav .nav-links a,body.nav-over-hero.nav-scrolled #mainNav .nav-phone,body.nav-over-hero.nav-scrolled #mainNav .lang-btn{color:var(--kcon-navy)}
body.nav-over-hero.nav-scrolled #mainNav .hamburger span{background:var(--kcon-blue)}
body.nav-over-hero.nav-scrolled #mainNav .nav-quote{background:var(--kcon-navy);color:#fff}
body.nav-over-hero .hero-content{padding-top:calc(32px + var(--home-nav-height))}
@media(min-width:768px){
 body.nav-over-hero .hero-picture{height:calc(clamp(540px,56.64vw,580px) + var(--home-nav-height))}
 body.nav-over-hero .hero-content{padding-top:calc(40px + var(--home-nav-height))}
}
@media(min-width:1024px){body.nav-over-hero .hero-picture{height:calc(clamp(580px,min(48vw,calc(100svh - var(--hero-occupied-height,72px) - 2px)),860px) + var(--home-nav-height))}}
@media(max-width:1399px){
 body[data-page=home] #mainNav{gap:20px;padding-inline:clamp(22px,3vw,40px)}
 body[data-page=home] #mainNav .nav-links{display:none}
 body[data-page=home] #mainNav .hamburger{display:flex}
 body[data-page=home] .nav-actions{margin-left:auto;gap:24px}
 body[data-page=home] .mobile-menu{top:var(--home-nav-height)}
}
@media(max-width:767px){
 body[data-page=home]{--home-nav-height:60px}
 body[data-page=home] #mainNav{padding-inline:16px;gap:12px}
 body[data-page=home] #mainNav .nav-logo{--header-logo-width:166px;flex-basis:180px;min-height:55px}
 body[data-page=home] #mainNav .header-company-name{font-size:9.5px}
 body[data-page=home] #mainNav .nav-phone,body[data-page=home] .nav-quote{display:none}
 body[data-page=home] .nav-actions{gap:0}
 body[data-page=home] #mainNav .lang-btn{font-size:12px}
}
@media(max-width:359px){body[data-page=home] #mainNav{padding-inline:12px;gap:8px}body[data-page=home] #mainNav .nav-logo{--header-logo-width:140px;flex-basis:150px}body[data-page=home] #mainNav .header-company-name{font-size:8.5px}body[data-page=home] #mainNav .lang-btn:first-child{padding-right:8px;margin-right:6px}}
@media(prefers-reduced-motion:reduce){body[data-page=home] #mainNav,body[data-page=home] .nav-quote{transition:none}}

/* Transparent surround; both artwork layers share an identical source canvas. */
body[data-page=home] #mainNav .logo-on-dark{position:absolute;left:0;top:50%;transform:translateY(-50%);opacity:0;pointer-events:none;transition:opacity .25s ease}
body[data-page=home] #mainNav .logo-on-light{opacity:1;transition:opacity .25s ease}
body.nav-over-hero:not(.nav-scrolled) #mainNav .logo-on-light{opacity:0}
body.nav-over-hero:not(.nav-scrolled) #mainNav .logo-on-dark{opacity:1}
body.nav-over-hero:not(.nav-scrolled) #mainNav .header-company-name{color:#fff}
@media(prefers-reduced-motion:reduce){body[data-page=home] #mainNav .logo-on-dark,body[data-page=home] #mainNav .logo-on-light{transition:none}}