/* Site nav: floating bar, morphing dropdown panel, login + demo modals.
   Tokens are scoped to the nav and its modals so host pages keep their own. */
.nv,.md{
  --background-default:#060606;
  --background-secondary:#ebeff5;
  --brand-primary:#0063f2;
  --contrast-primary:#fff;
  --contrast-secondary:rgba(255,255,255,.8);
  --contrast-tertiary:rgba(255,255,255,.5);
  --contrast-divider:rgba(255,255,255,.12);
  --background-opacity-80:rgba(6,6,6,.8);
  --contrast-tertiary-dark:rgba(6,6,6,.56);
  --contrast-divider-dark:rgba(6,6,6,.1);
  --radius-pill:24px;
  --ease:cubic-bezier(.22,.8,.28,1);
  font-family:'DM Sans',system-ui,sans-serif;font-size:16px;line-height:normal;font-weight:400;
  -webkit-font-smoothing:antialiased;
}
.nv *,.nv *::before,.nv *::after,.md *,.md *::before,.md *::after{box-sizing:border-box}
:where(.nv,.md) a{color:inherit;text-decoration:none}
:where(.nv,.md) button{font:inherit;color:inherit;background:none;border:0;padding:0;cursor:pointer}
.nv :focus-visible,.md :focus-visible{outline:2px solid var(--brand-primary);outline-offset:3px}

/* ---------- Nav theme variables ----------
   The nav reads its colors from these; .nv[data-theme] swaps them as the
   section under the bar changes ground. */
.nv{
  --nv-fg:var(--background-default);
  --nv-fg-muted:var(--background-opacity-80);
  --nv-bar:rgba(255,255,255,.72);
  --nv-border:var(--contrast-divider-dark);
  --nv-hover:rgba(6,6,6,.06);
  --nv-ghost-border:rgba(6,6,6,.16);
}
.nv[data-theme="dark"]{
  --nv-fg:var(--contrast-primary);
  --nv-fg-muted:var(--contrast-secondary);
  --nv-bar:rgba(18,18,18,.6);
  --nv-border:var(--contrast-divider);
  --nv-hover:rgba(255,255,255,.1);
  --nv-ghost-border:rgba(255,255,255,.24);
}

/* ---------- Bar ---------- */
.nv{position:fixed;inset:16px 0 auto;z-index:100;padding:0 48px;pointer-events:none}
.nv-bar{
  pointer-events:auto;position:relative;max-width:1344px;margin:0 auto;height:60px;
  display:flex;align-items:center;gap:24px;padding:0 10px 0 20px;
  background:var(--nv-bar);border:1px solid var(--nv-border);border-radius:18px;
  backdrop-filter:saturate(1.6) blur(16px);-webkit-backdrop-filter:saturate(1.6) blur(16px);
  color:var(--nv-fg);
  transition:background-color .4s var(--ease),border-color .4s var(--ease),color .4s var(--ease),box-shadow .3s var(--ease);
}
.nv.is-scrolled .nv-bar{box-shadow:0 8px 32px rgba(6,6,6,.08)}
.nv-logo{position:relative;display:block;width:96px;height:22px;flex:none}
.nv-logo img{position:absolute;inset:0;width:100%;height:100%;transition:opacity .4s var(--ease)}
.nv-logo .on-dark{opacity:0}
.nv[data-theme="dark"] .nv-logo .on-dark{opacity:1}
.nv[data-theme="dark"] .nv-logo .on-light{opacity:0}

/* Primary links + sliding hover pill */
.nv-links{position:relative;display:flex;align-items:center;gap:2px;margin:0 auto;list-style:none;padding:0}
.nv-hl{position:absolute;top:0;left:0;height:36px;border-radius:12px;background:var(--nv-hover);opacity:0;pointer-events:none;
  transition:transform .35s var(--ease),width .35s var(--ease),opacity .2s ease,background-color .4s var(--ease)}
.nv-link{position:relative;z-index:1;display:flex;align-items:center;gap:6px;height:36px;padding:0 14px;border-radius:12px;
  font-size:15px;font-weight:400;letter-spacing:-.2px;color:var(--nv-fg-muted);transition:color .2s ease}
.nv-link:hover,.nv-link[aria-expanded="true"],.nv-link[aria-current="page"],.nv-link[data-current]{color:var(--nv-fg)}
.nv-chev{width:10px;height:10px;transition:transform .3s var(--ease)}
.nv-link[aria-expanded="true"] .nv-chev{transform:rotate(180deg)}

/* Right-side actions */
.nv-actions{display:flex;align-items:center;gap:8px;flex:none}
.nv-btn{position:relative;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:var(--radius-pill);
  font-size:15px;font-weight:400;letter-spacing:-.2px;overflow:hidden;white-space:nowrap;
  transition:background-color .25s ease,border-color .25s ease,color .25s ease}
.nv-btn-ghost{border:1px solid var(--nv-ghost-border);color:var(--nv-fg)}
.nv-btn-ghost:hover{background:var(--nv-hover)}
.nv-btn-primary{background:var(--brand-primary);color:var(--contrast-primary)}
.nv-btn-primary:hover{background:#0052cc}
/* text roll on hover */
.nv-roll{display:block;height:20px;line-height:20px;overflow:hidden}
.nv-roll span{display:block;transition:transform .35s var(--ease)}
.nv-btn:hover .nv-roll span{transform:translateY(-100%)}
.nv-arrow{width:14px;height:14px;transition:transform .35s var(--ease)}
.nv-btn:hover .nv-arrow{transform:translateX(3px)}

/* ---------- Dropdown panel (one shared, morphing container) ---------- */
.nv-panel{position:absolute;top:calc(100% + 10px);left:0;z-index:2;
  background:var(--contrast-primary);color:var(--background-default);
  border:1px solid var(--contrast-divider-dark);border-radius:20px;
  box-shadow:0 24px 64px rgba(6,6,6,.14),0 2px 6px rgba(6,6,6,.04);
  overflow:hidden;opacity:0;visibility:hidden;transform:translateY(-6px) scale(.98);transform-origin:top center;
  transition:opacity .22s ease,transform .3s var(--ease),visibility 0s .3s,
             width .35s var(--ease),height .35s var(--ease),left .35s var(--ease)}
.nv-panel.is-open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nv-panel::before{content:"";position:absolute;inset:-12px 0 auto;height:12px} /* hover bridge */
.nv-menu{position:absolute;top:0;left:0;padding:12px;opacity:0;pointer-events:none;transition:opacity .2s ease,transform .3s var(--ease)}
.nv-menu.is-active{opacity:1;pointer-events:auto;transform:none!important}
.nv-menu.from-left{transform:translateX(-24px)}
.nv-menu.from-right{transform:translateX(24px)}

.nv-cols{display:grid;grid-auto-flow:column;gap:8px}
.nv-col{min-width:250px}
.nv-eyebrow{font-family:'DM Mono',monospace;font-size:12px;font-weight:500;letter-spacing:.7px;text-transform:uppercase;color:var(--contrast-tertiary-dark);padding:10px 12px 8px}
.nv-item{display:flex;align-items:flex-start;gap:12px;padding:10px 12px;border-radius:12px;transition:background-color .2s ease}
.nv-item:hover{background:var(--background-secondary)}
.nv-icon{flex:none;width:36px;height:36px;border-radius:10px;display:grid;place-items:center;background:var(--background-secondary);color:var(--brand-primary);transition:background-color .2s ease,color .2s ease}
.nv-item:hover .nv-icon{background:var(--brand-primary);color:var(--contrast-primary)}
.nv-icon svg{width:18px;height:18px}
.nv-t{display:flex;align-items:center;gap:6px;font-size:15px;line-height:20px;letter-spacing:-.2px}
.nv-t .nv-go{width:12px;height:12px;opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .25s var(--ease);color:var(--brand-primary)}
.nv-item:hover .nv-go{opacity:1;transform:none}
.nv-d{font-size:13px;line-height:18px;font-weight:300;color:var(--contrast-tertiary-dark);margin-top:2px}

/* Contractors feature card */
.nv-feature{width:240px;border-radius:14px;background:var(--background-default);color:var(--contrast-primary);padding:20px;display:flex;flex-direction:column;justify-content:space-between;gap:24px;position:relative;overflow:hidden}
.nv-feature::after{content:"";position:absolute;width:220px;height:220px;right:-80px;bottom:-110px;border-radius:50%;background:radial-gradient(closest-side,rgba(0,99,242,.7),transparent);transition:transform .5s var(--ease)}
.nv-feature:hover::after{transform:scale(1.2)}
.nv-feature .nv-eyebrow{color:var(--contrast-tertiary);padding:0}
.nv-feature h4{color:inherit;margin:8px 0 0;font-size:22px;line-height:28px;font-weight:400;letter-spacing:-.8px}
.nv-feature span{position:relative;z-index:1;font-size:14px;display:inline-flex;align-items:center;gap:6px}

/* Partners: logo rows */
.nv-partners{width:300px}
.nv-logo-row{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:10px 12px;border-radius:12px;transition:background-color .2s ease}
.nv-logo-row:hover{background:var(--background-secondary)}
.nv-wordmark{font-size:15px;letter-spacing:-.2px;color:var(--background-default)}
.nv-logo-row .nv-go{width:14px;height:14px;color:var(--brand-primary);opacity:0;transform:translateX(-4px);transition:opacity .2s ease,transform .25s var(--ease)}
.nv-logo-row:hover .nv-go{opacity:1;transform:none}
.nv-divider{height:1px;background:var(--contrast-divider-dark);margin:6px 12px}
.nv-cta{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-top:4px;padding:14px;border-radius:14px;background:var(--background-secondary);transition:background-color .25s ease,color .25s ease}
.nv-cta:hover{background:var(--brand-primary);color:var(--contrast-primary)}
.nv-cta b{display:block;font-weight:400;font-size:15px;letter-spacing:-.2px}
.nv-cta small{display:block;font-size:13px;font-weight:300;opacity:.7;margin-top:2px}
.nv-cta svg{width:16px;height:16px;flex:none;transition:transform .3s var(--ease)}
.nv-cta:hover svg{transform:translateX(3px)}

/* ---------- Mobile ---------- */
.nv-burger{display:none;width:40px;height:40px;border-radius:12px;position:relative}
.nv-burger span{position:absolute;left:11px;right:11px;height:1.5px;background:var(--nv-fg);transition:transform .3s var(--ease),opacity .2s ease,background-color .4s var(--ease)}
.nv-burger span:nth-child(1){top:15px}.nv-burger span:nth-child(2){top:23px}
.nv.is-mobile-open .nv-burger span:nth-child(1){transform:translateY(4px) rotate(45deg)}
.nv.is-mobile-open .nv-burger span:nth-child(2){transform:translateY(-4px) rotate(-45deg)}
.nv-drawer{display:none}

@media (max-width:991px){
  .nv{padding:0 20px;inset:12px 0 auto}
  .nv-links,.nv-panel,.nv-actions .nv-btn-ghost{display:none}
  .nv-actions{margin-left:auto}
  .nv-burger{display:block}
  .nv-drawer{display:block;pointer-events:auto;max-width:1344px;margin:8px auto 0;max-height:0;overflow:hidden;
    background:var(--contrast-primary);color:var(--background-default);border-radius:18px;border:1px solid transparent;
    transition:max-height .45s var(--ease),border-color .3s ease}
  .nv.is-mobile-open .nv-drawer{max-height:calc(100vh - 96px);overflow:auto;border-color:var(--contrast-divider-dark);box-shadow:0 24px 64px rgba(6,6,6,.14)}
  .nv.is-mobile-open .nv-bar{--nv-bar:var(--contrast-primary);--nv-fg:var(--background-default);--nv-fg-muted:var(--background-opacity-80)}
  .nv.is-mobile-open .nv-logo .on-dark{opacity:0}.nv.is-mobile-open .nv-logo .on-light{opacity:1}
}
@media (max-width:479px){
  .nv-bar{gap:12px;padding:0 6px 0 16px}
  .nv-actions{gap:4px}
  .nv-actions .nv-btn-primary{padding:0 14px}
  .nv-actions .nv-arrow{display:none}
  .nv-burger{width:36px}
  .nv-burger span{left:9px;right:9px}
}
.nv-drawer-inner{padding:8px 12px 16px}
.nv-acc{border-bottom:1px solid var(--contrast-divider-dark)}
.nv-acc>button,.nv-acc>a{display:flex;width:100%;align-items:center;justify-content:space-between;padding:16px 8px;font-size:18px;letter-spacing:-.4px}
.nv-acc>button[aria-expanded="true"] .nv-chev{transform:rotate(180deg)}
.nv-acc-body{display:grid;grid-template-rows:0fr;transition:grid-template-rows .35s var(--ease)}
.nv-acc>button[aria-expanded="true"]+.nv-acc-body{grid-template-rows:1fr}
.nv-acc-body>div{overflow:hidden}
.nv-acc-body a{display:block;padding:10px 8px;font-size:15px;font-weight:300;color:var(--background-opacity-80)}
.nv-acc-body .nv-eyebrow{padding:12px 8px 4px}
.nv-drawer-actions{display:grid;gap:8px;margin-top:16px}
.nv-drawer-actions .nv-btn{justify-content:center;height:48px}
.nv-drawer-actions .nv-btn-ghost{--nv-ghost-border:rgba(6,6,6,.16);--nv-fg:var(--background-default)}

/* ---------- Modals (login + demo), same choices as the live site ---------- */
.md{position:fixed;inset:0;z-index:200;display:grid;place-items:center;padding:20px;background:rgba(6,6,6,.5);
  backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);opacity:0;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s}
.md.is-open{opacity:1;visibility:visible;transition-delay:0s}
.md-card{position:relative;width:100%;max-width:880px;background:var(--contrast-primary);color:var(--background-default);border-radius:24px;padding:48px;
  transform:translateY(12px) scale(.98);transition:transform .35s var(--ease)}
.md.is-open .md-card{transform:none}
.md-card h2{color:var(--background-default);margin:0 0 32px;text-align:center;font-size:44px;line-height:48px;font-weight:400;letter-spacing:-2px;text-wrap:balance}
.md-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px}
.md-opt{display:flex;flex-direction:column;justify-content:space-between;gap:32px;padding:24px;border-radius:20px;background:var(--background-secondary);transition:background-color .25s ease,color .25s ease}
.md-opt:hover{background:var(--background-default);color:var(--contrast-primary)}
.md-opt .nv-eyebrow{padding:0;margin-bottom:8px}
.md-opt:hover .nv-eyebrow{color:var(--contrast-tertiary)}
.md-opt h3{color:inherit;margin:0;font-size:24px;line-height:32px;font-weight:400;letter-spacing:-1px}
.md-opt .md-sel{display:inline-flex;align-items:center;gap:8px;font-size:15px}
.md-opt .md-sel svg{width:14px;height:14px;transition:transform .3s var(--ease)}
.md-opt:hover .md-sel svg{transform:translate(2px,-2px)}
.md-close{position:absolute;top:16px;right:16px;width:40px;height:40px;border-radius:12px;display:grid;place-items:center;transition:background-color .2s ease}
.md-close:hover{background:var(--background-secondary)}
@media (max-width:767px){.md-card{padding:40px 20px 24px}.md-card h2{font-size:32px;line-height:40px;letter-spacing:-1px}}


/* Most pages wrap the nav in the legacy .fixed-wrapper, whose backdrop-filter would make it the
   containing block for the fixed bar and the full-screen modals. The bar blurs itself. */
.fixed-wrapper:has(> .nv){-webkit-backdrop-filter:none;backdrop-filter:none}

/* Holds the bar's space on pages whose first section expects an in-flow nav above it. */
.nv-spacer{height:92px}