/* =========================================================================
   Quick Jump Start - Elementor integration layer.

   Loaded last, after style.css, qjs-2026.css and qjs-sections.css.

   Most of what follows exists for one reason: Elementor's global kit emits
   rules of the form `.elementor-kit-6 h1 {...}`, `.elementor-kit-6 a {...}`,
   `.elementor-kit-6 button {...}`. That is one class plus one type selector,
   which outranks a plain component class like `.qjs-faq__q`, and the kit
   stylesheet is enqueued after the theme's. So any component style setting a
   property the kit also sets has to be re-asserted here with a descendant
   selector (two classes), or with !important where Hello Elementor hard-codes
   the property on the element itself.

   Rule of thumb: put a declaration in its own section stylesheet unless the
   kit fights it, then re-assert it here.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Sticky header containment

   An ancestor with a transform, filter or clip creates a containing block and
   silently breaks sticky positioning. Elementor adds none by default, but a
   stray animation class can.
   ---------------------------------------------------------------------- */
.elementor-location-header{overflow:visible}
.elementor-location-header > .elementor,
.elementor-location-header > .elementor > .e-con{transform:none;filter:none}

/* -------------------------------------------------------------------------
   2. Header corrections
   ---------------------------------------------------------------------- */
/* Hello Elementor ships `img{height:auto}` and the kit reasserts it, which
   stretched the logo to the full width of its srcset candidate. The header
   sizes the logo by height and lets the width follow. */
.qjs-hd .qjs-hd__logoimg{
  height:44px!important;width:auto!important;max-width:none!important;
  object-fit:contain;
}
.qjs-hd.is-stuck .qjs-hd__logoimg{height:38px!important}
@media (max-width:600px){
  .qjs-hd .qjs-hd__logoimg{height:34px!important}
  .qjs-hd.is-stuck .qjs-hd__logoimg{height:30px!important}
}

/* Menu labels are two words wide ("Car Brands", "About Us"); allowing them to
   wrap doubled the height of the bar. */
.qjs-hd .qjs-nav__list a{white-space:nowrap}
.qjs-hd .qjs-nav__list{flex-wrap:nowrap}

/* The utility bar sits on near-black; the muted body tone was unreadable. */
.qjs-hd .qjs-hd__top .qjs-hd__tl{color:#C3D3E8}
.qjs-hd .qjs-hd__top a.qjs-hd__tl:hover{color:#fff}

/* Nothing in the bar may push past the container edge. */
.qjs-hd .qjs-hd__bar .qjs-hd__wrap{flex-wrap:nowrap}
.qjs-hd .qjs-hd__act{min-width:0}

/* -------------------------------------------------------------------------
   3. Button colours

   The kit paints every <a> navy. On the navy hero and inside the navy drawer
   that made the outlined WhatsApp button invisible - navy on navy.
   ---------------------------------------------------------------------- */
.qjs-ctas .qjs-btn--gold,
.qjs-book .qjs-btn--gold,
.qjs-team .qjs-btn--gold{color:var(--ink)}
.qjs-ctas.is-on-dark .qjs-btn--ghost,
.qjs-ctas.is-on-dark .qjs-btn--ghost:hover,
.qjs-drawer .qjs-btn--ghost,
.qjs-drawer .qjs-btn--ghost:hover{color:#fff}
.qjs-ctas:not(.is-on-dark) .qjs-btn--ghost{color:var(--navy)}
.qjs-hd .qjs-hd__wa{color:#fff}
.qjs-book .qjs-book__alt a{color:var(--wa)}

/* The drawer is navy, so its secondary button needs the on-dark outline
   rather than the light-ground one the shared markup defaults to. */
.qjs-drawer .qjs-btn--ghost{border-color:rgba(255,255,255,.34)}
.qjs-drawer .qjs-btn--ghost:hover{background:rgba(255,255,255,.10);border-color:#fff}

/* -------------------------------------------------------------------------
   4. Hero corrections

   The kit paints every h1/h2 navy, which on the navy hero panel rendered the
   headline invisible. The gold gradient on "in 15 Minutes" survives untouched
   because it is painted with -webkit-text-fill-color, which the kit never sets.
   ---------------------------------------------------------------------- */
.qjs-hero2 .qjs-hero2__h1{color:#fff;margin:18px 0 0}
.qjs-hero2 .qjs-hero2__sub{color:#BFD1E8}
.qjs-hero2 .qjs-trust li{color:#D7E3F3}
.qjs-book .qjs-book__t{color:var(--navy);margin:0}
.qjs-book .qjs-fld label{color:var(--navy)}

/* Compact the panel: the brief called for a hero that does not eat the fold. */
.qjs-hero2{padding:44px 0 48px}
.qjs-hero2 .qjs-hero2__h1{font-size:clamp(1.95rem,1.1rem + 2.25vw,2.85rem)}
.qjs-hero2 .qjs-hero2__sub{font-size:16px;margin-top:14px}
.qjs-hero2 .qjs-hero2__ctas{margin-top:22px}
.qjs-hero2 .qjs-trust{margin-top:22px;gap:8px}
.qjs-hero2 .qjs-trust li{padding:8px 13px;font-size:12.2px}
@media (max-width:1024px){.qjs-hero2{padding:36px 0 44px}}

/* -------------------------------------------------------------------------
   5. Mobile contact affordances

   Below 767px the fixed bottom bar already offers Call and WhatsApp, so the
   floating bubble was a third copy of the same action - and it sat on top of
   the content it was meant to support.
   ---------------------------------------------------------------------- */
@media (max-width:767px){
  .qjs-wa{display:none}
  /* Clear the fixed bar so it never covers the end of the page. */
  body{padding-bottom:74px}
}

/* -------------------------------------------------------------------------
   6. Marquee corrections
   ---------------------------------------------------------------------- */
.qjs-marq .qjs-marq__t{color:var(--navy)}
.qjs-marq .qjs-marq__sub{color:var(--body)}
.qjs-marq .qjs-marq__foot a{color:var(--azure)}
.qjs-marq .qjs-marq__foot a:hover{color:var(--navy)}
/* Badges are sized by the tile, not by Hello Elementor's `height:auto`. */
.qjs-marq .qjs-marq__logo{height:auto!important;max-height:44px!important;width:auto!important}
@media (max-width:600px){
  .qjs-marq .qjs-marq__logo{max-height:36px!important}
}

/* -------------------------------------------------------------------------
   7. Team corrections
   ---------------------------------------------------------------------- */
.qjs-team .qjs-team__t{color:var(--navy)}
.qjs-team .qjs-team__sub{color:var(--body)}
.qjs-team .qjs-team__name{color:var(--navy)}
.qjs-team .qjs-team__role{color:var(--body)}
/* The portrait fills its 3:4 frame; the kit's height:auto would letterbox it. */
.qjs-team .qjs-team__img{height:100%!important;width:100%!important;max-width:none!important}

/* -------------------------------------------------------------------------
   8. Service-area CTA corrections
   ---------------------------------------------------------------------- */
.qjs-areacta .qjs-areacta__t{color:#fff}

/* -------------------------------------------------------------------------
   9. FAQ corrections

   The kit gives every <button> the accent fill, which turned all five
   accordion rows solid gold. The row itself carries the fill in this design;
   the button is only the hit area.
   ---------------------------------------------------------------------- */
.qjs-faq .qjs-faq__q,
.qjs-faq .qjs-faq__q:hover,
.qjs-faq .qjs-faq__q:focus{
  background:transparent;border:0;box-shadow:none;
  color:var(--navy);
}
.qjs-faq .qjs-faq__item.is-open .qjs-faq__q{color:#fff}
.qjs-faq .qjs-faq__ico{color:var(--navy)}
.qjs-faq .qjs-faq__item.is-open .qjs-faq__ico{color:var(--ink)}

.qjs-faq .qjs-faq__t{color:var(--navy)}
.qjs-faq .qjs-faq__a > p{color:#BDD0E8}
/* The panel photo fills its 4:5 frame rather than being letterboxed. */
.qjs-faq .qjs-faq__img{height:100%!important;width:100%!important;max-width:none!important}

/* Hello Elementor italicises and centres <figcaption>; this one is a card. */
.qjs-faq .qjs-faq__card,
.qjs-faq .qjs-faq__card *{font-style:normal;text-align:left}
.qjs-faq .qjs-faq__card-s{display:block;margin:5px 0 12px;color:#B9CCE4;font-size:13px;line-height:1.55}
.qjs-faq .qjs-faq__card-links{display:flex;flex-wrap:wrap;gap:8px}
.qjs-faq .qjs-faq__card-links a:first-child{color:var(--ink)}
.qjs-faq .qjs-faq__card-links a:last-child{color:#fff}

/* -------------------------------------------------------------------------
   10. Section bridges

   qjs-sections.css and qjs-climate.css describe the page sections against the
   BEM markup the reference renders from PHP. This build puts those same class
   names on Elementor containers and widgets, so the real element is usually a
   level or two inside. These rules re-point the layout declarations at
   Elementor's DOM; the values are the reference's.

   Elementor containers also declare display and gap through --display and
   --gap on .e-con, which is a single class and so ties with a bare component
   class. Every override below is scoped by its section to win that tie.
   ---------------------------------------------------------------------- */

/* --- Service-area closing CTA ------------------------------------------ */
.qjs-areacta .qjs-areacta__t p{margin:0}
.qjs-areacta .qjs-areacta__ctas{width:100%}
.qjs-areacta .qjs-areacta__ctas .elementor-widget{width:auto;flex:0 0 auto}
.qjs-areacta .qjs-areacta__ctas .qjs-btn .elementor-button{padding:15px 28px}
@media (max-width:600px){
  .qjs-areacta .qjs-areacta__ctas .elementor-widget{flex:1 1 100%}
  .qjs-areacta .qjs-areacta__ctas .qjs-btn .elementor-button{width:100%}
}

/* --- Team rail --------------------------------------------------------- */
.qjs-team .qjs-team__wrap{
  display:grid;grid-template-columns:minmax(0,.78fr) minmax(0,2fr);
  gap:48px;align-items:center;
}
.qjs-team .qjs-team__rail{
  display:grid;grid-template-columns:repeat(3,minmax(0,1fr));
  gap:22px;align-items:start;
}
.qjs-team .qjs-team__card{margin:0;width:auto}
.qjs-team .qjs-team__card:nth-child(2){margin-top:46px}

.qjs-team .qjs-team__shot{display:block;padding:0}
.qjs-team .qjs-team__shot .elementor-widget-container,
.qjs-team .qjs-team__shot .elementor-widget{height:100%;width:100%}
.qjs-team .qjs-team__img img{
  width:100%;height:100%;object-fit:cover;object-position:center 22%;display:block;
  transition:transform .5s cubic-bezier(.2,.7,.3,1);
}
.qjs-team .qjs-team__card:hover .qjs-team__img img{transform:scale(1.045)}

.qjs-team .qjs-team__meta{width:auto}
.qjs-team .qjs-team__name .elementor-heading-title{
  font-family:var(--font-d);font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;color:var(--navy);line-height:1.25;margin:0;
}
.qjs-team .qjs-team__role .elementor-heading-title{
  margin:2px 0 0;font-family:var(--font-b);font-size:13px;font-weight:400;
  color:var(--body);letter-spacing:0;line-height:1.4;
}
.qjs-team .qjs-team__dot .elementor-icon{
  display:grid;place-items:center;width:34px;height:34px;border-radius:50%;
  background:var(--navy);color:#fff;font-size:15px;
  transition:background .28s,transform .28s,color .28s;
}
.qjs-team .qjs-team__dot .elementor-icon svg{width:15px;height:15px;fill:currentColor}
.qjs-team .qjs-team__card:hover .qjs-team__dot .elementor-icon{
  background:var(--gold);color:var(--ink);transform:rotate(45deg);
}

.qjs-team .qjs-team__intro{width:auto}
.qjs-team .qjs-team__eyebrow .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.qjs-team .qjs-team__eyebrow .elementor-icon-list-item{
  margin:0;padding:0;display:inline-flex;align-items:center;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.qjs-team .qjs-team__eyebrow .elementor-icon-list-text{color:var(--gold-deep);padding:0}
.qjs-team .qjs-team__eyebrow .elementor-icon-list-icon svg{width:16px;height:16px;fill:var(--gold-deep)}
.qjs-team .qjs-team__t .elementor-heading-title{
  font-family:var(--font-d);
  font-size:clamp(1.6rem,1.05rem + 1.6vw,2.35rem);
  font-weight:800;line-height:1.12;letter-spacing:-.03em;color:var(--navy);margin:0;
}
.qjs-team .qjs-team__sub p{margin:0;font-size:15px;line-height:1.7;color:var(--body)}
.qjs-team .qjs-team__cta .elementor-button{padding:14px 24px}

@media (max-width:1024px){
  .qjs-team .qjs-team__wrap{grid-template-columns:1fr;gap:34px}
  .qjs-team .qjs-team__card:nth-child(2){margin-top:0}
}
@media (max-width:700px){
  .qjs-team .qjs-team__rail{grid-template-columns:1fr 1fr;gap:16px}
  .qjs-team .qjs-team__card:nth-child(3){grid-column:1/-1;max-width:60%}
}
@media (max-width:460px){
  .qjs-team .qjs-team__rail{grid-template-columns:1fr}
  .qjs-team .qjs-team__card:nth-child(3){max-width:none}
}

/* --- Section bridge corrections ---------------------------------------- */

/* qjs-sections.css paints the highlighted words with a gradient behind
   background-clip:text. That declaration is a `background` shorthand carrying
   var() colours, and it loses to a later equal-specificity rule, leaving the
   element with background-image:none - and because -webkit-text-fill-color is
   still transparent, the words disappear entirely. Re-asserting just the
   image, one class deeper, restores the gold without touching the clip. */
.qjs-team .qjs-team__t .qjs-team__hl{
  background-image:linear-gradient(100deg,var(--gold-deep),var(--gold) 55%,var(--gold-hi));
}

/* Elementor gives every widget its own margin, which flattened the 18px the
   reference puts under the closing line. */
.qjs-areacta .qjs-areacta__t{margin-bottom:18px;max-width:44ch}

/* On the reference the team heading is a bare <h2>, so the Elementor kit's
   heading size wins over the clamp in qjs-sections.css - it renders 44px on
   desktop and 36px from tablet down, not the 37.6px the clamp would cap at.
   Here the class sits on the widget wrapper and the bridge rule out-ranks the
   kit, so the kit's measured sizes are restored explicitly. */
.qjs-team .qjs-team__t .elementor-heading-title{font-size:44px}
@media (max-width:1024px){
  .qjs-team .qjs-team__t .elementor-heading-title{font-size:36px}
}

/* -------------------------------------------------------------------------
   11. Hero and booking panel bridges

   qjs-2026.css sections 2 and 3 describe the hero against PHP markup. Here the
   class names sit on Elementor containers and widgets, and the booking form is
   an Elementor Pro Form widget rather than a hand-written <form>, so its fields
   need the reference's .qjs-fld treatment re-pointed at Elementor's markup.
   ---------------------------------------------------------------------- */

.qjs-hero2 .qjs-hero2__wrap{
  display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr);
  gap:52px;align-items:center;
}
.qjs-hero2 .qjs-hero2__copy,.qjs-hero2 .qjs-book{width:auto}

/* The pill markup lives inside a Text Editor, so the wrapper must not add a
   paragraph's margins around it. */
.qjs-hero2 .qjs-pillwrap p{margin:0}

/* The kit paints every h1 navy at its own size; the hero headline is white and
   sized by the reference. */
.qjs-hero2 .qjs-hero2__h1{margin:18px 0 0}
.qjs-hero2 .qjs-hero2__h1 .elementor-heading-title{
  font-family:var(--font-d);
  font-size:clamp(1.95rem,1.1rem + 2.25vw,2.85rem);
  font-weight:800;line-height:1.05;letter-spacing:-.03em;
  color:#fff;margin:0;text-wrap:balance;
}
.qjs-hero2 .qjs-hero2__sub{margin:14px 0 0;max-width:52ch}
.qjs-hero2 .qjs-hero2__sub p{margin:0;font-size:16px;line-height:1.72;color:#BFD1E8}

.qjs-hero2 .qjs-hero2__ctas{margin-top:22px;width:100%}
.qjs-hero2 .qjs-hero2__ctas .elementor-widget{width:auto;flex:0 0 auto}
.qjs-hero2 .qjs-hero2__ctas .qjs-btn .elementor-button{padding:15px 26px;font-size:15.5px}

/* --- trust strip ------------------------------------------------------- */
.qjs-hero2 .qjs-trust{margin-top:22px;width:100%}
.qjs-hero2 .qjs-trust .elementor-icon-list-items{
  display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none;
}
.qjs-hero2 .qjs-trust .elementor-icon-list-item{
  display:inline-flex;align-items:center;margin:0;
  padding:8px 13px;border-radius:12px;
  background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.11);
  font-size:12.2px;font-weight:700;letter-spacing:.01em;
}
.qjs-hero2 .qjs-trust .elementor-icon-list-text{color:#D7E3F3;padding:0}
.qjs-hero2 .qjs-trust .elementor-icon-list-icon svg{width:16px;height:16px;fill:var(--gold-hi)}

/* --- booking panel ----------------------------------------------------- */
.qjs-book .qjs-book__hd{width:100%}
.qjs-book .qjs-book__t .elementor-heading-title{
  font-family:var(--font-d);font-size:20px;font-weight:800;letter-spacing:-.02em;
  color:var(--navy);margin:0;line-height:1.2;
}
.qjs-book .qjs-book__s p{margin:5px 0 0;font-size:13px;color:var(--body);line-height:1.5}
.qjs-book .qjs-book__etawrap{flex:none;width:auto}
.qjs-book .qjs-book__etawrap p{margin:0}
.qjs-book .qjs-book__eta{white-space:nowrap}

/* Elementor Pro Form dressed as the reference's .qjs-fld grid. */
.qjs-book .qjs-book__form{width:100%}
.qjs-book .elementor-form .elementor-field-group{margin-bottom:0}
.qjs-book .elementor-form .elementor-field-group>label.elementor-field-label{
  font-family:var(--font-b);
  font-size:11.5px;font-weight:800;letter-spacing:.075em;text-transform:uppercase;
  color:var(--navy);margin-bottom:6px;padding:0;
}
.qjs-book .elementor-form .elementor-mark-required{color:#C0392B}
.qjs-book .elementor-form .elementor-field-textual{
  width:100%;padding:12px 14px!important;
  font-family:var(--font-b)!important;font-size:14.5px!important;color:var(--ink)!important;
  background:var(--off)!important;border:1.5px solid var(--line)!important;border-radius:12px!important;
  line-height:1.4;
  transition:border-color .2s,box-shadow .2s,background .2s;
}
.qjs-book .elementor-form select.elementor-field-textual{
  appearance:none;-webkit-appearance:none;cursor:pointer;padding-right:38px!important;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%2302295B'%3E%3Cpath d='m7 10 5 5 5-5z'/%3E%3C/svg%3E")!important;
  background-repeat:no-repeat;background-position:right 12px center;background-size:18px;
}
.qjs-book .elementor-form .elementor-field-textual:focus{
  outline:none;background:#fff!important;border-color:var(--gold)!important;
  box-shadow:0 0 0 4px rgba(212,165,15,.16)!important;
}
.qjs-book .elementor-form .elementor-field-textual::placeholder{color:#93A6BF!important;opacity:1}

.qjs-book .elementor-form .elementor-field-type-submit{margin-top:16px}
.qjs-book .elementor-form .elementor-field-type-submit button{
  width:100%;padding:15px 22px;font-size:15.5px;
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-b);font-weight:800;letter-spacing:.01em;line-height:1;
  border:2px solid transparent;border-radius:999px;
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:var(--ink);box-shadow:var(--sh-gold);
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s;
}
.qjs-book .elementor-form .elementor-field-type-submit button:hover{
  transform:translateY(-2px);box-shadow:0 18px 38px rgba(212,165,15,.42);
}
.qjs-book .elementor-form .elementor-field-type-submit button svg{width:1.05em;height:1.05em;fill:currentColor}

.qjs-book .qjs-book__alt p{
  display:flex;align-items:center;justify-content:center;gap:8px;
  margin:14px 0 0;font-size:13px;color:var(--body);
}
.qjs-book .qjs-book__alt a{
  color:var(--wa);font-weight:800;text-decoration:none;
  display:inline-flex;align-items:center;gap:5px;
}
.qjs-book .qjs-book__alt a:hover{text-decoration:underline}
.qjs-book .qjs-book__fine p{margin:10px 0 0;font-size:11.5px;color:#8496AF;text-align:center;line-height:1.5}

@media (max-width:1024px){
  .qjs-hero2 .qjs-hero2__wrap{grid-template-columns:1fr;gap:36px}
  .qjs-hero2 .qjs-hero2__sub{max-width:60ch}
  .qjs-hero2 .qjs-book{max-width:560px;width:100%}
}
@media (max-width:600px){
  .qjs-hero2 .qjs-hero2__ctas .elementor-widget{flex:1 1 100%}
  .qjs-hero2 .qjs-hero2__ctas .qjs-btn .elementor-button{width:100%}
  .qjs-hero2 .qjs-trust .elementor-icon-list-item{font-size:12px;padding:8px 12px}
}

/* -------------------------------------------------------------------------
   12. Floating affordances and hero corrections
   ---------------------------------------------------------------------- */

/* The select arrow is a background image; Elementor's own field rule resets
   repeat/position/size, so those need the same weight as the image itself or
   the chevron tiles across the control. */
.qjs-book .elementor-form select.elementor-field-textual{
  background-repeat:no-repeat!important;
  background-position:right 12px center!important;
  background-size:18px!important;
}

/* On the reference the panel title is a bare <h2>, so the kit's heading size
   wins over the 20px in qjs-2026.css - it renders 44px, 36px from tablet down. */
.qjs-book .qjs-book__t .elementor-heading-title{font-size:44px;line-height:1.12}
@media (max-width:1024px){
  .qjs-book .qjs-book__t .elementor-heading-title{font-size:36px}
}

/* --- floating WhatsApp bubble ------------------------------------------ */
/* style.css paints .qjs-wa as the anchor itself; here it is the button widget
   wrapper, so the wrapper becomes the fixed circle and the <a> fills it. */
.elementor-widget.qjs-wa{
  position:fixed;left:22px;bottom:22px;z-index:9990;
  width:58px;height:58px;padding:0;margin:0;background:none;box-shadow:none;
}
.qjs-wa .elementor-button{
  position:relative;display:grid;place-items:center;
  width:58px;height:58px;padding:0;border:0;border-radius:50%;
  background:var(--wa);color:#fff;
  box-shadow:0 12px 30px rgba(7,22,40,.34);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s ease;
}
.qjs-wa .elementor-button:hover{transform:scale(1.08);box-shadow:0 18px 40px rgba(7,22,40,.42)}
.qjs-wa .elementor-button-content-wrapper{display:block}
.qjs-wa .elementor-button-icon svg{width:31px;height:31px;fill:#fff;display:block}
.qjs-wa .elementor-button-text{
  position:absolute;left:72px;top:50%;transform:translateY(-50%) translateX(-8px);
  white-space:nowrap;
  background:var(--ink);color:#fff;
  font-family:var(--font-b);font-size:13.5px;font-weight:700;
  padding:10px 15px;border-radius:var(--r-sm);
  opacity:0;pointer-events:none;
  transition:opacity .28s ease,transform .28s ease;
}
.qjs-wa .elementor-button:hover .elementor-button-text{
  opacity:1;transform:translateY(-50%) translateX(0);
}

/* --- mobile action bar -------------------------------------------------- */
.qjs-mobilebar{display:none}
@media (max-width:767px){
  .qjs-mobilebar{
    display:grid;grid-template-columns:1fr 1fr;gap:10px;
    position:fixed;left:0;right:0;bottom:0;z-index:9989;
    padding:10px 12px calc(10px + env(safe-area-inset-bottom));
    background:rgba(7,22,40,.97);backdrop-filter:blur(10px);
    border-top:1px solid var(--line-dark);
  }
  .qjs-mobilebar .elementor-widget{width:auto}
  .qjs-mobilebar .elementor-button{
    display:flex;align-items:center;justify-content:center;gap:9px;
    width:100%;min-height:50px;padding:14px 10px;
    font-family:var(--font-b);font-weight:800;font-size:15px;
    border:0;border-radius:var(--r-sm);
  }
  .qjs-mobilebar .qjs-mb-call .elementor-button{background:var(--amber);color:var(--navy)}
  .qjs-mobilebar .qjs-mb-wa .elementor-button{background:var(--wa);color:#fff}
  .qjs-mobilebar .elementor-button-icon svg{width:18px;height:18px;fill:currentColor}

  /* The bubble sits above the bar, and its label has no room on a phone. */
  .elementor-widget.qjs-wa{bottom:86px;left:16px;width:50px;height:50px}
  .qjs-wa .elementor-button{width:50px;height:50px}
  .qjs-wa .elementor-button-icon svg{width:27px;height:27px}
  .qjs-wa .elementor-button-text{display:none}
}

/* --- Hero metric corrections, measured against the reference ------------ */

/* Elementor gives widgets max-width:100% at a weight the bridge rule ties
   with, so the 52ch measure needs one more class to hold. */
.qjs-hero2 .qjs-hero2__copy .qjs-hero2__sub{max-width:52ch}

/* Field and button boxes: the reference's controls are 48px and its submit
   56px; Elementor's tighter line-height leaves both a few pixels short. */
.qjs-book .elementor-form .elementor-field-textual{min-height:48px}
.qjs-book .elementor-form .elementor-field-type-submit button{min-height:56px}

/* The inline WhatsApp glyph in the fallback line inherits the icon sizing from
   the hero, which made that line half again as tall as the reference's. */
.qjs-book .qjs-book__alt p{line-height:1.5}
.qjs-book .qjs-book__alt .qjs-i{width:1em;height:1em;flex:none}

/* -------------------------------------------------------------------------
   13. Brand marquee bridge

   The rail is 29 Image widgets in a container, so every logo stays editable in
   Elementor. qjs-header.js clones the set once at runtime: the loop needs the
   row to hold the same 29 badges twice so translateX(-50%) lands exactly on
   the copy, and duplicating them in the editor would mean 58 widgets to keep
   in step by hand.
   ---------------------------------------------------------------------- */
.qjs-marq .qjs-marq__head{
  max-width:820px;margin:0 auto 36px;padding:0 24px;text-align:center;width:100%;
}
.qjs-marq .qjs-marq__kickerwrap{width:auto}
.qjs-marq .qjs-marq__kicker{margin:0 0 16px}
.qjs-marq .qjs-marq__t .elementor-heading-title{
  font-family:var(--font-d);font-weight:800;line-height:1.16;letter-spacing:-.025em;
  color:var(--navy);margin:0;text-wrap:balance;
}
.qjs-marq .qjs-marq__sub{width:100%}
.qjs-marq .qjs-marq__sub p{
  margin:14px auto 0;max-width:62ch;font-size:15.5px;line-height:1.68;color:var(--body);
}

.qjs-marq .qjs-marq__rail{width:100%}
.qjs-marq .qjs-marq__track{width:max-content;flex-wrap:nowrap}

/* The image widget wrapper is the badge; the <img> inside is the logo. */
.qjs-marq .qjs-marq__item{
  flex:none;display:grid;place-items:center;width:154px;height:88px;
  background:var(--surface);border:1px solid var(--line);border-radius:16px;
  box-shadow:0 3px 12px rgba(2,41,91,.05);
  transition:transform .28s cubic-bezier(.2,.7,.3,1),box-shadow .28s,border-color .28s;
}
.qjs-marq .qjs-marq__item:hover{
  transform:translateY(-4px);border-color:rgba(212,165,15,.5);
  box-shadow:0 14px 28px rgba(2,41,91,.12);
}
.qjs-marq .qjs-marq__item img{
  display:block;width:auto;max-width:104px;max-height:44px;object-fit:contain;
  filter:grayscale(1);opacity:.62;
  transition:filter .28s,opacity .28s;
}
.qjs-marq .qjs-marq__item:hover img{filter:none;opacity:1}

.qjs-marq .qjs-marq__foot{width:100%}
.qjs-marq .qjs-marq__foot p{margin:32px 0 0;text-align:center;font-size:14.5px}

@media (max-width:600px){
  .qjs-marq .qjs-marq__head{margin-bottom:26px;padding:0 18px}
  .qjs-marq .qjs-marq__item{width:126px;height:74px;border-radius:14px}
  .qjs-marq .qjs-marq__item img{max-width:84px;max-height:36px}
  .qjs-marq .qjs-marq__track{gap:12px}
}

/* --- Marquee track width ------------------------------------------------
   Elementor drives container width from its own --width custom property, which
   pins the track to the rail's width. The loop only lines up if the row is as
   wide as its content, so translateX(-50%) lands exactly on the duplicate set. */
.qjs-marq .qjs-marq__rail .qjs-marq__track{
  width:max-content!important;
  max-width:none!important;
  align-self:flex-start;
  flex:0 0 auto;
}

/* -------------------------------------------------------------------------
   14. Climate section bridge

   Each of the four factors is an Icon Box widget, which maps one-to-one onto
   the reference's badge / name / text markup, so the copy and the icons stay
   editable. The left column uses Elementor's right-hand icon position, which
   gives the mirrored layout the reference gets from flex-direction:row-reverse.
   ---------------------------------------------------------------------- */
.qjs-clim .qjs-clim__wrap{max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%}
.qjs-clim .qjs-clim__t .elementor-heading-title{
  font-family:var(--font-d);font-weight:800;line-height:1.12;letter-spacing:-.03em;
  color:var(--navy);margin:0;text-align:center;text-wrap:balance;
}
.qjs-clim .qjs-clim__sub{width:100%}
.qjs-clim .qjs-clim__sub p{
  margin:16px auto 0;max-width:60ch;text-align:center;
  font-size:15.5px;line-height:1.7;color:var(--body);
}

.qjs-clim .qjs-clim__grid{
  margin-top:40px;width:100%;
  display:grid;grid-template-columns:1fr minmax(0,1.05fr) 1fr;
  gap:28px;align-items:center;
}
.qjs-clim .qjs-clim__col{width:auto}

/* The icon plate is the reference's shield badge. */
.qjs-clim .qjs-clim__item .elementor-icon-box-icon{margin-bottom:0}
.qjs-clim .qjs-clim__item .elementor-icon{
  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%);
  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 .qjs-clim__item .elementor-icon svg{width:24px;height:24px;fill:#fff}
.qjs-clim .qjs-clim__item:hover .elementor-icon{transform:translateY(-3px) scale(1.05)}

.qjs-clim .qjs-clim__item .elementor-icon-box-title{margin:0}
.qjs-clim .qjs-clim__item .elementor-icon-box-title,
.qjs-clim .qjs-clim__item .elementor-icon-box-title span{
  font-family:var(--font-d);font-size:16.5px;font-weight:800;
  letter-spacing:-.015em;color:var(--navy);line-height:1.3;
}
.qjs-clim .qjs-clim__item .elementor-icon-box-description{
  margin:6px 0 0;font-family:var(--font-b);
  font-size:14px;line-height:1.62;color:var(--body);
}

.qjs-clim .qjs-clim__mid{position:relative;width:auto;display:grid;place-items:center}
.qjs-clim .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 .qjs-clim__img{position:relative;z-index:1;width:100%}
.qjs-clim .qjs-clim__img img{
  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 .qjs-clim__grid{grid-template-columns:1fr 1fr;gap:26px 22px}
  .qjs-clim .qjs-clim__mid{grid-column:1/-1;grid-row:1;max-width:520px;margin:0 auto}
  .qjs-clim .qjs-clim__col{gap:26px}
  /* Below the ring layout both columns read left-to-right again. */
  .qjs-clim .qjs-clim__col--l .qjs-clim__item .elementor-icon-box-wrapper{flex-direction:row}
  .qjs-clim .qjs-clim__col--l .qjs-clim__item{text-align:left}
  .qjs-clim .qjs-clim__col--l .qjs-clim__item .elementor-icon-box-content{text-align:left}
}
@media (max-width:600px){
  .qjs-clim .qjs-clim__wrap{padding:0 16px}
  .qjs-clim .qjs-clim__grid{grid-template-columns:1fr}
  .qjs-clim .qjs-clim__item .elementor-icon{width:42px;height:42px;font-size:21px}
  .qjs-clim .qjs-clim__item .elementor-icon svg{width:21px;height:21px}
  .qjs-clim .qjs-clim__item .elementor-icon-box-title span{font-size:15.5px}
}

/* -------------------------------------------------------------------------
   15. FAQ bridge

   The accordion is Elementor's own widget, so the questions and answers stay
   editable and the open/close behaviour is native. style.css section 11 still
   describes the previous FAQ treatment - flat rows on a hairline - and marks
   it !important, so the current design has to be re-asserted at the same
   weight from one class deeper.
   ---------------------------------------------------------------------- */
.qjs-faq .qjs-faq__wrap{
  max-width:var(--wrap);margin:0 auto;padding:0 24px;width:100%;
  display:grid;grid-template-columns:minmax(0,.82fr) minmax(0,1.18fr);
  gap:52px;align-items:start;
}

/* --- photo panel ------------------------------------------------------- */
.qjs-faq .qjs-faq__media{
  position:relative;width:auto;margin:0;
  border-radius:22px;overflow:hidden;box-shadow:var(--sh);
  aspect-ratio:4/5;
}
.qjs-faq .qjs-faq__img,
.qjs-faq .qjs-faq__img .elementor-widget-container{width:100%;height:100%}
.qjs-faq .qjs-faq__img img{
  width:100%;height:100%;object-fit:cover;object-position:center 38%;display:block;
}
.qjs-faq .qjs-faq__card{
  position:absolute;left:16px;right:16px;bottom:16px;width:auto;
  padding:18px 20px;border-radius:16px;
  background:linear-gradient(180deg,rgba(1,27,62,.82),rgba(1,27,62,.94));
  backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);
  border:1px solid rgba(255,255,255,.14);
  color:#fff;text-align:left;
}

/* --- heading ----------------------------------------------------------- */
.qjs-faq .qjs-faq__body{width:auto}
.qjs-faq .qjs-faq__eyebrow{margin:0 0 12px}
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-item{
  margin:0;padding:0;display:inline-flex;align-items:center;
  font-size:12px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;
}
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-text{color:var(--gold-deep);padding:0}
.qjs-faq .qjs-faq__eyebrow .elementor-icon-list-icon svg{width:16px;height:16px;fill:var(--gold-deep)}
.qjs-faq .qjs-faq__t{margin:0 0 26px}
.qjs-faq .qjs-faq__t .elementor-heading-title{
  font-family:var(--font-d);font-weight:800;line-height:1.1;letter-spacing:-.03em;
  color:var(--navy);margin:0;
}
.qjs-faq .qjs-faq__t .qjs-faq__hl{
  background-image:linear-gradient(100deg,var(--gold-deep),var(--gold) 55%,var(--gold-hi));
}

/* --- accordion --------------------------------------------------------- */
.qjs-faq .qjs-faq__list{width:100%}
.qjs-faq .qjs-faq__list .elementor-accordion{display:flex;flex-direction:column;gap:12px}
.qjs-faq .qjs-faq__list .elementor-accordion-item{
  border:1.5px solid var(--line)!important;
  border-radius:16px;overflow:hidden;
  background:var(--surface)!important;
  box-shadow:0 3px 12px rgba(2,41,91,.04);
  transition:background .3s,border-color .3s,box-shadow .3s;
}
.qjs-faq .qjs-faq__list .elementor-accordion-item:hover{border-color:rgba(1,89,166,.32)!important}

.qjs-faq .qjs-faq__list .elementor-tab-title{
  display:flex;align-items:center;justify-content:space-between;gap:18px;
  padding:18px 20px!important;margin:0;border:0!important;
  background:none!important;
  font-family:var(--font-d)!important;font-size:16px!important;font-weight:700!important;
  letter-spacing:-.012em;line-height:1.4;
  color:var(--navy)!important;
  transition:color .3s;
}
.qjs-faq .qjs-faq__list .elementor-accordion-title{flex:1 1 auto;color:inherit}
.qjs-faq .qjs-faq__list .elementor-accordion-icon{
  flex:none;order:2;float:none;margin:0;padding:0;width:30px;height:30px;
  display:grid;place-items:center;border-radius:50%;
  border:1.5px solid var(--line);
  color:var(--navy)!important;font-size:19px;
  transition:transform .32s cubic-bezier(.2,.7,.3,1),background .3s,border-color .3s,color .3s;
}
.qjs-faq .qjs-faq__list .elementor-accordion-icon svg{width:14px;height:14px;fill:currentColor}

/* The open row fills navy and carries its answer inside the fill. */
.qjs-faq .qjs-faq__list .elementor-accordion-item:has(.elementor-tab-title.elementor-active){
  background:linear-gradient(160deg,var(--navy-2) 0%,var(--navy) 55%,var(--ink) 100%)!important;
  border-color:transparent!important;
  box-shadow:0 18px 40px rgba(2,41,91,.24);
}
.qjs-faq .qjs-faq__list .elementor-tab-title.elementor-active{color:#fff!important}
.qjs-faq .qjs-faq__list .elementor-tab-title.elementor-active .elementor-accordion-icon{
  transform:rotate(180deg);
  background:var(--gold);border-color:var(--gold);color:var(--ink)!important;
}
.qjs-faq .qjs-faq__list .elementor-tab-content{
  padding:0 20px 20px!important;border:0!important;background:transparent!important;
}
.qjs-faq .qjs-faq__list .elementor-tab-content p{
  margin:0;font-family:var(--font-b);font-size:15px;line-height:1.72;color:#BDD0E8;max-width:none;
}

@media (max-width:900px){
  .qjs-faq .qjs-faq__wrap{grid-template-columns:1fr;gap:32px}
  .qjs-faq .qjs-faq__media{aspect-ratio:16/10;max-height:340px}
  .qjs-faq .qjs-faq__img img{object-position:center 42%}
}
@media (max-width:600px){
  .qjs-faq .qjs-faq__wrap{padding:0 16px}
  .qjs-faq .qjs-faq__list .elementor-tab-title{padding:16px!important;font-size:15px!important;gap:12px}
  .qjs-faq .qjs-faq__list .elementor-tab-content{padding:0 16px 16px!important}
  .qjs-faq .qjs-faq__list .elementor-tab-content p{font-size:14.5px}
}

/* --- Select field box ---------------------------------------------------

   Elementor wraps a select in its own .elementor-field div and paints a caret
   inside it. That wrapper picks up the field border and padding from
   style.css section 18, so the control ends up drawn twice and the group runs
   31px taller than the reference's. The wrapper goes back to a plain box and
   Elementor's caret is dropped in favour of the reference's own chevron,
   which is already painted as the select's background image. */
.qjs-book .elementor-form .elementor-select-wrapper{
  display:block;position:relative;
  padding:0!important;border:0!important;background:none!important;
  min-height:0!important;border-radius:0!important;box-shadow:none!important;
}
.qjs-book .elementor-form .elementor-select-wrapper .select-caret-down-wrapper{display:none}

/* --- Booking panel height ----------------------------------------------

   Every paragraph inside the panel already measures exactly what the
   reference's does; the surplus is Elementor's own spacing - the kit's default
   bottom margin on each widget, and the 12px row gap the form applies to its
   submit row as well as to its fields. Both are removed so the panel stacks
   the way the reference's hand-written markup does. */
.qjs-book .elementor-widget{margin-block-end:0}
.qjs-book .elementor-form .elementor-field-type-submit{margin-bottom:0}
.qjs-book .qjs-book__hd > .e-con{gap:0}

/* --- Booking panel spacing, measured against the reference --------------

   Three corrections, each worth a few pixels, together the 37px the panel was
   running tall.

   The closing lines carried their gap twice: once on the Elementor widget and
   again on the paragraph inside it. The gap belongs to the widget, so the
   paragraph loses its margin - and its line-height goes back to the inherited
   value, which is what the reference's 23px line actually measures.

   The submit row sat 28px below the last field: Elementor's 12px row gap plus
   its own 16px. The reference has 16px in total. */
.qjs-book .qjs-book__alt{margin-top:14px}
.qjs-book .qjs-book__alt p{margin:0;line-height:inherit}
.qjs-book .qjs-book__fine{margin-top:10px}
.qjs-book .qjs-book__fine p{margin:0}

.qjs-book .elementor-form .elementor-field-type-submit{margin-top:4px}

/* --- Booking panel, last two rows --------------------------------------

   Same double-gap as the closing lines: the subtitle's 5px sits on the
   paragraph as well as on the widget above it.

   The WhatsApp fallback line is a flex row, so its height is the tallest item
   rather than the text's line box; pinning the line-height to the inherited
   1.75 keeps it at the reference's 23px instead of growing to fit the glyph. */
.qjs-book .qjs-book__s p{margin-top:0}
.qjs-book .qjs-book__alt p,
.qjs-book .qjs-book__alt a{line-height:1.75}

/* --------------------------------------------------------------------------
   17b. BLOG - SINGLE POST
   These rules belong to section 17 of the reference stylesheet. The port
   dropped them because the dead-class sweep was run against the eight pages
   that existed at the time, and none of them was a single post, so every
   selector below looked unused. Restored verbatim from the reference.
   -------------------------------------------------------------------------- */
.qjs-post-body h2{font-size:31px;margin-top:1.8em;}
.qjs-post-body h3{font-size:21px;margin-top:1.5em;}
.qjs-post-body p,.qjs-post-body li{font-size:17px;line-height:1.85;color:var(--body);max-width:72ch;}
.qjs-post-body ul,.qjs-post-body ol{padding-left:1.2em;margin:0 0 1.5em;}
.qjs-post-body li{margin-bottom:.55em;}
.qjs-post-body li::marker{color:var(--amber);}
.qjs-post-body img{border-radius:var(--r-md);}
.qjs-post-body blockquote{
  margin:1.8em 0;padding:6px 0 6px 28px;border-left:4px solid var(--amber);
  font-family:var(--font-h);font-weight:600;font-size:20px;line-height:1.5;color:var(--navy);
}
.qjs-post-body strong{color:var(--navy);font-weight:700;}
.qjs-crumbs{font-size:13.5px;color:var(--body-dark);}
.qjs-crumbs a{color:var(--body-dark);}
.qjs-crumbs a:hover{color:var(--amber);}
.qjs-postmeta .elementor-icon-list-text{font-family:var(--font-b);font-size:14.5px;}
.qjs-postfeat img{width:100%;max-height:460px;object-fit:cover;box-shadow:var(--sh-hi);}
@media(max-width:767px){.qjs-postfeat img{max-height:240px;}}
.qjs-postcta{background:linear-gradient(150deg,var(--navy-2) 0%,var(--ink) 100%);border-radius:var(--r-md);}
.qjs-postcta .elementor-button{width:100%;}

/* --------------------------------------------------------------------------
   9b. STATS - 404 NUMERAL
   Belongs to section 9 of the reference stylesheet. Pruned by the dead-class
   sweep for the same reason as the single-post rules: the 404 template was
   not among the pages harvested, so .qjs-stat looked unused. Verbatim.
   -------------------------------------------------------------------------- */
.qjs-stat .elementor-heading-title{
  font-family:var(--font-h);font-weight:800;
  font-size:clamp(40px,5.4vw,62px);line-height:1;
  color:var(--amber);letter-spacing:-.045em;
}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - homepage bands at 1440

   Four of these are the same defect in four places. In the reference the
   spacing between two blocks lives as a margin on the lower block, and the
   two are siblings in normal flow. In Elementor the text is wrapped in a
   widget div, and that div is a flex item, so the inner paragraph's margin no
   longer sits between the two blocks - it sits inside the wrapper and adds to
   its height, on top of the wrapper's own margin. Zeroing the inner margin
   leaves exactly the reference gap.
   -------------------------------------------------------------------------- */
.qjs-marq .qjs-marq__sub p{margin-top:0}
.qjs-marq .qjs-marq__foot p{margin-top:0}
.qjs-clim .qjs-clim__sub p{margin-top:0}

/* The reference closes this block with margin:14px 0 22px; only the 14 was
   carried over to the widget, so the button below sat 22px too high. */
.qjs-team .qjs-team__sub{margin-bottom:22px}

/* qjs-sections.css sets .qjs-areacta__ctas .qjs-btn{padding:15px 28px}. There
   the class is on the anchor; here it is on the widget wrapper, so the pair
   rendered 80px tall instead of 50. The wrapper reset in qjs-header.css has
   the same specificity but loads earlier, so it loses. The anchor keeps the
   padding via the rule already in section 10 above. */
.qjs-areacta .qjs-areacta__ctas .qjs-btn{padding:0}

/* The reference's own .qjs-marq__t line-height (1.16) never applies: the
   Elementor kit's .elementor-kit-6 h2 rule outranks a single class, so the
   heading renders at the kit's 1.12. The bridge copied 1.16 from the
   stylesheet and, being one class deeper, actually won - making the two-line
   heading 3px taller than the reference. */
.qjs-marq .qjs-marq__t .elementor-heading-title{line-height:1.12}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - widget bottom margins

   Elementor ships `.e-con .elementor-widget.elementor-widget{margin-block-end:0}`
   to stop widgets inside a container from carrying their own bottom spacing -
   the container's gap is meant to do that job. It outranks a two-class
   selector, so the bottom margins the reference stylesheet puts on these two
   blocks were being thrown away (top margins survive: the reset only touches
   the block-end side). Matching its specificity restores the reference gap.
   These widgets carry no margin setting of their own, so nothing here
   contradicts what the Elementor editor shows.
   -------------------------------------------------------------------------- */
.qjs-team .elementor-widget.qjs-team__sub{margin-bottom:22px}
.qjs-areacta .elementor-widget.qjs-areacta__t{margin-bottom:18px}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - team card role line

   In the reference the role is a bare <span> that inherits the 28.9px line
   height set further up the card. Here it is a heading widget, and the kit
   gives the heading a line-height of its own, so the line box came out 9px
   shorter - enough to shrink every card and the whole team band with them.
   -------------------------------------------------------------------------- */
.qjs-team .qjs-team__role .elementor-heading-title{line-height:inherit}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - tablet and mobile
   -------------------------------------------------------------------------- */

/* The kit steps h2 down 44 / 36 / 29 across its three breakpoints. The two
   bridges below were written from a desktop comparison and only carried the
   first two steps, so both headings stayed at 36px on phones where the
   reference shows 29px. */
@media (max-width:767px){
  .qjs-team .qjs-team__t .elementor-heading-title{font-size:29px}
  .qjs-book .qjs-book__t .elementor-heading-title{font-size:29px}
}

/* The name/role block and the arrow badge sit on one line in the reference.
   An Elementor container defaults to width:100%, which left no room for the
   badge and wrapped it onto a second line on narrow cards. */
.qjs-team .qjs-team__meta > .e-con{width:auto;flex:1 1 auto;min-width:0}

/* Elementor's icon-list gives every item a computed padding-bottom of its own,
   which outranks the padding shorthand these pills are styled with and flattens
   them by 8px. Matching its specificity restores the reference pill height at
   every width. */
.qjs-hero2 .qjs-trust .elementor-icon-list-items .elementor-icon-list-item{padding:8px 13px;font-size:12.2px}

/* The role line's own 2px offset was landing inside the widget wrapper as well
   as on it, making each team card 2px taller than the reference. */
.qjs-team .qjs-team__role .elementor-heading-title{margin-top:0}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - section heading typography

   The reference stylesheets ask for weight 800 and their own letter-spacing on
   these five headings, but none of that reaches the page: the Elementor kit's
   `.elementor-kit-6 h2` rule outranks a single class, so on the reference they
   all render at the kit's 700 / -0.028em / 1.12. The bridges copied the
   stylesheet's intent rather than the rendered result and, sitting one class
   deeper, actually won - leaving every section heading a weight too heavy and
   slightly too tight. On phones that was enough to wrap the booking panel's
   title onto a second line.
   -------------------------------------------------------------------------- */
.qjs-book .qjs-book__t .elementor-heading-title,
.qjs-marq .qjs-marq__t .elementor-heading-title,
.qjs-clim .qjs-clim__t .elementor-heading-title,
.qjs-team .qjs-team__t .elementor-heading-title,
.qjs-faq .qjs-faq__t .elementor-heading-title{
  font-weight:700;letter-spacing:-.028em;line-height:1.12em;
}

/* The climate heading is the one the reference leaves entirely to the kit, so
   it keeps the kit's ink rather than the navy the other four are given. */
.qjs-clim .qjs-clim__t .elementor-heading-title{color:#0C203C}

/* --------------------------------------------------------------------------
   MEASURED CORRECTIONS - tablet hero measure and FAQ heading gap
   -------------------------------------------------------------------------- */

/* Below 1025 the reference widens the hero's supporting line from 52ch to
   60ch. Here the widget carries an Elementor custom width, and the inline rule
   Elementor prints for it resets to max-width:100% at that breakpoint, which
   ties with the bridge selector. One more class settles it. */
@media (max-width:1024px){
  .qjs-hero2 .qjs-hero2__copy .elementor-widget.qjs-hero2__sub{max-width:60ch}
}

/* Same widget bottom-margin reset as the team and areas headings: the FAQ
   title's 26px gap to the accordion was being dropped. */
.qjs-faq .elementor-widget.qjs-faq__t{margin-bottom:26px}

/* --------------------------------------------------------------------------
   DELIBERATE DEVIATION - no horizontal scroll on phones

   At 390px the reference itself scrolls sideways on three pages: its document
   is 439-464px wide against a 375px viewport. Two of those (home and Car
   Brands) are sections rebuilt natively here, and the rebuild does not carry
   the fault. The third is the About timeline, which was ported verbatim and
   did: each row is a flex pair of marker and body, and the body is an
   Elementor container at width:100% of the row, so marker + body together
   overrun the row by exactly the marker's width.

   Letting the body shrink is the smallest change that removes the overflow,
   and it leaves every other measurement on the page untouched.
   -------------------------------------------------------------------------- */
.qjs-timeline .qjs-tl-item{min-width:0}
.qjs-timeline .qjs-tl-item > .qjs-tl-body{flex:1 1 auto;width:auto;min-width:0}