/* QooKey Hero widget styles. Scoped to .qk-hero. Fonts are relative to this file. */
  .qk-hero,.qk-after{
    --qk-studio:#07090D; --qk-line:#252C38; --qk-gold:#DF9F1B; --qk-ink:#E9EDF3; --qk-muted:#9AA3B2;
    --qk-blue-bg:#0B3F75; --qk-bgc:7,9,13;   /* logo blue that the page turns into once the logo appears; --qk-bgc = current backdrop (rgb triplet), set by JS */
    --qk-display:"Big Shoulders Display","Arial Narrow",Impact,sans-serif;
    --qk-tech:"Manrope","Segoe UI",system-ui,sans-serif;
    --qk-body:"Manrope","Segoe UI",system-ui,sans-serif;
    /* height of a sticky site header above the hero (0 if none). Elementor: set this if your header is sticky. */
    --qk-top:0px;
  }
  .qk-hero{
    position:relative;height:var(--qk-len,600vh);background:var(--qk-studio);color:var(--qk-ink);font-family:var(--qk-body);
  }
  .qk-hero *,.qk-hero *::before,.qk-hero *::after{box-sizing:border-box}
  .qk-stage{position:sticky;top:0;height:100vh;height:100svh;overflow:hidden;background:var(--qk-studio)}
  .qk-frames,.qk-frames picture,.qk-frames img,.qk-canvas{position:absolute;inset:0;width:100%;height:100%;display:block;margin:0}
  .qk-frames img{object-fit:cover;object-position:50% 55%}
  .qk-canvas{opacity:0}
  .qk-frames .qk-end{display:none}
  /* the world turns logo-blue from the floor up as the logo stage arrives (opacity driven by scroll, JS sets --qk-blue) */
  .qk-stage::after{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:var(--qk-blue,0);
    background:linear-gradient(180deg,rgba(11,63,117,0) 56%,rgba(11,63,117,.85) 82%,var(--qk-blue-bg) 100%)}

  .qk-copy{position:absolute;z-index:3;left:clamp(16px,5vw,72px);bottom:clamp(28px,9vh,96px);width:min(27rem,calc(100% - 32px))}
  .qk-kicker{font:600 12px/1 var(--qk-tech);letter-spacing:.18em;text-transform:uppercase;color:var(--qk-gold);display:flex;gap:10px;margin:0}
  .qk-kicker b{font-weight:600;color:var(--qk-muted)}
  .qk-copy .qk-hl{font:800 clamp(40px,4.6vw,78px)/.9 var(--qk-display);letter-spacing:.01em;text-transform:uppercase;margin:.3em 0 .28em;text-wrap:balance;color:var(--qk-ink);min-height:1.8em}   /* min-heights: the block keeps one size across steps (no layout shift) */
  .qk-copy p{margin:0;color:var(--qk-muted);max-width:34ch;font-size:clamp(16px,1.3vw,17px);line-height:1.5;min-height:3em}
  .qk-copy .qk-chips{min-height:78px;align-content:start}
  /* stage change: lines drop out fast, then rise back in with a stagger (kicker → headline → text) */
  .qk-line{transition:opacity .4s cubic-bezier(.2,.7,.2,1),transform .5s cubic-bezier(.2,.7,.2,1)}
  .qk-copy .qk-hl{transition-delay:.07s}
  .qk-copy p[data-p]{transition-delay:.15s}
  .qk-copy .qk-chips{transition-delay:.23s}
  .qk-chips{display:flex;flex-wrap:wrap;gap:8px;margin:16px 0 0;padding:0;list-style:none}
  .qk-chips li{font:600 11.5px/1 var(--qk-tech);letter-spacing:.08em;text-transform:uppercase;color:var(--qk-ink);border:1px solid rgba(255,255,255,.22);border-radius:999px;padding:9px 12px;background:rgba(var(--qk-bgc),.4)}
  .qk-steps-m{display:none}
  .qk-copy.qk-swap .qk-line{opacity:0;transform:translateY(16px);transition-duration:.16s,.16s;transition-delay:0s}
  .qk-cta{display:inline-flex;align-items:center;gap:10px;min-height:48px;margin-top:22px;padding:0 22px;border-radius:4px;background:var(--qk-gold);color:#0B0D12;
          font:600 14px/1 var(--qk-tech);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;transition:background-color .2s ease}
  .qk-cta:hover{background:#F0B233}
  .qk-cta:focus-visible{outline:2px solid var(--qk-ink);outline-offset:3px}

  .qk-rail{position:absolute;z-index:3;right:clamp(16px,4vw,48px);top:50%;transform:translateY(-50%);margin:0;padding:0;list-style:none;display:grid;gap:14px;
           font:600 12px/1 var(--qk-tech);letter-spacing:.12em;text-transform:uppercase;color:var(--qk-muted);font-variant-numeric:tabular-nums}
  .qk-rail li{display:flex;align-items:center;gap:10px;justify-content:flex-end;transition:color .3s}
  .qk-rail-t{display:contents}
  .qk-rail-t em{font-style:normal}
  .qk-rail-t b{font-weight:600;font-style:italic;color:inherit}
  .qk-rail-body{display:none}
  .qk-rail li::after{content:"";width:18px;height:2px;background:var(--qk-line);transition:background-color .3s,width .3s}
  .qk-rail li.on{color:var(--qk-ink)}
  .qk-rail li.on::after{background:var(--qk-gold);width:34px}
  .qk-kicker span::after{content:"·";margin-left:10px;color:var(--qk-muted)}
  .qk-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
  .qk-skip{position:absolute;z-index:3;left:clamp(16px,5vw,72px);bottom:calc(clamp(28px,9vh,96px) + var(--qk-copy-h,220px) + 18px);   /* desktop: sits right above the step copy (JS sets --qk-copy-h) */
          font:600 11px/1 var(--qk-tech);letter-spacing:.16em;text-transform:uppercase;color:var(--qk-muted);text-decoration:none;border:1px solid var(--qk-line);border-radius:999px;padding:10px 14px;min-height:44px;display:inline-flex;align-items:center;gap:6px;background:rgba(var(--qk-bgc),.5)}
  .qk-skip:hover{color:var(--qk-ink);border-color:var(--qk-gold)}
  .qk-cta-m{display:none}
  .qk-feather{display:none}
  .qk-meter{position:absolute;z-index:4;left:0;bottom:0;height:3px;width:100%;background:var(--qk-gold);transform-origin:0 50%;transform:scaleX(0)}

  /* ---------- phones (and portrait tablets): one screen = frame box on top → copy → [tall screens: facts strip] → CTA → stage bars.
       The stage is a flex column, so the free height is shared by the copy (centred) and, on tall screens only, a facts strip. ---------- */
  @media (max-width:700px), (max-width:900px) and (orientation:portrait){
    .qk-hero{height:var(--qk-len-m,420vh)}
    .qk-hero{--qk-bgc:11,63,117;--qk-muted:#C4D4EA;--qk-line:rgba(255,255,255,.18)}   /* phones/tablets: the area under the frame is logo blue from the start (no black to blue jump) */
    .qk-stage{background:#0B3F75}
    .qk-hero{--qk-img:calc(100vw * 720 / 880)}                /* frame box = the phone frame's own height at full width (the camera fills it); JS mirrors this */
    /* the frames are drawn by a "camera": each frame is scaled and shifted so the car/robot fills the box, its top 40px under the header,
       instead of the frame's own black sky (per-frame content bounds baked in the script). The poster gets the same framing via transform. */
    .qk-frames picture{top:var(--qk-top);height:var(--qk-img);bottom:auto;overflow:hidden}
    .qk-frames picture{background:#07090D}
    .qk-feather{display:block;position:absolute;left:0;right:0;top:var(--qk-top);height:var(--qk-img);z-index:1;pointer-events:none;box-shadow:inset 0 0 48px 18px #07090D;-webkit-mask-image:linear-gradient(#000 72%,transparent 92%);mask-image:linear-gradient(#000 72%,transparent 92%)}   /* frame edges melt into the studio black */
    .qk-frames picture::after{content:"";position:absolute;left:0;right:0;bottom:0;height:18%;background:linear-gradient(rgba(var(--qk-bgc),0),rgb(var(--qk-bgc)))}   /* same floor fade as the canvas */
    .qk-frames img{object-fit:contain;object-position:50% 0;height:auto;bottom:auto;top:0;transform-origin:50% 0}
    .qk-stage::after{background:linear-gradient(180deg,rgba(11,63,117,0) calc(var(--qk-top) + var(--qk-img) * .84),var(--qk-blue-bg) calc(var(--qk-top) + var(--qk-img) + 28px))}
    .qk-stage{display:flex;flex-direction:column;padding:calc(var(--qk-top) + var(--qk-img) + 6px) 16px calc(16px + env(safe-area-inset-bottom,0px))}
    .qk-stage > *{position:relative;z-index:3}
    .qk-frames,.qk-stage::after{position:absolute;z-index:auto}
    .qk-feather{position:absolute;z-index:1}
    /* step list: six product steps under the frame (static rows, the current one highlighted) + a fixed-height detail panel with the
       step's headline, line and facts. Nothing below moves while scrolling (no layout shift), and there is no dead space. */
    /* accordion: fixed rows; the detail panel sits right under the current row and the rows below slide down by transform (no layout shift) */
    .qk-stage{--qk-row:44px;--qk-panel:172px}
    .qk-rail{top:auto;right:auto;left:auto;bottom:auto;transform:none;display:block;flex:0 0 auto;order:1;font-variant-numeric:normal;padding-bottom:var(--qk-panel)}
    .qk-rail li{display:flex;align-items:center;height:var(--qk-row);border-top:1px solid rgba(255,255,255,.12);transition:transform .4s cubic-bezier(.2,.7,.2,1);background:transparent}
    .qk-rail li.qk-below{transform:translateY(var(--qk-panel))}
    .qk-rail li .qk-rail-t{width:100%}
    .qk-rail li:last-child{border-bottom:1px solid rgba(255,255,255,.12)}
    .qk-rail li::after{display:none}
    .qk-rail-t{display:flex;align-items:center;gap:12px;min-height:34px;font:600 15px/1.2 var(--qk-tech);letter-spacing:.01em;text-transform:none;color:var(--qk-muted);transition:color .3s}
    .qk-rail-t em{font-size:0}                                              /* phones: the row carries the step headline, not the short label */
    .qk-rail-t em::after{content:attr(data-h);font-size:15px}
    .qk-copy .qk-kicker,.qk-copy .qk-hl{display:none}                       /* no repeated title inside the panel */
    .qk-rail-t b{order:-1;font:600 11.5px/1 var(--qk-tech);letter-spacing:.14em;font-style:normal;color:rgba(255,255,255,.45);width:22px;flex:0 0 22px;transition:color .3s}
    .qk-rail li.on .qk-rail-t{color:var(--qk-ink)}
    .qk-rail li.on .qk-rail-t b{color:var(--qk-gold)}
    .qk-copy{position:absolute;left:16px;right:16px;width:auto;bottom:auto;top:calc(var(--qk-top) + var(--qk-img) + 6px + var(--qk-row));height:var(--qk-panel);overflow:hidden;padding:6px 0 0;display:block;
             transform:translateY(calc(var(--qk-step,0) * var(--qk-row)));transition:transform .4s cubic-bezier(.2,.7,.2,1)}
    .qk-copy-in{margin:0}
    .qk-copy-in::before{display:none}
    .qk-copy .qk-hl{font-size:clamp(28px,7.6vw,36px);margin:.25em 0 .22em}
    .qk-copy p{font-size:16px;min-height:0;margin:0}
    .qk-chips{margin-top:10px}
    .qk-chips{margin-top:12px}
    .qk-chips li{padding:8px 11px;font-size:11px}
    .qk-cta{width:100%;justify-content:center;min-height:52px}
    .qk-copy .qk-cta{display:none}                                  /* phones: one CTA, after the panel */
    .qk-cta-m{display:flex;left:auto;right:auto;bottom:auto;width:auto;margin:18px 0 0;order:2;flex:0 0 auto}
    .qk-copy{flex:0 0 auto}
    /* facts strip: only on very tall & narrow screens (portrait tablets, tall previews), where the list still leaves air */
    .qk-bridge{display:none;grid-template-columns:repeat(3,1fr);gap:10px;margin:18px 0 0;order:3}
    .qk-bridge div{border:1px solid rgba(255,255,255,.16);border-radius:10px;padding:14px 12px;background:rgba(255,255,255,.04)}
    .qk-bridge b{display:block;font:800 30px/1 var(--qk-display);color:var(--qk-ink)}
    .qk-bridge span{display:block;margin-top:6px;font:600 11px/1.3 var(--qk-tech);letter-spacing:.1em;text-transform:uppercase;color:var(--qk-muted)}
    .qk-bridge p{grid-column:1/-1;margin:2px 0 0;color:var(--qk-muted);font-size:15px;line-height:1.5}
    @media (min-height:900px) and (max-aspect-ratio:5/12){.qk-bridge{display:grid}}
    /* the six job steps appear when the page turns blue (tall screens only; phones have no room) */
    .qk-steps-m{display:none;flex-wrap:wrap;gap:6px;margin:16px 0 0;padding:0;list-style:none;order:3;
                opacity:var(--qk-blue,0);transform:translateY(calc((1 - var(--qk-blue,0)) * 14px));pointer-events:none;order:4}
    .qk-steps-m li{font:600 11px/1 var(--qk-tech);letter-spacing:.12em;text-transform:uppercase;color:#C4D4EA;border:1px solid rgba(255,255,255,.18);border-radius:4px;padding:8px 10px}
    .qk-steps-m li:last-child{border-color:var(--qk-gold);color:#FFFFFF}
    @media (min-height:900px) and (max-aspect-ratio:5/12){.qk-steps-m{display:flex}}
    .qk-skip{position:absolute;z-index:4;left:auto;bottom:auto;right:16px;top:calc(var(--qk-top) + var(--qk-img) - 46px)}   /* phones: on the floor line, right where the step list starts */
    .qk-meter{display:none}
    @media (max-height:860px){.qk-copy .qk-chips{display:none}.qk-stage{--qk-row:40px;--qk-panel:78px}}   /* short phones: headline + line only, so the CTA stays on screen */
  }
  /* phones up to 640px: frame 1 (the LCP image) is framed by CSS, exactly like the JS camera does for frame 1
     (scale = 1.8141 - 141.9px/W, top = 102.03px - 48.618vw; derived from CAM[0..2] with CAM_TOP 64).
     The browser paints it framed from the start, so nothing moves when the script arrives (better LCP + Speed Index). */
  @media (max-width:640px){
    .qk-hero[data-mode="images"] .qk-frames img.qk-poster{left:50%;right:auto;width:calc(181.41vw - 141.9px);max-width:none;
      margin-left:calc((181.41vw - 141.9px) / -2);top:calc(102.03px - 48.618vw);transform:none}
  }
  @media (prefers-reduced-motion:reduce){
    .qk-hero{height:auto;--qk-blue:1;--qk-bgc:11,63,117}   /* static hero: already on the blue floor */
    .qk-stage{position:relative}
    .qk-frames picture:first-child,.qk-canvas{display:none}
    .qk-frames .qk-end{display:block}
    .qk-copy{transform:none}
    .qk-rail,.qk-meter,.qk-cta-m{display:none}
    .qk-copy .qk-cta{display:inline-flex}
    .qk-line{transition:none}
  }


  /* logo bar (replaces the theme header on this page) */
  .qk-logobar{position:fixed;top:0;left:0;right:0;z-index:49;height:var(--qk-top,60px);display:flex;align-items:center;padding:0 clamp(16px,4vw,48px);
              background:linear-gradient(rgba(7,9,13,.85),rgba(7,9,13,0));pointer-events:none}
  .qk-logobar a{pointer-events:auto;display:block}
  .qk-logobar{transition:opacity .25s ease,visibility 0s linear 0s}
  .qk-logobar.is-off{opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s linear .25s}
  .qk-logobar img{height:32px;width:auto;display:block}
  @media (min-width:901px){.qk-logobar img{height:44px}}   /* desktop: bigger logo, still inside the 60px bar */
  body.admin-bar .qk-logobar{top:32px}                    /* logged-in admins only: sit below the WP admin bar */
  @media (max-width:782px){body.admin-bar .qk-logobar{top:46px}}
  @media (max-width:600px){body.admin-bar .qk-logobar{top:0}}
  .elementor-widget-qookey-hero{width:100%}

  /* ---------- Story step style (widget: Stages → Step style = Story). Classic rules above stay untouched for "Classic".
       A 6-part bar fills with the scroll (JS sets --qk-step and --qk-sp; segment fill = clamp(step - i + sp, 0, 1)),
       one step shows at a time: big number, label, headline, line. Only opacity/transform animate (no layout shift). ---------- */
  .qk-story .qk-rail{display:none}
  /* desktop: a soft shade behind the step text so it stays readable over the car (fades out as the page turns blue) */
  .qk-story .qk-stage::before{content:"";position:absolute;inset:0;z-index:2;pointer-events:none;opacity:calc(1 - var(--qk-blue,0));
    background:linear-gradient(90deg,rgba(7,9,13,.78) 0%,rgba(7,9,13,.5) 26%,rgba(7,9,13,0) 46%)}
  .qk-sbar{display:flex;gap:6px;margin:0 0 18px;padding:0}
  .qk-sbar i{flex:1 1 0;height:3px;border-radius:3px;background:rgba(255,255,255,.18);overflow:hidden;display:block}
  .qk-sbar b{display:block;height:100%;border-radius:inherit;background:var(--qk-gold);transform-origin:0 50%;
             transform:scaleX(clamp(0, calc(var(--qk-step,0) - var(--i) + var(--qk-sp,0)), 1))}
  .qk-story .qk-kicker{display:flex;align-items:baseline;gap:10px}
  .qk-story .qk-kicker span{order:0;font:800 clamp(40px,3.4vw,56px)/.9 var(--qk-display);letter-spacing:0;color:var(--qk-gold)}
  .qk-story .qk-kicker span::after{display:none}
  .qk-story .qk-kicker .qk-sof{order:1;font:600 12px/1 var(--qk-tech);font-style:normal;letter-spacing:.14em;color:var(--qk-muted)}
  .qk-story .qk-kicker b{order:2;margin-left:4px;font:600 12px/1 var(--qk-tech);letter-spacing:.18em;color:var(--qk-ink)}
  .qk-story .qk-copy .qk-hl{margin-top:.22em}
  /* swap: lines leave upward, the new step rises in from below (stagger from the classic rules) */
  .qk-story .qk-copy.qk-swap .qk-line{transform:translateY(-14px)}
  .qk-story .qk-copy.qk-enter .qk-line{opacity:0;transform:translateY(18px);transition:none}

  @media (max-width:700px), (max-width:900px) and (orientation:portrait){
    /* phones: the step panel takes all the height between the frame and the button, so the button sits in the thumb zone at the bottom.
       Its size depends on the screen only (not on the text), so nothing jumps between steps. */
    .qk-story .qk-stage::before{display:none}
    .qk-story .qk-copy{position:relative;left:auto;right:auto;top:auto;bottom:auto;transform:none;transition:none;order:1;
                       flex:1 1 0;min-height:0;height:auto;overflow:hidden;padding:14px 0 0}
    .qk-story .qk-copy .qk-kicker{display:flex}
    .qk-story .qk-copy .qk-hl{display:block;font-size:clamp(28px,8vw,38px);margin:.3em 0 .28em;min-height:1.9em}
    .qk-story .qk-copy .qk-chips{display:flex}
    .qk-story .qk-kicker span{font-size:44px}
    .qk-story .qk-sbar{margin-bottom:16px}
    .qk-story .qk-cta-m{margin-top:12px}
    @media (max-height:700px){.qk-story .qk-copy .qk-chips{display:none}}
    @media (max-height:700px){.qk-story .qk-kicker span{font-size:34px}.qk-story .qk-copy .qk-hl{font-size:clamp(24px,7vw,30px)}.qk-story .qk-sbar{margin-bottom:12px}}
  }
  @media (prefers-reduced-motion:reduce){
    .qk-sbar b{transform:none}
  }