/* ============================================================
   HUB.CSS — page-specific styles for the landing hub (index.html)
   Single full-viewport screen: no scroll, no footer. Reuses the
   .masthead/.bar/.brand classes from base.css but overrides them
   to always stay transparent — this page never scrolls, so the
   compact-on-scroll behaviour used elsewhere doesn't apply here.
   Requires src/css/tokens.css and src/css/base.css to be loaded first.
   ============================================================ */

html,body{height:100%;overflow:hidden}
body{background:var(--aqua-ink)}

.hub-masthead .bar{padding:1rem var(--pad)}
.hub-phone{
  color:#fff;text-decoration:none;font-size:.92rem;font-weight:600;
  border:1px solid rgba(255,255,255,.5);padding:.5rem 1rem;
}
.hub-phone:hover{border-color:#fff;background:rgba(255,255,255,.14)}

.hub-hero{
  position:relative;height:100svh;overflow:hidden;
  display:flex;align-items:center;justify-content:center;text-align:center;
}
.hub-hero-photo{
  position:absolute;inset:0;background-size:cover;background-position:center;
  opacity:0;transition:opacity 1.6s ease;
}
.hub-hero-photo.is-active{opacity:1}
.hub-hero::after{
  content:"";position:absolute;inset:0;z-index:1;
  background:linear-gradient(180deg,rgba(6,58,63,.4) 0%,rgba(6,58,63,.2) 40%,rgba(6,58,63,.8) 100%);
}
.hub-hero-inner{position:relative;z-index:2;color:#fff;padding:0 var(--pad);max-width:40rem}
.hub-hero h1{font-size:clamp(1.9rem,5.6vw,3.4rem);text-wrap:balance}
.hub-hero p{margin-top:.9rem;font-size:clamp(1rem,1.6vw,1.15rem);color:rgba(255,255,255,.92)}
.hub-cta{display:flex;flex-wrap:wrap;justify-content:center;gap:1rem;margin-top:1.8rem}

.hub-dots{
  position:absolute;left:0;right:0;bottom:1.4rem;z-index:2;
  display:flex;justify-content:center;gap:.5rem;
}
.hub-dots span{width:22px;height:3px;background:#fff;opacity:.4;transition:opacity .3s ease}
.hub-dots span.is-active{opacity:1}

@media (max-width:520px){
  .hub-hero h1{font-size:1.7rem}
  .hub-cta{flex-direction:column;align-items:stretch}
}