/* ==========================================================================
   Navigation component (components/nav.css): the one nav of every page.
   Markup: components/nav.html, rendered per page by tools/build.py from the "nav" settings in tools/pages.json.
   Base = the home variant. Live source: desktop container framer-1cr22z8 (fixed) holding component mbkBz
   ("ID EN - Default - Desktop - See Plans" and its For Business / For Homes / Technology variants),
   language overlay framer-1slx8hz (fixed portal, z 11),
   tablet + phone containers framer-178asbv / framer-wiv8oa (fixed, z 10) holding component HHhjX
   ("ID EN - See Plans - Default" / "- Open"), accordion items jTV0q, sub links l7gqx.
   The absolute "Global - Default - Mobile - See Plans" bar at top:-272px (framer-xzeoch) is never
   visible to a visitor and is not rebuilt.
   Variants (bottom of this file): .nf-nav--assessment ("Request an Assessment", business / ecoflow),
   .nf-nav--from-1280 (desktop bar from 1280), .nf-nav__tbar (business), .nf-nav--global ("Global", testimonials).
   The desktop bar z-index comes from the desktop_z setting (--nf-nav-desk-z; live: home 3, most pages 2, business 10).
   ========================================================================== */

.nf-nav {
  display: contents;
  /* Framer transitions, measured and read from the live bundle */
  /* spring { bounce: .2, duration: .4 } == stiffness 505.6, damping 35.98 (settles in .38s) */
  --nf-nav-spring: linear(0, 0.0203, 0.0725, 0.1453, 0.2299, 0.3197, 0.4097, 0.4963, 0.5773, 0.6511, 0.717, 0.7747, 0.8244, 0.8664, 0.9014, 0.9301, 0.9532, 0.9714, 0.9854, 0.9959, 1.0036, 1.0089, 1.0123, 1.0142, 1.0151, 1.0151, 1.0145, 1.0136, 1.0123, 1.011, 1.0096, 1.0083, 1.007, 1.0058, 1.0048, 1.0038, 1.003, 1.0023, 1.0018, 1.0013, 1);
  /* the same spring clamped at 1: Framer clamps colour mixing, so a colour on the spring does not overshoot */
  --nf-nav-spring-clamped: linear(0, 0.0203, 0.0725, 0.1453, 0.2299, 0.3197, 0.4097, 0.4963, 0.5773, 0.6511, 0.717, 0.7747, 0.8244, 0.8664, 0.9014, 0.9301, 0.9532, 0.9714, 0.9854, 0.9959, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1, 1);
  --nf-nav-spring-dur: 0.38s;
  /* spring { stiffness: 300, damping: 30, mass: 1 } (settles in .5s): load fade-in and scroll hide/show */
  --nf-nav-spring-b: linear(0, 0.0215, 0.0756, 0.1498, 0.2348, 0.3236, 0.4115, 0.4953, 0.5727, 0.6428, 0.7051, 0.7594, 0.8062, 0.8459, 0.8793, 0.9069, 0.9295, 0.9477, 0.9623, 0.9737, 0.9826, 0.9894, 0.9944, 0.9981, 1.0007, 1.0024, 1.0035, 1.0041, 1.0043, 1.0043, 1.0041, 1.0038, 1.0035, 1.0031, 1.0027, 1.0023, 1.002, 1.0017, 1.0014, 1.0011, 1);
  --nf-nav-spring-b-dur: 0.5s;
  /* tween { duration: .4, ease: [.44, 0, .56, 1] }: bar background and chevrons */
  --nf-nav-tween: cubic-bezier(0.44, 0, 0.56, 1);
  /* tween { duration: .6, ease: [.25, 1, .5, 1] }: mega menu height when switching menus */
  --nf-nav-out: cubic-bezier(0.25, 1, 0.5, 1);
}

.nf-nav h6, .nf-nav p { margin: 0; }

/* Shared green pill (Framer button j74DL, variant "Tier 1 - Eng - Mobile") */
.nf-nav__pill {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 5px;
  flex: none; width: min-content; max-height: 35px; padding: 16px;
  background-color: var(--nf-green); border-radius: 32px; cursor: pointer;
  color: rgb(0, 0, 238); /* Framer leaves the anchor colour at the UA default; only the label is styled */
  transition: background-color var(--nf-nav-spring-dur) var(--nf-nav-spring-clamped);
}
/* Pressed (Framer whileTap): #91c851 to rgb(165, 207, 118) on the nav spring both ways; it returns as soon as the
   pointer leaves, even while still held, and does not come back on re-entry (Chrome keeps :hover:active while the
   button is held, so js/00-nav.js sets .is-pressed). Hover alone changes nothing. Measured on live home,
   residential, how-it-works, business and EcoFlow: bar, mega menus and tablet/phone menu pills. */
.nf-nav__pill.is-pressed { background-color: rgb(165, 207, 118); }
.nf-nav__pill p {
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 15px; line-height: 18px; letter-spacing: normal;
  color: var(--nf-black); white-space: pre;
}

/* Sign In link (Framer kJmbO "Link - Idle"; its hover variant has no visible change) */
.nf-nav__signin { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px; cursor: pointer; }
.nf-nav__signin h6 {
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: normal;
  color: var(--nf-white); white-space: pre; text-align: left;
}

.nf-nav [tabindex]:focus-visible, .nf-nav a:focus-visible, .nf-nav button:focus-visible { outline: 2px solid var(--nf-green); outline-offset: 2px; }

/* ---------- Desktop (>= 1440) ---------- */
.nf-nav__desk {
  position: fixed; top: 0; left: 0; right: 0; z-index: var(--nf-nav-desk-z, 3);
  width: 100%; height: 80px;
  opacity: 0;
}
.nf-nav.is-loaded .nf-nav__desk { opacity: 1; transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b); }

.nf-nav__bar {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 40px;
  width: 100%; height: 80px; padding: 0 70px;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background-color 0.4s var(--nf-nav-tween), opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b);
}
.nf-nav__bar::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-bottom: 0.5px solid var(--nf-green);
}
.nf-nav__bar:not([data-state="default"]) { background-color: var(--nf-black); }
.nf-nav.is-away .nf-nav__bar { opacity: 0; }

.nf-nav__wrap {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  flex: 1 0 0; width: 1px;
}
.nf-nav__left {
  position: relative; z-index: 1;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 40px;
  flex: 1 0 0; width: 1px;
}
.nf-nav__logo, .nf-nav__mlogo {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 10px;
  flex: none; height: 27px; cursor: pointer;
}
.nf-nav__logo img, .nf-nav__mlogo img {
  display: block; height: 100%; width: auto; aspect-ratio: 3.34768 / 1;
  object-fit: cover; object-position: 50% 50%;
}

.nf-nav__menu { display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 24px; flex: none; }
.nf-nav__trigger, .nf-nav__item {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 6px;
  height: 24px; overflow: clip; flex: none;
}
.nf-nav__label {
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 16px; line-height: 24px; letter-spacing: normal;
  color: var(--nf-white); white-space: pre; text-align: left; user-select: none;
}
.nf-nav__link { color: var(--nf-white); cursor: pointer; }
@media (hover: hover) { .nf-nav__link:hover { color: var(--nf-green); } }

.nf-nav__chev { display: block; flex: none; width: 24px; height: 24px; overflow: hidden; transition: transform 0.4s var(--nf-nav-tween); }
.nf-nav__chev path { fill: transparent; stroke: var(--nf-white); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.nf-nav__trigger.is-active .nf-nav__chev { transform: rotate(180deg); }
.nf-nav__bar.is-snap .nf-nav__chev { transition: none; }

.nf-nav__right-col {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  flex: 1 0 0; width: 1px;
}
.nf-nav__right {
  display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 12px;
  width: 100%; overflow: hidden;
}
.nf-nav__buttons { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 24px; flex: none; }

/* Language pill wrapper (Framer Ald0m "ID - EN") */
.nf-nav__lang-wrap { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; flex: none; border-radius: 80px; }

/* Language pill (Framer RmQ6V): the 16x64 column holds a globe above the flag and slides down on hover */
.nf-nav__lang {
  position: relative; flex: none;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 4px;
  height: 40px; padding: 12px 18px; border-radius: 80px; overflow: clip; cursor: pointer;
}
.nf-nav__flags {
  position: absolute; top: -36px; left: 18px; width: 16px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  overflow: hidden;
  transition: top var(--nf-nav-spring-dur) var(--nf-nav-spring);
}
.nf-nav__lang:hover .nf-nav__flags { top: 13px; }
.nf-nav__globe { display: block; flex: none; width: 16px; height: 16px; fill: var(--nf-white); }
.nf-nav__flag { display: block; flex: none; width: 16px; height: 16px; object-fit: contain; }
.nf-nav__lang-text { display: flex; flex-direction: row; align-items: center; padding: 2px 0 0 24px; }
.nf-nav__lang-text p {
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 14px; line-height: 14px; letter-spacing: -0.35px;
  color: var(--nf-white); white-space: pre; user-select: none;
}
.nf-nav__lang-chev { display: block; flex: none; width: 14px; height: 14px; transform: rotate(90deg); fill: var(--nf-white); }

/* Mega menu (Framer "Mega Menu" + "Overlay Blur"): shown only while a menu variant is active */
.nf-nav__mega {
  position: absolute; top: 80px; left: 0; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: center; gap: 32px;
  width: 100%; padding: 32px 48px;
  background-color: var(--nf-black); overflow: clip;
}
.nf-nav__bar:not([data-state="default"]) .nf-nav__mega { display: flex; }
.nf-nav__panel {
  position: relative; z-index: 5;
  display: none; flex-direction: row; align-items: center; justify-content: center; gap: 48px;
  width: 100%;
}
.nf-nav__panel[data-panel="technology"] { gap: 30px; }
.nf-nav__bar[data-state="business"] [data-panel="business"],
.nf-nav__bar[data-state="homes"] [data-panel="homes"],
.nf-nav__bar[data-state="technology"] [data-panel="technology"] { display: flex; }
.nf-nav__cols { display: flex; flex-direction: row; align-items: flex-start; justify-content: flex-start; gap: 30px; flex: 1 0 0; width: 1px; }
.nf-nav__col {
  display: flex; flex-direction: column; align-items: flex-start; justify-content: center; gap: 10px;
  flex: 1 0 0; width: 1px;
}
.nf-nav__col--empty { gap: 0; min-height: 52px; justify-content: flex-start; }
/* For Business right column: Healthy Building Assessment (Danny, 2026-10-28); the hidden heading copy keeps its row level with Business Solution */
.nf-nav__col--side { justify-content: flex-start; }
.nf-nav__head--spacer { visibility: hidden; }

.nf-nav__head { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; width: 100%; padding: 0 14px; }
.nf-nav__head-title {
  width: 100%;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: 14px; line-height: 16.8px; letter-spacing: normal;
  color: var(--nf-grey-9e); text-transform: uppercase; white-space: pre-wrap;
}
.nf-nav__head-desc {
  display: flow-root; width: 100%; overflow: clip;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 12px; line-height: 14.4px; letter-spacing: normal;
  color: var(--nf-grey-9e); white-space: pre-line;
}
.nf-nav__list { display: flex; flex-direction: column; align-items: flex-start; gap: 0; width: 100%; }
.nf-nav__mitem {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px;
  width: 100%; padding: 14px;
  background-color: rgba(0, 0, 0, 0); cursor: pointer;
  transition: background-color var(--nf-nav-spring-dur) var(--nf-nav-spring);
}
.nf-nav__mitem--line::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-bottom: 1px solid var(--nf-grey-61); }
@media (hover: hover) { .nf-nav__mitem:hover { background-color: rgb(40, 40, 40); } }
.nf-nav__mrow { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; }
.nf-nav__mtitle {
  display: block; flex: 1 0 0; width: 1px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 16px; line-height: 19.2px; letter-spacing: normal;
  color: var(--nf-white); white-space: pre-wrap;
}
.nf-nav__arrow { display: block; flex: none; width: 18px; height: 18px; overflow: hidden; }
.nf-nav__arrow path { fill: transparent; stroke: var(--nf-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-nav__mdesc {
  display: flow-root; width: 100%; overflow: clip;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 14px; line-height: 16.8px; letter-spacing: normal;
  color: var(--nf-grey-9e); white-space: pre-line;
}
.nf-nav__mbuttons { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 10px; width: min-content; }

.nf-nav__overlay {
  position: absolute; top: 0; left: 0; z-index: 0;
  display: none; width: 100%; height: 100vh;
  background-color: rgba(31, 26, 26, 0.5); overflow: clip; cursor: pointer; user-select: none;
}
.nf-nav__bar:not([data-state="default"]) .nf-nav__overlay { display: block; }

/* Region and language dropdown (Framer overlay: placement bottom, centre, offset 62.67 / 9.5, collision padding 20) */
.nf-nav__langpanel {
  position: fixed; top: 69.484px; left: 1057.39px; z-index: 11;
  width: 307px; height: 320px;
  opacity: 0; visibility: hidden; pointer-events: none;
  transition: opacity var(--nf-nav-spring-dur) var(--nf-nav-spring), visibility 0s linear var(--nf-nav-spring-dur);
}
.nf-nav__langpanel.is-open {
  opacity: 1; visibility: visible; pointer-events: auto;
  transition: opacity var(--nf-nav-spring-dur) var(--nf-nav-spring), visibility 0s;
}
/* hover bridge across the 9.5px gap between pill and panel (Framer "safeArea") */
.nf-nav__langpanel::before { content: ""; position: absolute; left: 0; right: 0; bottom: 100%; height: 10px; }
.nf-nav__langbox {
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 0;
  width: 100%; height: 100%;
  background-color: var(--nf-white); border-radius: 20px; box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0; overflow: clip;
}
.nf-nav__regions {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; height: 100%;
  background-color: rgba(255, 255, 255, 0.3); border-radius: 0 0 20px 20px; box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0;
}
.nf-nav__regions::after {
  content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit;
  border-style: solid; border-color: var(--nf-green); border-width: 0 0.8px 0.8px 0.8px;
}
.nf-nav__region {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 16px;
  flex: none; width: 100%; height: 64px; padding: 20px 30px; overflow: hidden; cursor: pointer;
  color: rgb(0, 0, 238); /* UA anchor colour, as on live; it only tints the dot's zero-width border */
}
.nf-nav__region::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-radius: inherit; border-bottom: 0.8px solid var(--nf-green); }
.nf-nav__region--first { border-radius: 20px 20px 0 0; }
.nf-nav__region--first::after { border: 0.8px solid var(--nf-green); }
.nf-nav__region--global { border-radius: 15px; }
.nf-nav__region--global::after { display: none; }
.nf-nav__rflag { display: block; flex: none; width: 20px; height: 20px; object-fit: cover; }
.nf-nav__rflag--contain { object-fit: contain; }
/* the hover target is Framer's text component: label plus a 10px gap */
.nf-nav__rtext { display: flex; flex: none; padding-right: 10px; }
.nf-nav__rname {
  flex: none;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: 16px; line-height: 24px; letter-spacing: normal;
  color: var(--nf-black); white-space: pre; text-align: left;
  transition: color var(--nf-nav-spring-dur) var(--nf-nav-spring);
}
.nf-nav__rglobal { display: flex; flex-direction: row; align-items: center; gap: 10px; padding-right: 10px; }
.nf-nav__rglobal svg { display: block; flex: none; width: 16px; height: 16px; overflow: hidden; }
.nf-nav__rglobal path { fill: var(--nf-black); }
@media (hover: hover) {
  .nf-nav__rtext:hover .nf-nav__rname, .nf-nav__rglobal:hover .nf-nav__rname { color: var(--nf-green); }
}
/* Current-region dot: in flow right after the label's 10px hover padding (the row gap is cancelled), so it sits 10px
   after every label. Live places it at a fixed x (207 / 193), measured on id-en "Indonesia - English" (label end + 10);
   at a fixed x it covered the longer "Indonesia - Bahasa Indonesia" and "United Arab Emirates - English" labels and
   floated after "Qatar - English" (Danny 2026-10-27). */
.nf-nav__dot {
  position: relative; z-index: 1; flex: none; margin-left: -16px;
  width: 12px; height: 12px; background-color: var(--nf-green); border-radius: 100px;
  box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0; overflow: clip;
}
/* the open-menu variants of the live component use tighter region rows (padding 20px 16px, gap 15px: label at x 51) */
.nf-nav[data-menu]:not([data-menu="default"]) .nf-nav__region { padding: 20px 16px; gap: 15px; }
.nf-nav[data-menu]:not([data-menu="default"]) .nf-nav__dot { margin-left: -15px; }

/* ---------- Tablet and phone (< 1440): one fluid component ---------- */
.nf-nav__mob {
  position: fixed; top: 0; left: 0; z-index: 10;
  width: 100%;
  opacity: 0;
}
.nf-nav.is-loaded .nf-nav__mob { opacity: 1; transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b); }

.nf-nav__mbar {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  cursor: pointer;
  transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b);
}
.nf-nav.is-away .nf-nav__mbar { opacity: 0; }
.nf-nav__mbar.is-closing, .nf-nav__mbar.is-opening { transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b), height var(--nf-nav-spring-dur) var(--nf-nav-spring); }
/* Opening (live: the bar grows 83 to 466 on the nav spring, peak ~471.7 at ~.25s): the menu content is shown at full
   size at once and overflows the growing bar, as Framer's scale-corrected layout animation draws it. */
.nf-nav__mbar.is-opening { justify-content: flex-start; }
.nf-nav__mbar.is-opening > .nf-nav__mwrap, .nf-nav__mbar.is-opening > .nf-nav__mmenu { flex-shrink: 0; }

.nf-nav__mwrap {
  position: relative; z-index: 2;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  width: 100%; padding: 24px 20px;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color var(--nf-nav-spring-dur) var(--nf-nav-spring);
}
.nf-nav__mwrap::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  border-bottom: 1px solid var(--nf-green);
  transition: border-color var(--nf-nav-spring-dur) var(--nf-nav-spring);
}
.nf-nav__mbar.is-open .nf-nav__mwrap { background-color: var(--nf-black); }
.nf-nav__mbar.is-open .nf-nav__mwrap::after { border-color: var(--nf-black); }

.nf-nav__mright { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px; flex: 1 0 0; width: 1px; }
.nf-nav__burger {
  all: unset; box-sizing: border-box;
  position: relative; z-index: 1; flex: none;
  display: block; width: 32px; height: 32px; overflow: hidden; cursor: pointer;
}
.nf-nav__line {
  position: absolute; left: calc(48.2759% - 12.5px);
  width: 25px; height: 2px; background-color: var(--nf-white); border-radius: 10px; overflow: hidden;
}
.nf-nav__mbar.is-open .nf-nav__line--top, .nf-nav__mbar.is-open .nf-nav__line--bottom { border-radius: 40% / 500%; }
.nf-nav__line--top { top: 7px; }
.nf-nav__line--mid { top: calc(50% - 1px); }
.nf-nav__line--bottom { bottom: 7px; }
.nf-nav__mbar.is-open .nf-nav__line { left: calc(50% - 12.5px); }
.nf-nav__mbar.is-open .nf-nav__line--top { top: 15px; transform: rotate(45deg); }
.nf-nav__mbar.is-open .nf-nav__line--bottom { bottom: 15px; transform: rotate(-45deg); }
.nf-nav__mbar.is-open .nf-nav__line--mid { width: 2px; height: 2px; left: calc(50% - 1px); }

.nf-nav__mmenu {
  position: relative; z-index: 1;
  display: none; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px;
  width: 100%; background-color: var(--nf-black); overflow: auto;
}
.nf-nav__mbar.is-open .nf-nav__mmenu { display: flex; }
.nf-nav__mcol { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0; width: 100%; padding: 16px 20px; }
.nf-nav__mback {
  position: absolute; top: 0; bottom: -717px; left: 0; right: 0; z-index: 0;
  display: none; background-color: var(--nf-black); overflow: auto;
}
.nf-nav__mbar.is-open .nf-nav__mback { display: block; }

/* Accordion rows (Framer jTV0q) */
.nf-nav__acc {
  position: relative;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 12px;
  width: 100%; padding: 16px 0; cursor: pointer;
}
/* Accordion animation, measured per frame on live: the row box resizes with the component's layout tween
   { duration: .6, ease: [.25, 1, .5, 1] }, so the rows below and the menu move on it, while the row's own bottom
   rule moves on the nav spring (Framer scales the row on its spring: ~1.8px overshoot, settled in ~.35s).
   The content shows / hides at once and is not clipped while the row resizes. js/00-nav.js sets --nf-nav-acc-line. */
.nf-nav__acc.is-animating { transition: height 0.6s var(--nf-nav-out); }
.nf-nav__acc.is-animating::after { bottom: auto; height: var(--nf-nav-acc-line); transition: height var(--nf-nav-spring-dur) var(--nf-nav-spring); }
.nf-nav__acc::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-bottom: 1px solid var(--nf-grey-61); }
.nf-nav__acc--last::after { display: none; }
.nf-nav__acc-title { display: flex; flex-direction: row; align-items: center; justify-content: space-between; width: 100%; outline-offset: 4px; }
.nf-nav__acc-title p {
  flex: 1 0 0; width: 1px;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 16px; line-height: 19.2px; letter-spacing: normal;
  color: var(--nf-white); white-space: pre-wrap; user-select: none;
}
.nf-nav__acc-icon { display: block; flex: none; width: 18px; height: 18px; overflow: hidden; }
.nf-nav__acc-icon path { fill: transparent; stroke: var(--nf-white); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.nf-nav__acc.is-open .nf-nav__acc-vbar { display: none; }
.nf-nav__acc-menu { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 8px; width: 100%; }
.nf-nav__acc.is-open .nf-nav__acc-menu { display: flex; }
.nf-nav__acc-desc { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 6px; width: 100%; }
.nf-nav__acc-head {
  width: 100%;
  font-family: var(--nf-font-medium); font-weight: 500; font-size: 14px; line-height: 16.8px; letter-spacing: normal;
  color: var(--nf-grey-9e); text-transform: uppercase; white-space: pre-wrap;
}
.nf-nav__acc-text {
  display: flow-root; width: 100%; overflow: clip;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 12px; line-height: 14.4px; letter-spacing: normal;
  color: var(--nf-grey-9e); white-space: pre-line;
}
.nf-nav__acc-items { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 0; width: 100%; }

/* Sub links (Framer l7gqx): 2px grey rule on the left */
.nf-nav__sub {
  position: relative;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  width: 100%; padding: 10px; overflow: clip; cursor: pointer;
}
.nf-nav__sub::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-left: 2px solid var(--nf-grey-61); }
.nf-nav__sub-title {
  width: 100%;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 14px; line-height: 16.8px; letter-spacing: normal;
  color: var(--nf-white); white-space: pre-wrap;
}
.nf-nav__sub-desc {
  display: flow-root; width: 100%; overflow: clip;
  font-family: var(--nf-font-regular); font-weight: 400; font-size: 12px; line-height: 14.4px; letter-spacing: normal;
  color: var(--nf-grey-61); white-space: pre-line;
}
.nf-nav__sub--region { flex-direction: row; justify-content: flex-start; }
.nf-nav__sub--region img { display: block; flex: none; width: 20px; height: 20px; object-fit: cover; }
.nf-nav__sub--region img.nf-nav__contain { object-fit: contain; }
.nf-nav__sub--region .nf-nav__sub-title { width: auto; flex: none; white-space: pre; }
.nf-nav__sub--global svg { display: block; flex: none; width: 16px; height: 16px; overflow: hidden; }
.nf-nav__sub--global path { fill: var(--nf-white); }
.nf-nav__mdot {
  display: block; flex: none; width: 12px; height: 12px;
  background-color: var(--nf-green); border-radius: 100px; box-shadow: rgba(0, 0, 0, 0.05) 0 10px 20px 0; overflow: clip;
}

.nf-nav__mbtns { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 16px; width: min-content; padding: 20px 0 0; }
.nf-nav__signin--menu { align-self: stretch; }


/* ==========================================================================
   Variants
   ========================================================================== */

/* ---------- "Request an Assessment" variant (business, ecoflow; live component mbkBz / HHhjX "... Request an Assessment") ---------- */
/* every state uses the tighter region rows (padding 20/16, gap 15); the dot follows the label (see .nf-nav__dot) */
.nf-nav--assessment .nf-nav__region { padding: 20px 16px; gap: 15px; }
.nf-nav--assessment .nf-nav__dot { margin-left: -15px; }
/* tablet/phone bar centred like live (left 50%, translateX(-50%)): at odd widths it sits on a half pixel, as on live */
.nf-nav--assessment .nf-nav__mob { left: 50%; transform: translateX(-50%); }

/* ---------- Desktop bar from 1280 (business, ecoflow): tablet 810 to 1279.98, phone <= 809.98 ---------- */
@media (max-width: 1279.98px) { .nf-nav--from-1280 .nf-nav__desk, .nf-nav--from-1280 .nf-nav__langpanel { display: none !important; } }
@media (min-width: 1280px) { .nf-nav--from-1280 .nf-nav__mob { display: none !important; } }

/* ---------- Tablet under-bar (business only, tablet_underbar): the desktop container's mobile variant, 810 to 1279.98 ---------- */
.nf-nav__tbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 10;
  width: 100%; height: 80px;
  opacity: 0; pointer-events: none;
}
.nf-nav.is-loaded .nf-nav__tbar { opacity: 1; transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b); }
.nf-nav__tinner {
  position: relative;
  display: flex; flex-direction: row; align-items: center; justify-content: center; gap: 40px;
  width: 100%; height: 80px; overflow: hidden;
  background-color: rgba(0, 0, 0, 0.4);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: opacity var(--nf-nav-spring-b-dur) var(--nf-nav-spring-b);
}
.nf-nav__tinner::after { content: ""; position: absolute; inset: 0; pointer-events: none; border-bottom: 1px solid var(--nf-green); }
.nf-nav.is-away .nf-nav__tinner { opacity: 0; }
.nf-nav__twrap {
  position: relative; z-index: 2; flex: 1 0 0; width: 1px;
  display: flex; flex-direction: row; align-items: center; justify-content: space-between;
  padding: 24px 20px;
}
.nf-nav__tleft { position: relative; z-index: 1; display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: 40px; flex: 1 0 0; width: 1px; }
.nf-nav__tright { display: flex; flex-direction: row; align-items: center; justify-content: flex-end; gap: 16px; flex: none; }
.nf-nav__tburger { position: relative; z-index: 1; display: block; flex: none; width: 32px; height: 32px; overflow: hidden; }
@media (min-width: 1280px), (max-width: 809.98px) { .nf-nav__tbar { display: none !important; } }

/* ---------- "Global" variant (testimonials-elodie; live mbkBz "Global - Default - Desktop - See Plans",
   HHhjX "Global - See Plans - Default") ---------- */
/* Region pill, Framer RmQ6V variant "global": globe only, vertically centred (top 50%, translateY(-50%)),
   no hover slide, cursor unset (live computed: auto). Hovering it still opens the region panel. */
.nf-nav__lang--global { cursor: auto; }
.nf-nav__lang--global .nf-nav__flags,
.nf-nav__lang--global:hover .nf-nav__flags { top: 50%; transform: translateY(-50%); }
/* Region panel: every state uses the tight rows (padding 20px 16px, gap 15px);
   the Global row has gap 0 and carries the current-region dot in flow after its label. */
.nf-nav--global .nf-nav__region { gap: 15px; padding: 20px 16px; }
.nf-nav--global .nf-nav__region--global { gap: 0; }
.nf-nav--global .nf-nav__dot { margin-left: -15px; }
.nf-nav--global .nf-nav__region--global .nf-nav__dot { margin-left: 0; }
/* Tablet/phone open menu: the Global "Open" variant has no top padding on the menu column (bar 450 tall, not 466) */
.nf-nav--global .nf-nav__mcol { padding: 0 20px 16px; }