@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@400;500;600;700&family=Manrope:wght@400;500;600;700;800&display=swap');:root{--navy:#09233b;--dark:#071d30;--yellow:#fde602;--ink:#10273c;--muted:#68798a;--line:#dce4e9;--off:#f4f7f8}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;color:var(--ink);font-family:'DM Sans',Arial,sans-serif;background:#fff}h1,h2,h3,h4,p{margin-top:0}h1,h2,h3{font-family:Manrope,Arial,sans-serif}a{color:inherit;text-decoration:none}button,input,textarea{font:inherit}button{cursor:pointer}.wrap{max-width:1250px;margin:auto;padding-left:30px;padding-right:30px}.header{position:sticky;top:0;z-index:20;background:#fff;box-shadow:0 2px 15px #001b3210}.nav{display:flex;align-items:center;justify-content:space-between;height:90px;gap:30px}.brand img{width:102px;height:74px;object-fit:contain}.links{display:flex;align-items:center;gap:28px;font-size:13px;font-weight:700}.links a:hover{color:#b39c00}.navcta{background:var(--navy);color:white;padding:15px 23px;font-size:13px;font-weight:700}.hamb{display:none;border:0;background:none;font-size:25px}.hero{min-height:665px;position:relative;display:flex;align-items:center;overflow:hidden;background:#153b54}.hero-image,.hero-video,.hero-shade{position:absolute;inset:0;width:100%;height:100%}.hero-image{background:linear-gradient(105deg,#09243c66,#173c5544),url('https://images.unsplash.com/photo-1578575437130-527eed3abbec?w=2000&q=85') center/cover no-repeat}.hero-video{object-fit:cover;pointer-events:none}.hero-shade{background:linear-gradient(90deg,rgba(3,22,38,.91) 0%,rgba(3,22,38,.68) 42%,rgba(3,22,38,.08) 100%)}.hero-content{position:relative;z-index:2;width:100%;padding-top:80px;padding-bottom:80px;color:white}.eyebrow{font-size:11px;letter-spacing:2.2px;color:#9d8100;font-weight:800;display:block;margin-bottom:23px}.eyebrow.light{color:var(--yellow)}h1{font-size:clamp(44px,5.1vw,78px);line-height:1.13;letter-spacing:-3px;font-weight:800;max-width:850px;margin-bottom:25px}h1 em,h2 em{font-style:normal;color:var(--yellow)}.hero-content>p{font-size:16px;line-height:1.85;color:#e1eaf0;max-width:580px}.actions{display:flex;gap:12px;margin-top:32px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;gap:20px;padding:16px 22px;font-size:13px;font-weight:800;border:1px solid transparent;transition:.2s}.btn:hover{transform:translateY(-2px)}.btn.yellow{background:var(--yellow);color:var(--dark)}.btn.outline{border-color:#fff;color:#fff}.btn.dark{background:var(--navy);color:#fff}.btn.outline-dark{border-color:var(--navy);color:var(--navy)}.hero-note{font-size:11px;letter-spacing:2px;margin-top:68px;color:#d1dce4}.hero-note span{padding:0 12px;color:var(--yellow)}.hero-side{position:absolute;right:35px;bottom:36px;z-index:3;color:#fff;font-size:10px;letter-spacing:2px}.trustbar{background:var(--navy);color:white}.trustgrid{display:grid;grid-template-columns:repeat(4,1fr);padding-top:30px;padding-bottom:30px}.trustgrid>div{border-right:1px solid #ffffff30;padding:0 30px}.trustgrid>div:first-child{padding-left:0}.trustgrid>div:last-child{border:0}.trustgrid strong{display:block;font:800 23px Manrope;margin-bottom:6px}.trustgrid span{font-size:12px;color:#b7c9d7}.section{padding-top:100px;padding-bottom:105px;scroll-margin-top:90px}.sectionhead{display:flex;justify-content:space-between;align-items:end;gap:40px;margin-bottom:45px}.sectionhead h2{font-size:clamp(32px,3.4vw,52px);letter-spacing:-2px;line-height:1.17;margin:0}.sectionhead h2 em{color:#b59c00}.sectionhead>p{max-width:365px;color:var(--muted);font-size:14px;line-height:1.9;margin:0}.services{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.service{background:var(--off);padding:25px}.service-num{font-size:11px;letter-spacing:1.5px;font-weight:800;color:#607c8d;margin-bottom:20px}.service-art{height:200px;background-position:center;background-size:cover;margin-bottom:25px}.art-lcl{background-image:linear-gradient(#0a2c4630,#0a2c4630),url('https://images.unsplash.com/photo-1586528116311-ad8dd3c8310d?w=850&q=80')}.art-fcl{background-image:linear-gradient(#0a2c4630,#0a2c4630),url('https://images.unsplash.com/photo-1494412519320-aa613dfb7738?w=850&q=80')}.art-help{background-image:linear-gradient(#0a2c4630,#0a2c4630),url('https://images.unsplash.com/photo-1566576912321-d58ddd7a6088?w=850&q=80')}.service h3{font-size:21px}.service p{font-size:13px;line-height:1.8;color:var(--muted);min-height:70px}.service>a{font-size:12px;font-weight:800;border-bottom:1px solid var(--navy);padding-bottom:5px}.rates-section{background:var(--off)}.rate-controls{display:flex;justify-content:space-between;gap:20px;margin-bottom:22px}.tabs{display:flex;background:#e4eaed;padding:5px;gap:4px}.tabs button{border:0;padding:13px 23px;background:transparent;color:var(--ink);font-size:12px;font-weight:800}.tabs button.active{background:var(--navy);color:#fff}.rate-controls input{padding:14px 18px;border:1px solid var(--line);min-width:280px;outline-color:#bca600}.tablewrap{overflow-x:auto;background:#fff}.tablewrap table{border-collapse:collapse;width:100%;min-width:690px}.tablewrap th{text-align:left;background:var(--navy);color:white;font-size:11px;letter-spacing:1px;padding:19px 22px}.tablewrap td{padding:20px 22px;border-bottom:1px solid var(--line);font-size:13px}.tablewrap td:nth-child(3){font-weight:800;font-size:15px}.tablewrap td a{color:#8a7600;font-weight:800;white-space:nowrap}.rate-bottom{display:flex;justify-content:space-between;gap:20px;margin-top:20px;font-size:12px;color:var(--muted)}.rate-bottom a{color:var(--navy);font-weight:800}.banner{background:var(--navy);color:#fff;padding:65px 0}.banner-inner{display:flex;justify-content:space-between;align-items:center;gap:30px}.banner h2{font-size:34px;letter-spacing:-1px}.banner p{color:#d5e2eb;margin:0}.contact-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:55px}.contact-info h3{font-size:34px;line-height:1.25}.contact-info>p{color:var(--muted);line-height:1.8}.contact-link{display:flex;align-items:center;gap:16px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:23px 0;margin-top:30px}.contact-link>span:last-child{margin-left:auto}.contact-icon{background:#e5f8ec;color:#13884b;font-size:28px;padding:10px 15px}.contact-link small{display:block;font-size:10px;letter-spacing:1px;color:var(--muted)}.contact-link b{font-size:19px}.wechat{margin-top:35px}.wechat h4{margin-bottom:15px}.qr-grid{display:grid;grid-template-columns:1fr 1fr;gap:15px}.qr-grid>div{background:var(--off);padding:12px}.qr-grid img{width:100%;display:block;aspect-ratio:1;object-fit:contain;background:white}.qr-grid strong,.qr-grid small{display:block;font-size:12px;margin-top:8px}.qr-grid small{color:var(--muted);margin-top:2px}.qr-tip{font-size:12px;color:var(--muted);margin-top:12px}.form-card{background:var(--off);padding:40px}.form-card h3{font-size:29px;margin-bottom:30px}.form-card label{display:block;font-size:12px;font-weight:800;margin-bottom:20px}.form-card label b{color:#c23a3a}.form-card input:not([type=file]),.form-card textarea{width:100%;border:1px solid #d7e1e6;background:white;padding:15px;margin-top:9px;outline-color:#b8a000;font-weight:400;font-size:13px}.form-card textarea{resize:vertical}.upload{display:block;border:1px dashed #a8b9c6;padding:22px;background:#fff;margin-top:10px;cursor:pointer}.upload input{width:100%;margin-bottom:8px}.upload span,.upload small{display:block}.upload small{color:var(--muted);font-weight:400;margin-top:5px}.honeypot{display:none!important}.privacy{font-size:11px;color:var(--muted);line-height:1.6}.form-card button{width:100%;border:0}.locations{background:var(--off)}.location-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px}.location-card{background:white}.loc-visual{height:225px;display:flex;align-items:end;padding:20px;background-size:cover;background-position:center}.loc-jakarta{background-image:linear-gradient(0deg,#082b42ad,transparent),url('https://images.unsplash.com/photo-1555899434-94d1368aa7af?w=950&q=80')}.loc-china{background-image:linear-gradient(0deg,#082b42ad,transparent),url('https://images.unsplash.com/photo-1537531383496-f4749b8032cf?w=950&q=80')}.loc-visual span{color:white;font-size:12px;font-weight:800;letter-spacing:2px}.loc-body{padding:30px}.loc-body h3{font-size:21px}.loc-body p{font-size:13px;color:var(--muted);line-height:1.9;min-height:65px}.loc-body .muted{font-size:11px;min-height:0}footer{background:#061b2c;color:white;padding-top:65px}.footer-grid{display:grid;grid-template-columns:2fr 1fr 1.5fr;gap:35px;padding-bottom:55px}.footer-logo{width:115px;height:100px;object-fit:contain;background:#fff;border-radius:4px}.footer-grid p{color:#9aafbd}.footer-grid h4{font-size:11px;letter-spacing:2px;color:var(--yellow)}.footer-grid a{display:block;font-size:13px;color:#c0d0da;margin:13px 0}.foot-bottom{border-top:1px solid #ffffff24;padding-top:20px;padding-bottom:24px;display:flex;justify-content:space-between;font-size:11px;color:#9aafbd}.float-contact{position:fixed;bottom:24px;right:22px;z-index:30;display:flex;flex-direction:column;gap:8px}.float-contact a{background:#159d55;color:white;padding:13px 16px;box-shadow:0 5px 20px #0002;border-radius:40px;font-size:13px;font-weight:800}.float-contact a:last-child{background:var(--navy)}@media(max-width:900px){.hamb{display:block}.nav{height:75px}.brand img{height:65px;width:85px}.links{display:none;position:absolute;left:0;right:0;top:75px;background:white;padding:20px 30px;box-shadow:0 10px 15px #0002;flex-direction:column;align-items:start}.links.show{display:flex}.navcta{margin-left:auto}.hero{min-height:630px}.trustgrid{grid-template-columns:1fr 1fr;gap:25px}.trustgrid>div{padding:0!important;border:0}.sectionhead{display:block}.sectionhead>p{margin-top:20px}.services{grid-template-columns:1fr 1fr}.contact-grid{grid-template-columns:1fr}.hero-side{display:none}}@media(max-width:600px){.wrap{padding-left:20px;padding-right:20px}.navcta{padding:12px;font-size:11px}.hero{min-height:620px}.hero-content{padding-top:60px;padding-bottom:60px}h1{letter-spacing:-2px;font-size:43px}.hero-content>p{font-size:14px}.hero-note{margin-top:50px}.section{padding-top:65px;padding-bottom:70px}.sectionhead h2{font-size:35px}.services,.location-grid{grid-template-columns:1fr}.rate-controls{flex-direction:column}.rate-controls input{min-width:0;width:100%}.tabs button{flex:1;padding:12px}.rate-bottom{flex-direction:column}.banner-inner{display:block}.banner .btn{margin-top:25px}.contact-grid{gap:30px}.form-card{padding:25px}.footer-grid{grid-template-columns:1fr 1fr}.footer-grid>div:first-child{grid-column:1/-1}.foot-bottom{gap:10px;flex-direction:column}.float-contact a span{display:none}.float-contact a{font-size:19px;padding:10px 15px}}@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}.hero-video{display:none}.btn{transition:none}}

/* v2: three-language switcher, original navigation retained */
.language-switch{display:flex;gap:3px;align-items:center;background:#e9eef1;padding:4px;border-radius:5px;flex-shrink:0}
.language-switch button{border:0;background:transparent;color:#193348;padding:7px 8px;font-weight:800;font-size:11px;border-radius:3px}
.language-switch button.active{background:#09233b;color:#fff}
@media(max-width:1100px){.nav{gap:12px}.links{gap:12px}.navcta{padding:12px}.brand img{width:90px}}
@media(max-width:900px){.language-switch{margin-left:auto}.navcta{margin-left:0}}
@media(max-width:600px){.language-switch button{padding:7px 5px;font-size:10px}.nav{gap:7px}.navcta{font-size:10px;padding:10px 7px}.brand img{width:70px}}

/* v3 official logo */
.brand img{width:160px;height:72px;object-fit:contain;object-position:left center}.footer-logo{width:160px;height:95px;object-fit:contain}@media(max-width:900px){.brand img{width:125px;height:60px}}@media(max-width:600px){.brand img{width:96px;height:54px}}

/* V4: Vertical logo on tablets and phones; desktop retains horizontal logo */
.brand picture{display:block;line-height:0}
@media(max-width:900px){.brand{flex:0 0 auto}.brand img{display:block;width:60px;height:60px;object-fit:contain;object-position:center}}
@media(max-width:600px){.brand img{width:56px;height:56px}.nav{gap:7px}}

/* V5 — Desktop yellow logo fills the header from top to bottom.
   Mobile vertical-logo sizing remains unchanged. */
@media (min-width: 901px) {
  .header .nav { height: 90px; }
  .header .brand { align-self: stretch; display: flex; align-items: stretch; flex: 0 0 auto; line-height: 0; }
  .header .brand picture { display: flex; align-items: stretch; height: 100%; }
  .header .brand img { display: block; width: auto; height: 100%; max-width: none; max-height: none; object-fit: contain; object-position: left center; }
}

/* V6 — White transparent footer logo */
footer .footer-logo{display:block;width:190px;height:auto;max-width:100%;background:transparent;border:0;border-radius:0;padding:0;box-shadow:none;object-fit:contain;object-position:left center}

/* V7 — Mobile DEBOX logo: maximize visible size within header safely.
   Desktop styling and all existing sections remain unchanged. */
@media (max-width: 900px) {
  .header .brand { display: flex; align-items: center; flex: 0 0 auto; min-width: 0; }
  .header .brand picture { display: flex; align-items: center; line-height: 0; }
  .header .brand img { display: block; width: 72px; height: 68px; max-width: none; object-fit: contain; object-position: center; }
}
@media (max-width: 600px) {
  .header .brand img { width: 72px; height: 68px; }
}


/* V8 — DEBOX CARGO hero video layering fix.
   Keeps the static image as fallback and respects reduced-motion preferences. */
.hero { position: relative; overflow: hidden; }
.hero .hero-image { position: absolute; inset: 0; z-index: 0; }
.hero .hero-video {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; display: block; z-index: 1; pointer-events: none;
}
.hero .hero-shade { position: absolute; inset: 0; z-index: 2; pointer-events: none; }
.hero .hero-content { position: relative; z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hero .hero-video { display: none; }
}


/* V9 — Explicit hero-video visibility for DEBOX CARGO.
   Requested autoplay background also displays when reduced motion is enabled.
   Note: video loading/playback still depends on the browser and MP4 response. */
.hero .hero-image { z-index: 0; }
.hero video.hero-video {
  position: absolute;
  inset: 0;
  display: block;
  visibility: visible;
  opacity: 1;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 1;
  pointer-events: none;
}
.hero .hero-shade { z-index: 2; }
.hero .hero-content { z-index: 3; }
@media (prefers-reduced-motion: reduce) {
  .hero video.hero-video { display: block; }
}


/* V10 — Local images for Cargo Consultation and office locations.
   Upload the three images to public_html/assets/ with exact filenames. */
.art-help {
  background-image: linear-gradient(#0a2c4630, #0a2c4630), url('assets/cargo-consultation.jpg');
  background-position: center;
  background-size: cover;
}
.loc-jakarta {
  background-image: linear-gradient(0deg, #082b42ad, transparent), url('assets/JakartaOffice.jpg');
  background-position: center;
  background-size: cover;
}
.loc-china {
  background-image: linear-gradient(0deg, #082b42ad, transparent), url('assets/ChinaOffice.jpg');
  background-position: center;
  background-size: cover;
}