/* ===================== ANIMATED HERO (hero-x) — shared =====================
   Full-bleed two-column hero: canvas particle web + drifting glow behind a
   Space Grotesk headline. Spec colours (#1C6E45 / #C8912E). Reveal is CSS;
   the particle canvas is driven by hero-x.js. Single source of truth for the
   homepage (index.html) and the three audience pages (seekers / vendors /
   employers) — they all <link> this file and load hero-x.js.
   Section keeps class="hero hero-x" so `.hero.hero-x` (0,2,0) overrides any
   stray `.hero` rule regardless of stylesheet order. */
.hero.hero-x {
  position: relative; overflow: hidden; isolation: isolate;
  padding: clamp(24px,4vh,48px) 0;
  min-height: calc(100svh - 72px);
  display: flex; align-items: center;
  background: var(--sand);
  --hx-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --hx-green: #1C6E45; --hx-green-d: #155235; --hx-gold: #C8912E;  /* spec literal hero accents */
}
.hero-x .hx-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; pointer-events:none; }
.hero-x .hx-glow {
  position:absolute; z-index:0; pointer-events:none;
  width:760px; height:760px; left:40%; top:50%; margin:-380px 0 0 -380px;
  background: radial-gradient(circle, rgba(28,110,69,0.10), rgba(28,110,69,0.03) 44%, transparent 66%);
  filter: blur(8px);
  animation: heroGlowDrift 28s var(--hx-ease) infinite;
}
/* legibility wash — keeps the left text crisp while the right stays lively */
.hero-x .hx-grad {
  position:absolute; inset:0; z-index:1; pointer-events:none;
  background: linear-gradient(100deg, rgba(246,238,224,0.86) 0%, rgba(246,238,224,0.46) 30%, rgba(246,238,224,0) 52%);
}
.hero-x .hx-grid {
  position:relative; z-index:2; width:100%; max-width:1240px; margin-inline:auto;
  padding: clamp(8px,2vh,24px) clamp(24px,5vw,72px);
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:clamp(36px,5vw,72px); align-items:center;
}
.hero-x .hx-left, .hero-x .hx-right { min-width:0; }

/* breadcrumb (audience pages) — small, sits above the eyebrow */
.hero-x .hx-crumb { display:flex; align-items:center; gap:8px; font-size:13px; color:var(--ink-3); margin:0 0 16px; flex-wrap:wrap; }
.hero-x .hx-crumb a:hover { color:var(--hx-green-d); }
.hero-x .hx-crumb .here { color:var(--ink-1); font-weight:600; }

.hero-x .hx-eyebrow {
  display:inline-block; font-family:var(--font-body);
  font-size:12px; font-weight:700; letter-spacing:0.1em; text-transform:uppercase;
  color:var(--ink-3); margin:0 0 18px;
}
.hero-x .hx-eb-so { color:var(--hx-gold); font-style:italic; text-transform:none; letter-spacing:0; font-weight:600; }

.hero-x .hx-h1 { margin:0; }
.hero-x .hx-line {
  display:block; font-family:var(--font-grotesk);
  font-weight:500; font-style:normal;
  font-size:clamp(42px,5.6vw,78px); line-height:1.0; letter-spacing:-0.02em; color:var(--ink-1);
}
.hero-x .hx-gold { color:var(--hx-gold); }

.hero-x .hx-sub {
  margin:22px 0 0; font-family:var(--font-body);
  font-size:clamp(17px,1.5vw,20px); line-height:1.55; color:var(--ink-2); max-width:48ch;
}
.hero-x .hx-sub-so { margin:9px 0 0; font-style:italic; color:var(--hx-gold); font-size:15.5px; line-height:1.5; max-width:48ch; }

.hero-x .hx-cta-row { display:flex; flex-wrap:wrap; align-items:center; gap:14px 22px; margin-top:30px; }
.hero-x .hx-cta {
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--font-body); font-weight:700; font-size:16px; color:#fff;
  background:var(--hx-green); padding:16px 28px; border-radius:999px;
  box-shadow:0 10px 24px rgba(45,32,12,0.16);
  transition:transform .16s var(--hx-ease), background .16s var(--hx-ease), box-shadow .16s var(--hx-ease);
}
.hero-x .hx-cta svg { width:18px; height:18px; transition:transform .16s var(--hx-ease); }
.hero-x .hx-cta:hover { transform:translateY(-2px); box-shadow:0 16px 34px rgba(45,32,12,0.22); }
.hero-x .hx-cta:hover svg { transform:translateX(3px); }
.hero-x .hx-cta:active { background:var(--hx-green-d); transform:translateY(0) scale(0.99); box-shadow:inset 0 2px 6px rgba(0,0,0,0.22); }
.hero-x .hx-cta-2 {
  font-family:var(--font-body); font-weight:600; font-size:14.5px; color:var(--ink-2);
  padding:8px 2px; border-bottom:1.5px solid transparent;
  transition:color .16s var(--hx-ease), border-color .16s var(--hx-ease);
}
.hero-x .hx-cta-2:hover { color:var(--hx-green-d); border-color:var(--hx-gold); }
.hero-x .hx-counter { margin:18px 0 0; font-size:13.5px; color:var(--ink-2); font-weight:600; }

.hero-x .hx-imgwrap { position:relative; }
.hero-x .hx-lattice {
  position:absolute; top:-20px; right:-12px; z-index:0; width:124px; height:124px; pointer-events:none;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Cpath d='M13 0L26 13L13 26L0 13Z' fill='none' stroke='%23C8912E' stroke-opacity='0.45' stroke-width='1'/%3E%3C/svg%3E");
  background-size:26px 26px;
}
.hero-x .hx-card {
  position:relative; z-index:1; overflow:hidden; height:min(72vh,600px);
  border-radius:26px; border:1px solid var(--border);
  box-shadow:0 26px 64px rgba(45,32,12,0.18), 0 8px 20px rgba(45,32,12,0.08);
}
.hero-x .hx-img { width:100%; height:100%; object-fit:cover; object-position:center 22%; display:block; }

/* keyframes */
@keyframes heroLineIn { from{opacity:0;transform:translateY(30px);filter:blur(12px);} to{opacity:1;transform:translateY(0);filter:blur(0);} }
@keyframes heroWinPop { 0%{opacity:0;transform:translateY(22px) scale(0.9);filter:blur(10px);} 65%{opacity:1;transform:translateY(-2px) scale(1.03);filter:blur(0);} 100%{opacity:1;transform:translateY(0) scale(1);filter:blur(0);} }
@keyframes heroFadeUp { from{opacity:0;transform:translateY(20px);} to{opacity:1;transform:translateY(0);} }
@keyframes heroImageIn { from{opacity:0;transform:translateY(26px) scale(0.985);} to{opacity:1;transform:translateY(0) scale(1);} }
@keyframes heroGlowDrift { 0%,100%{transform:translate(-6%,4%) scale(1);} 50%{transform:translate(8%,-6%) scale(1.16);} }

/* reveal — visible by default (no-JS), hidden+animated when JS is on */
.hero-x .hero-anim { opacity:1; }
html.js .hero-x .hero-anim { opacity:0; }
html.js .hero-x .hx-eyebrow { animation:heroFadeUp .7s var(--hx-ease) .04s forwards; }
html.js .hero-x .hx-l1 { animation:heroLineIn .85s var(--hx-ease) .10s forwards; }
html.js .hero-x .hx-l2 { animation:heroLineIn .85s var(--hx-ease) .22s forwards; }
html.js .hero-x .hx-l3 { animation:heroWinPop .9s var(--hx-ease) .55s forwards; }
html.js .hero-x .hx-sub { animation:heroFadeUp .7s var(--hx-ease) 1.30s forwards; }
html.js .hero-x .hx-sub-so { animation:heroFadeUp .7s var(--hx-ease) 1.42s forwards; }
html.js .hero-x .hx-cta-row { animation:heroFadeUp .7s var(--hx-ease) 1.55s forwards; }
html.js .hero-x .hx-imgwrap { animation:heroImageIn .9s var(--hx-ease) .90s forwards; }
/* counter is JS-toggled; keep it visible whenever shown (never trapped at opacity:0) */
html.js .hero-x .hx-counter { opacity:1; animation:none; }

/* responsive */
@media (max-width:920px){
  .hero.hero-x { min-height:auto; padding:34px 0 44px; }
  .hero-x .hx-grid { grid-template-columns:1fr; gap:30px; }
  .hero-x .hx-card { height:min(54vh,430px); }
  .hero-x .hx-grad { background:linear-gradient(180deg, rgba(246,238,224,0.82) 0%, rgba(246,238,224,0.30) 55%, rgba(246,238,224,0) 100%); }
}
@media (max-width:560px){
  .hero-x .hx-grid { padding-inline:22px; }
  .hero-x .hx-lattice { width:92px; height:92px; top:-14px; right:-8px; }
  .hero-x .hx-card { height:min(58vh,400px); }
  .hero-x .hx-cta { width:100%; justify-content:center; }
}

/* accessibility: no canvas, no glow, no reveal — full headline shown instantly */
@media (prefers-reduced-motion: reduce){
  html.js .hero-x .hero-anim { opacity:1 !important; transform:none !important; filter:none !important; animation:none !important; }
  .hero-x .hx-glow, .hero-x .hx-canvas { display:none; }
}