/* ============================================================
   PropertyInsider.sg — Official mascot component
   Decorative owl in dark page-head / hero surfaces.
   Loaded on: homepage, /new-launches/, /price-trends/,
   /research/, /guides/, /tools/. Purely decorative
   (aria-hidden, empty alt) — never carries content.
   ============================================================ */
.pi-mascot{
  position:absolute;
  right:24px;
  bottom:-14px;
  height:min(230px,78%);
  width:auto;
  z-index:0;
  pointer-events:none;
  user-select:none;
  filter:drop-shadow(0 10px 24px rgba(0,0,0,.35));
  opacity:.96;
  animation:pi-mascot-in .7s cubic-bezier(.2,.8,.3,1) both;
}
@keyframes pi-mascot-in{
  from{opacity:0;transform:translateY(14px)}
  to{opacity:.96;transform:translateY(0)}
}
@media (prefers-reduced-motion:reduce){
  .pi-mascot{animation:none}
}
/* Keep headline text above the artwork if they ever overlap */
.page-head-inner,.hero-inner{position:relative;z-index:1}
/* Tuck away where there's no room; the head stays text-first on mobile */
@media (max-width:960px){
  .pi-mascot{height:140px;right:8px;bottom:-10px;opacity:.28}
}
@media (max-width:640px){
  .pi-mascot{display:none}
}

/* Advisor section — full-body mascot above the heading */
.advisor-mascot{
  height:120px;width:auto;display:block;margin-bottom:12px;
  filter:drop-shadow(0 8px 18px rgba(0,0,0,.32));
}
@media (max-width:640px){.advisor-mascot{height:92px}}
/* Footer — small badge beside the brand name */
.footer-mascot{
  width:44px;height:44px;border-radius:50%;
  vertical-align:middle;margin-right:10px;
}
.footer-brand h3{display:flex;align-items:center;gap:10px;margin-top:0}

/* ============================================================
   Standardized full footer (ported from homepage inline CSS)
   so /new-launches/, /price-trends/, /tools/ — which load
   nl.css / tools.css instead of site.css — render the same
   four-column footer as the homepage.
   ============================================================ */
.footer-main{
  display:grid;
  grid-template-columns:2fr 1fr 1fr 1fr;
  gap:var(--space-7,48px);
  margin-bottom:var(--space-7,48px);
  padding-bottom:var(--space-7,48px);
  border-bottom:1px solid rgba(255,255,255,.1);
}
.footer-brand h3{
  font-family:var(--font-serif);
  font-size:24px;color:#fff;font-weight:600;
  margin-bottom:var(--space-3,12px);
}
.footer-brand p{
  font-size:14px;line-height:1.7;
  color:rgba(255,255,255,.7);margin-bottom:var(--space-4,16px);
}
.footer-col h4{
  font-size:13px;font-weight:600;color:#fff;
  text-transform:uppercase;letter-spacing:.08em;
  margin-bottom:var(--space-4,16px);
}
.footer-links{list-style:none;display:flex;flex-direction:column;gap:var(--space-3,12px);margin:0;padding:0}
.footer-links a{color:rgba(255,255,255,.7);text-decoration:none;font-size:14px;transition:color .2s}
.footer-links a:hover{color:var(--red-primary)}
.footer-bottom{display:flex;justify-content:space-between;align-items:center;font-size:13px;color:rgba(255,255,255,.5)}
.footer-link{color:rgba(255,255,255,.5);text-decoration:none;transition:color .2s ease}
.footer-link:hover{color:rgba(255,255,255,1)}
@media (max-width:768px){
  .footer-main{grid-template-columns:1fr;gap:var(--space-6,32px)}
  .footer-bottom{flex-direction:column;gap:var(--space-3,12px);text-align:center}
}