/* ── Careers Page ─────────────────────────── */

/* Installed-app feel on phones: no rubber-band bounce past the page ends. */
html, body { overscroll-behavior-y: none; }

/* ── Hero ────────────────────────────────── */
.careers-hero {
  position: relative;
  background: var(--white);
  padding: calc(var(--header-total-h) + var(--sp-16)) 0 var(--sp-16);
  overflow: hidden;
  text-align: center;
}
.careers-hero-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; }
.careers-hero-bg .hero-orb { position: absolute; border-radius: 50%; filter: blur(80px); opacity: 0.15; }
.careers-hero-bg .hero-orb:nth-child(1) { width: 400px; height: 400px; background: var(--blue); top: -15%; left: 10%; animation: orbFloat1 20s ease-in-out infinite; }
.careers-hero-bg .hero-orb:nth-child(2) { width: 350px; height: 350px; background: var(--yellow); bottom: -10%; right: 5%; animation: orbFloat2 25s ease-in-out infinite; }
.careers-hero-bg .hero-orb:nth-child(3) { width: 250px; height: 250px; background: var(--green); top: 30%; right: 25%; animation: orbFloat3 18s ease-in-out infinite; }
.careers-hero .container { position: relative; z-index: 2; }
.careers-badge {
  display: inline-flex; align-items: center; gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-4);
  background: linear-gradient(135deg, var(--blue-20), var(--yellow-20));
  border: 1px solid rgba(170,191,222,0.3);
  border-radius: var(--r-full);
  font-size: var(--fs-sm); font-weight: 600; color: var(--dark);
  margin-bottom: var(--sp-6);
}
.careers-badge i { font-size: var(--fs-xs); color: var(--yellow); }
.careers-hero-title {
  font-size: clamp(2.25rem, 5vw, 3.75rem);
  font-weight: 800; color: var(--dark);
  letter-spacing: -0.03em; line-height: 1.12;
  max-width: 56rem; margin: 0 auto var(--sp-4);
}
.careers-hero-sub { font-size: var(--fs-lg); color: var(--muted); max-width: 38rem; margin: 0 auto; line-height: 1.7; }
.careers-hero-cta { margin-top: var(--sp-8); }
.careers-facts { display: flex; justify-content: center; flex-wrap: wrap; gap: var(--sp-6) var(--sp-12); margin-top: var(--sp-10); }
.careers-facts b { display: block; font-size: 1.875rem; font-weight: 800; letter-spacing: -0.02em; color: var(--dark); }
.careers-facts span { font-size: var(--fs-sm); color: var(--muted); }

/* ── Section headings ────────────────────── */
.careers-label { font-size: 0.8125rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.careers-h2 { font-size: clamp(1.75rem, 3vw, 2.125rem); font-weight: 800; letter-spacing: -0.02em; color: var(--dark); margin: var(--sp-2) 0 0; }

/* ── Why Upyugo tiles ────────────────────── */
.careers-why { padding: var(--sp-6) 0 var(--sp-20); text-align: center; }
.careers-why .careers-h2 { margin-bottom: var(--sp-8); }
.why-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--sp-5); text-align: left; }
.why-tile { border: 1px solid var(--border); border-radius: 22px; padding: 30px 26px; background: var(--white); }
.why-tile h3 { font-size: 1.125rem; font-weight: 700; color: var(--dark); margin: 22px 0 8px; }
.why-tile p { margin: 0; color: var(--muted); font-size: 0.9375rem; line-height: 1.6; }
/* Dimensional lit icon: radial highlight plus inset shadow on a circle */
.orb3d {
  width: 64px; height: 64px; border-radius: 50%;
  display: grid; place-items: center; color: #fff; font-size: 24px;
  box-shadow: inset -6px -8px 14px rgba(0,0,0,.18), inset 6px 8px 14px rgba(255,255,255,.45), 0 12px 22px rgba(15,25,35,.14);
}
.orb3d.y { background: radial-gradient(circle at 32% 28%, #FFE39A 0, #F5C242 45%, #C9921A 100%); }
.orb3d.b { background: radial-gradient(circle at 32% 28%, #E3ECF8 0, #AABFDE 48%, #6F87AE 100%); }
.orb3d.g { background: radial-gradient(circle at 32% 28%, #D6DCB1 0, #959D64 50%, #65703A 100%); }
.orb3d.d { background: radial-gradient(circle at 32% 28%, #4A5968 0, #1F2C39 50%, #0F1923 100%); }

/* ── Open roles ──────────────────────────── */
.careers-roles { background: var(--light); padding: var(--sp-20) 0 var(--sp-24); scroll-margin-top: var(--header-total-h); }
.roles-head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--sp-4); flex-wrap: wrap; margin-bottom: var(--sp-6); }
.roles-filters { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.roles-filters[hidden], .roles-filters select[hidden] { display: none; }
.roles-filters select {
  appearance: none; -webkit-appearance: none;
  font: inherit; font-size: var(--fs-sm); font-weight: 600; color: var(--dark);
  background: var(--white) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%230F1923' stroke-width='1.6' fill='none'/%3E%3C/svg%3E") no-repeat right 16px center;
  border: 1px solid var(--border); border-radius: var(--r-full);
  padding: 11px 40px 11px 20px; cursor: pointer;
}
.role-card {
  display: flex; align-items: center; gap: var(--sp-6);
  padding: 28px 30px; margin-bottom: 14px;
  background: var(--white); border: 1px solid var(--border); border-radius: 18px;
  color: inherit; text-decoration: none;
  transition: border-color .2s, box-shadow .2s, transform .2s;
}
@media (hover: hover) {
  .role-card:hover { border-color: #D8DEE6; box-shadow: 0 14px 34px rgba(15,25,35,.07); transform: translateY(-2px); }
}
.role-card:active { border-color: #D8DEE6; }
.role-card, .af-drop, .af-submit, .role-go { -webkit-tap-highlight-color: transparent; }
.role-card h3 { overflow-wrap: anywhere; margin: 0 0 6px; font-size: 1.3125rem; font-weight: 700; color: var(--dark); }
.role-card p { margin: 0 0 14px; color: var(--muted); font-size: 0.9375rem; line-height: 1.55; }
.role-chips { display: flex; gap: 8px; flex-wrap: wrap; }
.role-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 12px; border-radius: var(--r-full);
  background: var(--light); border: 1px solid var(--border);
  font-size: 0.8125rem; color: var(--muted);
}
.role-chip i { color: var(--dark); opacity: .55; font-size: 12px; }
/* Posted date, apply-by date and the "Closing soon" tag (job-dates.js). */
.role-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 18px; margin-top: 14px; font-size: 0.8125rem; color: var(--muted); }
.role-meta > span { display: inline-flex; align-items: center; gap: 6px; }
.role-meta i { font-size: 12px; opacity: .8; }
.role-closed { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); background: var(--light); border: 1px solid var(--border); color: var(--dark); font-weight: 600; font-size: 0.75rem; text-decoration: none; }
.role-soon { display: inline-flex; align-items: center; padding: 3px 10px; border-radius: var(--r-full); background: var(--yellow-10); border: 1px solid rgba(245,194,66,.55); color: #8A5A00; font-weight: 600; font-size: 0.75rem; }
.role-go {
  margin-left: auto; flex: none;
  display: inline-flex; align-items: center; gap: 10px;
  padding: 12px 22px; border-radius: var(--r-full);
  border: 1px solid var(--border); background: var(--white);
  font-weight: 600; font-size: 0.9375rem; color: var(--dark);
  transition: background .2s, border-color .2s, box-shadow .2s;
}
.role-card:first-child .role-go, .role-card:focus-visible .role-go {
  background: var(--yellow); border-color: var(--yellow); box-shadow: 0 8px 20px var(--yellow-shadow);
}
.roles-state { text-align: center; padding: var(--sp-12) var(--sp-6); background: var(--white); border: 1px solid var(--border); border-radius: 18px; color: var(--muted); }
.roles-state h3 { color: var(--dark); font-size: 1.25rem; margin: 0 0 var(--sp-2); }
.roles-state p { margin: 0 auto var(--sp-6); max-width: 30rem; line-height: 1.6; }
.roles-privacy { margin: var(--sp-6) 0 0; font-size: var(--fs-sm); color: var(--muted); text-align: center; }
.roles-privacy a { color: var(--dark); text-decoration: underline; text-underline-offset: 3px; }
.role-skeleton { height: 128px; margin-bottom: 14px; border-radius: 18px; background: linear-gradient(90deg, #eef1f5 25%, #f6f8fa 50%, #eef1f5 75%); background-size: 200% 100%; animation: roleShimmer 1.4s linear infinite; }
@keyframes roleShimmer { to { background-position: -200% 0; } }

/* ── Responsive ──────────────────────────── */
@media (max-width: 1024px) {
  .why-tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .careers-hero { padding-top: calc(var(--header-total-h) + var(--sp-10)); padding-bottom: var(--sp-10); }
  .careers-facts { gap: var(--sp-5) var(--sp-8); }
  .careers-why { padding-bottom: var(--sp-12); }
  .careers-roles { padding: var(--sp-12) 0 var(--sp-16); }
  .role-card { flex-direction: column; align-items: stretch; gap: var(--sp-4); padding: 22px; }
  .role-go { margin-left: 0; justify-content: center; }
}
@media (max-width: 560px) {
  .why-tiles { grid-template-columns: 1fr; }
  .roles-filters, .roles-filters select { width: 100%; }
}
@media (prefers-reduced-motion: reduce) {
  .careers-hero-bg .hero-orb, .role-skeleton { animation: none; }
  .role-card, .role-card:hover { transition: none; transform: none; }
}

/* ── Role page ───────────────────────────── */
.role-detail { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 56px; align-items: start; padding-top: calc(var(--header-total-h) + var(--sp-12)); padding-bottom: var(--sp-20); }
.role-crumb { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; font-size: var(--fs-sm); color: var(--muted); text-decoration: none; margin-bottom: 18px; }
.role-crumb:hover { color: var(--dark); }
.role-detail h1 { overflow-wrap: anywhere; font-size: clamp(2rem, 4vw, 2.625rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.15; color: var(--dark); margin: 0 0 14px; }
.jd h2 { font-size: 1.125rem; font-weight: 700; color: var(--dark); margin: 34px 0 12px; }
.jd p { color: #3b4754; line-height: 1.7; font-size: 1rem; margin: 0; white-space: pre-line; }
.jd ul { margin: 0; padding: 0; list-style: none; }
.jd li { position: relative; padding-left: 26px; margin: 0 0 10px; line-height: 1.6; color: #3b4754; }
.jd li::before { content: ''; position: absolute; left: 4px; top: .62em; width: 8px; height: 8px; border-radius: 50%; background: var(--yellow); }

.apply-card { position: sticky; top: calc(var(--header-total-h) + 24px); scroll-margin-top: calc(var(--header-total-h) + 24px); border: 1px solid var(--border); border-radius: 20px; padding: 28px; background: var(--white); box-shadow: 0 24px 60px rgba(15,25,35,.08); }
.apply-card h2 { margin: 0 0 4px; font-size: 1.375rem; font-weight: 700; color: var(--dark); }
.apply-sub { color: var(--muted); font-size: var(--fs-sm); margin: 0 0 22px; }
.af-field { margin-bottom: 18px; }
.af-field label { display: block; font-size: var(--fs-sm); font-weight: 600; color: var(--dark); margin-bottom: 7px; line-height: 1.4; }
.af-req { color: #C0392B; }
.af-in { width: 100%; border: 1px solid var(--border); border-radius: 12px; padding: 13px 15px; font: inherit; font-size: 1rem; -webkit-appearance: none; appearance: none; color: var(--dark); background: var(--white); transition: border-color .15s, box-shadow .15s; }
.af-in:focus { outline: none; border-color: var(--blue); box-shadow: 0 0 0 3px var(--blue-20); }
textarea.af-in { resize: vertical; min-height: 110px; line-height: 1.5; }
.af-field.invalid .af-in, .af-field.invalid .af-drop { border-color: #C0392B; }
.af-err { display: none; color: #C0392B; font-size: 0.8125rem; margin-top: 6px; }
.af-field.invalid .af-err { display: block; }
.af-qn { font-size: 0.75rem; font-weight: 700; color: var(--muted); letter-spacing: .08em; text-transform: uppercase; margin: 22px 0 12px; padding-top: 18px; border-top: 1px solid var(--border); }
.af-invite { border: 1px solid var(--border); border-left: 3px solid var(--yellow); border-radius: 12px; padding: 12px 14px; font-size: 14px; background: var(--yellow-10); margin-bottom: 16px; }
.af-drop { position: relative; border: 1.5px dashed #C9D3DE; border-radius: 14px; padding: 22px; text-align: center; background: var(--light); color: var(--muted); font-size: var(--fs-sm); cursor: pointer; transition: border-color .15s, background .15s; }
.af-drop:hover, .af-drop.drag { border-color: var(--blue); background: #f2f6fb; }
.af-drop strong { color: var(--dark); }
.af-drop i { font-size: 20px; display: block; margin-bottom: 6px; }
.af-drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.af-drop.has-file { border-style: solid; border-color: var(--green); background: #f6f7ef; }
.af-note { font-size: 0.75rem; color: var(--muted); }
.af-field label.af-consent { display: flex; gap: 10px; font-size: 0.8125rem; color: var(--muted); line-height: 1.5; margin: 6px 0 4px; font-weight: 400; }
.af-consent input { margin-top: 2px; flex: none; width: 20px; height: 20px; accent-color: var(--dark); }
.af-consent a { color: var(--dark); text-decoration: underline; }
.af-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.af-submit { width: 100%; justify-content: center; margin-top: 14px; }
.af-submit[disabled] { opacity: .7; cursor: progress; }
.af-status { font-size: 0.8125rem; color: var(--muted); text-align: center; margin: 10px 0 0; min-height: 1em; }
.af-done { text-align: center; padding: 18px 4px; }
.af-done .orb3d { margin: 0 auto 18px; }
.af-done h2 { margin-bottom: 8px; }
.af-done p { color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.role-apply-jump { display: none; }
.af-closed { text-align: center; padding: 10px 4px; }
.af-closed h2 { margin-bottom: 8px; }
.af-closed p { color: var(--muted); line-height: 1.6; margin: 0 0 20px; }
.role-missing { max-width: 34rem; margin: 0 auto; text-align: center; padding-top: calc(var(--header-total-h) + var(--sp-20)); padding-bottom: var(--sp-24); }
.role-missing h1 { font-size: 2rem; font-weight: 800; color: var(--dark); margin: 0 0 12px; }
.role-missing p { color: var(--muted); line-height: 1.6; margin: 0 0 24px; }

@media (max-width: 1024px) {
  .role-detail { grid-template-columns: minmax(0, 1fr); gap: 40px; }
  .apply-card { position: static; }
  .role-apply-jump { display: inline-flex; margin-top: var(--sp-6); }
}
@media (max-width: 768px) {
  .role-detail { padding-top: calc(var(--header-total-h) + var(--sp-8)); padding-bottom: var(--sp-12); }
  .apply-card { padding: 22px; }
}

/* Touch devices: there is nothing to drag a file from, so say "tap". */
.af-drop-touch { display: none; }
@media (hover: none) and (pointer: coarse) {
  .af-drop-desk { display: none; }
  .af-drop-touch { display: inline; }
}
@media (max-width: 1024px) and (min-width: 769px) {
  .role-detail { max-width: 46rem; }
}
@media (max-width: 768px) {
  /* The blurred orbs are the heaviest thing to paint on a phone. */
  .careers-hero-bg .hero-orb { animation: none; }
  .careers-hero-bg .hero-orb:nth-child(3) { display: none; }
  .careers-hero-sub { font-size: 1rem; }
  .role-card h3 { font-size: 1.1875rem; }
  .apply-card { border-radius: 16px; box-shadow: 0 12px 30px rgba(15,25,35,.07); }
}
@media (max-width: 400px) {
  .careers-hero-title { font-size: 2rem; letter-spacing: -0.025em; }
  .careers-facts { gap: var(--sp-4) var(--sp-5); }
  .careers-facts b { font-size: 1.5rem; }
  .careers-h2 { font-size: 1.5rem; }
  .why-tile { padding: 24px 20px; }
  .role-card { padding: 18px; }
  .apply-card { padding: 18px; }
  .role-detail h1 { font-size: 1.75rem; }
}
/* Folded phones (Galaxy Z Fold cover screen and similar, ~280px wide). */
@media (max-width: 320px) {
  .careers-hero-title { font-size: 1.625rem; }
  .careers-hero-cta .btn { width: 100%; justify-content: center; }
  .careers-facts { display: grid; grid-template-columns: 1fr 1fr; }
  .role-chip { font-size: 0.75rem; padding: 5px 10px; }
}

/* Careers content at 90% on desktop (owner decision 2026-09-30): the Careers
   page sections and the role page (description and apply form). Header, top
   bar and footer stay full size; tablets and phones are unchanged. */
@media (min-width: 1025px) {
  .careers-hero, .careers-why, .careers-roles, #role-root { zoom: 0.9; }
}