/* ═══════════════════════════════════════════════════════════
   Farmwork4u — shared stylesheet (v2 "sunrise" system)
   Drop-in replacement for the per-page <style> blocks.
   Class names match the existing site markup.
   ═══════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --green-dark:  #2B5C1E;
  --green-mid:   #3E7A2E;
  --green-light: #EAF2E6;
  --cream:       #F7F3EA;
  --cream-dark:  #EDE7D8;
  --gold:        #C8A84B;
  --text-dark:   #1A2E14;
  --text-mid:    #4A5C44;
  --text-light:  #5C6F56;
  --white:       #FFFFFF;
  --radius-btn:  8px;
  --radius-card: 14px;
  --shadow-soft:  0 2px 10px rgba(26,46,20,0.05);
  --shadow-hover: 0 10px 28px rgba(26,46,20,0.12);
}

html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  background: var(--cream);
  color: var(--text-dark);
  line-height: 1.6;
}
a { color: var(--green-dark); }
a:hover { color: var(--green-mid); }

.visually-hidden { 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 { position:absolute; left:8px; top:-48px; z-index:400; background:var(--green-dark); color:var(--white); padding:10px 16px; border-radius:6px; text-decoration:none; font-weight:600; transition:top 0.2s; }
.skip-link:focus { top:8px; }

/* ── Logo lockup ──
   <a class="fw-lockup" href="/">
     <span class="fw-icon"><span class="fw-sun"></span><span class="fw-line"></span><span class="fw-line fw-line-2"></span></span>
     <span class="fw-wordmark">farmwork<span class="fw-4u">4u</span></span>
   </a>
   Size the icon by setting --s on .fw-icon (default 34px). */
.fw-lockup { display:inline-flex; align-items:center; gap:10px; text-decoration:none; }
.fw-icon {
  --s: 34px;
  width:var(--s); height:var(--s); flex-shrink:0;
  background:var(--green-dark); border-radius:26%;
  display:flex; flex-direction:column; align-items:center; justify-content:center;
}
.fw-sun {
  width:calc(var(--s)*0.31); height:calc(var(--s)*0.155);
  background:var(--gold);
  border-radius:calc(var(--s)*0.155) calc(var(--s)*0.155) 0 0;
}
.fw-line {
  width:calc(var(--s)*0.52); height:calc(var(--s)*0.05); min-height:2px;
  background:var(--cream); border-radius:2px;
  margin-top:calc(var(--s)*-0.02);
}
.fw-line-2 { width:calc(var(--s)*0.36); opacity:0.6; margin-top:calc(var(--s)*0.08); }
.fw-wordmark { font-weight:800; letter-spacing:-0.02em; color:var(--text-dark); font-size:1.15rem; line-height:1; }
.fw-4u { color:var(--gold); }
.fw-tagline {
  font-size:0.62rem; font-weight:500; letter-spacing:0.2em; padding-left:0.2em;
  text-transform:uppercase; color:var(--text-mid); text-align:center;
}

/* ── Decorative circle (the one background ornament) ──
   Parent needs position:relative + overflow:hidden. */
.bg-circle {
  position:absolute; border-radius:50%;
  background:var(--green-light); pointer-events:none; z-index:0;
}
.bg-circle-dark { background:rgba(255,255,255,0.06); } /* for green-dark bands */

/* ── Nav (unified) ──
   Default: sticky cream bar, used on every subpage.
   Home: add .nav-home (fixed, transparent) + JS toggles .scrolled. */
nav {
  position: sticky; top: 0; z-index: 100;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-dark);
  padding: 12px 24px;
  display: flex; align-items: center; justify-content: space-between;
}
nav.nav-home {
  position: fixed; left:0; right:0;
  background: transparent; border-bottom-color: transparent;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.3s, padding 0.3s;
}
nav.nav-home.scrolled {
  background: var(--cream);
  border-bottom-color: var(--cream-dark);
  box-shadow: var(--shadow-soft);
}
/* transparent nav sitting over a dark panel */
nav.nav-home.on-dark:not(.scrolled) .fw-wordmark { color: var(--white); }
nav.nav-home.on-dark:not(.scrolled) .nav-link { color: rgba(255,255,255,0.85); }

.nav-wordmark { text-decoration:none; } /* legacy hook — wrap the lockup in it or replace with .fw-lockup */
.nav-links { display: flex; align-items: center; gap: 16px; }
/* Homepage only: the CTA/links start empty (no side chosen yet) - keep them
   invisible until choose() adds .visible, or the empty CTA pill shows as a
   blank green box in the corner. */
nav.nav-home .nav-links {
  opacity: 0; transform: translateY(-6px);
  transition: opacity 0.4s ease, transform 0.4s ease;
  pointer-events: none;
}
nav.nav-home .nav-links.visible {
  opacity: 1; transform: translateY(0);
  pointer-events: auto;
}
.nav-link { font-size:0.85rem; font-weight:600; color:var(--text-mid); text-decoration:none; transition:color 0.2s; }
.nav-link:hover { color: var(--green-dark); }
.nav-link-active { color: var(--green-dark); cursor: default; pointer-events: none; }
nav a.nav-cta {
  background: var(--green-dark); color: var(--white);
  text-decoration: none; font-size: 0.85rem; font-weight: 600;
  padding: 9px 20px; border-radius: var(--radius-btn); transition: background 0.2s;
}
nav a.nav-cta:hover { background: var(--green-mid); }
nav a.nav-cta:empty { display: none; } /* homepage CTA is blank until a side is chosen */
/* On pages whose nav-links has both a "Browse jobs" link and a "For
   employers" link (about/awards/privacy/terms), the nav-cta button is
   always "Browse jobs →" (no worker/employer side-selection state exists
   on these neutral pages, unlike the homepage) - so the plain "Browse jobs"
   link next to it is a literal duplicate. Hide it at every width, not just
   mobile. Scoped via :has() so this never touches listing.html, whose CTA
   is page-specific ("Unlock all") and has no "For employers" link - its
   standalone "Browse jobs" link is the only mention there and must stay. */
.nav-links:has(> a.nav-link[href="submit.html"]) > a.nav-link[href="listings.html"] { display: none; }
.nav-hamburger { display:none; flex-direction:column; gap:5px; background:none; border:none; cursor:pointer; padding:4px; }
.nav-hamburger span { display:block; width:24px; height:2px; background:var(--green-dark); border-radius:2px; transition:transform 0.25s, opacity 0.25s; }
.nav-hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.nav-hamburger.open span:nth-child(2) { opacity: 0; }
.nav-hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }
@media (max-width: 600px) {
  .nav-hamburger { display: flex; }
  .nav-links {
    display: none; position: absolute; top: 100%; left: 0; right: 0;
    background: var(--cream); border-bottom: 1px solid var(--cream-dark);
    flex-direction: column; align-items: stretch;
    padding: 12px 24px 20px; gap: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.06);
  }
  .nav-links.open { display: flex; }
  .nav-link { padding: 12px 0; font-size: 0.95rem; border-bottom: 1px solid var(--cream-dark); }
  nav a.nav-cta, #nav-access-badge {
    order: -1; margin-top: 0; margin-bottom: 12px;
    text-align: center; padding: 12px 20px; font-size: 0.95rem;
  }
  /* "Browse jobs" already lives in the flattened Menu list below - drop the
     standalone link so it doesn't appear twice in the same mobile menu. */
  .nav-links > a.nav-link[href="listings.html"] { display: none; }
  /* On pages where the CTA itself is "Browse jobs" (about/awards/privacy/terms),
     that CTA is now the single surviving mention - drop the Menu list's copy too. */
  .nav-links:has(> a.nav-link[href="submit.html"]) .site-menu-dropdown a[href="listings.html"] {
    display: none;
  }

  /* Homepage: keep the logo/nav clearly visible and legible on a solid
     background at all times on mobile, instead of transparent-until-scrolled
     (which made it blend into the hero and look like it wasn't fixed).
     Desktop keeps the original transparent-over-hero treatment. */
  nav.nav-home { background: var(--cream); border-bottom-color: var(--cream-dark); }
  nav.nav-home.on-dark .fw-wordmark { color: var(--text-dark); }
  nav.nav-home.on-dark .nav-link { color: var(--text-mid); }
  /* Let the hamburger reveal the menu even before a worker/employer side is
     chosen (the homepage's nav-links otherwise stay invisible until then). */
  nav.nav-home .nav-links.open { opacity: 1; pointer-events: auto; }
}

/* ── Small-caps meta label (VERIFIED · REAL · NOW style) ── */
.section-label {
  font-size: 0.78rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--text-light);
}

/* ── Page header (subpages) — was a solid green band, now cream + circle ── */
.page-header {
  position: relative; overflow: hidden;
  background: var(--cream);
  border-bottom: 1px solid var(--cream-dark);
  padding: 56px 24px 48px;
  text-align: center;
}
.page-header::before {
  content:''; position:absolute; border-radius:50%;
  background: var(--green-light);
  width: 44vw; min-width:340px; aspect-ratio:1;
  right: -10vw; top: -26vw; pointer-events:none;
}
.page-header > * { position: relative; }
.page-header h1 {
  font-size: clamp(1.7rem, 4vw, 2.5rem);
  font-weight: 800; letter-spacing:-0.01em;
  color: var(--green-dark);
  margin-bottom: 10px;
}
.page-header h1 em { color: var(--gold); font-style: normal; }
.page-header p { font-size: 1rem; color: var(--text-mid); max-width: 520px; margin: 0 auto; }
.page-header .section-label { display:block; margin-bottom:14px; }

/* ── Buttons ── */
.btn, .panel-btn, .cta-link {
  display: inline-block; padding: 14px 32px;
  border-radius: var(--radius-btn);
  font-size: 1rem; font-weight: 700;
  text-decoration: none; border: none; cursor: pointer;
  transition: transform 0.15s, opacity 0.15s, background 0.2s;
}
.btn-primary { background: var(--green-dark); color: var(--white); }
.btn-primary:hover { background: var(--green-mid); transform: translateY(-1px); color: var(--white); }
.btn-gold { background: var(--gold); color: var(--text-dark); }
.btn-gold:hover { opacity: 0.9; transform: translateY(-1px); color: var(--text-dark); }
.btn-ghost, .panel-btn-ghost {
  display: inline-block; padding: 11px 26px;
  border-radius: var(--radius-btn);
  font-size: 0.9rem; font-weight: 600;
  text-decoration: none; cursor: pointer; background: transparent;
  border: 1.5px solid rgba(43,92,30,0.35); color: var(--text-mid);
  transition: transform 0.15s, background 0.15s;
}
.btn-ghost:hover, .panel-btn-ghost:hover { background: rgba(43,92,30,0.06); transform: translateY(-1px); }

/* ── Tags & chips ── */
.tag {
  display: inline-block; padding: 3px 10px; border-radius: 20px;
  font-size: 0.75rem; font-weight: 700; letter-spacing: 0.03em;
}
.tag-work { background: var(--green-light); color: var(--green-dark); }
.tag-visa { background: #FFF8E6; color: #8A6A00; }

.sort-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border: 2px solid var(--cream-dark); border-radius: 20px;
  font-size: 0.9rem; font-weight: 600;
  background: var(--white); color: var(--text-dark); cursor: pointer; outline: none;
  transition: background 0.2s, border-color 0.2s, color 0.2s;
}
.sort-toggle:hover { border-color: var(--green-dark); }
.sort-toggle[aria-pressed="true"] { background: var(--green-dark); border-color: var(--green-dark); color: var(--white); }

/* form choice chips (submit page) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; border-radius: 20px;
  border: 2px solid var(--cream-dark); background: var(--white);
  font-size: 0.9rem; font-weight: 600; color: var(--text-mid);
  cursor: pointer; user-select: none;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.chip input { position:absolute; opacity:0; pointer-events:none; }
.chip:hover { border-color: var(--green-dark); }
.chip:has(input:checked) { background: var(--green-light); border-color: var(--green-dark); color: var(--green-dark); }

/* ── Filters bar ── */
.filters { background: var(--white); border-bottom: 1px solid var(--cream-dark); padding: 16px 24px; }
.filters-inner { max-width: 960px; margin: 0 auto; display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.filters select {
  padding: 9px 14px; border: 2px solid var(--cream-dark); border-radius: var(--radius-btn);
  font-size: 0.9rem; background: var(--white); color: var(--text-dark);
  cursor: pointer; outline: none; transition: border-color 0.2s;
}
.filters select:focus { border-color: var(--green-dark); }
.filter-checkbox {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 14px; border: 2px solid var(--cream-dark); border-radius: var(--radius-btn);
  font-size: 0.9rem; background: var(--white); color: var(--text-dark);
  cursor: pointer; white-space: nowrap;
  transition: background 0.15s, border-color 0.15s;
}
.filter-checkbox:has(input:checked) { background: var(--green-light); border-color: var(--green-dark); color: var(--green-dark); }
/* Native checkboxes render at inconsistent sizes across browsers/OSes and
   were inflating this box's height above the filter dropdowns next to it -
   drawn as a plain square instead so the height is fully under our control,
   same outline look as a default checkbox either way. */
.filter-checkbox input[type="checkbox"] {
  appearance: none; -webkit-appearance: none;
  width: 15px; height: 15px; flex-shrink: 0; margin: 0;
  border: 1px solid #767676; border-radius: 3px;
  background: var(--white); cursor: pointer;
  position: relative;
}
.filter-checkbox input[type="checkbox"]:checked {
  background: var(--green-dark); border-color: var(--green-dark);
}
.filter-checkbox input[type="checkbox"]:checked::after {
  content: ""; position: absolute; left: 4px; top: 1px;
  width: 4px; height: 8px;
  border: solid var(--white); border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.filter-count { margin-left: auto; font-size: 0.85rem; font-weight: 600; color: var(--text-mid); }
.sort-status { max-width:960px; margin:10px auto 0; font-size:0.85rem; color:var(--text-light); display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.sort-status input { padding:7px 10px; border:2px solid var(--cream-dark); border-radius:6px; font-size:0.85rem; width:70px; }
.sort-status button { padding:7px 14px; border:none; border-radius:6px; background:var(--green-dark); color:var(--white); font-size:0.85rem; font-weight:600; cursor:pointer; }
.card-distance { color: var(--text-light); }

/* ── Listings grid & card ── */
.listings-wrap { max-width: 960px; margin: 0 auto; padding: 32px 24px 64px; }
.listings-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }

.card {
  background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  cursor: pointer; text-decoration: none; color: inherit;
  box-shadow: var(--shadow-soft);
  transition: box-shadow 0.2s, transform 0.15s, border-color 0.2s;
}
.card:hover {
  box-shadow: var(--shadow-hover);
  transform: translateY(-3px);
  border-color: var(--green-dark);
}
.card-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.card-title { font-size: 1.1rem; font-weight: 700; color: var(--text-dark); line-height: 1.3; flex: 1; min-width: 0; }
.card-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.card-meta { display: flex; flex-direction: column; gap: 5px; }
.card-pay, .card-loc, .card-start { display: flex; align-items: center; gap: 5px; font-size: 0.85rem; color: var(--text-light); }
.card-pay svg, .card-loc svg, .card-start svg { opacity: 0.65; }
.card-date { font-size: 0.75rem; color: var(--text-light); }
.card-footer { padding-top: 12px; border-top: 1px solid var(--cream-dark); display: flex; justify-content: space-between; align-items: center; }
.card-positions, .card-cta { font-size: 0.82rem; font-weight: 700; color: var(--green-dark); }

.card-ghost {
  background: var(--white); border: 1px dashed var(--cream-dark);
  border-radius: var(--radius-card); padding: 24px;
  display: flex; flex-direction: column; gap: 12px;
  opacity: 0.45; pointer-events: none; user-select: none; position: relative;
}
.card-ghost-badge { display: none; }
.state-msg { text-align: center; padding: 64px 24px; color: var(--text-light); font-size: 1rem; grid-column: 1 / -1; }

/* ── Detail page ── */
.detail-card {
  background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-soft);
}
.detail-header {
  position: relative; overflow: hidden;
  background: var(--green-dark); color: var(--white);
  padding: 32px 32px 28px;
  display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; flex-wrap: wrap;
}
.detail-header h1 { font-size: 1.5rem; font-weight: 800; margin-bottom: 6px; }
.detail-header .detail-loc { font-size: 0.92rem; opacity: 0.8; margin-bottom: 14px; }
.detail-header .tag-work { background: rgba(255,255,255,0.15); color: var(--white); }
.detail-header .tag-visa { background: var(--gold); color: var(--text-dark); }
.detail-photo { width: 260px; max-width: 100%; height: 190px; object-fit: contain; border-radius: 14px; }
.detail-body { padding: 32px; }
.detail-section { margin-bottom: 28px; }
.detail-section .section-label { display: block; margin-bottom: 10px; }

.arrow-list { list-style: none; }
.arrow-list li { padding-left: 22px; position: relative; margin-bottom: 6px; color: var(--text-mid); }
.arrow-list li::before { content: '→'; position: absolute; left: 0; color: var(--green-dark); font-weight: 700; }

.meta-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.meta-tile { background: var(--cream); border-radius: 10px; padding: 12px 14px; }
.meta-tile .meta-label { font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-light); margin-bottom: 2px; }
.meta-tile .meta-value { font-size: 0.92rem; font-weight: 700; color: var(--text-dark); }

.contact-box {
  background: var(--green-light); border: 2px solid var(--green-dark);
  border-radius: var(--radius-card); padding: 24px;
}
.contact-box h3 { font-size: 1.05rem; font-weight: 800; color: var(--green-dark); margin-bottom: 8px; }
.contact-box p { font-size: 0.9rem; color: var(--text-mid); }
/* ── Forms ── */
.form-section {
  background: var(--white); border: 1px solid var(--cream-dark);
  border-radius: var(--radius-card); padding: 28px; margin-bottom: 20px;
  box-shadow: var(--shadow-soft);
}
.form-section > .section-label { display: block; margin-bottom: 18px; }
.form-field { margin-bottom: 18px; }
.form-field label { display: block; font-size: 0.9rem; font-weight: 600; color: var(--text-dark); margin-bottom: 6px; }
.form-field input[type="text"], .form-field input[type="email"], .form-field input[type="tel"],
.form-field input[type="number"], .form-field input[type="date"], .form-field select, .form-field textarea {
  width: 100%; padding: 11px 14px;
  border: 2px solid var(--cream-dark); border-radius: var(--radius-btn);
  font-size: 0.95rem; font-family: inherit; color: var(--text-dark);
  background: var(--white); outline: none; transition: border-color 0.2s;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus { border-color: var(--green-dark); }
.form-hint { font-size: 0.8rem; color: var(--text-light); margin-top: 4px; }

.role-block {
  background: var(--cream); border-radius: 10px; padding: 20px; margin-bottom: 12px; position: relative;
}
.role-remove { position: absolute; top: 14px; right: 16px; background: none; border: none; color: #B03A2E; font-size: 0.82rem; font-weight: 600; cursor: pointer; }
.role-add {
  width: 100%; padding: 13px; background: none;
  border: 2px dashed var(--cream-dark); border-radius: 10px;
  color: var(--text-mid); font-size: 0.9rem; font-weight: 600; cursor: pointer;
  transition: border-color 0.2s, color 0.2s;
}
.role-add:hover { border-color: var(--green-dark); color: var(--green-dark); }

.submit-btn {
  width: 100%; padding: 16px; border: none; border-radius: var(--radius-btn);
  background: var(--green-dark); color: var(--white);
  font-size: 1rem; font-weight: 700; cursor: pointer; transition: background 0.2s, opacity 0.2s;
}
.submit-btn:hover { background: var(--green-mid); }
.submit-btn:disabled { opacity: 0.55; cursor: default; }

/* ── Stats / steps / pillars / props ── */
.stats { position: relative; overflow: hidden; background: var(--green-dark); padding: 32px 24px; }
.stats-inner { position: relative; max-width: 820px; margin: 0 auto; display: flex; justify-content: center; flex-wrap: wrap; text-align: center; }
.stat { flex: 1 1 0; min-width: 140px; }
.stat strong { display: block; font-size: 2rem; font-weight: 800; color: var(--gold); line-height: 1; margin-bottom: 4px; }
.stat span { font-size: 0.83rem; color: rgba(255,255,255,0.7); }

.section { padding: 72px 24px; }
.section-inner { max-width: 820px; margin: 0 auto; }
.section h2 { font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; letter-spacing:-0.01em; color: var(--green-dark); text-align: center; margin-bottom: 12px; }
.section .sub { text-align: center; color: var(--text-mid); font-size: 1.05rem; max-width: 500px; margin: 0 auto 52px; line-height: 1.6; }
.section > .section-inner > .section-label { display:block; text-align:center; margin-bottom:12px; }

.steps { display: flex; gap: 32px; justify-content: center; flex-wrap: wrap; }
.step { flex: 1 1 200px; max-width: 248px; text-align: center; }
.step-num {
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--green-light); color: var(--green-dark);
  font-size: 1.4rem; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
  margin: 0 auto 16px;
}
.step h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.step p { font-size: 0.92rem; color: var(--text-mid); line-height: 1.6; }

.pillars { display: flex; gap: 24px; flex-wrap: wrap; justify-content: center; }
.pillar { flex: 1 1 220px; max-width: 260px; background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-card); padding: 28px 24px; box-shadow: var(--shadow-soft); }
.pillar h3 { font-size: 1.05rem; font-weight: 700; color: var(--green-dark); margin-bottom: 8px; }
.pillar p { font-size: 0.9rem; color: var(--text-mid); line-height: 1.6; }

.props { display: grid; grid-template-columns: repeat(2, 1fr); gap: 20px; }
.prop { background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-card); padding: 28px 24px; box-shadow: var(--shadow-soft); }
.prop h3 { font-size: 1rem; font-weight: 700; color: var(--text-dark); margin-bottom: 8px; }
.prop p { font-size: 0.88rem; color: var(--text-mid); line-height: 1.65; }
@media (max-width: 640px) { .props { grid-template-columns: 1fr; } }

/* ── Reviews ── */
.review-cards { display: flex; align-items: flex-start; gap: 20px; flex-wrap: wrap; justify-content: center; max-width: 1000px; margin: 0 auto 32px; }
.review-card-mini { flex: 1 1 280px; max-width: 320px; text-align: left; background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-card); padding: 24px 22px; box-shadow: var(--shadow-soft); }
.review-card-mini .review-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.review-card-mini .review-name { font-weight: 700; color: var(--text-dark); font-size: 0.9rem; }
.review-card-mini .review-stars { color: var(--gold); font-size: 0.95rem; letter-spacing: 2px; white-space: nowrap; }
.review-card-mini .review-text { font-size: 0.92rem; color: var(--text-dark); line-height: 1.55; margin-bottom: 10px; }
.review-card-mini .review-meta { display: flex; flex-wrap: wrap; align-items: center; row-gap: 6px; font-size: 0.8rem; color: var(--text-light); }
.review-verified { display: inline-block; background: var(--green-light); color: var(--green-dark); font-size: 0.72rem; font-weight: 700; padding: 2px 9px; border-radius: 10px; margin-right: 8px; vertical-align: middle; white-space: nowrap; }
.review-date { margin-left: auto; font-weight: 400; white-space: nowrap; }
.review-empty { text-align: center; color: var(--text-mid); font-size: 0.92rem; margin-bottom: 28px; }
.review-see-all { text-align: center; }
.review-see-all a { color: var(--green-dark); font-weight: 700; text-decoration: none; }

/* ── FAQ ── */
.faq-list { max-width: 720px; margin: 0 auto; }
.faq-item { border-bottom: 1px solid var(--cream-dark); }
.faq-item:last-child { border-bottom: none; }
.faq-question { width: 100%; background: none; border: none; text-align: left; padding: 20px 0; font-size: 1rem; font-weight: 700; color: var(--text-dark); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 16px; line-height: 1.4; font-family: inherit; }
.faq-question:hover { color: var(--green-dark); }
.faq-chevron { flex-shrink: 0; width: 22px; height: 22px; border-radius: 50%; background: var(--green-light); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; transition: transform 0.25s; }
.faq-item.open .faq-chevron { transform: rotate(180deg); }
.faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease, padding 0.3s ease; font-size: 0.95rem; color: var(--text-mid); line-height: 1.7; }
.faq-item.open .faq-answer { max-height: 400px; padding-bottom: 20px; }

/* ── CTA band ── */
.cta-dark { position: relative; overflow: hidden; background: var(--green-dark); padding: 72px 24px; text-align: center; }
.cta-dark::before { content:''; position:absolute; border-radius:50%; background:rgba(255,255,255,0.06); width:420px; height:420px; right:-140px; top:-240px; }
.cta-dark > * { position: relative; }
.cta-dark h2 { color: var(--white); font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 800; margin-bottom: 14px; }
.cta-dark p { color: rgba(255,255,255,0.7); font-size: 1.05rem; margin-bottom: 32px; }
.cta-link { background: var(--gold); color: var(--text-dark); }
.cta-link:hover { opacity: 0.88; transform: translateY(-1px); color: var(--text-dark); }
.cta-note { margin-top: 14px; font-size: 0.8rem; color: rgba(255,255,255,0.45); }

/* ── Tables & callouts (awards / legal pages) ── */
.legal-body { max-width: 740px; margin: 0 auto; padding: 48px 24px 72px; }
.legal-body h2 { font-size: 1.15rem; font-weight: 800; color: var(--green-dark); padding-top: 28px; margin: 28px 0 12px; border-top: 1px solid var(--cream-dark); }
.legal-body p { color: var(--text-mid); font-size: 0.95rem; margin-bottom: 12px; }

.data-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; border-radius: 10px; overflow: hidden; box-shadow: var(--shadow-soft); }
.data-table th { background: var(--green-dark); color: var(--white); font-weight: 700; text-align: left; padding: 12px 16px; font-size: 0.82rem; letter-spacing: 0.05em; text-transform: uppercase; }
.data-table td { padding: 12px 16px; border-bottom: 1px solid var(--cream-dark); background: var(--white); color: var(--text-mid); }
.data-table tr:nth-child(even) td { background: var(--cream); }
.data-table .rate { color: var(--text-dark); font-weight: 800; }

.intro-note { background: var(--green-light); border-left: 3px solid var(--green-dark); border-radius: 0 10px 10px 0; padding: 16px 20px; font-size: 0.92rem; color: var(--text-mid); margin: 20px 0; }
.warning-note { background: #FFF8E6; border-left: 3px solid var(--gold); border-radius: 0 10px 10px 0; padding: 16px 20px; font-size: 0.92rem; color: #6B5410; margin: 20px 0; }

.pullquote { border-left: 3px solid var(--gold); padding: 6px 0 6px 22px; margin: 28px 0; font-size: 1.25rem; font-weight: 600; line-height: 1.5; color: var(--text-dark); }

/* ── Footer & cookie banner ── */
footer { background: var(--text-dark); color: rgba(255,255,255,0.5); text-align: center; padding: 36px 24px 30px; font-size: 0.82rem; }
footer strong { color: rgba(255,255,255,0.85); }
footer a { color: rgba(255,255,255,0.7); text-decoration: underline; }
footer a:hover { color: var(--white); }
footer p + p { margin-top: 10px; }
footer .fw-lockup { gap: 14px; }
footer .fw-wordmark { color: rgba(255,255,255,0.95); }
footer .fw-tagline { color: var(--gold); }
.footer-tagline { font-size: 0.68rem; font-weight: 500; letter-spacing: 0.2em; padding-left: 0.2em; text-transform: uppercase; color: var(--gold); margin-top: 6px; }

/* Footer links + social icons: stacked on mobile, side by side on desktop */
.footer-bottom { margin-top: 10px; }
.footer-social { margin-top: 10px; }
@media (min-width: 700px) {
  .footer-bottom { display: flex; align-items: center; justify-content: center; gap: 32px; }
  .footer-social { margin-top: 0; }
}

/* ── Site menu (Browse jobs / Post a listing / Reviews / Award rates / About us) ──
   Sits at the right edge of nav-links. On the homepage it inherits nav-links'
   opacity/pointer-events toggle, so it only appears once a side is chosen or
   the visitor scrolls - same as the CTA next to it. */
.site-menu { position: relative; }
.site-menu-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: none; border: 1px solid var(--cream-dark); color: var(--text-mid);
  font-size: 0.85rem; font-weight: 600; font-family: inherit;
  padding: 9px 14px; border-radius: var(--radius-btn); cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
}
.site-menu-btn:hover { background: var(--green-light); color: var(--green-dark); border-color: var(--green-light); }
.site-menu-btn svg { transition: transform 0.2s ease; flex-shrink: 0; }
.site-menu-btn[aria-expanded="true"] svg { transform: rotate(180deg); }
nav.nav-home.on-dark:not(.scrolled) .site-menu-btn { color: rgba(255,255,255,0.85); border-color: rgba(255,255,255,0.35); }
.site-menu-dropdown {
  display: none; position: absolute; top: calc(100% + 8px); right: 0;
  background: var(--white); border: 1px solid var(--cream-dark); border-radius: var(--radius-card);
  box-shadow: var(--shadow-hover); padding: 8px; min-width: 190px; z-index: 200;
}
.site-menu-dropdown.open { display: block; }
.site-menu-item {
  display: block; padding: 10px 12px; border-radius: 8px;
  font-size: 0.9rem; font-weight: 600; color: var(--text-dark); text-decoration: none;
}
.site-menu-item:hover { background: var(--green-light); color: var(--green-dark); }

/* Hamburger-icon variant of the toggle button, for pages whose .site-menu has
   no wrapping nav-links panel (contact.html, reviews.html, submit.html) - they
   have no separate mobile hamburger, so this is their only menu button at any
   width. Visually matches .nav-hamburger's animated bars/X instead of the
   "Menu ▾" text pill used inside nav-links elsewhere. */
.site-menu-hamburger-btn { display: flex; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 4px; }
.site-menu-hamburger-btn span { display: block; width: 24px; height: 2px; background: var(--green-dark); border-radius: 2px; transition: transform 0.25s, opacity 0.25s; }
.site-menu-hamburger-btn.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.site-menu-hamburger-btn.open span:nth-child(2) { opacity: 0; }
.site-menu-hamburger-btn.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

@media (max-width: 600px) {
  /* Tapping the hamburger should reveal every link right away - no nested
     "Menu" dropdown requiring a second tap. The button is desktop-only;
     its items render flat, inline in the nav-links panel instead.
     Scoped to .nav-links: pages whose .site-menu sits outside a nav-links
     hamburger panel (contact.html, reviews.html, submit.html) still use the
     plain click-to-open dropdown, and must keep their toggle button and
     closed-by-default dropdown at every width - otherwise the menu has no
     panel gating its visibility and renders permanently open on mobile. */
  .nav-links .site-menu-btn { display: none; }
  .nav-links .site-menu-dropdown {
    display: block;
    position: static;
    background: none;
    border: none;
    box-shadow: none;
    padding: 0;
    min-width: 0;
  }
  .nav-links .site-menu-item {
    padding: 12px 0;
    border-radius: 0;
    font-size: 0.95rem;
    border-bottom: 1px solid var(--cream-dark);
  }
}

.cookie-banner {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 200;
  background: var(--text-dark); color: rgba(255,255,255,0.8);
  padding: 14px 24px; font-size: 0.82rem;
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
}
.cookie-banner a { color: var(--gold); text-decoration: underline; }
.cookie-banner button {
  background: var(--gold); border: none; color: var(--text-dark);
  font-weight: 700; padding: 11px 18px; min-height: 44px; border-radius: 6px;
  cursor: pointer; white-space: nowrap; flex-shrink: 0;
}

/* ── Hero (homepage) — "soft split": one cream banner, two audiences side by side,
   hover drifts the circle and dims the other side. CSS-only via :has(). ── */
.hero-soft {
  position: relative; overflow: hidden;
  background: var(--cream);
  border-bottom: 10px solid var(--green-dark);
  min-height: 100dvh;
  display: flex; align-items: center; justify-content: center;
  padding: 96px 40px 90px;
}
.hero-circle {
  position: absolute; border-radius: 50%;
  background: var(--green-light);
  width: 55vw; min-width: 380px; aspect-ratio: 1;
  right: -8vw; top: -30vw; pointer-events: none;
  transition: transform 0.9s ease;
}
.hero-soft:has(.hero-side-worker:hover) .hero-circle { transform: translate(-72%, 16%) scale(1.05); }
.hero-soft:has(.hero-side-employer:hover) .hero-circle { transform: translate(4%, 2%) scale(1.28); }
.hero-sides {
  position: relative; width: 100%; max-width: 820px;
  display: flex; gap: clamp(24px, 6vw, 72px);
  justify-content: center; align-items: stretch; text-align: center;
}
.hero-side {
  flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center;
  cursor: pointer; transition: opacity 0.4s ease;
}
.hero-soft:has(.hero-side-worker:hover) .hero-side-employer,
.hero-soft:has(.hero-side-employer:hover) .hero-side-worker { opacity: 0.45; }
.hero-badge {
  display: inline-block; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  background: var(--green-light); color: var(--green-dark);
  padding: 5px 14px; border-radius: 20px; margin-bottom: 22px;
}
.hero-side h2 { font-size: clamp(2.6rem, 4.6vw, 3.8rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; color: var(--text-dark); margin-bottom: 12px; }
.hero-side-worker h2 { color: var(--green-dark); }
.hero-side-worker h2 em { color: var(--gold); font-style: normal; }
.hero-side-employer h2 em { color: var(--green-dark); font-style: normal; }
.hero-side p { font-size: 0.98rem; color: var(--text-mid); margin-bottom: 26px; }
.hero-side .btn { margin-top: auto; padding: 13px 30px; font-size: 0.95rem; }
.hero-side .btn-ghost { margin-top: 12px; }
.hero-tagline { position: absolute; bottom: 26px; left: 0; right: 0; }
@media (max-width: 640px) {
  .hero-soft { padding: 76px 20px 56px; min-height: 100dvh; }
  /* Stack backpacker above employer (worker markup comes first in the DOM),
     each half filling equal vertical space so the hero fills the screen
     edge to edge instead of leaving dead space below, like the old split hero did. */
  /* Bigger gap between the two stacked sections reads as a clear division
     between "backpacker" and "employer", rather than one run-on block. */
  .hero-sides { flex-direction: column; gap: 56px; }
  .hero-side { flex: 1 1 0; justify-content: center; }
  .hero-side h2 { font-size: clamp(2.5rem, 11vw, 3.1rem); margin-bottom: 16px; }
  .hero-side p { display: none; }
  .hero-side .btn { margin-top: 20px; }
  /* "How it works" / "What X say" are secondary actions - much smaller than
     the primary CTA so they don't compete with the bigger headline above. */
  .hero-side .btn-ghost { font-size: 0.7rem; padding: 7px 16px; margin-top: 8px; }
  .hero-badge { display: none; }
  /* No hover on touch, so the circle would otherwise sit dead still - a slow,
     small drift keeps the hero feeling alive without competing for attention. */
  .hero-circle { animation: heroCircleDrift 7s ease-in-out infinite; }
  @media (prefers-reduced-motion: reduce) {
    .hero-circle { animation: none; }
  }
}
@keyframes heroCircleDrift {
  0%, 100% { transform: translate(0, 0); }
  50% { transform: translate(-3%, 3%); }
}

/* ── Hero option B — single "banner" hero ── */
.hero {
  position: relative; overflow: hidden;
  background: var(--cream);
  border-bottom: 10px solid var(--green-dark);
  min-height: 82vh;
  display: flex; align-items: center; justify-content: center;
  text-align: center; padding: 96px 24px 72px;
}
.hero::before {
  content:''; position:absolute; border-radius:50%;
  background: var(--green-light);
  width: 55vw; min-width: 420px; aspect-ratio: 1;
  right: -8vw; top: -30vw; pointer-events: none;
}
.hero-inner { position: relative; max-width: 640px; display: flex; flex-direction: column; align-items: center; gap: 0; }
.hero h1 { font-size: clamp(2.4rem, 5.4vw, 4.2rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.06; color: var(--green-dark); margin: 26px 0 10px; }
.hero h1 em { color: var(--gold); font-style: normal; }
.hero .hero-sub { font-size: 1.1rem; color: var(--text-mid); max-width: 480px; margin-bottom: 36px; }
.hero .hero-btns { display: flex; gap: 14px; flex-wrap: wrap; justify-content: center; }
.hero .fw-tagline { margin-top: 40px; }

/* ── Hero option A — split hero (restyled) ── */
.split { display: flex; height: 100dvh; min-height: 560px; overflow: hidden; }
.panel {
  position: relative; display: flex; align-items: center; justify-content: center;
  overflow: hidden; flex: 1; cursor: pointer;
  transition: flex 0.65s cubic-bezier(0.4,0,0.2,1), background 0.65s cubic-bezier(0.4,0,0.2,1);
  user-select: none; -webkit-tap-highlight-color: transparent;
}
.panel-worker { background: var(--green-dark); }
.panel-employer { background: var(--cream); }
.panel-employer::before { content:''; position:absolute; border-radius:50%; background:var(--green-light); width:60%; min-width:300px; aspect-ratio:1; right:-18%; top:-24%; }
.panel-employer.collapsed { background: var(--green-dark); }
.panel-worker.collapsed { background: var(--cream); }
.panel.collapsed::before { opacity: 0; }
.panel-worker.collapsed .strip-label { color: rgba(43,92,30,0.4); }
.panel.expanded { flex: 18; cursor: default; }
.panel.collapsed { flex: 0 0 88px; cursor: pointer; }
.panel-inner { position: relative; z-index: 1; text-align: center; padding: 52px 48px; max-width: 560px; width: 100%; transition: opacity 0.22s ease; }
.panel.collapsed .panel-inner { opacity: 0; pointer-events: none; }
.panel-badge {
  display: inline-block; font-size: 0.72rem; font-weight: 600;
  letter-spacing: 0.16em; text-transform: uppercase;
  padding: 5px 14px; border-radius: 20px; margin-bottom: 32px;
}
.panel-worker .panel-badge { background: rgba(255,255,255,0.1); color: rgba(255,255,255,0.75); }
.panel-employer .panel-badge { background: var(--green-light); color: var(--green-dark); }
.panel-inner h2 { font-size: clamp(2.2rem, 3.8vw, 3.8rem); font-weight: 800; letter-spacing:-0.02em; line-height: 1.1; margin-bottom: 20px; }
.panel-worker .panel-inner h2 { color: var(--white); }
.panel-employer .panel-inner h2 { color: var(--text-dark); }
.panel-worker .panel-inner h2 em { color: var(--gold); font-style: normal; }
.panel-employer .panel-inner h2 em { color: var(--green-dark); font-style: normal; }
.panel-inner p { font-size: 1.05rem; line-height: 1.7; margin-bottom: 40px; }
.panel-worker .panel-inner p { color: rgba(255,255,255,0.7); }
.panel-employer .panel-inner p { color: var(--text-mid); }
.panel-btns { display: flex; flex-direction: column; align-items: center; gap: 14px; }
.panel-worker .panel-btn { background: var(--gold); color: var(--text-dark); }
.panel-employer .panel-btn { background: var(--green-dark); color: var(--white); }
.panel-btn:hover { transform: translateY(-2px); opacity: 0.9; }
.panel-worker .panel-btn-ghost { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.85); }
.panel-worker .panel-btn-ghost:hover { background: rgba(255,255,255,0.08); }
.strip-label {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%,-50%);
  text-align: center; font-size: 0.65rem; font-weight: 700;
  letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255,255,255,0.45); line-height: 1.5;
  opacity: 0; transition: opacity 0.2s ease 0.42s; pointer-events: none; width: 76px;
}
.panel.collapsed .strip-label { opacity: 1; }

.page-content { display: none; scroll-margin-top: 70px; }
.page-content.visible { display: block; animation: fadeUp 0.45s ease; }
@keyframes fadeUp { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:translateY(0); } }

/* ── Mobile ── */
@media (max-width: 640px) {
  .split { flex-direction: column; }
  .panel-inner p { display: none; }
  .panel-inner { padding: 52px 24px; }
  .panel-badge { visibility: hidden; }
  .panel-inner h2 { font-size: clamp(1.9rem, 8vw, 2.6rem); margin-bottom: 18px; }
  .panel.collapsed { flex: 0 0 52px !important; }
  .strip-label { font-size: 0.6rem; width: 120px; }
  .section { padding: 48px 20px; }
  .stats { padding: 18px 16px; }
  .stat { min-width: 0; }
  .stat strong { font-size: 1.3rem; margin-bottom: 0; }
  .stat span { display: none; }
  .hero { min-height: 70vh; padding: 80px 20px 56px; }
  .detail-body { padding: 24px 20px; }
  .form-section { padding: 22px 18px; }
}
@media (max-width: 520px) {
  .page-header { padding: 40px 20px 32px; }
  .listings-wrap { padding: 20px 16px 48px; }
  .filters-inner { gap: 8px; }
  .filters select { font-size: 0.85rem; padding: 8px 10px; }
}