/* ============================================================
   hero-live.css - HOME HERO: hand-written pen-draw slides
   (Vara.js). Pure white full-screen stage; the word draws in
   like handwriting, key word in green, caption below. (.fpxs-*)
   ============================================================ */
body.fp-ed.fp-home .fpxs-hero {
  position: relative; overflow: hidden;
  background: #ffffff;
  padding: clamp(24px, 3vw, 48px) 0;
  /* full-screen feel: fill the viewport below the navbar, content centered */
  min-height: calc(100vh - 68px);
  min-height: calc(100svh - 68px);
  display: flex; align-items: center;
}
body.fp-ed.fp-home .fpxs-hero > .ed-container { width: 100%; }
body.fp-ed.fp-home .fpxs-stage {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center;
  min-height: clamp(360px, 52vh, 560px);
}
/* sub-caption - fades in under the word once its letters have landed */
body.fp-ed.fp-home .fpxs-cap {
  margin: 12px 0 0; min-height: 1.4em;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .84rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase;
  color: #6b7a99; text-align: center;
  opacity: 0; transform: translateY(10px);
  transition: opacity .55s ease, transform .55s cubic-bezier(.22, 1, .36, 1);
}
body.fp-ed.fp-home .fpxs-cap.is-in { opacity: 1; transform: translateY(0); }

/* ---------- pen-draw (Vara) host ---------- */
body.fp-ed.fp-home .fpxs-vara {
  width: 100%;
  /* fixed writing area, word anchored to its BOTTOM - the caption sits at a
     constant position right below with no dead space between slides */
  height: 200px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  transition: opacity .55s ease, filter .55s ease;
}
body.fp-ed.fp-home .fpxs-vara.is-out { opacity: 0; filter: blur(14px); }
body.fp-ed.fp-home .fpxs-vara svg { display: block; margin: 0 auto; overflow: visible; }
/* soft glass: strokes are lightly translucent, so cursive joins layer like
   tinted glass - kept subtle */
body.fp-ed.fp-home .fpxs-vara path { stroke-linecap: round; stroke-linejoin: round; stroke-opacity: .88; }
/* soft glow that follows the green (key-word) strokes */
body.fp-ed.fp-home .fpxs-vara .fpxs-glowp { filter: drop-shadow(0 0 9px rgba(16, 185, 129, .32)); }
/* pen swoosh - a little green underline drawn under the KEY word (JS sets
   margin-left + width so it hugs the green word, not the centre) */
body.fp-ed.fp-home .fpxs-swoosh { display: block; margin: 10px 0 0; align-self: flex-start; overflow: visible; flex: none; }
body.fp-ed.fp-home .fpxs-swoosh path {
  fill: none; stroke: url(#fpxGg); stroke-width: 4; stroke-linecap: round;
  stroke-dasharray: 1; stroke-dashoffset: 1;
  filter: drop-shadow(0 0 7px rgba(16, 185, 129, .3));
}
body.fp-ed.fp-home .fpxs-swoosh.is-on path {
  transition: stroke-dashoffset .5s cubic-bezier(.4, 0, .2, 1);
  stroke-dashoffset: 0;
}
@media (max-width: 560px) {
  body.fp-ed.fp-home .fpxs-vara { height: 140px; }
  body.fp-ed.fp-home .fpxs-cap {
    font-size: .68rem; letter-spacing: .12em;
    padding: 0 14px; line-height: 1.7;
  }
  body.fp-ed.fp-home .fpxs-stage { min-height: 280px; }
}

/* parked for the NEXT hero step - keeps the functional search markup alive */
body.fp-ed.fp-home .fpxs-parked { display: none !important; }

@media (prefers-reduced-motion: reduce) {
  body.fp-ed.fp-home .fpxs-vara { transition: none; }
  body.fp-ed.fp-home .fpxs-cap { transform: none; transition: opacity .8s ease; }
  body.fp-ed.fp-home .fpxs-swoosh path { transition: none; stroke-dashoffset: 0; }
}

/* ============================================================
   fp-hph - HERO PHOTO (handshake). A full-bleed office photo of a
   client and a freelancer shaking hands; the headline is set into
   the image's bright left-hand white space. Desktop = text overlay
   with a soft white wash for legibility; mobile = stacked banner.
   Overrides the pen-draw stage above (higher specificity + later).
   ============================================================ */
body.fp-ed.fp-home .fpxs-hero.fp-hph {
  min-height: 0;
  padding: 0;
  display: block;
  background: #eef2f7;   /* cool white - blends with any letterbox edge */
  isolation: isolate;
}
body.fp-ed.fp-home .fp-hph-img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  object-position: 64% center;   /* keep the handshake in frame at right */
  z-index: 0;
}
/* soft white wash on the left so the ink copy always reads over the photo */
body.fp-ed.fp-home .fp-hph::before {
  content: "";
  position: absolute; inset: 0;
  z-index: 1;
  background: linear-gradient(
    92deg,
    rgba(255, 255, 255, .95) 0%,
    rgba(255, 255, 255, .92) 22%,
    rgba(255, 255, 255, .60) 42%,
    rgba(255, 255, 255, .14) 56%,
    rgba(255, 255, 255, 0) 66%
  );
  pointer-events: none;
}
body.fp-ed.fp-home .fp-hph-wrap {
  position: relative; z-index: 2;
  min-height: clamp(500px, 44vw, 720px);
  display: flex; align-items: center;
}
body.fp-ed.fp-home .fp-hph-copy {
  max-width: 42rem;
  padding: clamp(28px, 4vw, 56px) 0;
}
body.fp-ed.fp-home .fp-hph-eyebrow {
  margin: 0 0 14px;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: .82rem; font-weight: 800;
  letter-spacing: .14em; text-transform: uppercase;
  color: #0b8a5b;   /* emerald - ties to the green figure + trust ticks below */
}
body.fp-ed.fp-home .fp-hph-title {
  margin: 0;
  font-family: 'Inter', system-ui, sans-serif;
  font-size: clamp(2.2rem, 4vw, 3.2rem);
  font-weight: 800; line-height: 1.05; letter-spacing: -.03em;
  color: #0b1526;   /* ink */
  text-wrap: balance;
}
body.fp-ed.fp-home .fp-hph-sub {
  margin: 20px 0 0;
  max-width: 34rem;
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.62; color: #45526b;
}
body.fp-ed.fp-home .fp-hph-cta {
  display: flex; flex-wrap: wrap; gap: 14px;
  margin-top: 30px;
}
body.fp-ed.fp-home .fp-hph-cta .ed-btn { min-height: 54px; padding: 0 28px; font-size: 1rem; }

@media (max-width: 820px) {
  body.fp-ed.fp-home .fp-hph-img {
    position: relative; inset: auto;
    width: 100%; height: auto; aspect-ratio: 16 / 11;
    object-position: 70% center;
  }
  body.fp-ed.fp-home .fp-hph::before { display: none; }
  body.fp-ed.fp-home .fp-hph-wrap { display: block; min-height: 0; }
  body.fp-ed.fp-home .fp-hph-copy {
    max-width: none;
    padding: 24px 0 6px; text-align: center;
  }
  body.fp-ed.fp-home .fp-hph-sub { margin-left: auto; margin-right: auto; }
  body.fp-ed.fp-home .fp-hph-cta { justify-content: center; }
}
@media (max-width: 480px) {
  body.fp-ed.fp-home .fp-hph-cta { flex-direction: column; }
  body.fp-ed.fp-home .fp-hph-cta .ed-btn { width: 100%; }
}