/* =========================================================================
   QUICK JUMP START - PREMIUM UI PASS
   =========================================================================
   This sheet loads last and refines presentation only. It adds no markup and
   changes no content: every rule here is about weight, spacing, contrast and
   motion. Sections are numbered so a later edit can be found quickly.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. HEADER

   The old bar sat at rgba(2,41,91,.92) against a hero of almost exactly the
   same navy, so the two read as one surface and the navigation lost its edge.
   The bar now runs a darker ink gradient than anything it can sit on, closed
   with a gold hairline and a soft drop shadow, so the header reads as a
   separate plane on every page and in both scroll states.
   ---------------------------------------------------------------------- */
.qjs-hd{
  background:var(--ink);
  box-shadow:0 1px 0 rgba(255,255,255,.05);
}

.qjs-hd__top{
  background:linear-gradient(90deg,#03102A 0%,#072248 55%,#03102A 100%);
  border-bottom:1px solid rgba(255,255,255,.06);
}
.qjs-hd__tl{font-size:12.8px;letter-spacing:.01em}
.qjs-hd__tl .qjs-i{font-size:15.5px}

.qjs-hd__bar{
  background:linear-gradient(180deg,#08234A 0%,#051A38 100%);
  border-bottom:1px solid rgba(212,165,15,.42);
  box-shadow:0 14px 34px -18px rgba(0,0,0,.75);
  backdrop-filter:none;-webkit-backdrop-filter:none;
}
.qjs-hd.is-stuck .qjs-hd__bar{
  background:linear-gradient(180deg,#061D3E 0%,#03122B 100%);
  border-bottom-color:rgba(212,165,15,.55);
  box-shadow:0 18px 40px -16px rgba(0,0,0,.8);
}

/* A hairline of brand gold along the very bottom edge, so the boundary reads
   as deliberate rather than as a shadow artefact. */
.qjs-hd::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent 0%,rgba(212,165,15,.55) 18%,var(--gold) 50%,rgba(212,165,15,.55) 82%,transparent 100%);
  opacity:.9;pointer-events:none;
}

/* --- navigation --------------------------------------------------------- */
.qjs-hd .qjs-nav__list{gap:2px}
.qjs-hd .qjs-nav__list a{
  padding:11px 16px;
  font-size:13px;letter-spacing:.075em;
  color:#C9DAF0;
}
.qjs-hd .qjs-nav__list a:hover{background:rgba(255,255,255,.08);color:#fff}
.qjs-hd .qjs-nav__list a::after{bottom:6px;height:2.5px}
.qjs-hd .qjs-nav__list .current-menu-item>a,
.qjs-hd .qjs-nav__list .current_page_item>a{color:#fff}

/* --- actions ------------------------------------------------------------ */
/* The call button is the header's one commercial act, so it gets the deepest
   gold and the only lift on hover. */
.qjs-hd .qjs-hd__call .elementor-button{
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-deep) 100%);
  box-shadow:0 10px 24px -10px rgba(212,165,15,.72),inset 0 1px 0 rgba(255,255,255,.42);
  border:0;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s;
}
.qjs-hd .qjs-hd__call .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 16px 32px -10px rgba(212,165,15,.85),inset 0 1px 0 rgba(255,255,255,.5);
}
.qjs-hd .qjs-hd__wa .elementor-button{
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s;
}
.qjs-hd .qjs-hd__wa .elementor-button:hover{
  transform:translateY(-2px);
  box-shadow:0 14px 28px -12px rgba(37,211,102,.75);
}

/* --- mobile ------------------------------------------------------------- */
@media (max-width:1024px){
  .qjs-hd__bar{
    background:linear-gradient(180deg,#08234A 0%,#04152F 100%);
    border-bottom:1px solid rgba(212,165,15,.5);
  }
}

/* -------------------------------------------------------------------------
   2. ICONS

   Icons were sitting at 24px inside a 44x40 tile, which read as decoration
   rather than as a signal. The tile is now square and larger, the glyph fills
   more of it, and the whole thing carries a little depth so it holds its own
   next to a 21px heading.
   ---------------------------------------------------------------------- */
.qjs-iconbox .elementor-icon{
  width:58px;height:58px;border-radius:17px;
  box-shadow:0 8px 18px -8px rgba(212,165,15,.55);
}
.qjs-iconbox .elementor-icon svg,
.qjs-iconbox .elementor-icon i{width:.74em;height:.74em;font-size:.74em}

/* On dark panels the tile is a tinted plate rather than solid gold, so it
   needs a rim to keep its edge. */
.qjs-dark .qjs-iconbox .elementor-icon,
.qjs-svc-photo .qjs-iconbox .elementor-icon,
.qjs-svc-navy .qjs-iconbox .elementor-icon{
  box-shadow:inset 0 0 0 1px rgba(212,165,15,.34);
}

/* The compact rows inside "What We Promise" keep a smaller plate so the list
   still reads as a list. */
.qjs-hairrow-light .elementor-icon{
  width:52px;height:52px;border-radius:15px;
}

/* Utility-bar, trust-chip and list glyphs: all lifted a step for legibility. */
.qjs-trust .elementor-icon-list-icon svg{width:17px;height:17px}
.qjs-hd__tl .qjs-i,
.qjs-hd .elementor-icon-list-icon svg{font-size:15.5px}
.qjs-footer .elementor-icon-list-icon svg{width:15px;height:15px}
.qjs-arealist .qjs-i,
.qjs-area .qjs-i{font-size:16px}
/* -------------------------------------------------------------------------
   3. SERVICE CARDS (interior pages)

   These rules still serve the Car Brands page, where a plain service card
   stands on its own. The home page showcase was rebuilt as a photographic
   layout and is styled in section 15.
   ---------------------------------------------------------------------- */
/* A whisper of brand colour so a white card still belongs to the family. */
.qjs-svc{
  background:
    radial-gradient(120% 90% at 100% 0%,rgba(1,89,166,.07) 0%,rgba(1,89,166,0) 58%),
    var(--surface);
  border:1px solid rgba(2,41,91,.07);
}
.qjs-svc:hover{border-color:rgba(212,165,15,.34)}

/* The accent rule that already existed was 3px and hidden until hover; making
   it thicker and easing it in from the left reads as intent rather than as a
   flicker. */
.qjs-card::after,.qjs-svc::after,.qjs-svc-navy::after{height:4px}

.qjs-svc .elementor-icon-box-title,
.qjs-svc-navy .elementor-icon-box-title,
.qjs-svc-photo .elementor-icon-box-title{margin-bottom:9px}


/* -------------------------------------------------------------------------
   4. BUTTONS

   Two naming families exist in this build - .qjs-btn--gold/--ghost from the
   hero and .qjs-btn-primary/-secondary from the dark CTA blocks. They are
   given one shared shape and one shared motion here so a button looks the
   same wherever it appears.
   ---------------------------------------------------------------------- */
.qjs-btn .elementor-button,
.qjs-btn-primary .elementor-button,
.qjs-btn-secondary .elementor-button,
.qjs-btn-wa .elementor-button{
  border-radius:999px;
  font-family:var(--font-b);
  font-weight:800;
  letter-spacing:.012em;
  transition:transform .24s cubic-bezier(.2,.7,.3,1),box-shadow .24s,background .24s,color .24s,border-color .24s;
}
.qjs-btn .elementor-button:hover,
.qjs-btn-primary .elementor-button:hover,
.qjs-btn-secondary .elementor-button:hover,
.qjs-btn-wa .elementor-button:hover{transform:translateY(-2px)}

/* Primary: one gold, everywhere. */
.qjs-btn-primary .elementor-button,
.qjs-btn--gold .elementor-button{
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 52%,var(--gold-deep) 100%);
  color:var(--navy);
  box-shadow:0 10px 24px -10px rgba(212,165,15,.7),inset 0 1px 0 rgba(255,255,255,.42);
}
.qjs-btn-primary .elementor-button:hover,
.qjs-btn--gold .elementor-button:hover{
  box-shadow:0 16px 32px -10px rgba(212,165,15,.85),inset 0 1px 0 rgba(255,255,255,.5);
}

/* Secondary on a dark panel: the translucent ghost it always was. */
.qjs-dark .qjs-btn-secondary .elementor-button,
.qjs-dark .qjs-btn--ghost .elementor-button,
.qjs-svc-photo .qjs-btn-secondary .elementor-button{
  background:rgba(255,255,255,.07);
  border:1px solid rgba(255,255,255,.44);
  color:#fff;
}
.qjs-dark .qjs-btn-secondary .elementor-button:hover,
.qjs-dark .qjs-btn--ghost .elementor-button:hover{
  background:rgba(255,255,255,.14);border-color:#fff;
}

/* Secondary on a light panel: the same button was rendering white-on-white,
   so on light sections it becomes a navy outline instead. */
.qjs-svc-ctas .qjs-btn-secondary .elementor-button,
.qjs-light .qjs-btn-secondary .elementor-button{
  background:#fff;
  border:1.5px solid rgba(2,41,91,.22);
  color:var(--navy);
  box-shadow:0 8px 20px -12px rgba(2,41,91,.35);
}
.qjs-svc-ctas .qjs-btn-secondary .elementor-button:hover,
.qjs-light .qjs-btn-secondary .elementor-button:hover{
  border-color:var(--navy);
  box-shadow:0 14px 26px -12px rgba(2,41,91,.45);
}
.qjs-svc-ctas .qjs-btn-secondary .elementor-button svg,
.qjs-svc-ctas .qjs-btn-secondary .elementor-button i{color:#25D366;fill:#25D366}

/* One height for the two sizes actually used. */
.qjs-btn .elementor-size-lg,
.qjs-btn-primary .elementor-size-lg,
.qjs-btn-secondary .elementor-size-lg{padding:16px 30px;font-size:15.5px}
.qjs-btn .elementor-size-md,
.qjs-btn-primary .elementor-size-md,
.qjs-btn-secondary .elementor-size-md{padding:13px 24px;font-size:14.5px}

/* -------------------------------------------------------------------------
   5. TEAM

   The old rail was three staggered photos with a name tucked underneath - it
   read as a stock employee grid, and it had nowhere to put the role summary
   the approved copy gives each technician. Each person is now a proper card:
   portrait, then name, role and what they actually handle, on one baseline.
   The stagger is dropped because the descriptions make the cards uneven, and
   an uneven stagger reads as a mistake rather than as a device.
   ---------------------------------------------------------------------- */
.qjs-team .qjs-team__rail{
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:24px;align-items:stretch;
}
.qjs-team .qjs-team__card,
.qjs-team .qjs-team__card:nth-child(2){
  margin-top:0;
  display:flex;flex-direction:column;
  background:#fff;
  border:1px solid rgba(2,41,91,.08);
  border-radius:22px;
  overflow:hidden;
  box-shadow:0 14px 34px -20px rgba(2,41,91,.34);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s;
}
.qjs-team .qjs-team__card:hover{
  transform:translateY(-8px);
  border-color:rgba(212,165,15,.5);
  box-shadow:0 30px 56px -24px rgba(2,41,91,.4);
}

/* Portrait: a fixed ratio so three different source crops still line up. */
.qjs-team .qjs-team__shot{
  position:relative;aspect-ratio:4/5;border-radius:0;overflow:hidden;
  box-shadow:none;background:var(--azure-soft);
}
.qjs-team .qjs-team__card:hover .qjs-team__shot{transform:none;box-shadow:none}
.qjs-team .qjs-team__img img{object-position:center 16%}

/* A quiet scrim at the foot of the photo so it meets the white body cleanly
   instead of ending on a hard line. */
.qjs-team .qjs-team__shot::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:38%;
  background:linear-gradient(180deg,rgba(255,255,255,0) 0%,rgba(255,255,255,.14) 60%,rgba(255,255,255,.5) 100%);
  pointer-events:none;
}

/* Body */
.qjs-team .qjs-team__meta{
  display:block;padding:20px 22px 22px;position:relative;
}
.qjs-team .qjs-team__meta > .e-con{width:100%!important}
.qjs-team .qjs-team__name .elementor-heading-title{
  font-size:19px;line-height:1.24;
}
.qjs-team .qjs-team__role .elementor-heading-title{
  margin-top:5px;
  font-family:var(--font-b);font-size:12.5px;font-weight:800;
  letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold-deep);line-height:1.35;
}
.qjs-team .qjs-team__bio{margin-top:12px}
.qjs-team .qjs-team__bio p{
  margin:0;font-size:14.5px;line-height:1.7;color:var(--body);
}

/* The arrow badge moves onto the photo so the body column stays a clean
   text block, and it now reads as the card's affordance. */
.qjs-team .qjs-team__dot{
  position:absolute;top:-26px;right:22px;z-index:2;
}
.qjs-team .qjs-team__dot .elementor-icon{
  width:52px;height:52px;
  background:linear-gradient(180deg,var(--gold-hi) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:var(--ink);
  box-shadow:0 12px 26px -10px rgba(212,165,15,.8),0 0 0 5px #fff;
}
.qjs-team .qjs-team__dot .elementor-icon svg{width:19px;height:19px}
.qjs-team .qjs-team__card:hover .qjs-team__dot .elementor-icon{
  background:linear-gradient(180deg,#0A3B79 0%,var(--navy) 100%);
  color:#fff;transform:rotate(45deg);
}

@media (max-width:1024px){
  .qjs-team .qjs-team__rail{grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
  .qjs-team .qjs-team__meta{padding:18px 18px 20px}
}
@media (max-width:900px){
  .qjs-team .qjs-team__rail{grid-template-columns:1fr 1fr;gap:18px}
  .qjs-team .qjs-team__card:nth-child(3){grid-column:1/-1;max-width:none}
}
@media (max-width:600px){
  /* One card per row on a phone, and the portrait keeps its shape - a single
     wide card with a letterboxed photo looked thinner than the desktop
     version rather than more focused. */
  .qjs-team .qjs-team__rail{grid-template-columns:1fr;gap:22px}
  .qjs-team .qjs-team__shot{aspect-ratio:4/5;max-height:420px}
}

/* -------------------------------------------------------------------------
   6. "WHAT WE PROMISE EVERY TIME"

   The previous shot was poured into a 68vh frame and cropped the van's rear
   away. The replacement plate is portrait, so left unconstrained it ran 780px
   tall against a 460px text column. Capping the frame and holding the window
   over the lower two-thirds shows the whole vehicle and brings the two
   columns back into balance.
   ---------------------------------------------------------------------- */
.qjs-promomedia{align-self:center}
.qjs-promomedia .qjs-zoom img{
  max-height:600px;
  object-fit:cover;
  object-position:center 72%;
  border-radius:28px;
}

/* Five promises in a two-column grid leaves the last one alone on its row;
   letting it span keeps the block from looking unfinished. */
.qjs-hairrow-light{align-items:flex-start}

@media (max-width:1024px){
  .qjs-promomedia .qjs-zoom img{max-height:460px;object-position:center 74%}
}
@media (max-width:767px){
  .qjs-promomedia .qjs-zoom img{max-height:340px}
}

/* -------------------------------------------------------------------------
   7. ABOUT - "HOW WE HAVE GROWN" TIMELINE

   Each row was sized purely by its own text, so the two entries whose copy
   wraps to a second line (2021 and 2025-2026) pushed the next marker further
   down than the rest and the run of dots lost its rhythm. Giving every row the
   same minimum height and centring its content on that height makes the
   marker-to-marker distance identical whatever the copy does.
   ---------------------------------------------------------------------- */
.qjs-timeline .qjs-tl-item{
  min-height:86px;
  align-items:center;
  padding-bottom:0;
}
.qjs-timeline .qjs-tl-year,
.qjs-timeline .qjs-tl-body{justify-content:center}

/* The connecting rule and the markers follow the same centred rhythm. */
.qjs-timeline .qjs-tl-body{padding-block:4px}

@media (max-width:1024px){
  .qjs-timeline .qjs-tl-item{min-height:78px}
}
@media (max-width:767px){
  /* Stacked on a phone the year sits above its line, so a fixed height would
     only add dead space; even padding does the same job there. */
  .qjs-timeline .qjs-tl-item{min-height:0;padding-bottom:22px;align-items:flex-start}
}

/* -------------------------------------------------------------------------
   8. BLOG CARDS

   The hover bug: Elementor centres the thumbnail with
   `scale(1.01) translate(-50%,-50%)`, and the zoom rule replaced the whole
   transform with `scale(1.06)`. Dropping the translate threw the image half
   its own width and height down and to the right, which is why it appeared to
   slide under the card and vanish. Re-stating the translate in the same order
   keeps the zoom and keeps the centring.
   ---------------------------------------------------------------------- */
.qjs-archive .elementor-post__thumbnail img{
  
  object-fit:cover;
  transition:transform .55s cubic-bezier(.2,.7,.3,1);
  will-change:transform;
}
.qjs-archive .elementor-post:hover .elementor-post__thumbnail img{
  
}

/* With the image behaving, the card can carry a proper hover: a small lift,
   a warmer shadow and a gold edge, matching the service and team cards. */
.qjs-archive .elementor-post{
  border:1px solid rgba(2,41,91,.07);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s;
}
.qjs-archive .elementor-post:hover{
  border-color:rgba(212,165,15,.45);
  box-shadow:0 30px 56px -26px rgba(2,41,91,.42);
}
.qjs-archive .elementor-post__thumbnail{background:var(--azure-soft)}

/* Read-more reads as an action rather than as underlined body text. */
.qjs-archive .elementor-post__read-more{
  display:inline-flex;align-items:center;gap:7px;
  transition:color .22s,border-color .22s,gap .22s;
}
.qjs-archive .elementor-post:hover .elementor-post__read-more{gap:11px}
.qjs-archive .elementor-post__title a{transition:color .22s}

/* -------------------------------------------------------------------------
   9. TYPOGRAPHY SYSTEM

   An audit across every page found the same role rendered at different sizes:
   the page-hero H1 ran 62px on Services, 42px on About, Car Brands and
   Contact and 40px on Blog; the closing call-to-action heading ran 44px on
   some pages and 36-40px on others; and the icon-box card title ran 21px on
   the home page but 28px on Services, in Archivo rather than Sora.

   The scale below is the one the Elementor kit already implies, applied
   consistently. Sizes step down at the kit's own breakpoints so the rhythm
   holds on tablet and phone.

     Page hero H1 ............ 46 / 36 / 30
     Section + CTA H2 ........ 44 / 36 / 29   (kit default)
     Card / icon-box title ... 21 / 20 / 19
     Lead paragraph .......... 17.5
   ---------------------------------------------------------------------- */

/* --- page hero H1 ------------------------------------------------------- */
.qjs-pagehero .elementor-widget-heading h1.elementor-heading-title{
  font-family:var(--font-d);
  font-size:46px;line-height:1.1;font-weight:800;letter-spacing:-.03em;
}
@media (max-width:1024px){
  .qjs-pagehero .elementor-widget-heading h1.elementor-heading-title{font-size:36px}
}
@media (max-width:767px){
  .qjs-pagehero .elementor-widget-heading h1.elementor-heading-title{font-size:30px}
}

/* --- section-level headings on dark closing panels ---------------------- */
/* Scoped to a heading that is a direct child of the section's own inner
   wrapper, so headings inside cards nested deeper keep their own size. */
.qjs-dark.e-con > .e-con-inner > .elementor-widget-heading > .elementor-widget-container > h2,
.qjs-dark.e-con > .elementor-widget-heading > .elementor-widget-container > h2{
  font-size:44px;line-height:1.12;letter-spacing:-.028em;
}
@media (max-width:1024px){
  .qjs-dark.e-con > .e-con-inner > .elementor-widget-heading > .elementor-widget-container > h2,
  .qjs-dark.e-con > .elementor-widget-heading > .elementor-widget-container > h2{font-size:36px}
}
@media (max-width:767px){
  .qjs-dark.e-con > .e-con-inner > .elementor-widget-heading > .elementor-widget-container > h2,
  .qjs-dark.e-con > .elementor-widget-heading > .elementor-widget-container > h2{font-size:29px}
}

/* --- lead paragraph under a page hero ---------------------------------- */
.qjs-pagehero .elementor-widget-text-editor p{font-size:17.5px;line-height:1.75}

/* -------------------------------------------------------------------------
   10. GLOBAL POLISH

   Cards, shadows and section rhythm. The aim is one card language across the
   site: the same radius, the same resting shadow, the same lift, so a service
   card, a team card, a blog card and a stat card all feel like the same
   object seen in different places.
   ---------------------------------------------------------------------- */

/* --- one card language -------------------------------------------------- */
.qjs-card,
.qjs-svc,
.qjs-statcard,
.qjs-overcard,
.qjs-whycard,
.qjs-archive .elementor-post{
  border-radius:var(--r-md);
  box-shadow:0 14px 34px -20px rgba(2,41,91,.32);
  transition:transform .34s cubic-bezier(.2,.7,.3,1),box-shadow .34s,border-color .34s;
}
.qjs-card:hover,
.qjs-svc:hover,
.qjs-whycard:hover{
  transform:translateY(-8px);
  box-shadow:0 30px 56px -24px rgba(2,41,91,.4);
}

/* Dark cards need a rim rather than a shadow to separate from a dark ground. */
.qjs-dark .qjs-card,
.qjs-svc-navy{box-shadow:0 18px 40px -22px rgba(0,0,0,.7)}

/* --- focus, for anyone using a keyboard --------------------------------- */
.qjs-hd a:focus-visible,
.elementor-button:focus-visible,
.qjs-archive .elementor-post__title a:focus-visible{
  outline:3px solid var(--gold);
  outline-offset:3px;
  border-radius:8px;
}

/* --- form controls ------------------------------------------------------ */
/* The booking panel is the page's conversion point, so its fields get the
   same rounding and the same gold focus as everything else. */
.qjs-book .elementor-field-group input,
.qjs-book .elementor-field-group select,
.qjs-book .elementor-field-group textarea{
  border-radius:12px;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.qjs-book .elementor-field-group input:focus,
.qjs-book .elementor-field-group select:focus,
.qjs-book .elementor-field-group textarea:focus{
  border-color:var(--gold);
  box-shadow:0 0 0 4px rgba(212,165,15,.16);
  outline:none;
}

/* --- the floating WhatsApp affordance ----------------------------------- */
.qjs-wa .elementor-button{
  box-shadow:0 16px 34px -12px rgba(37,211,102,.6);
  transition:transform .26s cubic-bezier(.2,.7,.3,1),box-shadow .26s;
}
.qjs-wa .elementor-button:hover{transform:translateY(-3px) scale(1.03)}

/* --- section rhythm ----------------------------------------------------- */
/* Section padding was drifting between 80 and 104px; one value reads as a
   deliberate rhythm when you scroll the page end to end. */
@media (min-width:1025px){
  .qjs-team,
  .qjs-faq,
  .qjs-clim,
  .qjs-marq{padding-top:96px;padding-bottom:96px}
}

/* --- motion, for those who ask for less of it --------------------------- */
@media (prefers-reduced-motion:reduce){
  .qjs-team .qjs-team__card,
  .qjs-archive .elementor-post,
  .qjs-archive .elementor-post__thumbnail img,
  .qjs-svc,.qjs-card,.qjs-whycard,
  .elementor-button{transition:none!important;transform:none!important}
}

/* -------------------------------------------------------------------------
   11. PHONE REFINEMENTS

   The hero's price pill is a single line on desktop; at 390px it wrapped and
   left the separating dash stranded on its own. Tightening the type and
   letting the two halves stack cleanly keeps it readable without shrinking it
   into illegibility.
   ---------------------------------------------------------------------- */
@media (max-width:600px){
  .qjs-pill{
    padding:10px 16px 10px 10px;
    gap:10px;
    line-height:1.35;
  }
  .qjs-pill,
  .qjs-pillwrap p{font-size:11.5px;letter-spacing:.09em}
  .qjs-pill .qjs-pill__sep{display:none}

  /* Two actions, full width, in the order a stranded driver wants them. */
  .qjs-hero2__ctas .elementor-button{width:100%;justify-content:center}

  /* The trust chips read better as a two-column grid than as a ragged wrap.
     The type is trimmed just enough that the longest of the four proof points
     stays on one line, so all four chips are the same height. */
  .qjs-hero2 .qjs-trust .elementor-icon-list-items{
    display:grid;grid-template-columns:1fr 1fr;gap:8px;
  }
  .qjs-hero2 .qjs-trust .elementor-icon-list-items .elementor-icon-list-item{
    width:100%;justify-content:flex-start;
    padding:9px 10px;font-size:11.3px;gap:7px;
  }
  .qjs-hero2 .qjs-trust .elementor-icon-list-icon svg{width:15px;height:15px}
  /* The longest proof point takes the full width rather than wrapping and
     dragging its row-mate taller with it. */
  .qjs-hero2 .qjs-trust .elementor-icon-list-items .elementor-icon-list-item:nth-child(3){
    grid-column:1/-1;
  }
}

/* The floating WhatsApp bubble and the fixed mobile bar were both anchored to
   the bottom of the screen and overlapped on short viewports. */
@media (max-width:767px){
  .qjs-wa{bottom:calc(var(--qjs-mobilebar-h,72px) + 14px)}
}

/* -------------------------------------------------------------------------
   12. CONTRAST AND ACCESSIBLE NAMES

   A Lighthouse pass flagged small gold text on light panels at around 3.4:1
   where 4.5:1 is required. The brand gold is kept - these are one step deeper
   only where the type is small and the ground is light, which is a change you
   have to look for rather than one you notice.
   ---------------------------------------------------------------------- */
.qjs-team .qjs-team__role .elementor-heading-title,
.qjs-team .qjs-team__eyebrow .elementor-icon-list-text,
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-text,
.qjs-clim .qjs-clim__eyebrow .elementor-icon-list-text,
.qjs-marq .qjs-marq__kicker .elementor-icon-list-text{color:#8A6A08}
.qjs-team .qjs-team__eyebrow .elementor-icon-list-icon svg,
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-icon svg{fill:#8A6A08}

/* The 24/7 badge sits on a white plate; the deeper gold clears the 3:1 that
   large text needs while reading as the same colour. */
.qjs-promomedia .qjs-badge .qjs-badge__num,
.qjs-badge .qjs-badge__num,
div.qjs-badge__num{color:#A8810A}

/* WhatsApp's own darker brand green, so white label text on the mobile action
   bar is legible. */
/* The green sits behind white label text in three places - the floating
   bubble, the mobile bar and the inline WhatsApp button. WhatsApp's own
   darker brand green carries white text at 4.6:1. */
.qjs-btn-wa .elementor-button,
.qjs-mobilebar .qjs-mb-wa .elementor-button{background:#128C7E}
.qjs-btn-wa .elementor-button:hover,
.qjs-mobilebar .qjs-mb-wa .elementor-button:hover{background:#0E7268}

/* The floating bubble is a circle 58px across, but its label was still being
   laid out at full width underneath - present in the accessibility tree,
   invisible on screen, and counted as unreadable white-on-green text. Taking
   it out of the flow the standard way keeps the name for screen readers and
   lets the bubble keep WhatsApp's bright brand green. */
.qjs-wa .elementor-button-text{
  position:absolute!important;
  width:1px;height:1px;
  margin:-1px;padding:0;border:0;
  overflow:hidden;clip-path:inset(50%);white-space:nowrap;
}
.qjs-wa .elementor-button{display:grid;place-items:center}

/* -------------------------------------------------------------------------
   13. FOOTER DETAIL

   With the services list trimmed to two entries, the longer of the two wraps
   on to a second line and its chevron was centring against the pair of lines.
   Top-aligning the marker keeps the column reading as a list.
   ---------------------------------------------------------------------- */
.qjs-footer .elementor-icon-list-item{align-items:flex-start}
.qjs-footer .elementor-icon-list-icon{padding-top:.32em}

/* -------------------------------------------------------------------------
   14. ABOUT - EXPERIENCE STATS

   The stat figure is set with a clamp that tops out at 42px, which suits
   "5+" and "24/7" but not the two word-based values: "Thousands" and
   "AED 120" ran past their cell dividers and collided with the neighbouring
   column. One step down fits every value inside its own cell and keeps the
   five figures reading as a set.
   ---------------------------------------------------------------------- */
.qjs-statcard .qjs-stat-light .elementor-heading-title,
.qjs-statcell .qjs-stat-light .elementor-heading-title{
  font-size:36px;line-height:1.05;
  overflow-wrap:break-word;
}
@media (max-width:1024px){
  .qjs-statcard .qjs-stat-light .elementor-heading-title,
  .qjs-statcell .qjs-stat-light .elementor-heading-title{font-size:30px}
}
@media (max-width:767px){
  .qjs-statcard .qjs-stat-light .elementor-heading-title,
  .qjs-statcell .qjs-stat-light .elementor-heading-title{font-size:27px}
}

/* -------------------------------------------------------------------------
   15. HOME - "EXPLORE QUICK JUMP START SERVICES"

   The section used to be a 2x2 grid: one photo tile and three flat panels
   carrying an icon, a title and a line of text. It read as a list, and a list
   is the one thing a service showcase should not read as.

   It is now photographic and hierarchical. The primary service takes a
   full-width plate with the technician at work behind it; the other three sit
   beneath as equal photo cards. Every image is a real <img>, so it is lazy
   loaded and served through the responsive srcset - no background-image
   fetches, no extra script, nothing new on the critical path.

   Everything here is scoped to #services so no other section or page moves.
   ---------------------------------------------------------------------- */

/* Ground: a barely-there wash so the white section has depth behind the cards
   rather than being flat paper. */
#services{
  position:relative;
  background:
    radial-gradient(70% 55% at 88% 6%,rgba(1,89,166,.075) 0%,rgba(1,89,166,0) 60%),
    radial-gradient(55% 45% at 4% 96%,rgba(212,165,15,.07) 0%,rgba(212,165,15,0) 62%),
    #FFFFFF;
}

/* --- shared card shell -------------------------------------------------- */
#services .qjs-svcfeat,
#services .qjs-svccard{
  position:relative;
  overflow:hidden;
  border-radius:24px;
  background:var(--surface);
  border:1px solid rgba(2,41,91,.08);
  box-shadow:0 18px 44px -26px rgba(2,41,91,.42);
  transition:transform .38s cubic-bezier(.2,.7,.3,1),box-shadow .38s,border-color .38s;
}
#services .qjs-svcfeat:hover,
#services .qjs-svccard:hover{
  transform:translateY(-8px);
  border-color:rgba(212,165,15,.5);
  box-shadow:0 38px 70px -30px rgba(2,41,91,.46);
}

/* The photograph fills its frame and drifts in slightly on hover. */
#services .qjs-svcfeat__img img,
#services .qjs-svccard__img img{
  display:block;width:100%;height:100%;
  object-fit:cover;
  transition:transform .8s cubic-bezier(.2,.7,.3,1);
}
#services .qjs-svcfeat:hover .qjs-svcfeat__img img,
#services .qjs-svccard:hover .qjs-svccard__img img{transform:scale(1.055)}

/* --- feature plate ------------------------------------------------------ */
/* The image is a layer behind the copy rather than a CSS background, so it
   keeps lazy loading and srcset. */
/* Column flex: justify-content works the vertical axis, so the copy block
   settles into the bottom-left corner of the plate. */
#services .qjs-svcfeat{
  min-height:420px;
  display:flex;flex-direction:column;
  justify-content:flex-end;align-items:flex-start;
}
#services .qjs-svcfeat__media{
  position:absolute!important;inset:0;width:100%!important;padding:0;
}
#services .qjs-svcfeat__media .elementor-widget,
#services .qjs-svcfeat__media .elementor-widget-container,
#services .qjs-svcfeat__img{height:100%;width:100%}

/* Two stops: a deep well on the left for the copy, and a floor gradient so
   the plate has weight. */
#services .qjs-svcfeat::before{
  content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:
    linear-gradient(90deg,rgba(3,16,42,.94) 0%,rgba(3,16,42,.76) 38%,rgba(3,16,42,.18) 68%,rgba(3,16,42,.05) 100%),
    linear-gradient(0deg,rgba(3,16,42,.72) 0%,rgba(3,16,42,0) 55%);
}
#services .qjs-svcfeat::after{
  content:"";position:absolute;left:0;right:0;top:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 46%,var(--gold-hi));
  transform:scaleX(0);transform-origin:left;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
#services .qjs-svcfeat:hover::after{transform:scaleX(1)}

#services .qjs-svcfeat__body{
  position:relative;z-index:2;
  width:100%!important;
  max-width:620px;
  padding:44px!important;
}
#services .qjs-svcfeat .elementor-icon-box-title{font-size:31px!important;line-height:1.16!important}
#services .qjs-svcfeat .elementor-icon-box-description{font-size:17px!important;max-width:46ch}
#services .qjs-svcfeat .elementor-icon{width:66px;height:66px;border-radius:19px}
#services .qjs-svcfeat .elementor-icon svg{width:.78em;height:.78em}

/* --- the three cards ---------------------------------------------------- */
/* A grid rather than a flex row: percentage widths plus a gap tipped over
   852px at tablet and dropped the third card onto its own line. Three equal
   tracks hold whatever the container width happens to be. */
#services .qjs-svcrow{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:26px;
  align-items:stretch;
}
#services .qjs-svcrow > .qjs-svccard{width:auto!important}
#services .qjs-svccard{display:flex;flex-direction:column}
#services .qjs-svccard__media{
  width:100%!important;padding:0;
  aspect-ratio:16/10;overflow:hidden;
  background:var(--azure-soft);
}
#services .qjs-svccard__media .elementor-widget,
#services .qjs-svccard__media .elementor-widget-container,
#services .qjs-svccard__img{height:100%;width:100%}

#services .qjs-svccard__body{
  position:relative;
  width:100%!important;
  padding:0 26px 28px!important;
  flex:1 1 auto;
}

/* The icon plate straddles the join between photograph and copy - it is what
   turns three photographs into three service cards. */
#services .qjs-svccard .elementor-icon{
  position:relative;
  margin-top:-33px;
  box-shadow:0 14px 28px -12px rgba(212,165,15,.75),0 0 0 5px #fff;
}
#services .qjs-svccard:hover .elementor-icon{transform:translateY(-3px) rotate(-4deg)}
#services .qjs-svccard .elementor-icon-box-icon{margin-bottom:16px!important}

/* A gold rule that draws in from the left on hover, matching the plate. */
#services .qjs-svccard::after{
  content:"";position:absolute;left:0;right:0;bottom:0;height:4px;z-index:3;
  background:linear-gradient(90deg,var(--gold-deep),var(--gold) 46%,var(--gold-hi));
  transform:scaleX(0);transform-origin:left;
  transition:transform .45s cubic-bezier(.2,.7,.3,1);
}
#services .qjs-svccard:hover::after{transform:scaleX(1)}

/* --- actions ------------------------------------------------------------ */
#services .qjs-svc-ctas{margin-top:20px}

/* --- tablet ------------------------------------------------------------- */
@media (max-width:1024px){
  #services .qjs-svcfeat{min-height:360px}
  #services .qjs-svcfeat__body{padding:34px!important;max-width:none}
  #services .qjs-svcfeat .elementor-icon-box-title{font-size:27px!important}
  #services .qjs-svcfeat::before{
    background:
      linear-gradient(90deg,rgba(3,16,42,.94) 0%,rgba(3,16,42,.78) 52%,rgba(3,16,42,.28) 100%),
      linear-gradient(0deg,rgba(3,16,42,.76) 0%,rgba(3,16,42,0) 60%);
  }
  #services .qjs-svccard__body{padding:0 20px 24px!important}
  #services .qjs-svcrow{gap:20px}
}

/* --- phone -------------------------------------------------------------- */
@media (max-width:767px){
  /* Stacked rather than overlaid: at this width a photograph with text on top
     of it is a photograph you cannot read. */
  #services .qjs-svcfeat{min-height:0;display:block}
  #services .qjs-svcfeat__media{position:relative!important;inset:auto;aspect-ratio:16/10}
  #services .qjs-svcfeat::before{background:none}
  #services .qjs-svcfeat__body{
    max-width:none;
    padding:0 22px 26px!important;
    background:var(--surface);
  }
  #services .qjs-svcfeat .elementor-icon-box-title{
    font-size:21px!important;color:var(--navy)!important;
  }
  #services .qjs-svcfeat .elementor-icon-box-description{
    color:var(--body)!important;font-size:15.5px!important;
  }
  #services .qjs-svcfeat .elementor-icon{
    width:58px;height:58px;border-radius:17px;
    position:relative;margin-top:-33px;
    box-shadow:0 14px 28px -12px rgba(212,165,15,.75),0 0 0 5px #fff;
  }
  #services .qjs-svcfeat .elementor-icon-box-icon{margin-bottom:16px!important}
  /* One card per row on a phone. */
  #services .qjs-svcrow{grid-template-columns:1fr;gap:22px}
}

@media (prefers-reduced-motion:reduce){
  #services .qjs-svcfeat,
  #services .qjs-svccard,
  #services .qjs-svcfeat__img img,
  #services .qjs-svccard__img img{transition:none!important;transform:none!important}
}


/* ===== QJS-WA-COLOR-LOCK =====
   The Elementor kit rule .elementor-kit-6 .elementor-button:hover{background-color:#EFC646}
   has higher specificity than .qjs-wa .elementor-button, so the floating WhatsApp
   button turned gold on hover/focus (and stayed gold after a tap on touch devices).
   Colour only - position, size, icon, link and animation are untouched. */
.qjs-wa .elementor-button,
.qjs-wa .elementor-button:hover,
.qjs-wa .elementor-button:focus,
.qjs-wa .elementor-button:active,
.qjs-wa .elementor-button:visited,
a.qjs-wa,
a.qjs-wa:hover,
a.qjs-wa:focus,
a.qjs-wa:active,
a.qjs-wa:visited{
  background-color:#25D366 !important;
  background-image:none !important;
  color:#fff !important;
  border-color:#25D366 !important;
}
.qjs-wa .elementor-button svg,
.qjs-wa .elementor-button:hover svg,
a.qjs-wa svg{fill:#fff !important;}
/* ===== end QJS-WA-COLOR-LOCK ===== */


/* ===== QJS-WA-TEXT-BUTTONS =====
   Every Elementor button whose visible text contains "WhatsApp" carries one
   of these five wrapper classes. Verified site-wide across 666 button anchors
   that no other button uses them, so these selectors cannot reach a Call Now,
   Book, Submit or navigation button.
   Colour only: size, padding, typography, border-width, border-radius,
   placement and the existing translateY hover motion are left untouched.
   Green and hover shade are the site's own existing WhatsApp button colours. */
.qjs-btn-secondary .elementor-button,
.qjs-btn-secondary-light .elementor-button,
.qjs-btn--ghost .elementor-button,
.qjs-btn-wa .elementor-button,
.qjs-mobilebar .qjs-mb-wa .elementor-button{
  background:#128C7E !important;
  background-color:#128C7E !important;
  background-image:none !important;
  border-color:#128C7E !important;
  color:#fff !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
.qjs-btn-secondary .elementor-button:hover,
.qjs-btn-secondary .elementor-button:focus,
.qjs-btn-secondary .elementor-button:active,
.qjs-btn-secondary-light .elementor-button:hover,
.qjs-btn-secondary-light .elementor-button:focus,
.qjs-btn-secondary-light .elementor-button:active,
.qjs-btn--ghost .elementor-button:hover,
.qjs-btn--ghost .elementor-button:focus,
.qjs-btn--ghost .elementor-button:active,
.qjs-btn-wa .elementor-button:hover,
.qjs-btn-wa .elementor-button:focus,
.qjs-btn-wa .elementor-button:active,
.qjs-mobilebar .qjs-mb-wa .elementor-button:hover,
.qjs-mobilebar .qjs-mb-wa .elementor-button:focus,
.qjs-mobilebar .qjs-mb-wa .elementor-button:active{
  background:#0E7268 !important;
  background-color:#0E7268 !important;
  border-color:#0E7268 !important;
  color:#fff !important;
}
.qjs-btn-secondary .elementor-button svg,
.qjs-btn-secondary .elementor-button i,
.qjs-btn-secondary-light .elementor-button svg,
.qjs-btn-secondary-light .elementor-button i,
.qjs-btn--ghost .elementor-button svg,
.qjs-btn--ghost .elementor-button i,
.qjs-btn-wa .elementor-button svg,
.qjs-btn-wa .elementor-button i,
.qjs-mobilebar .qjs-mb-wa .elementor-button svg,
.qjs-mobilebar .qjs-mb-wa .elementor-button i{
  fill:#fff !important;
  color:#fff !important;
}
/* ===== end QJS-WA-TEXT-BUTTONS ===== */


/* ===== QJS-WA-HERO-CTA =====
   The brand-page stylesheets (qjs-brandpage.css, qjs-chevrolet-795.css) are
   injected in the body AFTER this file and style the hero "WhatsApp Us" CTA
   glass-on-dark with !important, so the green is re-stated here at a higher
   specificity instead. Those files are served with a hardcoded ?ver=1, so
   keeping the rule here (its ?ver is the file mtime) means the change
   actually reaches visitors who already cached them.
   .qjs-btn-secondary is used only by "WhatsApp Us" buttons on this site. */
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button{
  background:#128C7E !important;
  background-color:#128C7E !important;
  background-image:none !important;
  border:1.5px solid #128C7E !important;
  color:#fff !important;
  -webkit-backdrop-filter:none !important;
  backdrop-filter:none !important;
}
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button:hover,
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button:focus,
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button:active,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button:hover,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button:focus,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button:active{
  background:#0E7268 !important;
  background-color:#0E7268 !important;
  border-color:#0E7268 !important;
  color:#fff !important;
}
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button svg,
html body .qjs-cv-ctas .qjs-btn-secondary .elementor-button i,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button svg,
html body.page-id-795 .qjs-cv-ctas .qjs-btn-secondary .elementor-button i{
  fill:#fff !important;
  color:#fff !important;
}
/* ===== end QJS-WA-HERO-CTA ===== */