/* ────────────────────────────────────────────
   Cogua unified nav. Floating glassmorphism pill.
   Mirrors the homepage exactly, lowercased wordmark.
   Self-contained: does not depend on page CSS vars.
   ──────────────────────────────────────────── */

.cogua-nav{position:fixed;top:14px;left:0;right:0;z-index:50}
.cogua-nav-inner{
  width:min(1200px,calc(100% - 36px));margin:0 auto;
  display:flex;justify-content:space-between;align-items:center;
  padding:9px 9px 9px 18px;
  border:1px solid rgba(255,255,255,.55);
  background:rgba(244,238,228,.82);
  backdrop-filter:blur(24px);
  -webkit-backdrop-filter:blur(24px);
  border-radius:999px;
  box-shadow:0 18px 48px rgba(13,17,16,.08);
  transition:background .25s, box-shadow .25s;
}
.cogua-nav.scrolled .cogua-nav-inner{
  background:rgba(244,238,228,.94);
  box-shadow:0 22px 60px rgba(13,17,16,.14);
}
.cogua-brand{
  display:flex;align-items:center;gap:11px;
  font-family:'Avenir Next','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:1.05rem;font-weight:500;letter-spacing:0;
  color:#0D1110;
  text-decoration:none;
  text-transform:none;
}
.cogua-brand-mark{
  width:34px;height:34px;border-radius:50%;
  background:url('/assets/img/coguaportraitsm.jpg') center 30%/cover no-repeat, #0D1110;
  flex-shrink:0;
  box-shadow:0 10px 22px rgba(13,17,16,.18), inset 0 0 0 2px rgba(255,255,255,.5);
}
.cogua-nav-links{
  display:flex;gap:24px;
  font-family:'Avenir Next','Inter','Helvetica Neue',Arial,sans-serif;font-size:12px;font-weight:600;
}
.cogua-nav-links a{color:#6D7770;text-decoration:none;transition:color .15s;letter-spacing:.02em}
.cogua-nav-links a:hover{color:#0D1110}
.cogua-nav-actions{display:flex;gap:8px;align-items:center}
.cogua-btn{
  display:inline-flex;align-items:center;justify-content:center;
  padding:13px 20px;
  border-radius:999px;
  border:1px solid transparent;
  font-family:'Avenir Next','Inter','Helvetica Neue',Arial,sans-serif;
  font-size:12px;font-weight:700;letter-spacing:.02em;
  cursor:pointer;text-decoration:none;
  transition:transform .2s, box-shadow .2s, background .2s;
  white-space:nowrap;
}
.cogua-btn:hover{transform:translateY(-2px)}
.cogua-btn-ghost{
  background:rgba(255,255,255,.55);
  border-color:rgba(13,17,16,.10);
  color:#0D1110;
  backdrop-filter:blur(18px);
  -webkit-backdrop-filter:blur(18px);
}
.cogua-btn-dark{
  background:#0D1110;color:#fff;
  box-shadow:0 12px 28px rgba(13,17,16,.22);
}
.cogua-btn-dark:hover{box-shadow:0 18px 40px rgba(13,17,16,.30)}

/* Mobile toggle */
.cogua-nav-toggle{
  display:none;
  background:none;border:1px solid rgba(13,17,16,.12);
  width:38px;height:38px;border-radius:50%;
  font-size:18px;color:#0D1110;cursor:pointer;
  align-items:center;justify-content:center;
}
.cogua-nav-toggle:hover{background:rgba(13,17,16,.04)}

/* Push page content below the floating nav */
body.has-cogua-nav{padding-top:78px}

/* ────────────────────────────────────────────
   Responsive: tablet
   ──────────────────────────────────────────── */
@media (max-width: 1080px){
  .cogua-nav-links{gap:18px;font-size:11.5px}
  .cogua-btn{padding:11px 16px;font-size:11.5px}
}

/* ────────────────────────────────────────────
   Responsive: mobile
   ──────────────────────────────────────────── */
@media (max-width: 820px){
  .cogua-nav{top:10px}
  .cogua-nav-inner{padding:7px 7px 7px 14px;border-radius:24px}
  .cogua-brand-mark{width:30px;height:30px}
  .cogua-brand{font-size:1rem;gap:9px}
  .cogua-nav-toggle{display:inline-flex}
  .cogua-nav-links{
    position:absolute;top:calc(100% + 8px);left:8px;right:8px;
    flex-direction:column;gap:0;
    background:rgba(244,238,228,.98);
    backdrop-filter:blur(24px);
    -webkit-backdrop-filter:blur(24px);
    border:1px solid rgba(255,255,255,.55);
    border-radius:18px;
    padding:8px;
    box-shadow:0 18px 48px rgba(13,17,16,.12);
    display:none;
  }
  .cogua-nav-links.open{display:flex}
  .cogua-nav-links a{padding:11px 14px;border-radius:10px;font-size:13px}
  .cogua-nav-links a:hover{background:rgba(13,17,16,.05)}
  .cogua-nav-actions .cogua-btn-ghost{display:none}
  body.has-cogua-nav{padding-top:64px}
}

@media (max-width: 420px){
  .cogua-nav-inner{padding:6px 6px 6px 12px}
  .cogua-brand span{display:none}
  .cogua-brand-mark{width:28px;height:28px}
  .cogua-btn{padding:9px 14px;font-size:11px}
}

/* When the floating cogua-nav is present, the body already has padding-top,
   so the legacy .pad-top wrapper becomes a no-op (prevents double padding). */
body.has-cogua-nav .pad-top{padding-top:0}