/* ══════════════════════════════════════════════════════════════════════════
   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)}a:hover{color:var(--color-accent-600)}
.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-bg);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-bg);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)}
.bh-nav-link[aria-current='page']{color:var(--color-accent);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-bg);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)}
.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-bg)}
.svc-icon-solid-2{background:var(--color-accent-2);color:var(--color-bg)}

/* ── 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-400);color:var(--color-accent-900)}
.btn-on-dark:hover{background:var(--color-accent-300);color:var(--color-accent-900)}
.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-400);color:var(--color-accent-900)}

/* ── 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)}
.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)}
.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-bg);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)}
.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)}