/* =====================================================================
   OSVI v2 footer — shared by every page (markup: include/partials/footer.tpl,
   copied into pages by tools/build-pages.mjs).
   Self-contained so it also works on pages that still use style.css /
   Bootstrap: it does not rely on body.v2, and the #footer.v2-footer rules
   override style.css's old "#footer { background: #000 ... }" rules.
   ===================================================================== */
/* Size-matched fallbacks: text keeps (almost) the same line breaks when the
   web fonts arrive, so the page does not jump. Ratios measured against
   Plus Jakarta Sans / Instrument Serif glyph widths. */
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial'), local('ArialMT'); font-weight: 400 500; size-adjust: 104.7%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 600; size-adjust: 100.3%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 700; size-adjust: 101.5%; }
@font-face { font-family: 'Plus Jakarta Sans Fallback'; src: local('Arial Bold'), local('Arial-BoldMT'); font-weight: 800; size-adjust: 102.6%; }
@font-face { font-family: 'Instrument Serif Fallback'; src: local('Georgia Italic'), local('Georgia-Italic'); font-style: italic; size-adjust: 77.9%; }

.v2-footer, .v2-footer *, .v2-footer *::before, .v2-footer *::after { box-sizing: border-box; }
#footer.v2-footer, .v2-footer {
  background: #2B1029; color: #fff;
  padding: 72px clamp(16px, 4vw, 48px) calc(32px + var(--v2-sos-h, 0px));
  font-family: 'Plus Jakarta Sans', 'Plus Jakarta Sans Fallback', system-ui, -apple-system, 'Segoe UI', Roboto, Arial, sans-serif;
  font-size: 16px; line-height: 1.5; text-align: left; margin: 0;
  -webkit-font-smoothing: antialiased;
}
.v2-footer p { margin: 0; }
.v2-footer a { text-decoration: none; }
#footer.v2-footer a:hover { text-decoration: none; }
#footer.v2-footer .v2-footer__grid a:hover { color: #F3C6EF; }
#footer.v2-footer .v2-footer__social a:hover, #footer.v2-footer .v2-footer__bottom a:hover { color: #fff; }
.v2-footer a:focus-visible { outline: 3px solid #F3C6EF; outline-offset: 3px; border-radius: 6px; }
.v2-footer__grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 40px; }
.v2-footer .v2-footer__grid a { color: #fff; }
.v2-footer .v2-footer__grid a:hover { color: #F3C6EF; }
.v2-footer .v2-footer__brand { display: inline-block; }
/* OSVI logo, version for the dark background (white text) */
.v2-footer .v2-footer__logo { display: block; height: 60px; width: auto; max-width: 100%; }
.v2-footer .v2-footer__about { text-align: left; font-size: 14px; color: #D6C4D4; line-height: 1.65; margin: 16px 0 0; max-width: 300px; }
.v2-footer__social { display: flex; gap: 10px; margin-top: 20px; }
.v2-footer .v2-footer__social a { width: 44px; height: 44px; border-radius: 50%; background: rgba(255,255,255,.08); display: flex; align-items: center; justify-content: center; color: #fff; }
.v2-footer .v2-footer__social a:hover { background: rgba(255,255,255,.16); color: #fff; }
.v2-footer__social svg { display: block; }
.v2-footer__col { display: flex; flex-direction: column; gap: 4px; font-size: 14px; align-items: flex-start; }
.v2-footer__col a { min-height: 32px; display: inline-flex; align-items: center; }
.v2-footer .v2-footer__head { font-family: inherit; font-size: 12px; font-weight: 800; letter-spacing: .1em; line-height: 1.5; text-transform: uppercase; color: #B9A3B6; margin: 0 0 8px; padding: 0; }
.v2-footer .v2-footer__head::before, .v2-footer .v2-footer__head::after { content: none; }
.v2-footer .v2-footer__phone { font-weight: 800; font-size: 18px; }
.v2-footer__muted { color: #D6C4D4; min-height: 32px; display: inline-flex; align-items: center; }
.v2-footer__pill { display: inline-flex; align-items: center; gap: 8px; background: rgba(255,255,255,.08); padding: 8px 12px; border-radius: 999px; font-weight: 700; margin-top: 6px; }
.v2-footer .v2-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex: none; background: #3DD68C; }
.v2-footer__bottom { max-width: 1280px; margin: 56px auto 0; padding-top: 24px; border-top: 1px solid rgba(255,255,255,.12); display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 13px; color: #B9A3B6; }
.v2-footer .v2-footer__bottom a { color: #B9A3B6; }
.v2-footer .v2-footer__bottom a:hover { color: #fff; }

/* ---------------- animations ---------------- */
.v2-footer { position: relative; overflow: hidden; }
/* flowing brand-colour line along the top edge */
.v2-footer::before { content: ""; position: absolute; left: 0; top: 0; width: 600%; height: 4px; background: linear-gradient(90deg, #8C3688, #E58BDE, #F48745, #8C3688) 0 0 / 50% 100% repeat-x; animation: v2f-flow 8s linear infinite; will-change: transform; }
/* soft glow drifting behind the columns */
.v2-footer::after { content: ""; position: absolute; width: 560px; height: 560px; right: -180px; top: -240px; border-radius: 50%; background: radial-gradient(circle, rgba(229,139,222,.16), transparent 65%); animation: v2f-glow 14s ease-in-out infinite alternate; pointer-events: none; }
.v2-footer__grid, .v2-footer__bottom { position: relative; z-index: 1; }
/* moved with transform (no repaint per frame): the strip holds the gradient twice, shifting by one copy loops seamlessly */
@keyframes v2f-flow { from { transform: translateX(-50%); } to { transform: translateX(0); } }
@keyframes v2f-glow { to { transform: translate(-120px, 80px) scale(1.15); } }

/* columns rise in one after another when the footer scrolls into view
   (js-anim is added by the footer's own script, so without JS nothing is hidden) */
.v2-footer.js-anim .v2-footer__grid > *, .v2-footer.js-anim .v2-footer__bottom { opacity: 0; transform: translateY(24px); transition: opacity .6s ease, transform .6s ease; }
.v2-footer.js-anim.is-in .v2-footer__grid > *, .v2-footer.js-anim.is-in .v2-footer__bottom { opacity: 1; transform: none; }
.v2-footer.js-anim .v2-footer__grid > :nth-child(2) { transition-delay: .1s; }
.v2-footer.js-anim .v2-footer__grid > :nth-child(3) { transition-delay: .2s; }
.v2-footer.js-anim .v2-footer__grid > :nth-child(4) { transition-delay: .3s; }
.v2-footer.js-anim .v2-footer__bottom { transition-delay: .4s; }

/* links: slide a little and grow an underline */
.v2-footer .v2-footer__col a { background: linear-gradient(currentColor, currentColor) 0 calc(100% - 4px) / 0 1px no-repeat; transition: color .2s ease, transform .2s ease, background-size .25s ease; }
.v2-footer .v2-footer__col a:hover { transform: translateX(4px); background-size: 100% 1px; }

/* social icons lift and take their brand colour */
.v2-footer .v2-footer__social a { transition: transform .2s ease, background .2s ease, box-shadow .2s ease; }
.v2-footer .v2-footer__social a:hover { transform: translateY(-3px); box-shadow: 0 10px 22px rgba(0,0,0,.25); }
#footer.v2-footer .v2-footer__social a[aria-label*="Instagram"]:hover { background: linear-gradient(45deg, #FDCB5C, #FD1D1D 45%, #C13584 75%, #833AB4); }
#footer.v2-footer .v2-footer__social a[aria-label*="LinkedIn"]:hover { background: #0A66C2; }
#footer.v2-footer .v2-footer__social a[aria-label*="WhatsApp"]:hover { background: #1F7A47; }

/* the logo lifts slightly on hover; the 24x7 dot pulses */
.v2-footer .v2-footer__logo { transition: transform .3s ease; }
.v2-footer .v2-footer__brand:hover .v2-footer__logo { transform: translateY(-2px) scale(1.03); }
/* pulse = a fading ring scaled with transform/opacity (no repaint per frame) */
.v2-footer .v2-dot { position: relative; }
.v2-footer .v2-dot::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: #3DD68C; animation: v2f-pulse 2s ease-out infinite; }
@keyframes v2f-pulse { 0% { transform: scale(1); opacity: .6; } 70%, 100% { transform: scale(3); opacity: 0; } }
/* the footer's animations only run while it is on screen (is-live is set by the footer's script) */
.v2-footer.js-anim:not(.is-live)::before, .v2-footer.js-anim:not(.is-live)::after, .v2-footer.js-anim:not(.is-live) .v2-dot::after { animation-play-state: paused; }

@media (prefers-reduced-motion: reduce) {
  .v2-footer::before, .v2-footer::after, .v2-footer .v2-dot::after { animation: none; }
  .v2-footer.js-anim .v2-footer__grid > *, .v2-footer.js-anim .v2-footer__bottom { opacity: 1; transform: none; transition: none; }
  .v2-footer .v2-footer__col a, .v2-footer .v2-footer__social a, .v2-footer .v2-footer__logo { transition: none; }
  .v2-footer .v2-footer__col a:hover, .v2-footer .v2-footer__social a:hover, .v2-footer .v2-footer__brand:hover .v2-footer__logo { transform: none; }
}