/* ──────────────────────────────────────────────────────────────────────────
   EcoCloud — unified navigation v4. Premium, modern, unique.
   ONE bar on every page, injected by /assets/opnav.js. A warm-linen frosted-glass
   bar with a signature coral→amber gradient underline, a gradient wordmark, coral
   chip-hover, and an interactive logo (three cloud lines redraw + dots travel).
   Always light (these pages are light). Hardened with a scoped reset + !important
   layout so no page's own CSS can distort it. Bump ?v=N on every edit.
   ────────────────────────────────────────────────────────────────────────── */

/* hide every legacy nav the moment this parses (no flash) */
.opnav, .st-topnav { display: none !important; }

:root{
  --ec-coral:#E9553C; --ec-coral-soft:#F0663F; --ec-coral-deep:#C63C26; --ec-amber:#F2953B;
  --ec-linen:#F8F3EA; --ec-ink:#231D16; --ec-ink2:#5A5142; --ec-ink3:#8C8375;
  --ec-line:rgba(35,29,22,.10); --ec-surface:#FFFDF9;
  --ec-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,monospace;
  --ec-sans:'Inter Tight','Inter',system-ui,-apple-system,'Segoe UI',sans-serif;
}

/* scoped reset — page CSS cannot distort the bar. Neutralize any page rule that
   sets position/float/width on a bare <nav>/<a>/<button> (the homepage does exactly
   this: `nav{position:fixed;width:100%;justify-content:space-between}` was hijacking
   our <nav class="ecnav-nav">). Everything layout-critical is forced with !important. */
.ecnav, .ecnav *{ box-sizing:border-box; margin:0; }
/* the top-level children (brand · nav · spacer · cta · burger) must never be
   positioned/floated/stretched by a page rule — this is what fixes the homepage hijack */
.ecnav > *{ position:static !important; float:none !important; inset:auto !important; }
.ecnav a{ text-decoration:none; }
.ecnav button{ font-family:inherit; }
.ecnav svg{ display:block; }

.ecnav{
  position:sticky; top:0; z-index:960; height:66px;
  display:flex !important; flex-direction:row !important; align-items:center !important;
  justify-content:flex-start !important; gap:clamp(12px,2vw,28px); flex-wrap:nowrap !important;
  padding:0 clamp(16px,4vw,46px); font-family:var(--ec-sans);
  background:
    radial-gradient(120% 180% at 0% 0%, rgba(240,102,63,.05), transparent 42%),
    linear-gradient(180deg, rgba(249,244,236,.90), rgba(248,243,234,.80));
  -webkit-backdrop-filter:saturate(1.6) blur(18px); backdrop-filter:saturate(1.6) blur(18px);
  border-bottom:1px solid var(--ec-line);
  box-shadow:0 1px 0 rgba(255,255,255,.7) inset, 0 10px 30px -22px rgba(35,29,22,.5);
}
/* signature: a soft coral→amber gradient underline that fades at both ends */
.ecnav::after{
  content:""; position:absolute; left:0; right:0; bottom:-1px; height:1.5px; pointer-events:none;
  background:linear-gradient(90deg, transparent, rgba(233,85,60,.55) 22%, rgba(242,149,59,.75) 50%, rgba(233,85,60,.55) 78%, transparent);
}

/* ── logo ── */
.ecnav-brand{ display:inline-flex; align-items:center; gap:10px; flex:0 0 auto; }
.ecnav-brand .opm{ width:32px; height:32px; overflow:visible; }
.ecnav-wm{ font-family:var(--ec-sans); font-weight:640; font-size:20px; letter-spacing:-.03em; color:var(--ec-ink); white-space:nowrap; }
.ecnav-wm b{ font-weight:640; background:linear-gradient(120deg,var(--ec-coral-soft),var(--ec-coral) 55%,var(--ec-coral-deep)); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:var(--ec-coral); }
/* interactive mark: dots pulse at rest; lines redraw + dots slide on hover */
.opm .opm-lines path{ stroke-dasharray:9; stroke-dashoffset:0; transition:stroke-dashoffset .5s cubic-bezier(.6,0,.2,1); }
.opm .opm-dots circle{ transition:transform .5s cubic-bezier(.6,0,.2,1); transform:translateX(0); animation:ecDot 2.6s ease-in-out infinite; }
.opm .opm-dots circle:nth-child(2){ animation-delay:.5s; }
.opm .opm-dots circle:nth-child(3){ animation-delay:1s; }
@keyframes ecDot{ 0%,100%{ opacity:.5; } 50%{ opacity:.92; } }
.ecnav-brand:hover .opm-lines path{ animation:ecDraw .55s cubic-bezier(.6,0,.2,1); }
.ecnav-brand:hover .opm-lines path:nth-child(2){ animation-delay:.08s; }
.ecnav-brand:hover .opm-lines path:nth-child(3){ animation-delay:.16s; }
@keyframes ecDraw{ from{ stroke-dashoffset:9; } to{ stroke-dashoffset:0; } }
.ecnav-brand:hover .opm-dots circle{ transform:translateX(2.4px); }

/* ── link row ── */
.ecnav-nav{ display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:flex-start !important; gap:3px; flex-wrap:nowrap !important; margin-left:4px; width:auto !important; height:auto !important; flex:0 1 auto !important; }
/* re-assert positioning the dropdowns + underline accents need (the direct-child
   reset above only touches .ecnav > *, but be explicit so no page rule wins) */
.ecnav-item{ position:relative !important; }
.ecnav-trigger, .ecnav-link{ position:relative !important; }
.ecnav-mega{ position:absolute !important; }
.ecnav-trigger{
  appearance:none; background:none; border:0; cursor:pointer; position:relative;
  display:inline-flex; align-items:center; gap:5px; padding:8px 14px; border-radius:11px;
  color:var(--ec-ink2); font-size:14.5px; font-weight:520; letter-spacing:-.008em; white-space:nowrap;
  transition:color .16s ease, background .16s ease;
}
.ecnav-link{
  position:relative; color:var(--ec-ink2); font-size:14.5px; font-weight:520; letter-spacing:-.008em;
  padding:8px 14px; border-radius:11px; white-space:nowrap; transition:color .16s ease, background .16s ease;
}
/* coral chip hover */
.ecnav-trigger:hover, .ecnav-item:hover .ecnav-trigger, .ecnav-trigger[aria-expanded="true"],
.ecnav-link:hover{ color:var(--ec-ink); background:color-mix(in srgb, var(--ec-coral) 11%, transparent); }
/* + a coral underline that grows from the centre */
.ecnav-trigger::after, .ecnav-link::after{ content:""; position:absolute; left:14px; right:14px; bottom:5px; height:1.5px; border-radius:2px; background:linear-gradient(90deg,var(--ec-coral),var(--ec-amber)); transform:scaleX(0); transform-origin:center; transition:transform .22s cubic-bezier(.5,0,.2,1); }
.ecnav-item:hover .ecnav-trigger::after, .ecnav-trigger[aria-expanded="true"]::after, .ecnav-link:hover::after{ transform:scaleX(1); }
.ecnav-trigger .ec-caret{ width:9px; height:9px; opacity:.5; transition:transform .2s; }
.ecnav-item:hover .ecnav-trigger .ec-caret{ transform:rotate(180deg); }
.ecnav-item{ position:relative; }
.ecnav-link[aria-current="page"]{ color:var(--ec-coral-deep); background:color-mix(in srgb, var(--ec-coral) 9%, transparent); }

/* ── mega dropdown ── */
.ecnav-mega{
  position:absolute; top:calc(100% + 12px); left:0; min-width:312px;
  background:var(--ec-surface); border:1px solid var(--ec-line); border-radius:18px;
  box-shadow:0 1px 2px rgba(35,29,22,.05), 0 34px 60px -28px rgba(35,29,22,.4);
  padding:9px; opacity:0; visibility:hidden; transform:translateY(-8px) scale(.98);
  transform-origin:top left; transition:opacity .2s, transform .2s, visibility .2s;
}
.ecnav-mega::before{ content:""; position:absolute; top:-14px; left:24px; width:14px; height:14px; background:var(--ec-surface); border-left:1px solid var(--ec-line); border-top:1px solid var(--ec-line); transform:rotate(45deg); border-radius:3px 0 0 0; }
.ecnav-item:hover .ecnav-mega, .ecnav-item:focus-within .ecnav-mega{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
.ecnav-mi{ display:flex; align-items:flex-start; gap:11px; padding:10px 12px; border-radius:12px; transition:background .14s; }
.ecnav-mi:hover{ background:color-mix(in srgb, var(--ec-coral) 9%, transparent); }
.ecnav-mi .ec-ic{ flex:0 0 auto; width:34px; height:34px; display:grid; place-items:center; border-radius:10px; color:var(--ec-coral); background:color-mix(in srgb, var(--ec-coral) 11%, transparent); border:1px solid color-mix(in srgb, var(--ec-coral) 20%, transparent); }
.ecnav-mi .ec-ic svg{ width:16px; height:16px; }
.ecnav-mi .ec-t{ display:block; font-size:13.5px; font-weight:600; color:var(--ec-ink); letter-spacing:-.01em; }
.ecnav-mi .ec-d{ display:block; font-size:11.8px; color:var(--ec-ink3); margin-top:1px; line-height:1.35; }

.ecnav-spacer{ flex:1 1 auto; min-width:8px; }
.ecnav-cta{
  flex:0 0 auto; font-weight:600; font-size:14px; color:#fff; white-space:nowrap;
  padding:10px 19px; border-radius:12px; letter-spacing:-.005em;
  background:linear-gradient(135deg,var(--ec-coral-soft),var(--ec-coral) 52%,var(--ec-coral-deep));
  box-shadow:0 8px 20px -8px color-mix(in srgb, var(--ec-coral) 62%, transparent), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .16s, box-shadow .16s;
}
.ecnav-cta:hover{ transform:translateY(-1.5px); box-shadow:0 14px 28px -8px color-mix(in srgb, var(--ec-coral) 72%, transparent), inset 0 1px 0 rgba(255,255,255,.3); }

.ecnav-burger{ display:none; }

/* ── mobile ── */
@media (max-width:940px){
  .ecnav-nav, .ecnav-cta{ display:none; }
  .ecnav{ gap:12px; }
  .ecnav-burger{ display:inline-grid; place-items:center; margin-left:auto; width:42px; height:42px; border:1px solid var(--ec-line); border-radius:12px; background:var(--ec-surface); cursor:pointer; color:var(--ec-ink); }
  .ecnav-burger svg{ width:18px; height:18px; }
  .ecnav.ec-open .ecnav-nav{
    display:flex; flex-direction:column; align-items:stretch; gap:2px;
    position:fixed; top:66px; left:0; right:0; bottom:0; overflow-y:auto;
    background:var(--ec-linen); padding:16px clamp(16px,5vw,28px); border-top:1px solid var(--ec-line);
  }
  .ecnav.ec-open .ecnav-cta{ display:block; position:fixed; left:16px; right:16px; bottom:16px; text-align:center; }
  .ecnav-item{ position:static; }
  .ecnav-mega{ position:static; opacity:1; visibility:visible; transform:none; box-shadow:none; border:0; padding:2px 0 8px 8px; min-width:0; max-height:0; overflow:hidden; transition:max-height .28s ease; }
  .ecnav-mega::before{ display:none; }
  .ecnav-item.ec-mopen .ecnav-mega{ max-height:700px; }
  .ecnav-trigger, .ecnav-link{ width:100%; justify-content:space-between; font-size:16px; padding:13px 6px; }
}

@media (prefers-reduced-motion:reduce){
  .opm .opm-dots circle{ animation:none; }
  .ecnav-brand:hover .opm-lines path{ animation:none; stroke-dashoffset:0; }
  .ecnav-cta:hover{ transform:none; }
}