/* ============================================================
   KAMI RENT A CAR — shared stylesheet for every page
   ============================================================ */
:root{
  --navy:#0B1B33;
  --navy-2:#13294B;
  --navy-3:#1C3A66;
  --gold:#D9A441;
  --gold-2:#C08F31;
  --gold-soft:#F4E3C1;
  --ink:#101820;
  --muted:#5A6875;
  --bg:#FFFFFF;
  --surface:#F5F8FC;
  --surface-2:#EDF2F9;
  --line:#E1E8F1;
  --green:#25D366;
  --green-2:#1EBE5A;
  --radius:16px;
  --radius-sm:10px;
  --radius-lg:24px;
  --shadow-sm:0 1px 2px rgba(11,27,51,.06), 0 2px 8px rgba(11,27,51,.05);
  --shadow:0 4px 12px rgba(11,27,51,.08), 0 12px 32px rgba(11,27,51,.08);
  --shadow-lg:0 12px 24px rgba(11,27,51,.10), 0 32px 64px rgba(11,27,51,.14);
  --font:'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
  --font-ur:'Noto Nastaliq Urdu', 'Jameel Noori Nastaleeq', 'Urdu Typesetting', serif;
  --maxw:1180px;
}

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth; scroll-padding-top:84px}
body{
  margin:0; font-family:var(--font); color:var(--ink); background:var(--bg);
  line-height:1.6; -webkit-font-smoothing:antialiased; overflow-x:hidden;
}

/* Urdu mode typography.
   Nastaliq sits on a steep baseline with deep descenders, so every tight
   line-height in the Latin layout needs opening up or glyphs collide/clip. */
html[lang="ur"] body{ font-family:var(--font-ur); line-height:2.1 }
html[lang="ur"] .btn{ line-height:2 }
html[lang="ur"] h1,html[lang="ur"] h2,html[lang="ur"] h3,html[lang="ur"] h4{ line-height:1.95 }
html[lang="ur"] .hero h1,
html[lang="ur"] .page-hero h1{ line-height:2.15; padding-block-end:.18em }
html[lang="ur"] .section-title,
html[lang="ur"] .cta h2,
html[lang="ur"] .quote__title{ padding-block-end:.14em }
html[lang="ur"] .brand__text{ line-height:1.75; gap:2px }
html[lang="ur"] .brand__name{ font-size:15.5px }
html[lang="ur"] .stat__num{ line-height:1.6 }
html[lang="ur"] .step__num{ line-height:1 }
html[lang="ur"] .faq summary{ line-height:1.95 }
html[lang="ur"] .car__name,
html[lang="ur"] .price-row__val{ line-height:1.8 }
html[lang="ur"] .spec,
html[lang="ur"] .city,
html[lang="ur"] .filters button,
html[lang="ur"] .seg button,
html[lang="ur"] .rate-table th,
html[lang="ur"] .rate-table td{ line-height:1.9 }

img,svg{max-width:100%; display:block}
a{color:inherit; text-decoration:none}
button,input,select,textarea{font:inherit; color:inherit}
h1,h2,h3,h4{margin:0; font-weight:800; letter-spacing:-.02em; line-height:1.18}
p{margin:0}
ul{margin:0; padding:0; list-style:none}

.wrap{max-width:var(--maxw); margin-inline:auto; padding-inline:20px}
.section{padding-block:76px}
.section--tight{padding-block:56px}
.section--surface{background:var(--surface)}

.eyebrow{
  display:inline-flex; align-items:center; gap:8px;
  font-size:12px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--gold-2); margin-bottom:14px;
}
html[lang="ur"] .eyebrow{letter-spacing:normal; text-transform:none; font-size:14px}
.eyebrow::before{content:""; width:24px; height:2px; background:var(--gold); border-radius:2px}
.section-title{font-size:clamp(28px,4.2vw,42px); margin-bottom:14px}
.section-sub{color:var(--muted); font-size:17px; max-width:62ch}
.head-center{text-align:center}
.head-center .section-sub{margin-inline:auto}
.head-center .eyebrow::before{display:none}

/* ---------- Buttons ---------- */
.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:9px;
  padding:14px 26px; border-radius:999px; border:1px solid transparent;
  font-weight:700; font-size:15px; cursor:pointer; white-space:nowrap;
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
}
.btn:active{transform:translateY(1px)}
.btn svg{width:19px; height:19px; flex:none}
.btn--wa{background:var(--green); color:#fff; box-shadow:0 6px 18px rgba(37,211,102,.32)}
.btn--wa:hover{background:var(--green-2); box-shadow:0 10px 26px rgba(37,211,102,.4)}
.btn--gold{background:var(--gold); color:var(--navy); box-shadow:0 6px 18px rgba(217,164,65,.3)}
.btn--gold:hover{background:var(--gold-2); color:#fff}
.btn--navy{background:var(--navy); color:#fff}
.btn--navy:hover{background:var(--navy-3)}
.btn--ghost{background:transparent; color:var(--navy); border-color:var(--line)}
.btn--ghost:hover{border-color:var(--navy); background:var(--surface)}
.btn--ghost-light{background:rgba(255,255,255,.08); color:#fff; border-color:rgba(255,255,255,.28)}
.btn--ghost-light:hover{background:rgba(255,255,255,.16)}
.btn--sm{padding:10px 18px; font-size:14px}
.btn--block{width:100%}

/* ============================================================
   HEADER
   ============================================================ */
.header{
  position:sticky; top:0; z-index:60;
  background:rgba(11,27,51,.97);
  backdrop-filter:saturate(160%) blur(10px);
  border-bottom:1px solid rgba(255,255,255,.08);
  transition:box-shadow .2s ease;
}
.header.is-stuck{box-shadow:0 6px 24px rgba(11,27,51,.28)}
.header__inner{display:flex; align-items:center; gap:18px; height:72px}
.brand{display:flex; align-items:center; gap:11px; color:#fff; flex:none}
.brand__mark{width:38px; height:38px; flex:none}
.brand__text{display:flex; flex-direction:column; line-height:1.1}
.brand__name{font-weight:800; font-size:17px; letter-spacing:-.01em}
.brand__tag{font-size:10px; letter-spacing:.16em; text-transform:uppercase; color:var(--gold); font-weight:600}
html[lang="ur"] .brand__tag{letter-spacing:normal; text-transform:none; font-size:11px}

.nav{display:flex; align-items:center; gap:2px; margin-inline-start:auto}
.nav a{
  padding:9px 12px; border-radius:9px; font-size:14.5px; font-weight:600;
  white-space:nowrap; color:rgba(255,255,255,.82);
  transition:color .15s, background .15s; position:relative;
}
.nav a:hover{color:#fff; background:rgba(255,255,255,.09)}
.nav a.is-active{color:#fff}
.nav a.is-active::after{
  content:""; position:absolute; inset-inline:12px; inset-block-end:2px;
  height:2px; background:var(--gold); border-radius:2px;
}
.header__actions{display:flex; align-items:center; gap:10px; flex:none}

.lang-btn{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  color:#fff; font-weight:700; font-size:13.5px;
  transition:background .15s, border-color .15s;
}
.lang-btn:hover{background:rgba(255,255,255,.16); border-color:rgba(255,255,255,.35)}
.lang-btn svg{width:15px; height:15px; opacity:.85}

.burger{
  display:none; width:42px; height:42px; border-radius:11px; cursor:pointer;
  background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2);
  align-items:center; justify-content:center;
}
.burger span{display:block; width:18px; height:2px; background:#fff; border-radius:2px; position:relative}
.burger span::before,.burger span::after{
  content:""; position:absolute; inset-inline-start:0; width:18px; height:2px;
  background:#fff; border-radius:2px; transition:transform .2s ease, top .2s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.header.is-open .burger span{background:transparent}
.header.is-open .burger span::before{top:0; transform:rotate(45deg)}
.header.is-open .burger span::after{top:0; transform:rotate(-135deg)}

/* ============================================================
   HERO (home)
   ============================================================ */
.hero{
  position:relative; overflow:hidden;
  background:
    radial-gradient(1100px 520px at 82% -12%, rgba(217,164,65,.20), transparent 62%),
    radial-gradient(760px 420px at 8% 110%, rgba(28,58,102,.85), transparent 60%),
    linear-gradient(165deg, var(--navy) 0%, var(--navy-2) 58%, #0E2244 100%);
  background-color:var(--navy); color:#fff; padding-block:70px 90px;
}
.hero::after,.page-hero::after{
  content:""; position:absolute; inset:0; pointer-events:none;
  background-image:linear-gradient(rgba(255,255,255,.035) 1px, transparent 1px),
                   linear-gradient(90deg, rgba(255,255,255,.035) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:radial-gradient(circle at 70% 20%, #000, transparent 72%);
}
.hero__inner{position:relative; z-index:2; display:grid; grid-template-columns:1.05fr .95fr; gap:52px; align-items:center}

.hero__badge{
  display:inline-flex; align-items:center; gap:9px; margin-bottom:22px;
  padding:7px 15px 7px 8px; border-radius:999px;
  background:rgba(255,255,255,.09); border:1px solid rgba(255,255,255,.16);
  font-size:13px; font-weight:600; color:rgba(255,255,255,.92);
}
.hero__badge b{
  display:inline-flex; align-items:center; gap:5px;
  background:var(--gold); color:var(--navy); font-size:11px; font-weight:800;
  padding:3px 9px; border-radius:999px; letter-spacing:.04em;
}
.hero h1{font-size:clamp(34px,5.4vw,58px); margin-bottom:20px}
.hero h1 em{font-style:normal; color:var(--gold); display:block}
.hero__lede{font-size:18px; color:rgba(255,255,255,.78); max-width:52ch; margin-bottom:30px}
.hero__cta{display:flex; flex-wrap:wrap; gap:12px; margin-bottom:38px}
.hero__stats{display:flex; gap:34px; flex-wrap:wrap}
.stat__num{font-size:27px; font-weight:800; color:var(--gold); line-height:1.2}
.stat__label{font-size:13px; color:rgba(255,255,255,.62); font-weight:500}

/* ============================================================
   PAGE HERO (inner pages)
   ============================================================ */
.page-hero{
  position:relative; overflow:hidden; color:#fff;
  background:
    radial-gradient(900px 400px at 78% -20%, rgba(217,164,65,.18), transparent 62%),
    linear-gradient(160deg, var(--navy) 0%, var(--navy-2) 100%);
  background-color:var(--navy);
  padding-block:52px 58px;
}
.page-hero__inner{position:relative; z-index:2; max-width:70ch}
.breadcrumb{display:flex; gap:8px; align-items:center; font-size:13.5px; color:rgba(255,255,255,.55); margin-bottom:16px; flex-wrap:wrap}
.breadcrumb a{color:rgba(255,255,255,.72); transition:color .15s}
.breadcrumb a:hover{color:var(--gold)}
.breadcrumb span[aria-current]{color:var(--gold)}
.page-hero h1{font-size:clamp(30px,4.6vw,46px); margin-bottom:14px}
.page-hero p{font-size:17.5px; color:rgba(255,255,255,.76)}

/* ---------- Quote card ---------- */
.quote{background:#fff; color:var(--ink); border-radius:var(--radius-lg); padding:26px; box-shadow:var(--shadow-lg)}
.quote--standalone{box-shadow:var(--shadow); border:1px solid var(--line)}
.quote__head{margin-bottom:20px}
.quote__title{font-size:21px; margin-bottom:5px}
.quote__note{font-size:13.5px; color:var(--muted)}

.seg{display:grid; grid-template-columns:1fr 1fr 1fr; gap:6px; background:var(--surface-2); padding:5px; border-radius:12px; margin-bottom:18px}
.seg button{
  padding:11px 6px; border:0; background:transparent; border-radius:9px; cursor:pointer;
  font-size:13.5px; font-weight:700; color:var(--muted); transition:all .16s ease;
}
.seg button:hover{color:var(--navy)}
.seg button[aria-pressed="true"]{background:#fff; color:var(--navy); box-shadow:var(--shadow-sm)}

.field-grid{display:grid; grid-template-columns:1fr 1fr; gap:14px; margin-bottom:20px}
.field{display:flex; flex-direction:column; gap:7px}
.field--full{grid-column:1/-1}
.field label{font-size:12.5px; font-weight:700; color:var(--muted); letter-spacing:.02em}
.field select,.field input,.field textarea{
  padding:13px 14px; border:1.5px solid var(--line); border-radius:11px; background:#fff;
  font-size:15px; font-weight:600; color:var(--ink);
  transition:border-color .15s, box-shadow .15s; width:100%;
}
.field textarea{min-height:96px; resize:vertical; font-weight:500}
.field select:focus,.field input:focus,.field textarea:focus{
  outline:0; border-color:var(--navy-3); box-shadow:0 0 0 3px rgba(28,58,102,.12);
}
.quote__foot{display:flex; align-items:center; gap:8px; justify-content:center; margin-top:14px; font-size:12.5px; color:var(--muted)}
.quote__foot svg{width:15px; height:15px; color:var(--green); flex:none}

/* ============================================================
   TRUST BAR
   ============================================================ */
.trustbar{background:var(--navy-2); border-top:1px solid rgba(255,255,255,.07); padding-block:20px}
.trustbar__inner{display:flex; flex-wrap:wrap; gap:14px 40px; justify-content:center; align-items:center}
.trustbar__item{display:flex; align-items:center; gap:9px; color:rgba(255,255,255,.85); font-size:14px; font-weight:600}
.trustbar__item svg{width:18px; height:18px; color:var(--gold); flex:none}

/* ============================================================
   SERVICES
   ============================================================ */
.svc-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.svc{
  position:relative; background:#fff; border:1px solid var(--line);
  border-radius:var(--radius-lg); padding:30px 26px 28px;
  transition:transform .2s ease, box-shadow .2s ease, border-color .2s ease;
  display:flex; flex-direction:column;
}
.svc:hover{transform:translateY(-4px); box-shadow:var(--shadow); border-color:transparent}
.svc__icon{width:52px; height:52px; border-radius:14px; margin-bottom:18px; display:grid; place-items:center; background:var(--navy); color:var(--gold)}
.svc__icon svg{width:26px; height:26px}
.svc h3{font-size:20px; margin-bottom:10px}
.svc p{color:var(--muted); font-size:15px; margin-bottom:18px}
.svc ul{display:flex; flex-direction:column; gap:9px; margin-bottom:22px; flex:1}
.svc li{display:flex; gap:10px; font-size:14.5px; color:var(--ink); align-items:flex-start}
.svc li svg{width:17px; height:17px; color:var(--gold-2); flex:none; margin-top:4px}
.svc .btn{align-self:flex-start}
.svc--featured{background:var(--navy); border-color:var(--navy); color:#fff}
.svc--featured p{color:rgba(255,255,255,.72)}
.svc--featured li{color:rgba(255,255,255,.9)}
.svc--featured .svc__icon{background:var(--gold); color:var(--navy)}
.svc__flag{
  position:absolute; inset-block-start:20px; inset-inline-end:20px;
  background:var(--gold); color:var(--navy); font-size:11px; font-weight:800;
  padding:4px 11px; border-radius:999px; letter-spacing:.05em;
}
html[lang="ur"] .svc__flag{letter-spacing:normal}

/* ---------- Deep service block (services page) ---------- */
.svc-deep{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; padding-block:56px; border-block-start:1px solid var(--line)}
.svc-deep:first-of-type{border-block-start:0; padding-block-start:0}
.svc-deep__media{background:linear-gradient(160deg,var(--surface-2),var(--surface)); border-radius:var(--radius-lg); padding:38px 30px; display:grid; place-items:center}
.svc-deep__media svg{width:100%; max-width:300px; color:var(--navy)}
.svc-deep h2{font-size:29px; margin-bottom:14px}
.svc-deep__lede{color:var(--muted); font-size:16.5px; margin-bottom:22px}
.svc-deep ul{display:flex; flex-direction:column; gap:12px; margin-bottom:26px}
.svc-deep li{display:flex; gap:11px; align-items:flex-start; font-size:15.5px}
.svc-deep li svg{width:18px; height:18px; color:var(--gold-2); flex:none; margin-top:4px}
.svc-deep__btns{display:flex; gap:11px; flex-wrap:wrap}

/* ============================================================
   FLEET
   ============================================================ */
.filters{display:flex; flex-wrap:wrap; gap:9px; margin-top:32px; margin-bottom:30px}
.filters button{
  padding:9px 18px; border-radius:999px; border:1.5px solid var(--line);
  background:#fff; font-size:14px; font-weight:700; color:var(--muted); cursor:pointer;
  transition:all .15s ease;
}
.filters button:hover{border-color:var(--navy-3); color:var(--navy)}
.filters button[aria-pressed="true"]{background:var(--navy); border-color:var(--navy); color:#fff}

.fleet-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px}
.fleet-grid--home{grid-template-columns:repeat(3,1fr); margin-top:44px}
.car{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); overflow:hidden; display:flex; flex-direction:column; transition:transform .2s ease, box-shadow .2s ease}
.car:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.car__media{
  position:relative; overflow:hidden;
  background:linear-gradient(160deg,var(--surface-2),var(--surface));
  padding:26px 20px 18px; display:grid; place-items:center;
  aspect-ratio:3/2; min-height:150px;
}
.car__media svg{width:100%; max-width:230px; height:auto; color:var(--navy)}

/* A real photo sits on top of the illustration. It stays invisible until it has
   actually loaded, so a missing file leaves the illustration on show rather
   than a blank or broken-image box. */
.car__photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; z-index:1;
  opacity:0; transition:opacity .35s ease, transform .35s ease;
}
.car__photo.is-loaded{opacity:1}

/* Category tints, so the fleet grid doesn't read as one flat block */
.car__media--economy{background:linear-gradient(160deg,#EDF2F9,#F7FAFD)}
.car__media--sedan  {background:linear-gradient(160deg,#E8EFF8,#F4F8FC)}
.car__media--suv    {background:linear-gradient(160deg,#E2EAF5,#F0F5FA)}
.car__media--van    {background:linear-gradient(160deg,#E9F1EC,#F5F9F6)}
.car__media--luxury {background:linear-gradient(160deg,#F3EADA,#FBF6ED)}

.car__tag{position:absolute; inset-block-start:14px; inset-inline-start:14px; z-index:2; background:var(--navy); color:#fff; font-size:11px; font-weight:700; padding:4px 11px; border-radius:999px; letter-spacing:.04em}
.car__tag--gold{background:var(--gold); color:var(--navy)}
.car__cat{
  position:absolute; inset-block-start:14px; inset-inline-end:14px; z-index:2;
  background:rgba(11,27,51,.07); color:var(--muted);
  font-size:10.5px; font-weight:700; letter-spacing:.08em; text-transform:uppercase;
  padding:4px 10px; border-radius:999px; backdrop-filter:blur(4px);
}
html[lang="ur"] .car__cat{letter-spacing:normal; text-transform:none; font-size:12px}
.car:hover .car__photo.is-loaded{transform:scale(1.03)}
.car__body{padding:20px 22px 22px; display:flex; flex-direction:column; flex:1}
.car__name{font-size:18px; margin-bottom:4px}
.car__year{font-size:13px; color:var(--muted); font-weight:600; margin-bottom:14px}
.car__specs{display:flex; flex-wrap:wrap; gap:8px; margin-bottom:16px}
.spec{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:600; color:var(--muted); background:var(--surface); border:1px solid var(--line); padding:5px 10px; border-radius:8px}
.spec svg{width:14px; height:14px; color:var(--navy-3); flex:none}
.car__prices{border-block-start:1px solid var(--line); padding-block-start:15px; margin-block-start:auto; display:flex; flex-direction:column; gap:9px; margin-bottom:16px}
.price-row{display:flex; align-items:baseline; justify-content:space-between; gap:10px}
.price-row__label{font-size:13px; color:var(--muted); font-weight:600}
.price-row__val{font-size:19px; font-weight:800; color:var(--navy); white-space:nowrap}
.price-row__val small{font-size:12px; font-weight:600; color:var(--muted)}
.price-row__val.is-na{font-size:13.5px; font-weight:700; color:var(--muted)}
.car__note{font-size:12px; color:var(--muted); margin-bottom:16px; display:flex; gap:6px; align-items:flex-start}
.car__note svg{width:13px; height:13px; flex:none; margin-top:3px; color:var(--gold-2)}
.fleet__empty{padding:50px 20px; text-align:center; color:var(--muted); font-size:16px; grid-column:1/-1}

.notice{
  margin-top:30px; padding:18px 22px; background:var(--surface); border:1px dashed var(--line);
  border-radius:var(--radius); font-size:14px; color:var(--muted);
  display:flex; gap:12px; align-items:flex-start;
}
.notice--plain{background:#fff}
.notice svg{width:19px; height:19px; color:var(--gold-2); flex:none; margin-top:3px}

/* ---------- Rate table ---------- */
.table-scroll{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius-lg); background:#fff; margin-top:36px}
.rate-table{width:100%; border-collapse:collapse; min-width:640px}
.rate-table th,.rate-table td{padding:15px 18px; text-align:start; font-size:14.5px; border-block-end:1px solid var(--line)}
.rate-table thead th{background:var(--navy); color:#fff; font-size:13px; font-weight:700; letter-spacing:.04em; text-transform:uppercase; border-block-end:0; white-space:nowrap}
html[lang="ur"] .rate-table thead th{letter-spacing:normal; text-transform:none; font-size:14.5px}
.rate-table tbody tr:last-child td{border-block-end:0}
.rate-table tbody tr:hover{background:var(--surface)}
.rate-table td:first-child{font-weight:700; color:var(--navy)}
.rate-table .num{font-weight:800; color:var(--navy); white-space:nowrap}
.rate-table .na{color:var(--muted); font-weight:600}
.rate-table .cat{display:inline-block; font-size:11.5px; font-weight:700; padding:3px 10px; border-radius:999px; background:var(--surface-2); color:var(--muted)}

/* ============================================================
   STEPS
   ============================================================ */
.steps{display:grid; grid-template-columns:repeat(3,1fr); gap:24px; margin-top:46px; position:relative}
/* Dashed rule threading the three step markers together. Sits behind them and
   stops short at both ends so it reads as a path, not a border. */
.steps::before{
  content:""; position:absolute; z-index:0;
  inset-block-start:31px; inset-inline:16.6% 16.6%;
  border-block-start:2px dashed rgba(217,164,65,.45);
}
.step{text-align:center; padding:0 10px; position:relative; z-index:1}
.step__num{
  width:62px; height:62px; margin:0 auto 20px; border-radius:50%;
  display:grid; place-items:center; font-size:23px; font-weight:800;
  background:#fff; color:var(--navy); border:2px solid var(--gold);
  box-shadow:0 0 0 7px rgba(217,164,65,.13);
}
.step h3{font-size:19px; margin-bottom:9px}
.step p{color:var(--muted); font-size:15px}

/* ============================================================
   WHY US
   ============================================================ */
.why{background:var(--navy); color:#fff}
.why .section-sub{color:rgba(255,255,255,.7)}
.why-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:20px; margin-top:44px}
.why-card{background:rgba(255,255,255,.055); border:1px solid rgba(255,255,255,.11); border-radius:var(--radius); padding:26px 22px; transition:background .2s ease, border-color .2s ease}
.why-card:hover{background:rgba(255,255,255,.09); border-color:rgba(217,164,65,.4)}
.why-card__icon{width:44px; height:44px; border-radius:12px; margin-bottom:16px; display:grid; place-items:center; background:rgba(217,164,65,.16); color:var(--gold)}
.why-card__icon svg{width:22px; height:22px}
.why-card h3{font-size:17px; margin-bottom:8px}
.why-card p{font-size:14px; color:rgba(255,255,255,.66)}

/* ============================================================
   CITIES
   ============================================================ */
.cities{display:flex; flex-wrap:wrap; gap:11px; margin-top:36px}
.city{display:inline-flex; align-items:center; gap:8px; padding:11px 19px; border-radius:999px; background:#fff; border:1px solid var(--line); font-weight:700; font-size:14.5px; transition:all .15s ease}
.city:hover{border-color:var(--gold); box-shadow:var(--shadow-sm); transform:translateY(-2px)}
.city svg{width:15px; height:15px; color:var(--gold-2); flex:none}
.cities__more{color:var(--muted); font-weight:600; font-size:14.5px; align-self:center; padding-inline:6px}

.city-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:20px; margin-top:44px}
.city-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:26px 24px; transition:transform .2s ease, box-shadow .2s ease}
.city-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.city-card__head{display:flex; align-items:center; gap:11px; margin-bottom:12px}
.city-card__icon{width:40px; height:40px; border-radius:11px; display:grid; place-items:center; background:var(--navy); color:var(--gold); flex:none}
.city-card__icon svg{width:20px; height:20px}
.city-card h3{font-size:18px}
.city-card p{font-size:14.5px; color:var(--muted); margin-bottom:14px}
.city-card__meta{display:flex; flex-wrap:wrap; gap:7px}

/* ---------- Route list ---------- */
.routes{display:grid; grid-template-columns:repeat(2,1fr); gap:14px; margin-top:40px}
.route{display:flex; align-items:center; gap:16px; background:#fff; border:1px solid var(--line); border-radius:var(--radius); padding:18px 22px; transition:border-color .15s, box-shadow .15s}
.route:hover{border-color:var(--gold); box-shadow:var(--shadow-sm)}
.route__path{flex:1; display:flex; align-items:center; gap:10px; font-weight:700; font-size:15.5px; flex-wrap:wrap}
.route__arrow{color:var(--gold-2); font-weight:800}
.route__meta{font-size:13px; color:var(--muted); font-weight:600; white-space:nowrap}
.route__price{font-weight:800; color:var(--navy); white-space:nowrap; font-size:16px}

/* ============================================================
   REQUIREMENTS
   ============================================================ */
.req-grid{display:grid; grid-template-columns:1fr 1fr; gap:22px; margin-top:44px}
.req{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 28px}
.req__head{display:flex; align-items:center; gap:13px; margin-bottom:20px}
.req__icon{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--navy); color:var(--gold); flex:none}
.req__icon svg{width:23px; height:23px}
.req h3{font-size:19px}
.req__sub{font-size:13px; color:var(--muted); font-weight:600}
.req ul{display:flex; flex-direction:column; gap:13px}
.req li{display:flex; gap:12px; font-size:15px; align-items:flex-start}
.req li svg{width:18px; height:18px; color:var(--gold-2); flex:none; margin-top:4px}
.req li b{font-weight:700}

/* ============================================================
   TESTIMONIALS
   ============================================================ */
.tst-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.tst{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px; display:flex; flex-direction:column}
.stars{display:flex; gap:3px; margin-bottom:16px}
.stars svg{width:17px; height:17px; color:var(--gold)}
.tst p{font-size:15.5px; color:var(--ink); margin-bottom:22px; flex:1}
.tst__who{display:flex; align-items:center; gap:12px}
.tst__av{width:42px; height:42px; border-radius:50%; flex:none; display:grid; place-items:center; background:var(--navy); color:var(--gold); font-weight:800; font-size:16px}
.tst__name{font-weight:700; font-size:14.5px}
.tst__meta{font-size:12.5px; color:var(--muted)}

/* ============================================================
   ABOUT
   ============================================================ */
.split{display:grid; grid-template-columns:1fr 1fr; gap:52px; align-items:center}
.split__media{background:linear-gradient(160deg,var(--navy),var(--navy-3)); border-radius:var(--radius-lg); padding:48px 36px; display:grid; place-items:center; color:var(--gold)}
.split__media svg{width:100%; max-width:320px}
.prose p{font-size:16.5px; color:var(--muted); margin-bottom:16px}
.prose p:last-child{margin-bottom:0}
.prose strong{color:var(--ink); font-weight:700}

.values{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.value{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px}
.value__icon{width:46px; height:46px; border-radius:13px; display:grid; place-items:center; background:var(--gold); color:var(--navy); margin-bottom:16px}
.value__icon svg{width:23px; height:23px}
.value h3{font-size:18px; margin-bottom:9px}
.value p{font-size:14.5px; color:var(--muted)}

/* ============================================================
   FAQ
   ============================================================ */
.faq{max-width:840px; margin:44px auto 0}
.faq details{background:#fff; border:1px solid var(--line); border-radius:var(--radius); margin-bottom:12px; overflow:hidden; transition:box-shadow .2s ease, border-color .2s ease}
.faq details[open]{box-shadow:var(--shadow-sm); border-color:var(--navy-3)}
.faq summary{padding:19px 22px; cursor:pointer; font-weight:700; font-size:16px; display:flex; align-items:center; justify-content:space-between; gap:16px; list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:""; flex:none; width:11px; height:11px; border-inline-end:2.5px solid var(--muted); border-block-end:2.5px solid var(--muted); transform:rotate(45deg); transition:transform .22s ease; margin-block-start:-4px}
.faq details[open] summary::after{transform:rotate(-135deg); margin-block-start:3px}
.faq summary:hover{color:var(--navy-3)}
.faq__a{padding:0 22px 21px; color:var(--muted); font-size:15px}
.faq__group-title{font-size:20px; margin:38px 0 16px; color:var(--navy)}
.faq__group-title:first-child{margin-top:0}

/* ============================================================
   CONTACT
   ============================================================ */
.contact-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:22px; margin-top:44px}
.contact-card{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:30px 26px; text-align:center; transition:transform .2s ease, box-shadow .2s ease}
.contact-card:hover{transform:translateY(-4px); box-shadow:var(--shadow)}
.contact-card__icon{width:54px; height:54px; border-radius:15px; margin:0 auto 18px; display:grid; place-items:center; background:var(--navy); color:var(--gold)}
.contact-card--wa .contact-card__icon{background:var(--green); color:#fff}
.contact-card__icon svg{width:26px; height:26px}
.contact-card h3{font-size:18px; margin-bottom:8px}
.contact-card p{font-size:14.5px; color:var(--muted); margin-bottom:16px}
.contact-card__value{display:block; font-size:17px; font-weight:800; color:var(--navy); margin-bottom:18px; direction:ltr}

.contact-split{display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:start; margin-top:44px}
.map-box{background:var(--surface-2); border:1px dashed var(--line); border-radius:var(--radius-lg); min-height:340px; display:grid; place-items:center; padding:30px; text-align:center}
.map-box__inner{max-width:38ch}
.map-box svg{width:44px; height:44px; color:var(--gold-2); margin:0 auto 16px}
.map-box h3{font-size:18px; margin-bottom:10px}
.map-box p{font-size:14.5px; color:var(--muted)}
.hours{background:#fff; border:1px solid var(--line); border-radius:var(--radius-lg); padding:28px 26px}
.hours h3{font-size:19px; margin-bottom:18px}
.hours li{display:flex; justify-content:space-between; gap:16px; padding-block:11px; border-block-end:1px solid var(--line); font-size:15px}
.hours li:last-child{border-block-end:0}
.hours li b{font-weight:700; color:var(--navy)}

/* ============================================================
   CTA BAND
   ============================================================ */
.cta{background:linear-gradient(135deg,var(--navy) 0%, var(--navy-3) 100%); color:#fff; text-align:center; position:relative; overflow:hidden}
.cta::before{content:""; position:absolute; inset:0; background:radial-gradient(600px 300px at 50% 0%, rgba(217,164,65,.22), transparent 70%)}
.cta__inner{position:relative; z-index:2}
.cta h2{font-size:clamp(27px,4vw,40px); margin-bottom:14px}
.cta p{color:rgba(255,255,255,.78); font-size:17px; max-width:56ch; margin:0 auto 30px}
.cta__btns{display:flex; gap:13px; justify-content:center; flex-wrap:wrap}

/* ============================================================
   FOOTER
   ============================================================ */
.footer{background:#071426; color:rgba(255,255,255,.7); padding-block:56px 0}
.footer__grid{display:grid; grid-template-columns:1.5fr 1fr 1fr 1.2fr; gap:40px}
.footer .brand{margin-bottom:16px}
.footer__about{font-size:14.5px; max-width:38ch; margin-bottom:20px}
.footer h4{color:#fff; font-size:14px; letter-spacing:.1em; text-transform:uppercase; margin-bottom:18px}
html[lang="ur"] .footer h4{letter-spacing:normal; text-transform:none; font-size:16px}
.footer__list{display:flex; flex-direction:column; gap:11px}
.footer__list a,.footer__list span{font-size:14.5px; transition:color .15s}
.footer__list a:hover{color:var(--gold)}
.footer__contact li{display:flex; gap:11px; align-items:flex-start; font-size:14.5px; margin-bottom:14px}
.footer__contact svg{width:17px; height:17px; color:var(--gold); flex:none; margin-top:4px}
.socials{display:flex; gap:10px; margin-top:20px}
.socials a{width:38px; height:38px; border-radius:10px; display:grid; place-items:center; background:rgba(255,255,255,.07); border:1px solid rgba(255,255,255,.11); transition:all .15s ease}
.socials a:hover{background:var(--gold); border-color:var(--gold); color:var(--navy)}
.socials svg{width:18px; height:18px}
.footer__bar{margin-top:46px; border-top:1px solid rgba(255,255,255,.09); padding-block:22px; display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap; font-size:13.5px}

/* ============================================================
   FLOATING WHATSAPP
   ============================================================ */
.fab{
  position:fixed; inset-block-end:20px; inset-inline-end:20px; z-index:70;
  display:inline-flex; align-items:center; gap:10px;
  background:var(--green); color:#fff; font-weight:700; font-size:14.5px;
  padding:14px 20px; border-radius:999px; box-shadow:0 8px 28px rgba(37,211,102,.45);
  transition:transform .18s ease, box-shadow .18s ease;
}
.fab:hover{transform:translateY(-2px); box-shadow:0 12px 34px rgba(37,211,102,.55)}
.fab svg{width:22px; height:22px; flex:none}
.fab::before{content:""; position:absolute; inset:0; border-radius:999px; border:2px solid var(--green); animation:pulse 2.4s ease-out infinite}
@keyframes pulse{0%{transform:scale(1);opacity:.7} 70%{transform:scale(1.28);opacity:0} 100%{opacity:0}}

/* ============================================================
   REVEAL
   ============================================================ */
.reveal{opacity:0; transform:translateY(18px); transition:opacity .55s ease, transform .55s ease}
.reveal.is-in{opacity:1; transform:none}
/* If JS never runs, content must still be visible. */
.no-js .reveal{opacity:1; transform:none}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .reveal{opacity:1; transform:none; transition:none}
  .fab::before{animation:none}
  *{transition-duration:.01ms !important}
}

/* ============================================================
   RESPONSIVE
   ============================================================ */
@media (max-width:1100px){
  .burger{display:flex}
  .nav{
    position:absolute; inset-block-start:72px; inset-inline:0;
    flex-direction:column; align-items:stretch; gap:2px;
    background:var(--navy); padding:14px 20px 20px;
    border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 18px 34px rgba(0,0,0,.3); display:none; margin-inline-start:0;
  }
  .header.is-open .nav{display:flex}
  .nav a{padding:13px; font-size:16px; border-radius:10px}
  .nav a.is-active{background:rgba(255,255,255,.09)}
  .nav a.is-active::after{display:none}
  .header__actions{margin-inline-start:auto}
  .header__actions .btn--wa{display:none}
}
@media (max-width:1000px){
  /* The connector only makes sense across a single row of three */
  .steps::before{display:none}
  .hero__inner{grid-template-columns:1fr; gap:38px}
  .svc-grid,.fleet-grid,.fleet-grid--home,.tst-grid,.steps,.city-grid,.values,.contact-grid{grid-template-columns:repeat(2,1fr)}
  .why-grid{grid-template-columns:repeat(2,1fr)}
  .footer__grid{grid-template-columns:1fr 1fr; gap:34px}
  .svc-deep,.split,.contact-split{grid-template-columns:1fr; gap:30px}
  .svc-deep__media{order:-1}
  .routes{grid-template-columns:1fr}
}
@media (max-width:720px){
  .section{padding-block:56px}
  .hero{padding-block:48px 64px}
  .page-hero{padding-block:40px 44px}
  .svc-grid,.fleet-grid,.fleet-grid--home,.tst-grid,.steps,.why-grid,.req-grid,.city-grid,.values,.contact-grid{grid-template-columns:1fr}
  .hero__stats{gap:24px}
  .stat__num{font-size:23px}
  .quote{padding:22px 18px}
  .seg{grid-template-columns:1fr; gap:4px}
  .field-grid{grid-template-columns:1fr}
  .footer__grid{grid-template-columns:1fr}
  .fab span{display:none}
  .fab{padding:16px; inset-block-end:16px; inset-inline-end:16px}
  .trustbar__inner{gap:12px 22px; justify-content:flex-start}
  .trustbar__item{font-size:13px}
  .route{flex-wrap:wrap; gap:8px 16px}
}
@media (max-width:400px){
  .brand__name{font-size:15px}
  .lang-btn span{display:none}
  .lang-btn{padding:9px 11px}
}