:root {
  --white:#ffffff;
  --off:#fafbfd;
  --bg:#f0f3fb;
  --bg2:#e6ebf7;
  --card:#ffffff;
  --border:#e0e8f5;
  --border2:#c8d5ee;
  --ink:#080e22;
  --ink2:#2e3a5e;
  --ink3:#637098;
  --ink4:#a8b4cf;
  --amber:#f59e0b;
  --amber-l:#fef3c7;
  --amber-d:#92400e;
  --green:#059669;
  --green-l:#d1fae5;
  --sky:#0284c7;
  --sky-l:#e0f2fe;
  --violet:#7c3aed;
  --violet-l:#ede9fe;
  --rose:#e11d48;
  --rose-l:#ffe4e6;
  --teal:#0d9488;
  --teal-l:#ccfbf1;
  --r:16px;--r-sm:10px;--r-lg:22px;--r-xl:28px;
  --sh-sm:0 1px 4px rgba(8,14,34,.06),0 0 0 1px rgba(8,14,34,.04);
  --sh-md:0 4px 24px rgba(8,14,34,.09),0 0 0 1px rgba(8,14,34,.04);
  --sh-lg:0 12px 48px rgba(8,14,34,.13),0 0 0 1px rgba(8,14,34,.04);
  --sh-xl:0 24px 80px rgba(8,14,34,.18);
  --card-h:226px;
}
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box;}
html{scroll-behavior:smooth;}
body{font-family:'Bricolage Grotesque',sans-serif;background:var(--bg);color:var(--ink);min-height:100vh;overflow-x:hidden;-webkit-font-smoothing:antialiased;}

/* ══════════════════════════
   KEYFRAMES
══════════════════════════ */
@keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}
@keyframes scaleIn{from{opacity:0;transform:scale(.93)}to{opacity:1;transform:scale(1)}}
@keyframes shimmer{0%{background-position:-700px 0}100%{background-position:700px 0}}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes pulse{0%,100%{transform:scale(1);opacity:.7}50%{transform:scale(1.45);opacity:0}}
@keyframes ticker{0%{transform:translateX(0)}100%{transform:translateX(-50%)}}
@keyframes slideModal{from{opacity:0;transform:translateY(32px) scale(.95)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes float{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-12px) rotate(3deg)}}
@keyframes floatB{0%,100%{transform:translateY(0) rotate(0deg)}50%{transform:translateY(-8px) rotate(-2deg)}}
@keyframes gradShift{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes cardIn{from{opacity:0;transform:translateY(22px) scale(.97)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes orbPulse{0%,100%{transform:scale(1);opacity:.35}50%{transform:scale(1.12);opacity:.55}}
@keyframes textGrad{0%,100%{background-position:0% 50%}50%{background-position:100% 50%}}
@keyframes lineGrow{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@keyframes badgePop{from{opacity:0;transform:scale(.8) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes stripeIn{from{transform:scaleY(0)}to{transform:scaleY(1)}}

.fu{animation:fadeUp .6s cubic-bezier(.22,1,.36,1) both;}
.fi{animation:fadeIn .45s ease both;}
.si{animation:scaleIn .38s cubic-bezier(.22,1,.36,1) both;}
.d1{animation-delay:.08s}.d2{animation-delay:.16s}.d3{animation-delay:.25s}.d4{animation-delay:.34s}.d5{animation-delay:.44s}.d6{animation-delay:.54s}

/* ══════════════════════════
   TICKER
══════════════════════════ */
.ticker{background:var(--ink);overflow:hidden;white-space:nowrap;padding:.52rem 0;}
.ticker-inner{display:inline-flex;animation:ticker 38s linear infinite;}
.ticker-inner:hover{animation-play-state:paused;}
.t-item{display:inline-flex;align-items:center;gap:.5rem;padding:0 2.2rem;font-size:.74rem;font-weight:500;color:rgba(255,255,255,.55);}
.t-item b{color:var(--amber);}
.t-dot{width:5px;height:5px;border-radius:50%;background:var(--amber);opacity:.6;}

/* ══════════════════════════
   NAV
══════════════════════════ */
nav{position:sticky;top:0;z-index:200;height:64px;display:flex;align-items:center;padding:0 2rem;gap:1rem;background:rgba(255,255,255,.88);backdrop-filter:blur(24px) saturate(180%);border-bottom:1px solid var(--border);}
.logo{display:flex;align-items:center;gap:.6rem;text-decoration:none;font-size:1.28rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);flex-shrink:0;}
.logo-box{width:33px;height:33px;background:var(--ink);border-radius:9px;display:flex;align-items:center;justify-content:center;position:relative;overflow:hidden;}
.logo-box::after{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 40%,rgba(245,158,11,.3));pointer-events:none;}
.logo-box svg{color:var(--amber);position:relative;z-index:1;}
.logo em{color:var(--amber);font-style:normal;}
.nav-sp{flex:1;}
.nlinks{display:flex;gap:.1rem;}
.nbtn{padding:.44rem .95rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.86rem;font-weight:500;color:var(--ink3);background:none;border:none;border-radius:var(--r-sm);cursor:pointer;transition:all .2s;text-decoration:none;position:relative;}
.nbtn::after{content:'';position:absolute;bottom:4px;left:50%;transform:translateX(-50%) scaleX(0);width:60%;height:2px;background:var(--amber);border-radius:2px;transition:transform .2s cubic-bezier(.22,1,.36,1);}
.nbtn:hover,.nbtn.active{color:var(--ink);font-weight:700;}
.nbtn:hover::after,.nbtn.active::after{transform:translateX(-50%) scaleX(1);}
.nav-live{display:flex;align-items:center;gap:.4rem;padding:.3rem .85rem;background:var(--green-l);border-radius:999px;font-size:.76rem;font-weight:700;color:var(--green);margin-left:.5rem;flex-shrink:0;}
.live-dot{width:7px;height:7px;border-radius:50%;background:var(--green);position:relative;}
.live-dot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--green);opacity:.4;animation:pulse 1.5s ease-out infinite;}

/* ══════════════════════════
   HERO
══════════════════════════ */
.hero{position:relative;overflow:hidden;padding:6rem 2rem 4.5rem;text-align:center;}

/* multi-layer dynamic background */
.hero-bg{position:absolute;inset:0;z-index:0;
  background:
    radial-gradient(ellipse 70% 50% at 15% 0%, rgba(245,158,11,.12), transparent 55%),
    radial-gradient(ellipse 55% 65% at 85% 5%, rgba(2,132,199,.09), transparent 55%),
    radial-gradient(ellipse 90% 80% at 50% 110%, rgba(124,58,237,.07), transparent 55%),
    #f0f3fb;
  animation:gradShift 12s ease infinite;
  background-size:200% 200%;}
.hero-grid{position:absolute;inset:0;z-index:1;
  background-image:linear-gradient(rgba(8,14,34,.04) 1px,transparent 1px),linear-gradient(90deg,rgba(8,14,34,.04) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(ellipse 85% 100% at 50% 0%,black,transparent 72%);}

/* floating decorative orbs */
.hero-orb{position:absolute;border-radius:50%;pointer-events:none;z-index:1;}
.hero-orb-1{width:320px;height:320px;left:-80px;top:-60px;background:radial-gradient(circle,rgba(245,158,11,.13),transparent 70%);animation:orbPulse 6s ease-in-out infinite;}
.hero-orb-2{width:240px;height:240px;right:-50px;top:20px;background:radial-gradient(circle,rgba(2,132,199,.11),transparent 70%);animation:orbPulse 8s ease-in-out infinite 2s;}
.hero-orb-3{width:180px;height:180px;left:50%;bottom:0;transform:translateX(-50%);background:radial-gradient(circle,rgba(124,58,237,.09),transparent 70%);animation:orbPulse 7s ease-in-out infinite 1s;}

/* floating graphic shapes */
.hero-shapes{position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden;}
.sh-dot{position:absolute;border-radius:50%;}
.sh-dot-1{width:8px;height:8px;left:10%;top:25%;background:var(--amber);opacity:.35;animation:float 5s ease-in-out infinite;}
.sh-dot-2{width:5px;height:5px;left:88%;top:35%;background:var(--sky);opacity:.4;animation:floatB 7s ease-in-out infinite 1.5s;}
.sh-dot-3{width:10px;height:10px;left:75%;top:70%;background:var(--violet);opacity:.3;animation:float 6s ease-in-out infinite 3s;}
.sh-ring{position:absolute;border-radius:50%;border:1.5px solid;}
.sh-ring-1{width:60px;height:60px;left:5%;top:60%;border-color:rgba(245,158,11,.25);animation:floatB 8s ease-in-out infinite 0.5s;}
.sh-ring-2{width:40px;height:40px;right:8%;top:50%;border-color:rgba(2,132,199,.2);animation:float 6.5s ease-in-out infinite 2s;}

.hero>*:not(.hero-bg):not(.hero-grid):not(.hero-orb):not(.hero-shapes){position:relative;z-index:2;}

.hero-badge{display:inline-flex;align-items:center;gap:.55rem;background:rgba(255,255,255,.9);border:1px solid var(--border2);border-radius:999px;padding:.42rem 1.1rem;font-size:.77rem;font-weight:600;color:var(--ink2);box-shadow:var(--sh-sm),0 0 0 4px rgba(5,150,105,.06);margin-bottom:1.85rem;animation:badgePop .6s cubic-bezier(.22,1,.36,1) both;}
.hbdot{width:8px;height:8px;border-radius:50%;background:var(--green);position:relative;flex-shrink:0;}
.hbdot::after{content:'';position:absolute;inset:-3px;border-radius:50%;background:var(--green);opacity:.35;animation:pulse 1.5s ease-out infinite;}

.hero h1{font-size:clamp(2.6rem,5.8vw,4.4rem);font-weight:800;letter-spacing:-.045em;line-height:1.05;color:var(--ink);margin-bottom:1.2rem;max-width:820px;margin-left:auto;margin-right:auto;}
.hero h1 em{font-family:'Lora',serif;font-style:italic;font-weight:600;
  background:linear-gradient(120deg,#f59e0b 0%,#f97316 40%,#ef4444 80%,#f59e0b 100%);
  background-size:200% 200%;
  -webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;
  animation:textGrad 5s ease infinite;
  transition:opacity .3s ease, transform .3s ease;
  display:inline-block;}
.hero-sub{font-size:1.02rem;color:var(--ink3);max-width:520px;margin:0 auto 2.8rem;line-height:1.78;font-weight:400;}

/* hero stats */
.hero-stats{display:flex;justify-content:center;flex-wrap:wrap;gap:.7rem;margin-bottom:3.2rem;}
.stat-pill{display:flex;align-items:center;gap:.6rem;background:var(--white);border:1px solid var(--border);border-radius:999px;padding:.52rem 1.1rem;box-shadow:var(--sh-sm);font-size:.82rem;font-weight:600;color:var(--ink2);transition:all .25s;cursor:default;}
.stat-pill:hover{transform:translateY(-3px);box-shadow:var(--sh-md);border-color:var(--border2);}
.spn{font-size:1.05rem;font-weight:800;color:var(--ink);}

/* search block */
.sb{max-width:850px;margin:0 auto;background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-xl);box-shadow:var(--sh-lg);padding:1.1rem;display:flex;gap:.65rem;flex-wrap:wrap;}
.si-wrap{flex:1;min-width:200px;position:relative;}
.si-wrap svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--ink4);pointer-events:none;}
.si-input{width:100%;padding:.8rem 1rem .8rem 2.7rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.9rem;color:var(--ink);background:var(--off);outline:none;transition:all .22s;}
.si-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.13);background:var(--white);}
.si-input::placeholder{color:var(--ink4);}
.sf-wrap{position:relative;}
.sf-wrap svg{position:absolute;left:.9rem;top:50%;transform:translateY(-50%);color:var(--ink4);pointer-events:none;z-index:1;}
.sf{appearance:none;padding:.8rem 2.1rem .8rem 2.7rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.86rem;color:var(--ink2);background:var(--off);outline:none;cursor:pointer;min-width:148px;transition:all .22s;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11' viewBox='0 0 24 24' fill='none' stroke='%23adb8d4' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .75rem center;}
.sf:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.13);}
.go-btn{padding:.8rem 1.5rem;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;display:flex;align-items:center;gap:.5rem;transition:all .22s;flex-shrink:0;}
.go-btn:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 22px rgba(245,158,11,.32);}

/* domain chips */
.d-chips{display:flex;flex-wrap:wrap;justify-content:center;gap:.48rem;margin-top:1.9rem;}
.d-chip{padding:.36rem .9rem;background:var(--white);border:1.5px solid var(--border);border-radius:999px;font-family:'Bricolage Grotesque',sans-serif;font-size:.78rem;font-weight:600;color:var(--ink3);cursor:pointer;transition:all .2s;}
.d-chip:hover{border-color:var(--amber);color:var(--ink);}
.d-chip.active{background:var(--ink);color:#fff;border-color:var(--ink);box-shadow:0 2px 10px rgba(8,14,34,.18);}

/* ══════════════════════════
   JOBS SECTION
══════════════════════════ */
.jobs-sec{padding:2.5rem 2rem 5rem;max-width:1260px;margin:0 auto;}
.sec-hdr{display:flex;align-items:center;justify-content:space-between;margin-bottom:1.6rem;flex-wrap:wrap;gap:.8rem;}
.sec-title{font-size:1.3rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);display:flex;align-items:center;gap:.6rem;}
#cntBadge{font-size:.8rem;font-weight:600;color:var(--ink3);background:var(--bg2);border-radius:999px;padding:.18rem .6rem;}
.sort-row{display:flex;align-items:center;gap:.6rem;}
.sort-lbl{font-size:.8rem;font-weight:500;color:var(--ink3);}
.sort-sel{appearance:none;padding:.48rem 2rem .48rem .8rem;border:1.5px solid var(--border);border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.82rem;color:var(--ink2);background:var(--white);outline:none;cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23adb8d4' stroke-width='2.5'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
  background-repeat:no-repeat;background-position:right .6rem center;}

/* ── 3-COLUMN VERTICAL CARD GRID ── */
.jgrid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:1rem;
}

/* ── JOB CARD (vertical) ── */
.jcard{
  background:var(--white);
  border:1.5px solid var(--border);
  border-radius:14px;
  overflow:hidden;
  cursor:pointer;
  transition:transform .22s cubic-bezier(.22,1,.36,1), box-shadow .22s, border-color .22s;
  position:relative;
  display:flex;
  flex-direction:column;
  animation:cardIn .5s cubic-bezier(.22,1,.36,1) both;
}
.jcard:hover{transform:translateY(-5px) scale(1.01);box-shadow:var(--sh-lg);border-color:var(--border2);}

/* top color stripe */
.card-stripe{height:4px;width:100%;flex-shrink:0;transform-origin:left;animation:stripeIn .4s cubic-bezier(.22,1,.36,1) both;}

/* card body */
.cbody{padding:1rem 1rem .65rem;display:flex;flex-direction:column;gap:.55rem;flex:1;}
.card-top{display:flex;align-items:flex-start;gap:.7rem;}
.cavi{width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:.85rem;font-weight:800;color:#fff;flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;}
.cinfo{flex:1;min-width:0;}
.crole{font-size:.88rem;font-weight:700;letter-spacing:-.018em;color:var(--ink);line-height:1.25;margin-bottom:.2rem;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;}
.cco{font-size:.75rem;color:var(--ink3);font-weight:500;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}

/* card meta row */
.cmeta{display:flex;flex-wrap:wrap;gap:.35rem;margin-top:.1rem;}
.mc{display:inline-flex;align-items:center;gap:.28rem;font-size:.7rem;font-weight:600;padding:.18rem .55rem;border-radius:6px;border:1px solid var(--border);color:var(--ink3);background:var(--bg);}
.mc svg{flex-shrink:0;color:var(--ink4);}

/* card footer */
.cfoot{
  padding:.6rem 1rem .8rem;
  display:flex;
  align-items:center;
  justify-content:space-between;
  border-top:1px solid var(--border);
  margin-top:auto;
}
.stip{font-size:.7rem;font-weight:700;color:var(--green);background:var(--green-l);padding:.18rem .55rem;border-radius:6px;white-space:nowrap;}
.cdate{font-size:.65rem;color:var(--ink4);font-weight:500;}
.cta-peek{font-size:.68rem;font-weight:700;color:var(--ink);background:var(--bg2);border-radius:6px;padding:.2rem .55rem;transition:all .18s;}
.jcard:hover .cta-peek{background:var(--amber);color:var(--ink);}

/* badges */
.new-badge{font-size:.6rem;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:#fff;background:var(--green);border-radius:5px;padding:.16rem .45rem;}

/* skeleton */
.skel{background:linear-gradient(90deg,var(--border) 25%,var(--bg2) 50%,var(--border) 75%);background-size:700px 100%;animation:shimmer 1.4s infinite;border-radius:8px;}

/* empty */
.empty{grid-column:1/-1;text-align:center;padding:5rem 2rem;}
.empty-icon{width:70px;height:70px;background:var(--bg2);border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 1.2rem;font-size:1.8rem;}
.empty h3{font-size:1.1rem;font-weight:700;color:var(--ink);margin-bottom:.4rem;}
.empty p{color:var(--ink3);font-size:.88rem;}
.clr-btn{margin-top:1.2rem;padding:.58rem 1.35rem;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.86rem;font-weight:700;cursor:pointer;transition:all .2s;}
.clr-btn:hover{background:var(--amber);color:var(--ink);}

/* ══════════════════════════
   MODAL
══════════════════════════ */
.overlay{position:fixed;inset:0;background:rgba(8,14,34,.5);backdrop-filter:blur(8px);z-index:500;display:flex;align-items:flex-start;justify-content:center;padding:1.5rem 1rem 3rem;overflow-y:auto;opacity:0;pointer-events:none;transition:opacity .22s;}
.overlay.open{opacity:1;pointer-events:all;}
.modal{background:var(--white);border-radius:var(--r-xl);width:100%;max-width:690px;box-shadow:var(--sh-xl);overflow:hidden;transform:translateY(32px) scale(.95);transition:transform .32s cubic-bezier(.22,1,.36,1);margin:auto;border:1.5px solid var(--border);}
.overlay.open .modal{transform:translateY(0) scale(1);}
.mstripe{height:5px;}
.mhdr{padding:1.7rem 2rem 1.4rem;display:flex;gap:1rem;align-items:flex-start;border-bottom:1px solid var(--border);}
.mavi{width:60px;height:60px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;font-weight:800;color:#fff;flex-shrink:0;font-family:'Bricolage Grotesque',sans-serif;}
.mtc{flex:1;}
.mrole{font-size:1.22rem;font-weight:800;letter-spacing:-.025em;color:var(--ink);line-height:1.2;margin-bottom:.3rem;}
.mco{font-size:.88rem;color:var(--ink3);font-weight:500;}
.mclose{width:36px;height:36px;border-radius:10px;background:var(--bg2);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--ink3);transition:all .18s;flex-shrink:0;}
.mclose:hover{background:var(--rose-l);color:var(--rose);}
.mmeta{display:flex;flex-wrap:wrap;gap:.5rem;padding:.95rem 2rem;background:var(--bg);border-bottom:1px solid var(--border);}
.mmi{display:flex;align-items:center;gap:.4rem;font-size:.81rem;font-weight:500;color:var(--ink2);background:var(--white);border:1px solid var(--border);border-radius:999px;padding:.3rem .75rem;}
.mmi svg{color:var(--amber);flex-shrink:0;}
.mbody{padding:1.6rem 2rem;display:flex;flex-direction:column;gap:1.4rem;}
.mst{font-size:.69rem;font-weight:700;text-transform:uppercase;letter-spacing:.11em;color:var(--ink4);margin-bottom:.7rem;display:flex;align-items:center;gap:.55rem;}
.mst::after{content:'';flex:1;height:1px;background:var(--border);}
.mbul{list-style:none;display:flex;flex-direction:column;gap:.45rem;}
.mbul li{display:flex;align-items:flex-start;gap:.55rem;font-size:.86rem;color:var(--ink2);line-height:1.58;}
.bico{width:17px;height:17px;border-radius:5px;background:var(--amber-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:1px;}
.bico svg{color:var(--amber);}
.skwrap{display:flex;flex-wrap:wrap;gap:.42rem;}
.sktag{padding:.28rem .72rem;background:var(--bg);border:1px solid var(--border);border-radius:999px;font-size:.77rem;font-weight:600;color:var(--ink2);}
.procbox{background:var(--bg);border:1.5px solid var(--border);border-radius:var(--r-sm);padding:.88rem 1.08rem;font-size:.85rem;color:var(--ink2);line-height:1.7;}
.mdesc{font-size:.85rem;color:var(--ink2);line-height:1.76;white-space:pre-wrap;max-height:230px;overflow-y:auto;padding-right:.2rem;}
.mdesc::-webkit-scrollbar{width:4px;}
.mdesc::-webkit-scrollbar-track{background:var(--bg);}
.mdesc::-webkit-scrollbar-thumb{background:var(--border2);border-radius:2px;}
.mfoot{padding:1.15rem 2rem;background:var(--bg);border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap;}
.ai-lbl{font-size:.68rem;font-weight:700;text-transform:uppercase;letter-spacing:.09em;color:var(--ink4);margin-bottom:.18rem;}
.ai-val{font-size:.83rem;color:var(--ink2);font-weight:500;word-break:break-all;}
.acta{padding:.72rem 1.55rem;background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:700;cursor:pointer;text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;transition:all .22s;flex-shrink:0;}
.acta:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 22px rgba(245,158,11,.32);}

/* ══════════════════════════
   PAGES
══════════════════════════ */
.pg{display:none;}.pg.active{display:block;}

/* ══════════════════════════
   ABOUT & CONTACT STATIC
══════════════════════════ */
.swrap{max-width:740px;margin:0 auto;padding:4.5rem 2rem 6rem;}
.swrap h2{font-size:2.2rem;font-weight:800;letter-spacing:-.035em;color:var(--ink);margin-bottom:.5rem;}
.swrap .sub{color:var(--ink3);font-size:.98rem;line-height:1.75;margin-bottom:2.4rem;}
.swrap p{color:var(--ink2);font-size:.93rem;line-height:1.82;margin-bottom:.95rem;}
.swrap a{color:var(--amber);font-weight:700;text-decoration:none;}
.swrap a:hover{text-decoration:underline;}

/* about grid */
.agrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(195px,1fr));gap:1rem;margin-top:2.4rem;}
.acard{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.4rem;box-shadow:var(--sh-sm);transition:all .22s;position:relative;overflow:hidden;}
.acard::before{content:'';position:absolute;inset:0;background:linear-gradient(135deg,transparent 60%,rgba(245,158,11,.04));pointer-events:none;}
.acard:hover{transform:translateY(-4px);box-shadow:var(--sh-md);}
.acard-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:.9rem;font-size:1.3rem;}
.acard h4{font-size:.92rem;font-weight:700;color:var(--ink);margin-bottom:.35rem;}
.acard p{font-size:.79rem;color:var(--ink3);line-height:1.52;margin:0;}

/* contact card */
.ccontact{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r-lg);padding:1.9rem;box-shadow:var(--sh-md);display:flex;gap:1.5rem;align-items:center;flex-wrap:wrap;margin-top:2rem;}
.cavi2{width:68px;height:68px;border-radius:16px;background:var(--ink);display:flex;align-items:center;justify-content:center;font-family:'Lora',serif;font-size:1.7rem;color:var(--amber);flex-shrink:0;font-style:italic;}
.cti h3{font-size:1.06rem;font-weight:800;color:var(--ink);margin-bottom:.2rem;}
.cti p{font-size:.83rem;color:var(--ink3);margin:0 0 .85rem;}
.li-btn{display:inline-flex;align-items:center;gap:.48rem;padding:.56rem 1.15rem;background:#0a66c2;color:#fff;border-radius:var(--r-sm);text-decoration:none;font-size:.84rem;font-weight:700;transition:all .22s;}
.li-btn:hover{background:#004182;transform:translateY(-1px);box-shadow:0 4px 18px rgba(10,102,194,.3);}

/* ── AI JOB APPLICATION PROMO CARD ── */
.ai-promo{
  margin-top:2.2rem;
  background:linear-gradient(135deg,var(--ink) 0%,#1a2548 100%);
  border-radius:var(--r-lg);
  padding:2rem;
  position:relative;
  overflow:hidden;
  box-shadow:var(--sh-lg);
  border:1px solid rgba(255,255,255,.08);
}
.ai-promo::before{
  content:'';position:absolute;
  top:-40px;right:-40px;
  width:200px;height:200px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(245,158,11,.18),transparent 70%);
  pointer-events:none;
}
.ai-promo::after{
  content:'';position:absolute;
  bottom:-30px;left:-20px;
  width:140px;height:140px;
  border-radius:50%;
  background:radial-gradient(circle,rgba(2,132,199,.15),transparent 70%);
  pointer-events:none;
}
.ai-promo-inner{position:relative;z-index:1;}
.ai-promo-badge{
  display:inline-flex;align-items:center;gap:.45rem;
  background:rgba(245,158,11,.15);border:1px solid rgba(245,158,11,.3);
  border-radius:999px;padding:.32rem .8rem;
  font-size:.72rem;font-weight:700;color:var(--amber);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:1rem;
}
.ai-promo h3{font-size:1.3rem;font-weight:800;color:#fff;letter-spacing:-.025em;margin-bottom:.55rem;line-height:1.25;}
.ai-promo h3 em{font-family:'Lora',serif;font-style:italic;color:var(--amber);}
.ai-promo p{font-size:.86rem;color:rgba(255,255,255,.6);line-height:1.72;margin-bottom:1.4rem;max-width:480px;}
.ai-promo-feats{display:flex;flex-wrap:wrap;gap:.6rem;margin-bottom:1.6rem;}
.ai-feat{display:flex;align-items:center;gap:.38rem;font-size:.77rem;font-weight:600;color:rgba(255,255,255,.75);background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.1);border-radius:999px;padding:.3rem .75rem;}
.ai-feat svg{color:var(--amber);}
.ai-promo-form{display:flex;gap:.65rem;flex-wrap:wrap;}
.ai-promo-input{flex:1;min-width:200px;padding:.75rem 1rem;background:rgba(255,255,255,.09);border:1.5px solid rgba(255,255,255,.15);border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;color:#fff;outline:none;transition:all .2s;}
.ai-promo-input::placeholder{color:rgba(255,255,255,.35);}
.ai-promo-input:focus{border-color:var(--amber);background:rgba(255,255,255,.12);}
.ai-promo-btn{padding:.75rem 1.5rem;background:var(--amber);color:var(--ink);border:none;border-radius:var(--r-sm);font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:800;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;transition:all .22s;white-space:nowrap;flex-shrink:0;}
.ai-promo-btn:hover{background:#f97316;transform:translateY(-2px);box-shadow:0 6px 22px rgba(245,158,11,.4);}
.ai-promo-note{font-size:.72rem;color:rgba(255,255,255,.35);margin-top:.85rem;line-height:1.55;}

/* ══════════════════════════
   FOOTER
══════════════════════════ */
footer{background:var(--ink);color:rgba(255,255,255,.4);padding:2.4rem 2rem;text-align:center;font-size:.8rem;}
.flogo{font-family:'Bricolage Grotesque',sans-serif;font-size:1.18rem;font-weight:800;color:#fff;margin-bottom:.5rem;letter-spacing:-.025em;}
.flogo em{color:var(--amber);font-style:normal;}
footer a{color:var(--amber);text-decoration:none;}
footer a:hover{text-decoration:underline;}

/* loader */
.spin{width:34px;height:34px;border:3px solid var(--border);border-top-color:var(--amber);border-radius:50%;animation:spin .7s linear infinite;margin:3.5rem auto .9rem;}
.ltxt{text-align:center;color:var(--ink3);font-size:.88rem;}

/* legacy compat */
.crow,.cfooter,.cskills,.reqs{display:none;}
.cright{display:none;}/* now handled by .cfoot */

/* ══════════════════════════
   RESPONSIVE
══════════════════════════ */
@media(max-width:1024px){
  .jgrid{grid-template-columns:repeat(2,1fr);}
}
@media(max-width:640px){
  nav{padding:0 .75rem;gap:.4rem;}
  .logo{font-size:1.05rem;gap:.4rem;}
  .logo-box{width:28px;height:28px;border-radius:7px;}
  .nlinks{gap:0;}
  .nlinks .nbtn{padding:.35rem .52rem;font-size:.75rem;}
  .nav-live{padding:.28rem .55rem;font-size:.7rem;margin-left:.15rem;}
  .nav-live .live-dot{width:6px;height:6px;}
  /* Hide "Live" label text on very small screens, keep count */
  @media(max-width:400px){
    .nav-live-label{display:none;}
    .nlinks .nbtn{padding:.32rem .42rem;font-size:.72rem;}
    .logo em{display:none;}
  }
  .hero{padding:3.5rem 1rem 3rem;}
  .sb{padding:.9rem;gap:.5rem;}
  .sf{min-width:110px;}
  .jgrid{grid-template-columns:1fr;}
  .mhdr,.mbody,.mfoot,.mmeta{padding-left:1.1rem;padding-right:1.1rem;}
  .swrap{padding:3rem 1rem 5rem;}
  .ai-promo{padding:1.5rem;}
  .ai-promo h3{font-size:1.1rem;}
  .ccontact{padding:1.3rem;gap:1rem;}
  .cavi2{width:52px;height:52px;font-size:1.3rem;}
}

/* ══════════════════════════
   INTRO SPLASH
══════════════════════════ */
@keyframes introLogoIn{from{opacity:0;transform:scale(.7) translateY(20px)}to{opacity:1;transform:scale(1) translateY(0)}}
@keyframes introTagIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}
@keyframes introBarIn{from{opacity:0;transform:scaleX(0)}to{opacity:1;transform:scaleX(1)}}
@keyframes introOut{to{opacity:0;transform:scale(1.04)}}

#intro{
  position:fixed;inset:0;z-index:9999;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  flex-direction:column;
  transition:opacity .7s ease, transform .7s ease;
}
#intro.intro-out{
  animation:introOut .7s cubic-bezier(.22,1,.36,1) forwards;
  pointer-events:none;
}
#introCanvas{position:absolute;inset:0;width:100%;height:100%;}
#intro-content{
  position:relative;z-index:1;
  display:flex;flex-direction:column;align-items:center;gap:1rem;
  text-align:center;
}
#intro-logo{
  display:flex;align-items:center;gap:.65rem;
  font-family:'Bricolage Grotesque',sans-serif;font-size:2rem;font-weight:800;letter-spacing:-.04em;color:#fff;
  animation:introLogoIn .7s cubic-bezier(.22,1,.36,1) .1s both;
}
#intro-logo em{color:var(--amber);font-style:normal;}
#intro-icon{
  width:46px;height:46px;background:rgba(245,158,11,.15);border:1.5px solid rgba(245,158,11,.3);
  border-radius:12px;display:flex;align-items:center;justify-content:center;
}
#intro-icon svg{color:var(--amber);}
#intro-tagline{
  font-size:.82rem;font-weight:500;color:rgba(255,255,255,.45);letter-spacing:.06em;text-transform:uppercase;
  animation:introTagIn .6s ease .35s both;
}
#intro-bar{
  width:200px;height:3px;background:rgba(255,255,255,.1);border-radius:2px;overflow:hidden;
  animation:introBarIn .5s ease .5s both;
}
#intro-bar-fill{
  height:100%;width:0%;background:linear-gradient(90deg,var(--amber),#f97316);
  border-radius:2px;transition:width .15s ease;
}
#intro-sub{
  font-size:.75rem;color:rgba(255,255,255,.3);font-weight:500;
  animation:introTagIn .6s ease .6s both;
  min-height:1.2em;
}

/* ══════════════════════════
   JOB TYPE TABS
══════════════════════════ */
.type-tabs{display:flex;gap:.45rem;padding:1.6rem 2rem .2rem;max-width:1400px;margin:0 auto;flex-wrap:wrap;}
.type-tab{display:inline-flex;align-items:center;gap:.45rem;padding:.56rem 1.15rem;font-family:'Bricolage Grotesque',sans-serif;font-size:.84rem;font-weight:600;color:var(--ink3);background:var(--white);border:1.5px solid var(--border);border-radius:999px;cursor:pointer;transition:all .22s;position:relative;overflow:hidden;}
.type-tab::before{content:'';position:absolute;inset:0;background:currentColor;opacity:0;transition:opacity .18s;}
.type-tab:hover{color:var(--ink);border-color:var(--border2);transform:translateY(-1px);box-shadow:var(--sh-sm);}
.type-tab.active{color:var(--white);background:var(--ink);border-color:var(--ink);box-shadow:0 4px 14px rgba(8,14,34,.18);}
.type-tab.active svg{stroke:var(--amber);}
.type-tab svg{flex-shrink:0;transition:stroke .22s;}

/* Industrial Training tab — amber accent */
#tab-industrial_training.active{background:linear-gradient(135deg,var(--ink) 60%,#1e2a4a);border-color:var(--ink);}
#tab-industrial_training.active svg{stroke:var(--amber);}

/* Articleship tab — violet accent */
#tab-articleship.active{background:linear-gradient(135deg,#4c1d95,var(--violet));border-color:var(--violet);}
#tab-articleship.active svg{stroke:#c4b5fd;}

@media(max-width:600px){.type-tabs{padding:1.2rem 1rem .1rem;gap:.35rem;}.type-tab{font-size:.78rem;padding:.48rem .9rem;}}


.li-promo-btn{
  display:inline-flex;align-items:center;gap:.5rem;
  padding:.72rem 1.4rem;
  background:#0a66c2;color:#fff;
  border:none;border-radius:var(--r-sm);
  font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:700;
  text-decoration:none;cursor:pointer;
  transition:all .22s;flex-shrink:0;
}
.li-promo-btn:hover{background:#004182;transform:translateY(-2px);box-shadow:0 6px 22px rgba(10,102,194,.35);}

/* ══════════════════════════
   AUTO-APPLY POPUP
══════════════════════════ */
@keyframes popupIn{from{opacity:0;transform:translateY(28px) scale(.94)}to{opacity:1;transform:translateY(0) scale(1)}}
@keyframes popupOverlayIn{from{opacity:0}to{opacity:1}}

#applyPopupOverlay{
  position:fixed;inset:0;
  background:rgba(8,14,34,.55);
  backdrop-filter:blur(10px);
  z-index:9000;
  display:flex;align-items:center;justify-content:center;
  padding:1rem;
  opacity:0;pointer-events:none;
  transition:opacity .3s ease;
}
#applyPopupOverlay.pop-open{
  opacity:1;pointer-events:all;
  animation:popupOverlayIn .3s ease both;
}
#applyPopup{
  background:var(--white);
  border-radius:var(--r-xl);
  width:100%;max-width:480px;
  box-shadow:var(--sh-xl);
  border:1.5px solid var(--border);
  overflow:hidden;
  transform:translateY(28px) scale(.94);
  transition:transform .38s cubic-bezier(.22,1,.36,1);
  position:relative;
}
#applyPopupOverlay.pop-open #applyPopup{
  transform:translateY(0) scale(1);
}
.pop-stripe{
  height:5px;
  background:linear-gradient(90deg,var(--amber),#f97316,#ef4444);
  background-size:200% 100%;
  animation:gradShift 4s ease infinite;
}
.pop-body{padding:1.6rem 1.7rem 1.4rem;}
.pop-close{
  position:absolute;top:.9rem;right:.9rem;
  width:32px;height:32px;border-radius:8px;
  background:var(--bg2);border:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;color:var(--ink3);transition:all .18s;
  font-size:.9rem;line-height:1;
}
.pop-close:hover{background:var(--rose-l);color:var(--rose);}
.pop-badge{
  display:inline-flex;align-items:center;gap:.4rem;
  background:var(--amber-l);border:1px solid rgba(245,158,11,.3);
  border-radius:999px;padding:.28rem .75rem;
  font-size:.7rem;font-weight:700;color:var(--amber-d);
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:.85rem;
}
.pop-title{font-size:1.32rem;font-weight:800;letter-spacing:-.03em;color:var(--ink);line-height:1.2;margin-bottom:.4rem;}
.pop-title em{font-family:'Lora',serif;font-style:italic;color:var(--amber);}
.pop-sub{font-size:.82rem;color:var(--ink3);line-height:1.65;margin-bottom:1.3rem;}
.pop-contact{
  display:flex;align-items:center;gap:.85rem;
  background:var(--bg);border:1.5px solid var(--border);
  border-radius:var(--r);padding:.85rem 1rem;
  margin-bottom:1.3rem;
}
.pop-cavi{
  width:42px;height:42px;border-radius:11px;
  background:var(--ink);
  display:flex;align-items:center;justify-content:center;
  font-family:'Lora',serif;font-size:1.1rem;color:var(--amber);
  font-style:italic;flex-shrink:0;
}
.pop-cinfo{flex:1;}
.pop-cname{font-size:.88rem;font-weight:800;color:var(--ink);letter-spacing:-.018em;}
.pop-crole{font-size:.74rem;color:var(--ink3);margin:.08rem 0 .45rem;}
.pop-li-link{
  display:inline-flex;align-items:center;gap:.35rem;
  background:#0a66c2;color:#fff;
  border-radius:6px;padding:.28rem .65rem;
  font-size:.72rem;font-weight:700;text-decoration:none;
  transition:all .2s;
}
.pop-li-link:hover{background:#004182;}
.pop-form{display:flex;flex-direction:column;gap:.65rem;}
.pop-field{display:flex;flex-direction:column;gap:.28rem;}
.pop-label{font-size:.72rem;font-weight:700;color:var(--ink2);text-transform:uppercase;letter-spacing:.06em;}
.pop-input{
  padding:.72rem .9rem;
  border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;
  color:var(--ink);background:var(--off);outline:none;
  transition:all .22s;
}
.pop-input:focus{border-color:var(--amber);box-shadow:0 0 0 3px rgba(245,158,11,.13);background:var(--white);}
.pop-input::placeholder{color:var(--ink4);}
.pop-actions{display:flex;gap:.65rem;margin-top:.3rem;flex-wrap:wrap;}
.pop-submit{
  flex:1;padding:.78rem 1.2rem;
  background:var(--ink);color:#fff;border:none;border-radius:var(--r-sm);
  font-family:'Bricolage Grotesque',sans-serif;font-size:.88rem;font-weight:800;
  cursor:pointer;transition:all .22s;
  display:flex;align-items:center;justify-content:center;gap:.45rem;
}
.pop-submit:hover{background:var(--amber);color:var(--ink);transform:translateY(-2px);box-shadow:0 6px 22px rgba(245,158,11,.32);}
.pop-skip{
  padding:.78rem 1rem;
  background:none;border:1.5px solid var(--border);border-radius:var(--r-sm);
  font-family:'Bricolage Grotesque',sans-serif;font-size:.84rem;font-weight:600;
  color:var(--ink3);cursor:pointer;transition:all .18s;white-space:nowrap;
}
.pop-skip:hover{border-color:var(--border2);color:var(--ink);}
.pop-note{font-size:.7rem;color:var(--ink4);text-align:center;margin-top:.6rem;line-height:1.5;}

/* success state */
.pop-success{
  display:none;
  flex-direction:column;align-items:center;
  text-align:center;padding:2.5rem 1.7rem;
}
.pop-success.show{display:flex;}
.pop-success-ico{
  width:64px;height:64px;border-radius:50%;
  background:var(--green-l);
  display:flex;align-items:center;justify-content:center;
  font-size:1.6rem;margin-bottom:1.1rem;
}
.pop-success h3{font-size:1.15rem;font-weight:800;color:var(--ink);margin-bottom:.4rem;}
.pop-success p{font-size:.83rem;color:var(--ink3);line-height:1.65;max-width:300px;}
.pop-success .pop-submit{margin-top:1.2rem;max-width:180px;}

@media(max-width:480px){
  .pop-body{padding:1.2rem 1.1rem 1.1rem;}
  .pop-title{font-size:1.12rem;}
  .pop-actions{flex-direction:column;}
  .pop-skip{text-align:center;}
}