
  <style>
    :root{
      --blue:#2375ab;
      --orange:#fab034;
      --ink:#0b1b2a;
      --muted:#475569;
      --line:rgba(35,117,171,.14);
      --bg:#f6fbff;
      --card:#ffffff;
      --radius:22px;
      --shadow:0 18px 60px rgba(10, 28, 45, .14);
      --max:1200px;

      --headerH:74px; /* JS updates */
      --topbarH:44px; /* JS updates */
    }

    *{box-sizing:border-box}
    body{
      margin:0;
      font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
      color:var(--ink);
      background:#fff;
    }
    img{max-width:100%;display:block;height:auto}
    a{text-decoration:none}
    .bx-container{max-width:var(--max);margin:0 auto;padding:0 16px}
    .section{padding:26px 0}
    .card{
      background:var(--card);
      border:1px solid var(--line);
      border-radius:var(--radius);
      box-shadow:0 16px 44px rgba(15,58,88,.08);
    }
    .btn{
      display:inline-flex;align-items:center;justify-content:center;gap:8px;
      padding:12px 16px;border-radius:14px;font-weight:900;
      border:2px solid transparent; cursor:pointer;
    }
    .btn-primary{background:var(--orange);color:var(--ink)}
    .btn-secondary{background:#fff;color:var(--ink);border-color:rgba(35,117,171,.28)}
    .btn-tertiary{background:#fff;color:var(--ink);border-color:rgba(11,27,42,.12)}
    .btn:hover{transform:translateY(-1px)}
    .btn:active{transform:translateY(0)}

    /* Top bar */
    .sub-header{
      background:var(--blue);
      color:#fff;
      padding:10px 0;
      font-size:13px;
    }
    .sub-row{
      display:flex;align-items:center;justify-content:space-between;gap:16px;
    }
    .sub-left, .sub-right{
      display:flex;align-items:center;gap:14px;flex-wrap:wrap;
      padding:0;margin:0;list-style:none;
    }
    .sub-header a{color:#fff;font-weight:800;opacity:.95}
    .sub-header a:hover{opacity:1}
    .sub-right a{
      width:34px;height:34px;border-radius:999px;
      display:inline-flex;align-items:center;justify-content:center;
      background:rgba(255,255,255,.14);
      font-size:14px;
    }
    .sub-right a:hover{background:rgba(255,255,255,.22)}

    /* Sticky header + nav */
    .site-header{
      position:sticky; top:0; z-index:9999;
      background:#fff;
      border-bottom:1px solid rgba(230,238,246,.9);
      backdrop-filter: blur(10px);
    }
    .site-header.is-scrolled{box-shadow:0 10px 30px rgba(11,27,42,.10)}
    .nav{
      height:var(--headerH);
      display:flex;align-items:center;
    }
    .nav-inner{
      display:flex;align-items:center;justify-content:space-between;gap:18px;
    }
    .brand{
      display:flex;align-items:center;gap:12px;
      min-width:220px;
    }
    .brand img{height:54px;width:auto}
    .nav-links{
      display:flex;align-items:center;justify-content:center;gap:18px;flex:1;
    }
    .nav-item{
      position:relative;display:inline-flex;align-items:center;height:44px;
      padding:0 12px;border-radius:12px;font-weight:900;color:var(--ink);
      white-space:nowrap;
    }
    .nav-item:hover{background:rgba(35,117,171,.08)}
    .nav-trigger{
      border:0;background:transparent;cursor:pointer;font:inherit;
    }
    .nav-chev{width:14px;height:14px;margin-left:8px;transition:transform .18s ease;opacity:.9}
    .nav-trigger[aria-expanded="true"]{background:rgba(35,117,171,.10)}
    .nav-trigger[aria-expanded="true"] .nav-chev{transform:rotate(180deg)}
    .hamburger{
      display:none;width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(230,238,246,.9);
      background:#fff;cursor:pointer;
      align-items:center;justify-content:center;
    }
    .hamburger svg{width:20px;height:20px}

    /* Mega menus */
    .backdrop{
      position:fixed;inset:0;background:rgba(0,0,0,.35);
      opacity:0;pointer-events:none;transition:opacity .18s ease;
      z-index:9990;
    }
    .backdrop.show{opacity:1;pointer-events:auto}
    .mega{
      position:fixed;
      top:calc(var(--headerH) + var(--topbarH));
      left:50%;transform:translateX(-50%);
      width:min(1180px, 94vw);
      background:#fff;border-radius:22px;
      border:1px solid rgba(230,238,246,.9);
      box-shadow:var(--shadow);
      padding:24px;display:none;
      z-index:9995;
    }
    .mega.show{display:block}
    .mega-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:18px}
    .mega-col h4{margin:0 0 12px;font-size:16px;font-weight:900}
    .mega-col a{
      display:block;padding:10px;border-radius:12px;
      color:#243648;font-weight:700;
    }
    .mega-col a:hover{background:rgba(35,117,171,.07);color:var(--blue)}

    /* Mobile drawer */
    .drawer-backdrop{
      position:fixed;inset:0;background:rgba(0,0,0,.45);
      opacity:0;pointer-events:none;transition:opacity .2s ease;
      z-index:10000;
    }
    .drawer-backdrop.show{opacity:1;pointer-events:auto}
    .drawer{
      position:fixed;top:0;right:0;height:100%;
      width:min(420px, 88vw);
      background:#fff;
      transform:translateX(105%);
      transition:transform .22s ease;
      z-index:10010;
      box-shadow:-20px 0 60px rgba(0,0,0,.25);
      display:flex;flex-direction:column;
    }
    .drawer.show{transform:translateX(0)}
    .drawer-head{
      display:flex;align-items:center;justify-content:space-between;
      padding:16px 16px 10px;
      border-bottom:1px solid rgba(230,238,246,.9);
    }
    .drawer-head img{height:34px}
    .drawer-close{
      width:44px;height:44px;border-radius:14px;
      border:1px solid rgba(230,238,246,.9);
      background:#fff;cursor:pointer;
    }
    .drawer-body{padding:8px 14px 16px;overflow:auto}
    .m-link, .m-acc{
      display:flex;align-items:center;justify-content:space-between;width:100%;
      padding:14px 12px;border-radius:14px;
      border:1px solid rgba(230,238,246,.9);
      background:#fff;font-weight:900;margin:10px 0;cursor:pointer;
      color:var(--ink);
    }
    .m-link:hover, .m-acc:hover{background:rgba(35,117,171,.07)}
    .m-sub{
      margin:-2px 0 10px;padding:6px 12px 12px;border-radius:16px;
      border:1px solid rgba(230,238,246,.9);
      background:#f7fbff;display:none;
    }
    .m-sub.show{display:block}
    .m-sub a{
      display:block;padding:10px 6px;border-radius:12px;font-weight:800;color:#203246;
    }
    .m-sub a:hover{background:rgba(35,117,171,.08);color:var(--blue)}
    .m-chev{transition:transform .18s ease}
    .m-acc[aria-expanded="true"] .m-chev{transform:rotate(180deg)}

    /* Main layout */
    main{background:#fff}
    .wrap{padding:28px 0}
    .hero{
      display:grid;grid-template-columns:1.05fr .95fr;
      gap:42px;align-items:center;
      padding:24px 0 10px;
    }
    h1{
      margin:0 0 12px;
      font-size:44px;
      font-weight:900;
      line-height:1.05;
      letter-spacing:-.5px;
    }
    .lead{
      margin:0 0 16px;
      font-size:16px;
      line-height:1.65;
      color:var(--muted);
      max-width:60ch;
    }
    .microtrust{
      display:flex;flex-wrap:wrap;gap:8px;margin:12px 0 18px;
      padding:0;list-style:none;
    }
    .microtrust li{
      padding:8px 10px;
      border:1px solid rgba(35,117,171,.18);
      border-radius:999px;
      font-weight:800;
      font-size:13px;
      background:#fff;
    }
    .ctaRow{display:flex;flex-wrap:wrap;gap:10px;margin-top:10px}
    .risk{margin:12px 0 0;color:#334155;font-weight:800;font-size:13px}

    .circlePhoto{border-radius:999px;overflow:hidden}
    .heroMedia .circlePhoto{
      width:min(420px,86vw);
      height:min(420px,86vw);
      margin:0 auto;
    }
    .circlePhoto img{width:100%;height:100%;object-fit:cover}

    /* Who we help */
    .whoGrid{
      display:grid;
      grid-template-columns:1fr 1.25fr;
      gap:22px;
      align-items:start;
      margin-top:18px;
    }
    .whoGrid h2{margin:0 0 8px;font-size:22px}
    .whoGrid p{margin:0 0 14px;color:var(--muted);line-height:1.6}
    .pillRow{
      display:grid;
      grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
      gap:12px;
    }
    .pill{
      display:flex;align-items:center;gap:12px;
      padding:12px;
      border:1px solid rgba(35,117,171,.16);
      border-radius:18px;
      background:#fff;
      font-weight:900;
    }
    .pill .mini{
      width:58px;height:58px;border-radius:16px;overflow:hidden;flex:0 0 auto;
      border:1px solid rgba(35,117,171,.10);
    }
    .pill .mini img{width:100%;height:100%;object-fit:cover}

    /* How it works */
    .howRow{
      display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:16px;
    }
    .step{
      padding:10px 12px;border-radius:14px;
      border:1px solid rgba(35,117,171,.16);
      font-weight:900;background:#fff;
      display:flex;align-items:center;gap:10px;
    }
    .badge{
      display:inline-flex;width:26px;height:26px;border-radius:999px;
      align-items:center;justify-content:center;background:var(--blue);color:#fff;
      font-weight:900;font-size:13px;
    }
    .sep{opacity:.55;font-weight:900}
    .howNote{color:var(--muted);font-weight:700;font-size:13px;margin-top:8px}

    /* Reviews */
    .reviewsHeader{text-align:center;margin:12px 0 14px}
    .reviewsHeader h2{margin:0;font-size:22px}
    .stars{display:block;margin-top:6px;font-weight:900;letter-spacing:2px}
    .ratingLine{display:block;color:var(--muted);font-weight:800;font-size:13px;margin-top:2px}

    .reviewsGrid{
      display:grid;
      grid-template-columns:repeat(4, minmax(0,1fr));
      gap:14px;
      margin-top:12px;
    }
    .reviewCard{
      border:1px solid rgba(35,117,171,.14);
      border-radius:22px;
      padding:16px;background:#fff;
      min-height:140px;
    }
    .reviewName{margin:0 0 6px;font-weight:900}
    .reviewRole{color:var(--muted);font-weight:800;font-size:12px;margin:0 0 8px}
    .reviewQuote{margin:0;color:var(--ink);font-weight:650;line-height:1.5;font-size:13px}
    .reviewStars{margin-top:10px;font-weight:900;letter-spacing:1px}

    /* FAQ */
    .faqGrid{
      display:grid;
      grid-template-columns:1.25fr .75fr;
      gap:26px;
      align-items:start;
      margin-top:10px;
    }
    .sectionTitle{margin:0 0 6px;font-size:22px}
    .sectionSub{margin:0 0 12px;color:var(--muted);font-weight:700;font-size:13px}

    .accordion{display:grid;gap:10px}
    .qa{
      border:1px solid rgba(35,117,171,.14);
      border-radius:18px;
      background:#fff;
      overflow:hidden;
    }
    .qBtn{
      width:100%;
      text-align:left;
      padding:14px 14px;
      background:#fff;border:0;
      font-weight:900;
      color:var(--ink);
      display:flex;align-items:center;justify-content:space-between;
      cursor:pointer;
    }
    .chev{opacity:.6;font-weight:900}
    .aPanel{display:none;padding:0 14px 14px;color:var(--muted);font-weight:700;line-height:1.6;font-size:13px}
    .qa.open .aPanel{display:block}
    .qa.open .chev{transform:rotate(180deg);display:inline-block}

    .miniCta{
      text-align:center;
      padding:16px;
      border-radius:26px;
      background:rgba(255,255,255,.92);
      border:1px solid rgba(35,117,171,.12);
      box-shadow:0 18px 44px rgba(15,58,88,.12);
      width:min(320px,100%);
      margin-left:auto;
    }
    .miniCta .circlePhoto{width:180px;height:180px;margin:0 auto 12px}

    /* Areas + founder */
    .twoCol{
      display:grid;
      grid-template-columns:1fr 1fr;
      gap:22px;
      margin-top:10px;
    }
    .panel{padding:18px}
    .panel h3{margin:0 0 12px;font-size:18px}
    .areasGrid{
      display:grid;grid-template-columns:1fr 1fr;gap:14px;
    }
    .areaBlock b{display:block;margin-bottom:6px}
    .areaList{margin:0;padding-left:18px;color:var(--muted);font-weight:700;line-height:1.6;font-size:13px}
    .remoteLine{margin-top:10px;color:var(--muted);font-weight:800;font-size:13px}

    .founder{
      display:grid;grid-template-columns:1.2fr .8fr;
      gap:18px;align-items:center;
    }
    .founder p{margin:0 0 12px;color:var(--muted);font-weight:700;line-height:1.65;font-size:13px}

    /* Footer */
    footer{
      background:#1c1c1c;color:#fff;
      padding:60px 20px;
      margin-top:26px;
    }
    .foot-grid{
      max-width:var(--max);margin:0 auto;
      display:flex;flex-wrap:wrap;justify-content:space-between;gap:40px;
      font-family:Poppins,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
    }
    .foot-col{flex:1;min-width:180px}
    .foot-col h4{margin:0 0 20px}
    .foot-col ul{list-style:none;padding:0;margin:0}
    .foot-col li{margin:8px 0}
    .foot-col a{color:#fff;text-decoration:none;font-weight:700;opacity:.95}
    .foot-col a:hover{opacity:1}
    .social-icon{color:#fff;transition:color .25s ease,transform .25s ease}
    .social-icon:hover{color:var(--orange) !important;transform:scale(1.12)}
    .foot-bottom{max-width:var(--max);margin:60px auto 0;text-align:center;font-size:12px;color:#aaa}

    /* Responsive */
    @media (max-width: 980px){
      .nav-links{display:none}
      .hamburger{display:flex}
      .brand{min-width:auto}
      .mega-grid{grid-template-columns:1fr 1fr}
      .hero,.whoGrid,.faqGrid,.twoCol,.founder{grid-template-columns:1fr}
      h1{font-size:36px}
      .reviewsGrid{grid-template-columns:repeat(2,minmax(0,1fr))}
      .miniCta{margin:0}
    }
    @media (max-width: 520px){
      .reviewsGrid{grid-template-columns:1fr}
      h1{font-size:32px}
      .sub-right{display:none}
    }
    
    /* =========================
   PHASE 1: Premium polish pack
   (no animations)
   ========================= */

/* Brand tokens (prevents random blues/oranges creeping in) */
:root{
  --blue:#2375ab;
  --orange:#fab034;
  --ink:#0b1b2a;
  --muted:#475569;
  --line: rgba(35,117,171,.14);
  --cardShadow: 0 18px 50px rgba(15, 58, 88, .10);
  --cardShadowHover: 0 22px 64px rgba(15, 58, 88, .14);
}

/* --- NAV FIX: make button triggers match link weight --- */
.nav-item{ font-weight: 800; } /* keep all consistent */
.nav-trigger{
  font-weight: 800;              /* fixes Services/Resources not bold */
  font-family: inherit;
  color: inherit;
  -webkit-appearance: none;
  appearance: none;
}

/* Give nav items a slightly more premium hover feel (no animation, just styling) */
.nav-item:hover{
  background: rgba(35,117,171,.08);
}
.nav-item:focus-visible,
.nav-trigger:focus-visible,
.hamburger:focus-visible,
.drawer-close:focus-visible{
  outline: 3px solid rgba(250,176,52,.45);
  outline-offset: 3px;
}

/* --- Page background and rhythm (premium “quiet” look) --- */
body{
  background: linear-gradient(180deg, #f7fbff 0%, #ffffff 45%, #ffffff 100%);
  color: var(--ink);
}

.wrap{
  max-width: 1180px; /* slightly tighter = more premium */
  padding: 34px 18px;
}

/* Headings: a touch more authority */
.hero h1{
  letter-spacing: -0.6px;
}
.lead{
  color: var(--muted);
}

/* Trust chips: softer + cleaner */
.microtrust span{
  background: rgba(255,255,255,.9);
  border: 1px solid rgba(35,117,171,.16);
}

/* Buttons: more “premium” (no animation, just better depth) */
.btn{
  box-shadow: 0 10px 26px rgba(11,27,42,.08);
  border: 1px solid rgba(11,27,42,.08);
}
.btnPrimary{
  background: var(--orange);
  border-color: rgba(250,176,52,.65);
}
.btnSecondary{
  border: 2px solid rgba(35,117,171,.22);
  box-shadow: none;
}
.btnTertiary{
  border: 2px solid rgba(11,27,42,.12);
  box-shadow: none;
}

/* Cards / panels: cleaner border + premium shadow */
.panel, .reviewCard, .pill{
  border: 1px solid var(--line);
  box-shadow: var(--cardShadow);
}

/* Reviews row: makes spacing feel intentional */
.reviewsHeader{
  margin: 34px 0 18px;
}

/* FAQ side CTA card: match premium depth */
.faqSide .miniCta{
  border: 1px solid var(--line) !important;
  box-shadow: var(--cardShadow) !important;
}

/* =========================================================
   PHASE 1.1 — Micro-upgrade (layout rhythm + hierarchy)
   Paste AFTER your current Phase 1 CSS
   ========================================================= */

/* ---------- Global spacing rhythm (intentional breathing room) ---------- */
.wrap{
  padding-top: 40px;
  padding-bottom: 48px;
}

/* Consistent section rhythm */
section.section{ margin-top: 46px; }
.who{ margin-top: 34px; }
#reviews{ margin-top: 54px; }
#approach{ margin-top: 54px; }
#success{ margin-top: 54px; }

/* ---------- HERO: tighter structure + better hierarchy ---------- */
.hero{
  grid-template-columns: 1.1fr .9fr;
  gap: 36px;
  padding: 18px 0 18px;
}

.hero h1{
  font-size: clamp(34px, 3.2vw, 52px);
  line-height: 1.03;
  margin-bottom: 14px;
}

.lead{
  font-size: 18px;
  line-height: 1.6;
  margin-bottom: 14px;
  max-width: 60ch;
}

.microtrust{
  margin: 14px 0 16px;
  gap: 10px;
}

.microtrust span{
  padding: 8px 12px;
  font-size: 13px;
  border-radius: 999px;
  background: linear-gradient(180deg, rgba(255,255,255,.96), rgba(247,251,255,.92));
}

.ctaRow{
  margin-top: 14px;
  gap: 12px;
}

.risk{
  margin-top: 12px;
  font-size: 13.5px;
  color: rgba(11,27,42,.72);
}

/* Hero image: slightly more premium framing */
.heroMedia .circlePhoto{
  box-shadow: 0 26px 70px rgba(15, 58, 88, .16);
  border: 1px solid rgba(35,117,171,.12);
}

/* ---------- WHO WE HELP: make grid feel aligned & deliberate ---------- */
.whoGrid{
  margin-top: 26px;
  gap: 26px;
}

.whoGrid h2{
  margin-bottom: 10px;
  letter-spacing: -0.2px;
}

.whoGrid p{
  margin: 0 0 14px;
  color: rgba(11,27,42,.72);
}

/* Pills feel like real clickable cards (even if not links yet) */
.pill{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92));
  border: 1px solid rgba(35,117,171,.14);
  box-shadow: 0 18px 48px rgba(15, 58, 88, .08);
}

/* ---------- HOW IT WORKS: turn it into a designed strip ---------- */
.steps{
  margin-top: 18px;
  padding: 14px;
  border-radius: 22px;
  border: 1px solid rgba(35,117,171,.14);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.90));
  box-shadow: 0 18px 50px rgba(15, 58, 88, .08);

  display: grid;
  grid-template-columns: 1fr auto 1fr auto 1fr;
  align-items: center;
  gap: 12px;
}

.steps .sep{
  font-weight: 900;
  color: rgba(35,117,171,.55);
  padding: 0 4px;
}

.step{
  display:flex;
  align-items:center;
  justify-content:flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: 18px;
  border: 1px solid rgba(35,117,171,.16);
  background: rgba(255,255,255,.92);
  box-shadow: 0 12px 30px rgba(15, 58, 88, .06);
}

.step small{
  display:block;
  margin-top: 10px;
  grid-column: 1 / -1;
  color: rgba(11,27,42,.68);
  font-weight: 650;
}

/* Badge looks more “designed” */
.badge{
  width: 28px;
  height: 28px;
  font-size: 13px;
  background: var(--blue);
  box-shadow: 0 10px 22px rgba(35,117,171,.22);
}

/* Mobile: stack How It Works cleanly */
@media (max-width: 980px){
  .steps{
    grid-template-columns: 1fr;
  }
  .steps .sep{ display:none; }
  .step{ justify-content:flex-start; }
}

/* ---------- Buttons: premium micro-styles (hover glow + press) ---------- */
.btn{
  transition: box-shadow .18s ease, transform .12s ease, border-color .18s ease;
}

.btn:hover{
  box-shadow: 0 18px 42px rgba(15, 58, 88, .16);
}

.btn:active{
  transform: translateY(1px);
  box-shadow: 0 10px 24px rgba(15, 58, 88, .12);
}

.btnPrimary:hover{
  box-shadow: 0 18px 46px rgba(250,176,52,.28), 0 14px 34px rgba(15,58,88,.12);
}

.btnSecondary:hover{
  border-color: rgba(35,117,171,.35);
  box-shadow: 0 16px 40px rgba(35,117,171,.12);
}

.btnTertiary:hover{
  border-color: rgba(11,27,42,.18);
  box-shadow: 0 16px 36px rgba(11,27,42,.10);
}

/* ---------- Card polish: soft gradients + cleaner borders ---------- */
.panel, .reviewCard, .pill{
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92));
  border: 1px solid rgba(35,117,171,.12);
}

.panel{
  border-radius: 28px;
}

.reviewCard{
  border-radius: 24px;
}

/* Optional: slightly stronger section titles */
.sectionTitle{
  letter-spacing: -0.3px;
}

/* =========================================================
   PHASE 1.2 — POLISH (Reviews + FAQ + finishing touches)
   Paste AFTER Phase 1.1 CSS
   ========================================================= */

/* ---------- Global type polish ---------- */
h2, h3{
  letter-spacing: -0.25px;
}
.sectionSub{
  color: rgba(11,27,42,.72);
}

/* ---------- REVIEWS: make it feel like a designed component ---------- */
#reviews .reviewsHeader{
  margin: 10px 0 18px;
}
#reviews .ratingLine{
  display:block;
  margin-top: 6px;
  color: rgba(11,27,42,.62);
  font-weight: 700;
  font-size: 13px;
}

/* If your reviews are inside marqueeTrack (flex row),
   make it feel premium and “snappy” without adding animation */
.marquee{
  padding: 6px 2px 10px;
}

/* horizontal scroll polish */
.marqueeTrack{
  gap: 16px;
  padding: 6px 4px 14px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
}

/* hide scrollbar but keep scroll */
.marqueeTrack::-webkit-scrollbar{ height: 10px; }
.marqueeTrack::-webkit-scrollbar-thumb{
  background: rgba(35,117,171,.18);
  border-radius: 999px;
}
.marqueeTrack{
  scrollbar-color: rgba(35,117,171,.18) transparent;
}

/* review card upgrade */
.reviewCard{
  scroll-snap-align: start;
  min-width: 300px;
  max-width: 340px;
  padding: 18px;
  border-radius: 24px;
  border: 1px solid rgba(35,117,171,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92));
  box-shadow: 0 18px 52px rgba(15,58,88,.08);
  transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}

.reviewCard:hover{
  transform: translateY(-2px);
  border-color: rgba(35,117,171,.22);
  box-shadow: 0 22px 64px rgba(15,58,88,.12);
}

.reviewName{
  font-size: 15.5px;
  margin-bottom: 6px;
}

.reviewRole{
  margin-bottom: 10px;
  color: rgba(11,27,42,.62);
}

.reviewQuote{
  font-weight: 650;
  color: rgba(11,27,42,.88);
}

/* stars sit consistently */
.reviewStars{
  margin-top: 12px;
  letter-spacing: 1px;
  color: rgba(11,27,42,.82);
}

/* Desktop: “designed” row with consistent height */
@media (min-width: 980px){
  .reviewCard{ min-height: 168px; }
}

/* ---------- FAQ: make accordion feel “app-like” ---------- */
.accordion{
  margin-top: 12px;
  display: grid;
  gap: 10px;
}

.qa{
  border-radius: 18px;
  border: 1px solid rgba(35,117,171,.12);
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92));
  box-shadow: 0 14px 42px rgba(15,58,88,.06);
  overflow: hidden;
  transition: border-color .18s ease, box-shadow .18s ease;
}

.qa:hover{
  border-color: rgba(35,117,171,.20);
  box-shadow: 0 18px 52px rgba(15,58,88,.08);
}

.qBtn{
  width: 100%;
  text-align: left;
  padding: 14px 14px;
  background: transparent;
  border: 0;
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap: 14px;
  font-weight: 900;
  color: #0b1b2a;
}

.qBtn .chev{
  width: 34px;
  height: 34px;
  border-radius: 12px;
  display:flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(35,117,171,.14);
  background: rgba(255,255,255,.9);
  transition: transform .18s ease, background .18s ease, border-color .18s ease;
  flex: 0 0 auto;
}

.qBtn:focus-visible{
  outline: 3px solid rgba(250,176,52,.55);
  outline-offset: 2px;
  border-radius: 14px;
}

/* Answer panel animation (subtle + clean) */
.aPanel{
  max-height: 0;
  overflow: hidden;
  transition: max-height .22s ease;
  border-top: 1px solid rgba(35,117,171,.10);
}

.aInner{
  padding: 12px 14px 16px;
  color: rgba(11,27,42,.74);
  line-height: 1.6;
  font-weight: 650;
}

/* When open: rotate chevron + reveal */
.qa[data-open="true"] .aPanel{
  max-height: 220px; /* enough for your answers; safe */
}

.qa[data-open="true"] .qBtn .chev{
  transform: rotate(180deg);
  background: rgba(35,117,171,.07);
  border-color: rgba(35,117,171,.22);
}

/* ---------- Right-side CTA card polish (Founder mini card) ---------- */
.faqSide .miniCta{
  border-radius: 28px !important;
  background: linear-gradient(180deg, rgba(255,255,255,.98), rgba(247,251,255,.92)) !important;
  border: 1px solid rgba(35,117,171,.12) !important;
  box-shadow: 0 22px 68px rgba(15,58,88,.12) !important;
}

/* ---------- Panels: headings + spacing consistency ---------- */
.panel h3{
  margin-bottom: 10px;
  font-weight: 900;
}
.panel p{
  color: rgba(11,27,42,.72);
}
.areaList li{
  margin: 6px 0;
}

/* ---------- Subtle “premium” divider spacing ---------- */
.bottomBtns{
  margin-top: 18px;
  display:flex;
  gap: 10px;
  flex-wrap: wrap;
}

/* ---------- Small: make all cards feel consistent ---------- */
.pill, .panel, .reviewCard, .qa{
  border-radius: 24px;
}

/* =========================================================
   PHASE 1.2.1 — BUGFIX PATCH
   Fix 1) FAQ answer text clipping (desktop + mobile)
   Fix 2) Review cards too close on desktop
   Paste AFTER Phase 1.2 CSS
   ========================================================= */

/* ---------- FIX 1: FAQ text clipping ----------
   Cause: open-state max-height too small for some answers
   Solution: raise max-height significantly + allow scrolling safety
*/
.qa[data-open="true"] .aPanel{
  max-height: 900px;     /* was 220px — this was clipping */
  overflow: visible;     /* prevents “cut off” feel */
}

/* Extra breathing room so lines don’t feel cramped */
.aInner{
  padding: 14px 14px 18px;
}

/* Mobile: give even more room (some answers wrap more) */
@media (max-width: 980px){
  .qa[data-open="true"] .aPanel{ max-height: 1200px; }
}


/* ---------- FIX 2: Reviews too close on desktop ----------
   Increase spacing between cards + add track padding so it feels “designed”
*/
@media (min-width: 980px){
  .marqueeTrack{
    gap: 26px;                 /* was ~16px */
    padding: 10px 8px 18px;    /* adds edge breathing room */
  }
}

/* If the row ever tries to “pack tight”, enforce a minimum */
.reviewCard{
  margin-right: 2px; /* tiny safety; mostly gap handles this */
}

/* =========================================================
   FAQ RESCUE PATCH — restores opening + prevents clipping
   Paste AFTER all previous Phase 1.2 / 1.2.1 / hotfix CSS
   ========================================================= */

/* Closed by default (safe + consistent) */
.accordion .qa > .aPanel{
  max-height: 0 !important;
  overflow: hidden !important;
  padding: 0 !important;
  transition: max-height .28s ease, padding .28s ease;
}

/* OPEN state (supports ALL common toggles)
   1) your wrapper data-open="true"
   2) aria-expanded="true" on button (if used)
   3) aria-hidden="false" on panel (if used)
   4) class-based open states (just in case) */
.accordion .qa[data-open="true"] > .aPanel,
.accordion .qa > .qBtn[aria-expanded="true"] + .aPanel,
.accordion .qa > .aPanel[aria-hidden="false"],
.accordion .qa.open > .aPanel,
.accordion .qa.is-open > .aPanel{
  max-height: 2000px !important;
  overflow: visible !important;
  padding: 0 0 14px 0 !important;
}

/* Inner answer spacing + readable wrap */
.accordion .qa > .aPanel .aInner{
  display: block !important;
  padding: 14px 18px 0 !important;
  white-space: normal !important;
  line-height: 1.55 !important;
}

/* =========================================================
   PHASE 1.3 — FINAL PREMIUM FINISH (NO animations yet)
   Paste AFTER Phase 1.2 + 1.2.1 + hotfix/rescue patches
   ========================================================= */

:root{
  --ink:#0b1b2a;
  --muted:#475569;
  --line: rgba(35,117,171,.14);
  --line2: rgba(35,117,171,.18);
  --wash: rgba(35,117,171,.06);
  --wash2: rgba(250,176,52,.10);
  --shadow1: 0 10px 28px rgba(11,27,42,.08);
  --shadow2: 0 18px 54px rgba(11,27,42,.12);
  --radius-xl: 28px;
  --radius-lg: 22px;
  --radius-md: 16px;
}

/* ===== Global polish ===== */
body{
  color: var(--ink);
  background:
    radial-gradient(1200px 520px at 12% 6%, rgba(35,117,171,.06), transparent 58%),
    radial-gradient(900px 500px at 88% 8%, rgba(250,176,52,.08), transparent 55%),
    #fff;
}

.wrap{
  padding-top: 30px;
  padding-bottom: 54px;
}

main.wrap > section{
  margin-bottom: 54px;
}

/* ===== Section headings / micro type ===== */
.sectionTitle, .wrap h2{
  letter-spacing: -0.02em;
}
.lead{
  color: var(--muted);
}
.risk{
  color: rgba(11,27,42,.72);
}

/* ===== HERO: final rhythm + max widths ===== */
.hero{
  padding: 26px 0 22px;
  gap: 46px;
}
.hero h1{
  font-size: clamp(34px, 3.2vw, 52px);
  letter-spacing: -0.035em;
  max-width: 18ch;
}
.hero .lead{
  max-width: 62ch;
  font-size: 18px;
}
.microtrust{
  margin: 16px 0 18px;
}
.microtrust span{
  border: 1px solid rgba(35,117,171,.16);
  background: linear-gradient(180deg, #fff, rgba(35,117,171,.03));
  box-shadow: 0 6px 18px rgba(11,27,42,.05);
}
.ctaRow{
  margin-top: 10px;
  gap: 12px;
}

/* Hero image ring + depth */
.heroMedia .circlePhoto{
  position: relative;
  box-shadow: var(--shadow2);
}
.heroMedia .circlePhoto::before{
  content:"";
  position:absolute;
  inset:-10px;
  border-radius:999px;
  background:
    radial-gradient(circle at 30% 30%, rgba(250,176,52,.18), transparent 48%),
    radial-gradient(circle at 70% 70%, rgba(35,117,171,.16), transparent 52%);
  z-index:-1;
  filter: blur(2px);
}

/* ===== Buttons: premium finish (no motion beyond hover/press) ===== */
.btn{
  box-shadow: 0 10px 26px rgba(11,27,42,.08);
  border: 1px solid rgba(11,27,42,.06);
  letter-spacing: .1px;
}
.btnPrimary{
  border-color: rgba(250,176,52,.45);
  box-shadow: 0 16px 34px rgba(250,176,52,.22), 0 10px 24px rgba(11,27,42,.10);
}
.btnSecondary{
  border-color: rgba(35,117,171,.24);
  background: linear-gradient(180deg, #fff, rgba(35,117,171,.03));
}
.btnTertiary{
  background: linear-gradient(180deg, #fff, rgba(11,27,42,.02));
}

/* Hover/press states (subtle, no layout shift) */
.btn:hover{
  filter: saturate(1.02);
  box-shadow: 0 18px 44px rgba(11,27,42,.12);
}
.btnPrimary:hover{
  box-shadow: 0 18px 48px rgba(250,176,52,.26), 0 16px 36px rgba(11,27,42,.12);
}
.btn:active{
  transform: translateY(1px);
  box-shadow: 0 10px 24px rgba(11,27,42,.10);
}

/* ===== WHO + pills: cleaner “system” look ===== */
.whoGrid > div:first-child p{
  color: var(--muted);
}
.pillRow{
  gap: 14px;
}
.pill{
  border-radius: var(--radius-lg);
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, #fff, rgba(35,117,171,.02));
  box-shadow: var(--shadow1);
}
.pill b{
  letter-spacing:-0.01em;
}

/* ===== How it works strip: final alignment ===== */
.steps{
  border: 1px solid var(--line);
  background:
    linear-gradient(180deg, rgba(35,117,171,.035), rgba(255,255,255,.92));
  border-radius: var(--radius-xl);
  padding: 14px 14px 12px;
  box-shadow: var(--shadow1);
}
.step{
  border-radius: 999px;
  border: 1px solid rgba(35,117,171,.18);
  background: #fff;
  box-shadow: 0 10px 24px rgba(11,27,42,.06);
}
.badge{
  box-shadow: 0 10px 20px rgba(35,117,171,.22);
}
.sep{
  opacity:.55;
  font-weight:900;
}

/* ===== Reviews: premium tray ===== */
#reviews .marquee{
  border-radius: var(--radius-xl);
  border: 1px solid var(--line);
  background:
    radial-gradient(900px 320px at 10% 0%, rgba(35,117,171,.07), transparent 55%),
    radial-gradient(700px 280px at 90% 0%, rgba(250,176,52,.08), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.86), rgba(255,255,255,.98));
  box-shadow: var(--shadow1);
  padding: 14px;
}
.reviewCard{
  border-radius: var(--radius-lg);
  border: 1px solid rgba(35,117,171,.14);
  background: linear-gradient(180deg, #fff, rgba(35,117,171,.02));
  box-shadow: 0 14px 34px rgba(11,27,42,.08);
}

/* ===== FAQ: premium panels + button hit-area ===== */
.accordion .qa{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(35,117,171,.14);
  background: linear-gradient(180deg, #fff, rgba(35,117,171,.02));
  box-shadow: 0 14px 34px rgba(11,27,42,.06);
}
.accordion .qBtn{
  width: 100%;
  padding: 20px 18px;
  border-radius: var(--radius-xl);
}
.accordion .qBtn .chev{
  width: 44px;
  height: 44px;
  border-radius: 14px;
  border: 1px solid rgba(35,117,171,.14);
  background: linear-gradient(180deg, #fff, rgba(35,117,171,.03));
}

/* Make the open state feel intentional (no animation added) */
.accordion .qa[data-open="true"]{
  border-color: rgba(35,117,171,.22);
  box-shadow: 0 18px 54px rgba(11,27,42,.10);
}
.accordion .qa[data-open="true"] .qBtn{
  background: rgba(35,117,171,.03);
}

/* ===== Founder + Areas panels: depth + balance ===== */
.panel{
  border-radius: var(--radius-xl);
  border: 1px solid rgba(35,117,171,.14);
  background:
    radial-gradient(900px 240px at 10% 0%, rgba(35,117,171,.06), transparent 55%),
    linear-gradient(180deg, rgba(255,255,255,.92), #fff);
  box-shadow: var(--shadow1);
}
.panel h3{
  letter-spacing: -0.02em;
}

/* Founder photo ring */
.founder .circlePhoto{
  box-shadow: var(--shadow1);
  position: relative;
}
.founder .circlePhoto::after{
  content:"";
  position:absolute;
  inset:-8px;
  border-radius:999px;
  border: 2px solid rgba(35,117,171,.14);
  pointer-events:none;
}

/* ===== Responsive tweaks for spacing harmony ===== */
@media (max-width: 980px){
  main.wrap > section{ margin-bottom: 42px; }
  .hero{ padding-top: 22px; }
  .hero h1{ max-width: 22ch; }
  .accordion .qBtn{ padding: 18px 16px; }
}

@media (max-width: 520px){
  .wrap{ padding-left: 14px; padding-right: 14px; }
  .microtrust span{ font-size: 12.5px; }
  .btn{ width: auto; }
  .reviewCard{ min-width: 260px; }
}

/* === Reviews stars: make them BondEsq orange (#fab034) === */
:root { --bondOrange: #fab034; }

/* The “★★★★★” line under the Reviews header */
.reviewsHeader .stars,
.reviewsHeader .ratingLine::before {
  color: var(--bondOrange) !important;
}

/* Stars inside each review card */
.reviewStars {
  color: var(--bondOrange) !important;
}

/* Optional: give the stars a slightly richer look without being flashy */
.reviewsHeader .stars,
.reviewStars{
  text-shadow: 0 1px 0 rgba(0,0,0,.06);
}

.reviewsHeader .ratingLine{
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.reviewsHeader .ratingLine::before{
  content: "●";
  font-size: 10px;
  line-height: 1;
  color: var(--bondOrange) !important;
  opacity: .95;
}

/* === Review name styling: BondEsq blue + bold (safe cosmetic) === */
.reviewsGrid .reviewName,
.marqueeTrack .reviewName,
.reviewCard .reviewName{
  color: #2375ab !important;
  font-weight: 900 !important;
  letter-spacing: .1px;
}

/* Optional: tiny boost to clarity (still subtle) */
.reviewCard .reviewName{
  text-shadow: 0 1px 0 rgba(0,0,0,.04);
}

.reviewCard .reviewRole{
  color: rgba(11,27,42,.70) !important;
  font-weight: 700;
}

/* === Premium marquee edge fade (see-through, no layout shift) === */
.marquee{
  position: relative;
  overflow: hidden;
}

.marquee::before,
.marquee::after{
  content:"";
  position:absolute;
  top:0; bottom:0;
  width: 80px;
  pointer-events:none;
  z-index: 5;
}

.marquee::before{
  left:0;
  background: linear-gradient(to right, #ffffff 0%, rgba(255,255,255,0) 100%);
}

.marquee::after{
  right:0;
  background: linear-gradient(to left, #ffffff 0%, rgba(255,255,255,0) 100%);
}

@media (max-width: 520px){
  .marquee::before, .marquee::after{ width: 46px; }
}

/* === Smoother translate === */
.marqueeTrack{
  will-change: transform;
  transform: translate3d(0,0,0);
}

/* === Marquee pause behaviour (no layout shift) === */
.marqueeTrack.is-paused{
  animation-play-state: paused !important; /* in case you later switch to CSS animation */
}

/* If we're driving transform via JS (we are), this just helps UX */
.marquee:hover{ cursor: grab; }
.marquee:active{ cursor: grabbing; }

/* Optional: slightly reduce motion for users who prefer it */
@media (prefers-reduced-motion: reduce){
  .marqueeTrack{ transform: none !important; }
}

/* =========================================================
   PHASE 2.0.1 — REVEAL VISIBILITY PATCH (safe / noticeable)
   Paste AFTER Phase 2.0 CSS
   ========================================================= */

/* Default (no-JS / if script fails): show content normally */
.reveal{
  opacity: 1;
  transform: none;
  filter: none;
}

/* Only animate when JS confirms it’s running */
html.js-anim .reveal{
  opacity: 0;
  transform: translateY(28px);
  filter: blur(4px);
  transition:
    opacity .85s cubic-bezier(.2,.8,.2,1),
    transform .85s cubic-bezier(.2,.8,.2,1),
    filter .85s cubic-bezier(.2,.8,.2,1);
  will-change: opacity, transform, filter;
}
html.js-anim .reveal.in{
  opacity: 1;
  transform: translateY(0);
  filter: blur(0);
}

/* =========================================================
   PHASE 2.0.2 — REVIEWS MARQUEE (for your .reviewsGrid HTML)
   Paste AFTER Phase 2.0.1 CSS
   ========================================================= */

.reviewsMarquee{
  overflow: hidden;
  position: relative;
  width: 100%;
}

/* Force the existing grid container to behave like a scrolling track */
.reviewsTrack{
  display: flex !important;
  flex-wrap: nowrap !important;
  gap: 18px;
  width: max-content;
  will-change: transform;
  align-items: stretch;
  padding: 4px 2px 10px; /* tiny breathing room so shadows don’t clip */
}

/* Make sure cards don't shrink in the track */
.reviewsTrack .reviewCard{
  flex: 0 0 auto;
  min-width: 280px;     /* readable */
  max-width: 340px;
}

/* Slightly tighter on mobile */
@media (max-width: 980px){
  .reviewsTrack{ gap: 14px; }
  .reviewsTrack .reviewCard{ min-width: 260px; }
}

/* =========================
   PHASE 2.1 — MICRO INTERACTIONS (NO LAYOUT SHIFT)
   ========================= */

/* 1) Stagger support for your existing scroll-reveal (only affects timing) */
.section,
.reviewCard,
.faqItem,
.faqRow,
.faqList > * ,
.reviewsRow > * ,
.reviewsGrid > * ,
.howStrip > * ,
.howItWorks > * ,
.whoCards > * ,
.whoGrid > * ,
.industryGrid > * {
  transition-delay: var(--reveal-delay, 0ms);
}

/* 2) Slightly richer hover depth on cards (still calm) */
.reviewCard,
.faqItem,
.card,
.whoCard,
.industryCard {
  transform: translateZ(0);
  will-change: transform, box-shadow;
}

.reviewCard:hover,
.card:hover,
.whoCard:hover,
.industryCard:hover {
  transform: translateY(-4px);
}

.faqItem:hover{
  transform: translateY(-2px);
}

/* 3) Buttons: premium micro feel (hover/press) */
button,
.btn,
a.btn,
a.button,
a[role="button"]{
  transform: translateZ(0);
  will-change: transform, box-shadow, filter;
}

button:hover,
.btn:hover,
a.btn:hover,
a.button:hover,
a[role="button"]:hover{
  transform: translateY(-1px);
}

button:active,
.btn:active,
a.btn:active,
a.button:active,
a[role="button"]:active{
  transform: translateY(0px) scale(0.99);
}

/* Better focus ring (accessibility + premium) */
button:focus-visible,
.btn:focus-visible,
a.btn:focus-visible,
a.button:focus-visible,
a[role="button"]:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(250,176,52,0.35), 0 0 0 6px rgba(35,117,171,0.18);
  border-radius: 12px;
}

/* 4) Nav links: subtle underline “confidence” line */
nav a,
.header a,
.mainNav a{
  position: relative;
}

nav a::after,
.header a::after,
.mainNav a::after{
  content:"";
  position:absolute;
  left: 0;
  bottom: -6px;
  height: 2px;
  width: 0%;
  background: #fab034;
  border-radius: 999px;
  opacity: 0.9;
  transition: width 220ms ease;
}

nav a:hover::after,
.header a:hover::after,
.mainNav a:hover::after{
  width: 100%;
}

/* 5) Hero image: subtle “alive” float (transform only) */
.heroImage,
.heroPhoto,
.heroCircle,
.heroImg,
.heroMedia,
.heroVisual{
  will-change: transform;
}

@keyframes bondesqFloat {
  0%   { transform: translateY(0px); }
  50%  { transform: translateY(-6px); }
  100% { transform: translateY(0px); }
}

/* Apply to the hero image container, but not on reduced-motion */
@media (prefers-reduced-motion: no-preference){
  .heroImage,
  .heroCircle,
  .heroVisual{
    animation: bondesqFloat 6s ease-in-out infinite;
  }
}

/* 6) Reduce motion safety */
@media (prefers-reduced-motion: reduce){
  .heroImage,
  .heroCircle,
  .heroVisual{
    animation: none !important;
  }
}

/* =========================
   PHASE 2.3 — HERO MICRO MOTION (NO LAYOUT SHIFT)
   Trust chips: stagger-in + premium hover
   CTA buttons: cleaner hover glow + press state
   ========================= */

/* Make hero feel intentional */
.hero .microtrust{
  gap:10px; /* a touch more designed */
}

/* Trust chips base polish */
.hero .microtrust span{
  position:relative;
  will-change: transform, opacity, box-shadow;
  transition: transform 180ms ease, box-shadow 180ms ease, border-color 180ms ease;
  box-shadow: 0 10px 22px rgba(10, 28, 45, 0.06);
}

/* Premium hover lift */
.hero .microtrust span:hover{
  transform: translateY(-2px);
  border-color: rgba(35,117,171,.30);
  box-shadow: 0 16px 34px rgba(10, 28, 45, 0.10);
}

/* Tiny sheen (very subtle) */
.hero .microtrust span::after{
  content:"";
  position:absolute;
  inset:0;
  border-radius:999px;
  background: linear-gradient(120deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0));
  opacity:0;
  transform: translateX(-30%);
  transition: opacity 240ms ease, transform 520ms ease;
  pointer-events:none;
}
.hero .microtrust span:hover::after{
  opacity:.55;
  transform: translateX(30%);
}

/* CTA row: slightly richer hover + press */
.hero .ctaRow .btn{
  will-change: transform, box-shadow, filter;
  transition: transform 160ms ease, box-shadow 180ms ease, filter 180ms ease;
}
.hero .ctaRow .btn:hover{
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(10, 28, 45, 0.12);
  filter: saturate(1.03);
}
.hero .ctaRow .btn:active{
  transform: translateY(0px) scale(0.99);
  box-shadow: 0 10px 22px rgba(10, 28, 45, 0.10);
}

/* Reduced motion safety */
@media (prefers-reduced-motion: reduce){
  .hero .microtrust span,
  .hero .ctaRow .btn{
    transition:none !important;
  }
  .hero .microtrust span::after{
    display:none !important;
  }
}

/* =========================
   PHASE 2.4 — HERO IMAGE MICRO-TILT (DESKTOP)
   - No layout shift (transform only)
   - Mobile/reduced-motion safe
   ========================= */

.heroMedia{
  perspective: 900px; /* gives 3D depth */
}

/* apply to the circle wrapper (or image container) */
.heroMedia .circlePhoto{
  transform-style: preserve-3d;
  will-change: transform;
  transition: transform 220ms cubic-bezier(.2,.8,.2,1);
}

/* soft "depth" highlight */
.heroMedia .circlePhoto::after{
  content:"";
  position:absolute;
  inset:-10%;
  border-radius:999px;
  background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.35), rgba(255,255,255,0) 55%);
  opacity:0;
  transition: opacity 220ms ease;
  pointer-events:none;
}

/* when active (JS toggles this class) */
.heroMedia .circlePhoto.is-tilting::after{
  opacity:.55;
}

/* Reduced motion: keep it static */
@media (prefers-reduced-motion: reduce){
  .heroMedia{ perspective:none !important; }
  .heroMedia .circlePhoto{ transition:none !important; transform:none !important; }
  .heroMedia .circlePhoto::after{ display:none !important; }
}

/* Mobile: disable tilt (touch devices) */
@media (hover: none){
  .heroMedia{ perspective:none; }
  .heroMedia .circlePhoto{ transform:none !important; }
  .heroMedia .circlePhoto::after{ display:none; }
}

/* =========================
   PHASE 2.6 — WHO WE HELP + OUR APPROACH (Clean reference build)
   Matches HTML: whoLeft / whoRight / approachFooter / approachTitle / approachTray
   Paste AFTER Phase 2.4
========================= */

:root{
  --be-blue:#2375ab;
  --be-gold:#fab034;
}

/* Blue premium band wrapper */
.whoHelpBand{
  position: relative;
  border-radius: 30px;
  overflow: hidden;
  padding: clamp(26px, 4vw, 44px);
  background:
    radial-gradient(1200px 600px at 15% 10%, rgba(255,255,255,.18), transparent 60%),
    radial-gradient(900px 500px at 85% 40%, rgba(250,176,52,.12), transparent 55%),
    linear-gradient(180deg, rgba(35,117,171,1) 0%, rgba(26,92,136,1) 100%);
  box-shadow: 0 22px 55px rgba(8, 28, 44, .22);
}
.whoHelpBand::before{
  content:"";
  position:absolute;
  inset:-2px;
  background:
    radial-gradient(800px 380px at 35% 0%, rgba(255,255,255,.14), transparent 60%),
    radial-gradient(520px 280px at 100% 100%, rgba(255,255,255,.08), transparent 60%),
    linear-gradient(135deg, rgba(255,255,255,.06), rgba(255,255,255,0));
  pointer-events:none;
}
.whoHelpBand > *{ position:relative; z-index:1; }

/* 2-column top area */
.whoHelpBand .whoGrid{
  display:grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 28px;
  align-items:start;
}

/* Text readability on blue */
.whoHelpBand h2{ color:#fff !important; }
.whoHelpBand p{ color: rgba(255,255,255,.86) !important; }
.whoHelpBand b, .whoHelpBand strong{ color: rgba(255,255,255,.96) !important; }

/* Button inside blue band stays premium */
.whoHelpBand .btn.btn-primary{
  background: var(--be-gold);
  color:#0b1a24;
  border: 1px solid rgba(255,255,255,.35);
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

/* Industry pills: white, premium contrast */
.whoHelpBand .pillRow{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.whoHelpBand .pill{
  display:flex;
  align-items:center;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255,255,255,.96);
  border: 1px solid rgba(255,255,255,.55);
  box-shadow: 0 16px 38px rgba(8, 28, 44, .18);
  font-weight: 800;
  color: #0b1a24;
}
.whoHelpBand .pill .mini{
  width: 44px;
  height: 44px;
  border-radius: 999px;
  overflow:hidden;
  flex: 0 0 44px;
  border: 2px solid rgba(35,117,171,.18);
}
.whoHelpBand .pill .mini img{
  width:100%;
  height:100%;
  object-fit:cover;
  display:block;
}

/* FOOTER: Our approach under BOTH columns */
.whoHelpBand .approachFooter{
  grid-column: 1 / -1;
  margin-top: 22px;
  text-align:center;
}

/* Title: top-center, “glassy”, #fab034 */
.whoHelpBand .approachTitle{
  display:inline-block;
  margin: 0 auto 14px;
  padding: 10px 18px;
  border-radius: 999px;
  font-weight: 900;
  letter-spacing: .3px;
  color: var(--be-gold);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.18);
  box-shadow: 0 14px 34px rgba(0,0,0,.22);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Big soft capsule tray (reference style) */
.whoHelpBand .approachTray{
  margin: 0 auto 12px;
  max-width: 1100px;
  padding: 22px 22px;
  border-radius: 999px;
  background: rgba(214,232,245,.88);
  border: 1px solid rgba(255,255,255,.45);
  box-shadow:
    0 30px 70px rgba(0,0,0,.25),
    inset 0 1px 0 rgba(255,255,255,.35);

  display:flex;
  align-items:center;
  justify-content:center;
  gap: 18px;
  flex-wrap: wrap;
}

/* Step capsules */
.whoHelpBand .approachStep{
  display:inline-flex;
  align-items:center;
  gap: 12px;
  padding: 16px 20px;
  border-radius: 999px;
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(35,117,171,.18);
  box-shadow:
    0 12px 22px rgba(0,0,0,.12),
    inset 0 1px 0 rgba(255,255,255,.65);
  font-weight: 900;
  color:#0c1b2a;
}

/* Number circle inside each step */
.whoHelpBand .approachStep .badge{
  width: 42px;
  height: 42px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border-radius: 999px;
  background: rgba(35,117,171,.12);
  border: 1px solid rgba(35,117,171,.20);
  color:#0c1b2a;
  font-weight: 900;
}

/* Gold arrows between steps (desktop) */
.whoHelpBand .approachArrow{
  color: var(--be-gold);
  font-weight: 900;
  font-size: 18px;
  opacity: .95;
}

/* Gold note line for contrast */
.whoHelpBand .howNote{
  margin-top: 8px;
  font-weight: 900;
  color: var(--be-gold);
  text-shadow: 0 1px 0 rgba(0,0,0,.18);
}

/* Responsive */
@media (max-width: 900px){
  .whoHelpBand{ border-radius: 22px; }
  .whoHelpBand .whoGrid{ grid-template-columns: 1fr; }
  .whoHelpBand .pillRow{ grid-template-columns: 1fr; }
  .whoHelpBand .approachTray{
    border-radius: 26px;
    padding: 16px 14px;
  }
  .whoHelpBand .approachArrow{ display:none; }
  .whoHelpBand .approachStep{
    width: 100%;
    justify-content:flex-start;
  }
}

/* =========================
   PHASE 2.6.x — MICRO POLISH PATCH
   Bigger arrows + stronger note readability + larger industry mini images
   Paste AFTER Phase 2.6 (clean final)
========================= */

.whoHelpBand .approachArrow{
  font-size: 22px;          /* bigger */
  line-height: 1;
  transform: translateY(-1px);
  text-shadow: 0 6px 16px rgba(0,0,0,.25);
}

/* NOTE: keep gold, but add “premium readable” support */
.whoHelpBand .howNote{
  display: inline-block;
  max-width: 980px;
  padding: 10px 16px;
  border-radius: 999px;
  font-size: clamp(14px, 1.05vw, 16px);
  line-height: 1.35;
  letter-spacing: .1px;

  color: #fab034;
  background: rgba(0,0,0,.18);                 /* subtle dark wash behind text */
  border: 1px solid rgba(255,255,255,.12);
  box-shadow:
    0 14px 30px rgba(0,0,0,.18),
    inset 0 1px 0 rgba(255,255,255,.10);
  text-shadow: 0 2px 14px rgba(0,0,0,.35);
}

/* If your note is full-width and looks “too centered”, this makes it feel intentional */
.whoHelpBand .approachFooter .howNote{
  margin-left: auto;
  margin-right: auto;
}

/* Bigger industry collage icons (without blowing up the pill layout) */
.whoHelpBand .pillRow .pill .mini{
  width: 54px;
  height: 54px;
  flex: 0 0 54px;
  border-radius: 999px;
  overflow: hidden;

  border: 2px solid rgba(250,176,52,.38);      /* gold ring */
  box-shadow: 0 14px 26px rgba(0,0,0,.18);
}

.whoHelpBand .pillRow .pill .mini img{
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* Mobile: keep it tidy */
@media (max-width: 900px){
  .whoHelpBand .pillRow .pill .mini{
    width: 50px;
    height: 50px;
    flex-basis: 50px;
  }
  .whoHelpBand .howNote{
    border-radius: 22px; /* reads nicer when it wraps on mobile */
    padding: 10px 14px;
  }
}

/* =========================
   2.6 — Lead-gen upgrades (CTAs + bullets + micro-proof)
   Paste AFTER Phase 2.6 clean final CSS
========================= */

.whoHelpBand .whoCtas{
  display:flex;
  align-items:center;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 14px;
}

/* Ensure primary stays the visual boss */
.whoHelpBand .whoCtas .btn-primary{
  box-shadow: 0 18px 35px rgba(0,0,0,.18);
}

/* Secondary CTA = ghost/outline (quiet but premium) */
.whoHelpBand .btn-ghost{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 800;
  text-decoration: none;
  color: rgba(255,255,255,.96);
  background: rgba(255,255,255,.10);
  border: 1px solid rgba(255,255,255,.28);
  box-shadow: 0 14px 28px rgba(0,0,0,.14);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  transition: transform .16s ease, box-shadow .16s ease, background .16s ease;
}

.whoHelpBand .btn-ghost:hover{
  transform: translateY(-1px);
  background: rgba(255,255,255,.14);
  box-shadow: 0 18px 34px rgba(0,0,0,.18);
}

.whoHelpBand .btn-ghost:active{
  transform: translateY(0px);
  box-shadow: 0 12px 24px rgba(0,0,0,.14);
}

/* “What you get” bullets */
.whoHelpBand .whoBenefits{
  margin: 12px 0 10px;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
  max-width: 520px;
}

.whoHelpBand .whoBenefits li{
  display:flex;
  align-items:flex-start;
  gap: 10px;
  color: rgba(255,255,255,.90);
  font-weight: 650;
  line-height: 1.35;
}

.whoHelpBand .whoBenefits li::before{
  content: "✓";
  color: var(--be-gold);
  font-weight: 900;
  margin-top: 1px;
  text-shadow: 0 2px 12px rgba(0,0,0,.18);
}

/* Micro-proof line (subtle, doesn’t compete with reviews) */
.whoHelpBand .whoMicroProof{
  margin-top: 6px;
  color: rgba(255,255,255,.78);
  font-weight: 700;
  font-size: 14px;
  letter-spacing: .15px;
}

/* Mobile: stack CTAs cleanly */
@media (max-width: 640px){
  .whoHelpBand .whoCtas{ gap: 10px; }
  .whoHelpBand .whoCtas a{ width: 100%; }
}

/* =========================
   Lead-gen patch: Benefits heading + micro-proof breathing space
   Paste AFTER the last add-on CSS
========================= */

.whoHelpBand .whoBenefitsTitle{
  margin-top: 14px;
  margin-bottom: 8px;
  font-weight: 900;
  letter-spacing: .2px;
  color: rgba(255,255,255,.95);
  text-shadow: 0 10px 26px rgba(0,0,0,.18);
}

/* tighten bullet block slightly under title */
.whoHelpBand .whoBenefits{
  margin-top: 0;
}

/* Micro-proof: more breathing room + brand pop (gold) */
.whoHelpBand .whoMicroProof{
  margin-top: 14px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  border-radius: 999px;

  color: #fab034;
  font-weight: 900;
  letter-spacing: .15px;

  background: rgba(0,0,0,.10);
  border: 1px solid rgba(255,255,255,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.10);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

/* Optional: slightly increase spacing between CTAs and the benefits block */
.whoHelpBand .whoCtas{
  margin-bottom: 4px;
}

/* =========================
   Patch: “What you get” spacing + size consistency
   Paste AFTER the last patch
========================= */

/* Add breathing room between CTA row and “What you get” */
.whoHelpBand .whoBenefitsTitle{
  margin-top: 18px;     /* increase space from buttons */
  margin-bottom: 10px;
  font-size: 20px;      /* bigger + more consistent with section hierarchy */
  line-height: 1.15;
}

/* If your CTA row has a wrapper, give it a tiny buffer too (safe if it exists) */
.whoHelpBand .whoCtas{
  margin-bottom: 6px;
}

/* Mobile tuning */
@media (max-width: 640px){
  .whoHelpBand .whoBenefitsTitle{
    margin-top: 16px;
    font-size: 18px;
  }
}

.whoHelpBand .whoBenefitsTitle{
  font-weight: 900;
  letter-spacing: -0.2px;
}

.whoHelpBand .whoLeft a.btn,
.whoHelpBand .whoLeft .btn{
  margin-bottom: 8px;
}

/* =========================
   PHASE 2.7 — FAQ Premium Micro-Interactions (safe, no layout changes)
   Paste AFTER Phase 2.6
========================= */

:root{
  --be-blue:#2375ab;
  --be-gold:#fab034;
}

/* --- Helpful fallbacks (only apply if these exist) --- */
.faqItem, .accordion-item, details{
  transition: box-shadow .22s ease, transform .22s ease, border-color .22s ease;
}

.faqItem:hover, .accordion-item:hover, details:hover{
  box-shadow: 0 18px 40px rgba(8, 28, 44, .10);
}

/* Open state styling (works with .is-open, .active, [open], or aria-expanded patterns) */
.faqItem.is-open,
.faqItem.active,
.accordion-item.is-open,
.accordion-item.active,
details[open]{
  border-color: rgba(35,117,171,.25);
  box-shadow: 0 22px 55px rgba(8, 28, 44, .14);
}

/* Question row polish */
.faqQuestion, .accordion-header, summary{
  cursor: pointer;
}

/* If you have a chevron/icon inside the question row */
.faqChevron, .chevron, .accordion-icon, summary::after{
  transition: transform .22s ease, opacity .22s ease;
}

/* Rotate chevron when open (multiple patterns) */
.faqItem.is-open .faqChevron,
.faqItem.active .faqChevron,
.accordion-item.is-open .accordion-icon,
.accordion-item.active .accordion-icon{
  transform: rotate(180deg);
}

/* Answer text animate IN when open — no height/overflow tricks (so no clipping) */
.faqAnswer, .accordion-content, .panel, details > *:not(summary){
  animation: none;
}

@keyframes beFadeSlideIn{
  from{ opacity:0; transform: translateY(-6px); }
  to{ opacity:1; transform: translateY(0); }
}

.faqItem.is-open .faqAnswer,
.faqItem.active .faqAnswer,
.accordion-item.is-open .accordion-content,
.accordion-item.active .accordion-content,
details[open] > *:not(summary){
  animation: beFadeSlideIn .26s ease both;
}

/* Gold accent on open question text (if you have a dedicated text element) */
.faqItem.is-open .faqQuestionText,
.faqItem.active .faqQuestionText,
.accordion-item.is-open .accordion-title,
.accordion-item.active .accordion-title{
  color: var(--be-blue);
}

/* Focus states (keyboard accessibility) */
.faqQuestion:focus-visible,
.accordion-header:focus-visible,
summary:focus-visible,
button[aria-expanded]:focus-visible{
  outline: 3px solid rgba(250,176,52,.55);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .faqItem, .accordion-item, details,
  .faqChevron, .chevron, .accordion-icon{
    transition: none !important;
  }
  .faqItem.is-open .faqAnswer,
  .faqItem.active .faqAnswer,
  .accordion-item.is-open .accordion-content,
  .accordion-item.active .accordion-content,
  details[open] > *:not(summary){
    animation: none !important;
  }
}

/* =========================
   PHASE 2.8 — CTA Button Micro-Shine + Press Feel (subtle)
   Paste AFTER Phase 2.7
========================= */

:root{
  --be-blue:#2375ab;
  --be-gold:#fab034;
}

/* Target common button patterns without breaking anything */
.btn,
button.btn,
a.btn,
.btn-primary,
.btnPrimary,
.btn-secondary,
.btnSecondary,
a.btn-primary,
a.btn-secondary,
.whoCtas a,
.whoCtas .btn{
  position: relative;
  overflow: hidden;              /* needed for sheen */
  transform: translateZ(0);       /* smooth */
  transition: transform .16s ease, box-shadow .16s ease, filter .16s ease, border-color .16s ease;
  -webkit-tap-highlight-color: transparent;
}

/* Subtle lift + richer shadow on hover (desktop) */
@media (hover:hover){
  .btn:hover,
  .btn-primary:hover,
  .btnPrimary:hover,
  .btn-secondary:hover,
  .btnSecondary:hover{
    transform: translateY(-1px);
    box-shadow: 0 18px 38px rgba(8, 28, 44, .16);
  }
}

/* Press feel (mouse + touch) */
.btn:active,
.btn-primary:active,
.btnPrimary:active,
.btn-secondary:active,
.btnSecondary:active{
  transform: translateY(0px) scale(0.99);
  box-shadow: 0 12px 26px rgba(8, 28, 44, .14);
}

/* Premium sheen (only on hover-capable devices) */
@media (hover:hover){
  .btn::after,
  .btn-primary::after,
  .btnPrimary::after,
  .btn-secondary::after,
  .btnSecondary::after{
    content:"";
    position:absolute;
    inset:-40% -60%;
    background: linear-gradient(90deg, transparent 0%, rgba(255,255,255,.28) 50%, transparent 100%);
    transform: translateX(-120%) rotate(12deg);
    opacity: .0;
    pointer-events:none;
  }

  .btn:hover::after,
  .btn-primary:hover::after,
  .btnPrimary:hover::after,
  .btn-secondary:hover::after,
  .btnSecondary:hover::after{
    opacity: .85;
    transform: translateX(120%) rotate(12deg);
    transition: transform .65s ease, opacity .25s ease;
  }
}

/* Make the primary (gold) feel slightly “richer” */
.btn-primary,
.btnPrimary{
  box-shadow: 0 16px 32px rgba(0,0,0,.16);
  border-color: rgba(255,255,255,.30);
}

/* Ghost/secondary button gets a clearer premium edge */
.btn-secondary,
.btnSecondary{
  border-color: rgba(255,255,255,.28);
  box-shadow: 0 14px 30px rgba(0,0,0,.12);
}

/* Focus ring (keyboard users) */
.btn:focus-visible,
.btn-primary:focus-visible,
.btnPrimary:focus-visible,
.btn-secondary:focus-visible,
.btnSecondary:focus-visible,
a.btn:focus-visible{
  outline: 3px solid rgba(250,176,52,.55);
  outline-offset: 4px;
  border-radius: 14px;
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce){
  .btn,
  .btn-primary,
  .btnPrimary,
  .btn-secondary,
  .btnSecondary{
    transition: none !important;
  }
  .btn::after,
  .btn-primary::after,
  .btnPrimary::after,
  .btn-secondary::after,
  .btnSecondary::after{
    display:none !important;
  }
}

/* === 2.8.1 HOTFIX — restore hero tilt mouse tracking === */
/* If any overlay/frame sits above the image, it must NOT capture mouse */
.heroCircle::before,
.heroCircle::after,
.heroImage::before,
.heroImage::after,
.heroMedia::before,
.heroMedia::after{
  pointer-events: none !important;
}

/* Ensure the tilt element can actually receive mouse events */
.heroCircle,
.heroImage,
.heroMedia{
  pointer-events: auto;
  transform-style: preserve-3d;
  will-change: transform;
}

/* =========================================================
   PHASE 2.8.2 — HERO CTA: Make "Explore our Services" BLUE
   Same micro-shine + press feel as "Book a Free Call"
   Paste AFTER Phase 2.8 CSS
   ========================================================= */

:root{
  --be-blue:#2375ab;
  --be-blue-dark:#1f6797; /* slight dark for hover */
}

/* Target the Explore button safely.
   Works if it's:
   - <a class="btn btn-secondary">Explore our Services</a>
   - <a class="btn btn-outline">Explore our Services</a>
   - or you add class="btn-services" (recommended) */
a.btn-services,
.hero a.btn-services,
.hero .btn-secondary,
.hero .btn-outline,
.hero a[href*="services"],
.hero a[href*="accounting"],
.hero a[href*="bookkeeping"]{
  background: var(--be-blue) !important;
  color: #fff !important;
  border: 1px solid rgba(255,255,255,.25) !important;
  box-shadow: 0 16px 34px rgba(8,28,44,.16);
  position: relative;
  overflow: hidden; /* required for sheen */
  transform: translateZ(0); /* smooth */
}

/* Ensure any inner text/spans stay white */
a.btn-services *,
.hero .btn-secondary *,
.hero .btn-outline *{
  color:#fff !important;
}

/* --- Same gentle sheen sweep (desktop hover only) --- */
@media (hover:hover) and (pointer:fine){
  a.btn-services::before,
  .hero .btn-secondary::before,
  .hero .btn-outline::before{
    content:"";
    position:absolute;
    inset:-2px;
    background: linear-gradient(120deg,
      transparent 0%,
      rgba(255,255,255,.18) 40%,
      rgba(255,255,255,.35) 50%,
      rgba(255,255,255,.18) 60%,
      transparent 100%);
    transform: translateX(-120%);
    transition: transform 700ms cubic-bezier(.2,.8,.2,1);
    pointer-events:none;
  }

  a.btn-services:hover::before,
  .hero .btn-secondary:hover::before,
  .hero .btn-outline:hover::before{
    transform: translateX(120%);
  }

  a.btn-services:hover,
  .hero .btn-secondary:hover,
  .hero .btn-outline:hover{
    background: var(--be-blue-dark) !important;
  }
}

/* --- Cleaner press / down state (no jump) --- */
a.btn-services:active,
.hero .btn-secondary:active,
.hero .btn-outline:active{
  transform: translateY(1px);
  box-shadow: 0 10px 22px rgba(8,28,44,.16);
}

/* --- Focus ring (accessibility) --- */
a.btn-services:focus-visible,
.hero .btn-secondary:focus-visible,
.hero .btn-outline:focus-visible{
  outline: none;
  box-shadow:
    0 0 0 3px rgba(250,176,52,.55),
    0 16px 34px rgba(8,28,44,.16);
}

/* --- Respect reduced motion --- */
@media (prefers-reduced-motion: reduce){
  a.btn-services::before,
  .hero .btn-secondary::before,
  .hero .btn-outline::before{
    display:none !important;
  }

  a.btn-services,
  .hero .btn-secondary,
  .hero .btn-outline{
    transition: none !important;
  }
}

/* =========================================================
   PHASE 2.9 — Sticky CTA Bar (SAFE)
   ========================================================= */

.stickyCtaBar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: 12px;
  z-index: 980;
  display: flex;
  gap: 10px;
  align-items: center;
  justify-content: space-between;

  padding: 12px;
  border-radius: 18px;

  background: rgba(14, 32, 45, 0.62);
  border: 1px solid rgba(255,255,255,0.18);
  box-shadow: 0 22px 55px rgba(0,0,0,0.28);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);

  transform: translateY(18px);
  opacity: 0;
  pointer-events: none;
  transition: opacity 260ms ease, transform 300ms cubic-bezier(.2,.8,.2,1);
}

.stickyCtaBar.is-show{
  transform: translateY(0);
  opacity: 1;
  pointer-events: auto;
}

.stickyCtaBar a{
  flex: 1;
  text-align: center;
  white-space: nowrap;
  border-radius: 14px;
  padding: 12px 12px;
  font-weight: 900;
  text-decoration: none;
}

.stickyCtaBar .stickyPrimary{
  background: #fab034;
  color: #0b1a24;
  border: 1px solid rgba(255,255,255,0.28);
}

.stickyCtaBar .stickySecondary{
  background: #2375ab;
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
}

.stickyCtaBar a:focus-visible{
  outline: none;
  box-shadow: 0 0 0 3px rgba(250,176,52,.55);
}

@media (min-width: 981px){
  .stickyCtaBar{ display:none !important; }
}

@media (prefers-reduced-motion: reduce){
  .stickyCtaBar{ transition:none !important; }
}

/* =========================
   PHASE 3.0 — MOBILE ACTION BAR (NO JS)
   Safe: does NOT touch your existing scripts/components
========================= */

.beMobileBar{
  position: fixed;
  left: 12px;
  right: 12px;
  bottom: calc(12px + env(safe-area-inset-bottom, 0px));
  z-index: 9999;
  display: none;
  gap: 10px;
  padding: 10px;
  border-radius: 18px;

  background: rgba(255,255,255,.78);
  border: 1px solid rgba(15, 40, 60, .10);
  box-shadow: 0 18px 45px rgba(0,0,0,.18);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.beMobileBar__btn{
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;

  padding: 14px 12px;
  border-radius: 14px;
  font-weight: 900;
  text-decoration: none;
  line-height: 1;
  white-space: nowrap;

  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease;
  will-change: transform;
}

.beMobileBar__btn:active{
  transform: translateY(1px) scale(.99);
}

.beMobileBar__btn--primary{
  background: #2375ab;
  color: #fff;
  border: 1px solid rgba(255,255,255,.22);
  box-shadow: 0 14px 28px rgba(35,117,171,.26);
}

.beMobileBar__btn--ghost{
  background: rgba(255,255,255,.92);
  color: #0b1a24;
  border: 1px solid rgba(35,117,171,.18);
  box-shadow: 0 12px 24px rgba(0,0,0,.10);
}

/* Show on mobile only */
@media (max-width: 860px){
  .beMobileBar{ display: flex; }
  /* Prevent the bar covering your last section */
  body{ padding-bottom: 92px; }
}

/* =========================
   PHASE 3 HOTFIX — SHOW STICKY BAR ON MOBILE ONLY
   Paste AFTER Phase 3 CSS
========================= */

/* Force OFF everywhere by default */
.beMobileBar{ 
  display: none !important; 
}

/* Force ON only on mobile/tablet width */
@media (max-width: 860px){
  .beMobileBar{ 
    display: flex !important; 
  }

  /* keep the page from being covered by the bar */
  body{ padding-bottom: 92px !important; }
}

/* Force-remove padding on desktop */
@media (min-width: 861px){
  body{ padding-bottom: 0 !important; }
}

/* Footer: quiet click-to-call / click-to-email */
.foot-contact{
  margin: 10px 0 14px;
  display: grid;
  gap: 8px;
}

.foot-contact-link{
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: rgba(255,255,255,.82);
  font-weight: 800;
  text-decoration: none;
  font-size: 13.5px;
  line-height: 1.2;
  width: fit-content;
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid rgba(255,255,255,.10);
  background: rgba(255,255,255,.04);
  transition: transform 140ms ease, background 160ms ease, border-color 160ms ease, color 160ms ease;
}

.foot-contact-link i{
  font-size: 14px;
  opacity: .9;
}

.foot-contact-link:hover{
  background: rgba(250,176,52,.10);
  border-color: rgba(250,176,52,.28);
  color: #fff;
  transform: translateY(-1px);
}

.foot-contact-link:focus-visible{
  outline: 3px solid rgba(250,176,52,.35);
  outline-offset: 2px;
}

footer{
  position: relative;
}

footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, #2375ab, #fab034);
  opacity:.9;
}

footer{
  position: relative;
}

footer::before{
  content:"";
  position:absolute;
  left:0; right:0; top:0;
  height:3px;
  background: linear-gradient(90deg, #2375ab, #fab034);
  opacity:.9;
}

footer .foot-grid{
  align-items: start; /* ensures all columns start from same top line */
}

footer .foot-col h4{
  margin-bottom: 14px;
}

footer .foot-col{
  padding-top: 0;
}

footer .social-icon{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  width:38px;
  height:38px;
  border-radius:999px;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.10);
  transition: transform 160ms ease, background 160ms ease, border-color 160ms ease;
}

footer .social-icon:hover{
  transform: translateY(-2px);
  background: rgba(250,176,52,.10);
  border-color: rgba(250,176,52,.28);
}

/* =========================
   PHASE 4.5 — FOOTER POLISH
   Hover states + headings + divider + copyright size
   ========================= */

/* Footer headings: brand color (not bold-heavy) */
footer .foot-col h4{
  color: #fab034;
  font-weight: 800; /* keep strong but not crazy */
  letter-spacing: 0.2px;
}

/* Footer menu links: deliberate hover + focus */
footer .foot-col ul li a{
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: #e9e9e9;
  text-decoration: none;
  transition: color 180ms ease, transform 180ms ease, opacity 180ms ease;
  opacity: 0.92;
}

footer .foot-col ul li a:hover{
  color: #fab034;
  transform: translateX(2px);
  opacity: 1;
}

footer .foot-col ul li a:focus-visible{
  outline: 2px solid rgba(250,176,52,0.85);
  outline-offset: 3px;
  border-radius: 6px;
}

/* Premium divider above copyright */
footer .foot-bottom{
  margin-top: 26px;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,0.10);
}

/* Copyright readability */
footer .foot-bottom p{
  font-size: 14px;
  line-height: 1.4;
  color: rgba(255,255,255,0.72);
}

/* Slightly soften link list spacing (optional, premium breathing) */
footer .foot-col ul li{
  margin: 10px 0;
}

/* =========================
   PHASE 5.0 — SMART SCROLL UI
   - Back-to-top button (mobile-first)
   - Sticky bar intelligent hide/show support
   ========================= */

/* Back-to-top button (injected via JS) */
#backToTop{
  position: fixed;
  right: 14px;
  bottom: 86px; /* sits above your sticky action bar */
  z-index: 9998;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  display: grid;
  place-items: center;
  background: rgba(35,117,171,0.92);
  color: #fff;
  border: 1px solid rgba(255,255,255,0.22);
  box-shadow: 0 12px 28px rgba(0,0,0,0.22);
  opacity: 0;
  transform: translateY(10px);
  pointer-events: none;
  transition: opacity 180ms ease, transform 180ms ease, background 180ms ease;
}

/* show state */
#backToTop.show{
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
}

/* hover (desktop) */
@media (hover:hover){
  #backToTop:hover{
    background: rgba(35,117,171,1);
    transform: translateY(-1px);
  }
}

/* focus (accessibility) */
#backToTop:focus-visible{
  outline: 2px solid rgba(250,176,52,0.9);
  outline-offset: 3px;
}

/* press (no jump) */
#backToTop:active{
  transform: translateY(0) scale(0.98);
}

/* Sticky bar: support hide state (JS toggles this class) */
.stickyBar.is-hidden,
.stickyActionBar.is-hidden,
#stickyBar.is-hidden{
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}

/* Mobile-only: back-to-top exists only on smaller screens */
@media (min-width: 901px){
  #backToTop{ display:none !important; }
}

/* =========================
   PHASE 5.1 — ACTIVE SECTION HINTS
   - Subtle active state for nav links (desktop)
   - Works with JS adding .is-active on matching links
   ========================= */

/* Desktop nav active */
@media (min-width: 901px){
  nav a.is-active,
  .nav a.is-active,
  .topnav a.is-active{
    color: #0b1b2b;
    font-weight: 900;
    position: relative;
  }

  nav a.is-active::after,
  .nav a.is-active::after,
  .topnav a.is-active::after{
    content: "";
    position: absolute;
    left: 50%;
    bottom: -10px;
    transform: translateX(-50%);
    width: 22px;
    height: 4px;
    border-radius: 999px;
    background: var(--orange); /* #fab034 */
    box-shadow: 0 8px 16px rgba(0,0,0,0.12);
  }
}

/* Mobile drawer active (optional, clean) */
#drawer a.is-active,
.drawer a.is-active,
.mobileDrawer a.is-active{
  color: var(--orange);
  font-weight: 900;
}

/* Optional: tiny dot marker in mobile drawer */
#drawer a.is-active::before,
.drawer a.is-active::before,
.mobileDrawer a.is-active::before{
  content: "";
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: var(--orange);
  margin-right: 10px;
  transform: translateY(-1px);
}

/* =========================
   Phase 5.2 — Typography Harmony (site-wide)
   ========================= */

:root{
  --bodySize: 16.5px;      /* global baseline */
  --bodyLine: 1.58;
  --smallSize: 15px;       /* helper / secondary */
  --microSize: 14px;       /* micro lines */
}

/* Global baseline */
html { font-size: var(--bodySize); }
body { line-height: var(--bodyLine); }

/* Make ALL sections feel like the same system */
.section,
.section p,
.section li,
.panel,
.reviewCard,
.accordion,
.qa .qBtn,
.qa .aPanel{
  font-size: 1rem;
}

/* Secondary / micro text that was too small */
.sectionSub,
.ratingLine,
.whoMicroProof,
.risk,
.remoteLine{
  font-size: var(--smallSize);
}

/* Accordion answer readability */
.qa .aPanel{
  font-size: var(--smallSize);
  line-height: 1.6;
}

/* Pills + small supporting labels */
.pill,
.reviewRole{
  font-size: var(--smallSize);
}

/* =========================
   Phase 5.2.2 — Micro Text Lift
   ========================= */
.risk,
.whoLeft p b,
.whoLeft p{
  font-size: var(--smallSize);
}

.whoLeft p{
  line-height: 1.6;
}

/* =========================
   Phase 5.2.3 — Center CTA under industries
   ========================= */
.whoRightCta{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* Phase 5.2.3 — Center CTA under industries (correct placement) */
.whoRightCta{
  margin-top: 18px;
  display: flex;
  justify-content: center;
}

/* More breathing room under the industry pills */
.whoRightCta{
  margin-top: 28px;   /* increase until it feels right */
  display: flex;
  justify-content: center;
}

/* Secondary CTA styling under industries (premium + non-competing) */
.whoRightCta .btn-tertiary{
  background: rgba(255,255,255,.92);
  border: 1px solid rgba(35,117,171,.28); /* BondEsq blue tint */
  color: #2375ab;
  font-weight: 900;
  box-shadow: 0 10px 24px rgba(0,0,0,.12);
}

/* Hover stays classy (no loud fill) */
.whoRightCta .btn-tertiary:hover{
  transform: translateY(-1px);
  border-color: rgba(35,117,171,.45);
  box-shadow: 0 14px 30px rgba(0,0,0,.14);
}

/* Keyboard focus (accessibility) */
.whoRightCta .btn-tertiary:focus-visible{
  outline: 3px solid rgba(250,176,52,.45); /* soft orange ring */
  outline-offset: 3px;
}

/* =========================
   Phase 5.3 — Conversion Enhancements
   ========================= */

/* Who Help: Industries heading */
.whoRightHead{
  margin: 0 0 14px;
  padding-left: 2px;
}
.whoRightTitle{
  margin: 0;
  font-size: 18px;
  line-height: 1.2;
  font-weight: 900;
  color: #fff;
  letter-spacing: -0.2px;
}
.whoRightSub{
  margin: 6px 0 0;
  font-size: 14px;
  font-weight: 700;
  color: rgba(255,255,255,.85);
}

/* FAQ right card: warm browser layout */
.miniCtaCopy{
  text-align: center;
  margin: 10px 0 10px;
}
.miniCtaTitle{
  font-weight: 900;
  font-size: 16px;
  margin-bottom: 6px;
}
.miniCtaText{
  font-weight: 700;
  font-size: 13.5px;
  color: var(--muted);
  line-height: 1.35;
  margin: 0 auto;
  max-width: 260px;
}
.miniCtaLink{
  display: inline-block;
  margin-top: 10px;
  font-weight: 900;
  font-size: 13px;
  color: var(--brand);
  text-decoration: none;
}
.miniCtaLink:hover{
  color: var(--orange);
  text-decoration: underline;
}

/* Founder spacing */
.founderLead{
  margin: 0 0 18px;
}
.founderWhat{
  margin: 18px 0 14px !important;
}

/* =========================
   Phase 5.3.4 — Founder + Areas headings in BondEsq Blue
   ========================= */

/* Card titles */
#success .panel.card > h3{
  color: #2375ab;
  font-weight: 900;
}

/* Subheading inside founder block ("What you’ll get from the call") */
#success .founderWhat > b{
  color: #2375ab;
  font-weight: 900;
}

#success .panel.card > h3{
  position: relative;
  padding-bottom: 8px;
}

#success .panel.card > h3::after{
  content:"";
  position:absolute;
  left:0;
  bottom:0;
  width: 54px;
  height: 3px;
  background: rgba(35,117,171,.35);
  border-radius: 999px;
}


</style>