/* ==========================================================================
   EMPLOYAI — editorial homepage layer
   Layered on top of styles.css (shared tokens/buttons/nav/footer mechanics).
   Numbered, asymmetric editorial composition. No character/scene illustration
   system here — sections are typography + UI elements only. Component names
   are prefixed `ed-` to keep this layer visually and structurally separable —
   pages not yet migrated keep using the plain classes in styles.css.
   ========================================================================== */

.ed-section{padding-block:clamp(72px,10vw,140px)}

/* section numbering — big faint index number beside the eyebrow label */
.ed-index-row{display:flex;align-items:baseline;gap:var(--sp-4);margin-bottom:var(--sp-6)}
.ed-index-num{font-family:var(--font-display);font-size:clamp(2.25rem,4vw,3.25rem);font-weight:650;color:var(--gray-500);line-height:1;letter-spacing:-.02em}
.ed-statement{font-family:var(--font-display);font-weight:650;letter-spacing:-.02em;line-height:1.06;font-size:clamp(2.25rem,4.6vw,4rem);max-width:18ch}
.ed-lede{font-size:clamp(1.0625rem,1.4vw,1.25rem);color:var(--gray-700);line-height:1.6;max-width:52ch;margin-top:var(--sp-5)}

/* ---------- hero ---------- */
.ed-hero{padding-top:clamp(48px,6vw,84px);position:relative;overflow:hidden}
.ed-hero h1{font-size:clamp(2.75rem,6.4vw,5.5rem);max-width:14ch}
.ed-hero-actions{display:flex;gap:var(--sp-4);margin-top:var(--sp-7);flex-wrap:wrap}
.ed-hero-copy{max-width:none}
.ed-hero h1{max-width:none}
.ed-hero .ed-lede{max-width:60ch}

/* ---------- stats ---------- */
.ed-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-7);margin-top:var(--sp-8)}
@media (max-width:900px){.ed-stats{grid-template-columns:1fr 1fr;gap:var(--sp-6)}}
.ed-stat{border-top:1px solid var(--gray-200);padding-top:var(--sp-4)}
.ed-stat-num{font-family:var(--font-display);font-weight:650;font-size:clamp(2.5rem,4.2vw,3.75rem);letter-spacing:-.02em;line-height:1}
.ed-stat-label{font-size:.9375rem;color:var(--gray-700);margin-top:var(--sp-2)}

/* ==========================================================================
   Services section
   Desktop: large H2 left / "SEE ALL SERVICES" CTA right, then 4 equal cards.
   Cards: #121212 + white by default (identical structurally), invert to
   #C9F31D + #121212 on hover — the ONLY place lime becomes a fill, and only
   on :hover/:focus, never a permanent state. Tablet: 2x2. Mobile: 1 column.
   ========================================================================== */
.ed-services-header{display:flex;align-items:flex-end;justify-content:space-between;gap:var(--sp-6);flex-wrap:wrap;margin-bottom:var(--sp-8)}
.ed-services-header h2{max-width:none}
.ed-services-cta{
  display:inline-flex;align-items:center;gap:10px;flex-shrink:0;
  background:var(--employai-accent);color:var(--primary);border:1px solid var(--employai-accent);
  font-family:var(--font-mono);font-size:.8125rem;font-weight:600;letter-spacing:.04em;text-transform:uppercase;
  padding:13px 22px;border-radius:var(--radius-sm);transition:background-color .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease);
}
.ed-services-cta:hover{background:var(--primary);color:var(--employai-accent);border-color:var(--primary)}
.ed-services-cta svg{transition:transform .2s var(--ease)}
.ed-services-cta:hover svg{transform:translateX(3px)}

.ed-services-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5)}
@media (max-width:1024px){.ed-services-grid{grid-template-columns:1fr 1fr}}
@media (max-width:640px){.ed-services-grid{grid-template-columns:1fr}}

.ed-service-card{
  display:flex;flex-direction:column;gap:var(--sp-7);min-height:320px;padding:var(--sp-6);
  background:var(--primary);color:var(--employai-white);border-radius:var(--radius-lg);
  text-decoration:none;
  transition:background-color .3s var(--ease),color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease);
}
.ed-service-card:hover,.ed-service-card:focus-visible{
  background:var(--employai-accent);color:var(--primary);
  transform:translateY(-6px);box-shadow:0 24px 48px rgba(0,0,0,.22);outline:none;
}
.ed-service-icon{width:52px;height:52px;color:var(--employai-white);transition:color .3s var(--ease)}
.ed-service-card:hover .ed-service-icon,.ed-service-card:focus-visible .ed-service-icon{color:var(--primary)}
.ed-service-body{margin-top:auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.ed-service-title{font-family:var(--font-display);font-weight:600;font-size:clamp(1.125rem,1.6vw,1.375rem);letter-spacing:-.01em}
.ed-service-readmore{display:inline-flex;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.05em;text-transform:uppercase;color:inherit}
.ed-service-arrow{
  width:34px;height:34px;border-radius:50%;border:1px solid currentColor;flex-shrink:0;
  display:flex;align-items:center;justify-content:center;
}
.ed-service-arrow svg{transition:transform .25s var(--ease)}
.ed-service-card:hover .ed-service-arrow svg,.ed-service-card:focus-visible .ed-service-arrow svg{transform:translateX(3px)}

/* ---------- full-width statement banner ---------- */
.ed-break{background:var(--primary);padding-block:clamp(64px,10vw,120px);text-align:center}
.ed-break h2{font-size:clamp(1.75rem,4vw,3rem);max-width:16ch;margin-inline:auto}

/* ---------- process flow (Understand / Match / Connect / Grow) ---------- */
.ed-process{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--sp-5);margin-top:var(--sp-8)}
@media (max-width:900px){.ed-process{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.ed-process{grid-template-columns:1fr}}
.ed-process-step{border-top:2px solid var(--ink);padding-top:var(--sp-4)}
.ed-process-num{font-family:var(--font-mono);font-size:.75rem;color:var(--primary);letter-spacing:.06em}
.ed-process-step h3{margin-top:var(--sp-2)}
.ed-process-step p{color:var(--gray-700);font-size:.9375rem;margin-top:6px}

/* ---------- animated hiring-pipeline strip ---------- */
.ed-pipeline-demo{margin-top:var(--sp-8);padding-top:var(--sp-7);border-top:1px solid var(--gray-200)}
.ed-pipeline-track{position:relative;display:grid;grid-template-columns:repeat(5,1fr);padding-top:var(--sp-6)}
.ed-pipeline-line{position:absolute;top:calc(var(--sp-6) + 6px);left:10%;right:10%;height:2px;background:var(--gray-200)}
.ed-pipeline-stage{
  display:flex;flex-direction:column;align-items:center;gap:10px;font-family:var(--font-mono);font-size:.75rem;
  color:var(--gray-500);position:relative;z-index:1;animation:ed-pipeline-stage-active 10s ease-in-out infinite;
}
.ed-pipeline-dot{width:13px;height:13px;border-radius:50%;background:var(--white);border:2px solid currentColor;flex-shrink:0}
@keyframes ed-pipeline-stage-active{
  0%,4%{color:var(--gray-500)}
  6%,14%{color:var(--primary)}
  20%,100%{color:var(--gray-500)}
}
.ed-pipeline-card{
  position:absolute;top:calc(var(--sp-6) - 10px);left:10%;transform:translateX(-50%);
  width:34px;height:34px;border-radius:50%;background:var(--white);border:2px solid var(--accent);
  display:flex;align-items:center;justify-content:center;box-shadow:var(--shadow-pop);
  animation:ed-pipeline-move 10s ease-in-out infinite;
}
@keyframes ed-pipeline-move{
  0%{left:10%;opacity:0}
  4%{opacity:1}
  14%{left:10%;opacity:1}
  20%,34%{left:30%}
  40%,54%{left:50%}
  60%,74%{left:70%}
  80%,94%{left:90%;opacity:1}
  100%{left:90%;opacity:0}
}
@media (max-width:700px){
  .ed-pipeline-stage span:last-child{display:none}
}

/* ---------- industries hover list ---------- */
.ed-industry-list{border-top:1px solid var(--gray-200)}
.ed-industry-item{
  display:flex;align-items:center;justify-content:space-between;padding-block:var(--sp-5);
  border-bottom:1px solid var(--gray-200);border-left:3px solid transparent;font-family:var(--font-display);font-weight:600;
  font-size:clamp(1.25rem,2.4vw,1.875rem);letter-spacing:-.01em;cursor:pointer;color:var(--primary);
  transition:padding-left .2s var(--ease),border-left-color .2s var(--ease);
}
/* lime marks the hovered item as a left-edge indicator, not a text recolor —
   #C9F31D is too light to read as body-sized text on this ivory bg */
.ed-industry-item:hover{padding-left:var(--sp-4);border-left-color:var(--accent)}
.ed-industry-item small{font-family:var(--font-mono);font-size:.75rem;color:var(--gray-500);font-weight:500;letter-spacing:.03em}

/* ---------- technology (minimal marks) ---------- */
.ed-tech-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--sp-5);margin-top:var(--sp-7)}
@media (max-width:900px){.ed-tech-grid{grid-template-columns:repeat(2,1fr)}}
.ed-tech-mark{border:1px solid var(--gray-200);border-radius:var(--radius-md);padding:var(--sp-5);text-align:center}
.ed-tech-mark .icon-tile{margin-inline:auto}
.ed-tech-mark p{font-size:.8125rem;color:var(--gray-700);margin-top:var(--sp-3)}

/* ---------- testimonial ---------- */
.ed-quote{font-family:var(--font-display);font-weight:600;letter-spacing:-.01em;line-height:1.28;font-size:clamp(1.5rem,2.8vw,2.25rem)}
.ed-quote-meta{margin-top:var(--sp-5);color:var(--gray-700);font-size:.9375rem;font-family:var(--font-mono)}

/* ---------- final CTA ---------- */
.ed-final-cta{
  position:relative;color:var(--white);border-radius:var(--radius-lg);overflow:hidden;
  padding:clamp(56px,8vw,120px) clamp(24px,6vw,72px);text-align:center;
  background:
    radial-gradient(60% 70% at 50% 0%, rgba(201,243,29,.16) 0%, rgba(201,243,29,0) 60%),
    radial-gradient(120% 130% at 50% 100%, #262626 0%, var(--primary) 55%, #0a0a0a 100%);
}
.ed-final-cta h2{font-size:clamp(2.25rem,5vw,4rem)}
.ed-final-cta h2:not(.grad-heading){color:var(--white)}
.ed-final-cta p{color:var(--gray-200);max-width:520px;margin:var(--sp-4) auto 0}
.ed-final-cta .ed-final-actions{display:flex;gap:var(--sp-4);justify-content:center;margin-top:var(--sp-7);flex-wrap:wrap}

/* ---------- misc ---------- */
.ed-eyebrow-num{font-family:var(--font-mono);font-size:.75rem;font-weight:500;letter-spacing:.09em;text-transform:uppercase;color:var(--primary)}