/* =========================================================

   MUSKO MOVERS — WEBSITE STYLESHEET

   Susunan:

   01. Theme / Variables

   02. Reset & Global

   03. Common Components

   04. Header & Navigation

   05. Hero Section

   06. Section Headings & Services

   07. Package Section

   08. Booking Steps

   09. CTA Section

   10. Contact & FAQ

   11. Footer & Floating WhatsApp

   12. Responsive — Tablet (<= 900px)

   13. Responsive — Mobile (<= 600px)

   ========================================================= */

/* ---------------------------------------------------------

   01. THEME / VARIABLES

   --------------------------------------------------------- */

:root {

  --navy: #102742;

  --navy2: #183b60;

  --orange: #f8782c;

  --cream: #fff8f2;

  --paper: #fff;

  --mist: #f3f6fa;

  --ink: #192d41;

  --muted: #5a6a7a;

  --line: #e1e8ef;

  --shadow: 0 18px 45px rgba(18, 42, 66, 0.09);  /* Lebar kotak biru */

}

/* ---------------------------------------------------------

   02. RESET & GLOBAL

   --------------------------------------------------------- */

* {

  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: #fff;

  line-height: 1.6;

}

a {

  text-decoration: none;

  color: inherit;

}

button {

  font: inherit;

}

.container {

  width: min(1140px, calc(100% - 40px));

  margin-inline: auto;

}

section {

  padding: 76px 0;

}

/* ---------------------------------------------------------

   03. COMMON COMPONENTS (BUTTONS)

   --------------------------------------------------------- */

.btn {

  border: 0;

  display: inline-flex;

  justify-content: center;

  align-items: center;

  gap: 9px;

  border-radius: 12px;

  padding: 14px 22px;

  font-weight: 800;

  cursor: pointer;

  transition: transform 0.2s, background 0.2s;

  white-space: nowrap;

}

.btn:hover {

  transform: translateY(-2px);

}

.btn-orange {

  background: var(--orange);

  color: #fff;

  box-shadow: 0 9px 24px rgba(248, 120, 44, 0.22);

}

.btn-navy {

  background: var(--navy);

  color: #fff;

}

.btn-white {

  background: white;

  color: var(--navy);

}

.btn-outline {

  background: transparent;

  border: 1.5px solid #d5e0eb;

  color: var(--navy);

}

/* ---------------------------------------------------------

   04. HEADER & NAVIGATION

   --------------------------------------------------------- */

.topstrip {

  background: var(--navy);

  color: #dce9f6;

  text-align: center;

  font-size: 12px;

  letter-spacing: 0.09em;

  text-transform: uppercase;

  padding: 7px;

}

.navwrap {

  position: sticky;

  top: 0;

  z-index: 50;

  background: rgba(255, 255, 255, 0.97);

  backdrop-filter: blur(12px);

  box-shadow: 0 1px 0 var(--line);

}

.nav {

  min-height: 75px;

  display: flex;

  align-items: center;

  justify-content: space-between;

  gap: 18px;

}

/* Class .logo kekal untuk pautan logo pada header/footer */

.logo {

  font-size: 25px;

  font-weight: 900;

  line-height: 0.9;

  letter-spacing: -1.5px;

  color: var(--navy);

  display: inline-flex;

  flex-direction: column;

}

/* Untuk logo versi teks (jika masih digunakan) */

.logo span {

  color: var(--orange);

  font-size: 13px;

  letter-spacing: 5px;

  margin-top: 5px;

}

/* Untuk logo versi PNG */

.brand-img {

  display: block;

  width: auto;

  height: 48px;

  max-width: 180px;

  object-fit: contain;

}

.links {

  display: flex;

  gap: 27px;

  font-size: 14px;

  font-weight: 650;

}

.links a:hover {

  color: var(--orange);

}

/* ---------------------------------------------------------
   05. HERO SECTION — SEMUA KAWALAN BOLEH LARAS DI SINI

   CARA GUNA:
   1. Ubah nilai pada blok .hero sahaja.
   2. Nilai +px bagi X = kanan; -px = kiri.
      Nilai +px bagi Y = bawah; -px = atas.
   3. Saiz gambar lori: % (cth. 90%, 120%, 145%).
   4. Tetapan DESKTOP, TABLET, MOBILE semuanya di bawah.
   5. Tetapan ini hanya menyentuh Hero; section lain kekal.
   --------------------------------------------------------- */

.hero {
  /* =======================================================
     A. DESKTOP — LATAR, SUSUN ATUR, RUANG
     ======================================================= */
  --hero-bg-left: #f7fafc;             /* Warna latar kiri */
  --hero-bg-right: #ffffff;            /* Warna latar kanan */
  --hero-bg-glow: #fff1e8;             /* Cahaya oren lembut */
  --hero-bg-angle: 115deg;             /* Arah gradient */
  --hero-padding-top: 73px;            /* Ruang atas hero */
  --hero-padding-bottom: 83px;         /* Ruang bawah hero */
  --hero-text-column: 1.02fr;          /* Lebar ruang teks */
  --hero-image-column: 0.98fr;         /* Lebar ruang visual */
  --hero-column-gap: 0px;              /* Jarak teks & lori */
  --hero-content-align: center;        /* center / start / end */
  --hero-text-x: 0px;                  /* Gerak keseluruhan teks kiri/kanan */
  --hero-text-y: 0px;                  /* Gerak keseluruhan teks atas/bawah */

  /* =======================================================
     B. DESKTOP — TAJUK, PENERANGAN, BUTANG, KELEBIHAN
     ======================================================= */
  --hero-accent-color: var(--orange);  /* Highlight oren dalam hero */
  --hero-title-color: var(--navy);
  --hero-title-size: clamp(42px, 5.3vw, 69px);
  --hero-title-weight: 900;
  --hero-title-line-height: 1.08;
  --hero-title-letter-spacing: -2.9px;
  --hero-title-margin-top: 18px;
  --hero-title-margin-bottom: 20px;
  --hero-eyebrow-size: 12px;
  --hero-lead-size: 17px;
  --hero-lead-width: 550px;
  --hero-lead-color: var(--muted);
  --hero-button-gap: 12px;
  --hero-buttons-margin-top: 26px;
  --hero-button-padding: 14px 22px;
  --hero-button-radius: 12px;
  --hero-primary-button-bg: var(--orange);
  --hero-primary-button-text: #ffffff;
  --hero-secondary-button-bg: transparent;
  --hero-secondary-button-text: var(--navy);
  --hero-secondary-button-border: #d5e0eb;
  --hero-ticks-gap: 17px;
  --hero-ticks-margin-top: 28px;
  --hero-ticks-size: 13px;
  --hero-ticks-color: #496077;

  /* =======================================================
     C. DESKTOP — GAMBAR LORI & RUANG VISUAL
     ======================================================= */
  --hero-visual-padding-top: 40px;
  --hero-visual-padding-right: 0px;
  --hero-visual-padding-bottom: 27px;
  --hero-visual-padding-left: 0px;
  --hero-visual-x: 0px;                /* Gerak seluruh ruang visual */
  --hero-visual-y: 0px;
  --hero-panel-width: 1000px;           /* Lebar minimum kawasan lori */
  --hero-panel-height: 700px;          /* Tinggi minimum kawasan lori */
  --hero-panel-bg: transparent;        /* Cuba var(--navy) untuk kotak biru */
  --hero-panel-radius: 30px;
  --hero-panel-justify: flex-end;      /* flex-start / center / flex-end */
  --hero-panel-overflow: hidden;       /* hidden / visible */
  --hero-truck-size: 120%;             /* Saiz imej lori */
  --hero-truck-x: 200px;               /* + ke kanan, - ke kiri */
  --hero-truck-y: 0px;                 /* + ke bawah, - ke atas */
  --hero-truck-max-height: calc(var(--hero-panel-height) - 24px);
  --hero-truck-shadow: 0 22px 13px rgba(2, 14, 28, 0.25);
  --hero-desktop-bleed: max(20px, calc((100vw - 1140px) / 2));
  --hero-svg-width: 95%;

  /* =======================================================
     D. TABLET — SKRIN 900px DAN KE BAWAH
     ======================================================= */
  --hero-tablet-padding-top: 50px;
  --hero-tablet-padding-bottom: 65px;
  --hero-tablet-text-x: 0px;           /* Tablet: + ke kanan, - ke kiri */
  --hero-tablet-text-y: 0px;           /* Tablet: + ke bawah, - ke atas */
  --hero-tablet-visual-max-width: 650px;
  --hero-tablet-panel-width: 100%;
  --hero-tablet-panel-height: 350px;
  --hero-tablet-panel-justify: center;
  --hero-tablet-truck-size: 92%;
  --hero-tablet-truck-max-height: 320px;
  --hero-tablet-truck-x: 0px;
  --hero-tablet-truck-y: 0px;
  --hero-tablet-badge-right: -13px;

  /* =======================================================
     E. MOBILE — SKRIN 600px DAN KE BAWAH
     ======================================================= */
  --hero-mobile-padding-top: 50px;
  --hero-mobile-padding-bottom: 65px;
  --hero-mobile-text-x: 0px;           /* Mobile: + ke kanan, - ke kiri */
  --hero-mobile-text-y: 0px;           /* Mobile: + ke bawah, - ke atas */
  --hero-mobile-title-size: 43px;
  --hero-mobile-title-letter-spacing: -1.8px;
  --hero-mobile-lead-size: 15px;
  --hero-mobile-visual-padding-top: 30px;
  --hero-mobile-visual-padding-x: 11px;
  --hero-mobile-visual-padding-bottom: 24px;
  --hero-mobile-panel-height: 275px;
  --hero-mobile-panel-radius: 24px;
  --hero-mobile-truck-size: 96%;
  --hero-mobile-truck-max-height: 245px;
  --hero-mobile-truck-x: 0px;
  --hero-mobile-truck-y: 0px;
  --hero-mobile-badge-top: 4px;
  --hero-mobile-badge-right: 0px;
  --hero-mobile-price-left: 0px;
  --hero-mobile-price-bottom: 0px;
  --hero-mobile-price-min-width: 184px;

  /* Jangan ubah bahagian di bawah; ia membaca tetapan di atas. */
  background:
    radial-gradient(circle at 80% 20%, var(--hero-bg-glow) 0%, transparent 38%),
    linear-gradient(var(--hero-bg-angle), var(--hero-bg-left) 0%, var(--hero-bg-right) 70%);
  padding: var(--hero-padding-top) 0 var(--hero-padding-bottom);
  overflow: hidden;
}

.hero .hero-grid {
  display: grid;
  grid-template-columns: minmax(0, var(--hero-text-column)) minmax(0, var(--hero-image-column));
  align-items: var(--hero-content-align);
  gap: var(--hero-column-gap);
}

.hero .hero-grid > * {
  min-width: 0;
}

/* Gerakkan keseluruhan blok teks, tanpa mengubah blok visual. */
.hero .hero-grid > :first-child:not(.visual) {
  position: relative;
  left: var(--hero-text-x);
  top: var(--hero-text-y);
}

/* Asas eyebrow dikekalkan untuk servis/pakej/section lain. */
.main-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--orange);
  font-size: 12px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.eyebrow::before {
  content: '';
  width: 22px;
  height: 3px;
  background: var(--orange);
  border-radius: 5px;
}

/* Hanya eyebrow dalam Hero menggunakan kawalan warna/saiz tersendiri. */
.hero .eyebrow {
  color: var(--hero-accent-color);
  font-size: var(--hero-eyebrow-size);
}

.hero .eyebrow::before {
  background: var(--hero-accent-color);
}

.hero h1 {
  font-size: var(--hero-title-size);
  line-height: var(--hero-title-line-height);
  letter-spacing: var(--hero-title-letter-spacing);
  margin: var(--hero-title-margin-top) 0 var(--hero-title-margin-bottom);
  color: var(--hero-title-color);
  font-weight: var(--hero-title-weight);
}

.hero h1 span {
  color: var(--hero-accent-color);
}

.hero .lead {
  font-size: var(--hero-lead-size);
  color: var(--hero-lead-color);
  max-width: var(--hero-lead-width);
}

.hero .hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--hero-button-gap);
  margin-top: var(--hero-buttons-margin-top);
}

.hero .hero-actions .btn {
  padding: var(--hero-button-padding);
  border-radius: var(--hero-button-radius);
}

.hero .hero-actions .btn-orange {
  background: var(--hero-primary-button-bg);
  color: var(--hero-primary-button-text);
}

.hero .hero-actions .btn-outline {
  background: var(--hero-secondary-button-bg);
  color: var(--hero-secondary-button-text);
  border-color: var(--hero-secondary-button-border);
}

/* Imej lori dan panel */
.hero .visual-main-truck {
  position: relative;
  min-width: 0;
  padding: var(--hero-visual-padding-top) var(--hero-visual-padding-right)
           var(--hero-visual-padding-bottom) var(--hero-visual-padding-left);
  transform: translate(var(--hero-visual-x), var(--hero-visual-y));
}

.hero .main-truck-card {
  background: var(--hero-panel-bg);
  border-radius: var(--hero-panel-radius);
  min-height: var(--hero-panel-height);
  min-width: var(--hero-panel-width);
  display: flex;
  align-items: center;
  justify-content: var(--hero-panel-justify);
  overflow: var(--hero-panel-overflow);
  position: relative;
}

.hero .main-truck-card::before {
  content: '';
  position: absolute;
  width: 360px;
  height: 360px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  border-radius: 50%;
  right: -90px;
  top: -140px;
}

.hero .main-truck-card::after {
  content: '';
  position: absolute;
  width: 440px;
  height: 440px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 50%;
  right: -125px;
  top: -180px;
}

.hero .truck-svg {
  width: var(--hero-svg-width);
  position: relative;
  z-index: 2;
  filter: drop-shadow(var(--hero-truck-shadow));
}

.hero .hero-truck-img {
  display: block;
  flex-shrink: 0;
  width: var(--hero-truck-size);
  max-width: none;
  height: auto;
  max-height: var(--hero-truck-max-height);
  object-fit: contain;
  position: relative;
  z-index: 2;
  filter: drop-shadow(var(--hero-truck-shadow));
  transform: translate(var(--hero-truck-x), var(--hero-truck-y));
}

/* Desktop: lanjutkan visual ke tepi kanan skrin. */
@media (min-width: 901px) {
  .hero .visual {
    width: calc(100% + var(--hero-desktop-bleed));
    max-width: none;
  }
}

/* ---------------------------------------------------------

   06. SECTION HEADINGS & SERVICES

   --------------------------------------------------------- */

.services-showcase {
  background: linear-gradient(180deg, #f5f8fc 0%, #eef3f8 100%);
}

.services-head {
  max-width: 760px;
  margin: 0 auto 38px;
  text-align: center;
}

.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  color: var(--orange);
  font-size: 14px;
  font-weight: 900;
  letter-spacing: 0.13em;
  text-transform: uppercase;
}

.services-head .eyebrow {
  justify-content: center;
  margin-bottom: 0px;
}

.services-head .sub {
  margin: 0 auto;
  max-width: 720px;
  font-size: 26px;
  line-height: 1.8;
}

.service-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 22px;
  align-items: stretch;
}

.service-card {
  background: #fff;
  border: 1px solid #dde6ef;
  border-radius: 24px;
  overflow: hidden;
  box-shadow: 0 10px 28px rgba(16, 39, 66, 0.07);
  transition: transform 0.25s ease, box-shadow 0.25s ease;
  display: flex;
  flex-direction: column;
  height: 100%;
}

.service-card:hover {
  transform: translateY(-6px);
  box-shadow: 0 16px 36px rgba(16, 39, 66, 0.12);
}

.service-media {
  position: relative;
  height: 220px;
  overflow: hidden;
  background: linear-gradient(180deg, #dfe8f1 0%, #b7c5d6 100%);
}

.service-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.service-media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(16, 39, 66, 0.28) 0%,
    rgba(16, 39, 66, 0.08) 40%,
    rgba(16, 39, 66, 0) 100%
  );
}

.service-tag {
  position: absolute;
  top: 14px;
  left: 14px;
  z-index: 2;
  background: rgba(255, 255, 255, 0.96);
  color: var(--orange);
  font-size: 11px;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 8px 12px;
  border-radius: 999px;
  box-shadow: 0 8px 18px rgba(16, 39, 66, 0.08);
}

.service-body {
  padding: 22px 20px 22px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.service-body h3 {
  margin: 0 0 12px;
  font-size: 19px;
  line-height: 1.3;
  color: var(--navy);
  letter-spacing: -0.4px;
}

.service-body p {
  margin: 0;
  font-size: 14px;
  line-height: 1.8;
  color: var(--muted);
  flex-grow: 1;
}

.service-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-top: 18px;
  font-size: 14px;
  font-weight: 800;
  color: var(--orange);
}

.service-link:hover {
  color: var(--navy);
}

/* Tablet */
@media (max-width: 900px) {
  .service-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .service-media {
    height: 210px;
  }
}

/* Mobile */
@media (max-width: 600px) {
  .services-head {
    margin-bottom: 28px;
  }

  .services-head .sub {
    font-size: 15px;
  }

  .service-grid {
    grid-template-columns: 1fr;
    gap: 18px;
  }

  .service-media {
    height: 210px;
  }

  .service-body {
    padding: 18px 18px 20px;
  }

  .service-body h3 {
    font-size: 20px;
  }
}

/* ---------------------------------------------------------

   07. PACKAGE SECTION

   --------------------------------------------------------- */

   .mm-pkg {
  /* ==== A. TEMA / LATAR BELAKANG ==== */
  --pkg-bg: #ffffff;                 /* Warna background section */
  --pkg-navy: #102742;               /* Warna tulisan utama / butang */
  --pkg-orange: #f8782c;             /* Warna highlight */
  --pkg-ink-soft: #61738b;           /* Warna teks penerangan */
  --pkg-border: #e0e9f2;             /* Border kad */
  --pkg-card-bg: #ffffff;            /* Background kad */
  --pkg-visual-bg: #eef3f8;          /* Background ilustrasi lori */
  --pkg-switch-bg: #f1f5f9;          /* Background switch Basic / Manpower */

  /* ==== B. SECTION / HEADING ==== */
  --pkg-section-padding-top: 68px;   /* Jarak atas section */
  --pkg-section-padding-bottom: 70px;
  --pkg-container-width: 1220px;     /* Lebar keseluruhan kad */
  --pkg-side-space: 24px;            /* Margin kiri kanan container */
  --pkg-heading-bottom-gap: 34px;    /* Jarak heading -> barisan kad */
  --pkg-eyebrow-title-gap: 8px;      /* PENTING: JARAK EYEBROW KE H2 */
  --pkg-eyebrow-font: 12px;          /* Saiz 'PILIHAN LORI...' */
  --pkg-eyebrow-letter-gap: .14em;
  --pkg-title-size: clamp(34px, 4.3vw, 52px); /* Saiz H2 */
  --pkg-title-line-height: 1.09;
  --pkg-title-letter-gap: -1.9px;
  --pkg-title-max-width: 860px;
  --pkg-heading-align: center;       /* center / left / right */
  --pkg-eyebrow-align: center;       /* center / flex-start / flex-end */

  /* ==== C. KAD / ILLUSTRASI / TEKS ==== */
  --pkg-grid-gap: 20px;              /* Jarak antara kad */
  --pkg-card-padding: 23px;          /* Ruang DALAM kad */
  --pkg-card-radius: 22px;           /* Bulat bucu kad */
  --pkg-card-border-width: 1px;
  --pkg-card-shadow: 0 8px 26px rgba(16, 39, 66, .055);
  --pkg-card-hover-lift: -4px;       /* Kad naik bila hover */
  --pkg-visual-height: 155px;        /* Tinggi ruang gambar lori */
  --pkg-visual-radius: 15px;
  --pkg-truck-art-width: 90%;        /* Saiz ilustrasi lori */
  --pkg-truck-art-scale: 1;          /* 1.1 = lebih besar */
  --pkg-code-font: 11px;
  --pkg-tag-font: 11px;
  --pkg-label-font: 11px;
  --pkg-name-font: 25px;             /* 'Lori 1 Tan' */
  --pkg-length-font: 19px;           /* '10 Kaki' */
  --pkg-features-font: 14px;         /* Saiz senarai maklumat */
  --pkg-feature-gap: 9px;            /* Jarak antara senarai */

  /* ==== D. SWITCH / HARGA / BUTANG ==== */
  --pkg-switch-top-gap: 22px;        /* Jarak senarai ke switch */
  --pkg-switch-font: 13px;
  --pkg-switch-padding-y: 10px;
  --pkg-switch-padding-x: 16px;
  --pkg-price-label-font: 11px;
  --pkg-price-font: 34px;            /* Besar angka RM */
  --pkg-price-desc-font: 13px;
  --pkg-button-height: 52px;
  --pkg-button-font: 15px;
  --pkg-button-radius: 12px;
  --pkg-footnote-font: 13px;

  background: var(--pkg-bg);
  padding: var(--pkg-section-padding-top) 0 var(--pkg-section-padding-bottom);
  color: var(--pkg-navy);
}

/* ====== RESPONSIVE VARIABLES: boleh laras secara berasingan ====== */
@media (max-width: 1040px) {
  .mm-pkg {
    --pkg-container-width: 940px;
    --pkg-title-size: 42px;
    --pkg-grid-gap: 18px;
  }
}
@media (max-width: 700px) {
  .mm-pkg {
    --pkg-section-padding-top: 52px;
    --pkg-section-padding-bottom: 52px;
    --pkg-side-space: 16px;
    --pkg-heading-bottom-gap: 26px;
    --pkg-eyebrow-title-gap: 7px;  /* Mobile: eyebrow -> H2 */
    --pkg-eyebrow-font: 10px;
    --pkg-title-size: clamp(30px, 8.4vw, 39px);
    --pkg-title-letter-gap: -1.1px;
    --pkg-grid-gap: 15px;
    --pkg-card-padding: 20px;
    --pkg-card-radius: 19px;
    --pkg-visual-height: 148px;
    --pkg-name-font: 24px;
    --pkg-length-font: 17px;
    --pkg-features-font: 14px;
    --pkg-price-font: 32px;
    --pkg-button-height: 51px;
  }
}
@media (max-width: 360px) {
  .mm-pkg {
    --pkg-card-padding: 16px;
    --pkg-visual-height: 130px;
    --pkg-side-space: 13px;
    --pkg-features-font: 13px;
  }
}

/* ====== BAWAH INI ENGINE CSS — biasanya tak perlu ubah ====== */
.mm-pkg *, .mm-pkg *::before, .mm-pkg *::after { box-sizing: border-box; }
.mm-pkg > .container {
  max-width: var(--pkg-container-width);
  width: calc(100% - (var(--pkg-side-space) * 2));
  margin-inline: auto;
}
.mm-pkg__head {
  max-width: var(--pkg-title-max-width);
  margin: 0 auto var(--pkg-heading-bottom-gap);
  text-align: var(--pkg-heading-align);
}
.mm-pkg__eyebrow {
  display: flex;
  align-items: center;
  justify-content: var(--pkg-eyebrow-align);
  gap: 9px;
  margin: 0 0 var(--pkg-eyebrow-title-gap);
  color: var(--pkg-orange);
  font-size: var(--pkg-eyebrow-font);
  font-weight: 900;
  letter-spacing: var(--pkg-eyebrow-letter-gap);
  text-transform: uppercase;
  line-height: 1.4;
}
.mm-pkg__eyebrow::before {
  content: '';
  display: block;
  width: 22px;
  height: 3px;
  border-radius: 3px;
  background: currentColor;
}
.mm-pkg__title {
  margin: 0;
  color: var(--pkg-navy);
  font-size: var(--pkg-title-size);
  font-weight: 900;
  letter-spacing: var(--pkg-title-letter-gap);
  line-height: var(--pkg-title-line-height);
  text-wrap: balance;
}
.mm-pkg__title strong { font-weight: inherit; color: var(--pkg-orange); }
.mm-pkg__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  align-items: stretch;
  gap: var(--pkg-grid-gap);
}
.mm-pkg__card {
  min-width: 0;
  display: flex;
  flex-direction: column;
  padding: var(--pkg-card-padding);
  border: var(--pkg-card-border-width) solid var(--pkg-border);
  border-radius: var(--pkg-card-radius);
  background: var(--pkg-card-bg);
  box-shadow: var(--pkg-card-shadow);
  transition: transform .22s ease, box-shadow .22s ease;
}
.mm-pkg__card--featured { border-color: #cddff1; box-shadow: 0 12px 30px rgba(16,39,66,.085); }
@media (hover: hover) and (pointer: fine) {
  .mm-pkg__card:hover {
    transform: translateY(var(--pkg-card-hover-lift));
    box-shadow: 0 16px 34px rgba(16,39,66,.11);
  }
}
.mm-pkg__top { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.mm-pkg__code { color: #607996; font-size: var(--pkg-code-font); font-weight: 900; text-transform: uppercase; letter-spacing: .09em; }
.mm-pkg__badge { padding: 7px 12px; border-radius: 999px; background: #fff1e8; color: var(--pkg-orange); font-size: var(--pkg-tag-font); font-weight: 900; white-space: nowrap; }
.mm-pkg__visual {
  display: grid;
  place-items: center;
  width: 100%;
  height: var(--pkg-visual-height);
  flex: 0 0 auto;
  margin-bottom: 19px;
  padding: 10px;
  border-radius: var(--pkg-visual-radius);
  background: var(--pkg-visual-bg);
  overflow: hidden;
}
.mm-pkg__art {
  display: block;
  width: min(var(--pkg-truck-art-width), 300px);
  height: 100%;
  transform: scale(var(--pkg-truck-art-scale));
}
.mm-pkg__art .body { fill: #193e65; }
.mm-pkg__art .body-shine { fill: #29527a; }
.mm-pkg__art .cab { fill: var(--pkg-orange); }
.mm-pkg__art .window { fill: #c9e5f6; }
.mm-pkg__art .tire { fill: #203247; }
.mm-pkg__art .rim { fill: #a8bccd; }
.mm-pkg__art .ground { stroke: #c3d1de; stroke-width: 2; stroke-linecap: round; }
.mm-pkg__art .detail { fill: #f9b98c; }
.mm-pkg__label { margin: 0 0 7px; color: var(--pkg-orange); font-size: var(--pkg-label-font); font-weight: 900; text-transform: uppercase; letter-spacing: .1em; }
.mm-pkg__name { margin: 0; color: var(--pkg-navy); font-size: var(--pkg-name-font); font-weight: 900; letter-spacing: -.8px; line-height: 1.2; }
.mm-pkg__length { margin: 4px 0 18px; color: #526b86; font-size: var(--pkg-length-font); font-weight: 800; line-height: 1.25; }
.mm-pkg__features { list-style: none; padding: 0; margin: 0 0 18px; display: grid; gap: var(--pkg-feature-gap); }
.mm-pkg__features li { position: relative; margin: 0; padding-left: 19px; font-size: var(--pkg-features-font); line-height: 1.5; color: var(--pkg-ink-soft); }
.mm-pkg__features li::before { content: '✓'; position: absolute; left: 0; top: 0; color: var(--pkg-orange); font-weight: 900; }
/* Wrapping ditunjukkan hanya apabila Manpower dipilih. */
.mm-pkg .mm-pkg__wrapping[hidden] { display: none !important; }

.mm-pkg__bottom { display: flex; flex-direction: column; margin-top: auto; }
.mm-pkg__switch {
  display: inline-flex;
  align-self: flex-start;
  padding: 4px;
  gap: 2px;
  margin: var(--pkg-switch-top-gap) 0 17px;
  border-radius: 13px;
  background: var(--pkg-switch-bg);
}
.mm-pkg__switch-btn {
  appearance: none;
  border: 0;
  border-radius: 10px;
  padding: var(--pkg-switch-padding-y) var(--pkg-switch-padding-x);
  background: transparent;
  color: var(--pkg-navy);
  font-size: var(--pkg-switch-font);
  font-family: inherit;
  line-height: 1.2;
  font-weight: 800;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}
.mm-pkg__switch-btn[aria-pressed="true"] { background: var(--pkg-navy); color: #fff; box-shadow: 0 2px 6px rgba(12,35,61,.12); }
.mm-pkg__switch-btn:focus-visible, .mm-pkg__book:focus-visible { outline: 3px solid var(--pkg-orange); outline-offset: 3px; }
.mm-pkg__price-wrap { padding-top: 16px; border-top: 1px solid var(--pkg-border); }
.mm-pkg__price-note { margin: 0 0 6px; color: #7188a0; font-size: var(--pkg-price-label-font); font-weight: 900; letter-spacing: .1em; text-transform: uppercase; }
.mm-pkg__price { margin: 0; color: var(--pkg-navy); font-size: var(--pkg-price-font); font-weight: 900; letter-spacing: -1.3px; line-height: 1.18; }
.mm-pkg__price-desc { margin: 7px 0 0; font-size: var(--pkg-price-desc-font); color: var(--pkg-ink-soft); line-height: 1.5; }
.mm-pkg__book {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  min-height: var(--pkg-button-height);
  margin-top: 18px;
  border-radius: var(--pkg-button-radius);
  background: var(--pkg-navy);
  color: #ffffff;
  font-size: var(--pkg-button-font);
  font-weight: 850;
  font-family: inherit;
  text-decoration: none;
  text-align: center;
  transition: background .18s ease, transform .18s ease;
}
.mm-pkg__book:hover { background: var(--pkg-orange); color: #fff; }
.mm-pkg__footnote { margin: 20px 0 0; color: var(--pkg-ink-soft); font-size: var(--pkg-footnote-font); line-height: 1.65; }

/* 2 kolum untuk tablet / telefon landscape lebar */
@media (max-width: 1040px) {
  .mm-pkg__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* 1 kolum untuk telefon — besar, jelas, mudah tap */
@media (max-width: 700px) {
  .mm-pkg__grid { grid-template-columns: minmax(0, 1fr); }
  .mm-pkg__card { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .mm-pkg__card, .mm-pkg__switch-btn, .mm-pkg__book { transition: none; }
}

/* ---------------------------------------------------------

   08. BOOKING STEPS

   --------------------------------------------------------- */

.steps {

  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 25px;

}

.step {
  padding: 21px 8px;
}

.stepnum {

  font-size: 50px;
  font-weight: 900;
  color: #d9e3ec;
  letter-spacing: -3px;
  line-height: 1;

}

.step h3 {

  font-size: 21px;
  color: var(--navy);
  margin: 8px 0;

}

.step p {

  font-size: 14px;
  color: var(--muted);
  margin: 0;

}

/* ---------------------------------------------------------

   09. CTA SECTION

   --------------------------------------------------------- */

.cta {

  background: var(--navy);
  color: #fff;
  padding: 66px 0;

}

.cta-wrap {

  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 22px;

}

.cta h2 {

  color: #fff;
  margin: 0 0 10px;

}

.cta p {

  color: #d4e0ed;
  margin: 0;
  max-width: 600px;

}

/* ---------------------------------------------------------

   10. CONTACT & FAQ

   --------------------------------------------------------- */

.contact {

  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 40px;

}

.contact-box {

  border-radius: 20px;
  border: 1px solid var(--line);
  background: #f8fafc;
  padding: 26px;

}

.contact-box strong {

  display: block;
  color: var(--navy);
  margin-bottom: 9px;

}

.contact-box p {

  margin: 0 0 16px;
  color: var(--muted);
  font-size: 14px;

}

.faq {

  display: grid;
  gap: 10px;

}

details {

  border: 1px solid var(--line);
  border-radius: 13px;
  padding: 16px 19px;
  background: #fff;

}

summary {

  cursor: pointer;
  font-weight: 750;
  color: var(--navy);

}

details p {

  color: var(--muted);
  font-size: 14px;
  margin-bottom: 2px;

}

/* ---------------------------------------------------------

   11. FOOTER & FLOATING WHATSAPP BUTTON

   --------------------------------------------------------- */

footer {

  background: #091c30;
  color: #adbed0;
  padding: 32px 0;

}

.foot {

  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 25px;

}

.foot .logo {

  color: #fff;

}

.foot p {

  font-size: 12px;
  margin: 0;

}

.float-wa {

  position: fixed;
  right: 23px;
  bottom: 20px;
  border-radius: 50%;
  width: 58px;
  height: 58px;
  background: #20bc66;
  z-index: 45;
  color: white;
  box-shadow: 0 10px 30px rgba(8, 61, 38, 0.28);
  display: grid;
  place-items: center;
  font-size: 25px;
  cursor: pointer;
  border: 0;

}

.float-wa:hover {

  transform: translateY(-2px);

}

/* ---------------------------------------------------------

   12. RESPONSIVE — TABLET (900px & BELOW)

   --------------------------------------------------------- */

@media (max-width: 900px) {

  .hero .hero-grid {
    grid-template-columns: 1fr;
  }

  .hero .visual {
    max-width: var(--hero-tablet-visual-max-width);
    width: 100%;
    margin: auto;
  }

  .hero .truck-card {
    min-width: var(--hero-tablet-panel-width);
    min-height: var(--hero-tablet-panel-height);
    justify-content: var(--hero-tablet-panel-justify);
  }

  .hero .hero-truck-img {
    width: var(--hero-tablet-truck-size);
    max-height: var(--hero-tablet-truck-max-height);
    transform: translate(var(--hero-tablet-truck-x), var(--hero-tablet-truck-y));
  }

  .hero {
    --hero-text-x: var(--hero-tablet-text-x);
    --hero-text-y: var(--hero-tablet-text-y);
    padding: var(--hero-tablet-padding-top) 0 var(--hero-tablet-padding-bottom);
  }

  .hero .hero-badge {
    right: var(--hero-tablet-badge-right);
  }

  .cards {

    grid-template-columns: 1fr 1fr;

  }

  .package {

    grid-template-columns: 1fr;

  }

  .cta-wrap {

    align-items: flex-start;

    flex-direction: column;

  }

  .contact {

    grid-template-columns: 1fr;

  }

  .links {

    display: none;

  }

}

/* ---------------------------------------------------------

   13. RESPONSIVE — MOBILE (600px & BELOW)

   --------------------------------------------------------- */

@media (max-width: 600px) {

  .hero .hero-truck-img {
    width: var(--hero-mobile-truck-size);
    max-height: var(--hero-mobile-truck-max-height);
    transform: translate(var(--hero-mobile-truck-x), var(--hero-mobile-truck-y));
  }

  .container {

    width: min(100% - 32px, 1140px);

  }

  .nav {

    min-height: 69px;

  }

  .nav .btn {

    padding: 12px 13px;

    font-size: 12px;

  }

  .logo {

    font-size: 22px;

  }

  .logo span {

    font-size: 10px;

  }

  .brand-img {

    height: 38px;

    max-width: 145px;

  }

  .hero h1 {
    font-size: var(--hero-mobile-title-size);
    letter-spacing: var(--hero-mobile-title-letter-spacing);
  }

  .hero .lead {
    font-size: var(--hero-mobile-lead-size);
  }

  .hero .hero-actions {
    flex-direction: column;
  }

  .hero .hero-actions .btn {
    width: 100%;
  }

  .hero .visual {
    padding: var(--hero-mobile-visual-padding-top) var(--hero-mobile-visual-padding-x)
             var(--hero-mobile-visual-padding-bottom);
  }

  .hero .truck-card {
    min-height: var(--hero-mobile-panel-height);
    border-radius: var(--hero-mobile-panel-radius);
  }

  .hero .hero-badge {
    right: var(--hero-mobile-badge-right);
    top: var(--hero-mobile-badge-top);
  }

  .hero .price-float {
    bottom: var(--hero-mobile-price-bottom);
    left: var(--hero-mobile-price-left);
    min-width: var(--hero-mobile-price-min-width);
  }

  .hero {
    --hero-text-x: var(--hero-mobile-text-x);
    --hero-text-y: var(--hero-mobile-text-y);
    padding: var(--hero-mobile-padding-top) 0 var(--hero-mobile-padding-bottom);
  }

  .cards,

  .steps {

    grid-template-columns: 1fr;

  }

  .goods {

    columns: 1;

  }

  .package-main,

  .package-side {

    padding: 26px;

  }

  .amount {

    font-size: 51px;

  }

  .measurements div {

    min-width: 85px;

    flex: 1;

  }

  .foot {

    flex-direction: column;

    align-items: flex-start;

  }

  .float-wa {

    width: 52px;

    height: 52px;

    right: 15px;

    bottom: 15px;

  }

  section {

    padding: 59px 0;

  }

}