/* =========================================================================
   Quick Jump Start - header bridge layer.

   qjs-2026.css section 1 describes the header against the BEM markup the
   reference renders from PHP (.qjs-hd__tl is the <a>, .qjs-nav__list is the
   <ul>, .qjs-hd__logoimg is the <img>). This build is native Elementor, so the
   same class names land on widget wrappers instead and the real elements sit a
   level or two inside. Everything here re-points a reference declaration at
   Elementor's DOM; the values are the reference's, measured off the live page.

   Loaded after qjs-2026.css so it can rely on the tokens and win on
   equal-specificity ties.
   ====================================================================== */

/* -------------------------------------------------------------------------
   1. Shell
   ---------------------------------------------------------------------- */
.qjs-hd{padding:0}
.qjs-hd__top,.qjs-hd__bar{width:100%}

/* The reference wrap is the width limiter; Elementor containers are full
   bleed, so the limit has to be re-applied to the element carrying the class. */
.qjs-hd .qjs-hd__wrap{
  max-width:var(--wrap);margin-inline:auto;width:100%;
  flex-wrap:nowrap;
}
.qjs-hd__top .qjs-hd__wrap{height:var(--hd-top)}
.qjs-hd__bar .qjs-hd__wrap{height:100%}
.qjs-hd .qjs-hd__spacer{flex:1 1 auto;min-width:0;padding:0}

/* -------------------------------------------------------------------------
   2. Utility bar

   Each item is an Icon List widget holding exactly one row, so the widget is
   the item: strip the list chrome and let the <li> be the flex line.
   ---------------------------------------------------------------------- */
.qjs-hd__top .qjs-hd__tl{width:auto;flex:0 0 auto}
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-items{margin:0;padding:0;list-style:none}
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-item{
  margin:0;padding:0;
  display:inline-flex;align-items:center;
  font-size:12.5px;font-weight:600;letter-spacing:.015em;
  white-space:nowrap;
}
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-item>a{
  display:inline-flex;align-items:center;text-decoration:none;color:inherit;
}
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-icon{
  padding-inline-end:8px;display:inline-flex;align-items:center;
}
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-icon svg{width:14px;height:14px;fill:var(--gold)}
/* components.css lifts the muted body tone off the near-black utility bar. */
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-text{color:#C3D3E8;padding:0}
.qjs-hd__top .qjs-hd__tl a:hover .elementor-icon-list-text{color:#fff}
/* The reference emphasises the arrival time and the number in white. */
.qjs-hd__top .qjs-hd__tl .elementor-icon-list-text b{color:#fff;font-weight:800}
.qjs-hd__top .qjs-hd__tl--tel .elementor-icon-list-text{color:#fff;font-weight:800}
.qjs-hd__top .qjs-hd__tl--eta .elementor-icon-list-icon svg{animation:qjs-bolt 2.4s ease-in-out infinite}

/* -------------------------------------------------------------------------
   3. Logo

   Hello Elementor ships img{height:auto} and the kit reasserts it, which
   stretches the logo to its srcset candidate. Size by height, let width follow.
   ---------------------------------------------------------------------- */
.qjs-hd .qjs-hd__logo{width:auto;flex:0 0 auto}
.qjs-hd .qjs-hd__logo a{display:flex;align-items:center}
.qjs-hd .qjs-hd__logo img{
  display:block;height:44px!important;width:auto!important;max-width:none!important;
  object-fit:contain;
  transition:height .3s cubic-bezier(.2,.7,.3,1);
}
.qjs-hd.is-stuck .qjs-hd__logo img{height:38px!important}

/* -------------------------------------------------------------------------
   4. Navigation
   ---------------------------------------------------------------------- */
.qjs-hd .qjs-nav{flex:1 1 auto;min-width:0}
.qjs-hd .qjs-nav .elementor-nav-menu--main .elementor-nav-menu{
  display:flex;align-items:center;gap:4px;justify-content:center;
  flex-wrap:nowrap;list-style:none;margin:0;padding:0;
}
.qjs-hd .qjs-nav .elementor-nav-menu>li{position:relative;margin:0}
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item{
  position:relative;display:block;
  padding:10px 15px;border-radius:10px;
  font-family:var(--font-b);
  font-size:13.5px;font-weight:700;letter-spacing:.055em;text-transform:uppercase;
  color:#DCE7F5;text-decoration:none;white-space:nowrap;
  transition:color .2s,background .2s;
  fill:currentColor;
}
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item::after{
  content:"";position:absolute;left:15px;right:15px;bottom:5px;height:2px;
  border-radius:2px;background:linear-gradient(90deg,var(--gold-hi),var(--gold));
  transform:scaleX(0);transform-origin:left;
  transition:transform .28s cubic-bezier(.2,.7,.3,1);
}
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item:hover{color:#fff;background:rgba(255,255,255,.06)}
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item:hover::after,
.qjs-hd .qjs-nav .elementor-nav-menu>li.current-menu-item>a.elementor-item::after,
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item-active::after{transform:scaleX(1)}
.qjs-hd .qjs-nav .elementor-nav-menu>li.current-menu-item>a.elementor-item,
.qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item-active{color:var(--gold-hi)}

/* submenu - none in the current menu, kept so adding one inherits the design */
.qjs-hd .qjs-nav .elementor-nav-menu .sub-menu{
  min-width:230px;padding:8px;
  background:#fff;border-radius:16px;box-shadow:var(--sh-hi);border:0;
}
.qjs-hd .qjs-nav .elementor-nav-menu .sub-menu a.elementor-sub-item{
  color:var(--navy);text-transform:none;letter-spacing:0;font-size:14.5px;
  padding:10px 14px;border-radius:10px;
}
.qjs-hd .qjs-nav .elementor-nav-menu .sub-menu a.elementor-sub-item:hover{background:var(--azure-soft);color:var(--azure)}

/* In the reference the <nav> is the flex line and the <ul> is shrink-to-fit,
   so the menu sits centred between the logo and the actions. Elementor nests
   an extra wrapper around the list which is not a flex line, leaving the list
   flush left; making that wrapper the flex line restores the centring. Scoped
   above the collapse breakpoint so it cannot out-rank the rule that hides the
   desktop menu further down. */
@media (min-width:1025px){
  .qjs-hd .qjs-nav .elementor-nav-menu--main{display:flex;justify-content:center;width:100%}
}

/* -------------------------------------------------------------------------
   5. Actions

   qjs-2026.css paints .qjs-btn, .qjs-hd__wa and .qjs-hd__call as the button
   itself. Here those classes land on the Elementor widget wrapper and the real
   <a class="elementor-button"> sits inside it, so without the reset below the
   padding, radius and plate are applied twice and the actions block comes out
   41px too wide. The wrapper goes back to a plain box; the rules after it
   paint the <a>.
   ---------------------------------------------------------------------- */
.qjs-hd .qjs-hd__act{width:auto;flex:0 0 auto;margin-left:auto;min-width:0}
.qjs-hd .qjs-hd__act>.elementor-widget{width:auto;flex:0 0 auto}

.elementor-widget.qjs-btn,
.elementor-widget.qjs-hd__wa,
.elementor-widget.qjs-hd__call{
  display:block;width:auto;height:auto;
  margin:0;padding:0;
  border:0;border-radius:0;
  background:none;box-shadow:none;
  line-height:normal;
}

.qjs-btn .elementor-button{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--font-b);font-weight:800;font-size:15px;letter-spacing:.01em;
  line-height:1;padding:14px 22px;border-radius:999px;border:2px solid transparent;
  text-decoration:none;white-space:nowrap;
  transition:transform .22s cubic-bezier(.2,.7,.3,1),box-shadow .22s,background .22s,color .22s,border-color .22s;
}
.qjs-btn .elementor-button-content-wrapper{display:inline-flex;align-items:center;gap:.6em}
.qjs-btn .elementor-button-icon svg{width:1.15em;height:1.15em;fill:currentColor}

.qjs-btn--gold .elementor-button{
  background:linear-gradient(135deg,var(--gold-hi) 0%,var(--gold) 55%,var(--gold-deep) 100%);
  color:var(--ink);box-shadow:var(--sh-gold);
}
.qjs-btn--gold .elementor-button:hover{
  transform:translateY(-2px);box-shadow:0 18px 38px rgba(212,165,15,.42);color:var(--ink);
}
.qjs-btn--ghost .elementor-button{background:transparent;color:#fff;border-color:rgba(255,255,255,.34)}
.qjs-btn--ghost .elementor-button:hover{background:rgba(255,255,255,.10);border-color:#fff;transform:translateY(-2px);color:#fff}

/* Phone CTA - the reference stacks a small caps label over the number. The
   button widget carries both in its text field, so the label stays editable. */
.qjs-hd__call .elementor-button{padding:9px 20px 9px 18px;gap:.7em}
.qjs-hd__call .elementor-button-icon svg{width:19px;height:19px}
.qjs-hd__call .elementor-button-text{
  display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  line-height:1.15;text-align:left;
}
.qjs-hd__call .elementor-button-text small{
  font-size:10px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;opacity:.72;
}
.qjs-hd__call .elementor-button-text b{font-size:15.5px;font-weight:900;letter-spacing:.005em}

/* WhatsApp - icon only, square plate */
.qjs-hd__wa .elementor-button{
  display:inline-grid;place-items:center;width:44px;height:44px;padding:0;
  border-radius:14px;border:0;color:#fff;
  background:var(--wa);box-shadow:0 8px 20px rgba(37,211,102,.34);
  transition:transform .22s,box-shadow .22s;
}
.qjs-hd__wa .elementor-button:hover{transform:translateY(-2px) scale(1.04);box-shadow:0 14px 28px rgba(37,211,102,.46);color:#fff}
.qjs-hd__wa .elementor-button-icon svg{width:21px;height:21px;fill:#fff}
.qjs-hd__wa .elementor-button-text{display:none}

/* -------------------------------------------------------------------------
   6. Burger and drawer

   Elementor's own toggle and dropdown stand in for the reference's custom
   burger and drawer, so the behaviour stays native and editable.
   ---------------------------------------------------------------------- */
.qjs-hd .qjs-nav .elementor-menu-toggle{display:none}

.qjs-hd .qjs-nav .elementor-nav-menu--dropdown{
  background:var(--navy);border-top:1px solid rgba(255,255,255,.1);
  box-shadow:0 24px 50px rgba(1,27,62,.45);
  padding:18px 24px 0;
}
.qjs-hd .qjs-nav .elementor-nav-menu--dropdown a.elementor-item{
  display:block;padding:14px 4px;
  border-bottom:1px solid rgba(255,255,255,.09);
  color:#E4ECF7;
  font-size:15px;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
}
.qjs-hd .qjs-nav .elementor-nav-menu--dropdown a.elementor-item:hover,
.qjs-hd .qjs-nav .elementor-nav-menu--dropdown a.elementor-item.elementor-item-active{
  color:var(--gold-hi);background:transparent;
}

/* The reference drawer closes with a stacked Call / WhatsApp pair. Those are
   real Elementor buttons parked after the bar and revealed with the drawer. */
.qjs-hd .qjs-drawer-ctas{display:none;background:var(--navy);width:100%}
.qjs-hd .qjs-drawer-ctas .elementor-button{width:100%}
.qjs-hd:has(.elementor-menu-toggle[aria-expanded="true"]) .qjs-drawer-ctas{display:flex}

/* -------------------------------------------------------------------------
   7. Breakpoints - the reference's, unchanged
   ---------------------------------------------------------------------- */
@media (max-width:1180px){
  .qjs-hd .qjs-nav .elementor-nav-menu>li>a.elementor-item{padding:10px 11px;font-size:12.8px}
  .qjs-hd__call .elementor-button-text small{display:none}
}

@media (max-width:1024px){
  .qjs-hd .qjs-nav .elementor-nav-menu--main{display:none}

  /* In the reference the burger is the last thing in the actions block, so the
     collapsed bar reads logo / WhatsApp / call / burger. Elementor ships the
     toggle inside the menu widget, which sits between logo and actions, so the
     widget is re-ordered to the end of the line rather than moved in the DOM. */
  .qjs-hd .qjs-hd__bar .qjs-hd__wrap{align-items:center}
  .qjs-hd .qjs-hd__logo{order:1}
  .qjs-hd .qjs-hd__act{order:2;margin-left:auto}
  .qjs-hd .qjs-nav{order:3;flex:0 0 auto;width:auto;position:static}

  /* The reference bar has two children once collapsed and the actions carry
     margin-left:auto, so its 14px wrap gap never shows - the spacing you see
     is the 12px gap inside the actions block. Here the burger is a third child
     of the wrap, so the wrap gap is the one that shows. */
  .qjs-hd .qjs-hd__wrap{gap:12px}

  /* The burger is a bare <button> in the reference, so the Elementor kit's
     button rule paints it: gold plate, navy glyph, 10px radius. That is what
     the reference actually renders, so it is what is reproduced here rather
     than the translucent plate qjs-2026.css describes and the kit out-ranks.
     66x46 and 46x46 below 601px are the reference's measured widths. */
  .qjs-hd .qjs-nav .elementor-menu-toggle{
    display:grid;place-items:center;
    width:66px;height:46px;flex:none;margin:0;padding:0;
    border-radius:10px;
    background:var(--gold);
    border:.8px solid rgba(255,255,255,.22);
    color:var(--navy);
    transition:background .2s,border-color .2s;
  }
  .qjs-hd .qjs-nav .elementor-menu-toggle:hover{background:var(--gold-hi);border-color:rgba(255,255,255,.34)}
  .qjs-hd .qjs-nav .elementor-menu-toggle svg{width:16px;height:16px;fill:var(--navy)}

  /* The reference drawer is one fixed panel below the bar holding the menu and
     then the CTA pair. Here those are two siblings, so both are taken out of
     flow and anchored to .qjs-hd - which is sticky, and so already a
     containing block - and the pair is pushed down by the measured height of
     the open dropdown (--qjs-drawer-h, set in qjs-header.js). The two then
     read as a single panel that overlays the page rather than pushing it,
     exactly as the reference does. */
  .qjs-hd .qjs-nav .elementor-nav-menu--dropdown{
    position:absolute;left:0;right:0;top:100%;width:auto;margin:0;
    z-index:899;
  }
  .qjs-hd .qjs-drawer-ctas{
    position:absolute;left:0;right:0;top:100%;width:auto;
    transform:translateY(var(--qjs-drawer-h,0px));
    z-index:899;
    box-shadow:0 24px 50px rgba(1,27,62,.45);
  }
}

@media (max-width:860px){
  .qjs-hd__top .qjs-hd__tl:not(.qjs-hd__tl--tel):not(.qjs-hd__tl--eta){display:none}
  .qjs-hd__call .elementor-button{padding:0;width:46px;height:46px;border-radius:14px}
  .qjs-hd__call .elementor-button-text{display:none}
  .qjs-hd__call .elementor-button-icon svg{width:21px;height:21px}
}

@media (max-width:600px){
  .qjs-hd .qjs-hd__wrap{padding-inline:16px}
  .qjs-hd__top .qjs-hd__tl--eta{display:none}
  .qjs-hd .qjs-nav .elementor-menu-toggle{width:46px}
  .qjs-hd .qjs-hd__logo img{height:34px!important}
  .qjs-hd.is-stuck .qjs-hd__logo img{height:30px!important}
}