/* JUBOK hero comparison routes only. Existing production routes remain unchanged. */

.hero-variant-long-fade .final-main .hero,
.hero-variant-soft-wash .final-main .hero,
.hero-variant-deep-horizon .final-main .hero,
.hero-variant-clear-field .final-main .hero{
  width:min(100%,1920px)!important;
  height:clamp(700px,46.875vw,900px)!important;
  margin:0 auto clamp(60px,6vw,92px)!important;
  overflow:hidden;
  border-radius:0!important;
}

.hero-variant-long-fade .final-main .hero-slide,
.hero-variant-soft-wash .final-main .hero-slide,
.hero-variant-deep-horizon .final-main .hero-slide,
.hero-variant-clear-field .final-main .hero-slide{
  inset:0!important;
  border-radius:0!important;
  -webkit-mask-image:none!important;
  mask-image:none!important;
}

.hero-variant-long-fade .final-main .hero-slide:nth-child(1),
.hero-variant-soft-wash .final-main .hero-slide:nth-child(1),
.hero-variant-deep-horizon .final-main .hero-slide:nth-child(1),
.hero-variant-clear-field .final-main .hero-slide:nth-child(1){
  background-image:url('./main-steel-hero-20260911.webp')!important;
  background-position:center!important;
}

.hero-variant-long-fade .final-main .hero-content,
.hero-variant-soft-wash .final-main .hero-content,
.hero-variant-deep-horizon .final-main .hero-content,
.hero-variant-clear-field .final-main .hero-content{
  width:min(calc(100% - 104px),1320px)!important;
  margin-inline:auto!important;
  padding:clamp(110px,8vw,150px) 55% 88px 0!important;
}

.hero-variant-long-fade .final-main .hero h1,
.hero-variant-soft-wash .final-main .hero h1,
.hero-variant-deep-horizon .final-main .hero h1,
.hero-variant-clear-field .final-main .hero h1{
  max-width:12ch!important;
  font-size:clamp(54px,5.7vw,84px)!important;
  line-height:1.12!important;
  letter-spacing:-.045em!important;
}

.hero-variant-long-fade .final-main .hero-nav,
.hero-variant-soft-wash .final-main .hero-nav,
.hero-variant-deep-horizon .final-main .hero-nav,
.hero-variant-clear-field .final-main .hero-nav{
  left:max(52px,calc(50% - 660px))!important;
  right:auto!important;
  width:min(35%,440px)!important;
  transform:none!important;
}

/* A · Long Fade — the most gradual, editorial transition. */
.hero-variant-long-fade .final-main .hero{
  background:#f7f9fb!important;
  color:#142536!important;
}
.hero-variant-long-fade .final-main .hero::before{
  display:block!important;
  background:
    radial-gradient(ellipse 48% 68% at 12% 48%,rgba(126,110,205,.08),transparent 74%),
    linear-gradient(90deg,#f8fafc 0%,#f7f9fb 44%,#eef3f5 100%)!important;
}
.hero-variant-long-fade .final-main .hero-slide::after{
  background:
    linear-gradient(90deg,rgba(248,250,252,.99) 0%,rgba(248,250,252,.97) 18%,rgba(247,249,251,.88) 34%,rgba(245,248,250,.68) 48%,rgba(242,246,248,.39) 61%,rgba(238,244,246,.14) 74%,rgba(238,244,246,0) 86%),
    linear-gradient(180deg,rgba(12,30,45,.02),rgba(12,30,45,.12))!important;
}
.hero-variant-long-fade .final-main .hero h1{color:#142536!important}
.hero-variant-long-fade .final-main .hero-index{color:#173b63!important}
.hero-variant-long-fade .final-main .hero-index::before{background:#173b63!important}
.hero-variant-long-fade .final-main .hero-nav button{color:rgba(23,59,99,.5)!important;border-color:rgba(23,59,99,.24)!important}
.hero-variant-long-fade .final-main .hero-nav button.is-active{color:#173b63!important}
.hero-variant-long-fade .final-main .hero-nav button::after{background:#173b63!important}

/* B · Soft Wash — the image remains visible across the full canvas. */
.hero-variant-soft-wash .final-main .hero{
  background:#e8eff3!important;
  color:#10283d!important;
}
.hero-variant-soft-wash .final-main .hero-slide{filter:saturate(.78) contrast(.92) brightness(1.04)}
.hero-variant-soft-wash .final-main .hero-slide::after{
  background:
    linear-gradient(90deg,rgba(232,240,244,.96) 0%,rgba(232,240,244,.9) 24%,rgba(232,240,244,.72) 43%,rgba(232,240,244,.49) 62%,rgba(232,240,244,.29) 78%,rgba(232,240,244,.18) 100%),
    linear-gradient(180deg,rgba(255,255,255,.08),rgba(17,48,70,.15))!important;
}
.hero-variant-soft-wash .final-main .hero::before{
  display:block!important;
  background:linear-gradient(115deg,rgba(255,255,255,.48),rgba(199,218,228,.2))!important;
}
.hero-variant-soft-wash .final-main .hero h1{color:#10283d!important}
.hero-variant-soft-wash .final-main .hero-index{color:#315f78!important}
.hero-variant-soft-wash .final-main .hero-index::before{background:#315f78!important}
.hero-variant-soft-wash .final-main .hero-nav button{color:rgba(35,74,96,.5)!important;border-color:rgba(35,74,96,.25)!important}
.hero-variant-soft-wash .final-main .hero-nav button.is-active{color:#234a60!important}
.hero-variant-soft-wash .final-main .hero-nav button::after{background:#234a60!important}

/* C · Deep Horizon — photographic, but the navy veil changes slowly across the width. */
.hero-variant-deep-horizon .final-main .hero{
  background:#0b1c2b!important;
  color:#fff!important;
}
.hero-variant-deep-horizon .final-main .hero-slide{filter:saturate(.88) contrast(.96)}
.hero-variant-deep-horizon .final-main .hero-slide::after{
  background:
    linear-gradient(90deg,rgba(7,25,39,.92) 0%,rgba(7,25,39,.84) 22%,rgba(7,25,39,.7) 42%,rgba(7,25,39,.5) 60%,rgba(7,25,39,.31) 77%,rgba(7,25,39,.2) 100%),
    linear-gradient(180deg,rgba(5,15,24,.03),rgba(5,15,24,.34))!important;
}
.hero-variant-deep-horizon .final-main .hero::before{display:none!important}
.hero-variant-deep-horizon .final-main .hero h1{color:#fff!important}
.hero-variant-deep-horizon .final-main .hero-index{color:rgba(255,255,255,.8)!important}
.hero-variant-deep-horizon .final-main .hero-index::before{background:rgba(255,255,255,.8)!important}
.hero-variant-deep-horizon .final-main .hero-nav button{color:rgba(255,255,255,.54)!important;border-color:rgba(255,255,255,.3)!important}
.hero-variant-deep-horizon .final-main .hero-nav button.is-active{color:#fff!important}
.hero-variant-deep-horizon .final-main .hero-nav button::after{background:#fff!important}

/* D · Clear Field — bright, low-contrast and calm. */
.hero-variant-clear-field .final-main .hero{
  background:#f2f5f6!important;
  color:#17344e!important;
}
.hero-variant-clear-field .final-main .hero-slide{filter:saturate(.65) contrast(.86) brightness(1.08)}
.hero-variant-clear-field .final-main .hero-slide::after{
  background:
    linear-gradient(90deg,rgba(249,250,250,.96) 0%,rgba(249,250,250,.9) 22%,rgba(249,250,250,.78) 44%,rgba(249,250,250,.61) 64%,rgba(249,250,250,.45) 82%,rgba(249,250,250,.34) 100%),
    radial-gradient(ellipse 68% 90% at 72% 42%,rgba(184,218,224,.06),rgba(245,238,244,.18))!important;
}
.hero-variant-clear-field .final-main .hero::before{
  display:block!important;
  background:
    radial-gradient(circle at 18% 36%,rgba(108,151,181,.09),transparent 34%),
    radial-gradient(circle at 48% 65%,rgba(133,111,202,.06),transparent 35%)!important;
}
.hero-variant-clear-field .final-main .hero h1{color:#17344e!important}
.hero-variant-clear-field .final-main .hero-index{color:#42647e!important}
.hero-variant-clear-field .final-main .hero-index::before{background:#42647e!important}
.hero-variant-clear-field .final-main .hero-nav button{color:rgba(31,75,105,.46)!important;border-color:rgba(31,75,105,.2)!important}
.hero-variant-clear-field .final-main .hero-nav button.is-active{color:#1f4b69!important}
.hero-variant-clear-field .final-main .hero-nav button::after{background:#1f4b69!important}

/* Company preview — new photograph, no prism, two-line headline. */
.company-hero-rework .final-company .opening{
  width:min(100%,1920px)!important;
  height:clamp(700px,46.875vw,900px)!important;
  min-height:700px!important;
  margin:0 auto!important;
  padding:0!important;
  place-items:stretch!important;
  background:#0a1722 url('./hero-company-team.webp') center/cover no-repeat!important;
  color:#fff!important;
}
.company-hero-rework .final-company .opening::before{
  display:block!important;
  z-index:0!important;
  background:
    linear-gradient(90deg,rgba(4,17,28,.82) 0%,rgba(4,17,28,.7) 28%,rgba(4,17,28,.42) 52%,rgba(4,17,28,.18) 76%,rgba(4,17,28,.06) 100%),
    linear-gradient(180deg,rgba(5,16,25,.02),rgba(5,16,25,.22))!important;
}
.company-hero-rework .final-company .opening::after,
.company-hero-rework .final-company .wave-field,
.company-hero-rework .final-company .jubok-prism-stage{display:none!important}
.company-hero-rework .final-company .opening-inner{
  display:flex!important;
  width:min(calc(100% - 104px),1180px)!important;
  height:100%!important;
  margin-inline:auto!important;
  padding:clamp(150px,12vw,210px) 0 clamp(92px,9vw,132px)!important;
  flex-direction:column!important;
  align-items:flex-start!important;
  justify-content:flex-end!important;
  text-align:left!important;
}
.company-hero-rework .final-company .opening-inner>.eyebrow{
  order:1!important;
  align-self:flex-start!important;
  margin-bottom:22px!important;
  color:rgba(255,255,255,.72)!important;
}
.company-hero-rework .final-company .opening h1{
  order:2!important;
  max-width:15ch!important;
  margin:0!important;
  color:#fff!important;
  font-size:clamp(48px,5.4vw,78px)!important;
  font-weight:690!important;
  line-height:1.16!important;
  letter-spacing:-.05em!important;
}
.company-hero-rework .final-company .opening h1>span{display:block!important;white-space:nowrap!important}
.company-hero-rework .final-company .opening h1 em{display:none!important}
.company-hero-rework .final-company .value-title{display:none!important}
.company-hero-rework .final-company .value-sub{
  order:3!important;
  max-width:620px!important;
  margin-top:27px!important;
  color:rgba(255,255,255,.78)!important;
  font-size:clamp(16px,1.25vw,19px)!important;
  font-weight:430!important;
  line-height:1.75!important;
}

@media(max-width:1050px){
  .hero-variant-long-fade .final-main .hero-content,
  .hero-variant-soft-wash .final-main .hero-content,
  .hero-variant-deep-horizon .final-main .hero-content,
  .hero-variant-clear-field .final-main .hero-content{padding-right:48%!important}
  .company-hero-rework .final-company .opening h1{font-size:clamp(43px,5.2vw,60px)!important}
}

@media(max-width:700px){
  .hero-variant-long-fade .final-main .hero,
  .hero-variant-soft-wash .final-main .hero,
  .hero-variant-deep-horizon .final-main .hero,
  .hero-variant-clear-field .final-main .hero{
    width:calc(100% - 12px)!important;
    height:calc(100svh - 6px)!important;
    min-height:650px!important;
    margin-inline:6px!important;
    border-radius:0 0 18px 18px!important;
    color:#fff!important;
  }
  .hero-variant-long-fade .final-main .hero-slide,
  .hero-variant-soft-wash .final-main .hero-slide,
  .hero-variant-deep-horizon .final-main .hero-slide,
  .hero-variant-clear-field .final-main .hero-slide{filter:saturate(.88) contrast(.96) brightness(.88)}
  .hero-variant-long-fade .final-main .hero-slide::after,
  .hero-variant-soft-wash .final-main .hero-slide::after,
  .hero-variant-deep-horizon .final-main .hero-slide::after,
  .hero-variant-clear-field .final-main .hero-slide::after{
    background:linear-gradient(180deg,rgba(5,14,22,.12),rgba(5,14,22,.28) 42%,rgba(5,14,22,.88))!important;
  }
  .hero-variant-long-fade .final-main .hero::before,
  .hero-variant-soft-wash .final-main .hero::before,
  .hero-variant-deep-horizon .final-main .hero::before,
  .hero-variant-clear-field .final-main .hero::before{display:none!important}
  .hero-variant-long-fade .final-main .hero-content,
  .hero-variant-soft-wash .final-main .hero-content,
  .hero-variant-deep-horizon .final-main .hero-content,
  .hero-variant-clear-field .final-main .hero-content{width:100%!important;padding:0 24px 145px!important}
  .hero-variant-long-fade .final-main .hero h1,
  .hero-variant-soft-wash .final-main .hero h1,
  .hero-variant-deep-horizon .final-main .hero h1,
  .hero-variant-clear-field .final-main .hero h1{max-width:none!important;color:#fff!important;font-size:clamp(39px,10.8vw,43px)!important;line-height:1.08!important}
  .hero-variant-long-fade .final-main .hero-index,
  .hero-variant-soft-wash .final-main .hero-index,
  .hero-variant-deep-horizon .final-main .hero-index,
  .hero-variant-clear-field .final-main .hero-index{color:rgba(255,255,255,.82)!important}
  .hero-variant-long-fade .final-main .hero-index::before,
  .hero-variant-soft-wash .final-main .hero-index::before,
  .hero-variant-deep-horizon .final-main .hero-index::before,
  .hero-variant-clear-field .final-main .hero-index::before{background:#fff!important}
  .hero-variant-long-fade .final-main .hero-nav,
  .hero-variant-soft-wash .final-main .hero-nav,
  .hero-variant-deep-horizon .final-main .hero-nav,
  .hero-variant-clear-field .final-main .hero-nav{left:24px!important;right:24px!important;width:auto!important}
  .hero-variant-long-fade .final-main .hero-nav button,
  .hero-variant-soft-wash .final-main .hero-nav button,
  .hero-variant-deep-horizon .final-main .hero-nav button,
  .hero-variant-clear-field .final-main .hero-nav button{color:rgba(255,255,255,.55)!important;border-color:rgba(255,255,255,.35)!important}
  .hero-variant-long-fade .final-main .hero-nav button.is-active,
  .hero-variant-soft-wash .final-main .hero-nav button.is-active,
  .hero-variant-deep-horizon .final-main .hero-nav button.is-active,
  .hero-variant-clear-field .final-main .hero-nav button.is-active{color:#fff!important}
  .hero-variant-long-fade .final-main .hero-nav button::after,
  .hero-variant-soft-wash .final-main .hero-nav button::after,
  .hero-variant-deep-horizon .final-main .hero-nav button::after,
  .hero-variant-clear-field .final-main .hero-nav button::after{background:#fff!important}

  .company-hero-rework .final-company .opening{
    width:calc(100% - 10px)!important;
    height:calc(100svh - 10px)!important;
    min-height:650px!important;
    margin:5px!important;
    background-position:58% center!important;
  }
  .company-hero-rework .final-company .opening::before{
    background:linear-gradient(180deg,rgba(5,15,24,.12),rgba(5,15,24,.3) 45%,rgba(5,15,24,.9))!important;
  }
  .company-hero-rework .final-company .opening-inner{
    width:100%!important;
    padding:130px 24px 74px!important;
  }
  .company-hero-rework .final-company .opening h1{
    max-width:340px!important;
    font-size:clamp(28px,8.2vw,34px)!important;
    line-height:1.28!important;
  }
  .company-hero-rework .final-company .opening h1>span{white-space:normal!important}
  .company-hero-rework .final-company .value-sub{margin-top:21px!important;font-size:15.5px!important;line-height:1.7!important}
}

@media(prefers-reduced-motion:reduce){
  .hero-variant-long-fade .final-main .hero-slide,
  .hero-variant-soft-wash .final-main .hero-slide,
  .hero-variant-deep-horizon .final-main .hero-slide,
  .hero-variant-clear-field .final-main .hero-slide{transition:none!important}
}