/* ===== 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-600:#232b60; --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;
  --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; --chap-h:50px;
}
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.8rem,3.6vw,2.7rem)}
h3{font-size:1.15rem; 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(3.5rem,8vw,6rem) 0; scroll-margin-top:calc(var(--nav-h) + var(--chap-h) + 4px)}
.mh-soft{background:var(--slate-25)}
.mh-lede{color:var(--muted); font-size:1.1rem; max-width:54ch}
.mh-head{max-width:20ch}
.mh-head + .mh-lede{margin-top:1rem}
.mh-mt{margin-top:2.5rem}

.btn{font-weight:600; border-radius:12px; padding:.85rem 1.4rem; 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)}

/* ===== 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}}

/* ===== chapter nav + scroll progress ===== */
.mh-chap{position:sticky; top:var(--nav-h); z-index:5; background:rgba(255,255,255,.96); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); height:var(--chap-h)}
.mh-chap .container{display:flex; align-items:center; height:100%; overflow-x:auto; white-space:nowrap; -webkit-overflow-scrolling:touch}
.mh-chap a{display:inline-flex; align-items:center; height:100%; padding:0 1rem; font-size:.86rem; font-weight:500; color:var(--slate-800); text-decoration:none; border-bottom:3px solid transparent; margin-bottom:-1px}
.mh-chap a b{display:inline-flex; align-items:center; justify-content:center; width:1.35rem; height:1.35rem; border-radius:50%; background:var(--slate-25); color:var(--navy-700); font-size:.72rem; margin-right:.5rem}
.mh-chap a:hover{color:var(--navy-500)}
.mh-chap a.is-active{color:var(--navy-700); font-weight:600; border-bottom-color:var(--navy-500)}
.mh-chap a.is-active b{background:var(--navy-500); color:#fff}
.mh-prog{position:absolute; left:0; bottom:-1px; height:3px; width:0; background:linear-gradient(90deg,var(--p-design),var(--p-video),var(--p-tech),var(--p-mkt))}

/* ===== hero ===== */
.mh-hero{padding:clamp(2.5rem,6vw,4.5rem) 0 clamp(3rem,7vw,5.5rem)}
.mh-hero h1{font-size:clamp(2.1rem,5vw,3.7rem); letter-spacing:-0.035em; line-height:1.08; max-width:16ch}
.mh-hero .mh-lede{margin-top:1.5rem; font-size:1.18rem}
.mh-hero-cta{margin-top:2rem}
.mh-hero-cta .btn{margin:0 .75rem .75rem 0}
.mh-quad{display:grid; grid-template-columns:1fr 1fr; gap:8px; max-width:460px; margin-left:auto}
.mh-qt{position:relative; aspect-ratio:1/1; display:flex; align-items:flex-end; padding:.8rem; font-size:.78rem; font-weight:500; color:var(--navy-800);
  background:repeating-linear-gradient(135deg,var(--t) 0 14px,#fff 14px 28px); border:2px solid var(--c);
  animation:mh-settle 1.3s cubic-bezier(.16,1,.3,1) both; animation-delay:var(--d)}
.mh-qt:nth-child(1){border-radius:100% 12px 12px 12px}
.mh-qt:nth-child(2){border-radius:12px 100% 12px 12px; justify-content:flex-end}
.mh-qt:nth-child(3){border-radius:12px 12px 12px 100%}
.mh-qt:nth-child(4){border-radius:12px 12px 100% 12px; justify-content:flex-end}
.mh-qt span{background:#fff; border-radius:99px; padding:.1rem .65rem}
@keyframes mh-settle{from{transform:translate(var(--x),var(--y)) rotate(var(--r)); opacity:.2} to{transform:none; opacity:1}}
@media (prefers-reduced-motion:reduce){.mh-qt{animation:none}}
@media (max-width:991.98px){.mh-quad{margin:2.5rem auto 0}}

/* ===== story diagram ===== */
.mh-story p{color:var(--muted); font-size:1.05rem; margin-bottom:1rem; max-width:52ch}
.mh-story p strong{color:var(--navy-700); font-weight:600}
.mh-pull{margin:1.5rem 0 0; padding-left:1.25rem; border-left:4px solid var(--primary); font-size:1.15rem; font-weight:600; line-height:1.45; color:var(--navy-500); letter-spacing:-0.01em}
.mh-pull cite{display:block; margin-top:.5rem; font-size:.85rem; font-weight:400; color:var(--muted); font-style:normal}
.mh-demo{background:var(--slate-25); border:1px solid var(--line); border-radius:20px 20px 20px 72px; padding:1.25rem 1.25rem 1.5rem}
.mh-toggle{display:flex; background:#fff; border:1px solid var(--line); border-radius:99px; padding:4px; width:fit-content; margin:0 auto}
.mh-toggle button{border:0; background:transparent; font:600 .85rem "Poppins",sans-serif; color:var(--slate-800); padding:.5rem 1.1rem; border-radius:99px; cursor:pointer; transition:background-color .2s,color .2s}
.mh-toggle button[aria-pressed="true"]{background:var(--navy-500); color:#fff}
.mh-demo svg{width:100%; height:auto; display:block; margin-top:.5rem; overflow:visible}
.node{transform:translate(var(--vx),var(--vy)); transition:transform .95s cubic-bezier(.2,.9,.2,1)}
.is-team .node{transform:none}
.gap{opacity:1; transition:opacity .4s}
.is-team .gap{opacity:0}
.ring,.core{opacity:0; transition:opacity .6s .35s}
.is-team .ring,.is-team .core{opacity:1}
@media (prefers-reduced-motion:reduce){.node,.gap,.ring,.core{transition:none}}
.mh-demo-cap{text-align:center; font-weight:600; color:var(--navy-700); font-size:.98rem; margin:.4rem 0 0; min-height:1.6em}
.mh-demo-sub{text-align:center; color:var(--muted); font-size:.85rem; margin:0}

/* ===== mission / vision ===== */
.mh-mv{border-radius:20px 20px 20px 80px; padding:clamp(1.75rem,4vw,2.75rem); height:100%}
.mh-mv.m{background:var(--navy-500); color:#fff}
.mh-mv.v{background:#fff; border:1.5px solid var(--navy-500)}
.mh-mv small{display:block; font-weight:600; font-size:.85rem; margin-bottom:.9rem}
.mh-mv.m small{color:var(--blue-25)} .mh-mv.v small{color:var(--slate-800)}
.mh-mv p{font-size:clamp(1.2rem,2.4vw,1.65rem); font-weight:600; line-height:1.4; letter-spacing:-0.015em; margin:0}
.mh-mv.v p{color:var(--navy-500)}

/* ===== beliefs accordion ===== */
.mh-bel .card{border:0; border-bottom:1px solid var(--line); border-radius:0; background:transparent}
.mh-bel .card:first-child{border-top:1px solid var(--line)}
.mh-bel .card-header{background:transparent; border:0; padding:0}
.mh-bel .btn-link{width:100%; display:flex; align-items:center; text-align:left; color:var(--navy-500); font-weight:700; font-size:clamp(1.1rem,2.2vw,1.55rem); letter-spacing:-0.02em; text-decoration:none; padding:1.35rem 0; border-radius:0; white-space:normal; line-height:1.25}
.mh-bel .btn-link:hover{transform:none; color:var(--primary)}
.mh-bel .btn-link i{width:.85rem; height:.85rem; border-radius:50%; background:var(--bc); margin-right:1rem; flex:none}
.mh-bel .btn-link::after{content:"+"; margin-left:auto; padding-left:1rem; font-size:1.7rem; font-weight:400; line-height:1; transition:transform .2s; flex:none}
.mh-bel .btn-link:not(.collapsed)::after{transform:rotate(45deg)}
.mh-bel .card-body{padding:0 0 1.5rem 1.85rem; color:var(--muted); font-size:1rem; max-width:64ch}
.mh-bel .card-body b{color:var(--navy-700); font-weight:600}

/* ===== timeline ===== */
.mh-tl-nav button{width:44px; height:44px; border-radius:50%; border:1.5px solid var(--navy-500); background:#fff; color:var(--navy-500); font-size:1.1rem; cursor:pointer; margin-left:.5rem; transition:background-color .15s,color .15s}
.mh-tl-nav button:hover{background:var(--navy-500); color:#fff}
.mh-tl{display:flex; overflow-x:auto; scroll-snap-type:x mandatory; padding:.5rem 0 1rem; -webkit-overflow-scrolling:touch; scrollbar-width:thin}
.mh-tl-item{flex:0 0 min(300px,78vw); scroll-snap-align:start; position:relative; padding:2.25rem 1.5rem 0 0}
.mh-tl-item::before{content:""; position:absolute; left:0; right:0; top:11px; height:3px; background:var(--line)}
.mh-tl-item::after{content:""; position:absolute; left:0; top:0; width:26px; height:26px; border-radius:50%; background:#fff; border:5px solid var(--tc)}
.mh-tl-item .yr{font-weight:700; color:var(--navy-500); font-size:1.05rem; margin-bottom:.25rem}
.mh-tl-item p{color:var(--muted); font-size:.93rem; margin:.3rem 0 0}
.mh-hint{font-size:.85rem; color:var(--slate-800)}

/* ===== team ===== */
.mh-badge{display:inline-block; font-size:.78rem; padding:.15rem .75rem; border-radius:99px; background:var(--orange-25); color:var(--navy-800)}
.mh-person{height:100%; transition:transform .2s}
.mh-person:hover{transform:translateY(-4px)}
.mh-photo{aspect-ratio:1/1; background:var(--pt); border-radius:18px 18px 18px 72px; display:flex; align-items:flex-end; justify-content:center; overflow:hidden; color:var(--pc); margin-bottom:1rem}
.mh-photo svg{width:78%; height:auto; display:block}
.mh-person h3{margin-bottom:.1rem; font-size:1.15rem}
.mh-person .role{font-weight:500; color:var(--navy-700); font-size:.9rem; margin:0 0 .5rem}
.mh-person .bio{color:var(--muted); font-size:.9rem; margin:0 0 .5rem; line-height:1.55}
.mh-person .ask{font-size:.82rem; color:var(--slate-800); margin:0}
.mh-person .ask b{color:var(--navy-700); font-weight:600}
.mh-bar{display:flex; border-radius:14px; overflow:hidden; margin-top:1rem}
.mh-bar div{flex:1; padding:.85rem 1rem; font-size:.85rem; font-weight:600; color:var(--navy-900); background:var(--bt)}
.mh-bar div span{display:block; font-weight:400; font-size:.78rem; color:var(--navy-800)}
@media (max-width:575.98px){.mh-bar{flex-wrap:wrap}.mh-bar div{flex:1 1 50%}}

/* ===== what we do ===== */
.mh-pill{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.25rem 1.25rem; transition:transform .15s, box-shadow .15s}
.mh-pill:hover{transform:translateY(-4px); box-shadow:0 14px 30px rgba(40,50,111,.10); color:inherit; text-decoration:none}
.mh-pill h3{margin-bottom:.4rem}
.mh-pill p{color:var(--muted); font-size:.9rem; margin:0 0 .8rem; line-height:1.55}
.mh-pill span{font-weight:600; font-size:.85rem; color:var(--navy-700)}

/* ===== how we work ===== */
.mh-4d{position:relative}
.mh-4d-i{margin-bottom:1.75rem}
.mh-4d-i .n{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); position:relative; z-index:1}
.mh-4d-i h3{margin:1rem 0 .4rem}
.mh-4d-i p{color:var(--muted); font-size:.93rem; margin:0}
@media (min-width:992px){.mh-4d::before{content:""; position:absolute; top:23px; left:40px; right:40px; height:3px; background:linear-gradient(90deg,var(--p-design),var(--p-video),var(--p-tech),var(--p-mkt))}}

/* ===== proof ===== */
.mh-stat{border-top:4px solid var(--sc); padding-top:1rem}
.mh-stat strong{display:block; font-size:clamp(2.2rem,4.5vw,3.3rem); font-weight:700; line-height:1.05; letter-spacing:-0.04em; color:var(--navy-500)}
.mh-stat span{color:var(--muted); font-size:.92rem}
.mh-slot{border:1.5px dashed var(--slate-200); border-radius:10px; height:56px; display:flex; align-items:center; justify-content:center; font-size:.8rem; color:var(--slate-800); margin-top:1rem; background:#fff}
.mh-q{background:#fff; border:1px solid var(--line); border-radius:20px; padding:clamp(1.5rem,3vw,2.1rem); height:100%; margin:0}
.mh-q.big{border-radius:20px 20px 20px 90px; display:flex; flex-direction:column; justify-content:space-between; background:var(--navy-500); border-color:var(--navy-500)}
.mh-q blockquote{margin:0; font-weight:600; font-size:1.05rem; line-height:1.5; letter-spacing:-0.01em; color:var(--navy-700)}
.mh-q.big blockquote{font-size:clamp(1.3rem,2.6vw,1.85rem); line-height:1.35; color:#fff}
.mh-q figcaption{margin-top:1.1rem; color:var(--slate-800); font-size:.88rem}
.mh-q.big figcaption{color:var(--blue-25)}
.mh-q .tag{display:inline-block; font-size:.72rem; padding:.1rem .6rem; border-radius:99px; background:var(--orange-25); color:var(--navy-800); margin-bottom:1rem}

/* ===== culture ===== */
.mh-mosaic{display:grid; grid-template-columns:repeat(6,1fr); grid-auto-rows:88px; gap:8px}
.mh-ph{display:flex; align-items:flex-end; padding:.6rem .8rem; font-size:.75rem; font-weight:500; color:var(--navy-800); border-radius:14px; background:repeating-linear-gradient(135deg,var(--t) 0 12px,#fff 12px 24px); border:1.5px solid var(--c)}
.mh-ph span{background:#fff; border-radius:99px; padding:.05rem .6rem}
.mh-ph.a{grid-column:span 4; grid-row:span 2; border-radius:14px 14px 14px 72px}
.mh-ph.b{grid-column:span 2; grid-row:span 1}
.mh-ph.c{grid-column:span 2; grid-row:span 1}
.mh-ph.d{grid-column:span 3; grid-row:span 1}
.mh-ph.e{grid-column:span 3; grid-row:span 1; border-radius:14px 72px 14px 14px}
.mh-life{list-style:none; margin:1.5rem 0 0; padding:0}
.mh-life li{position:relative; padding-left:1.6rem; margin-bottom:.7rem; color:var(--muted)}
.mh-life li strong{color:var(--navy-700); font-weight:600}
.mh-life li::before{content:""; position:absolute; left:0; top:.55em; width:.7rem; height:.7rem; border-radius:50%; background:var(--lc)}

/* ===== industries ===== */
.mh-chip{display:inline-block; background:#fff; border:1.5px solid var(--line); color:var(--navy-800); border-radius:999px; padding:.5rem 1.05rem; font-size:.92rem; font-weight:500; margin:0 .5rem .65rem 0; text-decoration:none; transition:border-color .15s,background-color .15s}
.mh-chip:hover{border-color:var(--navy-500); color:var(--navy-800); text-decoration:none; background:var(--slate-25)}

/* ===== closing: quiz + contact ===== */
.mh-final{background:var(--navy-500); color:#fff}
.mh-final h2{color:#fff; max-width:17ch}
.mh-final .mh-lede{color:var(--blue-25)}
.mh-opts{margin-top:1.75rem; display:grid; grid-template-columns:1fr 1fr; gap:.6rem}
.mh-opt{display:flex; align-items:center; text-align:left; background:rgba(255,255,255,.07); border:1.5px solid var(--navy-300); color:#fff; border-radius:14px; padding:.85rem 1rem; font:500 .92rem/1.35 "Poppins",sans-serif; cursor:pointer; transition:background-color .15s,border-color .15s}
.mh-opt i{width:.75rem; height:.75rem; border-radius:50%; background:var(--oc); margin-right:.75rem; flex:none}
.mh-opt:hover{background:rgba(255,255,255,.14)}
.mh-opt[aria-pressed="true"]{background:#fff; color:var(--navy-800); border-color:#fff}
.mh-opt.wide{grid-column:span 2}
@media (max-width:575.98px){.mh-opts{grid-template-columns:1fr}.mh-opt.wide{grid-column:auto}}
.mh-res{margin-top:1.25rem; background:#fff; color:var(--ink); border-radius:16px 16px 16px 48px; padding:1.25rem 1.4rem 1.4rem; border-top:5px solid var(--rc,var(--blue-500)); min-height:150px}
.mh-res h3{margin-bottom:.4rem}
.mh-res p{color:var(--muted); font-size:.92rem; margin:0 0 1rem; line-height:1.55}
.mh-res .btn{margin:0 .6rem .5rem 0; padding:.6rem 1.05rem; font-size:.88rem}
.mh-contact{margin-top:2rem; display:grid; gap:.9rem}
.mh-contact div{display:flex; color:var(--blue-25); font-size:.95rem}
.mh-contact b{color:#fff; font-weight:600; min-width:84px}
.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}
.mh-map{margin-top:1.25rem; border-radius:14px 14px 14px 56px; min-height:120px; display:flex; align-items:center; justify-content:center; font-size:.85rem; color:var(--blue-25); background:repeating-linear-gradient(135deg,var(--navy-400) 0 12px,var(--navy-500) 12px 24px); border:1px solid var(--navy-300)}

/* ===== 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}