/* popsoda site nav: floating glass bar, services mega menu, full-screen phone menu.
   Uses the colour/type tokens defined in each page's :root. Markup is written by tools/build_services.py. */

.nav{position:fixed;inset:max(12px,env(safe-area-inset-top)) 0 auto;z-index:60;display:flex;justify-content:center;pointer-events:none;transition:transform .55s var(--ease-out)}
.nav.tuck{transform:translateY(calc(-100% - 28px))}
.nav-bar{pointer-events:auto;position:relative;width:min(100% - 24px,1120px);height:60px;display:flex;align-items:center;gap:6px;padding:0 8px 0 20px;border-radius:var(--r-full);
  background:rgba(253,251,249,.8);backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  box-shadow:0 10px 40px rgba(20,14,8,.16),0 1px 3px rgba(20,14,8,.08),inset 0 0 0 1px rgba(255,255,255,.75);transition:background-color var(--d-med),box-shadow var(--d-med)}
.nav.raised .nav-bar,.nav.has-open .nav-bar{background:rgba(253,251,249,.95)}

.nav .logo.nav-logo{color:var(--c-ink);text-shadow:none;min-height:44px;padding-right:8px;flex:none}
.nav-links{flex:1;display:flex;justify-content:center;gap:2px}
.nav-link{position:relative;min-height:44px;padding:0 15px;border-radius:var(--r-full);border:0;background:none;color:var(--c-ink);font:500 var(--t-sm)/1 var(--f-body);display:inline-flex;align-items:center;gap:6px;cursor:pointer;text-decoration:none;transition:background-color var(--d-fast)}
.nav-link:hover,.nav-link[aria-expanded="true"]{background:rgba(34,30,27,.06)}
.nav-link svg{width:10px;height:10px;transition:transform var(--d-med) var(--ease-out)}
.nav-link[aria-expanded="true"] svg{transform:rotate(180deg)}
.nav-link[aria-current="page"]::after{content:"";position:absolute;left:50%;bottom:7px;width:4px;height:4px;margin-left:-2px;border-radius:50%;background:var(--c-cherry)}

.nav-ctas{display:flex;align-items:center;gap:6px;flex:none}
.nav-scan{display:inline-flex;align-items:center;gap:8px;min-height:44px;padding:0 18px 0 14px;border-radius:var(--r-full);background:var(--c-ink);color:#fff;text-decoration:none;font:600 var(--t-sm)/1 var(--f-body);white-space:nowrap;transition:transform var(--d-fast) var(--ease-spring),background-color var(--d-fast)}
.nav-scan:hover{background:#000;transform:translateY(-1px)}
.nav-scan .fz{position:relative;width:8px;height:8px;border-radius:50%;background:var(--c-teal)}
.nav-scan .fz::after{content:"";position:absolute;inset:-4px;border-radius:50%;border:2px solid var(--c-teal);opacity:0;animation:fz 2.2s var(--ease-out) infinite}
@keyframes fz{0%{transform:scale(.4);opacity:.9}100%{transform:scale(1.6);opacity:0}}

.nav-burger{display:none;width:44px;height:44px;border-radius:50%;border:0;background:#fff;box-shadow:var(--sh-sm);cursor:pointer;position:relative;flex:none}
.nav-burger span{position:absolute;left:14px;right:14px;height:2px;border-radius:2px;background:var(--c-ink);transition:transform .4s var(--ease-out),top .4s var(--ease-out)}
.nav-burger span:first-child{top:18px}.nav-burger span:last-child{top:24px}
.nav-burger[aria-expanded="true"] span:first-child{top:21px;transform:rotate(45deg)}
.nav-burger[aria-expanded="true"] span:last-child{top:21px;transform:rotate(-45deg)}

.nav :focus-visible,.sheet :focus-visible{outline:2.5px solid var(--c-cherry);outline-offset:2px}

/* ── Services mega menu ── */
.nav-mega{position:absolute;top:calc(100% + 10px);left:0;right:0;pointer-events:auto;
  display:grid;grid-template-columns:minmax(0,1fr) 290px;gap:12px;padding:12px;border-radius:28px;
  background:#fdfbf9;box-shadow:0 30px 80px rgba(20,14,8,.25),inset 0 0 0 1px rgba(255,255,255,.8);
  opacity:0;visibility:hidden;transform:translateY(-8px) scale(.985);transform-origin:top center;
  transition:opacity .3s var(--ease-out),transform .45s var(--ease-out),visibility 0s .3s}
.nav-mega.open{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.nm-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:4px}
.nm-item{display:grid;grid-template-columns:minmax(0,1fr);gap:8px;align-items:start;padding:12px;border-radius:20px;text-decoration:none;color:var(--c-ink);transition:background-color var(--d-fast)}
.nm-item:hover,.nm-item:focus-visible{background:var(--tint)}
.nm-item .th{width:52px;height:52px;border-radius:14px;background:var(--tint);display:grid;place-items:center;overflow:hidden;transition:background-color var(--d-fast)}
.nm-item:hover .th{background:#fff}
.nm-item .th img{height:42px;width:auto;filter:drop-shadow(0 6px 6px rgba(40,20,0,.2));transition:transform .5s var(--ease-spring)}
.nm-item:hover .th img{transform:rotate(-10deg) translateY(-3px) scale(1.08)}
.nm-item small{display:block;font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:5px}
.nm-item b{display:block;font:400 1.15rem/1.05 var(--f-display);margin-bottom:3px}
.nm-item span span{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;font-size:12px;line-height:1.35;color:var(--c-muted)}
.nav-mega.open .nm-item{animation:navUp .45s var(--ease-out) both;animation-delay:calc(var(--i) * 35ms)}
@keyframes navUp{from{opacity:0;transform:translateY(8px)}}
.nm-aside{position:relative;overflow:hidden;border-radius:20px;background:var(--c-green-deep);color:#fff;padding:22px;display:flex;flex-direction:column;gap:10px;min-height:250px}
.nm-aside .k{font:600 10px/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-teal)}
.nm-aside h3{margin:0;font:400 1.7rem/1.02 var(--f-display);max-width:10ch}
.nm-aside p{margin:0;font-size:var(--t-xs);color:rgba(255,255,255,.7);max-width:12rem;position:relative;z-index:1}
.nm-aside .acts{margin-top:auto;display:flex;flex-direction:column;align-items:flex-start;gap:6px;position:relative;z-index:1}
.nm-aside .nm-go{display:inline-flex;align-items:center;min-height:40px;padding:0 16px;border-radius:var(--r-full);background:var(--c-yellow);color:var(--c-green-night);font:600 var(--t-xs)/1 var(--f-body);text-decoration:none}
.nm-aside .all{color:#fff;font-size:var(--t-xs);font-weight:600;min-height:32px;display:inline-flex;align-items:center;text-decoration:none}
.nm-aside .all:hover{text-decoration:underline}
.nm-aside img{position:absolute;right:-12px;bottom:-16px;width:112px;filter:drop-shadow(0 14px 16px rgba(0,0,0,.4));transform:rotate(-6deg)}

/* ── Full-screen phone menu ── */
.sheet{position:fixed;inset:0;z-index:59;background:var(--c-bg);overflow-y:auto;overscroll-behavior:contain;
  padding:calc(max(12px,env(safe-area-inset-top)) + 84px) 20px calc(28px + env(safe-area-inset-bottom));
  clip-path:circle(0 at calc(100% - 46px) 42px);visibility:hidden;transition:clip-path .65s var(--ease-out),visibility 0s .65s}
.sheet.open{clip-path:circle(160% at calc(100% - 46px) 42px);visibility:visible;transition-delay:0s}
.sheet-inner{max-width:560px;margin:0 auto;display:flex;flex-direction:column;gap:28px;min-height:100%}
.sheet-links{list-style:none;margin:0;padding:0}
.sheet-links li{border-bottom:1px solid var(--c-line)}
.sheet-links a{display:flex;align-items:baseline;gap:14px;min-height:64px;padding:10px 0;text-decoration:none;color:var(--c-ink);font:400 clamp(2.2rem,9vw,3rem)/1 var(--f-display);letter-spacing:-.02em}
.sheet-links a small{font:500 1.05rem/1 var(--f-hand);color:var(--c-cherry-deep);min-width:1.6rem}
.sheet-links a::after{content:"→";margin-left:auto;font:300 1.3rem var(--f-body);color:var(--c-faint);transition:transform var(--d-fast)}
.sheet-links a:active::after{transform:translateX(4px)}
.sheet-label{font:600 var(--t-xs)/1 var(--f-body);letter-spacing:.14em;text-transform:uppercase;color:var(--c-muted);margin:0 0 12px;display:flex;justify-content:space-between}
.sheet-label a{color:var(--c-ink);text-decoration:none;letter-spacing:.06em}
.sheet-svcs{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.sheet-svc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;min-height:104px;padding:12px;border-radius:18px;background:var(--tint);text-decoration:none;color:var(--c-ink);overflow:hidden}
.sheet-svc b{font:400 1.15rem/1.05 var(--f-display);max-width:7.5rem;position:relative;z-index:1}
.sheet-svc img{position:absolute;right:-4px;top:6px;height:58px;width:auto;filter:drop-shadow(0 6px 6px rgba(40,20,0,.2))}
.sheet-ctas{display:grid;gap:8px}
.sheet-ctas a{display:flex;align-items:center;justify-content:center;gap:8px;min-height:54px;border-radius:var(--r-full);text-decoration:none;font:600 var(--t-base)/1 var(--f-body)}
.sheet-ctas .ink{background:var(--c-ink);color:#fff}
.sheet-ctas .light{background:#fff;color:var(--c-ink);box-shadow:var(--sh-sm)}
.sheet-foot{margin-top:auto;display:flex;justify-content:space-between;align-items:flex-end;font-size:var(--t-sm);color:var(--c-muted)}
.sheet-foot a{color:var(--c-ink);min-height:44px;display:inline-flex;align-items:center}
.sheet-foot .sheet-duo{display:flex;align-items:flex-end;gap:2px}
.sheet-foot .sheet-duo img{height:46px;width:auto}.sheet-foot .sheet-duo img:first-child{height:36px}
.sheet.open .sheet-inner>*{animation:navUp .55s var(--ease-out) both}
.sheet.open .sheet-inner>*:nth-child(1){animation-delay:.12s}
.sheet.open .sheet-inner>*:nth-child(2){animation-delay:.2s}
.sheet.open .sheet-inner>*:nth-child(3){animation-delay:.28s}
.sheet.open .sheet-inner>*:nth-child(4){animation-delay:.34s}
html.nav-locked,html.nav-locked body{overflow:hidden}

@media (max-width:1060px){
  .nav-links,.nav-call{display:none}
  .nav-burger{display:block}
  .nav-bar{justify-content:space-between}
  .nav .logo.nav-logo{margin-right:auto}
  .nav-mega{display:none}
}
@media (max-width:400px){
  .nav-bar{padding-left:16px}
  .nav-scan{padding:0 14px 0 12px}
}
@media (prefers-reduced-motion:reduce){
  .nav,.nav-mega,.sheet,.nav-burger span{transition:none!important}
  .nav-mega.open .nm-item,.sheet.open .sheet-inner>*,.nav-scan .fz::after{animation:none!important}
}