/* ===================== CAREERS PAGE ===================== */
@keyframes floaty{0%,100%{transform:translateY(0)}50%{transform:translateY(-12px)}}

/* ----- hero ----- */
.cahero{position:relative;padding:calc(var(--h-head) + 44px) 0 64px;background:#fff;overflow:hidden}
.cahero .hero-mesh .h1b{top:-220px;right:-40px}.cahero .hero-mesh .h2b{bottom:-180px;left:-70px}
.cah-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.05fr .95fr;gap:44px;align-items:center}
.cah-copy .eyebrow{margin-bottom:14px}
.cah-copy h1{font-size:clamp(2.05rem,4.2vw,3.15rem);line-height:1.08;letter-spacing:-.02em;margin-bottom:16px}
.cah-copy .sub{color:var(--slate);font-size:1.06rem;max-width:500px;margin-bottom:24px}
.cah-cta{display:flex;gap:13px;flex-wrap:wrap}
.cah-visual{position:relative;display:flex;justify-content:center}
.cah-visual::before{content:"";position:absolute;width:120%;height:120%;top:-10%;left:-10%;background:radial-gradient(circle at 55% 45%,var(--blue-12),transparent 62%);z-index:0}
.cah-frame{position:relative;z-index:2;width:100%;max-width:500px;animation:floaty 6.5s ease-in-out infinite}
.cah-frame .img-frame{aspect-ratio:16/11;box-shadow:0 30px 70px rgba(24,104,251,.22)}
.ca-chip{position:absolute;z-index:4;background:#fff;border:1px solid var(--blue-12);border-radius:13px;padding:9px 13px;box-shadow:var(--shadow-blue);display:flex;align-items:center;gap:9px;animation:floaty 5s ease-in-out infinite}
.ca-chip .bi{width:30px;height:30px;border-radius:999px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;flex:0 0 auto}
.ca-chip .bi svg{width:17px;height:17px}
.ca-chip b{font-family:var(--font-head);font-size:.95rem;display:block;line-height:1}
.ca-chip span{font-size:.68rem;color:var(--slate)}
.ca-chip.c1{top:6%;left:-4%}.ca-chip.c2{bottom:8%;right:-3%;animation-delay:1.2s}

/* ----- why choose (culture) ----- */
.ca-why{display:grid;grid-template-columns:repeat(4,1fr);gap:18px}
.ca-wcard{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);overflow:hidden;transition:.28s;display:flex;flex-direction:column}
.ca-wcard:hover{transform:translateY(-5px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.ca-wcard .cimg{aspect-ratio:16/10;border-radius:0;border:none;border-bottom:1px solid var(--line);box-shadow:none}
.ca-wcard .cb{padding:20px}
.ca-wcard h4{font-size:1.02rem;margin-bottom:7px}
.ca-wcard p{font-size:.85rem;color:var(--slate)}

/* ----- open positions ----- */
.cajobs{background:var(--bg-tint)}
.ca-tools{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-bottom:22px}
.ca-filter{display:flex;gap:8px;flex-wrap:wrap}
.ca-fchip{border:1px solid var(--line);background:#fff;color:var(--slate);font-weight:700;font-size:.8rem;border-radius:999px;padding:8px 16px;cursor:pointer;transition:.22s;font-family:var(--font-body);border-style:solid;}
.ca-fchip:hover{border-color:var(--blue-25);color:var(--blue)}
.ca-fchip.on{background:var(--blue);border-color:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.ca-search{margin-left:auto;position:relative;flex:0 0 auto}
.ca-search svg{position:absolute;left:13px;top:50%;transform:translateY(-50%);width:16px;height:16px;color:var(--slate-light)}
.ca-search input{border:1px solid var(--line);border-radius:999px;padding:10px 16px 10px 38px;font-size:.86rem;font-family:var(--font-body);color:var(--ink);background:#fff;outline:none;width:240px;transition:.22s}
.ca-search input:focus{border-color:var(--blue);box-shadow:0 0 0 3px var(--blue-12)}
.ca-jgrid{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.ca-job{background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:24px;transition:.28s;display:flex;flex-direction:column}
.ca-job:hover{transform:translateY(-4px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.ca-job.hide{display:none}
.ca-job .jt{display:flex;align-items:flex-start;gap:12px;margin-bottom:10px}
.ca-job .jt h4{font-size:1.08rem;flex:1}
.ca-job .dept{flex:0 0 auto;font-size:.68rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--blue);background:var(--blue-08);border-radius:999px;padding:5px 12px}
.ca-job .meta{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:12px}
.ca-job .meta span{display:inline-flex;align-items:center;gap:6px;font-size:.78rem;color:var(--slate);font-weight:600}
.ca-job .meta svg{width:14px;height:14px;color:var(--blue)}
.ca-job p{font-size:.87rem;color:var(--slate);margin-bottom:16px;flex:1}
.ca-job .ja{display:flex;align-items:center;gap:14px;margin-top:auto}

/* Apply for this Job Card Button Sizing */
.ca-job .ja .btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: auto;
  padding: 10px 22px !important;
  font-size: 0.88rem !important;
  font-weight: 700 !important;
  border-radius: 8px !important;
  background: #1868fb !important;
  color: #fff !important;
  white-space: nowrap;
}
.ca-job .ja .btn:hover {
  background: #0d4fc7 !important;
}

.ca-empty{display:none;text-align:center;padding:44px 20px;color:var(--slate)}
.ca-empty.show{display:block}
.ca-empty .ei{width:60px;height:60px;border-radius:50%;background:var(--blue-08);color:var(--blue);display:grid;place-items:center;margin:0 auto 14px}
.ca-empty .ei svg{width:28px;height:28px}

/* ----- perks ----- */
.ca-perks{display:grid;grid-template-columns:.9fr 1.1fr;gap:50px;align-items:center}
.ca-perks .img-frame{aspect-ratio:16/12;animation:floaty 7s ease-in-out infinite;box-shadow:0 24px 58px rgba(24,104,251,.16)}
.ca-pgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.ca-perk{display:flex;gap:13px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:14px;padding:16px;transition:.25s}
.ca-perk:hover{transform:translateY(-3px);box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.ca-perk .ic{width:42px;height:42px;flex:0 0 auto;border-radius:11px;background:var(--blue-08);color:var(--blue);display:grid;place-items:center}
.ca-perk .ic svg{width:21px;height:21px}
.ca-perk b{font-size:.92rem}

/* ----- trailblazers (team voices) ----- */
.catz{background:var(--bg-tint)}
.tz-rail{display:flex;gap:18px;overflow-x:auto;scroll-snap-type:x mandatory;padding:6px 4px 18px;-ms-overflow-style:none;scrollbar-width:none}
.tz-rail::-webkit-scrollbar{display:none}
.tz-card{flex:0 0 min(420px,86%);scroll-snap-align:start;background:#fff;border:1px solid var(--line);border-radius:var(--r-card);padding:26px;transition:.25s}
.tz-card:hover{box-shadow:var(--shadow-blue);border-color:var(--blue-18)}
.tz-top{display:flex;gap:14px;align-items:center;margin-bottom:14px}
.tz-av{width:60px;height:60px;flex:0 0 auto;border-radius:50%;box-shadow:none}
.tz-av .ph-note{display:none}
.tz-av .ph-art svg{width:24px;height:24px}
.tz-top b{display:block;font-family:var(--font-head);font-size:1rem;line-height:1.2}
.tz-top span{font-size:.78rem;color:var(--blue);font-weight:700}
.tz-card p{font-size:.88rem;color:var(--slate)}
.tz-nav{display:flex;gap:10px;justify-content:center;margin-top:6px}
.tz-arrow{width:42px;height:42px;border-radius:50%;border:1px solid var(--blue-12);background:#fff;color:var(--blue);display:grid;place-items:center;cursor:pointer;box-shadow:var(--shadow-soft);transition:.25s}
.tz-arrow:hover{background:var(--blue);color:#fff;box-shadow:var(--shadow-blue)}
.tz-arrow svg{width:18px;height:18px}

/* ----- life at (photo grid) ----- */
.ca-life{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:150px;gap:14px}
.ca-life .lf{box-shadow:none}
.ca-life .lf .ph-note{font-size:.55rem}
.ca-life .lf.tall{grid-row:span 2}
.ca-life .lf.wide{grid-column:span 2}

/* ----- join CTA ----- */
.ca-join{background:linear-gradient(135deg,#f4f8ff,#fff);border:1px solid var(--blue-12);border-radius:24px;box-shadow:var(--shadow-blue);padding:46px;display:grid;grid-template-columns:1.1fr .9fr;gap:36px;align-items:center;overflow:hidden;position:relative}
.ca-join h2{font-size:clamp(1.6rem,3.2vw,2.4rem);margin-bottom:12px}
.ca-join p{color:var(--slate);font-size:1rem;margin-bottom:22px}
.ca-join .img-frame{aspect-ratio:16/11;animation:floaty 7s ease-in-out infinite}

/* ----- responsive ----- */
@media(max-width:1024px){
  .cah-grid{grid-template-columns:1fr;gap:32px;text-align:center}
  .cah-copy .sub{margin-left:auto;margin-right:auto}
  .cah-cta{justify-content:center}
  .ca-chip { transform: scale(0.9); }
  .ca-chip.c1{left:10px; top:-10px}
  .ca-chip.c2{right:10px; bottom:-10px}
  .ca-why{grid-template-columns:repeat(2,1fr)}
  .ca-jgrid{grid-template-columns:1fr}
  .ca-search{margin-left:0;width:100%}
  .ca-search input{width:100%}
  .ca-perks{grid-template-columns:1fr;gap:28px}
  .ca-life{grid-template-columns:1fr !important;grid-auto-rows:auto !important;gap:12px}
  .ca-life .lf { aspect-ratio: 16/9 !important; }
  .ca-life .lf.tall, .ca-life .lf.wide{grid-row:span 1 !important;grid-column:span 1 !important}
  .ca-wcard .cimg {
    aspect-ratio: 16/10 !important;
    padding: 0;
  }
  .ca-perks .img-frame {
    aspect-ratio: 16/12 !important;
    padding: 0;
  }
  .cah-frame .img-frame, .ca-join .img-frame {
    aspect-ratio: 16/11 !important;
    padding: 0;
    width: 100%;
    max-width: 400px;
    margin: 0 auto;
  }
  .ca-join{grid-template-columns:1fr;padding:30px 22px}

  .ca-job .ja {
    width: 100% !important;
  }
  .ca-job .ja .btn {
    width: 100% !important;
    display: flex !important;
    padding: 12px 20px !important;
    font-size: 0.94rem !important;
  }
}
@media(max-width:640px){
  .ca-why{grid-template-columns:1fr !important;gap:14px}
  .ca-pgrid{grid-template-columns:1fr !important;gap:12px}
  .ca-jgrid{grid-template-columns:1fr !important;gap:14px}
  .ca-perks{grid-template-columns:1fr !important;gap:20px}
  .ca-join{grid-template-columns:1fr !important;padding:24px 16px !important;text-align:center}
  .ca-tools{flex-direction:column;align-items:stretch;width:100%;gap:12px}
  .ca-filter{justify-content:center}
  .ca-search{width:100%;margin-left:0}
  .ca-search input{width:100%}
  .cah-cta{display:flex;flex-direction:column;align-items:center;width:100%;gap:10px}
  .cah-cta .btn{width:100%;max-width:320px;justify-content:center}
}

/* ===================== JOB DETAILS & APPLICATION PAGE ===================== */
.jd-header {
  background: var(--bg-tint); /* Set light blue tint from the main page */
  padding: calc(var(--h-head) + 48px) 24px 48px;
  text-align: center;
  border-bottom: 1.5px solid var(--line);
}
.jd-header h1 {
  font-size: clamp(2rem, 3.6vw, 2.7rem);
  color: var(--navy); /* Set dark navy color from page headings */
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-weight: 800;
  letter-spacing: -0.02em;
}
.jd-meta {
  display: flex;
  justify-content: center;
  gap: 16px;
  font-size: 0.88rem;
  color: var(--slate);
  font-weight: 600;
  flex-wrap: wrap;
}
.jd-meta span + span::before {
  content: "|";
  margin-right: 16px;
  color: var(--line);
}

/* Back Link styles */
.jd-back-btn-wrap {
  text-align: left;
  max-width: 900px;
  margin: 0 auto 16px;
}
.jd-back-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
  text-decoration: none;
  transition: color 0.2s;
}
.jd-back-btn:hover {
  color: var(--blue-dark);
}

/* Tabs */
.jd-tabs-bar {
  display: flex;
  justify-content: center;
  gap: 14px;
  margin: 36px auto;
  max-width: 500px;
  border-bottom: 1.5px solid var(--line);
}
.jd-tab-btn {
  background: none;
  border: none;
  padding: 12px 20px;
  font-family: var(--font-body);
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  border-radius: 8px 8px 0 0;
  transition: all 0.2s;
  border: 1.5px solid transparent;
  border-bottom: none;
  margin-bottom: -1.5px;
}
.jd-tab-btn:hover {
  color: var(--blue);
}
.jd-tab-btn.active {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: var(--blue) !important;
  box-shadow: 0 -4px 10px rgba(24, 104, 251, 0.08);
}

/* Content Lists */
.jd-content-wrap {
  max-width: 900px;
  margin: 0 auto;
  padding: 0 24px 64px;
}
.jd-section {
  margin-bottom: 38px;
}
.jd-section h3 {
  font-size: 1.25rem;
  color: #2b0b46;
  margin-bottom: 16px;
  font-family: var(--font-head);
  font-weight: 800;
}
.jd-section ul {
  padding-left: 18px;
  list-style-type: disc;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.jd-section li {
  font-size: 0.94rem;
  color: var(--slate);
  line-height: 1.6;
}
.jd-footer-text {
  font-size: 0.88rem;
  color: var(--slate-light);
  margin-top: 48px;
  border-top: 1px solid var(--line);
  padding-top: 24px;
  margin-bottom: 32px;
}

/* Form Styles */
.jd-form-card {
  max-width: 760px;
  margin: 0 auto;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  padding: 32px;
  box-shadow: var(--shadow-soft);
  min-height: 580px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.jd-form-sect {
  margin-bottom: 34px;
  position: relative;
}
.jd-form-sect-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  padding-bottom: 12px;
  margin-bottom: 22px;
}
.jd-form-sect-hdr h4 {
  font-size: 1.15rem;
  color: var(--ink);
}
.jd-clear-btn {
  background: none;
  border: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--slate);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.jd-clear-btn:hover {
  color: var(--fail);
}
.jd-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
  margin-bottom: 18px;
}
.jd-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 18px;
}
.jd-field.full {
  margin-bottom: 18px;
}
.jd-field label {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--slate);
}
.jd-field label .req {
  color: var(--fail);
}
.jd-field input {
  padding: 12px 16px;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  font-family: var(--font-body);
  font-size: 0.94rem;
  outline: none;
  background: var(--bg-tint);
  transition: all 0.22s;
  color: var(--ink);
}
.jd-field input:focus {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--blue-12);
}
.jd-field.err input {
  border-color: var(--fail) !important;
  box-shadow: 0 0 0 3px var(--fail-bg) !important;
}

/* Phone input field helper */
.jd-phone-wrap {
  display: flex;
  border: 1px solid var(--line);
  border-radius: var(--r-input);
  background: var(--bg-tint);
  overflow: hidden;
  transition: all 0.22s;
}
.jd-phone-wrap:focus-within {
  border-color: var(--blue);
  background: #fff;
  box-shadow: 0 0 0 3px var(--blue-12);
}
.jd-phone-wrap.err {
  border-color: var(--fail) !important;
  box-shadow: 0 0 0 3px var(--fail-bg) !important;
}
.jd-phone-prefix {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 0 12px;
  font-size: 0.88rem;
  font-weight: 600;
  border-right: 1px solid var(--line);
  color: var(--slate);
  background: #f1f5f9;
}
.jd-phone-prefix img {
  width: 18px;
  height: 12px;
  border-radius: 2px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.1);
}
.jd-phone-wrap input {
  flex: 1;
  border: none !important;
  background: transparent !important;
  box-shadow: none !important;
}

/* Dropzone */
.jd-dropzone {
  border: 2px dashed var(--blue-25);
  border-radius: 12px;
  padding: 36px 20px;
  text-align: center;
  background: #fafcff;
  cursor: pointer;
  transition: all 0.2s;
}
.jd-dropzone:hover {
  border-color: var(--blue);
  background: #f5f9ff;
}
.jd-dropzone.active {
  border-color: var(--ok);
  background: var(--ok-bg);
}
.jd-dropzone.err {
  border-color: var(--fail);
  background: var(--fail-bg);
}
.jd-dropzone p {
  font-size: 0.9rem;
  color: var(--slate);
  margin-bottom: 6px;
}
.jd-dropzone span {
  font-size: 0.76rem;
  color: var(--slate-light);
}

/* Fake Captcha */
.fake-captcha {
  border: 1px solid #d3d3d3;
  background: #f9f9f9;
  border-radius: 3px;
  padding: 12px 14px;
  width: 300px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 24px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}
.fake-captcha.err {
  border-color: var(--fail);
  box-shadow: 0 0 0 1px var(--fail);
}
.fc-left {
  display: flex;
  align-items: center;
  gap: 12px;
}
.fc-left input {
  width: 24px;
  height: 24px;
  cursor: pointer;
  accent-color: var(--blue);
}
.fc-left label {
  font-size: 0.88rem;
  font-weight: 500;
  color: #333;
  cursor: pointer;
}
.fc-right {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
}
.fc-right svg {
  width: 28px;
  height: 28px;
  color: #1a73e8;
}
.fc-right span {
  font-size: 0.52rem;
  color: var(--slate-light);
}

/* Terms & Consent */
.jd-consent {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  margin-bottom: 26px;
}
.jd-consent input {
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: #6c4e97;
  flex: 0 0 auto;
}
.jd-consent span {
  font-size: 0.78rem;
  color: var(--slate);
  line-height: 1.5;
}
.jd-consent a {
  color: var(--blue);
  font-weight: 600;
}
.jd-consent.err span {
  color: var(--fail);
}

/* Submit Button Color exactly matching the second image */
.jd-apply-submit {
  width: 100%;
  padding: 14px 20px;
  background: var(--blue) !important;
  color: #fff !important;
  font-weight: 700 !important;
  font-size: 1rem;
  border-radius: var(--r-btn);
  border: none;
  cursor: pointer;
  transition: all 0.2s;
  text-align: center;
  box-shadow: 0 4px 14px rgba(24, 104, 251, 0.28);
}
.jd-apply-submit:hover {
  background: var(--blue-dark) !important;
  box-shadow: 0 8px 20px rgba(24, 104, 251, 0.38);
}

/* Simulated Loading state */
.jd-loading-spinner-wrap {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
  gap: 16px;
}
.jd-loading-spinner {
  width: 44px;
  height: 44px;
  border: 4px solid var(--blue-12);
  border-top-color: var(--blue);
  border-radius: 50%;
  animation: spinLoader 0.8s linear infinite;
}
@keyframes spinLoader {
  to { transform: rotate(360deg); }
}

/* Success Card & Modal styling */
.jd-success-card {
  text-align: center;
  padding: 48px 24px;
}
.jd-success-card .tick {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: var(--ok-bg);
  color: var(--ok);
  display: grid;
  place-items: center;
  margin: 0 auto 20px;
}
.jd-success-card .tick svg {
  width: 32px;
  height: 32px;
}
.jd-success-card h3 {
  font-size: 1.45rem;
  color: var(--ink);
  margin-bottom: 12px;
}
.jd-success-card p {
  color: var(--slate);
  font-size: 0.96rem;
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.6;
}

@media(max-width:760px) {
  .jd-row {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .jd-form-card {
    padding: 22px 18px;
  }
}