/* IUBOS EXPERIENCE 3 / progressive visual layer shared by 30 independent HTML pages */
:root{--blue:#e52e39;--accent:#ef3944;--red:#e72b36;--red-dark:#ae182b;--navy:#081626;--navy2:#102235;--ink:#142235;--soft:#f3f5f7;--muted:#617182;--line:#e5e9ef;--radius:20px;--shadow:0 24px 65px rgba(7,22,42,.09)}
html{scroll-padding-top:105px}body{font-family:Inter,"Aptos",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;letter-spacing:-.005em}body.dark{--red:#ff5964;--blue:#ff5964;--accent:#ff5964;--ink:#edf2f7;--soft:#111c2d;--line:#314053;--muted:#a1afbf}h1,h2,h3{font-family:Inter,"Aptos Display","Segoe UI",Arial,sans-serif;font-weight:800}.container{--max:1280px}::selection{background:#e72b36;color:#fff}
/* Global system: dark navigation and brand-first design */
.top-strip{background:#07111d;color:#b0bfcc;letter-spacing:.11em}.top-inner{min-height:33px}.top-inner span:first-child{color:#b6c4d2}.top-inner a{transition:color .25s}.top-inner a:hover{color:#ff777d}
.site-header{background:rgba(8,21,35,.98);border-bottom:1px solid rgba(255,255,255,.1);box-shadow:0 12px 40px rgba(0,0,0,.09);transition:background .4s,box-shadow .4s,border-color .4s;backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px)}.site-header.is-scrolled{background:rgba(7,18,30,.94);box-shadow:0 20px 35px rgba(0,0,0,.16)}.header-inner{min-height:82px}.brand-logo{width:178px!important;max-height:62px!important;object-fit:contain!important;background:transparent!important;padding:0!important;filter:drop-shadow(0 2px 9px rgba(0,0,0,.14))}.brand{background:#fff;border-radius:11px;padding:5px 11px;transition:transform .35s,box-shadow .35s}.brand:hover{transform:translateY(-2px);box-shadow:0 8px 28px #0003}.main-nav{gap:26px}.main-nav a{color:#c5d1de;font-weight:690;font-size:12px;letter-spacing:.02em;transition:color .26s}.main-nav a:hover,.main-nav a[aria-current=page]{color:#fff}.main-nav a::before{content:"";height:2px;bottom:-11px;left:0;right:100%;position:absolute;background:#ee4550;transition:right .3s}.main-nav a:hover::before,.main-nav a[aria-current=page]::before{right:0}.main-nav a[aria-current=page]:after{bottom:-33px;background:#f0464c}.languages{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.11)}.languages a{color:#c6d0dc}.languages a.current{background:#fff;color:#bc2434}.icon-button{color:#fff}.header-contact{position:relative;isolation:isolate;background:#e3313c;border-radius:9px;padding:13px 18px;box-shadow:0 7px 20px rgba(226,38,53,.19);overflow:hidden;transition:transform .3s,box-shadow .3s,background .3s}.header-contact:hover{background:#fa4b54;transform:translateY(-2px);box-shadow:0 13px 26px rgba(226,38,53,.3)}.header-contact span{display:inline-block;transition:transform .25s}.header-contact:hover span{transform:translate(3px,-3px)}
/* Shared immersive micro-interactions */
.btn,.header-contact,.guide-tab,.guide-reset,.icon-button,.replay-scene{position:relative;isolation:isolate;overflow:hidden;transition:transform .28s ease,background .28s ease,border-color .28s ease,color .28s ease,box-shadow .28s ease}.btn:before,.header-contact:before,.guide-tab:before,.guide-reset:before{content:"";position:absolute;top:-140%;left:-80%;width:60%;height:350%;background:linear-gradient(90deg,transparent,rgba(255,255,255,.24),transparent);transform:rotate(24deg);transition:left .65s cubic-bezier(.19,1,.22,1);z-index:-1}.btn:hover:before,.header-contact:hover:before,.guide-tab:hover:before,.guide-reset:hover:before{left:145%}.btn:active,.guide-tab:active,.header-contact:active,.icon-button:active{transform:translateY(1px) scale(.975)}.btn{border-radius:10px;min-height:52px;font-size:12px;letter-spacing:.01em;font-weight:800;box-shadow:0 9px 24px #0001}.btn span{display:inline-block;transition:transform .25s}.btn:hover span{transform:translate(4px,-2px)}.btn-lime{background:#e62f3b;color:#fff}.btn-lime:hover{background:#f54b55;box-shadow:0 13px 34px rgba(231,43,54,.3)}.btn-dark{background:#e52e3a}.btn-dark:hover{background:#f14954;box-shadow:0 12px 26px #f1495433}.btn-ghost{border-color:rgba(255,255,255,.36);color:#fff;background:rgba(255,255,255,.06)}.btn-ghost:hover{background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.8)}.tap-ripple{position:absolute;display:block;pointer-events:none;border-radius:50%;background:rgba(255,255,255,.38);transform:translate(-50%,-50%) scale(0);animation:rippleOut .65s ease-out forwards;z-index:4}@keyframes rippleOut{to{transform:translate(-50%,-50%) scale(4);opacity:0}}
/* Entry hero: atmospheric terminal + suspended 3D freight container */
.v3-hero{position:relative;isolation:isolate;min-height:690px;background:#061220;overflow:hidden}.v3-hero:before{display:none}.port-environment{position:absolute;inset:0;z-index:-1;overflow:hidden}.port-backdrop{position:absolute;inset:-4%;background:linear-gradient(90deg,rgba(4,13,25,.95) 0%,rgba(5,14,27,.9) 29%,rgba(5,14,27,.43) 66%,rgba(5,14,27,.28) 100%),linear-gradient(0deg,rgba(4,12,22,.82),transparent 58%),url('../img/port-terminal-cinematic.svg') center center/cover no-repeat;animation:portBreath 24s ease-in-out infinite alternate;transform:translate(var(--scene-x,0px),var(--scene-y,0px)) scale(1.02);transition:transform .5s ease-out;will-change:transform}.port-glow{position:absolute;width:550px;height:460px;right:4%;top:11%;background:radial-gradient(ellipse,rgba(225,53,57,.18),rgba(220,72,56,.07) 38%,transparent 70%);filter:blur(24px);animation:terminalGlow 7s ease-in-out infinite alternate}.port-gridlines{position:absolute;inset:0;background:linear-gradient(90deg,transparent 97%,#ffffff04 99%),linear-gradient(0deg,transparent 97%,#ffffff03 99%);background-size:110px 110px;mask-image:linear-gradient(90deg,transparent,#000);opacity:.35;pointer-events:none}.port-shimmer{position:absolute;inset:0;background:linear-gradient(105deg,transparent 45%,#ffa6a005 49%,#ffffff09 50%,transparent 53%);background-size:240% 100%;animation:portSweep 16s linear infinite;pointer-events:none}@keyframes terminalGlow{from{opacity:.3;transform:scale(.88)}to{opacity:1;transform:scale(1.16)}}@keyframes portSweep{from{background-position:180% 0}to{background-position:-200% 0}}@keyframes portBreath{from{filter:brightness(.85) saturate(.8)}to{filter:brightness(1.05) saturate(1.12)}}
.hero-v3-layout{position:relative;z-index:2;min-height:685px;display:grid;grid-template-columns:52% 48%;align-items:center;padding:48px 0 58px}.hero-story{padding:55px 0 42px;position:relative;z-index:5}.hero-eyebrow{display:inline-flex;align-items:center;gap:12px;color:#dee2e9;font-weight:850;font-size:10px;letter-spacing:.19em;margin-bottom:43px}.live-pulse{display:inline-block;width:8px;height:8px;background:#ff525c;border-radius:100%;box-shadow:0 0 0 5px rgba(255,80,90,.12);animation:beacon 2.1s ease infinite}@keyframes beacon{50%{box-shadow:0 0 0 12px rgba(255,80,90,0)}}.hero-number{display:flex;align-items:center;gap:13px;margin-bottom:17px;color:#f1f3f5;font-weight:850;letter-spacing:.12em;font-size:12px}.hero-number span{color:#ec4751}.hero-number i{height:1px;width:34px;background:#d7dee74d}.hero-story h1{font-size:clamp(48px,5.75vw,88px);font-weight:850;letter-spacing:-.066em;line-height:1.035;max-width:790px;margin:0 0 25px;color:#fff;text-wrap:balance;text-shadow:0 3px 18px rgba(0,0,0,.11)}.hero-story h1 span{display:block;color:#fc5360}.hero-description{max-width:530px;color:#c3cbd5;font-size:16px;line-height:1.9;margin:0 0 32px}.hero-action-row{display:flex;gap:11px;flex-wrap:wrap}.btn-hero-primary{min-height:54px;background:#f0444d;color:#fff;padding:15px 22px}.btn-hero-secondary{min-height:54px;padding:15px 23px}.hero-proof{display:flex;align-items:center;gap:13px;flex-wrap:wrap;color:#afbece;font-size:10px;letter-spacing:.15em;font-weight:800;margin-top:56px}.hero-proof b{color:#f54c56;margin:0 5px}.hero-proof-icon{display:grid;place-items:center;border:1px solid #d4dee541;border-radius:100%;width:28px;height:28px;color:#d6e2eb;font-size:17px}.proof-hairline{width:28px;height:1px;background:#ffffff5c;margin:0 6px}
.container-theatre{height:550px;position:relative;width:100%;align-self:center;perspective:1150px;transform-style:preserve-3d;isolation:isolate}.scene-hud{position:absolute;z-index:12;pointer-events:none;color:#dee8f1;text-shadow:0 2px 8px #000a;letter-spacing:.16em;font-weight:850;font-size:10px}.scene-hud-top{top:56px;right:0;display:flex;gap:9px;align-items:center;color:#b6c2cf}.scene-hud-top span:last-child{color:#7d96a9}.hud-red-dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:#ef454f;box-shadow:0 0 12px #ed475c}.scene-hud-bottom{left:11%;bottom:39px;display:flex;flex-direction:column;gap:9px}.scene-hud-bottom>span:nth-child(2){color:#bac5cf;font-size:9px}.scene-hud-bottom strong{font-size:11px;color:#fff}.scene-hud-bottom strong span{color:#6febac;margin-left:8px}.hud-line{width:40px;height:2px;background:#fb4b53}
.crane-structure{position:absolute;z-index:6;top:14px;left:12%;height:240px;width:87%;pointer-events:none;opacity:.88}.crane-crossbar{position:absolute;top:34px;left:0;width:100%;height:13px;border-radius:2px;background:linear-gradient(90deg,#0c1a2c,#34495b,#102032);box-shadow:inset 0 2px 1px #8b96a844,0 7px 10px #0005;border:1px solid #6f859256}.crane-crossbar:before{content:"";position:absolute;inset:3px 0;background:repeating-linear-gradient(45deg,transparent 0 24px,#03131a 25px 29px,transparent 30px 54px);opacity:.7}.crane-trolley{position:absolute;top:26px;left:38%;width:65px;height:28px;border:2px solid #3b5362;border-radius:4px;background:linear-gradient(#293f4b,#10212e);box-shadow:0 12px 20px #0006}.crane-trolley:after{content:"";position:absolute;top:24px;left:22px;width:18px;height:15px;background:#0b1c28;border:2px solid #516979}.crane-wire{position:absolute;top:57px;width:2px;height:213px;background:linear-gradient(#556878,#a3afb3);box-shadow:0 0 3px #b8d0d342;transform-origin:top;animation:wireExtend 1.8s .32s cubic-bezier(.17,.8,.23,1) both}.wire-left{left:41.5%}.wire-right{left:51%}@keyframes wireExtend{0%{transform:scaleY(.04)}70%{transform:scaleY(1)}90%{transform:scaleY(.94)}100%{transform:scaleY(1)}}
.drop-rig{position:absolute;z-index:10;width:min(96%,720px);height:auto;top:39%;left:9%;transform-origin:center bottom;animation:containerArrival 1.95s .26s both;will-change:transform}.hero-container-image{display:block;width:100%;height:auto;filter:drop-shadow(0 28px 24px rgba(0,0,0,.45)) drop-shadow(0 8px 6px rgba(0,0,0,.18));user-select:none;pointer-events:none}.drop-shadows{position:absolute;left:10%;right:8%;bottom:-10px;height:38px;background:radial-gradient(ellipse at center,rgba(0,0,0,.48),rgba(0,0,0,.22) 42%,transparent 72%);filter:blur(8px);transform:translateY(16px) scale(.72);opacity:0;animation:shadowArrival 1.95s .26s both}
@keyframes containerArrival{0%{transform:translate3d(0,-720px,0) rotate(-4deg) scale(.98);opacity:0}9%{opacity:1}63%{transform:translate3d(0,17px,0) rotate(.4deg) scale(1.02)}74%{transform:translate3d(0,-23px,0) rotate(-.8deg) scale(1)}84%{transform:translate3d(0,5px,0) rotate(.28deg)}91%{transform:translate3d(0,-7px,0) rotate(-.1deg)}100%{transform:translate3d(0,0,0) rotate(0) scale(1);opacity:1}}
.landing-spot{position:absolute;left:19%;top:75%;width:80%;height:105px;border-radius:50%;background:radial-gradient(ellipse,rgba(0,0,0,.65),rgba(0,0,0,.22) 50%,transparent 70%);filter:blur(7px);transform:scale(.6);animation:landingShade 2s .3s forwards}.landing-rings{position:absolute;inset:5px;border:1px solid rgba(252,104,102,.3);border-radius:50%;transform:scale(.8);animation:ringImpact 2.4s 1.5s ease-out both}.landing-fog{position:absolute;left:12%;top:79%;width:85%;height:65px;background:radial-gradient(ellipse,rgba(232,162,140,.32),transparent 65%);filter:blur(10px);animation:dustImpact 3.1s .15s both}@keyframes landingShade{0%{opacity:0;transform:scale(.2)}69%{opacity:.4;transform:scale(.7)}100%{opacity:1;transform:scale(1)}}@keyframes ringImpact{0%{opacity:0;transform:scale(.7)}17%{opacity:1}100%{opacity:0;transform:scale(1.5)}}@keyframes dustImpact{0%,46%{opacity:0;transform:scale(.45)}59%{opacity:1;transform:scale(.9)}100%{opacity:0;transform:scale(1.45)}}
.hero-lower{position:absolute;left:0;right:0;bottom:24px;display:flex;align-items:center;gap:32px;z-index:8}.hero-scroll{display:inline-flex;align-items:center;gap:13px;color:#b6c5d2;font-size:10px;letter-spacing:.13em;font-weight:800;transition:color .25s}.hero-scroll:hover{color:#fff}.scroll-mouse{width:18px;height:28px;border:1px solid #b9d0dd80;border-radius:15px;display:flex;justify-content:center;padding-top:6px}.scroll-mouse i{background:#ff6d74;height:5px;width:3px;border-radius:5px;animation:scrollMouse 2s infinite}.scroll-down{animation:scrollDown 1.8s infinite;font-size:17px;color:#ff6b72}.replay-scene{border:1px solid rgba(255,255,255,.21);border-radius:30px;background:rgba(255,255,255,.05);color:#c8d5df;font-size:10px;letter-spacing:.1em;font-weight:750;display:inline-flex;gap:8px;align-items:center;padding:8px 13px}.replay-scene:hover{border-color:#ff7a80;color:#fff;background:#ff777717}.replay-scene:hover span{transform:rotate(-85deg)}.replay-scene span{font-size:20px;line-height:1;transition:transform .45s}.hero-coordinate{margin-left:auto;font-size:9px;color:#9badbb;letter-spacing:.15em}@keyframes scrollMouse{to{transform:translateY(8px);opacity:0}}@keyframes scrollDown{50%{transform:translateY(4px)}}
/* Replaying hero is meaningful: remove and restore live animation classes */
.v3-hero.scene-paused .drop-rig,.v3-hero.scene-paused .crane-wire,.v3-hero.scene-paused .landing-spot,.v3-hero.scene-paused .landing-rings,.v3-hero.scene-paused .landing-fog{animation:none!important;opacity:0}
/* Story content staggered after landing */
.v3-hero .hero-story>*{animation:textLanding .8s both}.v3-hero .hero-story>:nth-child(1){animation-delay:.22s}.v3-hero .hero-story>:nth-child(2){animation-delay:.38s}.v3-hero .hero-story>:nth-child(3){animation-delay:.62s}.v3-hero .hero-story>:nth-child(4){animation-delay:.8s}.v3-hero .hero-story>:nth-child(5){animation-delay:1s}.v3-hero .hero-story>:nth-child(6){animation-delay:1.2s}@keyframes textLanding{from{transform:translateY(20px);opacity:0}to{transform:none;opacity:1}}
/* Cards, hover tracking and scroll progression */
.trust-row{background:#fff;border-bottom:1px solid #e8edf1}.trust-row .container{min-height:86px;color:#4b5965;font-size:10px}.trust-row i{background:#d9dee6}.trust-row span{transition:color .2s}.trust-row span:hover{color:#e62e3c}.section{padding:109px 0}.section-soft{background:#f3f5f7}.eyebrow{font-size:10px;color:#d62b37}.section-heading h2,.why-content h2,.faq-section h2,.content-grid h2,.standalone{letter-spacing:-.052em}.service-card{position:relative;isolation:isolate;overflow:hidden;border:1px solid #e4e9ee;background:var(--panel);padding:31px;min-height:286px;border-radius:16px;box-shadow:0 4px 10px rgba(15,26,42,.02);transform-style:preserve-3d;transition:transform .32s cubic-bezier(.2,.8,.2,1),box-shadow .32s,border-color .32s}.service-card:before{position:absolute;content:"";inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,10%),rgba(234,54,64,.095),transparent 65%);opacity:0;transition:opacity .3s;z-index:-1}.service-card:after{content:"";position:absolute;height:4px;bottom:0;left:0;right:100%;background:#eb3743;transition:right .45s ease}.service-card:hover{transform:translateY(-9px) rotateX(var(--tilt-x,0deg)) rotateY(var(--tilt-y,0deg));box-shadow:0 25px 55px rgba(11,29,47,.13);border-color:#f4bdc1}.service-card:hover:before{opacity:1}.service-card:hover:after{right:0}.card-icon{background:#fff0f1;color:#db2e3b;border-radius:12px;transition:transform .35s,background .35s,box-shadow .35s}.service-card:hover .card-icon{transform:translateY(-5px) rotate(-6deg);background:#e93441;color:white;box-shadow:0 9px 20px #e52e3a30}.card-arrow{transition:transform .35s,background .35s,color .35s}.service-card:hover .card-arrow{transform:rotate(45deg);background:#e6313d;border-color:#e6313d;color:#fff}.card-more{color:#dd2b39}.card-more span{transition:transform .3s}.service-card:hover .card-more span{transform:translateX(6px)}.simple-link{color:#cf2735;border-bottom:1px solid #d92f3a31;padding-bottom:5px}.benefit .check,.mini-stat .check{background:#fff0f1;color:#d92d3b}.benefit{transition:padding-left .3s}.benefit:hover{padding-left:7px}.about-art{background:linear-gradient(130deg,rgba(3,13,26,.3),rgba(10,26,44,.88)),url('../img/port-terminal-cinematic.svg') 68% center/cover;border-radius:17px}.about-art:before{background:repeating-linear-gradient(90deg,#ffffff00 0,#ffffff00 58px,#ffffff06 59px,#ffffff00 60px);transform:none;inset:0}.about-art-inner .icon-large{color:#fc5864;border-color:#f7606a65}.about-art-inner strong{color:#fff;text-shadow:0 6px 24px #0007}.about-art-inner span{color:#e2e5ec}.step-number{color:#da2d3a}.steps{position:relative}.step{position:relative}.step:before{content:"";position:absolute;top:44px;left:-20px;width:0;height:2px;background:#e7313d;transition:width .65s}.step:hover:before{width:20px}.step:hover .step-number{transform:translateY(-5px)}.step-number{transition:transform .3s}.faq-item{transition:background .25s,box-shadow .25s}.faq-item:hover{background:#fceff0}.faq-item[open]{box-shadow:inset 3px 0 0 #e73844}.faq-item summary span{transition:transform .25s}.faq-item[open] summary span{transform:rotate(45deg)}.cta-band{position:relative;isolation:isolate;background:#0a1b2c;overflow:hidden}.cta-band:after{content:"";position:absolute;z-index:-1;inset:0;background:linear-gradient(90deg,#061525 13%,rgba(6,21,37,.9) 70%,rgba(7,21,34,.7)),url('../img/port-terminal-cinematic.svg') 70% 50%/cover;opacity:.95}.cta-band .eyebrow{color:#ff8790}.footer{background:#071420}.footer-logo{background:#fff!important;border-radius:8px!important;padding:6px 10px!important;max-height:75px}.footer-grid a{transition:color .2s,transform .2s}.footer-grid a:hover{color:#ff727c;transform:translateX(3px)}.footer-pill span{color:#f5525d}.floating-call{background:#ed3d48;box-shadow:0 10px 30px rgba(238,45,60,.32);animation:subtleCall 5s ease-in-out infinite;transition:transform .25s,background .25s}.floating-call:hover{background:#fa5a62;transform:translateY(-5px) scale(1.05)}@keyframes subtleCall{50%{box-shadow:0 10px 32px rgba(238,45,60,.13)}}
/* Interior pages: animated page masthead with coordinated visual system */
.page-hero{position:relative;isolation:isolate;overflow:hidden;background:linear-gradient(105deg,#0b1e30,#101e2c)!important;border:0;color:white;padding:70px 0 90px}.page-hero:before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,#081626 0%,#0b1b2bd9 60%,#0b1b2b87),url('../img/port-terminal-cinematic.svg') 70% 37%/cover;opacity:.85;transition:transform 2s}.page-hero:hover:before{transform:scale(1.025)}.page-hero h1{max-width:950px;color:#fff;letter-spacing:-.055em}.page-hero p{color:#cad5df;max-width:790px}.page-hero .eyebrow{color:#ff737c}.page-hero .breadcrumbs{color:#c8d3de}.page-hero .breadcrumbs a:hover{color:#fff}.page-hero .container{position:relative}.page-hero .container:after{content:"IUBOS / CUSTOMS";position:absolute;right:0;top:-9px;letter-spacing:.23em;color:#ffffff4d;font-size:10px;font-weight:850}.guide-tabs .guide-tab{border-color:#3a4c60;transition:background .23s,transform .23s,border-color .23s}.guide-tab:hover{transform:translateX(4px)}.guide-tab[aria-selected=true]{background:#e83643;color:#fff;border-color:#e83643;box-shadow:0 12px 25px #e8364226}.doc-list input{accent-color:#df303d}.guide-meter span{background:linear-gradient(90deg,#b82131,#fd5964)}.guide-progress-wrap,.guide-result,.guide-panel,.guide-sidebar,.contact-info-panel,.form-panel,.doc-aside>div{box-shadow:0 12px 35px rgba(14,27,46,.04)}.guide-reset:hover{border-color:#e73a47}.guide-result-label,.contact-line a.map-link{color:#d02d39}.contact-line>span{background:#fff0f1;color:#df2d3a}.contact-form input:focus,.contact-form textarea:focus,.contact-form select:focus{border-color:#e73a47;box-shadow:0 0 0 4px #e73a4717}.info-note{border-left-color:#e73a47}.doc-aside li span{color:#e83d49}.reveal-on{opacity:0;transform:translateY(28px);transition:opacity .85s cubic-bezier(.2,.8,.2,1),transform .85s cubic-bezier(.2,.8,.2,1)}.reveal-on.is-visible{opacity:1;transform:translateY(0)}.cards .reveal-on:nth-child(2){transition-delay:.09s}.cards .reveal-on:nth-child(3){transition-delay:.16s}.cards .reveal-on:nth-child(4){transition-delay:.08s}.cards .reveal-on:nth-child(5){transition-delay:.15s}
/* dark mode still respects all textual contrast */
body.dark .section-soft,body.dark .trust-row{background:#102035}body.dark .service-card{border-color:#2d3f52}body.dark .card-icon{background:#48202e;color:#ff8f98}body.dark .faq-item:hover{background:#182b3d}body.dark .page-hero{background:#071321!important}body.dark .trust-row .container{color:#d1dce8}body.dark .header-contact{background:#d92c39}body.dark .port-environment{filter:none}
@media(min-width:1300px){.hero-story h1{font-size:clamp(64px,5.5vw,91px)}.container-theatre{transform:translateX(24px)}}
@media(max-width:1120px){.header-inner{gap:12px}.main-nav{gap:13px}.brand-logo{width:145px!important}.site-header .brand{padding:3px 7px}.hero-v3-layout{grid-template-columns:51% 49%}.hero-story h1{font-size:clamp(48px,6vw,70px)}.hero-description{font-size:15px}.container-theatre{transform:scale(.9);transform-origin:left center}.crane-structure{left:8%;width:94%}.drop-rig{left:8%;width:95%}.hero-lower{bottom:20px}}
@media(max-width:850px){.header-inner{min-height:75px}.main-nav{top:75px;background:#0c1a2b;border-color:#ffffff17}.main-nav a{color:#d7dee8}.main-nav a:hover{background:#ffffff14;color:white}.brand-logo{width:170px!important;max-height:59px!important}.site-header .brand{padding:4px 10px}.hero-v3-layout{display:flex;flex-direction:column;align-items:stretch;padding:35px 0 90px;min-height:750px}.hero-story{padding:45px 0 5px;max-width:670px}.hero-eyebrow{margin-bottom:24px}.hero-story h1{font-size:clamp(45px,7.5vw,70px)}.hero-description{max-width:660px}.hero-proof{margin-top:25px}.container-theatre{height:355px;transform:none;width:min(100%,600px);align-self:flex-end;margin:0 auto}.drop-rig{top:32%;left:10%;width:84%;height:auto}.hero-container-image{max-width:100%}.cargo-brand>span{font-size:clamp(43px,8vw,64px)}.crane-structure{top:-65px;left:19%;width:68%}.scene-hud-top{top:0}.scene-hud-bottom{bottom:8px}.landing-spot{top:73%;left:17%}.landing-fog{top:78%}.hero-lower{bottom:27px}.port-backdrop{background-position:65% center}.page-hero .container:after{display:none}.service-card:hover{transform:translateY(-6px)}.reveal-on{transition-duration:.65s}}
@media(max-width:600px){.top-strip{font-size:9px}.header-inner{min-height:68px}.main-nav{top:68px}.brand-logo{width:136px!important;max-height:48px!important}.brand{padding:2px 8px!important;border-radius:7px}.hero-v3-layout{padding-top:15px;padding-bottom:78px;min-height:740px}.hero-story{padding-top:36px}.hero-eyebrow{font-size:9px;letter-spacing:.11em;margin-bottom:25px}.hero-number{font-size:10px}.hero-story h1{font-size:clamp(40px,10.5vw,56px);line-height:1.055;margin-bottom:20px}.hero-story h1 span{display:inline}.hero-description{font-size:13px;line-height:1.7;margin-bottom:23px}.hero-action-row{flex-direction:column;gap:9px}.hero-action-row .btn{width:100%;min-height:49px;justify-content:space-between}.hero-proof{font-size:9px;gap:8px;margin-top:20px}.container-theatre{height:305px;margin-top:5px;overflow:visible}.drop-rig{top:37%;left:3%;width:95%;height:auto}.hero-container-image{max-width:100%}.crane-structure{top:-45px;left:11%;width:83%}.crane-wire{height:150px}.scene-hud-top{font-size:8px;top:7px}.scene-hud-bottom{font-size:8px;left:12%;bottom:0}.landing-spot{top:75%;left:11%}.landing-fog{top:79%}.hero-lower{bottom:19px;gap:11px;justify-content:space-between}.hero-scroll{font-size:9px;gap:8px}.replay-scene{font-size:9px;padding:6px 9px}.hero-coordinate{display:none}.section{padding:73px 0}.service-card{min-height:237px}.trust-row .container{min-height:66px}.page-hero{padding:48px 0 56px}.page-hero h1{font-size:clamp(35px,9vw,50px)}}
@media(hover:none){.service-card:hover{transform:none}.card-icon:hover{transform:none}}
@media(prefers-reduced-motion:reduce){.port-backdrop,.port-shimmer,.port-glow,.live-pulse,.scroll-mouse i,.scroll-down,.floating-call,.v3-hero .hero-story>*,.crane-wire,.drop-rig,.landing-spot,.landing-rings,.landing-fog{animation:none!important}.drop-rig{transform:none!important;opacity:1!important}.crane-wire{transform:none!important}.landing-spot{transform:scale(1)!important;opacity:1!important}.landing-fog{opacity:0!important}.reveal-on{transform:none!important;opacity:1!important;transition:none!important}.service-card:hover{transform:none!important}}

@keyframes shadowArrival{0%{opacity:0;transform:translateY(22px) scale(.45)}58%{opacity:.85;transform:translateY(18px) scale(.7)}100%{opacity:.7;transform:translateY(16px) scale(.72)}}


/* Realistic container rig refinements */
.drop-rig{top:35%;left:7%;width:min(98%,760px)}
.container-lift{position:relative;width:100%;padding-top:54px;transform-origin:center top}
.hero-container-image{position:relative;z-index:3}
.lift-spreader{position:absolute;top:18px;left:22%;right:16%;height:14px;border-radius:4px;background:linear-gradient(180deg,#243645,#415565 50%,#172634);border:1px solid rgba(178,201,219,.35);box-shadow:0 10px 18px rgba(0,0,0,.28),inset 0 1px 0 rgba(255,255,255,.16);z-index:4}
.spreader-mark{position:absolute;inset:4px 18%;border-top:1px dashed rgba(255,255,255,.22);border-bottom:1px dashed rgba(0,0,0,.12)}
.lift-hoist,.lift-sling{position:absolute;display:block;transform-origin:top center;z-index:2}
.lift-hoist{top:-4px;width:2px;height:26px;background:linear-gradient(180deg,#778896,#d6e0e7 48%,#6b7c88);box-shadow:0 0 3px rgba(214,231,241,.28)}
.hoist-left{left:41.2%}.hoist-right{left:57.2%}
.lift-sling{top:30px;width:2px;background:linear-gradient(180deg,#7e8f9d,#d7e1e7 42%,#71808d);box-shadow:0 0 3px rgba(214,231,241,.2)}
.sling-front-left{left:28%;height:74px;transform:rotate(31deg)}
.sling-front-right{left:68%;height:74px;transform:rotate(-33deg)}
.sling-back-left{left:39%;height:42px;transform:rotate(7deg);opacity:.7}
.sling-back-right{left:56.5%;height:42px;transform:rotate(-7deg);opacity:.7}
.lift-corner{position:absolute;top:94px;width:10px;height:10px;border-radius:50%;background:#d4dde5;border:2px solid #718694;z-index:4;box-shadow:0 0 0 3px rgba(8,22,38,.26)}
.corner-left{left:24.8%}.corner-right{left:71.3%}
.drop-shadows{left:14%;right:12%;bottom:8px;height:34px;filter:blur(10px)}
.hero-container-image{filter:drop-shadow(0 30px 24px rgba(0,0,0,.42)) drop-shadow(0 8px 8px rgba(0,0,0,.15))}
.container-theatre .drop-rig{animation:containerArrival 2.05s .24s both}
@media(max-width:1120px){.drop-rig{top:36%;left:5%;width:96%}.lift-spreader{left:21%;right:15%}.hoist-left{left:41%}.hoist-right{left:57.1%}.corner-left{left:24.4%}.corner-right{left:71.1%}}
@media(max-width:850px){.drop-rig{top:31%;left:7%;width:88%}.container-lift{padding-top:46px}.lift-spreader{top:14px;height:12px;left:21%;right:15%}.lift-hoist{height:22px}.lift-sling{top:24px}.sling-front-left,.sling-front-right{height:58px}.sling-back-left,.sling-back-right{height:34px}.lift-corner{top:74px;width:9px;height:9px}.corner-left{left:24.4%}.corner-right{left:71%}}
@media(max-width:600px){.drop-rig{top:36%;left:1%;width:98%}.container-lift{padding-top:34px}.lift-spreader{top:8px;height:10px;left:20%;right:15%}.spreader-mark{inset:3px 16%}.lift-hoist{height:16px}.lift-sling{top:17px}.sling-front-left,.sling-front-right{height:41px}.sling-back-left,.sling-back-right{height:24px}.lift-corner{top:54px;width:8px;height:8px}.corner-left{left:24.1%}.corner-right{left:70.8%}.drop-shadows{left:12%;right:9%;bottom:2px;height:26px}}
@media(prefers-reduced-motion:reduce){.drop-rig,.drop-shadows{animation:none!important}}

/* V3.2: concise premium headline and one red navigation indicator only */
.main-nav a[aria-current="page"]::after{display:none!important;content:none!important}
.main-nav a::before{height:2px;background:#ef404d}
.v3-hero .hero-story h1{font-size:clamp(45px,4.7vw,73px);line-height:1.085;letter-spacing:-.055em;max-width:770px;text-wrap:pretty}
.v3-hero .hero-story h1 span.hero-h1-accent{color:#caf465;display:inline;font-weight:850}
.v3-hero .hero-eyebrow{margin-bottom:30px}
.v3-hero .hero-story{padding:34px 0 30px}
.v3-hero .hero-proof{margin-top:38px}
.v3-hero .scene-hud,.v3-hero .hero-number,.v3-hero .hero-coordinate{display:none!important}
.replay-scene:focus-visible{outline:3px solid #caf465;outline-offset:4px}
.replay-scene.replay-feedback{border-color:#caf465;background:rgba(202,244,101,.14);color:#fff;box-shadow:0 0 0 3px rgba(202,244,101,.13)}
@media(min-width:1300px){.v3-hero .hero-story h1{font-size:clamp(56px,4.7vw,76px)}}
@media(max-width:1120px){.v3-hero .hero-story h1{font-size:clamp(44px,4.9vw,65px)}}
@media(max-width:850px){.v3-hero .hero-story h1{font-size:clamp(42px,6.8vw,62px)}.v3-hero .hero-story{padding:35px 0 8px}}
@media(max-width:600px){.v3-hero .hero-story h1{font-size:clamp(36px,9.4vw,51px);line-height:1.09}.v3-hero .hero-eyebrow{margin-bottom:21px}}
/* Mobile composition: keep a meaningful portion of the container visible above the fold. */
@media(max-width:600px){
  .v3-hero .hero-proof{display:none}
  .v3-hero .hero-story{padding-top:30px}
  .v3-hero .hero-eyebrow{margin-bottom:17px}
  .v3-hero .hero-story h1{margin-bottom:15px}
  .v3-hero .hero-description{margin-bottom:17px;line-height:1.65}
  .v3-hero .hero-action-row{gap:8px}
  .v3-hero .hero-action-row .btn{min-height:45px}
  .v3-hero .container-theatre{height:285px;margin-top:8px}
  .v3-hero .drop-rig{top:13%;left:1%;width:98%}
  .v3-hero .crane-structure{top:-12px}
  .v3-hero .crane-wire{height:87px}
  .v3-hero .hero-lower{bottom:17px}
  .v3-hero .hero-v3-layout{min-height:730px;padding-bottom:72px}
}


/* V3.3: mechanically attached hoist: all endpoints are projected from the moving container image */
.port-backdrop{background-image:linear-gradient(90deg,rgba(4,13,25,.97) 0%,rgba(5,14,27,.82) 34%,rgba(5,14,27,.30) 73%,rgba(4,13,25,.21) 100%),linear-gradient(0deg,rgba(4,12,22,.58),transparent 64%),url('../img/port-terminal-realistic.webp')!important;background-position:center center;background-size:cover}
.crane-structure{z-index:7;top:5px;left:6%;width:94%;height:90px;opacity:.9}.crane-crossbar{top:30px;height:13px}.crane-trolley{left:43%;top:23px;width:72px;height:30px;z-index:3}.crane-wire{display:none!important}
.drop-rig{top:24%;left:0;width:106%;height:auto;z-index:9;animation:containerArrival 2.05s .22s both}
.hero-container-image{width:100%;height:auto;max-width:none;display:block}
.container-lift,.lift-spreader,.lift-hoist,.lift-sling,.lift-corner{display:none!important}
.rig-connection{position:absolute;inset:0;width:100%;height:100%;z-index:11;overflow:visible;pointer-events:none;filter:drop-shadow(0 2px 3px rgba(0,0,0,.36))}
.cable-metal{stroke:url(#steelCable);stroke-width:2.5;fill:none;stroke-linecap:round}
.cable-shadow{stroke:#081421;stroke-width:5;opacity:.55;fill:none;stroke-linecap:round}
.spreader-shadow{stroke:#061422;stroke-width:16;opacity:.5;fill:none;stroke-linecap:round}
.spreader-beam{stroke:url(#spreaderSteel);stroke-width:10;fill:none;stroke-linecap:square}
.spreader-highlight{stroke:rgba(214,228,237,.5);stroke-width:1.1;fill:none}
.rig-hook{stroke:#a8bac6;stroke-width:3;stroke-linecap:round;fill:none}
.rig-anchor{fill:#b9c7cf;stroke:#344554;stroke-width:2;filter:drop-shadow(0 0 2px #fff8)}
@media(max-width:1120px){.drop-rig{top:25%;left:0;width:105%}.crane-structure{left:6%;width:94%}}
@media(max-width:850px){.drop-rig{top:21%;left:5%;width:90%}.crane-structure{top:-30px;left:4%;width:94%}.rig-connection{overflow:visible}}
@media(max-width:600px){.drop-rig{top:24%;left:0;width:100%}.crane-structure{top:-27px;left:3%;width:93%}.crane-trolley{width:44px;height:24px;top:24px;left:43%}.crane-crossbar{height:10px;top:31px}}
@media(prefers-reduced-motion:reduce){.drop-rig{animation:none!important;transform:none!important}}

/* V3.3: entrance begins below the pulley, so hoist lines never cross above it. */
@keyframes containerArrival{
  0%{transform:translate3d(0,-137px,0) rotate(-2.1deg) scale(.975);opacity:0}
  11%{opacity:1}
  63%{transform:translate3d(0,14px,0) rotate(.38deg) scale(1.012)}
  75%{transform:translate3d(0,-13px,0) rotate(-.4deg) scale(1)}
  86%{transform:translate3d(0,4px,0) rotate(.12deg)}
  100%{transform:translate3d(0,0,0) rotate(0) scale(1);opacity:1}
}
@keyframes containerArrivalTablet{
  0%{transform:translate3d(0,-44px,0) rotate(-1.2deg) scale(.98);opacity:0}
  12%{opacity:1}
  68%{transform:translate3d(0,8px,0) rotate(.3deg)}
  82%{transform:translate3d(0,-6px,0) rotate(-.2deg)}
  100%{transform:translate3d(0,0,0) rotate(0);opacity:1}
}
@keyframes containerArrivalPhone{
  0%{transform:translate3d(0,-26px,0) rotate(-.8deg) scale(.98);opacity:0}
  12%{opacity:1}
  65%{transform:translate3d(0,6px,0) rotate(.25deg)}
  80%{transform:translate3d(0,-5px,0) rotate(-.18deg)}
  100%{transform:translate3d(0,0,0) rotate(0);opacity:1}
}
@media(min-width:601px) and (max-width:850px){.container-theatre .drop-rig{animation-name:containerArrivalTablet}}
@media(max-width:600px){.container-theatre .drop-rig{animation-name:containerArrivalPhone}}
@media(prefers-reduced-motion:reduce){.container-theatre .drop-rig{animation:none!important;transform:none!important;opacity:1!important}}

/* Match the rest of the site to the photographic containers used on the home hero. */
.about-art{background-image:linear-gradient(130deg,rgba(3,13,26,.36),rgba(10,26,44,.87)),url('../img/port-terminal-realistic.webp')}
.cta-band:after{background-image:linear-gradient(90deg,#061525 13%,rgba(6,21,37,.91) 65%,rgba(7,21,34,.57)),url('../img/port-terminal-realistic.webp')}
.page-hero:before{background-image:linear-gradient(90deg,#081626 0%,rgba(11,27,43,.87) 61%,rgba(11,27,43,.48)),url('../img/port-terminal-realistic.webp')}

/* Floating quick contact panel: functionality and clear visual hierarchy */
.floating-call{z-index:81;display:grid;place-items:center;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s}
.floating-call.is-active{background:#be2532;transform:rotate(-8deg) scale(1.04);box-shadow:0 12px 34px rgba(238,45,60,.4)}
.quick-contact-panel{position:fixed;right:24px;bottom:100px;z-index:82;width:min(380px,calc(100vw - 32px));padding:22px;border:1px solid #e6e9ef;border-radius:20px;background:#fff;box-shadow:0 24px 80px rgba(5,18,34,.3);color:#10233a;transform-origin:bottom right;animation:contactPanelEnter .25s cubic-bezier(.22,1,.36,1) both}
.quick-contact-panel[hidden]{display:none!important}
.quick-contact-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px}
.quick-contact-eyebrow{display:block;color:#d82c39;font-size:10px;font-weight:850;letter-spacing:.14em;margin-bottom:5px}
.quick-contact-head h2{font-size:25px;line-height:1.2;margin:0;color:#0b1d32;letter-spacing:-.045em}
.quick-contact-close{border:0;background:#f1f3f6;color:#18324d;border-radius:9px;width:33px;height:33px;display:grid;place-items:center;font-size:24px;line-height:1;flex-shrink:0;transition:background .2s,transform .2s}
.quick-contact-close:hover{background:#f9dfe3;transform:rotate(90deg)}
.quick-contact-subtitle{font-size:12.5px;line-height:1.65;color:#66778b;margin:12px 0 16px}
.quick-contact-list{display:grid;gap:9px}
.quick-contact-row{display:flex;align-items:stretch;min-width:0;gap:8px}
.quick-contact-number{display:flex;align-items:center;gap:10px;flex:1;min-width:0;background:#f5f7fa;border:1px solid #e6eaf0;border-radius:11px;padding:11px 10px;font-size:13px;font-weight:800;white-space:nowrap;color:#10243b;transition:background .25s,border-color .25s,transform .25s}
.quick-contact-number:hover{background:#fff4f5;border-color:#eea3aa;transform:translateY(-2px)}
.quick-contact-phone-icon{width:28px;height:28px;flex-shrink:0;display:grid;place-items:center;border-radius:9px;background:#ffe9eb;color:#e3313e;font-size:16px}
.quick-contact-copy{border:1px solid #edc8cd;border-radius:11px;background:#fff;color:#ce2432;padding:0 10px;min-width:87px;font-size:11px;font-weight:800;transition:background .2s,color .2s,transform .2s}
.quick-contact-copy:hover{background:#e73743;color:#fff;transform:translateY(-2px)}
.quick-contact-help{margin:13px 0 14px;font-size:11px;line-height:1.6;color:#778598}
.quick-contact-footer{display:flex;gap:12px;align-items:center;justify-content:space-between;padding-top:14px;border-top:1px solid #e8edf1}
.quick-contact-footer a{color:#c92935;font-size:11px;font-weight:800;transition:color .2s}
.quick-contact-footer a:hover{color:#fa5560;text-decoration:underline}
.quick-contact-status{min-height:0;color:#176b4d;font-size:11px;font-weight:750;margin-top:7px}
.quick-contact-status:empty{display:none}
@keyframes contactPanelEnter{from{opacity:0;transform:translateY(15px) scale(.96)}to{opacity:1;transform:none}}
@media(max-width:600px){.quick-contact-panel{right:12px;bottom:91px;width:min(376px,calc(100vw - 24px));padding:18px}.quick-contact-head h2{font-size:23px}.quick-contact-number{font-size:12px}.quick-contact-copy{min-width:86px}}
@media(prefers-reduced-motion:reduce){.quick-contact-panel{animation:none}.quick-contact-number:hover,.quick-contact-copy:hover,.quick-contact-close:hover{transform:none}}


/* V6.6 — photorealistic crane load. Real image foreground moves, lifting cables track its lock pockets. */
.v3-hero .photo-hoist-scene{isolation:isolate;overflow:visible;--cargo-arrival:4.2s}
.photo-hoist-scene .drop-rig{top:24%!important;left:-4%!important;width:109%!important;animation:photoContainerLower 4.2s .32s both!important;transform-origin:48% 15%;z-index:12!important;filter:drop-shadow(0 19px 17px rgba(0,0,0,.32))}
.photo-hoist-scene .hero-container-image{width:100%;display:block;max-width:none;height:auto;filter:drop-shadow(0 15px 19px rgba(2,7,17,.40));user-select:none;pointer-events:none}
.photo-hoist-scene .photo-winch{position:absolute;z-index:16;top:-17px;left:51%;width:104px;transform:translateX(-50%);filter:drop-shadow(0 7px 8px #07111e96);pointer-events:none}
.photo-hoist-scene .photo-winch img{display:block;width:100%;height:auto}
.photo-hoist-scene .photo-crane-cables{position:absolute;inset:0;width:100%;height:100%;overflow:visible;z-index:15;pointer-events:none;filter:drop-shadow(0 1px 2px rgba(0,0,0,.65))}
.photo-crane-cables .cable-phys{fill:none;stroke:url(#photoSteelCable);stroke-width:2.7;stroke-linecap:round;vector-effect:non-scaling-stroke}
.photo-crane-cables .cable-phys-center{stroke-width:1.8;opacity:.7}
.photo-crane-cables .cable-bolt{fill:#b8b9a6;stroke:#37424a;stroke-width:2;vector-effect:non-scaling-stroke}
@keyframes photoContainerLower{
  0%{transform:translate3d(0,-115px,0) rotate(-1.05deg);opacity:.92}
  12%{opacity:1}
  50%{transform:translate3d(0,-47px,0) rotate(.32deg)}
  78%{transform:translate3d(0,4px,0) rotate(-.14deg)}
  89%{transform:translate3d(0,-3px,0) rotate(.07deg)}
  100%{transform:translate3d(0,0,0) rotate(0);opacity:1}
}
@media(max-width:1120px){.photo-hoist-scene .drop-rig{left:-2%!important;width:106%!important;top:25%!important}.photo-hoist-scene .photo-winch{width:86px;top:-3px}}
@media(max-width:850px){.photo-hoist-scene .drop-rig{left:0!important;width:100%!important;top:26%!important}.photo-hoist-scene .photo-winch{width:75px;top:2px}}
@media(max-width:600px){.photo-hoist-scene .drop-rig{top:14%!important;left:-3%!important;width:106%!important}.photo-hoist-scene .photo-winch{width:56px;top:-5px}}
@media(prefers-reduced-motion:reduce){.photo-hoist-scene .drop-rig{animation:none!important;transform:none!important;opacity:1!important}}