/* ==========================================================================
   careers.css — Careers page
   Figma: IiXADCvnTkuTba3XXaw2PW node 2560:5562 ("4.13 - Careers").
   Sections share dark teal #13252A background except Hiring (cream #FAF4E5).
   Horizontal padding: 179px base → 48px (≤1300px) → 24px (≤600px).
   Hero carries it on __inner (BG image is absolute; section stays full-width).
   Sections 2–5 carry it directly on the section element.
   ========================================================================== */

/* ── Page wrapper ──────────────────────────────────────────────────────── */
.ox-careers-page {
  background: #13252A;
}

/* Eyebrow icon-to-label gap per Figma (10px instead of the 8px default). */
.ox-careers-page .ox-yardos-eyebrow {
  gap: 10px;
}

/* Eyebrow label color: light on dark sections, dark on the cream Hiring section.
   .ox-yardos-eyebrow__label defaults to #13252A which is invisible on dark teal. */
.ox-careers-hero .ox-yardos-eyebrow__label,
.ox-careers-meaning .ox-yardos-eyebrow__label,
.ox-careers-offices .ox-yardos-eyebrow__label,
.ox-careers-resources .ox-yardos-eyebrow__label {
  color: #F3F4F4;
}
.ox-careers-hiring .ox-yardos-eyebrow__label {
  color: #13252A;
}



/* ──────────────────────────────────────────────────────────────────────────
   1. HERO
   ────────────────────────────────────────────────────────────────────────── */
.ox-careers-hero {
  background-color: #13252A;
  position: relative;
  overflow: hidden;
  min-height: 660px;
}

/* Decorative hero image — absolutely positioned on the right side of the
   hero so the text lockup can sit flush on the left. The actual <img>
   element lives in page-careers.php for visibility / CFS editability. */
.ox-careers-hero__bg {
  position: absolute;
  top: 0;
  right: 0;
  width: 60%;
  max-width: 925px;
  height: 100%;
  object-fit: cover;
  object-position: right top;
  pointer-events: none;
  z-index: 0;
}
.ox-careers-hero__inner {
  position: relative;
  z-index: 1;
}
.ox-careers-hero__inner {
  display: flex;
  flex-direction: column;
  padding: 120px 179px 96px;
}
.ox-careers-hero__lockup {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 24px;
  max-width: 559px;
}
/* Hero eyebrow: single square dot — matches Figma (Rectangle 1589).
   16×16 rendered (8px content + 4px border each side, content-box).
   Burnt-brown ring (#894615) for dark hero background.
   Content sections use the 14×14 3×3 grid SVG instead. */
.ox-careers-hero__eyebrow-dot {
  display: inline-block;
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  background: #FF6600;
  border: 4px solid #894615;
}

/* Divider line between h1 and intro — matches Figma Frame 1461.
   Fancy-stroke pattern: solid caps + faded center. */
.ox-careers-hero__divider {
  display: flex;
  flex-direction: row;
  align-items: center;
  border: none;
  margin: 0;
  width: 100%;
  height: 2px;
  background:
    linear-gradient(
      to right,
      #F3F4F4 0px, #F3F4F4 24px,
      rgba(243, 244, 244, 0.25) 24px, rgba(243, 244, 244, 0.25) calc(100% - 24px),
      #F3F4F4 calc(100% - 24px), #F3F4F4 100%
    );
}

.ox-careers-hero__h1 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 68px;
  line-height: 1.05;
  letter-spacing: -0.02em;
  color: #F3F4F4;
  margin: 0;
}
.ox-careers-hero__intro {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #F3F4F4;
  margin: 0;
}


/* ──────────────────────────────────────────────────────────────────────────
   2. WHAT IT MEANS — eyebrow + h2 + intro + full-width team photo
   ────────────────────────────────────────────────────────────────────────── */
.ox-careers-meaning {
  background: #13252A;
  padding-left: 179px;
  padding-right: 179px;
}
.ox-careers-meaning__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
  margin-bottom: 32px;
}
.ox-careers-meaning__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  color: #F3F4F4;
  margin: 0;
}
.ox-careers-meaning__intro {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #F3F4F4;
  margin: 0;
  max-width: 920px;
}
.ox-careers-meaning__photo {
  width: 100%;
  margin-top: 32px;
  overflow: hidden;
}
.ox-careers-meaning__photo img {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}


/* ──────────────────────────────────────────────────────────────────────────
   3. OUR OFFICES — 2-col: left text / right location list
   ────────────────────────────────────────────────────────────────────────── */
.ox-careers-offices {
  background: #13252A;
  padding-left: 179px;
  padding-right: 179px;
}
.ox-careers-offices__row {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 64px;
}
.ox-careers-offices__copy {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
}
.ox-careers-offices__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  color: #F3F4F4;
  margin: 0;
}
.ox-careers-offices__intro {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #F3F4F4;
  margin: 0;
}

/* Locations list — right column, bordered rows with orange-square marker */
.ox-careers-offices__list {
  flex: 0 0 460px;
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid #717C7F;
  background: transparent;
}
.ox-careers-offices__item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  border-top: 1px solid #717C7F;
}
.ox-careers-offices__item:first-child { border-top: none; }
.ox-careers-offices__marker {
  display: inline-block;
  width: 20px;
  height: 20px;
  background: #D05908; /* default — overridden per row below */
  flex-shrink: 0;
}
/* Per-row marker color fade per Figma — bright burnt orange → dark brown */
.ox-careers-offices__item:nth-child(1) .ox-careers-offices__marker { background: #D05908; }
.ox-careers-offices__item:nth-child(2) .ox-careers-offices__marker { background: #A14C11; }
.ox-careers-offices__item:nth-child(3) .ox-careers-offices__marker { background: #713F19; }
.ox-careers-offices__item:nth-child(n+4) .ox-careers-offices__marker { background: #423222; }
.ox-careers-offices__label {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #F3F4F4;
}


/* ──────────────────────────────────────────────────────────────────────────
   4. WE'RE HIRING — cream section with job cards
   ────────────────────────────────────────────────────────────────────────── */
.ox-careers-hiring {
  background: #FAF4E5;
  padding-left: 179px;
  padding-right: 179px;
  /* Override dark stroke caps to dark for visibility on cream */
}
.ox-careers-hiring .ox-fancy-stroke__cap { background: #13252A; }
.ox-careers-hiring .ox-fancy-stroke__line { background: #13252A; opacity: 0.2; }

.ox-careers-hiring__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 32px;
}
.ox-careers-hiring__header .ox-yardos-eyebrow__label { color: #13252A; }
.ox-careers-hiring__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  color: #13252A;
  margin: 0;
}
.ox-careers-hiring__intro {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #13252A;
  margin: 0;
}

/* Stacked job cards — borders collapse via -1px margin */
.ox-careers-hiring__list {
  display: flex;
  flex-direction: column;
  align-items: stretch;
}
.ox-careers-hiring__list > * + * { margin-top: -1px; }

.ox-careers-job {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  padding: 24px 32px;
  background: #FAEDDA;
  border: 1px solid #717C7F;
  box-sizing: border-box;
}
.ox-careers-job__title {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 32px;
  line-height: 1.05;
  color: #13252A;
  margin: 0;
}
.ox-careers-job__locations {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-start;
}
.ox-careers-job__loc {
  display: inline-flex;
  align-items: center;
  padding: 8px 16px;
  margin-right: -1px;
  margin-bottom: -1px;
  background: #FAF4E5;
  border: 1px solid #717C7F;
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.3;
  color: #13252A;
}
.ox-careers-job__body {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.6;
  color: #13252A;
  margin: 0;
  max-width: 980px;
}
.ox-careers-job__cta {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  background: #FAE6CE;
  border: 1px solid #FF6600;
  text-decoration: none;
  transition: background .2s ease;
}
.ox-careers-job__cta:hover { background: #F5D5B0; }
.ox-careers-job__cta-label {
  font-family: 'Figtree', sans-serif;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #13252A;
}


/* ──────────────────────────────────────────────────────────────────────────
   5. RESOURCES — 3-up resource cards
   ────────────────────────────────────────────────────────────────────────── */
.ox-careers-resources {
  background: #13252A;
  padding-left: 179px;
  padding-right: 179px;
}
.ox-careers-resources__header {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  margin: 0 0 32px;
}
.ox-careers-resources__h2 {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 46px;
  line-height: 1.05;
  color: #F3F4F4;
  margin: 0;
}
.ox-careers-resources__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}
.ox-careers-resources__card {
  display: flex;
  flex-direction: column;
  background: #1F3035;
  border-bottom: 4px solid #03D8D8;
  text-decoration: none;
  color: inherit;
  transition: transform .2s ease;
}
.ox-careers-resources__card:hover { transform: translateY(-2px); }
.ox-careers-resources__media {
  position: relative;
  width: 100%;
  aspect-ratio: 369 / 270;
  background: #1F3035;
  overflow: hidden;
}
.ox-careers-resources__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.ox-careers-resources__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 28px;
  flex: 1;
}
.ox-careers-resources__card-title {
  font-family: 'Tenez', serif;
  font-weight: 400;
  font-size: 26px;
  line-height: 1.1;
  color: #F3F4F4;
  margin: 0;
}
.ox-careers-resources__card-text {
  font-family: 'Figtree', sans-serif;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.6;
  color: #F3F4F4;
  margin: 0;
  flex: 1;
}


/* ──────────────────────────────────────────────────────────────────────────
   RESPONSIVE
   ────────────────────────────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .ox-careers-hero__h1     { font-size: 52px; }
  .ox-careers-meaning__h2,
  .ox-careers-offices__h2,
  .ox-careers-hiring__h2,
  .ox-careers-resources__h2 { font-size: 36px; }
  .ox-careers-offices__row { gap: 32px; }
  .ox-careers-offices__list { flex: 0 0 360px; }
  .ox-careers-resources__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .ox-careers-hero__inner  { padding: 80px 48px 48px; }
  .ox-careers-hero__h1     { font-size: 40px; }
  .ox-careers-offices__row { flex-direction: column; gap: 32px; }
  .ox-careers-offices__list { flex: none; width: 100%; }
  .ox-careers-job          { padding: 20px 24px; }
  .ox-careers-job__title   { font-size: 26px; }
  .ox-careers-resources__grid { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .ox-careers-hero__h1     { font-size: 32px; }
  .ox-careers-meaning__h2,
  .ox-careers-offices__h2,
  .ox-careers-hiring__h2,
  .ox-careers-resources__h2 { font-size: 28px; }
  .ox-careers-job          { padding: 16px; }
  .ox-careers-job__title   { font-size: 22px; }
}
@media (max-width: 1300px) {
  .ox-careers-hero__inner { padding-left: 48px; padding-right: 48px; }
  .ox-careers-meaning,
  .ox-careers-offices,
  .ox-careers-hiring,
  .ox-careers-resources   { padding-left: 48px; padding-right: 48px; }
}
@media (max-width: 600px) {
  .ox-careers-hero__inner { padding-left: 24px; padding-right: 24px; }
  .ox-careers-meaning,
  .ox-careers-offices,
  .ox-careers-hiring,
  .ox-careers-resources   { padding-left: 24px; padding-right: 24px; }
}

/* ──────────────────────────────────────────────────────────────────────────
   LIGHT HEADER OVERRIDE — Careers page is dark-bg; no override needed.
   (Header already uses solid dark teal as the base style.)
   ────────────────────────────────────────────────────────────────────────── */