.jobs-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(360px, .95fr);
  gap: 64px;
  align-items: center;
  padding-block: 84px 68px;
}
.jobs-hero h1 { margin: 0; font-size: clamp(50px, 6vw, 80px); font-weight: 600; }
.jobs-hero-copy { max-width: 720px; }
.jobs-hero-copy .hero-lede { max-width: 680px; }
.jobs-hero-panel {
  padding: 28px;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,.86);
  box-shadow: var(--shadow-lg);
}
.jobs-hero-panel small { color: var(--ink-faint); text-transform: uppercase; letter-spacing: .12em; font-weight: 700; }
.jobs-hero-panel h2 { margin: 12px 0 10px; font-size: 30px; font-weight: 600; }
.jobs-hero-panel p { margin: 0; color: var(--ink-soft); }
.jobs-benefits { display: grid; gap: 12px; margin-top: 22px; }
.jobs-benefit { display: flex; gap: 11px; align-items: flex-start; padding-top: 12px; border-top: 1px solid var(--line); }
.jobs-benefit strong { display: block; font-size: 13px; }
.jobs-benefit span { display: block; margin-top: 2px; color: var(--ink-faint); font-size: 12px; }
.jobs-benefit-mark { width: 22px; height: 22px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: var(--mint-soft); color: var(--mint-dark); font-weight: 800; font-size: 11px; }

.jobs-search-band { border-block: 1px solid var(--line); background: rgba(255,255,255,.55); }
.jobs-search-shell { padding-block: 28px; }
.jobs-search-form { display: grid; grid-template-columns: 1.4fr 1fr auto; gap: 12px; }
.jobs-field { display: grid; gap: 7px; }
.jobs-field label { color: var(--ink-faint); font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.jobs-input {
  width: 100%;
  min-height: 50px;
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: 0 15px;
  color: var(--ink);
  background: #fff;
  outline: none;
}
.jobs-input:focus { border-color: rgba(8,118,93,.55); box-shadow: 0 0 0 3px rgba(25,184,141,.1); }
.jobs-search-submit { align-self: end; min-width: 132px; }
.jobs-search-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; margin-top: 15px; color: var(--ink-faint); font-size: 12px; }
.jobs-search-meta strong { color: var(--ink-soft); }
.jobs-clear { padding: 0; border: 0; background: transparent; color: var(--mint-dark); font-weight: 700; cursor: pointer; }

.jobs-main { padding-block: 58px 110px; }
.jobs-heading { display: flex; align-items: flex-end; justify-content: space-between; gap: 30px; margin-bottom: 28px; }
.jobs-heading h2 { margin: 0; font-size: clamp(34px, 4vw, 48px); font-weight: 600; }
.jobs-heading p { margin: 8px 0 0; color: var(--ink-soft); }
.jobs-live-pill { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid var(--line); border-radius: 999px; background: #fff; color: var(--ink-soft); font-size: 11px; font-weight: 700; }
.jobs-live-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--mint); box-shadow: 0 0 0 4px rgba(25,184,141,.12); }
.jobs-grid { display: grid; gap: 12px; }
.job-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: 24px;
  padding: 25px 26px;
  border: 1px solid var(--line);
  border-radius: 20px;
  background: rgba(255,255,255,.9);
  box-shadow: 0 6px 20px rgba(15,25,28,.035);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}
.job-card:hover { transform: translateY(-2px); border-color: rgba(16,22,26,.2); box-shadow: var(--shadow-sm); }
.job-card-main { min-width: 0; }
.job-card-top { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; color: var(--ink-faint); font-size: 11px; }
.job-source-pill, .job-meta-pill { display: inline-flex; align-items: center; min-height: 25px; padding: 0 9px; border-radius: 999px; background: var(--paper-2); color: var(--ink-soft); font-size: 10px; font-weight: 700; }
.job-card h3 { margin: 13px 0 5px; font-size: 23px; font-weight: 600; letter-spacing: -.03em; }
.job-card h3 a { text-decoration: none; }
.job-card h3 a:hover { color: var(--mint-dark); }
.job-company { margin: 0; color: var(--ink-soft); font-size: 14px; font-weight: 600; }
.job-location { margin: 10px 0 0; color: var(--ink-faint); font-size: 13px; }
.job-snippet { margin: 14px 0 0; max-width: 850px; color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.job-card-actions { display: flex; align-items: center; gap: 10px; }
.job-card-link { display: inline-flex; align-items: center; gap: 7px; white-space: nowrap; color: var(--mint-dark); text-decoration: none; font-size: 13px; font-weight: 700; }
.job-card-link:hover { text-decoration: underline; }
.jobs-empty, .jobs-error, .jobs-loading {
  padding: 46px 28px;
  border: 1px dashed var(--line-strong);
  border-radius: 20px;
  background: rgba(255,255,255,.55);
  text-align: center;
  color: var(--ink-soft);
}
.jobs-error { border-style: solid; background: #fff8f3; }
.jobs-empty h3, .jobs-error h3 { margin: 0 0 8px; font-size: 22px; }
.jobs-empty p, .jobs-error p { margin: 0 auto; max-width: 620px; }
.jobs-retry { margin-top: 18px; }
.jobs-load-more { display: flex; justify-content: center; margin-top: 28px; }
.jobs-load-more[hidden] { display: none; }

.job-detail-shell { padding-block: 54px 110px; }
.job-detail-back { display: inline-flex; gap: 8px; align-items: center; color: var(--ink-soft); text-decoration: none; font-size: 13px; font-weight: 700; }
.job-detail-back:hover { color: var(--ink); }
.job-detail-layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 42px; margin-top: 28px; align-items: start; }
.job-detail-card, .job-detail-side {
  border: 1px solid var(--line);
  border-radius: 24px;
  background: rgba(255,255,255,.92);
  box-shadow: var(--shadow-sm);
}
.job-detail-card { padding: 34px; }
.job-detail-side { position: sticky; top: 100px; padding: 24px; }
.job-detail-kicker { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 15px; }
.job-detail-card h1 { margin: 0; font-size: clamp(38px, 5vw, 62px); font-weight: 600; }
.job-detail-company { margin: 14px 0 0; color: var(--ink-soft); font-size: 18px; font-weight: 600; }
.job-detail-meta { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 20px; padding-bottom: 24px; border-bottom: 1px solid var(--line); color: var(--ink-faint); font-size: 13px; }
.job-description { margin-top: 30px; color: var(--ink-soft); font-size: 15px; line-height: 1.75; white-space: pre-wrap; overflow-wrap: anywhere; }
.job-description h2 { color: var(--ink); }
.job-detail-side h2 { margin: 0; font-size: 23px; font-weight: 600; }
.job-detail-side p { color: var(--ink-soft); font-size: 13px; line-height: 1.65; }
.job-detail-actions { display: grid; gap: 10px; margin-top: 20px; }
.job-detail-actions .button { width: 100%; }
.job-side-note { margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--line); color: var(--ink-faint); font-size: 11px; line-height: 1.55; }
.job-detail-facts { display: grid; gap: 12px; margin-top: 20px; }
.job-detail-fact { padding: 12px 0; border-top: 1px solid var(--line); }
.job-detail-fact span { display: block; color: var(--ink-faint); font-size: 10px; text-transform: uppercase; letter-spacing: .09em; font-weight: 700; }
.job-detail-fact strong { display: block; margin-top: 4px; font-size: 13px; }

.jobs-trust-band { margin-top: 70px; display: grid; grid-template-columns: repeat(3,1fr); gap: 12px; }
.jobs-trust-band article { padding: 22px; border: 1px solid var(--line); border-radius: 18px; background: rgba(255,255,255,.55); }
.jobs-trust-band strong { display: block; font-size: 14px; }
.jobs-trust-band p { margin: 8px 0 0; color: var(--ink-faint); font-size: 12px; line-height: 1.55; }

@media (max-width: 1180px) {
  .jobs-hero { grid-template-columns: 1fr; gap: 40px; }
  .jobs-hero-panel { max-width: 760px; }
}
@media (max-width: 880px) {
  .jobs-search-form { grid-template-columns: 1fr 1fr; }
  .jobs-search-submit { grid-column: 1 / -1; width: 100%; }
  .job-detail-layout { grid-template-columns: 1fr; }
  .job-detail-side { position: static; }
  .jobs-trust-band { grid-template-columns: 1fr; }
}
@media (max-width: 700px) {
  .jobs-hero { padding-block: 55px 45px; }
  .jobs-hero h1 { font-size: clamp(44px, 14vw, 62px); }
  .jobs-search-form { grid-template-columns: 1fr; }
  .jobs-search-submit { grid-column: auto; }
  .jobs-heading { display: grid; align-items: start; }
  .job-card { grid-template-columns: 1fr; padding: 21px; }
  .job-card-actions { justify-content: flex-start; }
  .job-detail-card { padding: 24px 20px; }
  .job-detail-side { padding: 22px 20px; }
}