/* ============================================================
   Wuthqa — Career page styles (dark, gold accents)
   Simple hero · "Begin Your Career" (job list + Reach Us card) ·
   "If You Have Any Doubts Contact Us" (photo + form).
   Builds on tokens, chrome, and shared inner-page primitives.
   ============================================================ */

/* (Simple centered hero rules now live in inner.css — shared.) */
/* Even overlay so the centered hero text reads over the office photo */
.wq-phero2.is-center.has-photo .wq-phero2-photo::after {
  background: linear-gradient(180deg, rgba(13, 13, 13, .82) 0%, rgba(13, 13, 13, .6) 45%, rgba(13, 13, 13, .82) 100%); }

/* ---- "Begin Your Career With Us" ------------------------------- */
.wq-begin { display: grid; grid-template-columns: 1.55fr 1fr; gap: 56px; align-items: start; }
.wq-begin-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: #fff;
  font-size: clamp(28px, 3.4vw, 42px); line-height: 1.12; letter-spacing: -.01em; margin: 0 0 18px; }
.wq-begin-intro { color: rgba(255, 255, 255, .68); font-size: 15.5px; line-height: 1.85; margin: 0 0 30px; max-width: 60ch; }

/* Job list — clean rows; the selected/featured row turns gold */
.wq-cl { display: flex; flex-direction: column; }
.wq-cl-item { display: flex; align-items: center; gap: 18px; padding: 20px 4px; cursor: pointer;
  border-top: 1px solid rgba(255, 255, 255, .1); transition: background .3s var(--ease), padding .3s var(--ease); }
.wq-cl-item:last-child { border-bottom: 1px solid rgba(255, 255, 255, .1); }
.wq-cl-info { flex: 1; min-width: 0; }
.wq-cl-title { color: #fff; font-family: var(--font-en); font-weight: 600; font-size: 17px; }
.wq-cl-meta { color: rgba(255, 255, 255, .5); font-size: 12.5px; margin-top: 5px; }
.wq-cl-arrow { flex-shrink: 0; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .25);
  background: transparent; color: #fff; display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.wq-cl-arrow:hover { background: #fff; color: var(--teal-900); border-color: #fff; }
/* featured/active — gold rounded card */
.wq-cl-item.is-active { background: var(--gold); border-color: transparent; border-radius: var(--r-lg);
  padding: 22px 24px; margin: 8px 0; }
.wq-cl-item.is-active + .wq-cl-item { border-top-color: transparent; }
.wq-cl-item.is-active .wq-cl-title { color: var(--teal-900); }
.wq-cl-item.is-active .wq-cl-meta { color: rgba(13, 13, 13, .72); }
.wq-cl-item.is-active .wq-cl-arrow { background: rgba(13, 13, 13, .14); border-color: transparent; color: var(--teal-900); }
.wq-cl-item.is-active .wq-cl-arrow:hover { background: var(--teal-900); color: var(--gold); }

/* ---- Job modal (opens from an opening) ------------------------- */
.wq-jm-overlay { position: fixed; inset: 0; z-index: 1000; background: rgba(0, 0, 0, .72);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center; padding: 24px; animation: wq-jm-fade .2s var(--ease); }
@keyframes wq-jm-fade { from { opacity: 0; } to { opacity: 1; } }
.wq-jm { position: relative; width: 100%; max-width: 620px; max-height: 88vh; overflow-y: auto;
  background: #141414; border: 1px solid rgba(255, 255, 255, .1); border-radius: var(--r-xl);
  padding: 40px 40px 34px; box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8); }
.wq-jm-close { position: absolute; top: 18px; inset-inline-end: 18px; width: 38px; height: 38px; border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .18); background: transparent; color: #fff; display: inline-flex;
  align-items: center; justify-content: center; cursor: pointer; transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.wq-jm-close:hover { background: #fff; color: var(--teal-900); border-color: #fff; }
.wq-jm-kicker { font-family: var(--font-en); font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--gold); font-size: 12px; }
.wq-jm-title { font-family: 'Source Serif 4', Georgia, serif; font-weight: 600; color: #fff; font-size: 26px;
  line-height: 1.2; margin: 10px 0 6px; max-width: 90%; }
.wq-jm-meta { color: rgba(255, 255, 255, .5); font-size: 13px; margin-bottom: 24px; }
.wq-jm-body { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 22px; }
.wq-jm-body h4 { color: #fff; font-family: var(--font-en); font-weight: 700; font-size: 14px; letter-spacing: .02em; margin: 0 0 10px; }
.wq-jm-body p { color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.75; margin: 0 0 22px; }
.wq-jm-body ul { margin: 0 0 26px; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 10px; }
.wq-jm-body li { color: rgba(255, 255, 255, .62); font-size: 14px; line-height: 1.6; padding-inline-start: 22px; position: relative; }
.wq-jm-body li::before { content: ''; position: absolute; inset-inline-start: 0; top: 7px; width: 8px; height: 8px;
  background: var(--gold); border-radius: 2px; transform: rotate(45deg); }
.wq-jm-form { border-top: 1px solid rgba(255, 255, 255, .1); padding-top: 24px; display: flex; flex-direction: column; gap: 14px; }
.wq-jm-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.wq-jm-form input { width: 100%; background: rgba(255, 255, 255, .05); border: 1px solid rgba(255, 255, 255, .12);
  border-radius: var(--r-md); color: #fff; font-family: var(--font-en); font-size: 14px; padding: 12px 14px;
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease); }
.wq-jm-form input::placeholder { color: rgba(255, 255, 255, .45); }
.wq-jm-form input:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-tint); }
.wq-jm-sent { text-align: center; padding: 8px 0; display: flex; flex-direction: column; align-items: center; gap: 4px; }
.wq-jm-sent h4 { color: #fff; font-family: 'Source Serif 4', Georgia, serif; font-size: 21px; margin: 10px 0 0; }
.wq-jm-sent p { color: rgba(255, 255, 255, .66); font-size: 14px; line-height: 1.7; margin: 8px 0 0; max-width: 40ch; }
.wq-jm-btn { margin-top: 18px; font-family: var(--font-en); font-weight: 600; font-size: 13.5px; color: #fff;
  border: 1px solid rgba(255, 255, 255, .25); border-radius: var(--r-full); padding: 11px 22px; background: transparent; cursor: pointer;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.wq-jm-btn:hover { background: var(--gold); color: var(--teal-900); border-color: var(--gold); }

/* ---- "Reach Us" card ------------------------------------------- */
.wq-reach { background: rgba(255, 255, 255, .04); border: 1px solid rgba(255, 255, 255, .1);
  border-radius: var(--r-xl); padding: 30px 28px; }
.wq-reach-title { font-family: var(--font-en); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; font-size: 22px; margin: 0 0 12px; }
.wq-reach-desc { color: rgba(255, 255, 255, .6); font-size: 13.5px; line-height: 1.7; margin: 0 0 22px; }
.wq-reach-img { width: 100%; height: 184px; border-radius: var(--r-md); background-size: cover; background-position: center;
  margin-bottom: 24px; }
.wq-reach-label { font-family: var(--font-en); font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: #fff; font-size: 15px; margin-bottom: 10px; }
.wq-reach-emails { display: flex; flex-direction: row; flex-wrap: wrap; gap: 6px 26px; margin-bottom: 20px; }
.wq-reach-emails a { color: rgba(255, 255, 255, .62); font-size: 13.5px; text-decoration: none; direction: ltr;
  transition: color .25s var(--ease); }
.wq-reach-emails a:hover { color: var(--gold); }
.wq-reach-social { display: flex; gap: 10px; }
.wq-reach-social a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, .2);
  display: inline-flex; align-items: center; justify-content: center; color: rgba(255, 255, 255, .8);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease); }
.wq-reach-social a:hover { background: var(--gold); color: var(--teal-900); border-color: var(--gold); }

/* ---- "If You Have Any Doubts Contact Us" ----------------------- */
.wq-dc { display: grid; grid-template-columns: 1fr 1.1fr; gap: 56px; align-items: stretch; }
.wq-dc-img { border-radius: var(--r-lg); background-size: cover; background-position: center; min-height: 460px; }
.wq-dc-form { display: flex; flex-direction: column; }
.wq-dc-title { font-family: var(--font-en); font-weight: 700; text-transform: uppercase; letter-spacing: .005em;
  color: #fff; font-size: clamp(24px, 2.8vw, 34px); line-height: 1.15; margin: 0 0 14px; }
.wq-dc-sub { color: rgba(255, 255, 255, .6); font-size: 15px; line-height: 1.7; margin: 0 0 30px; max-width: 48ch; }
.wq-dc-row { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; margin-bottom: 26px; }
.wq-dc-field input { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-family: var(--font-en); font-size: 14.5px; padding: 9px 2px; transition: border-color .25s var(--ease); }
.wq-dc-field input::placeholder { color: rgba(255, 255, 255, .42); }
.wq-dc-field input:focus { outline: none; border-bottom-color: var(--gold); }
/* Country dropdown — matches the underline fields */
.wq-dc-select { position: relative; }
.wq-dc-field select { width: 100%; background: transparent; border: none; border-bottom: 1px solid rgba(255, 255, 255, .22);
  color: #fff; font-family: var(--font-en); font-size: 14.5px; padding: 9px 22px 9px 2px; cursor: pointer;
  -webkit-appearance: none; appearance: none; transition: border-color .25s var(--ease); }
.wq-dc-field select:focus { outline: none; border-bottom-color: var(--gold); }
.wq-dc-field select option { color: #1a1a1a; }
.wq-dc-select::after { content: ''; position: absolute; inset-inline-end: 4px; top: 12px; width: 8px; height: 8px;
  border-right: 1.5px solid rgba(255, 255, 255, .5); border-bottom: 1.5px solid rgba(255, 255, 255, .5);
  transform: rotate(45deg); pointer-events: none; }
.wq-dc-msg { margin-bottom: 22px; }
.wq-dc-msglabel { display: block; color: rgba(255, 255, 255, .5); font-size: 12.5px; margin-bottom: 10px; }
.wq-dc-msg textarea { width: 100%; min-height: 118px; resize: vertical; background: rgba(255, 255, 255, .04);
  border: 1px solid rgba(255, 255, 255, .14); border-radius: var(--r-md); color: #fff; font-family: var(--font-en);
  font-size: 14.5px; line-height: 1.6; padding: 14px 16px; transition: border-color .25s var(--ease); }
.wq-dc-msg textarea::placeholder { color: rgba(255, 255, 255, .42); }
.wq-dc-msg textarea:focus { outline: none; border-color: var(--gold); }
.wq-dc-actions { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.wq-dc-actions .wq-file { flex: 1; min-width: 220px; }
.wq-dc .wq-file-btn { background: var(--gold); color: var(--teal-900); border-color: var(--gold); }
.wq-dc-note { color: rgba(255, 255, 255, .4); font-size: 12px; margin: 16px 0 0; }
.wq-dc-sent { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; }
.wq-dc-sent h3 { color: #fff; font-family: 'Source Serif 4', Georgia, serif; font-size: 22px; margin: 10px 0 0; }
.wq-dc-sent p { color: rgba(255, 255, 255, .7); font-size: 14.5px; line-height: 1.7; margin: 6px 0 0; max-width: 46ch; }

/* ---- Responsive ------------------------------------------------- */
@media (max-width: 980px) {
  .wq-begin { grid-template-columns: 1fr; gap: 40px; }
  .wq-dc { grid-template-columns: 1fr; gap: 32px; }
  .wq-dc-img { min-height: 280px; }
}
@media (max-width: 560px) {
  .wq-dc-row { grid-template-columns: 1fr; gap: 22px; }
  .wq-dc-actions { flex-direction: column; align-items: stretch; }
  .wq-dc-actions .wq-file { min-width: 0; }
  .wq-dc-actions .wq-btn { width: 100%; justify-content: center; }
  .wq-cl-item.is-active { padding: 18px 18px; }
  .wq-jm { padding: 30px 22px 26px; }
  .wq-jm-row { grid-template-columns: 1fr; }
}