/* Careers page */
.cr-hero { background: linear-gradient(180deg, #f8f7f4 0%, #ffffff 100%); padding: 64px 0 72px; }
.cr-hero-grid { display: grid; grid-template-columns: 1.05fr 1fr; gap: 56px; align-items: center; }
.cr-hero h1 { font-family: "Playfair Display", serif; color: #0b2148; font-size: 3rem; line-height: 1.15; margin: 14px 0 18px; }
.cr-hero-lead { color: #4b5563; font-size: 1.1rem; line-height: 1.75; margin: 0 0 28px; max-width: 560px; }
.cr-hero-cta { display: flex; flex-wrap: wrap; gap: 12px; }
.cr-hero-facts { list-style: none; display: flex; flex-wrap: wrap; gap: 14px 36px; margin: 34px 0 0; padding: 22px 0 0; border-top: 1px solid #ece8e1; }
.cr-hero-facts strong { display: block; font-family: "Playfair Display", serif; color: #0b2148; font-size: 1.5rem; }
.cr-hero-facts span { color: #6b7280; font-size: 0.85rem; }
.cr-hero-media { position: relative; margin: 0; }
.cr-hero-media img { display: block; width: 100%; height: 440px; object-fit: cover; border-radius: 20px; box-shadow: 0 24px 50px rgba(11, 33, 72, 0.18); }
.cr-hero-badge {
  position: absolute; left: -24px; bottom: 28px; display: flex; gap: 12px; align-items: center; max-width: 320px;
  background: #fff; border-radius: 14px; padding: 14px 18px; box-shadow: 0 14px 34px rgba(11, 33, 72, 0.16);
  font-size: 0.86rem; color: #4b5563; line-height: 1.45;
}
.cr-hero-badge svg { width: 28px; height: 28px; color: #d97706; flex-shrink: 0; }
.cr-hero-badge strong { color: #0b2148; }

.cr-head { max-width: 760px; margin: 0 auto 40px; text-align: center; }
.cr-head h2, .cr-h2 { font-family: "Playfair Display", serif; color: #0b2148; font-size: 2.1rem; line-height: 1.25; margin: 10px 0 10px; }
.cr-sub { color: #6b7280; font-size: 1rem; line-height: 1.7; margin: 0; }
.cr-head--row { max-width: none; display: flex; justify-content: space-between; align-items: flex-end; text-align: left; gap: 20px; margin-bottom: 24px; }

.cr-why { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; }
.cr-why-card { background: #fff; border: 1px solid #ece8e1; border-radius: 16px; padding: 28px 24px; transition: transform .2s, box-shadow .2s; }
.cr-why-card:hover { transform: translateY(-4px); box-shadow: 0 16px 34px rgba(11, 33, 72, 0.1); }
.cr-why-card h3 { color: #0b2148; font-size: 1.05rem; margin: 16px 0 8px; }
.cr-why-card p { color: #4b5563; font-size: 0.93rem; line-height: 1.65; margin: 0; }
.cr-ico { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; background: #fdf3e2; color: #b45309; }
.cr-ico svg { width: 24px; height: 24px; }

/* Role filters + list */
.cr-filters { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 22px; }
.cr-chip {
  font: inherit; font-size: 0.86rem; font-weight: 600; color: #0b2148; background: #fff; cursor: pointer;
  border: 1px solid #e5e1d8; border-radius: 999px; padding: 8px 14px; transition: all .2s;
}
.cr-chip b { display: inline-block; min-width: 20px; margin-left: 6px; padding: 1px 6px; border-radius: 999px; background: #f3efe8; font-size: 0.75rem; }
.cr-chip:hover { border-color: #d97706; }
.cr-chip.is-active { background: #0b2148; color: #fff; border-color: #0b2148; }
.cr-chip.is-active b { background: #f5b754; color: #0b2148; }
.cr-roles { display: flex; flex-direction: column; gap: 12px; }
.role { background: #fff; border: 1px solid #ece8e1; border-radius: 16px; transition: border-color .2s, box-shadow .2s; scroll-margin-top: 100px; }
.role:hover, .role[open] { border-color: #eecd93; box-shadow: 0 12px 28px rgba(11, 33, 72, 0.08); }
.role summary { list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 20px; padding: 22px 26px; cursor: pointer; }
.role summary::-webkit-details-marker { display: none; }
.role-main { display: flex; flex-direction: column; gap: 6px; }
.role-team { font-size: 0.72rem; letter-spacing: 1.5px; text-transform: uppercase; font-weight: 700; color: #b45309; }
.role-title { font-size: 1.2rem; font-weight: 700; color: #0b2148; }
.role-facts { display: flex; flex-wrap: wrap; gap: 6px 18px; color: #6b7280; font-size: 0.86rem; }
.role-facts span { display: inline-flex; align-items: center; gap: 6px; }
.role-facts svg { width: 15px; height: 15px; color: #9ca3af; }
.role-toggle { display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; font-size: 0.86rem; font-weight: 600; color: #0b2148; border: 1px solid #e5e1d8; border-radius: 999px; padding: 8px 14px; }
.role-toggle svg { width: 16px; height: 16px; transition: transform .2s; }
.role[open] .role-toggle svg { transform: rotate(180deg); }
.role-body { padding: 0 26px 26px; border-top: 1px solid #f0ece5; }
.role-summary { color: #374151; font-size: 1rem; line-height: 1.7; margin: 20px 0 6px; }
.role-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; }
.role-cols h4 { color: #0b2148; font-size: 0.95rem; margin: 18px 0 10px; }
.role-cols ul { margin: 0 0 0 18px; color: #4b5563; font-size: 0.93rem; line-height: 1.65; }
.role-cols li { margin-bottom: 6px; }
.role-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 16px; margin-top: 24px; padding-top: 20px; border-top: 1px dashed #ece8e1; }
.role-actions span { color: #6b7280; font-size: 0.85rem; }
.role[hidden] { display: none; }
.cr-empty { text-align: center; color: #6b7280; padding: 28px 0; }

/* Teams */
.cr-teams { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; }
.cr-team { display: flex; flex-direction: column; border: 1px solid #ece8e1; border-radius: 16px; padding: 24px; background: #fff; }
.cr-team h3 { color: #0b2148; font-size: 1.08rem; margin: 0 0 8px; }
.cr-team p { color: #4b5563; font-size: 0.92rem; line-height: 1.6; margin: 0 0 14px; }
.cr-team-roles { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 16px; }
.cr-team-roles span { font-size: 0.78rem; color: #374151; background: #f6f4ef; border-radius: 6px; padding: 4px 8px; }
.cr-team-open { margin-top: auto; font-size: 0.82rem; font-weight: 700; color: #b45309; }

/* Process */
.cr-steps { list-style: none; display: grid; grid-template-columns: repeat(5, 1fr); gap: 18px; margin: 0; padding: 0; counter-reset: none; position: relative; }
.cr-steps li { position: relative; background: #fff; border-radius: 16px; padding: 24px 20px; border: 1px solid #ece8e1; }
.cr-step-n { display: inline-flex; width: 40px; height: 40px; border-radius: 50%; align-items: center; justify-content: center; background: #0b2148; color: #f5b754; font-weight: 700; font-size: 0.85rem; }
.cr-steps h3 { color: #0b2148; font-size: 1rem; margin: 14px 0 6px; }
.cr-steps p { color: #4b5563; font-size: 0.88rem; line-height: 1.6; margin: 0; }

/* Culture split */
.cr-split { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: center; }
.cr-split-media { margin: 0; }
.cr-split-media img { display: block; width: 100%; height: auto; border-radius: 18px; box-shadow: 0 18px 40px rgba(11, 33, 72, 0.14); }
.cr-split-media figcaption { font-size: 0.75rem; color: #8a8f98; margin-top: 8px; }
.cr-split-media figcaption a { color: inherit; }
.cr-values { list-style: none; margin: 20px 0 0; padding: 0; }
.cr-values li { display: flex; gap: 12px; padding: 10px 0; color: #4b5563; line-height: 1.6; font-size: 0.97rem; border-bottom: 1px solid #f0ece5; }
.cr-values li:last-child { border-bottom: 0; }
.cr-values strong, .cr-apply-points strong { color: #0b2148; }
.cr-values svg, .cr-apply-points svg { width: 20px; height: 20px; color: #d97706; flex-shrink: 0; margin-top: 3px; }
.cr-note { margin-top: 18px; color: #6b7280; font-size: 0.92rem; line-height: 1.65; }

/* Apply */
.cr-apply { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 56px; align-items: start; }
.cr-apply-intro p { color: #4b5563; line-height: 1.7; }
.cr-apply-points { list-style: none; margin: 20px 0; padding: 0; }
.cr-apply-points li { display: flex; gap: 10px; padding: 6px 0; color: #374151; font-size: 0.95rem; }
.cr-apply-points a, .cr-apply-alt a, .cr-faq a { color: #b45309; }
.cr-apply-alt { font-size: 0.9rem; }
.cr-form { background: #fff; border: 1px solid #ece8e1; border-radius: 20px; padding: 30px; box-shadow: 0 18px 40px rgba(11, 33, 72, 0.08); }
.cr-row { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.cr-form label { display: flex; flex-direction: column; gap: 6px; font-size: 0.86rem; font-weight: 600; color: #0b2148; margin-bottom: 16px; }
.cr-form em { color: #b45309; font-style: normal; }
.cr-form input[type=text], .cr-form input[type=email], .cr-form input[type=tel], .cr-form input[type=url], .cr-form select, .cr-form textarea {
  font: inherit; font-weight: 400; font-size: 0.95rem; color: #111827; background: #fbfaf8;
  border: 1px solid #e2ded5; border-radius: 10px; padding: 11px 13px; width: 100%; transition: border-color .2s, box-shadow .2s;
}
.cr-form textarea { resize: vertical; }
.cr-form input:focus, .cr-form select:focus, .cr-form textarea:focus { outline: none; border-color: #d97706; box-shadow: 0 0 0 3px rgba(217, 119, 6, 0.15); background: #fff; }
.cr-form .is-invalid { border-color: #dc2626 !important; }
.cr-hp { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.cr-form .cr-consent { flex-direction: row; align-items: flex-start; gap: 10px; font-weight: 400; color: #4b5563; line-height: 1.5; }
.cr-consent input { margin-top: 3px; width: 16px; height: 16px; accent-color: #0b2148; }
.cr-submit { width: 100%; justify-content: center; border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.cr-submit[disabled] { opacity: .7; cursor: wait; }
.cr-alert { border-radius: 10px; padding: 12px 14px; margin-bottom: 18px; font-size: 0.9rem; line-height: 1.5; background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }

/* FAQ + fraud */
.cr-faq-wrap { max-width: 820px; }
.cr-faq details { border: 1px solid #ece8e1; border-radius: 12px; padding: 16px 20px; margin-bottom: 10px; background: #fff; }
.cr-faq summary { cursor: pointer; font-weight: 600; color: #0b2148; }
.cr-faq p { color: #4b5563; line-height: 1.7; margin: 10px 0 0; }
.cr-fraud { padding: 0 0 70px; background: #fff; }
.cr-fraud-box { display: flex; gap: 14px; align-items: flex-start; max-width: 820px; margin: 0 auto; background: #fdf6ec; border: 1px solid #f3dfbd; border-radius: 14px; padding: 18px 22px; }
.cr-fraud-box svg { width: 26px; height: 26px; color: #b45309; flex-shrink: 0; }
.cr-fraud-box p { margin: 0; color: #4b5563; line-height: 1.6; font-size: 0.93rem; }
.cr-fraud-box strong { color: #0b2148; }

/* Thank-you page */
.cr-thanks { padding: 100px 0 110px; text-align: center; background: linear-gradient(180deg, #f8f7f4 0%, #ffffff 100%); }
.cr-thanks .container { max-width: 680px; }
.cr-thanks-ico { display: inline-flex; width: 64px; height: 64px; border-radius: 50%; align-items: center; justify-content: center; background: #0b2148; color: #f5b754; }
.cr-thanks-ico svg { width: 30px; height: 30px; }
.cr-thanks h1 { font-family: "Playfair Display", serif; color: #0b2148; font-size: 2.3rem; margin: 22px 0 14px; }
.cr-thanks p { color: #4b5563; line-height: 1.75; }
.cr-thanks .cr-hero-cta { justify-content: center; margin-top: 28px; }

@media (max-width: 1080px) {
  .cr-why { grid-template-columns: repeat(2, 1fr); }
  .cr-steps { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 900px) {
  .cr-hero-grid, .cr-split, .cr-apply { grid-template-columns: 1fr; gap: 36px; }
  .cr-hero-media img { height: 320px; }
  .cr-hero-badge { left: 16px; bottom: 16px; }
  .cr-teams { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 640px) {
  .cr-hero { padding: 40px 0 50px; }
  .cr-hero h1 { font-size: 2.1rem; }
  .cr-head h2, .cr-h2 { font-size: 1.65rem; }
  .cr-head--row { flex-direction: column; align-items: flex-start; }
  .cr-why, .cr-teams, .cr-steps, .role-cols, .cr-row { grid-template-columns: 1fr; }
  .cr-row { gap: 0; }
  .role summary { flex-direction: column; align-items: flex-start; padding: 18px; }
  .role-body { padding: 0 18px 20px; }
  .cr-form { padding: 22px 18px; }
  .cr-thanks h1 { font-size: 1.8rem; }
}

/* Role row actions */
.role-side { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.role-apply { padding: 9px 18px; font-size: 0.86rem; }

/* Resume dropzone */
.cr-file { margin-bottom: 16px; }
.cr-file-label { display: block; font-size: 0.86rem; font-weight: 600; color: #0b2148; margin-bottom: 6px; }
.cr-form .cr-drop {
  position: relative; flex-direction: row; align-items: center; gap: 14px; margin: 0; cursor: pointer;
  border: 2px dashed #d6cfc2; border-radius: 14px; background: #fbfaf8; padding: 18px; transition: border-color .2s, background-color .2s;
}
.cr-drop:hover, .cr-drop.is-drag { border-color: #d97706; background: #fdf6ec; }
.cr-drop.has-file { border-style: solid; border-color: #16a34a; background: #f0fdf4; }
.cr-drop.is-invalid { border-color: #dc2626; background: #fef2f2; }
.cr-drop input[type=file] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.cr-drop-ico { display: inline-flex; width: 46px; height: 46px; border-radius: 12px; align-items: center; justify-content: center; background: #fff; color: #b45309; border: 1px solid #ece8e1; flex-shrink: 0; }
.cr-drop.has-file .cr-drop-ico { color: #16a34a; }
.cr-drop-ico svg { width: 22px; height: 22px; }
.cr-drop-text { display: flex; flex-direction: column; gap: 3px; }
.cr-drop-text strong { font-size: 0.93rem; color: #0b2148; word-break: break-all; }
.cr-drop-text small { font-weight: 400; font-size: 0.8rem; color: #6b7280; }

/* Application popup */
.cr-apply-cta { display: flex; flex-wrap: wrap; gap: 12px; margin: 24px 0 8px; }
.js-modal .cr-apply { grid-template-columns: 1fr; max-width: 760px; text-align: left; }
.cr-modal {
  position: fixed; inset: 0; margin: auto; height: fit-content;
  width: min(760px, calc(100vw - 32px)); max-height: calc(100vh - 48px); padding: 0; border: 0; border-radius: 20px;
  box-shadow: 0 30px 80px rgba(7, 16, 36, 0.35); overflow: hidden; color: inherit;
}
.cr-modal[open] { display: flex; flex-direction: column; animation: crPop .22s ease-out; }
.cr-modal::backdrop { background: rgba(11, 33, 72, 0.55); backdrop-filter: blur(3px); }
@keyframes crPop { from { opacity: 0; transform: translateY(14px) scale(.98); } to { opacity: 1; transform: none; } }
.cr-modal-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; padding: 24px 28px 18px; background: linear-gradient(180deg, #f8f7f4, #fff); border-bottom: 1px solid #ece8e1; }
.cr-modal-head h2 { font-family: "Playfair Display", serif; color: #0b2148; font-size: 1.55rem; line-height: 1.25; margin: 6px 0 4px; }
.cr-modal-head p { margin: 0; color: #6b7280; font-size: 0.9rem; }
.cr-modal-close { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; border: 1px solid #e5e1d8; background: #fff; color: #0b2148; cursor: pointer; }
.cr-modal-close:hover { background: #0b2148; color: #f5b754; }
.cr-modal-close svg { width: 18px; height: 18px; }
.cr-modal-body { overflow-y: auto; padding: 22px 28px 26px; }
.cr-modal-body .cr-form { border: 0; box-shadow: none; padding: 0; border-radius: 0; }
html.cr-lock { overflow: hidden; }
@media (max-width: 640px) {
  .role-side { width: 100%; justify-content: space-between; }
  .cr-modal { width: 100vw; max-width: 100vw; max-height: 100vh; height: 100%; border-radius: 0; }
  .cr-modal-head { padding: 18px 18px 14px; }
  .cr-modal-head h2 { font-size: 1.3rem; }
  .cr-modal-body { padding: 18px; }
}