/* ============================================================
       CAREERS PAGE
    ============================================================ */

    /* ── Hero ── */
    .cr-hero {
      position: relative;
      height: 100vh;
      height: 100svh;
      min-height: 640px;
      overflow: hidden;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding-bottom: clamp(64px, 9vh, 104px);
    }
    .cr-hero__video {
      position: absolute; inset: 0;
      width: 100%; height: 100%;
      object-fit: cover; z-index: 0;
    }
    .cr-hero__overlay {
      position: absolute; inset: 0;
      background: linear-gradient(
        to top,
        rgba(8,10,20,0.80) 0%,
        rgba(8,10,20,0.30) 52%,
        rgba(8,10,20,0.12) 100%
      );
      z-index: 1;
    }
    .cr-hero__content {
      position: relative; z-index: 2;
      max-width: var(--max-w); margin: 0 auto;
      padding: 0 var(--pad); width: 100%;
    }
    .cr-hero__eyebrow {
      display: block;
      font-family: var(--f-display); font-weight: 600;
      font-size: 0.70rem; letter-spacing: 0.22em; text-transform: uppercase;
      color: rgba(255,255,255,0.42); margin-bottom: 22px;
    }
    .cr-hero__headline {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(2.6rem, 6vw, 6.4rem);
      line-height: 0.88; letter-spacing: -0.025em;
      color: #fff;
      margin-bottom: 28px;
    }
    .cr-hero__sub {
      font-size: 1.06rem; color: rgba(255,255,255,0.56);
      line-height: 1.7; max-width: 620px; margin-bottom: 36px;
    }
    .cr-hero__link {
      display: inline-flex; align-items: center; gap: 10px;
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: #fff; border-bottom: 1px solid rgba(255,255,255,0.32);
      padding-bottom: 4px;
      transition: gap 0.22s, border-color 0.22s;
    }
    .cr-hero__link:hover { gap: 18px; border-color: rgba(255,255,255,0.72); }

    /* ── Values strip ── */
    .cr-values {
      background: var(--dark-2);
      border-bottom: 1px solid var(--dark-border);
    }
    .cr-values__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      max-width: var(--max-w); margin: 0 auto;
    }
    .cr-value {
      padding: 44px var(--pad);
      border-right: 1px solid var(--dark-border);
    }
    .cr-value:last-child { border-right: none; }
    .cr-value__num {
      display: block;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 22px;
    }
    .cr-value__title {
      font-size: 0.82rem; font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--dark-text); margin-bottom: 12px;
    }
    .cr-value__body {
      font-size: 0.90rem; line-height: 1.78; color: var(--dark-dim);
    }

    /* ── Opening statement ── */
    .cr-opening {
      border-top: 1px solid var(--border);
      padding: clamp(76px, 8vw, 108px) 0;
      background: var(--bg);
    }
    .cr-opening__grid {
      display: grid;
      grid-template-columns: minmax(280px, 380px) 1fr;
      gap: clamp(48px, 6vw, 88px); align-items: start;
    }
    .cr-opening__headline {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.5rem, 2.4vw, 2.4rem);
      line-height: 1.05; letter-spacing: -0.02em;
      color: var(--text);
      margin-top: 16px; margin-bottom: 0;
    }
    .cr-opening__body {
      font-size: 1.08rem; color: var(--text-dim); line-height: 1.82;
    }
    .cr-opening__body p { margin-bottom: 22px; }
    .cr-opening__body p:last-of-type { margin-bottom: 0; }

    /* ── Photo strip ── */
    .cr-photos {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--border);
    }
    .cr-photos img {
      width: 100%; aspect-ratio: 4/3;
      object-fit: cover; display: block;
      border-right: 1px solid var(--border);
      transition: opacity 0.3s;
      cursor: zoom-in;
    }
    .cr-photos img:last-child { border-right: none; }
    .cr-photos img:hover { opacity: 0.85; }

    /* ── What you'll work on ── */
    .cr-build {
      background: var(--dark);
      border-top: 1px solid var(--dark-border);
    }
    .cr-build__hd {
      max-width: var(--max-w); margin: 0 auto;
      padding: clamp(76px, 8vw, 108px) var(--pad) 48px;
    }
    .cr-build__hd .lbl { color: rgba(255,255,255,0.32); }
    .cr-build__hd h2 {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.6rem, 3vw, 3.4rem);
      line-height: 0.98;
      color: var(--dark-text); margin-top: 12px;
    }
    .cr-build__grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      border-top: 1px solid var(--dark-border);
      max-width: var(--max-w); margin: 0 auto;
      padding-bottom: clamp(76px, 8vw, 108px);
    }
    .cr-cell {
      padding: 42px var(--pad);
      border-right: 1px solid var(--dark-border);
      border-bottom: 1px solid var(--dark-border);
    }
    .cr-cell:nth-child(3n) { border-right: none; }
    .cr-cell:nth-last-child(-n+3) { border-bottom: none; }
    .cr-cell__num {
      display: block;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 20px;
    }
    .cr-cell__title {
      font-size: 0.82rem; font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--dark-text); margin-bottom: 12px;
    }
    .cr-cell__body {
      font-size: 0.90rem; line-height: 1.78; color: var(--dark-dim);
    }

    /* ── What we look for ── */
    .cr-qualities {
      border-top: 1px solid var(--border);
      padding: clamp(76px, 8vw, 108px) 0;
      background: var(--bg-2);
    }
    .cr-qualities__grid {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 80px; align-items: start;
    }
    .cr-qualities__headline {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.6rem, 2.8vw, 3rem);
      line-height: 0.98; letter-spacing: -0.02em;
      color: var(--text);
      margin-top: 16px;
    }
    .cr-quality-list { display: flex; flex-direction: column; }
    .cr-quality {
      display: grid;
      grid-template-columns: 200px 1fr;
      gap: 40px; padding: 30px 0;
      border-top: 1px solid var(--border);
      align-items: start;
    }
    .cr-quality__title {
      font-size: 0.80rem; font-weight: 700;
      letter-spacing: -0.01em;
      color: var(--text);
    }
    .cr-quality__body {
      font-size: 0.92rem; line-height: 1.78; color: var(--text-dim);
    }

    /* ── Open positions ── */
    .cr-positions {
      background: var(--dark);
      border-top: 1px solid var(--dark-border);
      padding-bottom: clamp(76px, 8vw, 108px);
    }
    .cr-positions__hd {
      max-width: var(--max-w); margin: 0 auto;
      padding: clamp(76px, 8vw, 108px) var(--pad) 48px;
      display: flex; align-items: flex-end;
      justify-content: space-between; gap: 48px;
    }
    .cr-positions__hd .lbl { color: rgba(255,255,255,0.32); }
    .cr-positions__hd h2 {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.6rem, 3vw, 3.4rem);
      line-height: 0.98;
      color: var(--dark-text); margin-top: 12px;
    }
    .cr-positions__open-app {
      flex-shrink: 0;
    }
    .cr-positions__list {
      max-width: var(--max-w); margin: 0 auto;
      padding: 0 var(--pad);
    }

    /* Dept group */
    .pos-dept-group { border-top: 1px solid var(--dark-border); margin-bottom: 0; }
    .pos-dept-label {
      display: block;
      padding: 32px 0 12px;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted);
    }

    /* Position row */
    .pos-row {
      display: grid;
      grid-template-columns: 1fr auto auto auto;
      align-items: center; gap: 24px;
      padding: 24px 0;
      border-top: 1px solid rgba(255,255,255,0.06);
      text-decoration: none; color: inherit;
      transition: opacity 0.18s;
    }
    .pos-row:hover { opacity: 0.78; }
    .pos-title {
      font-size: 1rem; font-weight: 600;
      letter-spacing: -0.01em; color: var(--dark-text);
    }
    .pos-tag {
      font-size: 0.62rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-muted); border: 1px solid var(--dark-border);
      padding: 4px 10px; white-space: nowrap;
    }
    .pos-location {
      font-size: 0.78rem; color: var(--dark-muted); white-space: nowrap;
    }
    .pos-arrow {
      width: 30px; height: 30px;
      display: flex; align-items: center; justify-content: center;
      color: var(--dark-muted);
    }

    /* Empty state */
    .pos-empty {
      border-top: 1px solid var(--dark-border);
      padding: 72px 0;
    }
    .pos-empty__headline {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.4rem, 2.4vw, 2.4rem);
      line-height: 0.98;
      color: var(--dark-text); margin-bottom: 20px;
    }
    .pos-empty p {
      font-size: 1rem; color: var(--dark-dim); line-height: 1.75;
      max-width: 480px; margin-bottom: 36px;
    }

    /* Open application aside (in header) */
    .cr-open-app {
      text-align: right;
    }
    .cr-open-app__label {
      display: block;
      font-size: 0.68rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 10px;
    }

    /* ── Job detail overlay ── */
    #job-overlay {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 200;
      background: var(--dark);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #job-overlay-bar {
      position: sticky;
      top: 0;
      height: 56px;
      background: rgba(9,9,9,0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--dark-border);
      display: flex;
      align-items: center;
      padding: 0 var(--pad);
      z-index: 10;
    }
    #job-overlay-close {
      display: flex; align-items: center; gap: 10px;
      background: none; border: none;
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-muted); cursor: pointer; padding: 0;
      transition: color 0.2s;
    }
    #job-overlay-close:hover { color: var(--dark-text); }
    #job-overlay-header {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 80px;
      max-width: var(--max-w); margin: 0 auto;
      padding: clamp(76px, 8vw, 108px) var(--pad) 48px;
      border-bottom: 1px solid var(--dark-border);
    }
    #job-overlay-sidebar {
      display: flex; flex-direction: column; gap: 32px;
    }
    .jo-meta-label {
      display: block;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 8px;
    }
    .jo-meta-val { font-size: 0.90rem; color: var(--dark-dim); line-height: 1.6; }
    #job-overlay-apply {
      display: inline-flex; align-items: center; gap: 8px;
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.72rem; letter-spacing: 0.12em; text-transform: uppercase;
      color: var(--dark-text);
      border: 1px solid var(--dark-border);
      padding: 13px 24px;
      text-decoration: none;
      transition: border-color 0.2s;
    }
    #job-overlay-apply:hover { border-color: rgba(255,255,255,0.4); }
    #job-overlay-eyebrow {
      display: block;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 22px;
    }
    #job-overlay-title {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(2rem, 3.5vw, 4rem);
      line-height: 0.92; letter-spacing: -0.025em;
      color: var(--dark-text);
      margin-bottom: 28px;
    }
    #job-overlay-intro {
      font-size: 1.05rem; color: var(--dark-dim); line-height: 1.78;
    }
    #job-overlay-body {
      max-width: var(--max-w); margin: 0 auto;
      padding: 64px calc(var(--pad)) var(--section) calc(var(--pad) + 280px + 80px);
    }
    #job-overlay-body h3 {
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.20em; text-transform: uppercase;
      color: var(--dark-muted); margin: 40px 0 14px;
    }
    #job-overlay-body h3:first-child { margin-top: 0; }
    #job-overlay-body p {
      font-size: 0.95rem; color: var(--dark-dim); line-height: 1.78; margin-bottom: 16px;
    }
    #job-overlay-body ul { list-style: none; padding: 0; margin: 0 0 16px; }
    #job-overlay-body ul li {
      font-size: 0.95rem; color: var(--dark-dim); line-height: 1.72;
      padding: 5px 0 5px 20px; position: relative;
    }
    #job-overlay-body ul li::before {
      content: '—'; position: absolute; left: 0; color: var(--dark-muted);
    }

    .cr-hero__link:focus-visible,
    .pos-row:focus-visible,
    #job-overlay-close:focus-visible,
    #job-overlay-apply:focus-visible,
    #apply-modal-close:focus-visible,
    #af-submit:focus-visible {
      outline: 2px solid currentColor;
      outline-offset: 5px;
    }
    .pos-loading {
      font-size: 0.85rem;
      color: var(--dark-muted);
      padding: 56px 0;
    }

    /* ============================================================
       RESPONSIVE
    ============================================================ */
    @media (max-width: 1100px) {
      .cr-cell { padding: 48px 40px; }
      .cr-value { padding: 40px; }
      .cr-positions__hd { flex-direction: column; align-items: flex-start; }
    }
    @media (max-width: 900px) {
      .cr-opening__grid,
      .cr-qualities__grid { grid-template-columns: 1fr; gap: 32px; }
      .cr-quality { grid-template-columns: 1fr; gap: 8px; padding: 28px 0; }
      .cr-build__grid { grid-template-columns: repeat(2, 1fr); }
      .cr-cell:nth-child(3n)        { border-right: 1px solid var(--dark-border); }
      .cr-cell:nth-child(2n)        { border-right: none; }
      .cr-cell:nth-last-child(-n+3) { border-bottom: 1px solid var(--dark-border); }
      .cr-cell:nth-last-child(-n+2) { border-bottom: none; }
    }
    @media (max-width: 700px) {
      .cr-values__grid { grid-template-columns: 1fr; }
      .cr-value { border-right: none; border-bottom: 1px solid var(--dark-border); }
      .cr-value:last-child { border-bottom: none; }
      .cr-build__grid { grid-template-columns: 1fr; }
      .cr-cell { border-right: none; }
      .cr-cell:nth-last-child(-n+2) { border-bottom: 1px solid var(--dark-border); }
      .cr-cell:last-child { border-bottom: none; }
      .pos-row { grid-template-columns: 1fr auto; }
      .pos-tag, .pos-location { display: none; }
    }
    @media (max-width: 560px) {
      .cr-hero { padding-bottom: 56px; min-height: 620px; }
      .cr-hero__headline { font-size: clamp(2.25rem, 10vw, 4rem); line-height: 0.98; }
      .cr-hero__sub { font-size: 0.96rem; max-width: 100%; margin-bottom: 30px; }
    }
    @media (max-width: 900px) {
      #job-overlay-header { grid-template-columns: 1fr; gap: 40px; }
      #job-overlay-sidebar { flex-direction: row; flex-wrap: wrap; gap: 24px; }
      #job-overlay-body { padding-left: var(--pad); }
    }
    @media (max-width: 640px) {
      #job-overlay-bar { padding: 0 24px; }
      #job-overlay-header { padding: 48px 24px 48px; }
      #job-overlay-body { padding: 48px 24px var(--section); }
    }

    /* ── Apply modal ── */
    #apply-modal {
      display: none;
      position: fixed;
      inset: 0;
      z-index: 300;
      background: var(--dark);
      overflow-y: auto;
      overscroll-behavior: contain;
    }
    #apply-modal.open { display: block; }
    #apply-modal-bar {
      position: sticky;
      top: 0;
      height: 56px;
      background: rgba(9,9,9,0.88);
      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);
      border-bottom: 1px solid var(--dark-border);
      display: flex; align-items: center;
      padding: 0 var(--pad); z-index: 10;
    }
    #apply-modal-close {
      display: flex; align-items: center; gap: 10px;
      background: none; border: none;
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.68rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-muted); cursor: pointer; padding: 0;
      transition: color 0.2s;
    }
    #apply-modal-close:hover { color: var(--dark-text); }
    #apply-modal-inner {
      display: grid;
      grid-template-columns: 280px 1fr;
      gap: 80px;
      max-width: var(--max-w); margin: 0 auto;
      padding: var(--section) var(--pad) var(--section);
    }
    /* left: role info */
    #apply-modal-info {
      display: flex; flex-direction: column; gap: 28px;
      padding-top: 4px;
    }
    #apply-modal-role-title {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(1.1rem, 1.8vw, 1.6rem);
      line-height: 1.0; letter-spacing: -0.02em;
      color: var(--dark-text);
      margin-top: 8px;
    }
    .am-info-label {
      display: block;
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.22em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 6px;
    }
    .am-info-val { font-size: 0.88rem; color: var(--dark-dim); line-height: 1.6; }

    /* right: form */
    #apply-form-wrap { padding-top: 4px; }

    .af-stack {
      background: var(--dark-border);
      display: flex; flex-direction: column; gap: 1px;
      margin-bottom: 24px;
    }
    .af-row {
      display: grid; grid-template-columns: 1fr 1fr;
      gap: 1px;
    }
    .af-group {
      background: var(--dark-2, #111);
      padding: 14px 16px;
      display: flex; flex-direction: column;
    }
    .af-group:focus-within { background: rgba(255,255,255,0.04); }
    .af-group label {
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.20em; text-transform: uppercase;
      color: var(--dark-muted); margin-bottom: 8px;
      display: flex; justify-content: space-between; align-items: baseline;
    }
    .af-group input,
    .af-group textarea {
      background: none; border: none; outline: none;
      font-family: var(--f-body, inherit); font-size: 0.92rem;
      color: var(--dark-text); line-height: 1.6;
      width: 100%; resize: none;
    }
    .af-group input::placeholder,
    .af-group textarea::placeholder { color: var(--dark-muted); }
    .af-group.af-error { outline: 1px solid rgba(255,255,255,0.25); }

    /* word counter */
    .af-word-counter {
      font-size: 0.60rem; font-weight: 700;
      letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark-muted);
    }
    .af-word-counter.warn { opacity: 0.6; }
    .af-word-counter.ok   { color: var(--dark-dim); }

    /* CV upload */
    .af-cv-zone {
      position: relative;
      border: 1px dashed rgba(255,255,255,0.12);
      padding: 20px; text-align: center;
      cursor: pointer;
      transition: border-color 0.2s;
    }
    .af-cv-zone:hover { border-color: rgba(255,255,255,0.28); }
    .af-cv-zone input[type="file"] {
      position: absolute; inset: 0;
      opacity: 0; cursor: pointer; width: 100%; height: 100%;
    }
    .af-cv-prompt { font-size: 0.88rem; color: var(--dark-dim); margin-bottom: 4px; }
    .af-cv-sub    { font-size: 0.75rem; color: var(--dark-muted); }
    .af-cv-fname  { display: none; font-size: 0.88rem; color: var(--dark-text); margin-top: 4px; }
    .af-cv-err    { display: none; font-size: 0.75rem; color: var(--dark-muted); margin-top: 8px; }

    /* submit */
    #af-submit {
      font-family: var(--f-display); font-weight: 700;
      font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
      color: var(--dark); background: var(--dark-text);
      border: none; padding: 16px 40px;
      cursor: pointer;
      display: inline-flex; align-items: center; gap: 10px;
      transition: opacity 0.2s;
    }
    #af-submit:hover { opacity: 0.85; }
    #af-submit:disabled { opacity: 0.35; cursor: default; }

    /* success */
    #apply-success {
      display: none;
      max-width: var(--max-w); margin: 0 auto;
      padding: var(--section) var(--pad) var(--section) calc(var(--pad) + 280px + 80px);
    }
    #apply-success h2 {
      font-family: var(--f-display); font-weight: 700;
      font-size: clamp(2rem, 3.5vw, 4rem);
      line-height: 0.92; letter-spacing: -0.025em;
      text-transform: uppercase; color: var(--dark-text);
      margin-bottom: 20px;
    }
    #apply-success p { font-size: 0.95rem; color: var(--dark-dim); line-height: 1.78; max-width: 440px; }

    @media (max-width: 900px) {
      #apply-modal-inner { grid-template-columns: 1fr; gap: 40px; }
      #apply-modal-info  { flex-direction: row; flex-wrap: wrap; gap: 24px; }
      #apply-success     { padding-left: var(--pad); }
    }
    @media (max-width: 640px) {
      #apply-modal-bar   { padding: 0 24px; }
      #apply-modal-inner { padding: 48px 24px var(--section); }
      .af-row            { grid-template-columns: 1fr; }
      #apply-success     { padding: 48px 24px var(--section); }
    }