:root {
  --jobs-text: #252525;
  --jobs-muted: #616762;
  --jobs-background: #f7f5f2;
  --jobs-card: #ffffff;
  --jobs-border: #e5e5e5;
}

.jobs-page { background: var(--jobs-background); }

.jobs-main {
  max-width: 1120px;
  margin: 0 auto;
  padding: 72px 24px 100px;
}

.jobs-card {
  display: grid;
  grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
  overflow: hidden;
  background: var(--jobs-card);
  border: 1px solid var(--jobs-border);
  border-radius: 28px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .06);
}

.jobs-card__content {
  align-self: center;
  padding: clamp(42px, 7vw, 78px);
}

.jobs-eyebrow {
  margin: 0 0 12px;
  color: var(--ff-green);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.jobs-card h1 {
  max-width: 600px;
  margin: 0;
  color: var(--jobs-text);
  font-size: clamp(38px, 6vw, 64px);
  line-height: 1.02;
  letter-spacing: -.045em;
}

.jobs-card p {
  max-width: 610px;
  margin: 18px 0 0;
  color: var(--jobs-muted);
}

.jobs-card .jobs-intro {
  margin-top: 26px;
  color: var(--jobs-text);
  font-size: clamp(19px, 2.2vw, 23px);
  font-weight: 700;
  line-height: 1.45;
}

.jobs-button {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin-top: 30px;
  padding: 14px 22px;
  color: #ffffff;
  background: var(--ff-green);
  border-radius: 999px;
  font-weight: 800;
  text-decoration: none;
  transition: background .2s ease, transform .2s ease;
}

.jobs-button:hover,
.jobs-button:focus-visible {
  color: #ffffff;
  background: #135c30;
  transform: translateY(-2px);
}

.jobs-button .material-symbols-outlined { font-size: 20px; }
.jobs-card .jobs-note { margin-top: 12px; font-size: 13px; }

.jobs-card__image {
  min-height: 560px;
  background: #dfe9e1 url("/images/Fort-Fido-Corgi.JPG") center / cover no-repeat;
}

@media (max-width: 800px) {
  .jobs-main { padding: 48px 16px 70px; }
  .jobs-card { grid-template-columns: 1fr; border-radius: 22px; }
  .jobs-card__content { padding: 38px 24px 42px; }
  .jobs-card__image { min-height: 360px; grid-row: 1; }
}

html[data-theme="dark"] {
  --jobs-text: #eef3ef;
  --jobs-muted: #b2bdb4;
  --jobs-background: #101713;
  --jobs-card: #18211b;
  --jobs-border: #334038;
}
