/* ============================================================
   momentuum — shared site chrome (header/nav + footer)
   Single source of truth, linked from every page as /chrome.css.
   Assumes each page already declares the design-token :root
   variables (--navy, --g1..g4, --bg, --ink, --line, etc.) and
   base classes (.wrap, .btn, .logo-mark, .eyebrow) in its own
   inline <style> block, since those are shared across all pages.
   ============================================================ */

/* ---------- NAV / HEADER ---------- */
header{
  position:sticky;top:0;z-index:40;
  background:var(--bg);
  border-bottom:1px solid transparent;
  transition:background-color .3s ease,box-shadow .3s ease,border-color .3s ease;
}
header.scrolled{
  background:linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.86) 100%);
  backdrop-filter:blur(16px) saturate(160%);
  -webkit-backdrop-filter:blur(16px) saturate(160%);
  border-bottom-color:var(--line);
  box-shadow:0 8px 24px -16px rgba(21,19,42,.35);
}
header .wrap{max-width:none;width:90%;padding-left:0;padding-right:0;}
.nav{display:flex;align-items:center;justify-content:space-between;padding-top:15px;padding-bottom:15px;transition:padding .3s ease;}
header.scrolled .nav{padding-top:14px;padding-bottom:14px;}
.navlinks{display:flex;align-items:center;gap:30px;}
.navlinks a{font-size:.92rem;color:var(--ink-soft);position:relative;padding-bottom:2px;transition:color .2s ease;}
.navlinks a::after{
  content:"";position:absolute;left:0;right:100%;bottom:0;height:2px;
  background:linear-gradient(90deg,var(--g1),var(--g4));
  transition:right .25s ease;
}
.navlinks a:hover{color:var(--ink);}
.navlinks a:hover::after{right:0;}
.navburger{display:none;background:none;border:1px solid var(--line-strong);border-radius:999px;padding:8px 14px;font-size:.85rem;color:var(--ink);cursor:pointer;flex-shrink:0;}
.navlinks-book{display:none;}
@media (max-width:900px){ .navlinks{display:none;} .navburger{display:inline-flex;} .navcta{display:none;} }

/* mobile nav dropdown, toggled by chrome.js adding .nav-open to <header> */
@media (max-width:900px){
  header.nav-open .navlinks{
    display:flex;flex-direction:column;align-items:stretch;gap:0;
    position:fixed;left:0;right:0;top:var(--header-h,64px);bottom:0;z-index:39;
    background:var(--bg);padding:8px 20px 24px;overflow-y:auto;
    border-top:1px solid var(--line);
  }
  header.nav-open .navlinks a{padding:14px 0;border-bottom:1px solid var(--line);}
  header.nav-open .navlinks-book{display:block;margin-top:10px;font-weight:700;color:var(--ink);}
}

/* ---------- FINAL CTA + FOOTER, unified as one block ---------- */
.final-footer-group{
  background:var(--navy);color:var(--on-navy);position:relative;overflow:hidden;
  padding:100px 0 48px;
}
.final-footer-group::before{
  content:"";position:absolute;inset:-30% -10% auto auto;width:60%;height:160%;
  background:radial-gradient(closest-side, color-mix(in srgb, var(--g4) 38%, transparent), transparent 70%);
  filter:blur(50px);pointer-events:none;
}
.final-footer-group::after{
  content:"";position:absolute;inset:auto -10% -35% -10%;height:70%;
  background:
    radial-gradient(40% 60% at 20% 100%, color-mix(in srgb, var(--g1) 30%, transparent), transparent 70%),
    radial-gradient(36% 55% at 80% 100%, color-mix(in srgb, var(--g3) 28%, transparent), transparent 70%);
  filter:blur(60px);pointer-events:none;
}
.final-footer-group .wrap{z-index:1;}

.ff-top{display:grid;grid-template-columns:1.4fr .6fr;gap:64px;align-items:start;}
@media (max-width:900px){ .ff-top{grid-template-columns:1fr;gap:44px;} }
.ff-cta h2{font-size:clamp(2rem,4.4vw,3.1rem);max-width:16ch;color:var(--on-navy);}
.ff-cta .lede{margin-top:20px;font-size:1.05rem;color:var(--on-navy-soft);max-width:52ch;}
.final-ctas{display:flex;flex-wrap:wrap;gap:14px;margin-top:32px;}
.final-note{margin-top:26px;font-size:.85rem;color:var(--on-navy-soft);}

.ff-links{display:flex;flex-direction:column;gap:13px;padding-top:6px;}
.ff-links .eyebrow{color:var(--on-navy-soft);margin-bottom:6px;}
.ff-links a{color:var(--on-navy-soft);font-size:.95rem;transition:color .2s ease;}
.ff-links a:hover{color:var(--on-navy);}

.ff-divider{
  margin-top:72px;height:1px;
  background:linear-gradient(90deg,var(--g1),var(--g2),var(--g3),var(--g4));
  opacity:.75;
}

.ff-bottom{
  display:flex;flex-direction:column;align-items:center;text-align:center;gap:20px;
  padding-top:32px;
}
.ff-brand{display:flex;flex-direction:column;align-items:center;gap:16px;max-width:74ch;}
.ff-logo{margin-top:28px;}
.ff-brand p{font-size:.95rem;color:var(--on-navy-soft);}
.ff-social{display:flex;align-items:center;justify-content:center;gap:16px;}
.ff-social a{
  display:flex;align-items:center;justify-content:center;
  width:38px;height:38px;border-radius:50%;
  border:1px solid var(--on-navy-line);color:var(--on-navy-soft);
  transition:color .2s ease, border-color .2s ease, transform .2s ease;
}
.ff-social a:hover{color:var(--on-navy);border-color:var(--on-navy);transform:translateY(-2px);}
.ff-social svg{width:18px;height:18px;fill:currentColor;}
.ff-legal{display:flex;align-items:center;justify-content:center;gap:20px;flex-wrap:wrap;font-size:.8rem;color:var(--on-navy-soft);}