/* =============================================================================
   TalentNetworkAI Theme
   ============================================================================= */

/* ── Design Tokens ────────────────────────────────────────────────────────────
   One palette, one place. Brand colours marked (settings) are overwritten at
   runtime by the theme settings page — see admin/theme-settings-page.php, which
   maps color_primary / color_primary_dark / color_accent onto them. Renaming
   one of those means changing that map too.

   Surfaces are deliberately few. Every extra near-white is a chance for two
   panels that should match to disagree by a shade, which is what the contact
   form used to do.
   ------------------------------------------------------------------------- */
:root {
  /* Surfaces */
  --surface:              #ffffff;   /* cards, forms, the page body */
  --surface-page:         #f4f7f3;   /* the wash behind the page */
  --surface-subtle:       #f7faf7;   /* faintly raised strips */
  --surface-tint:         #eef4f0;   /* mint block */
  --surface-tint-strong:  #e4f1ec;   /* mint block, more present */
  --surface-card:         #ffffff;
  --surface-card-hover:   #f7faf7;
  --surface-footer:       #15211f;   /* (settings) */

  /* Brand */
  --brand:                #167766;   /* (settings) */
  --brand-dark:           #0f5b4f;   /* (settings) */
  --brand-alt:            #1e8a7a;   /* (settings) */
  --brand-glow:           rgba(22, 119, 102, 0.22);
  --brand-soft:           rgba(22, 119, 102, 0.10);
  --brand-alt-soft:       rgba(30, 138, 122, 0.11);
  --accent:               #c18a2d;   /* (settings) gold */

  /* Text */
  --text-strong:          #17201e;   /* headings */
  --text-body:            #52605d;   /* body copy */
  --text-label:           #26313a;   /* form labels */
  --text-hint:            #5c666c;   /* supporting lines */
  --text-soft:            rgba(23, 32, 30, 0.58);
  /* Was #8b959b — about 2.6:1 on white, below the 4.5:1 minimum. This clears
     it while staying visibly lighter than body copy. */
  --text-faint:           #6b767d;

  /* Lines */
  --border:               rgba(23, 32, 30, 0.12);
  --border-soft:          rgba(23, 32, 30, 0.10);
  --border-hairline:      #e8edeb;   /* section rules inside a white card */
  --border-brand:         rgba(22, 119, 102, 0.28);
  --field-border:         #cfd8d5;

  /* Feedback */
  --danger:               #b3382c;
  --danger-strong:        #c0392b;
  --danger-soft:          #fdeceb;

  /* Shape */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:   8px;
  --radius-xl:   8px;
  --radius-full: 6px;

  --shadow-card: 0 18px 45px rgba(24, 40, 37, 0.12);
  --shadow-glow: 0 12px 28px rgba(22, 119, 102, 0.18);

  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --transition: 0.22s cubic-bezier(.4,0,.2,1);

  --container-max: 1560px;
  --container-pad: clamp(1.25rem,5vw,2.5rem);

  --header-h: 72px;
}

/* ── Reset ────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font);
  background-color: var(--surface-page);
  color: var(--text-strong);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  background-image:
    radial-gradient(circle at top right, rgba(108,71,255,0.12) 0%, transparent 45%),
    radial-gradient(circle at bottom left, rgba(0,212,170,0.07) 0%, transparent 40%);
  background-attachment: fixed;
}

img { max-width: 100%; height: auto; display: block; }
a  { color: inherit; text-decoration: none; transition: color var(--transition); }
ul { list-style: none; }
button { font-family: var(--font); cursor: pointer; border: none; }
svg { flex-shrink: 0; }

/* ── Screen reader ───────────────────────────────────────────────────────── */
.screen-reader-text {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}
.skip-link:focus {
  position: fixed; top: 1rem; left: 1rem; z-index: 9999;
  background: var(--brand); color: #fff;
  padding: .5rem 1rem; border-radius: var(--radius-sm);
  width: auto; height: auto; clip: auto;
}

/* ── Container ───────────────────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* ── Utility: gradient text ──────────────────────────────────────────────── */
.fp-gradient-text {
  background: linear-gradient(135deg, var(--brand), var(--accent));
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; gap: .5rem;
  font-family: var(--font); font-weight: 600;
  border-radius: var(--radius-full);
  transition: all var(--transition);
  cursor: pointer; white-space: nowrap; line-height: 1;
  border: 2px solid transparent;
  /* Default size so a .btn used without a size modifier still has padding
     instead of clipping its label against the border. */
  padding: .72rem 1.6rem;
  font-size: .9375rem;
}

.btn-primary {
  background: var(--brand);
  color: #fff;
  box-shadow: 0 0 18px var(--brand-glow);
}
.btn-primary:hover {
  background: var(--brand-dark);
  box-shadow: 0 0 28px var(--brand-glow);
  transform: translateY(-1px);
}

.btn-ghost {
  background: transparent;
  color: var(--text-body);
}
.btn-ghost:hover { color: #fff; }

.btn-outline-white {
  background: transparent;
  color: #fff;
  border-color: rgba(255,255,255,0.25);
}
.btn-outline-white:hover {
  background: rgba(255,255,255,0.06);
  border-color: rgba(255,255,255,0.45);
}

.btn-outline-violet {
  background: transparent;
  color: #fff;
  border-color: var(--brand);
}
.btn-outline-violet:hover { background: rgba(108,71,255,0.12); }

.btn-white {
  background: #fff;
  color: var(--surface-page);
}
.btn-white:hover { background: #e8eeff; transform: translateY(-1px); }

.btn-sm  { padding: .55rem 1.2rem; font-size: .85rem; }
.btn-lg  { padding: .9rem 2rem;  font-size: 1rem; }
.btn-xl  { padding: 1.1rem 2.5rem; font-size: 1.05rem; }

/* ── Glass card shared ───────────────────────────────────────────────────── */
.fp-glass-card {
  background: var(--surface-card);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-radius: var(--radius-lg);
  transition: background var(--transition), border-color var(--transition);
}
.fp-glass-card:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-brand);
}

/* ── Section headers ─────────────────────────────────────────────────────── */
.fp-section-header { text-align: center; margin-bottom: 4rem; }
.fp-section-title {
  font-size: clamp(1.75rem, 4vw, 2.75rem);
  font-weight: 800;
  line-height: 1.15;
  margin-bottom: 1rem;
  text-align: center;
}
.fp-section-title--left { text-align: left; }
.fp-section-sub {
  color: var(--text-body);
  font-size: 1.05rem;
  max-width: 600px;
  margin-inline: auto;
  line-height: 1.7;
}
.fp-section-sub--left { margin-inline: 0; }

/* ── Shared bar component ────────────────────────────────────────────────── */
.fp-bar-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: .25rem .5rem;
  font-size: .8rem;
}
.fp-bar-row > span:first-child { color: var(--text-strong); font-weight: 500; }
.fp-bar-row > span:last-child  { color: var(--text-body); }
.fp-bar {
  grid-column: 1 / -1;
  height: 6px;
  background: rgba(255,255,255,0.06);
  border-radius: var(--radius-full);
  overflow: hidden;
}
.fp-bar__fill {
  height: 100%;
  background: linear-gradient(90deg, var(--brand), var(--brand-alt));
  border-radius: var(--radius-full);
}

/* ═══════════════════════════════════════════════════════════════════════════
   HEADER
═══════════════════════════════════════════════════════════════════════════ */
.site-header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding-block: 1.25rem;
  transition: background var(--transition), padding var(--transition), border-color var(--transition);
  border-bottom: 1px solid transparent;
}
.site-header.scrolled {
  background: rgba(10,14,26,.85);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  padding-block: .9rem;
  border-bottom-color: var(--border-soft);
}
.header-inner {
  display: flex;
  align-items: center;
  gap: 2rem;
}

/* Branding */
.site-branding {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: 1rem;
  color: #fff;
  flex-shrink: 0;
}
.site-branding:hover { color: #fff; }
.site-logo-icon { border-radius: 8px; }
.site-name-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
  animation: pulse 2s infinite;
}
@keyframes pulse {
  0%,100% { opacity: 1; transform: scale(1); }
  50%      { opacity: .6; transform: scale(.85); }
}

/* Nav */
.primary-navigation { flex: 1; }
.nav-menu {
  display: flex;
  align-items: center;
  gap: 2rem;
  justify-content: center;
}
.nav-menu a {
  font-size: .9rem;
  font-weight: 500;
  color: var(--text-body);
  transition: color var(--transition);
}
.nav-menu a:hover,
.nav-menu li.current-menu-item a { color: #fff; }

/* Header actions */
.header-actions { display: flex; align-items: center; gap: .75rem; flex-shrink: 0; }

/* Mobile toggle */
.mobile-menu-toggle {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  width: 40px; height: 40px;
  background: none; border: none; padding: 8px;
  cursor: pointer; flex-shrink: 0;
}
.hamburger-line {
  display: block;
  width: 22px; height: 2px;
  background: #fff;
  border-radius: 2px;
  transition: transform var(--transition), opacity var(--transition);
}
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(2) { opacity: 0; }
.mobile-menu-toggle[aria-expanded="true"] .hamburger-line:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* site-main offset for fixed header */
.site-main { min-height: 100vh; }

/* ═══════════════════════════════════════════════════════════════════════════
   HERO
═══════════════════════════════════════════════════════════════════════════ */
.fp-hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  overflow: hidden;
  padding-top: var(--header-h);
}

.fp-hero__grid-overlay {
  position: absolute; inset: 0; pointer-events: none;
  opacity: .18;
  background-image:
    linear-gradient(rgba(255,255,255,.12) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.12) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(ellipse at center, black 35%, transparent 75%);
  mask-image:         radial-gradient(ellipse at center, black 35%, transparent 75%);
}

.fp-hero__blob {
  position: absolute; border-radius: 50%;
  pointer-events: none; filter: blur(80px); opacity: .6;
}
.fp-hero__blob--brand { width: 600px; height: 600px; top: -10%; right: -15%; background: var(--brand); opacity: .12; }
.fp-hero__blob--brand-alt   { width: 400px; height: 400px; bottom: -5%; left: -10%; background: var(--brand-alt); opacity: .08; }

.fp-hero__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 4rem;
  padding-block: 5rem 4rem;
  position: relative; z-index: 2;
}

/* Badge */
.fp-badge {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  padding: .35rem .9rem;
  border-radius: var(--radius-full);
  border: 1px solid var(--border);
  background: rgba(255,255,255,0.05);
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-body);
  margin-bottom: 1.5rem;
  backdrop-filter: blur(8px);
}

.fp-hero__heading {
  font-size: clamp(2.5rem, 5.5vw, 4.5rem);
  font-weight: 800;
  line-height: 1.1;
  letter-spacing: -.02em;
  margin-bottom: 1.5rem;
}

.fp-hero__subtext {
  font-size: 1.1rem;
  color: var(--text-body);
  line-height: 1.75;
  max-width: 520px;
  margin-bottom: 2.5rem;
}

.fp-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 2.5rem;
}

.fp-hero__trust {
  display: flex;
  flex-wrap: wrap;
  gap: 1.25rem;
}
.fp-trust-badge {
  display: flex;
  align-items: center;
  gap: .45rem;
  font-size: .8rem;
  font-weight: 500;
  color: var(--text-body);
}

/* Match card */
.fp-hero__card-wrap {
  position: relative;
  display: flex;
  justify-content: flex-end;
  align-items: center;
}
.fp-match-card {
  width: 100%;
  max-width: 340px;
  border-radius: var(--radius-xl);
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--border-brand);
  box-shadow: 0 20px 60px rgba(0,0,0,.5), 0 0 0 1px rgba(108,71,255,.1);
  overflow: hidden;
  backdrop-filter: blur(20px);
  transform: rotate(2deg);
  transition: transform .5s ease;
}
.fp-match-card:hover { transform: rotate(0deg); }
.fp-match-card__bar {
  height: 3px;
  background: linear-gradient(90deg, var(--brand), var(--brand-alt));
}
.fp-match-card__inner { padding: 1.5rem; }
.fp-match-card__head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 1.25rem;
}
.fp-match-card__label {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-body);
}
.fp-match-card__score {
  display: flex;
  align-items: center;
  gap: .3rem;
  background: var(--brand-alt-soft);
  color: var(--brand-alt);
  font-size: .75rem;
  font-weight: 700;
  padding: .3rem .65rem;
  border-radius: 6px;
}
.fp-match-card__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1.25rem;
}
.fp-match-card__avatar {
  width: 56px; height: 56px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--brand);
  flex-shrink: 0;
}
.fp-match-card__person strong { display: block; font-size: 1rem; font-weight: 700; }
.fp-match-card__person span  { font-size: .8rem; color: var(--text-body); }
.fp-match-card__skills-label { font-size: .7rem; color: var(--text-body); margin-bottom: .6rem; }
.fp-match-card__skills { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.25rem; }
.fp-skill-chip {
  padding: .3rem .75rem;
  background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,.06);
  border-radius: var(--radius-full);
  font-size: .75rem;
  font-weight: 500;
}
.fp-match-card__bars { display: flex; flex-direction: column; gap: .75rem; margin-bottom: 1.25rem; }
.fp-match-card__cta {
  display: block;
  text-align: center;
  padding: .75rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.07);
  border: 1px solid rgba(255,255,255,.05);
  font-size: .85rem;
  font-weight: 600;
  transition: background var(--transition);
  color: #fff;
}
.fp-match-card__cta:hover { background: rgba(108,71,255,0.25); color: #fff; }

/* Floating chip */
.fp-hero__chip {
  position: absolute;
  bottom: -2rem; left: -4rem;
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .85rem 1rem;
  border-radius: var(--radius-md);
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  backdrop-filter: blur(16px);
  animation: float 3s ease-in-out infinite;
}
.fp-hero__chip-icon {
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-alt-soft);
  border-radius: 50%;
  flex-shrink: 0;
}
.fp-hero__chip small { display: block; font-size: .7rem; color: var(--text-body); }
.fp-hero__chip strong { display: block; font-size: .9rem; font-weight: 700; }
@keyframes float {
  0%,100% { transform: translateY(0); }
  50%      { transform: translateY(-8px); }
}

/* ═══════════════════════════════════════════════════════════════════════════
   TRUST BAR
═══════════════════════════════════════════════════════════════════════════ */
.fp-trust-bar {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 3rem 0;
}
.fp-trust-bar__label {
  text-align: center;
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-body);
  margin-bottom: 2rem;
}
.fp-trust-bar__logos {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2.5rem 4rem;
  opacity: .5;
  filter: grayscale(1);
  transition: opacity var(--transition), filter var(--transition);
}
.fp-trust-bar__logos:hover { opacity: .85; filter: grayscale(0); }
.fp-trust-logo {
  display: flex;
  align-items: center;
  gap: .5rem;
  font-size: .95rem;
  font-weight: 700;
  white-space: nowrap;
}

/* ═══════════════════════════════════════════════════════════════════════════
   HOW IT WORKS
═══════════════════════════════════════════════════════════════════════════ */
.fp-how { padding: 6rem 0; }
.fp-how__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}
.fp-how__card {
  padding: 2.25rem;
  position: relative;
}
.fp-how__step {
  position: absolute;
  top: -1rem; right: -1rem;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: #1a1f35;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: .8rem;
  color: var(--brand);
}
.fp-how__icon {
  width: 60px; height: 60px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  margin-bottom: 1.5rem;
  transition: transform var(--transition);
}
.fp-how__card:hover .fp-how__icon { transform: scale(1.1); }
.fp-how__icon--brand { box-shadow: 0 0 20px rgba(108,71,255,.2); }
.fp-how__icon--brand-alt   { box-shadow: 0 0 20px rgba(0,212,170,.2); }
.fp-how__icon--accent { box-shadow: 0 0 20px rgba(155,89,182,.2); }
.fp-how__card h3 { font-size: 1.15rem; font-weight: 700; margin-bottom: .75rem; }
.fp-how__card p  { font-size: .9rem; color: var(--text-body); line-height: 1.7; }

/* ═══════════════════════════════════════════════════════════════════════════
   AI FEATURES SHOWCASE
═══════════════════════════════════════════════════════════════════════════ */
.fp-ai-features {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  border-bottom: 1px solid var(--border-soft);
  padding: 6rem 0;
  position: relative;
  overflow: hidden;
}
.fp-ai-features__gradient {
  position: absolute; inset: 0;
  background: linear-gradient(90deg, transparent, rgba(108,71,255,0.05));
  pointer-events: none;
}
.fp-ai-features__inner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  align-items: center;
  gap: 5rem;
  position: relative; z-index: 1;
}
.fp-ai-features__list { display: flex; flex-direction: column; gap: 2rem; margin: 2rem 0 2.5rem; }
.fp-ai-feature { display: flex; align-items: flex-start; gap: 1.25rem; }
.fp-ai-feature__icon {
  width: 48px; height: 48px;
  border-radius: var(--radius-md);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
}
.fp-ai-feature__icon--brand { background: var(--brand-soft); }
.fp-ai-feature__icon--brand-alt   { background: var(--brand-alt-soft); }
.fp-ai-feature__icon--accent { background: rgba(155,89,182,0.15); }
.fp-ai-feature h4 { font-size: 1.05rem; font-weight: 700; margin-bottom: .35rem; }
.fp-ai-feature p  { font-size: .9rem; color: var(--text-body); line-height: 1.65; }
.fp-ai-features__cta { margin-top: .5rem; }

/* Score card */
.fp-score-card {
  background: rgba(10,14,26,.8);
  border: 1px solid var(--border-brand);
  border-radius: var(--radius-xl);
  padding: 2rem;
  box-shadow: 0 0 50px rgba(108,71,255,.15);
  backdrop-filter: blur(20px);
}
.fp-score-card__top {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2rem;
}
.fp-score-card__top small { display: block; font-size: .75rem; color: var(--text-body); margin-bottom: .25rem; }
.fp-score-card__number { font-size: 2.75rem; font-weight: 800; color: var(--brand-alt); line-height: 1; }
.fp-score-card__bars-mini {
  display: flex;
  align-items: flex-end;
  gap: 4px;
}
.fp-score-bar-mini {
  width: 8px;
  background: var(--brand-alt);
  border-radius: 4px;
  opacity: .9;
}
.fp-score-card__metrics { display: flex; flex-direction: column; gap: 1.25rem; }
.fp-score-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1.75rem;
  padding-top: 1.25rem;
  border-top: 1px solid var(--border-soft);
  font-size: .78rem;
  color: var(--text-body);
}
.fp-score-card__play {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: rgba(255,255,255,0.06);
  display: flex; align-items: center; justify-content: center;
  font-size: .65rem;
  color: #fff;
  cursor: pointer;
  transition: background var(--transition);
}
.fp-score-card__play:hover { background: var(--brand-soft); }

/* ═══════════════════════════════════════════════════════════════════════════
   FEATURED JOBS
═══════════════════════════════════════════════════════════════════════════ */
.fp-jobs { padding: 6rem 0; }
.fp-jobs__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  margin-bottom: 2.5rem;
  gap: 1rem;
  flex-wrap: wrap;
}
.fp-jobs__all-link {
  display: flex;
  align-items: center;
  gap: .4rem;
  font-size: .9rem;
  font-weight: 600;
  color: var(--brand);
  white-space: nowrap;
}
.fp-jobs__all-link:hover { color: #fff; }
.fp-jobs__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1.25rem;
}
.fp-job-card {
  display: flex;
  align-items: center;
  gap: 1.5rem;
  padding: 1.5rem;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  border: 1px solid var(--border-soft);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
  color: var(--text-strong);
}
.fp-job-card:hover {
  background: var(--surface-card-hover);
  border-color: var(--border-brand);
  transform: translateY(-2px);
}
.fp-job-card__logo {
  width: 60px; height: 60px;
  border-radius: var(--radius-md);
  background: linear-gradient(135deg, var(--brand), var(--accent));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.5rem; font-weight: 800;
  flex-shrink: 0;
  box-shadow: 0 4px 16px rgba(108,71,255,.35);
}
.fp-job-card__body { flex: 1; min-width: 0; }
.fp-job-card__title {
  font-size: 1.05rem;
  font-weight: 700;
  margin-bottom: .4rem;
  transition: color var(--transition);
}
.fp-job-card:hover .fp-job-card__title { color: var(--brand); }
.fp-job-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-bottom: .85rem;
  font-size: .8rem;
  color: var(--text-body);
}
.fp-job-card__meta span {
  display: flex;
  align-items: center;
  gap: .3rem;
}
.fp-job-card__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.fp-job-card__salary {
  font-weight: 600;
  font-size: .9rem;
  color: var(--text-strong);
}
.fp-job-card__apply {
  display: inline-flex;
  padding: .35rem .9rem;
  border-radius: var(--radius-full);
  background: rgba(255,255,255,.08);
  font-size: .78rem;
  font-weight: 600;
  transition: background var(--transition);
  color: #fff;
}
.fp-job-card:hover .fp-job-card__apply { background: var(--brand); }

/* ═══════════════════════════════════════════════════════════════════════════
   TESTIMONIALS
═══════════════════════════════════════════════════════════════════════════ */
.fp-testimonials {
  background: var(--surface);
  border-top: 1px solid var(--border-soft);
  padding: 6rem 0;
}
.fp-testimonials .fp-section-title { margin-bottom: 3rem; }
.fp-testimonials__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1.5rem;
}
.fp-testimonial-card {
  padding: 2rem;
  border-radius: var(--radius-lg);
  background: rgba(255,255,255,0.02);
  border: 1px solid var(--border-soft);
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
}
.fp-stars { display: flex; gap: .25rem; }
.fp-testimonial-card__quote {
  font-size: .95rem;
  color: var(--text-body);
  font-style: italic;
  line-height: 1.75;
  flex: 1;
}
.fp-testimonial-card__person {
  display: flex;
  align-items: center;
  gap: 1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}
.fp-testimonial-card__avatar {
  width: 44px; height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(255,255,255,.12), rgba(255,255,255,.04));
  border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 1rem;
  flex-shrink: 0;
}
.fp-testimonial-card__person strong { display: block; font-size: .95rem; font-weight: 700; }
.fp-testimonial-card__person small  { display: block; font-size: .75rem; color: var(--text-body); }

/* ═══════════════════════════════════════════════════════════════════════════
   STATS BANNER
═══════════════════════════════════════════════════════════════════════════ */
.fp-stats {
  position: relative;
  padding: 5rem 0;
  overflow: hidden;
  background: linear-gradient(135deg, var(--brand) 0%, var(--accent) 100%);
}
.fp-stats__overlay {
  position: absolute; inset: 0; pointer-events: none;
  background-image: radial-gradient(circle at 20% 50%, rgba(255,255,255,.08) 0%, transparent 50%),
                    radial-gradient(circle at 80% 50%, rgba(0,0,0,.1) 0%, transparent 50%);
}
.fp-stats__grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2rem;
  position: relative; z-index: 1;
  text-align: center;
}
.fp-stat__number {
  font-size: clamp(2.25rem, 5vw, 3.5rem);
  font-weight: 800;
  line-height: 1;
  margin-bottom: .5rem;
}
.fp-stat__label {
  font-size: .9rem;
  color: rgba(255,255,255,.8);
  font-weight: 500;
}

/* ═══════════════════════════════════════════════════════════════════════════
   CTA SECTION
═══════════════════════════════════════════════════════════════════════════ */
.fp-cta {
  padding: 8rem 0;
  text-align: center;
  position: relative;
  overflow: hidden;
}
.fp-cta__glow {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 700px; height: 700px;
  background: var(--brand);
  border-radius: 50%;
  filter: blur(160px);
  opacity: .15;
  pointer-events: none;
}
.fp-cta__inner { position: relative; z-index: 1; }
.fp-cta__heading {
  font-size: clamp(2.25rem, 5vw, 4rem);
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.25rem;
}
.fp-cta__sub {
  font-size: 1.1rem;
  color: var(--text-body);
  max-width: 560px;
  margin: 0 auto 3rem;
  line-height: 1.7;
}
.fp-cta__actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.25rem;
}

/* ═══════════════════════════════════════════════════════════════════════════
   FOOTER
═══════════════════════════════════════════════════════════════════════════ */
.site-footer { background: var(--surface-footer); }
.footer-main { padding: 4.5rem 0; border-top: 1px solid var(--border-soft); }
.footer-grid {
  display: grid;
  grid-template-columns: 1.6fr 1fr 1fr 1.4fr;
  gap: 3rem 2.5rem;
}

/* Brand */
.footer-logo-link {
  display: flex;
  align-items: center;
  gap: .6rem;
  font-weight: 700;
  font-size: .95rem;
  color: #fff;
  margin-bottom: 1.25rem;
}
.footer-logo-link:hover { color: #fff; }
.footer-dot {
  display: inline-block;
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--brand);
}
.footer-tagline {
  font-size: .85rem;
  color: var(--text-body);
  line-height: 1.7;
  margin-bottom: 1.5rem;
  max-width: 260px;
}
.footer-social { display: flex; gap: .75rem; }
.social-link {
  width: 36px; height: 36px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--border);
  color: var(--text-body);
  transition: all var(--transition);
}
.social-link:hover { border-color: var(--brand); color: #fff; background: var(--brand-soft); }

/* Footer cols */
.footer-col-title {
  font-size: .85rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: 1.25rem;
  color: #fff;
}
.footer-links { display: flex; flex-direction: column; gap: .75rem; }
.footer-links a {
  font-size: .875rem;
  color: var(--text-body);
  transition: color var(--transition);
}
.footer-links a:hover { color: #fff; }

/* Newsletter */
.footer-newsletter-text {
  font-size: .82rem;
  color: var(--text-body);
  margin-bottom: 1rem;
  line-height: 1.6;
}
.footer-form-row {
  display: flex;
  background: rgba(255,255,255,0.05);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--transition);
}
.footer-form-row:focus-within { border-color: var(--brand); }
.footer-input {
  flex: 1;
  background: none;
  border: none;
  outline: none;
  padding: .65rem 1rem;
  font-size: .85rem;
  color: #fff;
  font-family: var(--font);
}
.footer-input::placeholder { color: var(--text-body); }
.footer-form-btn {
  padding: .65rem .85rem;
  background: var(--brand);
  color: #fff;
  border: none;
  cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--transition);
}
.footer-form-btn:hover { background: var(--brand-dark); }

/* Footer bottom */
.footer-bottom {
  border-top: 1px solid var(--border-soft);
  padding: 1.25rem 0;
}
.footer-bottom-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 1rem;
  flex-wrap: wrap;
}
.footer-copyright {
  font-size: .78rem;
  color: var(--text-body);
}
.footer-copyright a { color: var(--text-body); }
.footer-copyright a:hover { color: #fff; }
.footer-legal-links {
  display: flex;
  gap: 1.5rem;
}
.footer-legal-links a {
  font-size: .78rem;
  color: var(--text-body);
}
.footer-legal-links a:hover { color: #fff; }

/* ═══════════════════════════════════════════════════════════════════════════
   INNER PAGE STYLES (jobs archive, single, page)
═══════════════════════════════════════════════════════════════════════════ */
.main-content,
.jobs-archive,
.single-job,
.page-content {
  padding-top: var(--header-h);
  min-height: 70vh;
}

/* Page header banner */
.page-header-banner {
  background: var(--surface);
  border-bottom: 1px solid var(--border-soft);
  padding: 4rem 0 3rem;
}
.page-header-banner__eyebrow {
  font-size: .78rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--brand);
  margin-bottom: .75rem;
}
.page-header-banner__title {
  font-size: clamp(1.75rem, 3.5vw, 2.5rem);
  font-weight: 800;
  margin-bottom: .75rem;
}
.page-header-banner__sub { font-size: 1rem; color: var(--text-body); }

/* Content sections */
.section-pad { padding: 5rem 0; }
.section-pad-lg { padding: 7rem 0; }

/* WP block content alignment on dark bg */
.wp-block-button__link { border-radius: var(--radius-full) !important; }
.entry-content h1, .entry-content h2, .entry-content h3 { font-weight: 800; }
.entry-content p { color: var(--text-body); line-height: 1.75; }
.entry-content a { color: var(--brand); }
.entry-content a:hover { color: #fff; }

/* WP pagination
   paginate_links( 'type' => 'list' ) emits <ul class="page-numbers"> whose
   children also carry .page-numbers, so the container shares the item class.
   The item rules must therefore exclude the <ul> (:not(ul)) — otherwise the
   whole list is sized as a single 40px circle, which squashed "Next »" onto
   two lines. The container also needs its own layout: the old rules only
   targeted .pagination/.nav-links, which this markup never emits. */
.wp-block-query-pagination,
.pagination,
.nav-links,
ul.page-numbers {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem;
  justify-content: center;
  margin-top: 3rem;
  padding: 0;
  list-style: none;
}

ul.page-numbers li {
  display: flex;
}

.page-numbers:not(ul),
.nav-links a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
  height: 40px;
  padding-inline: .5rem;
  border-radius: 50%;
  background: var(--surface-tint);
  border: 1px solid var(--border);
  color: var(--text-body);
  font-size: .88rem;
  font-weight: 650;
  transition: all var(--transition);
}

/* Prev/next hold words, not a digit, so they grow and go pill-shaped. */
.page-numbers.prev,
.page-numbers.next {
  width: auto;
  padding-inline: .9rem;
  border-radius: 999px;
  white-space: nowrap;
}

.page-numbers:not(ul).current,
.page-numbers:not(ul):hover,
.nav-links a:hover {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
}

/* The "…" gap is not a target, so it should not look like one. */
.page-numbers.dots {
  background: none;
  border-color: transparent;
}

/* ═══════════════════════════════════════════════════════════════════════════
   PLUGIN BLOCKS DARK THEME OVERRIDE
═══════════════════════════════════════════════════════════════════════════ */
.tnai-form-wrap,
.tnai-result-wrap,
.tnai-chatbot-widget {
  --tnai-bg:      var(--surface-card);
  --tnai-border:  var(--border-brand);
  --tnai-accent:  var(--brand);
  --tnai-text:    var(--text-strong);
  --tnai-muted:   var(--text-body);
  --tnai-radius:  var(--radius-lg);
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE
═══════════════════════════════════════════════════════════════════════════ */
@media (max-width: 1024px) {
  .fp-hero__inner { grid-template-columns: 1fr; text-align: center; }
  .fp-hero__copy { order: 1; }
  .fp-hero__card-wrap { order: 2; justify-content: center; max-width: 380px; margin: 0 auto; }
  .fp-hero__chip { left: -1rem; bottom: -3rem; }
  .fp-hero__actions { justify-content: center; }
  .fp-hero__trust { justify-content: center; }
  .fp-hero__subtext { margin-inline: auto; }

  .fp-ai-features__inner { grid-template-columns: 1fr; }
  .fp-section-sub--left { margin-inline: auto; text-align: center; }
  .fp-section-title--left { text-align: center; }
  .fp-ai-features__cta { margin-inline: auto; display: block; width: fit-content; }

  .footer-grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 768px) {
  .fp-how__grid           { grid-template-columns: 1fr; }
  .fp-jobs__grid          { grid-template-columns: 1fr; }
  .fp-testimonials__grid  { grid-template-columns: 1fr; }
  .fp-stats__grid         { grid-template-columns: repeat(2, 1fr); gap: 2.5rem; }
  .fp-ai-features__inner  { gap: 3rem; }

  .primary-navigation { display: none; }
  .primary-navigation.is-open {
    display: flex;
    position: fixed; top: var(--header-h); left: 0; right: 0;
    background: rgba(10,14,26,.97);
    border-top: 1px solid var(--border-soft);
    padding: 1.5rem;
  }
  .primary-navigation.is-open .nav-menu {
    flex-direction: column;
    gap: 1.25rem;
    align-items: flex-start;
    width: 100%;
  }
  .primary-navigation.is-open .nav-menu a { font-size: 1.1rem; }
  .mobile-menu-toggle { display: flex; }
  .header-actions .btn-ghost { display: none; }

  .footer-grid { grid-template-columns: 1fr; gap: 2rem; }
  .footer-bottom-inner { flex-direction: column; text-align: center; }
}

@media (max-width: 480px) {
  .fp-stats__grid { grid-template-columns: 1fr 1fr; }
  .fp-cta__actions { flex-direction: column; align-items: center; }
  .fp-hero__actions { flex-direction: column; width: 100%; }
  .fp-hero__actions .btn { width: 100%; justify-content: center; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   SCROLL REVEAL ANIMATION
═══════════════════════════════════════════════════════════════════════════ */
.reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .55s ease, transform .55s ease;
}
.reveal.in-view {
  opacity: 1;
  transform: translateY(0);
}


body {
  background: #ffff;
  color: var(--text-strong);
  background-image: none;
}

.btn {
  min-height: 42px;
  border-radius: 6px;
  letter-spacing: 0;
}

.btn-primary {
  background: var(--brand);
  box-shadow: 0 10px 22px rgba(22, 119, 102, 0.18);
}

.btn-primary:hover {
  background: var(--brand-dark);
  box-shadow: 0 12px 26px rgba(22, 119, 102, 0.24);
}

.btn-outline-white {
  border-color: rgba(255, 255, 255, 0.7);
  color: #fff;
}

.btn-outline-white:hover {
  background: #fff;
  color: #17201e;
}

.btn-ghost {
  color: rgba(255, 255, 255, 0.82);
}

.site-header {
  padding-block: 1rem;
}

.site-header.scrolled {
  background: rgba(255, 255, 255, 0.94);
  border-bottom-color: rgba(23, 32, 30, 0.1);
  box-shadow: 0 10px 28px rgba(23, 32, 30, 0.08);
}

.site-header.scrolled .site-branding,
.site-header.scrolled .nav-menu a,
.site-header.scrolled .btn-ghost,
.site-header.scrolled .mobile-menu-toggle .hamburger-line {
  color: var(--text-strong);
}

.site-header.scrolled .hamburger-line {
  background: var(--text-strong);
}

.site-header.scrolled .nav-menu a:hover {
  color: var(--brand);
}

.site-branding,
.site-branding:hover,
.nav-menu a {
  color: #fff;
}

.site-name-dot,
.footer-dot {
  display: none;
}

.site-logo-icon,
.site-logo-mark {
  border-radius: 6px;
}

.site-logo-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  background: var(--brand);
  color: #fff;
  font-size: 0.72rem;
  font-weight: 850;
  letter-spacing: 0;
}

.footer-logo-link .site-logo-mark {
  width: 30px;
  height: 30px;
  flex-basis: 30px;
}

.nav-menu {
  gap: 1.6rem;
}

.nav-menu a {
  font-weight: 650;
}

.header-actions .btn-primary {
  color: #fff;
}

.recruiter-home {
  background: var(--surface-page);
  color: var(--text-strong);
  overflow: hidden;
}

/* ── Homepage hero: search first ──────────────────────────────────────────
   A single centred column on a dark wash. The search bar is the primary
   action, so nothing above or beside it may out-weigh it visually.
   ------------------------------------------------------------------------ */
.tn-hero {
  /* Follow the brand colours the owner sets in theme settings: the settings
     page injects color_primary/_dark/_accent onto --brand/--brand-dark/
     --accent. Literals are the shipped defaults, used when nothing is set.
     --tn-hero-deep is deliberately NOT a brand token — it is the wash, which
     is what gets adjusted if hero text contrast ever falls short. */
  --tn-hero-green: var(--brand, #16846f);
  --tn-hero-green-dark: var(--brand-dark, #0d5f51);
  --tn-hero-gold: var(--accent, #c99f3f);
  --tn-hero-gold-soft: #e6c98a;
  --tn-hero-deep: #101d1a;
  --tn-hero-ink: #14201d;
  --tn-hero-line: rgba(20, 32, 29, 0.14);

  position: relative;
  isolation: isolate;
  background: var(--tn-hero-deep);
  color: #fff;
  padding-top: calc(var(--header-h) + 3.5rem);
}

@supports (color: color-mix(in srgb, red, blue)) {
  .tn-hero {
    --tn-hero-gold-soft: color-mix(in srgb, var(--tn-hero-gold) 58%, #fff);
  }
}

.tn-hero__media,
.tn-hero__wash {
  position: absolute;
  inset: 0;
}

.tn-hero__media {
  z-index: -2;
}

.tn-hero__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.18;
}

/* Dark wash carries every contrast ratio in the hero; adjust this rather
   than the brand colours if text falls short. */
.tn-hero__wash {
  z-index: -1;
  background:
    radial-gradient(120% 90% at 50% 0%, rgba(22, 132, 111, 0.28) 0%, transparent 62%),
    linear-gradient(180deg, rgba(16, 29, 26, 0.86) 0%, rgba(16, 29, 26, 0.94) 100%);
}

.tn-hero__body {
  max-width: 820px;
  margin: 0 auto;
  padding: 1rem var(--container-pad) 0;
  text-align: center;
}

.tn-hero__count {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  margin-bottom: 1.1rem;
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--tn-hero-gold-soft);
}

.tn-hero__pulse {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--tn-hero-gold);
  box-shadow: 0 0 0 4px rgba(201, 159, 63, 0.22);
}

.tn-hero__title {
  margin: 0 0 1rem;
  font-size: clamp(2.1rem, 5.2vw, 3.7rem);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 800;
  color: #fff;
}

.tn-hero__title em {
  font-family: 'Playfair Display', Georgia, serif;
  font-style: italic;
  font-weight: 400;
  color: var(--tn-hero-gold-soft);
  letter-spacing: -0.01em;
}

.tn-hero__lead {
  max-width: 560px;
  margin: 0 auto 2.2rem;
  font-size: 1.08rem;
  color: rgba(255, 255, 255, 0.78);
}

/* ── Search bar ───────────────────────────────────────────────────────── */
.tn-hero__search {
  display: flex;
  gap: 0.35rem;
  padding: 0.45rem;
  border-radius: var(--radius-md);
  background: #fff;
  box-shadow: 0 26px 60px rgba(0, 0, 0, 0.34);
  text-align: left;
}

.tn-hero__field {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
  padding: 0.5rem 0.9rem;
}

.tn-hero__field + .tn-hero__field {
  border-left: 1px solid var(--tn-hero-line);
}

.tn-hero__field label {
  font-size: 0.68rem;
  text-transform: uppercase;
  letter-spacing: 0.09em;
  font-weight: 700;
  color: #5f6f6a;
}

.tn-hero__field input {
  width: 100%;
  border: 0;
  padding: 0;
  background: transparent;
  font-family: var(--font);
  font-size: 0.98rem;
  font-weight: 500;
  color: var(--tn-hero-ink);
  line-height: 1.6;
  appearance: none;
}

.tn-hero__field input::placeholder {
  color: #9aa8a3;
  font-weight: 400;
}

.tn-hero__field input:focus {
  outline: none;
}

/* The whole field lights up rather than the bare input, so the focus ring
   stays visible against the white bar. */
.tn-hero__field:focus-within {
  border-radius: 8px;
  outline: 2px solid var(--tn-hero-green);
  outline-offset: -2px;
}

.tn-hero__submit {
  flex: none;
  padding: 0.95rem 1.6rem;
  border-radius: 9px;
  background: var(--tn-hero-green);
  color: #fff;
  font-size: 1rem;
  font-weight: 700;
  transition: background var(--transition);
}

.tn-hero__submit:hover {
  background: var(--tn-hero-green-dark);
}

.tn-hero__submit:focus-visible {
  outline: 3px solid var(--tn-hero-gold-soft);
  outline-offset: 2px;
}

/* Text links, deliberately not pills or chips — the templated look the
   client rejected. */
.tn-hero__popular {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 0.5rem 0.9rem;
  margin-top: 1.4rem;
  font-size: 0.9rem;
  color: rgba(255, 255, 255, 0.66);
}

.tn-hero__popular a {
  color: rgba(255, 255, 255, 0.9);
  border-bottom: 1px solid rgba(255, 255, 255, 0.32);
  padding-bottom: 1px;
}

.tn-hero__popular a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.tn-hero__popular a:focus-visible {
  outline: 2px solid var(--tn-hero-gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Employer strip ───────────────────────────────────────────────────────
   Full-bleed darker band on the hero's bottom edge. Deliberately a link and
   not a button: if this starts competing with the search submit above it, the
   hero has stopped being candidate-first.
   ------------------------------------------------------------------------ */
.tn-hero__employer {
  margin-top: 3.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
  background: rgba(0, 0, 0, 0.22);
}

.tn-hero__employer p {
  max-width: var(--container-max);
  margin-inline: auto;
  padding: 1.15rem var(--container-pad);
  font-size: 0.94rem;
  color: rgba(255, 255, 255, 0.7);
}

.tn-hero__employer a {
  color: var(--tn-hero-gold-soft);
  font-weight: 600;
  border-bottom: 1px solid rgba(201, 159, 63, 0.5);
  white-space: nowrap;
}

.tn-hero__employer a:hover {
  color: #fff;
  border-bottom-color: #fff;
}

.tn-hero__employer a:focus-visible {
  outline: 2px solid var(--tn-hero-gold-soft);
  outline-offset: 3px;
  border-radius: 2px;
}

/* ── Hero: 390px and reduced motion ───────────────────────────────────── */
@media (max-width: 480px) {
  .tn-hero {
    padding-top: calc(var(--header-h) + 2.25rem);
  }

  .tn-hero__body {
    padding-inline: 1.25rem;
  }

  .tn-hero__count {
    font-size: 0.72rem;
    letter-spacing: 0.04em;
  }

  /* Long words in an owner-edited headline must not push the page sideways. */
  .tn-hero__title {
    overflow-wrap: break-word;
  }

  .tn-hero__lead {
    font-size: 1rem;
  }

  .tn-hero__popular {
    justify-content: flex-start;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .tn-hero,
  .tn-hero * {
    animation: none !important;
    transition: none !important;
  }
}

@media (max-width: 720px) {
  .tn-hero__search {
    flex-direction: column;
  }

  .tn-hero__field + .tn-hero__field {
    border-left: 0;
    border-top: 1px solid var(--tn-hero-line);
  }

  .tn-hero__submit {
    width: 100%;
  }
}

.rh-eyebrow {
  margin-bottom: 0.9rem;
  color: #c18a2d;
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rh-contact-line span {
  display: block;
  margin-bottom: 0.25rem;
  color: var(--text-body);
  font-size: 0.76rem;
  font-weight: 750;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rh-partners,
.rh-services,
.rh-process,
.rh-proof,
.rh-contact,
.rh-candidate-strip {
  padding: 5.5rem 0;
}

.rh-partners {
  background: #fff;
}

.rh-section-head {
  max-width: 790px;
  margin-bottom: 2.4rem;
}

.rh-section-head--split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 0.55fr);
  gap: 2.5rem;
  max-width: none;
  align-items: end;
}

.rh-section-head h2,
.rh-process__intro h2,
.rh-proof__panel h2,
.rh-contact h2,
.rh-candidate-strip h2 {
  color: var(--text-strong);
  font-size: 2.35rem;
  line-height: 1.12;
  font-weight: 820;
  letter-spacing: 0;
}

.rh-section-head p:not(.rh-eyebrow),
.rh-process__intro p,
.rh-proof__panel p,
.rh-contact p,
.rh-candidate-strip p {
  color: var(--text-body);
  font-size: 1rem;
  line-height: 1.75;
}

.rh-logo-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 0.8rem;
}

.rh-logo-grid span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 70px;
  padding: 0.8rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-subtle);
  color: #31413e;
  font-weight: 800;
  text-align: center;
}

.rh-services {
  background: var(--surface-tint);
}

.rh-card-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 1rem;
}

.rh-service-card {
  min-height: 280px;
  padding: 1.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.rh-service-card__meta {
  display: block;
  min-height: 38px;
  margin-bottom: 1rem;
  color: var(--brand);
  font-size: 0.78rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.rh-service-card h3 {
  margin-bottom: 0.75rem;
  font-size: 1.35rem;
  line-height: 1.2;
}

.rh-service-card p {
  color: var(--text-body);
  line-height: 1.75;
}

.rh-process {
  background: #fff;
}

.rh-process__inner {
  display: grid;
  grid-template-columns: minmax(280px, 0.55fr) minmax(0, 1fr);
  gap: 4rem;
}

.rh-process__intro {
  position: sticky;
  top: 7rem;
  align-self: start;
}

.rh-text-link {
  display: inline-flex;
  margin-top: 1.5rem;
  color: var(--brand);
  font-weight: 800;
  border-bottom: 2px solid var(--brand);
}

.rh-process__steps {
  display: grid;
  gap: 0.85rem;
}

.rh-step {
  display: grid;
  grid-template-columns: 64px 1fr;
  gap: 1rem;
  padding: 1.15rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: var(--surface-subtle);
}

.rh-step > span {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 52px;
  height: 52px;
  border-radius: 8px;
  background: #e0efe9;
  color: var(--brand);
  font-weight: 850;
}

.rh-step h3 {
  margin-bottom: 0.35rem;
  font-size: 1.08rem;
}

.rh-step p {
  color: var(--text-body);
  line-height: 1.65;
}

.rh-proof {
  background: #17201e;
  color: #fff;
}

.rh-proof .rh-eyebrow {
  color: #e3bd6e;
}

.rh-proof__inner {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.55fr);
  gap: 1.2rem;
}

.rh-proof__panel,
.rh-sector-panel {
  padding: 2rem;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.055);
}

.rh-proof__panel h2,
.rh-proof__panel p,
.rh-sector-panel h3 {
  color: #fff;
}

.rh-proof__panel p {
  max-width: 760px;
  color: rgba(255, 255, 255, 0.72);
}

.rh-metrics {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.8rem;
  margin-top: 2rem;
}

.rh-metrics div {
  min-height: 150px;
  padding: 1rem;
  border-radius: 8px;
  background: rgba(255, 255, 255, 0.08);
}

.rh-metrics strong {
  display: block;
  margin-bottom: 0.55rem;
  color: #e3bd6e;
  font-size: 2.35rem;
  line-height: 1;
}

.rh-metrics span {
  color: rgba(255, 255, 255, 0.74);
  line-height: 1.55;
}

.rh-sector-panel h3 {
  margin-bottom: 1rem;
  font-size: 1.2rem;
}

.rh-sector-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
}

.rh-sector-list span {
  padding: 0.5rem 0.72rem;
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.08);
  color: rgba(255, 255, 255, 0.8);
  font-weight: 700;
}

.rh-contact {
  background: var(--surface-tint);
}

.rh-contact__inner {
  display: grid;
  grid-template-columns: minmax(0, 0.9fr) minmax(320px, 0.55fr);
  gap: 3rem;
  align-items: start;
}

.rh-contact-card {
  display: grid;
  gap: 0.8rem;
  padding: 1rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.rh-contact-line {
  display: block;
  padding: 1rem;
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--text-strong);
}

.rh-contact-line:hover {
  background: var(--surface-tint-strong);
  color: var(--text-strong);
}

.rh-contact-line strong {
  display: block;
  line-height: 1.35;
}

.rh-candidate-strip {
  background: #167766;
  color: #fff;
}

.rh-candidate-strip__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.rh-candidate-strip h2 {
  color: #fff;
  font-size: 1.75rem;
}

.rh-candidate-strip p {
  max-width: 650px;
  color: rgba(255, 255, 255, 0.78);
}

.site-footer {
  color: rgba(255, 255, 255, 0.82);
}

.footer-main {
  border-top: 0;
}

.footer-logo-link,
.footer-logo-link:hover,
.footer-col-title {
  color: #fff;
}

.footer-tagline,
.footer-links a,
.footer-newsletter-text,
.footer-copyright,
.footer-copyright a,
.footer-legal-links a {
  color: rgba(255, 255, 255, 0.7);
}

.footer-links a:hover,
.footer-copyright a:hover,
.footer-legal-links a:hover,
.footer-newsletter-text a:hover {
  color: #fff;
}

.footer-newsletter-text a {
  color: rgba(255, 255, 255, 0.82);
}

.footer-bottom {
  border-top-color: rgba(255, 255, 255, 0.1);
}

body:not(.front-page) .site-header {
  background: rgba(255, 255, 255, 0.96);
  border-bottom-color: rgba(23, 32, 30, 0.1);
  box-shadow: 0 10px 28px rgba(23, 32, 30, 0.08);
}

body:not(.front-page) .site-branding,
body:not(.front-page) .site-branding:hover,
body:not(.front-page) .nav-menu a,
body:not(.front-page) .btn-ghost {
  color: var(--text-strong);
}

/* ── Logo variant switch ──────────────────────────────────────────────────
   The header sits on three different backgrounds: the dark hero on the front
   page, and a near-white bar both when scrolled and on every inner page.
   header.php renders both artworks; these rules pick the one that contrasts.
   ------------------------------------------------------------------------ */
.site-logo {
  display: block;
  width: auto;
}

/* Default context is the dark hero, so show the white artwork. */
.site-logo--on-light {
  display: none;
}

/* Light header: swap to the dark artwork. */
.site-header.scrolled .site-logo--on-dark,
body:not(.front-page) .site-logo--on-dark {
  display: none;
}

.site-header.scrolled .site-logo--on-light,
body:not(.front-page) .site-logo--on-light {
  display: block;
}

/* Stopgap for a site with only one logo uploaded: a white monochrome mark
   would vanish on a light header, so darken it there. Once a dedicated
   light-background logo is set, header.php stops emitting this class and the
   real artwork is used instead. */
.site-header.scrolled .site-logo--auto-contrast,
body:not(.front-page) .site-logo--auto-contrast {
  filter: brightness(0);
  opacity: 0.88;
}

body:not(.front-page) .nav-menu a:hover,
body:not(.front-page) .nav-menu li.current-menu-item a {
  color: var(--brand);
}

body:not(.front-page) .hamburger-line {
  background: var(--text-strong);
}

.tnai-chatbot-toggle,
.tnai-chatbot-inline,
.tnai-chatbot-widget {
  display: none !important;
}

.btn-outline {
  background: transparent;
  border-color: var(--border-brand);
  color: var(--brand);
}

.btn-outline:hover {
  background: var(--brand-soft);
  color: var(--brand-dark);
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.jobs-archive-page,
.single-job-page,
.page-content,
.site-content-area {
  min-height: 70vh;
  padding-top: calc(var(--header-h) + 2.5rem);
  background: #ffffff;
}

.jobs-archive-hero {
  padding: 2rem 0 1.25rem;
}

.jobs-archive-page .jobs-archive-title {
  font-size: clamp(1.6rem, 2.4vw, 2.1rem);
}

.jobs-archive-title,
.page-title,
.job-detail-title {
  margin: 0 0 0.75rem;
  color: var(--text-strong);
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1.05;
  letter-spacing: 0;
}

.jobs-archive-subtitle,
.archive-description,
.page-body,
.job-detail-body,
.jobs-results-info {
  color: var(--text-body);
}

.jobs-layout {
  display: grid;
  grid-template-columns: minmax(360px, 440px) minmax(0, 1fr);
  gap: 1.5rem;
  align-items: start;
  padding-bottom: 5rem;
}

.jobs-filters,
.sidebar-card {
  position: sticky;
  top: 6.5rem;
  padding: 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.filter-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-bottom: 1rem;
}

.filter-title,
.sidebar-card-title {
  margin: 0;
  color: var(--text-strong);
  font-size: 1rem;
}

.filter-clear {
  color: var(--brand);
  font-size: 0.82rem;
  font-weight: 800;
}

.filter-form {
  display: grid;
  gap: 1rem;
}

.filter-group {
  display: grid;
  gap: 0.35rem;
}

.filter-label {
  color: var(--text-body);
  font-size: 0.76rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.filter-input,
.filter-select {
  min-height: 42px;
  width: 100%;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  background: var(--surface-subtle);
  color: var(--text-strong);
  font: inherit;
  padding: 0.65rem 0.75rem;
}

.jobs-list-area {
  min-width: 0;
}

.jobs-results-info {
  display: flex;
  align-items: center;
  min-height: 42px;
  margin-bottom: 1rem;
  font-weight: 700;
}

.jobs-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: .5rem;
}

.job-card {
  min-width: 0;
}

.job-card-inner {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  gap: .4rem;
  padding: .9rem 1.05rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.job-card-header {
  display: flex;
  gap: .7rem;
  align-items: flex-start;
}

.job-card-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 6px;
  background: var(--surface-tint-strong);
}

.job-card-title {
  margin: 0;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.3;
}

.job-card-title a {
  color: var(--text-strong);
}

.job-card-title a:hover,
.job-card.is-selected .job-card-title a {
  color: var(--brand);
}

.job-card-company,
.similar-job-meta {
  display: block;
  color: var(--text-body);
  font-weight: 650;
}

.job-badge.featured {
  width: fit-content;
  padding: 0.3rem 0.55rem;
  border-radius: 6px;
  background: #f7ecd7;
  color: #8b611c;
  font-size: 0.76rem;
  font-weight: 800;
}

.job-card-meta,
.job-detail-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem 0.8rem;
  color: var(--text-body);
}

.job-meta-item,
.meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}

.job-card-skills,
.skills-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.45rem;
}

.skill-tag {
  display: inline-flex;
  padding: 0.35rem 0.55rem;
  border-radius: 6px;
  background: var(--surface-tint);
  color: var(--text-body);
  font-size: 0.78rem;
  font-weight: 750;
}

.job-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: auto;
  padding-top: 1rem;
  border-top: 1px solid var(--border-soft);
}

.job-card-salary {
  color: var(--text-strong);
  font-weight: 800;
}

.single-job-layout {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 360px;
  gap: 2rem;
  align-items: start;
  padding: 2.5rem 0 5rem;
}

.single-job-content,
.page-article,
.content-wrap {
  margin: 20px;
  padding: 1.4rem;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
  box-shadow: var(--shadow-card);
}

.job-detail-header {
  padding-bottom: 1.5rem;
  border-bottom: 1px solid var(--border-soft);
}

.job-detail-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.8rem;
  margin-top: 1.5rem;
}

.job-detail-body {
  padding-top: 1.5rem;
}

.job-detail-body h2,
.page-body h2 {
  margin: 2rem 0 0.75rem;
  color: var(--text-strong);
}

.job-section,
.entry-content p,
.entry-content li {
  color: var(--text-body);
  line-height: 1.75;
}

/* ── Editorial page body ──────────────────────────────────────────────────
   Long-form pages (privacy policy, contact) are written as plain Gutenberg
   blocks and had no rhythm of their own: headings sat on top of the text and
   the global `ul { list-style: none }` reset left lists with no markers.

   Scoped to direct children so the form shortcodes these pages embed keep
   their own spacing — `.apply-block` markup is nested and never matches.
   ------------------------------------------------------------------------ */
.page-body > h2 {
  margin: 2.75rem 0 .85rem;
  padding-top: 1.75rem;
  border-top: 1px solid var(--border);
  font-size: 1.375rem;
  line-height: 1.3;
  letter-spacing: -.01em;
}

.page-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.page-body > h3 {
  margin: 1.75rem 0 .6rem;
  font-size: 1.0625rem;
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-strong);
}

.page-body > p {
  margin: 0 0 1.1rem;
  max-width: 74ch;
}

.page-body > ul,
.page-body > ol {
  margin: 0 0 1.35rem;
  padding-left: 1.35rem;
  max-width: 74ch;
  /* Restores the markers the global list reset removes. */
  list-style: disc outside;
}

.page-body > ol {
  list-style: decimal outside;
}

.page-body > ul > li,
.page-body > ol > li {
  margin-bottom: .5rem;
  padding-left: .2rem;
  list-style: inherit;
}

.page-body > ul > li::marker,
.page-body > ol > li::marker {
  color: var(--brand);
}

/* Inline labels that open a list item or paragraph. */
.page-body strong {
  color: var(--text-strong);
  font-weight: 700;
}

.page-body > p > em:only-child {
  color: var(--text-body);
  font-size: .9375rem;
}

/* ── Imported job description ─────────────────────────────────────────────
   Bodies come from the old site as pasted rich text with no headings; the
   the_content filter in inc/job-content-sections.php promotes the section
   titles to <h2>. These rules give them hierarchy, and restore list markers
   that the global `ul { list-style: none }` reset strips.
   ------------------------------------------------------------------------ */
.job-detail-body > h2 {
  margin: 2.5rem 0 .9rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border);
  font-size: 1.25rem;
  line-height: 1.3;
  font-weight: 800;
  letter-spacing: -.01em;
  color: var(--text-strong);
}

/* The first section needs no rule above it — the title block already divides. */
.job-detail-body > h2:first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

.job-detail-body > p {
  margin-bottom: 1rem;
}

.job-detail-body ul,
.job-detail-body ol {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}

.job-detail-body li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.65;
  color: #384249;
}

.job-detail-body li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .6em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

/* Ordered lists keep their numbers rather than gaining a dot. */
.job-detail-body ol {
  counter-reset: tn-job-step;
}

.job-detail-body ol > li::before {
  counter-increment: tn-job-step;
  content: counter(tn-job-step) ".";
  top: 0;
  left: 0;
  width: auto;
  height: auto;
  border-radius: 0;
  background: none;
  color: var(--brand);
  font-weight: 700;
}

/* "Production & suppliers:" style labels lead each bullet. */
.job-detail-body li strong {
  color: var(--text-strong);
  font-weight: 700;
}

/* The closing motto is flavour, not information. */
.job-detail-body > p:last-child em {
  display: block;
  margin-top: .5rem;
  color: var(--text-body);
  font-size: .94rem;
}

.job-apply-cta {
  margin-top: 2rem;
  padding: 1.3rem;
  border-radius: 8px;
  background: var(--surface-tint-strong);
}

.job-apply-cta h3 {
  margin-bottom: 0.4rem;
  color: var(--text-strong);
}

.job-apply-cta p {
  margin-bottom: 1rem;
  color: var(--text-body);
}

.single-job-sidebar {
  display: grid;
  gap: 1rem;
}

.job-details-list {
  display: grid;
  gap: 0.65rem;
  margin: 1rem 0;
}

.job-details-list dt {
  color: var(--text-body);
  font-size: 0.75rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.job-details-list dd {
  margin: 0;
  color: var(--text-strong);
  font-weight: 750;
}

.similar-job-item {
  padding: 0.8rem 0;
  border-top: 1px solid var(--border-soft);
}

.similar-job-title {
  display: block;
  color: var(--brand);
  font-weight: 800;
}

.no-jobs-found {
  padding: 2rem;
  border-radius: 8px;
  background: #fff;
  text-align: center;
}

.no-jobs-icon {
  margin-bottom: 1rem;
  font-size: 2rem;
}

@media (max-width: 1024px) {
  .rh-section-head--split,
  .rh-process__inner,
  .rh-proof__inner,
  .rh-contact__inner {
    grid-template-columns: 1fr;
  }

  .rh-process__intro {
    position: relative;
    top: auto;
  }

  .rh-card-grid {
    grid-template-columns: 1fr;
  }

  .rh-service-card {
    min-height: 0;
  }

  .rh-logo-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  .single-job-layout {
    grid-template-columns: 1fr;
  }

  .jobs-filters,
  .sidebar-card {
    position: static;
  }
}

@media (max-width: 768px) {
  .site-branding .site-name {
    max-width: 150px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .primary-navigation.is-open {
    background: rgba(255, 255, 255, 0.98);
  }

  .primary-navigation.is-open .nav-menu a {
    color: var(--text-strong);
  }

  .rh-section-head h2,
  .rh-process__intro h2,
  .rh-proof__panel h2,
  .rh-contact h2 {
    font-size: 2rem;
  }

  .rh-partners,
  .rh-services,
  .rh-process,
  .rh-proof,
  .rh-contact,
  .rh-candidate-strip {
    padding: 4rem 0;
  }

  .rh-logo-grid {
    grid-template-columns: repeat(2, 1fr);
  }

  .rh-metrics {
    grid-template-columns: 1fr;
  }

  .rh-candidate-strip__inner {
    align-items: flex-start;
    flex-direction: column;
  }

  .job-detail-actions {
    align-items: stretch;
    flex-direction: column;
  }

  .job-detail-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .header-actions {
    display: none;
  }

  .rh-candidate-strip .btn {
    width: 100%;
    justify-content: center;
  }

  .rh-logo-grid {
    grid-template-columns: 1fr;
  }

  .rh-step {
    grid-template-columns: 1fr;
  }
}
.reveal-delay-1 { transition-delay: .1s; }
.reveal-delay-2 { transition-delay: .2s; }
.reveal-delay-3 { transition-delay: .3s; }

/* =============================================================================
   Candidate experience pass
   ============================================================================= */

/* Job description bullet lists (responsibilities, requirements, benefits) */
.job-section .job-list {
  margin: 0 0 1.5rem;
  padding: 0;
  list-style: none;
  display: grid;
  gap: .7rem;
}

.job-section .job-list li {
  position: relative;
  padding-left: 1.75rem;
  line-height: 1.65;
  color: #384249;
}

.job-section .job-list li::before {
  content: "";
  position: absolute;
  left: .35rem;
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--brand);
}

.job-section p {
  margin: 0 0 1rem;
  line-height: 1.7;
}

/* Empty-state icon is an SVG, not a text glyph */
.no-jobs-icon {
  display: flex;
  justify-content: center;
  margin-bottom: 1rem;
  color: #9aa5ab;
}

.no-jobs-icon svg {
  display: block;
}

/* Freshness + deadline signals on job cards and detail pages */
.job-timing {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem .75rem;
  font-size: .8125rem;
  color: var(--text-faint);
}

.job-timing__posted {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
}

.job-deadline-pill {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  padding: .2rem .55rem;
  border-radius: 999px;
  font-size: .75rem;
  font-weight: 600;
  background: #eef2f4;
  color: #4a555c;
}

/* Closed/filled roles read as muted, so a listing that includes them still
   makes the open ones the obvious targets. */
.job-closed-notice {
  margin-top: 2rem;
  padding: 1.75rem;
  border: 1px solid var(--border);
  border-left: 3px solid #b3763a;
  border-radius: var(--radius-md);
  background: #faf6f1;
}

.job-closed-notice h2 {
  margin-bottom: .5rem;
  font-size: 1.3rem;
}

.job-closed-notice p {
  color: var(--text-body);
}

.job-closed-notice__actions {
  display: flex;
  flex-wrap: wrap;
  gap: .75rem;
  margin-top: 1.25rem;
}

.job-deadline-pill--closed {
  background: #e7e9ea;
  color: #6a7479;
}

.jobs-grid article:has(.job-deadline-pill--closed) {
  opacity: 0.72;
}

.jobs-grid article:has(.job-deadline-pill--closed):hover,
.jobs-grid article:has(.job-deadline-pill--closed):focus-within {
  opacity: 1;
}

/* With JS running the filter applies itself, so the button is redundant. It
   remains in the DOM for no-JS visitors, who need it. */
.filter-form.is-live .filter-submit {
  display: none;
}

.filter-form.is-live .filter-hint {
  display: block;
}

.filter-hint {
  display: none;
  margin-top: .75rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-body);
}

.filter-group--check {
  padding-top: .25rem;
}

.filter-check {
  display: flex;
  align-items: flex-start;
  gap: .55rem;
  cursor: pointer;
  font-size: .9rem;
  font-weight: 600;
  color: var(--text-strong);
}

.filter-check input {
  width: 16px;
  height: 16px;
  margin-top: .15rem;
  accent-color: var(--brand);
  flex: none;
}

.filter-check__note {
  margin-top: .35rem;
  font-size: .78rem;
  line-height: 1.45;
  color: var(--text-body);
}

.no-jobs-alt {
  margin-top: 1rem;
  font-size: .9rem;
}

.no-jobs-alt a {
  color: var(--brand);
  font-weight: 600;
  border-bottom: 1px solid currentColor;
}

.job-deadline-pill.is-soon {
  background: #fdf1e3;
  color: #9a5b12;
}

.job-deadline-pill.is-urgent {
  background: var(--danger-soft);
  color: #a32c22;
}

/* Respect reduced-motion: show revealed content immediately, no transform */
@media (prefers-reduced-motion: reduce) {
  .reveal,
  .reveal.in-view {
    opacity: 1;
    transform: none;
    transition: none;
  }
}

/* Monogram treatment for the job card company mark */
.job-card-icon {
  font-size: .875rem;
  font-weight: 700;
  letter-spacing: .02em;
  color: var(--brand-dark);
  background: var(--surface-tint-strong);
  flex: 0 0 42px;
}

/* =============================================================================
   Job application form
   ============================================================================= */
/* The form deliberately has no surface of its own. It used to be a #fbfcfc
   panel with a border, sitting on a #fff page card — a difference too small to
   read as a design decision and just large enough to look like a rendering
   fault. Spacing and one hairline rule carry the separation instead. */
.apply-block {
  margin-top: 2.5rem;
  padding: 2.5rem 0 0;
  border-top: 1px solid var(--border-hairline);
  background: transparent;
}

.apply-block__title {
  margin: 0 0 .5rem;
  font-size: 1.5rem;
  letter-spacing: -.01em;
}

.apply-block__lead {
  margin: 0 0 1.75rem;
  max-width: 56ch;
  color: var(--text-hint);
  line-height: 1.6;
}

.apply-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem;
  /* Matches .apply-field so a full-width field after the grid is not crowded. */
  margin-bottom: 1.1rem;
}

.apply-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  margin-bottom: 1.1rem;
}

.apply-grid .apply-field {
  margin-bottom: 0;
}

.apply-field label {
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-label);
}

.apply-required {
  color: var(--danger);
  margin-left: .15rem;
}

.apply-optional {
  margin-left: .35rem;
  font-weight: 500;
  font-size: .78rem;
  color: var(--text-faint);
}

.apply-field input[type="text"],
.apply-field input[type="email"],
.apply-field input[type="tel"],
.apply-field input[type="file"],
.apply-field select,
.apply-field textarea {
  width: 100%;
  padding: .7rem .85rem;
  border: 1px solid var(--field-border);
  border-radius: 8px;
  background: #fff;
  font: inherit;
  font-size: .9375rem;
  color: #1d262c;
  transition: border-color .15s ease, box-shadow .15s ease;
}

.apply-field textarea {
  resize: vertical;
  min-height: 96px;
  line-height: 1.6;
}

.apply-field input:focus,
.apply-field select:focus,
.apply-field textarea:focus {
  outline: none;
  border-color: var(--brand);
  box-shadow: 0 0 0 3px var(--brand-glow);
}

.apply-field input.has-error,
.apply-field textarea.has-error {
  border-color: var(--danger-strong);
  box-shadow: 0 0 0 3px rgba(192, 57, 43, .12);
}

.apply-field input[type="file"] {
  padding: .55rem .6rem;
  cursor: pointer;
}

.apply-field select {
  cursor: pointer;
  /* Native arrow only; a custom one would need a background-image the theme
     does not ship, and the default reads correctly against the white field. */
  appearance: auto;
}

.apply-hint {
  margin: 0;
  font-size: .8125rem;
  color: var(--text-faint);
}

.apply-error {
  margin: 0;
  min-height: 0;
  font-size: .8125rem;
  font-weight: 500;
  color: var(--danger);
}

.apply-error:empty {
  display: none;
}

/* Honeypot: off-screen but still focusable-safe for real assistive tech */
.apply-hp {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.apply-consent {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: .65rem;
  align-items: start;
  font-size: .875rem;
  font-weight: 400;
  line-height: 1.55;
  color: #4a555c;
  cursor: pointer;
}

.apply-consent input[type="checkbox"] {
  margin-top: .18rem;
  width: 17px;
  height: 17px;
  accent-color: var(--brand);
  cursor: pointer;
}

.apply-consent a {
  color: var(--brand-dark);
  text-decoration: underline;
}

.apply-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
  margin-top: 1.5rem;
}

.apply-actions__note {
  margin: 0;
  font-size: .8125rem;
  color: var(--text-faint);
}

.apply-actions__note a {
  color: var(--brand-dark);
}

.apply-submit {
  position: relative;
}

.apply-submit:disabled {
  opacity: .72;
  cursor: progress;
}

.apply-submit__spinner {
  display: none;
  width: 15px;
  height: 15px;
  border: 2px solid rgba(255, 255, 255, .45);
  border-top-color: #fff;
  border-radius: 50%;
  animation: apply-spin .7s linear infinite;
}

.apply-submit.is-busy .apply-submit__spinner {
  display: inline-block;
}

@keyframes apply-spin {
  to { transform: rotate(360deg); }
}

.apply-status {
  margin: 1rem 0 0;
  font-size: .875rem;
  font-weight: 500;
  display: none;
}

.apply-status.is-visible {
  display: block;
  padding: .8rem 1rem;
  border-radius: 8px;
  background: var(--danger-soft);
  color: #96271d;
}

.apply-success {
  text-align: center;
  padding: 1rem 0 .5rem;
}

.apply-success:focus {
  outline: none;
}

.apply-success__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  margin-bottom: 1rem;
  border-radius: 50%;
  background: #e0f2ea;
  color: var(--brand-dark);
}

.apply-success h3 {
  margin: 0 0 .6rem;
  font-size: 1.3rem;
}

.apply-success p {
  margin: 0 auto 1.5rem;
  max-width: 52ch;
  color: var(--text-hint);
  line-height: 1.65;
}

@media (max-width: 640px) {
  .apply-block {
    padding: 1.4rem;
  }

  .apply-grid {
    grid-template-columns: 1fr;
  }

  .apply-actions .btn {
    width: 100%;
    justify-content: center;
  }
}

@media (prefers-reduced-motion: reduce) {
  .apply-submit__spinner {
    animation-duration: 2s;
  }
}

/* =============================================================================
   Homepage: open positions strip
   ============================================================================= */
.rh-jobs {
  padding: 5rem 0 5.5rem;
  background:
    linear-gradient(180deg, #fff 0%, var(--surface-subtle) 100%);
  border-bottom: 1px solid #e6ecea;
}

.rh-jobs__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.25rem;
  margin-top: 2.5rem;
  /* Equal-height cards so the grid does not look ragged. */
  align-items: stretch;
}

.rh-jobs__grid .job-card,
.jobs-grid .job-card {
  display: flex;
  height: 100%;
}

.rh-jobs__grid .job-card-inner,
.jobs-grid .job-card-inner {
  display: flex;
  flex-direction: column;
  flex: 1;
}

/* Push the footer row to the bottom regardless of how much meta a card has. */
.rh-jobs__grid .job-card-footer,
.jobs-grid .job-card-footer {
  margin-top: auto;
}

.rh-jobs__foot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1.25rem;
  margin-top: 2.5rem;
  padding-top: 2rem;
  border-top: 1px solid #e0e8e5;
}

.rh-jobs__note {
  margin: 0;
  max-width: 46ch;
  font-size: .9rem;
  color: var(--text-faint);
}

/* =============================================================================
   Homepage: two-doors band
   ============================================================================= */
.rh-split {
  padding: 5rem 0;
  background: #10201b;
}

.rh-split__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.5rem;
}

.rh-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: .85rem;
  padding: 2.5rem;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .04);
}

/* The candidate door is deliberately the brighter of the two. */
.rh-door--candidate {
  background: var(--brand);
  border-color: transparent;
}

.rh-door__label {
  margin: 0;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, .62);
}

.rh-door--candidate .rh-door__label {
  color: rgba(255, 255, 255, .8);
}

.rh-door h3 {
  margin: 0;
  font-size: 1.55rem;
  line-height: 1.25;
  letter-spacing: -.015em;
  color: #fff;
  max-width: 24ch;
}

.rh-door p {
  margin: 0 0 .6rem;
  max-width: 42ch;
  line-height: 1.65;
  color: rgba(255, 255, 255, .74);
}

.rh-door--candidate p {
  color: rgba(255, 255, 255, .88);
}

.rh-door--candidate .btn-primary {
  background: #fff;
  color: var(--brand-dark);
  box-shadow: none;
}

.rh-door--candidate .btn-primary:hover {
  background: #eefaf4;
}

.rh-door__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1rem;
}

.rh-door--candidate .rh-text-link {
  color: rgba(255, 255, 255, .9);
  border-bottom-color: rgba(255, 255, 255, .4);
}

@media (max-width: 1024px) {
  .rh-jobs__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 720px) {
  .rh-jobs__grid,
  .rh-split__grid {
    grid-template-columns: 1fr;
  }

  .rh-door {
    padding: 1.75rem;
  }

  .rh-jobs__foot .btn {
    width: 100%;
    justify-content: center;
  }
}

/* Hire Talent is now the secondary header action; keep it legible on the
   dark transparent front-page header as well as the light inner pages. */
.header-hire-btn {
  border-color: rgba(20, 102, 78, .35);
}

.site-header:not(.scrolled) .recruiter-home ~ * .header-hire-btn,
body.home .site-header:not(.scrolled) .header-hire-btn {
  border-color: rgba(255, 255, 255, .45);
  color: #fff;
}

body.home .site-header:not(.scrolled) .header-hire-btn:hover {
  background: rgba(255, 255, 255, .12);
  color: #fff;
}

/* =============================================================================
   Anti-template pass: partner wordmarks, sector flow, timeline
   ============================================================================= */

/* Partner names read as a wordmark row, not ten identical grey boxes. */
.rh-wordmarks {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: .35rem 0;
  margin: 2.25rem 0 1.25rem;
  padding: 0;
  list-style: none;
}

.rh-wordmarks li {
  display: inline-flex;
  align-items: center;
  padding: 0 1.35rem;
  font-size: 1.0625rem;
  font-weight: 600;
  letter-spacing: -.005em;
  color: #33403c;
  border-left: 1px solid #dbe3e0;
  line-height: 1.9;
}

.rh-wordmarks li:first-child {
  padding-left: 0;
  border-left: 0;
}

.rh-wordmarks__note {
  margin: 0;
  font-size: .8125rem;
  color: var(--text-faint);
}

/* Sectors flow as prose-like tags, deliberately unlike the wordmark row. */
.rh-sector-flow {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem 0;
  margin: 1.1rem 0 0;
  padding: 0;
  list-style: none;
}

.rh-sector-flow li {
  font-size: .9375rem;
  color: rgba(255, 255, 255, .82);
  line-height: 1.8;
}

.rh-sector-flow li:not(:last-child)::after {
  content: "·";
  margin: 0 .6rem;
  color: rgba(255, 255, 255, .3);
}

/* Company history as a dated timeline rather than a row of big numbers. */
.rh-timeline {
  margin: 2rem 0 0;
  padding: 0 0 0 1.25rem;
  list-style: none;
  border-left: 1px solid rgba(255, 255, 255, .16);
  display: grid;
  gap: 1.5rem;
}

.rh-timeline li {
  position: relative;
  display: grid;
  gap: .3rem;
}

.rh-timeline li::before {
  content: "";
  position: absolute;
  left: calc(-1.25rem - 4px);
  top: .55em;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #3fae86;
}

.rh-timeline__year {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #c8a86b;
}

.rh-timeline p {
  margin: 0;
  max-width: 46ch;
  line-height: 1.6;
  color: rgba(255, 255, 255, .78);
}

/* Break the repeated eyebrow → heading → 3-card rhythm: the services grid
   staggers so it does not mirror the jobs grid directly above it. */
.rh-services .rh-card-grid > .rh-service-card:nth-child(even) {
  transform: translateY(1.75rem);
}

@media (max-width: 1024px) {
  .rh-services .rh-card-grid > .rh-service-card:nth-child(even) {
    transform: none;
  }

  .rh-wordmarks li {
    padding: 0 1rem;
    font-size: .9375rem;
  }
}

/* =============================================================================
   Homepage: candidate + employer voices
   ============================================================================= */
.rh-voices {
  padding: 5rem 0;
  background: #fff;
}

.rh-voices__inner {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 3.5rem;
  align-items: start;
}

.rh-voices__head h2 {
  margin: .35rem 0 1rem;
  font-size: clamp(1.75rem, 1.2rem + 1.6vw, 2.4rem);
  line-height: 1.15;
  letter-spacing: -.02em;
}

.rh-voices__head p {
  margin: 0;
  max-width: 40ch;
  line-height: 1.7;
  color: var(--text-hint);
}

.rh-voices__grid {
  display: grid;
  gap: 1.25rem;
}

.rh-quote {
  margin: 0;
  padding: 1.85rem 2rem;
  border-radius: 14px;
  background: var(--surface-subtle);
  border-left: 3px solid var(--brand);
}

/* Offset the second quote so the pair does not read as another card grid. */
.rh-quote:nth-child(even) {
  margin-left: 2.5rem;
  background: #10201b;
  border-left-color: #c8a86b;
}

.rh-quote__kind {
  display: inline-block;
  margin-bottom: .85rem;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--brand-dark);
}

.rh-quote:nth-child(even) .rh-quote__kind {
  color: #c8a86b;
}

.rh-quote blockquote {
  margin: 0 0 1.1rem;
  padding: 0;
  border: 0;
}

.rh-quote blockquote p {
  margin: 0;
  font-size: 1.0625rem;
  line-height: 1.65;
  color: var(--text-label);
}

.rh-quote:nth-child(even) blockquote p {
  color: rgba(255, 255, 255, .92);
}

.rh-quote figcaption {
  display: grid;
  gap: .15rem;
}

.rh-quote__name {
  font-size: .9rem;
  font-weight: 700;
  color: #1d262c;
}

.rh-quote__role {
  font-size: .8125rem;
  color: var(--text-faint);
}

.rh-quote:nth-child(even) .rh-quote__name {
  color: #fff;
}

.rh-quote:nth-child(even) .rh-quote__role {
  color: rgba(255, 255, 255, .6);
}

@media (max-width: 1024px) {
  .rh-voices__inner {
    grid-template-columns: 1fr;
    gap: 2.25rem;
  }

  .rh-quote:nth-child(even) {
    margin-left: 0;
  }
}

/* =============================================================================
   Single job sidebar: stick the column, not each card
   =============================================================================
   Both .sidebar-card elements were sticky at the same offset, so the second
   card slid over the first while scrolling and clipped the Job Details list.
   Sticky now applies to the column, and the cards flow normally inside it. */
.single-job-page .single-job-sidebar {
  position: sticky;
  top: 6.5rem;
  align-self: start;
}

.single-job-page .single-job-sidebar .sidebar-card {
  position: static;
  top: auto;
}

@media (max-width: 1024px) {
  .single-job-page .single-job-sidebar {
    position: static;
    top: auto;
  }
}

/* =============================================================================
   Jobs listing: master-detail
   -----------------------------------------------------------------------------
   The listing reads as a scannable index with a detail pane, rather than a wall
   of equally-weighted cards. Two rules keep it calm: only one thing per row is
   allowed to be dark and bold (the title), and colour is reserved for state
   (selected, urgent) rather than decoration.
   ============================================================================= */

/* --- List column ---------------------------------------------------------- */

.job-card-inner:hover {
  border-color: rgba(23, 32, 30, 0.22);
  box-shadow: 0 2px 10px rgba(24, 40, 37, 0.07);
}

/* The whole row is the click target. A stretched pseudo-element over the title
   link keeps that true with no JavaScript and without nesting interactive
   elements, so the card stays one tab stop. */
.jobs-grid .job-card-title a::after,
.rh-jobs__grid .job-card-title a::after {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
}

.job-card.is-selected .job-card-inner {
  border-color: var(--brand);
  box-shadow: inset 3px 0 0 var(--brand), 0 2px 10px rgba(24, 40, 37, 0.07);
}

.job-card-title a:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 3px;
}

.job-card-title-wrap {
  min-width: 0;
  flex: 1;
}

.job-card-org {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  margin: .15rem 0 0;
  font-size: .875rem;
  color: var(--text-body);
}

.job-card-org .job-card-company {
  display: inline;
  font-weight: 500;
}

.job-card-org .job-card-location {
  color: var(--text-faint);
}

/* A separating dot only between the two, never dangling when one is absent. */
.job-card-org .job-card-company + .job-card-location::before {
  content: "·";
  margin-right: .5rem;
  color: var(--border-soft);
}

.job-card-salary {
  margin: .1rem 0 0;
  font-size: .875rem;
  font-weight: 600;
  color: var(--text-strong);
}

.job-card-facts {
  display: flex;
  flex-wrap: wrap;
  gap: .3rem;
  margin: .25rem 0 0;
  padding: 0;
  list-style: none;
}

.job-card-facts li {
  padding: .15rem .45rem;
  border-radius: 4px;
  background: var(--surface-subtle);
  font-size: .75rem;
  color: var(--text-body);
}

.job-card .job-timing {
  margin: .3rem 0 0;
}

/* Non-urgent deadlines are plain text. Only the pill styles below stay loud. */
.job-timing__deadline {
  color: var(--text-faint);
}

.job-card .job-badge.featured {
  flex: 0 0 auto;
  align-self: flex-start;
  padding: .15rem .4rem;
  font-size: .7rem;
  font-weight: 600;
}

/* --- Detail pane ---------------------------------------------------------- */

.jobs-detail {
  position: sticky;
  top: 6.5rem;
  max-height: calc(100vh - 8rem);
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid var(--border-soft);
  border-radius: 8px;
  background: #fff;
}

.jobs-detail.is-loading {
  opacity: .55;
  transition: opacity .12s ease;
}

.job-preview {
  padding: 1.5rem 1.6rem 2rem;
}

.job-preview__header {
  padding-bottom: 1.1rem;
  border-bottom: 1px solid var(--border-soft);
}

.job-preview__title {
  margin: 0;
  font-size: 1.45rem;
  line-height: 1.25;
  color: var(--text-strong);
}

.job-preview__title:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 4px;
}

.job-preview__org {
  display: flex;
  flex-wrap: wrap;
  gap: .2rem .5rem;
  margin: .4rem 0 0;
  color: var(--text-body);
}

.job-preview__company {
  font-weight: 600;
}

.job-preview__company + .job-preview__location::before {
  content: "·";
  margin-right: .5rem;
  color: var(--border-soft);
}

.job-preview__salary {
  margin: .55rem 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-strong);
}

.job-preview__facts {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin: .7rem 0 0;
  padding: 0;
  list-style: none;
}

.job-preview__facts li {
  padding: .2rem .55rem;
  border-radius: 4px;
  background: var(--surface-subtle);
  font-size: .8125rem;
  color: var(--text-body);
}

.job-preview__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .5rem 1rem;
  margin-top: 1.1rem;
}

.job-preview__apply {
  min-width: 11rem;
  justify-content: center;
}

.job-preview__full {
  font-size: .875rem;
  font-weight: 600;
  color: var(--brand);
}

.job-preview__closed {
  padding: .45rem .75rem;
  border-radius: 6px;
  background: #e7e9ea;
  font-size: .875rem;
  font-weight: 600;
  color: #6a7479;
}

.job-preview__timing {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem 1rem;
  margin: .9rem 0 0;
  font-size: .8125rem;
  color: var(--text-faint);
}

.job-preview__timing .is-urgent {
  font-weight: 600;
  color: #a32c22;
}

.job-preview__body {
  padding-top: 1.1rem;
}

.job-preview__body h3 {
  margin: 1.6rem 0 .6rem;
  font-size: 1.05rem;
  color: var(--text-strong);
}

.job-preview__body > *:first-child {
  margin-top: 0;
}

.job-preview--error {
  color: var(--text-body);
}

/* --- Narrow viewports ----------------------------------------------------- */

/* Below the split, job-preview.js stops intercepting clicks and cards behave as
   ordinary links, so the pane would only repeat the first result. */
@media (max-width: 1023px) {
  .jobs-detail {
    display: none;
  }

  .jobs-layout {
    grid-template-columns: 1fr;
  }
}

/* --- Full-width listing + filter toolbar ---------------------------------- */

/* The listing is the one page that earns more than the 1200px reading measure:
   it is two columns of dense content, and at 1200px the detail pane is too
   narrow to read a job description in. */
.container--wide {
  max-width: var(--container-max);
}

.jobs-toolbar {
  margin-bottom: 1.25rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: #fff;
}

/* Big search first: it is the primary way in, and giving it the full width of
   the toolbar is what makes the listing read as a job board rather than a
   filtered post archive. */
.jobs-search {
  display: flex;
  align-items: stretch;
  gap: 0;
  border: 2px solid var(--text-strong);
  border-radius: 8px;
  overflow: hidden;
  background: #fff;
}

.jobs-search__field {
  display: flex;
  align-items: center;
  gap: .6rem;
  flex: 1 1 0;
  min-width: 0;
  padding: 0 .9rem;
}

.jobs-search__field + .jobs-search__field {
  border-left: 1px solid var(--border-soft);
}

.jobs-search__field svg {
  flex: 0 0 auto;
  color: var(--text-faint);
}

.jobs-search__field input {
  width: 100%;
  min-width: 0;
  padding: .95rem 0;
  border: 0;
  background: none;
  font: inherit;
  font-size: 1rem;
  color: var(--text-strong);
}

.jobs-search__field input:focus {
  outline: none;
}

/* The visible focus ring belongs on the whole bar, not the bare input. */
.jobs-search:focus-within {
  box-shadow: 0 0 0 3px rgba(22, 119, 102, 0.18);
  border-color: var(--brand);
}

.jobs-search__submit {
  flex: 0 0 auto;
  border-radius: 0;
  padding-inline: 2rem;
  font-size: 1rem;
}

.jobs-refine {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .6rem;
  margin-top: .85rem;
}

.jobs-refine .filter-select {
  width: auto;
  min-height: 38px;
  min-width: 9.5rem;
  padding: .4rem 2rem .4rem .7rem;
  border-radius: 999px;
  background-color: #fff;
  font-size: .875rem;
}

.jobs-refine .filter-check {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  margin: 0;
  font-size: .875rem;
  color: var(--text-body);
  cursor: pointer;
}

.jobs-refine .filter-clear {
  margin-left: auto;
  font-size: .875rem;
  font-weight: 600;
}

/* With live filtering on, the button is redundant for the selects but the
   search bar still needs a visible submit, so it stays. */
.filter-form.is-live .jobs-search__submit {
  display: inline-flex;
}

@media (max-width: 760px) {
  .jobs-search {
    flex-direction: column;
  }

  .jobs-search__field + .jobs-search__field {
    border-left: 0;
    border-top: 1px solid var(--border-soft);
  }

  .jobs-search__submit {
    width: 100%;
    padding-block: .85rem;
  }

  .jobs-refine .filter-select {
    flex: 1 1 8rem;
    min-width: 0;
  }

  .jobs-refine .filter-clear {
    margin-left: 0;
  }
}

/* Imported job descriptions arrive as a run of short paragraphs with no
   spacing of their own, which in a narrow pane reads as one grey block. */
.job-preview__body p {
  margin: 0 0 .85rem;
  line-height: 1.6;
}

.job-preview__body ul,
.job-preview__body ol {
  margin: 0 0 1rem;
  padding-left: 1.15rem;
}

.job-preview__body li {
  margin-bottom: .35rem;
  line-height: 1.55;
}

.job-preview__body strong {
  color: var(--text-strong);
}

.job-preview__body > *:last-child {
  margin-bottom: 0;
}

/* No results: there is no pane to sit beside, so the column split collapses
   and the empty state centres on the page instead of hugging the left edge. */
.jobs-layout--empty {
  grid-template-columns: 1fr;
}

.jobs-layout--empty .no-jobs-found {
  max-width: 32rem;
  margin: 2rem auto;
  text-align: center;
}

/* The page wrapper is taller than the content inside it, so on short pages the
   body tint showed as a band between the content and the footer. Scoped with
   :has() rather than set on the body, because the home page's alternating
   sections still rely on that tint. */
.site-main:has(> .jobs-archive-page),
.site-main:has(> .single-job-page),
.site-main:has(> .page-content),
.site-main:has(> .site-content-area) {
  background: #ffffff;
}

/* Wide screens: the container opens up, but running text does not. Long-form
   copy stays at a readable measure and sits at the start of its column rather
   than spanning the whole page. */
.job-detail-body,
.page-article .entry-content,
.content-wrap .entry-content {
  max-width: 78ch;
}

/* =============================================================================
   Language toggle
   -----------------------------------------------------------------------------
   One flag, showing the language you would switch TO. Pressing it swaps the
   language and the flag together, so the control never needs a label.
   ============================================================================= */

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  padding: .3rem;
  border: 1px solid var(--border-soft);
  border-radius: 6px;
  line-height: 0;
  background: #fff;
  transition: border-color .15s ease, transform .15s ease;
}

.lang-toggle:hover {
  border-color: rgba(23, 32, 30, 0.28);
}

.lang-toggle:active {
  transform: scale(.94);
}

.lang-toggle:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

.lang-toggle__flag {
  display: block;
  width: 22px;
  height: 16px;
  border-radius: 2px;
  /* Flags are light-heavy; a hairline keeps the white of the UK flag from
     bleeding into a white header. */
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.12);
  object-fit: cover;
}

/* Over the dark homepage hero the header is transparent until scrolled. */
.site-header:not(.scrolled) .lang-toggle {
  border-color: rgba(255, 255, 255, 0.3);
  background: rgba(255, 255, 255, 0.1);
}

.site-header:not(.scrolled) .lang-toggle:hover {
  border-color: rgba(255, 255, 255, 0.6);
}

/* The whole .header-actions row is hidden on small screens, which would take
   the language control with it. Keep the row, drop only the two CTAs — they
   remain reachable in the mobile menu, whereas language has nowhere else to go. */
@media (max-width: 520px) {
  .header-actions {
    display: flex;
  }

  .header-actions .btn {
    display: none;
  }
}

/* =============================================================================
   Office map
   ============================================================================= */

.office-map {
  margin-top: 2.5rem;
}

.office-map__frame {
  position: relative;
  overflow: hidden;
  border: 1px solid var(--border-soft);
  border-radius: 10px;
  background: var(--surface-subtle);
  aspect-ratio: 16 / 9;
}

.office-map__frame iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

.office-map__directions {
  margin: .8rem 0 0;
  font-size: .9rem;
}

.office-map__directions a {
  color: var(--brand);
  font-weight: 600;
}

@media (max-width: 600px) {
  .office-map__frame {
    aspect-ratio: 4 / 3;
  }
}

/* The map lives in the left column under the pitch, so the contact card keeps
   the right column to itself. */
.rh-contact__inner .office-map {
  margin-top: 1.75rem;
}

/* That section sits on the mint tint, so the placeholder needs to be white to
   read as a surface rather than dissolving into the background. */
.rh-contact__inner .office-map__frame {
  background: #fff;
}

/* A supporting cue under the pitch rather than the subject of the page, so it
   stays shallower than the 16/9 used on the contact page. */
@media (min-width: 900px) {
  .rh-contact__inner .office-map__frame {
    aspect-ratio: 2 / 1;
  }
}