:root{--navy:#0b2d52;--navy2:#061d36;--blue:#178dcc;--red:#ef312b;--yellow:#ffc400;--ink:#10243d;--muted:#66758a;--paper:#f5f8fb;--white:#fff}*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;color:var(--ink);background:var(--paper);line-height:1.65}a{text-decoration:none;color:inherit}.site-header{height:84px;padding:0 max(5vw,24px);display:flex;align-items:center;justify-content:space-between;background:#fff;position:sticky;top:0;z-index:20;box-shadow:0 6px 24px #082b4b12}.brand{display:flex;align-items:center;gap:12px}.brand-mark{width:53px;height:53px;position:relative;border-radius:15px;background:linear-gradient(145deg,#fff,#eef5fa);box-shadow:0 8px 24px #06284b1c;display:grid;place-items:center}.brand-mark:before{content:"";width:37px;height:21px;border:6px solid var(--blue);border-top-color:transparent;border-radius:50%;transform:rotate(-18deg)}.brand-mark i{position:absolute;width:32px;height:6px;background:var(--red);border-radius:99px;transform:rotate(-25deg)}.brand-mark b{position:absolute;right:4px;top:3px;color:var(--yellow);font-size:17px}.brand strong,.brand em{display:block;line-height:1.15}.brand strong{font-size:18px;letter-spacing:.02em}.brand em{font-style:normal;color:var(--red);letter-spacing:.3em;font-size:12px;margin-top:5px}.site-header nav{display:flex;gap:30px;font-size:14px;font-weight:700}.site-header nav a:hover{color:var(--red)}.menu-toggle{display:none;border:0;background:transparent;font-size:26px;color:var(--navy)}.hero{min-height:650px;padding:92px max(7vw,32px);display:grid;grid-template-columns:1.25fr .75fr;gap:70px;align-items:center;color:#fff;background:radial-gradient(circle at 80% 20%,#1a6d9d70,transparent 28%),linear-gradient(115deg,var(--navy2),var(--navy));position:relative;overflow:hidden}.hero:after{content:"";position:absolute;width:430px;height:430px;border:70px solid #ffffff0a;border-radius:50%;right:-190px;bottom:-210px}.eyebrow{font-size:12px;letter-spacing:.2em;font-weight:900;color:var(--yellow)}.eyebrow.red{color:var(--red)}h1,h2,h3,p{margin-top:0}h1{font-size:clamp(42px,6vw,75px);line-height:1.08;letter-spacing:-.045em;margin:22px 0}h1 span{color:#55b9eb}.hero-copy>p{font-size:19px;color:#d7e4ef;max-width:700px}.hero-actions{display:flex;gap:14px;margin-top:34px;flex-wrap:wrap}.btn{display:inline-flex;justify-content:center;align-items:center;padding:14px 22px;border-radius:12px;font-weight:850}.btn.primary{background:var(--red);color:#fff}.btn.papua{background:var(--blue);color:#fff}.btn.secondary{border:1px solid #ffffff55;color:#fff}.hero-panel{background:#ffffff0d;border:1px solid #ffffff25;padding:36px;border-radius:24px;backdrop-filter:blur(12px);position:relative;z-index:1}.hero-panel>span{font-size:11px;letter-spacing:.18em;color:#a9c7dc}.hero-panel strong{display:block;font-size:32px;margin:14px 0}.hero-panel strong i{color:var(--red);font-style:normal}.hero-panel p{color:#c5d7e4}.metrics{display:flex;gap:8px}.metrics b{background:#ffffff12;padding:8px 12px;border-radius:8px;font-size:12px}.section{padding:100px max(7vw,32px)}.intro{display:grid;grid-template-columns:1fr 1fr;gap:80px;background:#fff}.section h2,.jl-card h2{font-size:clamp(32px,4vw,52px);line-height:1.15;letter-spacing:-.035em;margin:15px 0 0}.intro p,.contact p{color:var(--muted);font-size:17px}.services{background:var(--navy)}.services .section-head{color:#fff}.section-head{text-align:center;max-width:760px;margin:0 auto 50px}.service-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.service-grid article{background:#fff;padding:30px;border-radius:18px;border-top:4px solid var(--red)}.service-grid article>span{display:grid;place-items:center;width:48px;height:48px;border-radius:12px;background:#e8f4fb;color:var(--blue);font-size:23px;font-weight:900}.service-grid h3{margin:20px 0 8px;font-size:21px}.service-grid p{color:var(--muted);margin-bottom:0}.process{background:#fff}.steps{display:grid;grid-template-columns:repeat(3,1fr);gap:30px}.steps article{text-align:center;padding:10px 20px}.steps b{display:grid;place-items:center;margin:0 auto 24px;width:62px;height:62px;border-radius:50%;background:var(--blue);color:#fff;font-size:25px;box-shadow:0 10px 28px #198dcc38}.steps p{color:var(--muted)}.jl-card{margin:0 max(5vw,20px);padding:65px max(5vw,30px);border-radius:28px;background:linear-gradient(125deg,var(--red),#b8171c);color:#fff;display:flex;align-items:center;justify-content:space-between;gap:40px}.jl-card>div{max-width:780px}.jl-card p{color:#ffe5e5;font-size:17px;margin:18px 0 0}.btn.yellow{background:var(--yellow);color:var(--navy2);white-space:nowrap}.contact{display:grid;grid-template-columns:.8fr 1.2fr;gap:75px}.contact-list{display:grid;grid-template-columns:1fr 1fr;gap:14px}.contact-list>a,.contact-list>div{background:#fff;padding:22px;border-radius:14px;box-shadow:0 8px 28px #0b2d520b}.contact-list b,.contact-list span{display:block}.contact-list b{color:var(--red);font-size:13px;text-transform:uppercase;letter-spacing:.08em}.contact-list span{margin-top:5px;color:var(--muted)}footer{background:var(--navy2);color:#fff;padding:45px max(7vw,32px);display:grid;grid-template-columns:1fr auto;gap:25px;align-items:center}footer strong,footer span{display:block}footer span,footer small{color:#9bb0c2}footer div:nth-child(2){display:flex;gap:22px;color:var(--yellow);font-weight:700}footer small{grid-column:1/-1;border-top:1px solid #ffffff18;padding-top:22px}@media(max-width:820px){.site-header{height:74px}.site-header nav{display:none;position:absolute;top:74px;left:0;right:0;background:#fff;padding:20px 26px;flex-direction:column;gap:16px}.site-header nav.open{display:flex}.menu-toggle{display:block}.hero{grid-template-columns:1fr;padding-top:70px}.hero-panel{max-width:560px}.intro,.contact{grid-template-columns:1fr;gap:30px}.service-grid{grid-template-columns:1fr 1fr}.jl-card{display:block}.jl-card .btn{margin-top:28px}.contact-list{grid-template-columns:1fr}footer{grid-template-columns:1fr}footer small{grid-column:auto}}@media(max-width:540px){.brand strong{font-size:15px}.brand em{font-size:10px}.brand-mark{width:46px;height:46px}.hero{padding:64px 22px}.hero-copy>p{font-size:16px}.hero-panel{padding:26px}.section{padding:74px 22px}.service-grid,.steps{grid-template-columns:1fr}.jl-card{margin:0 12px;padding:42px 24px}.hero-actions .btn{width:100%}footer{padding:38px 22px}footer div:nth-child(2){flex-direction:column;gap:8px}}
/* Official PT Libra Jaya Logistic logo */
.brand-logo{width:62px;height:62px;object-fit:contain;border-radius:14px;background:#fff;box-shadow:0 8px 24px #06284b14}
.contact-list .contact-wide{grid-column:1/-1}
@media(max-width:540px){.brand-logo{width:54px;height:54px}}


/* Full-width landscape layout for phones, tablets, and desktop screens. */
@media (orientation: landscape) and (min-width: 700px) {
  html,
  body {
    width: 100%;
    max-width: 100%;
    overflow-x: hidden;
  }

  .site-header {
    width: 100%;
    padding-left: 3vw;
    padding-right: 3vw;
  }

  .hero {
    width: 100%;
    max-width: none;
    min-height: calc(100svh - 84px);
    padding: clamp(42px, 7vh, 78px) 4vw;
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    gap: clamp(28px, 4vw, 64px);
  }

  .hero h1 {
    font-size: clamp(38px, 5.2vw, 72px);
  }

  .hero-panel {
    width: 100%;
    max-width: none;
  }

  .section,
  .contact {
    width: 100%;
    max-width: none;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  .intro,
  .contact {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    gap: clamp(36px, 6vw, 90px);
  }

  .section-head {
    width: 100%;
    max-width: none;
  }

  .service-grid,
  .steps {
    width: 100%;
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }

  .service-grid article,
  .steps article {
    min-width: 0;
  }

  .jl-card {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
    padding-left: 4vw;
    padding-right: 4vw;
  }

  footer {
    width: 100%;
    padding-left: 4vw;
    padding-right: 4vw;
  }
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  .site-header {
    height: 66px;
  }

  .brand-logo {
    width: 48px;
    height: 48px;
  }

  .hero {
    min-height: calc(100svh - 66px);
    padding-top: 28px;
    padding-bottom: 28px;
  }

  .hero-panel {
    padding: 24px;
  }

  .hero-actions {
    margin-top: 22px;
  }
}


/* Papua cargo project illustration */
.papua-illustration {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  max-height: 250px;
  object-fit: contain;
  margin: -16px auto 20px;
  filter: none;
}

@media (orientation: landscape) and (min-width: 700px) and (max-height: 520px) {
  .papua-illustration {
    max-height: 150px;
    margin-top: -8px;
    margin-bottom: 10px;
  }
}

@media (max-width: 540px) {
  .papua-illustration {
    max-height: 220px;
    margin-top: -8px;
  }
}


/* JL Express panel is grouped with the main service list. */
.services .jl-card {
  margin: 42px 0 0;
}

@media (orientation: landscape) and (min-width: 700px) {
  .services .jl-card {
    width: 100%;
    margin: 42px 0 0;
    border-radius: 28px;
  }
}

@media (max-width: 540px) {
  .services .jl-card {
    margin: 32px 0 0;
  }
}


/* Branded social media shortcuts in the main header. */
.site-header nav {
  margin-left: auto;
}

.header-social {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-left: 20px;
}

.social-icon {
  width: 37px;
  height: 37px;
  display: grid;
  place-items: center;
  border-radius: 11px;
  transition: transform .2s ease, box-shadow .2s ease;
}

.social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 7px 16px #0b2d5228;
}

.social-icon svg {
  width: 21px;
  height: 21px;
}

.social-icon.facebook {
  color: #fff;
  background: #1877f2;
}

.social-icon.facebook svg {
  fill: currentColor;
}

.social-icon.instagram {
  background: linear-gradient(135deg,#833ab4 0%,#c13584 34%,#e1306c 55%,#fd1d1d 72%,#fcb045 100%);
}

.social-icon.instagram svg {
  fill: none;
  stroke: #fff;
  stroke-width: 1.9;
}

.social-icon.instagram .instagram-dot {
  fill: #fff;
  stroke: none;
}

@media (max-width: 820px) {
  .header-social {
    margin-left: auto;
  }

  .menu-toggle {
    margin-left: 8px;
  }
}

@media (max-width: 540px) {
  .header-social {
    gap: 6px;
  }

  .social-icon {
    width: 33px;
    height: 33px;
    border-radius: 9px;
  }

  .social-icon svg {
    width: 19px;
    height: 19px;
  }
}


/* Partner booking and API panels below JL Express. */
.partner-portal-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 18px;
}

.partner-panel {
  position: relative;
  min-width: 0;
  padding: 34px;
  border-radius: 24px;
  color: #fff;
  overflow: hidden;
}

.partner-panel::after {
  content: "";
  position: absolute;
  width: 190px;
  height: 190px;
  right: -90px;
  top: -95px;
  border: 35px solid #ffffff0d;
  border-radius: 50%;
}

.booking-panel {
  background: linear-gradient(135deg,#178dcc,#07518d);
}

.api-panel {
  background: linear-gradient(135deg,#102f55,#06182c);
  border: 1px solid #ffffff24;
}

.partner-kicker {
  display: block;
  color: var(--yellow);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: .18em;
}

.partner-panel-icon {
  display: grid;
  place-items: center;
  width: 48px;
  height: 48px;
  margin-top: 24px;
  border-radius: 13px;
  background: #ffffff17;
  border: 1px solid #ffffff24;
  font-size: 18px;
  font-weight: 900;
}

.partner-panel h3 {
  margin: 20px 0 9px;
  font-size: clamp(25px,3vw,35px);
  line-height: 1.15;
}

.partner-panel p {
  margin-bottom: 18px;
  color: #e2edf7;
  font-size: 16px;
}

.partner-coverage {
  display: block;
  min-height: 44px;
  color: #bdd7ec;
  font-size: 13px;
  font-weight: 750;
}

.partner-panel-link {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-top: 24px;
  padding: 13px 17px;
  border-radius: 11px;
  background: #fff;
  color: var(--navy2);
  font-weight: 850;
}

.partner-panel-link:hover {
  background: var(--yellow);
}

@media (max-width: 820px) {
  .partner-portal-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .partner-panel {
    padding: 27px 24px;
    border-radius: 20px;
  }

  .partner-panel-link {
    width: 100%;
    justify-content: center;
  }
}


/* Joining guide for manual and API partners. */
.partner-join-guide {
  margin-top: 48px;
  padding: 38px;
  border: 1px solid #ffffff24;
  border-radius: 26px;
  background: #ffffff0a;
}

.partner-join-head {
  max-width: 760px;
}

.partner-join-head h3 {
  margin: 12px 0 9px;
  color: #fff;
  font-size: clamp(28px,3.4vw,42px);
  line-height: 1.15;
}

.partner-join-head p {
  color: #bdd0e1;
  font-size: 16px;
}

.partner-join-grid {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  gap: 18px;
  margin-top: 28px;
}

.join-path {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 28px;
  border-radius: 20px;
  background: #fff;
}

.join-path-title {
  display: flex;
  align-items: center;
  gap: 15px;
}

.join-path-title > span {
  display: grid;
  place-items: center;
  width: 50px;
  height: 50px;
  flex: 0 0 50px;
  border-radius: 14px;
  background: #e8f4fb;
  color: var(--blue);
  font-size: 17px;
  font-weight: 900;
}

.join-path-title small {
  color: var(--red);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .12em;
}

.join-path-title h4 {
  margin: 2px 0 0;
  color: var(--navy);
  font-size: 22px;
}

.join-path ol {
  margin: 24px 0 26px;
  padding: 0;
  list-style: none;
  counter-reset: join-step;
}

.join-path li {
  position: relative;
  padding: 0 0 19px 35px;
  counter-increment: join-step;
}

.join-path li:last-child {
  padding-bottom: 0;
}

.join-path li::before {
  content: counter(join-step);
  position: absolute;
  left: 0;
  top: 1px;
  display: grid;
  place-items: center;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  background: var(--navy);
  color: #fff;
  font-size: 11px;
  font-weight: 900;
}

.join-path li:not(:last-child)::after {
  content: "";
  position: absolute;
  left: 11px;
  top: 27px;
  width: 1px;
  height: calc(100% - 27px);
  background: #dbe5ef;
}

.join-path li b,
.join-path li span {
  display: block;
}

.join-path li b {
  color: #17395e;
  font-size: 15px;
}

.join-path li span {
  margin-top: 3px;
  color: var(--muted);
  font-size: 13px;
  line-height: 1.55;
}

.join-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 9px;
  width: 100%;
  margin-top: auto;
  padding: 13px 16px;
  border-radius: 11px;
  color: #fff;
  font-weight: 850;
}

.join-cta.manual {
  background: var(--blue);
}

.join-cta.api {
  background: var(--navy);
}

.join-cta:hover {
  background: var(--red);
}

.join-note {
  margin-top: 18px;
  padding: 16px 18px;
  border-radius: 13px;
  background: #061d36;
  color: #b9ccdd;
  font-size: 13px;
  line-height: 1.65;
}

.join-note b {
  color: var(--yellow);
}

.join-note a {
  color: #fff;
  font-weight: 800;
  text-decoration: underline;
}

@media (max-width: 820px) {
  .partner-join-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 540px) {
  .partner-join-guide {
    margin-top: 32px;
    padding: 26px 20px;
    border-radius: 20px;
  }

  .join-path {
    padding: 24px 20px;
  }
}