/* =========================================================================
   Quick Jump Start - "Why Dubai is hard on car batteries"

   Four factors arranged around a central vehicle shot. Its own stylesheet so
   the section can be lifted out whole if the client ever drops it.

   Named to sort between qjs-2026.css and qjs-sections.css, which is only a
   cascade convenience - nothing here depends on the sections sheet.
   ====================================================================== */

.qjs-clim{
  position:relative;overflow:hidden;
  padding:78px 0 84px;
  font-family:var(--font-b);
  background:linear-gradient(180deg,#FFFFFF 0%,#FCFBF6 60%,#FFFFFF 100%);
}
.qjs-clim__wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px}

.qjs-clim__t{
  font-family:var(--font-d);
  font-size:clamp(1.7rem,1.05rem + 1.9vw,2.55rem);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;
  color:var(--navy);margin:0;text-align:center;text-wrap:balance;
}
.qjs-clim__hl{
  font-style:normal;
  background:linear-gradient(100deg,var(--gold-deep),var(--gold) 55%,var(--gold-hi));
  -webkit-background-clip:text;background-clip:text;
  -webkit-text-fill-color:transparent;color:var(--gold-deep);
}
.qjs-clim__sub{
  margin:16px auto 0;max-width:60ch;text-align:center;
  font-size:15.5px;line-height:1.7;color:var(--body);
}

/* --- the ring ---------------------------------------------------------- */
.qjs-clim__grid{
  margin-top:40px;
  display:grid;grid-template-columns:1fr minmax(0,1.05fr) 1fr;
  gap:28px;align-items:center;
}
.qjs-clim__col{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:38px}

.qjs-clim__item{display:flex;align-items:flex-start;gap:14px}
/* The left column mirrors so both columns point inward at the vehicle. */
.qjs-clim__col--l .qjs-clim__item{flex-direction:row-reverse;text-align:right}

.qjs-clim__badge{
  flex:none;display:grid;place-items:center;width:48px;height:48px;
  color:#fff;font-size:24px;
  background:linear-gradient(160deg,var(--azure-hi) 0%,var(--navy) 70%);
  /* Shield silhouette, echoing the badge shapes in the reference. */
  clip-path:polygon(50% 0,100% 18%,100% 62%,50% 100%,0 62%,0 18%);
  box-shadow:0 8px 18px rgba(2,41,91,.22);
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.qjs-clim__item:hover .qjs-clim__badge{transform:translateY(-3px) scale(1.05)}

.qjs-clim__body{display:block}
.qjs-clim__name{
  display:block;font-family:var(--font-d);font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;color:var(--navy);line-height:1.3;
}
.qjs-clim__text{display:block;margin-top:6px;font-size:14px;line-height:1.62;color:var(--body)}

/* --- centre plate ------------------------------------------------------ */
.qjs-clim__mid{position:relative;margin:0;display:grid;place-items:center}
/* Warm ground-glow under the vehicle, as in the reference. */
.qjs-clim__mid::after{
  content:"";position:absolute;z-index:0;left:6%;right:6%;bottom:-6px;height:56px;
  background:radial-gradient(closest-side,rgba(212,165,15,.42),transparent 78%);
  filter:blur(2px);
}
.qjs-clim__img{
  position:relative;z-index:1;
  width:100%;height:auto;display:block;
  border-radius:18px;
  box-shadow:0 22px 46px rgba(2,41,91,.16);
}

@media (max-width:900px){
  .qjs-clim{padding:56px 0 60px}
  .qjs-clim__grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  /* The vehicle leads on narrow screens, then the four factors sit under it
     as a 2x2 block rather than being squeezed into slivers beside it. */
  .qjs-clim__mid{grid-column:1/-1;grid-row:1;max-width:520px;margin:0 auto}
  .qjs-clim__col{gap:26px}
  .qjs-clim__col--l .qjs-clim__item{flex-direction:row;text-align:left}
}
@media (max-width:600px){
  .qjs-clim__wrap{padding:0 16px}
  .qjs-clim__grid{grid-template-columns:1fr}
  .qjs-clim__badge{width:42px;height:42px;font-size:21px}
  .qjs-clim__name{font-size:15.5px}
}

@media (prefers-reduced-motion:reduce){
  .qjs-clim__badge{transition:none}
}