/* nav.css, shared navigation styles for implemnt.com.
   Extracted Aug 23 2026 from the per page inline copies. Every page loads this file
   AFTER its own inline stylesheet, which is the order the old inline block sat in,
   so the cascade is unchanged. Canonical version is the one index.html carried. */

/* ===== nav-unified-2026-08-02: identical nav on every page (logo left, links centred, CTA right) ===== */
nav{justify-content:space-between}
.nav-logo{font-family:var(--serif);font-size:20px;text-decoration:none;letter-spacing:0;font-weight:700;color:var(--pink)}
.nav-links{display:none;align-items:center;gap:28px}
.nav-links a{font-size:13.5px;color:#c8c8c8;text-decoration:none;font-weight:500;transition:color 0.2s;position:relative}
.nav-links a:hover{color:#fff}
.nav-links a.active{color:var(--cream)}
.nav-links a::after{content:'';position:absolute;bottom:-2px;left:0;width:0;height:1.5px;background:var(--cream);transition:width 0.3s ease}
.nav-links a:hover::after{width:100%}
.nav-cta{background:var(--pink);color:var(--bg);border:none;border-radius:8px;padding:8px 20px;font-size:13.5px;font-weight:600;font-family:var(--sans);cursor:pointer;text-decoration:none;transition:all 0.2s;min-height:48px;display:inline-flex;align-items:center}
.nav-cta:hover{background:var(--pink-dark);transform:translateY(-1px)}
.hamburger{display:none;background:transparent;border:none;cursor:pointer;padding:10px;min-width:48px;min-height:48px;z-index:101;flex-direction:column;align-items:center;justify-content:center;gap:5px}
.hamburger span{display:block;width:20px;height:2px;background:var(--pink);border-radius:2px;transition:transform 0.3s ease,opacity 0.3s ease}
.hamburger.open span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.hamburger.open span:nth-child(2){opacity:0}
.hamburger.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:60px;left:0;right:0;background:rgba(17,17,17,0.98);backdrop-filter:blur(20px);-webkit-backdrop-filter:blur(20px);border-bottom:1px solid var(--border);max-height:0;overflow:hidden;transition:max-height 0.3s ease;z-index:99}
.mobile-menu.menu-open{max-height:520px}
.mobile-menu a{display:block;padding:16px 24px;font-family:var(--sans);font-size:15px;color:var(--text-dim);text-decoration:none;border-bottom:1px solid rgba(255,255,255,0.04);transition:color 0.2s}
.mobile-menu a:hover,.mobile-menu a:active{color:var(--pink)}
.mobile-menu a.active{color:var(--cream)}
.mobile-menu .mobile-menu-cta{display:block;padding:14px 24px;font-family:var(--sans);font-size:15px;color:var(--bg);background:var(--pink);text-decoration:none;font-weight:600;text-align:center;border-bottom:1px solid rgba(255,255,255,0.04);min-height:48px}
.mobile-menu .mobile-menu-cta:hover,.mobile-menu .mobile-menu-cta:active{background:var(--pink-dark);color:var(--bg)}
.mobile-backdrop{display:none;position:fixed;inset:0;top:0;background:rgba(0,0,0,0.5);z-index:98;opacity:0;transition:opacity 0.3s ease;pointer-events:none}
.mobile-backdrop.vis{opacity:1;pointer-events:all}
/* the homepage bar grows to 64px tall with 48px side padding on desktop; the deep pages
   stayed at 60px/24px, which put the logo and CTA 24px off from the homepage. */
@media(min-width:768px){nav{padding:0 48px;height:64px}}
@media(min-width:768px){.nav-links{display:flex}}
@media(min-width:960px){.nav-links{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}}
@media(max-width:767px){.hamburger{display:flex}.mobile-menu{display:block}.mobile-backdrop{display:block}.nav-cta{padding:10px 16px;font-size:12px}}