/* ─────────────────────────────────────────────────────────────
   Leaf Loans enhancements over scraped Framer HTML
   Applied after every scrape via post-process.js
───────────────────────────────────────────────────────────── */

/* 0a. Show scrolled-variant nav (framer-v-g1fdcd) on DESKTOP only.
   On mobile/tablet, Framer renders its own responsive nav variant —
   we must not trample it with display:flex. */
@media (min-width: 992px) {
  nav.framer-v-q635xq,
  nav[data-framer-name="Desktop"] {
    display: none !important;
  }
  nav.framer-v-g1fdcd,
  nav[data-framer-name="Desktop White"] {
    display: flex !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 9999 !important;
    background-color: transparent !important;
    box-shadow: none !important;
    transition: background-color 0.24s ease, box-shadow 0.24s ease;
  }
  nav.framer-v-g1fdcd.ll-nav-solid,
  nav[data-framer-name="Desktop White"].ll-nav-solid {
    background-color: #ffffff !important;
    box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06) !important;
  }
}
/* On mobile/tablet, hide the Desktop White variant entirely so Framer's
   mobile nav (usually a hamburger) gets to render. */
@media (max-width: 991px) {
  nav.framer-v-g1fdcd,
  nav[data-framer-name="Desktop White"] {
    display: none !important;
  }
}
/* Force logo always visible (override any Framer hover-reveal animation) */
nav.framer-v-g1fdcd [data-framer-name="Logo"],
nav[data-framer-name="Desktop White"] [data-framer-name="Logo"],
nav.framer-v-g1fdcd [data-framer-name="Logo"] *,
nav[data-framer-name="Desktop White"] [data-framer-name="Logo"] * {
  opacity: 1 !important;
  visibility: visible !important;
}
/* Hide "All Pages" trigger on first paint (no JS delay flash) */
nav.framer-v-g1fdcd [data-framer-name="Dropdown Link"],
nav[data-framer-name="Desktop White"] [data-framer-name="Dropdown Link"] {
  display: none !important;
}
/* Add body top padding so content isn't hidden under the fixed nav */
body {
  padding-top: 0 !important;
}

/* 0c. Hide unused round-arrow CTAs in Infrastructure section cards */
a.framer-13ugxyy,
a[data-framer-name="Desktop"][href*="book-a-demo"].framer-O20u5 {
  display: none !important;
}

/* 0d. Option A footer — clean minimal centered layout
   Uses the original Framer lavender/peach gradient so it blends with the page */
#ll-custom-footer {
  background: linear-gradient(
    to bottom,
    rgba(245, 240, 250, 0) 0%,
    rgba(245, 240, 250, 0.5) 30%,
    #f5f0fa 70%,
    #efe6f7 100%
  );
  color: #666;
  padding: 80px 24px;
  text-align: center;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
  border-top: none;
  margin-top: -1px;
}
#ll-custom-footer .ll-foot-logo {
  display: inline-block;
  margin-bottom: 14px;
}
#ll-custom-footer .ll-foot-logo img {
  height: 28px;
  width: auto;
  display: block;
  opacity: 1;
}
#ll-custom-footer .ll-foot-tagline {
  font-size: 14px;
  color: #888;
  margin: 0 0 40px;
  letter-spacing: 0.01em;
}
#ll-custom-footer .ll-foot-email {
  color: #0c0c0c;
  font-size: 16px;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.2s ease;
  display: inline-block;
  margin-bottom: 20px;
}
#ll-custom-footer .ll-foot-email:hover {
  color: rgb(120, 39, 207);
}
#ll-custom-footer .ll-foot-socials {
  display: flex;
  justify-content: center;
  gap: 12px;
  margin-bottom: 36px;
}
#ll-custom-footer .ll-foot-socials a {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(12, 12, 12, 0.06);
  color: #0c0c0c;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s ease, color 0.2s ease, transform 0.2s cubic-bezier(0.22, 0.68, 0, 1.2);
  text-decoration: none;
}
#ll-custom-footer .ll-foot-socials a:hover {
  background: rgb(120, 39, 207);
  color: #fff;
  transform: translateY(-2px);
}
#ll-custom-footer .ll-foot-socials svg {
  width: 16px;
  height: 16px;
  fill: currentColor;
}
#ll-custom-footer .ll-foot-copy {
  font-size: 12.5px;
  color: #888;
  padding-top: 0;
  border-top: none;
  max-width: 720px;
  margin: 0 auto;
}

/* Hide the original Framer footer entirely once our custom one is rendered.
   Collapsing the whole <footer> (not just its internals) removes the blank
   gap between the dark CTA section and our custom footer. Exclude our
   own <footer id="ll-custom-footer">. */
body.ll-footer-replaced footer:not(#ll-custom-footer) {
  display: none !important;
}

/* 0. Hide Framer branding & the pen/edit toggle (broad coverage) */
#__framer-badge-container,
[class*="__framer-badge"],
a[href*="framer.com"][target="_blank"],
a[href*="framer.link"][target="_blank"],
a[href*="framer.website"],
[data-framer-name="Editor Bar"],
[class*="framer-editor-bar"],
#__framer-editorbar,
[data-framer-editorbar],
[aria-label*="Edit" i][href*="framer" i],
[aria-label*="Framer" i],
[class*="editor-toggle"],
[data-editor-toggle],
[data-framer-edit-bar],
/* Pen icon on the right rail */
[style*="position: fixed"][style*="right:"][href*="framer" i],
a[aria-label="Made in Framer"],
.framer-made-in-framer,
#ll-pen-hide-target {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
  opacity: 0 !important;
}

/* 1. Button press/active feedback (subtle, don't fight Framer's hover) */
button:active,
a[data-framer-component-type="PageLink"]:active,
[role="button"]:active {
  transform: scale(0.97);
  transition: transform 0.12s ease-out;
}

/* 2. Scroll reveal — staggered cascade.
   Each reveal target reads its delay from --ll-delay (set in JS by
   DOM-order index within its section). The pre-hide rule prevents any
   "preloaded" flash on refresh: until JS marks <html> as .ll-anims-ready,
   we suppress reveal targets. If JS fails to run, a failsafe after 3s
   reveals everything so nothing is permanently hidden. */
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Title Wrapper"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Body"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Description"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Image Wrapper"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Benefit Wrapper"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Card"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name="Thumbnail"],
html:not(.ll-anims-ready) [data-framer-name$="Section"] [data-framer-name$="Card"] {
  opacity: 0;
}
.ll-reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity 0.65s cubic-bezier(0.22, 0.68, 0, 1.2),
              transform 0.7s cubic-bezier(0.22, 0.68, 0, 1.2);
  transition-delay: var(--ll-delay, 0ms);
  will-change: opacity, transform;
}
.ll-reveal.ll-in-view {
  opacity: 1;
  transform: translateY(0);
}
/* Image wrappers get a slightly stronger movement + tiny scale-in for polish */
.ll-reveal[data-framer-name="Image Wrapper"],
.ll-reveal[data-framer-name="Thumbnail"] {
  transform: translateY(32px) scale(0.985);
}
.ll-reveal[data-framer-name="Image Wrapper"].ll-in-view,
.ll-reveal[data-framer-name="Thumbnail"].ll-in-view {
  transform: translateY(0) scale(1);
}
@media (prefers-reduced-motion: reduce) {
  .ll-reveal,
  .ll-reveal[data-framer-name="Image Wrapper"],
  .ll-reveal[data-framer-name="Thumbnail"] {
    transition: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
}

/* ── BANNER (About/CTA): force "Modern credit infrastructure" onto line 1.
   Framer sizes the heading via --framer-font-size on a preset class; we
   override font-size directly with !important and add white-space: nowrap
   so the phrase never wraps. The inline <br/> still forces the break
   between "infrastructure" and "for". High-specificity selector (section
   ancestor + preset class + attribute) to beat Framer's preset cascade. */
section[data-framer-name="Banner Section"] [data-framer-name="Title Wrapper"],
section[data-framer-name="Banner Section"] [data-framer-name="Title"] {
  max-width: none !important;
  width: 100% !important;
}
section[data-framer-name="Banner Section"] .framer-text.framer-styles-preset-8z6aw4,
section[data-framer-name="Banner Section"] [data-styles-preset="XTknRAdUH"].framer-text,
section[data-framer-name="Banner Section"] [data-styles-preset="XTknRAdUH"] {
  font-size: 40px !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  white-space: nowrap !important;
  --framer-font-size: 40px !important;
}
@media (max-width: 720px) {
  section[data-framer-name="Banner Section"] .framer-text.framer-styles-preset-8z6aw4,
  section[data-framer-name="Banner Section"] [data-styles-preset="XTknRAdUH"].framer-text,
  section[data-framer-name="Banner Section"] [data-styles-preset="XTknRAdUH"] {
    font-size: 28px !important;
    --framer-font-size: 28px !important;
    white-space: normal !important;
  }
}


/* Generic: first Image Wrapper on the page that's large enough to be the hero visual */
[data-framer-name="Hero Section"] [data-framer-name="Image"],
[data-framer-name="Hero Section"] [data-framer-name*="Image"],
[data-framer-name="Hero Section"] [data-framer-name="Image Wrapper"],
[data-framer-name="Hero Wrapper"] [data-framer-name="Image"],
[data-framer-name="Hero Wrapper"] [data-framer-name="Image Wrapper"] {
  transform: translateY(-80px) !important;
  margin-bottom: -80px !important;
}

/* ── HERO: paint Framer's ambient-gradient directly on Banner Section ──
   Gradient colors come from the published Framer site: #d5c9f8 purple,
   #ffd5bf peach, #ccf6ea mint, on #fafafa. Frame bleeds wider to the page
   edges, with a bottom mask-fade so there's no hard rounded-rectangle edge. */
.framer-3pftir {
  position: relative;
  isolation: isolate;
}
.framer-3pftir::before {
  content: "";
  position: absolute;
  /* Extend ALL the way to the top so the nav sits on the gradient too.
     Banner Section already has 180px top padding, so the gradient starts
     above the headline and continues under the fixed nav. */
  inset: 0 0 0 0;
  border-radius: 0;
  background:
    /* Exact Framer hero — three blobs only, no peach. Centers + sizes
       measured via Playwright on the published site. */
    /* Mint Gradient — off-right at (106%, 24%), ellipse 44%×64% */
    radial-gradient(ellipse 44% 64% at 106% 24%, rgba(204, 246, 234, 0.8) 0%, rgba(204, 246, 234, 0.5) 50%, transparent 100%),
    /* Purple Gradient Small — at (69%, 50%), ellipse 28%×27% */
    radial-gradient(ellipse 28% 27% at 69% 50%, rgba(213, 201, 248, 0.8) 0%, rgba(213, 201, 248, 0.5) 49%, transparent 100%),
    /* Purple Gradient (big) — at (52%, 50%), ellipse 49%×58% */
    radial-gradient(ellipse 49% 58% at 52% 50%, rgba(213, 201, 248, 0.8) 0%, rgba(213, 201, 248, 0.5) 49%, transparent 100%),
    #fafafa;
  /* Four-side soft mask — bottom fade extended so the gradient reaches lower
     and transitions gently into the next section. */
  mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 72%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, transparent 0%, black 8%, black 72%, transparent 100%),
    linear-gradient(to right,  transparent 0%, black 6%, black 94%, transparent 100%);
  -webkit-mask-composite: source-in;
  z-index: -1;
  pointer-events: none;
}
.framer-3pftir .framer-1v2m2oi { display: none !important; }
/* Hide the original Framer gradient blobs too — they still render in the
   static export and bleed green/purple in unwanted places. Our ::before
   above already paints the full gradient composition. */
.framer-3pftir .framer-iqlg2j,
.framer-3pftir .framer-hylm9e,
.framer-3pftir .framer-1cj5bef,
.framer-3pftir .framer-1qknlvf,
.framer-3pftir .framer-1rcpjol,
.framer-3pftir .framer-1bo1yx6,
.framer-3pftir .framer-g94fx5 { display: none !important; }



/* ── HERO: entrance animations matching Framer exactly ──
   Measured via Playwright on the published site:
     Title + Body:   opacity 0→1, translateY(60px→0), delay 250ms, duration 650ms
     Dashboard Image: opacity 0→1, translateX(400px→0), delay 250ms, duration 1150ms
   Easing: ease-out (slow start, fast finish). */
@keyframes ll-hero-text-in {
  from { opacity: 0; transform: translateY(60px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes ll-hero-image-in {
  from { opacity: 0; transform: translateX(400px); }
  to   { opacity: 1; transform: translateX(0); }
}
.framer-3pftir [data-framer-name="Title"],
.framer-3pftir [data-framer-name="Body"] {
  animation: ll-hero-text-in 0.65s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
/* Dashboard slide: only the inner "Image" element moves, not the wrapper. */
.framer-3pftir [data-framer-name="Image Wrapper"] [data-framer-name="Image"]:first-of-type {
  animation: ll-hero-image-in 1.15s cubic-bezier(0.22, 1, 0.36, 1) 0.25s both;
}
@media (prefers-reduced-motion: reduce) {
  .framer-3pftir [data-framer-name="Title"],
  .framer-3pftir [data-framer-name="Body"],
  .framer-3pftir [data-framer-name="Image Wrapper"] [data-framer-name="Image"]:first-of-type {
    animation: none !important;
  }
}

/* Hero buttons should NOT fade in via scroll-reveal — Framer keeps them at
   opacity:1 from t=0. Override the .ll-reveal treatment inside the hero. */
.framer-3pftir [data-framer-name="Buttons Wrapper"].ll-reveal,
.framer-3pftir [data-framer-name="Body & Buttons Wrapper"].ll-reveal {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* Primary CTA pill — matches Framer's hover-fill behavior:
     default: transparent fill, dark outline, dark text + arrow
     hover:   fills #0c0c0c, text + arrow turn white */
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"] {
  transition: background-color 0.22s ease, color 0.22s ease;
  position: relative;
  isolation: isolate;
}
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"]:hover {
  background: #0c0c0c !important;
  background-color: #0c0c0c !important;
  background-image: none !important;
  color: #ffffff !important;
  /* Inset box-shadow guarantees a fully-opaque dark interior, regardless
     of what browser / compositor does with the transparent base bg-color. */
  box-shadow: inset 0 0 0 9999px #0c0c0c !important;
  z-index: 3;
}
/* Flip text color (Framer-set via CSS variables) on hover */
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"]:hover [data-framer-name="Button Text"],
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"]:hover .framer-text {
  color: #ffffff !important;
  --extracted-r6o4lv: #ffffff !important;
  --framer-text-color: #ffffff !important;
}
/* Flip arrow-icon fill/stroke on hover */
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"]:hover [data-framer-name="Arrow Icon"] {
  color: #ffffff !important;
  fill: #ffffff !important;
}
.framer-3pftir [data-framer-name="Buttons Wrapper"] a[data-framer-name="Desktop"]:hover [data-framer-name="Arrow Icon"] svg {
  fill: #ffffff !important;
}


/* Scale the Dashboard image +20% on desktop — anchored top-right so it grows
   into the lavender area without pushing the headline copy. */
@media (min-width: 992px) {
  .framer-3pftir [data-framer-name="Image Wrapper"] {
    transform: scale(1.2);
    transform-origin: top right;
  }
}

/* ── HERO MOBILE — match Framer's mobile layout exactly ──
   Framer measured on a 390×844 viewport:
     - Image Wrapper: 350×173, position:relative, order=first
     - Banner Wrapper: flex-column, gap 20px
     - Title: 2 lines, wraps naturally
     - Body: max-width stretches full column
     - Buttons Wrapper: flex-row, gap 20px (not stacked)
     - Bank Card: 101×64 (scaled-down overlay on the Dashboard) */
@media (max-width: 991px) {
  .framer-3pftir::before {
    inset: 64px 0 0 0;
  }

  /* Dissolve Bottom Wrapper on mobile so its children (Image Wrapper,
     Body & Buttons Wrapper) become direct siblings of Title Wrapper in
     Banner Wrapper's flex-column. That lets us order them independently. */
  .framer-3pftir [data-framer-name="Bottom Wrapper"] {
    display: contents !important;
  }

  /* Order on Banner Wrapper: Image first, Title second, Body+Buttons last.
     Title is a direct child of Banner Wrapper (no separate Title Wrapper on
     this page), so we target it directly. */
  .framer-3pftir [data-framer-name="Image Wrapper"] { order: 1 !important; }
  .framer-3pftir [data-framer-name="Title"] { order: 2 !important; }
  .framer-3pftir [data-framer-name="Body & Buttons Wrapper"] { order: 3 !important; }

  /* Image Wrapper: full-width block at top */
  .framer-3pftir [data-framer-name="Image Wrapper"] {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 2.02 / 1 !important;
    top: auto !important;
    right: auto !important;
    margin: 0 !important;
    transform: none !important;
  }

  /* Body & Buttons Wrapper: full width on mobile */
  .framer-3pftir [data-framer-name="Body & Buttons Wrapper"] {
    width: 100% !important;
    flex: 0 0 auto !important;
  }

  /* Dashboard image: fit inside its wrapper, centered */
  .framer-3pftir [data-framer-name="Image Wrapper"] img[alt="Dashboard"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: right center !important;
  }

  /* Bank card: its Framer positioning wrapper (.framer-or1obl) is set up
     for desktop (left:-100px). On mobile, reposition to bottom-left INSIDE
     the Dashboard wrapper. */
  .framer-3pftir .framer-or1obl {
    position: absolute !important;
    bottom: 10px !important;
    left: 10px !important;
    right: auto !important;
    top: auto !important;
    width: 38% !important;
    max-width: 130px !important;
    height: auto !important;
    aspect-ratio: 1.57 / 1 !important;
  }
  .framer-3pftir [data-framer-name="Image Wrapper"] img[alt="Bank Card"],
  .framer-3pftir [data-framer-name="Banner Wrapper"] img[alt="Bank Card"] {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    object-position: left center !important;
  }

  /* Buttons side-by-side on mobile */
  .framer-3pftir [data-framer-name="Buttons Wrapper"] {
    flex-direction: row !important;
    gap: 20px !important;
    flex-wrap: wrap;
  }

  /* Mobile: only the text rises on load. Image is already visible above
     (no off-screen slide — we're at narrow width, the 400px X slide looks
     broken on mobile because the image is already full-width). */
  .framer-3pftir [data-framer-name="Image Wrapper"] [data-framer-name="Image"]:first-of-type {
    animation: none !important;
  }
}
@media (max-width: 575px) {
  .framer-3pftir::before {
    inset: 56px 0 0 0;
    background:
      radial-gradient(ellipse 85% 35% at 10% 100%, rgba(213, 201, 248, 1) 0%, rgba(213, 201, 248, 0.35) 45%, transparent 75%),
      radial-gradient(ellipse 80% 35% at 95% 100%, rgba(255, 213, 191, 1) 0%, rgba(255, 213, 191, 0.35) 48%, transparent 75%),
      radial-gradient(ellipse 55% 25% at 100% 2%, rgba(204, 246, 234, 1) 0%, rgba(204, 246, 234, 0.3) 55%, transparent 80%),
      #fafafa;
  }
  /* Slightly taller aspect for phones so Dashboard + Bank Card both read */
  .framer-3pftir [data-framer-name="Image Wrapper"] {
    aspect-ratio: 1.9 / 1 !important;
  }
}

/* ── NAV MOBILE: hamburger menu + opaque background ─────────────── */
@media (max-width: 991px) {
  /* Hide everything in the nav except the Menu (logo) and our hamburger. */
  nav.framer-bkjSs [data-framer-name="Base Container"] > *:not([data-framer-name="Menu"]):not(.ll-nav-hamburger) {
    display: none !important;
  }
  /* Distribute Menu (logo) left, hamburger right */
  nav.framer-bkjSs [data-framer-name="Base Container"] {
    justify-content: space-between !important;
    padding: 0 20px !important;
  }
  /* Nav itself becomes solid white (backdrop blur for a touch of polish). */
  nav.framer-bkjSs {
    background: rgba(255, 255, 255, 0.92) !important;
    backdrop-filter: blur(12px);
    -webkit-backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.05);
  }

  /* Hamburger toggle (injected via leafloans.js) */
  .ll-nav-hamburger {
    display: inline-flex;
    align-items: center; justify-content: center;
    width: 40px; height: 40px;
    background: transparent;
    border: 1px solid rgba(0, 0, 0, 0.1);
    border-radius: 10px;
    cursor: pointer;
    padding: 0;
    margin-left: 12px;
  }
  .ll-nav-hamburger svg { width: 18px; height: 18px; color: #0c0c0c; }
  .ll-nav-hamburger:hover { background: rgba(0, 0, 0, 0.04); }

  /* Drawer — full-screen slide-down menu */
  #ll-mobile-drawer {
    position: fixed; inset: 0;
    background: #ffffff;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    padding: 0;
    opacity: 0; visibility: hidden;
    transition: opacity 0.24s ease, visibility 0.24s ease;
  }
  #ll-mobile-drawer.ll-open { opacity: 1; visibility: visible; }
  #ll-mobile-drawer .ll-drawer-header {
    display: flex;
    justify-content: space-between; align-items: center;
    padding: 16px 20px;
    border-bottom: 1px solid rgba(0, 0, 0, 0.06);
  }
  #ll-mobile-drawer .ll-drawer-header img { height: 26px; width: auto; }
  #ll-mobile-drawer .ll-drawer-close {
    width: 40px; height: 40px; border: none; background: transparent;
    font-size: 26px; line-height: 1; cursor: pointer; color: #0c0c0c;
    border-radius: 50%;
    transition: background 0.15s ease;
  }
  #ll-mobile-drawer .ll-drawer-close:hover { background: rgba(0, 0, 0, 0.06); }
  #ll-mobile-drawer nav {
    display: flex;
    flex-direction: column;
    padding: 16px 20px;
    gap: 4px;
  }
  #ll-mobile-drawer nav a {
    display: block;
    padding: 18px 12px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 20px; font-weight: 600;
    color: #0c0c0c;
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: background 0.15s ease, padding-left 0.2s ease;
  }
  #ll-mobile-drawer nav a:hover { background: rgba(120, 39, 207, 0.04); padding-left: 18px; }
  #ll-mobile-drawer .ll-drawer-cta {
    margin: 24px 20px;
    padding: 16px 24px;
    background: #0c0c0c;
    color: #fff;
    border-radius: 50px;
    font-family: 'Manrope', 'Inter', system-ui, sans-serif;
    font-size: 15px; font-weight: 700;
    text-align: center;
    text-decoration: none;
    transition: background 0.18s ease;
  }
  #ll-mobile-drawer .ll-drawer-cta:hover { background: rgb(120, 39, 207); }

  /* Lock page scroll when drawer open */
  html.ll-drawer-open, html.ll-drawer-open body { overflow: hidden; }
}

/* Hide hamburger + mobile drawer on desktop.
   Drawer markup is injected into the DOM on every breakpoint; without this
   rule it would render as inline block content at the bottom of the page. */
.ll-nav-hamburger { display: none; }
#ll-mobile-drawer { display: none; }
@media (min-width: 992px) {
  .ll-nav-hamburger { display: none !important; }
  #ll-mobile-drawer { display: none !important; }
}


/* ── CONTACT MODAL ─────────────────────────── */
#ll-modal-overlay {
  position: fixed; inset: 0;
  background: rgba(12, 14, 13, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 10000;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  opacity: 0;
  transition: opacity 0.22s ease;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
#ll-modal-overlay.ll-open { display: flex; opacity: 1; }
#ll-modal-card {
  background: #fff;
  border-radius: 24px;
  width: 100%; max-width: 560px;
  padding: 0;
  box-shadow: 0 32px 80px rgba(0, 0, 0, 0.32), 0 0 0 1px rgba(0, 0, 0, 0.04);
  position: relative;
  transform: translateY(16px) scale(0.97);
  transition: transform 0.32s cubic-bezier(0.22, 0.68, 0, 1.2);
  max-height: calc(100vh - 48px);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#ll-modal-overlay.ll-open #ll-modal-card { transform: translateY(0) scale(1); }
/* Thin brand gradient accent along the top edge of the card */
#ll-modal-card::before {
  content: "";
  position: absolute; top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, #3e7a58 0%, #5a8f6e 35%, #7827cf 100%);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  opacity: 0.9;
}
#ll-modal-form-wrap,
#ll-modal-success {
  padding: 40px 40px 36px;
  overflow-y: auto;
}
/* Brand header inside the card */
#ll-modal-brand {
  display: flex; align-items: center;
  margin: 0 0 26px;
}
#ll-modal-brand img {
  height: 26px; width: auto; display: block;
}
#ll-modal-close {
  position: absolute; top: 18px; right: 18px;
  width: 36px; height: 36px;
  border: 1px solid transparent;
  background: transparent;
  font-size: 22px; color: #888; font-weight: 400;
  cursor: pointer; line-height: 1;
  border-radius: 50%;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
  z-index: 2;
}
#ll-modal-close:hover {
  background: #f4f4f2; color: #0c0c0c;
  border-color: rgba(0, 0, 0, 0.06);
}
#ll-modal-title {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 30px; font-weight: 800;
  color: #0c0c0c; line-height: 1.15;
  letter-spacing: -0.02em;
  margin: 0 0 10px;
}
#ll-modal-sub {
  font-size: 14.5px; color: #555;
  line-height: 1.55;
  margin: 0 0 26px;
  max-width: 440px;
}
.ll-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 520px) {
  .ll-row { grid-template-columns: 1fr; gap: 0; }
}
.ll-field {
  display: flex; flex-direction: column;
  gap: 7px; margin-bottom: 16px;
  min-width: 0;
}
.ll-field label {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 11px; font-weight: 700;
  color: #0c0c0c; letter-spacing: 0.08em;
  text-transform: uppercase;
}
.ll-field .ll-optional {
  font-weight: 500; color: #aaa; margin-left: 6px;
  text-transform: none; letter-spacing: 0.01em; font-size: 11px;
}
.ll-field input,
.ll-field select,
.ll-field textarea {
  font: inherit; font-size: 14.5px;
  padding: 13px 15px;
  border: 1px solid #e4e4e2;
  border-radius: 12px;
  background: #fafaf8;
  color: #0c0c0c;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
  width: 100%;
  box-sizing: border-box;
}
.ll-field input:hover,
.ll-field textarea:hover { background: #fff; border-color: #d8d8d5; }
.ll-field textarea {
  resize: vertical;
  min-height: 72px;
  line-height: 1.45;
  font-family: inherit;
}
.ll-field input::placeholder,
.ll-field textarea::placeholder {
  color: #b3b3b0;
}
.ll-field input:focus,
.ll-field select:focus,
.ll-field textarea:focus {
  outline: none;
  background: #fff;
  border-color: rgb(120, 39, 207);
  box-shadow: 0 0 0 4px rgba(120, 39, 207, 0.14);
}

/* Custom dropdown — styled to match .ll-field inputs exactly */
.ll-dropdown {
  position: relative;
  width: 100%;
}
.ll-dropdown-trigger {
  font: inherit; font-size: 14.5px;
  padding: 13px 15px;
  border: 1px solid #e4e4e2;
  border-radius: 12px;
  background: #fafaf8;
  color: #0c0c0c;
  cursor: pointer;
  width: 100%;
  box-sizing: border-box;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.ll-dropdown-trigger:hover { background: #fff; border-color: #d8d8d5; }
.ll-dropdown-trigger:focus {
  outline: none;
  background: #fff;
  border-color: rgb(120, 39, 207);
  box-shadow: 0 0 0 4px rgba(120, 39, 207, 0.14);
}
.ll-dropdown-open .ll-dropdown-trigger {
  background: #fff;
  border-color: rgb(120, 39, 207);
  box-shadow: 0 0 0 4px rgba(120, 39, 207, 0.14);
}
.ll-dropdown-invalid .ll-dropdown-trigger {
  border-color: #c62828;
}
.ll-dropdown-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.ll-dropdown-label.ll-dropdown-placeholder {
  color: #9a9a97;
}
.ll-dropdown-chevron {
  width: 12px;
  height: 8px;
  color: #666;
  flex-shrink: 0;
  transition: transform 0.2s cubic-bezier(0.22, 0.68, 0, 1.2);
}
.ll-dropdown-open .ll-dropdown-chevron {
  transform: rotate(180deg);
  color: rgb(120, 39, 207);
}
.ll-dropdown-menu {
  list-style: none;
  margin: 6px 0 0;
  padding: 6px;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  background: #fff;
  border: 1.5px solid #e4e4e2;
  border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12);
  z-index: 5;
  opacity: 0;
  transform: translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.22, 0.68, 0, 1.2);
  max-height: 260px;
  overflow-y: auto;
}
.ll-dropdown-open .ll-dropdown-menu {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}
.ll-dropdown-item {
  padding: 10px 12px;
  border-radius: 8px;
  font-size: 14px;
  color: #0c0c0c;
  cursor: pointer;
  transition: background 0.12s ease, color 0.12s ease;
  line-height: 1.35;
}
.ll-dropdown-item:hover {
  background: rgba(120, 39, 207, 0.08);
  color: rgb(120, 39, 207);
}
.ll-dropdown-item.ll-dropdown-selected {
  background: rgba(120, 39, 207, 0.12);
  color: rgb(120, 39, 207);
  font-weight: 500;
}
#ll-modal-submit {
  width: 100%;
  padding: 16px 24px;
  background: #0c0c0c;
  color: #fff;
  border: none;
  border-radius: 50px;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 14.5px; font-weight: 700;
  letter-spacing: -0.005em;
  cursor: pointer;
  margin-top: 14px;
  transition: background 0.2s ease, transform 0.18s ease, box-shadow 0.2s ease;
  box-shadow: 0 6px 20px rgba(12, 12, 12, 0.16);
}
#ll-modal-submit:hover {
  background: rgb(120, 39, 207);
  box-shadow: 0 10px 28px rgba(120, 39, 207, 0.28);
  transform: translateY(-1px);
}
#ll-modal-submit:active { transform: translateY(0) scale(0.98); }
#ll-modal-submit:disabled { opacity: 0.55; cursor: wait; transform: none; box-shadow: none; }
#ll-modal-error {
  font-size: 13px; color: #c62828;
  margin-top: 10px; text-align: center;
  min-height: 18px;
  font-weight: 500;
}
/* Success state — crafted to feel like a moment */
#ll-modal-success {
  display: none;
  text-align: center;
  padding: 48px 40px 40px;
}
#ll-modal-success.show {
  display: flex;
  flex-direction: column;
  align-items: center;
  animation: ll-success-in 0.45s cubic-bezier(0.22, 0.68, 0, 1.2);
}
@keyframes ll-success-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}
#ll-modal-success .check {
  width: 64px; height: 64px;
  border-radius: 50%;
  background: linear-gradient(135deg, #e6f7ee 0%, #d6f0e0 100%);
  color: #17a663;
  display: inline-flex;
  align-items: center; justify-content: center;
  font-size: 32px; font-weight: 600;
  margin-bottom: 20px;
  position: relative;
  animation: ll-check-pop 0.55s cubic-bezier(0.22, 0.68, 0, 1.6) 0.1s backwards;
  box-shadow: 0 0 0 8px rgba(23, 166, 99, 0.08);
}
@keyframes ll-check-pop {
  0%   { transform: scale(0.4); opacity: 0; }
  60%  { transform: scale(1.08); opacity: 1; }
  100% { transform: scale(1); }
}
#ll-modal-success h3 {
  font-family: 'Manrope', 'Inter', system-ui, sans-serif;
  font-size: 26px; font-weight: 800;
  color: #0c0c0c; margin: 0 0 10px;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
#ll-modal-success p {
  font-size: 14.5px; color: #555;
  margin: 0 0 24px;
  line-height: 1.55;
  max-width: 400px;
}
#ll-modal-success p a {
  color: rgb(120, 39, 207);
  text-decoration: none;
  font-weight: 600;
  border-bottom: 1px solid rgba(120, 39, 207, 0.2);
  transition: border-color 0.15s ease;
}
#ll-modal-success p a:hover { border-bottom-color: rgb(120, 39, 207); }

/* Secondary "close" button on the success screen */
#ll-modal-close-2 {
  padding: 13px 26px !important;
  background: #f4f4f2 !important;
  color: #0c0c0c !important;
  border: 1px solid rgba(0, 0, 0, 0.05) !important;
  border-radius: 50px !important;
  font-family: 'Manrope', 'Inter', system-ui, sans-serif !important;
  font-size: 13.5px !important; font-weight: 700 !important;
  letter-spacing: -0.005em !important;
  cursor: pointer !important;
  transition: background 0.18s ease, transform 0.18s ease !important;
}
#ll-modal-close-2:hover { background: #e8e8e6 !important; transform: translateY(-1px); }
#ll-modal-close-2:active { transform: translateY(0) scale(0.98); }

/* 3. Hover lift on feature/service/process cards */
[data-framer-name="Feature Card"],
[data-framer-name="Service Card"],
[data-framer-name="Process Card"],
[data-framer-name="Showcase Card"],
[data-framer-name="Pricing Card"],
[data-framer-name="Team Member Card"] {
  transition: transform 0.35s cubic-bezier(0.22, 0.68, 0, 1.2),
              box-shadow 0.35s ease;
  will-change: transform;
}
[data-framer-name="Feature Card"]:hover,
[data-framer-name="Service Card"]:hover,
[data-framer-name="Process Card"]:hover,
[data-framer-name="Showcase Card"]:hover,
[data-framer-name="Pricing Card"]:hover,
[data-framer-name="Team Member Card"]:hover {
  transform: translateY(-8px);
  box-shadow: 0 18px 48px rgba(0, 0, 0, 0.12);
}

/* ─────────────────────────────────────────────────────────────
   MOBILE + WEB OPTIMIZATION PASS
   Breakpoints:
   - mobile:  ≤ 575px
   - tablet:  576–991px
   - desktop: ≥ 992px
───────────────────────────────────────────────────────────── */

/* No horizontal scroll anywhere. Common Framer pitfall. */
html, body {
  overflow-x: hidden;
  max-width: 100%;
}

/* Smooth scroll (honors prefers-reduced-motion via global media query) */
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Only apply hover effects on devices that actually hover.
   Prevents sticky hover states on mobile Safari / Chrome. */
@media (hover: none), (pointer: coarse) {
  [data-framer-name="Feature Card"]:hover,
  [data-framer-name="Service Card"]:hover,
  [data-framer-name="Process Card"]:hover,
  [data-framer-name="Showcase Card"]:hover,
  [data-framer-name="Pricing Card"]:hover,
  [data-framer-name="Team Member Card"]:hover {
    transform: none;
    box-shadow: initial;
  }
  /* Buttons: disable scale-on-press affordance (tap handles feedback) */
  button:active,
  a[data-framer-component-type="PageLink"]:active,
  [role="button"]:active {
    transform: none;
  }
}

/* Drop the hero-image vertical lift on tablet & mobile — on smaller
   screens the image is stacked below copy, not beside it. */
@media (max-width: 991px) {
  [data-framer-name="Hero Section"] [data-framer-name="Image"],
  [data-framer-name="Hero Section"] [data-framer-name*="Image"],
  [data-framer-name="Hero Section"] [data-framer-name="Image Wrapper"],
  [data-framer-name="Hero Wrapper"] [data-framer-name="Image"],
  [data-framer-name="Hero Wrapper"] [data-framer-name="Image Wrapper"] {
    transform: none !important;
    margin-bottom: 0 !important;
  }
}

/* Custom footer: compact on small screens */
@media (max-width: 720px) {
  #ll-custom-footer {
    padding: 48px 20px !important;
  }
  #ll-custom-footer .ll-foot-logo img {
    height: 24px;
  }
  #ll-custom-footer .ll-foot-tagline {
    font-size: 13px;
    margin-bottom: 24px;
  }
  #ll-custom-footer .ll-foot-email {
    font-size: 15px;
  }
  #ll-custom-footer .ll-foot-socials {
    margin-bottom: 28px;
  }
  #ll-custom-footer .ll-foot-copy {
    font-size: 11.5px;
    padding: 0 8px;
  }
}

/* Custom footer: bigger social buttons on mobile (44×44 tap target) */
@media (max-width: 520px) {
  #ll-custom-footer .ll-foot-socials a {
    width: 44px;
    height: 44px;
  }
  #ll-custom-footer .ll-foot-socials svg {
    width: 18px;
    height: 18px;
  }
}

/* Modal: fill more of a small viewport, prevent iOS input zoom */
@media (max-width: 520px) {
  #ll-modal-overlay {
    padding: 12px !important;
    align-items: flex-end; /* bottom-sheet feel */
  }
  #ll-modal-card {
    padding: 24px 20px 20px !important;
    max-width: 100% !important;
    max-height: calc(100vh - 24px) !important;
    border-radius: 20px 20px 16px 16px !important;
  }
  #ll-modal-title {
    font-size: 20px !important;
    margin-bottom: 4px !important;
  }
  #ll-modal-sub {
    font-size: 13px !important;
    margin-bottom: 18px !important;
  }
  /* iOS zooms inputs under 16px on focus. Bump to 16px. */
  .ll-field input,
  .ll-field select,
  .ll-field textarea,
  .ll-dropdown-trigger,
  .ll-dropdown-item {
    font-size: 16px !important;
  }
  /* Bigger close-button tap target */
  #ll-modal-close {
    width: 40px !important;
    height: 40px !important;
    top: 10px !important;
    right: 10px !important;
  }
  /* Submit button: full-width block on small screens */
  #ll-modal-submit {
    padding: 15px 20px !important;
    font-size: 15px !important;
  }
}

/* Modal: dropdown menu respects smaller viewport */
@media (max-width: 520px) {
  .ll-dropdown-menu {
    max-height: 50vh !important;
  }
}

/* Banner CTA: stack primary + secondary buttons on narrow screens */
@media (max-width: 480px) {
  [data-framer-name="Banner Section"] [data-framer-name="Buttons Wrapper"] {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
  }
  [data-framer-name="Banner Section"] [data-framer-name="Buttons Wrapper"] > * {
    width: 100% !important;
    max-width: 100% !important;
  }
  [data-framer-name="Banner Section"] [data-framer-name="Body & Buttons Wrapper"] {
    width: 100% !important;
  }
}

/* Checkmark strip: wrap and tighten on mobile */
@media (max-width: 720px) {
  [data-framer-name="Banner Section"] [data-framer-name="Benefits Wrapper"],
  [data-framer-name="Banner Section"] [data-framer-name="Points Wrapper"] {
    flex-wrap: wrap !important;
    gap: 12px 20px !important;
  }
}

/* How It Works — tighten step spacing on mobile */
@media (max-width: 720px) {
  [data-framer-name="Progress Wrapper"] {
    gap: 32px !important;
  }
  [data-framer-name="Benefit Wrapper"] [data-framer-name="Title"] {
    font-size: 18px !important;
  }
}

/* Scroll reveal stagger: tighter on mobile so content doesn't feel lazy
   as users scroll quickly on a phone */
@media (max-width: 720px) {
  .ll-reveal {
    transition-duration: 0.45s, 0.5s !important;
  }
}

/* Touch target minimum (44×44) for any icon-only interactive element */
@media (pointer: coarse) {
  button[aria-label],
  a[aria-label] {
    min-width: 44px;
    min-height: 44px;
  }
}

/* Banner heading responsive handled at top of file via enforceBannerHeading()
   JS + the section-scoped @media rule earlier. No further override needed. */

/* Dropdown menu: improve scroll UX on mobile — momentum scroll */
.ll-dropdown-menu {
  -webkit-overflow-scrolling: touch;
}

/* Form fields: slightly larger padding on mobile for comfort */
@media (max-width: 520px) {
  .ll-field input,
  .ll-field select,
  .ll-field textarea,
  .ll-dropdown-trigger {
    padding: 13px 14px !important;
  }
}

/* Make sure Framer's absolute-positioned decorative backgrounds
   don't cause horizontal scroll on narrow viewports */
[data-framer-name="Background"],
[data-framer-name="Gradients Wrapper"] {
  max-width: 100vw;
  overflow: hidden;
}

/* Respect safe-area-insets on iOS (notch, home indicator) */
@supports (padding: max(0px)) {
  #ll-custom-footer {
    padding-bottom: max(48px, env(safe-area-inset-bottom)) !important;
  }
  #ll-modal-overlay {
    padding-bottom: max(24px, env(safe-area-inset-bottom));
  }
}

/* Print-friendly baseline (bonus — some VCs print to PDF) */
@media print {
  nav, #ll-modal-overlay, .ll-foot-socials { display: none !important; }
  #ll-custom-footer { background: none !important; color: #000; }
  body { color: #000; background: #fff; }
  .ll-reveal { opacity: 1 !important; transform: none !important; }
}