/* =============================================================================
   Shared footer (partials/footer.ejs): the closing section on the hero's light blue tint, signal ticker, clocks, link columns,
   office card, bottom bar and the floating WhatsApp button. Loaded after the page stylesheet on every page.
   ============================================================================= */

/* Base rules the footer relies on. style.css has the same ones for the inner pages; the home page
   (home.css) has not, so they are repeated here scoped to the footer; brand and nav-ico rules come from header.css. */
.site-footer { font-family: var(--font-body); line-height: 1.65; }
.site-footer .container { width: min(100% - 32px, var(--maxw)); margin-inline: auto; }
:where(.site-footer) ul { margin: 0; padding: 0; }
.site-footer address { font-style: normal; }
.site-footer img, .site-footer svg { max-width: 100%; display: block; }
.site-footer .footer-heading { line-height: 1.15; }

/* ---------- Footer (light blue tinted closing section with a faint brand glow) ---------- */
.site-footer { position: relative; overflow: hidden; margin-top: 0; background: var(--hero-bg); color: var(--muted); border-top: 1px solid var(--border); font-size: 14px; isolation: isolate; }
.footer-glow { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(60% 55% at 12% 0%, rgba(17, 121, 252, 0.10), transparent 60%), radial-gradient(50% 45% at 88% 10%, rgba(77, 155, 255, 0.08), transparent 60%), radial-gradient(45% 40% at 70% 100%, rgba(255, 154, 60, 0.06), transparent 60%); }
.footer-mark { position: absolute; right: -0.04em; bottom: 0.32em; z-index: 0; font-family: var(--font-heading); font-weight: 800; font-size: clamp(110px, 18vw, 260px); line-height: 1; letter-spacing: -0.05em; color: transparent; -webkit-text-stroke: 1px rgba(5, 9, 23, 0.06); pointer-events: none; user-select: none; }
.footer-mark::after { content: "warm."; position: absolute; inset: 0; background: var(--grad-warm); -webkit-background-clip: text; background-clip: text; color: transparent; opacity: 0.06; -webkit-text-stroke: 0; }
.site-footer > :not(.footer-glow):not(.footer-mark) { position: relative; z-index: 1; }

/* Signal ticker */
.ticker { overflow: hidden; border-bottom: 1px solid var(--border); padding: 14px 0; -webkit-mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); }
.ticker-track { display: flex; width: max-content; animation: ticker-marquee 48s linear infinite; }
.ticker-item { display: inline-flex; align-items: center; gap: 9px; margin-right: 36px; font-size: 13px; font-weight: 600; letter-spacing: 0.02em; color: var(--text); white-space: nowrap; }
.ticker-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--warm); box-shadow: 0 0 0 4px rgba(255, 154, 60, 0.18); }
.ticker-item:nth-child(3n) .ticker-dot { background: #4d9bff; box-shadow: 0 0 0 4px rgba(77, 155, 255, 0.18); }
.ticker-item:nth-child(3n+1) .ticker-dot { background: #7db8ff; box-shadow: 0 0 0 4px rgba(125, 184, 255, 0.18); }

/* Main grid */
.footer-main { display: grid; grid-template-columns: 1.45fr 1.05fr 1.55fr 0.8fr 1.45fr; gap: 30px; padding: 54px 0 48px; }
.footer-col--services a, .footer-col--company a { white-space: nowrap; }
.brand--footer { color: var(--ink); }
.brand--footer .brand-name { color: var(--ink); }
.footer-tagline { margin: 16px 0 18px; max-width: 42ch; color: var(--muted); line-height: 1.6; }
.footer-clocks { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; }
.clock { display: inline-flex; align-items: center; gap: 8px; padding: 7px 12px; border-radius: 999px; background: var(--surface); border: 1px solid var(--brand-soft); color: var(--muted); font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; }
.clock time { color: var(--ink); }
.clock-dot { width: 7px; height: 7px; border-radius: 50%; background: #9aa3b5; }
.clock.is-open .clock-dot { background: var(--success); box-shadow: 0 0 0 4px rgba(40, 211, 113, 0.2); }
.footer-pills { display: flex; flex-wrap: wrap; gap: 8px; }
.fpill { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border-radius: 999px; background: var(--surface); border: 1px solid var(--brand-soft); color: var(--brand-link); font-size: 12px; font-weight: 600; }
.fpill svg { width: 14px; height: 14px; color: var(--brand); }
.footer-heading { font-family: var(--font-heading); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); margin: 8px 0 16px; }
.footer-col ul { list-style: none; display: grid; gap: 10px; }
.footer-list--2 { grid-template-columns: 1fr 1fr; column-gap: 18px; }
.footer-col a { display: inline-flex; align-items: center; gap: 9px; color: var(--muted); font-size: 14px; transition: color 0.15s ease, transform 0.15s ease; }
.footer-col a .nav-ico { color: var(--muted); }
.footer-col a:hover { color: var(--brand-link); text-decoration: none; transform: translateX(2px); }
.footer-col a:hover .nav-ico { color: #e06a0b; }
.footer-office { display: grid; gap: 10px; align-content: start; }
.office-line { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--brand-soft); color: var(--ink); font-weight: 600; font-size: 14px; transition: background 0.15s ease, border-color 0.15s ease; }
.office-line:hover { background: var(--brand-tint); border-color: rgba(17, 121, 252, 0.3); text-decoration: none; }
.office-line small { display: block; font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); font-weight: 600; margin-bottom: 1px; }
.office-line .nav-ico--tile { background: var(--brand-tint); color: var(--brand-link); }
.office-line--static { font-weight: 500; color: var(--text); }
.office-line address { font-size: 13px; line-height: 1.4; }

/* Bottom bar */
.footer-bottom { border-top: 1px solid var(--border); padding: 16px 0; font-size: 13px; color: var(--muted); }
.footer-bottom strong { color: var(--ink); font-weight: 600; }
.footer-bottom__inner { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.footer-made { display: inline-flex; align-items: center; gap: 8px; }
.footer-sep { color: var(--muted); } /* decorative dot; orange measured 3.05:1 as text */
.to-top { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--brand-link); transition: background 0.15s ease, transform 0.15s ease; }
.to-top svg { width: 18px; height: 18px; transform: rotate(180deg); }
.to-top:hover { background: var(--brand); color: #fff; text-decoration: none; transform: translateY(-2px); }

@media (max-width: 1100px) { .footer-main { grid-template-columns: 1fr 1fr 1fr; } .footer-brand { grid-column: 1 / -1; } .footer-office { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; } }
@media (max-width: 640px) {
  .footer-main { grid-template-columns: 1fr 1fr; gap: 26px 18px; padding: 40px 0 36px; }
  .footer-brand { order: 0; }
  .footer-col--services { order: 1; }
  .footer-col--company { order: 2; }
  .footer-col--wide { order: 3; grid-column: 1 / -1; }
  .footer-office { order: 4; grid-template-columns: 1fr; }
  .footer-mark { font-size: 130px; bottom: 0.6em; }
  .footer-bottom__inner { justify-content: center; text-align: center; }
}

/* ---------- Floating WhatsApp ---------- */
.wa-float { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: 56px; height: 56px; border-radius: 50%; background: #25d366; color: #fff; display: grid; place-items: center; box-shadow: 0 12px 28px rgba(37, 211, 102, 0.45); transition: transform 0.15s ease; }
.wa-float:hover { transform: scale(1.06); text-decoration: none; }
.wa-float svg { width: 28px; height: 28px; }
@keyframes ticker-marquee { to { transform: translateX(-50%); } }

@media (max-width: 720px) {
  .site-footer { font-size: 13px; }
  .ticker { padding: 11px 0; }
  .ticker-item { font-size: 12px; margin-right: 26px; }
  .footer-tagline { font-size: 13.5px; }
  .footer-bottom__inner { flex-direction: column; gap: 8px; text-align: center; }
  .wa-float { width: 50px; height: 50px; right: 14px; bottom: 14px; }
  .wa-float svg { width: 25px; height: 25px; }
}