/* Four continuous cut panels. Only the panel boundary is slanted, never the image. */
.application-scenes-hero{
 --scene-cut:10vw;
 position:relative;
 isolation:isolate;
 min-height:100svh;
 display:flex;
 align-items:center;
 overflow:hidden;
 background:#12392f;
 color:#fff;
}
.application-scene-stage,.application-scene-panels,.application-scene-shade{position:absolute;inset:0}
.application-scene-stage{z-index:0}
.application-scene-panels{overflow:hidden}
.application-scene-panel{
 position:absolute;
 top:0;
 bottom:0;
 width:calc(25% + var(--scene-cut) + 1px);
 margin:0;
 overflow:hidden;
 background:#224b40;
 clip-path:polygon(var(--scene-cut) 0,100% 0,calc(100% - var(--scene-cut)) 100%,0 100%);
}
.application-scene-panel:nth-child(1){
 left:0;
 clip-path:polygon(0 0,100% 0,calc(100% - var(--scene-cut)) 100%,0 100%);
}
.application-scene-panel:nth-child(2){left:25%}
.application-scene-panel:nth-child(3){left:50%}
.application-scene-panel:nth-child(4){
 left:75%;
 width:calc(25% + 1px);
 clip-path:polygon(var(--scene-cut) 0,100% 0,100% 100%,0 100%);
}
.application-scene-panel img{
 display:block;
 width:100%;
 height:100%;
 max-width:none;
 object-fit:cover;
 object-position:var(--scene-position,50% 50%);
 transform:scale(1);
 transition:transform 1.1s cubic-bezier(.2,.65,.25,1);
 animation:application-scene-enter 1.25s cubic-bezier(.2,.65,.25,1) var(--scene-delay,0ms) backwards;
}
.application-scene-shade{
 z-index:1;
 pointer-events:none;
 background:
  linear-gradient(180deg,rgba(8,30,24,.87) 0%,rgba(8,30,24,.35) 17%,transparent 40%),
  linear-gradient(90deg,rgba(8,30,24,.81) 0%,rgba(8,30,24,.61) 29%,rgba(8,30,24,.19) 61%,rgba(8,30,24,.04) 100%),
  linear-gradient(0deg,rgba(8,30,24,.94) 0%,rgba(8,30,24,.67) 16%,transparent 40%);
}
.application-scenes-hero .application-scenes-copy{
 position:relative;
 z-index:2;
 padding-block:170px 230px;
 pointer-events:none;
}
.application-scenes-copy>*{pointer-events:auto}
.application-scenes-hero .application-scenes-copy>.eyebrow{
 color:#fff;
 font-size:12px;
 letter-spacing:.15em;
 margin:0 0 28px;
}
.application-scenes-hero .application-scenes-copy h1{
 max-width:1000px;
 width:max-content;
 font-size:clamp(58px,6.1vw,92px);
 font-weight:400;
 line-height:1.06;
 letter-spacing:var(--tracking-heading);
 color:#fff;
 margin:0 0 29px;
 text-wrap:initial;
}
.application-scenes-hero .application-scenes-intro{
 max-width:530px;
 font-size:18px;
 line-height:1.75;
 color:rgba(255,255,255,.94);
 margin:0;
}
.application-scene-links{
 position:absolute;
 z-index:2;
 left:0;
 right:0;
 bottom:75px;
 display:grid;
 grid-template-columns:repeat(4,minmax(0,1fr));
 color:#fff;
}
.application-scene-links>a{
 display:flex;
 flex-direction:column;
 justify-content:flex-end;
 align-items:flex-start;
 min-width:0;
 padding:22px clamp(20px,3.2vw,52px) 0;
 text-decoration:none;
 color:#fff;
}
.application-scene-number{
 display:block;
 width:100%;
 padding-top:15px;
 margin-bottom:18px;
 border-top:1px solid rgba(255,255,255,.52);
 font-size:11px;
 line-height:1.4;
 letter-spacing:.08em;
 color:rgba(255,255,255,.72);
}
.application-scene-label{
 display:block;
 min-width:0;
 transition:transform .6s cubic-bezier(.2,.65,.25,1);
}
.application-scene-label strong{
 display:block;
 font-size:clamp(15px,1.35vw,21px);
 line-height:1.4;
 font-weight:500;
 letter-spacing:-.025em;
}
.application-scene-label>span{
 display:block;
 margin-top:8px;
 font-size:12px;
 line-height:1.5;
 color:rgba(255,255,255,.74);
}
.application-scene-links>a:focus-visible{
 outline:0;
}
.application-scene-links>a:focus-visible .application-scene-label{
 outline:2px solid #fff;
 outline-offset:7px;
}
.application-scenes-hero>.application-scenes-caption{
 position:absolute;
 z-index:2;
 right:clamp(22px,3.2vw,52px);
 bottom:22px;
 margin:0;
 color:rgba(255,255,255,.72);
 font-size:10px;
 line-height:1.5;
 letter-spacing:.045em;
 pointer-events:none;
}
@media(hover:hover) and (pointer:fine){
 .application-scene-panel:hover img,
 .application-scene-stage:has([data-application-scene=retail]:hover) .application-scene-retail img,
 .application-scene-stage:has([data-application-scene=logistics]:hover) .application-scene-logistics img,
 .application-scene-stage:has([data-application-scene=office]:hover) .application-scene-office img,
 .application-scene-stage:has([data-application-scene=distribution]:hover) .application-scene-distribution img{transform:scale(1.035)}
 .application-scene-links>a:hover{color:#fff}
 .application-scene-links>a:hover .application-scene-label{transform:translateY(-4px)}
 .application-scene-links>a:hover .application-scene-number{border-top-color:#fff}
}
@keyframes application-scene-enter{
 from{opacity:.45;transform:scale(1.045)}
 to{opacity:1;transform:scale(1)}
}
@media(max-width:1050px) and (min-width:769px){
 .application-scenes-hero .application-scenes-copy{padding-block:160px 235px}
 .application-scenes-hero .application-scenes-copy h1{font-size:66px}
 .application-scene-links>a{padding-inline:24px}
 .application-scene-label strong{font-size:17px}
 .application-scene-label>span{font-size:11px}
}
@media(max-width:768px){
 .application-scenes-hero{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  justify-content:flex-start;
  min-height:100svh;
  overflow:hidden;
  background:#12392f;
 }
 .application-scenes-hero .application-scenes-copy{
  order:0;
  width:100%;
  padding:145px 24px 40px;
 }
 .application-scenes-hero .application-scenes-copy>.eyebrow{
  font-size:10px;
  letter-spacing:.13em;
  margin-bottom:23px;
 }
 .application-scenes-hero .application-scenes-copy h1{
  width:auto;
  max-width:660px;
  font-size:clamp(36px,8.8vw,59px);
  line-height:1.08;
  letter-spacing:var(--tracking-heading);
  margin-bottom:25px;
 }
 .application-scenes-hero .application-scenes-intro{
  max-width:460px;
  font-size:15px;
  line-height:1.8;
 }
 .application-scene-stage{
  position:relative;
  order:1;
  inset:auto;
  width:100%;
 }
 .application-scene-panels{
  position:relative;
  inset:auto;
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);
  gap:2px;
 }
 .application-scene-panel,.application-scene-panel:nth-child(n){
  position:relative;
  inset:auto;
  width:auto;
  clip-path:none;
 }
 .application-scene-panel:after{
  position:absolute;
  content:"";
  inset:0;
  pointer-events:none;
  background:linear-gradient(0deg,rgba(6,26,21,.9) 0%,rgba(6,26,21,.45) 35%,rgba(6,26,21,.04) 70%);
 }
 .application-scene-panel img{
  width:100%;
  height:100%;
  aspect-ratio:1/1.05;
  object-position:var(--scene-mobile-position,var(--scene-position,50% 50%));
 }
 .application-scene-shade{display:none}
 .application-scene-links{
  inset:0;
  grid-template-columns:repeat(2,minmax(0,1fr));
  grid-template-rows:repeat(2,1fr);
  gap:2px;
 }
 .application-scene-links>a{padding:18px;justify-content:flex-end}
 .application-scene-number{
  border-top:0;
  width:auto;
  margin-bottom:10px;
  padding-top:0;
  font-size:10px;
 }
 .application-scene-label strong{font-size:16px;line-height:1.35;letter-spacing:-.02em}
 .application-scene-label>span{margin-top:7px;font-size:10px;line-height:1.5}
 .application-scenes-hero>.application-scenes-caption{
  position:relative;
  order:2;
  inset:auto;
  padding:17px 24px 21px;
  font-size:9px;
  margin-top:auto;
  text-align:right;
  background:#12392f;
 }
}
@media(max-width:380px){
 .application-scenes-hero .application-scenes-copy{padding:133px 20px 34px}
 .application-scenes-hero .application-scenes-copy h1{font-size:34px}
 .application-scene-links>a{padding:15px}
 .application-scene-label strong{font-size:14px}
 .application-scene-label>span{font-size:9px}
}
@media(prefers-reduced-motion:reduce){
 .application-scene-panel img{animation:none;transition:none;transform:none!important}
 .application-scene-label{transition:none;transform:none!important}
}