/* ================================================
   STYLES.CSS — Mission Green Shared Styles
   ================================================ */

/* ── Z-Index Scale (consistent stacking system) ──
   10   Parallax shapes, decorative elements
   50   Sticky compare tabs
   100  Navigation
   200  Mobile menu overlay
   300  Sticky CTA bar
   400  Cookie consent banner
   500  Toast notifications
   600  Exit popup overlay
   700  Skip-to-content focus
   800  Jouli widget (orb, panel)
   900  Jouli concierge hub (first-visit)
── */

/* ── CSS Variables ── */
:root {
  --g: #80D959;
  --gd: #5aaa32;
  --g10: rgba(128, 217, 89, .1);
  --g20: rgba(128, 217, 89, .2);
  --g30: rgba(128, 217, 89, .3);
  --bk: #060606;
  --d1: #0d0d0d;
  --d2: #141414;
  --d3: #1c1c1c;
  --d4: #242424;
  --fh: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --fb: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --ease: cubic-bezier(.22, .68, 0, 1.2);
  --ease2: cubic-bezier(.4, 0, .2, 1);
  --r4: 4px;
  --r8: 8px;
  --r12: 12px;
  --r16: 16px;
  --r20: 20px;
  --r-pill: 999px;            /* canonical pill — use instead of 999px/100px literals */
  /* ── spacing scale (4px grid) — prefer these over magic numbers ──
     section rhythm = --sp-18 (72px); card padding ≈ --sp-4/5; chip gaps = --sp-2 */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px; --sp-5: 20px;
  --sp-6: 24px; --sp-8: 32px; --sp-10: 40px; --sp-12: 48px; --sp-16: 64px;
  --sp-18: 72px; --sp-24: 96px;
  /* ── canonical breakpoints (document; migrate the 560/680/900/1100 outliers over time) ──
     mobile ≤600px · tablet ≤768px · desktop-narrow ≤1024px */
  --gh: #95e46e;
  --glass: rgba(255, 255, 255, .07);
  --glass-border: rgba(255, 255, 255, .14);
  --glass-hover: rgba(255, 255, 255, .11);
  --glass-blur: blur(20px);
  --glass-strong: rgba(255, 255, 255, .10);
  --glass-strong-border: rgba(128, 217, 89, .20);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .08);
  /* ── Semantic foreground tokens (flipped per theme; default = dark) ──
     Use these instead of hardcoding #fff / rgba(255,255,255,.x) so light
     theme is correct automatically and contrast stays AA. */
  --text:        #fff;
  --text-muted:  rgba(255, 255, 255, .6);   /* AA on dark (~7.3:1) */
  --text-faint:  rgba(255, 255, 255, .5);   /* placeholders / fine print */
  --border:      rgba(255, 255, 255, .08);
  --g-text:      var(--g);                    /* green used AS TEXT (bright on dark) */
  --focus:       var(--g);                    /* focus ring */
}

/* ── Reset ── */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; overflow-anchor: none; }
body { font-family: var(--fb); background: var(--bk); color: var(--text); overflow-x: clip; -webkit-font-smoothing: antialiased; }
a { text-decoration: none; color: inherit; }
button { font-family: var(--fb); cursor: pointer; border: none; background: none; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: var(--bk); }
::-webkit-scrollbar-thumb { background: var(--g); border-radius: 2px; }

/* ── Smooth scroll & reduced motion ── */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal, .section-h2, .section-sub { opacity: 1 !important; transform: none !important; }
}

/* ── Accessibility ── */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.sr-only-focusable:focus { position: fixed; top: 8px; left: 8px; z-index: 700; width: auto; height: auto; padding: 12px 20px; margin: 0; overflow: visible; clip: auto; white-space: normal; background: var(--g); color: var(--bk); font-weight: 700; font-size: 14px; border-radius: 4px; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
button:focus:not(:focus-visible), a:focus:not(:focus-visible) { outline: none; }

/* Top Bar removed — dead chrome (rendered on no page). */

/* ── Navigation ── */
nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding: 0 5%;
  height: 72px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background: rgba(6, 6, 6, .8);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border-bottom: 1px solid rgba(255, 255, 255, .05);
  transition: background .3s, box-shadow .3s, border-color .3s, transform .3s;
}
nav.scrolled { background: rgba(6, 6, 6, .7); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-bottom: 1px solid var(--glass-border); box-shadow: 0 4px 30px rgba(0, 0, 0, .4); }
.nav-logo-a { display: flex; align-items: center; gap: 12px; }
.nav-logo-a img { height: 32px; width: auto; }
.nav-sep { width: .5px; height: 26px; background: rgba(255, 255, 255, .15); }
.nla { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.2px; }
.nlb { font-size: 10px; color: var(--text-muted); margin-top: 2px; }
.nav-links { display: flex; align-items: center; gap: 2px; }
.nav-links a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .2s, background .2s;
}
.nav-links a:hover { color: var(--text); background: rgba(255, 255, 255, .06); }
.nav-links a.active { color: var(--g-text); }
.nav-ctas { display: flex; align-items: center; gap: 12px; }
.nav-cta-outline {
  padding: 8px 16px;
  border: 1px solid rgba(128, 217, 89, .3);
  color: var(--g-text);
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  transition: background .2s, border-color .2s;
  white-space: nowrap;
}
.nav-cta-outline:hover { background: rgba(128, 217, 89, .08); border-color: var(--g); }
.nav-cta {
  padding: 8px 18px;
  background: var(--g);
  color: var(--bk);
  font-size: 12px;
  font-weight: 700;
  border-radius: 4px;
  transition: background .15s, transform .15s;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
}
.nav-cta:hover { background: var(--gh); transform: translateY(-1px); }
.nav-cta::after {
  content: '';
  position: absolute;
  top: 50%;
  left: 50%;
  width: 0;
  height: 0;
  background: rgba(255, 255, 255, .15);
  border-radius: 50%;
  transform: translate(-50%, -50%);
  transition: width .5s, height .5s;
}
.nav-cta:hover::after { width: 300px; height: 300px; }
.nav-mob { display: none; flex-direction: column; gap: 5px; padding: 8px; cursor: pointer; }
.nav-mob span { width: 22px; height: 1.5px; background: #fff; display: block; }

/* ── Mobile Menu ── */
.mobile-menu {
  position: fixed;
  inset: 0;
  z-index: 90;
  background: rgba(6, 6, 6, .98);
  display: none;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  gap: 12px;
  padding: 90px 30px 40px;
  overflow-y: auto;
  opacity: 0;
  pointer-events: none;
  transition: opacity .3s;
}
.mobile-menu.open { display: flex; opacity: 1; pointer-events: all; }
.mobile-menu a {
  font-family: var(--fh);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  transition: color .2s;
}
.mobile-menu a:hover { color: var(--g-text); }
.mob-section-label {
  font-size: 12px;
  font-weight: 700;
  color: var(--g-text);
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-top: 16px;
  margin-bottom: -2px;
  width: 100%;
  text-align: center;
  opacity: .6;
}
.mob-section-label:first-of-type { margin-top: 0; }
.mob-close {
  position: absolute;
  top: 24px;
  right: 24px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 50%;
  color: var(--text);
  font-size: 18px;
  cursor: pointer;
}

.mob-phone { display:flex; align-items:center; gap:8px; margin:0 24px 16px; padding:14px 20px; background:var(--g); color:#0C100A !important; border-radius:12px; font-family:var(--fh); font-size:15px; font-weight:700; text-decoration:none; justify-content:center; }
.mob-phone svg { flex-shrink:0; }
.mob-phone:hover { box-shadow:0 0 20px rgba(128,217,89,.3); }
/* ── Mobile Sticky CTA Bar ── */
.mobile-cta-bar {
  display:none; position:fixed; bottom:0; left:0; right:0;
  background:rgba(12,16,10,.88);
  backdrop-filter:blur(16px) saturate(180%);
  -webkit-backdrop-filter:blur(16px) saturate(180%);
  border-top:1px solid rgba(122,225,48,.12);
  padding:10px 16px;
  padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
  z-index:999; gap:10px; align-items:center;
  transform:translateY(0);
  transition:transform .3s cubic-bezier(.4,0,.2,1);
}
.mobile-cta-bar.mcta-hidden { transform:translateY(100%); }
.mcta-call {
  flex:1; display:flex; align-items:center; justify-content:center; gap:6px;
  background:rgba(122,225,48,.07); border:1px solid rgba(122,225,48,.2);
  color:var(--g-text); padding:10px; border-radius:8px;
  font-family:var(--fh); font-weight:600; font-size:13px; text-decoration:none;
  transition:background .2s;
}
.mcta-call:hover { background:rgba(122,225,48,.15); }
.mcta-book {
  flex:2; display:flex; align-items:center; justify-content:center;
  background:var(--g); color:#0C100A; padding:10px; border-radius:8px;
  font-family:var(--fh); font-weight:700; font-size:13px; text-decoration:none;
  transition:background .2s;
}
.mcta-book:hover { background:var(--gh); }
@media(max-width:768px) {
  .mobile-cta-bar { display:flex; }
  body { padding-bottom:calc(60px + env(safe-area-inset-bottom, 0px)); }
}
[data-theme="light"] .mobile-cta-bar { background:rgba(245,245,240,.92); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .mcta-call { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.1); color:var(--g-text); }

/* ── Mega Menu ── */
.ni { position: relative; display: flex; align-items: center; }
.ni > a {
  font-size: 13px;
  font-weight: 500;
  color: var(--text-faint);
  padding: 6px 10px;
  border-radius: 6px;
  transition: color .2s, background .2s;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.ni > a:hover, .ni:hover > a { color: var(--text); background: rgba(255, 255, 255, .06); }
.da { width: 10px; height: 10px; transition: transform .25s; flex-shrink: 0; }
.ni:hover .da { transform: rotate(180deg); }
.mm {
  max-width: calc(100vw - 32px);
  position: absolute;
  top: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(6px);
  background: rgba(12, 12, 12, .98);
  backdrop-filter: blur(28px);
  -webkit-backdrop-filter: blur(28px);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: 14px;
  padding: 28px 32px;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s, transform .2s, visibility .2s;
  z-index: 200;
  box-shadow: 0 32px 80px rgba(0, 0, 0, .55), 0 0 0 1px rgba(128, 217, 89, .03) inset;
}
.ni:hover .mm { opacity: 1; visibility: visible; pointer-events: all; transform: translateX(-50%) translateY(0); }
/* Prevent first dropdown (Platform) from overflowing left edge */
.ni:first-child .mm { left: 0; transform: translateY(6px); }
.ni:first-child:hover .mm { transform: translateY(0); }
.mm-2col { display: grid; grid-template-columns: repeat(2, minmax(160px, 1fr)); gap: 28px; }
.mm-3col { display: grid; grid-template-columns: repeat(3, minmax(160px, 1fr)); gap: 28px; }
.mm-4col { display: grid; grid-template-columns: repeat(4, minmax(160px, 1fr)); gap: 24px; }
.nav-link-plain { display: flex; align-items: center; white-space: nowrap; }
.mm-col h6, .mm-col .mm-heading {
  font-family: var(--fh);
  font-size: 12px;
  font-weight: 700;
  color: var(--g-text);
  letter-spacing: 1.5px;
  text-transform: uppercase;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(128, 217, 89, .1);
}
.mm-col ul { list-style: none; display: flex; flex-direction: column; gap: 5px; }
.mm-col ul li a {
  font-size: 12.5px;
  color: var(--text-muted);
  transition: color .15s, padding-left .15s;
  display: block;
  padding: 3px 0;
}
.mm-col ul li a:hover { color: var(--text); padding-left: 5px; }
.mm-feat {
  background: rgba(128, 217, 89, .04);
  border: 1px solid rgba(128, 217, 89, .1);
  border-radius: 10px;
  padding: 0;
  overflow: hidden;
}
.mm-feat-inner { padding: 22px 18px; display: flex; flex-direction: column; gap: 8px; height: 100%; }
.mm-feat-dark { background: linear-gradient(135deg, rgba(128, 217, 89, .06), rgba(128, 217, 89, .02)); }
.mm-feat-tag { font-family: var(--fh); font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.mm-feat p { font-size: 11.5px; color: var(--text-muted); line-height: 1.7; }
.btn-sm {
  display: inline-flex;
  align-items: center;
  padding: 8px 14px;
  background: var(--g);
  color: var(--bk);
  font-size: 11px;
  font-weight: 700;
  border-radius: 4px;
  transition: background .15s, transform .15s;
  margin-top: auto;
  width: fit-content;
}
.btn-sm:hover { background: var(--gh); transform: translateY(-1px); }

/* Offers Strip removed — dead chrome (animated marquee, rendered on no page). */

/* ── Section Typography ── */
section { padding: 100px max(5%, calc((100% - 1280px) / 2)); }
.section-h2 {
  font-family: var(--fh);
  font-size: clamp(28px, 4vw, 54px);
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -.04em;
  margin-bottom: 14px;
  position: relative;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease2) .1s, transform .5s var(--ease2) .1s;
}
.section-h2.visible { opacity: 1; transform: none; }
.section-h2.visible .g {
  animation: text-glow 1.5s ease-out .4s both;
}
@keyframes text-glow {
  0% { text-shadow: none; filter: brightness(1); }
  50% { text-shadow: 0 0 30px rgba(128, 217, 89, .4); filter: brightness(1.2); }
  100% { text-shadow: none; filter: brightness(1); }
}
.section-h2 .g { color: var(--g-text); }
/* Section eyebrow/kicker — was unstyled (rendered as raw 16px body text)
   on ~48 location/service pages. One consistent treatment, theme-aware. */
.section-label {
  display: inline-block;
  font-family: var(--fb);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--g-text);
  margin-bottom: 14px;
}
/* Review star rating — single brand accent (was off-palette #FFD700 gold). */
.review-stars { color: var(--g-text); margin-bottom: 12px; letter-spacing: 2px; font-size: 15px; }
.section-sub {
  font-size: clamp(14px, 1.2vw, 16px);
  color: var(--text-muted);
  line-height: 1.9;
  max-width: 560px;
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .5s var(--ease2) .2s, transform .5s var(--ease2) .2s;
}
.section-sub.visible { opacity: 1; transform: none; }

/* ── Buttons ── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  background: var(--g);
  color: var(--bk);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  transition: background .2s, transform .2s, box-shadow .2s;
  background-image: linear-gradient(110deg, var(--g) 0%, var(--g) 40%, #a8f080 50%, var(--g) 60%, var(--g) 100%);
  background-size: 200% 100%;
}
.btn-primary:hover {
  background: var(--gh);
  transform: translateY(-2px);
  box-shadow: 0 14px 36px rgba(128, 217, 89, .28);
  animation: shimmer 1.2s ease-in-out;
}
.btn-secondary {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 14px 28px;
  border: 1px solid rgba(255, 255, 255, .14);
  color: var(--text);
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  transition: border-color .2s, background .2s, transform .2s;
}
.btn-secondary:hover { border-color: rgba(255, 255, 255, .3); background: rgba(255, 255, 255, .04); transform: translateY(-2px); }
.btn-ghost { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600; color: var(--g-text); transition: gap .2s; }
.btn-ghost:hover { gap: 12px; }
.btn-dark {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  padding: 15px 30px;
  background: var(--bk);
  color: var(--text);
  font-size: 14px;
  font-weight: 700;
  border-radius: 4px;
  transition: background .2s, transform .2s;
}
.btn-dark:hover { background: #1a1a1a; transform: translateY(-2px); }
.btn-row { display: flex; gap: 12px; flex-wrap: wrap; }

/* ── Page Hero ── */
.page-hero {
  position: relative;
  padding: 180px 5% 100px;
  overflow: hidden;
}
.phbg { position: absolute; inset: 0; }
.phbg-g1 {
  position: absolute;
  width: 600px;
  height: 600px;
  top: -15%;
  right: -8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 217, 89, .13), transparent 70%);
  filter: blur(90px);
}
.phbg-g2 {
  position: absolute;
  width: 300px;
  height: 300px;
  bottom: -5%;
  left: -5%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 217, 89, .07), transparent 70%);
  filter: blur(70px);
}
.phbg-grid {
  position: absolute;
  inset: 0;
  background-image: linear-gradient(rgba(255, 255, 255, .02) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, .02) 1px, transparent 1px);
  background-size: 80px 80px;
  mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
  -webkit-mask-image: radial-gradient(ellipse 80% 80% at 50% 50%, black, transparent);
}
.ph-content { position: relative; z-index: 2; max-width: 780px; }
.ph-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 14px;
  border: 1px solid var(--g30);
  border-radius: var(--r-pill);
  margin-bottom: 24px;
  background: rgba(128, 217, 89, .05);
}
.ph-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--g); animation: pulse 2s ease-in-out infinite; }
.ph-badge span { font-size: 12px; font-weight: 600; color: var(--g-text); letter-spacing: .5px; }
.ph-content h1 {
  font-family: var(--fh);
  font-size: clamp(40px, 6vw, 84px);
  font-weight: 800;
  color: var(--text);
  line-height: .95;
  letter-spacing: -.045em;
  margin-bottom: 22px;
}
.ph-content h1 .g { color: var(--g-text); }
.ph-content h1 .outline { -webkit-text-stroke: 1.5px rgba(255, 255, 255, .55); color: transparent; }
.ph-content > p {
  font-size: clamp(15px, 1.4vw, 17px);
  color: var(--text-muted);
  line-height: 1.9;
  max-width: 540px;
  margin-bottom: 32px;
}


/* ── Feature Row Variants ── */
.feat-row-visual { flex-shrink: 0; }
.feat-row-text h3 { font-family: var(--fh); font-size: clamp(22px, 3vw, 36px); font-weight: 800; color: var(--text); letter-spacing: -.04em; line-height: 1.05; margin-bottom: 14px; }
.feat-row-text h3 .g { color: var(--g-text); }
.feat-row-text > p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 24px; }
.feat-row-reverse { direction: rtl; }
.feat-row-reverse > * { direction: ltr; }
/* Commercial 'Industry Solutions' tab panels: their feat-row columns are plain
   <div> (not .feat-row-text), so headings fell back to unstyled browser default. */
.tab-panel .feat-row { gap: 48px; align-items: start; }
.tab-panel .feat-row > div h3 { font-family: var(--fh); font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.02em; line-height: 1.2; margin: 0 0 8px; }
.tab-panel .feat-row > div p { font-size: 15px; color: var(--text-muted); line-height: 1.75; margin: 0; }

/* ── Cards ── */
.card-grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; margin-top: 52px; }
.card-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-top: 52px; }
.card-grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-top: 52px; }
.card-grid-fit { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 52px; }
.card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r12);
  padding: 32px 28px;
  box-shadow: var(--glass-shadow);
  transition: transform .35s var(--ease), border-color .3s, box-shadow .35s var(--ease), background .3s;
  will-change: transform;
  transform: translateZ(0);
  display: flex;
  flex-direction: column;
  height: 100%;
}
/* First-child category pill shouldn't carry the CTA top-gap */
.card > .card-tag:first-child { margin-top: 0; margin-bottom: 14px; align-self: flex-start; }
.card:hover {
  transform: translateY(-6px);
  border-color: rgba(128, 217, 89, .18);
  background: var(--glass-hover);
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3), 0 8px 32px rgba(128, 217, 89, .06), 0 0 30px rgba(128, 217, 89, .08);
}
.card-icon {
  width: 46px;
  height: 46px;
  border-radius: 10px;
  background: var(--g10);
  border: 1px solid var(--g20);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}
.card-icon svg { width: 21px; height: 21px; }
.card:hover .card-icon { animation: float-y 2s ease-in-out infinite; }
.card h3 { font-family: var(--fh); font-size: 17px; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-bottom: 10px; }
.card p { font-size: 13px; color: var(--text-muted); line-height: 1.8; }

/* ── Careers job rows (were undefined classes -> unstyled) ── */
.career-list{display:flex;flex-direction:column;gap:16px;max-width:880px;margin:40px auto 0;}
.career-item{display:flex;align-items:center;justify-content:space-between;gap:24px;padding:24px 28px;border:1px solid var(--border);border-radius:var(--r16);background:var(--d2);}
.career-item h3{margin:0 0 6px;font-family:var(--fh);font-size:18px;}
.career-item p{margin:0;color:var(--text-muted);font-size:14px;}
.career-item .btn-primary{flex:none;}
@media(max-width:680px){.career-item{flex-direction:column;align-items:flex-start;}}

.card-tag {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  margin-top: 18px;
  padding: 5px 12px;
  background: var(--g10);
  border: 1px solid rgba(128, 217, 89, .15);
  border-radius: var(--r-pill);
  font-size: 11px;
  font-weight: 600;
  color: var(--g-text);
  letter-spacing: .5px;
}
/* Blog card: read-time as quiet meta, CTA as a real text link (was 3 identical pills). */
.card-meta { margin-top: auto; padding-top: 14px; font-size: 12px; color: var(--text-muted); }
.card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 14px; font-size: 13px; font-weight: 600; color: var(--g-text); transition: gap .2s; }
.card-link:hover { gap: 10px; }
.card-pill {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(128, 217, 89, .08);
  border: 1px solid var(--g20);
  border-radius: var(--r-pill);
  font-size: 10px;
  font-weight: 700;
  color: var(--g-text);
  letter-spacing: .8px;
  text-transform: uppercase;
  margin-bottom: 12px;
}

/* ── Stats Row ── */
.stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 2px; margin-top: 52px; }
.stat-box, .stat { padding: 38px 28px; background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); text-align: center; border-top: 2px solid transparent; transition: border-color .3s, background .3s; transform: translateZ(0); }
.stat-box:hover, .stat:hover { border-color: var(--g); background: var(--glass-hover); }
.stat-num { font-family: var(--fh); font-size: 40px; font-weight: 800; color: var(--g-text); letter-spacing: -.04em; line-height: 1; }
.stat-lbl { font-size: 12px; color: var(--text-muted); margin-top: 8px; line-height: 1.6; }

/* ── Feature Row ── */
.feat-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 72px;
  align-items: center;
  padding: 72px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.feat-row:last-child { border-bottom: none; }
.feat-visual {
  background: var(--d2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r16);
  padding: 44px;
  position: relative;
  overflow: hidden;
}
.feat-visual::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 280px;
  height: 280px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(128, 217, 89, .08), transparent 65%);
  pointer-events: none;
}
.feat-content h3 {
  font-family: var(--fh);
  font-size: clamp(22px, 3vw, 36px);
  font-weight: 800;
  color: var(--text);
  letter-spacing: -.04em;
  line-height: 1.05;
  margin-bottom: 14px;
}
.feat-content h3 .g { color: var(--g-text); }
.feat-content > p { font-size: 15px; color: var(--text-muted); line-height: 1.9; margin-bottom: 24px; }
.feat-list { display: flex; flex-direction: column; gap: 11px; margin-bottom: 28px; }
.fli { display: flex; align-items: flex-start; gap: 12px; }
.fli-dot {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--g10);
  border: 1px solid var(--g20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 2px;
}
.fli-dot svg { width: 10px; height: 10px; }
.fli-txt { font-size: 14px; font-weight: 500; color: var(--text-muted); line-height: 1.6; }

/* ── Bar Chart ── */
.bar-chart { display: flex; flex-direction: column; gap: 14px; }
.bci-hdr { display: flex; justify-content: space-between; margin-bottom: 6px; }
.bci-lbl { font-size: 12px; color: var(--text-muted); }
.bci-val { font-size: 12px; font-weight: 600; color: var(--g-text); }
.bci-track { height: 5px; background: rgba(255, 255, 255, .07); border-radius: var(--r-pill); overflow: hidden; }
.bci-fill { height: 100%; background: linear-gradient(90deg, var(--gd), var(--g)); border-radius: var(--r-pill); }

/* ── Specs Table ── */
.specs-table { width: 100%; border-collapse: collapse; margin-top: 24px; }
.specs-table th {
  background: rgba(128, 217, 89, .08);
  border: 1px solid rgba(128, 217, 89, .12);
  padding: 12px 18px;
  font-size: 11px;
  font-weight: 700;
  color: var(--g-text);
  letter-spacing: 1px;
  text-transform: uppercase;
  text-align: left;
}
.specs-table td {
  border: 1px solid rgba(255, 255, 255, .06);
  padding: 12px 18px;
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.6;
}
.specs-table tr:hover td { background: rgba(255, 255, 255, .02); }
.specs-table td:first-child { color: var(--text); font-weight: 500; }
.specs-table td.hi { color: var(--g-text); font-weight: 600; }

/* ── Steps ── */
.steps { display: flex; flex-direction: column; }
.steps-grid { display: flex; flex-direction: column; }
.step {
  display: grid;
  grid-template-columns: 80px 1fr;
  grid-template-rows: auto auto;
  gap: 0 28px;
  padding: 32px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .05);
}
.step:last-child { border-bottom: none; }
.step-num {
  grid-row: 1 / -1;
  font-family: var(--fh);
  font-size: 52px;
  font-weight: 800;
  color: rgba(128, 217, 89, .12);
  letter-spacing: -.04em;
  line-height: 1;
  text-align: right;
  padding-right: 16px;
  border-right: 2px solid rgba(128, 217, 89, .12);
  align-self: start;
  padding-top: 4px;
}
.step h3, .step h4 { font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.03em; margin-bottom: 8px; }
.step p { font-size: 14px; color: var(--text-muted); line-height: 1.85; }

/* ── Case Study Cards ── */
.cs-card {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: var(--r12);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s, background .3s;
  will-change: transform;
  transform: translateZ(0);
}
.cs-card:hover { transform: translateY(-4px); border-color: rgba(128, 217, 89, .2); }
.cs-head { background: var(--glass); padding: 28px; border-bottom: 1px solid var(--border); }
.cs-head:last-child { border-bottom: none; }  /* header-only case-study card: no dangling divider */
.cs-head-row { display: grid; grid-template-columns: 1fr auto; align-items: flex-start; gap: 12px 16px; }
.cs-loc { font-size: 10px; font-weight: 700; color: var(--g-text); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 8px; }
.cs-name { font-family: var(--fh); font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -.03em; }
.cs-sys { font-size: 12px; color: var(--text-muted); margin-top: 4px; }
.cs-saving { font-family: var(--fh); font-size: 30px; font-weight: 800; color: var(--g-text); letter-spacing: -.04em; text-align: right; }
.cs-saving-lbl { font-size: 10px; color: var(--text-muted); text-align: right; margin-top: 2px; }
.cs-body { padding: 24px 28px; }
.cs-stat-row { display: flex; gap: 20px; margin-bottom: 16px; }
.cs-stat-val { font-family: var(--fh); font-size: 20px; font-weight: 800; color: var(--text); letter-spacing: -.04em; }
.cs-stat-lbl { font-size: 11px; color: var(--text-muted); margin-top: 3px; }
.cs-quote {
  font-size: 13px;
  color: var(--text-muted);
  line-height: 1.75;
  font-style: italic;
}

/* ── Partners ── */
.partner-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2px; margin-top: 40px; }
.partner-box { padding: 28px 20px; background: var(--glass); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; transition: background .2s; }
.partner-box:hover { background: var(--glass-hover); }
.partner-name { font-family: var(--fh); font-size: 14px; font-weight: 700; color: var(--text-muted); text-align: center; transition: color .2s; letter-spacing: -.02em; }
.partner-box:hover .partner-name { color: var(--text-faint); }

/* ── FAQ ── */
.faq-list{max-width:800px;margin:40px auto 0;}
.faq-item, .faq { border-bottom: 1px solid var(--glass-border); }
.faq-q {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 24px 0;
  font-size: 15px;
  font-weight: 600;
  color: var(--text);
  text-align: left;
  cursor: pointer;
  transition: color .2s, padding .2s;
}
.faq-q:hover { color: var(--g-text); }
.faq-icon {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: 18px;
  line-height: 1;
  transition: transform .3s, background .2s, border-color .2s;
}
.faq-q.open .faq-icon { background: var(--g10); border-color: var(--g30); transform: rotate(45deg); }
.faq-a {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.9;
  max-height: 0;
  overflow: hidden;
  transition: max-height .4s var(--ease2), padding .3s;
}
.faq-a.open { max-height: 600px; padding-bottom: 24px; }

/* ── Blog Cards ── */
.blog-card {
  background: var(--d2);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r12);
  overflow: hidden;
  transition: transform .3s var(--ease), border-color .3s;
}
.blog-card:hover { transform: translateY(-4px); border-color: rgba(128, 217, 89, .2); }
.blog-img {
  height: 170px;
  background: linear-gradient(135deg, var(--d3), var(--d4));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 44px;
  opacity: .18;
}
.blog-body { padding: 24px; }
.blog-cat { font-size: 10px; font-weight: 700; color: var(--g-text); letter-spacing: 1.5px; text-transform: uppercase; margin-bottom: 10px; }
.blog-card h4 { font-family: var(--fh); font-size: 16px; font-weight: 700; color: var(--text); letter-spacing: -.03em; line-height: 1.35; margin-bottom: 10px; }
.blog-card p { font-size: 13px; color: var(--text-muted); line-height: 1.75; }
.blog-footer {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, .06);
}
.blog-date { font-size: 11px; color: var(--text-muted); }

/* ── CTA Band ── */
.cta-band { background: var(--g); padding: 80px 5%; text-align: center; }
.cta-band h2 { font-family: var(--fh); font-size: clamp(26px, 4vw, 50px); font-weight: 800; color: var(--bk); letter-spacing: -.04em; margin-bottom: 14px; }
.cta-band p { font-size: 16px; color: rgba(0, 0, 0, .82); margin-bottom: 28px; max-width: 520px; margin-left: auto; margin-right: auto; }

/* ── Forms ── */
.form-wrap { background: var(--d2); border: 1px solid rgba(255, 255, 255, .07); border-radius: var(--r16); padding: 44px; }
.fg { margin-bottom: 18px; }
.fg label { display: block; font-size: 11px; font-weight: 700; color: var(--text-muted); letter-spacing: 1px; text-transform: uppercase; margin-bottom: 8px; }
.fg input, .fg select, .fg textarea {
  width: 100%;
  padding: 13px 16px;
  background: var(--d3);
  border: 1px solid rgba(255, 255, 255, .07);
  border-radius: var(--r8);
  color: var(--text);
  font-family: var(--fb);
  font-size: 14px;
  outline: none;
  transition: border-color .2s;
  -webkit-appearance: none;
}
.fg input:focus, .fg select:focus, .fg textarea:focus { border-color: var(--g30); }
.fg input::placeholder, .fg textarea::placeholder { color: var(--text-faint); }
.fg select option { background: var(--d3); }
.fg textarea { resize: vertical; min-height: 120px; }
.form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.form-submit {
  width: 100%;
  padding: 15px;
  background: var(--g);
  color: var(--bk);
  font-family: var(--fb);
  font-size: 15px;
  font-weight: 700;
  border-radius: var(--r8);
  cursor: pointer;
  border: none;
  transition: background .2s, transform .2s, box-shadow .2s;
}
.form-submit:hover { background: var(--gh); transform: translateY(-1px); box-shadow: 0 12px 32px rgba(128, 217, 89, .22); }
.form-legal { font-size: 11px; color: var(--text-muted); line-height: 1.7; margin-top: 10px; }

/* ── Footer ── */
footer { background: var(--glass); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); border-top: 1px solid var(--border); padding: 64px max(5%, calc((100% - 1280px) / 2)) 120px; position: relative; overflow: hidden; transform: translateZ(0); }
footer::before { content: ''; position: absolute; top: 0; left: 50%; width: 80%; height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, transparent, var(--g30), transparent); }
.ft-top { display: grid; grid-template-columns: 2fr repeat(5, 1fr); gap: 36px; margin-bottom: 52px; }
.ft-logo { display: flex; align-items: center; gap: 10px; margin-bottom: 16px; }
.ft-logo img { height: 26px; }
.ft-brand p { font-size: 13px; color: var(--text-muted); line-height: 1.85; max-width: 240px; }
.ft-contact { font-size: 12px; color: var(--text-muted); margin-top: 12px; line-height: 1.9; }
.ft-col .ft-h { display:block; font-size: 10px; font-weight: 700; color: var(--text-muted); letter-spacing: 1.2px; text-transform: uppercase; margin-bottom: 16px; }
.ft-col ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.ft-col ul li a { font-size: 13px; color: var(--text-muted); transition: color .2s; }
.ft-col ul li a:hover { color: var(--g-text); }
.ft-bottom {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
  padding-top: 28px;
  border-top: 1px solid rgba(255, 255, 255, .05);
  font-size: 11px;
  color: var(--text-muted);
}
.ft-bottom a { color: var(--text-muted); transition: color .2s; }
.ft-bottom a:hover { color: var(--g-text); }
.ft-payments { padding: 24px 0; border-top: 1px solid rgba(255, 255, 255, .05); margin-bottom: 4px; }
.ft-pay-icons { display: flex; align-items: center; justify-content: center; gap: 10px; flex-wrap: wrap; }
.ft-pay { position: relative; padding: 6px 14px; border: 1px solid rgba(255, 255, 255, .14); border-radius: 6px; font-size: 11px; font-weight: 600; color: var(--text); letter-spacing: .3px; transition: border-color .2s, color .2s; cursor: default; }
.ft-pay:hover { border-color: var(--g); color: var(--g-text); }
.ft-pay[data-tooltip]::after { content: attr(data-tooltip); position: absolute; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%) translateY(4px); background: #1a1a1a; color: var(--text); font-size: 11px; font-weight: 400; letter-spacing: 0; line-height: 1.5; padding: 8px 12px; border-radius: 8px; border: 1px solid rgba(255, 255, 255, .12); white-space: nowrap; pointer-events: none; opacity: 0; transition: opacity .2s, transform .2s; z-index: 10; box-shadow: 0 4px 16px rgba(0, 0, 0, .4); }
.ft-pay[data-tooltip]:hover::after { opacity: 1; transform: translateX(-50%) translateY(0); }
.ft-pay[data-tooltip]::before { content: ''; position: absolute; bottom: calc(100% + 2px); left: 50%; transform: translateX(-50%); border: 5px solid transparent; border-top-color: #1a1a1a; pointer-events: none; opacity: 0; transition: opacity .2s; z-index: 10; }
.ft-pay[data-tooltip]:hover::before { opacity: 1; }
[data-theme="light"] .ft-pay { border-color: rgba(0, 0, 0, .1); color: rgba(0, 0, 0, .45); }
[data-theme="light"] .ft-pay:hover { border-color: var(--gd); color: var(--gd); }
[data-theme="light"] .ft-pay[data-tooltip]::after { background: #fff; color: #1a1a1a; border-color: rgba(0, 0, 0, .1); box-shadow: 0 4px 16px rgba(0, 0, 0, .12); }
[data-theme="light"] .ft-pay[data-tooltip]::before { border-top-color: #fff; }
[data-theme="light"] .ft-payments { border-top-color: rgba(0, 0, 0, .06); }
.ft-badges { display: flex; gap: 8px; margin-top: 14px; flex-wrap: wrap; }
.ft-badge { padding: 4px 10px; border: 1px solid rgba(128, 217, 89, .2); border-radius: var(--r-pill); font-size: 10px; font-weight: 600; color: var(--g-text); letter-spacing: .5px; }
.ft-social { display: flex; gap: 8px; margin-top: 14px; }
.ft-social a {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, .07);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s, border-color .2s;
}
.ft-social a:hover { background: var(--g); border-color: var(--g); }
.ft-social a svg { width: 13px; height: 13px; fill: rgba(255, 255, 255, .35); transition: fill .2s; }
.ft-social a:hover svg { fill: var(--bk); }

/* ── Social Float ── */
.social-float {
  position: fixed;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
  z-index: 50;
  display: flex;
  flex-direction: column;
}
.social-float a {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(14, 14, 14, .94);
  border-left: 1px solid rgba(255, 255, 255, .05);
  border-top: 1px solid rgba(255, 255, 255, .05);
  transition: background .2s;
}
.social-float a:first-child { border-radius: 8px 0 0 0; }
.social-float a:last-child { border-radius: 0 0 0 8px; }
.social-float a:hover { background: var(--g); }
.social-float a svg { width: 14px; height: 14px; fill: rgba(255, 255, 255, .55); transition: fill .2s; }
.social-float a:hover svg { fill: var(--bk); }

/* ── Animations & Keyframes ── */
@keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } }
@keyframes float-y { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
@keyframes glow-pulse { 0%, 100% { box-shadow: 0 0 20px rgba(128, 217, 89, .15); } 50% { box-shadow: 0 0 40px rgba(128, 217, 89, .3); } }
@keyframes pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(128, 217, 89, .4); } 50% { box-shadow: 0 0 0 6px rgba(128, 217, 89, 0); } }
@keyframes counter-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes line-grow { from { transform: scaleX(0); } to { transform: scaleX(1); } }
@keyframes particle-float { 0% { transform: translateY(0) translateX(0); opacity: 0; } 10% { opacity: .6; } 90% { opacity: .6; } 100% { transform: translateY(-120px) translateX(30px); opacity: 0; } }
.hero-glow-text {
  background: linear-gradient(135deg, #fff 0%, var(--g) 50%, #fff 100%);
  background-size: 200% 200%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
 /* ambient loop removed */
}
.stat-num.visible { animation: counter-up .6s var(--ease2) both; }

/* ── Scroll Reveal ── */
.reveal { opacity: 0; transform: translateY(26px); transition: opacity .65s var(--ease2), transform .65s var(--ease2); }
.reveal.visible { opacity: 1; transform: none; }
.reveal-left { opacity: 0; transform: translateX(-40px); transition: opacity .7s var(--ease2), transform .7s var(--ease2); }
.reveal-left.visible { opacity: 1; transform: none; }
.reveal-right { opacity: 0; transform: translateX(40px); transition: opacity .7s var(--ease2), transform .7s var(--ease2); }
.reveal-right.visible { opacity: 1; transform: none; }
.reveal-scale { opacity: 0; transform: scale(.92); transition: opacity .6s var(--ease2), transform .6s var(--ease2); }
.reveal-scale.visible { opacity: 1; transform: none; }
.reveal-rotate { opacity: 0; transform: translateY(20px) rotate(-2deg); transition: opacity .65s var(--ease2), transform .65s var(--ease2); }
.reveal-rotate.visible { opacity: 1; transform: none; }
.stagger-1 { transition-delay: .08s; }
.stagger-2 { transition-delay: .16s; }
.stagger-3 { transition-delay: .24s; }
.stagger-4 { transition-delay: .32s; }
.stagger-5 { transition-delay: .4s; }
.stagger-6 { transition-delay: .48s; }

/* Parallax Depth Shapes removed — dead decoration (used on 0 pages). */


/* ── Responsive ── */
@media (max-width: 1200px) {
  .ft-top { grid-template-columns: 2fr 1fr 1fr 1fr; }
}

@media (max-width: 1100px) {
  .ft-top { grid-template-columns: 1fr 1fr 1fr; }
  .card-grid-4 { grid-template-columns: 1fr 1fr; }
  .nav-cta-outline { display: none; }
}

@media (max-width: 1024px) {
  .card-grid-3 { grid-template-columns: 1fr 1fr; }
  .feat-row { grid-template-columns: 1fr; gap: 40px; }
}

@media (max-width: 900px) {
  .ft-top { grid-template-columns: 1fr 1fr 1fr; }
  .page-hero { padding-top: 140px; }
}

@media (max-width: 768px) {
  section { padding: 72px 5%; }
  .nav-links { display: none; }
  .nav-ctas { display: none; }
  .nav-mob { display: flex; }
  .card-grid-3, .card-grid-2, .card-grid-4 { grid-template-columns: 1fr; }
  .ft-top { grid-template-columns: 1fr; }
  .form-row2 { grid-template-columns: 1fr; }
  .page-hero { padding: 120px 5% 60px; }
  .social-float { display: none; }
  .mm { display: none; }
}

@media (max-width: 600px) {
  .ft-top { grid-template-columns: 1fr; }
}

/* ── WhatsApp & Call Floats removed — replaced by Jouli widget ── */

/* ── Exit Intent Popup ── */
.exit-popup-overlay {
  position: fixed;
  inset: 0;
  z-index: 400;
  background: rgba(0, 0, 0, .75);
  backdrop-filter: blur(6px);
  display: flex;
  align-items: center;
  justify-content: center;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s, visibility .3s;
}
.exit-popup-overlay.active { opacity: 1; visibility: visible; pointer-events: all; }
.exit-popup {
  background: var(--d2);
  border: 1px solid rgba(128, 217, 89, .2);
  border-radius: 16px;
  padding: 48px 40px;
  max-width: 480px;
  width: 90%;
  text-align: center;
  position: relative;
}
.exit-popup-close {
  position: absolute;
  top: 16px;
  right: 16px;
  background: none;
  border: none;
  color: var(--text-muted);
  font-size: 24px;
  cursor: pointer;
  line-height: 1;
}
.exit-popup-close:hover { color: var(--text); }
.exit-popup h3 {
  font-family: var(--fh);
  font-size: 26px;
  font-weight: 800;
  color: var(--text);
  margin-bottom: 12px;
  letter-spacing: -.03em;
}
.exit-popup p {
  font-size: 15px;
  color: var(--text-muted);
  line-height: 1.6;
  margin-bottom: 24px;
}
.exit-popup-form {
  display: flex;
  gap: 8px;
}
.exit-popup-form input {
  flex: 1;
  padding: 14px 16px;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, .1);
  background: rgba(255, 255, 255, .05);
  color: var(--text);
  font-size: 14px;
  font-family: var(--fb);
  outline: none;
}
.exit-popup-form input:focus { border-color: var(--g); }
.exit-popup-form button {
  padding: 14px 24px;
  border-radius: 8px;
  border: none;
  background: var(--g);
  color: var(--bk);
  font-family: var(--fb);
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  white-space: nowrap;
  transition: background .2s;
}
.exit-popup-form button:hover { background: var(--gd); }
.exit-popup .exit-skip {
  display: inline-block;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
  cursor: pointer;
}
.exit-popup .exit-skip:hover { color: var(--text-faint); }
@media (max-width: 768px) {
  .wa-float { bottom: 20px; right: 20px; width: 54px; height: 54px; }
  .wa-float svg { width: 28px; height: 28px; }
  .exit-popup { padding: 36px 24px; }
  .exit-popup-form { flex-direction: column; }
}

@media (max-width: 480px) {
}

/* ── Cookie Consent Banner ── */
.cookie-banner {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  z-index: 600;
  background: rgba(13, 13, 13, .97);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(128, 217, 89, .12);
  padding: 18px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  transform: translateY(100%);
  transition: transform .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.cookie-banner.visible {
  transform: translateY(0);
}
.cookie-banner p {
  font-size: 13px;
  color: var(--text);
  line-height: 1.6;
  flex: 1;
}
.cookie-banner p a {
  color: var(--g-text);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.cookie-btns {
  display: flex;
  gap: 10px;
  flex-shrink: 0;
}
.cookie-accept {
  padding: 10px 22px;
  background: var(--g);
  color: #06140A;
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 700;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background .2s;
}
.cookie-accept:hover { background: var(--gh); }
.cookie-decline {
  padding: 10px 22px;
  background: transparent;
  color: var(--text-muted);
  font-family: var(--fb);
  font-size: 13px;
  font-weight: 600;
  border: 1px solid rgba(255, 255, 255, .1);
  border-radius: 4px;
  cursor: pointer;
  transition: color .2s, border-color .2s;
}
.cookie-decline:hover { color: var(--text); border-color: rgba(255, 255, 255, .3); }
.cookie-accept:focus-visible,
.cookie-decline:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 600px) {
  .cookie-banner { flex-direction: column; text-align: center; padding: 20px 5%; }
  .cookie-btns { width: 100%; justify-content: center; }
}

/* ── Sticky CTA Bar ── */
.sticky-cta {
  position: fixed;
  bottom: -80px;
  left: 0;
  right: 0;
  z-index: 80;
  background: rgba(13, 13, 13, .95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border-top: 1px solid rgba(128, 217, 89, .15);
  padding: 14px 5%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: bottom .4s cubic-bezier(.4, 0, .2, 1);
  will-change: transform;
}
.sticky-cta.visible {
  bottom: 0;
}
.sticky-cta-text {
  display: flex;
  align-items: center;
  gap: 16px;
}
.sticky-cta-text span {
  font-family: var(--fh);
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.sticky-cta-text .sticky-phone {
  font-size: 13px;
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 6px;
}
.sticky-cta-text .sticky-phone a {
  color: var(--g-text);
  font-weight: 600;
}
.sticky-cta-actions {
  display: flex;
  gap: 10px;
  align-items: center;
}
.sticky-cta-actions .btn-primary {
  padding: 10px 22px;
  font-size: 13px;
}
.sticky-cta-actions a:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  /* On phones the .mobile-cta-bar is the single bottom CTA. The desktop
     .sticky-cta must not stack on top of it — three fixed bottom bars
     (mobile-cta-bar + cookie-banner + sticky-cta) were overlapping. */
  .sticky-cta { display: none !important; }
}

/* ── Trust Badge Strip ── */
.trust-badges {
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-top: 1px solid var(--glass-border);
  border-bottom: 1px solid var(--glass-border);
  padding: 24px 5%;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  transform: translateZ(0);
}
.tb-item {
  display: flex;
  align-items: center;
  gap: 10px;
}
.tb-icon {
  width: 38px;
  height: 38px;
  border-radius: 50%;
  background: var(--g10);
  border: 1px solid var(--g20);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}
.tb-icon svg {
  width: 18px;
  height: 18px;
  max-width: 18px;
  max-height: 18px;
}
.tb-info strong {
  display: block;
  font-family: var(--fh);
  font-size: 14px;
  font-weight: 700;
  color: var(--text);
  letter-spacing: -.02em;
}
.tb-info span {
  display: block;
  font-size: 11px;
  color: var(--text-muted);
}
/* On larger screens, force 4-column grid so items never wrap unevenly */
@media (min-width: 769px) {
  .trust-badges {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    justify-items: center;
  }
}
@media (max-width: 768px) {
  .trust-badges { gap: 16px; padding: 20px 5%; display: grid; grid-template-columns: repeat(2, 1fr); justify-items: center; }
  .tb-info strong { font-size: 12px; }
  .tb-icon { width: 32px; height: 32px; }
  .tb-icon svg { width: 14px; height: 14px; max-width: 14px; max-height: 14px; }
}
@media (max-width: 480px) {
  .trust-badges {
    overflow: hidden;
    padding: 20px 0;
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
  }
  .tb-track {
    display: flex;
    align-items: center;
    gap: 28px;
    padding: 0 14px;
    flex-shrink: 0;
    animation: tb-scroll 22s linear infinite;
    will-change: transform;
  }
  .trust-badges:hover .tb-track,
  .trust-badges:focus-within .tb-track {
    animation-play-state: paused;
  }
  @keyframes tb-scroll {
    from { transform: translateX(0); }
    to   { transform: translateX(-50%); }
  }
  .tb-item { flex-shrink: 0; }
}
@media (max-width: 480px) and (prefers-reduced-motion: reduce) {
  .tb-track { animation: none; }
  .trust-badges { overflow-x: auto; scrollbar-width: none; }
  .trust-badges::-webkit-scrollbar { display: none; }
}

/* ── Page Loading State ── */
body:not(.loaded) .hh-content,
body:not(.loaded) .ph-content,
body:not(.loaded) .page-hero-content {
  opacity: 0;
  animation: mgRevealFailsafe .01s linear 1.5s forwards;
}
body.loaded .hh-content,
body.loaded .ph-content,
body.loaded .page-hero-content {
  animation: contentReveal .6s cubic-bezier(.22, .68, 0, 1.2) both;
}
@keyframes contentReveal {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}
body:not(.loaded)::after {
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
  z-index: 500;
  animation: loadingBar 1.2s ease-in-out infinite;
}
body.loaded::after {
  display: none;
}
@keyframes loadingBar {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* ── Enhanced Card Micro-Interactions ── */
.card .card-icon svg {
  transition: transform .3s var(--ease), color .3s;
}
.card:hover .card-icon svg {
  transform: scale(1.15) rotate(-5deg);
  color: var(--g-text);
}
.card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
  transform: scaleX(0);
  transition: transform .4s var(--ease2);
}
.card:hover::before {
  transform: scaleX(1);
}
.card { position: relative; overflow: hidden; }

/* Blog card image zoom on hover */
.blog-card .blog-img {
  transition: transform .5s var(--ease2);
  overflow: hidden;
}
.blog-card:hover .blog-img {
  transform: scale(1.03);
}

/* Button arrow nudge */
.btn-primary svg, .btn-ghost svg {
  transition: transform .25s var(--ease2);
}
.btn-primary:hover svg, .btn-ghost:hover svg {
  transform: translateX(3px);
}

/* Stat number glow on hover */
.stat-box:hover .stat-num,
.stat:hover .stat-num {
  text-shadow: 0 0 20px rgba(128, 217, 89, .3);
  transition: text-shadow .3s;
}

/* ── Nav Phone ── */
.nav-phone{display:flex;align-items:center;gap:6px;font-size:12px;font-weight:600;color:var(--text-faint);letter-spacing:.3px;transition:color .2s, background .2s;}
.nav-phone:hover{color:var(--g-text);}
.nav-phone svg{width:14px;height:14px;stroke:var(--g);fill:none;stroke-width:2;flex-shrink:0;}
@media(max-width:900px){.nav-phone{display:none;}}
/* Mobile nav: declutter the bar so the brand lockup has room.
   The Ask-Jouli pill, the inline CTAs and the call button all live in the
   menu / bottom CTA bar — the top bar keeps only search + theme + menu. */
@media(max-width:768px){
  .nav-ctas{display:flex!important;}
  .nav-cta,.nav-cta-outline{display:none!important;}
  .nav-jouli{display:none!important;}
  .nav-phone{display:none!important;}
}

/* ── Call Float removed — replaced by Jouli widget ── */
.urgency-banner-cta:focus-visible,.rebate-link:focus-visible{outline:2px solid var(--focus);outline-offset:2px;}

/* ── Nav Hidden (mobile scroll) ── */
.nav-hidden{transform:translateY(-100%);}

/* ── Urgency Banner ── */
.urgency-banner{background:rgba(128,217,89,.04);border:1px solid rgba(128,217,89,.15);border-left:3px solid var(--g);border-radius:var(--r12);padding:20px 28px;display:flex;align-items:center;gap:16px;margin:40px auto 0;max-width:800px;}
.urgency-banner-icon{width:40px;height:40px;border-radius:50%;background:var(--g10);border:1px solid var(--g20);display:flex;align-items:center;justify-content:center;flex-shrink:0;}
.urgency-banner-icon svg{width:20px;height:20px;stroke:var(--g);fill:none;stroke-width:2;}
.urgency-banner-text{font-size:14px;color:var(--text-faint);line-height:1.7;}
.urgency-banner-text strong{color:var(--text);font-weight:600;}
.urgency-banner-cta{font-size:13px;font-weight:700;color:var(--g-text);white-space:nowrap;margin-left:auto;transition:opacity .2s;}
.urgency-banner-cta:hover{opacity:.7;}
@media(max-width:600px){.urgency-banner{flex-direction:column;text-align:center;padding:20px;}.urgency-banner-cta{margin-left:0;margin-top:8px;}}

/* ── Breadcrumbs (nav) ── */
.breadcrumb-nav{padding:12px 5%;font-size:12px;color:var(--text-muted);position:relative;z-index:2;}
.breadcrumb-nav a{color:var(--text-muted);transition:color .2s;}
.breadcrumb-nav a:hover{color:var(--g-text);}
.bc-sep{margin:0 8px;opacity:.5;}

/* ── Print Styles ── */
@media print{
  .wa-float,.social-float,.cookie-banner,.sticky-cta,.exit-popup-overlay,nav,.back-to-top,.fab-menu,.scroll-progress,.call-float,#proofToast,.mobile-menu,.urgency-banner,.toast{display:none!important;}
  body{background:#fff!important;color:#000!important;-webkit-print-color-adjust:exact;}
  *{color:#000!important;background:transparent!important;box-shadow:none!important;text-shadow:none!important;}
  section{background:transparent!important;}
  .card{border:1px solid #ddd!important;background:#f9f9f9!important;}
  a{color:#000!important;text-decoration:underline!important;}
  .btn-primary,.btn-secondary,.cta-band{border:1px solid #333!important;background:#eee!important;}
  footer{border-top:1px solid #ccc!important;}
  h1,h2,h3{color:#000!important;}
  .g,.stat-num,.ba-num,.rebate-value,.impact-num{color:#2d7a0f!important;}
}

/* ══════════════════════════════════════
   V6 DESIGN ENHANCEMENTS
   ══════════════════════════════════════ */

/* ── 1. Animated Section Dividers ── */
.section-divider {
  width: 100%;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g30), var(--g), var(--g30), transparent);
  margin: 0;
  position: relative;
  overflow: hidden;
}
.section-divider::after {
  content: '';
  position: absolute;
  top: -1px;
  left: -100%;
  width: 60%;
  height: 3px;
  background: linear-gradient(90deg, transparent, var(--g), transparent);
 /* ambient loop removed */
}
@keyframes dividerGlow {
  0% { left: -60%; }
  100% { left: 100%; }
}

/* ── Glass Box Utility ── */
.glass-box {
  background: var(--glass);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  transform: translateZ(0);
}

/* ── 2. Glassmorphism Feature Callout Box ── */
.glass-callout {
  background: rgba(128, 217, 89, .06);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid var(--g20);
  border-radius: var(--r16);
  padding: 32px 36px;
  display: flex;
  align-items: center;
  gap: 24px;
  margin: 40px auto;
  max-width: 800px;
  position: relative;
  overflow: hidden;
}
.glass-callout::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--g30), transparent);
}
.glass-callout-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--g10);
  border: 1px solid var(--g20);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.glass-callout-icon svg { width: 24px; height: 24px; max-width: 24px; max-height: 24px; }
.glass-callout-text strong {
  display: block;
  font-family: var(--fh);
  font-size: 16px; font-weight: 700;
  color: var(--text); margin-bottom: 4px;
}
.glass-callout-text span {
  font-size: 14px;
  color: var(--text-muted);
  line-height: 1.5;
}
@media (max-width: 600px) {
  .glass-callout { flex-direction: column; text-align: center; padding: 24px 20px; }
}

/* ── 3. Animated Number Ticker ── */
.ticker-num {
  display: inline-block;
  font-family: var(--fh);
  font-weight: 800;
  color: var(--g-text);
  transition: transform .3s var(--ease);
}
.ticker-num.counting {
  animation: tickerPulse .6s ease-out;
}
@keyframes tickerPulse {
  0% { transform: scale(1.2); opacity: .7; }
  100% { transform: scale(1); opacity: 1; }
}

/* ── 4. Enhanced Partner Logo Grid ── */
.partner-box { position: relative; overflow: hidden; }
.partner-box::after {
  content: '';
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 2px;
  background: var(--g);
  transform: scaleX(0);
  transition: transform .3s var(--ease2);
  transform-origin: left;
}
.partner-box:hover::after { transform: scaleX(1); }

/* ── 5. Scroll Progress Indicator ── */
.scroll-progress {
  position: fixed;
  top: 0; left: 0;
  height: 3px;
  background: linear-gradient(90deg, var(--g), var(--gh));
  z-index: 500;
  transform-origin: left;
  transform: scaleX(0);
  transition: none;
  pointer-events: none;
}

/* ── 6. Enhanced CTA Band Glow ── */
.cta-band { position: relative; overflow: hidden; }
.cta-band::before {
  content: '';
  position: absolute;
  top: -50%; left: -50%;
  width: 200%; height: 200%;
  background: radial-gradient(circle at 30% 50%, rgba(128, 217, 89, .08) 0%, transparent 60%),
              radial-gradient(circle at 70% 50%, rgba(128, 217, 89, .05) 0%, transparent 50%);
 /* ambient loop removed */
  pointer-events: none;
}
@keyframes ctaGlow {
  0% { transform: translate(0, 0); }
  100% { transform: translate(5%, -3%); }
}

/* ── 7. Eco-item Gradient Border Animation ── */
.eco-item { position: relative; }
.eco-item::before {
  content: '';
  position: absolute; inset: 0;
  border-radius: inherit;
  padding: 1px;
  background: linear-gradient(135deg, transparent 30%, var(--g30) 50%, transparent 70%);
  background-size: 300% 300%;
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask-composite: exclude;
  opacity: 0;
  transition: opacity .4s;
}
.eco-item:hover::before {
  opacity: 1;
 /* ambient loop removed */
}
@keyframes borderShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* ── 8. Testimonial Quote Accent Bar ── */
.cs-quote {
  position: relative;
  padding-left: 16px;
}
.cs-quote::before {
  content: '';
  position: absolute;
  left: 0; top: 2px; bottom: 2px;
  width: 3px;
  background: linear-gradient(to bottom, var(--g), transparent);
  border-radius: 3px;
}

/* ── 9. Back-to-Top Button ── */
.back-to-top {
  position: fixed;
  bottom: 30px; left: 30px;
  width: 44px; height: 44px;
  border-radius: 50%;
  background: var(--glass-strong);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  display: flex; align-items: center; justify-content: center;
  cursor: pointer;
  opacity: 0; visibility: hidden;
  transform: translateY(10px) translateZ(0);
  transition: opacity .3s, visibility .3s, transform .3s, background .2s, border-color .2s;
  z-index: 400;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .3);
}
.back-to-top svg {
  width: 18px; height: 18px;
  stroke: var(--g); fill: none;
  stroke-width: 2.5; stroke-linecap: round;
}
.back-to-top.visible {
  opacity: 1; visibility: visible;
  transform: translateY(0);
}
.back-to-top:hover {
  background: var(--glass-hover);
  border-color: var(--glass-strong-border);
}
.back-to-top:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}
@media (max-width: 768px) {
  .back-to-top { bottom: 20px; left: 20px; width: 38px; height: 38px; }
}

/* ── 10. Notification Toast ── */
.toast {
  position: fixed;
  top: 80px; right: 20px;
  background: var(--glass-strong);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid var(--glass-border);
  border-left: 3px solid var(--g);
  border-radius: var(--r8);
  padding: 14px 20px;
  display: flex; align-items: center; gap: 12px;
  z-index: 300;
  transform: translateX(120%) translateZ(0);
  transition: transform .4s var(--ease);
  box-shadow: 0 8px 30px rgba(0, 0, 0, .4);
  max-width: 360px;
}
.toast.visible { transform: translateX(0); }
.toast-icon {
  width: 32px; height: 32px;
  border-radius: 50%;
  background: var(--g10);
  display: flex; align-items: center; justify-content: center;
  flex-shrink: 0;
  overflow: hidden;
}
.toast-icon svg { width: 16px; height: 16px; max-width: 16px; max-height: 16px; }
.toast-text { font-size: 13px; color: var(--text-faint); line-height: 1.4; }
.toast-text strong { color: var(--text); display: block; margin-bottom: 2px; font-size: 14px; }
/* Mobile: move toasts below nav and cap width */
@media (max-width: 768px) {
  .toast { top: auto; bottom: 80px; right: 12px; left: 12px; max-width: none; z-index: 90; }
}

/* ── Phase 1B: Cookie/CTA stacking fix ── */
body.cookie-visible .sticky-cta { bottom: -80px !important; }
/* While the cookie banner is up, drop the mobile bottom CTA so they don't overlap. */
body.cookie-visible .mobile-cta-bar { transform: translateY(100%); }

/* ── Phase 1D: Social float scroll-gated ── */
.social-float { opacity: 0; pointer-events: none; transition: opacity .4s var(--ease2); }
.social-float.visible { opacity: 1; pointer-events: all; }

/* ── Phase 6A: Page load fade-in ── */
body { opacity: 0; transition: opacity .3s ease; animation: mgRevealFailsafe .01s linear 1.5s forwards; }
body.loaded { opacity: 1; animation: none; }
/* Failsafe: reveal even if main.js never adds .loaded (JS off / slow / failed to load) — no blank page, helps perceived LCP. JS-off short-circuits instantly via @media scripting. */
@keyframes mgRevealFailsafe { to { opacity: 1; } }
@media (scripting: none) {
  body { opacity: 1 !important; animation: none !important; }
  body:not(.loaded) .hh-content, body:not(.loaded) .ph-content, body:not(.loaded) .page-hero-content { opacity: 1 !important; }
}

/* ── Phase 6B: Mobile menu link stagger ── */
.mobile-menu.open a {
  opacity: 0;
  transform: translateY(10px);
  animation: mob-link-in .3s forwards;
}
@keyframes mob-link-in { to { opacity: 1; transform: translateY(0); } }
.mobile-menu.open a:nth-child(1) { animation-delay: .03s; }
.mobile-menu.open a:nth-child(2) { animation-delay: .06s; }
.mobile-menu.open a:nth-child(3) { animation-delay: .09s; }
.mobile-menu.open a:nth-child(4) { animation-delay: .12s; }
.mobile-menu.open a:nth-child(5) { animation-delay: .15s; }
.mobile-menu.open a:nth-child(6) { animation-delay: .18s; }
.mobile-menu.open a:nth-child(7) { animation-delay: .21s; }
.mobile-menu.open a:nth-child(8) { animation-delay: .24s; }
.mobile-menu.open a:nth-child(9) { animation-delay: .27s; }
.mobile-menu.open a:nth-child(10) { animation-delay: .30s; }
.mobile-menu.open a:nth-child(n+11) { animation-delay: .33s; }

/* ── Phase 2C: Card variants ── */
.card--featured {
  border-top: 3px solid var(--g);
  background: var(--glass-strong);
}
.card--featured:hover { border-top-color: var(--gh); }

.card--numbered { position: relative; padding-top: 48px; }
.card--numbered::before {
  content: attr(data-step);
  position: absolute;
  top: 16px;
  left: 28px;
  font-family: var(--fh);
  font-size: 28px;
  font-weight: 800;
  color: var(--g20);
}

/* ── Phase 2A: Section divider variants ── */
.section-divider--dot {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 20px 0;
}
.section-divider--dot::before,
.section-divider--dot::after,
.section-divider--dot span {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--g30);
}
.section-divider--dot span { display: block; }

.section-divider--fade {
  height: 40px;
  background: linear-gradient(to bottom, var(--d1), var(--bk));
}

/* ── Phase 5A: Breadcrumbs ── */
.breadcrumb {
  font-family: var(--fb);
  font-size: 11px;
  color: var(--text-muted);
  margin-bottom: 16px;
  letter-spacing: .5px;
}
.breadcrumb a {
  color: var(--text-muted);
  text-decoration: none;
  transition: color .2s;
}
.breadcrumb a:hover { color: var(--g-text); }
.breadcrumb span { margin: 0 6px; }

/* ── Phase 3B: Form trust signals ── */
.form-trust {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  flex-wrap: wrap;
  margin-top: 16px;
  font-size: 12px;
  color: var(--text-muted);
}
.form-trust-item {
  display: flex;
  align-items: center;
  gap: 6px;
}
.form-trust-item svg { flex-shrink: 0; }

/* ── Nav Review Badge ── */
.nav-review-badge { display:flex; align-items:center; gap:5px; font-family:var(--fb); font-size:12px; font-weight:700; color:var(--g-text); padding:5px 12px; border:1px solid rgba(128,217,89,.15); border-radius:var(--r-pill); text-decoration:none; transition:all .3s var(--ease2); white-space:nowrap; }
.nav-review-badge:hover { background:rgba(128,217,89,.08); border-color:rgba(128,217,89,.3); }
.nav-review-badge svg { flex-shrink:0; }
.nav-rb-count { font-weight:400; color:var(--text-faint); font-size:11px; }
@media (max-width:1100px) { .nav-review-badge { display:none; } }

/* ── Mega Menu Keyboard Focus ── */
.ni.mm-open > .mm { opacity:1; visibility:visible; transform:translateY(0); pointer-events:auto; }
.mm a:focus-visible { outline:2px solid var(--focus); outline-offset:2px; border-radius:4px; }

/* ── Theme Toggle ── */
.theme-toggle { display:flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.08); cursor:pointer; color:var(--text-faint); transition:all .3s; flex-shrink:0; }
.theme-toggle:hover { background:rgba(128,217,89,.1); color:var(--g-text); border-color:rgba(128,217,89,.2); }
.theme-toggle .ti-moon { display:none; }
[data-theme="light"] .theme-toggle .ti-sun { display:none; }
[data-theme="light"] .theme-toggle .ti-moon { display:block; }

/* ── Light Mode Overrides ── */
[data-theme="light"] {
  --bk:#f5f5f0; --d1:#eceee8; --d2:#e3e5df; --d3:#d9dbd5; --d4:#cfd1cb;
  /* Frosted-glass panels — subtle dark tint on the warm-grey light background.
     Must be dark-on-light so borders/backgrounds are actually visible. */
  --glass: rgba(12,16,10,0.035);
  --glass-border: rgba(12,16,10,0.09);
  --glass-hover: rgba(12,16,10,0.055);
  --glass-blur: blur(20px);
  --glass-strong: rgba(12,16,10,0.05);
  --glass-strong-border: rgba(128,217,89,.35);
  --glass-shadow: 0 4px 24px rgba(0,0,0,.06), 0 1px 3px rgba(0,0,0,.04), inset 0 1px 0 rgba(255,255,255,.6);
  --gh:#4D9E1A;
  /* ── Semantic foreground tokens — light theme (all pass WCAG AA) ── */
  --text:        #1a1a1a;
  --text-muted:  rgba(0, 0, 0, .62);   /* ~4.6:1 on the warm-grey bg */
  --text-faint:  rgba(0, 0, 0, .5);
  --border:      rgba(0, 0, 0, .08);
  --g-text:      #2f6b14;                /* ~5:1 ink-green for text/links/focus */
  --focus:       #2f6b14;
}
[data-theme="light"] body { color:var(--text); background:var(--bk); }
/* Force all sections with inline background to use light values */
/* Honour each section's inline background intent; nth-child is only a
   fallback for sections that set no inline background (no !important). */
[data-theme="light"] section { background-color:var(--bk); }
[data-theme="light"] section:nth-child(even) { background-color:var(--d1); }
/* Hero */
[data-theme="light"] .hh { background:var(--d1) !important; }
[data-theme="light"] .hh-bg { opacity:.03; }
/* Increase orb visibility so backdrop-blur has something to blur against */
[data-theme="light"] .hh-g1, [data-theme="light"] .hh-g2, [data-theme="light"] .phbg-g1, [data-theme="light"] .phbg-g2 { opacity:.18; }
/* ── Light mode Nav glassmorphism ── */
[data-theme="light"] nav {
  background: rgba(245,245,240,0.78) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border-bottom: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 2px 20px rgba(0,0,0,.06) !important;
}
[data-theme="light"] nav.scrolled {
  background: rgba(245,245,240,0.88) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.08) !important;
}
/* ── Light mode glass cards ── */
[data-theme="light"] .card,
[data-theme="light"] .stat-box,
[data-theme="light"] .stat,
[data-theme="light"] .cs-card,
[data-theme="light"] .partner-box,
[data-theme="light"] .review-card,
[data-theme="light"] .timeline-step,
[data-theme="light"] .benefit-card,
[data-theme="light"] .calc-wrap,
[data-theme="light"] .compare-panel {
  background: var(--glass) !important;
  backdrop-filter: var(--glass-blur) !important;
  -webkit-backdrop-filter: var(--glass-blur) !important;
  border-color: var(--glass-border) !important;
  box-shadow: var(--glass-shadow) !important;
}
[data-theme="light"] .card:hover,
[data-theme="light"] .stat-box:hover,
[data-theme="light"] .stat:hover,
[data-theme="light"] .cs-card:hover {
  background: var(--glass-hover) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.10), 0 2px 6px rgba(0,0,0,.06), inset 0 1px 0 rgba(255,255,255,.98) !important;
}
/* ── Light mode footer glass ── */
[data-theme="light"] footer {
  background: rgba(255,255,255,0.50) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 -2px 20px rgba(0,0,0,.05) !important;
}
/* ── Light mode sticky elements glass ── */
[data-theme="light"] .sticky-cta {
  background: rgba(245,245,240,0.88) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border-top: 1px solid rgba(255,255,255,0.8) !important;
  box-shadow: 0 -4px 20px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .cookie-banner {
  background: rgba(245,245,240,0.92) !important;
  backdrop-filter: blur(20px) !important;
  -webkit-backdrop-filter: blur(20px) !important;
  border: 1px solid rgba(255,255,255,0.85) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,.08) !important;
}
/* Theme toggle button in light mode */
[data-theme="light"] .theme-toggle {
  background: rgba(255,255,255,0.55) !important;
  border-color: rgba(0,0,0,.1) !important;
  color: rgba(0,0,0,.5) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,.06) !important;
}
[data-theme="light"] .theme-toggle:hover {
  background: rgba(128,217,89,.15) !important;
  color: #4D9E1A !important;
  border-color: rgba(128,217,89,.4) !important;
}
[data-theme="light"] .hh-h1, [data-theme="light"] .ph-h1 { color:#1a1a1a; }
[data-theme="light"] .hh-h1 .outline { -webkit-text-stroke-color:rgba(0,0,0,.45); }
[data-theme="light"] .ph-content h1 .outline { -webkit-text-stroke-color:rgba(0,0,0,.45); }
[data-theme="light"] .hh-sub, [data-theme="light"] .ph-sub { color:rgba(0,0,0,.55); }
[data-theme="light"] .hh-badge { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .hh-badge span { color:rgba(0,0,0,.6); }
[data-theme="light"] .trust-strip { border-color:rgba(0,0,0,.06); }
[data-theme="light"] .trust-num { color:#1a1a1a; }
[data-theme="light"] .trust-lbl { color:rgba(0,0,0,.62); }
[data-theme="light"] .trust-div { background:rgba(0,0,0,.08); }
/* Pillar & Eco cards */
[data-theme="light"] .pillar { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .pillar h3 { color:#1a1a1a; }
[data-theme="light"] .pillar p { color:rgba(0,0,0,.55); }
[data-theme="light"] .p-num { color:rgba(0,0,0,.04); }
[data-theme="light"] .eco-item { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .eco-h { color:#1a1a1a; }
[data-theme="light"] .eco-item p { color:rgba(0,0,0,.55); }
/* Before/After */
[data-theme="light"] .ba-card { background:rgba(0,0,0,.03); }
[data-theme="light"] .ba-num { color:#1a1a1a; }
[data-theme="light"] .ba-period { color:rgba(0,0,0,.45); }
[data-theme="light"] .ba-saving { background:rgba(128,217,89,.1); color:var(--g-text); }
/* Timeline */
[data-theme="light"] .step-label { color:#1a1a1a; }
[data-theme="light"] .step-time { color:rgba(0,0,0,.45); }
/* Rebate cards */
[data-theme="light"] .rebate-card h3 { color:#1a1a1a; }
[data-theme="light"] .rebate-card p { color:rgba(0,0,0,.55); }
/* Case studies */
[data-theme="light"] .cs-card { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .cs-name, [data-theme="light"] .cs-saving { color:#1a1a1a; }
[data-theme="light"] .cs-sys, [data-theme="light"] .cs-stat-lbl { color:rgba(0,0,0,.62); }
[data-theme="light"] .cs-quote { color:rgba(0,0,0,.55); }
/* Partners */
[data-theme="light"] .partner-name { color:rgba(0,0,0,.5); }
[data-theme="light"] .partner-box { background:rgba(0,0,0,.02); border-color:rgba(0,0,0,.06); }
/* Calculator */
[data-theme="light"] .calc-result-num { color:var(--g-text); }
[data-theme="light"] .calc-result-lbl { color:rgba(0,0,0,.5); }
[data-theme="light"] .calc-r-row { color:rgba(0,0,0,.55); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .calc-r-row span:last-child { color:#1a1a1a; }
/* Page hero backgrounds */
[data-theme="light"] .page-hero { background:var(--d1) !important; }
[data-theme="light"] .phbg, [data-theme="light"] .page-hero::before { opacity:.03; }
/* Section dividers */
[data-theme="light"] .section-divider { background:rgba(0,0,0,.04); }
[data-theme="light"] .section-divider::before { background:linear-gradient(90deg,transparent,rgba(128,217,89,.3),transparent); }
/* Misc text that uses hardcoded rgba white */
[data-theme="light"] .nav-phone { color:rgba(0,0,0,.6); }
[data-theme="light"] .hh-neighbour, [data-theme="light"] .hh-neighbour span { color:rgba(0,0,0,.5) !important; border-color:rgba(0,0,0,.06); }
[data-theme="light"] .hh-grid { opacity:.03; }
/* Nav branding text */
[data-theme="light"] .nla { color:#1a1a1a !important; }
[data-theme="light"] .nlb { color:rgba(0,0,0,.45) !important; }
/* CTA trust & trend badges */
[data-theme="light"] .cta-trust { color:rgba(0,0,0,.45) !important; }
[data-theme="light"] .trend-badge, [data-theme="light"] .trend-badge span { color:rgba(0,0,0,.5) !important; }
/* Urgency banner */
[data-theme="light"] .urgency-banner-text { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] .urgency-banner-text strong { color:#1a1a1a !important; }
[data-theme="light"] .urgency-banner { background:rgba(0,0,0,.03) !important; border-color:rgba(0,0,0,.06) !important; }
/* Before/After tags */
[data-theme="light"] .ba-tag { color:rgba(0,0,0,.5) !important; background:rgba(0,0,0,.04) !important; }
[data-theme="light"] .ba-tag-green { color:var(--g-text) !important; background:rgba(128,217,89,.1) !important; }
/* Case study white text */
[data-theme="light"] .cs-stat-val { color:#1a1a1a !important; }
[data-theme="light"] .cs-saving-lbl { color:rgba(0,0,0,.62) !important; }
[data-theme="light"] .cs-loc { color:rgba(0,0,0,.62) !important; }
/* CTA band btn-dark stays readable (white text on green bg is fine) */
/* Hamburger menu icon */
[data-theme="light"] .nav-mob span { background:#1a1a1a; }
/* Form inputs with inline white text */
[data-theme="light"] input, [data-theme="light"] select, [data-theme="light"] textarea { color:#1a1a1a !important; }
[data-theme="light"] input::placeholder { color:rgba(0,0,0,.3) !important; }
/* Step numbers & process text */
[data-theme="light"] .p-num { color:rgba(0,0,0,.04) !important; }
/* Section inline style overrides for white text */
[data-theme="light"] [style*="color:var(--text)"], [data-theme="light"] [style*="color: var(--text)"] { color:#1a1a1a !important; }
[data-theme="light"] [style*="color:rgba(255,255,255"], [data-theme="light"] [style*="color: rgba(255,255,255"] { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] [style*="color:rgba(244,247,238"] { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] nav { background:rgba(245,245,240,.92); backdrop-filter:blur(16px); -webkit-backdrop-filter:blur(16px); }
[data-theme="light"] nav.scrolled { background:rgba(245,245,240,.96); box-shadow:0 1px 12px rgba(0,0,0,.08); }
[data-theme="light"] .nav-logo-name { color:#1a1a1a; }
[data-theme="light"] .nav-links a { color:#1a1a1a; }
[data-theme="light"] .nav-cta-outline { color:#1a1a1a; border-color:rgba(0,0,0,.15); }
[data-theme="light"] .section-h2 { color:#1a1a1a; }
[data-theme="light"] .section-sub { color:rgba(0,0,0,.55); }
[data-theme="light"] .card { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .card h3, [data-theme="light"] .card h4 { color:#1a1a1a; }
[data-theme="light"] .card p { color:rgba(0,0,0,.55); }
[data-theme="light"] .card-icon { background:rgba(128,217,89,.1); border-color:rgba(128,217,89,.2); }
[data-theme="light"] .btn-secondary { color:#1a1a1a; border-color:rgba(0,0,0,.15); }
[data-theme="light"] footer { background:rgba(0,0,0,.03); }
[data-theme="light"] footer, [data-theme="light"] .ft-col a, [data-theme="light"] .ft-contact, [data-theme="light"] footer p { color:rgba(0,0,0,.55); }
[data-theme="light"] .ft-bottom, [data-theme="light"] .ft-bottom a, [data-theme="light"] .ft-bottom span { color:rgba(0,0,0,.45) !important; }
[data-theme="light"] .ft-brand p, [data-theme="light"] .ft-contact { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] .ft-col .ft-h { color:rgba(0,0,0,.45) !important; }
[data-theme="light"] .ft-social a { background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; }
[data-theme="light"] .ft-social a svg { fill:rgba(0,0,0,.4) !important; }
[data-theme="light"] .ft-h, [data-theme="light"] .ft-logo span { color:#1a1a1a; }
[data-theme="light"] .cta-band { background:linear-gradient(135deg,#80D959,#5aaa32); }
[data-theme="light"] .cta-band h2 { color:#0C100A; }
[data-theme="light"] .cookie-banner { background:rgba(245,245,240,.96); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .cookie-banner p { color:rgba(0,0,0,.6); }
[data-theme="light"] .cookie-decline { color:rgba(0,0,0,.5) !important; border-color:rgba(0,0,0,.15) !important; }
[data-theme="light"] .cookie-decline:hover { color:rgba(0,0,0,.8) !important; border-color:rgba(0,0,0,.3) !important; }
[data-theme="light"] .sticky-cta { background:rgba(245,245,240,.96); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .sticky-cta-text span { color:#1a1a1a; }
[data-theme="light"] .faq-q { color:#1a1a1a; }
[data-theme="light"] .faq-a { color:rgba(0,0,0,.6); }
[data-theme="light"] .glass-callout { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .glass-callout-text strong { color:#1a1a1a; }
[data-theme="light"] .glass-callout-text span { color:rgba(0,0,0,.5); }
[data-theme="light"] .calc-wrap, [data-theme="light"] .calc-result { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .calc-field input, [data-theme="light"] .calc-field select { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); color:#1a1a1a; }
[data-theme="light"] .calc-field label { color:rgba(0,0,0,.5); }
[data-theme="light"] .review-card { background:rgba(0,0,0,.03); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .review-text { color:rgba(0,0,0,.6); }
[data-theme="light"] .review-author { color:#1a1a1a; }
[data-theme="light"] .review-meta { color:rgba(0,0,0,.35); }
[data-theme="light"] .tab-btn { color:rgba(0,0,0,.45); }
[data-theme="light"] .tab-btn.active { color:var(--g-text); }
[data-theme="light"] .form-group input, [data-theme="light"] .form-group select, [data-theme="light"] .form-group textarea { background:rgba(0,0,0,.04); border-color:rgba(0,0,0,.08); color:#1a1a1a; }
[data-theme="light"] .compare-table td { color:rgba(0,0,0,.6); border-color:rgba(0,0,0,.06); }
[data-theme="light"] .compare-btn { color:rgba(0,0,0,.5); border-color:rgba(0,0,0,.1); }
[data-theme="light"] .compare-btn.active { color:#0C100A !important; background:rgba(128,217,89,.22) !important; border-color:rgba(128,217,89,.5) !important; }
[data-theme="light"] .icon-strip-item h3, [data-theme="light"] .icon-strip-item h4 { color:#1a1a1a; }
[data-theme="light"] .icon-strip-item p { color:rgba(0,0,0,.5); }
[data-theme="light"] .trust-badges { background:rgba(0,0,0,.02); }
[data-theme="light"] .tb-info strong { color:#1a1a1a; }
[data-theme="light"] .tb-info span { color:rgba(0,0,0,.45); }
[data-theme="light"] .mobile-menu { background:rgba(245,245,240,.98); }
[data-theme="light"] .mobile-menu a, [data-theme="light"] .mob-section-label { color:#1a1a1a; }
[data-theme="light"] .exit-popup { background:rgba(245,245,240,.98); border-color:rgba(0,0,0,.08); }
[data-theme="light"] .exit-popup h3 { color:#1a1a1a; }
[data-theme="light"] .exit-popup p { color:rgba(0,0,0,.55); }
[data-theme="light"] .exit-skip { color:rgba(0,0,0,.4) !important; }
[data-theme="light"] .exit-skip:hover { color:rgba(0,0,0,.65) !important; }
/* ── Light-mode: top bar ── */
/* ── Light-mode: mega menu ── */
[data-theme="light"] .mm-col ul li a { color:rgba(0,0,0,.6) !important; }
[data-theme="light"] .mm-col ul li a:hover { color:var(--g-text) !important; }
[data-theme="light"] .mm-feat p { color:rgba(0,0,0,.5) !important; }
/* ── Light-mode: page hero ── */
[data-theme="light"] .ph-content h1 { color:#1a1a1a !important; }
[data-theme="light"] .ph-content > p { color:rgba(0,0,0,.5) !important; }
/* ── Light-mode: feature rows ── */
[data-theme="light"] .feat-row-text h3 { color:#1a1a1a !important; }
[data-theme="light"] .feat-row-text > p { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] .feat-content h3 { color:#1a1a1a !important; }
[data-theme="light"] .feat-content > p { color:rgba(0,0,0,.55) !important; }
[data-theme="light"] .fli-txt { color:rgba(0,0,0,.55) !important; }
/* ── Light-mode: steps ── */
[data-theme="light"] .step h3, [data-theme="light"] .step h4 { color:#1a1a1a !important; }
[data-theme="light"] .step p { color:rgba(0,0,0,.5) !important; }
/* ── Light-mode: blog cards ── */
[data-theme="light"] .blog-card h4 { color:#1a1a1a !important; }
[data-theme="light"] .blog-card p { color:rgba(0,0,0,.55) !important; }
/* ── Light-mode: forms ── */
[data-theme="light"] .fg label { color:rgba(0,0,0,.5) !important; }
[data-theme="light"] .form-legal { color:rgba(0,0,0,.4) !important; }
[data-theme="light"] .form-group label { color:rgba(0,0,0,.5) !important; }
/* ── Light-mode: breadcrumbs ── */
[data-theme="light"] .breadcrumb-nav, [data-theme="light"] .breadcrumb-nav a { color:rgba(0,0,0,.4) !important; }
[data-theme="light"] .breadcrumb-nav a:hover { color:var(--g-text) !important; }
/* ── Light-mode: sticky CTA ── */
[data-theme="light"] .sticky-phone { color:rgba(0,0,0,.5) !important; }
/* ── Light-mode: exit popup close ── */
[data-theme="light"] .exit-popup-close { color:rgba(0,0,0,.4) !important; }
[data-theme="light"] .exit-popup-close:hover { color:rgba(0,0,0,.7) !important; }
/* ── Light-mode: nav review badge ── */
[data-theme="light"] .nav-rb-count { color:rgba(0,0,0,.4) !important; }
/* ── Light-mode: bar chart labels ── */
[data-theme="light"] .bci-lbl { color:rgba(0,0,0,.5) !important; }
[data-theme="light"] ::-webkit-scrollbar-track { background:var(--bk); }
@media (max-width:768px) { .theme-toggle { width:32px; height:32px; } }

/* ── Technical Term Tooltips ── */
.term-tip { position:relative; text-decoration:none; border-bottom:1px dotted rgba(128,217,89,.4); cursor:help; color:inherit; font-style:normal; }
.term-tip::after { content:attr(data-tooltip); position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%) translateY(4px); padding:8px 14px; background:rgba(12,16,10,.95); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px); border:1px solid rgba(128,217,89,.15); border-radius:8px; font-family:var(--fb); font-size:12px; font-weight:400; color:var(--text); line-height:1.5; white-space:nowrap; max-width:280px; white-space:normal; pointer-events:none; opacity:0; visibility:hidden; transition:all .2s var(--ease2); z-index:100; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.term-tip:hover::after, .term-tip:focus::after { opacity:1; visibility:visible; transform:translateX(-50%) translateY(0); }
@media (max-width:768px) {
  .term-tip::after { position:fixed; bottom:0; left:0; right:0; top:auto; transform:translateY(100%); border-radius:12px 12px 0 0; max-width:none; text-align:center; padding:14px 20px; }
  .term-tip:hover::after, .term-tip:focus::after { transform:translateY(0); }
}

/* ── Share Buttons ── */
.share-btn { display:inline-flex; align-items:center; gap:8px; padding:12px 24px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.12); border-radius:var(--r-pill); color:var(--text); font-family:var(--fb); font-size:14px; font-weight:500; cursor:pointer; transition:all .3s var(--ease2); }
.share-btn:hover { background:rgba(128,217,89,.1); border-color:rgba(128,217,89,.3); color:var(--g-text); }
.share-btn:focus-visible { outline:2px solid var(--focus); outline-offset:2px; }
.share-btn svg { flex-shrink:0; }

/* ── Light-mode overrides: pages.css components ── */
/* Compare tabs */
[data-theme="light"] .compare-tab { color:rgba(0,0,0,.5) !important; background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.08) !important; }
[data-theme="light"] .compare-tab:hover { color:rgba(0,0,0,.8) !important; border-color:rgba(0,0,0,.15) !important; }
[data-theme="light"] .compare-tab.active { color:var(--g-text) !important; background:var(--g10) !important; border-color:var(--g30) !important; }
/* Compare table first-column labels */
[data-theme="light"] .compare-table tbody td:first-child { color:rgba(0,0,0,.75) !important; }
[data-theme="light"] .compare-table thead th { color:#1a1a1a !important; background:rgba(0,0,0,.03) !important; border-color:rgba(0,0,0,.06) !important; }
[data-theme="light"] .compare-table thead th:first-child { color:rgba(0,0,0,.5) !important; }
[data-theme="light"] .compare-table tbody tr:hover td { background:rgba(0,0,0,.02) !important; }
/* Share buttons */
[data-theme="light"] .share-btn { color:#1a1a1a !important; background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; }
[data-theme="light"] .share-btn:hover { color:var(--g-text) !important; background:rgba(128,217,89,.08) !important; border-color:rgba(128,217,89,.25) !important; }
/* FAQ search & feedback */
[data-theme="light"] .faq-search { color:#1a1a1a !important; background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; }
[data-theme="light"] .faq-search::placeholder { color:rgba(0,0,0,.35) !important; }
[data-theme="light"] .faq-search:focus { border-color:var(--g) !important; }
[data-theme="light"] .faq-fb-btn { color:rgba(0,0,0,.45) !important; background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; }
[data-theme="light"] .faq-fb-btn:hover { color:var(--g-text) !important; border-color:rgba(128,217,89,.25) !important; background:rgba(128,217,89,.06) !important; }
[data-theme="light"] .faq-no-results { color:rgba(0,0,0,.4) !important; }
/* Accordion triggers (programs page) */
[data-theme="light"] .acc-trigger { color:#1a1a1a !important; background:rgba(0,0,0,.03) !important; border-color:rgba(0,0,0,.08) !important; }
[data-theme="light"] .acc-trigger::after { border-color:#1a1a1a !important; }
/* Contact page quiz */
[data-theme="light"] .quiz-question { color:#1a1a1a !important; }
[data-theme="light"] .quiz-option { color:#1a1a1a !important; background:rgba(0,0,0,.04) !important; border-color:rgba(0,0,0,.1) !important; }
[data-theme="light"] .quiz-option:hover,[data-theme="light"] .quiz-option.selected { color:var(--g-text) !important; border-color:var(--g30) !important; background:var(--g10) !important; }
[data-theme="light"] .form-phone-cta { color:rgba(0,0,0,.4) !important; }
/* Bill bar section */
[data-theme="light"] .bill-bar-bg { background:rgba(0,0,0,.06) !important; }
[data-theme="light"] .bill-bar-fill { opacity:0.85; }
[data-theme="light"] .bill-label { color:#1a1a1a !important; }
[data-theme="light"] .bill-value { color:#1a1a1a !important; }
[data-theme="light"] .bill-bar-label { color:rgba(0,0,0,.5) !important; }

/* ── Enhancement: Micro-Interactions ── */
@keyframes mgRipple {
  to { transform: scale(1); opacity: 0; }
}
@keyframes fadeInUp {
  from { opacity: 0; transform: translateY(10px); }
  to { opacity: 1; transform: translateY(0); }
}
.mg-glow {
  background-image: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(128, 217, 89, .06) 0%, transparent 60%) !important;
}
.mg-glow::before {
  content: '';
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(128, 217, 89, .12) 0%, transparent 50%);
  pointer-events: none;
  z-index: 1;
  opacity: 0;
  transition: opacity .3s;
}
.mg-glow:hover::before { opacity: 1; }

/* Link underline draw-on */
.nav-links a, .ft-col a, .card-tag, .rebate-link {
  background-image: linear-gradient(var(--g), var(--g));
  background-size: 0% 1.5px;
  background-position: 0 100%;
  background-repeat: no-repeat;
  transition: background-size .3s var(--ease2), color .2s;
}
.nav-links a:hover, .ft-col a:hover, .card-tag:hover, .rebate-link:hover {
  background-size: 100% 1.5px;
}

/* Sticky CTA morph transitions */
.sticky-cta .scta-text, .sticky-cta .sticky-cta-text {
  transition: opacity .2s ease;
}

/* Geo badge animation */
.geo-badge {
  animation: fadeInUp .5s var(--ease2);
}

/* ── View Transitions ── */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: mgFadeOut .25s ease both; }
::view-transition-new(root) { animation: mgFadeIn .3s ease both; }
@keyframes mgFadeOut { to { opacity: 0; transform: scale(.98); } }
@keyframes mgFadeIn { from { opacity: 0; transform: scale(1.01); } to { opacity: 1; transform: scale(1); } }
nav { view-transition-name: nav; }

/* ── Chapter Progress Bar (mobile responsive) ── */
@media (max-width: 768px) {
  .mg-chapters { gap: 2px !important; padding: 6px 3% !important; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .mg-chapters::-webkit-scrollbar { display: none; }
  .mg-chapter-pill { font-size: 10px !important; padding: 4px 10px !important; }
}

/* ── Command Palette ── */
#cmd-input { flex: 1; background: none; border: none; outline: none; color: var(--text); font-size: 15px; font-family: var(--fb); }
#cmd-input::placeholder { color: var(--text-faint); }
[data-theme="light"] #cmd-input { color: #1a1a1a; }

/* ── Social Proof Heatmap ── */
@keyframes proofPulse {
  0% { r: 3; opacity: 1; }
  100% { r: 14; opacity: 0; }
}
.proof-map svg { display: block; }
.proof-dot { transition: fill .5s; }
.proof-ticker { flex: 1; min-width: 0; }
[data-theme="light"] .mg-proof-strip { background: rgba(255,255,255,.92) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .mg-proof-strip .pf-question { color: #1a1a1a !important; }

/* ── Progressive Form ── */
.pf-step { animation: fadeInUp .35s var(--ease2); }
[data-theme="light"] .pf-question { color: #1a1a1a !important; }
[data-theme="light"] .pf-dot { background: rgba(0,0,0,.12) !important; }
[data-theme="light"] .pf-dot[style*="#80D959"] { background: #80D959 !important; }

/* ── Light Mode: New Feature Overrides ── */
[data-theme="light"] .mg-chapters { background: rgba(245,245,240,.92) !important; border-color: rgba(0,0,0,.06) !important; }
[data-theme="light"] .mg-chapter-pill { color: rgba(0,0,0,.4) !important; }
[data-theme="light"] .mg-chapter-pill[style*="var(--g)"] { color: var(--g-text) !important; }
[data-theme="light"] .mg-proof-strip { background: rgba(255,255,255,.92) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .mg-proof-strip .proof-ticker-inner div:first-child { color: #1a1a1a !important; }
[data-theme="light"] .smap-tooltip { background: rgba(255,255,255,.95) !important; border-color: rgba(128,217,89,.3) !important; color: #1a1a1a !important; }
[data-theme="light"] .geo-badge { background: rgba(128,217,89,.1) !important; border-color: rgba(128,217,89,.25) !important; }
[data-theme="light"] .svg-text { fill: #1a1a1a; }
[data-theme="light"] .mg-glow::before { background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(128, 217, 89, .08) 0%, transparent 50%) !important; }

/* ── Phase 5B: Collapsible footer on mobile ── */
@media (max-width: 768px) {
  .ft-col > strong { cursor: pointer; display: flex; justify-content: space-between; align-items: center; }
  .ft-col > strong::after { content: '+'; font-size: 16px; color: var(--text-faint); transition: transform .3s; }
  .ft-col.open > strong::after { content: '−'; }
  .ft-col > ul { max-height: 0; overflow: hidden; transition: max-height .3s ease; }
  .ft-col.open > ul { max-height: 300px; }
}

/* ── Audit Fixes: light-mode contrast & coverage ── */
/* Primary CTAs — green background needs dark ink, not near-white (WCAG AA) */
[data-theme="light"] .nav-cta,
[data-theme="light"] .btn-primary,
[data-theme="light"] .btn,
[data-theme="light"] .hero-cta,
[data-theme="light"] .cta-primary,
[data-theme="light"] a.cta,
[data-theme="light"] button.primary,
[data-theme="light"] .btn-dark {
  color: #0C100A !important;
}
[data-theme="light"] .nav-cta:hover,
[data-theme="light"] .btn-primary:hover { color:#0C100A !important; }

/* Technical term tooltip — invert to light surface in light mode */
[data-theme="light"] .term-tip::after {
  background: rgba(255,255,255,.98) !important;
  color: #1a1a1a !important;
  border-color: rgba(128,217,89,.3) !important;
  box-shadow: 0 4px 16px rgba(0,0,0,.12) !important;
}
[data-theme="light"] .term-tip { border-bottom-color: rgba(128,217,89,.55); }

/* Trend badge background (red-tinted) becomes readable in light mode */
[data-theme="light"] .trend-badge { background: rgba(255,107,107,.12) !important; border-color: rgba(255,107,107,.25) !important; }
[data-theme="light"] .trend-badge strong { color: #c0392b !important; }

/* Commercial calculator inputs — not covered by .form-group selectors */
[data-theme="light"] .comm-calc-form input,
[data-theme="light"] .comm-calc-form select,
[data-theme="light"] .comm-calc-form textarea {
  background: rgba(0,0,0,.04) !important;
  border: 1px solid rgba(0,0,0,.1) !important;
  color: #1a1a1a !important;
}
[data-theme="light"] .comm-calc-form input::placeholder,
[data-theme="light"] .comm-calc-form textarea::placeholder { color: rgba(0,0,0,.3) !important; }
[data-theme="light"] .comm-calc-form label { color: rgba(0,0,0,.6) !important; }

/* Low-alpha white surfaces become invisible on light backgrounds.
   Replace with matching low-alpha black/ink. */
[data-theme="light"] .hh-grid { background-image: linear-gradient(rgba(0,0,0,.035) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,.035) 1px, transparent 1px) !important; opacity:.5; }
[data-theme="light"] .cs-head { background: rgba(0,0,0,.03) !important; }

/* Table/row hover that used rgba(255,255,255,.02-.06) */
[data-theme="light"] tr:hover,
[data-theme="light"] tbody tr:hover { background: rgba(0,0,0,.03) !important; }

/* Share button text in light mode */
[data-theme="light"] .share-btn { color: #1a1a1a !important; background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.08) !important; }
[data-theme="light"] .share-btn:hover { color: var(--gh) !important; background: rgba(128,217,89,.12) !important; border-color: rgba(128,217,89,.4) !important; }

/* ============================================================
   Remediation 2026-05-29 — accessibility & touch targets
   ============================================================ */

/* ── Touch targets ≥44px on touch / small screens (WCAG 2.5.5) ──
   Enlarges the tap area via min-size without changing icon visuals. */
@media (hover: none), (max-width: 768px) {
  .nav-mob {
    min-width: 44px; min-height: 44px;
    align-items: center; justify-content: center;
    box-sizing: border-box;
  }
  .theme-toggle {
    min-width: 44px !important; min-height: 44px !important;
    width: 44px !important; height: 44px !important;
  }
  .nav-search-btn {
    min-width: 44px; min-height: 44px;
    display: inline-flex; align-items: center; justify-content: center;
  }
  .nav-phone { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ── Colour-contrast: darken the brand green for small text on the light
   theme (footer badges failed WCAG AA at 1.63:1). #4f8a1e ≈ 4.6:1 on
   near-white while staying on-brand. ── */
[data-theme="light"] .ft-badge { color: #4f8a1e; border-color: rgba(79,138,30,.35); }

/* Jouli built-in tools stay hidden until explicitly launched.
   JouliActions.launchTool() reveals via inline display:block !important,
   which is the only thing that outranks this rule — so chips, platform
   cards and worker directives are the sole entry points. */
#mg-roof-simulator,
#mg-bill-autopsy,
#mg-system-configurator,
#mg-carbon-visualiser,
#mg-energy-map { display: none !important; }

/* Mobile header: keep the brand lockup to one tidy line — at narrow widths the
   tagline wrapped beneath the logo across 3 lines and collided with nav icons. */
@media (max-width: 480px) {
  .nla { white-space: nowrap; }
  .nlb, .nav-sep { display: none; }
}
/* Phones: keep the brand wordmark visible — the Ask-Jouli pill and call
   button are hidden on mobile, so the lockup fits on one line. */
@media (max-width: 430px) {
  .nla { font-size: 12px; }
  .nav-logo-a { gap: 8px; }
}

/* Dedicated Jouli nav button — primary nav CTA (glossy green, glowing orb) */
.nav-jouli { display: inline-flex; align-items: center; gap: 9px; margin-left: 6px; font: 800 13px 'Inter', system-ui, sans-serif; letter-spacing: .2px; text-decoration: none; color: #0B1207; background: linear-gradient(135deg, #a6ef79 0%, #80D959 52%, #69c93f 100%); border: 1px solid rgba(180,245,140,.55); border-radius: var(--r-pill); padding: 10px 18px 10px 14px; white-space: nowrap; box-shadow: 0 6px 18px -6px rgba(128,217,89,.6), inset 0 1px 0 rgba(255,255,255,.42); transition: box-shadow .28s ease, transform .22s ease, filter .22s ease; }
.nav-jouli:hover { transform: translateY(-1px); filter: brightness(1.04); box-shadow: 0 10px 28px -8px rgba(128,217,89,.85), inset 0 1px 0 rgba(255,255,255,.55); }
.nav-jouli:active { transform: translateY(0); filter: brightness(.99); }
/* ── Jouli orb — the living "presence" mark, used on every Jouli entry point ── */
.jouli-orb-mark, .nav-jouli-orb { position: relative; display: inline-block; vertical-align: middle; width: 16px; height: 16px; border-radius: 50%; flex: none; background: radial-gradient(circle at 34% 30%, #ffffff 0%, #eaffd2 40%, #8ad94f 74%, #57b231 100%); box-shadow: inset 0 -1px 2px rgba(74,140,38,.55), inset 0 1px 1px rgba(255,255,255,.85), 0 0 8px rgba(138,217,79,.6); animation: njPulse 3.2s ease-in-out infinite; }
.jouli-orb-mark::after, .nav-jouli-orb::after { content: ""; position: absolute; inset: 0; border-radius: 50%; pointer-events: none; background: radial-gradient(circle at 30% 26%, rgba(255,255,255,.95) 0%, rgba(255,255,255,0) 45%); animation: njShimmer 5s ease-in-out infinite; }
[data-theme="dark"] .nav-jouli { color: #0B1207; }
@keyframes njPulse { 0%,100% { box-shadow: inset 0 -1px 2px rgba(74,140,38,.55), inset 0 1px 1px rgba(255,255,255,.85), 0 0 6px rgba(138,217,79,.45); } 50% { box-shadow: inset 0 -1px 2px rgba(74,140,38,.55), inset 0 1px 1px rgba(255,255,255,.85), 0 0 14px rgba(138,217,79,.95), 0 0 22px rgba(138,217,79,.4); } }
@keyframes njShimmer { 0%,100% { transform: translate(0,0) scale(1); opacity: .95; } 50% { transform: translate(.8px,1px) scale(.9); opacity: .65; } }
@media (prefers-reduced-motion: reduce) { .jouli-orb-mark, .nav-jouli-orb, .jouli-orb-mark::after, .nav-jouli-orb::after { animation: none; } }

/* ════════ Interactive tool widgets — premium styling (compare / programs) ════════
   Scoped to body.calc-modern so the homepage's .v2-calc rules stay untouched.
   These pages render the .calc-* tools OUTSIDE the .v2-calc wrapper, so without
   this block the native <select>/<input> fall back to unstyled OS widgets. */
.calc-modern .calc-wrap { background:var(--glass,rgba(255,255,255,.04)); border:1px solid var(--border); border-radius:20px; padding:clamp(24px,4vw,44px); }
.calc-modern .calc-grid { display:grid; grid-template-columns:1fr 1fr; gap:clamp(22px,3vw,40px); align-items:start; }
@media (max-width:760px){ .calc-modern .calc-grid { grid-template-columns:1fr; gap:24px; } }
.calc-modern .calc-field { display:flex; flex-direction:column; gap:7px; margin-bottom:18px; }
.calc-modern .calc-field:last-child { margin-bottom:0; }
.calc-modern .calc-field label { font:600 11.5px/1.3 var(--fb); letter-spacing:.06em; text-transform:uppercase; color:var(--text-faint); }
.calc-modern .calc-field input,
.calc-modern .calc-field select { width:100%; height:52px; padding:0 16px; box-sizing:border-box; font:500 16px var(--fb); color:var(--text); background:var(--glass,rgba(255,255,255,.05)); border:1px solid var(--border); border-radius:12px; outline:none; -webkit-appearance:none; appearance:none; transition:border-color .15s ease, box-shadow .15s ease; }
.calc-modern .calc-field select { padding-right:42px; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2380D959' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat; background-position:right 15px center; }
.calc-modern .calc-field input:focus,
.calc-modern .calc-field select:focus { border-color:var(--g); box-shadow:0 0 0 4px var(--g20,rgba(128,217,89,.18)); }
[data-theme="light"] .calc-modern .calc-field input,
[data-theme="light"] .calc-modern .calc-field select { background-color:#fff; border-color:rgba(0,0,0,.12); color:#0C100A; }
.calc-modern .calc-result { background:var(--glass,rgba(255,255,255,.05)); border:1px solid var(--border); border-radius:16px; padding:clamp(22px,3vw,30px); }
[data-theme="light"] .calc-modern .calc-result { background:rgba(0,0,0,.025); border-color:rgba(0,0,0,.08); }
.calc-modern .calc-result-num { font:800 clamp(34px,5.5vw,50px)/1 var(--fh,var(--fb)); letter-spacing:-.03em; color:var(--g-text); }
.calc-modern .calc-result-lbl { margin:8px 0 4px; font:500 14px var(--fb); color:var(--text-muted); }
.calc-modern .calc-r-row { display:flex; justify-content:space-between; align-items:baseline; gap:16px; padding:13px 0; border-top:1px solid var(--border); font:500 14px var(--fb); color:var(--text-muted); }
.calc-modern .calc-r-row:first-of-type { margin-top:16px; }
.calc-modern .calc-r-row span:last-child { font-weight:700; color:var(--text); font-variant-numeric:tabular-nums; text-align:right; }

/* ════════ Site experience layer — ambient hero energy (theme-aware) ════════
   Soft, contrast-safe glow on EVERY .v2-hero (no markup; body overflow-x:clip
   contains horizontal bleed). Coexists with v2-motion.js hero parallax (which
   transforms .v2-hero-inner, kept above via z-index). */
.v2-hero{position:relative}
.v2-hero>*{position:relative;z-index:1}
.v2-hero::before{content:"";position:absolute;inset:0;z-index:0;pointer-events:none;
  background:radial-gradient(40% 55% at 22% 18%,rgba(128,217,89,.18),transparent 70%),radial-gradient(34% 46% at 84% 12%,rgba(106,201,63,.14),transparent 72%);
  animation:mgHeroAura 24s ease-in-out infinite alternate;will-change:transform,opacity}
[data-theme="dark"] .v2-hero::before{background:radial-gradient(42% 58% at 22% 18%,rgba(128,217,89,.34),transparent 70%),radial-gradient(36% 48% at 84% 12%,rgba(106,201,63,.24),transparent 72%)}
@keyframes mgHeroAura{0%{transform:translate3d(0,0,0) scale(1);opacity:.85}50%{transform:translate3d(2.5%,1.5%,0) scale(1.08);opacity:1}100%{transform:translate3d(-1.5%,-1%,0) scale(1.05);opacity:.9}}
/* homepage WebGL signature canvas — low opacity on light (text stays readable), rich on dark */
#mg-hero-gl{position:absolute;inset:0;width:100%;height:100%;z-index:0;pointer-events:none;opacity:.14;transition:opacity .6s ease}
[data-theme="dark"] #mg-hero-gl{opacity:.5}
@media (prefers-reduced-motion: reduce){.v2-hero::before{animation:none}}