/* JUBOK final direction · selected 2026-09-01
   Long, gradual photographic fade + restrained bright corporate surfaces. */

/* Keep the 1920px hero canvas centered on a clean white page at QHD widths. */
body.final-main,
body.final-company,
body.final-business{background:#fff!important}

/* Final main: keep the approved company-language layout and make every hero image unique. */
.final-selected-main .final-main .hero-slide:nth-child(2){
  background-image:url('./main-build-hero.webp')!important;
  background-position:center!important;
}
.final-selected-main .final-main .hero-slide:nth-child(3){
  background-image:url('./main-solar-hero-optimized.webp')!important;
  background-position:center!important;
}
.final-selected-main .final-main .biz-card:nth-child(1) img{object-position:center 42%}
.final-selected-main .final-main .biz-card:nth-child(2) img{object-position:center 38%}
.final-selected-main .final-main .jbx-value-item:nth-child(1){--value-image:url('./main-build-hero.webp')}
.final-selected-main .final-main .jbx-value-item:nth-child(2){--value-image:url('./main-steel-hero.webp')}
.final-selected-main .final-main .jbx-value-item:nth-child(3){--value-image:url('./gallery-lotte.webp')}
.final-selected-main .final-main .jbx-value-item:nth-child(4){--value-image:url('./main-solar-hero-optimized.webp')}
.final-selected-main .final-main .jbx-flow-media.steel{background-image:url('./main-steel-hero.webp')}
.final-selected-main .final-main .jbx-flow-media.build{background-image:url('./main-build-hero.webp')}
.final-selected-main .final-main .jbx-flow-media.solar{background-image:url('./main-solar-hero-optimized.webp')}

/* A scroll container above a sticky element prevents the history stage from pinning. */
.final-selected-main .final-main main#top{overflow:clip visible}

/* Bright five-row history used directly below the main performance figures. */
.final-main .main-history{
  position:relative;
  height:245svh;
  overflow:visible;
  background:
    radial-gradient(ellipse 54% 30% at 10% 25%,rgba(117,101,200,.065),transparent 74%),
    radial-gradient(ellipse 50% 28% at 90% 70%,rgba(101,174,188,.07),transparent 74%),
    linear-gradient(180deg,#f7f9fb 0%,#fff 42%,#f5f8fa 100%);
  color:#111c26;
}
.final-main .main-history::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  opacity:.28;
  background-image:
    linear-gradient(rgba(23,59,99,.07) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,59,99,.065) 1px,transparent 1px);
  background-size:160px 74px;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent);
  mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent);
}
.final-main .main-history-sticky{
  position:sticky;
  top:0;
  height:100svh;
  min-height:100svh;
  padding:clamp(108px,11vh,145px) 0 54px;
  display:flex;
  align-items:center;
}
.final-main .main-history .wrap{position:relative;z-index:1}
.final-main .main-history-head{text-align:center}
.final-main .main-history-head .eyebrow{font-size:15px;color:#173b63}
.final-main .main-history-head h2{
  margin-top:18px;
  font-size:clamp(46px,4.55vw,66px);
  font-weight:700;
  line-height:1.2;
  letter-spacing:-.045em;
}
.final-main .main-history-shell{
  position:relative;
  left:clamp(20px,2.1vw,40px);
  width:min(100%,980px);
  margin:50px auto 0;
  perspective:1000px;
}
.final-main .main-history-viewport{
  height:400px;
  overflow:hidden;
  -webkit-mask-image:linear-gradient(transparent 0,#000 12%,#000 88%,transparent 100%);
  mask-image:linear-gradient(transparent 0,#000 12%,#000 88%,transparent 100%);
}
.final-main .main-history-track{position:relative;width:100%;height:100%}
.final-main .main-history-row{
  position:absolute;
  left:50%;
  top:50%;
  width:min(100%,900px);
  height:74px;
  display:grid;
  grid-template-columns:222px minmax(0,1fr);
  gap:52px;
  align-items:center;
  opacity:0;
  transform:translate(-50%,calc(-50% + 226px)) scale(.9);
  transform-origin:center;
  pointer-events:none;
  transition:opacity .3s ease,transform .4s cubic-bezier(.22,.61,.36,1);
}
.final-main .main-history-row time{display:flex;align-items:baseline;justify-content:flex-end;gap:14px;font-variant-numeric:tabular-nums}
.final-main .main-history-row time strong{font-size:clamp(37px,3.4vw,49px);font-weight:720;letter-spacing:-.045em}
.final-main .main-history-row time small{min-width:25px;font-size:17px;font-weight:650;color:#657382}
.final-main .main-history-row p{font-size:clamp(21px,2.1vw,29px);font-weight:600;line-height:1.35;letter-spacing:-.03em;text-align:left}
.final-main .main-history-row.is-prev-2{z-index:1;opacity:.1;transform:translate(-50%,calc(-50% - 148px)) perspective(800px) rotateX(-10deg) scale(.92)}
.final-main .main-history-row.is-prev{z-index:2;opacity:.28;transform:translate(-50%,calc(-50% - 75px)) perspective(800px) rotateX(-6deg) scale(.97)}
.final-main .main-history-row.is-current{z-index:3;opacity:1;transform:translate(-50%,-50%) scale(1);color:#173b63}
.final-main .main-history-row.is-next{z-index:2;opacity:.3;transform:translate(-50%,calc(-50% + 75px)) perspective(800px) rotateX(6deg) scale(.97)}
.final-main .main-history-row.is-next-2{z-index:1;opacity:.11;transform:translate(-50%,calc(-50% + 148px)) perspective(800px) rotateX(10deg) scale(.92)}
.final-main .main-history-row.is-past{transform:translate(-50%,calc(-50% - 226px)) scale(.9)}
.final-main .main-history-row.is-future{transform:translate(-50%,calc(-50% + 226px)) scale(.9)}

/* Final company: selected photo-led structure with the same long fade as the main. */
.final-selected-company .final-company .opening{
  width:min(100%,1920px)!important;
  height:clamp(700px,46.875vw,900px)!important;
  min-height:700px!important;
  margin:0 auto!important;
  background:#f7f9fb url('./company-hero-execution.webp') center/cover no-repeat!important;
  color:#142536!important;
}
.final-selected-company .final-company .opening::before{
  display:block!important;
  background:
    linear-gradient(90deg,rgba(248,250,252,.995) 0%,rgba(248,250,252,.97) 19%,rgba(247,249,251,.89) 34%,rgba(245,248,250,.69) 49%,rgba(242,246,248,.4) 63%,rgba(238,244,246,.13) 78%,rgba(238,244,246,0) 90%),
    linear-gradient(180deg,rgba(12,30,45,.01),rgba(12,30,45,.12))!important;
}
.final-selected-company .final-company .opening-inner{
  width:min(calc(100% - 104px),1320px)!important;
  padding:clamp(112px,8vw,150px) 55% 86px 0!important;
  justify-content:center!important;
}
.final-selected-company .final-company .opening-inner>.eyebrow{color:#173b63!important}
.final-selected-company .final-company .opening h1{
  max-width:17ch!important;
  color:#142536!important;
  font-size:clamp(46px,4.7vw,70px)!important;
  font-weight:660!important;
  line-height:1.2!important;
  letter-spacing:-.045em!important;
}
.final-selected-company .final-company .value-sub{width:max-content;max-width:none!important;white-space:nowrap;color:#536573!important}

/* Company order starts with a bright, readable history. */
.final-selected-company .final-company .history.scroll-history{
  height:245svh!important;
  background:
    radial-gradient(ellipse 52% 30% at 10% 28%,rgba(117,101,200,.06),transparent 72%),
    radial-gradient(ellipse 48% 28% at 90% 70%,rgba(101,174,188,.065),transparent 72%),
    linear-gradient(180deg,#f7f9fb 0%,#fff 45%,#f5f8fa 100%)!important;
  color:#111c26!important;
}
.final-selected-company .final-company .history.scroll-history::before{
  background-image:
    linear-gradient(rgba(23,59,99,.065) 1px,transparent 1px),
    linear-gradient(90deg,rgba(23,59,99,.06) 1px,transparent 1px)!important;
  background-size:160px 74px!important;
  opacity:.3;
  -webkit-mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent)!important;
  mask-image:linear-gradient(90deg,transparent,#000 32%,#000 68%,transparent)!important;
}
.final-selected-company .final-company .history .eyebrow{font-size:15px!important;color:#173b63!important}
.final-selected-company .final-company .history-intro h2{font-size:clamp(44px,4.4vw,62px)!important;font-weight:700}
.final-selected-company .final-company .history-shell{width:min(100%,940px)!important;margin-top:48px!important}
.final-selected-company .final-company .history-track{transform:translateX(clamp(12px,1.15vw,22px))}
.final-selected-company .final-company .history-row{width:min(100%,860px)!important;grid-template-columns:210px minmax(0,1fr)!important;gap:48px!important}
.final-selected-company .final-company .history-row time strong{font-size:clamp(34px,3.25vw,45px)!important;font-weight:720!important}
.final-selected-company .final-company .history-row time small{font-size:16px!important;color:#657382!important}
.final-selected-company .final-company .history-row p{font-size:clamp(20px,2vw,27px)!important;font-weight:600!important;line-height:1.35!important;color:inherit!important}
.final-selected-company .final-company .history-row.is-current{color:#173b63!important}
.final-selected-company .final-company .history-row.is-prev,
.final-selected-company .final-company .history-row.is-next{opacity:.28!important}
.final-selected-company .final-company .history-row.is-prev-2,
.final-selected-company .final-company .history-row.is-next-2{opacity:.1!important}
.final-selected-company .final-company .history-row{transition:opacity .3s ease,transform .46s cubic-bezier(.22,.61,.36,1)!important}

/* Keep the approved company-concept proportions while showing the three values as words only. */
.final-selected-company .final-company .mission .section-title>.eyebrow{grid-column:1;grid-row:1}
.final-selected-company .final-company .mission .section-title>h2{grid-column:1;grid-row:2}
.final-selected-company .final-company .mission-item:nth-child(1)::before{background-image:url('./company-value-creation.webp')!important}
.final-selected-company .final-company .mission-item:nth-child(2)::before{background-image:url('./company-value-challenge.webp')!important}
.final-selected-company .final-company .mission-item:nth-child(3)::before{background-image:url('./company-value-harmony.webp')!important}
.final-selected-company .final-company .mission-item{gap:0!important}
.final-selected-company .final-company .mission-item p{margin-top:8px!important}
.final-selected-company .final-company .capability-card:nth-child(1)::before{background-image:linear-gradient(90deg,#fff 24%,rgba(255,255,255,.35)),url('./company-capability-rebar.webp')!important}
.final-selected-company .final-company .capability-card:nth-child(2)::before{background-image:linear-gradient(90deg,#fff 24%,rgba(255,255,255,.35)),url('./company-capability-construction.webp')!important}
.final-selected-company .final-company .facts{display:none!important}
.final-selected-company .final-company :is(.capability-card,.ip-item,.network-item)::after{content:none!important}
.final-selected-company .final-company .network-line{grid-template-columns:repeat(4,minmax(0,1fr))!important}
.final-selected-company .final-company .network-item{display:block;min-height:245px;color:inherit;text-decoration:none}
.final-selected-company .final-company .network-item p{min-height:3.4em}
.final-selected-company .final-company .network-item span{font-weight:650;color:#173b63}
.final-selected-company .final-company .network-item:focus-visible{outline:3px solid rgba(23,59,99,.35);outline-offset:3px}

/* Steel / Build / Solar share the selected hero grammar. */
.final-business .division-hero{
  width:min(100%,1920px)!important;
  height:clamp(700px,46.875vw,900px)!important;
  min-height:700px!important;
  margin:0 auto clamp(55px,5vw,82px)!important;
  background:#f7f9fb!important;
  color:#142536!important;
}
.final-business .division-hero::before{
  background-image:
    linear-gradient(90deg,rgba(248,250,252,.995) 0%,rgba(248,250,252,.97) 19%,rgba(247,249,251,.89) 34%,rgba(245,248,250,.69) 49%,rgba(242,246,248,.4) 63%,rgba(238,244,246,.13) 78%,rgba(238,244,246,0) 90%),
    linear-gradient(180deg,rgba(12,30,45,.01),rgba(12,30,45,.12)),
    var(--hero-image)!important;
  background-position:center!important;
}
.final-business .division-hero[data-word="BUILD"]::before{background-position:68% center!important}
.final-business .division-hero[data-word="SOLAR"]::before{background-position:60% center!important}
.final-business .division-hero::after{color:rgba(23,59,99,.035)!important}
.final-business .hero-inner{
  width:min(calc(100% - 104px),1320px)!important;
  margin-inline:auto!important;
  padding:clamp(112px,8vw,150px) 0 86px!important;
  justify-content:center!important;
}
.final-business .hero-inner .eyebrow{color:#173b63!important}
.final-business .division-hero h1{align-self:stretch!important;width:min(100%,860px)!important;max-width:none!important;color:#142536!important;font-size:clamp(46px,4.8vw,72px)!important;text-wrap:pretty!important}
.final-business .division-hero .lead{max-width:600px!important;color:#536573!important}
.final-business .hero-facts span{border-color:rgba(23,59,99,.22)!important;background:rgba(255,255,255,.5)!important;color:#294761!important;backdrop-filter:blur(10px)}

@media(max-width:1100px){
  .final-selected-company .final-company .network-line{grid-template-columns:repeat(2,minmax(0,1fr))!important}
}

@media(max-width:700px){
  .final-main .main-history{height:225svh}
  .final-main .main-history-sticky{padding:92px 0 42px}
  .final-main .main-history-head .eyebrow{font-size:13px}
  .final-main .main-history-head h2{font-size:34px}
  .final-main .main-history-shell{left:0;width:100%;margin-top:34px}
  .final-main .main-history-viewport{height:340px}
  .final-main .main-history-row{height:64px;width:100%;grid-template-columns:108px minmax(0,1fr);gap:14px}
  .final-main .main-history-row time{gap:8px}
  .final-main .main-history-row time strong{font-size:24px}
  .final-main .main-history-row time small{min-width:17px;font-size:12px}
  .final-main .main-history-row p{display:-webkit-box;overflow:hidden;-webkit-box-orient:vertical;-webkit-line-clamp:2;font-size:15px;line-height:1.42}
  .final-main .main-history-row.is-prev-2{transform:translate(-50%,calc(-50% - 128px)) perspective(800px) rotateX(-10deg) scale(.92)}
  .final-main .main-history-row.is-prev{transform:translate(-50%,calc(-50% - 64px)) perspective(800px) rotateX(-6deg) scale(.97)}
  .final-main .main-history-row.is-next{transform:translate(-50%,calc(-50% + 64px)) perspective(800px) rotateX(6deg) scale(.97)}
  .final-main .main-history-row.is-next-2{transform:translate(-50%,calc(-50% + 128px)) perspective(800px) rotateX(10deg) scale(.92)}

  .final-selected-company .final-company .history.scroll-history{height:225svh!important}

  .final-selected-company .final-company .opening,
  .final-business .division-hero{
    width:calc(100% - 10px)!important;
    height:calc(100svh - 10px)!important;
    min-height:650px!important;
    margin:5px!important;
    color:#fff!important;
  }
  .final-selected-company .final-company .opening::before,
  .final-business .division-hero::before{
    background:
      linear-gradient(180deg,rgba(5,15,24,.12),rgba(5,15,24,.3) 45%,rgba(5,15,24,.9)),
      var(--hero-image)!important;
    background-position:center!important;
    background-size:cover!important;
  }
  .final-selected-company .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;
  }
  .final-selected-company .final-company .opening{background-position:center!important}
  .final-selected-company .final-company .opening-inner,
  .final-business .hero-inner{
    width:100%!important;
    padding:130px 24px 72px!important;
    justify-content:flex-end!important;
  }
  .final-selected-company .final-company .opening-inner>.eyebrow,
  .final-business .hero-inner .eyebrow{color:rgba(255,255,255,.82)!important}
  .final-selected-company .final-company .opening h1,
  .final-business .division-hero h1{max-width:340px!important;color:#fff!important;font-size:clamp(31px,8.6vw,38px)!important;line-height:1.25!important}
  .final-selected-company .final-company .value-sub,
  .final-business .division-hero .lead{color:rgba(255,255,255,.8)!important;font-size:15.5px!important;line-height:1.68!important}
  .final-selected-company .final-company .value-sub{width:auto;max-width:340px!important;white-space:normal}
  .final-business .hero-facts span{border-color:rgba(255,255,255,.3)!important;background:rgba(5,15,24,.18)!important;color:#fff!important}

  .final-selected-company .final-company .history .eyebrow{font-size:13px!important}
  .final-selected-company .final-company .history-intro h2{font-size:35px!important}
  .final-selected-company .final-company .history-shell{margin-top:35px!important}
  .final-selected-company .final-company .history-track{transform:none}
  .final-selected-company .final-company .history-row{grid-template-columns:108px minmax(0,1fr)!important;gap:14px!important}
  .final-selected-company .final-company .history-row time strong{font-size:24px!important}
  .final-selected-company .final-company .history-row time small{font-size:12px!important}
  .final-selected-company .final-company .history-row p{font-size:15px!important;line-height:1.42!important}
  .final-selected-company .final-company .network-line{grid-template-columns:1fr!important}
  .final-selected-company .final-company .network-item{min-height:0}
  .final-selected-company .final-company .network-item p{min-height:0}
}

@media(prefers-reduced-motion:reduce){
  .final-main .main-history-row{transition:none!important}
}