/* =========================
     GLOBAL + LIGHT, STICKY HEADER
  ========================== */
  :root{
    --header-h:88px;            /* taller header */
    --head-bg:#ffffff;
    --head-bg2:#f7f9fc;
    --head-text:#111827;
    --head-border:#e5e7eb;
    --head-shadow:0 8px 20px rgba(0,0,0,.05);

    --text:#0e1a16; --muted:#6b7280; --link:#0f5d3c;
    --surface:#ffffff; --bg:#f6f8f7; --row-border:#e6ece8;

    --table-head:#0f5d3c; --head-text-contrast:#ffffff;

    --radius:14px; --shadow:0 12px 30px #0b2a2014;
  }
  *{box-sizing:border-box}
  html,body{height:100%}
  body{
    margin:0;
    font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial;
    color:var(--text); background:var(--bg); line-height:1.5;
    padding-top:var(--header-h);
  }
  a{color:darkblue; text-decoration:none}
  a:hover{text-decoration:underline}

  /* Mobile overlay (for menu) */
  #menu-toggle{position:absolute;left:-9999px;top:-9999px}
  .overlay{
    position:fixed; inset:0; z-index:1000; display:grid; grid-template-rows:auto 1fr auto;
    background:rgba(17,24,39,.86); backdrop-filter:blur(2px) saturate(115%);
    opacity:0; pointer-events:none; transition:opacity .18s ease;
  }
  .overlay-inner{max-width:1140px;margin:0 auto;padding:10px 16px;width:100%}
  .overlay-head{display:flex;align-items:center;gap:10px;color:#fff;border-bottom:1px solid #ffffff2b;padding-bottom:10px}
  .overlay-head .brand-logo-img{height:48px;width:auto}
  .links{display:grid;gap:8px;padding:16px 0}
  .links a{color:#fff;padding:14px 12px;border-radius:12px;font-weight:700;font-size:16px}
  .links a:hover{background:#ffffff14}
  .overlay-foot{border-top:1px solid #ffffff2b;padding:14px 0 18px}
  .cta{
    background:linear-gradient(180deg,#facc15,#eab308); color:#111827; font-weight:800;
    padding:9px 14px;border-radius:10px; box-shadow:0 6px 14px #0002; text-decoration:none
  }
  .close{
    position:fixed; top:12px; right:12px; z-index:1001; width:44px; height:44px;
    border-radius:12px; border:1px solid #ffffff55; background:#ffffff22; display:none;
    align-items:center; justify-content:center; color:#fff; font-size:24px; line-height:0; cursor:pointer
  }
  #menu-toggle:checked ~ .overlay{opacity:1;pointer-events:auto}
  #menu-toggle:checked ~ .close{display:flex}
  #menu-toggle:checked ~ header .burger::before{transform:translateY(7px) rotate(45deg)}
  #menu-toggle:checked ~ header .burger span{opacity:0}
  #menu-toggle:checked ~ header .burger::after{transform:translateY(-7px) rotate(-45deg)}

  .topbar{
    position:fixed; top:0; left:0; right:0; z-index:200;
    background:linear-gradient(180deg,var(--head-bg),var(--head-bg2));
    border-bottom:1px solid var(--head-border);
    box-shadow:var(--head-shadow); color:var(--head-text);
  }
  .bar{max-width:1300px;margin:0 auto;padding:16px 16px;min-height:var(--header-h);
       display:flex;align-items:center;gap:16px}
  .brand{display:flex;align-items:center;gap:12px;color:var(--head-text)}
  .brand-logo-img{height:56px;width:auto;display:block}
  .brand-title{font-weight:800;letter-spacing:.2px}
  .nav{margin-left:auto;display:flex;align-items:center;gap:16px}
  .nav a{color:var(--head-text);font-weight:600;font-size:14px;padding:8px 10px;border-radius:8px}
  .nav a:hover{background:#f1f5f9;text-decoration:none}
  .burger{
    display:none;margin-left:auto;width:44px;height:44px;border-radius:10px;border:1px solid #d1d5db;background:#ffffff;
    align-items:center;justify-content:center;cursor:pointer
  }
  .burger span,.burger::before,.burger::after{
    content:"";display:block;width:22px;height:2px;background:#111827;border-radius:2px;transition:transform .2s,opacity .2s
  }
  .burger::before{margin-bottom:5px}
  .burger::after{margin-top:5px}

  /* Hero */
  .hero{
    position:relative;height:320px;background:
      linear-gradient(0deg, rgba(0,0,0,.45), rgba(0,0,0,.45)),
      url('../../static/img/Job.png') center/cover no-repeat;
    border-bottom:1px solid #e5e7eb; display:flex;align-items:center;justify-content:center
  }
  .hero h1{color:#fff;font-weight:800;letter-spacing:1px;font-size:clamp(28px,6.5vw,64px);margin:0;text-transform:uppercase;text-shadow:0 10px 30px #0006}

  /* Jobs card/table */
  .wrap{max-width:1140px;margin:0 auto;padding:0 16px 60px}
  .content{background:var(--surface);margin-top:22px;border-radius:var(--radius);box-shadow:var(--shadow);padding:24px;border:1px solid #e8efe9}
  .table{width:100%;border-collapse:separate;border-spacing:0 10px}
  .table thead th{background:darkblue;color:var(--head-text-contrast);text-align:left;padding:14px 16px;font-weight:700;letter-spacing:.3px;font-size:14px}
  .table thead tr th:first-child{border-top-left-radius:10px;border-bottom-left-radius:10px}
  .table thead tr th:last-child{border-top-right-radius:10px;border-bottom-right-radius:10px}
  .table tbody tr{background:#fff;border:1px solid var(--row-border)}
  .table tbody tr td{padding:14px 16px;border-top:1px solid var(--row-border);border-bottom:1px solid var(--row-border);vertical-align:middle}
  .table tbody tr td:first-child{border-left:1px solid var(--row-border);border-top-left-radius:10px;border-bottom-left-radius:10px}
  .table tbody tr td:last-child{border-right:1px solid var(--row-border);border-top-right-radius:10px;border-bottom-right-radius:10px}
  .job-title{font-weight:700}
  .sub{color:var(--muted);font-size:12px;margin-top:4px}
  .apply{display:inline-flex;align-items:center;gap:10px;background:darkblue;color:#fff;font-weight:700;
         padding:10px 14px;border-radius:10px;box-shadow:0 6px 16px #0f5d3c2a;transition:transform .15s,background .15s;white-space:nowrap;text-decoration:none}
  .apply:hover{background:red;transform:translateY(-1px)}
  .empty{padding:24px;text-align:center;color:var(--muted);border:2px dashed #dfe7e2;border-radius:12px;background:#fafdfb;margin-top:8px}

  /* =========================
     FOOTER — like your reference (green band + dark strip)
  ========================== */
  :root{
    --ft-green:#285a3b;          /* main green */
    --ft-green-dark:#214a31;     /* darker shade */
    --ft-rule:#3a6a4c;           /* line color in green area */
    --ft-text:#eaf4ec;           /* text on green area */
    --ft-link:#ffffff;
    --ft-btn:#e08b2c;            /* brochure button */
    --ft-black:#161616;          /* bottom strip */
  }

  .ref-footer{margin-top:0}
  .ref-top{
    background:linear-gradient(180deg, #000000, #0c1430ee);
    color:var(--ft-text);
  }
  .ref-wrap{max-width:1200px;margin:0 auto;padding:42px 18px}
  .ref-grid{display:grid;gap:28px;grid-template-columns:1.4fr 1.1fr 1.2fr 1.6fr}
  @media (max-width:1024px){.ref-grid{grid-template-columns:1fr 1fr}}
  @media (max-width:640px){.ref-grid{grid-template-columns:1fr}}

  .ref-col h4{margin:0 0 14px;font-weight:800;letter-spacing:.2px}
  .ref-logo{max-width:220px}

  .ref-brochure{
    display:inline-block;margin-top:18px;background:#ffffff;color:#2b1905;font-weight:800;
    padding:12px 18px;border-radius:10px;text-decoration:none;border:2px solid #ff0000;
  }
  .ref-brochure:hover{filter:brightness(.95);text-decoration:none}

  /* Site map with rules */
  .site-links{list-style:none;margin:0;padding:0}
  .site-links li{font-size: 14px;border-bottom:1px solid #ffffff;padding:10px 0}
  .site-links a{color:var(--ft-link);text-decoration:none;font-weight:600}
  .site-links a::before{content:"› ";font-weight:800;margin-right: 10px;}
  .site-links a:hover{text-decoration:underline}

  /* Recent works thumbnails */
  .thumbs{display:grid;grid-template-columns:repeat(2,88px);gap:10px}
  .thumbs img{width:88px;height:60px;object-fit:cover;border-radius:6px;border:2px solid #ffffff22}

  /* Contact block */
  .contact p{margin:0 0 8px;font-size: 14px;}
  .contact a{color:#fff;text-decoration:none}
  .contact a:hover{text-decoration:underline}

  /* Bottom strip */
  .ref-bottom{background:var(--ft-black);color:#e7e7e7;border-top:1px solid #000}
  .ref-bottom-wrap{max-width:1200px;margin:0 auto;padding:12px 18px;display:flex;align-items:center;gap:12px}
  .socials{display:flex;gap:12px;margin-left:0}
  .socials a{display:inline-flex;align-items:center;justify-content:center;width:28px;height:28px;border-radius:999px;background:#ffffff12;border:1px solid #000;color:#fff}
  .copy{margin-left:auto;font-size:13px;opacity:.9;text-align:right}
  @media (max-width:700px){
    .ref-bottom-wrap{flex-direction:column;gap:10px}
    .copy{margin-left:0;text-align:center}
  }

  /* Responsive switches for header */
  @media (max-width:1024px){
    .nav{display:none}
    .burger{display:flex}
  }
  @media (max-width:800px){
    .content{padding:14px}
    .table thead{display:none}
    .table,.table tbody,.table tr,.table td{display:block;width:100%}
    .table tbody tr{border-radius:12px;overflow:hidden;margin:12px 0;border:1px solid var(--row-border);box-shadow:var(--shadow)}
    .table tbody tr td{border:0;padding:10px 12px;border-bottom:1px solid var(--row-border)}
    .table tbody tr td:last-child{border-bottom:0}
    .apply{width:100%;justify-content:center}
  }

  @media (max-width:1024px){
  .nav{display:none}
  .burger{display:flex}
}