:root{--navy:#071226;--navy2:#0d1c3d;--gold:#dbb85e;--gold2:#f0dc9d;--white:#f8f4ec;--muted:rgba(241,244,247,.72);--line:rgba(255,255,255,.12)}
*{box-sizing:border-box}html,body{margin:0;min-height:100%;background:#050912;color:var(--white);font-family:Manrope,system-ui,sans-serif}body{overflow:hidden}.shell{min-height:100svh;position:relative;background:#070b14}.topbar{height:92px;position:fixed;z-index:30;left:0;right:0;top:0;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;padding:0 clamp(22px,4vw,70px);border-bottom:1px solid rgba(255,255,255,.08);background:linear-gradient(180deg,rgba(4,8,17,.84),rgba(4,8,17,.45));backdrop-filter:blur(18px)}.logo{justify-self:start}.logo img{width:78px;display:block;filter:drop-shadow(0 8px 18px rgba(0,0,0,.28));animation:logoFloat 6s ease-in-out infinite}.mini-nav{display:flex;gap:8px;padding:6px;border:1px solid rgba(255,255,255,.08);background:rgba(255,255,255,.035);border-radius:999px}.mini-nav a{color:rgba(255,255,255,.76);text-decoration:none;font-size:12px;padding:10px 14px;border-radius:999px;transition:.25s}.mini-nav a:hover{background:rgba(255,255,255,.08);color:#fff}.top-enter{justify-self:end;color:#fff;text-decoration:none;display:flex;align-items:center;gap:12px;font-size:12px}.top-enter b{width:36px;height:36px;border-radius:50%;display:grid;place-items:center;border:1px solid rgba(255,255,255,.14);background:rgba(255,255,255,.05);transition:.3s}.top-enter:hover b{transform:translate(2px,-2px);background:rgba(219,184,94,.16);border-color:rgba(219,184,94,.32)}
.split{height:100svh;display:grid;grid-template-columns:1fr 1fr;position:relative}.panel{position:relative;overflow:hidden;min-width:0}.media,.petro-scene,.shade,.line-grid{position:absolute;inset:0;width:100%;height:100%}.media{object-fit:cover;filter:saturate(.88) contrast(1.05);transform:scale(1.02)}.panel-auto .shade{background:linear-gradient(110deg,rgba(4,9,17,.82) 4%,rgba(4,9,17,.28) 48%,rgba(4,9,17,.64) 100%)}.panel-petro .shade{background:linear-gradient(250deg,rgba(4,9,17,.84) 3%,rgba(8,16,35,.32) 54%,rgba(4,9,17,.74) 100%)}.line-grid{opacity:.32;background-image:linear-gradient(rgba(255,255,255,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.035) 1px,transparent 1px);background-size:52px 52px;mask-image:linear-gradient(to bottom,transparent 8%,#000 30%,#000 82%,transparent)}.petro-scene{background:url('../img/petrochemical-scene.svg') center/cover no-repeat;animation:petroPan 14s ease-in-out infinite alternate;transform:scale(1.03)}.petro-motion span{position:absolute;border-radius:999px;background:linear-gradient(90deg,transparent,rgba(236,207,126,.34),transparent);filter:blur(1px);height:2px;width:34%;right:-35%;animation:pipeGlow 6.8s linear infinite}.petro-motion span:nth-child(1){top:32%;animation-delay:0s}.petro-motion span:nth-child(2){top:54%;width:26%;animation-delay:2.1s}.petro-motion span:nth-child(3){top:72%;width:42%;animation-delay:4s}.panel-content{position:absolute;z-index:4;left:clamp(28px,5vw,92px);right:clamp(28px,5vw,92px);bottom:clamp(92px,11vh,150px);max-width:650px}.panel-content-right{margin-left:auto;text-align:left}.kicker{display:inline-flex;align-items:center;gap:10px;font-size:10px;font-weight:800;letter-spacing:.22em;color:var(--gold2)}.kicker:before{content:"";width:34px;height:1px;background:var(--gold)}h1,h2{font-family:"Space Grotesk",sans-serif;font-size:clamp(48px,5.4vw,88px);line-height:.92;letter-spacing:-.055em;margin:18px 0 22px}h1 em,h2 em{font-style:normal;color:var(--gold2)}.panel-content p{max-width:560px;color:var(--muted);font-size:14px;line-height:1.8;margin:0 0 30px}.hero-btn{width:min(390px,100%);min-height:72px;display:flex;align-items:center;justify-content:space-between;padding:12px 14px 12px 22px;border-radius:22px;text-decoration:none;position:relative;overflow:hidden;isolation:isolate;box-shadow:0 20px 60px rgba(0,0,0,.25);transition:transform .35s cubic-bezier(.22,1,.36,1),box-shadow .35s}.hero-btn:before{content:"";position:absolute;inset:-1px;z-index:-1;background:linear-gradient(110deg,transparent 25%,rgba(255,255,255,.36) 45%,transparent 65%);transform:translateX(-125%);transition:transform .8s cubic-bezier(.22,1,.36,1)}.hero-btn:hover:before{transform:translateX(125%)}.hero-btn:hover{transform:translateY(-5px);box-shadow:0 28px 78px rgba(0,0,0,.34)}.hero-btn span{font-weight:800;font-size:15px;display:flex;flex-direction:column;gap:3px}.hero-btn small{font-size:8px;letter-spacing:.24em;font-weight:800;opacity:.68}.hero-btn i{font-style:normal;width:48px;height:48px;display:grid;place-items:center;border-radius:16px;font-size:20px}.hero-btn-gold{background:linear-gradient(135deg,#f2dfa8,#caa052);color:#111925}.hero-btn-gold i{background:rgba(11,21,37,.1)}.hero-btn-navy{background:linear-gradient(135deg,rgba(20,38,78,.98),rgba(7,19,43,.98));color:#fff;border:1px solid rgba(255,255,255,.1)}.hero-btn-navy i{background:rgba(219,184,94,.16);color:var(--gold2)}.edge-word{position:absolute;right:-110px;top:50%;transform:rotate(90deg) translateY(-50%);transform-origin:center;font-family:"Space Grotesk";font-size:10px;letter-spacing:.38em;color:rgba(255,255,255,.26)}.edge-word-right{right:auto;left:-112px;transform:rotate(-90deg) translateY(-50%)}.center-mark{position:absolute;z-index:10;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;justify-items:center;gap:11px;pointer-events:none}.center-mark img{width:78px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));animation:centerPulse 6s ease-in-out infinite}.center-mark span{width:1px;height:58px;background:linear-gradient(transparent,rgba(255,255,255,.32),transparent)}.intro-footer{position:fixed;z-index:20;left:0;right:0;bottom:0;min-height:46px;padding:10px clamp(20px,3.5vw,58px);display:grid;grid-template-columns:1fr auto 1fr;align-items:center;border-top:1px solid rgba(255,255,255,.08);background:rgba(3,7,14,.58);backdrop-filter:blur(16px);font-size:10px;color:rgba(255,255,255,.55);letter-spacing:.05em}.intro-footer .copyright{text-align:center}.vista-credit{text-align:right}.vista-credit a{color:var(--gold2);font-weight:800;text-decoration:none}.location span{color:var(--gold)}
.panel:after{content:"";position:absolute;inset:0;border:1px solid transparent;transition:.5s;pointer-events:none}.panel:hover:after{border-color:rgba(219,184,94,.16);box-shadow:inset 0 0 90px rgba(219,184,94,.06)}.panel:hover .media{transform:scale(1.055);transition:transform 1.4s cubic-bezier(.22,1,.36,1)}.panel:hover .petro-scene{filter:saturate(1.08) brightness(1.05)}
@keyframes logoFloat{0%,100%{transform:translateY(0) rotate(0)}50%{transform:translateY(-3px) rotate(.7deg)}}@keyframes centerPulse{0%,100%{transform:scale(1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.45))}50%{transform:scale(1.045);filter:drop-shadow(0 10px 32px rgba(219,184,94,.18))}}@keyframes petroPan{0%{transform:scale(1.03) translate3d(-.6%,0,0)}100%{transform:scale(1.075) translate3d(.6%,-.5%,0)}}@keyframes pipeGlow{0%{right:-44%;opacity:0}15%{opacity:1}70%{opacity:.9}100%{right:110%;opacity:0}}
@media(max-width:900px){body{overflow:auto}.shell{min-height:100svh}.topbar{height:78px;grid-template-columns:auto 1fr auto;padding:0 18px}.logo img{width:62px}.mini-nav{display:none}.top-enter span{display:none}.top-enter b{width:42px;height:42px}.split{height:auto;min-height:100svh;grid-template-columns:1fr}.panel{height:50svh;min-height:430px}.panel-content{left:22px;right:22px;bottom:62px}.panel-content h1,.panel-content h2{font-size:clamp(42px,11vw,64px);margin:12px 0 14px}.panel-content p{font-size:12.5px;line-height:1.68;max-width:88%;margin-bottom:18px}.hero-btn{min-height:62px;border-radius:18px;max-width:330px}.hero-btn i{width:42px;height:42px;border-radius:14px}.center-mark{top:50%;}.center-mark img{width:58px;background:rgba(4,9,19,.72);backdrop-filter:blur(12px);padding:8px;border-radius:50%}.center-mark span{display:none}.edge-word{display:none}.intro-footer{position:relative;grid-template-columns:1fr;gap:7px;text-align:center;padding:14px 18px}.intro-footer .copyright,.vista-credit{text-align:center}.panel-auto .shade{background:linear-gradient(100deg,rgba(4,9,17,.84),rgba(4,9,17,.28) 70%,rgba(4,9,17,.64))}.panel-petro .shade{background:linear-gradient(100deg,rgba(4,9,17,.82),rgba(7,15,33,.34) 68%,rgba(4,9,17,.68))}}
@media(max-width:520px){.panel{min-height:420px}.panel-content{bottom:46px}.kicker{font-size:8px}.hero-btn{width:100%}.center-mark{display:none}}
@media(prefers-reduced-motion:reduce){*,*:before,*:after{animation:none!important;transition:none!important;scroll-behavior:auto!important}}


/* v1.1 — petrochemical video + center logo motion */
.panel-petro .petro-scene{z-index:0;}
.panel-petro .petro-video{
  z-index:1;
  object-fit:cover;
  opacity:.62;
  filter:saturate(.72) contrast(1.08) brightness(.72);
  transform:scale(1.035);
  transition:transform 1.4s cubic-bezier(.22,1,.36,1),filter .8s ease,opacity .8s ease;
}
.panel-petro .shade,.panel-petro .line-grid,.panel-petro .petro-motion{z-index:2;}
.panel-petro .panel-content{z-index:5;}
.panel-petro:hover .petro-video{
  transform:scale(1.065);
  filter:saturate(.86) contrast(1.1) brightness(.8);
  opacity:.7;
}

.center-mark{pointer-events:auto;cursor:default;}
.center-mark::before,
.center-mark::after{
  content:"";
  position:absolute;
  left:50%;top:50%;
  border-radius:50%;
  transform:translate(-50%,-50%) scale(.84);
  pointer-events:none;
  opacity:0;
}
.center-mark::before{
  width:118px;height:118px;
  border:1px solid rgba(240,220,157,.28);
  box-shadow:0 0 34px rgba(219,184,94,.12),inset 0 0 24px rgba(219,184,94,.08);
}
.center-mark::after{
  width:92px;height:92px;
  background:radial-gradient(circle,rgba(219,184,94,.16),rgba(219,184,94,.04) 48%,transparent 72%);
  filter:blur(2px);
}
.center-mark img{
  position:relative;
  z-index:2;
  animation:centerLogoOrbit 9s cubic-bezier(.4,0,.2,1) infinite;
  transform-style:preserve-3d;
  will-change:transform,filter;
}
.center-mark:hover::before{animation:centerRingHover 1.2s cubic-bezier(.22,1,.36,1) 1;}
.center-mark:hover::after{animation:centerHaloHover 1.2s ease 1;}
.center-mark:hover img{animation:centerLogoHover 1.15s cubic-bezier(.22,1,.36,1) 1 both;}

@keyframes centerLogoOrbit{
  0%,66%{transform:rotateZ(0deg) scale(1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));}
  76%{transform:rotateZ(180deg) scale(1.035);filter:drop-shadow(0 12px 30px rgba(219,184,94,.18));}
  86%,100%{transform:rotateZ(360deg) scale(1);filter:drop-shadow(0 10px 24px rgba(0,0,0,.45));}
}
@keyframes centerLogoHover{
  0%{transform:rotateZ(0) rotateX(0) scale(1);}
  28%{transform:rotateZ(-12deg) rotateX(8deg) scale(1.08);}
  62%{transform:rotateZ(10deg) rotateX(-6deg) scale(1.13);}
  100%{transform:rotateZ(0) rotateX(0) scale(1.06);filter:drop-shadow(0 16px 38px rgba(219,184,94,.28));}
}
@keyframes centerRingHover{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72) rotate(0deg);}
  35%{opacity:.85;}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.28) rotate(180deg);}
}
@keyframes centerHaloHover{
  0%{opacity:0;transform:translate(-50%,-50%) scale(.72);}
  45%{opacity:.9;transform:translate(-50%,-50%) scale(1.05);}
  100%{opacity:0;transform:translate(-50%,-50%) scale(1.34);}
}

@media(max-width:900px){
  .panel-petro .petro-video{opacity:.58;}
  .center-mark::before{width:94px;height:94px}
  .center-mark::after{width:74px;height:74px}
}

/* v1.2 — equal split, local icons/video, staged reveals, center-line motion */
.split{grid-template-columns:minmax(0,1fr) minmax(0,1fr)!important;}
.panel{width:100%;}

/* Font Awesome arrows replace text glyphs */
.hero-btn>i,.top-enter b i{font-style:normal;line-height:1;}
.hero-btn>i{font-size:15px;}
.top-enter b i{font-size:12px;}

/* Larger center mark + animated divider line */
.center-mark{
  gap:0!important;
  width:118px;
  min-height:242px;
  display:flex!important;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  overflow:visible;
}
.center-mark img{
  width:96px!important;
  flex:0 0 auto;
  z-index:4;
  filter:drop-shadow(0 14px 28px rgba(0,0,0,.44));
}
.center-mark .center-line{
  width:1px!important;
  flex:1 1 auto;
  min-height:66px;
  background:linear-gradient(180deg,transparent,rgba(240,220,157,.22),rgba(255,255,255,.34),rgba(240,220,157,.20),transparent)!important;
  position:relative;
  z-index:1;
}
.center-mark .center-line-flow{
  position:absolute;
  left:50%;
  top:-16%;
  width:2px;
  height:36%;
  transform:translateX(-50%);
  border-radius:999px;
  background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.78) 34%,rgba(240,220,157,.98) 55%,rgba(219,184,94,.12) 82%,transparent 100%);
  box-shadow:0 0 9px rgba(240,220,157,.34);
  opacity:0;
  z-index:5;
  animation:centerLineTravel 5.8s cubic-bezier(.42,0,.22,1) infinite;
  will-change:transform,opacity;
}
.center-mark::before{
  width:136px!important;height:136px!important;
}
.center-mark::after{
  width:108px!important;height:108px!important;
}
@keyframes centerLineTravel{
  0%,12%{opacity:0;transform:translate(-50%,-8%) scaleY(.72)}
  18%{opacity:.78}
  46%{opacity:1;transform:translate(-50%,118%) scaleY(1)}
  70%{opacity:.74;transform:translate(-50%,250%) scaleY(.9)}
  84%,100%{opacity:0;transform:translate(-50%,330%) scaleY(.72)}
}

/* Entrance sequence: left first, then right */
.panel-auto .panel-content>*{opacity:0;transform:translateY(24px);filter:blur(4px);animation:introReveal .72s cubic-bezier(.22,1,.36,1) forwards;will-change:transform,opacity;}
.panel-auto .panel-content .kicker{animation-delay:.20s}
.panel-auto .panel-content h1{animation-delay:.34s}
.panel-auto .panel-content p{animation-delay:.48s}
.panel-auto .panel-content .hero-btn{animation-delay:.62s}
.panel-petro .panel-content>*{opacity:0;transform:translateY(24px);filter:blur(4px);animation:introReveal .72s cubic-bezier(.22,1,.36,1) forwards;will-change:transform,opacity;}
.panel-petro .panel-content .kicker{animation-delay:.92s}
.panel-petro .panel-content h2{animation-delay:1.06s}
.panel-petro .panel-content p{animation-delay:1.20s}
.panel-petro .panel-content .hero-btn{animation-delay:1.34s}
@keyframes introReveal{to{opacity:1;transform:translateY(0);filter:blur(0)}}

/* Mobile performance: keep effects transform/opacity based */
.media,.petro-video,.center-mark img,.center-line-flow{backface-visibility:hidden;-webkit-backface-visibility:hidden;transform-style:preserve-3d;}
@media(max-width:900px){
  .split{grid-template-columns:1fr!important;}
  .center-mark{width:88px;min-height:170px;}
  .center-mark img{width:72px!important;}
  .center-mark .center-line{min-height:46px;}
  .center-mark::before{width:104px!important;height:104px!important}
  .center-mark::after{width:84px!important;height:84px!important}
  .hero-btn>i{font-size:14px;}
}
@media(max-width:520px){
  .center-mark{display:none!important}
  .panel-auto .panel-content .kicker{animation-delay:.12s}
  .panel-auto .panel-content h1{animation-delay:.24s}
  .panel-auto .panel-content p{animation-delay:.36s}
  .panel-auto .panel-content .hero-btn{animation-delay:.48s}
  .panel-petro .panel-content .kicker{animation-delay:.66s}
  .panel-petro .panel-content h2{animation-delay:.78s}
  .panel-petro .panel-content p{animation-delay:.90s}
  .panel-petro .panel-content .hero-btn{animation-delay:1.02s}
}
@media(prefers-reduced-motion:reduce){
  .panel-auto .panel-content>*,.panel-petro .panel-content>*{opacity:1!important;transform:none!important;filter:none!important;animation:none!important}
  .center-line-flow{display:none!important}
}


/* v1.3 — pure petro video + full-height continuous divider animation */
.panel-petro .petro-scene,
.panel-petro .petro-motion,
.panel-petro .line-grid{display:none!important;}
.panel-petro .petro-video{
  z-index:1!important;
  opacity:1!important;
  filter:saturate(.9) contrast(1.04) brightness(.72)!important;
  transform:scale(1.015)!important;
}
.panel-petro:hover .petro-video{
  transform:scale(1.035)!important;
  filter:saturate(.96) contrast(1.05) brightness(.76)!important;
}
.panel-petro .shade{
  z-index:2!important;
  background:linear-gradient(252deg,rgba(4,9,17,.68) 2%,rgba(6,14,30,.20) 48%,rgba(4,9,17,.56) 100%)!important;
}

@media (min-width:901px){
  .center-mark{
    position:absolute!important;
    z-index:10!important;
    left:50%!important;
    top:92px!important;
    bottom:46px!important;
    width:144px!important;
    min-height:0!important;
    height:auto!important;
    transform:translateX(-50%)!important;
    display:flex!important;
    flex-direction:column!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    overflow:visible!important;
    pointer-events:auto!important;
  }
  .center-mark .center-line{
    display:block!important;
    width:1px!important;
    height:auto!important;
    min-height:0!important;
    flex:1 1 0!important;
    background:linear-gradient(180deg,rgba(219,184,94,.03),rgba(240,220,157,.32) 18%,rgba(255,255,255,.34) 50%,rgba(240,220,157,.28) 82%,rgba(219,184,94,.03))!important;
    box-shadow:0 0 12px rgba(219,184,94,.05);
    position:relative!important;
    z-index:1!important;
  }
  .center-mark img{
    width:104px!important;
    flex:0 0 auto!important;
    position:relative!important;
    z-index:4!important;
    margin:10px 0!important;
    background:rgba(5,10,20,.36);
    border-radius:50%;
    padding:4px;
    backdrop-filter:blur(6px);
    -webkit-backdrop-filter:blur(6px);
  }
  .center-mark .center-line-flow{
    display:block!important;
    position:absolute!important;
    left:50%!important;
    top:-16%!important;
    width:2px!important;
    height:18%!important;
    border-radius:999px!important;
    transform:translateX(-50%)!important;
    background:linear-gradient(180deg,transparent 0%,rgba(255,255,255,.30) 24%,rgba(240,220,157,.98) 50%,rgba(219,184,94,.42) 72%,transparent 100%)!important;
    box-shadow:0 0 10px rgba(240,220,157,.34),0 0 22px rgba(219,184,94,.12)!important;
    opacity:0;
    z-index:3!important;
    animation:centerDividerRun 4.8s linear infinite!important;
    will-change:top,opacity;
    pointer-events:none!important;
  }
  @keyframes centerDividerRun{
    0%{top:-18%;opacity:0}
    7%{opacity:.75}
    18%{opacity:1}
    82%{opacity:1}
    94%{opacity:.55}
    100%{top:100%;opacity:0}
  }
}

@media (max-width:900px){
  .panel-petro .petro-video{opacity:1!important;filter:saturate(.9) contrast(1.04) brightness(.7)!important;}
  .center-mark .center-line-flow{display:none!important;}
}

/* v1.4 petro title/button refinement */
.panel-petro .industry-line{display:inline-block;white-space:nowrap;font-size:.82em;letter-spacing:-.06em;}
@media(max-width:900px){.panel-petro .industry-line{font-size:.78em;}}
@media(max-width:520px){.panel-petro .industry-line{font-size:.72em;}}

/* v1.5 — mobile first-screen composition: both divisions visible without scrolling */
@media (max-width:900px){
  html,body{height:100%;overflow:hidden!important;}
  body{min-height:100svh;min-height:100dvh;}
  .shell{height:100svh;height:100dvh;min-height:0!important;overflow:hidden;}

  .topbar{
    height:72px!important;
    padding:0 16px!important;
    background:rgba(5,10,20,.92)!important;
    -webkit-backdrop-filter:blur(14px);
    backdrop-filter:blur(14px);
  }
  .logo img{width:58px!important;}
  .top-enter b{width:40px!important;height:40px!important;}

  .split{
    height:100svh!important;
    height:100dvh!important;
    min-height:0!important;
    padding-top:72px;
    padding-bottom:34px;
    display:grid!important;
    grid-template-columns:1fr!important;
    grid-template-rows:minmax(0,1fr) minmax(0,1fr)!important;
    overflow:hidden!important;
  }
  .panel{
    width:100%!important;
    height:auto!important;
    min-height:0!important;
    overflow:hidden!important;
  }
  .panel-content{
    left:22px!important;
    right:22px!important;
    bottom:20px!important;
    max-width:none!important;
  }
  .kicker{
    font-size:7.5px!important;
    letter-spacing:.18em!important;
    gap:8px!important;
  }
  .kicker:before{width:24px!important;}
  .panel-content h1,
  .panel-content h2{
    font-size:clamp(34px,9vw,48px)!important;
    line-height:.92!important;
    margin:8px 0 10px!important;
    letter-spacing:-.052em!important;
  }
  .panel-petro .industry-line{
    font-size:.74em!important;
    letter-spacing:-.055em!important;
  }
  .panel-content p{
    max-width:94%!important;
    font-size:11.8px!important;
    line-height:1.52!important;
    margin:0 0 12px!important;
    display:-webkit-box;
    -webkit-box-orient:vertical;
    -webkit-line-clamp:2;
    overflow:hidden;
  }
  .hero-btn{
    width:min(100%,300px)!important;
    min-height:48px!important;
    padding:7px 8px 7px 14px!important;
    border-radius:15px!important;
    box-shadow:0 12px 32px rgba(0,0,0,.22)!important;
  }
  .hero-btn span{font-size:12px!important;gap:1px!important;}
  .hero-btn small{font-size:6.5px!important;letter-spacing:.20em!important;}
  .hero-btn i{
    width:36px!important;
    height:36px!important;
    border-radius:11px!important;
    font-size:12px!important;
  }

  .intro-footer{
    position:fixed!important;
    z-index:25!important;
    left:0;right:0;bottom:0;
    min-height:34px!important;
    height:34px!important;
    padding:0 12px!important;
    display:flex!important;
    align-items:center!important;
    justify-content:center!important;
    gap:10px!important;
    border-top:1px solid rgba(255,255,255,.07)!important;
    background:rgba(3,7,14,.78)!important;
    -webkit-backdrop-filter:blur(12px);
    backdrop-filter:blur(12px);
    font-size:7.5px!important;
    white-space:nowrap;
  }
  .intro-footer .location,
  .intro-footer .copyright{display:none!important;}
  .vista-credit{text-align:center!important;}

  /* Separator logo centered exactly between stacked panels */
  .center-mark{
    display:flex!important;
    position:absolute!important;
    z-index:14!important;
    left:50%!important;
    top:calc(72px + ((100% - 72px - 34px) / 2))!important;
    width:100%!important;
    height:78px!important;
    min-height:0!important;
    transform:translate(-50%,-50%)!important;
    flex-direction:row!important;
    align-items:center!important;
    justify-content:center!important;
    gap:0!important;
    pointer-events:none!important;
  }
  .center-mark img{
    width:78px!important;
    height:78px!important;
    margin:0 10px!important;
    padding:5px!important;
    border-radius:50%!important;
    background:rgba(5,10,20,.72)!important;
    -webkit-backdrop-filter:blur(8px);
    backdrop-filter:blur(8px);
    box-shadow:0 12px 30px rgba(0,0,0,.34)!important;
    z-index:4!important;
  }
  .center-mark .center-line{
    display:block!important;
    flex:1 1 auto!important;
    width:auto!important;
    height:1px!important;
    min-height:0!important;
    max-width:none!important;
    background:linear-gradient(90deg,transparent,rgba(240,220,157,.34),rgba(255,255,255,.28),rgba(240,220,157,.34),transparent)!important;
    box-shadow:0 0 10px rgba(219,184,94,.05)!important;
  }
  .center-mark .center-line-flow{
    display:block!important;
    position:absolute!important;
    z-index:5!important;
    top:50%!important;
    left:-22%!important;
    width:24%!important;
    height:2px!important;
    border-radius:999px!important;
    transform:translateY(-50%)!important;
    background:linear-gradient(90deg,transparent 0%,rgba(255,255,255,.32) 24%,rgba(240,220,157,.98) 50%,rgba(219,184,94,.44) 72%,transparent 100%)!important;
    box-shadow:0 0 10px rgba(240,220,157,.32),0 0 20px rgba(219,184,94,.10)!important;
    opacity:0;
    animation:centerDividerRunMobile 4.8s linear infinite!important;
    will-change:transform,opacity;
    pointer-events:none!important;
  }
  @keyframes centerDividerRunMobile{
    0%{transform:translate3d(-8%, -50%, 0);opacity:0}
    8%{opacity:.78}
    18%{opacity:1}
    82%{opacity:1}
    94%{opacity:.55}
    100%{transform:translate3d(510%, -50%, 0);opacity:0}
  }

  .panel-auto .shade{background:linear-gradient(100deg,rgba(4,9,17,.80),rgba(4,9,17,.26) 68%,rgba(4,9,17,.60))!important;}
  .panel-petro .shade{background:linear-gradient(100deg,rgba(4,9,17,.78),rgba(7,15,33,.30) 68%,rgba(4,9,17,.64))!important;}
  .media,.petro-video{transform:scale(1.02)!important;}
}

@media (max-width:520px){
  .center-mark{display:flex!important;}
  .panel-content{left:18px!important;right:18px!important;bottom:16px!important;}
  .panel-content h1,.panel-content h2{font-size:clamp(31px,8.5vw,41px)!important;}
  .panel-content p{font-size:11px!important;line-height:1.5!important;margin-bottom:10px!important;}
  .hero-btn{min-height:46px!important;max-width:286px!important;}
  .center-mark img{width:72px!important;height:72px!important;margin:0 8px!important;}
}

@media (max-height:720px) and (max-width:900px){
  .topbar{height:64px!important;}
  .split{padding-top:64px!important;padding-bottom:30px!important;}
  .intro-footer{height:30px!important;min-height:30px!important;}
  .center-mark{top:calc(64px + ((100% - 64px - 30px) / 2))!important;height:68px!important;}
  .center-mark img{width:56px!important;height:56px!important;}
  .panel-content{bottom:12px!important;}
  .panel-content h1,.panel-content h2{font-size:clamp(27px,7.6vw,36px)!important;}
  .panel-content p{font-size:9.5px!important;-webkit-line-clamp:1;}
  .hero-btn{min-height:42px!important;max-width:270px!important;}
  .hero-btn i{width:32px!important;height:32px!important;}
}

/* ===== v1.6 visual refinement: centered content + premium gradients + petro pattern ===== */
.panel{
  isolation:isolate;
}

/* Richer cinematic grading on both videos */
.panel-auto .shade{
  z-index:2!important;
  background:
    radial-gradient(ellipse at 44% 46%, rgba(223,190,105,.10) 0%, rgba(223,190,105,0) 34%),
    linear-gradient(180deg, rgba(4,8,14,.24) 0%, rgba(4,8,14,.04) 34%, rgba(4,8,14,.18) 58%, rgba(4,8,14,.72) 100%),
    linear-gradient(100deg, rgba(4,9,17,.72) 0%, rgba(4,9,17,.12) 46%, rgba(4,9,17,.36) 100%)!important;
}
.panel-petro .shade{
  z-index:2!important;
  background:
    radial-gradient(ellipse at 58% 44%, rgba(56,99,154,.16) 0%, rgba(56,99,154,0) 38%),
    linear-gradient(180deg, rgba(3,9,20,.22) 0%, rgba(3,9,20,.04) 32%, rgba(4,11,25,.18) 58%, rgba(3,8,18,.74) 100%),
    linear-gradient(260deg, rgba(5,12,25,.68) 0%, rgba(5,12,25,.10) 48%, rgba(5,12,25,.34) 100%)!important;
}

/* Automotive: subtle edge vignette, no visible grid */
.panel-auto::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  background:
    linear-gradient(90deg, rgba(2,6,12,.22), transparent 18%, transparent 82%, rgba(2,6,12,.20)),
    radial-gradient(ellipse at center, transparent 46%, rgba(2,6,12,.20) 100%);
}

/* Petrochemical-only technical pattern */
.panel-petro::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:3;
  pointer-events:none;
  opacity:.34;
  background-image:
    linear-gradient(rgba(226,197,118,.055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(226,197,118,.045) 1px, transparent 1px),
    radial-gradient(circle at 86% 20%, transparent 0 58px, rgba(226,197,118,.16) 59px 60px, transparent 61px 96px, rgba(226,197,118,.10) 97px 98px, transparent 99px),
    linear-gradient(135deg, transparent 0 49.4%, rgba(255,255,255,.025) 49.6% 50.4%, transparent 50.6% 100%);
  background-size:64px 64px,64px 64px,360px 360px,180px 180px;
  background-position:center center,center center,calc(100% + 70px) -35px,center center;
  -webkit-mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
  mask-image:linear-gradient(180deg, transparent 0%, #000 18%, #000 82%, transparent 100%);
}
.panel-petro::after{
  content:"";
  position:absolute;
  z-index:3;
  pointer-events:none;
  right:-90px;
  bottom:11%;
  width:330px;
  height:130px;
  border:1px solid rgba(226,197,118,.10);
  border-left:0;
  border-radius:0 80px 80px 0;
  opacity:.46;
  transform:skewX(-8deg);
}

/* Center content blocks inside each half while preserving editorial left alignment */
.panel-content,
.panel-content-right{
  z-index:5!important;
  left:clamp(34px,5vw,88px)!important;
  right:clamp(34px,5vw,88px)!important;
  top:52%!important;
  bottom:auto!important;
  transform:translateY(-50%);
  margin:0!important;
  max-width:620px!important;
  text-align:left!important;
}
.panel-content-right{
  max-width:620px!important;
}
.panel-content .hero-btn{
  margin-top:2px;
}

/* Keep content visually balanced on very wide screens */
@media (min-width:1400px){
  .panel-auto .panel-content{left:clamp(60px,6vw,112px)!important;right:auto!important;width:min(620px,calc(100% - 120px));}
  .panel-petro .panel-content{left:clamp(60px,6vw,112px)!important;right:auto!important;width:min(620px,calc(100% - 120px));}
}

/* Mobile: two 50/50 panels remain visible, content centered within each video */
@media (max-width:900px){
  .panel-auto .shade{
    background:
      linear-gradient(180deg,rgba(4,9,17,.36) 0%,rgba(4,9,17,.06) 28%,rgba(4,9,17,.22) 56%,rgba(4,9,17,.82) 100%),
      radial-gradient(ellipse at 50% 42%,rgba(224,191,104,.10),transparent 40%)!important;
  }
  .panel-petro .shade{
    background:
      linear-gradient(180deg,rgba(4,10,23,.34) 0%,rgba(4,10,23,.05) 28%,rgba(4,10,23,.22) 56%,rgba(4,10,23,.84) 100%),
      radial-gradient(ellipse at 54% 42%,rgba(62,108,169,.15),transparent 42%)!important;
  }
  .panel-petro::before{
    opacity:.24;
    background-size:38px 38px,38px 38px,210px 210px,120px 120px;
    background-position:center center,center center,calc(100% + 52px) -16px,center center;
  }
  .panel-petro::after{display:none;}
  .panel-content,
  .panel-content-right{
    left:18px!important;
    right:18px!important;
    top:52%!important;
    bottom:auto!important;
    transform:translateY(-50%)!important;
    max-width:none!important;
    width:auto!important;
    text-align:left!important;
  }
  .panel-content h1,
  .panel-content h2{margin-top:9px!important;margin-bottom:9px!important;}
  .panel-content p{max-width:94%!important;margin-bottom:10px!important;}
  .hero-btn{margin-top:0!important;}
}

@media (max-width:520px){
  .panel-content,
  .panel-content-right{
    top:51%!important;
    left:16px!important;
    right:16px!important;
  }
  .panel-content h1,
  .panel-content h2{
    font-size:clamp(29px,7.9vw,38px)!important;
    line-height:.95!important;
  }
  .panel-content p{
    font-size:10.8px!important;
    line-height:1.56!important;
    margin-bottom:10px!important;
  }
  .hero-btn{
    min-height:48px!important;
    border-radius:14px!important;
    padding:7px 8px 7px 13px!important;
  }
  .hero-btn span{font-size:11px!important;}
  .hero-btn small{font-size:6px!important;}
  .hero-btn i{width:34px!important;height:34px!important;border-radius:11px!important;font-size:13px!important;}
}

@media (prefers-reduced-motion:reduce){
  .panel-petro::before,
  .panel-auto::after{animation:none!important;}
}