/* =============================================================================
   BUROQ TRANSPORT — presentation stylesheet
   Custom CSS carries the shapes, decorations and precise typography.
   Tailwind utilities handle common spacing in the markup.
   ============================================================================= */

:root{
  --navy:#071B3D;
  --navy-deep:#041630;
  --navy-soft:#0E2350;
  --gold:#D9B52B;
  --gold-light:#E8CA57;
  --white:#FFFFFF;
  --surface:#F4F6F9;
  --text:#17243A;
  --muted:#687386;
  --red:#D92735;
  --line:#E6EAF1;
  --container:1240px;
  --header-h:72px;
  --shadow-card:0 22px 44px -34px rgba(7,27,61,.55);
}

*,*::before,*::after{ box-sizing:border-box }

html{ scroll-behavior:smooth; -webkit-text-size-adjust:100% }
section[id], footer[id]{ scroll-margin-top:80px }

body{
  margin:0;
  background:#fff;
  color:var(--text);
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  font-size:15.5px;
  line-height:1.72;
  overflow-x:hidden;
}
body.is-locked{ overflow:hidden }

img{ max-width:100%; display:block }
a{ color:inherit; text-decoration:none }
button{ font:inherit; color:inherit }
ul{ list-style:none; margin:0; padding:0 }
h1,h2,h3{ font-family:Poppins,system-ui,sans-serif; margin:0; color:#0E1B33 }
p{ margin:0 }

.icon-sprite{ position:absolute; width:0; height:0; overflow:hidden }
.ico{ width:16px; height:16px; flex:none; display:block }

.sr-only{
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0;
}

.container-main{ width:100%; max-width:var(--container); margin-inline:auto; padding-inline:22px }

/* ---------- shared typography ---------- */
.h2{
  font-size:clamp(25px,2.5vw,38px);
  line-height:1.25;
  font-weight:700;
  letter-spacing:-.015em;
}
.h2.center{ text-align:center }
.h2.on-dark{ color:#fff }
.gold{ color:var(--gold); font-style:normal }

.eyebrow{
  font-family:Poppins,sans-serif;
  font-size:11.5px;
  font-weight:700;
  letter-spacing:.16em;
  text-transform:uppercase;
  color:var(--gold);
}
.eyebrow.center{ text-align:center }

.section-sub{
  text-align:center;
  color:var(--muted);
  font-size:14.5px;
  max-width:720px;
  margin:14px auto 0;
}
.section-sub.on-dark{ color:#9CABC4 }
.section-sub.is-left{ text-align:left; margin:8px 0 0; max-width:520px }

.body-text{ color:var(--muted); font-size:14.8px; line-height:1.8 }

.pill{
  display:inline-flex; align-items:center; gap:9px;
  background:#fff; border:1px solid var(--line);
  border-radius:999px; padding:5px 16px 5px 5px;
  font-family:Poppins,sans-serif; font-size:11.5px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#17243A;
  box-shadow:0 6px 16px -12px rgba(7,27,61,.7);
}
.pill-ico{
  width:23px; height:23px; border-radius:50%;
  background:#FCF3D8; color:#C6971A; display:grid; place-items:center;
}
.pill-ico .ico{ width:13px; height:13px }
.pill-soft{ background:#FDF8EC; border-color:#F5E7C4; padding-left:14px }
.pill-soft .pill-ico{ background:#FBEFD2 }
.center-pill{ display:flex; width:max-content; margin-inline:auto }

.pill-dark{
  background:rgba(255,255,255,.07); border-color:rgba(255,255,255,.16);
  color:#E8EDF7; padding:5px 18px 5px 5px;
}
.pill-star{
  width:23px; height:23px; border-radius:50%; background:var(--gold);
  color:#0B1B33; display:grid; place-items:center;
}
.pill-star .ico{ width:13px; height:13px }

/* ---------- buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  font-family:Poppins,sans-serif; font-weight:600;
  font-size:13px; letter-spacing:.07em; text-transform:uppercase;
  height:48px; padding:0 24px; border:1px solid transparent;
  border-radius:8px; cursor:pointer; white-space:nowrap;
  transition:transform .18s ease, box-shadow .18s ease, background .18s ease, color .18s ease;
}
.btn:hover{ transform:translateY(-2px) }
.btn:active{ transform:translateY(0) }
.btn:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px }
a:focus-visible, button:focus-visible{ outline:2px solid var(--gold-light); outline-offset:3px }

.btn-gold{
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  color:#fff; box-shadow:0 14px 26px -16px rgba(217,181,43,.95);
}
.btn-gold:hover{ box-shadow:0 18px 30px -16px rgba(217,181,43,1) }

.btn-ghost{ background:transparent; color:#fff; border-color:rgba(255,255,255,.45) }
.btn-ghost:hover{ background:rgba(255,255,255,.1); border-color:#fff }

.btn-red{
  background:var(--red); color:#fff; border-radius:5px;
  text-transform:none; letter-spacing:.01em; font-size:13.5px;
  height:50px; padding:0 22px;
  box-shadow:0 16px 30px -20px rgba(217,39,53,.9);
}
.btn-red .ico{ width:13px; height:13px; opacity:.85 }

.btn-outline-gold{
  background:transparent; color:var(--gold-light);
  border-color:rgba(217,181,43,.75); height:42px; padding:0 24px;
  border-radius:7px; font-size:12px;
}
.btn-outline-gold:hover{ background:rgba(217,181,43,.14); border-color:var(--gold) }

.btn-outline-dark{ background:#fff; color:var(--text); border-color:#D7DEE8 }
.btn-outline-dark:hover{ border-color:var(--navy) }

.btn-block{ width:100% }

.btn-hero-booking{ padding:0 26px 0 5px; gap:12px }
.btn-ico{
  width:32px; height:32px; border-radius:50%;
  background:var(--navy-deep); color:var(--gold-light);
  display:grid; place-items:center;
}
.btn-ico .ico{ width:14px; height:14px }

.btn-book-now{ height:44px; padding:0 18px; gap:9px; font-size:12px }
.btn-book-now .ico{ width:15px; height:15px }

.link-gold{
  display:inline-flex; align-items:center; gap:7px;
  background:none; border:0; padding:0; cursor:pointer;
  font-family:Poppins,sans-serif; font-size:13px; font-weight:600;
  letter-spacing:.05em; text-transform:uppercase; color:#B99212;
}
.link-gold .ico{ width:14px; height:14px }
.link-gold:hover{ color:var(--gold) }

/* =============================================================================
   HEADER
   ============================================================================= */
.site-header{
  position:fixed; inset:0 0 auto 0; z-index:60;
  padding:11px 0; transition:padding .25s ease, background .25s ease, box-shadow .25s ease;
}
.site-header.is-stuck{
  background:rgba(6,25,62,.97);
  box-shadow:0 14px 34px -22px rgba(0,0,0,.9);
  padding:7px 0;
}
.header-inner{ display:flex; align-items:center; gap:18px }

.brand{ display:flex; align-items:center; gap:12px }
/* client logo keeps its original green: it sits on a white plate with a gold
   hairline so the brand colour never touches the navy/gold surfaces directly */
.brand-logo{
  width:46px; height:46px; padding:6px;
  object-fit:contain; background:#fff; border-radius:50%;
  box-shadow:0 0 0 1.5px rgba(217,181,43,.95), 0 12px 24px -16px rgba(0,0,0,.9);
}
.brand-word{ display:flex; flex-direction:column; line-height:1.05; font-family:Poppins,sans-serif }
.brand-word strong{ color:#fff; font-size:14.5px; letter-spacing:.15em; font-weight:700 }
.brand-word span{ color:var(--gold-light); font-size:8.5px; letter-spacing:.3em; font-weight:600 }

.nav{ margin-left:auto }
.nav-list{ display:flex; align-items:center; gap:clamp(14px,2vw,30px) }
.nav-list a{
  display:block; position:relative;
  font-family:Poppins,sans-serif; font-size:12.5px; font-weight:500;
  letter-spacing:.05em; text-transform:uppercase; color:#E9EEF8;
  padding:6px 0; transition:color .2s ease;
}
.nav-list a::after{
  content:""; position:absolute; left:0; right:0; bottom:0;
  height:2px; background:var(--gold); transform:scaleX(0);
  transform-origin:left; transition:transform .25s ease;
}
.nav-list a:hover{ color:var(--gold-light) }
.nav-list a.is-active{ color:var(--gold) }
.nav-list a.is-active::after{ transform:scaleX(1) }

.header-actions{ display:flex; align-items:center; gap:10px; margin-left:clamp(14px,2.4vw,44px) }

.nav-toggle{
  display:none; width:46px; height:46px; border:1px solid rgba(255,255,255,.3);
  background:rgba(255,255,255,.07); border-radius:9px;
  align-items:center; justify-content:center; cursor:pointer;
}
.nav-toggle .ico{ width:20px; height:20px; color:#fff }
.nav-toggle .ico-close{ display:none }
.nav-toggle[aria-expanded="true"] .ico-open{ display:none }
.nav-toggle[aria-expanded="true"] .ico-close{ display:block }

/* close control inside the mobile drawer (the header toggle sits behind it) */
.nav-close{ display:none }

.nav-backdrop{
  position:fixed; inset:0; background:rgba(4,12,26,.6);
  z-index:59; opacity:0; visibility:hidden; transition:.25s ease;
}
.nav-backdrop.is-open{ opacity:1; visibility:visible }

/* =============================================================================
   1. HERO  — viewport-aware: header, main content and contact strip share
   one screen. min-height only (never height), so short/zoomed viewports
   grow and scroll naturally instead of clipping content.
   ============================================================================= */
.hero{
  position:relative; z-index:0; overflow:hidden;
  display:flex; flex-direction:column;
  min-height:100vh;                 /* fallback */
  min-height:100svh;
  padding-top:var(--header-h);
  padding-bottom:clamp(16px,2.6vh,30px);
  background:
    radial-gradient(80% 70% at 74% 14%, rgba(41,78,158,.5), transparent 64%),
    linear-gradient(140deg,#0B2150 0%,#071B3D 54%,#041630 100%);
}

.hero-inner{
  position:relative; z-index:2;
  flex:1 1 auto; min-height:0;
  display:flex; flex-direction:column;
}

.hero-grid{
  flex:1 1 auto; min-height:0;
  display:grid;
  /* fr tracks (not %) so the column gap never pushes the grid past its box */
  grid-template-columns:minmax(0,.78fr) minmax(0,1.22fr);
  align-items:center; align-content:center;
  gap:clamp(20px,2.4vw,36px);
  padding-block:clamp(14px,2.6vh,30px);
}
.hero-copy{ min-width:0 }

.hero-eyebrow{
  font-family:Poppins,sans-serif;
  font-size:clamp(11px,.9vw,12.5px); font-weight:600;
  letter-spacing:.17em; text-transform:uppercase; color:var(--gold);
  margin-bottom:clamp(12px,2vh,20px);
}
.hero-title{
  color:#fff; font-weight:600;
  font-size:clamp(31px,3.3vw,52px);
  line-height:1.16; letter-spacing:-.02em;
}
.hero-text{
  color:#C3CCDE; font-size:clamp(14.5px,1.05vw,16px); line-height:1.75;
  max-width:54ch; margin-top:clamp(14px,2.2vh,22px);
}
.hero-actions{ display:flex; flex-wrap:wrap; gap:14px; margin-top:clamp(22px,3.2vh,36px) }

.hero-visual{ min-width:0; display:flex; align-items:center; justify-content:flex-end }
@media (min-width:1024px){
  /* let the vehicle group run out to the viewport edge so it reads as the focal point */
  .hero-visual{ margin-right:calc(-22px - max(0px, (100vw - var(--container)) / 2)) }
}
.hero-cars{
  position:relative; width:100%;
  display:flex; align-items:center; justify-content:flex-end;
}
/* soft glow behind the vehicles — depth only, no hard edges */
.hero-cars::before{
  content:''; position:absolute; z-index:0;
  width:82%; aspect-ratio:1/1; right:-2%; top:50%; transform:translateY(-50%);
  background:radial-gradient(circle at 50% 50%, rgba(63,110,206,.34), rgba(217,181,43,.12) 46%, transparent 70%);
  filter:blur(34px); pointer-events:none;
}
.hero-cars img{
  position:relative; z-index:1;
  /* the box is driven by the column width only, so the art never shrinks to
     letterbox next to empty space; the hero grows instead (min-height).
     The wider aspect-ratio + cover crops the transparent margin at the top of
     the file (bottom aligned), making the vehicles read noticeably larger. */
  width:100%; max-width:none; height:auto;
  aspect-ratio:1.75;
  object-fit:cover; object-position:50% 100%;
  filter:drop-shadow(0 22px 30px rgba(2,9,22,.45));
  animation:heroFloat 7s ease-in-out infinite;
}
@keyframes heroFloat{
  0%,100%{ transform:translateY(0) }
  50%{ transform:translateY(-10px) }
}
@media (prefers-reduced-motion:reduce){
  .hero-cars img{ animation:none }
}

/* ---- bottom information strip: three compact, factual groups ---- */
.hero-contact{
  flex:none;
  display:grid;
  /* kolom alamat lebih lebar: alamat jalan + kota butuh ruang untuk 2 baris */
  grid-template-columns:minmax(0,.95fr) minmax(0,1.3fr) minmax(0,1fr);
  gap:clamp(16px,2.4vw,36px);
  padding-top:clamp(14px,2.2vh,22px);
  border-top:1px solid rgba(255,255,255,.14);
}
.hc-item{ display:flex; align-items:center; gap:13px; min-width:0 }
.hc-ico{
  width:42px; height:42px; flex:none; border-radius:8px;
  display:grid; place-items:center;
  background:rgba(217,181,43,.1); border:1px solid rgba(217,181,43,.42);
  color:var(--gold-light);
}
.hc-ico .ico{ width:18px; height:18px }
.hc-body{ display:flex; flex-direction:column; min-width:0; line-height:1.45 }
.hc-label{
  font-family:Poppins,sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase; color:#93A2BE;
}
.hc-value{
  font-family:Poppins,sans-serif; font-size:clamp(14px,1.1vw,15.5px);
  font-weight:600; color:#fff;
}
/* alamat hero: teks panjang — ukuran sedikit dikecilkan, line-height longgar
   dan boleh pindah baris agar tetap enak dibaca di strip kontak */
.hc-value--address{
  font-size:clamp(12.5px,.95vw,14.5px);
  font-weight:500; line-height:1.5; color:#D9E1F1;
  overflow-wrap:break-word;
}
a.hc-value:hover{ color:var(--gold-light) }

/* =============================================================================
   2. ABOUT + STATS
   ============================================================================= */
.about{ position:relative; z-index:1; background:#fff; padding-top:66px }
.about-grid{
  position:relative; z-index:2;
  display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
  gap:clamp(30px,4vw,56px); align-items:start;
}
.about-copy .h2{ margin-top:24px; max-width:15ch }

.callout{
  margin-top:26px; background:#EEF2F8; border:1px solid #E3E9F2;
  border-radius:7px; overflow:hidden; max-width:560px;
}
.callout-title{
  font-family:Poppins,sans-serif; font-size:13.5px; font-weight:600;
  color:#0E1B33; background:#E3E9F3; padding:11px 18px;
}
.callout-text{ padding:15px 18px 17px; font-size:13.6px; color:#4E5B72; line-height:1.75 }

.about-chips{ display:flex; flex-wrap:wrap; gap:22px; margin-top:24px }
.about-chips li{
  display:flex; align-items:center; gap:8px;
  font-family:Poppins,sans-serif; font-size:13.3px; font-weight:500; color:#3E4C64;
}
.about-chips .ico{ width:17px; height:17px; color:var(--gold) }
.about-copy .btn-red{ margin-top:28px }

.about-media{ position:relative; min-height:300px; padding-bottom:70px }
.about-photo{
  width:100%; height:296px; object-fit:cover; border-radius:14px;
  box-shadow:0 30px 60px -44px rgba(7,27,61,.9);
}
.about-car{ position:absolute; object-fit:contain; filter:drop-shadow(0 22px 22px rgba(7,27,61,.28)) }
.about-car-a{ left:-11%; bottom:6px; width:56%; z-index:2 }
.about-car-b{ right:-5%; bottom:-16px; width:62%; z-index:3 }

.stats{
  display:grid; grid-template-columns:repeat(4,1fr); gap:20px;
  margin-top:52px; padding:30px 0 34px; border-top:1px solid var(--line);
}
.stat{ display:flex; align-items:center; gap:14px }
.stat + .stat{ border-left:1px solid #EEF1F6; padding-left:20px }
.stat-ico{
  width:46px; height:46px; border-radius:10px; flex:none;
  background:#FCF3D8; color:#D3A31B; display:grid; place-items:center;
}
.stat-ico .ico{ width:21px; height:21px }
.stat-body{ display:flex; flex-direction:column; min-width:0 }
.stat-value{ display:block; font-family:Poppins,sans-serif; font-size:17.5px; font-weight:700; color:#0E1B33; line-height:1.3 }
.stat-label{ display:block; font-size:13px; color:var(--muted); line-height:1.45 }

/* =============================================================================
   3. BRAND BANNER
   ============================================================================= */
.banner{ position:relative; background:#fff; padding-bottom:44px }
.banner-shadow{
  position:absolute; left:0; top:30px; right:18px; bottom:-14px; z-index:1;
  background:#DCE1E8; transform:translate(18px,26px);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 71%);
}
.banner-panel{
  position:relative; z-index:2; overflow:hidden;
  background:linear-gradient(115deg,#13265A 0%,#0A1E46 45%,#06193E 100%);
  clip-path:polygon(0 0, 100% 0, 100% 100%, 0 71%);
  min-height:clamp(370px,31vw,530px);
  display:flex; align-items:center;
  padding:clamp(46px,5vw,64px) 0 clamp(74px,8vw,110px);
}
.banner-gold{
  position:absolute; left:0; top:36%; z-index:3;
  width:clamp(130px,11vw,206px); height:clamp(96px,8vw,132px);
  background:linear-gradient(150deg,var(--gold-light),#CFA322);
  clip-path:polygon(0 0, 100% 100%, 0 100%);
}
.banner-inner{ position:relative; width:100%; z-index:2 }
.banner-copy{ padding-left:clamp(0px,5vw,84px); max-width:560px }

.banner-title{
  color:#fff; font-size:clamp(29px,3vw,46px); font-weight:600;
  line-height:1.22; letter-spacing:-.01em;
}
.banner-sub{ color:#A9B5CC; font-size:14px; margin-top:18px }
.banner-copy .btn{ margin-top:26px }

.banner-badges{ position:absolute; top:-6px; right:-56px; z-index:5 }

.banner-cars{ position:absolute; right:-4%; bottom:-96px; width:54%; z-index:4; height:330px }
.banner-cars img{ position:absolute; object-fit:contain; filter:drop-shadow(0 26px 26px rgba(0,0,0,.4)) }
.bn-car-a{ left:0; bottom:34%; width:64%; z-index:2 }
.bn-car-b{ right:0; bottom:0; width:70%; z-index:3 }

/* =============================================================================
   4. SERVICE INTRO
   ============================================================================= */
.service{ background:#fff; padding:clamp(64px,7vw,96px) 0 clamp(30px,4vw,52px) }
.service-grid{
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:clamp(10px,2vw,26px); align-items:center;
}
.service-media{ position:relative }
.service-media img{
  width:132%; max-width:none; margin-left:-19%;
  object-fit:contain; filter:drop-shadow(0 34px 34px rgba(7,27,61,.24));
}
.service-card{
  position:relative; z-index:2; margin-left:-7%;
  background:#fff; border-left:4px solid var(--gold);
  border-radius:14px; padding:clamp(26px,3vw,42px);
  box-shadow:0 40px 70px -46px rgba(7,27,61,.75);
}
.service-card .h2{ margin-top:20px }
.service-card .body-text{ margin-top:16px }
.service-card .link-gold{ margin-top:22px }

/* =============================================================================
   5. SERVICE CATALOG — the seven official services
   Cards reserve a 16:9 photo slot for each service; until the client supplies
   photos the slot renders an empty placeholder of exactly the same size.
   ============================================================================= */
.catalog{ background:#fff; padding:clamp(50px,5vw,72px) 0 clamp(54px,5.5vw,78px) }
.catalog .h2{ margin-top:10px }
.catalog .section-sub{ margin-top:10px; max-width:620px }

.svc-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  grid-auto-rows:1fr;               /* all rows share one card height on desktop */
  gap:clamp(16px,1.8vw,24px);
  margin-top:clamp(26px,3vw,36px);
}

.svc-card{
  display:flex; flex-direction:column;
  background:#fff; border:1px solid #E6EBF3; border-radius:10px;
  overflow:hidden;
  box-shadow:0 16px 30px -30px rgba(7,27,61,.55);
  transition:transform .2s ease, border-color .2s ease, box-shadow .2s ease;
}
.svc-card:hover{ transform:translateY(-2px); border-color:#D5DEEC; box-shadow:0 22px 36px -30px rgba(7,27,61,.55) }
.svc-card:focus-within{ border-color:#C9D4E6 }

/* image slot — the placeholder and the future photo share this exact box */
.svc-photo{ position:relative; aspect-ratio:16/9; background:#EEF2F8; overflow:hidden }
/* vehicle cutouts keep a white backdrop, so photos sit inside the slot without
   cropping the unit; the white matches the card surface */
.svc-photo:not(.is-empty){ background:#fff }
.svc-photo img{ display:block; width:100%; height:100%; object-fit:contain }
.svc-photo.is-empty{ display:flex; align-items:center; justify-content:center }
.svc-photo.is-empty::before{
  content:""; position:absolute; inset:9px; z-index:0;
  border:1px dashed #C9D3E2; border-radius:6px;
}
.svc-photo-empty{
  position:relative; z-index:1;
  display:flex; flex-direction:column; align-items:center; gap:6px;
  color:#93A1B6;
}
.svc-photo-empty .ico{ width:20px; height:20px }
.svc-photo-label{
  font-family:Poppins,sans-serif; font-size:10px; font-weight:600;
  letter-spacing:.13em; text-transform:uppercase; color:#8B99AE;
}

.svc-body{ display:flex; flex-direction:column; flex:1; padding:16px 16px 14px }
.svc-title{
  display:flex; align-items:center; gap:8px;
  font-family:Poppins,sans-serif; font-size:15px; font-weight:700;
  line-height:1.4; color:#0E1B33;
}
.svc-ico{ flex:none; display:grid; place-items:center; color:#C6971A }
.svc-ico .ico{ width:16px; height:16px }
.svc-desc{ margin-top:8px; font-size:13px; line-height:1.66; color:var(--muted); }

.svc-link{
  margin-top:auto; padding:14px 0 2px; align-self:flex-start;
  display:inline-flex; align-items:center; gap:6px;
  background:none; border:0; cursor:pointer;
  font-family:Poppins,sans-serif; font-size:12.5px; font-weight:600; color:#0E1B33;
}
.svc-link .ico{ width:13px; height:13px; color:#B99212; transition:transform .2s ease }
.svc-link:hover{ color:#B99212 }
.svc-link:hover .ico{ transform:translateX(3px) }
.svc-link:focus-visible{ outline:2px solid var(--gold); outline-offset:3px; border-radius:3px }

/* =============================================================================
   6. WHY US
   ============================================================================= */
.why{ background:var(--surface); padding:clamp(56px,6vw,80px) 0 clamp(60px,6vw,84px) }
.why .h2{ margin-top:20px }

.benefit-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:26px; margin-top:40px }
.b-card{ background:#fff; border-radius:12px; padding:26px 24px 30px; box-shadow:var(--shadow-card) }
.b-ico{ position:relative; width:46px; height:46px; display:grid; place-items:center; color:var(--gold-light) }
.b-ico::before{
  content:""; position:absolute; inset:-14px; border-radius:50%;
  background:radial-gradient(circle,rgba(217,181,43,.6),rgba(217,181,43,0) 70%);
}
.b-ico::after{ content:""; position:absolute; inset:0; background:var(--navy); border-radius:12px }
.b-ico .ico{ position:relative; z-index:1; width:22px; height:22px }
.b-title{
  margin-top:22px; font-family:Poppins,sans-serif; font-size:13.4px; font-weight:700;
  letter-spacing:.045em; text-transform:uppercase; line-height:1.5; color:#0E1B33;
}
.b-text{ margin-top:12px; font-size:13.3px; line-height:1.75; color:var(--muted) }

/* =============================================================================
   7. BOOKING STEPS (CARA MEMULAI)
   ============================================================================= */
.steps{ background:#fff; padding:clamp(58px,6vw,86px) 0 clamp(30px,4vw,50px) }
.steps-grid{
  display:grid; grid-template-columns:minmax(0,.98fr) minmax(0,1.02fr);
  gap:clamp(30px,4vw,58px); align-items:center;
}
.steps-cards{ display:grid; grid-template-columns:repeat(2,1fr); gap:22px }
.s-card{
  background:#fff; border:1px solid #EDF1F7; border-radius:13px;
  padding:24px 22px 26px; box-shadow:var(--shadow-card);
}
.s-no{
  width:36px; height:36px; border-radius:10px; color:#152449;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  display:grid; place-items:center;
  font-family:Poppins,sans-serif; font-size:15px; font-weight:700;
}
.s-title{ margin-top:20px; font-family:Poppins,sans-serif; font-size:17px; font-weight:700; color:#0E1B33 }
.s-text{ margin-top:10px; font-size:13.2px; line-height:1.7; color:var(--muted) }

.steps-right .h2{ margin-top:20px }
.steps-right .body-text{ margin-top:14px; max-width:44ch }
.steps-car{
  margin-top:26px; width:104%; max-width:none; margin-left:-4%;
  object-fit:contain; filter:drop-shadow(0 34px 34px rgba(7,27,61,.26));
}

/* =============================================================================
   8. CORPORATE TRANSPORTATION
   ============================================================================= */
.corp{ background:#fff; padding:clamp(58px,6vw,84px) 0 clamp(46px,5vw,70px) }
.corp .h2{ margin-top:12px }
.corp-grid{
  display:grid; grid-template-columns:minmax(0,.96fr) minmax(0,1.04fr);
  gap:clamp(24px,3vw,42px); margin-top:40px; align-items:stretch;
}
.corp-card{
  background:#fff; border:1px solid #EDF1F7; border-radius:16px;
  padding:clamp(24px,3vw,36px); box-shadow:0 34px 60px -46px rgba(7,27,61,.8);
  display:flex; flex-direction:column;
}
.corp-ico{
  width:52px; height:52px; border-radius:13px; color:#12224A;
  background:linear-gradient(180deg,var(--gold-light),var(--gold));
  display:grid; place-items:center; box-shadow:0 14px 26px -16px rgba(217,181,43,1);
}
.corp-ico .ico{ width:24px; height:24px }
.corp-card .body-text{ margin-top:20px }

.feature-list{ margin-top:auto; padding-top:12px }
.feature-list li{
  display:flex; align-items:center; gap:15px;
  padding:17px 0; border-top:1px solid #EDF1F7;
}
.f-ico{
  width:42px; height:42px; border-radius:11px; flex:none;
  background:var(--navy); color:var(--gold-light); display:grid; place-items:center;
}
.f-ico .ico{ width:19px; height:19px }
.f-title{ display:block; font-family:Poppins,sans-serif; font-size:15.5px; font-weight:700; color:#0E1B33; line-height:1.4 }
.f-text{ display:block; font-size:13px; color:var(--muted); line-height:1.5 }

.corp-media{ margin:0; border-radius:18px; overflow:hidden; box-shadow:0 34px 60px -46px rgba(7,27,61,.9) }
.corp-media img{ width:100%; height:100%; min-height:330px; object-fit:cover }

/* =============================================================================
   9. TOURISM + PACKAGES
   ============================================================================= */
.tourism{ background:#fff; padding:clamp(34px,4vw,54px) 0 clamp(58px,6vw,86px) }

.tourism-card{
  position:relative; background:#fff; border:1px solid #EDF1F7;
  border-radius:14px; padding:clamp(26px,3vw,38px) clamp(26px,3vw,44px) clamp(26px,3vw,38px) clamp(56px,5vw,74px);
  box-shadow:0 34px 60px -46px rgba(7,27,61,.75);
}
.tourism-card::before{
  content:""; position:absolute; left:clamp(24px,2.6vw,38px); top:34px; bottom:34px;
  width:4px; border-radius:3px; background:var(--gold);
}
.tourism-card .h2{ margin-top:18px }
.tourism-card .body-text{ margin-top:14px }

/* =============================================================================
   10. CLOSING CTA
   ============================================================================= */
.closing{
  position:relative; z-index:3; background:var(--navy);
  padding-top:clamp(58px,7vw,92px); padding-bottom:clamp(10px,1.6vw,22px);
  text-align:center; overflow:visible;
}
.closing-title{
  color:#fff; font-weight:700; letter-spacing:-.02em;
  font-size:clamp(33px,5vw,88px); line-height:1.12;
}
.closing-sub{ margin-top:22px; color:#9FACC4; font-size:15px }
.closing-cars{
  display:flex; justify-content:center;
  margin-top:clamp(20px,2.4vw,32px); margin-bottom:0;
  pointer-events:none;
}
.closing-cars img{
  width:100%; max-width:1040px; height:auto;
  object-fit:contain; object-position:center bottom;
  filter:drop-shadow(0 26px 26px rgba(0,0,0,.32));
}

/* =============================================================================
   11. FOOTER
   ============================================================================= */
.site-footer{ background:var(--navy-deep); color:#B7C1D4; padding-top:clamp(46px,5vw,64px) }
.footer-grid{
  display:grid; grid-template-columns:1.05fr .85fr 1.1fr 1.4fr;
  gap:34px; padding-bottom:44px;
}
.footer-brand .brand-logo{ width:74px; height:74px; padding:11px }
.footer-brand-name{
  margin-top:14px; font-family:Poppins,sans-serif; font-size:15px;
  font-weight:700; letter-spacing:.1em; color:#fff;
}
.footer-legal{ margin-top:9px; font-size:12.6px; line-height:1.7; color:#93A0B8 }
.footer-social-label{ margin-top:20px; font-family:Poppins,sans-serif; font-size:13.5px; color:#fff }
.footer-social{ display:flex; gap:16px; margin-top:13px }
.footer-social button, .footer-social a{
  width:26px; height:26px; display:grid; place-items:center;
  color:var(--gold); background:none; border:0; cursor:pointer; padding:0;
  transition:transform .2s ease, color .2s ease;
}
.footer-social .ico{ width:17px; height:17px }
.footer-social button:hover, .footer-social a:hover{ transform:translateY(-3px); color:var(--gold-light) }
/* accounts whose profile URL could not be verified stay non-interactive */
.footer-social .is-unlinked{ color:#65728C; cursor:default }
.footer-social-note{ margin-top:12px; font-size:11.6px; line-height:1.75; color:#7C8AA4 }

.footer-col h3{
  font-family:Poppins,sans-serif; font-size:13.5px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:#fff; margin-bottom:18px;
}
.footer-col li + li{ margin-top:11px }
.footer-col a, .footer-col li{ font-size:13.4px; color:#AFBAD0 }
.footer-col a:hover{ color:var(--gold-light) }
.footer-contact li{ display:flex; align-items:flex-start; gap:10px }
.footer-contact .ico{ width:15px; height:15px; color:var(--gold); margin-top:5px }

/* map card replaces the old footer menu column on the right */
.footer-map-col{ display:flex; flex-direction:column; min-width:0 }
.footer-map{
  display:flex; flex-direction:column; flex:1 1 auto; min-height:300px;
  min-width:0; overflow:hidden; border:1px solid rgba(255,255,255,.16);
  border-radius:14px; background:#fff;
  box-shadow:0 24px 46px -34px rgba(0,0,0,.85);
}
.footer-map-frame{ flex:1 1 auto; display:flex; min-height:220px; background:#E7ECF3 }
.footer-map iframe{ width:100%; height:100%; min-height:220px; border:0; display:block; flex:1 1 auto }
.footer-map-fallback{
  flex:1 1 auto; min-height:220px; display:grid; place-items:center;
  background:#E7ECF3; color:var(--navy);
}
.footer-map-fallback .ico{ width:34px; height:34px; color:#C6971A }
.footer-map-bar{
  display:grid; gap:12px; padding:14px 16px;
  background:#fff; border-top:1px solid var(--line);
}
.footer-map-info{
  display:flex; align-items:flex-start; gap:8px; min-width:0;
  font-size:12.4px; line-height:1.55; color:#4E5B72; overflow-wrap:anywhere;
}
.footer-map-info .ico{ width:15px; height:15px; margin-top:3px; color:#C6971A; flex:none }
.footer-map-open{ width:100%; height:42px; padding:0 14px; font-size:11.4px; gap:8px }
.footer-map-open .ico{ width:14px; height:14px }

.footer-bar{ border-top:1px solid rgba(255,255,255,.1); padding:20px 0 24px }
.footer-bar p{
  font-family:Poppins,sans-serif; font-size:11px; font-weight:500;
  letter-spacing:.08em; text-transform:uppercase; color:#8A97AF;
}

/* =============================================================================
   FLOATING WHATSAPP + TOAST
   ============================================================================= */
/* compact icon button: stays functional without covering card content */
.wa-fab{
  position:fixed; right:20px; bottom:20px; z-index:70;
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px;
  background:#25D366; color:#fff; border:0; cursor:pointer; border-radius:50%;
  box-shadow:0 16px 30px -16px rgba(0,0,0,.6);
  transition:transform .2s ease, opacity .2s ease, visibility .2s ease;
}
.wa-fab span{ display:none }
.wa-fab:hover{ transform:translateY(-3px) }
.wa-fab.is-suppressed{
  opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none;
}
/* the service cards carry their own CTA, so the floating button steps aside
   while that section is on screen wherever it would overlap the card column */
@media (max-width:1320px){
  body.in-services .wa-fab{ opacity:0; visibility:hidden; transform:translateY(14px); pointer-events:none }
}
.wa-fab .ico{ width:24px; height:24px }

.toast{
  position:fixed; left:50%; bottom:24px; transform:translateX(-50%);
  z-index:120; max-width:min(520px,92vw);
  background:#0B1B33; color:#EAF0FA; border:1px solid rgba(217,181,43,.45);
  padding:13px 20px; border-radius:11px; font-size:14px; line-height:1.6;
  box-shadow:0 24px 46px -26px rgba(0,0,0,.9);
}
.toast[hidden]{ display:none }

/* =============================================================================
   MODALS
   ============================================================================= */
.modal{ position:fixed; inset:0; z-index:100; display:flex; align-items:center; justify-content:center; padding:18px }
.modal[hidden]{ display:none }
.modal-backdrop{ position:absolute; inset:0; background:rgba(4,18,42,.76) }
.modal-card{
  position:relative; background:#fff; border-radius:17px;
  width:min(580px,100%); max-height:92vh; overflow:auto;
  padding:26px clamp(20px,3vw,34px) 30px;
  box-shadow:0 50px 90px -50px rgba(0,0,0,.9);
  animation:modalIn .28s ease;
}
@keyframes modalIn{ from{ opacity:0; transform:translateY(18px) } to{ opacity:1; transform:none } }

.modal-head{ display:flex; align-items:flex-start; justify-content:space-between; gap:18px }
.modal-head h2{ font-size:22px; line-height:1.35; margin-top:6px }
.modal-close{
  width:38px; height:38px; border-radius:10px; border:1px solid var(--line);
  background:#F7F9FC; display:grid; place-items:center; cursor:pointer; color:#44506A;
}
.modal-close .ico{ width:17px; height:17px }
.modal-close:hover{ background:#EEF2F8 }

.modal-notice{
  margin-top:18px; background:#FDF8EC; border:1px solid #F3E4BF;
  border-left:3px solid var(--gold); border-radius:8px;
  padding:13px 15px; font-size:13.2px; line-height:1.7; color:#5C4E27;
}

.booking-form{ margin-top:20px }
.field{ margin-bottom:15px }
.field label{
  display:block; margin-bottom:7px;
  font-family:Poppins,sans-serif; font-size:12.5px; font-weight:600; color:#25324B;
}
.req{ color:var(--red) }
.field input, .field select, .field textarea{
  width:100%; border:1px solid #DCE2EC; background:#F9FAFC;
  border-radius:9px; padding:12px 14px;
  font-family:Inter,sans-serif; font-size:14.5px; color:var(--text);
}
.field textarea{ resize:vertical; min-height:84px }
.field input:focus, .field select:focus, .field textarea:focus{
  outline:none; border-color:var(--gold); background:#fff;
  box-shadow:0 0 0 3px rgba(217,181,43,.18);
}
.field input.is-invalid, .field select.is-invalid{ border-color:var(--red); background:#FFF6F6 }
.field-error{ display:block; margin-top:6px; font-size:12.4px; color:var(--red); min-height:1px }
.field-row{ display:grid; grid-template-columns:1fr 1fr; gap:14px }

.form-alert{
  background:#FFF1F2; border:1px solid #FBD5D9; border-radius:8px;
  padding:11px 14px; font-size:13.2px; color:#A11B27; margin-bottom:14px;
}
.modal-actions{ display:flex; flex-direction:column; gap:11px; margin-top:6px }

.form-success{
  display:flex; gap:13px; align-items:flex-start; margin-top:18px;
  background:#F1FAF2; border:1px solid #CDEBD3; border-radius:10px; padding:15px 16px;
}
.form-success[hidden]{ display:none }
.fs-ico{
  width:30px; height:30px; border-radius:50%; background:#2FA95B; color:#fff;
  display:grid; place-items:center; flex:none;
}
.fs-ico .ico{ width:16px; height:16px }
.form-success strong{ font-family:Poppins,sans-serif; font-size:14.5px; color:#14663A }
.form-success p{ font-size:13.3px; color:#3D6B51; margin-top:5px; line-height:1.7 }

/* =============================================================================
   RESPONSIVE
   ============================================================================= */
@media (max-width:1180px){
  .banner-badges{ right:0 }
}

@media (max-width:1023px){
  :root{ --header-h:76px }

  /* the nav leaves the flow here, so the actions take over the right edge */
  .header-actions{ margin-left:auto }

  .nav-toggle{ display:flex }

  .nav-close{
    display:grid; place-items:center;
    position:absolute; top:13px; right:13px;
    width:44px; height:44px; border-radius:9px; cursor:pointer;
    background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.3);
    color:#fff;
  }
  .nav-close .ico{ width:18px; height:18px }
  .nav-close:hover{ background:rgba(255,255,255,.14) }

  .nav{
    position:fixed; top:0; right:0; height:100dvh;
    width:min(330px,86vw); background:var(--navy-deep);
    transform:translateX(100%); transition:transform .32s cubic-bezier(.4,0,.2,1);
    padding:94px 26px 40px; overflow:auto; z-index:65;
    box-shadow:-24px 0 60px -34px #000;
  }
  .nav.is-open{ transform:none }
  .nav-list{ flex-direction:column; align-items:stretch; gap:0 }
  .nav-list a{ padding:14px 2px; font-size:13.5px; border-bottom:1px solid rgba(255,255,255,.09) }
  .nav-list a::after{ display:none }
  .nav-list a.is-active{ color:var(--gold) }

  .hero{ padding-bottom:clamp(18px,3vh,32px) }
  .hero-grid{ grid-template-columns:minmax(0,1fr); gap:clamp(18px,3vh,30px); align-content:center }
  .hero-title{ font-size:clamp(30px,4.6vw,44px) }
  .hero-visual{ justify-content:center }
  .hero-cars{ justify-content:center }
  .hero-cars::before{ width:70%; right:auto; left:50%; transform:translate(-50%,-50%) }
  .hero-cars img{ max-width:100%; max-height:clamp(240px,46vh,440px) }
  .hero-actions{ width:100% }
  .hero-actions .btn{ flex:1 1 auto; min-width:0; white-space:normal; text-align:center; height:auto; min-height:48px; padding:12px 16px; line-height:1.3 }

  .about-grid{ grid-template-columns:1fr; gap:34px }
  .about-copy .h2{ max-width:none }
  .about-media{ padding-bottom:52px }
  .about-car-a{ left:-4%; bottom:2px; width:50% }
  .about-car-b{ right:-2%; bottom:-14px; width:56% }
  .stats{ grid-template-columns:repeat(2,1fr); gap:22px; margin-top:34px }
  .stat + .stat{ border-left:0; padding-left:0 }

  /* Banner: teks di atas, mobil di bawah — tidak saling menimpa */
  .banner-panel{
    min-height:0;
    padding:48px 0 0;
    clip-path:polygon(0 0, 100% 0, 100% 100%, 0 92%);
    display:flex; flex-direction:column; align-items:stretch;
  }
  .banner-shadow{ clip-path:polygon(0 0, 100% 0, 100% 100%, 0 92%); bottom:0 }
  .banner-inner{
    display:flex; flex-direction:column; align-items:stretch;
    position:relative; z-index:2;
  }
  .banner-copy{
    position:relative; z-index:5;
    padding-left:0; max-width:100%;
    padding-bottom:12px;
  }
  .banner-title{ position:relative; z-index:5 }
  .banner-sub{ position:relative; z-index:5; max-width:36ch }
  .banner-copy .btn{ position:relative; z-index:5 }
  .banner-badges{ display:none }
  .banner-cars{
    position:relative;
    right:auto; bottom:auto;
    width:100%; height:190px;
    margin-top:4px; margin-bottom:-4px;
    z-index:3;
    pointer-events:none;
  }
  .bn-car-a{ left:2%; bottom:16%; width:48%; z-index:2 }
  .bn-car-b{ right:0; bottom:0; width:58%; z-index:3 }
  .banner-gold{ top:auto; bottom:36px; height:64px; width:100px; z-index:1 }

  .service-grid{ grid-template-columns:1fr; gap:8px }
  .service-media img{ width:100%; margin-left:0 }
  .service-card{ margin-left:0 }

  .svc-grid{ grid-template-columns:repeat(2,minmax(0,1fr)); gap:18px }
  .benefit-grid{ grid-template-columns:repeat(2,1fr); gap:22px }

  .corp-grid{ grid-template-columns:1fr }
  .feature-list{ margin-top:6px }
  .corp-media img{ min-height:250px }

  .steps-grid{ grid-template-columns:1fr; gap:36px }
  .steps-right{ order:-1 }
  .steps-car{ width:100%; margin-left:0 }

  .blog-grid{ grid-template-columns:repeat(2,1fr); gap:24px }
  .footer-grid{ grid-template-columns:repeat(2,1fr); gap:34px }
}

/* Desktop: closing CTA fills the viewport and the fleet sits closer to the CTA.
   The negative top margin compensates for the transparent canvas above the
   vehicles, so the visible gap matches the compact mobile spacing. */
@media (min-width:1024px){
  .closing{
    display:flex; flex-direction:column;
    min-height:100vh;
  }
  .closing-inner{
    display:flex; flex-direction:column; justify-content:center;
    flex:1;
  }
  .closing-cars{ margin-top:clamp(-80px,-4.4vw,-48px) }
}

@media (max-width:767px){
  body{ font-size:15px }
  .container-main{ padding-inline:16px }

  .btn{ height:auto; min-height:46px; font-size:12.5px; padding:12px 18px; white-space:normal; text-align:center; line-height:1.3 }
  .hero-title{ font-size:clamp(27px,6.8vw,36px); overflow-wrap:break-word }
  .hero-text{ font-size:14.5px; max-width:none }
  .hero-actions{ gap:12px; flex-direction:column }
  .hero-actions .btn{ flex:1 1 auto; width:100%; min-width:0; white-space:normal; padding:14px 16px; text-align:center }
  .btn-hero-booking{ padding:14px 16px; gap:9px; justify-content:center }
  .hero-cars img{ max-height:clamp(220px,44vh,380px) }

  /* operational info reflows into stacked, compact rows */
  .hero-contact{ grid-template-columns:minmax(0,1fr); gap:0; padding-top:12px }
  .hc-item + .hc-item{ border-top:1px solid rgba(255,255,255,.1); padding-top:12px; margin-top:2px }
  .hc-ico{ width:38px; height:38px }

  .about-photo{ height:230px }
  .about-car-a{ width:52% }
  .about-car-b{ width:58% }

  .stats{ gap:16px; padding:24px 0 28px }
  .stat{ gap:11px }
  .stat-ico{ width:40px; height:40px }
  .stat-value{ font-size:16px }
  .stat-label{ font-size:12.3px }

  .banner-cars{ height:170px }
  .bn-car-a{ left:0; bottom:12%; width:50% }
  .bn-car-b{ right:-2%; bottom:0; width:56% }
  .banner-title{ font-size:clamp(24px,6.5vw,28px); max-width:none }
  .banner-sub{ font-size:13.5px }

  /* services become a compact list: photo left, text right, no full-width CTA */
  .svc-grid{ grid-template-columns:minmax(0,1fr); grid-auto-rows:auto; gap:12px; margin-top:22px }
  .svc-card{
    display:grid; grid-template-columns:104px minmax(0,1fr);
    align-items:center; gap:14px; padding:12px;
  }
  .svc-card:hover{ transform:none }
  .svc-photo{ aspect-ratio:1/1; border-radius:7px }
  .svc-photo.is-empty::before{ inset:7px }
  .svc-photo-empty{ gap:4px }
  .svc-photo-empty .ico{ width:17px; height:17px }
  .svc-photo-label{ font-size:9px; letter-spacing:.07em }
  .svc-body{ padding:0 }
  .svc-title{ font-size:14.5px; line-height:1.35 }
  .svc-desc{ margin-top:5px; font-size:12.5px; line-height:1.55 }
  .svc-link{ margin-top:6px; padding:6px 0; min-height:34px }

  .benefit-grid{ grid-template-columns:1fr }
  .b-card{ padding:22px 20px 24px }

  .tourism-card{ padding:24px 22px 24px 50px }

  .steps-cards{ gap:16px }
  .s-card{ padding:20px 18px 22px }
  .s-title{ font-size:15.5px; margin-top:16px }

  .closing-title{ font-size:clamp(30px,7.6vw,44px) }

  .footer-grid{ grid-template-columns:1fr; gap:30px }
  .footer-col h3{ margin-bottom:14px }

  .field-row{ grid-template-columns:1fr; gap:0 }
  .modal-card{ padding:22px 18px 26px }
  .modal-head h2{ font-size:19px }
}

@media (max-width:479px){
  :root{ --header-h:76px }
  .brand-logo{ width:50px; height:50px; padding:7px }
  .btn-book-now{ display:none }
  .hero-cars img{ max-height:clamp(190px,40vh,300px) }
  .hc-value{ font-size:14.5px }
  .hero-title{ font-size:clamp(26px,7.6vw,33px) }

  .stats{ grid-template-columns:repeat(2,1fr) }
  .about-car-a{ width:56%; left:-6% }
  .about-car-b{ width:62% }
  .steps-cards{ grid-template-columns:1fr }
  .wa-fab{ width:52px; height:52px; right:14px; bottom:14px }
  .modal-card{ max-width:100%; margin:0 8px }
}

@media (min-width:1441px){
  .banner-badges{ right:-66px }
}

/* motion preferences */
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto }
  *,*::before,*::after{ animation-duration:.01ms !important; transition-duration:.01ms !important }
}