@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@700&family=DM+Sans:opsz,wght@9..40,500;9..40,600;9..40,700&display=swap');
.site-nav{--bg:#FBF8F5;--ink:#0F2739;--line:rgba(15,39,57,.12);--accent:#F05A28;--accent-d:#D94A1B;--ease:cubic-bezier(.2,.7,.2,1);--nav-h:80px;font-family:'DM Sans',system-ui,sans-serif;line-height:1.5;box-sizing:border-box}
.site-nav *{box-sizing:border-box}
.site-nav a{color:inherit;text-decoration:none}
.site-nav img{display:block;max-width:none}
.site-nav__links a,.site-nav__links a:hover{color:inherit}
.site-nav__links a:hover{color:#F05A28}
.site-nav__cta,.site-nav__cta:hover{color:#fff!important}
.site-nav__menu{background:none;border:0;color:inherit;cursor:pointer;appearance:none}
.site-nav h1{all:unset}
.site-nav-spacer{height:80px}
@media (max-width:760px){.site-nav-spacer{height:68px}}
/* ---------------- nav ---------------- */
.site-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; gap: 48px;
  height: var(--nav-h); padding: 0 44px;
  color: var(--ink);
  transition: color .4s var(--ease), background-color .4s var(--ease), box-shadow .4s var(--ease), height .4s var(--ease);
}
.site-nav.is-scrolled {
  --nav-h: 74px;
  background: rgba(251, 248, 245, .82);
  backdrop-filter: saturate(1.4) blur(14px); -webkit-backdrop-filter: saturate(1.4) blur(14px);
  box-shadow: 0 1px 0 var(--line);
}
.site-nav__logo { display: block; flex: none; }
.site-nav__logo img { height: 42px; width: auto; transition: filter .4s var(--ease), height .4s var(--ease); }
.site-nav.is-scrolled .site-nav__logo img { height: 38px; }
.site-nav__links { display: flex; gap: 36px; }
.site-nav__links a { position: relative; font-size: 15px; font-weight: 500; opacity: .85; transition: color .25s, opacity .25s; }
.site-nav__links a::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: -7px; height: 2px; border-radius: 2px;
  background: var(--accent); transform: scaleX(0); transform-origin: left; transition: transform .35s var(--ease);
}
.site-nav__links a:hover { color: var(--accent); opacity: 1; }
.site-nav__links a.is-current { opacity: 1; font-weight: 700; }
.site-nav__links a.is-current::after { transform: scaleX(1); }
.site-nav__cta {
  margin-left: auto; display: inline-flex; align-items: center; height: 46px; padding: 0 24px; border-radius: 999px;
  font-size: 15px; font-weight: 700; color: #fff; background: var(--accent); border: 1.5px solid var(--accent);
  box-shadow: 0 10px 26px -12px rgba(240, 90, 40, .65);
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .25s var(--ease);
}
.site-nav__cta:hover, .site-nav__cta.is-current { background: var(--accent-d); border-color: var(--accent-d); color: #fff; transform: translateY(-1px); }
.site-nav.is-dark .site-nav__cta { background: transparent; border-color: rgba(255, 255, 255, .7); color: #fff; box-shadow: none; }
.site-nav.is-dark .site-nav__cta:hover { background: var(--accent); border-color: var(--accent); }
.site-nav__menu { display: none; }

.site-nav.is-dark { color: #fff; }
.site-nav.is-dark.is-scrolled { background: rgba(15, 39, 57, .72); box-shadow: 0 1px 0 rgba(255, 255, 255, .08); }
.site-nav.is-dark .site-nav__logo img { filter: brightness(0) invert(1); }


@media (max-width:1100px){.site-nav{gap:30px;padding:0 28px}.site-nav__links{gap:24px}}
@media (max-width:760px){:root{--nav-h:68px}
/* nav: logo + hamburger; links become a full-screen cream panel */
  .site-nav, .site-nav.is-scrolled { --nav-h: 68px; padding: 0 18px; gap: 16px; }
  .site-nav__logo { position: relative; z-index: 2; }
  .site-nav__logo img, .site-nav.is-scrolled .site-nav__logo img { height: 34px; }
  .site-nav__menu {
    position: relative; z-index: 2; display: grid; place-content: center; gap: 6px;
    width: 46px; height: 46px; margin-left: auto; margin-right: -6px; border-radius: 50%;
  }
  .site-nav__menu span { display: block; width: 24px; height: 2px; border-radius: 2px; background: currentColor; transition: transform .4s var(--ease), width .4s var(--ease); }
  .site-nav__menu span:last-child { width: 16px; margin-left: 8px; }
  .site-nav__links {
    position: fixed; inset: 0; z-index: 1;
    flex-direction: column; justify-content: center; gap: 6px;
    padding: 110px 26px 150px; background: var(--bg); color: var(--ink);
    opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility 0s .35s;
  }
  .site-nav__links a {
    font-family: 'Outfit', sans-serif; font-weight: 700; font-size: 44px; line-height: 1.12; letter-spacing: -0.035em; opacity: 1;
    transform: translateY(18px); transition: transform .5s var(--ease), color .25s;
  }
  .site-nav__links a::after { display: none; }
  .site-nav__links a.is-current { color: var(--accent); }
  .site-nav__cta {
    position: fixed; z-index: 2; left: 26px; right: 26px; bottom: 40px; margin: 0;
    justify-content: center; height: 58px; font-size: 16px;
    background: var(--accent); border-color: var(--accent); color: #fff;
    opacity: 0; visibility: hidden; transform: translateY(14px);
    transition: opacity .35s var(--ease), transform .5s var(--ease), visibility 0s .35s;
  }
  .site-nav.is-open { color: var(--ink); background: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-nav.is-open .site-nav__logo img { filter: none; }
  .site-nav.is-open .site-nav__links { opacity: 1; visibility: visible; transition: opacity .35s var(--ease), visibility 0s; }
  .site-nav.is-open .site-nav__links a { transform: none; }
  .site-nav.is-open .site-nav__links a:nth-child(2) { transition-delay: .04s; }
  .site-nav.is-open .site-nav__links a:nth-child(3) { transition-delay: .08s; }
  .site-nav.is-open .site-nav__links a:nth-child(4) { transition-delay: .12s; }
  .site-nav.is-open .site-nav__links a:nth-child(5) { transition-delay: .16s; }
  .site-nav.is-open .site-nav__cta { background: var(--accent); border-color: var(--accent); box-shadow: none; opacity: 1; visibility: visible; transform: none; transition: opacity .35s var(--ease) .1s, transform .5s var(--ease) .1s, visibility 0s; }
  .site-nav.is-open .site-nav__menu span:first-child { transform: translateY(4px) rotate(45deg); }
  .site-nav.is-open .site-nav__menu span:last-child { width: 24px; margin-left: 0; transform: translateY(-4px) rotate(-45deg); }
  body.menu-open { overflow: hidden; }
}

/* Menu positioning matches the Demo Websites page (8 Nov 2026) */
@media (min-width:761px){
  .site-nav,.site-nav.is-scrolled{justify-content:space-between;padding:0 max(32px,calc(50% - 608px));gap:24px}
  .site-nav{--nav-h:80px}
  .site-nav.is-scrolled{--nav-h:74px}
  .site-nav__logo img{height:48px}
  .site-nav.is-scrolled .site-nav__logo img{height:44px}
  .site-nav__links{gap:32px}
  .site-nav__links a{font-size:14px}
  .site-nav__cta{margin-left:0;height:44px;font-size:14px;font-weight:600}
}

.site-nav--solid{background:#FBF8F5;box-shadow:0 1px 0 rgba(15,39,57,.12);color:#0F2739}
.site-nav.is-open{z-index:100000}
@media (min-width:761px){.wrap{max-width:1280px;padding-left:32px;padding-right:32px}}