/* Hero 1: India on a full-bleed pixel sea. */
.mh{position:relative;display:flex;padding-block:calc(var(--head-h) + var(--cell)*2) calc(var(--cell)*3);overflow:hidden}
.mh-stage{position:absolute;inset:0}
.mh-stage canvas{position:absolute;inset:0;width:100%;height:100%;touch-action:pan-y}
.mh-body{position:relative;display:flex;flex-direction:column;gap:calc(var(--cell)*2);padding-block:calc(var(--cell)*2)}
.mh-copy{position:relative;display:flex;flex-direction:column;gap:calc(var(--cell)*2)}
.mh h1{font-size:46px;line-height:calc(var(--cell)*6);letter-spacing:-.035em;font-weight:400;margin:0}
.mh-lead{font-size:18px;line-height:calc(var(--cell)*3);color:#33475E}
.mh-btns{display:flex;flex-direction:column;gap:var(--cell)}
.mh .btn-secondary{background:#EEF3F8;border-color:transparent;color:var(--ink)}
.mh .btn-secondary:hover{background:#DFE8F1;color:var(--ink)}
.mh-mini{display:grid;grid-template-columns:repeat(3,auto);justify-content:space-between;gap:16px;color:var(--ink)}
.mh-mini b{display:block;font-weight:400;font-size:27px;line-height:1.05;letter-spacing:-.03em}
.mh-mini span{display:block;font-size:13.5px;line-height:1.3;color:#33475E}
.mh-slot{position:relative;width:100%;height:370px;pointer-events:none}
.mh-slot noscript img{width:100%;height:100%;object-fit:contain}
html:not(.map-live) .mh-slot::before{content:"";position:absolute;inset:0;background:url(assets/map-static.svg) center/contain no-repeat;opacity:0;animation:mh-show 0s 2s forwards}
@keyframes mh-show{to{opacity:1}}
.mh-chip{position:absolute;left:0;top:0;z-index:3;padding:4px 8px;background:var(--chip-bg,var(--deep));color:var(--chip-fg,#fff);font-family:var(--font-mono);font-size:12px;line-height:1.3;letter-spacing:.02em;white-space:nowrap;pointer-events:none;opacity:0;transition:opacity .25s}
.mh-chip.on{opacity:1}
.mh-hold{position:absolute;right:-8px;bottom:-8px;display:flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;border:0;background:none;color:var(--mist);pointer-events:auto;cursor:pointer}
.mh-hold:hover{color:var(--ink)}
.mh-hold svg{width:16px;height:16px;fill:currentColor}
.mh-hold .go{display:none}
.mh-hold[aria-pressed=true] .go{display:block}
.mh-hold[aria-pressed=true] .st{display:none}
html:not(.map-live) .mh-hold{display:none}
@media (prefers-reduced-motion:reduce){.mh-hold{display:none}}

@media (min-width:900px){
  .mh{min-height:calc(var(--cell)*64);padding-block:calc(var(--head-h) + var(--cell)) calc(var(--cell)*2)}
  .mh-body{display:grid;grid-template-columns:calc(var(--cell)*57) minmax(0,1fr);gap:calc(var(--cell)*2);align-items:start;padding-block:0}
  .mh-copy{gap:calc(var(--cell)*3);margin-top:calc(var(--cell)*2)}
  .mh h1{font-size:clamp(54px,5.3vw,76px);line-height:calc(var(--cell)*8)}
  .mh-lead{font-size:20px;line-height:calc(var(--cell)*3);max-width:30em}
  .mh-btns{flex-direction:row}
  .mh-mini{display:flex;gap:40px;justify-content:flex-start}
  .mh-mini b{font-size:40px;line-height:calc(var(--cell)*4)}
  .mh-mini span{font-size:15px;line-height:calc(var(--cell)*2)}
  /* the map runs past the page column, out towards the screen edge */
  .mh-slot{width:auto;aspect-ratio:auto;height:100%;min-height:calc(var(--cell)*54);margin-right:calc(var(--cl)*-1 + var(--cell)*3)}
}
.mh h1{color:var(--hero-h1,var(--ink))}
.mh .btn-primary{background:var(--hero-btn,var(--ink))}
/* label styles: colours come from --chip-bg and --chip-fg */
[data-chip=white] .mh-chip{background:#fff;color:var(--chip-bg,var(--deep))}
[data-chip=outline] .mh-chip{background:rgba(255,255,255,.6);color:var(--chip-bg,var(--deep));box-shadow:inset 0 0 0 1px var(--chip-bg,var(--deep))}
[data-chip=text] .mh-chip{padding:0 2px;background:none;color:var(--chip-bg,var(--deep));font-weight:500}
[data-chip=marker] .mh-chip{padding-left:20px;background:#fff;color:var(--ink)}
[data-chip=marker] .mh-chip::before{content:"";position:absolute;left:7px;top:50%;width:8px;height:8px;margin-top:-4px;background:var(--chip-bg,var(--deep))}