:root{
 --navy:#0b2a6f;--blue:#1d55c9;--blue-d:#143f9c;--green:#1f8a3b;--green-d:#176b2d;
 --bg:#f3f7fc;--card:#fff;--ink:#16213e;--mut:#5a6785;--line:#dbe5f3;
 --tint:#e7f0fd;--gtint:#e3f4ea;--r:14px;
 --sh:0 1px 2px rgba(11,42,111,.05),0 6px 20px rgba(11,42,111,.07);
 --sh2:0 2px 4px rgba(11,42,111,.06),0 14px 32px rgba(11,42,111,.14)}
.vq *{box-sizing:border-box}
.vq,.vq button,.vq input,.vq summary{font-family:inherit}
.vq{color:var(--ink);overflow-x:clip;-webkit-font-smoothing:antialiased}
.vq h1,.vq h2,.vq h3{color:var(--navy)!important;margin:0;letter-spacing:-.01em}
.vq p{color:var(--mut);margin:0}
.vq .wrap{max-width:1180px;margin:0 auto;padding:0 24px}
.vq .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:0;border-radius:999px;padding:13px 28px;font-weight:600;font-size:14.5px;color:#fff!important;cursor:pointer;text-decoration:none;transition:background .2s,transform .15s,box-shadow .2s}
.vq .btn:hover{transform:translateY(-1px);box-shadow:0 8px 18px rgba(11,42,111,.22)}
.vq .btn.g{background:var(--green)}.vq .btn.g:hover{background:var(--green-d)}
.vq .btn.b{background:var(--navy)}.vq .btn.b:hover{background:var(--blue)}
.vq a:focus-visible,.vq button:focus-visible,.vq summary:focus-visible,.vq input:focus-visible{outline:3px solid #7aa7ff;outline-offset:2px}

/* banner 1600 x 350 */
.hero{position:relative;max-width:1600px;margin:0 auto;height:350px;background:linear-gradient(100deg,#eef5fd,#dbeafa 55%,#c9def5);display:flex;align-items:center;overflow:hidden}
.hero .wrap{display:grid;grid-template-columns:1fr;align-items:center;height:100%;width:100%}
.hero .wrap>div{position:relative;z-index:2;max-width:620px}
.hero small{display:block;color:var(--blue)!important;font-weight:700;letter-spacing:.14em;font-size:12.5px}
.hero h1{font-size:clamp(26px,3vw,36px);line-height:1.2;margin:10px 0 12px;color:#0b5a3c!important}
.hero p{max-width:470px;margin:0 0 20px;line-height:1.6;font-size:15px;color:var(--ink)!important}
.hero .himg{position:absolute;right:0;top:0;width:58%;height:100%;object-fit:cover;object-position:center 25%;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%);mask-image:linear-gradient(to right,transparent,#000 30%)}

/* jobs */
.jobs{background:var(--bg);padding:48px 0 64px}
.hire{position:relative;overflow:hidden;display:flex;align-items:center;gap:24px;background:linear-gradient(100deg,#0b2a6f,#1d55c9 75%);border-radius:var(--r);padding:26px 34px;margin-bottom:34px;box-shadow:var(--sh2)}
.hire:before,.hire:after{content:"";position:absolute;border-radius:50%;background:rgba(255,255,255,.07)}
.hire:before{width:220px;height:220px;right:-50px;top:-90px}.hire:after{width:140px;height:140px;right:150px;bottom:-80px}
.hire>*{position:relative;z-index:1}
.hire h3{color:#fff!important;font-size:24px}.hire p{margin:6px 0 0;color:#dbe7ff!important;font-size:14px;line-height:1.55}
.hire .cnt{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.25);border-radius:12px;padding:12px 26px;text-align:center;font-size:12.5px;color:#fff;white-space:nowrap}
.hire .cnt b{display:block;font-size:32px;line-height:1.1}
.hire .em{font-size:40px}
.jhead{display:flex;justify-content:space-between;align-items:flex-end;gap:20px;flex-wrap:wrap;margin-bottom:24px}
.jhead h2{font-size:clamp(24px,2.4vw,30px)}.jhead p{margin-top:6px;font-size:14.5px}
.search{background:#fff;border:1px solid var(--line);border-radius:999px;padding:12px 22px;width:360px;max-width:100%;box-shadow:var(--sh);transition:border-color .2s}
.search:focus-within{border-color:var(--blue)}
.search input{border:0;outline:0!important;width:100%;font-size:14px;background:none;color:var(--ink)}
.jgrid{display:grid;grid-template-columns:250px 1fr;gap:26px;align-items:start}
.filters{background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:22px;box-shadow:var(--sh)}
@media(min-width:901px){.filters{position:sticky!important;top:110px;align-self:start}}
.filters h4{margin:0 0 16px;color:var(--navy);font-size:15px;font-weight:700}
.filters label{display:flex;gap:10px;align-items:center;font-size:13.5px;margin:0 0 12px;cursor:pointer;color:var(--ink);line-height:1.35}
.filters input{width:16px;height:16px;accent-color:var(--blue);flex:none}
.filters .btn{width:100%;border-radius:10px;background:var(--blue);margin-top:10px;padding:11px}
.filters .btn:hover{background:var(--blue-d)}
.job{background:var(--card);border:1px solid var(--line);border-left:4px solid var(--blue);border-radius:var(--r);padding:22px 26px;margin-bottom:16px;display:flex;justify-content:space-between;gap:24px;align-items:center;box-shadow:var(--sh);transition:box-shadow .2s,transform .2s,border-color .2s}
.job:hover{box-shadow:var(--sh2);transform:translateY(-2px);border-left-color:var(--green)}
.job h3{font-size:18px}
.tags{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:10px 0;font-size:12.5px;color:var(--mut)}
.tag{background:var(--tint);color:var(--blue-d);padding:4px 12px;border-radius:6px;font-weight:600}
.job p{font-size:14px;line-height:1.6;color:var(--mut)}
.ft{background:var(--gtint);color:var(--green-d);font-size:12px;font-weight:600;padding:4px 12px;border-radius:6px;white-space:nowrap}
.jr{display:flex;gap:18px;align-items:center}
.job .btn{border-radius:10px;padding:12px 24px;white-space:nowrap;font-size:14px}
.none{display:none;padding:40px 20px;text-align:center;color:var(--mut);background:#fff;border:1px dashed var(--line);border-radius:var(--r)}

/* cta */
.cta{background:linear-gradient(100deg,#fff6ea,#fde5c8);padding:54px 0;border-top:1px solid #f6dfc0;border-bottom:1px solid #f6dfc0}
.cta .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px}
.cta h2{font-size:clamp(24px,2.4vw,30px);margin-bottom:8px}.cta p{max-width:520px;line-height:1.65;color:#5b5240!important}

/* process + faq */
.pf{padding:60px 0;background:#fff}
.pf .wrap{display:grid;grid-template-columns:1fr 1fr;gap:28px;align-items:stretch}
.card{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:30px;box-shadow:var(--sh)}
.card h2{font-size:22px;margin-bottom:24px}
.steps{display:grid}
.step{display:flex;gap:16px;position:relative;padding-bottom:24px}
.step:last-child{padding-bottom:0}
.step:not(:last-child):after{content:"";position:absolute;left:23px;top:52px;bottom:4px;width:2px;background:linear-gradient(#bfe3cc,#e3f4ea)}
.step .ico{flex:none;width:48px;height:48px;border-radius:50%;background:var(--gtint);color:var(--green);display:grid;place-items:center;box-shadow:0 0 0 5px #f4fbf7}
.step b{display:block;color:var(--navy);font-size:15.5px}
.step span{display:block;font-size:13.5px;color:var(--mut);margin-top:3px;line-height:1.5}
.step small{color:var(--green-d);font-weight:700;font-size:11.5px;letter-spacing:.06em}
details{border:1px solid var(--line);border-radius:12px;margin-bottom:12px;background:#fff;transition:background .2s,border-color .2s}
details[open]{background:var(--bg);border-color:#bcd3f1}
summary{cursor:pointer;font-weight:600;font-size:14.5px;padding:15px 18px;list-style:none;display:flex;justify-content:space-between;gap:14px;align-items:center;color:var(--navy)}
summary::-webkit-details-marker{display:none}
summary:after{content:"+";flex:none;width:26px;height:26px;border-radius:50%;background:var(--tint);color:var(--blue);display:grid;place-items:center;font-size:18px;line-height:1;transition:transform .2s}
details[open] summary:after{transform:rotate(45deg)}
details p{padding:0 18px 18px;font-size:14px;line-height:1.65}

/* popup */
.ov{position:fixed;inset:0;background:rgba(8,20,52,.6);-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);display:none;align-items:center;justify-content:center;z-index:9999;padding:16px}
.ov.on{display:flex}
.modal{background:#fff;border-radius:18px;width:100%;max-width:450px;max-height:94vh;overflow:auto;padding:30px;position:relative;box-shadow:0 24px 60px rgba(8,20,52,.35);animation:pop .22s ease}
@keyframes pop{from{transform:translateY(14px);opacity:0}to{transform:none;opacity:1}}
.modal h3{font-size:23px}.modal .sub{display:inline-block;background:var(--tint);color:var(--blue-d);font-size:13px;font-weight:600;padding:4px 12px;border-radius:6px;margin:8px 0 4px}
.modal label{display:block;font-size:13px;font-weight:600;margin:16px 0 6px;color:var(--ink)}
.modal input[type=text],.modal input[type=email],.modal input[type=tel],.modal input[type=file]{width:100%;padding:12px 14px;border:1px solid #c9d8ee;border-radius:10px;font-size:16px;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.modal input:focus{outline:0;border-color:var(--blue);box-shadow:0 0 0 3px rgba(29,85,201,.18)}
.modal input[type=file]{padding:9px 12px;background:var(--bg)}
.modal .btn{width:100%;margin-top:24px;background:var(--navy);border-radius:12px;padding:14px}
.x{position:absolute;top:12px;right:14px;width:34px;height:34px;border-radius:50%;background:var(--bg);border:0;font-size:22px;line-height:1;cursor:pointer;color:var(--mut)}
.x:hover{background:var(--tint);color:var(--navy)}
.note{font-size:12px;color:var(--mut);margin-top:6px}
.toast{padding:13px 20px;text-align:center;font-size:14px;font-weight:600}
.toast.ok{background:#dff3e6;color:#17692d}.toast.error{background:#fde4e4;color:#a12020}

@media(prefers-reduced-motion:reduce){.vq *{transition:none!important;animation:none!important}}

/* tablet */
@media(max-width:1000px){
 .jgrid{grid-template-columns:210px 1fr;gap:20px}
 .job{flex-direction:column;align-items:stretch}
 .jr{justify-content:space-between}.job .btn{flex:1}
}
/* mobile */
@media(max-width:900px){
 .vq .wrap{padding:0 18px}
 .hero{height:auto;padding:34px 0 0}
 .hero .wrap{height:auto}
 .hero .himg{position:static;width:100%;height:200px;margin-top:22px;border-radius:14px 14px 0 0;-webkit-mask-image:none;mask-image:none}
 .hero p{font-size:14.5px}
 .hire{flex-direction:column;text-align:center;padding:24px 20px;margin-bottom:26px}
 .jobs{padding:34px 0 48px}
 .jgrid,.pf .wrap{grid-template-columns:1fr}
 .filters{position:static!important;padding:16px 18px}
 .fopts{display:flex;flex-wrap:wrap;gap:8px}
 .fopts label{margin:0;background:var(--bg);border:1px solid var(--line);border-radius:999px;padding:8px 14px;font-size:13px}
 .filters .btn{margin-top:14px}
 .search{width:100%}
 .job{padding:18px}
 .cta{padding:40px 0}.cta .wrap{flex-direction:column;align-items:flex-start}.cta .btn{width:100%}
 .pf{padding:40px 0}.card{padding:22px 18px}
 .ov{align-items:flex-end;padding:0}
 .modal{max-width:none;border-radius:20px 20px 0 0;max-height:92vh;padding:26px 20px 24px}
}

/* =====================================================================
   SERNEXUSS BRAND COLOURS + TICKET / BOARDING-PASS FEEL (rest of the code unchanged)
   ===================================================================== */
:root{--navy:#0a1f44;--blue:#043d9a;--blue-d:#03307a;--green:#17b111;--green-d:#12900d;--line:#d5e0f0;--tint:#e8f0fc;--gtint:#e6f7e5;--grad:linear-gradient(135deg,#043d9a,#17b111)}
.vq .btn.g,.vq .btn.b,.vq .filters .btn,.vq .modal .btn{background:var(--grad)}
.vq .btn.g:hover,.vq .btn.b:hover,.vq .filters .btn:hover,.vq .modal .btn:hover{background:var(--grad);filter:brightness(1.08)}
.vq .hero h1{color:#0a1f44!important}

/* small banner tag: dashed ticket pill */
.vq .hero small{display:inline-flex;align-items:center;gap:8px;padding:6px 16px;background:#fff;border:1px dashed rgba(4,61,154,.4);border-radius:999px;font-size:11.5px}
.vq .hero small::before{content:"";width:8px;height:8px;border-radius:50%;background:#17b111;box-shadow:0 0 0 4px rgba(23,177,17,.18)}

/* "We're Hiring" strip = ticket: count stub on the right */
.vq .hire{background:linear-gradient(100deg,#061430,#043d9a 62%,#128a2a)}
.vq .hire .cnt{border-style:dashed;border-color:rgba(255,255,255,.5)}
@media(min-width:901px){
 .vq .hire{--hx:calc(100% - 206px);border-radius:20px;box-shadow:none;
  -webkit-mask:radial-gradient(circle 11px at var(--hx) 0,transparent 10.5px,#000 11px),radial-gradient(circle 11px at var(--hx) 100%,transparent 10.5px,#000 11px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 11px at var(--hx) 0,transparent 10.5px,#000 11px),radial-gradient(circle 11px at var(--hx) 100%,transparent 10.5px,#000 11px);
  mask-composite:intersect}
 .vq .hire .cnt{flex:none;width:160px;padding:12px 10px;background:none;border:0;position:relative}
 .vq .hire .cnt::before{content:"";position:absolute;left:-13px;top:-60px;bottom:-60px;border-left:2px dashed rgba(255,255,255,.6)}
}

/* search + filter box */
.vq .search{border-style:dashed;border-color:#b4c4dc}
.vq .search:focus-within{border-style:solid}
.vq .filters{border:1px dashed #b4c4dc}
.vq .filters h4{padding-bottom:12px;border-bottom:2px dashed #d5e0f0}
.vq .tag,.vq .ft{border:1px dashed rgba(4,61,154,.28);border-radius:999px}
.vq .ft{border-color:rgba(23,177,17,.45)}

/* each job = boarding pass: "Full Time + Apply" stub on the right */
.vq #list{filter:drop-shadow(0 8px 14px rgba(4,61,154,.1))}
.vq .job{border:0;border-left:5px solid var(--blue);border-radius:18px;box-shadow:none;background-origin:border-box}
.vq .job:hover{box-shadow:none}
.vq .job h3{font-size:19px}
@media(min-width:1001px){
 .vq .job{--jx:calc(100% - 292px);background:linear-gradient(90deg,#fff var(--jx),#eef4fd var(--jx));
  -webkit-mask:radial-gradient(circle 10px at var(--jx) 0,transparent 9.5px,#000 10px),radial-gradient(circle 10px at var(--jx) 100%,transparent 9.5px,#000 10px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 10px at var(--jx) 0,transparent 9.5px,#000 10px),radial-gradient(circle 10px at var(--jx) 100%,transparent 9.5px,#000 10px);
  mask-composite:intersect}
 .vq .jr{flex:none;width:254px;justify-content:flex-end;position:relative}
 .vq .jr::before{content:"";position:absolute;left:-13px;top:-80px;bottom:-80px;border-left:2px dashed #bccbe2}
}
@media(max-width:1000px){
 .vq .job{--jy:var(--tk-y,140px);background:linear-gradient(180deg,#fff var(--jy),#eef4fd var(--jy));
  -webkit-mask:radial-gradient(circle 9px at 0 var(--jy),transparent 8.5px,#000 9px),radial-gradient(circle 9px at 100% var(--jy),transparent 8.5px,#000 9px);
  -webkit-mask-composite:source-in;
  mask:radial-gradient(circle 9px at 0 var(--jy),transparent 8.5px,#000 9px),radial-gradient(circle 9px at 100% var(--jy),transparent 8.5px,#000 9px);
  mask-composite:intersect}
 .vq .jr{position:relative;padding-top:4px}
 .vq .jr::before{content:"";position:absolute;left:0;right:0;top:-12px;border-top:2px dashed #bccbe2}
}

/* CTA strip */
.vq .cta{border-top:2px dashed #ecc795;border-bottom:2px dashed #ecc795}

/* process + FAQ cards: tear line below the heading, side notches (JS) */
.vq .pf .wrap{filter:drop-shadow(0 8px 16px rgba(4,61,154,.09))}
.vq .card{border:0;box-shadow:none;border-radius:22px;background:linear-gradient(180deg,#eef4fd var(--tk-y,78px),#fff var(--tk-y,78px))}
.vq .card h2{margin:0 -30px 24px;padding:0 30px 20px;border-bottom:2px dashed #bccbe2}
.vq .card.tk{-webkit-mask:radial-gradient(circle 10px at 0 var(--tk-y),transparent 9.5px,#000 10px),radial-gradient(circle 10px at 100% var(--tk-y),transparent 9.5px,#000 10px);
 -webkit-mask-composite:source-in;
 mask:radial-gradient(circle 10px at 0 var(--tk-y),transparent 9.5px,#000 10px),radial-gradient(circle 10px at 100% var(--tk-y),transparent 9.5px,#000 10px);
 mask-composite:intersect}
.vq .step:not(:last-child):after{width:0;background:none;border-left:2px dashed #9fd6a0}
.vq .step .ico{background:#fff;border:1.5px dashed #17b111;box-shadow:0 0 0 5px #eefaee}
.vq details{border:1px dashed #b4c4dc}
.vq details[open]{border-style:solid;border-color:#9db8e6}

/* apply popup */
.vq .modal h3{padding-right:40px}
.vq .modal .sub{border:1px dashed rgba(4,61,154,.35);border-radius:999px}
.vq .modal .sub + input,.vq .modal .sub{margin-bottom:0}
.vq .modal label[for=n]{margin-top:18px;padding-top:18px;border-top:2px dashed #bccbe2}
.vq .modal input[type=text],.vq .modal input[type=email],.vq .modal input[type=tel],.vq .modal input[type=file]{border-style:dashed;border-color:#b4c4dc}
.vq .modal input:focus{border-style:solid}
@media(max-width:900px){
 .vq .card h2{margin:0 -18px 20px;padding:0 18px 16px}
}