/* ===== 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-600:#727781; --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; --orange-800:#ca7508;

  --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.5rem,2.8vw,2.05rem)}
h3{font-size:1.08rem; 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-lede{color:var(--muted); font-size:1.05rem; max-width:56ch}

.btn{font-weight:600; border-radius:12px; padding:.8rem 1.3rem; 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: yellow fields the team fills in ===== */
.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}}

.mh-crumb{background:transparent; padding:1.5rem 0 1.25rem; margin:0; font-size:.85rem}
.mh-crumb .breadcrumb-item a{color:var(--slate-800); text-decoration:none}
.mh-crumb .breadcrumb-item a:hover{color:var(--navy-500); text-decoration:underline}
.mh-crumb .breadcrumb-item.active{color:var(--navy-700); font-weight:500}

.mh-block{padding:clamp(2.5rem,5vw,4rem) 0; border-top:1px solid var(--line); scroll-margin-top:calc(var(--nav-h) + 8px)}
.mh-block.first{border-top:0; padding-top:0}
.mh-block > h2{max-width:26ch}
.mh-block > h2 + .mh-lede{margin-top:.9rem}
.mh-mt{margin-top:2rem}

/* ===== hero ===== */
.mh-hero h1{font-size:clamp(1.9rem,4.2vw,3.1rem); letter-spacing:-0.035em; line-height:1.12; max-width:26ch}
.mh-hero .mh-lede{margin-top:1.1rem; font-size:1.08rem}
.mh-meta{display:flex; flex-wrap:wrap; margin:1.5rem -.75rem 0}
.mh-meta > div{padding:0 .75rem; margin-bottom:.75rem; min-width:140px}
.mh-meta small{display:block; color:var(--slate-800); font-size:.75rem; font-weight:500}
.mh-meta strong{font-size:.92rem; font-weight:600; color:var(--navy-700)}
.mh-svc-chip{display:inline-flex; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:.15rem .7rem; font-size:.8rem; font-weight:500; margin:0 .35rem .35rem 0; color:var(--navy-800)}
.mh-svc-chip i{width:.55rem; height:.55rem; border-radius:50%; background:var(--dc); margin-right:.4rem}
.mh-cover{margin-top:1.75rem; aspect-ratio:21/9; border-radius:18px 18px 18px 90px; display:flex; align-items:flex-end; padding:1rem; font-size:.85rem; color:var(--navy-800); background:repeating-linear-gradient(135deg,var(--blue-25) 0 16px,#fff 16px 32px); border:1.5px solid var(--blue-500)}
.mh-cover span{background:#fff; border-radius:99px; padding:.1rem .8rem}
.mh-kpis{display:grid; grid-template-columns:repeat(3,1fr); gap:.75rem; margin-top:1.25rem}
.mh-kpi{border-top:4px solid var(--kc); padding-top:.7rem}
.mh-kpi strong{display:block; font-size:clamp(1.7rem,3.2vw,2.3rem); font-weight:700; line-height:1.05; letter-spacing:-0.04em; color:var(--navy-500)}
.mh-kpi span{font-size:.85rem; color:var(--muted); line-height:1.4; display:block; margin-top:.2rem}
@media (max-width:575.98px){.mh-kpis{grid-template-columns:1fr}}

/* ===== persona + checker ===== */
.mh-persona{background:var(--slate-25); border:1px solid var(--line); border-radius:16px 16px 16px 56px; padding:1.4rem; height:100%}
.mh-persona .who{display:flex; align-items:center; margin-bottom:1rem}
.mh-persona .av{width:64px; height:64px; border-radius:50%; background:var(--blue-25); color:var(--blue-800); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; flex:none; margin-right:1rem}
.mh-persona .av svg{width:80%; height:auto}
.mh-persona h3{margin:0; font-size:1.05rem}
.mh-persona .who p{margin:0; font-size:.85rem; color:var(--muted)}
.mh-persona dl{margin:0}
.mh-persona dt{font-size:.75rem; font-weight:600; color:var(--slate-800); margin-top:.7rem}
.mh-persona dd{margin:0; font-size:.9rem; color:var(--navy-800); line-height:1.5}
.mh-chk{border:1.5px solid var(--navy-500); border-radius:16px 16px 16px 56px; padding:1.4rem; height:100%; background:#fff}
.mh-chk h3{font-size:1.1rem; margin-bottom:.9rem}
.mh-chk label{display:flex; align-items:flex-start; border:1.5px solid var(--line); border-radius:12px; padding:.6rem .85rem; margin-bottom:.5rem; font-size:.88rem; line-height:1.45; cursor:pointer; transition:border-color .15s,background-color .15s}
.mh-chk input{margin:.25rem .7rem 0 0; accent-color:var(--navy-500); flex:none; width:1rem; height:1rem}
.mh-chk label:has(input:checked){border-color:var(--navy-500); background:var(--blue-25)}
.mh-meter{display:flex; margin:.9rem 0 .5rem}
.mh-meter i{flex:1; height:8px; border-radius:99px; background:var(--slate-25); margin-right:4px; transition:background-color .3s}
.mh-meter i:last-child{margin-right:0}
.mh-meter i.on{background:var(--green-500)}
.mh-chk-msg{font-size:.9rem; font-weight:500; color:var(--navy-700); margin:0 0 .6rem; min-height:2.6em; line-height:1.5}
.mh-chk .btn{padding:.55rem 1.05rem; font-size:.88rem}

/* ===== snapshot ===== */
.mh-snap{border:1px solid var(--line); border-top:5px solid var(--sc); border-radius:14px; padding:1.2rem; height:100%}
.mh-snap h3{margin-bottom:.5rem}
.mh-snap p{margin:0; font-size:.92rem; color:var(--muted); line-height:1.6}

/* ===== journey ===== */
.mh-curve-wrap{overflow-x:auto; margin-top:2rem; padding-bottom:.5rem}
.mh-curve-in{min-width:620px}
.mh-curve-svg{width:100%; height:auto; display:block; overflow:visible}
.mh-curve{stroke-dasharray:1; stroke-dashoffset:1; transition:stroke-dashoffset 2.2s cubic-bezier(.4,0,.2,1)}
.mh-curve.in{stroke-dashoffset:0}
.mh-dot{opacity:0; transition:opacity .5s}
.mh-dot.in{opacity:1}
@media (prefers-reduced-motion:reduce){.mh-curve{stroke-dashoffset:0; transition:none}.mh-dot{opacity:1; transition:none}}
.mh-stages{display:grid; grid-template-columns:repeat(6,1fr); text-align:center; font-size:.78rem; font-weight:600; color:var(--navy-700); margin-top:.25rem}
.mh-tl{list-style:none; margin:2.25rem 0 0; padding:0}
.mh-tl li{position:relative; padding:0 0 2rem 4.25rem}
.mh-tl li::before{content:""; position:absolute; left:23px; top:50px; bottom:0; width:3px; background:var(--line)}
.mh-tl li:last-child::before{display:none}
.mh-tl .n{position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:#fff; border:4px solid var(--sc); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--navy-700)}
.mh-tl h3{margin:.15rem 0 .4rem; font-size:1.2rem}
.mh-tl p{color:var(--muted); font-size:.95rem; margin:0 0 .7rem; max-width:60ch}
.mh-tl .did{font-size:.8rem; font-weight:600; color:var(--navy-700); margin-right:.5rem}
.mh-feel{display:inline-block; font-size:.78rem; font-weight:600; border-radius:99px; padding:.1rem .8rem; background:var(--fc); color:var(--navy-900); margin-top:.5rem}

/* ===== what we built ===== */
.mh-built{border:1px solid var(--line); border-top:5px solid var(--pc); border-radius:14px; padding:1.25rem; height:100%; background:#fff}
.mh-built h3{margin-bottom:.4rem}
.mh-built p{font-size:.9rem; color:var(--muted); line-height:1.6; margin:0 0 .8rem}
.mh-built ul{list-style:none; margin:0; padding:0}
.mh-built li{position:relative; padding-left:1rem; font-size:.88rem; margin-bottom:.25rem; line-height:1.5}
.mh-built li::before{content:""; position:absolute; left:0; top:.6em; width:.42rem; height:.42rem; border-radius:50%; background:var(--pc)}

/* ===== before / after slider ===== */
.mh-cmp{--pos:50%; position:relative; aspect-ratio:16/9; max-width:960px; margin-left:auto; margin-right:auto; border-radius:16px 16px 16px 72px; overflow:hidden; border:1px solid var(--line); user-select:none; -webkit-user-select:none}
.mh-cmp:focus-within{outline:3px solid var(--blue-500); outline-offset:3px}
.mh-cmp .layer{position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-size:.9rem; color:var(--navy-800)}
.mh-cmp .before{background:repeating-linear-gradient(135deg,#E3E4E8 0 14px,#F4F4F6 14px 28px)}
.mh-cmp .after{background:repeating-linear-gradient(135deg,var(--cyan-25) 0 14px,#fff 14px 28px); clip-path:inset(0 0 0 var(--pos))}
.mh-cmp .lab{position:absolute; top:.9rem; background:#fff; border-radius:99px; padding:.1rem .8rem; font-size:.78rem; font-weight:600; color:var(--navy-700)}
.mh-cmp .lab.l{left:.9rem} .mh-cmp .lab.r{right:.9rem}
.mh-cmp .line{position:absolute; top:0; bottom:0; left:var(--pos); width:3px; margin-left:-1.5px; background:#fff; box-shadow:0 0 0 1px rgba(40,50,111,.25)}
.mh-cmp .line::after{content:"\2194"; position:absolute; top:50%; left:50%; width:38px; height:38px; margin:-19px 0 0 -19px; border-radius:50%; background:var(--navy-500); color:#fff; display:flex; align-items:center; justify-content:center; font-size:1rem}
.mh-cmp input{position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0}
.mh-hint{font-size:.82rem; color:var(--slate-800); margin-top:.6rem}

/* ===== results ===== */
.mh-metric{border:1px solid var(--line); border-radius:14px; padding:1.15rem 1.2rem; height:100%; background:#fff}
.mh-metric h3{font-size:1rem; margin-bottom:.9rem}
.mh-mrow{display:flex; align-items:center; margin-bottom:.55rem}
.mh-mrow .k{width:52px; font-size:.75rem; font-weight:600; color:var(--slate-800); flex:none}
.mh-bar{flex:1; height:12px; border-radius:99px; background:var(--slate-25); overflow:hidden}
.mh-bar i{display:block; height:100%; border-radius:99px}
.mh-bar.b i{width:var(--b); background:var(--slate-200)}
.mh-bar.a i{width:0; background:var(--green-500); transition:width 1.3s cubic-bezier(.2,.9,.2,1) .2s}
.mh-metric.in .mh-bar.a i{width:var(--a)}
@media (prefers-reduced-motion:reduce){.mh-bar.a i{width:var(--a); transition:none}}
.mh-mrow .v{width:76px; text-align:right; font-weight:700; font-size:.95rem; color:var(--navy-700); flex:none; margin-left:.6rem}
.mh-src{font-size:.82rem; color:var(--slate-800); margin-top:1rem}

/* ===== quote ===== */
.mh-testi{background:var(--navy-500); color:#fff; border-radius:16px 16px 16px 72px; padding:clamp(1.5rem,3.5vw,2.25rem); margin:0; display:flex; align-items:flex-start}
.mh-testi .av{width:72px; height:72px; border-radius:50%; background:var(--navy-400); color:var(--blue-25); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; flex:none; margin-right:1.25rem}
.mh-testi .av svg{width:82%; height:auto}
.mh-testi .tag{display:inline-block; font-size:.72rem; padding:.1rem .6rem; border-radius:99px; background:var(--orange-25); color:var(--navy-800); margin-bottom:.7rem}
.mh-testi blockquote{margin:0; font-size:clamp(1.1rem,2.2vw,1.45rem); font-weight:600; line-height:1.4}
.mh-testi figcaption{margin-top:.9rem; font-size:.88rem; color:var(--blue-25)}
@media (max-width:575.98px){.mh-testi{display:block}.mh-testi .av{margin-bottom:1rem}}

/* ===== advice ===== */
.mh-tip{height:100%; border-left:4px solid var(--tc); padding:.2rem 0 .2rem 1.1rem}
.mh-tip h3{margin-bottom:.35rem}
.mh-tip p{margin:0; font-size:.9rem; color:var(--muted); line-height:1.6}

/* ===== related ===== */
.mh-rel{display:block; height:100%; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:14px; padding:1rem; transition:transform .15s, box-shadow .15s}
.mh-rel:hover{transform:translateY(-3px); box-shadow:0 12px 26px rgba(40,50,111,.10); color:inherit; text-decoration:none}
.mh-rel .m{aspect-ratio:16/9; border-radius:8px 8px 8px 32px; background:repeating-linear-gradient(135deg,var(--slate-25) 0 12px,#fff 12px 24px); display:flex; align-items:center; justify-content:center; font-size:.78rem; color:var(--slate-800); margin-bottom:.8rem}
.mh-rel small{color:var(--slate-800); font-size:.78rem}
.mh-rel h3{font-size:1rem; margin:.15rem 0 .5rem}
.mh-rel span{font-weight:600; font-size:.83rem; color:var(--navy-700)}

/* ===== closing ===== */
.mh-close{background:var(--navy-500); color:#fff; border-radius:20px 20px 20px 72px; padding:clamp(1.5rem,4vw,2.5rem)}
.mh-close h2{color:#fff; max-width:20ch}
.mh-close p{color:var(--blue-25); margin:.9rem 0 1.4rem; max-width:48ch}


/* ===== live "how they feel now" card ===== */
.mh-mood{position:sticky; top:calc(var(--nav-h) + 1.25rem); background:#fff; border:1px solid var(--line); border-top:5px solid var(--mc); border-radius:16px 16px 16px 48px; padding:1.25rem 1.25rem 1.5rem; margin-top:.5rem; box-shadow:0 14px 34px rgba(40,50,111,.08); transition:border-color .4s}
.mh-mood .who{display:flex; align-items:center; margin-bottom:1rem}
.mh-mood .av{width:52px; height:52px; border-radius:50%; background:var(--blue-25); color:var(--blue-800); display:flex; align-items:flex-end; justify-content:center; overflow:hidden; flex:none; margin-right:.85rem}
.mh-mood .av svg{width:80%; height:auto}
.mh-mood .who strong{display:block; font-size:.95rem; color:var(--navy-700); line-height:1.3}
.mh-mood .who small{color:var(--slate-800); font-size:.78rem}
.mh-mood .feel{display:flex; align-items:center; font-size:1.5rem; font-weight:700; letter-spacing:-0.02em; color:var(--navy-500)}
.mh-mood .feel i{width:1rem; height:1rem; border-radius:50%; background:var(--mc); margin-right:.7rem; flex:none; transition:background-color .4s}
.mh-mood .st{color:var(--muted); font-size:.85rem; margin:.5rem 0 1rem; line-height:1.45}
.mh-mood .mh-meter{margin:0}
.mh-mood .mh-meter i.on{background:var(--mc)}

/* ===== form at the very bottom ===== */
.mh-formsec{background:var(--navy-500); color:#fff; padding:clamp(3.5rem,8vw,6rem) 0; scroll-margin-top:calc(var(--nav-h) + 8px)}
.mh-formsec h2{color:#fff; max-width:16ch; font-size:clamp(1.9rem,3.6vw,2.7rem)}
.mh-formsec .lede{color:var(--blue-25); margin-top:1.1rem; max-width:44ch; font-size:1.08rem}
.mh-formsec .mh-points{border-top:1px solid var(--navy-300); color:var(--blue-25); font-size:.92rem; margin-top:1.75rem}
.mh-form{background:#fff; color:var(--ink); border-radius:24px 24px 24px 90px; padding:clamp(1.5rem,3vw,2.1rem)}
.mh-form h3{font-size:1.3rem; margin-bottom:.35rem}
.mh-form .sub{color:var(--muted); font-size:.9rem; margin-bottom:1.1rem; line-height:1.55}
.mh-form label{font-weight:600; font-size:.82rem; margin-bottom:.25rem}
.mh-form .form-control,.mh-form .custom-select{border:1.5px solid var(--line); border-radius:10px; font-size:.92rem; padding:.65rem .9rem; height:auto; color:var(--ink)}
.mh-form .form-control:focus,.mh-form .custom-select:focus{border-color:var(--blue-500); box-shadow:0 0 0 3px rgba(36,144,234,.25)}
.mh-note{font-size:.82rem; color:var(--slate-800); min-height:1.3em; margin:.7rem 0 0; line-height:1.4}
.mh-points{list-style:none; margin:1rem 0 0; padding:1rem 0 0; border-top:1px solid var(--line); font-size:.82rem; color:var(--muted)}
.mh-points li{display:flex; align-items:center; margin-bottom:.35rem}
.mh-points li::before{content:""; width:.5rem; height:.5rem; border-radius:50%; background:var(--dc); margin-right:.6rem; flex:none}

/* ===== footer ===== */
.mh-footer{padding:3rem 0 5.5rem; 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:.9rem}
.mh-footer h4{font-size:.92rem; font-weight:600; letter-spacing:0; margin-bottom:.7rem; color:var(--navy-800)}
.mh-footer ul{list-style:none; margin:0; padding:0}
.mh-footer li{margin-bottom:.35rem; font-size:.9rem}
.mh-footer li a{color:var(--muted); text-decoration:none}
.mh-footer li a:hover{color:var(--navy-500)}
.mh-legal{margin-top:1.5rem; padding-top:1.2rem; border-top:1px solid var(--line); color:var(--slate-800); font-size:.82rem}
@media (min-width:992px){.mh-footer{padding-bottom:2.5rem}}
.mh-mobilebar{position:fixed; left:0; right:0; bottom:0; z-index:30; background:rgba(255,255,255,.97); border-top:1px solid var(--line); padding:.7rem 1rem; display:none}
@media (max-width:991.98px){.mh-mobilebar{display:block}}