:root{
  --pghm-gold:#C0A268;
  --pghm-card:#ffffff;
  --pghm-arrow-color:#FFFFFF;
  --pghm-arrow-width:6;
  --pghm-arrow-speed:1.1s;
  --pghm-arrow-dir:down;
  --pghm-icon-fit:contain;
}

.pghm-ff-timeline{ background:transparent; font-family:Poppins, Arial, sans-serif; padding:26px 12px 42px; }
.pghm-ff-header{ max-width:780px; margin:0 auto 12px; text-align:center; }
.pghm-ff-header h2{ font-size:30px; margin:0 0 4px; color:var(--pghm-gold); font-weight:700; }
.pghm-ff-subtitle{ font-size:16px; margin:0; color:#F5F5F5; }

.pghm-ff-steps{ list-style:none; padding:0; margin:14px auto 0; max-width:780px; display:grid; grid-template-columns: 1fr; gap:22px; }
.pghm-ff-step{ opacity:0; transform:translateY(10px) scale(.985); filter:blur(1px); transition:opacity .6s ease, transform .6s ease, filter .6s ease; }
.pghm-ff-step.is-visible{ opacity:1; transform:translateY(0) scale(1); filter:blur(0); }

.pghm-ff-card{ background:var(--pghm-card); color:#1b1b1b; border:1px solid rgba(0,0,0,.10); border-left:6px solid var(--pghm-gold); border-radius:16px; padding:16px; box-shadow:0 16px 44px rgba(0,0,0,.32); }
.pghm-ff-card-head{ display:flex; align-items:center; gap:12px; margin-bottom:2px; }
.pghm-ff-card h3{ margin:0; font-size:19px; color:#111; }
.pghm-ff-card p{ margin:6px 0 0; font-size:14.5px; color:#343434; }

/* Icon Badge */
.pghm-ff-icon-wrap{ display:inline-flex; align-items:center; justify-content:center; width:var(--pghm-icon-size,60px); height:var(--pghm-icon-size,60px); border-radius:12px; background:var(--pghm-gold); color:#FFF; border:1px solid rgba(0,0,0,.06); box-shadow:0 2px 6px rgba(0,0,0,.18); overflow:hidden; }
.pghm-ff-icon-inner{ display:inline-flex; align-items:center; justify-content:center; width:74%; height:74%; }
.pghm-ff-ico{ width:100%; height:100%; display:block; color:#FFF; }
.pghm-ff-ico *{ vector-effect: non-scaling-stroke; }
.pghm-ff-icoimg{ width:100%; height:100%; object-fit: var(--pghm-icon-fit); display:block; }

/* Connectors */
.pghm-ff-connector{ display:flex; align-items:center; justify-content:center; min-height:60px; }

/* line */
.pghm-ff-arrow-vertical.line{ width:64px; height:88px; color:var(--pghm-arrow-color); }
.pghm-ff-arrow-vertical.line .pghm-ff-curve{ stroke:currentColor; stroke-width:var(--pghm-arrow-width); fill:none; stroke-linecap:round; stroke-dasharray: 8 10; animation: pghm-dash var(--pghm-arrow-speed) linear infinite; }
.pghm-ff-arrow-vertical.line .pghm-ff-head{ stroke:currentColor; stroke-width:var(--pghm-arrow-width); fill:none; stroke-linecap:round; }
@keyframes pghm-dash{ from{ stroke-dashoffset: 0; } to{ stroke-dashoffset: -18; } }

/* arrow */
.pghm-ff-arrow-vertical.arrow{ width:80px; height:110px; color:var(--pghm-arrow-color); }
.pghm-ff-arrow-vertical.arrow .shaft{ fill:currentColor; }
.pghm-ff-arrow-vertical.arrow .head{ fill:currentColor; }
.pghm-ff-arrow-vertical.arrow .arrow-anim{ animation: arrow-bob 1.4s ease-in-out infinite; transform-origin: 40px 96px; }
.pghm-ff-timeline[style*="--pghm-arrow-dir:up"] .pghm-ff-arrow-vertical.arrow .arrow-anim{ transform: rotate(180deg); }
@keyframes arrow-bob{ 0%{ transform: translateY(0); } 50%{ transform: translateY(6px); } 100%{ transform: translateY(0); } }

/* chevron */
.pghm-ff-chevron{ display:flex; align-items:center; justify-content:center; height:44px; }
.pghm-ff-chevron span{ position:relative; width:0; height:0; border-left:12px solid transparent; border-right:12px solid transparent; border-top:16px solid var(--pghm-arrow-color); filter: drop-shadow(0 1px 0 rgba(0,0,0,.25)); }
.pghm-ff-chevron span::before{ content:''; position:absolute; left:50%; transform:translateX(-50%); top:-12px; width:6px; height:6px; background:var(--pghm-arrow-color); border-radius:999px; }

@media (prefers-reduced-motion: reduce){
  .pghm-ff-step{ transition:none; transform:none; filter:none; }
  .pghm-ff-arrow-vertical.line .pghm-ff-curve{ animation:none; }
  .pghm-ff-arrow-vertical.arrow .arrow-anim{ animation:none; }
}
