/* V8 hero globe: decorative flight-route globe behind the top-right of the opening roll. Vanilla CSS, no JS. */
.mh-arts{aspect-ratio:1;max-width:560px;margin-inline:auto;width:100%}
.mg{width:100%;aspect-ratio:1;pointer-events:none}
.mg svg{width:100%;height:100%;display:block;overflow:visible}
.mg .o{transform-box:view-box;transform-origin:240px 240px}
.mg .r1{animation:mg-spin 60s linear infinite}
.mg .r2{animation:mg-spin 38s linear infinite reverse}
.mg .sw{animation:mg-spin 6s linear infinite}
.mg .mer{transform-box:view-box;transform-origin:240px 240px;animation:mg-turn 12s ease-in-out infinite}
.mg .rt{fill:none;stroke:#0075a3;stroke-width:2.5;stroke-linecap:round;stroke-dasharray:1;stroke-dashoffset:1;animation:mg-draw 5s ease-in-out infinite;animation-delay:calc(var(--i)*.9s)}
.mg .pu{transform-box:fill-box;transform-origin:center;fill:none;stroke:#67d4ff;stroke-width:2;animation:mg-pulse 2.6s ease-out infinite;animation-delay:calc(var(--i)*.6s)}
@keyframes mg-spin{to{transform:rotate(360deg)}}
@keyframes mg-turn{50%{transform:scaleX(.15)}}
@keyframes mg-draw{0%{stroke-dashoffset:1;opacity:0}40%{stroke-dashoffset:0;opacity:1}80%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:-1;opacity:0}}
@keyframes mg-pulse{from{transform:scale(1);opacity:.8}to{transform:scale(3.6);opacity:0}}
.mh[data-play="false"] .mg *{animation-play-state:paused}

@media (prefers-reduced-motion:reduce){.mg .r1,.mg .r2,.mg .sw,.mg .mer,.mg .pu{animation:none}.mg .rt{animation:none;stroke-dashoffset:0}.mg .sw{display:none}}
/* V8: hero follows the 2026 prototype (pill eyebrow, accent headline, globe at right) and tighter card gaps. */
.mh-inner{grid-template-columns:minmax(0,6fr) minmax(0,5fr);gap:32px}
.mh-eyebrow{display:inline-block;border:1px solid var(--mh-line);border-radius:999px;padding:4px 14px;font-size:12px;letter-spacing:.2em}
.mh-hl{color:var(--accent,#0075a3)}
.mh-note{max-width:34em;margin-inline:auto;text-align:center}
.mh-rail{max-width:560px;margin-inline:auto}
.service-grid,.problem-grid,.process-grid,.deliverable-grid,.engagement-grid,.sample-grid,.upgrade-grid,.suriyaone-home-grid{gap:12px}
@media (max-width:900px){.mh-inner{grid-template-columns:1fr}.mh-arts{max-width:340px}}
/* V8: audience card heading scrolls vertically through five audiences. All items share one grid cell, so the card keeps the height of the longest. */
.pcard .rot{display:grid;overflow:hidden}
.pcard .rot>*{grid-area:1/1;align-self:start;opacity:0;animation:rot-scroll 15s ease-in-out infinite both}
.pcard .rot>:nth-child(2){animation-delay:3s}
.pcard .rot>:nth-child(3){animation-delay:6s}
.pcard .rot>:nth-child(4){animation-delay:9s}
.pcard .rot>:nth-child(5){animation-delay:12s}
.pcard:hover .rot>*{animation-play-state:paused}
/* DeepTech card: the rocket icon and the sub-line change together. */
.pcard .pi.rot-ico{display:grid;width:28px;height:28px;overflow:visible}
.pcard .rot-ico>*{align-self:center}
.pcard .rot-sub{display:grid;color:var(--accent,#0075a3)}
.pcard .rot-sub>*{align-self:start}
@keyframes rot-scroll{0%{opacity:0;transform:translateY(70%)}3%{opacity:1;transform:none}17%{opacity:1;transform:none}20%{opacity:0;transform:translateY(-70%)}100%{opacity:0;transform:translateY(-70%)}}
@media (prefers-reduced-motion:reduce){.pcard .rot>*{animation:none}.pcard .rot>:first-child{opacity:1}}
/* Who-we-serve cards share three row tracks (icon, heading, text), so the body text lines up across the row whatever the heading height. */
@supports (grid-template-rows:subgrid){
  #who-we-serve .pgrid.three{grid-template-rows:auto auto 1fr}
  #who-we-serve .pgrid.three>.pcard{display:grid;grid-row:span 3;grid-template-rows:subgrid;row-gap:0}
}
/* Who-we-serve body text: larger, darker, set off from the heading by a hairline. */
#who-we-serve .pcard p{font-size:1.1875rem;line-height:1.6;color:#2a3a4d;margin-top:16px;padding-top:16px;border-top:1px solid var(--line,#d4dce3)}
@media (max-width:560px){#who-we-serve .pcard p{font-size:1.0625rem}}
/* V8: prototype copy blocks (services, who we serve, approach) and hero checklist. */
.mh-checks{list-style:none;display:flex;flex-wrap:wrap;gap:8px 24px;margin:22px 0 0;padding:0;font-size:14px;color:var(--mh-soft)}
.mh-checks li{display:flex;align-items:center;gap:8px}
.mh-checks .pi{color:var(--mh-line)}
.pgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pgrid.three{grid-template-columns:repeat(3,minmax(0,1fr))}
.pcard{display:block;height:100%}
.pcard .pi{display:block;color:var(--accent);margin-bottom:14px}
.pcard h3{margin-bottom:8px}
.pgrid4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.pstep{border-top:2px solid var(--accent);padding-top:14px}
.pstep .pn{font:600 40px/1 var(--head);color:var(--accent);margin-bottom:10px}
.pstep h3{margin-bottom:6px}
@media (max-width:900px){.pgrid,.pgrid.three,.pgrid4{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:560px){.pgrid,.pgrid.three,.pgrid4{grid-template-columns:1fr}}