/* =====================================================================
   EXTRAS — formation hero, process steps, footer contact lines and the
   WhatsApp button. Loaded after style.css on every page.
   Uses the colour, font and easing variables already defined in style.css.
   ===================================================================== */

/* ---------- 1. Formation hero ----------
   The canvas sits above the glow and below the hero text. It only draws
   the dots that are lit, so the halftone grid underneath stays as it was. */
.formation{
  position:absolute; top:0; left:0;
  width:100%; height:100%;
  z-index:1;
  pointer-events:none;
}

/* ---------- 2. Process: Dream, Plan, Execute, Grow ---------- */
.process-track{
  --gap: 32px;
  list-style:none; margin:0; padding:0;
  display:grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--gap);
}
.stage{
  --step: .6s;
  position:relative;
  padding-top: 44px;
}

/* marker dot */
.stage::before{
  content:"";
  position:absolute; top:0; left:0;
  width:14px; height:14px;
  border-radius:50%;
  background: var(--c-black);
  border: 2px solid var(--c-line);
  z-index:1;
  transition: background .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease);
  transition-delay: calc(var(--i) * var(--step));
}
/* line running to the next stage; fills with orange when the stage lights up */
.stage:not(:last-child)::after{
  content:"";
  position:absolute; top:6px; left:14px;
  width: calc(100% + var(--gap) - 14px);
  height:2px;
  background-color: var(--c-line);
  background-image: linear-gradient(var(--c-orange), var(--c-orange));
  background-repeat:no-repeat;
  background-position:left center;
  background-size:0% 100%;
  transition: background-size var(--step) var(--ease);
  transition-delay: calc(var(--i) * var(--step));
}
.stage.is-on::before{
  background: var(--c-orange);
  border-color: var(--c-orange);
  box-shadow: 0 0 0 6px var(--c-orange-dim);
}
.stage.is-on::after{ background-size:100% 100%; }

.stage-num{
  display:block;
  font-family: var(--font-mono);
  font-size:.8rem;
  letter-spacing:.1em;
  color: var(--c-gray-mid);
  margin-bottom:10px;
  transition: color .4s var(--ease);
  transition-delay: calc(var(--i) * var(--step));
}
.stage.is-on .stage-num{ color: var(--c-orange); }
.stage h3{ margin-bottom:10px; }
.stage p{ font-size:.95rem; max-width:32ch; margin:0; }

@media (max-width: 860px){
  .process-track{ grid-template-columns: 1fr; gap:0; }
  .stage{ --step: 0s; padding: 0 0 40px 44px; }
  .stage:last-child{ padding-bottom:0; }
  .stage::before{ top:4px; }
  .stage:not(:last-child)::after{
    top:18px; left:6px;
    width:2px; height: calc(100% - 14px);
    background-position:center top;
    background-size:100% 0%;
    transition: background-size .6s var(--ease);
  }
  .stage.is-on:not(:last-child)::after{ background-size:100% 100%; }
}

/* ---------- 3. Footer contact lines ---------- */
.footer-brand .footer-contact{
  font-size:.88rem;
  line-height:1.75;
  margin: 4px 0 20px;
  max-width: 400px;
}
.footer-contact a{ color: var(--c-gray-light); }
.footer-contact a:hover{ color: var(--c-orange); }

/* ---------- 4. WhatsApp button ----------
   Sits below the header, mobile menu and lightbox (z-index 900). The label
   slides out on hover or keyboard focus. The ring pulses three times after
   the page has loaded, then stops. */
.wa-float{
  position:fixed;
  right: max(20px, env(safe-area-inset-right));
  bottom: max(20px, env(safe-area-inset-bottom));
  z-index:900;
  display:flex; flex-direction:row-reverse; align-items:center;
  height:56px; max-width:56px;
  border-radius:28px;
  background:#25D366; color:#fff;
  text-decoration:none;
  overflow:hidden;
  box-shadow: 0 8px 24px rgba(0,0,0,.45);
  transition: max-width .35s var(--ease), transform .25s var(--ease);
  animation: wa-ring 2.2s ease-out 3s 3;
}
.wa-float svg{ flex:none; width:56px; height:56px; padding:15px; fill:currentColor; }
.wa-float span{
  white-space:nowrap;
  font-family: var(--font-body);
  font-weight:600; font-size:.9rem;
  padding-left:22px;
}
.wa-float:hover,
.wa-float:focus-visible{ max-width:260px; transform:translateY(-2px); }
.wa-float:focus-visible{ outline:2px solid #fff; outline-offset:3px; }
@keyframes wa-ring{
  0%  { box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 0 rgba(37,211,102,.55); }
  100%{ box-shadow: 0 8px 24px rgba(0,0,0,.45), 0 0 0 20px rgba(37,211,102,0); }
}
@media (prefers-reduced-motion: reduce){
  .wa-float{ animation:none; }
}
@media print{ .wa-float{ display:none; } }