/* Glass hero, "line" mode (2026-11-13, Ali: keep the previous hero's side words and rotating line, but put the services
   on the rising arrow as shaped photos; the active one grows, then the next). The ribbon script draws through the pane
   centres, so the line follows this rising layout by itself. Growth rises to the right in both languages. */
.mhg--line { --pw: min(7.4vw, 112px); }
.mhg--line .mhg-scene { inset-block: 6% 16%; inset-inline: 44% 3%; }
.mhg--line .mhg-stack { direction: ltr; }
.mhg--line .mhg-pane { left: var(--x); top: var(--y); right: auto; aspect-ratio: 1; border-radius: 50%; border: 3px solid rgba(255,255,255,.9);
  transform: translate(-50%, -50%) scale(1); transform-origin: 50% 50%; filter: brightness(.82) saturate(.95);
  box-shadow: 0 24px 50px rgba(0,0,0,.55); transition: transform .9s cubic-bezier(.2,.75,.1,1), filter .6s ease, box-shadow .5s ease; }
.mhg--line .mhg-pane:nth-child(1) { --x: 8%;  --y: 80%; }
.mhg--line .mhg-pane:nth-child(2) { --x: 29%; --y: 60%; }
.mhg--line .mhg-pane:nth-child(3) { --x: 50%; --y: 47%; }
.mhg--line .mhg-pane:nth-child(4) { --x: 71%; --y: 30%; }
.mhg--line .mhg-pane:nth-child(5) { --x: 91%; --y: 13%; }
.mhg--line .mhg-sh--arch { aspect-ratio: 3 / 4; border-radius: 999px 999px 20px 20px; }
.mhg--line .mhg-sh--card { aspect-ratio: 4 / 3.2; width: calc(var(--pw) * 1.3); border-radius: 18px; }
.mhg--line .mhg-sh--pill { aspect-ratio: 9 / 16; width: calc(var(--pw) * .82); border-radius: 999px; }
.mhg--line .mhg-sh--leaf { border-radius: 62% 10% 62% 10%; }
.mhg--line .mhg-pane img { top: 0; left: 0; width: 100%; height: 100%; transform: none; }
.mhg--line .mhg-pane::before { background: linear-gradient(140deg, rgba(255,255,255,.22), rgba(255,255,255,0) 40%); }
.mhg--line .mhg-pane-cap { transform: none; inset-inline: 10px; inset-block-end: 10px; justify-items: center; text-align: center; }
.mhg--line .mhg-sh--circle .mhg-pane-cap, .mhg--line .mhg-sh--leaf .mhg-pane-cap { inset-block-end: 16%; }
.mhg--line .mhg-pane[data-side] .mhg-pane-cap { justify-items: center; text-align: center; }
.mhg--line .mhg-pane-bar { inset-inline: 18%; bottom: 6px; height: 3px; border-radius: 3px; background: linear-gradient(90deg, #2f8cff, #ff9a2e); }
/* the active service grows to the front, then hands over to the next */
.mhg--line .mhg-pane[aria-pressed="true"] { transform: translate(-50%, -50%) scale(2.05); filter: none; z-index: 20 !important;
  box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1px #ffb35c, 0 0 40px rgba(255,154,46,.4); }
.mhg--line .mhg-pane[aria-pressed="true"] img { transform: scale(1.04); }
.mhg--line .mhg-pane.hit { box-shadow: 0 30px 70px rgba(0,0,0,.6), 0 0 0 1.5px #ffe0b0, 0 0 50px rgba(255,154,46,.75); }
/* the logo's own colours on the line */
.mhg--line .mhg-rb-glow { stroke: url(#mhg-line-g) !important; opacity: .35; }
.mhg--line .mhg-rb-wide { stroke: url(#mhg-line-g) !important; stroke-width: 5; opacity: 1; }
.mhg--line .mhg-rb-core { stroke: rgba(255,255,255,.55); stroke-width: 1.2; }
.mhg--line .mhg-dot { fill: #fff; filter: drop-shadow(0 0 6px #ffb35c) drop-shadow(0 0 14px #ff9a2e); }

@media (max-width: 1099px) { .mhg--line { --pw: min(8vw, 90px); } .mhg--line .mhg-scene { inset-inline: 46% 2%; } }
@media (max-width: 719px), (max-width: 1099px) and (orientation: portrait) {
  .mhg--line { --pw: min(15vw, 72px); }
  .mhg--line .mhg-scene { inset-block: 7% auto; height: 44%; inset-inline: 6% 6%; }
  .mhg--line .mhg-pane[aria-pressed="true"] { transform: translate(-50%, -50%) scale(1.7); }
}
@media (prefers-reduced-motion: reduce) {
  .mhg--line .mhg-pane { transition: none; }
}
/* the message feed sits under the words, so the MAHROUS mark on the line stays clear */
.mhg--line .mhg-feed { inset-inline-start: clamp(20px, 5vw, 88px); }

/* "Explore <service>" (Ali 2026-11-13): big, orange and visibly changing with the active service */
.mhg--line .mhg-actions { flex-wrap: wrap; row-gap: 14px; }
.mhg--line .mhg-explore { font-size: clamp(20px, 2.1vw, 32px); font-weight: 800; color: #ff9a2e; text-decoration: none; gap: 10px; text-shadow: 0 2px 18px rgba(0,0,0,.55); }
.mhg--line .mhg-explore-name { display: inline-block; border-bottom: 3px solid currentColor; padding-bottom: 2px; }
.mhg--line .mhg-explore-name.swap { animation: mhg-in .55s cubic-bezier(.2,.75,.1,1) both; }
.mhg--line .mhg-explore:hover { color: #ffc27a; }
@media (max-width: 719px) { .mhg--line .mhg-explore { font-size: 20px; } }
@media (prefers-reduced-motion: reduce) { .mhg--line .mhg-explore-name.swap { animation: none; } }