:root{
  --navy:#08263f;
  --navy-2:#0d3556;
  --ink:#0b2236;
  --orange:#f5820b;
  --orange-2:#ffb24c;
  --cream:#fff7ed;
  --sand:#f8efe2;
  --white:#fff;
  --muted:#637487;
  --line:rgba(8,38,63,.13);
  --shadow:0 22px 60px rgba(8,38,63,.12);
  --shadow-strong:0 34px 90px rgba(8,38,63,.18);
  --radius:28px;
  --container:1160px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:"Readex Pro", system-ui, sans-serif;
  background:#f7f8fb;
  color:var(--ink);
  line-height:1.85;
  overflow-x:hidden;
}
body.menu-open{overflow:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%;display:block}
.container{width:min(calc(100% - 32px), var(--container));margin:auto}
.section{padding:92px 0;position:relative}

/* Loader */
.loader{
  position:fixed;inset:0;z-index:9999;
  display:grid;place-items:center;
  background:
    radial-gradient(circle at 50% 42%, rgba(245,130,11,.16), transparent 30%),
    linear-gradient(135deg,#061b2d,#08263f 56%,#04121f);
  transition:opacity .45s ease, visibility .45s ease;
}
.loader.hide{opacity:0;visibility:hidden}
.loader-mark{
  display:flex;flex-direction:column;align-items:center;gap:18px;color:#fff;
  transform:translateY(-10px);
}
.loader-mark img{
  width:min(340px,72vw);
  filter:drop-shadow(0 25px 44px rgba(0,0,0,.22));
  animation:loaderLogo 1.6s ease-in-out infinite alternate;
}
.loader-line{
  width:min(260px,62vw);height:5px;border-radius:999px;background:rgba(255,255,255,.14);overflow:hidden;
}
.loader-line span{
  display:block;width:42%;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
  animation:loaderLine 1.2s ease-in-out infinite;
}
.loader-mark p{font-size:14px;color:rgba(255,255,255,.7);font-weight:600}
@keyframes loaderLogo{from{transform:scale(.98) translateY(3px)}to{transform:scale(1.025) translateY(-6px)}}
@keyframes loaderLine{from{transform:translateX(160%)}to{transform:translateX(-250%)}}

/* Header */
.site-header{
  position:fixed;top:0;left:0;right:0;z-index:1000;
  padding:18px 0;transition:.25s ease;
}
.site-header.scrolled,.inner-header{
  padding:10px 0;background:rgba(255,255,255,.92);backdrop-filter:blur(18px);
  box-shadow:0 14px 40px rgba(8,38,63,.08);
}
.nav-wrap{display:flex;align-items:center;justify-content:space-between;gap:20px}
.brand{width:166px;display:flex;align-items:center}
.site-nav{
  display:flex;align-items:center;gap:6px;padding:8px;border-radius:999px;
  background:rgba(255,255,255,.78);border:1px solid rgba(255,255,255,.70);
  box-shadow:0 16px 44px rgba(8,38,63,.06);
}
.site-nav a{
  padding:9px 15px;border-radius:999px;color:var(--navy);
  font-weight:700;font-size:14px;transition:.2s ease;
}
.site-nav a:hover,.site-nav a.active{background:var(--navy);color:#fff}
.nav-cta{
  min-height:46px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 20px;border-radius:999px;background:var(--orange);color:#fff;font-weight:800;
  box-shadow:0 16px 36px rgba(245,130,11,.28);transition:.2s ease;
}
.nav-cta:hover,.btn:hover{transform:translateY(-3px)}
.menu-btn{display:none;width:46px;height:46px;border:0;border-radius:14px;background:#fff;box-shadow:0 13px 34px rgba(8,38,63,.12)}
.menu-btn span{display:block;width:22px;height:2px;background:var(--navy);border-radius:99px;margin:5px auto;transition:.2s ease}
.menu-btn.active span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.menu-btn.active span:nth-child(2){opacity:0}
.menu-btn.active span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}

/* Hero */
.hero{
  position:relative;min-height:100vh;display:grid;align-items:center;
  padding:134px 0 80px;overflow:hidden;
  background:
    radial-gradient(circle at 17% 21%, rgba(245,130,11,.14), transparent 24%),
    radial-gradient(circle at 84% 18%, rgba(8,38,63,.10), transparent 26%),
    linear-gradient(180deg,#fffaf3 0%,#f6f8fb 100%);
}
.hero-texture{
  position:absolute;inset:0;opacity:.38;
  background-image:
    linear-gradient(rgba(8,38,63,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,63,.07) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, black, transparent 72%);
}
.hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.08fr .92fr;gap:54px;align-items:center}
.free-badge{
  display:flex;align-items:center;gap:12px;width:max-content;max-width:100%;
  padding:9px 13px;border-radius:999px;background:#fff;border:1px solid rgba(245,130,11,.22);
  box-shadow:0 12px 34px rgba(245,130,11,.10);
}
.free-badge strong{color:#c86500;font-weight:800}
.free-badge span{color:#586b7e;font-size:13px}
.hero h1{
  font-family:"Changa", "Readex Pro", system-ui, sans-serif;
  margin-top:24px;max-width:760px;
  font-size:clamp(42px,6.2vw,82px);line-height:1.08;letter-spacing:-.8px;
  color:#061f34;font-weight:900;
}
.hero h1 span{display:block;margin-top:14px;color:var(--orange);font-size:.68em;line-height:1.25}
.hero p{max-width:690px;margin-top:24px;color:#53677a;font-size:19px}
.hero-actions{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px}
.btn{
  min-height:54px;display:inline-flex;align-items:center;justify-content:center;
  padding:0 25px;border-radius:999px;border:1px solid transparent;font-weight:800;transition:.2s ease;
}
.btn-primary{background:var(--navy);color:#fff;box-shadow:0 20px 48px rgba(8,38,63,.22)}
.btn-outline{background:#fff;color:var(--navy);border-color:var(--line)}
.btn-light{background:#fff;color:var(--navy);box-shadow:0 18px 44px rgba(0,0,0,.13)}
.hero-features{display:flex;flex-wrap:wrap;gap:10px;margin-top:30px}
.hero-features span{
  padding:9px 13px;border-radius:999px;background:#fff;border:1px solid var(--line);
  color:var(--navy);font-size:14px;font-weight:700;
}

/* Visual */
.hero-visual{
  position:relative;padding:26px;border-radius:34px;background:rgba(255,255,255,.86);
  border:1px solid rgba(8,38,63,.10);box-shadow:var(--shadow-strong);backdrop-filter:blur(18px);
}
.hero-visual::after{
  content:"";position:absolute;inset:16px;border-radius:25px;border:1px dashed rgba(8,38,63,.10);pointer-events:none;
}
.visual-header{position:relative;z-index:1;display:flex;align-items:center;gap:14px;margin-bottom:20px}
.visual-header img{width:62px;height:62px;object-fit:contain;border-radius:18px;background:#f4f6f8;padding:8px}
.visual-header b{display:block;color:var(--navy);font-weight:800}
.visual-header small{display:block;color:var(--muted);font-weight:600}
.job-ticket{
  position:relative;z-index:1;padding:24px;border-radius:26px;color:#fff;
  background:
    linear-gradient(135deg, rgba(245,130,11,.18), transparent 42%),
    linear-gradient(135deg,var(--navy),var(--navy-2));
  overflow:hidden;
}
.job-ticket::before{
  content:"";position:absolute;left:-60px;top:-60px;width:170px;height:170px;border-radius:50%;
  background:rgba(245,130,11,.22);
}
.ticket-top{position:relative;z-index:1;display:flex;align-items:center;justify-content:space-between;gap:14px}
.ticket-top span{color:rgba(255,255,255,.72);font-weight:700}
.ticket-top strong{padding:6px 11px;border-radius:999px;background:var(--orange);font-size:13px}
.job-ticket h2{position:relative;z-index:1;font-family:"Beiruti";font-size:30px;line-height:1.35;margin:18px 0 8px}
.job-ticket p{position:relative;z-index:1;margin:0;color:rgba(255,255,255,.72);font-size:15px}
.ticket-grid{position:relative;z-index:1;display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-top:22px}
.ticket-grid div{padding:13px;border-radius:16px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.12)}
.ticket-grid small{display:block;color:rgba(255,255,255,.65);font-size:12px}
.ticket-grid b{display:block;color:#fff;font-size:15px;margin-top:2px}
.mini-stats{position:relative;z-index:1;display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:14px}
.mini-stats div{padding:18px;border-radius:20px;background:var(--cream);border:1px solid rgba(245,130,11,.18)}
.mini-stats b{display:block;color:var(--orange);font-size:20px;font-weight:900}
.mini-stats span{display:block;color:var(--muted);font-size:13px;margin-top:2px}

/* Strip */
.benefit-strip{background:var(--navy);color:#fff}
.strip-inner{display:flex;gap:12px;padding:14px 0;overflow:auto;white-space:nowrap;scrollbar-width:none}
.strip-inner::-webkit-scrollbar{display:none}
.strip-inner span{
  flex:0 0 auto;padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.08);
  border:1px solid rgba(255,255,255,.12);font-size:14px;font-weight:700;
}

/* Shared */
.eyebrow{
  display:inline-flex;align-items:center;width:max-content;max-width:100%;
  padding:8px 13px;border-radius:999px;background:rgba(8,38,63,.07);color:var(--navy);
  font-weight:800;font-size:14px;
}
.eyebrow.light{background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.16);color:#fff}
.section-copy h2,.section-head h2,.factory-panel h2,.call-box h2{
  font-family:"Beiruti";margin-top:14px;font-size:clamp(32px,3.8vw,48px);
  line-height:1.22;color:var(--navy);font-weight:900;letter-spacing:-1.3px;
}
.section-copy p,.section-head p,.factory-panel p,.call-box p{
  margin-top:16px;color:var(--muted);font-size:18px;
}
.section-copy .btn{margin-top:28px}

/* Jobs focus */
.job-focus{background:#fff}
.job-focus-grid{display:grid;grid-template-columns:.86fr 1.14fr;gap:48px;align-items:center}
.job-cards{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}
.job-card{
  min-height:215px;padding:24px;border-radius:24px;background:#f7f8fb;border:1px solid var(--line);
  transition:.2s ease;
}
.job-card:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.job-card div{display:flex;align-items:center;gap:12px}
.job-icon{width:48px;height:48px;display:grid;place-items:center;border-radius:16px;background:#fff;font-size:24px}
.job-card h3{font-family:"Beiruti";font-size:30px;line-height:1.08;color:var(--navy);font-weight:900}
.job-card p{margin-top:14px;color:var(--muted)}
.job-card.highlighted{background:var(--navy);color:#fff}
.job-card.highlighted strong{display:inline-flex;margin-bottom:12px;color:var(--orange-2)}
.job-card.highlighted h3,.job-card.highlighted p{color:#fff}

/* Perks */
.perks-section{background:linear-gradient(180deg,#fff 0%,#fff7ed 100%)}
.section-head{text-align:center;max-width:790px;margin:0 auto 42px}
.perks-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}
.perk{
  padding:25px;border-radius:25px;background:#fff;border:1px solid var(--line);
  box-shadow:0 16px 40px rgba(8,38,63,.05);transition:.2s ease;
}
.perk:hover{transform:translateY(-5px);box-shadow:var(--shadow)}
.perk span{font-size:32px}
.perk h3{font-family:"Beiruti";font-size:30px;line-height:1.08;color:var(--navy);margin-top:14px}
.perk p{margin-top:10px;color:var(--muted);font-size:15px}

/* Factory */
.factory-section{background:#fff}
.factory-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:22px;align-items:stretch}
.factory-panel{
  padding:38px;border-radius:34px;color:#fff;
  background:
    radial-gradient(circle at 16% 18%, rgba(245,130,11,.28), transparent 32%),
    linear-gradient(135deg,#061f34,#0c3556);
  box-shadow:var(--shadow-strong);
}
.factory-panel h2,.factory-panel p{color:#fff}
.factory-panel p{color:rgba(255,255,255,.76)}
.factory-services{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0}
.factory-services span{padding:8px 13px;border-radius:999px;background:rgba(255,255,255,.10);border:1px solid rgba(255,255,255,.13);font-weight:700}
.factory-note{padding:34px;border-radius:34px;background:var(--cream);border:1px solid rgba(245,130,11,.18)}
.factory-note h3{font-family:"Beiruti";font-size:32px;line-height:1.22;color:var(--navy)}
.factory-note ul{list-style:none;margin-top:22px;display:grid;gap:12px}
.factory-note li{position:relative;padding-right:24px;color:#42566a;font-weight:700}
.factory-note li::before{content:"";position:absolute;right:0;top:13px;width:8px;height:8px;border-radius:50%;background:var(--orange)}

/* About */
.about-section{background:#f7f8fb}
.about-grid{display:grid;grid-template-columns:.9fr 1.1fr;gap:46px;align-items:center}
.about-visual{
  min-height:360px;display:grid;place-items:center;border-radius:34px;background:#fff;border:1px solid var(--line);
  box-shadow:var(--shadow);
}
.about-visual img{width:min(430px,85%)}
.trust-points{display:grid;gap:12px;margin-top:26px}
.trust-points div{padding:17px;border-radius:18px;background:#fff;border:1px solid var(--line)}
.trust-points b{display:block;color:var(--navy);font-weight:900}
.trust-points span{display:block;color:var(--muted);margin-top:3px}

/* Call */
.call-section{background:#fff;padding-top:20px}
.call-box{
  display:grid;grid-template-columns:1fr auto;gap:26px;align-items:center;
  padding:34px;border-radius:32px;background:var(--cream);border:1px solid rgba(245,130,11,.18);
}
.call-box h2{font-size:clamp(32px,3.8vw,48px)}

/* Footer */
.footer{background:#061f34;color:#fff;padding:56px 0 22px}
.footer-grid{display:grid;grid-template-columns:1.25fr .75fr 1fr;gap:38px}
.footer img{width:178px;margin-bottom:16px}
.footer p{color:rgba(255,255,255,.70);margin:6px 0}
.footer h3{font-family:"Beiruti";font-size:30px;line-height:1.08;margin-bottom:14px}
.footer a{display:block;color:rgba(255,255,255,.74);margin:8px 0;transition:.2s ease}
.footer a:hover{color:var(--orange-2)}
.footer strong{color:#fff}
.footer-bottom{display:flex;justify-content:space-between;gap:16px;margin-top:34px;padding-top:20px;border-top:1px solid rgba(255,255,255,.1);color:rgba(255,255,255,.62);font-size:14px}

/* Float */
.float-whatsapp{
  position:fixed;z-index:900;left:18px;bottom:18px;height:50px;
  display:inline-flex;align-items:center;justify-content:center;padding:0 18px;border-radius:999px;
  background:#18b65c;color:#fff;font-weight:900;box-shadow:0 18px 42px rgba(24,182,92,.28);transition:.2s ease;
}
.float-whatsapp:hover{transform:translateY(-3px)}

/* Inner pages */
.inner-page{background:var(--cream)}
.inner-main{min-height:100vh;display:grid;align-items:center;padding:130px 0 70px}
.inner-hero{
  text-align:center;background:#fff;border:1px solid var(--line);border-radius:34px;
  padding:70px 24px;box-shadow:var(--shadow);
}
.inner-hero h1{font-family:"Beiruti";font-size:clamp(38px,5vw,64px);line-height:1.16;color:var(--navy);margin-top:16px}
.inner-hero p{max-width:720px;margin:20px auto 30px;color:var(--muted);font-size:18px}

/* Reveal */
.reveal{opacity:0;transform:translateY(26px);transition:opacity .65s ease, transform .65s ease}
.reveal.show{opacity:1;transform:translateY(0)}

@media (max-width:1080px){
  .hero-grid,.job-focus-grid,.factory-grid,.about-grid,.call-box{grid-template-columns:1fr}
  .hero-visual{max-width:640px}
  .perks-grid{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:840px){
  .site-header{padding:12px 0}
  .brand{width:136px}
  .menu-btn{display:block;position:relative;z-index:1002}
  .nav-cta{display:none}
  .site-nav{
    position:fixed;top:0;right:0;z-index:1001;width:min(84vw,360px);height:100vh;
    padding:96px 18px 24px;flex-direction:column;align-items:stretch;border-radius:0;background:rgba(255,255,255,.97);
    box-shadow:-22px 0 70px rgba(0,0,0,.14);transform:translateX(105%);transition:.25s ease;
  }
  .site-nav.open{transform:translateX(0)}
  .site-nav a{padding:14px 16px;background:#f7f8fb}
  .hero{min-height:auto;padding:122px 0 66px}
  .free-badge{align-items:flex-start;flex-direction:column;border-radius:22px}
  .hero h1{font-size:42px}
  .hero p{font-size:17px}
  .hero-actions{flex-direction:column}
  .btn{width:100%}
  .section{padding:70px 0}
  .job-cards,.perks-grid{grid-template-columns:1fr}
  .factory-panel,.factory-note,.call-box{padding:26px;border-radius:26px}
  .footer-grid{grid-template-columns:1fr}
  .footer-bottom{flex-direction:column}
}
@media (max-width:480px){
  .container{width:min(calc(100% - 24px), var(--container))}
  .hero h1{font-size:32px}
  .section-copy h2,.section-head h2,.factory-panel h2,.call-box h2{font-size:32px}
  .job-ticket h2,.factory-note h3{font-size:30px}
  .ticket-grid,.mini-stats{grid-template-columns:1fr}
  .float-whatsapp{left:12px;bottom:12px;height:46px}
}


/* Final polish */
.hero-copy::after{
  content:"العاشر من رمضان";
  display:inline-flex;
  margin-top:18px;
  padding:8px 15px;
  border-radius:999px;
  color:#9b5200;
  background:rgba(245,130,11,.10);
  border:1px solid rgba(245,130,11,.18);
  font-size:13px;
  font-weight:700;
}

/* Typography refinement */
.hero h1,
.section-copy h2,
.section-head h2,
.factory-panel h2,
.call-box h2,
.inner-hero h1,
.job-card h3,
.perk h3,
.factory-note h3,
.footer h3{
  font-feature-settings:"kern";
  text-wrap:balance;
}
.hero p,
.section-copy p,
.factory-panel p,
.call-box p,
.perk p,
.job-card p{
  text-wrap:pretty;
}


/* V4 Typography polish: hero strong, sections cleaner */
.section-copy h2,
.section-head h2,
.factory-panel h2,
.call-box h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:-.25px;
  max-width:760px;
}

.job-card h3,
.perk h3,
.factory-note h3,
.footer h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-weight:700;
  letter-spacing:0;
}

.section-copy p,
.section-head p,
.factory-panel p,
.call-box p,
.job-card p,
.perk p{
  font-family:"Readex Pro",system-ui,sans-serif;
}

.hero h1{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-weight:800;
}

@media (max-width:840px){
  .section-copy h2,
  .section-head h2,
  .factory-panel h2,
  .call-box h2{
    font-size:34px;
    line-height:1.24;
  }
}

@media (max-width:480px){
  .section-copy h2,
  .section-head h2,
  .factory-panel h2,
  .call-box h2{
    font-size:30px;
    line-height:1.28;
  }
  .job-card h3,
  .perk h3{
    font-size:24px;
  }
}


/* Jobs page */
.jobs-page{
  background:#f7f8fb;
}

.jobs-hero{
  position:relative;
  padding:136px 0 78px;
  overflow:hidden;
  background:
    radial-gradient(circle at 17% 20%, rgba(245,130,11,.14), transparent 25%),
    radial-gradient(circle at 82% 12%, rgba(8,38,63,.10), transparent 25%),
    linear-gradient(180deg,#fffaf3 0%,#f7f8fb 100%);
}

.jobs-hero-texture{
  position:absolute;
  inset:0;
  opacity:.34;
  background-image:
    linear-gradient(rgba(8,38,63,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,63,.07) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, black, transparent 76%);
}

.jobs-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .72fr;
  gap:42px;
  align-items:center;
}

.jobs-hero-copy h1{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:24px;
  max-width:780px;
  font-size:clamp(42px,6vw,78px);
  line-height:1.1;
  color:var(--navy);
  font-weight:800;
  letter-spacing:-.6px;
  text-wrap:balance;
}

.jobs-hero-copy p{
  max-width:720px;
  margin-top:22px;
  color:#53677a;
  font-size:19px;
}

.jobs-alert{
  padding:30px;
  border-radius:34px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(8,38,63,.10);
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(18px);
}

.jobs-alert img{
  width:84px;
  height:84px;
  object-fit:contain;
  padding:10px;
  border-radius:24px;
  background:#f4f6f8;
  margin-bottom:20px;
}

.jobs-alert h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-size:36px;
  line-height:1.15;
  color:var(--navy);
}

.jobs-alert p{
  margin-top:12px;
  color:var(--muted);
}

.jobs-alert div{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:22px;
}

.jobs-alert span{
  padding:9px 13px;
  border-radius:999px;
  background:rgba(245,130,11,.10);
  color:#9b5200;
  border:1px solid rgba(245,130,11,.18);
  font-size:13px;
  font-weight:800;
}

.jobs-filter-section{
  position:sticky;
  top:76px;
  z-index:80;
  padding:14px 0;
  background:rgba(247,248,251,.82);
  backdrop-filter:blur(16px);
  border-block:1px solid rgba(8,38,63,.08);
}

.jobs-filter{
  display:flex;
  align-items:center;
  gap:10px;
  overflow:auto;
  scrollbar-width:none;
}

.jobs-filter::-webkit-scrollbar{
  display:none;
}

.jobs-filter button{
  flex:0 0 auto;
  min-height:42px;
  padding:0 16px;
  border-radius:999px;
  border:1px solid var(--line);
  background:#fff;
  color:var(--navy);
  font-family:"Readex Pro",system-ui,sans-serif;
  font-weight:700;
  cursor:pointer;
  transition:.2s ease;
}

.jobs-filter button:hover,
.jobs-filter button.active{
  background:var(--navy);
  color:#fff;
  transform:translateY(-1px);
}

.jobs-list-section{
  background:#fff;
}

.jobs-section-head{
  max-width:760px;
  margin-bottom:36px;
}

.jobs-section-head h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:14px;
  font-size:clamp(32px,3.8vw,48px);
  line-height:1.22;
  color:var(--navy);
  font-weight:700;
  text-wrap:balance;
}

.jobs-section-head p{
  margin-top:14px;
  color:var(--muted);
  font-size:17px;
}

.job-list-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:20px;
}

.available-job{
  display:flex;
  flex-direction:column;
  min-height:100%;
  padding:26px;
  border-radius:30px;
  background:#f7f8fb;
  border:1px solid var(--line);
  transition:.25s ease;
  position:relative;
  overflow:hidden;
}

.available-job::before{
  content:"";
  position:absolute;
  width:180px;
  height:180px;
  left:-80px;
  top:-80px;
  border-radius:50%;
  background:rgba(245,130,11,.09);
}

.available-job:hover{
  transform:translateY(-6px);
  box-shadow:var(--shadow);
  background:#fff;
}

.job-card-top{
  position:relative;
  z-index:1;
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:12px;
  margin-bottom:18px;
}

.job-status,
.job-type{
  display:inline-flex;
  align-items:center;
  min-height:34px;
  padding:0 12px;
  border-radius:999px;
  font-size:12px;
  font-weight:800;
}

.job-status{
  background:rgba(24,182,92,.10);
  color:#0b7c3a;
  border:1px solid rgba(24,182,92,.17);
}

.job-type{
  background:#fff;
  color:var(--navy);
  border:1px solid var(--line);
}

.available-job h3{
  position:relative;
  z-index:1;
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-size:38px;
  line-height:1.05;
  color:var(--navy);
  font-weight:800;
}

.salary-box{
  position:relative;
  z-index:1;
  margin-top:18px;
  padding:18px;
  border-radius:22px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(245,130,11,.22), transparent 45%),
    linear-gradient(135deg, var(--navy), var(--navy-2));
}

.salary-box small,
.salary-box span{
  display:block;
  color:rgba(255,255,255,.72);
  font-size:13px;
}

.salary-box strong{
  display:block;
  margin:4px 0 2px;
  color:#fff;
  font-size:26px;
  font-weight:900;
}

.job-details-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:10px;
  margin-top:14px;
}

.job-details-grid div{
  padding:14px;
  border-radius:18px;
  background:#fff;
  border:1px solid var(--line);
}

.job-details-grid span{
  display:block;
  font-size:20px;
}

.job-details-grid small{
  display:block;
  margin-top:6px;
  color:var(--muted);
  font-size:12px;
}

.job-details-grid b{
  display:block;
  margin-top:2px;
  color:var(--navy);
  font-size:13px;
  font-weight:800;
}

.job-perks{
  position:relative;
  z-index:1;
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:16px 0 20px;
}

.job-perks span{
  padding:7px 11px;
  border-radius:999px;
  background:rgba(245,130,11,.10);
  color:#9b5200;
  border:1px solid rgba(245,130,11,.16);
  font-size:12px;
  font-weight:800;
}

.job-apply{
  position:relative;
  z-index:1;
  width:100%;
  margin-top:auto;
}

.jobs-note-section{
  padding:20px 0 90px;
  background:#fff;
}

.jobs-note-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:28px;
  padding:34px;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(circle at 14% 20%, rgba(245,130,11,.26), transparent 32%),
    linear-gradient(135deg,#061f34,#0c3556);
  box-shadow:var(--shadow-strong);
}

.jobs-note-card h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:14px;
  font-size:clamp(30px,3.8vw,48px);
  line-height:1.2;
  color:#fff;
  font-weight:700;
}

.jobs-note-card p{
  margin-top:12px;
  max-width:760px;
  color:rgba(255,255,255,.76);
}

.jobs-note-card .eyebrow{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.14);
}

.available-job.hidden{
  display:none;
}

@media (max-width:980px){
  .jobs-hero-grid,
  .job-list-grid,
  .jobs-note-card{
    grid-template-columns:1fr;
  }

  .jobs-alert{
    max-width:650px;
  }

  .jobs-note-card .btn{
    width:max-content;
  }
}

@media (max-width:840px){
  .jobs-hero{
    padding:122px 0 62px;
  }

  .jobs-hero-copy h1{
    font-size:42px;
    line-height:1.18;
  }

  .jobs-hero-copy p{
    font-size:17px;
  }

  .jobs-filter-section{
    top:66px;
  }

  .available-job{
    padding:22px;
  }

  .available-job h3{
    font-size:32px;
  }

  .job-details-grid{
    grid-template-columns:1fr;
  }

  .jobs-note-card .btn{
    width:100%;
  }
}

@media (max-width:480px){
  .jobs-hero-copy h1{
    font-size:36px;
  }

  .jobs-section-head h2,
  .jobs-note-card h2{
    font-size:30px;
  }

  .salary-box strong{
    font-size:23px;
  }
}


/* Header compact logo fix */
.nav-wrap{
  min-height:62px;
}

.brand.brand-compact{
  width:auto;
  min-width:max-content;
  display:inline-flex;
  align-items:center;
  gap:10px;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.74);
  border:1px solid rgba(8,38,63,.08);
  box-shadow:0 12px 34px rgba(8,38,63,.06);
  line-height:1;
}

.site-header.scrolled .brand.brand-compact,
.inner-header .brand.brand-compact{
  background:rgba(255,255,255,.9);
}

.brand.brand-compact img{
  width:42px;
  height:42px;
  object-fit:contain;
  flex:0 0 auto;
}

.brand.brand-compact span{
  font-family:"Readex Pro",system-ui,sans-serif;
  font-size:14px;
  font-weight:800;
  color:var(--navy);
  white-space:nowrap;
}

.site-header{
  isolation:isolate;
}

.hero,
.jobs-hero{
  padding-top:150px;
}

@media (max-width:840px){
  .brand.brand-compact{
    padding:7px 10px;
  }
  .brand.brand-compact img{
    width:38px;
    height:38px;
  }
  .brand.brand-compact span{
    font-size:13px;
  }
  .hero,
  .jobs-hero{
    padding-top:126px;
  }
}

@media (max-width:480px){
  .brand.brand-compact span{
    display:none;
  }
  .brand.brand-compact{
    min-width:auto;
    padding:7px;
  }
}


/* Header logo size polish */
.brand.brand-compact{
  padding:9px 14px;
  gap:11px;
}

.brand.brand-compact img{
  width:52px;
  height:52px;
}

.brand.brand-compact span{
  font-size:15px;
}

.nav-wrap{
  min-height:70px;
}

.hero,
.jobs-hero,
.cc-hero{
  padding-top:164px;
}

@media (max-width:840px){
  .brand.brand-compact img{
    width:44px;
    height:44px;
  }
  .brand.brand-compact span{
    font-size:13px;
  }
  .nav-wrap{
    min-height:58px;
  }
  .hero,
  .jobs-hero,
  .cc-hero{
    padding-top:132px;
  }
}

@media (max-width:480px){
  .brand.brand-compact img{
    width:42px;
    height:42px;
  }
}

/* Call center page */
.call-center-page{
  background:#f7f8fb;
}

.cc-hero{
  position:relative;
  overflow:hidden;
  padding-bottom:78px;
  background:
    radial-gradient(circle at 17% 20%, rgba(245,130,11,.14), transparent 25%),
    radial-gradient(circle at 85% 12%, rgba(8,38,63,.10), transparent 25%),
    linear-gradient(180deg,#fffaf3 0%,#f7f8fb 100%);
}

.cc-texture{
  position:absolute;
  inset:0;
  opacity:.33;
  background-image:
    linear-gradient(rgba(8,38,63,.07) 1px, transparent 1px),
    linear-gradient(90deg, rgba(8,38,63,.07) 1px, transparent 1px);
  background-size:54px 54px;
  mask-image:linear-gradient(to bottom, black, transparent 76%);
}

.cc-hero-grid{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1.05fr .95fr;
  gap:46px;
  align-items:center;
}

.cc-hero-copy h1{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:20px;
  max-width:800px;
  font-size:clamp(42px,6vw,78px);
  line-height:1.1;
  color:var(--navy);
  font-weight:800;
  letter-spacing:-.5px;
  text-wrap:balance;
}

.cc-hero-copy p{
  max-width:720px;
  margin-top:22px;
  color:#53677a;
  font-size:19px;
}

.cc-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:32px;
}

.cc-points{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:28px;
}

.cc-points span{
  padding:9px 13px;
  border-radius:999px;
  background:#fff;
  border:1px solid var(--line);
  color:var(--navy);
  font-size:14px;
  font-weight:700;
}

.cc-panel{
  position:relative;
  padding:28px;
  border-radius:34px;
  background:rgba(255,255,255,.88);
  border:1px solid rgba(8,38,63,.10);
  box-shadow:var(--shadow-strong);
  backdrop-filter:blur(18px);
}

.cc-panel::after{
  content:"";
  position:absolute;
  inset:16px;
  border-radius:25px;
  border:1px dashed rgba(8,38,63,.10);
  pointer-events:none;
}

.cc-panel-head{
  position:relative;
  z-index:1;
  display:flex;
  align-items:center;
  gap:14px;
  margin-bottom:20px;
}

.cc-panel-head img{
  width:66px;
  height:66px;
  object-fit:contain;
  padding:9px;
  border-radius:20px;
  background:#f4f6f8;
}

.cc-panel-head b{
  display:block;
  color:var(--navy);
  font-weight:800;
}

.cc-panel-head small{
  display:block;
  color:var(--muted);
}

.cc-task-card{
  position:relative;
  z-index:1;
  padding:24px;
  border-radius:26px;
  color:#fff;
  background:
    linear-gradient(135deg, rgba(245,130,11,.20), transparent 45%),
    linear-gradient(135deg,var(--navy),var(--navy-2));
}

.cc-task-card span{
  color:var(--orange-2);
  font-size:14px;
  font-weight:800;
}

.cc-task-card h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:10px;
  font-size:36px;
  line-height:1.1;
}

.cc-task-card p{
  margin-top:8px;
  color:rgba(255,255,255,.74);
}

.cc-panel-list{
  position:relative;
  z-index:1;
  display:grid;
  gap:12px;
  margin-top:14px;
}

.cc-panel-list div{
  padding:16px;
  border-radius:18px;
  background:var(--cream);
  border:1px solid rgba(245,130,11,.16);
}

.cc-panel-list strong{
  display:block;
  color:var(--navy);
}

.cc-panel-list span{
  display:block;
  color:var(--muted);
  margin-top:3px;
  font-size:14px;
}

.cc-details{
  background:#fff;
}

.cc-details-grid{
  display:grid;
  grid-template-columns:.88fr 1.12fr;
  gap:46px;
  align-items:center;
}

.cc-task-grid{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:16px;
}

.cc-task-grid article,
.cc-benefit{
  padding:24px;
  border-radius:24px;
  background:#f7f8fb;
  border:1px solid var(--line);
  transition:.2s ease;
}

.cc-task-grid article:hover,
.cc-benefit:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  background:#fff;
}

.cc-task-grid span,
.cc-benefit span{
  font-size:32px;
}

.cc-task-grid h3,
.cc-benefit h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:12px;
  color:var(--navy);
  font-size:28px;
  line-height:1.15;
}

.cc-task-grid p,
.cc-benefit p{
  margin-top:8px;
  color:var(--muted);
  font-size:15px;
}

.cc-benefits{
  background:linear-gradient(180deg,#fff 0%,#fff7ed 100%);
}

.cc-benefits-grid{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:16px;
}

.cc-growth{
  background:#fff;
  padding-top:20px;
}

.cc-growth-card{
  display:grid;
  grid-template-columns:1fr auto;
  align-items:center;
  gap:28px;
  padding:36px;
  border-radius:34px;
  color:#fff;
  background:
    radial-gradient(circle at 14% 20%, rgba(245,130,11,.26), transparent 32%),
    linear-gradient(135deg,#061f34,#0c3556);
  box-shadow:var(--shadow-strong);
}

.cc-growth-card h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:14px;
  font-size:clamp(32px,3.8vw,50px);
  line-height:1.18;
  color:#fff;
}

.cc-growth-card p{
  max-width:760px;
  margin-top:12px;
  color:rgba(255,255,255,.76);
}

@media (max-width:980px){
  .cc-hero-grid,
  .cc-details-grid,
  .cc-growth-card{
    grid-template-columns:1fr;
  }
  .cc-panel{
    max-width:650px;
  }
  .cc-growth-card .btn{
    width:max-content;
  }
  .cc-benefits-grid{
    grid-template-columns:repeat(2,1fr);
  }
}

@media (max-width:840px){
  .cc-hero{
    padding-bottom:62px;
  }
  .cc-hero-copy h1{
    font-size:42px;
    line-height:1.18;
  }
  .cc-hero-copy p{
    font-size:17px;
  }
  .cc-actions{
    flex-direction:column;
  }
  .cc-task-grid,
  .cc-benefits-grid{
    grid-template-columns:1fr;
  }
  .cc-growth-card .btn{
    width:100%;
  }
}

@media (max-width:480px){
  .cc-hero-copy h1{
    font-size:36px;
  }
  .cc-task-card h2{
    font-size:30px;
  }
  .cc-task-grid h3,
  .cc-benefit h3{
    font-size:24px;
  }
}


/* =========================
   Final polish: Header logo + premium loader + call center tone
   ========================= */

/* Header brand: bigger, balanced, no hero overlap */
.site-header{
  padding:14px 0;
}

.site-header.scrolled,
.inner-header{
  padding:8px 0;
}

.nav-wrap{
  min-height:72px;
}

.brand.brand-compact{
  width:auto;
  min-width:max-content;
  display:inline-flex;
  align-items:center;
  gap:12px;
  padding:8px 16px 8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.82);
  border:1px solid rgba(8,38,63,.08);
  box-shadow:0 14px 40px rgba(8,38,63,.07);
}

.brand.brand-compact img{
  width:62px;
  height:62px;
  object-fit:contain;
  flex:0 0 auto;
  filter:drop-shadow(0 8px 16px rgba(8,38,63,.10));
}

.brand.brand-compact span{
  font-family:"Readex Pro",system-ui,sans-serif;
  font-size:15px;
  font-weight:800;
  color:var(--navy);
  white-space:nowrap;
}

.site-nav{
  transform:translateY(1px);
}

.hero,
.jobs-hero,
.cc-hero{
  padding-top:178px;
}

/* Premium loader */
.loader{
  background:
    radial-gradient(circle at 50% 42%, rgba(245,130,11,.18), transparent 28%),
    radial-gradient(circle at 20% 18%, rgba(255,255,255,.07), transparent 22%),
    linear-gradient(135deg,#03111f 0%, #061f34 45%, #08263f 100%);
}

.loader::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.22;
  background-image:
    linear-gradient(rgba(255,255,255,.08) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.08) 1px, transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(circle at center, black, transparent 72%);
}

.loader::after{
  content:"";
  position:absolute;
  width:320px;
  height:320px;
  border-radius:50%;
  background:conic-gradient(from 90deg, transparent 0 72%, rgba(245,130,11,.28), transparent 86% 100%);
  filter:blur(.2px);
  animation:loaderOrbit 2.4s linear infinite;
}

.loader-mark{
  position:relative;
  z-index:2;
  gap:16px;
}

.loader-mark img{
  width:min(230px,58vw);
  padding:16px;
  border-radius:34px;
  background:rgba(255,255,255,.96);
  box-shadow:
    0 28px 75px rgba(0,0,0,.22),
    0 0 0 1px rgba(255,255,255,.14);
  filter:none;
  animation:loaderLogoPremium 1.6s ease-in-out infinite alternate;
}

.loader-line{
  width:min(220px,54vw);
  height:3px;
  background:rgba(255,255,255,.12);
  box-shadow:0 0 28px rgba(245,130,11,.18);
}

.loader-line span{
  width:38%;
  background:linear-gradient(90deg, transparent, var(--orange), var(--orange-2), transparent);
  animation:loaderLinePremium 1.05s ease-in-out infinite;
}

.loader-mark p{
  color:rgba(255,255,255,.74);
  font-size:13px;
  letter-spacing:.2px;
}

@keyframes loaderOrbit{
  to{transform:rotate(360deg)}
}

@keyframes loaderLogoPremium{
  from{transform:translateY(4px) scale(.985); box-shadow:0 24px 65px rgba(0,0,0,.20)}
  to{transform:translateY(-5px) scale(1.015); box-shadow:0 34px 85px rgba(0,0,0,.26)}
}

@keyframes loaderLinePremium{
  from{transform:translateX(170%)}
  to{transform:translateX(-260%)}
}

/* Call center: warmer, orange-led but still branded */
.call-center-page{
  background:#fff8ef;
}

.cc-hero{
  background:
    radial-gradient(circle at 14% 18%, rgba(245,130,11,.22), transparent 27%),
    radial-gradient(circle at 86% 14%, rgba(255,178,76,.16), transparent 24%),
    linear-gradient(180deg,#fff6ea 0%,#fffaf4 48%,#f7f8fb 100%);
}

.cc-hero .eyebrow,
.cc-details .eyebrow,
.cc-benefits .eyebrow{
  background:rgba(245,130,11,.12);
  color:#b75d00;
  border:1px solid rgba(245,130,11,.18);
}

.cc-hero-copy h1{
  color:var(--navy);
}

.cc-hero-copy h1::after{
  content:"";
  display:block;
  width:92px;
  height:7px;
  border-radius:999px;
  margin-top:18px;
  background:linear-gradient(90deg,var(--orange),var(--orange-2));
}

.cc-hero-copy p{
  color:#5f6370;
}

.cc-points span{
  background:#fff;
  border-color:rgba(245,130,11,.20);
  color:#8d4b00;
}

.cc-panel{
  background:rgba(255,255,255,.90);
  border-color:rgba(245,130,11,.16);
}

.cc-panel::after{
  border-color:rgba(245,130,11,.18);
}

.cc-panel-head img{
  background:#fff6ea;
}

.cc-task-card{
  background:
    radial-gradient(circle at 15% 20%, rgba(255,255,255,.20), transparent 28%),
    linear-gradient(135deg,#f5820b,#db6d00);
}

.cc-task-card span,
.cc-task-card h2,
.cc-task-card p{
  color:#fff;
}

.cc-panel-list div{
  background:#fff7ed;
  border-color:rgba(245,130,11,.20);
}

.cc-task-grid article,
.cc-benefit{
  background:#fff;
  border-color:rgba(245,130,11,.16);
}

.cc-task-grid article:hover,
.cc-benefit:hover{
  border-color:rgba(245,130,11,.28);
  box-shadow:0 22px 60px rgba(245,130,11,.11);
}

.cc-task-grid span,
.cc-benefit span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff4e5;
}

.cc-task-grid h3,
.cc-benefit h3{
  color:#08263f;
}

.cc-benefits{
  background:
    radial-gradient(circle at 10% 18%, rgba(245,130,11,.12), transparent 25%),
    linear-gradient(180deg,#fff 0%,#fff7ed 100%);
}

.cc-growth-card{
  background:
    radial-gradient(circle at 14% 20%, rgba(255,255,255,.20), transparent 32%),
    linear-gradient(135deg,#f5820b,#c95e00);
}

.cc-growth-card .eyebrow.light{
  background:rgba(255,255,255,.16);
  border-color:rgba(255,255,255,.22);
}

.cc-growth-card .btn-light{
  color:#9b5200;
}

/* Responsive logo safety */
@media (max-width:980px){
  .brand.brand-compact img{
    width:54px;
    height:54px;
  }

  .hero,
  .jobs-hero,
  .cc-hero{
    padding-top:158px;
  }
}

@media (max-width:840px){
  .site-header{
    padding:10px 0;
  }

  .brand.brand-compact{
    padding:7px 11px 7px 9px;
    gap:9px;
  }

  .brand.brand-compact img{
    width:46px;
    height:46px;
  }

  .brand.brand-compact span{
    font-size:13px;
  }

  .nav-wrap{
    min-height:58px;
  }

  .hero,
  .jobs-hero,
  .cc-hero{
    padding-top:132px;
  }

  .loader-mark img{
    width:min(190px,58vw);
    border-radius:28px;
  }

  .loader::after{
    width:250px;
    height:250px;
  }
}

@media (max-width:480px){
  .brand.brand-compact span{
    display:none;
  }

  .brand.brand-compact{
    min-width:auto;
    padding:7px;
  }

  .brand.brand-compact img{
    width:44px;
    height:44px;
  }
}


/* Factories B2B page */
.factories-page{
  background:#f5f7fa;
}

.factory-b2b-hero{
  position:relative;
  padding:178px 0 78px;
  background:
    linear-gradient(135deg, rgba(8,38,63,.96), rgba(6,31,52,.98)),
    radial-gradient(circle at 20% 20%, rgba(245,130,11,.24), transparent 28%);
  overflow:hidden;
}

.factory-b2b-hero::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.18;
  background-image:
    linear-gradient(rgba(255,255,255,.10) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.10) 1px, transparent 1px);
  background-size:56px 56px;
  mask-image:linear-gradient(to bottom, black, transparent 78%);
}

.factory-b2b-wrap{
  position:relative;
  z-index:2;
  display:grid;
  grid-template-columns:1fr .78fr;
  gap:42px;
  align-items:center;
}

.b2b-label{
  display:inline-flex;
  padding:8px 13px;
  border-radius:999px;
  color:#fff;
  background:rgba(255,255,255,.10);
  border:1px solid rgba(255,255,255,.14);
  font-size:14px;
  font-weight:800;
}

.factory-b2b-copy h1{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  max-width:840px;
  margin-top:18px;
  color:#fff;
  font-size:clamp(38px,5.2vw,66px);
  line-height:1.16;
  font-weight:800;
  letter-spacing:-.4px;
  text-wrap:balance;
}

.factory-b2b-copy p{
  max-width:760px;
  margin-top:20px;
  color:rgba(255,255,255,.74);
  font-size:18px;
}

.b2b-actions{
  display:flex;
  flex-wrap:wrap;
  gap:14px;
  margin-top:30px;
}

.b2b-actions .btn-outline{
  background:rgba(255,255,255,.08);
  color:#fff;
  border-color:rgba(255,255,255,.18);
}

.b2b-brief{
  padding:28px;
  border-radius:28px;
  background:#fff;
  box-shadow:var(--shadow-strong);
}

.b2b-brief h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  color:var(--navy);
  font-size:32px;
  line-height:1.2;
}

.b2b-brief ul{
  list-style:none;
  display:grid;
  gap:12px;
  margin-top:20px;
}

.b2b-brief li{
  display:flex;
  align-items:center;
  gap:12px;
  padding:13px;
  border-radius:16px;
  background:#f7f8fb;
  border:1px solid var(--line);
  color:#273d52;
  font-weight:700;
}

.b2b-brief li span{
  width:34px;
  height:34px;
  display:grid;
  place-items:center;
  border-radius:12px;
  background:rgba(245,130,11,.12);
  color:var(--orange);
  font-size:12px;
  font-weight:900;
}

.b2b-cover{
  background:#fff;
}

.b2b-section-head{
  max-width:790px;
  margin-bottom:36px;
}

.b2b-section-head h2,
.b2b-why-title h2,
.process-copy h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:14px;
  color:var(--navy);
  font-size:clamp(32px,3.8vw,50px);
  line-height:1.22;
  font-weight:700;
  text-wrap:balance;
}

.b2b-section-head p,
.process-copy p{
  margin-top:14px;
  color:var(--muted);
  font-size:17px;
}

.b2b-services-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:16px;
}

.b2b-service{
  padding:24px;
  border-radius:24px;
  background:#f7f8fb;
  border:1px solid var(--line);
  transition:.2s ease;
}

.b2b-service:hover{
  transform:translateY(-5px);
  box-shadow:var(--shadow);
  background:#fff;
}

.b2b-service span{
  width:52px;
  height:52px;
  display:grid;
  place-items:center;
  border-radius:18px;
  background:#fff4e5;
  font-size:26px;
}

.b2b-service h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  color:var(--navy);
  font-size:25px;
  line-height:1.25;
  margin-top:14px;
}

.b2b-service p{
  margin-top:8px;
  color:var(--muted);
  font-size:15px;
}

.b2b-process{
  color:#fff;
  background:
    radial-gradient(circle at 14% 20%, rgba(245,130,11,.24), transparent 30%),
    linear-gradient(135deg,#061f34,#0a304d);
}

.b2b-process-grid{
  display:grid;
  grid-template-columns:.86fr 1.14fr;
  gap:42px;
  align-items:center;
}

.process-copy h2,
.process-copy p{
  color:#fff;
}

.process-copy p{
  color:rgba(255,255,255,.74);
}

.process-copy .btn{
  margin-top:26px;
}

.process-steps{
  display:grid;
  grid-template-columns:repeat(3,1fr);
  gap:14px;
}

.process-steps div{
  padding:22px;
  border-radius:22px;
  background:rgba(255,255,255,.09);
  border:1px solid rgba(255,255,255,.13);
}

.process-steps b{
  width:42px;
  height:42px;
  display:grid;
  place-items:center;
  border-radius:14px;
  background:var(--orange);
  color:#fff;
}

.process-steps h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:18px;
  font-size:24px;
  line-height:1.2;
  color:#fff;
}

.process-steps p{
  margin-top:8px;
  color:rgba(255,255,255,.70);
  font-size:14px;
}

.b2b-why{
  background:#fff;
}

.b2b-why-grid{
  display:grid;
  grid-template-columns:.8fr 1.2fr;
  gap:44px;
  align-items:start;
}

.b2b-why-list{
  display:grid;
  grid-template-columns:repeat(2,1fr);
  gap:14px;
}

.b2b-why-list div{
  padding:22px;
  border-radius:22px;
  background:#f7f8fb;
  border:1px solid var(--line);
}

.b2b-why-list strong{
  display:block;
  color:var(--navy);
  font-weight:900;
}

.b2b-why-list span{
  display:block;
  margin-top:7px;
  color:var(--muted);
  font-size:15px;
}

.b2b-final-cta{
  padding:20px 0 90px;
  background:#fff;
}

.b2b-final-card{
  display:grid;
  grid-template-columns:1fr auto;
  gap:28px;
  align-items:center;
  padding:34px;
  border-radius:32px;
  color:#fff;
  background:
    radial-gradient(circle at 16% 22%, rgba(245,130,11,.27), transparent 32%),
    linear-gradient(135deg,#061f34,#0c3556);
  box-shadow:var(--shadow-strong);
}

.b2b-final-card span{
  color:var(--orange-2);
  font-weight:800;
}

.b2b-final-card h2{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin-top:8px;
  color:#fff;
  font-size:clamp(32px,4vw,52px);
  line-height:1.15;
}

.b2b-final-card p{
  margin-top:10px;
  color:rgba(255,255,255,.74);
}

@media (max-width:1040px){
  .factory-b2b-wrap,
  .b2b-process-grid,
  .b2b-why-grid,
  .b2b-final-card{
    grid-template-columns:1fr;
  }

  .b2b-services-grid,
  .process-steps{
    grid-template-columns:repeat(2,1fr);
  }

  .b2b-final-card .btn{
    width:max-content;
  }
}

@media (max-width:840px){
  .factory-b2b-hero{
    padding:132px 0 62px;
  }

  .factory-b2b-copy h1{
    font-size:38px;
    line-height:1.2;
  }

  .factory-b2b-copy p{
    font-size:16px;
  }

  .b2b-actions{
    flex-direction:column;
  }

  .b2b-services-grid,
  .process-steps,
  .b2b-why-list{
    grid-template-columns:1fr;
  }

  .b2b-final-card .btn{
    width:100%;
  }
}

@media (max-width:480px){
  .factory-b2b-copy h1{
    font-size:34px;
  }

  .b2b-section-head h2,
  .b2b-why-title h2,
  .process-copy h2,
  .b2b-final-card h2{
    font-size:30px;
  }
}

/* Dynamic jobs states */
.jobs-loading,.jobs-empty{grid-column:1/-1;padding:34px;border-radius:24px;background:#fff;border:1px solid var(--line);text-align:center;color:var(--muted);box-shadow:var(--shadow)}.jobs-empty h3{font-family:"Changa","Readex Pro",system-ui,sans-serif;margin:0 0 8px;color:var(--navy);font-size:30px}

/* Dynamic jobs fix */
.job-list-grid .jobs-loading,
.job-list-grid .jobs-empty{
  grid-column:1/-1;
  padding:34px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  box-shadow:var(--shadow);
}
.job-list-grid .jobs-empty h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin:0 0 8px;
  color:var(--navy);
  font-size:30px;
}

/* V3 fix: API job cards must be visible after dynamic render */
.available-job.dynamic-job-card,
.available-job.dynamic-job-card.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto;
}

/* Final reviewed dynamic jobs guarantees */
.available-job.dynamic-job-card,
.available-job.dynamic-job-card.is-visible{
  opacity:1 !important;
  visibility:visible !important;
  transform:none !important;
  pointer-events:auto !important;
}
.job-list-grid .jobs-loading,
.job-list-grid .jobs-empty,
.jobs-grid .jobs-loading,
.jobs-grid .jobs-empty{
  grid-column:1/-1;
  padding:34px;
  border-radius:24px;
  background:#fff;
  border:1px solid var(--line);
  text-align:center;
  color:var(--muted);
  box-shadow:var(--shadow);
}
.job-list-grid .jobs-empty h3,
.jobs-grid .jobs-empty h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  margin:0 0 8px;
  color:var(--navy);
  font-size:30px;
}

/* Production final: agency credit + jobs trust note */
.footer .agency-credit{
  display:inline-flex;
  flex-wrap:wrap;
  gap:6px;
  align-items:center;
  color:rgba(255,255,255,.72);
}
.footer .agency-credit a{
  color:#ffb24c;
  font-weight:800;
}
.jobs-trust-note{
  background:#fff;
  padding:0 0 28px;
}
.jobs-trust-card{
  display:grid;
  grid-template-columns:auto 1fr auto;
  gap:18px;
  align-items:center;
  padding:20px 22px;
  border-radius:24px;
  background:linear-gradient(135deg,#fff7ed,#ffffff);
  border:1px solid rgba(245,130,11,.18);
  box-shadow:var(--shadow);
}
.jobs-trust-card strong{
  color:#f5820b;
  font-weight:900;
  white-space:nowrap;
}
.jobs-trust-card p{
  margin:0;
  color:var(--muted);
}
.jobs-trust-card span{
  display:inline-flex;
  padding:8px 12px;
  border-radius:999px;
  background:#08263f;
  color:#fff;
  font-size:13px;
  font-weight:800;
  white-space:nowrap;
}
@media(max-width:900px){
  .jobs-trust-card{
    grid-template-columns:1fr;
  }
  .jobs-trust-card strong,
  .jobs-trust-card span{
    width:max-content;
  }
}


/* =========================
   Production Final V2 polish
   ========================= */

/* Inner header balance */
.site-header{
  padding:12px 0;
}
.site-header.scrolled,
.inner-header{
  padding:8px 0;
}
.nav-wrap{
  min-height:68px;
}
.brand.brand-compact{
  gap:10px;
  padding:7px 14px 7px 10px;
}
.brand.brand-compact img{
  width:58px;
  height:58px;
}
.brand.brand-compact span{
  font-size:14px;
}

/* Jobs hero/header spacing fix */
.jobs-hero{
  padding:176px 0 72px;
}
.jobs-hero-copy h1{
  max-width:680px;
}
.jobs-alert{
  margin-top:18px;
}
.jobs-trust-note{
  background:#f7f8fb;
  padding:0 0 24px;
}
.jobs-trust-card{
  position:relative;
  overflow:hidden;
}
.jobs-trust-card::after{
  content:"";
  position:absolute;
  inset:auto -40px -40px auto;
  width:140px;
  height:140px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,130,11,.16), transparent 70%);
  pointer-events:none;
}
.jobs-filter-section{
  padding-top:8px;
}

/* Premium compact footer */
.footer{
  background:linear-gradient(180deg,#06233c 0%, #04192c 100%);
  color:#fff;
  padding:44px 0 18px;
}
.footer-shell{
  border-radius:28px 28px 0 0;
}
.footer-grid{
  display:grid;
  grid-template-columns:1.15fr .8fr 1fr;
  gap:28px;
  align-items:start;
}
.footer-brand img{
  width:142px;
  margin-bottom:14px;
}
.footer-brand p{
  max-width:360px;
  line-height:1.9;
  color:rgba(255,255,255,.72);
  font-size:14px;
  margin:0;
}
.footer-mini-links,
.footer-mails{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:16px;
}
.footer-mini-links a,
.footer-mails a{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.08);
  color:rgba(255,255,255,.84);
  font-size:13px;
  font-weight:700;
  margin:0;
}
.footer h3{
  font-family:"Changa","Readex Pro",system-ui,sans-serif;
  font-size:24px;
  line-height:1.3;
  margin:0 0 14px;
  color:#fff;
}
.footer-links-list{
  display:grid;
  gap:10px;
}
.footer-links-list a{
  display:inline-flex;
  align-items:center;
  width:max-content;
  padding:0;
  margin:0;
  color:rgba(255,255,255,.8);
  font-weight:700;
}
.footer-contact-list{
  display:grid;
  gap:10px;
}
.footer-contact-item{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:10px;
  padding:10px 14px;
  border-radius:18px;
  background:rgba(255,255,255,.05);
  border:1px solid rgba(255,255,255,.08);
}
.footer-contact-item span{
  color:rgba(255,255,255,.78);
  font-weight:700;
  font-size:13px;
}
.footer-contact-item a{
  margin:0;
  color:#fff;
  font-weight:800;
  display:inline-block;
}
.footer a:hover{
  color:#ffbf67;
  transform:translateY(-1px);
}
.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:14px;
  margin-top:24px;
  padding-top:16px;
  border-top:1px solid rgba(255,255,255,.1);
  color:rgba(255,255,255,.6);
  font-size:13px;
}
.footer .agency-credit{
  display:inline-flex;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}
.footer .agency-credit em{
  font-style:normal;
  opacity:.45;
}
.footer .agency-credit a{
  color:#ffb24c;
  font-weight:800;
}

/* subtle page accent */
.page-glow{
  position:fixed;
  inset:auto auto 24px 24px;
  width:90px;
  height:90px;
  border-radius:50%;
  background:radial-gradient(circle, rgba(245,130,11,.18), transparent 72%);
  pointer-events:none;
  z-index:0;
}

@media (max-width: 992px){
  .jobs-hero{
    padding-top:164px;
  }
  .footer-grid{
    grid-template-columns:1fr;
    gap:20px;
  }
  .footer-brand p{
    max-width:none;
  }
}
@media (max-width: 840px){
  .brand.brand-compact img{
    width:54px;
    height:54px;
  }
  .jobs-hero{
    padding-top:150px;
  }
}
@media (max-width: 560px){
  .footer{
    padding:36px 0 16px;
  }
  .footer-contact-item{
    flex-direction:column;
    align-items:flex-start;
  }
  .footer-bottom{
    flex-direction:column;
    align-items:flex-start;
  }
  .jobs-trust-card{
    grid-template-columns:1fr;
    gap:12px;
    padding:18px;
  }
  .jobs-trust-card strong,
  .jobs-trust-card span{
    width:max-content;
  }
}


/* =========================
   Production Final V3 Mobile UX
   ========================= */

/* stop horizontal ghost panel on mobile */
html,
body{
  max-width:100%;
  overflow-x:hidden;
}

/* cleaner mobile header + menu */
@media (max-width:840px){
  .site-header{
    padding:10px 0 !important;
  }

  .nav-wrap{
    min-height:56px;
  }

  .menu-btn{
    display:grid !important;
    place-items:center;
    position:relative;
    z-index:1202;
    background:rgba(255,255,255,.92);
    backdrop-filter:blur(14px);
  }

  .menu-btn span{
    grid-area:1/1;
    margin:0;
  }

  .menu-btn span:nth-child(1){
    transform:translateY(-7px);
  }

  .menu-btn span:nth-child(3){
    transform:translateY(7px);
  }

  .menu-btn.active span:nth-child(1){
    transform:rotate(45deg);
  }

  .menu-btn.active span:nth-child(2){
    opacity:0;
  }

  .menu-btn.active span:nth-child(3){
    transform:rotate(-45deg);
  }

  .site-nav{
    position:fixed !important;
    top:78px;
    right:14px;
    left:14px;
    z-index:1200;
    display:grid;
    gap:10px;
    padding:14px;
    border-radius:28px;
    background:rgba(255,255,255,.96);
    border:1px solid rgba(8,38,63,.08);
    box-shadow:0 30px 90px rgba(8,38,63,.18);
    backdrop-filter:blur(20px);
    transform:translateY(-14px) scale(.98);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
    max-height:calc(100vh - 104px);
    overflow:auto;
  }

  .site-nav.active{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  .site-nav a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    border-radius:999px;
    background:#f6f8fb;
    padding:0 18px;
    font-size:15px;
    font-weight:900;
  }

  .site-nav a.active{
    background:var(--navy);
    color:#fff;
  }

  body.menu-open::before{
    content:"";
    position:fixed;
    inset:0;
    z-index:1190;
    background:rgba(6,31,52,.42);
    backdrop-filter:blur(4px);
  }

  body.menu-open{
    overflow:hidden;
  }
}

/* mobile visual polish and section transitions */
@media (max-width:840px){
  .hero,
  .jobs-hero,
  .cc-hero,
  .factory-b2b-hero{
    border-radius:0 0 34px 34px;
  }

  .section,
  .jobs-list-section,
  .jobs-note-section,
  .cc-details,
  .cc-benefits,
  .b2b-cover,
  .b2b-why{
    position:relative;
  }

  .section::before,
  .jobs-list-section::before,
  .cc-details::before,
  .b2b-cover::before{
    content:"";
    position:absolute;
    top:-18px;
    right:22px;
    width:72px;
    height:6px;
    border-radius:999px;
    background:linear-gradient(90deg,var(--orange),transparent);
    opacity:.45;
  }

  .hero-actions,
  .cc-actions,
  .b2b-actions{
    gap:10px;
  }

  .hero-actions .btn,
  .cc-actions .btn,
  .b2b-actions .btn,
  .job-apply{
    width:100%;
  }

  .jobs-hero{
    padding-top:138px !important;
    padding-bottom:52px;
  }

  .jobs-hero-grid{
    gap:24px;
  }

  .jobs-hero-copy h1{
    font-size:38px;
    line-height:1.18;
  }

  .jobs-hero-copy p{
    font-size:16px;
  }

  .jobs-alert{
    margin-top:0;
    opacity:1;
  }

  .jobs-filter{
    overflow-x:auto;
    justify-content:flex-start;
    padding-bottom:6px;
    scrollbar-width:none;
  }

  .jobs-filter::-webkit-scrollbar{
    display:none;
  }

  .jobs-filter button{
    white-space:nowrap;
    flex:0 0 auto;
  }

  .available-job,
  .job-card,
  .cc-benefit,
  .b2b-service{
    border-radius:26px;
  }

  .job-details-grid{
    grid-template-columns:1fr;
  }

  .salary-box strong{
    font-size:32px;
  }

  .jobs-trust-note{
    padding:18px 0 8px;
  }

  .jobs-trust-card{
    border-radius:24px;
    box-shadow:0 18px 55px rgba(8,38,63,.07);
  }
}

/* final premium footer */
.footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 16% 18%, rgba(245,130,11,.14), transparent 28%),
    linear-gradient(180deg,#061f34 0%,#041827 100%) !important;
  padding:38px 0 18px !important;
}

.footer::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.12;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size:48px 48px;
  mask-image:linear-gradient(to bottom, black, transparent 82%);
}

.footer-shell{
  position:relative;
  z-index:1;
}

.footer-topline{
  height:1px;
  margin-bottom:24px;
  background:linear-gradient(90deg, transparent, rgba(245,130,11,.75), rgba(255,255,255,.12), transparent);
}

.footer-grid{
  grid-template-columns:1.05fr .75fr 1.05fr !important;
  gap:24px !important;
}

.footer-brand img{
  width:126px !important;
  margin-bottom:12px !important;
}

.footer-brand p{
  max-width:360px;
  font-size:13.5px;
  line-height:1.85;
  color:rgba(255,255,255,.68);
}

.footer h3{
  font-size:22px !important;
  margin-bottom:12px !important;
}

.footer-socials,
.footer-mini-links,
.footer-mails{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:14px;
}

.footer-socials a,
.footer-mini-links a,
.footer-mails a,
.agency-social{
  display:inline-flex !important;
  margin:0 !important;
  padding:8px 11px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.09);
  color:rgba(255,255,255,.82) !important;
  font-size:12.5px;
  font-weight:800;
}

.footer-links-list{
  display:grid;
  gap:8px;
}

.footer-links-list a{
  margin:0 !important;
  width:max-content;
  color:rgba(255,255,255,.76) !important;
  font-size:14px;
  font-weight:800;
}

.footer-contact-list{
  display:grid;
  gap:8px;
}

.footer-contact-item{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 !important;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.08);
}

.footer-contact-item span{
  color:rgba(255,255,255,.68);
  font-size:12.5px;
  font-weight:800;
}

.footer-contact-item strong{
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.footer-bottom{
  margin-top:22px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  align-items:center;
}

.agency-pill{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(245,130,11,.10);
  border:1px solid rgba(245,130,11,.18);
}

.agency-pill span{
  color:rgba(255,255,255,.58);
  font-size:12px;
}

.agency-pill strong{
  color:#ffb24c;
  font-size:13px;
}

.footer a:hover{
  color:#ffbf67 !important;
  transform:translateY(-1px);
}

@media (max-width:992px){
  .footer-grid{
    grid-template-columns:1fr !important;
  }

  .footer-brand p{
    max-width:none;
  }
}

@media (max-width:560px){
  .footer{
    padding:32px 0 16px !important;
  }

  .footer-grid{
    gap:22px !important;
  }

  .footer-contact-item{
    min-height:54px;
  }

  .footer-bottom{
    display:grid !important;
    justify-items:start;
    gap:10px;
    font-size:12.5px !important;
  }

  .agency-pill,
  .agency-social{
    width:max-content;
  }
}


/* =========================
   V4 critical mobile menu fix
   ========================= */
@media (max-width:840px){
  body:not(.menu-open)::before{
    display:none !important;
    content:none !important;
  }

  body.menu-open::before{
    content:"" !important;
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1090 !important;
    background:rgba(6,31,52,.34) !important;
    backdrop-filter:blur(5px) !important;
  }

  .site-header{
    z-index:1300 !important;
  }

  .menu-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:1320 !important;
  }

  .menu-btn span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }

  .menu-btn span:nth-child(1){
    transform:translate(-50%, calc(-50% - 7px)) !important;
  }

  .menu-btn span:nth-child(3){
    transform:translate(-50%, calc(-50% + 7px)) !important;
  }

  .menu-btn.active span:nth-child(1){
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }

  .menu-btn.active span:nth-child(2){
    opacity:0 !important;
  }

  .menu-btn.active span:nth-child(3){
    transform:translate(-50%,-50%) rotate(-45deg) !important;
  }

  .site-nav{
    position:fixed !important;
    top:76px !important;
    right:14px !important;
    left:14px !important;
    width:auto !important;
    max-width:none !important;
    height:auto !important;
    max-height:calc(100vh - 100px) !important;
    display:grid !important;
    grid-template-columns:1fr !important;
    gap:10px !important;
    padding:14px !important;
    border-radius:28px !important;
    background:rgba(255,255,255,.97) !important;
    border:1px solid rgba(8,38,63,.08) !important;
    box-shadow:0 28px 80px rgba(8,38,63,.22) !important;
    backdrop-filter:blur(20px) !important;
    overflow:auto !important;
    z-index:1310 !important;

    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:translateY(-18px) scale(.98) !important;
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease !important;
  }

  .site-nav.active{
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    transform:translateY(0) scale(1) !important;
  }

  .site-nav a{
    width:100% !important;
    min-height:52px !important;
    display:flex !important;
    justify-content:center !important;
    align-items:center !important;
    text-align:center !important;
    border-radius:999px !important;
    background:#f5f7fb !important;
    color:var(--navy) !important;
  }

  .site-nav a.active{
    background:var(--navy) !important;
    color:#fff !important;
  }

  body.menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }
}

/* cleaner mobile hero/cards */
@media (max-width:560px){
  .container{
    width:min(100% - 26px, var(--container)) !important;
  }

  .hero,
  .jobs-hero,
  .cc-hero,
  .factory-b2b-hero{
    padding-top:128px !important;
  }

  .hero-copy h1,
  .jobs-hero-copy h1,
  .cc-hero-copy h1,
  .factory-b2b-copy h1{
    font-size:34px !important;
    line-height:1.22 !important;
  }

  .hero-copy p,
  .jobs-hero-copy p,
  .cc-hero-copy p,
  .factory-b2b-copy p{
    font-size:15.5px !important;
    line-height:1.9 !important;
  }

  .available-job,
  .cc-panel,
  .b2b-brief,
  .jobs-alert,
  .jobs-note-card,
  .jobs-trust-card{
    border-radius:24px !important;
  }

  .float-whatsapp{
    left:12px !important;
    bottom:12px !important;
    height:44px !important;
    padding:0 13px !important;
    font-size:13px !important;
  }
}

/* footer V4 cleaner compact mobile */
.footer-bottom .agency-social{
  display:none !important;
}

@media (max-width:560px){
  .footer-brand img{
    width:116px !important;
  }

  .footer h3{
    font-size:20px !important;
  }

  .footer-socials,
  .footer-mails{
    gap:7px !important;
  }

  .footer-socials a,
  .footer-mails a{
    font-size:12px !important;
    padding:7px 10px !important;
  }

  .agency-pill{
    padding:8px 12px !important;
  }

  .agency-pill span{
    font-size:11.5px !important;
  }

  .agency-pill strong{
    font-size:13px !important;
  }
}


/* =========================================================
   V5 final rebuild: mobile menu is now separate from desktop nav
   ========================================================= */

/* These are hidden on desktop */
.mobile-menu-backdrop,
.mobile-menu-panel{
  display:none;
}

/* Remove any old pseudo overlay from previous versions */
body:not(.mobile-menu-open)::before,
body:not(.menu-open)::before{
  content:none !important;
  display:none !important;
}

/* Desktop keeps original nav */
@media (min-width:841px){
  .site-nav{
    display:flex !important;
    opacity:1 !important;
    visibility:visible !important;
    pointer-events:auto !important;
    position:static !important;
    transform:none !important;
  }

  .mobile-menu-backdrop,
  .mobile-menu-panel{
    display:none !important;
  }
}

/* Mobile uses only the new panel */
@media (max-width:840px){
  html,
  body{
    overflow-x:hidden !important;
  }

  .site-header{
    z-index:2000 !important;
  }

  .nav-wrap{
    min-height:56px !important;
  }

  /* CRITICAL: hide the old desktop nav completely on mobile */
  .site-nav,
  .site-nav.active{
    display:none !important;
    opacity:0 !important;
    visibility:hidden !important;
    pointer-events:none !important;
    transform:none !important;
    position:absolute !important;
    inset:auto !important;
    width:0 !important;
    height:0 !important;
    overflow:hidden !important;
  }

  .menu-btn{
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    position:relative !important;
    z-index:2020 !important;
    background:rgba(255,255,255,.94) !important;
    border:1px solid rgba(8,38,63,.08) !important;
    backdrop-filter:blur(12px);
  }

  .menu-btn span{
    position:absolute !important;
    left:50% !important;
    top:50% !important;
    margin:0 !important;
    transform:translate(-50%,-50%) !important;
  }

  .menu-btn span:nth-child(1){
    transform:translate(-50%, calc(-50% - 7px)) !important;
  }

  .menu-btn span:nth-child(3){
    transform:translate(-50%, calc(-50% + 7px)) !important;
  }

  .menu-btn.active span:nth-child(1){
    transform:translate(-50%,-50%) rotate(45deg) !important;
  }

  .menu-btn.active span:nth-child(2){
    opacity:0 !important;
  }

  .menu-btn.active span:nth-child(3){
    transform:translate(-50%,-50%) rotate(-45deg) !important;
  }

  .mobile-menu-backdrop{
    display:block !important;
    position:fixed !important;
    inset:0 !important;
    z-index:1800 !important;
    background:rgba(5,23,39,.46) !important;
    backdrop-filter:blur(6px);
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transition:opacity .22s ease, visibility .22s ease;
  }

  .mobile-menu-backdrop.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
  }

  .mobile-menu-panel{
    display:grid !important;
    position:fixed !important;
    top:78px !important;
    right:14px !important;
    left:14px !important;
    z-index:1900 !important;
    gap:10px;
    padding:14px;
    border-radius:28px;
    background:rgba(255,255,255,.98);
    border:1px solid rgba(8,38,63,.08);
    box-shadow:0 28px 80px rgba(8,38,63,.24);
    backdrop-filter:blur(20px);
    max-height:calc(100vh - 104px);
    overflow:auto;
    opacity:0;
    visibility:hidden;
    pointer-events:none;
    transform:translateY(-18px) scale(.98);
    transition:opacity .22s ease, transform .22s ease, visibility .22s ease;
  }

  .mobile-menu-panel.open{
    opacity:1;
    visibility:visible;
    pointer-events:auto;
    transform:translateY(0) scale(1);
  }

  .mobile-menu-panel a{
    display:flex;
    align-items:center;
    justify-content:center;
    min-height:52px;
    padding:0 18px;
    border-radius:999px;
    background:#f5f7fb;
    color:var(--navy);
    font-size:15px;
    font-weight:900;
    text-align:center;
  }

  .mobile-menu-panel a.active{
    background:var(--navy);
    color:#fff;
  }

  body.mobile-menu-open{
    overflow:hidden !important;
    touch-action:none !important;
  }

  /* prevent older body.menu-open code from affecting page */
  body.menu-open{
    overflow:auto !important;
    touch-action:auto !important;
  }
}

/* Mobile visual cleanup */
@media (max-width:560px){
  .container{
    width:min(100% - 26px, var(--container)) !important;
  }

  .brand.brand-compact img{
    width:46px !important;
    height:46px !important;
  }

  .brand.brand-compact{
    padding:7px !important;
  }

  .brand.brand-compact span{
    display:none !important;
  }

  .hero,
  .jobs-hero,
  .cc-hero,
  .factory-b2b-hero{
    padding-top:126px !important;
  }

  .hero-copy h1,
  .jobs-hero-copy h1,
  .cc-hero-copy h1,
  .factory-b2b-copy h1{
    font-size:34px !important;
    line-height:1.22 !important;
  }

  .jobs-alert,
  .cc-panel,
  .b2b-brief,
  .available-job,
  .jobs-note-card,
  .jobs-trust-card{
    border-radius:24px !important;
  }
}


/* V6 cache-break emergency fallback */
@media(max-width:840px){
  #siteNav{
    display:none!important;
    opacity:0!important;
    visibility:hidden!important;
    pointer-events:none!important;
    width:0!important;
    height:0!important;
    overflow:hidden!important;
  }
}


/* =========================================================
   Production Final V8: clean premium footer, no emails
   ========================================================= */

.footer{
  position:relative;
  overflow:hidden;
  background:
    radial-gradient(circle at 18% 20%, rgba(245,130,11,.16), transparent 28%),
    radial-gradient(circle at 84% 8%, rgba(255,255,255,.06), transparent 24%),
    linear-gradient(180deg,#061f34 0%, #041826 100%) !important;
  color:#fff;
  padding:38px 0 18px !important;
}

.footer::before{
  content:"";
  position:absolute;
  inset:0;
  opacity:.10;
  background-image:
    linear-gradient(rgba(255,255,255,.16) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.16) 1px, transparent 1px);
  background-size:52px 52px;
  mask-image:linear-gradient(to bottom, black, transparent 82%);
}

.footer-shell{
  position:relative;
  z-index:1;
}

.footer-glow{
  height:1px;
  margin-bottom:22px;
  background:linear-gradient(90deg, transparent, rgba(245,130,11,.9), rgba(255,255,255,.18), transparent);
}

.footer-main{
  display:grid;
  grid-template-columns:1.15fr .78fr 1fr;
  gap:18px;
  align-items:stretch;
}

.footer-brand-card,
.footer-nav-card,
.footer-contact-card{
  padding:20px;
  border-radius:26px;
  background:rgba(255,255,255,.045);
  border:1px solid rgba(255,255,255,.075);
  box-shadow:0 18px 50px rgba(0,0,0,.10);
}

.footer-brand-card{
  background:
    radial-gradient(circle at 12% 14%, rgba(245,130,11,.16), transparent 28%),
    rgba(255,255,255,.045);
}

.footer-brand-card img{
  width:116px !important;
  margin:0 0 12px !important;
}

.footer-brand-card p{
  margin:0;
  max-width:390px;
  color:rgba(255,255,255,.72);
  font-size:13.5px;
  line-height:1.9;
}

.footer-cta-row{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:16px;
}

.footer-cta-row a{
  display:inline-flex !important;
  align-items:center;
  justify-content:center;
  margin:0 !important;
  padding:8px 12px;
  border-radius:999px;
  background:rgba(245,130,11,.15);
  border:1px solid rgba(245,130,11,.20);
  color:#ffbd63 !important;
  font-size:12.5px;
  font-weight:900;
}

.footer-label{
  display:inline-flex;
  margin-bottom:14px;
  color:#ffb24c;
  font-size:13px;
  font-weight:900;
}

.footer-nav-card nav{
  display:grid;
  gap:9px;
}

.footer-nav-card a{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  margin:0 !important;
  padding:9px 11px;
  border-radius:14px;
  color:rgba(255,255,255,.80) !important;
  background:rgba(255,255,255,.035);
  font-size:13.5px;
  font-weight:800;
}

.footer-nav-card a::after{
  content:"";
  width:6px;
  height:6px;
  border-radius:50%;
  background:rgba(245,130,11,.75);
  opacity:.7;
}

.footer-contact-card{
  display:grid;
  gap:8px;
}

.footer-phone{
  display:flex !important;
  align-items:center;
  justify-content:space-between;
  gap:12px;
  margin:0 !important;
  padding:10px 12px;
  border-radius:16px;
  background:rgba(255,255,255,.055);
  border:1px solid rgba(255,255,255,.075);
  color:#fff !important;
}

.footer-phone small{
  color:rgba(255,255,255,.62);
  font-size:12px;
  font-weight:800;
}

.footer-phone strong{
  color:#fff;
  font-size:14px;
  font-weight:900;
}

.footer-bottom{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  margin-top:16px !important;
  padding-top:16px !important;
  border-top:1px solid rgba(255,255,255,.09) !important;
  color:rgba(255,255,255,.58);
  font-size:12.5px !important;
}

.agency-pill{
  display:inline-flex !important;
  align-items:center;
  gap:8px;
  margin:0 !important;
  padding:7px 12px;
  border-radius:999px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(245,130,11,.18);
}

.agency-pill small{
  color:rgba(255,255,255,.58);
  font-size:11.5px;
  font-weight:700;
}

.agency-pill strong{
  color:#ffb24c;
  font-size:13px;
  font-weight:900;
}

.agency-link{
  display:inline-flex !important;
  margin:0 !important;
  color:rgba(255,255,255,.64) !important;
  font-size:12.5px;
  font-weight:800;
}

.footer a:hover{
  color:#ffbf67 !important;
  transform:translateY(-1px);
}

/* Remove old footer fragments if cached CSS still sees them */
.footer-mini-links,
.footer-mails,
.footer-socials,
.footer-links-col h3,
.footer-contact-col h3{
  display:none !important;
}

@media(max-width:992px){
  .footer-main{
    grid-template-columns:1fr;
    gap:14px;
  }

  .footer-brand-card p{
    max-width:none;
  }
}

@media(max-width:560px){
  .footer{
    padding:30px 0 16px !important;
  }

  .footer-brand-card,
  .footer-nav-card,
  .footer-contact-card{
    padding:16px;
    border-radius:22px;
  }

  .footer-brand-card img{
    width:106px !important;
  }

  .footer-phone{
    min-height:52px;
  }

  .footer-bottom{
    display:grid !important;
    justify-items:start;
    gap:10px;
  }

  .agency-pill,
  .agency-link{
    width:max-content;
  }
}