/* ============================================================
   Bhala Neumorphism / Neoforge overlay
   Additive layer — applies soft extruded "neoforge" styling to the
   unified solution-page skeleton + catalogue. Loaded LAST so it wins.
   ============================================================ */
:root{
  --nf-bg:#e9eef4;
  --nf-surface:#eef2f7;
  --nf-ink:#173257;
  --nf-muted:#5b6a7f;
  --nf-green:#00c853;
  --nf-blue:#0088c4;
  --nf-radius:18px;
  --nf-light:rgba(255,255,255,.92);
  --nf-dark:rgba(21,49,89,.16);
  --nf-shadow:8px 8px 18px var(--nf-dark), -8px -8px 18px var(--nf-light);
  --nf-shadow-sm:5px 5px 11px var(--nf-dark), -5px -5px 11px var(--nf-light);
  --nf-inset:inset 5px 5px 11px var(--nf-dark), inset -5px -5px 11px var(--nf-light);
}
body{background:var(--nf-bg)!important}

/* --- header: soft floating bar --- */
.solution-header{background:var(--nf-bg)!important;border-bottom:0!important;box-shadow:0 6px 20px rgba(21,49,89,.10)!important}
.sh-nav>a,.sh-drop__btn{border-radius:12px}
.sh-nav>a:hover,.sh-drop__btn:hover{background:var(--nf-surface);box-shadow:var(--nf-shadow-sm)}
.sh-drop__menu{background:var(--nf-surface);border:0;box-shadow:var(--nf-shadow)}
.sh-cta{box-shadow:5px 5px 12px rgba(0,136,196,.32), -4px -4px 10px var(--nf-light)}

/* --- sections keep the soft paper ground --- */
.solution-section{background:transparent}
.solution-section.solution-dark{background:#12294d!important}
.solution-section.solution-dark,.solution-section.solution-dark *{color:#eaf2ff}

/* --- cards: extruded neoforge tiles --- */
.solution-card,.product-tile,.blog-card,.solution-step,.solution-faq,.solution-panel{
  background:var(--nf-surface)!important;
  border:0!important;
  border-radius:var(--nf-radius)!important;
  box-shadow:var(--nf-shadow)!important;
  transition:box-shadow .25s ease, transform .25s ease!important;
}
.solution-card:hover,.product-tile:hover,.blog-card:hover{
  transform:translateY(-3px)!important;
  box-shadow:11px 11px 24px var(--nf-dark), -11px -11px 24px var(--nf-light)!important;
}
.solution-card.has-img .card-img,.product-tile__img,.blog-card__img{border-radius:var(--nf-radius) var(--nf-radius) 0 0}
.solution-card small,.product-tile__body small,.blog-card__body small{color:var(--nf-green)}
.solution-card h3,.product-tile__body strong,.blog-card__body h3{color:var(--nf-ink)}

/* --- buttons: raised, press-in on click --- */
.solution-btn,.btn,.btn-yellow,.btn-navy,.btn-light,.product-tile__cta{
  border:0!important;border-radius:14px!important;
  box-shadow:var(--nf-shadow-sm)!important;transition:.18s ease!important;
}
.solution-btn.primary,.btn-yellow{background:linear-gradient(135deg,var(--nf-green),var(--nf-blue))!important;color:#fff!important}
.solution-btn.secondary,.btn-light{background:var(--nf-surface)!important;color:var(--nf-ink)!important}
.btn-navy{background:#12294d!important;color:#fff!important}
.solution-btn:hover,.btn:hover{filter:brightness(1.03)}
.solution-btn:active,.btn:active{box-shadow:var(--nf-inset)!important;transform:translateY(1px)}

/* --- catalogue product cards (app.css) get neoforge too --- */
.product-card,.service-card{
  background:var(--nf-surface)!important;border:0!important;
  border-radius:var(--nf-radius)!important;box-shadow:var(--nf-shadow)!important;
}
.product-card:hover,.service-card:hover{box-shadow:11px 11px 24px var(--nf-dark), -11px -11px 24px var(--nf-light)!important}

/* --- inputs: inset (pressed) neumorphic --- */
.search-field span,#catalogueSearch,.solution-faqs details,input[type="search"],input[type="text"]{
  background:var(--nf-bg)!important;border:0!important;border-radius:12px!important;box-shadow:var(--nf-inset)!important;
}
.filters button,.solution-pill{
  background:var(--nf-surface)!important;border:0!important;border-radius:999px!important;box-shadow:var(--nf-shadow-sm)!important;color:var(--nf-ink)!important;
}
.filters button.active{background:linear-gradient(135deg,var(--nf-green),var(--nf-blue))!important;color:#fff!important;box-shadow:var(--nf-inset)!important}

/* --- hero visual gets a soft frame --- */
.hero-visual img{border-radius:22px!important;box-shadow:14px 14px 30px var(--nf-dark), -10px -10px 26px var(--nf-light)!important}

/* --- gallery tiles --- */
.gallery-strip figure{border-radius:16px;box-shadow:var(--nf-shadow-sm)}

@media (prefers-reduced-motion: reduce){
  .solution-card,.product-tile,.blog-card{transition:none!important}
}

/* --- FIX: uniform catalogue product cards (stop image stretch/squash) --- */
#productGrid.product-grid{grid-template-columns:repeat(auto-fill,minmax(240px,1fr))!important;align-items:stretch!important}
.product-card{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.product-media,.product-top{display:block!important;width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important;border-radius:var(--nf-radius) var(--nf-radius) 0 0!important;flex:0 0 auto!important}
.product-media img{width:100%!important;height:100%!important;object-fit:cover!important;display:block!important}
.product-top{display:flex!important;align-items:center!important;justify-content:center!important;flex-direction:column!important;background:linear-gradient(135deg,#12294d,#0088c4)!important;color:#fff!important}
.product-body{flex:1 1 auto!important;display:flex!important;flex-direction:column!important;gap:.35rem!important;padding:1rem!important}
.product-body .product-actions{margin-top:auto!important;display:flex!important;gap:.5rem!important;flex-wrap:wrap!important}
.service-card{display:flex!important;flex-direction:column!important;overflow:hidden!important}
.service-media{display:block!important;width:100%!important;aspect-ratio:4/3!important;overflow:hidden!important}
.service-media img{width:100%!important;height:100%!important;object-fit:cover!important}

/* ============================================================
   Sharp edges (0 radius) + full-width buttons — per brief
   ============================================================ */
:root{--nf-radius:0px}
.solution-card,.product-tile,.blog-card,.product-card,.service-card,.solution-step,.solution-faq,.solution-panel,
.solution-btn,.btn,.btn-yellow,.btn-navy,.btn-light,.btn-outline,.product-tile__cta,
input,input[type="search"],input[type="text"],textarea,select,.search-field span,#catalogueSearch,
.filters button,.solution-pill,.sh-cta,.sh-drop__menu,.sh-nav>a,.sh-drop__btn,
.hero-visual img,.gallery-strip figure,.card-img,.product-tile__img,.blog-card__img,.product-media,.product-top,.blog-post__hero img{
  border-radius:0!important;
}
/* full-width buttons in content areas (not the compact header CTA) */
.solution-actions{flex-direction:column!important;align-items:stretch!important;gap:.6rem!important}
.solution-btn,.btn-yellow,.btn-navy,.btn-light,.btn-outline,.solution-btn.primary,.solution-btn.secondary,
.product-actions .btn,.custom-requirement-cta .btn,.cart .btn,.full,.solution-cta .solution-btn{
  width:100%!important;justify-content:center!important;text-align:center!important;
}
.product-actions{flex-direction:column!important}
.sh-cta{width:auto!important}