/* ============================================================
   FOOTER — big CTA, columns, socials, legal bar, back-to-top
   ============================================================ */

.site-footer{
  position:relative; overflow:hidden;
  background: var(--bg-invert); color: var(--text-invert);
  padding-top: clamp(3.5rem, 7vw, 6.5rem);
  z-index: var(--z-mid);
}
.site-footer .motif-bg{ opacity:.05; }

/* ---- soft colour halo ---- */
.site-footer__halo{
  position:absolute; inset:auto -10% -40% -10%; height:110%;
  background:
    radial-gradient(30% 50% at 18% 70%, var(--halo-1), transparent 66%),
    radial-gradient(28% 46% at 54% 92%, var(--halo-2), transparent 66%),
    radial-gradient(26% 44% at 86% 66%, var(--halo-3), transparent 68%);
  filter: blur(34px); animation: haloDrift 24s ease-in-out infinite; pointer-events:none;
}

.ft{ position:relative; z-index:2; width:var(--wrap); margin-inline:auto; }

/* ---------------- Wordmark ---------------- */
.ft__word{
  font-family: var(--f-display); font-weight:300;
  font-size: clamp(2.6rem, 12vw, 11rem); line-height:.92; letter-spacing:-.035em;
  color: var(--text-invert);
  padding-bottom: clamp(1.6rem,4vw,3rem);
  border-bottom:1px solid color-mix(in srgb, var(--text-invert) 16%, transparent);
  display:block;
}
.ft__word .thin{ color:transparent; -webkit-text-stroke:1px color-mix(in srgb, var(--text-invert) 40%, transparent); }
.ft__word .accent{ color: var(--accent); font-style:italic; }

/* ---------------- Columns ---------------- */
.ft__cols{
  display:grid;
  grid-template-columns: minmax(0,1.5fr) repeat(3, minmax(0,1fr));
  gap: clamp(2rem, 4vw, 3.6rem);
  padding-block: clamp(2.4rem, 5vw, 4.2rem);
}
@media (max-width:980px){ .ft__cols{ grid-template-columns: 1fr 1fr; } }
@media (max-width:560px){ .ft__cols{ grid-template-columns: 1fr; } }

.ft__col h4{
  font-family: var(--f-body); font-size:var(--t-xs); font-weight:500;
  letter-spacing:.28em; text-transform:uppercase;
  color: color-mix(in srgb, var(--text-invert) 55%, transparent);
  margin-bottom:1.35rem;
}
.ft__col ul{ list-style:none; display:grid; gap:.72rem; }
.ft__col a{
  color: color-mix(in srgb, var(--text-invert) 82%, transparent);
  font-size:var(--t-sm);
  position:relative; display:inline-block;
  transition: color .35s var(--e-out), transform .4s var(--e-out);
}
.ft__col a:hover{ color: var(--accent); transform: translateX(5px); }

.ft__blurb{
  color: color-mix(in srgb, var(--text-invert) 70%, transparent);
  font-size:var(--t-sm); line-height:1.8; max-width:42ch;
  margin-bottom:1.6rem;
}
.ft__mail{
  font-family:var(--f-display); font-weight:300;
  font-size: clamp(1.1rem, 2.2vw, 1.55rem);
  color: var(--text-invert); word-break:break-word;
  display:inline-block; position:relative; padding-bottom:.18em;
}
.ft__mail::after{
  content:""; position:absolute; left:0; bottom:0; height:2px; width:100%;
  background-image:var(--grad-hot); transform:scaleX(0); transform-origin:0 50%;
  transition: transform .55s var(--e-out);
}
.ft__mail:hover::after{ transform:scaleX(1); }
.ft__phone{
  display:block; margin-top:.7rem; font-size:var(--t-sm);
  letter-spacing:.16em; color: color-mix(in srgb, var(--text-invert) 72%, transparent);
}
.ft__phone:hover{ color:var(--accent); }

/* ---------------- Socials ---------------- */
.ft__social{ display:flex; gap:.6rem; margin-top:1.7rem; }
.ft__social a{
  width:42px; height:42px; border-radius:50%;
  border:1px solid color-mix(in srgb, var(--text-invert) 22%, transparent);
  display:grid; place-items:center;
  color: var(--text-invert);
  transition: background-color .4s var(--e-out), border-color .4s var(--e-out),
              color .4s var(--e-out), transform .45s var(--e-out);
}
.ft__social a:hover{
  background-image: var(--grad-hot); border-color:transparent; color:#fff;
  transform: translateY(-4px) scale(1.06);
  box-shadow: var(--shadow-glow);
}
.ft__social svg{ width:16px; height:16px; fill:currentColor; }

/* ---------------- Service-area strip ---------------- */
.ft__areas{
  border-top:1px solid color-mix(in srgb, var(--text-invert) 14%, transparent);
  padding-block: 1.5rem;
}
.ft__areas .marquee__item{
  font-family:var(--f-body); font-size:var(--t-xs); font-weight:400;
  letter-spacing:.26em; text-transform:uppercase;
  color: color-mix(in srgb, var(--text-invert) 50%, transparent);
  gap:1.4rem; padding-inline:1.4rem;
}
.ft__areas .marquee__item .dot{ color:var(--accent); }

/* ---------------- Legal bar ---------------- */
.ft__legal{
  border-top:1px solid color-mix(in srgb, var(--text-invert) 14%, transparent);
  padding-block: 1.6rem clamp(1.6rem,3vw,2.4rem);
  display:flex; flex-wrap:wrap; gap:1rem 2rem;
  align-items:center; justify-content:space-between;
  font-size:var(--t-xs); letter-spacing:.1em;
  color: color-mix(in srgb, var(--text-invert) 52%, transparent);
}
.ft__legal a:hover{ color:var(--accent); }
.ft__legal-links{ display:flex; flex-wrap:wrap; gap:.4rem 1.5rem; }
.ft__credit{ display:flex; align-items:center; gap:.55rem; }
.ft__credit .orn i{ background: var(--accent); }

/* ---------------- Back to top ---------------- */
.to-top{
  position:fixed; right: clamp(1rem,2.5vw,2rem); bottom: clamp(1rem,2.5vw,2rem);
  width:50px; height:50px; border-radius:50%; z-index:var(--z-sticky);
  border:1px solid var(--line-strong); background: var(--glass); color:var(--text);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  display:grid; place-items:center; cursor:pointer;
  opacity:0; visibility:hidden; transform: translateY(14px) scale(.9);
  transition: opacity .45s var(--e-out), transform .45s var(--e-out),
              visibility .45s, border-color .35s, color .35s, background-color .35s;
}
.to-top.is-on{ opacity:1; visibility:visible; transform:none; }
.to-top:hover{ border-color:var(--accent); color:var(--accent); }
.to-top svg{ width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:1.5; }
.to-top__ring{
  position:absolute; inset:-1px; border-radius:50%;
  transform: rotate(-90deg); pointer-events:none;
}
.to-top__ring circle{
  fill:none; stroke:var(--accent); stroke-width:1.4;
  stroke-dasharray: 157; stroke-dashoffset: calc(157 - (157 * var(--p, 0)));
  transition: stroke-dashoffset .12s linear;
}

/* ---------------- Floating WhatsApp ---------------- */
.wa-fab{
  position:fixed; left: clamp(1rem,2.5vw,2rem); bottom: clamp(1rem,2.5vw,2rem);
  opacity:0; visibility:hidden; transform: translateY(12px) scale(.9);
  width:52px; height:52px; border-radius:50%; z-index:var(--z-sticky);
  background:#25D366; color:#fff; display:grid; place-items:center;
  box-shadow: 0 10px 32px rgba(37,211,102,.34);
  transition: transform .45s var(--e-spring), box-shadow .4s;
}
.wa-fab:hover{ transform: scale(1.09) translateY(-3px); box-shadow: 0 16px 42px rgba(37,211,102,.45); }
.wa-fab svg{ width:26px; height:26px; fill:currentColor; }
.wa-fab::after{
  content:""; position:absolute; inset:0; border-radius:50%;
  border:2px solid #25D366; animation: pulseRing 2.6s var(--e-out) infinite;
}
/* only appears once the visitor has started reading, so it never covers the
   hero call-to-action on a phone */
.wa-fab.is-on{ opacity:1; visibility:visible; transform:none; }
@media (max-width:520px){
  .wa-fab{ width:46px; height:46px; }
  .wa-fab svg{ width:22px; height:22px; }
  .to-top{ display:none; }
}