/* ==========================================================================
   Phoenix Pixel Studio — shared site footer
   Rendered by includes/site-footer.php on every page. Carries its own reset so
   it looks the same under the home-page CSS, the .ppx-page system and the old
   template stylesheet.
   ========================================================================== */

.ppx-foot{
  --pf-brand:#0f77b9;
  --pf-ink:#0d1b2a;
  --pf-line:rgba(255,255,255,.12);
  --pf-r:3px;
  --pf-fh:'Plus Jakarta Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --pf-fb:'IBM Plex Sans',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  --pf-ease:cubic-bezier(.22,1,.36,1);

  position:relative;
  background:var(--pf-ink);
  color:rgba(255,255,255,.64);
  font-family:var(--pf-fb);font-size:15px;line-height:1.75;
  padding-top:clamp(54px,6vw,80px);
  border-top:3px solid var(--pf-brand);
}
.ppx-foot *,.ppx-foot *::before,.ppx-foot *::after{box-sizing:border-box}
.ppx-foot ul{margin:0;padding:0;list-style:none}
.ppx-foot p{margin:0}
.ppx-foot img{max-width:100%;height:auto;display:block}
.ppx-foot a{color:inherit;text-decoration:none;transition:color .3s var(--pf-ease)}
/* every heading level is reset here - h4/h5 used to fall through to the page's
   own heading colour, which is near-black and vanished against the dark footer */
.ppx-foot h1,.ppx-foot h2,.ppx-foot h3,
.ppx-foot h4,.ppx-foot h5,.ppx-foot h6{margin:0;font-family:var(--pf-fh);color:#fff;
  font-weight:700;line-height:1.3;letter-spacing:-.01em}

.ppx-foot-wrap{position:relative;z-index:1;width:100%;max-width:1250px;margin:0 auto;padding:0 24px}

/* ---- top grid ---- */
.ppx-foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1.3fr;
  gap:clamp(32px,5vw,60px);padding-bottom:clamp(38px,5vw,56px)}

/* The footer carries the ordinary full-colour brand logo, unaltered. Since the
   footer is dark navy and the logo's wordmark is dark navy too, it sits on a
   white plate - the artwork itself is never recoloured. */
.ppx-foot-logo{display:inline-block;margin-bottom:22px;
  background:#fff;padding:14px 20px;border-radius:var(--pf-r);line-height:0}
.ppx-foot-logo img{height:46px;width:auto;display:block}
.ppx-foot-about p{max-width:42ch}

.ppx-foot-social{display:flex;gap:8px;margin-top:22px;flex-wrap:wrap}
.ppx-foot-social a{width:40px;height:40px;border-radius:var(--pf-r);
  display:grid;place-items:center;font-size:15px;color:#fff;
  background:rgba(255,255,255,.06);border:1px solid var(--pf-line);
  transition:background .25s var(--pf-ease),border-color .25s var(--pf-ease)}
.ppx-foot-social a:hover,.ppx-foot-social a:focus-visible{background:var(--pf-brand);border-color:var(--pf-brand);color:#fff}
.ppx-foot-social a:focus-visible{outline:2px solid #fff;outline-offset:2px}

/* "Stay Connected" - the social profiles, kept apart from the contact buttons
   above so the two rows never read as one long strip of icons */
.ppx-foot-connect{margin-top:26px;padding-top:22px;border-top:1px solid var(--pf-line)}
.ppx-foot-connect h4{font-size:14px;letter-spacing:.12em;text-transform:uppercase;
  color:#fff;margin:0;font-weight:700}
.ppx-foot-connect .ppx-foot-social{margin-top:14px}

.ppx-foot-title{font-size:16px;margin-bottom:22px;position:relative;padding-bottom:12px;
  letter-spacing:.02em}
.ppx-foot-title::after{content:"";position:absolute;left:0;bottom:0;
  width:30px;height:2px;background:var(--pf-brand)}

.ppx-foot-links li{margin-bottom:9px}
.ppx-foot-links a{position:relative;display:inline-block;padding-left:16px;font-size:15px}
.ppx-foot-links a::before{content:"";position:absolute;left:0;top:11px;
  width:5px;height:5px;background:rgba(255,255,255,.24);
  transition:background .25s var(--pf-ease)}
.ppx-foot-links a:hover{color:#fff}
.ppx-foot-links a:hover::before{background:var(--pf-brand)}

/* ---- contact strip ---- */
.ppx-foot-info{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;
  padding:clamp(28px,4vw,40px) 0;border-top:1px solid var(--pf-line);
  border-bottom:1px solid var(--pf-line)}
.ppx-foot-info li{display:flex;gap:18px}
.ppx-foot-info .ppx-foot-ic{width:44px;height:44px;border-radius:var(--pf-r);flex:none;
  display:grid;place-items:center;font-size:19px;color:#fff;background:var(--pf-brand)}
.ppx-foot-info h6{font-size:14px;margin-bottom:4px;letter-spacing:.02em}
.ppx-foot-info p{font-size:14.5px;line-height:1.6}
.ppx-foot-info a:hover{color:#fff}

/* ---- bottom bar ---- */
.ppx-foot-bottom{display:flex;align-items:center;justify-content:space-between;
  gap:20px;flex-wrap:wrap;padding:24px 0 28px;font-size:14.5px}
.ppx-foot-bottom a{color:#fff;font-weight:600}
.ppx-foot-bottom a:hover{color:var(--pf-brand)}
.ppx-foot-nav{display:flex;gap:24px;flex-wrap:wrap}
.ppx-foot-nav a{font-weight:400;color:rgba(255,255,255,.64)}

/* ---- scroll to top ---- */
.ppx-top{
  position:fixed;right:26px;bottom:26px;z-index:880;
  width:48px;height:48px;border-radius:3px;border:0;cursor:pointer;
  display:grid;place-items:center;font-size:17px;
  background:#0f77b9;color:#fff;box-shadow:0 4px 14px rgba(15,119,185,.28);
  opacity:0;visibility:hidden;transform:translateY(10px);
  transition:all .3s cubic-bezier(.22,1,.36,1);
}
.ppx-top.ppx-on{opacity:1;visibility:visible;transform:none}
.ppx-top:hover{background:#0a5482}

/* ---- responsive ---- */
@media (max-width:980px){
  .ppx-foot-grid{grid-template-columns:1fr 1fr}
  .ppx-foot-about{grid-column:1 / -1}
}
@media (max-width:760px){
  .ppx-foot-grid,.ppx-foot-info{grid-template-columns:1fr}
  .ppx-foot-bottom{justify-content:center;text-align:center}
}
@media (max-width:520px){
  .ppx-foot-wrap{padding:0 18px}
  .ppx-top{right:16px;bottom:16px;width:44px;height:44px}
}