/* ===== 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;
  --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 ===== */
.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:16ch}
.mh-hero .mh-lede{margin-top:1.4rem; font-size:1.15rem}
.mh-badges{display:flex; flex-wrap:wrap; margin-top:1.75rem}
.mh-badge2{display:inline-flex; align-items:center; background:#fff; border:1.5px solid var(--line); border-radius:99px; padding:.5rem 1.05rem; font-size:.88rem; font-weight:500; color:var(--navy-800); margin:0 .6rem .6rem 0}
.mh-badge2 i{width:.6rem; height:.6rem; border-radius:50%; background:var(--bc); margin-right:.6rem; flex:none}

/* ===== quick channels ===== */
.mh-chan{display:block; height:100%; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-top:5px solid var(--pc); border-radius:16px; padding:1.4rem 1.3rem; transition:transform .15s, box-shadow .15s}
.mh-chan:hover{transform:translateY(-4px); box-shadow:0 16px 34px rgba(40,50,111,.10); color:inherit; text-decoration:none}
.mh-chan .ic{width:44px; height:44px; border-radius:50%; background:var(--pt); color:var(--pc); display:flex; align-items:center; justify-content:center; margin-bottom:1rem}
.mh-chan .ic svg{width:22px; height:22px}
.mh-chan h3{margin-bottom:.35rem}
.mh-chan p{color:var(--muted); font-size:.9rem; margin:0 0 .6rem; line-height:1.5}
.mh-chan span{font-weight:600; font-size:.85rem; color:var(--navy-700)}

/* ===== router chips (what's going on) ===== */
.mh-router{display:flex; flex-wrap:wrap; margin-top:1.25rem}
.mh-ropt{display:flex; align-items:center; background:#fff; border:1.5px solid var(--line); color:var(--navy-800); border-radius:99px; padding:.55rem 1.1rem; font:500 .9rem "Poppins",sans-serif; margin:0 .55rem .6rem 0; cursor:pointer; transition:border-color .15s, background-color .15s}
.mh-ropt i{width:.6rem; height:.6rem; border-radius:50%; background:var(--rc); margin-right:.55rem; flex:none}
.mh-ropt:hover{border-color:var(--rc)}
.mh-ropt[aria-pressed="true"]{background:var(--navy-500); border-color:var(--navy-500); color:#fff}
.mh-rnote{background:var(--slate-25); border-radius:12px; padding:.85rem 1.1rem; font-size:.9rem; color:var(--navy-800); margin-top:1rem; min-height:2.6em}
.mh-rnote b{font-weight:600}

/* ===== form + info panel ===== */
.mh-form{background:#fff; border:1px solid var(--line); border-radius:20px 20px 20px 90px; padding:clamp(1.5rem,3vw,2.25rem); box-shadow:0 14px 34px rgba(40,50,111,.08)}
.mh-form label{font-weight:600; font-size:.85rem; margin-bottom:.3rem}
.mh-form .form-control,.mh-form .custom-select{border:1.5px solid var(--line); border-radius:10px; font-size:.93rem; padding:.7rem .95rem; 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:.85rem; color:var(--slate-800); min-height:1.3em; margin:.75rem 0 0; line-height:1.4}
.mh-panel{background:var(--navy-500); color:#fff; border-radius:20px 20px 20px 90px; padding:clamp(1.5rem,3vw,2.25rem); height:100%}
.mh-panel h3{color:#fff; margin-bottom:1.25rem}
.mh-pline{display:flex; margin-bottom:1.1rem}
.mh-pline .ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; margin-right:.9rem; flex:none}
.mh-pline .ic svg{width:18px; height:18px; color:#fff}
.mh-pline strong{display:block; font-size:.78rem; color:var(--blue-25); font-weight:600; text-transform:uppercase; letter-spacing:.03em}
.mh-pline span,.mh-pline a{display:block; color:#fff; font-size:.95rem; text-decoration:none}
.mh-pline a:hover{text-decoration:underline}
.mh-social{display:flex; margin-top:1.5rem; padding-top:1.4rem; border-top:1px solid var(--navy-300)}
.mh-social a{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.12); display:flex; align-items:center; justify-content:center; color:#fff; margin-right:.6rem; text-decoration:none; font-size:.78rem; font-weight:700}
.mh-social a:hover{background:rgba(255,255,255,.24); color:#fff}

/* ===== offices ===== */
.mh-office{background:#fff; border:1px solid var(--line); border-radius:16px; overflow:hidden; height:100%}
.mh-office .map{aspect-ratio:16/9; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--navy-800); background:repeating-linear-gradient(135deg,var(--blue-25) 0 14px,#fff 14px 28px); border-bottom:1px solid var(--line)}
.mh-office .body{padding:1.25rem 1.3rem 1.4rem}
.mh-office .tag2{display:inline-block; font-size:.72rem; font-weight:600; padding:.1rem .65rem; border-radius:99px; background:var(--green-25); color:var(--navy-800); margin-bottom:.6rem}
.mh-office h3{margin-bottom:.4rem}
.mh-office address{font-style:normal; color:var(--muted); font-size:.9rem; margin:0 0 .8rem; line-height:1.55}
.mh-office .row2{display:flex; justify-content:space-between; align-items:center; font-size:.86rem}
.mh-office .row2 a{font-weight:600}

/* ===== what happens next ===== */
.mh-proc{list-style:none; margin:2rem 0 0; padding:0}
.mh-proc li{position:relative; padding:0 0 1.75rem 4rem}
.mh-proc li::before{content:""; position:absolute; left:23px; top:48px; bottom:0; width:3px; background:var(--line)}
.mh-proc li:last-child::before{display:none}
.mh-proc .n{position:absolute; left:0; top:0; width:48px; height:48px; border-radius:50%; background:#fff; border:3px solid var(--sc); display:flex; align-items:center; justify-content:center; font-weight:700; color:var(--navy-700)}
.mh-proc h3{margin:.2rem 0 .3rem}
.mh-proc p{margin:0; color:var(--muted); font-size:.93rem; max-width:56ch}

/* ===== team you'll talk to ===== */
.mh-person{height:100%; text-align:center; background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.4rem 1.1rem}
.mh-photo{width:88px; height:88px; margin:0 auto 1rem; border-radius:50%; background:var(--pt); color:var(--pc); display:flex; align-items:flex-end; justify-content:center; overflow:hidden}
.mh-photo svg{width:78%; height:auto}
.mh-person h3{margin-bottom:.1rem; font-size:1.05rem}
.mh-person .role{font-weight:500; color:var(--navy-700); font-size:.86rem; margin:0 0 .6rem}
.mh-person .bio{color:var(--muted); font-size:.86rem; margin:0; line-height:1.5}

/* ===== faq ===== */
.mh-faq .card{border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent}
.mh-faq .card:first-child{border-top:1px solid var(--line)}
.mh-faq .card-header{background:transparent; border:0; padding:0}
.mh-faq .btn-link{width:100%; display:flex; justify-content:space-between; align-items:center; text-align:left; color:var(--navy-800); font-weight:600; font-size:.98rem; text-decoration:none; padding:1.05rem 0; border-radius:0; white-space:normal}
.mh-faq .btn-link:hover{transform:none; color:var(--primary)}
.mh-faq .btn-link::after{content:"+"; font-size:1.4rem; line-height:1; margin-left:1rem; transition:transform .2s; flex:none}
.mh-faq .btn-link:not(.collapsed)::after{transform:rotate(45deg)}
.mh-faq .card-body{padding:0 0 1.15rem; color:var(--muted); font-size:.92rem; max-width:64ch}

/* ===== other reasons ===== */
.mh-alt{display:block; height:100%; text-decoration:none; color:inherit; background:#fff; border:1px solid var(--line); border-radius:16px; padding:1.3rem; transition:transform .15s, box-shadow .15s}
.mh-alt:hover{transform:translateY(-3px); box-shadow:0 14px 30px rgba(40,50,111,.10); color:inherit; text-decoration:none}
.mh-alt h3{margin-bottom:.35rem}
.mh-alt p{color:var(--muted); font-size:.88rem; margin:0 0 .7rem; line-height:1.55}
.mh-alt span{font-weight:600; font-size:.85rem; color:var(--navy-700)}

/* footer */
.mh-footer{padding:3.5rem 0 2rem; 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}