/* ──────────────────────────────────────────────────────────────────────────
   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:#65594A;
  --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:'Fraunces',Georgia,serif; font-weight:500; font-size:23px; letter-spacing:-.021em; 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{ background:transparent !important; backdrop-filter:none !important; -webkit-backdrop-filter:none !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;
}
/* ── THE GLIDE ───────────────────────────────────────────────────────────────────────────────────
   One shared pill that TRAVELS to whatever you are pointing at, instead of every tab lighting its
   own background. Two reasons it reads as more expensive: the eye tracks a single continuous object
   rather than a row of independent boxes flicking on and off, and the movement gives the nav a sense
   of physical continuity. Purely decorative, so it is aria-hidden and never focusable. */
/* !important is REQUIRED here, matching .ecnav-item / .ecnav-trigger / .ecnav-mega above. The
   hardening reset `.ecnav > *{ position:static !important }` (which exists to stop a page's bare
   `nav{position:fixed}` rule from hijacking the injected row) also flattened THIS rule — so the
   absolutely-positioned pill resolved against `.ecnav` instead, whose backdrop-filter makes it a
   containing block, and it parked on the wordmark at the header's left edge. `relative` keeps the
   row in normal flow, so re-asserting it does not reopen the hijack this reset defends against. */
.ecnav-nav{ position:relative !important; }
.ecnav-glide{
  position:absolute; top:50%; left:0; width:0; height:34px; margin-top:-17px; border-radius:11px;
  pointer-events:none; opacity:0; z-index:0;
  background:
    linear-gradient(180deg, color-mix(in srgb, var(--ec-coral) 15%, transparent), color-mix(in srgb, var(--ec-coral) 9%, transparent));
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.5),
    0 1px 2px -1px color-mix(in srgb, var(--ec-coral) 28%, transparent);
  transition:
    transform .42s cubic-bezier(.32,.72,0,1),
    width .42s cubic-bezier(.32,.72,0,1),
    opacity .22s ease;
}
/* the hairline that rides under the pill, so the travel reads as deliberate rather than a wash */
.ecnav-glide::after{
  content:""; position:absolute; left:11px; right:11px; bottom:-5px; height:1.5px; border-radius:2px;
  background:linear-gradient(90deg, transparent, var(--ec-coral) 22%, var(--ec-amber) 78%, transparent);
  opacity:.9;
}
.ecnav-nav.ec-glide-on .ecnav-glide{ opacity:1; }
/* keep the tabs above the travelling pill */
.ecnav-trigger, .ecnav-link{ z-index:1; }
.ecnav-trigger:hover, .ecnav-item:hover .ecnav-trigger, .ecnav-trigger[aria-expanded="true"],
.ecnav-link:hover{ color:var(--ec-ink); background:transparent; }
/* An open dropdown keeps its own tint — the pill may have travelled away under the pointer, and the
   tab that owns the visible menu must stay visibly the one that owns it. */
.ecnav-trigger[aria-expanded="true"]{ color:var(--ec-coral-deep); }
/* No-JS / reduced-motion fallback: without the pill, tabs need their old affordance back. */
.ecnav-nav:not(.ec-glide-ready) .ecnav-trigger:hover,
.ecnav-nav:not(.ec-glide-ready) .ecnav-item:hover .ecnav-trigger,
.ecnav-nav:not(.ec-glide-ready) .ecnav-link:hover{ background:color-mix(in srgb, var(--ec-coral) 11%, transparent); }
@media (prefers-reduced-motion:reduce){
  .ecnav-glide{ transition:opacity .15s ease; }
}
.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; }
/* ── THE CTA ─────────────────────────────────────────────────────────────────────────────────────
   The one place on the bar allowed to be loud. Four layers do the work, and each is doing a job the
   others cannot: a warmer three-stop gradient for depth; a bright inset top edge so the surface
   reads as lit from above rather than flat-filled; a coloured (not black) drop shadow so it glows
   into the linen instead of dirtying it; and a specular sheen that sweeps once on hover. The sheen
   is the flourish — it is why the button feels like a physical object — so it is kept fast, subtle,
   and strictly one-way; a looping shimmer would cheapen it immediately. */
.ecnav-cta{
  flex:0 0 auto; position:relative; overflow:hidden; isolation:isolate;
  display:inline-flex; align-items:center; gap:7px;
  font-weight:600; font-size:14px; color:#fff; white-space:nowrap;
  padding:10px 18px 10px 20px; border-radius:12px; letter-spacing:-.005em;
  background:linear-gradient(140deg, var(--ec-coral-soft), var(--ec-coral) 46%, var(--ec-coral-deep));
  box-shadow:
    0 1px 1px rgba(120,40,22,.16),
    0 8px 22px -10px color-mix(in srgb, var(--ec-coral) 70%, transparent),
    inset 0 1px 0 rgba(255,255,255,.34),
    inset 0 -1px 0 rgba(120,40,22,.18);
  transition:transform .2s cubic-bezier(.32,.72,0,1), box-shadow .2s ease, filter .2s ease;
}
.ecnav-cta .ec-go{ width:13px; height:13px; flex:none; transition:transform .24s cubic-bezier(.32,.72,0,1); }
/* the sheen — a soft band parked off the left edge until hover sends it across */
.ecnav-cta::before{
  content:""; position:absolute; inset:0; z-index:-1; pointer-events:none;
  background:linear-gradient(105deg, transparent 32%, rgba(255,255,255,.42) 48%, transparent 62%);
  transform:translateX(-120%);
}
.ecnav-cta:hover{
  transform:translateY(-2px);
  filter:saturate(1.06);
  box-shadow:
    0 1px 1px rgba(120,40,22,.18),
    0 16px 34px -12px color-mix(in srgb, var(--ec-coral) 82%, transparent),
    inset 0 1px 0 rgba(255,255,255,.44),
    inset 0 -1px 0 rgba(120,40,22,.2);
}
.ecnav-cta:hover::before{ transform:translateX(120%); transition:transform .72s cubic-bezier(.32,.72,0,1); }
.ecnav-cta:hover .ec-go{ transform:translateX(3px); }
.ecnav-cta:active{ transform:translateY(0); transition-duration:.06s; }
.ecnav-cta:focus-visible{ outline:2px solid var(--ec-coral-deep); outline-offset:3px; }
@media (prefers-reduced-motion:reduce){
  .ecnav-cta, .ecnav-cta .ec-go{ transition:none; }
  .ecnav-cta::before{ display:none; }
  .ecnav-cta:hover{ transform:none; }
}

.ecnav-burger{ display:none; }

/* ── mobile ── */
/* The desktop link row is hardened against page CSS (a bare nav{} rule on some pages used to
   hijack it) — but that hardening may only apply where the row is meant to be visible. Left
   unconditional, its display:flex !important beat the breakpoint below and the mobile nav could
   never collapse: burger AND links, overflowing the screen. */
@media (min-width:941px){ .ecnav-nav{ display:flex !important; } }
@media (max-width:940px){
  .ecnav-nav, .ecnav-cta{ display:none; }
  .ecnav{ gap:12px; }
  /* CRITICAL: the header's backdrop-filter (see .ecnav rule above) makes .ecnav the CONTAINING
     BLOCK for its position:fixed children. Without neutralising it while open, the fixed drawer and
     the fixed bottom CTA resolve against the 66px header box instead of the viewport — the drawer
     collapses to a sliver and the CTA floats near the top. (Same failure the .opnav nav documents.)
     Dropping the filter while open restores the viewport as the containing block; the drawer is
     opaque linen, so nothing visual is lost. */
  .ecnav.ec-open{ -webkit-backdrop-filter:none !important; backdrop-filter:none !important; filter:none !important; }
  .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; }
  /* The open drawer must beat the desktop-layout hardening near the top of this file
     (`.ecnav-nav{ flex-direction:row !important; align-items:center !important; width:auto
     !important; flex:0 1 auto !important }` and `.ecnav-mega{ position:absolute !important }`).
     Those are !important and unconditional, so without !important here the mobile drawer rendered
     as a shrink-wrapped horizontal strip with an absolutely-positioned submenu — i.e. the mobile
     menu never actually stacked. Every layout property the hardening forces is re-forced here for
     the drawer's own controlled context. */
  /* NB: the offsets below MUST be !important. A separate hardening rule near the top of this file,
     `.ecnav > *{ left:auto !important; right:auto !important; top:auto !important; bottom:auto
     !important; position:static !important }`, resets every direct child of the bar to static flow.
     A non-important left/right can never beat that !important auto, so the fixed drawer would
     shrink-wrap to its content width and slide to its static position instead of covering the
     screen. Every offset here is forced. */
  .ecnav.ec-open .ecnav-nav{
    display:flex !important; flex-direction:column !important; align-items:stretch !important; gap:2px !important;
    position:fixed !important; top:66px !important; left:0 !important; right:0 !important; bottom:0 !important;
    width:auto !important; height:auto !important; flex:1 1 auto !important; flex-wrap:nowrap !important;
    margin-left:0 !important; overflow-y:auto;
    /* THESE TWO MUST BE !important, and for the same reason as every offset above. The unconditional
       hardening near the top of this file sets `.ecnav-nav{ background:transparent !important }` for
       the desktop bar. Without !important here that transparent wins, and the mobile drawer renders
       with NO background at all: the menu items sit directly on top of the page content, unreadable,
       on every page of the site. The comment further up ("the drawer is opaque linen, so nothing
       visual is lost") was describing the intent, not the result. */
    background:var(--ec-linen) !important; border-top:1px solid var(--ec-line) !important;
    padding:16px clamp(16px,5vw,28px);
  }
  .ecnav.ec-open .ecnav-cta{ display:block !important; position:fixed !important; left:16px !important; right:16px !important; bottom:16px !important; top:auto !important; text-align:center; }
  .ecnav-item{ position:static !important; }
  .ecnav-mega{ position:static !important; 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; }
}