/* =====================================================================
   GSA 360 — public website, light theme
   ===================================================================== */
:root{
  --x-navy:#0B1B4D;--x-ink:#0F172A;--x-muted:#5B6475;--x-line:#E5E8EF;--x-bg:#F6F7FB;
  --x-burg:#8A0F2E;--x-burg2:#A8143A;--x-soft:#FBEFF2;--x-teal:#0F766E;
  --x-ease:cubic-bezier(.2,.8,.2,1);
  --x-font:"Inter","Segoe UI",system-ui,-apple-system,Roboto,Arial,sans-serif;
}
#view-home{background:#fff;color:var(--x-ink);font-family:var(--x-font);overflow-x:clip}
.x-wrap{width:min(1296px,100% - 64px);margin-inline:auto}
@media(max-width:640px){.x-wrap{width:calc(100% - 32px)}}

/* buttons */
.x-btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:48px;padding:0 24px;border-radius:12px;border:1px solid transparent;font-weight:700;font-size:.98rem;text-decoration:none;color:#fff;cursor:pointer;font-family:inherit;transition:transform .25s var(--x-ease),box-shadow .25s,background .25s,border-color .25s;white-space:nowrap}
.x-btn .ic{transition:transform .3s var(--x-ease)}
.x-btn:hover .ic{transform:translateX(3px)}
.x-btn-sm{min-height:42px;padding:0 18px;font-size:.92rem}
.x-btn-burg{background:var(--x-burg);box-shadow:0 10px 24px rgba(138,15,46,.22)}
.x-btn-burg:hover{background:var(--x-burg2);transform:translateY(-2px);box-shadow:0 16px 32px rgba(138,15,46,.3)}

/* navigation */
.x-nav{position:fixed;inset:0 0 auto 0;z-index:60;background:rgba(255,255,255,.86);-webkit-backdrop-filter:blur(14px) saturate(140%);backdrop-filter:blur(14px) saturate(140%);transition:box-shadow .3s}
.x-nav.solid{box-shadow:0 1px 0 var(--x-line),0 10px 30px rgba(11,27,77,.06)}
.x-nav-in{display:flex;align-items:center;gap:28px;height:80px;transition:height .3s}
.x-nav.solid .x-nav-in{height:68px}
.x-brand{display:flex;align-items:center;gap:12px;text-decoration:none;color:var(--x-navy);flex:none}
.x-mark{display:grid;place-items:center;width:46px;height:46px;flex:none;transition:transform .5s var(--x-ease)}
.x-mark img{width:100%;height:100%;object-fit:contain}
.x-brand:hover .x-mark{transform:rotate(-10deg) scale(1.05)}
.x-word{display:flex;flex-direction:column;line-height:1}
.x-word b{font-size:1.45rem;font-weight:850;letter-spacing:.02em;color:var(--x-navy)}
.x-word small{margin-top:5px;font-size:.64rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--x-muted)}
@media(max-width:420px){.x-word small{display:none}}
.x-links{display:flex;align-items:center;gap:4px;margin-left:auto}
.x-links a{position:relative;color:#2B3345;text-decoration:none;font-weight:600;font-size:.95rem;padding:10px 14px;border-radius:10px;transition:color .2s,background .2s}
.x-links a::after{content:"";position:absolute;left:14px;right:14px;bottom:5px;height:2px;border-radius:2px;background:var(--x-burg);transform:scaleX(0);transform-origin:left;transition:transform .35s var(--x-ease)}
.x-links a:hover,.x-links a.cur{color:var(--x-burg)}
.x-links a:hover::after,.x-links a.cur::after{transform:scaleX(1)}
.x-actions{display:flex;align-items:center;gap:12px}
.x-lang{background:#fff;border-color:var(--x-line)}
.x-lang button{color:var(--x-muted)}
.x-lang button[aria-pressed="true"]{background:var(--x-navy);color:#fff}
.x-burger{display:none;width:44px;height:44px;border-radius:12px;border:1px solid var(--x-line);background:#fff;color:var(--x-navy);align-items:center;justify-content:center}
.x-m-only{display:none}
@media(max-width:960px){
  .x-burger{display:inline-flex}.x-staff{display:none}
  .x-links{position:fixed;top:76px;left:12px;right:12px;margin:0;flex-direction:column;align-items:stretch;gap:2px;padding:12px;border-radius:18px;background:#fff;border:1px solid var(--x-line);box-shadow:0 30px 60px rgba(11,27,77,.15);opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s,transform .25s}
  .x-links.open{opacity:1;transform:none;pointer-events:auto}
  .x-links a{padding:14px}.x-links a::after{display:none}
  .x-m-only{display:inline-flex;margin-top:8px}
  .x-actions{margin-left:auto}.x-nav-in{gap:12px}
}

/* hero */
.x-hero{padding:128px 0 34px;background:linear-gradient(180deg,#fff 0%,#F7F8FC 100%)}
.x-hero-top{text-align:center}
.x-eyebrow{display:inline-flex;align-items:center;gap:9px;padding:7px 15px;border-radius:999px;background:var(--x-soft);color:var(--x-burg);font-size:.84rem;font-weight:700;animation:xUp .8s var(--x-ease) both}
.x-dot{width:7px;height:7px;border-radius:50%;background:var(--x-burg);animation:xPing 2.2s infinite}
@keyframes xPing{0%{box-shadow:0 0 0 0 rgba(138,15,46,.45)}80%,100%{box-shadow:0 0 0 9px rgba(138,15,46,0)}}
.x-h1{margin:22px auto 0;max-width:24ch;text-wrap:balance;font-size:clamp(2.1rem,4.4vw,3.9rem);line-height:1.04;letter-spacing:-.035em;font-weight:850;color:var(--x-navy);animation:xUp .9s .08s var(--x-ease) both}
.x-h1 em{font-style:normal;color:var(--x-burg)}
@keyframes xUp{from{opacity:0;transform:translateY(22px)}to{opacity:1;transform:none}}
.x-band-wrap{margin-top:44px;animation:xUp 1s .18s var(--x-ease) both}
.x-band{position:relative;height:clamp(340px,44vw,460px);border-radius:30px;overflow:hidden;box-shadow:0 30px 70px rgba(11,27,77,.16)}
.x-band>img{width:100%;height:100%;object-fit:cover;animation:xKen 30s ease-in-out infinite alternate;transform-origin:60% 60%}
@keyframes xKen{from{transform:scale(1.02)}to{transform:scale(1.1) translate(-1%,-1%)}}
.x-band::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,27,77,.35),transparent 50%);pointer-events:none}
.x-ask{position:absolute;z-index:2;left:50%;top:0;transform:translateX(-50%);width:min(900px,calc(100% - 40px));background:#fff;border-radius:0 0 24px 24px;padding:16px 22px 14px;box-shadow:0 20px 50px rgba(11,27,77,.14)}
.x-ask-tabs{display:flex;gap:6px;margin-bottom:12px}
.x-ask-tabs label{cursor:pointer}
.x-ask-tabs input{position:absolute;opacity:0;pointer-events:none}
.x-ask-tabs span{display:inline-block;padding:8px 15px;border-radius:999px;font-size:.82rem;font-weight:700;color:var(--x-muted);background:#F1F3F8;transition:background .2s,color .2s}
.x-ask-tabs input:checked+span{background:var(--x-navy);color:#fff}
.x-ask-tabs input:focus-visible+span{outline:3px solid #3B47FF;outline-offset:2px}
.x-ask-row{display:grid;grid-template-columns:1.25fr 1fr 1fr auto;gap:12px;align-items:end}
.x-fld{display:flex;flex-direction:column;gap:6px;min-width:0}
.x-fld label{font-size:.8rem;font-weight:700;color:#334155}
.x-fld input,.x-fld select{height:46px;border:1px solid #D5DAE3;border-radius:11px;padding:0 13px;font:inherit;font-size:.95rem;color:var(--x-ink);background:#fff;transition:border-color .2s,box-shadow .2s;min-width:0}
.x-fld input:focus,.x-fld select:focus{outline:none;border-color:var(--x-burg);box-shadow:0 0 0 4px rgba(138,15,46,.1)}
.x-ask .x-btn{height:46px;min-height:46px}
.x-ask-note{margin-top:8px;font-size:.74rem;color:#8A93A6}
@media(max-width:860px){
  .x-band{height:auto;overflow:visible;box-shadow:none;border-radius:24px;background:none}
  .x-band>img{height:260px;border-radius:24px;display:block}
  .x-band::after{display:none}
  .x-ask{position:relative;left:auto;top:auto;transform:none;width:auto;margin-top:-30px;border-radius:20px}
  .x-ask-row{grid-template-columns:1fr}
}
.x-facts{list-style:none;display:flex;justify-content:center;flex-wrap:wrap;gap:12px;margin:22px 0 0;padding:0}
.x-facts li{display:flex;align-items:center;gap:10px;padding:10px 16px;border-radius:14px;background:#fff;border:1px solid var(--x-line);transition:transform .3s var(--x-ease),border-color .3s,box-shadow .3s}
.x-facts li:hover{transform:translateY(-3px);border-color:#E7C3CC;box-shadow:0 12px 26px rgba(11,27,77,.08)}
.x-facts b{font-size:1.02rem;font-weight:800;color:var(--x-navy)}
.x-facts span{font-size:.82rem;color:var(--x-muted)}

/* clients */
.x-clients{padding:46px 0 56px;text-align:center;background:#F7F8FC;border-bottom:1px solid var(--x-line)}
.x-clients-k{font-size:.74rem;font-weight:800;letter-spacing:.2em;text-transform:uppercase;color:var(--x-muted)}
.x-clients-t{margin-top:10px;font-size:clamp(1.4rem,2.4vw,1.9rem);font-weight:750;letter-spacing:-.02em;color:var(--x-navy)}
.x-logos{list-style:none;display:flex;justify-content:center;align-items:center;flex-wrap:wrap;gap:22px 56px;margin:32px 0 0;padding:0}
.x-logos li{display:flex;align-items:center;gap:12px;height:64px;padding:8px 16px;border-radius:16px;transition:transform .35s var(--x-ease),background .35s}
.x-logos li:hover{transform:translateY(-3px);background:#fff;box-shadow:0 12px 26px rgba(11,27,77,.08)}
.x-logos img{height:100%;width:auto;object-fit:contain}
.x-logos span{font-weight:800;font-size:1.05rem;color:#1F2A44;white-space:nowrap}

/* cargo animation */
.x-cargo{position:relative;padding:70px 0 70px;background:#fff}
.x-scene{display:block;width:min(1296px,100% - 64px);height:auto;aspect-ratio:1200/440;margin:0 auto;border-radius:28px;border:1px solid var(--x-line);box-shadow:0 26px 60px rgba(11,27,77,.1);background:#F4F7FF}
@media(max-width:640px){.x-scene{width:calc(100% - 20px);border-radius:18px;aspect-ratio:900/440}}
.x-scene *{transform-box:view-box}
.sc-ship{animation:scShip 18s var(--x-ease) infinite}
@keyframes scShip{0%{transform:translateX(-470px)}20%,86%{transform:translateX(0)}100%{transform:translateX(-470px)}}
.sc-box{animation:scBox 18s linear infinite}
@keyframes scBox{
  0%{transform:translate(-470px,0);opacity:1;animation-timing-function:cubic-bezier(.2,.8,.2,1)}
  20%{transform:translate(0,0);animation-timing-function:linear}
  28%{transform:translate(0,0);animation-timing-function:ease-in-out}
  40%{transform:translate(0,-140px);animation-timing-function:ease-in-out}
  55%{transform:translate(300px,-140px);animation-timing-function:ease-in-out}
  63%{transform:translate(300px,0);animation-timing-function:linear}
  70%{transform:translate(300px,0);animation-timing-function:ease-in}
  90%{transform:translate(860px,0);opacity:1}
  91%,100%{transform:translate(860px,0);opacity:0}}
.sc-trolley{animation:scTrolley 18s ease-in-out infinite}
@keyframes scTrolley{0%,40%{transform:translateX(0)}55%,68%{transform:translateX(300px)}86%,100%{transform:translateX(0)}}
.sc-spreader{animation:scSpread 18s ease-in-out infinite}
@keyframes scSpread{0%,18%{transform:translateY(-146px)}28%{transform:translateY(0)}40%,55%{transform:translateY(-140px)}63%{transform:translateY(0)}70%,100%{transform:translateY(-146px)}}
.sc-cable{transform-origin:405px 110px;animation:scCable 18s ease-in-out infinite}
@keyframes scCable{0%,18%{transform:scaleY(.045)}28%{transform:scaleY(1)}40%,55%{transform:scaleY(.085)}63%{transform:scaleY(1)}70%,100%{transform:scaleY(.045)}}
.sc-truck{animation:scTruck 18s linear infinite}
@keyframes scTruck{0%{transform:translateX(560px)}40%{transform:translateX(560px);animation-timing-function:cubic-bezier(.2,.8,.2,1)}52%{transform:translateX(0)}70%{transform:translateX(0);animation-timing-function:ease-in}90%,100%{transform:translateX(860px)}}
.sc-beam{opacity:0;animation:scBeam 18s linear infinite}
@keyframes scBeam{0%,78%{opacity:0}80%,86%{opacity:1}88%,100%{opacity:0}}
.sc-ok{opacity:.25;animation:scOk 18s linear infinite}
@keyframes scOk{0%,84%{opacity:.25}86%,95%{opacity:1}98%,100%{opacity:.25}}
.sc-tag{animation:scTag 1.2s ease-in-out infinite}
@keyframes scTag{50%{opacity:.3}}
.sc-blink{animation:scBlink 1.6s steps(1) infinite}
@keyframes scBlink{50%{opacity:.15}}
.sc-plane-wrap{animation:scPlane 14s linear infinite}
@keyframes scPlane{0%{transform:translate(-120px,150px) rotate(-6deg)}55%{transform:translate(1320px,40px) rotate(-6deg)}100%{transform:translate(1320px,40px) rotate(-6deg)}}
.sc-waves path{animation:scWave 6s linear infinite}
.sc-waves path+path{animation-duration:9s}
@keyframes scWave{to{transform:translateX(-80px)}}
.sc-lane line{animation:scLane 2.4s linear infinite}
@keyframes scLane{to{stroke-dashoffset:-64}}
.sc-route{animation:scLane 3s linear infinite}
.sc-pulse{transform-box:fill-box;transform-origin:center;animation:scPulse 2.4s ease-out infinite}
.sc-pulse.d2{animation-delay:1.2s}
@keyframes scPulse{0%{transform:scale(1);opacity:1}100%{transform:scale(3.2);opacity:0}}
.x-cargo-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;width:min(1296px,100% - 64px);margin:20px auto 0}
.x-mini{position:relative;border-radius:22px;overflow:hidden;border:1px solid var(--x-line);background:#fff;transition:transform .35s var(--x-ease),border-color .35s,box-shadow .35s}
.x-mini:hover{transform:translateY(-6px);border-color:#E7C3CC;box-shadow:0 20px 44px rgba(11,27,77,.1)}
.x-mini-svg{display:block;width:100%;height:auto}
.x-mini-svg *{transform-box:view-box}
.x-defs{position:absolute}
.m-plane{animation:mPlane 5s ease-in-out infinite}
@keyframes mPlane{0%{transform:translate(-50px,20px) rotate(-12deg)}40%{transform:translate(40px,60px) rotate(0)}60%{transform:translate(60px,70px)}100%{transform:translate(200px,70px)}}
.m-uld{animation:mUld 5s ease-in-out infinite}
@keyframes mUld{0%,55%{transform:translateX(0)}80%,100%{transform:translateX(-60px);opacity:0}}
.m-stamp{animation:mStamp 3s cubic-bezier(.5,0,.2,1) infinite}
@keyframes mStamp{0%,20%{transform:translateY(0)}45%{transform:translateY(58px)}55%{transform:translateY(54px)}75%,100%{transform:translateY(0)}}
.m-seal{opacity:0;animation:mSeal 3s infinite;transform-box:fill-box;transform-origin:center}
@keyframes mSeal{0%,45%{opacity:0;transform:scale(.6)}50%,85%{opacity:1;transform:none}100%{opacity:0}}
.m-truck{animation:mTruck 4.5s ease-in-out infinite}
@keyframes mTruck{0%{transform:translateX(-110px)}60%{transform:translateX(20px)}75%{transform:translateX(20px)}100%{transform:translateX(180px)}}
.m-dash{animation:scLane 1.2s linear infinite}
.m-pin{animation:mPin 4.5s ease-in-out infinite;transform-box:fill-box;transform-origin:50% 100%}
@keyframes mPin{0%,55%{transform:translateY(-6px);opacity:.4}65%,80%{transform:none;opacity:1}100%{opacity:.4}}
@media(max-width:760px){.x-cargo-cards{gap:8px;width:calc(100% - 20px);margin-top:10px}.x-mini{border-radius:14px}}
.x-cargo.paused *{animation-play-state:paused!important}

/* sections */
.x-sec{position:relative;padding:110px 0}
@media(max-width:700px){.x-sec{padding:72px 0}}
.x-kicker{display:inline-flex;align-items:center;gap:10px;font-size:.78rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:var(--x-burg)}
.x-kicker::before{content:"";width:26px;height:2px;border-radius:2px;background:var(--x-burg)}
.x-h2{margin-top:14px;font-size:clamp(1.9rem,3.6vw,3rem);line-height:1.08;letter-spacing:-.03em;font-weight:850;color:var(--x-navy);max-width:22ch}
.x-body{margin-top:18px;font-size:1.06rem;line-height:1.7;color:var(--x-muted);max-width:60ch}
.x-head{margin-bottom:50px}
.x-rev{opacity:0;transform:translateY(30px);transition:opacity .9s var(--x-ease),transform .9s var(--x-ease)}
.x-rev.in{opacity:1;transform:none}
.x-rev.d1{transition-delay:.12s}.x-rev.d2{transition-delay:.24s}.x-rev.d3{transition-delay:.36s}
.x-grid-fx{display:none}

/* about */
.x-about{background:#F7F8FC}
.x-about-grid{display:grid;grid-template-columns:1fr 1.05fr;gap:64px;align-items:center}
@media(max-width:960px){.x-about-grid{grid-template-columns:1fr;gap:40px}}
.x-values{list-style:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;margin:30px 0 0;padding:0;max-width:520px}
.x-values li{display:flex;align-items:center;gap:12px;padding:14px 16px;border-radius:16px;background:#fff;border:1px solid var(--x-line);font-weight:700;color:var(--x-navy);transition:transform .3s var(--x-ease),border-color .3s,box-shadow .3s}
.x-values li .ic{width:22px;height:22px;color:var(--x-burg)}
.x-values li:hover{transform:translateY(-3px);border-color:#E7C3CC;box-shadow:0 12px 26px rgba(11,27,77,.08)}
.x-photo-card{position:relative;border-radius:28px;overflow:hidden;aspect-ratio:16/11;box-shadow:0 30px 70px rgba(11,27,77,.18);transform:perspective(1100px) rotateY(-5deg);transition:transform .7s var(--x-ease)}
.x-photo-card:hover{transform:perspective(1100px) rotateY(0) scale(1.01)}
.x-photo-card img{width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--x-ease)}
.x-photo-card:hover img{transform:scale(1.05)}
.x-photo-glow{position:absolute;inset:0;background:linear-gradient(180deg,transparent 55%,rgba(11,27,77,.6))}
.x-badge{position:absolute;left:22px;bottom:22px;display:flex;flex-direction:column;padding:14px 18px;border-radius:16px;background:#fff;box-shadow:0 14px 30px rgba(11,27,77,.18)}
.x-badge span:last-child{font-size:.8rem;color:var(--x-muted);order:-1}
.x-badge-y{font-size:2.2rem;font-weight:850;color:var(--x-burg);letter-spacing:-.03em;line-height:1.05}
.x-mv{display:grid;grid-template-columns:1fr 1fr;gap:22px;margin-top:80px}
@media(max-width:800px){.x-mv{grid-template-columns:1fr;margin-top:56px}}
.x-mv-card{position:relative;padding:34px;border-radius:24px;background:#fff;border:1px solid var(--x-line);overflow:hidden;transition:transform .4s var(--x-ease),box-shadow .4s,border-color .4s}
.x-mv-card::before{content:"";position:absolute;width:280px;height:280px;right:-110px;top:-130px;border-radius:50%;background:radial-gradient(circle,rgba(138,15,46,.1),transparent 65%);transition:transform .8s var(--x-ease)}
.x-mv-card:hover{transform:translateY(-6px);box-shadow:0 22px 50px rgba(11,27,77,.1);border-color:#E7C3CC}
.x-mv-card:hover::before{transform:translate(-40px,40px) scale(1.2)}
.x-mv-ic{position:relative;display:grid;place-items:center;width:54px;height:54px;border-radius:16px;background:var(--x-burg);color:#fff;box-shadow:0 10px 24px rgba(138,15,46,.25)}
.x-mv-ic .ic{width:26px;height:26px}
.x-mv-card h3{position:relative;margin-top:20px;font-size:1.45rem;color:var(--x-navy)}
.x-mv-card p{position:relative;margin-top:10px;font-size:1.05rem;line-height:1.7;color:var(--x-muted)}

/* journey */
.x-journey{background:#fff}
.x-timeline{list-style:none;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px;margin:0;padding:0}
.x-tl{border-radius:24px;overflow:hidden;background:#fff;border:1px solid var(--x-line);transition:transform .45s var(--x-ease),border-color .45s,box-shadow .45s}
.x-tl:hover{transform:translateY(-8px);border-color:#E7C3CC;box-shadow:0 26px 60px rgba(11,27,77,.12)}
.x-tl-photo{position:relative;aspect-ratio:16/10;overflow:hidden}
.x-tl-photo img{width:100%;height:100%;object-fit:cover;transition:transform 1.1s var(--x-ease)}
.x-tl:hover .x-tl-photo img{transform:scale(1.07)}
.x-tl-geo{position:absolute;left:14px;top:14px;padding:6px 10px;border-radius:999px;font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.72rem;color:var(--x-navy);background:rgba(255,255,255,.9)}
.x-tl-body{padding:24px 26px 28px}
.x-tl-year{font-size:2.4rem;font-weight:850;letter-spacing:-.04em;line-height:1;color:var(--x-burg)}
.x-tl-body h3{margin-top:8px;font-size:1.4rem;color:var(--x-navy)}
.x-tl-body p{margin-top:8px;color:var(--x-muted);line-height:1.65}
.x-tl-line{position:relative;height:4px;margin:38px 0 0;border-radius:4px;background:var(--x-line)}
.x-tl-line span{position:absolute;inset:0 auto 0 0;width:0;border-radius:4px;background:var(--x-burg);transition:width 1.6s var(--x-ease)}
.x-tl-line i{position:absolute;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;border-radius:50%;background:#fff;border:3px solid var(--x-line);transition:border-color .4s}
.x-tl-line i.d0{left:16.66%}.x-tl-line i.d1{left:50%}.x-tl-line i.d2{left:83.33%}
.x-tl-line.on i{border-color:var(--x-burg)}
.x-tl-line.on i.d1{transition-delay:.5s}.x-tl-line.on i.d2{transition-delay:1s}
.x-today{margin-top:30px;text-align:center;font-size:1.08rem;color:var(--x-navy);font-weight:600}
@media(max-width:900px){.x-timeline{grid-template-columns:1fr}.x-tl-line{display:none}}

/* services */
.x-services{background:#F7F8FC}
.x-svc-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:18px}
@media(max-width:1100px){.x-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.x-svc-grid{grid-template-columns:1fr}}
.x-svc{position:relative;padding:26px 24px 28px;border-radius:22px;background:#fff;border:1px solid var(--x-line);transition:transform .4s var(--x-ease),border-color .4s,box-shadow .4s}
.x-svc:hover{transform:translateY(-6px);border-color:#E7C3CC;box-shadow:0 20px 44px rgba(11,27,77,.1)}
.x-svc-ic{display:grid;place-items:center;width:52px;height:52px;border-radius:15px;background:var(--x-soft);color:var(--x-burg);transition:transform .4s var(--x-ease),background .3s,color .3s}
.x-svc-ic .ic{width:25px;height:25px}
.x-svc:hover .x-svc-ic{background:var(--x-burg);color:#fff;transform:rotate(-6deg) scale(1.06)}
.x-svc h3{margin-top:20px;font-size:1.15rem;color:var(--x-navy)}
.x-svc p{margin-top:8px;font-size:.95rem;line-height:1.6;color:var(--x-muted)}
.x-svc-more .x-svc-ic{background:#EEF1FB;color:var(--x-navy)}

/* contact */
.x-contact{background:#fff}
.x-contact-bg{display:none}
.x-c-grid{display:grid;grid-template-columns:1.2fr 1fr 1fr 1fr;gap:18px}
@media(max-width:1100px){.x-c-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.x-c-grid{grid-template-columns:1fr}}
.x-c-card{position:relative;display:flex;flex-direction:column;gap:8px;min-height:190px;padding:24px;border-radius:22px;text-align:left;text-decoration:none;color:var(--x-ink);background:#F7F8FC;border:1px solid var(--x-line);cursor:pointer;font:inherit;transition:transform .35s var(--x-ease),border-color .35s,box-shadow .35s,background .35s}
.x-c-card:hover{transform:translateY(-5px);border-color:#E7C3CC;background:#fff;box-shadow:0 18px 40px rgba(11,27,77,.1)}
.x-c-ic{display:grid;place-items:center;width:46px;height:46px;border-radius:14px;background:#fff;color:var(--x-burg);margin-bottom:8px;box-shadow:0 4px 12px rgba(11,27,77,.06)}
.x-c-ic .ic{width:23px;height:23px}
.x-c-label{font-size:.76rem;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:#8A93A6}
.x-c-val{font-size:1.05rem;font-weight:700;line-height:1.45;color:var(--x-navy);overflow-wrap:anywhere}
.x-c-go{position:absolute;top:22px;right:22px;width:34px;height:34px;border-radius:50%;display:grid;place-items:center;background:#fff;color:var(--x-navy);transition:background .3s,color .3s,transform .4s var(--x-ease)}
.x-c-card:hover .x-c-go{background:var(--x-burg);color:#fff;transform:rotate(-45deg)}
.x-c-card#copyAddr:hover .x-c-go{transform:none}
.x-c-phones{cursor:default}
.x-c-phones a{display:flex;flex-direction:column;text-decoration:none;color:var(--x-navy);font-weight:700;font-size:1.02rem;padding:4px 0;border-radius:8px;transition:color .2s}
.x-c-phones a small{font-size:.72rem;font-weight:700;color:#8A93A6;text-transform:uppercase;letter-spacing:.08em}
.x-c-phones a:hover{color:var(--x-burg)}

/* footer */
.x-foot{background:var(--x-navy);color:#C7CEEA;padding:54px 0 24px}
.x-foot-in{display:grid;grid-template-columns:1.2fr 1fr auto;gap:40px;align-items:start}
@media(max-width:800px){.x-foot-in{grid-template-columns:1fr}}
.x-foot-brand{display:flex;gap:16px;align-items:center}
.x-foot .x-word b{color:#fff}.x-foot .x-word small{color:#98A3CF}
.x-foot .x-mark{background:#fff;border-radius:50%;padding:5px}
.x-foot-brand p{color:#98A3CF;font-size:.9rem;line-height:1.6}
.x-foot-links{display:flex;flex-wrap:wrap;gap:6px 22px}
.x-foot-links a{color:#DDE3FF;text-decoration:none;font-weight:600;transition:color .2s}
.x-foot-links a:hover{color:#fff}
.x-foot-offices{display:flex;gap:8px;flex-wrap:wrap}
.x-foot-offices span{padding:6px 12px;border-radius:999px;border:1px solid rgba(255,255,255,.2);font-size:.82rem;color:#DDE3FF}
.x-foot-bottom{display:flex;justify-content:space-between;gap:12px;margin-top:38px;padding-top:18px;border-top:1px solid rgba(255,255,255,.1);font-size:.84rem;color:#8A94BD}

@media (prefers-reduced-motion:reduce){
  #view-home *,#view-home *::before,#view-home *::after{animation:none!important;transition:none!important}
  .x-rev{opacity:1;transform:none}
}

/* ---------- realistic port film ---------- */
.x-film{position:relative;width:min(1296px,100% - 64px);margin:0 auto;aspect-ratio:16/7;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px rgba(11,27,77,.16);background:#0B1B4D}
.x-film-v{width:100%;height:100%;object-fit:cover;display:block;transform:scale(1.02);transition:transform 8s ease-out}
.x-film:hover .x-film-v{transform:scale(1.07)}
.x-film-shade{position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,27,77,.25),transparent 40%);pointer-events:none}
@media(max-width:640px){.x-film{width:calc(100% - 20px);border-radius:18px;aspect-ratio:16/10}}
.x-mini{aspect-ratio:16/9}
.x-mini img{width:100%;height:100%;object-fit:cover;display:block;transition:transform 1s var(--x-ease),filter .6s}
.x-mini::after{content:"";position:absolute;inset:0;background:linear-gradient(0deg,rgba(11,27,77,.45),transparent 55%);transition:opacity .5s}
.x-mini:hover img{transform:scale(1.09)}
.x-mini:hover::after{opacity:.5}
.x-mini-ic{position:absolute;z-index:1;left:16px;bottom:14px;display:grid;place-items:center;width:42px;height:42px;border-radius:13px;background:rgba(255,255,255,.92);color:var(--x-burg);box-shadow:0 8px 20px rgba(0,0,0,.2);transition:transform .45s var(--x-ease),background .3s,color .3s}
.x-mini-ic .ic{width:22px;height:22px}
.x-mini:hover .x-mini-ic{transform:translateY(-4px) rotate(-8deg);background:var(--x-burg);color:#fff}

/* ---------- services: photo reveal on hover ---------- */
.x-svc{overflow:hidden;isolation:isolate;min-height:250px;display:flex;flex-direction:column}
.x-svc-bg{position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .55s var(--x-ease)}
.x-svc-bg img{width:100%;height:100%;object-fit:cover;transform:scale(1.12);transition:transform 1.2s var(--x-ease)}
.x-svc-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,27,77,.55),rgba(11,27,77,.92))}
.x-svc:hover .x-svc-bg{opacity:1}
.x-svc:hover .x-svc-bg img{transform:scale(1)}
.x-svc h3,.x-svc p{transition:color .4s}
.x-svc:hover h3{color:#fff}
.x-svc:hover p{color:#DDE3FF}
.x-svc:hover{border-color:transparent;box-shadow:0 26px 60px rgba(11,27,77,.22)}
.x-svc-go{margin-top:auto;padding-top:18px;display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--x-soft);color:var(--x-burg);transition:background .3s,color .3s,transform .45s var(--x-ease)}
.x-svc:hover .x-svc-go{background:#fff;color:var(--x-burg);transform:translateX(6px)}
.x-svc-go{padding-top:0;margin-top:auto}
.x-svc p{margin-bottom:18px}

/* ---------- hover motion for every icon and control ---------- */
@keyframes xIcon{0%{transform:none}30%{transform:translateY(-3px) rotate(-8deg) scale(1.08)}60%{transform:translateY(0) rotate(5deg)}100%{transform:none}}
#view-home a:hover .ic,#view-home button:hover .ic,.x-values li:hover .ic,.x-c-card:hover .x-c-ic .ic,.x-mv-card:hover .ic,.x-facts li:hover b,.x-svc:hover .x-svc-ic .ic{animation:xIcon .7s var(--x-ease)}
.x-svc:hover .x-svc-ic{background:var(--x-burg);color:#fff;transform:rotate(-6deg) scale(1.08)}
.x-c-card:hover .x-c-ic{background:var(--x-burg);color:#fff;transition:background .3s,color .3s}
.x-links a,.x-foot-links a{transition:color .2s,transform .3s var(--x-ease)}
.x-links a:hover{transform:translateY(-1px)}
.x-ask-tabs span{transition:background .2s,color .2s,transform .25s var(--x-ease)}
.x-ask-tabs label:hover span{transform:translateY(-2px)}
.x-ask-tabs label:hover input:not(:checked)+span{background:#E7EAF3;color:var(--x-navy)}
.x-fld input:hover,.x-fld select:hover{border-color:#AEB6C8}
.x-lang button{transition:background .2s,color .2s,transform .2s}
.x-lang button:hover{transform:scale(1.06)}
.x-brand .x-word b{transition:color .3s}
.x-brand:hover .x-word b{color:var(--x-burg)}
.x-tl:hover .x-tl-year{animation:xIcon .7s var(--x-ease);display:inline-block}
.x-foot-offices span{transition:background .3s,color .3s,transform .3s var(--x-ease)}
.x-foot-offices span:hover{background:#fff;color:var(--x-navy);transform:translateY(-2px)}
.x-logos li:hover img{animation:xIcon .8s var(--x-ease)}

.x-svc-grid{grid-template-columns:repeat(5,minmax(0,1fr))}
@media(max-width:1180px){.x-svc-grid{grid-template-columns:repeat(3,minmax(0,1fr))}}
@media(max-width:820px){.x-svc-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:520px){.x-svc-grid{grid-template-columns:1fr}}
.x-svc{padding:24px 22px 24px}
/* scene tabs over the film */
.x-film-tabs{position:absolute;z-index:2;left:50%;bottom:22px;transform:translateX(-50%);display:flex;gap:6px;padding:6px;border-radius:18px;background:rgba(255,255,255,.88);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 14px 34px rgba(11,27,77,.22)}
.x-film-tabs button{position:relative;display:flex;align-items:center;gap:8px;min-height:44px;padding:0 18px;border:0;border-radius:13px;background:transparent;color:#334155;font:inherit;font-weight:700;font-size:.92rem;cursor:pointer;overflow:hidden;transition:background .3s,color .3s,transform .25s var(--x-ease)}
.x-film-tabs button:hover{transform:translateY(-2px);color:var(--x-navy)}
.x-film-tabs button[aria-pressed="true"]{background:var(--x-navy);color:#fff}
.x-film-tabs button .ic{width:19px;height:19px}
.x-film-tabs b{position:absolute;left:12px;right:12px;bottom:5px;height:3px;border-radius:3px;background:rgba(255,255,255,.18);opacity:0}
.x-film-tabs button[aria-pressed="true"] b{opacity:1}
.x-film-tabs em{display:block;height:100%;width:0;border-radius:3px;background:#FF7A95}
@media(max-width:640px){.x-film-tabs{bottom:12px;gap:2px;padding:4px}.x-film-tabs button{padding:0 11px;font-size:.8rem;min-height:38px}}