/* Big Helpers legacy-service Organic shell bundle. Generated 2026-08-31. */

/* ===== conversion.css ===== */
/* Big Helpers — conversion module (Phase 1)
   Shared CSS for: sticky WhatsApp, audit/strategy/estimate CTAs, exit popup,
   FAQ accordion, trust strip, inline CTA, bottom CTA, lead-magnet card.
   Loaded by every new /services/* /compare/* /case-studies/* page.
   Kept tiny — all colours come from the page's own :root tokens. */

/* Sticky WhatsApp button (mobile-first, bottom-right, never overlaps content) */
.bh-sticky-wa{position:fixed;right:18px;bottom:18px;z-index:9990;background:#25D366;color:#fff;width:56px;height:56px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;text-decoration:none;box-shadow:0 6px 20px rgba(37,211,102,.45);transition:transform .15s,box-shadow .15s}
.bh-sticky-wa:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(37,211,102,.55);text-decoration:none}
.bh-sticky-wa::after{content:attr(data-label);position:absolute;right:64px;top:50%;transform:translateY(-50%);background:#0a2540;color:#fff;font:700 12px 'Inter',sans-serif;padding:7px 12px;border-radius:8px;white-space:nowrap;opacity:0;pointer-events:none;transition:opacity .15s}
.bh-sticky-wa:hover::after{opacity:1}
@media(max-width:680px){.bh-sticky-wa{width:54px;height:54px;right:14px;bottom:14px}.bh-sticky-wa::after{display:none}}

/* CTA stack (audit / strategy / estimate) — used in hero + bottom CTA */
.bh-cta-stack{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0;align-items:center}
.bh-cta-stack .btn{display:inline-flex;align-items:center;gap:8px;padding:11px 20px;border-radius:99px;font-weight:700;font-size:14px;text-decoration:none;border:1px solid transparent;transition:transform .15s,background .15s,color .15s}
.bh-cta-stack .btn:hover{transform:translateY(-1px);text-decoration:none}
.bh-cta-stack .bh-btn-wa{background:#25D366;color:#fff}
.bh-cta-stack .bh-btn-wa:hover{background:#1da851}
.bh-cta-stack .bh-btn-audit{background:#FFD54A;color:#0a2540}
.bh-cta-stack .bh-btn-audit:hover{background:#FFC107}
.bh-cta-stack .bh-btn-call{background:#fff;color:#0a2540;border-color:rgba(255,255,255,.4)}
.bh-cta-stack .bh-btn-call:hover{background:#0a2540;color:#fff;border-color:#0a2540}
.bh-cta-stack .bh-btn-estimate{background:transparent;color:#fff;border-color:rgba(255,255,255,.55)}
.bh-cta-stack .bh-btn-estimate:hover{background:#fff;color:#0a2540;border-color:#fff}
/* light-on-light variant for non-hero CTA stacks */
.bh-cta-stack.light .bh-btn-call{background:#0a2540;color:#fff;border-color:#0a2540}
.bh-cta-stack.light .bh-btn-call:hover{background:#0951a8;border-color:#0951a8}
.bh-cta-stack.light .bh-btn-estimate{background:#fff;color:#0a2540;border-color:#0a2540}
.bh-cta-stack.light .bh-btn-estimate:hover{background:#0a2540;color:#fff}

/* Trust strip — short row of proof points under hero or above CTA */
.bh-trust-strip{display:flex;flex-wrap:wrap;justify-content:center;gap:18px;padding:16px 24px;background:#0a2540;color:#cfe1ff;font-size:13px;border-bottom:1px solid rgba(255,255,255,.08)}
.bh-trust-strip span{display:inline-flex;align-items:center;gap:6px;font-weight:600}
.bh-trust-strip span::before{content:"✓";color:#FFD54A;font-weight:800}
@media(max-width:680px){.bh-trust-strip{font-size:12px;gap:12px;padding:12px 16px}}

/* Inline CTA — placed roughly 30% into page content */
.bh-inline-cta{background:linear-gradient(135deg,#0a2540,#0B63CE);color:#fff;border-radius:16px;padding:26px 28px;margin:36px 0;display:flex;align-items:center;justify-content:space-between;gap:24px;flex-wrap:wrap}
.bh-inline-cta .ic-text{flex:1;min-width:240px}
.bh-inline-cta h3{font:800 19px/1.3 'Inter',sans-serif;margin:0 0 6px;color:#fff}
.bh-inline-cta p{margin:0;color:#cfe1ff;font-size:14.5px}
.bh-inline-cta .ic-actions{display:flex;gap:10px;flex-shrink:0;flex-wrap:wrap}
.bh-inline-cta .btn{padding:10px 18px;border-radius:99px;font-weight:700;font-size:13.5px;text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:transform .15s}
.bh-inline-cta .btn:hover{transform:translateY(-1px)}
.bh-inline-cta .bh-btn-wa{background:#25D366;color:#fff}
.bh-inline-cta .bh-btn-audit{background:#FFD54A;color:#0a2540}

/* Bottom CTA — full-width section before footer */
.bh-bottom-cta{background:linear-gradient(135deg,#0a2540,#0B63CE);color:#fff;padding:64px 24px;text-align:center}
.bh-bottom-cta h2{font:800 32px/1.18 'Inter',sans-serif;letter-spacing:-.5px;margin:0 0 12px;max-width:720px;margin-inline:auto}
.bh-bottom-cta p{color:#cfe1ff;font-size:16.5px;max-width:600px;margin:0 auto 22px}
.bh-bottom-cta .bh-cta-stack{justify-content:center}
@media(max-width:680px){.bh-bottom-cta{padding:48px 18px}.bh-bottom-cta h2{font-size:25px}}

/* FAQ accordion */
.bh-faq{max-width:780px;margin:0 auto}
.bh-faq-item{border-bottom:1px solid var(--border,#e2e8f0)}
.bh-faq-item:first-child{border-top:1px solid var(--border,#e2e8f0)}
.bh-faq-q{display:flex;align-items:flex-start;justify-content:space-between;gap:14px;padding:20px 4px;cursor:pointer;list-style:none;font:700 16.5px/1.4 'Inter',sans-serif;color:var(--ink,#0a2540);user-select:none}
.bh-faq-q::-webkit-details-marker{display:none}
.bh-faq-q::after{content:"+";font-size:24px;font-weight:300;color:var(--pri,#0B63CE);transition:transform .2s;flex-shrink:0;line-height:1}
.bh-faq-item[open] .bh-faq-q::after{content:"−"}
.bh-faq-a{padding:0 4px 22px;color:var(--muted,#475569);font-size:15.5px;line-height:1.7}
.bh-faq-a p{margin:0 0 10px}
.bh-faq-a p:last-child{margin:0}
.bh-faq-a ul{margin:0 0 8px;padding-left:20px}

/* Lead-magnet card — sits in body or sidebar */
.bh-lead-magnet{background:linear-gradient(135deg,#FFF8E1,#fff);border:1px solid #FFD54A;border-radius:16px;padding:26px 28px;margin:32px 0;display:flex;gap:24px;align-items:center;flex-wrap:wrap}
.bh-lead-magnet .lm-icon{width:64px;height:64px;background:#FFD54A;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:32px;flex-shrink:0}
.bh-lead-magnet .lm-text{flex:1;min-width:240px}
.bh-lead-magnet h3{font:800 18px/1.3 'Inter',sans-serif;margin:0 0 6px;color:#0a2540}
.bh-lead-magnet p{margin:0 0 12px;font-size:14px;color:#475569}
.bh-lead-magnet .btn{display:inline-flex;align-items:center;gap:6px;background:#0a2540;color:#fff;padding:10px 18px;border-radius:99px;font:700 13.5px 'Inter',sans-serif;text-decoration:none;transition:background .15s}
.bh-lead-magnet .btn:hover{background:#0B63CE}

/* Exit-intent popup */
.bh-popup-backdrop{position:fixed;inset:0;background:rgba(10,37,64,.65);z-index:10000;display:none;align-items:center;justify-content:center;padding:18px;animation:bhFade .2s ease-out}
.bh-popup-backdrop.show{display:flex}
@keyframes bhFade{from{opacity:0}to{opacity:1}}
.bh-popup{background:#fff;border-radius:18px;max-width:480px;width:100%;padding:36px 32px 30px;position:relative;box-shadow:0 20px 60px rgba(0,0,0,.35);animation:bhRise .25s ease-out}
@keyframes bhRise{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.bh-popup-close{position:absolute;top:14px;right:16px;background:transparent;border:0;font-size:24px;cursor:pointer;color:#94a3b8;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;transition:background .15s,color .15s}
.bh-popup-close:hover{background:#f1f5f9;color:#0a2540}
.bh-popup h3{font:800 22px/1.25 'Inter',sans-serif;margin:0 0 8px;color:#0a2540}
.bh-popup p{margin:0 0 20px;color:#475569;font-size:15px;line-height:1.55}
.bh-popup form{display:flex;flex-direction:column;gap:11px}
.bh-popup input,.bh-popup select,.bh-popup textarea{padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font:400 15px 'Inter',sans-serif;color:#0a2540;background:#f8fafc;transition:border-color .15s,background .15s}
.bh-popup input:focus,.bh-popup select:focus,.bh-popup textarea:focus{outline:0;border-color:#0B63CE;background:#fff}
.bh-popup .bh-row{display:flex;gap:10px}
.bh-popup .bh-row>*{flex:1;min-width:0}
.bh-popup button[type=submit]{background:#0a2540;color:#fff;border:0;padding:13px 18px;border-radius:99px;font:800 15px 'Inter',sans-serif;cursor:pointer;margin-top:6px;transition:background .15s}
.bh-popup button[type=submit]:hover{background:#0B63CE}
.bh-popup .bh-honeypot{position:absolute;left:-9999px;top:-9999px}
.bh-popup .bh-thanks{text-align:center;padding:18px 0 6px}
.bh-popup .bh-thanks .ok{color:#16a34a;font-size:48px;line-height:1;margin-bottom:10px}
.bh-popup .bh-thanks h3{margin-bottom:6px}
.bh-popup .bh-thanks .wa{display:inline-block;margin-top:14px;background:#25D366;color:#fff;padding:11px 22px;border-radius:99px;font:700 14px 'Inter',sans-serif;text-decoration:none}
.bh-popup .bh-fail{background:#fee2e2;color:#991b1b;padding:10px 14px;border-radius:10px;font-size:13.5px;margin-bottom:10px;display:none}
.bh-popup .bh-fail.show{display:block}
@media(max-width:520px){.bh-popup{padding:28px 22px 22px}.bh-popup .bh-row{flex-direction:column;gap:11px}}

/* Inline lead form (used on lead-magnet pages) */
.bh-form{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:16px;padding:30px 32px;max-width:540px;margin:24px auto;box-shadow:0 4px 20px rgba(10,37,64,.04)}
.bh-form h3{font:800 21px/1.25 'Inter',sans-serif;margin:0 0 8px;color:#0a2540}
.bh-form p.lede{margin:0 0 18px;color:#475569;font-size:14.5px}
.bh-form form{display:flex;flex-direction:column;gap:11px}
.bh-form input,.bh-form select,.bh-form textarea{padding:12px 14px;border:1.5px solid #e2e8f0;border-radius:10px;font:400 15px 'Inter',sans-serif;color:#0a2540;background:#f8fafc;transition:border-color .15s,background .15s;width:100%}
.bh-form input:focus,.bh-form select:focus,.bh-form textarea:focus{outline:0;border-color:#0B63CE;background:#fff}
.bh-form .bh-row{display:flex;gap:10px}
.bh-form .bh-row>*{flex:1;min-width:0}
.bh-form button[type=submit]{background:#0a2540;color:#fff;border:0;padding:13px 18px;border-radius:99px;font:800 15px 'Inter',sans-serif;cursor:pointer;margin-top:6px;transition:background .15s}
.bh-form button[type=submit]:hover{background:#0B63CE}
.bh-form .bh-honeypot{position:absolute;left:-9999px;top:-9999px}
.bh-form .bh-thanks,.bh-form .bh-fail{display:none;padding:14px;border-radius:10px;margin-bottom:10px;font-size:14px}
.bh-form .bh-thanks{background:#dcfce7;color:#166534}
.bh-form .bh-fail{background:#fee2e2;color:#991b1b}
.bh-form .bh-thanks.show,.bh-form .bh-fail.show{display:block}

/* Compare table */
.bh-compare-wrap{margin:30px 0;border:1px solid var(--border,#e2e8f0);border-radius:14px;overflow:hidden;background:#fff}
.bh-compare-wrap table{width:100%;border-collapse:collapse;font-size:14.5px}
.bh-compare-wrap th{background:#0a2540;color:#fff;text-align:left;padding:14px 16px;font:800 13px 'Inter',sans-serif;text-transform:uppercase;letter-spacing:.6px;border-right:1px solid rgba(255,255,255,.15)}
.bh-compare-wrap th:last-child{border-right:0}
.bh-compare-wrap th.us{background:#0B63CE}
.bh-compare-wrap td{padding:14px 16px;border-top:1px solid var(--border,#e2e8f0);border-right:1px solid var(--border,#e2e8f0);vertical-align:top;color:var(--ink,#0a2540)}
.bh-compare-wrap td:last-child{border-right:0}
.bh-compare-wrap td.us{background:#eaf3ff;font-weight:600}
.bh-compare-wrap td.label{font-weight:700;background:#f8fafc;width:22%}
@media(max-width:680px){.bh-compare-wrap{font-size:13px;overflow-x:auto}.bh-compare-wrap table{min-width:500px}}

/* Niche cards (homepage industries grid) */
.bh-niche-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin:24px 0}
.bh-niche-card{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:14px;padding:22px;text-decoration:none;color:var(--ink,#0a2540);transition:transform .15s,box-shadow .15s,border-color .15s}
.bh-niche-card:hover{transform:translateY(-3px);box-shadow:0 10px 26px rgba(10,37,64,.08);border-color:var(--pri,#0B63CE);text-decoration:none;color:var(--ink,#0a2540)}
.bh-niche-card .ic{font-size:28px;margin-bottom:12px}
.bh-niche-card h4{font:800 16px 'Inter',sans-serif;margin:0 0 6px}
.bh-niche-card p{font-size:13.5px;color:var(--muted,#475569);margin:0;line-height:1.55}
@media(max-width:780px){.bh-niche-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:480px){.bh-niche-grid{grid-template-columns:1fr}}

/* Pain points / outcomes / who-for / why-us — bullet block reused in many sections */
.bh-bullet-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px;margin:20px 0}
.bh-bullet{background:#f8fafc;border-left:3px solid var(--pri,#0B63CE);border-radius:8px;padding:16px 18px}
.bh-bullet h4{font:700 15.5px 'Inter',sans-serif;margin:0 0 4px;color:var(--ink,#0a2540)}
.bh-bullet p{margin:0;font-size:14px;color:var(--muted,#475569);line-height:1.55}
@media(max-width:680px){.bh-bullet-grid{grid-template-columns:1fr}}

/* Process steps */
.bh-process{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin:24px 0;counter-reset:bhstep}
.bh-step{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:22px 20px;position:relative;counter-increment:bhstep}
.bh-step::before{content:counter(bhstep,decimal-leading-zero);position:absolute;top:14px;right:18px;font:800 28px 'Inter',sans-serif;color:#FFD54A;line-height:1}
.bh-step h4{font:800 15.5px 'Inter',sans-serif;margin:0 0 6px;padding-right:40px}
.bh-step p{margin:0;font-size:14px;color:var(--muted,#475569);line-height:1.55}
@media(max-width:780px){.bh-process{grid-template-columns:1fr}}

/* Outcomes list (case study + service) */
.bh-outcomes{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin:20px 0}
.bh-outcome-stat{background:#fff;border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:18px;text-align:center}
.bh-outcome-stat .n{font:800 24px 'Inter',sans-serif;color:var(--pri,#0B63CE);margin-bottom:4px}
.bh-outcome-stat .l{font-size:12.5px;color:var(--muted,#475569);font-weight:600;text-transform:uppercase;letter-spacing:.4px}
@media(max-width:680px){.bh-outcomes{grid-template-columns:repeat(2,1fr)}}

/* Related links pills (bottom of page) */
.bh-related{display:flex;flex-wrap:wrap;gap:10px;margin:18px 0 0}
.bh-related a{background:#eaf3ff;color:#0951a8;padding:8px 14px;border-radius:99px;font:700 13px 'Inter',sans-serif;text-decoration:none;transition:background .15s}
.bh-related a:hover{background:#0B63CE;color:#fff;text-decoration:none}

/* Body content rhythm (used inside .bh-body wrapper) */
.bh-body{max-width:760px;margin:0 auto;padding:0 24px}
.bh-body h2{font:800 26px/1.2 'Inter',sans-serif;letter-spacing:-.5px;margin:40px 0 14px;color:var(--ink,#0a2540);padding-top:6px;border-top:3px solid #eaf3ff}
.bh-body h3{font:800 19px 'Inter',sans-serif;margin:24px 0 10px;color:var(--ink,#0a2540)}
.bh-body p{margin:0 0 14px;font-size:16.5px;line-height:1.75;color:#1e293b}
.bh-body ul,.bh-body ol{margin:0 0 18px;padding-left:22px;font-size:16.5px;line-height:1.75}
.bh-body li{margin-bottom:6px}
.bh-body strong{color:var(--ink,#0a2540);font-weight:700}
.bh-body .answer-block{background:#f0f9ff;border-left:4px solid #0B63CE;border-radius:8px;padding:18px 22px;margin:0 0 26px}
.bh-body .answer-block p{margin:0;font-size:16.5px;line-height:1.7;color:#0a2540;font-weight:500}

/* Section helpers */
.bh-sec{padding:56px 0}
.bh-sec.tint{background:#f8fafc;border-top:1px solid var(--border,#e2e8f0);border-bottom:1px solid var(--border,#e2e8f0)}
.bh-sec h2.section-title{font:800 28px/1.2 'Inter',sans-serif;letter-spacing:-.5px;margin:0 0 8px;text-align:center}
.bh-sec p.section-sub{font-size:16px;color:var(--muted,#475569);max-width:680px;margin:0 auto 28px;text-align:center;line-height:1.6}

/* ===== bh-refresh.css ===== */
/* Big Helpers refresh, 2026-05-22.
   Keeps the existing logo asset and standardises the current static nav. */
:root{
  --bh-page:#F4FFF8;
  --bh-surface:#FFFFFF;
  --bh-mint:#EAFFE8;
  --bh-cream:#F7F4EC;
  --bh-lav:#F0F4FF;
  --bh-ink:#10131A;
  --bh-soft:#4B5563;
  --bh-teal:#0F534F;
  --bh-green:#16A34A;
  --bh-green-soft:#DCF8C6;
  --bh-line:#DCE8E2;
}

html,body{overflow-x:hidden;max-width:100vw}body{background:var(--bh-page)!important;color:var(--bh-ink)!important}
a{color:var(--bh-teal)}
a:hover{color:#0b3d39}
.wrap,.wrap-wide{max-width:1200px;margin-left:auto;margin-right:auto;padding-left:22px;padding-right:22px;box-sizing:border-box}
.section-title{color:var(--bh-ink)!important;letter-spacing:0!important}
.section-sub{color:var(--bh-soft)!important}

.trust-bar{
  background:#0F534F!important;
  color:#DCF8C6!important;
  padding:9px 18px!important;
  border-bottom:1px solid rgba(255,255,255,.14)!important;
}
.trust-bar a{color:#DCF8C6!important;text-decoration:none!important;font-weight:800}
.trust-bar span{color:#fff!important;text-decoration:none!important}

.nav{
  top:0;
  background:rgba(244,255,248,.94)!important;
  border-bottom:1px solid var(--bh-line)!important;
  box-shadow:0 10px 30px rgba(15,83,79,.08);
}
.nav-in{max-width:1200px!important;min-height:72px!important;padding:12px 24px!important;gap:18px!important}
.nav-in .logo img{height:42px!important;width:auto!important}
.nav-menu{gap:6px!important}
.nav-item > a,.nav-item > button{
  color:var(--bh-ink)!important;
  font-size:15.5px!important;
  font-weight:850!important;
  padding:12px 15px!important;
  border-radius:10px!important;
}
.nav-item > a:hover,.nav-item > button:hover,.nav-item.open > a,.nav-item.open > button{
  background:var(--bh-green-soft)!important;
  color:var(--bh-teal)!important;
}
.nav-item .caret{font-size:12px!important;opacity:.72!important}
.dd-panel{
  min-width:680px!important;
  padding:22px!important;
  border:1px solid var(--bh-line)!important;
  border-radius:16px!important;
  box-shadow:0 24px 54px rgba(15,83,79,.16)!important;
}
.dd-grid{gap:8px!important}
.dd-link{
  gap:14px!important;
  padding:15px!important;
  border-radius:12px!important;
}
.dd-link:hover{background:#F0FFF4!important}
.dd-ic{
  width:36px!important;
  height:36px!important;
  display:grid!important;
  place-items:center!important;
  margin-top:0!important;
  border-radius:10px!important;
  background:var(--bh-mint)!important;
  font-size:20px!important;
}
.dd-link .dd-title{font-size:15.5px!important;font-weight:900!important;color:var(--bh-ink)!important}
.dd-link .dd-desc{font-size:13.5px!important;color:var(--bh-soft)!important;line-height:1.5!important}
.dd-foot{font-size:14px!important;padding-top:14px!important}
.dd-foot a{color:var(--bh-teal)!important;font-weight:900!important}
.nav-menu > .nav-calc,.nav-cta .btn-pay,.nav-cta .lang-toggle-link{display:none!important}
.nav-cta{margin-left:auto!important}
.nav-cta .btn-whatsapp{
  background:var(--bh-green)!important;
  color:#fff!important;
  border:0!important;
  border-radius:999px!important;
  padding:11px 18px!important;
  font-size:14px!important;
  font-weight:900!important;
}

.bh-home .live-counter,.bh-home .trust-strip,.bh-home .hero-illustration,.bh-home .hero-trust{display:none!important}
.bh-home .bh-home-cut{display:none!important}
.bh-home .hero{
  background:var(--bh-page)!important;
  color:var(--bh-ink)!important;
  padding:96px 0 76px!important;
  text-align:left!important;
}
.bh-home .hero::before,.bh-home .hero::after{display:none!important}
.bh-home .hero-wrap{max-width:1120px!important}
.bh-home .hero-eyebrow{
  background:var(--bh-green-soft)!important;
  color:var(--bh-teal)!important;
  border:1px solid #BDECC8!important;
  backdrop-filter:none!important;
  margin-bottom:24px!important;
}
.bh-home .hero-eyebrow .dot{background:var(--bh-green)!important;box-shadow:none!important}
.bh-home .hero h1{
  max-width:980px;
  color:var(--bh-ink)!important;
  background:none!important;
  -webkit-text-fill-color:var(--bh-ink)!important;
  font-weight:900!important;
  font-size:clamp(44px,6vw,76px)!important;
  line-height:1.02!important;
  letter-spacing:0!important;
}
.bh-home .hero h1 .em{
  color:var(--bh-teal)!important;
  background:none!important;
  -webkit-text-fill-color:var(--bh-teal)!important;
}
.bh-home .hero-tagline{
  max-width:790px!important;
  margin-left:0!important;
  color:var(--bh-ink)!important;
  font-size:22px!important;
}
.bh-home .hero-tagline .pri{color:var(--bh-teal)!important}
.bh-home .hero-lede{
  max-width:790px!important;
  margin-left:0!important;
  color:var(--bh-soft)!important;
}
.bh-home .hero-lede strong{color:var(--bh-ink)!important}
.bh-home .hero-cta{justify-content:flex-start!important;margin-bottom:28px!important}
.bh-home .hero-cta .btn-primary{
  background:var(--bh-green)!important;
  color:#fff!important;
  box-shadow:none!important;
}
.bh-home .hero-cta .btn-whatsapp{
  color:var(--bh-teal)!important;
  background:#fff!important;
  border:1px solid var(--bh-line)!important;
}
.bh-home .hero-links{justify-content:flex-start!important;margin-left:0!important;max-width:760px!important}
.bh-home .hero-links a{
  background:#fff!important;
  color:var(--bh-teal)!important;
  border:1px solid var(--bh-line)!important;
  font-size:13px!important;
  padding:9px 14px!important;
}
.bh-home .hero-links a:nth-child(n+5){display:none!important}
.bh-home .product-spotlight{background:var(--bh-page)!important;padding:0 0 52px!important;border:0!important}
.bh-home .product-card{
  background:#fff!important;
  color:var(--bh-ink)!important;
  border:1px solid var(--bh-line)!important;
  box-shadow:0 18px 40px rgba(15,83,79,.10)!important;
}
.bh-home .product-card h2{color:var(--bh-ink)!important}
.bh-home .product-card p{color:var(--bh-soft)!important}
.bh-home .product-kicker{background:var(--bh-green-soft)!important;color:var(--bh-teal)!important;border-color:#BDECC8!important}
.bh-home .product-panel{background:var(--bh-mint)!important;border-color:#BDECC8!important}
.bh-home .product-panel h3,.bh-home .product-list li{color:var(--bh-ink)!important}
.bh-home .product-actions .btn-primary{background:var(--bh-green)!important;color:#fff!important;border-color:var(--bh-green)!important}
.bh-home .product-actions .btn-ghost{background:#fff!important;color:var(--bh-teal)!important;border-color:var(--bh-line)!important}
.bh-home .bh-sec.tint{background:#EAFFE8!important}
.bh-home section[style*="linear-gradient(135deg,#0a2540,#0B63CE)"]{background:#0F534F!important}
.bh-home section[style*="Tools to think with"],.bh-home section:has(h2:first-child + p){background:#fff}
.bh-home footer{background:#0F534F!important;color:#DCF8C6!important}
.bh-home footer a{color:#fff!important}

@media(max-width:980px){
  .nav-in{min-height:64px!important;padding:10px 16px!important}
  .nav-in .logo img{height:36px!important}
  .nav .nav-cta{right:54px!important}
  .nav-menu{background:var(--bh-page)!important}
  .nav-item > a,.nav-item > button{font-size:16px!important;padding:15px!important}
  .dd-panel{min-width:0!important;background:#fff!important;border:1px solid var(--bh-line)!important;border-radius:14px!important;margin:2px 0 8px!important;padding:10px!important}
  .dd-link{padding:13px 12px!important}
}
@media(max-width:768px){
  .bh-home .hero{padding:56px 0 44px!important}
  .bh-home .hero h1{font-size:38px!important}
  .bh-home .hero-tagline{font-size:18px!important}
}

/* ====================================================
   BH ARTISTIC POLISH — added 2026-05-22
   Mint/teal decorative blobs, H1 accent, CTA refinement
   ==================================================== */
.bh-home .hero { position: relative; overflow: hidden; isolation: isolate; }
.bh-home .hero::before,
.bh-home .hero::after {
  display: block !important;
  content: "";
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
  z-index: 0;
  filter: blur(28px);
}
.bh-home .hero::before {
  top: -180px; right: -160px;
  width: 560px; height: 560px;
  background: radial-gradient(circle at 35% 35%, rgba(22,163,74,.20) 0%, rgba(22,163,74,.06) 40%, transparent 70%);
  animation: bhBlobA 18s ease-in-out infinite;
}
.bh-home .hero::after {
  bottom: -220px; left: -200px;
  width: 480px; height: 480px;
  background: radial-gradient(circle at 60% 50%, rgba(15,83,79,.14) 0%, rgba(15,83,79,.04) 40%, transparent 70%);
  animation: bhBlobB 22s ease-in-out infinite;
}
@keyframes bhBlobA { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(-30px,22px) scale(1.06); } }
@keyframes bhBlobB { 0%,100% { transform: translate(0,0) scale(1); } 50% { transform: translate(26px,-26px) scale(1.04); } }
@media (prefers-reduced-motion: reduce) {
  .bh-home .hero::before, .bh-home .hero::after { animation: none !important; }
}
.bh-home .hero-wrap { position: relative; z-index: 1; }
.bh-home .hero h1 { text-wrap: balance; }
.bh-home .hero h1::after {
  content: "";
  display: block;
  width: 88px; height: 4px;
  margin-top: 22px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--bh-green) 0%, var(--bh-teal) 100%);
}
.bh-home .hero-cta .btn { transition: transform .22s cubic-bezier(.2,.7,.2,1), box-shadow .22s, background .22s !important; }
.bh-home .hero-cta .btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 32px rgba(22,163,74,.32) !important;
  background: linear-gradient(180deg, #18b556 0%, #16a34a 100%) !important;
}
.bh-home .hero-cta .btn-whatsapp:hover {
  transform: translateY(-2px);
  border-color: var(--bh-green) !important;
  box-shadow: 0 12px 24px rgba(15,83,79,.12) !important;
}
.bh-home .hero-eyebrow { box-shadow: 0 4px 14px rgba(15,83,79,.06); }
.bh-home .hero-links a { transition: transform .18s, box-shadow .18s, border-color .18s !important; }
.bh-home .hero-links a:hover {
  transform: translateY(-1px);
  border-color: var(--bh-green) !important;
  color: var(--bh-teal) !important;
  box-shadow: 0 6px 14px rgba(15,83,79,.08);
}
.bh-home .bh-sec h2.section-title, .bh-home .bh-sec h2 { text-wrap: balance; }
.bh-home .bh-niche-card { transition: transform .2s cubic-bezier(.2,.7,.2,1), box-shadow .2s, border-color .2s; }
.bh-home .bh-niche-card:hover {
  transform: translateY(-4px);
  border-color: var(--bh-green) !important;
  box-shadow: 0 16px 32px rgba(15,83,79,.10) !important;
}

/* ====================================================
   BH SEO + USABILITY SIMPLIFICATION — 2026-05-31
   Twenty-round audit pass: clearer menu, simpler CTA,
   task-first cards, calmer visuals, better mobile scan.
   ==================================================== */
.bh-home .nav-menu > .nav-item:nth-of-type(n+2){
  display:none !important;
}
.bh-home .nav-menu > .nav-calc{
  display:inline-flex !important;
  background:transparent !important;
  border:0 !important;
  color:var(--bh-ink) !important;
  font-size:15px !important;
  font-weight:850 !important;
  padding:12px 12px !important;
}
.bh-home .nav-menu > .nav-calc:hover{
  background:var(--bh-green-soft) !important;
  color:var(--bh-teal) !important;
  text-decoration:none !important;
}
.bh-home .hero{
  padding:72px 0 54px !important;
}
.bh-home .hero::before,
.bh-home .hero::after{
  display:none !important;
}
.bh-home .hero h1{
  max-width:900px !important;
  font-size:clamp(38px,5.2vw,64px) !important;
}
.bh-home .hero-lede{
  font-size:18px !important;
}
.bh-home .hero-links{
  gap:8px !important;
}
.bh-home .hero-links a:nth-child(n){
  display:inline-flex !important;
}
.bh-home .product-spotlight{
  padding:0 0 34px !important;
}
.bh-home .product-card{
  border-radius:14px !important;
  padding:30px !important;
}
.bh-home .bh-sec{
  scroll-margin-top:86px;
}
.bh-step-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:14px;
}
.bh-step{
  background:#fff;
  border:1px solid var(--bh-line);
  border-radius:14px;
  padding:22px;
}
.bh-step strong{
  display:grid;
  place-items:center;
  width:34px;
  height:34px;
  border-radius:999px;
  background:var(--bh-green-soft);
  color:var(--bh-teal);
  font:900 15px/1 Inter,system-ui,sans-serif;
  margin-bottom:12px;
}
.bh-step h3{
  color:var(--bh-ink);
  font:900 17px/1.2 Inter,system-ui,sans-serif;
  margin:0 0 6px;
}
.bh-step p{
  color:var(--bh-soft);
  font-size:14px;
  line-height:1.6;
  margin:0;
}
.bh-home .bh-niche-grid{
  gap:16px !important;
}
.bh-home .bh-niche-card{
  border-radius:14px !important;
  min-height:0 !important;
}
.bh-home .bh-niche-card h4{
  font-size:18px !important;
  line-height:1.25 !important;
}
.bh-home .bh-niche-card p{
  font-size:14.5px !important;
  line-height:1.58 !important;
}
.bh-home footer{
  line-height:1.8 !important;
}
.wa-float{
  width:54px !important;
  height:54px !important;
  animation:none !important;
}
.bh-cookie-banner{
  position:fixed;
  right:14px;
  top:86px;
  bottom:auto;
  width:min(380px,calc(100% - 28px));
  background:#0a2540;
  color:#fff;
  padding:12px 14px;
  border-radius:12px;
  box-shadow:0 12px 30px rgba(0,0,0,.22);
  z-index:9999;
  font:14px/1.45 -apple-system,BlinkMacSystemFont,'SF Pro Display','Inter',system-ui,sans-serif;
  align-items:flex-start;
  gap:12px;
}
.bh-cookie-banner[style*="block"]{
  display:flex !important;
}
.bh-cookie-copy{
  flex:1;
  min-width:220px;
}
.bh-cookie-copy a{
  color:#FFD54A;
  font-weight:800;
}
.bh-cookie-actions{
  display:flex;
  gap:8px;
  flex-wrap:wrap;
}
.bh-cookie-actions button{
  border-radius:999px;
  padding:8px 14px;
  font-weight:800;
  font-size:13px;
  cursor:pointer;
  white-space:nowrap;
}
.bh-cookie-accept{
  background:#FFD54A;
  color:#0a2540;
  border:0;
}
.bh-cookie-essential{
  background:rgba(255,255,255,.12);
  color:#fff;
  border:1px solid rgba(255,255,255,.25);
}
@media(max-width:980px){
  .bh-home .nav-menu > .nav-item:nth-of-type(n+2){
    display:block !important;
  }
  .bh-home .nav-menu > .nav-calc{
    justify-content:flex-start !important;
    width:100% !important;
    padding:14px 15px !important;
  }
}
@media(max-width:820px){
  .bh-step-grid{
    grid-template-columns:1fr 1fr;
  }
}
@media(max-width:560px){
  .bh-home .trust-bar{
    font-size:11px !important;
    line-height:1.45 !important;
  }
  .bh-home .hero{
    padding:42px 0 34px !important;
  }
  .bh-home .hero h1{
    font-size:34px !important;
  }
  .bh-home .hero-lede,
  .bh-home .hero-tagline{
    font-size:16px !important;
  }
  .bh-home .hero-cta .btn,
  .bh-home .product-actions .btn{
    width:100%;
    justify-content:center;
  }
  .bh-step-grid{
    grid-template-columns:1fr;
  }
  .bh-home .product-card{
    padding:22px !important;
  }
  .bh-cookie-banner[style*="block"]{
    display:flex !important;
  }
  .bh-cookie-banner{
    top:auto;
    bottom:0;
    left:10px;
    right:10px;
    width:auto;
    padding:8px;
    font-size:12.5px;
    align-items:center;
  }
  .bh-cookie-copy{
    display:none;
  }
  .bh-cookie-actions{
    display:grid;
    grid-template-columns:1fr 1fr;
    width:100%;
  }
  .bh-cookie-actions button{
    padding:9px 10px;
    font-size:12.5px;
  }
}

/* ===== assets/organic/tokens.css ===== */
/* Organic — design-system tokens and component classes. This file is the source of truth for the system's look; retune it here and see readme.md.
   Vendored verbatim from Claude Design project `Organic` (861e05f3-4d9f-413b-a593-e8628bbb3cc3).
   Only deviation: the @import of Caprasimo/Figtree is hoisted to a <link> in the page <head>
   so the fonts are discovered by the preload scanner instead of after CSSOM parse. */

:root {
  --color-bg: #f5ead8;
  --color-surface: #ebddc5;
  --color-text: #201e1d;
  --color-accent: #c67139;
  --color-accent-2: #7a8a5e;
  /* Stable ink for text/icons placed on accent fills in both themes. */
  --color-on-accent: #201e1d;
  --color-divider: color-mix(in srgb, #201e1d 16%, transparent);

  /* Tonal ramps — generated in OKLCH on one shared lightness scale, so the
     same step of any role matches the others in visual value. */
  --color-neutral-100: #f9f4ed;
  --color-neutral-200: #eee7db;
  --color-neutral-300: #dcd3c4;
  --color-neutral-400: #c0b6a5;
  --color-neutral-500: #a19786;
  --color-neutral-600: #82796a;
  --color-neutral-700: #645c50;
  --color-neutral-800: #474238;
  --color-neutral-900: #2e2b25;

  --color-accent-100: #fff2eb;
  --color-accent-200: #ffe1d0;
  --color-accent-300: #ffc6a5;
  --color-accent-400: #f6a06b;
  --color-accent-500: #d67f48;
  --color-accent-600: #b2622d;
  --color-accent-700: #8c491a;
  --color-accent-800: #643312;
  --color-accent-900: #402310;

  --color-accent-2-100: #f0fae1;
  --color-accent-2-200: #e1eecc;
  --color-accent-2-300: #ccdbb2;
  --color-accent-2-400: #aebf92;
  --color-accent-2-500: #8fa073;
  --color-accent-2-600: #728157;
  --color-accent-2-700: #56633f;
  --color-accent-2-800: #3d472b;
  --color-accent-2-900: #272e1b;

  --font-heading: "Caprasimo", system-ui, sans-serif;
  --font-heading-weight: 400;
  --font-body: "Figtree", system-ui, sans-serif;

  --space-1: 4.4px;
  --space-2: 8.8px;
  --space-3: 13.2px;
  --space-4: 17.6px;
  --space-6: 26.4px;
  --space-8: 35.2px;

  --radius-sm: 8px;
  --radius-md: 16px;
  --radius-lg: 28px;

  /* Elevation — derived from the ground: soft ink-tinted shadows on a
     light theme, a hairline edge + ambient darkness on a dark one. */
  --shadow-sm: 0 1px 2px color-mix(in srgb, #2e2b25 14%, transparent);
  --shadow-md: 0 3px 10px color-mix(in srgb, #2e2b25 16%, transparent);
  --shadow-lg: 0 12px 32px color-mix(in srgb, #2e2b25 22%, transparent);
}

body {
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
}
h1, h2, h3, h4 { font-family: var(--font-heading); font-weight: var(--font-heading-weight); }

.washed{filter:saturate(0.6) contrast(0.85) brightness(1.1) opacity(0.94)}

/* ══════════════════════════════════════════════════════════════════════════
   Components — built with the tokens above. Plain CSS
   on plain HTML: no JavaScript, no build step. Each class is documented in
   readme.md and demonstrated in foundations/ and components/.
   ══════════════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; font-size: 15px; line-height: 1.55; font-weight: 400; }
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 var(--space-2);
}
h1 { font-size: 42px; }
h2 { font-size: 32px; }
h3 { font-size: 25px; }
h4 { font-size: 20px; }
h5 { font-size: 16px; }
h6 { font-size: 13px; }
h6 { letter-spacing: 0.08em; text-transform: uppercase; }
p { margin: 0 0 var(--space-3); }
a { color: var(--color-accent-700); text-underline-offset: 3px; }
img { display: block; max-width: 100%; }
figure { margin: 0; }
figcaption {
  font-size: 11px; margin-top: var(--space-1);
  color: color-mix(in srgb, var(--color-text) 55%, transparent);
}
.text-muted { color: color-mix(in srgb, var(--color-text) 55%, transparent); }
:focus { outline: none; }
:focus-visible { outline: 2px solid var(--color-accent-700); outline-offset: 2px; }
::selection { background: color-mix(in srgb, var(--color-accent) 30%, transparent); }

/* — rules — */
.hr {
  height: 1px; border: 0; margin: var(--space-4) 0;
  background: var(--color-divider);
}

/* — buttons — */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; text-decoration: none;
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 14px; line-height: 1.2; color: var(--color-text); /* matches the .input's 14px —
     the pair sits side by side in sign-up rows */
  background: transparent; border: 1px solid transparent;
  padding: var(--space-2) calc(var(--space-3) * 1.2);
  border-radius: var(--radius-md);
}
.btn svg { display: block; }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn-primary { background: var(--color-accent); color: var(--color-on-accent); }
.btn-primary:hover { background: var(--color-accent-600); }
.btn-primary:active { background: var(--color-accent-700); }
.btn-secondary { border-color: var(--color-divider); }
.btn-secondary:hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.btn-secondary:active { background: color-mix(in srgb, var(--color-text) 14%, transparent); }
.btn-ghost { color: var(--color-accent-700); padding-inline: var(--space-1); }
.btn-ghost:hover { background: color-mix(in srgb, var(--color-accent) 10%, transparent); }
.btn-ghost:active { background: color-mix(in srgb, var(--color-accent) 18%, transparent); }
.btn-icon { width: 36px; height: 36px; padding: 0; }
.btn-block { width: 100%; margin-top: var(--space-2); }

/* — forms — */
.field > label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--color-text) 70%, transparent);
}
.input {
  width: 100%; min-height: 36px; padding: 6px 10px; font: inherit;
  font-size: 14px; color: var(--color-text); caret-color: var(--color-accent);
  background: var(--color-surface);
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.input:hover { border-color: color-mix(in srgb, var(--color-text) 45%, transparent); }
.input:focus-visible { border-color: var(--color-accent); outline-offset: 0; }
textarea.input { min-height: 90px; resize: vertical; }
.radio { display: inline-flex; align-items: center; gap: 8px; cursor: pointer; font-size: 14px; }
.radio input, .seg-opt input {
  position: absolute; opacity: 0; width: 0; height: 0; pointer-events: none;
}
.radio .dot {
  width: 16px; height: 16px; flex: none; border-radius: 50%;
  border: 1.5px solid var(--color-divider);
}
.radio:hover .dot { border-color: var(--color-accent); }
.radio input:checked + .dot {
  border-color: var(--color-accent); background: var(--color-accent);
  box-shadow: inset 0 0 0 4px var(--color-bg);
}
.radio input:focus-visible + .dot { outline: 2px solid var(--color-accent); outline-offset: 2px; }
.seg {
  display: inline-flex; overflow: hidden;
  border: 1px solid var(--color-divider); border-radius: var(--radius-md);
}
.seg-opt {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 12px; font-size: 13px; cursor: pointer;
}
.seg-opt + .seg-opt { border-left: 1px solid var(--color-divider); }
.seg-opt:has(input:checked) { background: var(--color-accent); color: var(--color-bg); }
.seg-opt:not(:has(input:checked)):hover { background: color-mix(in srgb, var(--color-text) 7%, transparent); }
.seg-opt:has(input:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: -2px; }

/* — cards — */
.card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-3); border-radius: var(--radius-md); background: var(--color-surface);
}
.card-kicker { font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--color-accent-700); }
.card-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 17px; line-height: 1.2;
}
.card-body { margin: 0; font-size: 13px; opacity: 0.8; flex: 1; }
.card-meta {
  display: flex; align-items: center; gap: 6px; font-size: 11px;
  color: color-mix(in srgb, var(--color-text) 50%, transparent);
}
.elev-sm { box-shadow: var(--shadow-sm); }
.elev-md { box-shadow: var(--shadow-md); }
.elev-lg { box-shadow: var(--shadow-lg); }

/* — tags — */
.tag {
  display: inline-flex; align-items: center; font-size: 11px;
  letter-spacing: 0.02em; padding: 3px 10px;
  border-radius: calc(var(--radius-md) * 0.75);
}
.tag-accent { background: var(--color-accent-100); color: var(--color-accent-800); }
.tag-accent-2 { background: var(--color-accent-2-100); color: var(--color-accent-2-800); }
.tag-neutral { background: var(--color-neutral-100); color: var(--color-neutral-800); }
.tag-outline { border: 1px solid var(--color-accent-700); color: var(--color-accent-700); }

/* — navigation — */
.nav {
  display: flex; align-items: center; gap: var(--space-4);
  padding: var(--space-3) var(--space-4);
  border-bottom: none;
}
.nav-brand {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 18px; margin-right: auto;
}
.nav a { color: inherit; text-decoration: none; font-size: 14px; }
.nav a:hover, .nav a[aria-current='page'] { color: var(--color-accent-700); }

/* — tables — */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th {
  text-align: left; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase;
  color: color-mix(in srgb, var(--color-text) 60%, transparent);
  padding: var(--space-2); border-bottom: 1px solid var(--color-divider);
}
.table td {
  padding: var(--space-2);
  border-bottom: 1px solid color-mix(in srgb, var(--color-text) 8%, transparent);
}
.table tbody tr:hover { background: color-mix(in srgb, var(--color-text) 4%, transparent); }

/* — dialog — */
.dialog-backdrop {
  position: fixed; inset: 0; display: grid; place-items: center;
  padding: var(--space-4);
  background: color-mix(in srgb, var(--color-neutral-900) 50%, transparent);
}
.dialog {
  width: min(440px, 100%); display: flex; flex-direction: column; gap: var(--space-3);
  padding: var(--space-4); border-radius: var(--radius-lg);
  background: var(--color-surface); box-shadow: var(--shadow-lg);
}
.dialog-title {
  font-family: var(--font-heading); font-weight: var(--font-heading-weight);
  font-size: 20px;
}
.dialog-body { font-size: 14px; opacity: 0.85; }
.dialog-actions { display: flex; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-2); }

/* — rounded frame: everything softens, small controls go pill — */
.card, .dialog { border-radius: calc(var(--radius-lg) * 1.15); }
.btn, .tag, .seg, .input { border-radius: 999px; }
.input { padding-inline: 14px; }

/* ===== assets/organic/bh.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   Big Helpers site layer over the Organic tokens: dark theme, EN/HI, motion,
   plus the real CSS behind the design canvas' `style-hover` attributes and a
   mobile navigation the canvas mock does not model.
   Load AFTER assets/organic/tokens.css.
   ══════════════════════════════════════════════════════════════════════ */

/* ── from the design project's bh.css (verbatim) ────────────────────────── */
html{scroll-behavior:smooth}
:root{--font-heading:"Caprasimo","Baloo 2",system-ui,sans-serif;--font-body:"Figtree","Baloo 2",system-ui,sans-serif}
html[data-lang='en'] [lang='hi']{display:none!important}
html[data-lang='hi'] [lang='en']{display:none!important}
html[data-lang='hi'] body{line-height:1.7}
html[data-theme='dark']{
  --color-bg:#1a1611; --color-surface:#272119; --color-text:#f3ead9;
  --color-divider:color-mix(in srgb,#f3ead9 18%,transparent);
  --color-accent:#e89a5f; --color-accent-2:#a3b585;
  --color-neutral-100:#2e2b25; --color-neutral-200:#474238; --color-neutral-300:#645c50; --color-neutral-400:#82796a; --color-neutral-500:#a19786; --color-neutral-600:#c0b6a5; --color-neutral-700:#dcd3c4; --color-neutral-800:#eee7db; --color-neutral-900:#f9f4ed;
  --color-accent-100:#402310; --color-accent-200:#643312; --color-accent-300:#8c491a; --color-accent-400:#b2622d; --color-accent-500:#d67f48; --color-accent-600:#f6a06b; --color-accent-700:#ffc6a5; --color-accent-800:#ffe1d0; --color-accent-900:#fff2eb;
  --color-accent-2-100:#272e1b; --color-accent-2-200:#3d472b; --color-accent-2-300:#56633f; --color-accent-2-400:#728157; --color-accent-2-500:#8fa073; --color-accent-2-600:#aebf92; --color-accent-2-700:#ccdbb2; --color-accent-2-800:#e1eecc; --color-accent-2-900:#f0fae1;
  --shadow-sm:0 1px 2px rgba(0,0,0,.45); --shadow-md:0 3px 10px rgba(0,0,0,.5); --shadow-lg:0 12px 32px rgba(0,0,0,.6);
}
html[data-theme='dark'] .icon-moon{display:none}
html[data-theme='light'] .icon-sun{display:none}
html[data-theme='dark'] .washed{filter:saturate(.6) contrast(.9) brightness(.85)}
body{transition:background .35s ease,color .35s ease}
a{color:var(--color-accent-700)}a:hover{color:var(--color-accent-800)}
.rv{opacity:0;transform:translateY(26px);transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1)}
.rv.in{opacity:1;transform:none}
[data-plx]{will-change:transform}
@media (prefers-reduced-motion:reduce){.rv{opacity:1;transform:none;transition:none}}

/* Without JS the reveal elements would stay at opacity:0 forever. */
html.no-js .rv{opacity:1;transform:none}

/* ── page shell ─────────────────────────────────────────────────────────── */
.bh-page{min-height:100vh;background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);overflow-x:clip}
.bh-shell{max-width:1100px;margin:0 auto}
.bh-skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--color-accent);color:var(--color-on-accent);padding:10px 18px;border-radius:0 0 var(--radius-md) 0}
.bh-skip:focus{left:0}

/* ── top navigation ─────────────────────────────────────────────────────── */
.bh-nav{
  position:sticky;top:0;z-index:60;
  display:flex;align-items:center;gap:24px;padding:14px clamp(16px,4vw,40px);
  backdrop-filter:blur(18px) saturate(1.5);-webkit-backdrop-filter:blur(18px) saturate(1.5);
  background:color-mix(in srgb,var(--color-bg) 70%,transparent);
  border-bottom:1px solid var(--color-divider);
}
.bh-brand{display:flex;align-items:center;gap:10px;text-decoration:none;color:inherit;margin-right:auto}
.bh-brand-mark{width:34px;height:34px;border-radius:50%;background:var(--color-accent);display:grid;place-items:center;color:var(--color-on-accent);font-family:var(--font-heading);font-size:17px;flex:none}
.bh-brand-name{font-family:var(--font-heading);font-size:19px;white-space:nowrap}
.bh-brand-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-accent-2);margin-left:3px}

.bh-nav-links{display:flex;align-items:center;gap:20px;font-size:14px;flex-wrap:wrap}
.bh-nav-link{color:inherit;text-decoration:none}
.bh-nav-link:hover{color:var(--color-accent-700)}
.bh-nav-link[aria-current='page']{color:var(--color-accent-700);font-weight:700}

.bh-nav-actions{display:flex;align-items:center;gap:10px}
.bh-pill-btn{
  cursor:pointer;font:inherit;font-size:13px;font-weight:600;padding:7px 14px;border-radius:999px;
  border:1px solid var(--color-divider);background:transparent;color:inherit;
}
.bh-pill-btn:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.bh-icon-btn{
  cursor:pointer;width:36px;height:36px;border-radius:999px;
  border:1px solid var(--color-divider);background:transparent;color:inherit;display:grid;place-items:center;
}
.bh-icon-btn:hover{background:color-mix(in srgb,var(--color-text) 7%,transparent)}
.bh-nav-wa{font-size:13px;white-space:nowrap}
.bh-nav-toggle{display:none}

/* Mobile navigation — not modelled in the canvas; the desktop row would wrap
   into an unusable stack below ~980px, so it collapses into a sheet. */
@media (max-width:980px){
  .bh-nav{gap:12px;flex-wrap:wrap}
  .bh-nav-toggle{display:grid;order:3}
  .bh-nav-actions{order:2}
  .bh-nav-links{
    order:4;flex-basis:100%;flex-direction:column;align-items:stretch;gap:0;
    display:none;padding:6px 0 2px;border-top:1px solid var(--color-divider);margin-top:6px;
  }
  .bh-nav[data-open='true'] .bh-nav-links{display:flex}
  .bh-nav-links .bh-nav-link{padding:12px 4px;font-size:15px;border-bottom:1px solid color-mix(in srgb,var(--color-text) 8%,transparent)}
  .bh-nav-links .bh-nav-link:last-child{border-bottom:0}
}
/* Below ~480px the bar would wrap the hamburger onto a second row. Step the
   whole control scale down instead so brand + actions + toggle stay on one line. */
@media (max-width:480px){
  .bh-nav{gap:8px;padding-inline:16px}
  .bh-nav-actions{gap:6px}
  .bh-nav-actions .bh-wa-label{display:none}
  .bh-nav-actions .btn{padding:var(--space-2)}
  .bh-brand{gap:8px}
  .bh-brand-mark{width:30px;height:30px;font-size:15px}
  .bh-brand-name{font-size:16px}
  .bh-pill-btn{padding:6px 10px;font-size:12px}
  .bh-icon-btn{width:32px;height:32px}
}

/* ── decorative blobs ───────────────────────────────────────────────────── */
/* The canvas positions each blob with a unique inline style. Same idea here,
   but through custom properties so the size can be capped against the viewport
   — a bare `width:460px` overflows a phone. */
.bh-blob{
  position:absolute;pointer-events:none;border-radius:50%;
  width:min(var(--blob-size,420px),110vw);height:min(var(--blob-size,420px),110vw);
  top:var(--blob-top,auto);right:var(--blob-right,auto);
  bottom:var(--blob-bottom,auto);left:var(--blob-left,auto);
  background:radial-gradient(circle at 40% 40%,var(--blob-color,var(--color-accent-200)),transparent 70%);
}
.bh-blob--ring{background:none;border:2px dashed var(--blob-color,var(--color-accent-400));opacity:.45}

/* ── hero + sections ────────────────────────────────────────────────────── */
.bh-hero{position:relative;overflow:clip;padding:clamp(56px,8vw,90px) clamp(20px,5vw,40px) clamp(44px,6vw,70px)}
.bh-hero--tall{padding-top:clamp(64px,10vw,110px);padding-bottom:clamp(56px,8vw,90px)}
.bh-kicker{font-size:12px;letter-spacing:.1em;text-transform:uppercase;font-weight:700;color:var(--color-accent-700);margin-bottom:12px}
.bh-kicker--alt{color:var(--color-accent-2-700)}
.bh-hero h1{font-size:clamp(34px,5vw,64px);max-width:18ch;margin-bottom:20px}
.bh-hero--tall h1{font-size:clamp(36px,6vw,76px);line-height:1.06;max-width:15ch;margin-bottom:24px}
.bh-lede{font-size:clamp(16px,2vw,18px);max-width:54ch;opacity:.8}
.bh-lede--lg{font-size:clamp(17px,2.2vw,19px);max-width:52ch;opacity:.82}

.bh-section{position:relative;overflow:clip;padding:clamp(64px,8vw,100px) clamp(20px,5vw,40px)}
.bh-section--surface{background:var(--color-surface)}
.bh-section--after-hero{padding-top:20px}
.bh-section--flush-bottom{padding-bottom:0}
.bh-section h2{font-size:clamp(28px,4vw,48px)}
.bh-section-lede{max-width:58ch;opacity:.75;font-size:16px;margin-bottom:clamp(28px,4vw,44px)}

.bh-actions{display:flex;gap:14px;flex-wrap:wrap}
.bh-actions .btn{font-size:clamp(14px,1.4vw,16px);padding:13px 26px}

/* min() guard: the canvas uses a bare minmax(320px,1fr), which overflows any
   viewport narrower than 320px + gutters. */
.bh-grid{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(320px,100%),1fr));gap:20px}
.bh-grid--300{grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr))}
.bh-grid--280{grid-template-columns:repeat(auto-fit,minmax(min(280px,100%),1fr))}
.bh-grid--230{grid-template-columns:repeat(auto-fit,minmax(min(230px,100%),1fr))}
.bh-grid--170{grid-template-columns:repeat(auto-fit,minmax(min(170px,100%),1fr));gap:18px;max-width:820px}
.bh-split{position:relative;display:grid;grid-template-columns:repeat(auto-fit,minmax(min(300px,100%),1fr));gap:clamp(28px,4vw,44px);align-items:start}

/* ── stat tiles ─────────────────────────────────────────────────────────── */
.bh-stat{padding:18px 22px;background:var(--color-surface);border-radius:var(--radius-lg)}
.bh-stat-n{font-family:var(--font-heading);font-size:clamp(28px,3.4vw,34px);color:var(--color-accent-700)}
.bh-stat-n small{font-size:.53em}
.bh-stat-l{font-size:13px;opacity:.7}
.bh-section--surface .bh-stat{background:var(--color-bg)}

/* ── numbered process steps ─────────────────────────────────────────────── */
.bh-step{padding:26px;border-radius:var(--radius-lg);background:var(--color-bg)}
.bh-step-n{width:44px;height:44px;border-radius:50%;background:var(--color-accent);color:var(--color-on-accent);display:grid;place-items:center;font-family:var(--font-heading);font-size:19px;margin-bottom:16px}
.bh-step-n--alt{background:var(--color-accent-2-500)}
.bh-step h3{font-size:21px}
.bh-step p{font-size:14px;opacity:.75;margin:0}

/* ── icon chips reused across pages ─────────────────────────────────────── */
.svc-icon{width:42px;height:42px;border-radius:50%;display:grid;place-items:center;flex:none}
.svc-icon--sm{width:38px;height:38px}
.svc-icon-a{background:var(--color-accent-100);color:var(--color-accent-700)}
.svc-icon-b{background:var(--color-accent-2-100);color:var(--color-accent-2-700)}
.svc-icon-solid{background:var(--color-accent);color:var(--color-on-accent)}
.svc-icon-solid-2{background:var(--color-accent-2-500);color:var(--color-on-accent)}

/* ── link cards (services, industries, insights, products, work) ────────── */
.svc-card{text-decoration:none;color:inherit;transition:box-shadow .25s ease,transform .25s ease,opacity .7s ease}
.svc-card.rv{transition:opacity .7s ease,transform .8s cubic-bezier(.2,.7,.2,1),box-shadow .25s ease}
.svc-card:hover,.svc-card.rv.in:hover,.svc-card:focus-visible{box-shadow:var(--shadow-md);transform:translateY(-3px)}
.svc-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.svc-card-head{display:flex;align-items:center;gap:12px}
.svc-card--onbg{background:var(--color-bg)}
.svc-card--feature{background:var(--color-accent-100)}
.svc-card--feature .card-title,.svc-card--feature .card-body{color:var(--color-accent-800)}
.svc-card--feature-2{background:var(--color-accent-2-100)}
.svc-card--feature-2 .card-title,.svc-card--feature-2 .card-body{color:var(--color-accent-2-800)}
.svc-card--feature-2 .card-kicker,.svc-card--feature-2 .card-meta{color:var(--color-accent-2-700)}
.svc-card--picked{border:2px solid var(--color-accent)}
@media (prefers-reduced-motion:reduce){.svc-card,.svc-card.rv{transition:none}}

/* ── pricing table ──────────────────────────────────────────────────────── */
.bh-table-wrap{background:var(--color-surface);border-radius:calc(var(--radius-lg)*1.15);padding:clamp(20px,3vw,34px);overflow-x:auto}
.bh-table-wrap .table{min-width:640px}
.bh-table-wrap td a{font-weight:600;text-decoration:none}

/* ── checklist ("India-first defaults") ─────────────────────────────────── */
.bh-checks{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.bh-checks li{display:flex;gap:12px;align-items:flex-start;font-size:15px}
.bh-check-mark{width:26px;height:26px;flex:none;border-radius:50%;background:var(--color-accent-2-100);color:var(--color-accent-2-700);display:grid;place-items:center}

/* ── closing CTA band ───────────────────────────────────────────────────── */
.bh-cta-section{padding:0 clamp(20px,5vw,40px) clamp(64px,8vw,100px)}
.bh-cta-section--spaced{padding-top:clamp(64px,8vw,80px)}
.bh-cta{
  background:var(--color-surface);border-radius:calc(var(--radius-lg)*1.15);
  padding:clamp(28px,4vw,44px);display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:24px;
}
.bh-cta h2{font-size:clamp(23px,3vw,28px);margin-bottom:8px}
.bh-cta p{margin:0;opacity:.75;font-size:15px;max-width:56ch}
.bh-cta .btn{font-size:15px;padding:13px 26px}

/* ── dark accent surfaces (home CTA, pricing CTA, flagship card) ────────── */
.bh-dark{background:var(--color-accent-900);color:var(--color-accent-100)}
.bh-dark h1,.bh-dark h2,.bh-dark h3{color:var(--color-accent-100)}
.bh-dark p{opacity:.85}
.bh-cta.bh-dark p{opacity:.85}
.btn-on-dark{background:var(--color-accent-500);color:var(--color-on-accent)}
.btn-on-dark:hover{background:var(--color-accent-500);color:var(--color-on-accent);filter:brightness(.94)}
.btn-on-dark-ghost{border:1px solid color-mix(in srgb,var(--color-accent-100) 35%,transparent);color:var(--color-accent-100)}
.btn-on-dark-ghost:hover{background:color-mix(in srgb,var(--color-accent-100) 10%,transparent);color:var(--color-accent-100)}
.bh-flagship{border-radius:calc(var(--radius-lg)*1.15);padding:clamp(28px,4vw,48px);position:relative;overflow:clip}
.bh-flagship h2{font-size:clamp(30px,4vw,48px);margin:14px 0}
.bh-flagship p{max-width:56ch;font-size:17px;margin-bottom:26px}
.bh-tag-on-dark{background:var(--color-accent-500);color:var(--color-on-accent)}

/* ── full index lists (every guide, grouped) ────────────────────────────── */
.bh-index-cat{
  font-family:var(--font-body);font-weight:700;font-size:12px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--color-accent-700);
  margin:34px 0 12px;padding-bottom:8px;border-bottom:1px solid var(--color-divider);
}
.bh-index-list{list-style:none;margin:0;padding:0;display:grid;gap:2px;grid-template-columns:repeat(auto-fit,minmax(min(340px,100%),1fr))}
.bh-index-list a{
  display:block;text-decoration:none;color:inherit;
  padding:11px 14px;border-radius:var(--radius-md);
  transition:background .18s ease,color .18s ease;
}
.bh-index-list a:hover,.bh-index-list a:focus-visible{background:var(--color-surface);color:inherit}
.bh-index-title{display:block;font-size:14.5px;font-weight:600;line-height:1.35}
.bh-index-list a:hover .bh-index-title{color:var(--color-accent-700)}
.bh-index-desc{display:block;font-size:12.5px;opacity:.65;margin-top:3px;line-height:1.45}
@media (prefers-reduced-motion:reduce){.bh-index-list a{transition:none}}

/* ── FAQ ────────────────────────────────────────────────────────────────── */
.bh-faq{display:grid;gap:10px;max-width:80ch}
.bh-faq-item{background:var(--color-bg);border-radius:var(--radius-lg);padding:4px 6px}
.bh-faq-item summary{
  cursor:pointer;list-style:none;display:flex;align-items:flex-start;gap:12px;
  padding:14px 16px;font-family:var(--font-heading);font-size:17px;line-height:1.3;
  border-radius:var(--radius-lg);
}
.bh-faq-item summary::-webkit-details-marker{display:none}
.bh-faq-item summary::after{
  content:"";flex:none;margin-left:auto;width:10px;height:10px;margin-top:5px;
  border-right:2.5px solid var(--color-accent);border-bottom:2.5px solid var(--color-accent);
  transform:rotate(45deg);transition:transform .2s ease;
}
.bh-faq-item[open] summary::after{transform:rotate(-135deg)}
.bh-faq-item summary:hover{color:var(--color-accent-700)}
.bh-faq-item summary:focus-visible{outline:2px solid var(--color-accent);outline-offset:2px}
.bh-faq-item p{margin:0;padding:0 16px 16px;font-size:14.5px;line-height:1.6;opacity:.8;max-width:70ch}
@media (prefers-reduced-motion:reduce){.bh-faq-item summary::after{transition:none}}

/* ── contact form card ──────────────────────────────────────────────────── */
.bh-form-card{padding:clamp(24px,3vw,34px)}
.bh-form-card h2{font-size:clamp(22px,2.6vw,26px);margin-bottom:4px}
.bh-form-note{font-size:13px;opacity:.65;margin-bottom:18px}
.bh-form-card .field{margin-bottom:14px}
.bh-form-card .field:last-of-type{margin-bottom:20px}
.bh-form-status{font-size:13px;margin:10px 0 0;min-height:1.2em}

/* ── footer ─────────────────────────────────────────────────────────────── */
.bh-footer{padding:44px clamp(20px,5vw,40px);background:var(--color-bg);color:var(--color-text);font-family:var(--font-body);border-top:1px solid var(--color-divider)}
.bh-footer-in{max-width:1100px;margin:0 auto;display:flex;flex-direction:column;gap:22px}
.bh-footer-row{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between}
.bh-footer-brand{display:flex;align-items:center;gap:10px}
.bh-footer-mark{width:28px;height:28px;border-radius:50%;background:var(--color-accent);display:grid;place-items:center;color:var(--color-on-accent);font-family:var(--font-heading);font-size:14px;flex:none}
.bh-footer-legal{font-size:13px;opacity:.7}
.bh-footer-legal a{color:inherit;text-decoration:none}
.bh-footer-legal a:hover{color:var(--color-accent-700)}
.bh-footer-tags{display:flex;gap:8px;flex-wrap:wrap}
.bh-footer-links{display:flex;gap:18px;flex-wrap:wrap;font-size:13px}
.bh-foot-link{color:inherit;text-decoration:none;opacity:.7}
.bh-foot-link:hover{opacity:1;color:var(--color-accent-700)}

/* ===== assets/organic/legacy.css ===== */
/* ══════════════════════════════════════════════════════════════════════════
   Organic over the legacy Big Helpers page system.

   The ~230 deep pages (services, insights, compare, cities, hire, case
   studies, resources…) carry their content markup in the old blue design
   system, with a per-page inline <style> block. Rewriting that markup by hand
   is neither feasible nor safe, so those pages keep their structure and get:

     · the Organic shell (nav + footer) swapped in by convert_legacy_pages.py
     · this layer, which re-points the legacy design tokens at Organic ones and
       restyles the recurring components

   Load order: page's own inline <style>  →  tokens.css  →  bh.css  →  this.
   convert_legacy_pages.py also does a property-aware colour rewrite in the
   HTML itself, because a large share of the legacy palette lives in inline
   style="" attributes that no stylesheet can reach.
   ══════════════════════════════════════════════════════════════════════ */

/* — legacy tokens, re-pointed —
   Kept as a safety net: the converter rewrites these declarations in the page,
   but a page that was missed (or a hand-edit that reintroduces them) still
   lands on Organic values rather than blue. */
:root{
  --ink:var(--color-text);
  --pri:var(--color-accent);
  --pri-soft:var(--color-accent-100);
  --gold:var(--color-accent-400);
  --muted:var(--color-neutral-700);
  --border:var(--color-divider);
  --line:var(--color-divider);
  --bg:var(--color-bg);
  --ok:var(--color-accent-2);
}

/* — the second legacy layer —
   /bh-refresh.css is still loaded by the deep pages and sets
   `body{background:var(--bh-page)!important;color:var(--bh-ink)!important}`,
   which no ordinary rule of ours can outrank. Re-pointing its tokens beats
   escalating: the !important rule stays, and now resolves to Organic values. */
:root{
  --bh-page:var(--color-bg);
  --bh-surface:var(--color-surface);
  --bh-mint:var(--color-accent-2-100);
  --bh-cream:var(--color-surface);
  --bh-lav:var(--color-accent-100);
  --bh-ink:var(--color-text);
  --bh-soft:var(--color-neutral-700);
  --bh-teal:var(--color-accent-2-800);
  --bh-green:var(--color-accent-2-600);
  --bh-green-soft:var(--color-accent-2-100);
  --bh-line:var(--color-divider);
}

/* — typography —
   The legacy CSS uses the `font:` shorthand (`font:800 48px/1.1 'Inter'`),
   which sets family and weight in one declaration. Overriding it needs
   !important; there is no lower-specificity way in. */
body{
  font-family:var(--font-body)!important;
  background:var(--color-bg);
  color:var(--color-text);
}
h1,h2,h3,h4,h5,h6,.section-title,.section-h,.card-title,.dd-title{
  font-family:var(--font-heading)!important;
  font-weight:var(--font-heading-weight)!important;
  letter-spacing:-.015em;
}
h1 em,h2 em,h3 em{font-style:normal;color:var(--color-accent)}
strong,b{font-weight:700}

/* — links — */
a{color:var(--color-accent-700)}
a:hover{color:var(--color-accent-800)}

/* — heroes —
   Every page family names its hero differently but they share one shape: a
   dark band with light text. */
.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero{
  background:linear-gradient(135deg,var(--color-accent-900),var(--color-accent-700))!important;
  color:var(--color-accent-100)!important;
}
.hub-hero h1,.svc-hero h1,.ind-hero h1,.t-hero h1,.h-hero h1,.hero h1,
.hub-hero h2,.svc-hero h2,.ind-hero h2,.hero h2{color:var(--color-accent-100)!important}
.hub-hero p,.svc-hero p,.ind-hero p,.t-hero p,.h-hero p,.hero p{color:var(--color-accent-200)!important}
.hub-hero a:not(.btn),.svc-hero a:not(.btn),.hero a:not(.btn){color:var(--color-accent-300)}
.art-hero{
  background:linear-gradient(180deg,var(--color-bg),var(--color-surface))!important;
  border-bottom:1px solid var(--color-divider);
}
.pill{
  background:color-mix(in srgb,var(--color-accent-400) 22%,transparent)!important;
  color:var(--color-accent-800)!important;
  border:1px solid color-mix(in srgb,var(--color-accent-400) 40%,transparent)!important;
  border-radius:999px;
}
.art-hero .pill,.art-hero .cat{
  background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;border:0!important;
}

/* — buttons — */
.btn{
  font-family:var(--font-heading)!important;font-weight:var(--font-heading-weight)!important;
  border-radius:999px;
}
.btn-primary{background:var(--color-accent)!important;color:var(--color-on-accent)!important;border-color:transparent!important}
.btn-primary:hover{background:var(--color-accent-600)!important}
.btn-wa,.btn-whatsapp{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.btn-wa:hover,.btn-whatsapp:hover{background:var(--color-accent-2-600)!important;color:var(--color-on-accent)!important}
.btn-ghost{background:var(--color-surface)!important;color:var(--color-text)!important;border:1px solid var(--color-divider)!important}
.btn-ghost:hover{background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;border-color:var(--color-accent)!important}

/* — cards and boxes — */
.post-card,.box,.card,.bh-niche-card,.kv-row,.promise{
  background:var(--color-surface);
  border:1px solid var(--color-divider);
  border-radius:var(--radius-lg);
  color:var(--color-text);
}
.post-card:hover,.bh-niche-card:hover{
  border-color:var(--color-accent);
  box-shadow:var(--shadow-md);
  color:var(--color-text);
}
.post-card h3,.post-card h4,.bh-niche-card h3,.bh-niche-card h4{color:var(--color-text)}
.post-card .cat,.tech-pill,.tech-chip,.lab{
  background:var(--color-accent-100)!important;color:var(--color-accent-800)!important;
  border-radius:999px;
}
.pain-bg{background:var(--color-surface)!important}
.us{background:var(--color-accent-2-100)!important;color:var(--color-accent-2-800)!important}

/* — emoji icons —
   The legacy pages carry emoji where the design uses line-SVG icons in tinted
   circular chips. The emoji can't be swapped from CSS and they do carry meaning,
   so they get the design's chip treatment instead: same silhouette, same rhythm. */
.ic,.dd-ic{
  display:inline-grid!important;place-items:center;
  width:42px;height:42px;flex:none;
  border-radius:50%;
  background:var(--color-accent-100);
  font-size:20px!important;line-height:1!important;
  margin-bottom:10px;
}
.dd-ic{width:34px;height:34px;font-size:16px!important;margin-bottom:0}
.feat:nth-child(even) .ic,.svc-card:nth-child(even) .ic{background:var(--color-accent-2-100)}

/* — display numerals —
   Prices and stat figures are <div>s, so the heading rule does not reach them;
   in the design these are set in the heading face. */
.price,.tier .price,.stat .n,.n,.big-num{
  font-family:var(--font-heading)!important;
  font-weight:var(--font-heading-weight)!important;
  color:var(--color-text);letter-spacing:-.01em;
}

/* — tier cards, to the design's spec — */
.tier{border-radius:calc(var(--radius-lg)*1.15)!important;border-color:var(--color-divider)!important}
.tier.featured,.tier.pick{border-color:var(--color-accent)!important;box-shadow:var(--shadow-md)!important}
.tier ul li::before{background:var(--color-accent-2)!important;color:var(--color-bg)!important}
.tier .who,.tier .timeline{color:var(--color-neutral-700)}

/* — long-form article body — */
article.body,.article-body{color:var(--color-text)}
article.body h2{border-top:3px solid var(--color-accent-200)!important}
article.body a,.article-body a{color:var(--color-accent-700)}
article.body table th{background:var(--color-surface)!important;color:var(--color-text)!important}
article.body table td,article.body table th{border-color:var(--color-divider)!important}
article.body blockquote{border-left:3px solid var(--color-accent)!important;background:var(--color-surface)!important}
article.body code,code{background:var(--color-neutral-200);color:var(--color-accent-800);border-radius:6px;padding:1px 5px}
article.body pre,pre{background:var(--color-neutral-900);color:var(--color-neutral-100);border-radius:var(--radius-md)}
article.body pre code,pre code{background:none;color:inherit}

/* — legacy FAQ accordion (its own classes, not the Organic one) — */
.bh-faq-item{background:var(--color-surface)!important;border:1px solid var(--color-divider)!important;border-radius:var(--radius-lg)!important}
.bh-faq-q{color:var(--color-text)!important;font-family:var(--font-heading)!important}
.bh-faq-a{color:var(--color-text)!important;opacity:.82}

/* — section rhythm — */
:where(.section,.bh-sec,.cat-section){background:transparent}
.section-title,.section-h{color:var(--color-text)}
.section-lede,.section-sub,.csub{color:var(--color-neutral-700)}
hr,.sep{border-color:var(--color-divider);background:var(--color-divider)}

/* — contrast repair for converted deep pages —
   The conversion stylesheet is shared outside the Organic asset bundle. Its
   blue callouts were recoloured at the page level, but their more-specific
   child rules can still pin dark text inside the new dark Organic surfaces.
   Keep all ordinary copy on those surfaces light; buttons retain their own
   accessible foreground/background pairing. */
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video){
  color:var(--color-accent-100)!important;
}
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video)
  :is(h1,h2,h3,h4,h5,h6,p,li,strong,b,small,.section-title,.section-lede,.section-sub){
  color:inherit!important;
}
:where(.bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video) a:not(.btn){
  color:var(--color-accent-300)!important;
}

/* Shared conversion CTAs and small labels also need accessible pairs. */
.bh-cta-stack .bh-btn-wa,.bh-inline-cta .bh-btn-wa,.bh-end-cta .bh-btn-wa{
  background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important;
}
.bh-cta-stack .bh-btn-audit,.bh-inline-cta .bh-btn-audit,.bh-end-cta .bh-btn-audit{
  background:var(--color-accent-400)!important;color:var(--color-on-accent)!important;
}
.promise,.cat,.sources h3,.week,.date,.n,.num,.when,.platform,.role,.bsp-kicker{
  color:var(--color-accent-800)!important;
}
.status-val,.checkmark{color:var(--color-accent-2-800)!important}
.mini,.source-list{color:var(--color-neutral-800)!important}
.badge,.ribbon,.pn{color:var(--color-on-accent)!important}
.tick{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.btn.alt{background:var(--color-accent-2-500)!important;color:var(--color-on-accent)!important}
.problem-bg h3,.crossmark,.compare-card.bad .tag{color:#b91c1c!important}
.lang-notice,.lang-notice a{color:var(--color-accent-900)!important}
.services h2,.service-card h3{color:var(--color-accent-800)!important}

/* Inline page CSS frequently uses --pri directly for links. Make ordinary
   links use the contrast-safe accent step, then restore light links on every
   known dark content surface. */
a:not(.btn){color:var(--color-accent-700)!important}
:where(.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero,
       .bh-inline-cta,.bh-newsletter,.tldr,.cta-strip,.cta-box,.cta-block,
       .cta-final,.proof,.proof-card,.host-bg,.stat-card,.bsp-video) a:not(.btn){
  color:var(--color-accent-300)!important;
}
:where(.hub-hero,.svc-hero,.ind-hero,.t-hero,.h-hero,.hero) .pill{
  background:color-mix(in srgb,var(--color-accent-400) 22%,transparent)!important;
  color:var(--color-accent-300)!important;
}
#bh-cookie-banner a{color:var(--color-accent-300)!important}
.lang-notice a{color:var(--color-accent-900)!important}
.step b,.value-card .tag,[style*="color:var(--color-accent)"],[style*="color:var(--pri)"]{
  color:var(--color-accent-800)!important;
}
.print-toolbar a.btn-back{color:var(--color-accent-200)!important}
.stat-card .num{color:var(--color-accent-400)!important}
.stat-card .src{color:var(--color-accent-200)!important}
.bsp-video video{color:var(--color-accent-100)!important}
.bh-chat__badge{background:#b91c1c!important;color:#fff!important}

/* — the legacy scroll-progress bar, if the page still has one — */
.bh-scroll-progress{background:var(--color-accent)!important}

/* — the 22-language switcher —
   simple-language.js appends a position:fixed picker at top:10px/right:10px with
   z-index 9999, which lands squarely on the Organic nav's WhatsApp button on
   desktop and its menu button on mobile. Move it to the free bottom-left corner
   rather than hide it: it is the only route to the regional-language pages.
   The inline styles it writes need !important to beat. */
div:has(> #language-selector){
  top:auto!important;right:auto!important;
  bottom:14px!important;left:14px!important;
  z-index:55!important;
  padding:4px!important;
  background:var(--color-surface)!important;
  border:1px solid var(--color-divider)!important;
  border-radius:999px!important;
  box-shadow:var(--shadow-md)!important;
}
#language-selector{
  font-family:var(--font-body)!important;font-size:13px!important;
  border:0!important;border-radius:999px!important;
  background:transparent!important;color:var(--color-text)!important;
  padding:5px 10px!important;cursor:pointer;
}

/* — dark theme: the legacy system had no dark mode, so a few of its
     hard-light surfaces need pulling down — */
html[data-theme='dark'] .post-card,
html[data-theme='dark'] .box,
html[data-theme='dark'] .bh-niche-card{background:var(--color-surface)}
html[data-theme='dark'] img:not([src$=".svg"]){filter:brightness(.92)}

/* The converted legacy layouts still contain many hard-coded light surfaces
   from their original page-specific CSS and external conversion.css. A partial
   dark palette creates unreadable light-on-light and dark-on-dark combinations.
   Keep those pages on the verified light palette and remove the unsupported
   toggle. The nine fully rebuilt `.bh-page` routes retain real dark mode. */
html[data-theme='dark'] body.bh-legacy-page{
  --color-bg:#f5ead8;--color-surface:#ebddc5;--color-text:#201e1d;
  --color-divider:color-mix(in srgb,#201e1d 16%,transparent);
  --color-accent:#c67139;--color-accent-2:#7a8a5e;
  --color-neutral-100:#f9f4ed;--color-neutral-200:#eee7db;--color-neutral-300:#dcd3c4;
  --color-neutral-400:#c0b6a5;--color-neutral-500:#a19786;--color-neutral-600:#82796a;
  --color-neutral-700:#645c50;--color-neutral-800:#474238;--color-neutral-900:#2e2b25;
  --color-accent-100:#fff2eb;--color-accent-200:#ffe1d0;--color-accent-300:#ffc6a5;
  --color-accent-400:#f6a06b;--color-accent-500:#d67f48;--color-accent-600:#b2622d;
  --color-accent-700:#8c491a;--color-accent-800:#643312;--color-accent-900:#402310;
  --color-accent-2-100:#f0fae1;--color-accent-2-200:#e1eecc;--color-accent-2-300:#ccdbb2;
  --color-accent-2-400:#aebf92;--color-accent-2-500:#8fa073;--color-accent-2-600:#728157;
  --color-accent-2-700:#56633f;--color-accent-2-800:#3d472b;--color-accent-2-900:#272e1b;
  --shadow-sm:0 1px 2px color-mix(in srgb,#2e2b25 14%,transparent);
  --shadow-md:0 3px 10px color-mix(in srgb,#2e2b25 16%,transparent);
  --shadow-lg:0 12px 32px color-mix(in srgb,#2e2b25 22%,transparent);
  /* Resolve the older aliases here too. When defined on :root, their nested
     var() values have already followed the dark root palette before they are
     inherited by body. */
  --ink:#201e1d;--pri:#c67139;--pri-soft:#fff2eb;--gold:#f6a06b;
  --muted:#645c50;--border:color-mix(in srgb,#201e1d 16%,transparent);
  --line:color-mix(in srgb,#201e1d 16%,transparent);--bg:#f5ead8;--ok:#7a8a5e;
  --bh-page:#f5ead8;--bh-surface:#ebddc5;--bh-mint:#f0fae1;--bh-cream:#ebddc5;
  --bh-lav:#fff2eb;--bh-ink:#201e1d;--bh-soft:#645c50;--bh-teal:#3d472b;
  --bh-green:#728157;--bh-green-soft:#f0fae1;
  --bh-line:color-mix(in srgb,#201e1d 16%,transparent);
  background:#f5ead8!important;color:#201e1d!important;color-scheme:light;
}
body.bh-legacy-page [data-bh-theme-toggle]{display:none!important}