:root{
    --navy:#0D1B2A;
    --navy-2:#0a1622;
    --navy-3:#142536;
    --gold:#CB9B4C;
    --gold-2:#b88838;
    --gold-soft:#e8d5a8;
    --cream:#F5F2ED;
    --cream-2:#ECE7DE;
    --ink:#0D1B2A;
    --muted:#5b6776;
    --line:#e6e1d6;
    --white:#ffffff;
  }
  *{box-sizing:border-box}
  html,body{margin:0;padding:0;background:var(--cream);color:var(--ink);font-family:'Montserrat',system-ui,sans-serif;-webkit-font-smoothing:antialiased;font-feature-settings:"ss01","cv11"}
  a{color:inherit;text-decoration:none}
  button{font-family:inherit;cursor:pointer;border:none;background:none}
  img{display:block;max-width:100%}
  input,textarea,select{font-family:inherit}
  ::selection{background:var(--gold);color:var(--navy)}

  /* ---------- typography helpers ---------- */
  .eyebrow{font-size:11px;letter-spacing:.22em;text-transform:uppercase;font-weight:600;color:var(--gold)}
  .eyebrow-ink{color:var(--navy)}
  h1,h2,h3,h4{margin:0;font-weight:700;letter-spacing:-0.01em;line-height:1.05;text-wrap:balance}
  p{margin:0;line-height:1.55}
  .display{font-size:clamp(56px,9vw,128px);font-weight:800;letter-spacing:-0.035em;line-height:.92}
  .h1{font-size:clamp(40px,5.5vw,72px);font-weight:700;letter-spacing:-0.025em;line-height:1}
  .h2{font-size:clamp(28px,3.4vw,44px);font-weight:700;letter-spacing:-0.02em}
  .h3{font-size:22px;font-weight:600}
  .lead{font-size:18px;line-height:1.5;color:var(--muted);max-width:56ch;text-wrap:pretty}
  .gold{color:var(--gold)}
  .italic{font-style:italic;font-weight:400}

  /* ---------- top nav ---------- */
  .nav{position:sticky;top:0;z-index:50;background:rgba(245,242,237,.85);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
  .nav-inner{max-width:1440px;margin:0 auto;padding:18px 40px;display:flex;align-items:center;gap:40px}
  .brand{display:flex;align-items:center;gap:14px;cursor:pointer}
  .brand-mark{width:44px;height:44px}
  .brand-text{display:flex;flex-direction:column;line-height:1}
  .brand-text .vc{font-size:18px;font-weight:800;letter-spacing:.18em;color:var(--navy)}
  .brand-text .gp{font-size:9px;font-weight:600;letter-spacing:.42em;color:var(--gold);margin-top:3px}
  .nav-links{display:flex;gap:6px;margin-left:auto}
  .nav-link{padding:10px 16px;font-size:13px;font-weight:500;letter-spacing:.02em;border-radius:999px;color:var(--navy);transition:all .2s}
  .nav-link:hover{background:rgba(13,27,42,.06)}
  .nav-link.active{background:var(--navy);color:var(--cream)}
  .nav-cta{display:flex;align-items:center;gap:10px;padding:11px 20px 11px 22px;background:var(--gold);color:var(--navy);font-weight:600;font-size:13px;letter-spacing:.02em;border-radius:999px;transition:all .2s}
  .nav-cta:hover{background:var(--navy);color:var(--cream)}
  .nav-cta .arr{width:14px;height:14px}
  .nav-phone{font-size:12px;color:var(--muted);font-weight:500;letter-spacing:.04em;display:flex;align-items:center;gap:8px}
  .nav-phone .dot{width:6px;height:6px;border-radius:50%;background:#5cc878;box-shadow:0 0 0 4px rgba(92,200,120,.18)}

  /* ---------- containers ---------- */
  .wrap{max-width:1440px;margin:0 auto;padding:0 40px}
  .section{padding:120px 0}
  .section-tight{padding:80px 0}

  /* ---------- HERO ---------- */
  .hero{position:relative;background:var(--navy);color:var(--cream);overflow:hidden;padding:0}
  .hero-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:0;min-height:760px}
  .hero-left{padding:64px 56px 56px;display:flex;flex-direction:column;justify-content:space-between;position:relative;z-index:2}
  .hero-tag{display:inline-flex;align-items:center;gap:10px;padding:8px 14px 8px 10px;background:rgba(203,155,76,.12);border:1px solid rgba(203,155,76,.35);border-radius:999px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);font-weight:600;width:fit-content}
  .hero-tag .pulse{width:8px;height:8px;border-radius:50%;background:var(--gold);box-shadow:0 0 0 4px rgba(203,155,76,.25);animation:pulse 2s infinite}
  @keyframes pulse{50%{box-shadow:0 0 0 8px rgba(203,155,76,0)}}
  .hero-headline{margin-top:36px}
  .hero-headline .l1{display:block;color:var(--cream)}
  .hero-headline .l2{display:block;color:var(--gold);white-space:nowrap}
  .hero-headline .l3{display:block;color:var(--cream);font-style:italic;font-weight:300;font-size:.42em;letter-spacing:0;margin-top:12px}
  .hero-sub{max-width:48ch;color:rgba(245,242,237,.7);font-size:17px;line-height:1.55;margin-top:28px}
  .hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:36px;margin-bottom:36px}
  .btn{display:inline-flex;align-items:center;gap:12px;padding:16px 26px;border-radius:999px;font-weight:600;font-size:14px;letter-spacing:.02em;transition:transform .2s, background .2s, color .2s}
  .btn-primary{background:var(--gold);color:var(--navy)}
  .btn-primary:hover{background:var(--cream);transform:translateY(-1px)}
  .btn-ghost{background:transparent;color:var(--cream);border:1px solid rgba(245,242,237,.25)}
  .btn-ghost:hover{background:rgba(245,242,237,.08);border-color:rgba(245,242,237,.5)}
  .btn-dark{background:var(--navy);color:var(--cream)}
  .btn-dark:hover{background:var(--navy-3);transform:translateY(-1px)}
  .btn .arr{width:16px;height:16px;transition:transform .2s}
  .btn:hover .arr{transform:translateX(3px)}

  .hero-bottom{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:1px solid rgba(245,242,237,.12);padding-top:28px;margin-top:auto}
  .hero-stat{padding:0 18px 0 0}
  .hero-stat:not(:last-child){border-right:1px solid rgba(245,242,237,.12)}
  .hero-stat:not(:first-child){padding-left:18px}
  .hero-stat .num{font-size:32px;font-weight:700;color:var(--gold);letter-spacing:-0.02em}
  .hero-stat .lbl{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,237,.55);margin-top:4px;font-weight:500}

  .hero-right{position:relative;background:var(--navy-2);overflow:hidden}
  .hero-right::before{content:"";position:absolute;left:-1px;top:0;bottom:0;width:120px;background:linear-gradient(90deg, var(--navy) 0%, transparent 100%);z-index:3;pointer-events:none}
  .hero-photo{position:absolute;inset:0}
  .hero-photo svg{width:100%;height:100%}
  .hero-badge{position:absolute;right:32px;bottom:32px;width:170px;height:170px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;flex-direction:column;align-items:center;justify-content:center;text-align:center;z-index:4;font-weight:700;letter-spacing:.04em;box-shadow:0 16px 48px rgba(0,0,0,.35);transform:rotate(-6deg)}
  .hero-badge .b1{font-size:13px;font-weight:600;letter-spacing:.18em;text-transform:uppercase}
  .hero-badge .b2{font-size:22px;font-weight:800;letter-spacing:-0.02em;margin-top:4px}
  .hero-badge .b3{font-size:11px;font-weight:500;letter-spacing:.1em;margin-top:4px;opacity:.8}
  .hero-chip{position:absolute;left:32px;top:32px;background:rgba(13,27,42,.85);backdrop-filter:blur(8px);border:1px solid rgba(203,155,76,.3);padding:10px 16px;border-radius:12px;font-size:12px;color:var(--cream);z-index:4;display:flex;align-items:center;gap:10px}
  .hero-chip .live{width:8px;height:8px;border-radius:50%;background:#5cc878;box-shadow:0 0 0 4px rgba(92,200,120,.25)}

  /* corner gold accent triangles like the brand templates */
  .corner-tri{position:absolute;width:0;height:0;z-index:2}
  .corner-tri.tl{top:0;left:0;border-top:80px solid var(--gold);border-right:80px solid transparent}

  /* ---------- search bar ---------- */
  .searchbar{margin:-44px auto 0;max-width:1280px;background:var(--white);border-radius:18px;box-shadow:0 24px 60px -20px rgba(13,27,42,.25);padding:14px;display:grid;grid-template-columns:1.4fr 1fr 1fr auto;gap:8px;position:relative;z-index:5;border:1px solid rgba(13,27,42,.06)}
  .sb-field{padding:12px 16px;display:flex;flex-direction:column;gap:4px;border-radius:12px;cursor:pointer;transition:background .15s}
  .sb-field:hover{background:var(--cream)}
  .sb-field+.sb-field{border-left:1px solid var(--line)}
  .sb-label{font-size:10px;font-weight:600;letter-spacing:.18em;text-transform:uppercase;color:var(--gold)}
  .sb-input{border:none;background:transparent;outline:none;font-size:15px;font-weight:500;color:var(--navy);padding:0;width:100%}
  .sb-input::placeholder{color:#9aa3ad}
  .sb-go{display:inline-flex;align-items:center;gap:10px;padding:0 28px;background:var(--navy);color:var(--cream);border-radius:12px;font-weight:600;font-size:13px;letter-spacing:.04em}
  .sb-go:hover{background:var(--gold);color:var(--navy)}

  /* ---------- trusted strip ---------- */
  .trusted{padding:48px 0 24px;border-bottom:1px solid var(--line);margin-top:60px}
  .trusted-inner{display:flex;align-items:center;gap:40px;justify-content:space-between;flex-wrap:wrap}
  .trusted-label{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--muted)}
  .trusted-logos{display:flex;gap:48px;align-items:center;flex-wrap:wrap;opacity:.65}
  .tlogo{font-weight:700;letter-spacing:.08em;color:var(--navy);font-size:18px}
  .tlogo.italic{font-style:italic;font-weight:500;letter-spacing:0}
  .tlogo.thin{font-weight:300;letter-spacing:.2em;font-size:14px}

  /* ---------- value props ---------- */
  .props{display:grid;grid-template-columns:1fr 1fr 1fr;gap:32px}
  .prop{padding:36px 32px;background:var(--white);border-radius:20px;border:1px solid var(--line);transition:all .25s;position:relative;overflow:hidden}
  .prop:hover{transform:translateY(-4px);box-shadow:0 20px 40px -20px rgba(13,27,42,.18);border-color:var(--gold)}
  .prop-num{font-size:11px;font-weight:600;letter-spacing:.22em;color:var(--gold)}
  .prop-icon{margin-top:24px;width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:14px;background:var(--cream)}
  .prop h3{margin-top:24px;font-size:24px;font-weight:700;letter-spacing:-0.01em}
  .prop p{margin-top:12px;color:var(--muted);font-size:15px}

  /* ---------- jobs section ---------- */
  .jobs-head{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;margin-bottom:40px;flex-wrap:wrap}
  .jobs-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:32px}
  .filter-chip{padding:10px 18px;border-radius:999px;background:var(--white);border:1px solid var(--line);font-size:13px;font-weight:500;color:var(--navy);transition:all .2s}
  .filter-chip:hover{border-color:var(--navy)}
  .filter-chip.active{background:var(--navy);color:var(--cream);border-color:var(--navy)}
  .filter-chip .ct{margin-left:8px;font-size:11px;color:var(--gold);font-weight:600}
  .filter-chip.active .ct{color:var(--gold)}

  .jobs-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
  .job-card{padding:28px 32px;background:var(--white);border-radius:18px;border:1px solid var(--line);display:grid;grid-template-columns:auto 1fr auto;gap:24px;align-items:center;transition:all .2s;cursor:pointer}
  .job-card:hover{border-color:var(--navy);transform:translateY(-2px);box-shadow:0 16px 32px -16px rgba(13,27,42,.18)}
  .job-card.featured{background:var(--navy);color:var(--cream);border-color:var(--navy)}
  .job-card.featured .job-meta{color:rgba(245,242,237,.6)}
  .job-card.featured .pay{color:var(--gold)}
  .job-card.featured .job-tag{background:rgba(203,155,76,.18);color:var(--gold);border-color:rgba(203,155,76,.3)}
  .job-icon{width:52px;height:52px;border-radius:14px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0}
  .job-card.featured .job-icon{background:rgba(203,155,76,.15)}
  .job-title{font-size:18px;font-weight:700;letter-spacing:-0.01em}
  .job-meta{font-size:13px;color:var(--muted);margin-top:6px;display:flex;gap:14px;flex-wrap:wrap}
  .job-meta span{display:flex;align-items:center;gap:6px}
  .job-tags{display:flex;gap:6px;margin-top:12px;flex-wrap:wrap}
  .job-tag{font-size:10px;font-weight:600;letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border-radius:6px;background:var(--cream);color:var(--navy);border:1px solid transparent}
  .job-tag.gold{background:rgba(203,155,76,.12);color:var(--gold-2);border-color:rgba(203,155,76,.3)}
  .job-tag.urgent{background:#fde8e8;color:#b73838}
  .job-right{text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:8px}
  .pay{font-size:18px;font-weight:700;color:var(--navy);letter-spacing:-0.02em}
  .pay-unit{font-size:11px;color:var(--muted);font-weight:500;letter-spacing:.05em}
  .job-card.featured .pay-unit{color:rgba(245,242,237,.5)}
  .apply-mini{font-size:12px;font-weight:600;color:var(--gold);display:flex;align-items:center;gap:4px;letter-spacing:.04em}

  /* ---------- moving stripe ---------- */
  .stripe{background:var(--gold);color:var(--navy);padding:28px 0;overflow:hidden;position:relative}
  .stripe-track{display:flex;gap:64px;animation:scroll 40s linear infinite;width:max-content}
  .stripe-item{display:flex;align-items:center;gap:18px;font-size:28px;font-weight:800;letter-spacing:-0.02em;text-transform:uppercase;white-space:nowrap}
  .stripe-item .dot{width:10px;height:10px;background:var(--navy);border-radius:50%}
  .stripe-item .star{font-size:24px;font-style:italic;font-weight:300}
  @keyframes scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}

  /* ---------- process ---------- */
  .process{display:grid;grid-template-columns:1fr 1fr 1fr;gap:0;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
  .step{padding:48px 40px 48px 40px;border-right:1px solid var(--line);position:relative;display:flex;flex-direction:column;gap:20px}
  .step:last-child{border-right:none}
  .step-num{font-size:13px;font-weight:600;letter-spacing:.22em;color:var(--gold)}
  .step h3{font-size:32px;font-weight:700;letter-spacing:-0.02em}
  .step p{color:var(--muted);font-size:15px}
  .step-icon{width:64px;height:64px;border-radius:16px;background:var(--cream);display:flex;align-items:center;justify-content:center;margin-top:auto}

  /* ---------- two-up about ---------- */
  .twoup{display:grid;grid-template-columns:1fr 1fr;gap:80px;align-items:center}
  .about-img{position:relative;aspect-ratio:4/5;border-radius:24px;overflow:hidden;background:var(--navy)}
  .about-stats{position:absolute;left:24px;bottom:24px;right:24px;display:grid;grid-template-columns:1fr 1fr;gap:1px;background:rgba(245,242,237,.18);border-radius:14px;overflow:hidden}
  .about-stat{padding:18px;background:rgba(13,27,42,.82);backdrop-filter:blur(8px);color:var(--cream)}
  .about-stat .v{font-size:28px;font-weight:800;color:var(--gold);letter-spacing:-0.02em}
  .about-stat .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,237,.65);margin-top:4px;font-weight:500}

  /* ---------- application form ---------- */
  .apply-section{background:var(--navy);color:var(--cream);position:relative;overflow:hidden}
  .apply-section::before{content:"";position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gold),transparent)}
  .apply-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:80px;align-items:start}
  .apply-info h2{color:var(--cream)}
  .apply-info .lead{color:rgba(245,242,237,.7)}
  .apply-info-list{margin-top:32px;display:flex;flex-direction:column;gap:18px}
  .apply-info-row{display:flex;gap:16px;align-items:flex-start}
  .check{width:24px;height:24px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;flex-shrink:0;margin-top:2px}
  .apply-info-row strong{display:block;font-size:15px;font-weight:600;color:var(--cream)}
  .apply-info-row span{font-size:14px;color:rgba(245,242,237,.65)}

  .form-card{background:var(--cream);color:var(--navy);border-radius:24px;padding:40px}
  .form-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:8px}
  .form-head h3{font-size:24px}
  .form-steps{display:flex;gap:6px}
  .form-step{width:28px;height:4px;border-radius:2px;background:var(--line)}
  .form-step.active{background:var(--gold)}
  .form-step.done{background:var(--navy)}
  .form-sub{color:var(--muted);font-size:14px;margin-bottom:28px}
  .form-grid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
  .form-grid.full{grid-template-columns:1fr}
  .field{display:flex;flex-direction:column;gap:6px}
  .field label{font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--navy)}
  .field input,.field select,.field textarea{padding:14px 16px;background:var(--white);border:1px solid var(--line);border-radius:12px;font-size:14px;color:var(--navy);outline:none;transition:border-color .15s, box-shadow .15s}
  .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--gold);box-shadow:0 0 0 3px rgba(203,155,76,.18)}
  .field textarea{resize:vertical;min-height:96px;font-family:inherit}
  .role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:8px}
  .role-pick{padding:14px;background:var(--white);border:1px solid var(--line);border-radius:12px;font-size:13px;font-weight:600;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .15s;text-align:left}
  .role-pick:hover{border-color:var(--navy)}
  .role-pick.on{background:var(--navy);color:var(--cream);border-color:var(--navy)}
  .role-pick.on .role-ico{color:var(--gold)}
  .role-ico{width:22px;height:22px;color:var(--navy);transition:color .15s}
  .upload{margin-top:12px;padding:24px;border:2px dashed var(--line);border-radius:14px;text-align:center;background:var(--white);cursor:pointer;transition:border-color .15s}
  .upload:hover{border-color:var(--gold);background:#fffbf3}
  .upload.has{border-color:var(--gold);border-style:solid;background:#fffbf3}
  .upload .uic{margin:0 auto 8px;width:42px;height:42px;border-radius:50%;background:var(--cream);display:flex;align-items:center;justify-content:center;color:var(--gold)}
  .upload .ut{font-size:14px;font-weight:600}
  .upload .us{font-size:12px;color:var(--muted);margin-top:4px}
  .form-foot{display:flex;align-items:center;justify-content:space-between;margin-top:28px;gap:12px;flex-wrap:wrap}
  .terms{font-size:12px;color:var(--muted);max-width:60%}
  .terms a{text-decoration:underline;text-decoration-color:var(--gold)}
  .submit-btn{padding:14px 28px;background:var(--navy);color:var(--cream);border-radius:999px;font-weight:600;font-size:14px;display:flex;align-items:center;gap:10px;letter-spacing:.02em;transition:background .15s}
  .submit-btn:hover{background:var(--gold);color:var(--navy)}
  .form-success{padding:48px 32px;text-align:center}
  .form-success .sok{width:72px;height:72px;border-radius:50%;background:var(--gold);color:var(--navy);display:flex;align-items:center;justify-content:center;margin:0 auto 24px}
  .form-success h3{font-size:28px;margin-bottom:12px}
  .form-success p{color:var(--muted)}
  .form-success .ref{margin-top:24px;display:inline-block;padding:10px 16px;background:var(--white);border-radius:10px;font-family:'Montserrat',monospace;font-weight:600;letter-spacing:.1em;font-size:13px;border:1px solid var(--line)}

  /* ---------- testimonial ---------- */
  .testi-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
  .testi{padding:36px;background:var(--white);border:1px solid var(--line);border-radius:20px;display:flex;flex-direction:column;gap:20px}
  .testi-q{font-size:18px;font-weight:500;letter-spacing:-0.01em;line-height:1.5;color:var(--navy)}
  .testi-foot{display:flex;align-items:center;gap:14px;margin-top:auto;padding-top:20px;border-top:1px solid var(--line)}
  .av{width:44px;height:44px;border-radius:50%;background:var(--navy);color:var(--gold);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:14px;letter-spacing:.04em}
  .testi-foot .nm{font-size:14px;font-weight:600}
  .testi-foot .rl{font-size:12px;color:var(--muted)}
  .stars{display:flex;gap:2px;color:var(--gold)}

  /* ---------- employer CTA ---------- */
  .emp{background:var(--cream-2);border-radius:32px;padding:80px;display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center;position:relative;overflow:hidden}
  .emp-tri{position:absolute;top:0;right:0;width:0;height:0;border-top:200px solid var(--gold);border-left:200px solid transparent;opacity:.18}
  .emp-info h2{font-size:48px;letter-spacing:-0.025em}
  .emp-info p{margin-top:16px;color:var(--muted);font-size:17px}
  .emp-form{background:var(--white);border-radius:20px;padding:32px;border:1px solid var(--line)}

  /* ---------- footer ---------- */
  footer{background:var(--navy);color:var(--cream);padding:80px 0 40px;margin-top:120px}
  .foot-grid{display:grid;grid-template-columns:1.4fr 1fr 1fr 1fr 1.2fr;gap:48px;padding-bottom:48px;border-bottom:1px solid rgba(245,242,237,.1)}
  .foot-brand{max-width:280px}
  .foot-brand p{margin-top:18px;font-size:13px;color:rgba(245,242,237,.6);line-height:1.6}
  .foot-col h4{font-size:11px;font-weight:600;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);margin-bottom:18px}
  .foot-col ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:10px}
  .foot-col li{font-size:13px;color:rgba(245,242,237,.7);cursor:pointer;transition:color .15s}
  .foot-col li:hover{color:var(--gold)}
  .foot-newsletter input{width:100%;padding:12px 14px;background:transparent;border:1px solid rgba(245,242,237,.2);border-radius:10px;color:var(--cream);font-size:13px;outline:none;margin-bottom:8px}
  .foot-newsletter input::placeholder{color:rgba(245,242,237,.4)}
  .foot-newsletter button{width:100%;padding:12px;background:var(--gold);color:var(--navy);border-radius:10px;font-weight:600;font-size:13px;letter-spacing:.04em}
  .foot-bot{padding-top:32px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:16px}
  .foot-bot p{font-size:12px;color:rgba(245,242,237,.5)}
  .foot-socials{display:flex;gap:8px}
  .soc{width:36px;height:36px;border-radius:50%;border:1px solid rgba(245,242,237,.2);display:flex;align-items:center;justify-content:center;color:rgba(245,242,237,.7);transition:all .15s}
  .soc:hover{background:var(--gold);color:var(--navy);border-color:var(--gold)}

  /* ---------- pages ---------- */
  @keyframes fadeIn{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}

  /* ---------- jobs page list ---------- */
  .pageheader{background:var(--navy);color:var(--cream);padding:80px 0 60px;position:relative;overflow:hidden}
  .pageheader-grid{display:grid;grid-template-columns:1.5fr 1fr;gap:40px;align-items:end}
  .pageheader h1{font-size:clamp(48px,7vw,88px);letter-spacing:-0.03em}
  .pageheader p{color:rgba(245,242,237,.7);font-size:17px;max-width:50ch;margin-top:16px}
  .pageheader-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:24px}
  .ph-stat{display:flex;flex-direction:column;gap:4px;background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.12);border-radius:14px;padding:18px 22px;backdrop-filter:blur(8px)}
  .ph-stat .v{font-size:32px;font-weight:700;color:var(--gold);letter-spacing:-0.02em}
  .ph-stat .l{font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:rgba(245,242,237,.55)}

  .jobs-layout{display:grid;grid-template-columns:280px 1fr;gap:40px;margin-top:48px}
  .filter-panel{position:sticky;top:90px;align-self:start;background:var(--white);border:1px solid var(--line);border-radius:18px;padding:28px}
  .filter-panel h4{font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:var(--gold);margin:0 0 14px;font-weight:600}
  .filter-section{padding:20px 0;border-bottom:1px solid var(--line)}
  .filter-section:first-child{padding-top:0}
  .filter-section:last-child{border-bottom:none;padding-bottom:0}
  .filter-section .h{font-size:13px;font-weight:600;color:var(--navy);margin-bottom:10px;display:flex;justify-content:space-between;align-items:center}
  .checkbox{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--navy);padding:6px 0;cursor:pointer}
  .checkbox input{appearance:none;width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;display:inline-block;position:relative;transition:all .15s;cursor:pointer}
  .checkbox input:checked{background:var(--navy);border-color:var(--navy)}
  .checkbox input:checked::after{content:"";position:absolute;left:5px;top:1px;width:6px;height:11px;border:solid var(--gold);border-width:0 2px 2px 0;transform:rotate(45deg)}
  .checkbox .ct{margin-left:auto;font-size:12px;color:var(--muted)}
  .range{display:flex;align-items:center;gap:8px;margin-top:12px}
  .range input{flex:1;padding:8px 10px;border:1px solid var(--line);border-radius:8px;font-size:12px}

  .jobs-toolbar{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;flex-wrap:wrap;gap:16px}
  .jobs-toolbar .ct{font-size:14px;color:var(--muted)}
  .jobs-toolbar .ct strong{color:var(--navy);font-weight:700}
  .sort{padding:10px 14px;border:1px solid var(--line);border-radius:10px;background:var(--white);font-size:13px;font-weight:500}
  .joblist{display:flex;flex-direction:column;gap:12px}
  .joblist .job-card{grid-template-columns:auto 1fr auto auto;align-items:flex-start}
  .joblist .job-content{display:flex;flex-direction:column;gap:0}

  /* ---------- employer page ---------- */
  .emp-hero{display:grid;grid-template-columns:1.1fr .9fr;gap:60px;align-items:center;padding:80px 0}
  .emp-hero-left h1{font-size:clamp(44px,6vw,76px)}
  .emp-hero-left .lead{margin-top:24px}
  .emp-features{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:36px}
  .emp-feature{padding:20px;background:var(--white);border:1px solid var(--line);border-radius:14px;display:flex;gap:14px;align-items:flex-start}
  .emp-feature .ef-ico{width:36px;height:36px;border-radius:10px;background:var(--cream);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--gold)}
  .emp-feature strong{display:block;font-size:14px;font-weight:600;margin-bottom:4px}
  .emp-feature span{font-size:13px;color:var(--muted)}

  .visual-card{aspect-ratio:1;border-radius:24px;overflow:hidden;background:var(--navy);position:relative}

  /* ---------- about page ---------- */
  .about-hero{padding:80px 0 100px;text-align:center}
  .about-hero h1{font-size:clamp(48px,7vw,96px);letter-spacing:-0.03em;max-width:18ch;margin:0 auto}
  .about-hero h1 em{font-style:italic;font-weight:400;color:var(--gold)}
  .values{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:24px;overflow:hidden;margin-top:32px;margin-bottom:60px}
  .value{padding:40px 32px;background:var(--cream);display:flex;flex-direction:column;gap:16px;transition:background .2s}
  .value:hover{background:var(--white)}
  .value-ico{width:48px;height:48px;border-radius:12px;background:var(--white);display:flex;align-items:center;justify-content:center;color:var(--gold)}
  .value h3{font-size:18px;letter-spacing:-0.01em}
  .value p{font-size:13px;color:var(--muted);line-height:1.55}

  /* ---------- rhythm tweak overrides ---------- */
  .vc-rhythm-tight .section{padding:80px 0}
  .vc-rhythm-tight .section-tight{padding:48px 0}
  .vc-rhythm-tight .prop,.vc-rhythm-tight .testi,.vc-rhythm-tight .job-card,.vc-rhythm-tight .form-card,.vc-rhythm-tight .filter-panel,.vc-rhythm-tight .emp-feature,.vc-rhythm-tight .visual-card,.vc-rhythm-tight .about-img,.vc-rhythm-tight .emp{border-radius:12px}
  .vc-rhythm-tight .btn,.vc-rhythm-tight .nav-cta,.vc-rhythm-tight .submit-btn,.vc-rhythm-tight .filter-chip{border-radius:8px}
  .vc-rhythm-tight .stripe{padding:18px 0}
  .vc-rhythm-tight .stripe-item{font-size:22px}
  .vc-rhythm-tight .hero-grid{min-height:640px}

  .vc-rhythm-bold .section{padding:160px 0}
  .vc-rhythm-bold .section-tight{padding:100px 0}
  .vc-rhythm-bold .prop,.vc-rhythm-bold .testi,.vc-rhythm-bold .job-card,.vc-rhythm-bold .form-card,.vc-rhythm-bold .visual-card,.vc-rhythm-bold .about-img,.vc-rhythm-bold .emp{border-radius:32px}
  .vc-rhythm-bold .stripe{padding:36px 0}
  .vc-rhythm-bold .stripe-item{font-size:36px}
  .vc-rhythm-bold .hero-grid{min-height:880px}
  .vc-rhythm-bold .display{font-size:clamp(64px,10.5vw,148px)}

  /* ---------- ANIMATIONS ---------- */
  /* Driving truck banner */
  .truck-band{position:relative;height:120px;background:linear-gradient(180deg,#0D1B2A 0%, #142536 100%);overflow:hidden;border-top:1px solid rgba(203,155,76,.25);border-bottom:1px solid rgba(203,155,76,.25)}
  .truck-band::before{content:"";position:absolute;left:0;right:0;bottom:30px;height:2px;background:repeating-linear-gradient(90deg, var(--gold) 0 24px, transparent 24px 48px);opacity:.5}
  .truck-band .road{position:absolute;left:0;right:0;bottom:0;height:30px;background:#0a1622}
  .driving-truck{position:absolute;bottom:24px;left:-300px;animation:truckDrive 14s linear infinite;will-change:transform}
  @keyframes truckDrive{
    0%{transform:translateX(0)}
    100%{transform:translateX(calc(100vw + 350px))}
  }
  .driving-truck svg{display:block}
  .truck-cloud{position:absolute;bottom:32px;width:12px;height:12px;border-radius:50%;background:rgba(203,155,76,.18);animation:cloud 14s linear infinite;will-change:transform,opacity}
  @keyframes cloud{0%{opacity:0;transform:translateX(0) scale(.6)}30%{opacity:.6}100%{opacity:0;transform:translateX(80px) scale(1.6)}}

  .truck-band .label{position:absolute;left:50%;top:18px;transform:translateX(-50%);font-size:11px;letter-spacing:.32em;text-transform:uppercase;color:rgba(245,242,237,.45);font-weight:600;z-index:2}
  .truck-band .label .gd{color:var(--gold)}

  /* Hero photo subtle parallax */
  .hero-photo{animation:floatY 10s ease-in-out infinite}
  @keyframes floatY{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}

  /* Hero badge tilt */
  .hero-badge{animation:badgeTilt 6s ease-in-out infinite}
  @keyframes badgeTilt{0%,100%{transform:rotate(-6deg)}50%{transform:rotate(-2deg) scale(1.02)}}

  /* Forklift in warehouse scene */
  .moving-fork{animation:forkRoll 8s ease-in-out infinite}
  @keyframes forkRoll{0%{transform:translateX(0)}50%{transform:translateX(60px)}100%{transform:translateX(0)}}

  /* Wheels spinning */
  .wheel-spin{transform-box:fill-box;transform-origin:center;animation:spin 1.6s linear infinite}
  @keyframes spin{to{transform:rotate(360deg)}}

  /* Conveyor box loop */
  .conveyor-box{animation:convey 4s linear infinite}
  @keyframes convey{0%{transform:translateX(-80px);opacity:0}10%{opacity:1}90%{opacity:1}100%{transform:translateX(280px);opacity:0}}

  /* Loading bay door opening */
  .bay-door{animation:bayDoorFill 24s ease-in-out infinite}
  .bay-door-d2{animation-delay:-6s}
  .bay-door-d3{animation-delay:-12s}
  .bay-door-d4{animation-delay:-18s}
  @keyframes bayDoorFill{0%,100%{fill:#0a1622}4%{fill:#CB9B4C}21%{fill:#CB9B4C}25%{fill:#0a1622}}
  .wh-truck{transform-box:fill-box;transform-origin:center;animation:whFloat 3.5s ease-in-out infinite}
  @keyframes whFloat{0%,100%{transform:translate(147px,100px) scale(.85)}50%{transform:translate(147px,97px) scale(.85)}}

  /* Stripe icon pulse */
  .stripe-item .dot{animation:dotPulse 1.6s ease-in-out infinite}
  @keyframes dotPulse{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(1.4);opacity:.6}}

  /* Pageload entry */
  .hero-headline .l1,.hero-headline .l2,.hero-headline .l3{display:block;animation:rise .8s cubic-bezier(.2,.8,.2,1) both}
  .hero-headline .l2{animation-delay:.1s}
  .hero-headline .l3{animation-delay:.2s}
  @keyframes rise{from{opacity:0;transform:translateY(28px)}to{opacity:1;transform:translateY(0)}}

  /* Reveal on scroll */
  .reveal{opacity:0;transform:translateY(28px);transition:opacity .8s ease, transform .8s cubic-bezier(.2,.8,.2,1)}
  .reveal.in{opacity:1;transform:translateY(0)}

  /* Hover lift on cards */
  .prop,.testi,.job-card,.emp-feature{transition:transform .25s cubic-bezier(.2,.8,.2,1), box-shadow .25s, border-color .25s}

  /* Recruitment-truck scene: truck delivers worker badges to warehouse */
  .rec-scene{position:relative;height:280px;background:linear-gradient(180deg,#0D1B2A 0%, #142536 70%, #0a1622 100%);overflow:hidden;border-top:1px solid rgba(203,155,76,.2);border-bottom:1px solid rgba(203,155,76,.2)}
  .rec-scene .stage{position:relative;width:100%;height:100%;max-width:1440px;margin:0 auto}
  .rec-scene .ground{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:0;height:50px;background:#080f17;border-top:1px solid rgba(203,155,76,.3)}
  .rec-scene .lane{position:absolute;left:calc(50% - 50vw);right:calc(50% - 50vw);bottom:22px;height:2px;background:repeating-linear-gradient(90deg,var(--gold) 0 28px,transparent 28px 56px);opacity:.45;animation:laneScroll .8s linear infinite}
  @keyframes laneScroll{to{background-position:-56px 0}}

  /* Origin = "We find people" */
  .rec-origin{position:absolute;left:32px;bottom:74px;display:flex;flex-direction:column;align-items:center;gap:6px;color:rgba(245,242,237,.85)}
  .rec-origin .lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .rec-origin .sub{font-size:11px;color:rgba(245,242,237,.55);font-weight:500}
  .pool{position:relative;width:240px;min-height:96px;display:flex;flex-wrap:wrap;gap:8px 10px;justify-content:center;align-content:center;padding:14px 12px;box-sizing:border-box}
  .pool-ring{position:absolute;inset:0;border:1px dashed rgba(203,155,76,.45);border-radius:14px}
  .pool-ring::before{content:"";position:absolute;inset:-6px;border:1px solid rgba(203,155,76,.15);border-radius:18px}
  .pool-person{position:relative;height:20px;padding:0 10px;border-radius:10px;background:var(--gold);color:#0D1B2A;display:inline-flex;align-items:center;justify-content:center;font-size:10px;font-weight:800;letter-spacing:.02em;white-space:nowrap;box-shadow:0 2px 6px rgba(203,155,76,.35);animation:poolBob 2.4s ease-in-out infinite,poolGlow 4s ease-in-out infinite}
  @keyframes poolBob{0%,100%{transform:translateY(0) scale(1)}50%{transform:translateY(-4px) scale(1.04)}}
  @keyframes poolGlow{0%,100%{box-shadow:0 2px 6px rgba(203,155,76,.35)}50%{box-shadow:0 4px 14px rgba(203,155,76,.7)}}
  @keyframes poolSwap{0%{opacity:0;transform:translateY(8px) scale(.7)}60%{opacity:1;transform:translateY(-2px) scale(1.08)}100%{opacity:1;transform:translateY(0) scale(1)}}
  .pool-person.swapping{animation:poolSwap .55s ease-out}

  /* Destination warehouse */
  .rec-warehouse{position:absolute;right:32px;bottom:50px;width:200px;height:120px}
  .wh-body{position:absolute;inset:0;background:#1a2c40;border:1px solid rgba(203,155,76,.3);border-radius:4px}
  .wh-roof{position:absolute;left:-6px;right:-6px;top:-14px;height:14px;background:#142536;clip-path:polygon(0 100%,8% 0,92% 0,100% 100%)}
  .wh-sign{position:absolute;left:50%;top:6px;transform:translateX(-50%);font-size:8px;font-weight:800;color:var(--gold);letter-spacing:.3em}
  .bay{position:absolute;bottom:0;width:46px;height:60px;background:#080f17;border-top:1px solid rgba(203,155,76,.3)}
  .bay-1{left:14px}.bay-2{left:74px}.bay-3{left:134px}
  .bay-door-flex{position:absolute;inset:4px 4px auto 4px;height:50px;background:repeating-linear-gradient(180deg,#a87f3a 0 4px,#7a5a30 4px 6px);transform-origin:top;border-radius:1px;animation:bayLift 5s ease-in-out infinite}
  .bay-2 .bay-door-flex{animation-delay:-1.6s}
  .bay-3 .bay-door-flex{animation-delay:-3.2s}
  @keyframes bayLift{0%,40%,100%{transform:scaleY(1)}55%,80%{transform:scaleY(.15)}}
  .wh-stack{position:absolute;width:8px;height:6px;background:#a87f4a;border-radius:1px}

  .rec-dest{position:absolute;right:144px;bottom:178px;color:rgba(245,242,237,.85);text-align:right;display:flex;flex-direction:column;align-items:flex-end;gap:4px}
  .rec-dest .lab{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--gold);font-weight:700}
  .rec-dest .sub{font-size:11px;color:rgba(245,242,237,.55);font-weight:500}

  /* Truck carries people across */
  .rec-truck{position:absolute;left:0;bottom:48px;animation:truckJourney 18s cubic-bezier(.5,0,.5,1) infinite;will-change:transform}
  @keyframes truckJourney{
    0%{transform:translateX(180px)}
    8%{transform:translateX(180px)}
    50%{transform:translateX(calc(100vw - 480px))}
    62%{transform:translateX(calc(100vw - 480px))}
    70%{transform:translateX(calc(100vw - 480px)) translateY(0)}
    100%{transform:translateX(calc(100vw + 100px))}
  }
  .rec-truck-bounce{animation:truckBounce .4s ease-in-out infinite}
  @keyframes truckBounce{0%,100%{transform:translateY(0)}50%{transform:translateY(-1px)}}

  /* Worker passenger icons in trailer */
  .truck-passenger{animation:passEnter 6s ease-in-out infinite}
  @keyframes passEnter{
    0%{opacity:0;transform:translateY(-6px) scale(.85)}
    12%,85%{opacity:1;transform:translateY(0) scale(1)}
    100%{opacity:0;transform:translateY(4px) scale(.85)}
  }

  /* Status caption above truck */
  .truck-caption{position:absolute;left:50%;top:24px;transform:translateX(-50%);display:flex;align-items:center;gap:10px;font-size:11px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,237,.85);font-weight:700}
  .truck-caption .pin{width:6px;height:6px;border-radius:50%;background:var(--gold);animation:dotPulse 1.4s ease-in-out infinite}
  .truck-caption .gd{color:var(--gold)}

  .arrow-link{position:absolute;top:50%;left:200px;right:280px;height:1px;border-top:1px dashed rgba(203,155,76,.3);transform:translateY(-30px);pointer-events:none}

  /* Mile counter ticker */
  .mile-ticker{position:absolute;top:14px;right:24px;display:flex;align-items:center;gap:8px;font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:rgba(245,242,237,.6);font-weight:600}
  .mile-ticker .num{color:var(--gold);font-size:14px;font-weight:800;letter-spacing:0;font-variant-numeric:tabular-nums}

  /* responsive small fixes */
  @media (max-width:1100px){
    .hero-grid{grid-template-columns:1fr}
    .hero-right{min-height:420px}
    .twoup,.apply-grid,.emp,.emp-hero{grid-template-columns:1fr}
    .props,.testi-grid,.process,.values{grid-template-columns:1fr 1fr}
    .jobs-grid{grid-template-columns:1fr}
    .jobs-layout{grid-template-columns:1fr}
    .nav-links{display:none}
    .foot-grid{grid-template-columns:1fr 1fr}
  }

/* ================================================================
   WordPress Theme Additions
================================================================ */

/* Admin bar fix */
.admin-bar .nav { top: 32px; }
@media screen and (max-width:782px) { .admin-bar .nav { top: 46px; } }

/* Mobile nav (not in original) */
.nav-mobile-toggle { display:none; flex-direction:column; gap:5px; padding:8px; background:none; border:none; cursor:pointer; }
.nav-mobile-toggle span { width:22px; height:2px; background:var(--navy); border-radius:2px; transition:all .3s; }
.nav-links.open { display:flex; flex-direction:column; position:absolute; top:100%; left:0; right:0; background:rgba(245,242,237,.97); backdrop-filter:blur(14px); border-bottom:1px solid var(--line); padding:16px 20px 20px; gap:4px; z-index:100; }

/* Buttons as <a> tags */
a.btn, a.btn-primary, a.btn-dark, a.btn-ghost { text-decoration:none; }

/* Logo image in nav */
.brand-logo { height:60px; width:auto; max-width:220px; }

/* Sector cards */
.sector-card { padding:32px; background:#fff; border:1px solid var(--line); border-radius:18px; display:flex; flex-direction:column; gap:16px; min-height:280px; transition:transform .2s, border-color .2s; }
.sector-card:hover { transform:translateY(-4px); border-color:var(--gold); }
.sector-icon { width:52px; height:52px; border-radius:14px; background:var(--cream); display:flex; align-items:center; justify-content:center; color:var(--gold); }
.sector-desc { font-size:13px; color:var(--muted); }
.sector-roles { list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:8px; }
.sector-roles li { font-size:14px; color:var(--muted); display:flex; align-items:center; gap:10px; }
.role-dot { width:5px; height:5px; border-radius:50%; background:var(--gold); flex-shrink:0; }

/* Form error state */
.vc-form-error { background:#fff0f0; border:1px solid #e88; color:#c00; padding:12px 16px; border-radius:8px; font-size:13px; margin-bottom:16px; }
.form-success { text-align:center; padding:40px 20px; }
.sok { width:64px; height:64px; border-radius:50%; background:rgba(203,155,76,.12); color:var(--gold); display:flex; align-items:center; justify-content:center; margin:0 auto 20px; }
.form-success h3 { font-size:28px; margin-bottom:12px; }
.form-success p { font-size:15px; color:var(--muted); max-width:42ch; margin:0 auto; }
.ref { display:inline-block; margin-top:20px; padding:8px 20px; background:var(--navy); color:var(--gold); font-size:12px; font-weight:700; letter-spacing:.14em; border-radius:999px; }

/* Page generic content */
.vc-page-content h1 { font-size:clamp(32px,4vw,56px); margin-bottom:24px; }
.vc-page-content p { font-size:16px; line-height:1.7; color:var(--muted); margin-bottom:16px; }

/* Mobile responsive extras */
@media (max-width:900px) {
  .nav-links { display:none; }
  .nav-mobile-toggle { display:flex; margin-left:auto; }
  .values { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px) {
  .values { grid-template-columns:1fr; }
  .about-hero { padding:40px 0 30px; }
}

/* ================================================================
   Comprehensive Responsive — Header, Homepage, Footer
================================================================ */

/* Tablet landscape (1024px) */
@media (max-width: 1024px) {
  .nav-inner { padding: 16px 24px; gap: 20px; }
  .wrap { padding: 0 24px; }
  .nav-phone { display: none; }
  .props { grid-template-columns: 1fr 1fr; }
  .testi-grid { grid-template-columns: 1fr 1fr; }
  .process { grid-template-columns: 1fr 1fr; }
  .foot-grid { grid-template-columns: 1.4fr 1fr 1fr; gap: 32px; }
  .foot-brand { grid-column: 1 / -1; max-width: 100%; }
  .rec-scene { height: 220px; }
}

/* Tablet portrait / large phone (768px) */
@media (max-width: 768px) {
  .nav-inner { padding: 12px 16px; gap: 12px; }
  .wrap { padding: 0 18px; }
  .brand-logo { height: 44px; max-width: 160px; }
  .brand-text .vc { font-size: 15px; }
  .brand-text .gp { font-size: 8px; letter-spacing: .35em; }
  .nav-cta { padding: 9px 14px; font-size: 12px; }
  .nav-cta .arr { display: none; }
  .nav-mobile-toggle { display: flex; margin-left: auto; }
  .nav-links { display: none; }
  .nav-links.open { display: flex; }

  .hero-grid { gap: 40px; padding: 40px 0 60px; }
  .hero-right { min-height: 320px; }
  .rec-scene { height: 180px; }
  .truck-caption { font-size: 9px; top: 14px; }
  .mile-ticker { font-size: 9px; }
  .rec-warehouse { width: 130px; height: 80px; right: 16px; bottom: 30px; }
  .pool { transform: scale(.78); transform-origin: top left; }

  .foot-grid { grid-template-columns: 1fr 1fr; gap: 28px; padding-bottom: 32px; }
  .foot-brand { grid-column: 1 / -1; max-width: 100%; }
  .foot-bot { flex-direction: column; align-items: flex-start; text-align: left; gap: 18px; padding-top: 24px; }
  .foot-bot p { font-size: 12px; line-height: 1.6; }

  .split-cta { grid-template-columns: 1fr !important; }
  .split-cta > div { padding: 32px !important; }
  .split-cta h2 { font-size: 28px !important; }
}

/* Phone (600px) */
@media (max-width: 600px) {
  .nav-inner { padding: 10px 14px; }
  .wrap { padding: 0 16px; }
  .brand-logo { height: 38px; max-width: 140px; }
  .brand-text .vc { font-size: 13px; letter-spacing: .14em; }
  .brand-text .gp { font-size: 7px; letter-spacing: .28em; }
  .nav-cta { padding: 8px 12px; font-size: 11px; letter-spacing: 0; }

  .hero-grid h1, .hero h1 { font-size: clamp(36px, 9vw, 52px) !important; }
  .hero-grid { padding: 24px 0 40px; gap: 28px; }
  .hero-right { min-height: 260px; aspect-ratio: 4/5; }

  .section, section.section { padding: 60px 0; }
  .section-tight { padding: 48px 0; }

  .props { grid-template-columns: 1fr; gap: 18px; }
  .testi-grid { grid-template-columns: 1fr; gap: 18px; }
  .process { grid-template-columns: 1fr; }
  .twoup { gap: 32px; }
  .about-img { aspect-ratio: 1/1; }
  .about-stats { left: 14px; right: 14px; bottom: 14px; }
  .about-stat { padding: 14px; }
  .about-stat .v { font-size: 22px; }
  .about-stat .l { font-size: 10px; }

  .rec-scene { height: 160px; border-radius: 0; }
  .rec-origin, .rec-dest { display: none; }
  .truck-caption .gd { display: none; }

  .foot-grid { grid-template-columns: 1fr; gap: 32px; padding-bottom: 24px; }
  .foot-col h4 { margin-bottom: 12px; }
  .foot-newsletter input, .foot-newsletter button { font-size: 14px; }

  .split-cta > div { padding: 28px !important; }
  .split-cta h2 { font-size: 24px !important; }
  .split-cta .btn { width: 100%; justify-content: center; }
}

/* Small phone (420px) */
@media (max-width: 420px) {
  .nav-cta { padding: 7px 10px; font-size: 10px; }
  .brand-logo { height: 34px; }
  .brand-text { display: none; }
  .hero-grid h1 { font-size: 34px !important; line-height: 1.05; }
  .lead, .hero p.lead { font-size: 14px; }
  .rec-scene { height: 140px; }
  .mile-ticker { display: none; }
}

/* ================================================================
   Responsive Patch — v1.1
   Nav: sticky desktop only | Hero, Forms, Steps, Emp, Sectors
================================================================ */

/* ---- Nav: sticky only on desktop ---- */
.nav { position: sticky; }
@media (max-width: 1024px) {
  .nav { position: relative; }
}

/* ---- Utility classes for inline-styled grids ---- */
.vc-sectors-grid { grid-template-columns: repeat(4, 1fr); }
.vc-check-grid   { grid-template-columns: 1fr 1fr; }

/* ---- Searchbar ---- */
@media (max-width: 768px) {
  .searchbar { grid-template-columns: 1fr; margin-top: 16px; }
  .sb-field + .sb-field { border-left: none; border-top: 1px solid var(--line); }
  .sb-go { padding: 14px; justify-content: center; }
}

/* ---- Hero left padding when stacked ---- */
@media (max-width: 1100px) {
  .hero-left { padding: 48px 40px 40px; }
}
@media (max-width: 768px) {
  .hero-left { padding: 32px 24px 28px; }
  .hero-bottom { grid-template-columns: 1fr 1fr; gap: 20px; }
  .hero-stat { padding: 0; }
  .hero-stat:not(:last-child) { border-right: none; }
  .hero-stat:not(:first-child) { padding-left: 0; }
  .hero-stat .num { font-size: 26px; }
}

/* ---- Employer CTA card ---- */
@media (max-width: 768px) { .emp { padding: 40px 32px; } }
@media (max-width: 600px) { .emp { padding: 28px 20px; } }

/* ---- Form grid: single col on mobile ---- */
@media (max-width: 600px) {
  .form-grid { grid-template-columns: 1fr; }
  .role-grid  { grid-template-columns: 1fr; }
  .form-card  { padding: 28px 20px; }
  .form-foot  { flex-direction: column; align-items: stretch; }
  .terms      { max-width: 100%; }
  .submit-btn { justify-content: center; }
}

/* ---- Process steps: fix borders when stacked to 1-col ---- */
@media (max-width: 600px) {
  .step {
    padding: 32px 20px;
    border-right: none;
    border-bottom: 1px solid var(--line);
  }
  .step:last-child { border-bottom: none; }
  .step h3 { font-size: 26px; }
}

/* ---- Page header ---- */
@media (max-width: 768px) {
  .pageheader-grid   { grid-template-columns: 1fr; }
  .pageheader-stats  { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 600px) {
  .pageheader-stats  { grid-template-columns: 1fr 1fr; gap: 16px; }
}

/* ---- Emp-hero features ---- */
@media (max-width: 600px) {
  .emp-features { grid-template-columns: 1fr; }
  .visual-card  { aspect-ratio: 3/2; }
}

/* ---- Sectors / check grids ---- */
@media (max-width: 1024px) { .vc-sectors-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px)  { .vc-sectors-grid { grid-template-columns: 1fr; } }
@media (max-width: 600px)  { .vc-check-grid   { grid-template-columns: 1fr; } }

/* ================================================================
   Truck Animation — Responsive Keyframe Fix
   Bug: calc(100vw-480px) goes negative on phones → truck reverses
================================================================ */

/* Tablet 601-768px: fix dock position for smaller warehouse */
@media (max-width: 768px) {
  .rec-truck { bottom: 40px; }

  @keyframes truckJourney {
    0%  { transform: translateX(40px); }
    8%  { transform: translateX(40px); }
    50% { transform: translateX(calc(100vw - 386px)); }
    62% { transform: translateX(calc(100vw - 386px)); }
    70% { transform: translateX(calc(100vw - 386px)); }
    100%{ transform: translateX(calc(100vw + 100px)); }
  }
}

/* Phone ≤600px: simple drive-through, no dock (pool/dest hidden anyway) */
@media (max-width: 600px) {
  .rec-truck { bottom: 36px; }

  @keyframes truckJourney {
    0%   { transform: translateX(-250px); }
    5%   { transform: translateX(-250px); }
    100% { transform: translateX(calc(100vw + 260px)); }
  }
}

/* Scale down truck SVG on small screens */
@media (max-width: 480px) {
  .rec-truck svg { width: 180px; height: auto; }
}
@media (max-width: 360px) {
  .rec-truck svg { width: 150px; height: auto; }
}

/* ================================================================
   Sectors Page — Responsive
================================================================ */

/* Main sectors grid: 3 → 2 → 1 */
@media (max-width: 1024px) { .vc-sectors-main-grid { grid-template-columns: 1fr 1fr !important; } }
@media (max-width: 600px)  { .vc-sectors-main-grid { grid-template-columns: 1fr !important; } }

/* Sectors page wrap: reduce padding on mobile */
@media (max-width: 768px)  { .vc-sectors-wrap { padding-top: 48px !important; padding-bottom: 48px !important; } }
@media (max-width: 600px)  { .vc-sectors-wrap { padding-top: 32px !important; padding-bottom: 32px !important; } }

/* CTA banner: stack on tablet */
@media (max-width: 768px) {
  .vc-cta-banner { grid-template-columns: 1fr !important; }
  .vc-cta-banner > div:last-child { display: flex; flex-wrap: wrap; gap: 10px; }
  .vc-cta-banner .btn { flex: 1 1 auto; justify-content: center; }
}
@media (max-width: 600px) {
  .vc-cta-banner { padding: 28px 20px !important; border-radius: 16px !important; }
  .vc-cta-banner .btn { width: 100%; }
}

/* Sector card: ensure it doesn't overflow on small screens */
@media (max-width: 600px) {
  .sector-card { min-height: auto; padding: 24px 20px; }
}


/* ================================================================
   Mobile Side Drawer — Slide from right
================================================================ */

.nav-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(13,27,42,.55);
  z-index: 998;
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.nav-overlay.active { display: block; }

body.drawer-open { overflow: hidden; }

/* Drawer header: hidden on desktop, shown inside drawer on mobile */
.drawer-header { display: none; }

@media (max-width: 1024px) {
  /* Hide brand + CTA + phone from main nav bar */
  .nav-inner > .brand  { display: none; }
  .nav-inner > .nav-cta { display: none; }
  .nav-inner > .nav-phone { display: none; }
  .nav-mobile-toggle { display: flex; margin-left: auto; }

  /* Side drawer panel */
  .nav-links {
    position: fixed !important;
    top: 0;
    right: 0;
    bottom: 0;
    width: 300px;
    max-width: 88vw;
    background: var(--navy);
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    z-index: 1000;
    transform: translateX(105%);
    transition: transform .32s cubic-bezier(.4,0,.2,1);
    display: flex !important;
    overflow-y: auto;
    border-left: 1px solid rgba(203,155,76,.2);
    box-shadow: -12px 0 48px rgba(0,0,0,.4);
  }
  .nav-links.open { transform: translateX(0) !important; }

  /* Nav links styled for dark drawer */
  .nav-links .nav-link {
    color: rgba(245,242,237,.85) !important;
    border-radius: 0 !important;
    padding: 18px 24px !important;
    font-size: 15px !important;
    font-weight: 500;
    border-bottom: 1px solid rgba(245,242,237,.07);
    letter-spacing: .02em;
    display: block;
    background: none !important;
  }
  .nav-links .nav-link:hover,
  .nav-links .nav-link.active {
    background: rgba(203,155,76,.12) !important;
    color: var(--gold) !important;
  }

  /* Drawer header section */
  .drawer-header {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 20px 20px 16px;
    border-bottom: 1px solid rgba(245,242,237,.1);
    background: rgba(0,0,0,.18);
    flex-shrink: 0;
  }
  .drawer-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
  }
  .drawer-brand .brand-logo { height: 56px !important; max-width: 210px; }
  .drawer-brand .vc { font-size: 22px !important; color: var(--cream); }
  .drawer-brand .gp { color: var(--gold); font-size: 10px !important; }
  .drawer-brand .brand-mark { width: 40px; height: 40px; }

  .drawer-close {
    width: 38px;
    height: 38px;
    border-radius: 50%;
    border: 1px solid rgba(245,242,237,.22) !important;
    background: none !important;
    color: rgba(245,242,237,.7) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: all .2s;
    padding: 0;
  }
  .drawer-close:hover {
    background: rgba(245,242,237,.1) !important;
    color: var(--cream) !important;
  }

  .drawer-cta {
    display: flex !important;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 13px 20px !important;
    background: var(--gold) !important;
    color: var(--navy) !important;
    border-radius: 999px;
    font-weight: 600;
    font-size: 14px !important;
    letter-spacing: .02em;
    width: 100%;
    box-sizing: border-box;
    text-align: center;
  }
  .drawer-cta:hover { background: var(--cream) !important; }
  .drawer-cta .arr { width: 14px; height: 14px; }
}

/* ================================================================
   Truck Scene — Mobile Visual Improvements
================================================================ */

/* Tablet: smoother timing */
@media (max-width: 768px) {
  .rec-truck { animation-duration: 14s; }
  .truck-caption { font-size: 10px; letter-spacing: .14em; }
}

/* Phone: linear drive, shorter scene, hide warehouse (bays overflow) */
@media (max-width: 600px) {
  .rec-scene { height: 120px; }
  .rec-warehouse { display: none; }
  .rec-truck {
    bottom: 28px;
    animation-duration: 8s;
    animation-timing-function: linear;
  }
  .rec-scene .ground { height: 28px; }
  .rec-scene .lane { bottom: 18px; }
  .truck-caption {
    font-size: 10px;
    top: 10px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 70vw;
    left: 50%;
    transform: translateX(-50%);
  }
}

/* Small phone */
@media (max-width: 420px) {
  .rec-scene { height: 100px; }
  .rec-truck { bottom: 22px; animation-duration: 7s; }
  .truck-caption { display: none; }
}


/* ================================================================
   Drawer Fix — Override legacy .nav-links.open conflicts
================================================================ */

@media (max-width: 1024px) {
  /* Restore logo in nav bar — small, visible */
  .nav-inner > .brand { display: flex !important; }
  .nav-inner > .brand .brand-logo { height: 38px !important; max-width: 160px; }
  .nav-inner > .brand .brand-text .vc { font-size: 15px !important; }

  /* Override old global .nav-links.open which sets top:100%, absolute, cream bg */
  .nav-links.open {
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 88vw !important;
    background: var(--navy) !important;
    padding: 0 !important;
    gap: 0 !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
    border-left: 1px solid rgba(203,155,76,.2) !important;
    z-index: 1000 !important;
    transform: translateX(0) !important;
    flex-direction: column !important;
    overflow-y: auto !important;
  }
}


/* ================================================================
   Drawer Fix v2 — Portal-safe, visibility-based, no backdrop-filter
================================================================ */

/* Remove backdrop-filter from nav on mobile (causes fixed containing block bug) */
@media (max-width: 1024px) {
  .nav {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: var(--cream) !important;
  }
}

/* Complete drawer reset — visibility-based show/hide for smooth transition */
@media (max-width: 1024px) {
  .nav-links {
    /* Layout */
    position: fixed !important;
    top: 0 !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    width: 300px !important;
    max-width: 88vw !important;
    height: 100vh !important;

    /* Visual */
    background: var(--navy) !important;
    border-left: 1px solid rgba(203,155,76,.22) !important;
    box-shadow: -12px 0 48px rgba(0,0,0,.45) !important;

    /* Animation */
    transform: translateX(105%) !important;
    transition: transform .32s cubic-bezier(.4,0,.2,1),
                visibility .32s !important;
    visibility: hidden !important;

    /* Layout overrides */
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    z-index: 1001 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;

    /* Reset old .open bg/position overrides */
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border-bottom: none !important;
  }

  .nav-links.open {
    transform: translateX(0) !important;
    visibility: visible !important;
  }

  /* Nav link styles inside dark drawer */
  .nav-links .nav-link {
    display: block !important;
    color: rgba(245,242,237,.85) !important;
    padding: 17px 24px !important;
    font-size: 15px !important;
    font-weight: 500 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid rgba(245,242,237,.07) !important;
    background: none !important;
    letter-spacing: .02em !important;
  }
  .nav-links .nav-link:hover,
  .nav-links .nav-link.active {
    background: rgba(203,155,76,.13) !important;
    color: var(--gold) !important;
  }

  /* Overlay z-index below drawer */
  .nav-overlay { z-index: 1000; }
}