/* ============================================================================
   careers.css — styles for careers.html ONLY.
   Shared reset/tokens/fonts/navbar/footer live in default.css.
   Navy #16469c is the ONE accent (no gold). Plain HTML/CSS/JS.
   Sections: hero · culture+paths · jobs(filter+accordion) · general CTA
             · application modal (stepped form, declarations, done)
   ============================================================================ */

/* BOX MODEL — must come first.
   default.css declares `box-sizing: border-box` on `body` ONLY, and box-sizing
   is not inherited. Without this rule every input/textarea below is content-box,
   so `width:100%` renders as 100% PLUS .9rem padding each side PLUS a 1.5px
   border — each field ends up ~31px wider than its slot, overflowing the modal
   on the right and closing the gap between the Email/Phone pair.
   css/contactus.css hit exactly this and fixed it the same way. */
.careers_page, .careers_page *, .careers_page *::before, .careers_page *::after,
.cr_modal, .cr_modal *, .cr_modal *::before, .cr_modal *::after {
  box-sizing: border-box;
}

.careers_page { width: 100%; }

.cr_kicker { display:inline-block; font-size:.8rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:#16469c; }

/* buttons */
.cr_btn { display:inline-block; padding:.8rem 1.6rem; border-radius:8px; font:inherit; font-weight:600; font-size:.95rem; line-height:1; cursor:pointer; border:1.5px solid transparent; white-space:nowrap; transition:background .2s,transform .15s,border-color .2s,color .2s; }
.cr_btn--primary { background:#16469c; color:#fff; }
.cr_btn--primary:hover { background:#0f2b5c; transform:translateY(-1px); }
.cr_btn--ghost { background:transparent; color:#5b6472; border-color:#e7ebf1; }
.cr_btn--ghost:hover { border-color:#5b6472; color:#141821; }
.cr_btn:disabled { opacity:.5; cursor:default; transform:none; }
.cr_btn:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,70,156,.3); }
.cr_hidden { visibility:hidden; }

/* width helper */
.cr_head, .cr_culture_grid, .cr_jobs_head, .cr_filters, .cr_joblist, .cr_general_inner, .cr_noresult {
  width:82%; max-width:1080px; margin-left:auto; margin-right:auto;
}

/* HERO */
.cr_head { padding: calc(80px + clamp(2.5rem,6vw,5rem)) 0 clamp(2rem,4vw,3rem); }
.cr_head_hl { color:#16469c; }   /* highlighted word in the headline */
.cr_head h1 { font-size:clamp(2.4rem,5.5vw,4rem); font-weight:800; letter-spacing:-.03em; line-height:1.03; margin:0; color:#141821; }
.cr_head_sub { margin:1.5rem 0 0; font-size:clamp(1.05rem,1.6vw,1.25rem); color:#5b6472; max-width:60ch; line-height:1.65; }

/* CULTURE */
.cr_culture { padding: clamp(2rem,4vw,3rem) 0 clamp(3rem,6vw,4.25rem); }
.cr_culture_grid { display:grid; grid-template-columns:1fr; }
.cr_culture_copy .cr_kicker { margin-bottom:.75rem; }
.cr_culture_copy h2 { font-size:clamp(1.6rem,3.2vw,2.2rem); font-weight:800; letter-spacing:-.02em; margin:0 0 1.5rem; color:#141821; line-height:1.15; }
.cr_values { list-style:none; margin:0; padding:0; max-width:62ch; }
.cr_values li { position:relative; padding-left:1.6rem; margin-bottom:.85rem; color:#5b6472; line-height:1.55; }
.cr_values li::before { content:""; position:absolute; left:0; top:.5rem; width:8px; height:8px; border-radius:2px; background:#16469c; }
/* wide screens: heading on the left, values on the right, so the section uses the full width */
@media (min-width: 960px) {
  .cr_culture_copy { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); grid-template-rows:auto 1fr; column-gap:clamp(2.5rem,5vw,4.5rem); align-items:start; }
  .cr_culture_copy .cr_kicker { grid-column:1; justify-self:start; }
  .cr_culture_copy h2 { grid-column:1; margin-bottom:0; }
  .cr_culture_copy .cr_values { grid-column:2; grid-row:1 / span 2; }
}


/* JOBS */
.cr_jobs { padding: clamp(3rem,6vw,5rem) 0; background:#fafbfc; border-top:1px solid #e7ebf1; }
.cr_jobs_head { margin-bottom:clamp(1.5rem,3vw,2rem); }
.cr_jobs_head .cr_kicker { margin-bottom:.75rem; }
.cr_jobs_head h2 { font-size:clamp(1.8rem,4vw,2.6rem); font-weight:800; letter-spacing:-.02em; margin:0; color:#141821; }
.cr_jobs_head p { margin:.75rem 0 0; color:#5b6472; font-size:1.02rem; }

.cr_filters { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1.5rem; }
.cr_filter { border:1px solid #e7ebf1; background:#fff; color:#5b6472; padding:.55rem 1.15rem; border-radius:999px; font:inherit; font-size:.9rem; font-weight:600; cursor:pointer; transition:all .2s; }
.cr_filter.on { background:#16469c; border-color:#16469c; color:#fff; }
.cr_filter:hover:not(.on) { border-color:#16469c; color:#16469c; }

/* NOTE: `margin:0` here would override the margin-left/right:auto set by the
   width helper above, dropping the whole job list hard against the left edge
   while the heading and filter pills stayed centred. Zero only the vertical
   margins so the auto centring survives. */
.cr_joblist { list-style:none; margin-top:0; margin-bottom:0; padding:0; display:flex; flex-direction:column; gap:.6rem; }
.cr_job_h { margin:0; font:inherit; }   /* job title heading: wraps the button, adds no styling */
.cr_job { background:#fff; border:1px solid #e7ebf1; border-radius:14px; overflow:hidden; transition:border-color .2s; }
.cr_job.open { border-color:#c3d0e6; }
.cr_job_head { width:100%; display:flex; align-items:center; gap:1rem; padding:1.1rem 1.4rem; background:none; border:0; cursor:pointer; font:inherit; text-align:left; }
.cr_job_main { flex:1; display:flex; flex-direction:column; gap:.4rem; }
.cr_job_title { font-size:1.1rem; font-weight:700; color:#141821; }
.cr_job_meta { display:flex; gap:1rem; flex-wrap:wrap; align-items:center; }
.cr_job_loc { font-size:.85rem; color:#5b6472; }
.cr_job_loc .cr_ic { display:inline-block; width:.75em; height:1em; vertical-align:-.125em; overflow:visible; fill:currentColor; color:#9aa4b2; margin-right:.15rem; }
.cr_job_tag { font-size:.72rem; font-weight:700; letter-spacing:.03em; text-transform:uppercase; color:#16469c; background:#eef2fb; padding:.2rem .6rem; border-radius:999px; }
.cr_job_plus { flex:0 0 auto; width:28px; height:28px; display:grid; place-items:center; color:#9aa4b2; font-size:1.4rem; font-weight:300; transition:transform .25s,color .2s; }
.cr_job.open .cr_job_plus { transform:rotate(45deg); color:#16469c; }
.cr_job_body { max-height:0; overflow:hidden; transition:max-height .35s ease; }
/* A fixed max-height has to clear the tallest role at the narrowest width.
   The 7-responsibility role on a 360px phone runs past 1200px, which silently
   cut the Apply button off. 2400px clears it with room to spare; the value only
   drives the transition, it never adds real height. */
.cr_job.open .cr_job_body { max-height:2400px; }
.cr_job_inner { padding:0 1.4rem 1.4rem; }
.cr_job_summary { color:#3a4250; line-height:1.6; margin:0 0 1.25rem; }
.cr_job_cols { display:grid; grid-template-columns:1fr 1fr; gap:1.5rem 2.5rem; margin-bottom:1.5rem; }
.cr_job_cols h4 { font-size:.78rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:#9aa4b2; margin:0 0 .6rem; }
.cr_job_cols ul { margin:0; padding-left:1.1rem; }
.cr_job_cols li { color:#5b6472; line-height:1.55; margin-bottom:.35rem; font-size:.95rem; }
@media(max-width:640px){ .cr_job_cols{ grid-template-columns:1fr; gap:1.25rem; } }
.cr_noresult { text-align:center; color:#9aa4b2; padding:2rem 0; }

/* GENERAL CTA */
.cr_general { background:#16469c; }
.cr_general_inner { padding:clamp(2.5rem,5vw,3.5rem) 0; display:flex; align-items:center; justify-content:space-between; gap:2rem; flex-wrap:wrap; }
.cr_general h2 { color:#fff; font-size:clamp(1.4rem,3vw,1.9rem); font-weight:700; margin:0; letter-spacing:-.01em; }
.cr_general p { color:rgba(255,255,255,.82); margin:.4rem 0 0; max-width:48ch; }
.cr_general .cr_btn--primary { background:#fff; color:#16469c; }
.cr_general .cr_btn--primary:hover { background:#eef2fb; }

/* ============================================================================
   APPLICATION MODAL + STEPPED FORM
   ============================================================================ */
.cr_modal { position:fixed; inset:0; z-index:2000; display:none; }
.cr_modal.open { display:block; }
.cr_modal_backdrop { position:absolute; inset:0; background:rgba(13,18,32,.55); backdrop-filter:blur(2px); }
.cr_modal_card { position:relative; z-index:1; width:640px; max-width:calc(100% - 2rem); max-height:calc(100vh - 3rem); max-height:calc(100dvh - 3rem); overflow-y:auto; margin:1.5rem auto; background:#fff; border-radius:18px; box-shadow:0 24px 70px rgba(10,40,90,.28); animation:crpop .25s ease; }
@keyframes crpop { from{ opacity:0; transform:translateY(12px); } to{ opacity:1; transform:none; } }
.cr_modal_close { position:absolute; top:1rem; right:1.1rem; width:34px; height:34px; border:0; background:#f1f3f7; border-radius:50%; font-size:1.4rem; line-height:1; color:#5b6472; cursor:pointer; z-index:2; transition:background .2s; }
.cr_modal_close:hover { background:#e4e8ef; }

.cr_apply_head { padding:1.75rem 2rem 1.25rem; }
.cr_apply_role_label { font-size:.8rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:#16469c; }
.cr_apply_head h3 { font-size:1.35rem; font-weight:800; letter-spacing:-.02em; margin:.35rem 2rem 0 0; color:#141821; }
.cr_apply_stepcount { margin-top:.25rem; font-size:.85rem; color:#9aa4b2; }

.cr_progress { display:flex; gap:.5rem; padding:0 2rem 1.5rem; }
.cr_seg { flex:1; height:5px; border-radius:3px; background:#e7ebf1; overflow:hidden; }
.cr_seg i { display:block; height:100%; width:0; background:#16469c; transition:width .35s ease; }
.cr_seg.done i, .cr_seg.current i { width:100%; }

/* Hidden from visitors and from browser autofill */
.cr_hp { display: none !important; }

.cr_apply_body { padding:.25rem 2rem 0; min-height:260px; }
.cr_step { display:none; animation:crfade .3s ease; }
.cr_step.on { display:block; }
@keyframes crfade { from{ opacity:0; transform:translateY(6px);} to{ opacity:1; transform:none;} }
.cr_step h4 { font-size:1.1rem; font-weight:700; margin:0 0 .35rem; }
.cr_step_sub { color:#5b6472; font-size:.92rem; margin-bottom:1.35rem; }

.cr_field { margin-bottom:1.05rem; }
.cr_field label { display:block; font-size:.85rem; font-weight:600; margin-bottom:.4rem; }
.cr_r { color:#16469c; }
.cr_hint { font-weight:400; color:#9aa4b2; font-size:.8rem; }
.cr_field input, .cr_field select, .cr_field textarea { width:100%; border:1.5px solid #e7ebf1; border-radius:10px; padding:.8rem .9rem; font:inherit; font-size:.95rem; background:#fff; color:#141821; transition:border-color .2s,box-shadow .2s; }
.cr_field input:focus, .cr_field select:focus, .cr_field textarea:focus { outline:none; border-color:#16469c; box-shadow:0 0 0 3px rgba(22,70,156,.12); }
.cr_field textarea { resize:vertical; min-height:84px; }
.cr_field.invalid input, .cr_field.invalid select, .cr_field.invalid textarea { border-color:#b4232a; box-shadow:0 0 0 3px rgba(180,35,42,.1); }
.cr_err { display:none; color:#b4232a; font-size:.78rem; margin-top:.35rem; }
.cr_field.invalid .cr_err { display:block; }
.cr_row2 { display:grid; grid-template-columns:1fr 1fr; gap:1rem; }
.cr_row2[hidden] { display:none; }   /* e.g. employer and designation, hidden for freshers */
@media(max-width:480px){ .cr_row2{ grid-template-columns:1fr; } }

/* CV attachment.
   The native file input is visually hidden (not display:none, so it stays
   keyboard focusable and screen readers still announce it); the <label>
   beside it is the visible control. */
.cr_file_input { position:absolute; width:1px; height:1px; opacity:0; overflow:hidden; }
/* NOTE: `.cr_field label` above is (0,1,1) and would beat a bare `.cr_file_drop`
   (0,1,0), forcing display:block and breaking this flex row. Qualify with the
   element so this rule wins. */
.cr_field label.cr_file_drop {
  display:flex; align-items:center; gap:.75rem; width:100%;
  font-weight:400; margin-bottom:0;
  border:1.5px dashed #c3d0e6; border-radius:10px; padding:.8rem .9rem;
  background:#fafbfc; cursor:pointer; font-size:.95rem; color:#5b6472;
  transition:border-color .2s, background .2s, color .2s;
}
.cr_field label.cr_file_drop:hover { border-color:#16469c; background:#f4f7fd; color:#141821; }
.cr_file_input:focus-visible + label.cr_file_drop { outline:none; border-color:#16469c; box-shadow:0 0 0 3px rgba(22,70,156,.12); }
.cr_file_icon { flex:0 0 auto; display:grid; place-items:center; color:#9aa4b2; }
.cr_field label.cr_file_drop:hover .cr_file_icon { color:#16469c; }
.cr_file_txt { flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.cr_file_action { flex:0 0 auto; font-weight:600; font-size:.85rem; color:#16469c; }

/* once a file is chosen the control goes solid, to read as "done" not "to do" */
.cr_field.has_file label.cr_file_drop { border-style:solid; border-color:#16469c; background:#eef2fb; color:#141821; }
.cr_field.has_file .cr_file_icon { color:#16469c; }
.cr_field.has_file .cr_file_action { display:none; }
.cr_field.invalid label.cr_file_drop { border-style:solid; border-color:#b4232a; background:#fdf5f5; }

.cr_file_clear {
  margin-top:.5rem; border:0; background:none; padding:0; font:inherit; font-size:.8rem;
  color:#5b6472; text-decoration:underline; cursor:pointer;
}
.cr_file_clear:hover { color:#b4232a; }

/* this field's error text is set from JS, so it must show whenever it has content */
#crCvErr:not(:empty) { display:block; }

/* review */
/* The review used to be a ruled table: a hairline under every row. On a form
   that reads as a spreadsheet, not a summary. It is now one soft panel with the
   rows separated by space instead of lines. */
.cr_review { background:#fafbfc; border:1px solid #eef1f5; border-radius:12px; padding:.5rem 1.15rem; }
.cr_review_item { display:flex; justify-content:space-between; align-items:baseline; gap:1.5rem; padding:.55rem 0; }
.cr_review_item .k { color:#8a93a3; font-size:.82rem; flex:0 0 40%; letter-spacing:.01em; }
.cr_review_item .v { font-weight:600; font-size:.92rem; color:#141821; text-align:right; word-break:break-word; }
.cr_review_item .v.empty { color:#9aa4b2; font-weight:400; font-style:italic; }
/* This was an <a> with no href, which meant keyboard users could not reach it.
   It is a <button> now, so it has to be stripped of the browser's default button
   chrome or it renders as a grey box in the middle of the summary. */
.cr_review_edit { margin-top:.9rem; font-size:.85rem; }
.cr_review_edit button {
  border:0; background:none; padding:0; margin:0; font:inherit; font-size:.85rem;
  font-weight:600; color:#16469c; cursor:pointer; text-decoration:none;
}
.cr_review_edit button:hover { text-decoration:underline; }
.cr_review_edit button:focus-visible { outline:none; box-shadow:0 0 0 3px rgba(22,70,156,.25); border-radius:4px; }

/* declarations */
.cr_declares { margin-top:1.5rem; display:flex; flex-direction:column; gap:.75rem; padding-top:1.25rem; border-top:1px solid #e7ebf1; }
.cr_check { display:flex; gap:.65rem; align-items:flex-start; cursor:pointer; font-size:.88rem; color:#3a4250; line-height:1.5; }
.cr_check input { flex:0 0 auto; width:18px; height:18px; margin-top:.1rem; accent-color:#16469c; cursor:pointer; }
.cr_check em { color:#9aa4b2; font-style:normal; }
.cr_declare_err { color:#b4232a; font-size:.8rem; margin-top:.6rem; }

.cf-turnstile { margin-top:1rem; }

.cr_apply_foot { display:flex; align-items:center; justify-content:space-between; gap:1rem; padding:1.5rem 2rem 2rem; margin-top:.5rem; }

/* done */
.cr_done { display:none; text-align:center; padding:2.5rem 2rem 3rem; }
.cr_done.on { display:block; }
.cr_done_tick { width:60px; height:60px; border-radius:50%; background:#e8f6ee; color:#1f9d57; display:grid; place-items:center; margin:0 auto 1.25rem; font-size:1.9rem; }
.cr_done h3 { font-size:1.4rem; font-weight:800; letter-spacing:-.02em; margin:0; }
.cr_done p { color:#5b6472; margin:.75rem auto 0; max-width:36ch; line-height:1.6; }
.cr_refbox { margin:1.5rem auto 0; display:inline-block; background:#fafbfc; border:1px solid #e7ebf1; border-radius:12px; padding:.85rem 1.5rem; font-size:.82rem; color:#9aa4b2; line-height:1.5; }
.cr_refbox strong { font-size:1.1rem; color:#16469c; letter-spacing:.04em; }
.cr_done_note { font-size:.78rem; color:#9aa4b2; }

/* Modal breathing room on small phones: 2rem of side padding on a 328px card
   leaves the fields cramped. Pull it in, and let the card use the full height. */
@media (max-width:480px){
  .cr_modal_card { margin:.75rem auto; max-height:calc(100dvh - 1.5rem); border-radius:14px; }
  .cr_apply_head { padding:1.5rem 1.25rem 1rem; }
  .cr_progress   { padding:0 1.25rem 1.25rem; }
  .cr_apply_body { padding:.25rem 1.25rem 0; }
  .cr_apply_foot { padding:1.25rem 1.25rem 1.5rem; }
  .cr_done       { padding:2rem 1.25rem 2.5rem; }
  .cr_apply_head h3 { font-size:1.15rem; }
  /* full-width buttons are easier to hit one-handed */
  .cr_apply_foot .cr_btn { flex:1; text-align:center; padding-left:1rem; padding-right:1rem; }
  .cr_apply_foot .cr_btn.cr_hidden { display:none; }
  .cr_review { padding:.4rem .9rem; }
  .cr_review_item { flex-direction:column; gap:.15rem; }
  .cr_review_item .k { flex:none; }
  .cr_review_item .v { text-align:left; }
}

/* RESPONSIVE width */
@media (max-width:900px) {
  .cr_head, .cr_culture_grid, .cr_jobs_head, .cr_filters, .cr_joblist, .cr_general_inner, .cr_noresult { width:88%; }
}
@media (prefers-reduced-motion: reduce) {
  .cr_btn, .cr_job_body, .cr_job_plus, .cr_seg i, .cr_step, .cr_modal_card { transition:none; animation:none; }
}

/* filtering hides rather than rebuilds, so the [hidden] attribute must win
   over the list's flex display */
.cr_joblist .cr_job[hidden] { display:none; }