/* Pre-qualify popup and its reopen pill (prequal.js). Site tokens with fallbacks, so it reads the same
   on the home, the A-look inner pages and the staffing pages. */
.pqp{position:fixed;inset:0;z-index:2147483000;display:flex;align-items:center;justify-content:center;padding:16px}
.pqp[hidden]{display:none}
.pqp__dim{position:absolute;inset:0;background:rgba(29,29,31,.42)}
.pqp__box{position:relative;width:min(560px,100%);max-height:calc(100vh - 32px);max-height:calc(100dvh - 32px);overflow:auto;
  background:var(--bg,#F5F5F7);color:var(--ink,#1D1D1F);border-radius:22px;box-shadow:0 36px 90px rgba(29,29,31,.3);
  padding:24px 22px;font-family:var(--font-b,'Archivo',system-ui,-apple-system,sans-serif);letter-spacing:-.01em;outline:none}
.pqp__top{display:flex;justify-content:space-between;font:400 11px/1.2 var(--font-m,'Space Mono',ui-monospace,monospace);
  text-transform:uppercase;letter-spacing:.08em;color:var(--muted,#515154)}
.pqp__bar{height:3px;background:var(--hair,#D2D2D7);border-radius:3px;margin:12px 0 20px}
.pqp__bar i{display:block;height:100%;background:var(--espresso,#8B4A2A);border-radius:3px;transition:width .25s ease}
.pqp__h{font:700 24px/1.15 var(--font-d,'Archivo',system-ui,sans-serif);letter-spacing:-.026em;margin:0 0 6px}
.pqp__sub{color:var(--muted,#515154);font-size:16px;line-height:1.45;margin:0 0 14px}
.pqp__opts{display:grid;gap:10px;grid-template-columns:repeat(3,1fr)}
.pqp__opts--6{grid-template-columns:repeat(3,1fr)}
@media (max-width:480px){.pqp__opts--6{grid-template-columns:repeat(2,1fr)}}
.pqp__opt{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;aspect-ratio:1/1;min-height:96px;
  text-align:center;background:var(--panel,#fff);border:1px solid var(--hair,#D2D2D7);border-radius:16px;
  padding:12px 10px;font:inherit;font-size:15px;line-height:1.25;color:inherit;cursor:pointer}
.pqp__opt:hover{border-color:var(--espresso,#8B4A2A)}
.pqp__ico{width:30px;height:30px;color:var(--espresso,#8B4A2A);flex:none}
@media (max-width:480px){.pqp__opt{font-size:14px;gap:8px}.pqp__ico{width:26px;height:26px}}
.pqp__opt:focus-visible,.pqp__link:focus-visible,.pqp__cta:focus-visible,.pqp-pill:focus-visible{outline:2px solid var(--espresso,#8B4A2A);outline-offset:2px}
.pqp__foot{display:flex;flex-wrap:wrap;justify-content:space-between;gap:10px 16px;margin-top:16px}
.pqp__link{background:none;border:0;padding:6px 0;font:inherit;font-size:15px;color:var(--muted,#515154);cursor:pointer;text-decoration:underline;text-underline-offset:3px}
.pqp__card{background:var(--panel,#fff);border:1px solid var(--hair,#D2D2D7);border-radius:16px;padding:16px;margin:12px 0}
.pqp__role{font-size:20px;font-weight:700;margin:0}
.pqp__price{color:var(--muted,#515154);font-size:15px;margin:2px 0 0}
.pqp__card ul{margin:10px 0 0;padding-left:20px;font-size:16px;line-height:1.5;list-style:disc}
.pqp__card li{display:list-item;list-style:disc;margin:3px 0}
.pqp__alt{color:var(--muted,#515154);font-size:14px;margin:10px 0 0}
.pqp__offer{border:1px solid var(--espresso,#8B4A2A);background:var(--espresso-10,rgba(139,74,42,.10));border-radius:16px;padding:14px 16px;margin:12px 0;font-size:16px}
.pqp__offer p{margin:0}
.pqp__clock{font:700 26px/1.3 var(--font-m,'Space Mono',ui-monospace,monospace);color:var(--espresso,#8B4A2A);margin:4px 0 0!important}
.pqp__cta{display:block;text-align:center;background:var(--espresso,#8B4A2A);color:#fff;border-radius:99px;padding:14px;font-weight:700;font-size:16px;text-decoration:none;margin-top:10px}
.pqp__fine{color:var(--muted,#515154);font-size:13px;margin:8px 0 0}
.pqp-pill{position:fixed;left:76px;bottom:22px;z-index:2147482000;background:var(--ink,#1D1D1F);color:var(--bg,#F5F5F7);border:0;border-radius:99px;
  padding:11px 16px;font:600 14px var(--font-b,'Archivo',system-ui,sans-serif);cursor:pointer;box-shadow:0 10px 30px rgba(29,29,31,.2)}
.pqp-pill[hidden]{display:none}
html.pqp-on{overflow:hidden}
/* the site's custom cursor (a-kit.css .cur, z-index 120) hides the real one; keep it above the popup and the
   pill, or the visitor has no cursor at all over them (Owner 2026-10-20: "ung cursor naka hide hndi kita") */
html.has-cur .cur{z-index:2147483600}
/* inside the popup its "open" ring covers the answers, so the popup uses the plain system cursor */
html.pqp-on .cur{display:none!important}
html.pqp-on .pqp,html.pqp-on .pqp *{cursor:auto}
html.pqp-on .pqp button,html.pqp-on .pqp a[href],html.pqp-on .pqp [data-pq-close]{cursor:pointer}
@media (prefers-reduced-motion:reduce){.pqp__bar i{transition:none}}
/* Motion (Owner 2026-10-21: "lagyan mo ng effect pati pag pindot ... para feel tlga"). One direction only, never a
   wobble (entrances fill backwards only, so hover and press keep their own transform): the popup rises in, each step's content slides in the way the visitor is going, a pressed tile sinks,
   fills and ripples from the finger before the next question. Calm mode and reduced motion get no movement. */
@keyframes pq-dim{from{opacity:0}to{opacity:1}}
@keyframes pq-rise{from{opacity:0;transform:translateY(22px) scale(.96)}to{opacity:1;transform:none}}
@keyframes pq-in-fwd{from{opacity:0;transform:translateX(18px)}to{opacity:1;transform:none}}
@keyframes pq-in-back{from{opacity:0;transform:translateX(-18px)}to{opacity:1;transform:none}}
@keyframes pq-tile{from{opacity:0;transform:translateY(12px) scale(.97)}to{opacity:1;transform:none}}
@keyframes pq-ripple{from{transform:translate(-50%,-50%) scale(0);opacity:.35}to{transform:translate(-50%,-50%) scale(1);opacity:0}}
@keyframes pq-out{to{opacity:0;transform:translateY(12px) scale(.98)}}
.pqp:not([hidden]) .pqp__dim{animation:pq-dim .26s ease-out backwards}
.pqp:not([hidden]) .pqp__box{animation:pq-rise .46s cubic-bezier(.2,.8,.2,1) backwards}
.pqp__box[data-dir="fwd"] .pqp__h,.pqp__box[data-dir="fwd"] .pqp__sub,.pqp__box[data-dir="fwd"] .pqp__card,.pqp__box[data-dir="fwd"] .pqp__offer,
.pqp__box[data-dir="fwd"] .pqp__cta{animation:pq-in-fwd .34s cubic-bezier(.2,.8,.2,1) backwards}
.pqp__box[data-dir="back"] .pqp__h,.pqp__box[data-dir="back"] .pqp__sub,.pqp__box[data-dir="back"] .pqp__card,.pqp__box[data-dir="back"] .pqp__offer,
.pqp__box[data-dir="back"] .pqp__cta{animation:pq-in-back .34s cubic-bezier(.2,.8,.2,1) backwards}
.pqp__sub{animation-delay:.04s!important}.pqp__card{animation-delay:.08s!important}.pqp__offer{animation-delay:.14s!important}.pqp__cta{animation-delay:.2s!important}
.pqp__opt{position:relative;overflow:hidden;animation:pq-tile .38s cubic-bezier(.2,.8,.2,1) backwards;animation-delay:calc(.06s + var(--i,0) * .045s);
  transition:transform .18s cubic-bezier(.2,.8,.2,1),border-color .18s ease,background-color .18s ease,box-shadow .18s ease}
.pqp__opt .pqp__ico{transition:transform .22s cubic-bezier(.2,.8,.2,1)}
@media (hover:hover){.pqp__opt:hover{transform:translateY(-3px);box-shadow:0 10px 24px rgba(29,29,31,.10)}.pqp__opt:hover .pqp__ico{transform:translateY(-2px)}}
.pqp__opt:active{transform:scale(.95);box-shadow:none}
.pqp__opt.is-picked{border-color:var(--espresso,#8B4A2A);background:var(--espresso-10,rgba(139,74,42,.10));transform:scale(.97);box-shadow:none}
.pqp__opt.is-picked .pqp__ico{transform:scale(1.14)}
.pqp__opt i.pqp__rip{position:absolute;left:var(--x,50%);top:var(--y,50%);width:240%;aspect-ratio:1;border-radius:50%;
  background:var(--espresso,#8B4A2A);pointer-events:none;animation:pq-ripple .5s ease-out both}
.pqp__cta{transition:transform .18s cubic-bezier(.2,.8,.2,1),box-shadow .18s ease}
@media (hover:hover){.pqp__cta:hover{transform:translateY(-2px);box-shadow:0 10px 24px rgba(139,74,42,.28)}}
.pqp__cta:active{transform:scale(.97)}
.pqp.is-out .pqp__box{animation:pq-out .18s ease-in both}.pqp.is-out .pqp__dim{animation:pq-dim .18s ease-in reverse both}
.pqp-pill{transition:transform .18s cubic-bezier(.2,.8,.2,1)}.pqp-pill:active{transform:scale(.95)}
@media (prefers-reduced-motion:reduce){.pqp *,.pqp,.pqp-pill{animation:none!important;transition:none!important}.pqp__opt:hover,.pqp__opt.is-picked,.pqp__opt:active{transform:none}}
html[data-motion="calm"] .pqp *,html[data-motion="calm"] .pqp,html[data-motion="calm"] .pqp-pill{animation:none!important;transition:none!important}
html[data-motion="calm"] .pqp__opt:hover,html[data-motion="calm"] .pqp__opt.is-picked,html[data-motion="calm"] .pqp__opt:active{transform:none}