/* ===== Mahishika tokens (named by the colour you see) ===== */
:root{
  --blue-25:#D3E9FB; --blue-500:#2490EA; --blue-800:#1270bf; --blue-900:#1065ac;
  --navy-300:#33408d; --navy-400:#2d397e; --navy-500:#28326F; --navy-700:#1d2451; --navy-800:#181e42; --navy-900:#121733;
  --slate-25:#F2F2F3; --slate-200:#989ca4; --slate-800:#61656d;
  --cyan-25:#D6F3F9; --cyan-500:#32C1E2; --cyan-950:#1787a1;
  --green-25:#B7EBD2; --green-500:#10A55F; --green-700:#0d844c;
  --red-25:#F8D6D4; --red-500:#DB3226;
  --orange-25:#FDE9D0; --orange-500:#F69313;

  --p-design:var(--orange-500); --p-design-tint:var(--orange-25);
  --p-video:var(--red-500);     --p-video-tint:var(--red-25);
  --p-tech:var(--cyan-500);     --p-tech-tint:var(--cyan-25);
  --p-mkt:var(--green-500);     --p-mkt-tint:var(--green-25);

  --ink:var(--navy-800); --muted:var(--slate-800); --line:#E1E2E6;
  --primary:var(--blue-800); --primary-hover:var(--blue-900);
  --nav-h:70px;
}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:"Poppins","Segoe UI",system-ui,sans-serif; color:var(--ink); line-height:1.7; -webkit-font-smoothing:antialiased; background:#fff}
h1,h2,h3,h4{font-family:inherit; font-weight:700; line-height:1.15; letter-spacing:-0.02em; color:var(--navy-500)}
h2{font-size:clamp(1.7rem,3.2vw,2.4rem)}
h3{font-size:1.1rem; font-weight:600; letter-spacing:-0.01em; color:var(--navy-700)}
a{color:var(--primary)} a:hover{color:var(--primary-hover)}
:focus-visible{outline:3px solid var(--blue-500); outline-offset:3px}
.mh-sec{padding:clamp(3rem,7vw,5.5rem) 0; scroll-margin-top:calc(var(--nav-h) + 8px)}
.mh-soft{background:var(--slate-25)}
.mh-lede{color:var(--muted); font-size:1.08rem; max-width:54ch}
.mh-head{max-width:22ch}
.mh-head + .mh-lede{margin-top:1rem}
.mh-mt{margin-top:2.25rem}

.btn{font-weight:600; border-radius:12px; padding:.8rem 1.35rem; transition:transform .15s ease, background-color .15s ease}
.btn:hover{transform:translateY(-2px)} .btn:focus{box-shadow:none}
.btn-mh{background:var(--primary); border:2px solid var(--primary); color:#fff}
.btn-mh:hover{background:var(--primary-hover); border-color:var(--primary-hover); color:#fff}
.btn-mh-outline{background:transparent; border:2px solid var(--navy-500); color:var(--navy-500)}
.btn-mh-outline:hover{background:var(--navy-500); color:#fff}
.btn-mh-light{background:#fff; border:2px solid #fff; color:var(--navy-500)}
.btn-mh-light:hover{background:var(--blue-25); border-color:var(--blue-25); color:var(--navy-700)}

/* placeholders */
.ph{background:#FFF3D6; box-shadow:inset 0 -2px 0 var(--orange-500); border-radius:3px; padding:0 .15em}
body.no-ph .ph{background:none; box-shadow:none}
.mh-ribbon{background:var(--navy-900); color:#fff; font-size:.82rem; padding:.55rem 0}
.mh-ribbon .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mh-ribbon button{background:transparent; border:1.5px solid rgba(255,255,255,.5); color:#fff; border-radius:99px; font:500 .78rem "Poppins",sans-serif; padding:.15rem .9rem; cursor:pointer}
.mh-ribbon button[aria-pressed="true"]{background:#fff; color:var(--navy-900)}

/* navbar */
.mh-nav{background:rgba(255,255,255,.95); backdrop-filter:blur(10px); border-bottom:1px solid var(--line); padding:.7rem 0; min-height:var(--nav-h)}
.mh-nav .navbar-brand img{height:40px; width:auto; display:block}
.mh-nav .nav-link{color:var(--slate-800); font-weight:500; font-size:.95rem; padding-left:.9rem; padding-right:.9rem}
.mh-nav .nav-link:hover,.mh-nav .nav-link.active{color:var(--navy-500)}
.mh-nav .dropdown-menu{border:1px solid var(--line); border-radius:14px; padding:.5rem; box-shadow:0 12px 30px rgba(40,50,111,.12)}
.mh-nav .dropdown-item{border-radius:8px; padding:.55rem .8rem; font-weight:500; font-size:.92rem; display:flex; align-items:center; color:var(--navy-800)}
.mh-nav .dropdown-item i{width:.7rem; height:.7rem; border-radius:50%; margin-right:.7rem; background:var(--dc)}
@media (max-width:991.98px){.mh-nav .btn{margin:.75rem 0 .5rem}}

/* ===== hero + impact stats ===== */
.mh-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(2.5rem,6vw,4rem)}
.mh-hero h1{font-size:clamp(2.1rem,4.8vw,3.5rem); letter-spacing:-0.035em; line-height:1.08; max-width:18ch}
.mh-hero .mh-lede{margin-top:1.4rem; font-size:1.15rem}
.mh-hero-cta{margin-top:1.75rem}
.mh-hero-cta .btn{margin:0 .7rem .7rem 0}
.mh-impact{display:grid; grid-template-columns:repeat(4,1fr); gap:.9rem; margin-top:2.75rem}
.mh-imp{border-top:4px solid var(--sc); padding-top:.8rem}
.mh-imp strong{display:block; font-size:clamp(1.8rem,3.2vw,2.5rem); font-weight:700; line-height:1.05; letter-spacing:-0.035em; color:var(--navy-500)}
.mh-imp span{font-size:.85rem; color:var(--muted); line-height:1.4; display:block; margin-top:.15rem}
@media (max-width:575.98px){.mh-impact{grid-template-columns:repeat(2,1fr)}}

/* ===== filters: dropdowns ===== */
.mh-fbar{background:#fff; border:1px solid var(--line); border-radius:16px; padding:1rem 1.1rem; box-shadow:0 10px 26px rgba(40,50,111,.06); display:flex; flex-wrap:wrap; align-items:flex-start; gap:.75rem}
.mh-fddown{position:relative}
.mh-fddown > .btn{display:flex; align-items:center; background:var(--slate-25); border:1.5px solid transparent; color:var(--navy-800); border-radius:12px; padding:.65rem 1.1rem; font:600 .9rem "Poppins",sans-serif; transition:border-color .15s, background-color .15s}
.mh-fddown > .btn:hover{transform:none; border-color:var(--slate-200)}
.mh-fddown > .btn::after{content:""; width:.55rem; height:.55rem; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); margin-left:.65rem; transition:transform .2s}
.mh-fddown > .btn[aria-expanded="true"]::after{transform:rotate(-135deg)}
.mh-fddown > .btn.active{background:var(--navy-500); color:#fff; border-color:var(--navy-500)}
.mh-fddown > .btn .n{display:inline-flex; align-items:center; justify-content:center; background:#fff; color:var(--navy-700); border-radius:99px; width:1.35rem; height:1.35rem; font-size:.72rem; font-weight:700; margin-left:.55rem}
.mh-fmenu{display:none; position:absolute; left:0; top:calc(100% + 8px); z-index:20; min-width:260px; max-width:320px; background:#fff; border:1px solid var(--line); border-radius:14px; padding:.6rem; box-shadow:0 18px 40px rgba(40,50,111,.16)}
.mh-fmenu.show{display:block}
.mh-fmenu .opt{display:flex; align-items:center; width:100%; border:0; background:none; text-align:left; padding:.55rem .6rem; border-radius:8px; font:500 .9rem "Poppins",sans-serif; color:var(--navy-800); cursor:pointer}
.mh-fmenu .opt:hover{background:var(--slate-25)}
.mh-fmenu .opt.sel{background:var(--blue-25); color:var(--navy-800); font-weight:600}
.mh-fmenu .opt .rd{width:1rem; height:1rem; border-radius:50%; border:2px solid var(--slate-200); margin-right:.75rem; flex:none; position:relative}
.mh-fmenu .opt.sel .rd{border-color:var(--navy-500)}
.mh-fmenu .opt.sel .rd::after{content:""; position:absolute; inset:2px; border-radius:50%; background:var(--navy-500)}
.mh-fmenu label{display:flex; align-items:center; width:100%; padding:.55rem .6rem; border-radius:8px; font:500 .9rem "Poppins",sans-serif; color:var(--navy-800); cursor:pointer; margin:0}
.mh-fmenu label:hover{background:var(--slate-25)}
.mh-fmenu label:has(input:checked){background:var(--blue-25); font-weight:600}
.mh-fmenu input[type=checkbox]{width:1.05rem; height:1.05rem; margin-right:.75rem; accent-color:var(--navy-500); flex:none}
.mh-fmenu label i{width:.55rem; height:.55rem; border-radius:50%; margin-right:.6rem; background:var(--dc)}
.mh-fmenu .div{border-top:1px solid var(--line); margin:.5rem -.6rem; padding-top:.5rem}
.mh-fmenu .foot{display:flex; justify-content:space-between; align-items:center; margin-top:.3rem}
.mh-fmenu .foot button{font:600 .82rem "Poppins",sans-serif; border-radius:8px; padding:.4rem .8rem}
.mh-fclear-one{background:none; border:0; color:var(--slate-800); text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.mh-fapply{background:var(--navy-500); border:2px solid var(--navy-500); color:#fff}
.mh-fclear-all{align-self:center; background:none; border:0; color:var(--primary); font:600 .88rem "Poppins",sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer; padding:.65rem .3rem}

/* ===== case cards ===== */
.mh-case{height:100%; display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:transform .18s, box-shadow .18s; text-decoration:none; color:inherit}
.mh-case:hover{transform:translateY(-5px); box-shadow:0 18px 36px rgba(40,50,111,.12); color:inherit; text-decoration:none}
.mh-case-img{position:relative; aspect-ratio:4/3; display:flex; align-items:flex-end; padding:.9rem; font-size:.8rem; color:var(--navy-800); background:repeating-linear-gradient(135deg,var(--pt) 0 14px,#fff 14px 28px); border-bottom:1px solid var(--line); border-radius:0 0 0 56px}
.mh-case-img span{background:#fff; border-radius:99px; padding:.05rem .7rem}
.mh-case-img .res{position:absolute; top:.8rem; right:.8rem; background:#fff; border-radius:10px; padding:.35rem .7rem; text-align:right; box-shadow:0 6px 16px rgba(40,50,111,.14)}
.mh-case-img .res strong{display:block; font-size:1.15rem; font-weight:700; color:var(--green-700); line-height:1}
.mh-case-img .res span{background:none; padding:0; font-size:.68rem; color:var(--slate-800); display:block}
.mh-case-body{padding:1.1rem 1.2rem 1.3rem; display:flex; flex-direction:column; flex:1}
.mh-case-body .ind{font-size:.78rem; font-weight:600; color:var(--slate-800); margin-bottom:.35rem}
.mh-case-body h3{font-size:1.08rem; line-height:1.32; margin-bottom:.5rem; color:var(--navy-700)}
.mh-case-body p{color:var(--muted); font-size:.9rem; line-height:1.55; margin:0}
.mh-dots{margin-top:auto; padding-top:1rem; display:flex}
.mh-dots i{width:.65rem; height:.65rem; border-radius:50%; margin-right:.3rem}
.mh-empty{text-align:center; padding:3rem 1rem; border:1.5px dashed var(--slate-200); border-radius:16px; color:var(--muted)}
.mh-empty strong{display:block; color:var(--navy-700); font-size:1.1rem; margin-bottom:.3rem}

/* ===== spotlight ===== */
.mh-spot{display:grid; grid-template-columns:1.1fr 1fr; gap:clamp(1.5rem,4vw,3rem); align-items:center}
.mh-spot-img{aspect-ratio:4/3; border-radius:20px 20px 20px 110px; border:2px solid var(--blue-500); background:repeating-linear-gradient(135deg,var(--blue-25) 0 16px,#fff 16px 32px); display:flex; align-items:flex-end; padding:1rem; font-size:.85rem; color:var(--navy-800)}
.mh-spot-img span{background:#fff; border-radius:99px; padding:.1rem .8rem}
.mh-spot-kpis{display:flex; flex-wrap:wrap; margin-top:1.5rem}
.mh-spot-kpis div{margin:0 1.75rem 1rem 0}
.mh-spot-kpis strong{display:block; font-size:1.9rem; font-weight:700; color:var(--navy-500); letter-spacing:-0.03em; line-height:1.05}
.mh-spot-kpis span{font-size:.82rem; color:var(--muted)}
@media (max-width:991.98px){.mh-spot{grid-template-columns:1fr}}

/* ===== compare drawer ===== */
.mh-tray{position:fixed; left:0; right:0; bottom:0; z-index:40; background:var(--navy-500); color:#fff; padding:.9rem 0; transform:translateY(110%); transition:transform .25s ease}
.mh-tray.show{transform:translateY(0)}
.mh-tray .container{display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mh-tray-list{display:flex; flex-wrap:wrap; align-items:center; font-size:.88rem}
.mh-tray-chip{display:flex; align-items:center; background:rgba(255,255,255,.12); border-radius:99px; padding:.3rem .5rem .3rem .9rem; margin:.2rem .5rem .2rem 0}
.mh-tray-chip button{background:none; border:0; color:#fff; margin-left:.5rem; font-size:1rem; line-height:1; cursor:pointer; opacity:.75}
.mh-tray-chip button:hover{opacity:1}
.mh-tray-actions{display:flex; align-items:center}
.mh-tray-actions button{margin-left:.6rem}
.mh-cmp-btn{background:#fff; border:2px solid #fff; color:var(--navy-800)}
.mh-cmp-btn:hover{background:var(--blue-25); border-color:var(--blue-25)}
.mh-clear-tray{background:transparent; border:0; color:var(--blue-25); font:600 .85rem "Poppins",sans-serif; text-decoration:underline; text-underline-offset:3px; cursor:pointer}
.mh-pick{position:absolute; top:.8rem; left:.8rem}
.mh-pick label{display:flex; align-items:center; background:#fff; border-radius:8px; padding:.3rem .55rem; font-size:.76rem; font-weight:600; color:var(--navy-800); box-shadow:0 6px 14px rgba(40,50,111,.14); cursor:pointer}
.mh-pick input{margin-right:.4rem; width:1rem; height:1rem; accent-color:var(--navy-500)}
.mh-case.picked{outline:3px solid var(--navy-500); outline-offset:-3px}

/* compare modal table */
.mh-cmp-table th,.mh-cmp-table td{padding:.85rem 1rem; vertical-align:top; border-color:var(--line); font-size:.9rem}
.mh-cmp-table th[scope=row]{background:var(--slate-25); font-weight:600; color:var(--navy-700); width:26%}
.mh-cmp-table thead th{font-weight:700; color:var(--navy-500)}

/* ===== CTA ===== */
.mh-cta{background:var(--blue-25); border-radius:24px 24px 24px 90px; padding:clamp(1.75rem,4vw,3rem); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap}
.mh-cta h2{max-width:20ch; margin-bottom:.6rem}
.mh-cta p{color:var(--navy-800); margin:0; max-width:46ch}
@media (max-width:767.98px){.mh-cta .btn{margin-top:1.25rem}}

/* footer */
.mh-footer{padding:3.5rem 0 6rem; border-top:1px solid var(--line)}
.mh-footer img{height:40px; width:auto}
.mh-footer .tag{color:var(--muted); max-width:34ch; margin-top:1rem; font-size:.92rem}
.mh-footer h4{font-size:.95rem; font-weight:600; letter-spacing:0; margin-bottom:.8rem; color:var(--navy-800)}
.mh-footer ul{list-style:none; margin:0; padding:0}
.mh-footer li{margin-bottom:.4rem; font-size:.92rem}
.mh-footer li a{color:var(--muted); text-decoration:none}
.mh-footer li a:hover{color:var(--navy-500)}
.mh-legal{margin-top:2rem; padding-top:1.4rem; border-top:1px solid var(--line); color:var(--slate-800); font-size:.85rem}