:root {
  --accent:#19a0ff;
  --header-h: 86px; /* sticky header height for layout calculations */
}
*{box-sizing:border-box;margin:0;padding:0}
body {
  font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Arial,sans-serif;
  color:#fff;
  background:#000;
  overflow-x:hidden;
}
/* Sticky translucent header like footer */
.glass-header{
  position:fixed; top:0; left:0; right:0;
  background:rgba(0,0,0,0.325);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border-bottom:1px solid rgba(255,255,255,.12);
  z-index:1000;
}
.header-inner{
  max-width:1200px; margin:0 auto; padding:10px 16px;
  text-align:center;
}
.glass-header h1{
  font-size:clamp(28px,4.2vw,44px);
  font-style:italic;
  text-shadow:0 2px 8px rgba(0,0,0,.5);
}
.contact-line{ margin-top:4px; color:#e6eef5; opacity:.95; font-size:1.02rem; }

.hero {
  position:relative;
  background:url('../images/hero-bg.webp') center center/cover no-repeat;
  min-height:100vh;
  display:flex;
  align-items:flex-start;
  justify-content:center;
  padding-top:var(--header-h);
}
/* Portrait pinned under header without affecting boxes */
.portrait-top{
  position:absolute;
  top: calc(var(--header-h) + 6px);
  left:50%;
  transform: translateX(-50%);
  width:220px;
  max-width:90%;
  border-radius:8px;
  box-shadow:0 10px 24px rgba(0,0,0,.45);
}
.hero-content{
  margin-top: 0; /* leave space for the portrait; boxes stay in same place visually */
  width:min(92%, 860px);
  display:flex; flex-direction:column; gap:22px;
}
.service-box {
  background: rgba(0,0,0,0.325);
  padding: 26px 28px;
  border-radius: 14px;
  box-shadow: 0 14px 28px rgba(0,0,0,.35);
  text-align:center;
}
.service-box h2 { font-size:1.6rem; margin-bottom:10px; }
.service-box p { color:#e3e6ea; line-height:1.45; margin-bottom:14px; }
.btn{
  display:inline-block; padding:12px 24px; background:var(--accent); color:#fff;
  border-radius:8px; text-decoration:none; font-weight:700;
  box-shadow:0 10px 22px rgba(25,160,255,.35); transition:transform .18s ease, box-shadow .18s ease;
}
.btn:hover{ transform:translateY(-1px); box-shadow:0 14px 28px rgba(25,160,255,.45); }
/* Footer */
.glass-footer {
  background: transparent !important;

  position:fixed; bottom:0; left:0; right:0;
  display:flex; justify-content:space-between; align-items:center;
  padding:10px 18px;
  backdrop-filter:blur(8px); border-top:1px solid rgba(255,255,255,.12);
}
.apply-btn{ background:var(--accent); color:#fff; padding:10px 18px; border-radius:8px; text-decoration:none; font-weight:700; box-shadow:0 8px 18px rgba(25,160,255,.35); }
.apply-btn:hover{ background:#0f7bc1; }
.footer-right.white-bg{ background:#fff; padding:4px 6px; border-radius:8px; }
.nova-logo{ height:38px; display:block; }

@media (max-width: 680px){
  :root{ --header-h: 96px; }
  .portrait-top{ width:170px; top: calc(var(--header-h) + 6px); }
  .hero-content{ margin-top: 0; width: min(94%, 700px); }
  .glass-footer{
  background: transparent !important;
 flex-direction:row; gap:10px; }
}


/* Ensure footer is fully transparent */
.glass-footer, .site-footer, footer.footer, footer.site-footer, footer {
  background: transparent !important;
  box-shadow: none !important;
}
.glass-footer::before, .glass-footer::after {
  background: transparent !important;
  box-shadow: none !important;
}



/* Ensure header transparency reduced by 50% */
.glass-header, header.glass-header, .site-header {
  background: rgba(0,0,0,0.325) !important;
  backdrop-filter: blur(8px);
}



/* Increase translucency of body boxes to match header */
.translucent-box, .content-box, .box, .hero .translucent-box {
  background: rgba(0,0,0,0.325) !important;
  backdrop-filter: blur(6px);
}


.hero-inner { padding-bottom: 125px; }


/* Ensure gap below the last service box (Reverse Mortgages) */
.service-box:last-of-type { margin-bottom: 63px !important; }