#rcs-careers-unified {
    --c-dark:   #262626;
    --c-light:  #eaeaea;
    --c-red:    #8c182a;
    --c-grey:   #999999;
    --c-border: rgba(255, 255, 255, 0.15);
    --font-main: 'Bahij Janna', sans-serif;
    --font-book: 'Bahij Janna', sans-serif;
    --font-ar:   'Bahij Janna', 'Tajawal', 'IBM Plex Sans Arabic', sans-serif;
    position: relative; width: 100%;
    min-height: 100vh; height: 100vh;
    display: flex; align-items: center; justify-content: center;
    background: var(--c-dark); color: var(--c-light); font-family: var(--font-main);
    padding: calc(var(--nav-height, 80px) + 24px) 6vw 40px;
    overflow: hidden; transition: background-color 0.4s ease, color 0.4s ease;
  }
  #rcs-careers-unified * { box-sizing: border-box; }
  html[data-theme="light"] #rcs-careers-unified { background: #f8f9fa; color: #2b2b2b; }
  html[lang="ar"] #rcs-careers-unified { font-family: var(--font-ar); direction: rtl; }
  #rcs-careers-unified::after { content: ""; position: absolute; top: 20px; left: 20px; width: 30px; height: 30px; border-top: 2px solid var(--c-red); border-left: 2px solid var(--c-red); pointer-events: none; z-index: 2; }
  html[lang="ar"] #rcs-careers-unified::after { left: auto; right: 20px; border-left: none; border-right: 2px solid var(--c-red); }
  #rcs-careers-unified .careers-inner { position: relative; z-index: 3; width: 100%; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.2fr; gap: clamp(40px, 6vw, 90px); align-items: center; }
  #rcs-careers-unified .careers-left { display: flex; flex-direction: column; justify-content: center; gap: clamp(14px, 1.6vw, 22px); max-width: 540px; }
  #rcs-careers-unified .careers-tag { font-size: 11px; font-weight: 800; letter-spacing: 4px; color: var(--c-red); text-transform: uppercase; display: inline-flex; align-items: center; gap: 14px; }
  #rcs-careers-unified .careers-tag::before { content: ""; width: 40px; height: 1px; background: var(--c-red); }
  html[lang="ar"] #rcs-careers-unified .careers-tag { font-size: 14px; letter-spacing: 0; }
  #rcs-careers-unified .careers-headline { font-family: var(--font-main); font-size: clamp(1.8rem, 3vw, 2.8rem); font-weight: 900; line-height: 1.05; text-transform: uppercase; letter-spacing: -1px; margin: 0; color: #fff; }
  html[data-theme="light"] #rcs-careers-unified .careers-headline { color: #2b2b2b; }
  #rcs-careers-unified .careers-headline .red { color: var(--c-red); }
  html[lang="ar"] #rcs-careers-unified .careers-headline { font-family: var(--font-ar); font-size: clamp(1.9rem, 3.2vw, 3rem); letter-spacing: 0; line-height: 1.2; text-transform: none; }
  #rcs-careers-unified .careers-desc { font-family: var(--font-book); font-size: clamp(0.9rem, 1vw, 1rem); line-height: 1.7; color: var(--c-grey); margin: 0; }
  html[data-theme="light"] #rcs-careers-unified .careers-desc { color: #555; }
  html[lang="ar"] #rcs-careers-unified .careers-desc { font-family: var(--font-ar); line-height: 1.85; }
  #rcs-careers-unified .careers-meta { display: flex; flex-direction: column; gap: 14px; margin-top: 8px; padding-top: 22px; border-top: 1px solid var(--c-border); }
  html[data-theme="light"] #rcs-careers-unified .careers-meta { border-top-color: rgba(0,0,0,0.1); }
  #rcs-careers-unified .careers-meta-row { display: flex; align-items: flex-start; gap: 14px; }
  #rcs-careers-unified .careers-meta-icon { width: 32px; height: 32px; flex-shrink: 0; border: 1px solid var(--c-border); border-radius: 4px; display: flex; align-items: center; justify-content: center; color: var(--c-red); }
  html[data-theme="light"] #rcs-careers-unified .careers-meta-icon { border-color: rgba(0,0,0,0.1); }
  #rcs-careers-unified .careers-meta-icon svg { width: 14px; height: 14px; }
  #rcs-careers-unified .careers-meta-text { display: flex; flex-direction: column; gap: 3px; }
  #rcs-careers-unified .careers-meta-title { font-family: var(--font-main); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; color: #fff; text-transform: uppercase; }
  html[data-theme="light"] #rcs-careers-unified .careers-meta-title { color: #2b2b2b; }
  html[lang="ar"] #rcs-careers-unified .careers-meta-title { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; }
  #rcs-careers-unified .careers-meta-sub { font-family: var(--font-book); font-size: 12px; color: var(--c-grey); line-height: 1.5; }
  html[data-theme="light"] #rcs-careers-unified .careers-meta-sub { color: #666; }
  html[lang="ar"] #rcs-careers-unified .careers-meta-sub { font-family: var(--font-ar); font-size: 13px; }
  #rcs-careers-unified .careers-right { background: rgba(255,255,255,0.05); -webkit-backdrop-filter: blur(12px) saturate(1.4); backdrop-filter: blur(12px) saturate(1.4); border: 1px solid rgba(255,255,255,0.22); border-radius: 4px; padding: clamp(28px, 3vw, 44px) clamp(30px, 3.5vw, 50px); display: flex; flex-direction: column; gap: 18px; }
  html[data-theme="light"] #rcs-careers-unified .careers-right { background: rgba(255,255,255,0.55); border-color: var(--c-red); }
  #rcs-careers-unified .form-head { display: flex; flex-direction: column; gap: 8px; margin-bottom: 4px; }
  #rcs-careers-unified .form-head h3 { font-family: var(--font-main); font-size: clamp(1.3rem, 1.9vw, 1.6rem); font-weight: 900; text-transform: uppercase; margin: 0; color: #fff; }
  html[data-theme="light"] #rcs-careers-unified .form-head h3 { color: #2b2b2b; }
  html[lang="ar"] #rcs-careers-unified .form-head h3 { font-family: var(--font-ar); font-size: clamp(1.4rem, 2.1vw, 1.8rem); text-transform: none; }
  #rcs-careers-unified .form-head p { font-family: var(--font-book); font-size: 13px; color: var(--c-grey); line-height: 1.5; margin: 0; }
  html[data-theme="light"] #rcs-careers-unified .form-head p { color: #666; }
  html[lang="ar"] #rcs-careers-unified .form-head p { font-family: var(--font-ar); font-size: 14px; }
  #rcs-careers-unified .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
  #rcs-careers-unified .form-field { position: relative; display: flex; flex-direction: column; gap: 6px; }
  #rcs-careers-unified .form-field label { font-family: var(--font-main); font-size: 12.5px; font-weight: 800; letter-spacing: 2px; color: #fff; text-transform: uppercase; }
  html[data-theme="light"] #rcs-careers-unified .form-field label { color: var(--c-red); }
  html[lang="ar"] #rcs-careers-unified .form-field label { font-family: var(--font-ar); font-size: 16px; letter-spacing: 0; }
  #rcs-careers-unified .form-field label span { color: var(--c-red); font-weight: 900; margin-inline-start: 3px; }
  #rcs-careers-unified .form-field input, #rcs-careers-unified .form-field textarea { background: transparent; border: none; border-bottom: 1px solid var(--c-border); padding: 11px 0; color: #fff; font-family: var(--font-main); font-size: 15px; outline: none; transition: border-color 0.3s ease; border-radius: 0; }
  html[lang="ar"] #rcs-careers-unified .form-field input, html[lang="ar"] #rcs-careers-unified .form-field textarea { font-family: var(--font-ar); }
  html[data-theme="light"] #rcs-careers-unified .form-field input, html[data-theme="light"] #rcs-careers-unified .form-field textarea { color: #2b2b2b; border-bottom-color: rgba(0,0,0,0.15); }
  #rcs-careers-unified .form-field input:focus, #rcs-careers-unified .form-field textarea:focus { border-bottom-color: var(--c-red); }
  #rcs-careers-unified .form-upload { border: 1px dashed var(--c-border); padding: 20px; text-align: center; border-radius: 4px; cursor: pointer; transition: 0.3s; background: rgba(255,255,255,0.02); position: relative; }
  html[data-theme="light"] #rcs-careers-unified .form-upload { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); }
  #rcs-careers-unified .form-upload:hover { border-color: var(--c-red); background: rgba(140,24,42,0.05); }
  #rcs-careers-unified .form-upload input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
  #rcs-careers-unified .form-upload-icon { width: 20px; height: 20px; color: var(--c-red); margin: 0 auto 6px; display: block; }
  #rcs-careers-unified .form-upload-text { font-family: var(--font-main); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-light); }
  html[data-theme="light"] #rcs-careers-unified .form-upload-text { color: #2b2b2b; }
  html[lang="ar"] #rcs-careers-unified .form-upload-text { font-family: var(--font-ar); font-size: 13px; letter-spacing: 0; }
  #rcs-careers-unified .form-submit { display: inline-flex; align-items: center; justify-content: center; gap: 12px; padding: 15px 32px; background: var(--c-red); color: #fff; border: 1px solid var(--c-red); font-family: var(--font-main); font-size: 11px; font-weight: 800; letter-spacing: 2px; text-transform: uppercase; cursor: pointer; border-radius: 4px; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease; margin-top: 4px; width: 100%; }
  html[lang="ar"] #rcs-careers-unified .form-submit { font-family: var(--font-ar); font-size: 14px; letter-spacing: 0; }
  #rcs-careers-unified .form-submit:hover { background: #fff; color: var(--c-red); border-color: #fff; }
  html[data-theme="light"] #rcs-careers-unified .form-submit:hover { background: transparent; color: var(--c-red); border-color: var(--c-red); }
  #rcs-careers-unified .form-submit svg { width: 14px; height: 14px; transition: transform 0.3s; }
  #rcs-careers-unified .form-submit:hover svg { transform: translateX(5px); }
  html[lang="ar"] #rcs-careers-unified .form-submit svg { transform: scaleX(-1); }
  html[lang="ar"] #rcs-careers-unified .form-submit:hover svg { transform: translateX(-5px) scaleX(-1); }
  /* TABLET / NARROW (<=1024) — fall to single column, allow natural height */
  @media (max-width: 1024px) {
    #rcs-careers-unified { height: auto; min-height: 100vh; }
    #rcs-careers-unified .careers-inner { grid-template-columns: 1fr; gap: 44px; max-width: 620px; }
    #rcs-careers-unified .careers-left { max-width: 100%; }
  }
  /* MOBILE — SCROLLABLE: height auto, page scrolls normally */
  @media (max-width: 767px) {
    #rcs-careers-unified { height: auto !important; min-height: auto !important; display: block; padding: calc(var(--nav-height, 80px) + 24px) 5vw 90px; overflow: visible; }
    #rcs-careers-unified .careers-inner { display: block; }
    #rcs-careers-unified .careers-left { margin-bottom: 45px; }
    #rcs-careers-unified .form-row { grid-template-columns: 1fr; }
    #rcs-careers-unified .form-submit { width: 100%; }
  }
  /* SHORT-VIEWPORT desktop (Windows laptops / scaled displays <=820 tall) — keep text readable; grow instead of shrinking tiny */
  @media (min-width: 1025px) and (max-height: 820px) {
    html body #rcs-careers-unified { height: auto; min-height: 100vh; overflow: visible; padding-top: calc(var(--nav-height, 80px) + 22px) !important; padding-bottom: 46px; }
    #rcs-careers-unified .careers-inner { gap: clamp(34px,4vw,64px); align-items: center; }
    #rcs-careers-unified .careers-left { gap: clamp(14px,1.4vw,20px); max-width: 540px; }
    #rcs-careers-unified .careers-headline { font-size: clamp(1.9rem, 2.4vw, 2.5rem); }
    #rcs-careers-unified .careers-desc { font-size: clamp(0.95rem, 1vw, 1.02rem); line-height: 1.65; }
    #rcs-careers-unified .careers-meta { padding-top: 18px; gap: 12px; }
    #rcs-careers-unified .careers-right { padding: clamp(26px,2.4vw,40px) clamp(30px,3vw,46px); gap: 15px; }
    #rcs-careers-unified .form-row { gap: 16px; }
    #rcs-careers-unified .form-field input { padding: 9px 0; font-size: 14px; }
    #rcs-careers-unified .form-upload { padding: 16px; }
  }


  /* ---------------------------------------------------------------------
     Native Webflow file upload, styled to match the original .form-upload
     control. Webflow renders its own state machine (default / uploading /
     success / error) instead of the single custom label the static build
     used, so each state is given the same dashed surface. The custom
     control could not be kept: Webflow only captures a file when the
     submission comes from its own file-upload element.
     --------------------------------------------------------------------- */
  #rcs-careers-unified .w-file-upload { margin-bottom: 0; }
  #rcs-careers-unified .w-file-upload-default,
  #rcs-careers-unified .w-file-upload-uploading,
  #rcs-careers-unified .w-file-upload-success,
  #rcs-careers-unified .w-file-upload-error { border: 1px dashed var(--c-border); padding: 20px; text-align: center; border-radius: 4px; background: rgba(255,255,255,0.02); transition: 0.3s; }
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-default,
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-uploading,
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-success,
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-error { border-color: rgba(0,0,0,0.15); background: rgba(0,0,0,0.02); }
  #rcs-careers-unified .w-file-upload-default:hover { border-color: var(--c-red); background: rgba(140,24,42,0.05); }
  #rcs-careers-unified .w-file-upload-label { background: transparent; border: 0; padding: 0; margin: 0; display: block; cursor: pointer; }
  #rcs-careers-unified .w-file-upload-label .w-icon-file-upload-icon { color: var(--c-red); margin: 0 auto 6px; display: block; }
  #rcs-careers-unified .w-file-upload-label .w-inline-block { font-family: var(--font-main); font-size: 10px; font-weight: 800; letter-spacing: 1.5px; text-transform: uppercase; color: var(--c-light); }
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-label .w-inline-block { color: #2b2b2b; }
  #rcs-careers-unified .w-file-upload-info { font-size: 10px; letter-spacing: 1px; color: var(--c-grey); margin-top: 6px; }
  #rcs-careers-unified .w-file-upload-file { background: transparent; border: 0; padding: 0; justify-content: center; }
  #rcs-careers-unified .w-file-upload-file-name { color: var(--c-light); font-size: 12px; }
  html[data-theme="light"] #rcs-careers-unified .w-file-upload-file-name { color: #2b2b2b; }


  /* -------------------------------------------------------------------
     v3 (2026-09-13), client feedback on the careers form:
     1. Field labels match the contact form - neutral grey in light mode,
        soft white in dark - instead of the red they shipped with. The
        required asterisk (label span) stays brand red.
     2. The CV upload box and the submit button take the full form width,
        aligned with the fields above them; Webflow's upload states are
        inline-block by default, which made the dashed box shrink-wrap.
     ------------------------------------------------------------------- */
  #rcs-careers-unified .form-field label { color: rgba(255, 255, 255, 0.78); }
  html[data-theme="light"] #rcs-careers-unified .form-field label { color: #55565a; }
  #rcs-careers-unified .form-field label span { color: var(--c-red); }

  #rcs-careers-unified .w-file-upload { width: 100%; }
  /* Only the default state may take a display value: Webflow hides the
     uploading/success/error states with display:none and toggles them from
     its own script, so forcing display here would show all four at once. */
  #rcs-careers-unified .w-file-upload-default { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
  #rcs-careers-unified .w-file-upload-uploading,
  #rcs-careers-unified .w-file-upload-success,
  #rcs-careers-unified .w-file-upload-error { width: 100%; text-align: center; }
  #rcs-careers-unified .w-file-upload-info { margin-top: 0; padding: 0; }
  #rcs-careers-unified .submit-slot { width: 100%; }
  #rcs-careers-unified .submit-slot .w-embed { width: 100%; }
  #rcs-careers-unified .form-submit { width: 100%; }