/* ESG depth system v1.1: scroll-linked layers, without scroll hijacking. */
html{scroll-padding-top:100px}.reveal{opacity:1;transform:none}.esg-reveal-ready .reveal:not(.visible){opacity:0;transform:translateY(24px)}
a:focus-visible,button:focus-visible{outline:2px solid #67e7f4;outline-offset:5px}
.hero{--depth-bg:0px;--depth-mid:0px;--depth-near:0px;--depth-turn:0deg;min-height:860px;min-height:max(820px,100svh);padding-top:150px;padding-bottom:130px;isolation:isolate;background:#050a16}
.hero .hero-content{position:relative;z-index:3;width:min(1190px,calc(100% - 48px));max-width:none;margin-inline:auto}
.hero h1{max-width:730px;font-size:clamp(64px,7.6vw,110px);letter-spacing:-.075em}
.hero .lead{max-width:535px}.hero-photo{inset:-24% -5%;background-image:linear-gradient(90deg,#050a16 8%,rgba(5,10,22,.92) 35%,rgba(5,10,22,.36) 75%,rgba(5,10,22,.2)),url('https://ecommercesolutionsgroup.com/wp-content/uploads/2026/11/Futuristic-digital-corridor.jpg');background-position:72% center;transform:translate3d(0,var(--depth-bg),0) scale(1.04);z-index:-3;will-change:transform}
.hero:after{background:linear-gradient(0deg,#050a16 0%,transparent 26%),radial-gradient(ellipse at 78% 40%,rgba(64,129,180,.18),transparent 58%)}
.hero .grid-overlay{transform:translate3d(0,calc(var(--depth-bg) * .42),0);opacity:.35;z-index:-1}
.hero-depth-scene{position:absolute;right:max(2vw,calc((100vw - 1340px)/2));top:150px;width:min(42vw,580px);height:570px;z-index:2;pointer-events:none;isolation:isolate;transform:translate3d(0,var(--depth-mid),0)}
.depth-halo{position:absolute;inset:-12%;background:radial-gradient(ellipse,rgba(103,231,244,.12),rgba(87,80,174,.09) 38%,transparent 68%);filter:blur(8px)}
.depth-orbit{position:absolute;inset:11%;border:1px solid rgba(103,231,244,.48);border-radius:50%;transform:rotate(-26deg) rotateX(55deg);box-shadow:0 0 55px rgba(103,231,244,.06),inset 0 0 25px rgba(103,231,244,.05)}
.depth-orbit.two{inset:4%;border-color:rgba(157,141,255,.32);transform:rotate(39deg) rotateX(59deg)}
.depth-orbit.three{inset:20%;border-style:dashed;border-color:rgba(103,231,244,.27);transform:rotate(-16deg) rotateY(56deg)}
.depth-orbit:after{content:"";position:absolute;left:15%;top:12%;height:7px;width:7px;background:#b1f9ff;border-radius:50%;box-shadow:0 0 20px #67e7f4}
.depth-core-wrap{position:absolute;inset:24%;transform:translate3d(0,calc(var(--depth-near) * .42),0) rotate(var(--depth-turn));display:grid;place-items:center}
.depth-core{width:100%;aspect-ratio:1;border:1px solid rgba(156,244,255,.6);border-radius:28%;transform:rotate(45deg);background:linear-gradient(135deg,rgba(103,231,244,.23),rgba(44,62,101,.22) 50%,rgba(151,132,255,.22));box-shadow:inset 0 0 55px rgba(112,210,242,.1),0 0 90px rgba(96,145,226,.16);backdrop-filter:blur(4px)}
.depth-core:before,.depth-core:after{content:"";position:absolute;inset:19%;border:1px solid rgba(199,248,255,.55);border-radius:20%}.depth-core:after{inset:37%;background:#8ce6ed;box-shadow:0 0 50px #67e7f4;border:0}
.depth-chip{position:absolute;display:flex;align-items:center;gap:12px;min-width:174px;padding:16px 19px;border:1px solid rgba(139,199,233,.3);border-radius:9px;background:rgba(8,20,39,.83);box-shadow:0 20px 50px rgba(0,0,0,.3);backdrop-filter:blur(12px);font-size:12px;line-height:1.3;color:#edf4ff;transform:translate3d(0,var(--depth-near),0)}
.depth-chip b{font-size:12px;font-weight:700;letter-spacing:.02em}.depth-chip small{display:block;font-size:9px;letter-spacing:.12em;text-transform:uppercase;color:#a7bcd3;margin-top:5px}.depth-chip i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:rgba(103,231,244,.08);color:#91e8f0;font-style:normal;font-weight:700;font-size:12px}
.depth-chip.commerce{top:15%;left:5%}.depth-chip.creative{right:-1%;top:46%;transform:translate3d(0,calc(var(--depth-near) * .7),0)}.depth-chip.media{left:17%;bottom:8%;transform:translate3d(0,calc(var(--depth-near) * 1.2),0)}
.depth-coordinate{position:absolute;right:10%;bottom:2%;font-size:9px;letter-spacing:.24em;color:#8fa8c5;transform:translate3d(0,calc(var(--depth-near) * .4),0)}
.hero-bottom{z-index:4}.hero-bottom .scroll-line{width:54px;position:relative}.hero-bottom .scroll-line:after{content:"";position:absolute;right:0;top:-3px;width:6px;height:6px;border-right:1px solid #67e7f4;border-bottom:1px solid #67e7f4;transform:rotate(45deg)}
/* A fixed frame with independently moving artwork and foreground plates. */
.visual-panel{--panel-depth:0px;--panel-plate:0px;overflow:hidden;isolation:isolate;background:#081424;min-height:590px;box-shadow:0 30px 80px rgba(0,0,0,.24)}
.visual-panel:before{content:"";position:absolute;inset:-26% -14%;z-index:-2;background:linear-gradient(0deg,rgba(5,10,22,.35),rgba(5,10,22,.1)),url('https://ecommercesolutionsgroup.com/wp-content/uploads/2026/11/Abstract-AI-inspired-visual.jpg') center/cover;transform:translate3d(0,var(--panel-depth),0) scale(1.06);will-change:transform}
.visual-panel:after{bottom:24px;left:25px;z-index:2}.visual-panel-depth{position:absolute;inset:0;pointer-events:none;z-index:1}
.panel-crosshair{position:absolute;inset:12%;border:1px solid rgba(187,242,255,.24);border-radius:50%;transform:translate3d(0,calc(var(--panel-plate) * -.5),0)}
.panel-crosshair:before,.panel-crosshair:after{content:"";position:absolute;inset:12%;border:1px solid rgba(187,242,255,.2);border-radius:50%}.panel-crosshair:after{inset:25%}
.panel-label{position:absolute;top:17%;left:8%;padding:15px 19px;border:1px solid rgba(187,242,255,.28);background:rgba(5,14,30,.78);color:#ecf7ff;font-size:12px;line-height:1.6;backdrop-filter:blur(14px);transform:translate3d(0,var(--panel-plate),0)}
.panel-label small{display:block;font-size:9px;color:#89dbe6;letter-spacing:.17em;text-transform:uppercase}.panel-label.second{left:auto;right:8%;top:auto;bottom:19%;transform:translate3d(0,calc(var(--panel-plate) * -.8),0)}
/* Dubai remains part of the identity; the backdrop is abstract, not a landmark photograph. */
.photo-section{--place-depth:0px;--place-word:0px;min-height:640px;background:#071020}
.photo-section:before{inset:-30% -6%;background-image:linear-gradient(90deg,rgba(5,10,22,.98),rgba(5,10,22,.82) 40%,rgba(5,10,22,.4)),url('https://ecommercesolutionsgroup.com/wp-content/uploads/2026/11/Abstract-AI-inspired-visual.jpg');background-size:cover;background-position:center;background-attachment:scroll;transform:translate3d(0,var(--place-depth),0);will-change:transform}
.photo-section>.wrap{position:relative;z-index:3}.place-depth-word{position:absolute;right:-2%;top:21%;z-index:0;pointer-events:none;font-size:clamp(120px,23vw,360px);font-weight:800;letter-spacing:-.08em;line-height:1;color:transparent;-webkit-text-stroke:1px rgba(134,216,233,.3);transform:translate3d(var(--place-word),0,0);user-select:none}
.photo-section:after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,#050a16,transparent 28%,transparent 75%,#050a16);z-index:-1;pointer-events:none}
@media(min-width:981px){.hero h1{max-width:660px}.hero .hero-content>.pill,.hero h1,.hero .lead,.hero-actions{position:relative;z-index:2}.hero-depth-scene{opacity:.95}.hero .lead{max-width:490px}}
@media(min-width:681px) and (max-width:980px){.hero h1{font-size:76px;max-width:570px}.hero-depth-scene{right:-7%;width:430px;opacity:.58}.depth-chip{min-width:140px;padding:12px}.hero .lead{max-width:480px}}
@media(max-width:680px){
 html{scroll-padding-top:84px}.hero{display:block;min-height:0;padding:124px 0 70px}.hero .hero-content{width:calc(100% - 36px)}.hero h1{font-size:clamp(53px,13.7vw,83px);max-width:100%;line-height:.99}.hero .lead{font-size:15px;line-height:1.8}.hero .hero-actions{gap:10px}.hero .btn{font-size:10px;padding:14px 13px}.hero-depth-scene{position:relative;top:auto;right:auto;width:calc(100% - 30px);max-width:470px;height:360px;margin:52px auto 0;opacity:1;z-index:2}.hero-depth-scene .depth-chip{padding:12px 14px;min-width:143px}.hero-depth-scene .depth-chip b{font-size:11px}.depth-chip.commerce{top:10%;left:0}.depth-chip.creative{right:0;top:44%}.depth-chip.media{left:9%;bottom:5%}.depth-coordinate{display:none}.depth-core-wrap{inset:26%}.depth-orbit{inset:9% 15%}.depth-orbit.two{inset:1% 10%}.depth-orbit.three{inset:20%}.hero .grid-overlay{background-size:55px 55px}.hero-bottom{bottom:18px;font-size:8px;letter-spacing:.13em}.hero-bottom .scroll-line{width:27px;margin-right:8px}.visual-panel{min-height:390px}.panel-label{font-size:11px;padding:12px 15px}.photo-section{min-height:590px}.place-depth-word{right:-8%;top:15%;font-size:45vw;opacity:.7}.photo-section .wrap{padding-top:55px}
}
@media(prefers-reduced-motion:reduce){
 html{scroll-behavior:auto}.hero-photo,.hero .grid-overlay,.hero-depth-scene,.depth-core-wrap,.depth-chip,.depth-coordinate,.visual-panel:before,.panel-crosshair,.panel-label,.photo-section:before,.place-depth-word{transform:none!important;will-change:auto}.reveal,.esg-reveal-ready .reveal:not(.visible){opacity:1;transform:none;transition:none}
}