/* ===== CHEEX Design System tokens (from Claude Design export) ===== */
  :root {
    --cheex-orange: #FF3D1D;
    --cheex-black: #000000;
    --cheex-white: #FFFFFF;
    --cheex-sand: #F4EDEB;
    --cheex-orange-20: rgba(255, 61, 29, 0.2);
    --cheex-orange-10: rgba(255, 61, 29, 0.1);
    --cheex-grey-100: #D9D9D9;
    --cheex-grey-200: #D0D0D0;
    --cheex-grey-300: #A1A1A1;
    --cheex-grey-500: #7D7D7D;
    --cheex-grey-700: #707070;
    --cheex-grey-900: #252525;
    --cheex-success: #228C22;

    --color-primary: var(--cheex-orange);
    --color-on-primary: var(--cheex-black);
    --text-body: var(--cheex-black);
    --text-muted: var(--cheex-grey-500);
    --text-inverse: var(--cheex-white);
    --surface-page: var(--cheex-white);
    --surface-warm: var(--cheex-sand);
    --surface-card: var(--cheex-white);
    --border-hairline: var(--cheex-grey-700);
    --focus-ring: var(--cheex-orange);
    --gradient-brand: linear-gradient(146.17deg, #FF3D1D 16.95%, #000000 99.82%);

    /* Fonts — real font files are licensed assets hosted by CHEEX; fallbacks shown here */
    --font-body: 'Degular', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display-serif: 'IvyPresto Display', Georgia, 'Times New Roman', serif;
    --font-display-sans: 'Obviously', 'Arial Narrow', Impact, sans-serif;
    --font-editorial-serif: 'Meno Banner', 'IvyPresto Display', Georgia, serif;
    --font-mono-label: 'Inter', -apple-system, 'Segoe UI', sans-serif;
    --font-heading: var(--font-display-serif);
    --font-heading-alt: var(--font-display-sans);
    --font-text: var(--font-body);

    --type-h1: 72px;
    --type-h2: 51px;
    --type-h4: 34px;
    --type-h5: 26px;
    --type-headline-alt-ratio: 0.85;
    --type-body-lg: 24px;
    --type-body: 16px;
    --type-body-sm: 14px;
    --type-caption: 12px;
    --type-micro: 10px;

    --lh-display: 1;
    --lh-body: 1.3;
    --lh-tight: 1.1;
    --tracking-body: -0.1px;
    --tracking-button: 0.014em;
    --tracking-tight: -0.003em;
    --weight-regular: 400;
    --weight-medium: 500;
    --weight-semibold: 600;
    --weight-bold: 700;
    --weight-black: 900;

    --space-1: 6px; --space-2: 8px; --space-3: 10px; --space-4: 12px;
    --space-5: 16px; --space-6: 20px; --space-7: 28px; --space-8: 32px;
    --space-9: 40px; --space-10: 70px;

    --radius-xs: 4px;
    --radius-sm: 8px;
    --radius-card: 12px;
    --radius-pill: 30px;
    --radius-field: 50px;
    --radius-round: 999px;

    --shadow-card: 0 8px 24px rgba(0, 0, 0, 0.12);
    --shadow-pop: 0 12px 40px rgba(0, 0, 0, 0.451);
    --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
    --duration-fast: 120ms;
    --duration-base: 200ms;
  }
  *{box-sizing:border-box;}
  html,body{margin:0;padding:0;}
  body{
    background:var(--surface-warm);
    color:var(--text-body);
    font-family:var(--font-text);
    font-size:var(--type-body);
    letter-spacing:var(--tracking-body);
    line-height:var(--lh-body);
    min-height:100vh;
    -webkit-font-smoothing:antialiased;
  }
  a{color:var(--cheex-orange); text-decoration:none;}
  a:hover{color:var(--cheex-black); text-decoration:underline;}
  button{font-family:inherit;}
  :focus-visible{outline:2px solid var(--focus-ring); outline-offset:3px; border-radius:4px;}

  .wrap{max-width:760px;margin:0 auto;padding:0 24px 90px;}

  /* ---------- TOP BAR ---------- */
  .topbar{
    max-width:760px; margin:0 auto; padding:26px 24px 0;
    display:flex; align-items:center; justify-content:space-between;
  }
  .wordmark-logo{height:20px; width:auto; display:block;}
  .breadcrumb{font-family:var(--font-mono-label); font-size:12.5px; color:var(--text-muted); font-weight:var(--weight-medium);}

  /* ---------- HERO ---------- */
  .hero{position:relative;padding:40px 0 40px;}
  .eyebrow{
    display:flex; align-items:center; gap:10px;
    font-family:var(--font-mono-label); font-weight:var(--weight-semibold); font-size:13px;
    letter-spacing:0.14em; text-transform:uppercase; color:var(--cheex-orange); margin:0 0 22px;
  }
  .brand-bar{width:26px; height:4px; border-radius:var(--radius-round); background:var(--gradient-brand); flex-shrink:0;}
  h1.title{
    font-family:var(--font-heading); font-style:italic; font-weight:var(--weight-regular);
    font-size:clamp(38px, 7.2vw, var(--type-h1)); line-height:var(--lh-display);
    letter-spacing:-0.01em; margin:0 0 6px; color:var(--cheex-black);
  }
  .title-alt{
    font-family:var(--font-heading-alt); font-weight:var(--weight-black);
    font-size:clamp(20px, 3.8vw, 44px); line-height:var(--lh-display);
    letter-spacing:-0.01em; text-transform:uppercase; color:var(--cheex-orange);
    margin:0 0 26px;
  }
  .lede{font-size:18px; line-height:1.5; color:var(--cheex-black); margin:0 0 16px;}

  /* ---------- SECTION LABELS ---------- */
  .section-label{
    display:flex; align-items:center; justify-content:space-between; gap:14px; margin:56px 0 22px;
  }
  .section-label h2{
    font-family:var(--font-heading-alt); font-weight:var(--weight-black);
    font-size:22px; letter-spacing:-0.003em; text-transform:uppercase;
    margin:0; color:var(--cheex-black); white-space:nowrap;
  }
  .count-tag{
    font-family:var(--font-mono-label); font-size:12px; font-weight:var(--weight-medium);
    color:var(--cheex-orange); background:var(--cheex-orange-10);
    padding:4px 12px; border-radius:var(--radius-round); white-space:nowrap;
  }

  /* ---------- JOB LIST ---------- */
  .job{
    border-radius:var(--radius-card);
    background:var(--surface-card); margin-bottom:var(--space-4); overflow:hidden;
    box-shadow:var(--shadow-card);
    transition:transform var(--duration-base) var(--ease-standard);
  }
  .job:hover{transform:translateY(-1px);}
  .job-head{
    width:100%; display:flex; align-items:center; justify-content:space-between; gap:16px;
    background:none; border:none; color:var(--cheex-black); text-align:left;
    padding:var(--space-6) var(--space-7); cursor:pointer;
  }
  .job-head-left{display:flex; flex-direction:column; gap:10px; min-width:0;}
  .job-title{font-family:var(--font-text); font-size:18px; font-weight:var(--weight-semibold);}
  .job-meta{display:flex; flex-wrap:wrap; gap:8px;}
  .pill{
    font-family:var(--font-mono-label); font-size:11.5px; font-weight:var(--weight-semibold);
    letter-spacing:0.02em; padding:4px 11px; border-radius:var(--radius-round); white-space:nowrap;
  }
  .pill.dept{background:var(--cheex-orange-10); color:var(--cheex-orange);}
  .pill.loc{background:var(--cheex-grey-100); color:var(--cheex-grey-900);}
  .pill.type{background:var(--cheex-grey-100); color:var(--cheex-grey-700);}
  .chev{flex-shrink:0; color:var(--cheex-grey-500); transition:transform var(--duration-fast) ease;}
  .job:hover .chev{transform:translateX(2px);}

  .apply-btn{
    display:inline-flex; align-items:center; gap:8px; margin-top:6px;
    background:var(--color-primary); color:var(--color-on-primary); font-weight:var(--weight-bold);
    font-size:14px; letter-spacing:var(--tracking-button);
    padding:13px 24px; border-radius:var(--radius-pill); text-decoration:none;
    transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  }
  .apply-btn:hover{opacity:0.88; transform:translateY(-1px); text-decoration:none;}

  /* ---------- JOB DETAIL OVERLAY ---------- */
  .modal.job-modal{width:min(90vw, 845px); max-width:845px; padding:0;}
  .jm-close{
    position:absolute; top:12px; right:12px; z-index:5; background:rgba(0,0,0,0.15);
    border:none; color:#fff; width:32px; height:32px; border-radius:50%;
    display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .jm-close:hover{background:rgba(0,0,0,0.32);}
  .jm-orange-strip{background:var(--cheex-orange); padding:14px 44px; position:relative;}
  .jm-logo{height:16px; filter:brightness(0) invert(1); display:block;}
  .jm-black-band{
    background:
      radial-gradient(120% 100% at 100% 0%, rgba(175,131,123,0.38), transparent 60%),
      #000;
    padding:30px 44px 26px; position:relative;
  }
  .jm-title{
    font-family:'IvyPresto Display', var(--font-heading); font-style:italic; font-weight:var(--weight-regular);
    color:#fff; font-size:clamp(24px, 5vw, 32px); line-height:1.06; letter-spacing:-0.01em;
    margin:0 0 18px; max-width:75%;
  }
  .jm-meta-block{display:flex; flex-direction:column; gap:3px; margin-bottom:18px;}
  .jm-meta-line{
    font-family:var(--font-mono-label); font-weight:var(--weight-bold); font-size:12px;
    letter-spacing:0.04em; text-transform:uppercase; color:#fff;
  }
  .jm-apply-pill{
    display:inline-flex; border:1.5px solid #fff; color:#fff; border-radius:var(--radius-pill);
    padding:11px 24px; font-family:var(--font-mono-label); font-size:12px; letter-spacing:0.08em;
    text-transform:uppercase; font-weight:var(--weight-bold); text-decoration:none;
    transition:background var(--duration-fast) ease, color var(--duration-fast) ease;
  }
  .jm-apply-pill:hover{background:#fff; color:#000; text-decoration:none;}
  .jm-hr{height:1.5px; background:rgba(255,255,255,0.3); margin-top:22px; border-radius:var(--radius-round);}

  .jm-section{padding:28px 44px;}
  .jm-section.intro{background:#000; color:#fff; font-weight:var(--weight-regular); font-size:15px; line-height:1.25;}
  .jm-section.intro p{margin:0 0 12px; max-width:800px;}
  .jm-closing{display:flex; justify-content:center; padding-top:26px; padding-bottom:34px;}
  .jm-closing-apply{color:#fff;}
  .jm-closing-apply:hover{color:#fff;}
  .jm-section.sand{background:var(--cheex-sand); color:var(--cheex-black);}
  .jm-section.orange{background:var(--cheex-orange); color:#fff;}
  .jm-section h4{
    font-family:var(--font-heading); font-style:italic; font-weight:var(--weight-regular);
    font-size:21px; margin:0 0 16px; color:inherit;
  }
  .jm-cols{display:grid; grid-template-columns:1fr 1fr; gap:26px;}
  .jm-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px;}
  .jm-list li{position:relative; padding-left:16px; font-size:14px; line-height:1.5;}
  .jm-list li::before{content:"•"; position:absolute; left:0; top:0;}
  @media(max-width:520px){ .jm-cols{grid-template-columns:1fr;} .jm-title{max-width:100%;} .jm-orange-strip{padding-left:24px; padding-right:24px;} .jm-black-band{padding-left:24px; padding-right:24px;} .jm-section{padding-left:24px; padding-right:24px;} }

  .empty-state{
    border:1px dashed var(--cheex-grey-200); border-radius:var(--radius-card); padding:36px 24px;
    text-align:center; color:var(--text-muted); font-size:14.5px; background:var(--surface-card);
  }

  /* ---------- OFFER GRID (minimal, no card backgrounds) ---------- */
  .offer-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:32px 24px; margin:26px 0 8px;
  }
  .offer-item{border-top:2px solid var(--cheex-orange); padding-top:14px;}
  .offer-item h4{
    font-family:var(--font-text); font-weight:var(--weight-semibold); font-size:19px;
    color:var(--cheex-black); margin:0 0 6px;
  }
  .offer-item p{font-size:13.5px; line-height:1.5; color:var(--text-muted); margin:0;}
  @media(max-width:820px){ .offer-grid{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:520px){ .offer-grid{grid-template-columns:1fr;} }

  /* ---------- RECRUITMENT PROCESS ---------- */
  .process-section{margin-top:56px;}
  .process-sub{font-size:15px; color:var(--text-muted); margin:8px 0 26px;}
  .process-grid{
    display:grid; grid-template-columns:repeat(4, 1fr); gap:14px;
  }
  .process-card{
    border-radius:var(--radius-card); padding:24px 22px 26px; display:flex; flex-direction:column;
    background:var(--surface-card); box-shadow:var(--shadow-card);
    border-top:3px solid var(--cheex-orange);
  }
  .process-icon{
    width:56px; height:56px; border-radius:var(--radius-round); background:var(--cheex-orange);
    display:flex; align-items:center; justify-content:center; margin-bottom:18px; flex-shrink:0;
    font-size:26px; line-height:1;
    box-shadow:0 4px 12px rgba(255,61,29,0.28);
  }
  .process-icon span{filter:grayscale(1) brightness(0) invert(1);}
  .process-step{
    font-family:var(--font-mono-label); font-size:11px; font-weight:var(--weight-bold);
    letter-spacing:0.1em; text-transform:uppercase; color:var(--cheex-orange); margin-bottom:6px;
  }
  .process-card h4{
    font-family:var(--font-text); font-weight:var(--weight-semibold); font-size:17px;
    color:var(--cheex-black); margin:0 0 10px; line-height:1.25;
  }
  .process-card p{font-size:13.5px; line-height:1.5; color:var(--cheex-grey-900); margin:0;}
  @media(max-width:820px){ .process-grid{grid-template-columns:repeat(2, 1fr);} }
  @media(max-width:520px){ .process-grid{grid-template-columns:1fr;} }

  /* ---------- CTA ---------- */
  .cta-box{
    margin-top:var(--space-9); padding:var(--space-7) var(--space-7);
    border-radius:var(--radius-card); background:var(--surface-card); box-shadow:var(--shadow-card);
    display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:16px;
  }
  .cta-box p{margin:0; color:var(--cheex-grey-900); font-size:14.5px; max-width:42ch;}
  .cta-box a.btn-outline{
    border:1.5px solid var(--cheex-orange); color:var(--cheex-orange); font-weight:var(--weight-bold);
    font-size:14px; letter-spacing:var(--tracking-button);
    padding:12px 22px; border-radius:var(--radius-pill); text-decoration:none; white-space:nowrap;
  }
  .cta-box a.btn-outline:hover{background:var(--cheex-orange-10); text-decoration:none;}

  .foot-rule{max-width:760px; margin:56px auto 0; padding:0 24px;}
  .foot-rule .line{height:1.5px; background:var(--cheex-orange); border-radius:var(--radius-round);}

  /* ---------- ADMIN GEAR ---------- */
  .admin-gear{
    position:fixed; bottom:20px; right:20px; width:44px; height:44px; border-radius:50%;
    background:var(--surface-card); border:1px solid var(--cheex-grey-200); color:var(--cheex-grey-500);
    box-shadow:var(--shadow-card);
    display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:40;
    transition:color var(--duration-fast) ease, border-color var(--duration-fast) ease;
  }
  .admin-gear:hover{color:var(--cheex-orange); border-color:var(--cheex-orange);}

  /* ---------- OVERLAY / MODAL ---------- */
  .overlay{
    position:fixed; inset:0; background:rgba(0,0,0,0.45); backdrop-filter:blur(2px);
    display:flex; align-items:center; justify-content:center; padding:20px; z-index:100;
  }
  .hidden{display:none !important;}
  .modal{
    background:var(--surface-card); border-radius:var(--radius-card);
    width:100%; max-width:420px; padding:30px 28px; max-height:88vh; overflow-y:auto;
    box-shadow:var(--shadow-pop);
  }
  .modal h3{font-family:var(--font-heading-alt); font-weight:var(--weight-black); text-transform:uppercase; font-size:20px; letter-spacing:-0.003em; margin:0 0 8px;}
  .modal .sub{color:var(--text-muted); font-size:13.5px; margin:0 0 22px;}
  .field{margin-bottom:16px;}
  .field label{display:block; font-family:var(--font-mono-label); font-size:12.5px; font-weight:var(--weight-semibold); color:var(--cheex-grey-900); margin-bottom:6px;}
  .field input, .field select{
    width:100%; background:var(--surface-warm); border:1px solid var(--cheex-grey-200); color:var(--cheex-black);
    border-radius:var(--radius-field); padding:11px 18px; font-size:14px; font-family:inherit;
  }
  .field textarea{
    width:100%; background:var(--surface-warm); border:1px solid var(--cheex-grey-200); color:var(--cheex-black);
    border-radius:var(--radius-sm); padding:12px 14px; font-size:14px; font-family:inherit;
    resize:vertical; min-height:110px; line-height:1.5;
  }
  .field-error{color:var(--cheex-orange); font-size:12px; margin-top:6px; display:none;}
  .row-2{display:grid; grid-template-columns:1fr 1fr; gap:12px;}
  .modal-actions{display:flex; gap:10px; margin-top:22px;}
  .btn{
    border:none; border-radius:var(--radius-pill); padding:12px 22px; font-size:14px; font-weight:var(--weight-bold);
    letter-spacing:var(--tracking-button);
    cursor:pointer; transition:opacity var(--duration-fast) ease, transform var(--duration-fast) ease;
  }
  .btn:hover{transform:translateY(-1px);}
  .btn-primary{background:var(--color-primary); color:var(--color-on-primary);}
  .btn-primary:hover{opacity:0.88;}
  .btn-ghost{background:transparent; border:1px solid var(--cheex-grey-300); color:var(--cheex-grey-900);}
  .btn-danger-text{background:transparent; color:var(--cheex-orange); border:none; font-size:13px; cursor:pointer; padding:6px 0; font-weight:var(--weight-semibold);}

  /* ---------- ADMIN PANEL ---------- */
  .admin-panel{
    position:fixed; top:0; right:0; height:100%; width:100%; max-width:440px;
    background:var(--surface-card); z-index:90;
    transform:translateX(100%); transition:transform .28s var(--ease-standard); overflow-y:auto;
    padding:26px 24px 60px; box-shadow:var(--shadow-pop);
  }
  .admin-panel.open{transform:translateX(0);}
  .admin-head{display:flex; align-items:center; justify-content:space-between; margin-bottom:6px;}
  .admin-head h3{font-family:var(--font-heading-alt); font-weight:var(--weight-black); text-transform:uppercase; font-size:20px; margin:0;}
  .icon-btn{background:none; border:none; color:var(--cheex-grey-500); cursor:pointer; padding:6px;}
  .icon-btn:hover{color:var(--cheex-black);}
  .admin-sub{color:var(--text-muted); font-size:13px; margin:0 0 22px;}
  .admin-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    border-radius:var(--radius-card); padding:14px 16px; margin-bottom:10px;
    background:var(--surface-warm);
  }
  .admin-row-title{font-size:14.5px; font-weight:var(--weight-semibold); display:flex; align-items:center; gap:8px;}
  .status-dot{width:7px; height:7px; border-radius:50%; flex-shrink:0;}
  .status-dot.published{background:var(--cheex-success);}
  .status-dot.draft{background:var(--cheex-grey-500);}
  .admin-row-meta{font-family:var(--font-mono-label); font-size:12px; color:var(--text-muted); margin-top:2px;}
  .admin-row-actions{display:flex; gap:6px; flex-shrink:0;}
  .icon-btn-sm{
    width:30px; height:30px; border-radius:var(--radius-sm); border:1px solid var(--cheex-grey-200); background:var(--surface-card);
    color:var(--cheex-grey-900); display:flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .icon-btn-sm:hover{border-color:var(--cheex-orange); color:var(--cheex-orange);}
  .add-btn{
    width:100%; margin-top:6px; margin-bottom:22px; border:1.5px dashed var(--cheex-grey-300);
    background:transparent; color:var(--cheex-grey-900); border-radius:var(--radius-card); padding:13px; font-size:14px;
    font-weight:var(--weight-bold); cursor:pointer; display:flex; align-items:center; justify-content:center; gap:8px;
  }
  .add-btn:hover{border-color:var(--cheex-orange); color:var(--cheex-orange);}
  .toast{
    position:fixed; bottom:24px; left:50%; transform:translateX(-50%) translateY(20px);
    background:var(--cheex-black); color:#fff;
    padding:12px 20px; border-radius:var(--radius-pill); font-size:13.5px; z-index:200;
    opacity:0; transition:opacity .2s ease, transform .2s ease; pointer-events:none;
  }
  .toast.show{opacity:1; transform:translateX(-50%) translateY(0);}

  @media(max-width:520px){
    .row-2{grid-template-columns:1fr;}
    .cta-box{flex-direction:column; align-items:flex-start;}
    .admin-panel{max-width:100%;}
  }