/* ============================================================
   AM Intelligence — Scroll Cinema
   Cinematic industrial-tech editorial
   ============================================================ */

:root {
  --bg: #06070a;
  --ink: #f3f6fa;
  --muted: #8b94a4;
  --faint: rgba(255, 255, 255, 0.08);
  --glass: rgba(14, 17, 24, 0.42);

  /* "am" logo colors → glass tint */
  --logo-a: #ff7a2d;
  --logo-b: #4d9fff;
  --logo-tint: linear-gradient(135deg, rgba(255, 122, 45, 0.12) 0%, rgba(77, 159, 255, 0.12) 100%);

  /* per-layer accent — JS swaps this live */
  --accent: #e9eef5;
  --accent-glow: rgba(233, 238, 245, 0.25);

  --display: "Inter", system-ui, sans-serif;
  --body: "Inter", system-ui, sans-serif;
  --mono: "Inter", system-ui, sans-serif;

  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);
  --panel-pad-x: clamp(1.4rem, 8vw, 9rem);
  --rail-inset: clamp(0.7rem, 2vw, 1.4rem);
  --rail-menu-width: clamp(7.5rem, 11vw, 9.5rem);
  --rail-menu-gap: clamp(1.75rem, 3.5vw, 2.75rem);
  --panel-pad-left: var(--panel-pad-x);
  --rail-detail-inset: clamp(1.2rem, 4vw, 3rem);
  /* both rails share this so swapping one for the other never nudges the
     pill: they were 17.6px vs 21.1px apart at 1366, a visible hop. */
  --rail-top: clamp(0.7rem, 0.5rem + 0.9vw, 1.1rem);
  --nav-bar-height: 3.15rem;
  --menu-bar-height: 2.85rem;
  --nav-stack-height: calc(var(--nav-bar-height) + var(--menu-bar-height));
  --safe-top: env(safe-area-inset-top, 0px);
  --safe-right: env(safe-area-inset-right, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left: env(safe-area-inset-left, 0px);
}

/* section nav now lives as a horizontal bar under the top nav, not a left
   rail — so panels no longer need extra left padding to clear it */
body:has(.rail--detail:not(.rail--context)) {
  --panel-pad-left: var(--panel-pad-x);
}

* { margin: 0; padding: 0; box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
  max-width: 100%;
  touch-action: pan-y;
}

/* The page is just a tall scroll runway; visuals are fixed. */
.scrollspace { height: 720vh; pointer-events: none; }

/* ============ STAGE (canvas) ============ */
.stage {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  max-width: 100%;
  z-index: 1;
  display: block;
  background: #000;
  touch-action: pan-y;
}

/* atmospheric vignette so text always reads */
.vignette {
  position: fixed;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.28) 14%, transparent 32%),
    radial-gradient(120% 90% at 70% 30%, transparent 38%, rgba(0,0,0,0.55) 100%),
    linear-gradient(180deg, rgba(0,0,0,0.45) 0%, transparent 22%, transparent 58%, rgba(0,0,0,0.72) 100%);
}

/* blackout tail — footage fades to black before the contact ending */
.blackout {
  position: fixed;
  inset: 0;
  z-index: 5;
  background: #050608;
  opacity: 0;
  pointer-events: none;
}

/* Static film grain. NOTE: no mix-blend-mode here on purpose — a full-viewport
   blend mode forces the browser to re-composite the whole screen on every canvas
   redraw, which is a major scroll-jank source. Plain low-opacity overlay is cheap. */
.grain {
  position: fixed;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  opacity: 0.035;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* ============ LOADER ============ */
.loader {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(1.5rem, 8vw, 8rem);
  background:
    linear-gradient(90deg, rgba(4,6,10,0.92) 0%, rgba(4,6,10,0.62) 42%, rgba(4,6,10,0.25) 100%),
    url("../assets/loader-bg.webp") center right / cover no-repeat,
    #050608;
  transition: opacity 0.9s var(--ease), visibility 0.9s;
}
.loader.done { opacity: 0; visibility: hidden; }
.loader__inner { width: min(420px, 80vw); text-align: left; }
.loader__mark {
  font-family: var(--body);
  font-weight: 700;
  font-size: clamp(1.4rem, 4vw, 2rem);
  letter-spacing: -0.02em;
  color: var(--ink);
  margin-bottom: 2.2rem;
}
.loader__bar {
  height: 2px;
  width: 100%;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 2px;
  overflow: hidden;
}
.loader__bar span {
  display: block;
  height: 100%;
  width: 0%;
  background: linear-gradient(90deg, #ff7a2d, #ffd24a 50%, #4d9fff);
  box-shadow: 0 0 18px rgba(255, 160, 70, 0.6);
  transition: width 0.25s linear;
}
.loader__meta {
  display: flex;
  justify-content: space-between;
  margin-top: 0.9rem;
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.12em;
  color: var(--muted);
}

/* shared wordmark "am" — orange "a" → blue "m" (matches brand logo) */
.mk {
  background: linear-gradient(90deg, #ff7a2d 0%, #ff7a2d 34%, #4d9fff 70%, #4d9fff 100%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font-weight: 800;
}
.nav__brandrest, .loader__mark { font-weight: 600; }

/* ============ SINGLE-LINE NAV MORPH (service entrance) ============ */
/* Detail pages show ONE top line: the section pill. On arrival a cover built
   from the service words (About · Power Shell · …) sits over it; the words
   split apart and fade, revealing the section names beneath, which stagger in.
   Purely additive — if JS never runs the section bar just renders normally. */

/* the "services" cover that splits away */
.rail__morph {
  position: absolute;
  inset: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(0.6rem, 1.8vw, 1.5rem);
  border-radius: inherit;
  background: linear-gradient(180deg, rgba(11, 14, 20, 0.99), rgba(6, 8, 12, 0.99));
  font-family: var(--mono);
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: rgba(243, 246, 250, 0.9);
  transition: opacity 0.5s var(--ease);
}
.rail__morph span {
  white-space: nowrap;
  transition: transform 0.6s var(--ease), opacity 0.5s var(--ease);
}
.rail__morph .cur { color: var(--accent); font-weight: 600; }
/* splitting: words spread outward from centre, then the cover fades out */
.rail--detail.is-revealing .rail__morph { opacity: 0; }
.rail--detail.is-revealing .rail__morph span { opacity: 0; }
.rail--detail.is-revealing .rail__morph span:nth-child(1) { transform: translateX(-150px); }
.rail--detail.is-revealing .rail__morph span:nth-child(2) { transform: translateX(-75px); }
.rail--detail.is-revealing .rail__morph span:nth-child(3) { transform: translateX(0); }
.rail--detail.is-revealing .rail__morph span:nth-child(4) { transform: translateX(75px); }
.rail--detail.is-revealing .rail__morph span:nth-child(5) { transform: translateX(150px); }

/* section content is revealed beneath the cover and staggers in */
@keyframes svcReveal {
  from { opacity: 0; transform: translateY(-8px); }
  to   { opacity: 1; transform: none; }
}
.rail--detail.is-revealing .rail__heading,
.rail--detail.is-revealing .rail__heading-rule,
.rail--detail.is-revealing .rail__labels li {
  animation: svcReveal 0.45s var(--ease) both;
}
.rail--detail.is-revealing .rail__heading     { animation-delay: 0.30s; }
.rail--detail.is-revealing .rail__heading-rule { animation-delay: 0.36s; }
.rail--detail.is-revealing .rail__labels li:nth-child(1) { animation-delay: 0.42s; }
.rail--detail.is-revealing .rail__labels li:nth-child(2) { animation-delay: 0.48s; }
.rail--detail.is-revealing .rail__labels li:nth-child(3) { animation-delay: 0.54s; }
.rail--detail.is-revealing .rail__labels li:nth-child(4) { animation-delay: 0.60s; }
.rail--detail.is-revealing .rail__labels li:nth-child(5) { animation-delay: 0.66s; }
.rail--detail.is-revealing .rail__labels li:nth-child(6) { animation-delay: 0.72s; }

@media (prefers-reduced-motion: reduce) {
  .rail__morph, .rail__morph span { transition: none !important; }
  .rail--detail.is-revealing .rail__heading,
  .rail--detail.is-revealing .rail__heading-rule,
  .rail--detail.is-revealing .rail__labels li { animation: none !important; }
}

/* ============ NAV ============ */
.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.5rem clamp(1.2rem, 4vw, 3rem);
  mix-blend-mode: normal;
  isolation: isolate;
  pointer-events: none;
}
.nav__brand,
.nav__menu-btn,
.nav__title {
  pointer-events: auto;
}
.nav__brand {
  font-family: var(--display);
  font-size: 1.3rem;
  letter-spacing: -0.02em;
  text-decoration: none;
  color: var(--ink);
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  flex: 0 0 auto;
}
.nav__logo {
  display: block;
  height: 2.2rem;
  width: auto;
  transition: opacity 0.3s var(--ease);
}
.nav__brand:hover .nav__logo { opacity: 0.85; }
.nav__back {
  font-family: var(--mono);
  font-size: 0.95rem;
  color: var(--muted);
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.nav__brand:hover .nav__back { transform: translateX(-3px); color: var(--accent); }

/* page title — visible on mobile detail/about pages */
.nav__title {
  display: none;
  flex: 1 1 0;
  min-width: 0;
  margin: 0;
  font-family: var(--body);
  font-size: 0.8125rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink);
  text-align: center;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.nav__title[hidden] { display: none !important; }

/* hamburger — mobile only */
.nav__menu-btn {
  display: none;
  flex: none;
  position: relative;
  z-index: 2;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 1px solid rgba(255, 255, 255, 0.12);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.06);
  color: var(--ink);
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  pointer-events: auto;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.nav__menu-btn:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.22);
}
.nav__menu-btn:focus-visible {
  outline: 2px solid var(--logo-b);
  outline-offset: 2px;
}
.nav__menu-icon,
.nav__menu-icon::before,
.nav__menu-icon::after {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: currentColor;
  transition: transform 0.28s var(--ease), opacity 0.28s var(--ease);
}
.nav__menu-icon {
  position: relative;
}
.nav__menu-icon::before,
.nav__menu-icon::after {
  content: "";
  position: absolute;
  left: 0;
}
.nav__menu-icon::before { top: -6px; }
.nav__menu-icon::after { top: 6px; }
.nav__menu-btn[aria-expanded="true"] .nav__menu-icon { background: transparent; }
.nav__menu-btn[aria-expanded="true"] .nav__menu-icon::before {
  top: 0;
  transform: rotate(45deg);
}
.nav__menu-btn[aria-expanded="true"] .nav__menu-icon::after {
  top: 0;
  transform: rotate(-45deg);
}

/* slide-out drawer — mobile only */
.nav-drawer {
  position: fixed;
  inset: 0;
  z-index: 200;
  pointer-events: none;
  visibility: hidden;
}
.nav-drawer.is-open {
  pointer-events: auto;
  visibility: visible;
}
.nav-drawer__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  opacity: 0;
  transition: opacity 0.3s var(--ease);
}
.nav-drawer.is-open .nav-drawer__backdrop { opacity: 1; }
.nav-drawer__panel {
  position: absolute;
  top: 0;
  right: 0;
  width: min(300px, 88vw);
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 0;
  background: linear-gradient(180deg, #0b0f19 0%, #06080e 100%);
  border-left: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: -12px 0 40px rgba(0, 0, 0, 0.45);
  transform: translateX(100%);
  transition: transform 0.32s var(--ease);
}
.nav-drawer.is-open .nav-drawer__panel { transform: translateX(0); }
.nav-drawer__head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 1rem 1rem 0.85rem;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.nav-drawer__title {
  margin: 0;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 600;
  color: var(--ink);
}
.nav-drawer__close {
  flex: none;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.05);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
}
.nav-drawer__close:focus-visible {
  outline: 2px solid var(--logo-b);
  outline-offset: 2px;
}
.nav-drawer__body {
  flex: 1;
  overflow-y: auto;
  padding: 0.5rem 0 1.5rem;
  -webkit-overflow-scrolling: touch;
}
.nav-drawer__label {
  margin: 0;
  padding: 1rem 1.15rem 0.45rem;
  font-family: var(--mono);
  font-size: 0.6875rem;
  font-weight: 500;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--muted);
}
.nav-drawer__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.nav-drawer__link {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0.75rem 1.15rem;
  font-family: var(--body);
  font-size: 0.9375rem;
  font-weight: 500;
  color: var(--ink);
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.07);
  transition: background 0.2s var(--ease), color 0.2s var(--ease);
}
.nav-drawer__link:hover,
.nav-drawer__link:focus-visible {
  background: rgba(255, 255, 255, 0.06);
  color: var(--accent);
  outline: none;
}
.nav-drawer__link[aria-current="page"],
.nav-drawer__link[aria-current="true"] {
  color: var(--accent);
  background: rgba(255, 255, 255, 0.04);
}
body.nav-drawer-open { overflow: hidden; }
body.nav-drawer-open .overlay,
body.nav-drawer-open .stage,
body.nav-drawer-open .map-console {
  pointer-events: none !important;
}

.nav__dots { display: flex; gap: 0.55rem; }
.dot {
  position: relative;
  width: 11px; height: 11px;
  border-radius: 50%;
  border: 1px solid rgba(255, 255, 255, 0.35);
  background: transparent;
  cursor: pointer;
  padding: 0;
  transition: all 0.4s var(--ease);
}
.dot::after {
  content: attr(data-label);
}
.dot span {
  position: absolute;
  right: 150%;
  top: 50%;
  transform: translateY(-50%) translateX(6px);
  font-family: var(--mono);
  font-size: 0.66rem;
  letter-spacing: 0.08em;
  white-space: nowrap;
  color: var(--ink);
  opacity: 0;
  pointer-events: none;
  transition: all 0.35s var(--ease);
}
.dot:hover span { opacity: 1; transform: translateY(-50%) translateX(0); }
.dot.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow: 0 0 14px var(--accent-glow);
  transform: scale(1.25);
}

/* ============ DESCENT RAIL ============ */
.rail {
  position: fixed;
  left: clamp(0.7rem, 2vw, 1.4rem);
  top: 50%;
  transform: translateY(-50%);
  z-index: 30;
  display: flex;
  flex-direction: row-reverse;
  gap: 0.9rem;
  align-items: stretch;
  padding: 1.15rem 0.85rem 1.15rem 0.55rem;
  border-radius: 0 12px 12px 0;
  background: linear-gradient(
    90deg,
    rgba(5, 7, 11, 0.82) 0%,
    rgba(5, 7, 11, 0.58) 48%,
    rgba(5, 7, 11, 0) 88%
  );
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  box-shadow:
    inset 1px 0 0 rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.28);
}
.rail__track {
  width: 2px;
  background: rgba(255, 255, 255, 0.16);
  position: relative;
  border-radius: 2px;
  align-self: stretch;
  min-height: 230px;
  box-shadow: 0 0 6px rgba(0, 0, 0, 0.25);
}
.rail__fill {
  display: none;
}
.rail__indicator {
  position: absolute;
  left: 0;
  width: 100%;
  height: 52px;
  background: linear-gradient(180deg, var(--accent) 0%, transparent 100%);
  box-shadow: 0 0 14px var(--accent-glow);
  border-radius: 2px;
  opacity: 0;
  pointer-events: none;
  transition:
    top 0.45s var(--ease),
    left 0.45s var(--ease),
    height 0.35s var(--ease),
    width 0.35s var(--ease),
    opacity 0.35s var(--ease);
}
.rail__labels {
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  font-family: var(--mono);
  font-size: 0.875rem;
  font-weight: 500;
  letter-spacing: 0.05em;
  text-transform: none;
  text-align: right;
  color: rgba(243, 246, 250, 0.94);
  text-shadow:
    0 0 1px rgba(0, 0, 0, 1),
    0 1px 2px rgba(0, 0, 0, 0.95),
    0 0 16px rgba(0, 0, 0, 0.85);
}
.rail__labels li {
  position: relative;
  padding-right: 0.85rem;
  transition: color 0.4s var(--ease), opacity 0.4s;
  opacity: 0.78;
}
.rail__labels li:hover {
  opacity: 0.96;
}
.rail__labels li::after {
  display: none;
}
.rail__labels li.active {
  color: var(--accent);
  opacity: 1;
  font-weight: 600;
  text-shadow:
    0 0 1px rgba(0, 0, 0, 1),
    0 1px 3px rgba(0, 0, 0, 0.95),
    0 0 18px rgba(0, 0, 0, 0.95),
    0 0 14px var(--accent-glow);
}
.rail__labels button {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0.15rem 0;
  margin: 0;
  cursor: pointer;
  transition: color 0.3s var(--ease);
}
.rail__labels a {
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  color: inherit;
  text-decoration: none;
  padding: 0.15rem 0;
  display: inline-block;
  transition: color 0.3s var(--ease);
}
.rail__labels li.active button {
  letter-spacing: 0.06em;
}
.rail__labels li.active a {
  letter-spacing: 0.06em;
}
.rail__labels button:hover { color: var(--ink); opacity: 1; }
.rail__labels a:hover { color: var(--ink); opacity: 1; }
.rail__labels li.active button:hover { color: var(--accent); }
.rail__labels li.active a:hover { color: var(--accent); }

/* main menu — horizontal glass pill, top-right */
.rail--main {
  left: auto;
  right: clamp(1.2rem, 4vw, 3rem);
  top: var(--rail-top);
  bottom: auto;
  transform: none;
  z-index: 51;
  pointer-events: auto;
  flex-direction: row;
  align-items: center;
  gap: 0;
  padding: 0.58rem 1.35rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.10);
  background: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.90) 0%,
    rgba(6, 8, 12, 0.72) 100%
  );
  backdrop-filter: blur(18px) saturate(1.15);
  -webkit-backdrop-filter: blur(18px) saturate(1.15);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.08),
    0 8px 32px rgba(0, 0, 0, 0.38);
}
.rail--main .rail__labels {
  order: 1;
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-end;
  gap: clamp(0.5rem, 1.6vw, 1.5rem);
  text-align: right;
  width: auto;
  max-width: none;
}
.rail--main .rail__labels li {
  padding-right: 0;
  padding-bottom: 0.3rem;
  position: relative;
  white-space: nowrap;
}
.rail--main .rail__labels li::after {
  content: '';
  display: block;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.rail--main .rail__labels li.active::after {
  transform: scaleX(1);
  opacity: 1;
}
@media (hover: hover) and (pointer: fine) {
  .rail--main .rail__labels li:hover::after {
    transform: scaleX(1);
    opacity: 0.38;
  }
  .rail--main .rail__labels li.active:hover::after {
    opacity: 1;
  }
}

/* Media dropdown under main rail */
.rail__has-menu {
  position: relative;
}
.rail__menu-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.rail__caret {
  display: inline-block;
  width: 0;
  height: 0;
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 5px solid currentColor;
  opacity: 0.85;
  translate: 0 1px;
  transition: transform 0.2s var(--ease), opacity 0.2s var(--ease);
}
.rail__has-menu.is-open > .rail__menu-trigger .rail__caret {
  transform: rotate(180deg);
  opacity: 1;
}
.rail__dropdown {
  position: absolute;
  top: calc(100% + 0.55rem);
  left: 50%;
  transform: translateX(-50%) translateY(0.35rem);
  min-width: 12rem;
  margin: 0;
  padding: 0.4rem;
  list-style: none;
  background: linear-gradient(165deg, rgba(18, 24, 32, 0.98) 0%, rgba(10, 14, 20, 0.98) 100%);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 12px;
  box-shadow:
    0 18px 40px rgba(0, 0, 0, 0.45),
    0 0 0 1px rgba(62, 224, 137, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 0.06);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  z-index: 60;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 0.2s var(--ease),
    visibility 0.2s var(--ease),
    transform 0.2s var(--ease);
}
/* Invisible hover bridge — keeps Press Releases open while moving from Media */
.rail__dropdown::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 100%;
  height: 0.7rem;
}
.rail__dropdown::before {
  content: "";
  position: absolute;
  top: -5px;
  left: 50%;
  width: 10px;
  height: 10px;
  background: rgba(18, 24, 32, 0.98);
  border-left: 1px solid rgba(255, 255, 255, 0.1);
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 2px 0 0 0;
  pointer-events: none;
}
.rail__has-menu.is-open > .rail__dropdown {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.rail__dropdown a {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.65rem 0.8rem;
  border-radius: 8px;
  color: rgba(255, 255, 255, 0.82);
  font-size: 0.8rem;
  font-weight: 500;
  letter-spacing: 0.01em;
  text-align: left;
  white-space: nowrap;
  text-decoration: none;
  transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.rail__dropdown a::before {
  content: "";
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: rgba(62, 224, 137, 0.55);
  box-shadow: 0 0 8px rgba(62, 224, 137, 0.35);
  flex: 0 0 auto;
}
.rail__dropdown a:hover,
.rail__dropdown a:focus-visible {
  background: rgba(62, 224, 137, 0.12);
  color: #fff;
}
.rail__dropdown a[aria-current="page"] {
  background: rgba(62, 224, 137, 0.16);
  color: #3ee089;
}
.rail__dropdown a[aria-current="page"]::before {
  background: #3ee089;
}
.nav-drawer__sublist {
  list-style: none;
  margin: 0.15rem 0 0.35rem 0.9rem;
  padding: 0;
}
.nav-drawer__sublink {
  display: block;
  padding: 0.55rem 0.85rem;
  color: var(--muted);
  font-size: 0.9rem;
  text-decoration: none;
  border-radius: 8px;
}
.nav-drawer__sublink:hover,
.nav-drawer__sublink:focus-visible,
.nav-drawer__sublink[aria-current="page"] {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.06);
}
.rail--main .rail__track {
  display: none;
}
body:has(.rail--detail:not(.rail--context)) .rail--main .rail__track {
  display: none;
}

/* detail / context submenus — hidden until opened via main-menu click */
.rail--detail:not(.rail--context):not(.is-submenu-open) {
  display: none !important;
}
.rail--detail:not(.rail--context).is-submenu-open {
  display: flex !important;
}

/* index context submenus — shown when their homepage section is active */
.rail--context {
  display: none !important;
}
.rail--context.is-active {
  display: flex !important;
}
.rail--main[hidden] {
  display: none !important;
}

/* detail pages — horizontal section bar tucked under the top nav.
   A glass pill on the top-right: back link · divider · section tabs, with a
   sliding progress underline that tracks the scroll-cinema position. */
.rail--detail {
  left: auto;
  right: var(--rail-detail-inset);
  top: var(--rail-top);
  bottom: auto;
  transform: none;
  overflow: hidden;             /* clip the split words during the morph */
  z-index: 41;
  flex-direction: row;
  align-items: center;
  gap: clamp(0.65rem, 1.6vw, 1.05rem);
  min-width: 0;
  max-width: calc(100vw - 2 * clamp(1.2rem, 4vw, 3rem));
  padding: 0.58rem 1.05rem 0.58rem 1.15rem;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.09);
  background: linear-gradient(
    180deg,
    rgba(6, 8, 12, 0.92) 0%,
    rgba(6, 8, 12, 0.74) 100%
  );
  backdrop-filter: blur(16px) saturate(1.1);
  -webkit-backdrop-filter: blur(16px) saturate(1.1);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    0 10px 30px rgba(0, 0, 0, 0.38);
}
.rail__heading {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  margin-bottom: 0;
  flex: none;
  text-decoration: none;
  color: var(--ink);
  font-family: var(--body);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  text-transform: none;
  white-space: nowrap;
  transition: opacity 0.3s var(--ease);
}
.rail__heading:hover { opacity: 0.82; }
.rail__heading-arrow {
  color: var(--accent);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1;
  transition: transform 0.3s var(--ease), color 0.3s var(--ease);
}
.rail__heading:hover .rail__heading-arrow { transform: translateX(-3px); }
/* the rule becomes a slim vertical divider between the back link and the tabs */
.rail__heading-rule {
  flex: none;
  width: 1px;
  height: 1.35rem;
  border: 0;
  margin: 0;
  background: rgba(255, 255, 255, 0.16);
}
.rail--detail .rail__nav {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  flex: 1 1 auto;
  min-width: 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.rail--detail .rail__nav::-webkit-scrollbar { display: none; }

/* section tabs in a row; the active tab carries a crisp accent underline.
   We drive the underline purely from the .active class (toggled on scroll)
   rather than the vertical glow indicator used by the left-rail layout. */
.rail--detail .rail__track,
.rail--detail .rail__indicator { display: none; }
.rail--detail .rail__labels {
  flex-direction: row;
  flex-wrap: nowrap;
  justify-content: flex-start;
  gap: clamp(0.35rem, 1vw, 0.95rem);
  width: max-content;
  min-width: 100%;
  text-align: center;
  font-size: 0.875rem;
  letter-spacing: 0.03em;
}
.rail--detail .rail__labels li {
  position: relative;
  padding-right: 0;
  padding-bottom: 0.3rem;
  white-space: nowrap;
}
.rail--detail .rail__labels button { padding: 0.12rem 0.15rem; }
.rail--detail .rail__labels li.active button { letter-spacing: 0.05em; }
.rail--detail .rail__labels li::after {
  content: "";
  display: block;
  position: absolute;
  left: 0.15rem;
  right: 0.15rem;
  bottom: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent-glow);
  transform: scaleX(0);
  transform-origin: center;
  opacity: 0;
  transition: transform 0.32s var(--ease), opacity 0.32s var(--ease);
}
.rail--detail .rail__labels li.active::after { transform: scaleX(1); opacity: 1; }

/* ============ OVERLAY PANELS ============ */
.overlay {
  position: fixed;
  inset: 0;
  z-index: 20;
  pointer-events: none;
}
.panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 var(--panel-pad-x);
  padding-left: var(--panel-pad-left);
  opacity: 0;
  will-change: opacity, transform;
}
.panel--left  { align-items: flex-start; text-align: left; }
.panel--right { align-items: flex-end; text-align: right; }
.panel--center { align-items: center; text-align: center; }
/* force full left alignment on every text node (about energy beat, etc.) */
.panel--text-left,
.panel--text-left .panel__inner,
.panel--text-left .eyebrow,
.panel--text-left .title,
.panel--text-left .body,
.panel--text-left .featlist,
.panel--text-left .feat,
.panel--text-left .feat b,
.panel--text-left .feat span {
  text-align: left;
}
.panel--text-left .eyebrow {
  justify-content: flex-start;
  flex-direction: row;
}
.panel--text-left .featlist {
  align-items: stretch;
  width: 100%;
}
.panel--hero, .panel--contact { align-items: flex-start; text-align: left; }

/* directional scrim — adds depth + a touch of legibility insurance */
.panel::before {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
}
.panel--left::before,
.panel--hero::before {
  background: linear-gradient(90deg, rgba(2,3,5,0.72) 0%, rgba(2,3,5,0.34) 30%, transparent 64%);
}
.panel--right::before {
  background: linear-gradient(270deg, rgba(2,3,5,0.72) 0%, rgba(2,3,5,0.34) 30%, transparent 64%);
}
.panel--center::before {
  background: radial-gradient(70% 70% at 50% 50%, rgba(2,3,5,0.55), rgba(2,3,5,0.2) 70%, transparent);
}
.panel--hero::before {
  background:
    linear-gradient(90deg, rgba(2,3,5,0.7) 0%, rgba(2,3,5,0.3) 32%, transparent 66%),
    linear-gradient(0deg, rgba(2,3,5,0.55) 0%, transparent 30%);
}
.panel--contact::before {
  background:
    linear-gradient(90deg, rgba(2,3,5,0.9) 0%, rgba(2,3,5,0.7) 34%, rgba(2,3,5,0.38) 62%, transparent 82%),
    linear-gradient(0deg, rgba(2,3,5,0.5) 0%, transparent 35%);
}
/* media showcase — spotlight-dims the busy footage so the video card is the focus */
.panel--showcase::before {
  background:
    radial-gradient(88% 74% at 50% 52%, rgba(4,6,10,0.60) 0%, rgba(4,6,10,0.90) 60%, rgba(4,6,10,0.97) 100%);
}

/* busy canvas beats — soft blur + stronger scrim for readable copy */
.panel--legible {
  justify-content: center;
}
.panel--legible::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  backdrop-filter: blur(12px) brightness(0.36) saturate(0.72);
  -webkit-backdrop-filter: blur(12px) brightness(0.36) saturate(0.72);
}
.panel--legible.panel--right::before {
  z-index: 1;
  background: linear-gradient(
    270deg,
    rgba(2, 3, 5, 0.98) 0%,
    rgba(2, 3, 5, 0.94) 28%,
    rgba(2, 3, 5, 0.82) 48%,
    rgba(2, 3, 5, 0.55) 68%,
    rgba(2, 3, 5, 0.22) 82%,
    transparent 92%
  );
}
.panel--legible.panel--left::before {
  z-index: 1;
  background: linear-gradient(
    90deg,
    rgba(2, 3, 5, 0.98) 0%,
    rgba(2, 3, 5, 0.94) 28%,
    rgba(2, 3, 5, 0.82) 48%,
    rgba(2, 3, 5, 0.55) 68%,
    rgba(2, 3, 5, 0.22) 82%,
    transparent 92%
  );
}
.panel--legible .panel__inner {
  position: relative;
  z-index: 2;
  padding: 0;
  background: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  border: none;
  border-radius: 0;
}
.panel--legible .feat {
  background: none;
}
.panel--legible .body,
.panel--legible .feat span {
  color: #e4eaf2;
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.9);
}
.panel--legible .title,
.panel--legible .feat b {
  text-shadow: 0 2px 22px rgba(0, 0, 0, 0.75);
}
.panel--legible .showcase__note {
  color: #a8b4c4;
}

/* readable content card — the fix for "info not visible" */
/* NOTE: pointer-events is intentionally NOT set here — it inherits from the
   .panel, whose value the engine toggles per scroll position. Forcing it to
   `auto` here would make hidden panels capture clicks (every Explore button
   then routed to the last/right-aligned panel). */
.panel__inner {
  position: relative;
  max-width: 620px;
  padding: 0;
  /* no glass tile — content sits directly on the footage;
     the directional scrim + text-shadows carry legibility */
  background: none;
  border: none;
  box-shadow: none;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
.panel--center .panel__inner { max-width: 820px; }
.panel--center .eyebrow,
.panel--center .stats,
.panel--center .chips,
.panel--center .cases,
.panel--center .actions { justify-content: center; }
.panel--hero .panel__inner,
.panel--contact .panel__inner {
  background: none; border: none; box-shadow: none; padding: 0;
  backdrop-filter: none; -webkit-backdrop-filter: none; max-width: 640px;
}

/* back link for detail pages */
.backlink {
  position: fixed;
  top: 1.5rem;
  left: clamp(1.2rem, 4vw, 3rem);
  z-index: 45;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ink);
  text-decoration: none;
  opacity: 0.78;
  transition: opacity 0.3s var(--ease), transform 0.3s var(--ease);
}
.backlink:hover { opacity: 1; transform: translateX(-3px); }

.eyebrow {
  font-family: var(--mono);
  font-size: 0.78rem;
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 1.4rem;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.eyebrow::before {
  content: "";
  width: 34px; height: 1px;
  background: var(--accent);
  box-shadow: 0 0 10px var(--accent-glow);
}
.panel--right .eyebrow { flex-direction: row-reverse; }

.display {
  font-family: var(--display);
  font-weight: 800;
  font-size: clamp(2.8rem, 8.5vw, 6.6rem);
  line-height: 0.94;
  letter-spacing: -0.035em;
}
.display em {
  font-style: normal;
  background: linear-gradient(100deg, #ff7a2d, #ffd24a 40%, #4d9fff 110%);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}
.display--sm { font-size: clamp(2.4rem, 6.5vw, 5rem); }

.title {
  font-family: var(--display);
  font-weight: 700;
  font-size: clamp(1.7rem, 3.6vw, 2.8rem);
  line-height: 1.06;
  letter-spacing: -0.03em;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
}

.lede {
  font-size: clamp(1rem, 1.5vw, 1.2rem);
  line-height: 1.6;
  color: #c7cedb;
  margin-top: 1.8rem;
  font-weight: 400;
}
.body {
  font-size: clamp(1.02rem, 1.45vw, 1.18rem);
  line-height: 1.6;
  color: #dde3ec;
  margin-top: 1.2rem;
  text-shadow: 0 1px 12px rgba(0, 0, 0, 0.4);
}
.kicker {
  font-family: var(--mono);
  font-size: 0.8rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 1.6rem;
}

/* stat cards */
.stats {
  display: flex;
  flex-wrap: wrap;
  gap: 0.7rem;
  margin-top: 2.2rem;
}
.panel--right .stats { justify-content: flex-end; }
.panel--right .chips {
  flex-wrap: nowrap;
  gap: 0.45rem;
  justify-content: flex-end;
}
.panel--right .chips span {
  white-space: nowrap;
  font-size: 0.68rem;
  padding: 0.45rem 0.72rem;
}
.panel--right .panel__inner {
  width: 100%;
  max-width: 720px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.panel--right .chips,
.panel--right .actions {
  align-self: stretch;
  justify-content: flex-end;
}
.panel--right .actions .btn:only-child { margin-left: auto; }
.stat {
  position: relative;
  min-width: 130px;
  padding: 0.35rem 0 0.35rem 0.9rem;
  /* no glass tile — a thin accent rule separates each stat from the footage */
  border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
}
.panel--center .stat {
  border-left: none;
  padding-left: 0;
}
.stats--divided .stat + .stat {
  border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
  padding-left: 0.9rem;
}
.panel--right .stat { border-left: none; border-right: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); padding: 0.35rem 0.9rem 0.35rem 0; }
.stat b {
  display: block;
  font-family: var(--display);
  font-weight: 700;
  font-size: 1.7rem;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.55);
}
.stat span {
  font-family: var(--mono);
  font-size: 0.875rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ink);
}
.stats--titlecase .stat span {
  text-transform: none;
  letter-spacing: 0.04em;
}

/* chips */
.chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.55rem;
  margin-top: 2rem;
}
.chips span {
  font-family: var(--mono);
  font-size: 0.74rem;
  letter-spacing: 0.04em;
  padding: 0.5rem 0.95rem;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  border-radius: 100px;
  background: none;
  color: #eef2f8;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7);
}
.cases {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 1.6rem;
  flex-wrap: wrap;
}
.cases em {
  font-family: var(--mono);
  font-style: normal;
  font-size: 0.7rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--muted);
}
.cases span {
  font-family: var(--display);
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--accent);
}
.cases span:not(:last-child)::after { content: " ·"; color: var(--muted); margin-left: 0.7rem; }

/* feature list — projects, stack layers, steps, security, benefits */
.featlist { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.5rem; }
.feat {
  padding: 0.85rem 1.05rem;
  border: 1px solid var(--faint);
  border-left: 2px solid var(--accent);
  border-radius: 6px;
  background: rgba(255, 255, 255, 0.025);
}
.feat b {
  display: block;
  font-family: var(--display);
  font-weight: 600;
  font-size: 1.02rem;
  letter-spacing: -0.01em;
  color: var(--ink);
  margin-bottom: 0.2rem;
}
.feat b .tag {
  font-family: var(--mono);
  font-weight: 500;
  font-size: 0.64rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--accent);
  margin-right: 0.55rem;
}
.feat b .num { color: var(--accent); }
.feat span { font-size: 0.92rem; line-height: 1.5; color: #c4ccd8; }
.panel--right .feat { border-left: none; border-right: 2px solid var(--accent); }

/* stack layers — one active layer at a time, synced to scroll / canvas */
.featlist--layers .feat {
  transition: opacity 0.45s ease, transform 0.45s ease, border-color 0.45s ease, background 0.45s ease, box-shadow 0.45s ease;
  cursor: pointer;
}
.featlist--layers .feat:not(.is-shown) {
  opacity: 0;
  transform: translateY(14px);
  pointer-events: none;
}
.featlist--layers .feat.is-dimmed {
  opacity: 0.36;
}
@media (hover: hover) and (pointer: fine) {
  .featlist--layers .feat.is-dimmed:hover {
    opacity: 0.58;
  }
}
.featlist--layers .feat.is-shown.is-dimmed {
  opacity: 0.36;
}
.featlist--layers .feat.is-shown {
  transform: none;
}
.featlist--layers .feat.is-shown b {
  color: var(--ink);
}
.featlist--layers .feat.is-shown span {
  color: #c4ccd8;
}
.featlist--layers .feat.is-active {
  opacity: 1;
  border-left-color: var(--accent);
  border-left-width: 3px;
  background: rgba(255, 138, 61, 0.09);
  box-shadow: 0 0 28px rgba(255, 138, 61, 0.12);
}
.featlist--layers .feat.is-active b,
.featlist--layers .feat.is-active span {
  color: var(--ink);
}
.featlist--layers .feat:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* contact actions */
.actions { display: flex; flex-wrap: wrap; gap: 0.9rem; margin-top: 2rem; }
.btn {
  font-family: var(--mono);
  font-size: 0.85rem;
  letter-spacing: 0.04em;
  padding: 0.95rem 1.6rem;
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.35s var(--ease);
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--accent);
  color: #06070a;
  font-weight: 500;
  box-shadow: 0 0 0 0 var(--accent-glow);
}
@media (hover: hover) and (pointer: fine) {
  .btn--primary:hover { box-shadow: 0 0 28px var(--accent-glow); transform: translateY(-2px); }
  .btn--ghost:hover { border-color: var(--accent); color: var(--accent); }
}
.btn--ghost {
  border-color: rgba(255, 255, 255, 0.42);
  color: var(--ink);
  background: rgba(255, 255, 255, 0.04);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06);
}

/* ============ HEALTHCARE SHOWCASE (media panel) ============ */
.panel__inner--wide { max-width: 880px; }
.showcase { margin-top: 1.6rem; }
.showcase__video {
  display: block;
  width: 100%;
  max-width: 640px;
  margin: 0 auto;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 42px var(--accent-glow);
  background: #05080d;
}
.showcase__note {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 1.25rem 0 0.75rem;
}
.showcase__strip {
  display: flex;
  gap: 0.7rem;
  justify-content: center;
  max-width: 640px;
  margin: 0 auto;
}
.shot { flex: 1 1 0; min-width: 0; margin: 0; }
.shot img {
  width: 100%;
  height: 92px;
  object-fit: cover;
  display: block;
  border-radius: 8px;
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.shot figcaption {
  font-family: var(--mono);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.45rem;
  line-height: 1.3;
}
/* compact proof strip folded into a text panel */
.showcase__strip--inline {
  max-width: 440px;
  margin: 1rem 0 0;
  gap: 0.5rem;
  justify-content: flex-start;
}
.showcase__strip--inline .shot img { height: 64px; }
.panel--right .showcase__note { text-align: right; }
.panel--right .showcase__strip--inline { margin-left: auto; justify-content: flex-end; }

/* full-screen background video layer — replaces the canvas frame-sequence on
   video-background pages; one clip per section crossfades in as you scroll */
.bgvideos {
  position: fixed;
  inset: 0;
  z-index: 1;
  overflow: hidden;
  background: #03050a;
}
.bgvideo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity 0.9s var(--ease, ease);
  will-change: opacity;
}
.bgvideo.is-active { opacity: 1; }
.bgvideos__scrim {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, rgba(3,5,10,0.58) 0%, rgba(3,5,10,0.30) 38%, rgba(3,5,10,0.78) 100%);
}

/* side-mounted video card — sits opposite the text so tall panels never clip it */
.panel__media {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: min(42vw, 600px);
  margin: 0;
  z-index: 3;
}
.panel--left  .panel__media { right: clamp(2rem, 6vw, 6rem); }
.panel--right .panel__media { left: clamp(2rem, 6vw, 6rem); }
.panel__media video {
  display: block;
  width: 100%;
  border-radius: 14px;
  border: 1px solid color-mix(in srgb, var(--accent) 42%, transparent);
  box-shadow: 0 18px 60px rgba(0, 0, 0, 0.55), 0 0 42px var(--accent-glow);
  background: #05080d;
}
/* still image in the same side slot — the opening beat's India plant map. The
 * copy gets a matching right margin so the centred block clears the card. */
.panel__media img {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 44px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 26px var(--accent-glow));
}
/* map stills read larger than the video cards, so the image slot gets its own width */
.panel__media:has(img) { width: min(48vw, 700px); }
.panel--with-map .panel__media { right: clamp(0.75rem, 2.5vw, 3rem); width: min(50vw, 760px); }
.panel--with-map .panel__inner { margin-right: min(45vw, 680px); }

.panel__media figcaption {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 0.7rem;
  text-align: center;
}
.industries {
  font-family: var(--mono);
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  color: var(--muted);
  margin-top: 2.4rem;
}
.copyright {
  font-size: 0.74rem;
  color: rgba(139, 148, 164, 0.6);
  margin-top: 0.7rem;
}

/* scroll cue */
.scrollcue {
  position: absolute;
  bottom: 9vh;
  left: var(--panel-pad-left);
  display: flex;
  align-items: center;
  gap: 0.8rem;
  font-family: var(--mono);
  font-size: 0.7rem;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--muted);
  transition: opacity 0.5s var(--ease);
}
.scrollcue i {
  width: 22px; height: 34px;
  border: 1px solid var(--muted);
  border-radius: 12px;
  position: relative;
}
.scrollcue i::after {
  content: "";
  position: absolute;
  left: 50%; top: 7px;
  width: 3px; height: 6px;
  border-radius: 3px;
  background: var(--ink);
  transform: translateX(-50%);
  animation: wheel 1.8s var(--ease) infinite;
}
@keyframes wheel {
  0% { opacity: 0; transform: translate(-50%, 0); }
  35% { opacity: 1; }
  70% { opacity: 0; transform: translate(-50%, 12px); }
  100% { opacity: 0; }
}

.noscript {
  position: fixed; inset: 0; z-index: 200;
  display: grid; place-items: center;
  background: #06070a; color: var(--ink);
  font-family: var(--body); padding: 2rem; text-align: center;
}
.noscript a { color: #ff9a4a; }

/* ============ RESPONSIVE ============ */

/* Large desktops / high-res — give the content column a little more room */
@media (min-width: 1600px) {
  .panel__inner { max-width: 700px; }
  .panel--center .panel__inner { max-width: 900px; }
}

/* Laptops & small desktops */
@media (max-width: 1200px) {
  .rail--main .rail__labels { gap: clamp(0.4rem, 1.2vw, 0.9rem); }
  .rail--main { padding: 0.48rem 1rem; }
  .rail--detail {
    left: clamp(0.75rem, 3vw, 1.5rem);
    right: clamp(0.75rem, 3vw, 1.5rem);
    max-width: calc(100vw - 2 * clamp(0.75rem, 3vw, 1.5rem));
  }
  .rail--detail .rail__labels { font-size: 0.8125rem; }
  .rail__heading { font-size: 0.8125rem; }
}

/* Tablets */
@media (max-width: 1024px) {
  :root {
    --panel-pad-x: clamp(1.2rem, 5vw, 3rem);
    --rail-detail-inset: clamp(0.75rem, 3vw, 1.5rem);
    --rail-top: 0.8rem;
  }
  .rail--main {
    top: var(--rail-top);
    right: clamp(0.75rem, 3vw, 1.5rem);
    padding: 0.42rem 0.9rem;
    max-width: calc(100vw - clamp(0.75rem, 3vw, 1.5rem) - 5rem);
  }
  .rail--main .rail__labels { font-size: 0.8125rem; }
  .rail--detail {
    top: var(--rail-top);
    left: clamp(0.75rem, 3vw, 1.5rem);
    right: var(--rail-detail-inset);
    max-width: calc(100vw - 2 * clamp(0.75rem, 3vw, 1.5rem));
    padding: 0.48rem 0.85rem;
  }
  .rail--detail .rail__labels { font-size: 0.8125rem; gap: 0.55rem; }
  .rail__heading { font-size: 0.8125rem; }
  .rail--detail .rail__labels button,
  .rail--detail .rail__labels a {
    min-height: 40px;
    padding: 0.5rem 0.7rem;
  }
  .title { font-size: clamp(1.6rem, 4.4vw, 2.4rem); }
  .stat { min-width: 120px; }
  .lede { font-size: clamp(0.98rem, 1.8vw, 1.12rem); }
  .body { font-size: clamp(0.96rem, 1.6vw, 1.05rem); }
  /* softened scrims — keep text readable but let the background image show through on tablets */
  .panel--left::before {
    background: linear-gradient(90deg, rgba(2,3,5,0.62) 0%, rgba(2,3,5,0.34) 40%, transparent 72%);
  }
  .panel--right::before {
    background: linear-gradient(270deg, rgba(2,3,5,0.62) 0%, rgba(2,3,5,0.34) 40%, transparent 72%);
  }
  /* fade hint on horizontally scrollable detail tabs */
  .rail--detail .rail__nav {
    mask-image: linear-gradient(90deg, transparent, #000 3%, #000 97%, transparent);
  }
  .featlist { gap: 0.5rem; margin-top: 1.25rem; }
  .feat { padding: 0.75rem 0.95rem; }
  .feat b { font-size: 0.98rem; }
  .feat span { font-size: 0.88rem; }
  .map-console__hud {
    width: min(52vw, 440px);
  }
  .map-console__hud .title {
    font-size: clamp(1.55rem, 3.6vw, 2.5rem);
  }
}

/* Phones — logo + title + hamburger; scrollable section tabs */
@media (max-width: 768px) {
  .nav {
    left: 0;
    right: 0;
    padding:
      calc(0.5rem + var(--safe-top))
      calc(0.75rem + var(--safe-right))
      0.5rem
      calc(0.75rem + var(--safe-left));
    gap: 0.5rem;
    z-index: 49;
    background: linear-gradient(180deg, rgba(4, 6, 10, 0.94) 0%, rgba(4, 6, 10, 0.82) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  }
  .nav__logo { height: 1.7rem; }
  .nav__title:not([hidden]) { display: block; }
  .nav__menu-btn { display: flex; }

  /* primary nav moves into hamburger drawer */
  .rail--main { display: none !important; }

  /* context submenus on index — shown when a section is active on mobile */
  .rail--context { display: none !important; }
  .rail--context.is-active { display: flex !important; }

  /* secondary nav — horizontally scrollable tabs (only when submenu open) */
  .rail--detail:not(.rail--context).is-submenu-open,
  .rail--context.is-active {
    display: flex !important;
    left: 0;
    right: 0;
    top: var(--nav-bar-height);
    width: 100%;
    max-width: 100%;
    transform: none;
    overflow: hidden;
    border-radius: 0;
    border: none;
    border-bottom: 1px solid rgba(255, 255, 255, 0.07);
    padding: 0;
    gap: 0;
    z-index: 42;
    background: linear-gradient(180deg, rgba(4, 6, 10, 0.92) 0%, rgba(4, 6, 10, 0.78) 100%);
    backdrop-filter: blur(14px);
    -webkit-backdrop-filter: blur(14px);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.28);
  }
  .rail--detail .rail__heading,
  .rail--detail .rail__heading-rule { display: none; }
  .rail--detail .rail__nav {
    width: 100%;
    padding: 0 0.5rem;
    mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent);
  }
  .rail--detail .rail__labels {
    flex-wrap: nowrap;
    justify-content: flex-start;
    gap: 0;
    width: max-content;
    min-width: 100%;
    font-size: 0.8125rem;
  }
  .rail--detail .rail__labels li {
    padding: 0;
    flex-shrink: 0;
  }
  .rail--detail .rail__labels button,
  .rail--detail .rail__labels a {
    display: inline-flex;
    align-items: center;
    min-height: 44px;
    padding: 0.65rem 0.9rem;
  }
  .rail--detail .rail__labels li::after {
    left: 0.9rem;
    right: 0.9rem;
  }

  body.nav-submenu-open,
  body.has-mobile-submenu,
  body.has-index-submenu {
    --menu-bar-height: 2.85rem;
    --nav-stack-height: calc(var(--nav-bar-height) + var(--menu-bar-height));
  }
  body:not(.nav-submenu-open):not(.has-mobile-submenu):not(.has-index-submenu) {
    --nav-stack-height: var(--nav-bar-height);
  }

  :root {
    --panel-pad-left: 1.15rem;
    --panel-pad-x: 1.15rem;
    --nav-bar-height: calc(3.15rem + var(--safe-top));
  }
  .panel {
    padding:
      var(--nav-stack-height)
      calc(1.15rem + var(--safe-right))
      calc(max(5.5rem, 12dvh) + var(--safe-bottom))
      calc(1.15rem + var(--safe-left));
    justify-content: flex-end;
  }
  .panel--legible {
    justify-content: center;
  }
  /* Overview heroes — extra breathing room below the mobile submenu tabs */
  body.nav-submenu-open .panel[data-i="0"],
  body.has-index-submenu .panel[data-i="0"] {
    justify-content: flex-start;
    padding-top: calc(var(--nav-stack-height) + 2.5rem);
  }
  body.nav-submenu-open .panel[data-i="0"] > .panel__inner > .eyebrow:first-child,
  body.has-index-submenu .panel[data-i="0"] > .panel__inner > .eyebrow:first-child {
    margin-top: 0.65rem;
  }
  /* Stack — full width + breathing room below the mobile submenu tabs */
  body.nav-submenu-open .panel[data-i="3"],
  body.has-index-submenu .panel[data-i="3"] {
    justify-content: flex-start;
    padding-top: calc(var(--nav-stack-height) + 2.5rem);
  }
  body.nav-submenu-open .panel[data-i="3"] > .panel__inner > .eyebrow:first-child,
  body.has-index-submenu .panel[data-i="3"] > .panel__inner > .eyebrow:first-child {
    margin-top: 0.65rem;
  }
  .panel[data-i="3"] .panel__inner {
    max-width: 100%;
    width: 100%;
  }
  .panel--hero { justify-content: center; padding-bottom: 0; padding-top: var(--nav-bar-height); }
  .panel--left, .panel--right, .panel--center { align-items: flex-start; text-align: left; }
  .panel--text-left,
  .panel--text-left .panel__inner,
  .panel--text-left .eyebrow,
  .panel--text-left .title,
  .panel--text-left .body,
  .panel--text-left .feat,
  .panel--text-left .feat b,
  .panel--text-left .feat span {
    text-align: left;
  }
  .panel--text-left .eyebrow {
    justify-content: flex-start;
    flex-direction: row;
  }
  .panel--center .eyebrow,
  .panel--center .stats,
  .panel--center .chips,
  .panel--center .cases,
  .panel--center .actions { justify-content: flex-start; }
  .panel--right .eyebrow { flex-direction: row; }
  .panel--right .stats { justify-content: flex-start; }
  .panel--right .chips { justify-content: flex-start; flex-wrap: wrap; }
  .panel--right .chips span {
    white-space: normal;
    font-size: 0.7rem;
    padding: 0.42rem 0.8rem;
  }
  .panel--right .panel__inner {
    display: block;
    align-items: stretch;
  }
  .panel--right .chips,
  .panel--right .actions {
    align-self: auto;
    justify-content: flex-start;
  }
  .panel--right .actions .btn { margin-left: 0; }
  .panel--right .actions .btn:only-child { margin-left: 0; }
  .panel__inner { max-width: 100%; padding-left: 0; padding-right: 0; }
  .panel--right .stat { border-right: none; border-left: 2px solid color-mix(in srgb, var(--accent) 65%, transparent); padding: 0.35rem 0 0.35rem 0.9rem; }
  .panel--right .feat {
    border-left: 2px solid var(--accent);
    border-right: none;
  }
  .panel--right .featlist--layers .feat.is-active {
    border-left-width: 3px;
    border-right: none;
  }
  .stat { min-width: calc(50% - 0.5rem); }
  .dot span { display: none; }
  .panel__inner--wide { max-width: 100%; }
  .showcase__video, .showcase__strip { max-width: 100%; margin-left: 0; margin-right: 0; }
  .panel__media { position: static; transform: none; width: 100%; max-width: 420px; margin-top: 1.4rem; }
  .panel--left .panel__media, .panel--right .panel__media { right: auto; left: auto; }
  .panel--with-map .panel__media { right: auto; width: 100%; max-width: 420px; }
  .panel--with-map .panel__inner { margin-right: 0; }
  .panel__media figcaption { text-align: left; }
  .shot img { height: 60px; }
  .shot figcaption { font-size: 0.55rem; }
  .scrollcue {
    left: calc(1.2rem + var(--safe-left));
    bottom: calc(4vh + var(--safe-bottom));
  }
  .vignette { background: linear-gradient(180deg, rgba(0,0,0,0.26) 0%, transparent 24%, transparent 54%, rgba(0,0,0,0.5) 100%); }
  .display--sm { font-size: clamp(2rem, 9vw, 3rem); }
  .lede { font-size: 1rem; line-height: 1.55; }
  .body { font-size: 0.98rem; }
  /* on phones the copy sits full-width at the bottom of the panel (see justify-content:
     flex-end above), so the scrim follows it there instead of the old left-to-right
     gradient, which was covering almost the whole image edge-to-edge and hiding it */
  .panel--left::before,
  .panel--right::before,
  .panel--center::before {
    background: linear-gradient(0deg, rgba(2,3,5,0.56) 0%, rgba(2,3,5,0.3) 32%, rgba(2,3,5,0.1) 58%, transparent 80%);
  }
  /* the lighter scrim above needs a bit more text-shadow to stay legible over bright imagery */
  .title { text-shadow: 0 2px 16px rgba(0, 0, 0, 0.75), 0 1px 4px rgba(0, 0, 0, 0.6); }
  .body { text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7), 0 1px 3px rgba(0, 0, 0, 0.55); }
  .featlist { gap: 0.45rem; margin-top: 1.1rem; }
  .feat { padding: 0.72rem 0.88rem; }
  .feat b { font-size: 0.94rem; }
  .feat span { font-size: 0.86rem; line-height: 1.45; }
  .featlist--layers { gap: 0.4rem; }
  .featlist--layers .feat { padding: 0.68rem 0.82rem; }
  .featlist--layers .feat b { font-size: 0.9rem; }
  .featlist--layers .feat span { font-size: 0.82rem; }
  .chips { gap: 0.45rem; margin-top: 1.4rem; }
  .chips span { font-size: 0.7rem; padding: 0.42rem 0.8rem; }
  .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.65rem;
  }
  .btn {
    width: 100%;
    text-align: center;
    padding: 0.88rem 1.2rem;
  }
  .industries,
  .copyright {
    word-wrap: break-word;
    overflow-wrap: anywhere;
    hyphens: auto;
    text-align: left;
  }
  .loader {
    padding-left: calc(1.15rem + var(--safe-left));
    padding-right: calc(1.15rem + var(--safe-right));
    align-items: flex-end;
    padding-bottom: calc(2rem + var(--safe-bottom));
  }
  .loader__inner { width: min(420px, 100%); }
  .nav-drawer__panel {
    padding-bottom: var(--safe-bottom);
    width: min(300px, calc(88vw - var(--safe-right)));
  }
  .nav-drawer__head {
    padding-top: calc(1rem + var(--safe-top));
  }
  .sol-overlay__close {
    top: calc(clamp(0.9rem, 2.2vw, 1.6rem) + var(--safe-top));
    right: calc(clamp(0.9rem, 2.2vw, 1.6rem) + var(--safe-right));
  }
  .backlink {
    top: calc(1.5rem + var(--safe-top));
    left: calc(clamp(1.2rem, 4vw, 3rem) + var(--safe-left));
  }
}

/* Small phones */
@media (max-width: 430px) {
  :root {
    --nav-bar-height: calc(2.95rem + var(--safe-top));
    --menu-bar-height: 2.75rem;
  }
  .nav__title { font-size: 0.75rem; }
  .rail--detail .rail__labels { font-size: 0.75rem; }
  .rail--detail .rail__labels button,
  .rail--detail .rail__labels a { padding: 0.6rem 0.75rem; }
  .title { font-size: clamp(1.45rem, 6.4vw, 1.9rem); }
  .body { font-size: 0.98rem; }
  .stat { min-width: 100%; }
  .stat b { font-size: 1.45rem; }
  .featlist--layers .feat b { font-size: 0.86rem; }
  .featlist--layers .feat span { font-size: 0.78rem; }
}

/* Landscape phones — keep content inside the short viewport */
@media (max-height: 520px) and (orientation: landscape) {
  :root {
    --nav-bar-height: calc(2.65rem + var(--safe-top));
    --menu-bar-height: 2.35rem;
  }
  .nav { padding: 0.35rem 0.65rem; }
  .nav__logo { height: 1.45rem; }
  .rail--detail .rail__labels { font-size: 0.75rem; }
  .panel { justify-content: center; padding: var(--nav-stack-height) 1rem 2vh; }
  .panel--legible { justify-content: center; }
  body.nav-submenu-open .panel[data-i="0"],
  body.has-index-submenu .panel[data-i="0"] {
    justify-content: flex-start;
    padding-top: calc(var(--nav-stack-height) + 1.25rem);
  }
  .panel__inner { max-width: 72%; }
  .stats, .chips { margin-top: 0.9rem; }
  .featlist { gap: 0.35rem; margin-top: 0.75rem; }
  .feat { padding: 0.55rem 0.72rem; }
  .feat b { font-size: 0.86rem; margin-bottom: 0.1rem; }
  .feat span { font-size: 0.78rem; line-height: 1.35; }
  .featlist--layers .feat { padding: 0.5rem 0.65rem; }
  .actions { margin-top: 1.2rem; gap: 0.45rem; }
  .btn { padding: 0.72rem 1rem; font-size: 0.8rem; }
  .map-console__hud .title { font-size: clamp(1.2rem, 4.5vw, 1.65rem); }
  .map-console__hud .actions { margin-top: 1rem; }
  .map-console__hud {
    top: auto;
    bottom: calc(0.75rem + var(--safe-bottom));
    left: auto;
    right: calc(0.85rem + var(--safe-right));
    width: min(88vw, 400px);
    padding-top: 0;
    text-align: right;
  }
  .map-console__hud .eyebrow {
    margin-top: clamp(2.25rem, 6vh, 3.5rem);
  }
  .map-console__hud .eyebrow { flex-direction: row-reverse; justify-content: flex-end; }
  .map-console__hud .actions { justify-content: flex-end; }
  .scrollcue { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .scrollcue i::after { animation: none; }
  .panel--legible::after {
    backdrop-filter: brightness(0.36) saturate(0.72);
    -webkit-backdrop-filter: brightness(0.36) saturate(0.72);
  }
  .nav-drawer__panel,
  .nav-drawer__backdrop,
  .nav__menu-icon,
  .nav__menu-icon::before,
  .nav__menu-icon::after { transition: none; }
}

/* ============ AI SOLUTIONS OVERLAY ============ */
.sol-overlay {
  position: fixed;
  inset: 0;
  z-index: 200;                 /* above nav (40) and loader (100) */
  background: #050608;
  opacity: 0;
  visibility: hidden;
  transform: scale(1.015);
  transition: opacity 0.55s var(--ease), visibility 0.55s, transform 0.55s var(--ease);
  will-change: opacity, transform;
}
.sol-overlay.is-open {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
}
.sol-overlay__frame {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: #050608;
}
.sol-overlay__close {
  position: fixed;
  top: clamp(0.9rem, 2.2vw, 1.6rem);
  right: clamp(0.9rem, 2.2vw, 1.6rem);
  z-index: 2;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: var(--glass);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  color: var(--ink);
  font-size: 1.5rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease), transform 0.25s var(--ease);
}
.sol-overlay__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
  transform: rotate(90deg);
}
.sol-overlay__close:focus-visible {
  outline: 2px solid var(--logo-b);
  outline-offset: 2px;
}
@media (prefers-reduced-motion: reduce) {
  .sol-overlay { transition: opacity 0.2s linear, visibility 0.2s; transform: none; }
  .sol-overlay.is-open { transform: none; }
  .sol-overlay__close:hover { transform: none; }
}

/* ============ DETAIL MODAL (View Details popups) ============ */
.detail-modal {
  position: fixed;
  inset: 0;
  z-index: 180;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: clamp(1rem, 4vw, 2.5rem);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.4s var(--ease), visibility 0.4s;
}
.detail-modal.is-open {
  opacity: 1;
  visibility: visible;
}
.detail-modal__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 4, 8, 0.42);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.detail-modal__panel {
  position: relative;
  z-index: 1;
  width: min(720px, 100%);
  max-height: min(88vh, 860px);
  overflow: auto;
  padding: clamp(1.4rem, 4vw, 2.4rem);
  padding-right: clamp(1rem, 3vw, 1.8rem);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 14px;
  background: rgba(8, 12, 18, 0.72);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.4);
  transform: translateY(12px) scale(0.98);
  transition: transform 0.4s var(--ease);
  scrollbar-width: thin;
  scrollbar-color: rgba(255, 138, 61, 0.45) rgba(255, 255, 255, 0.05);
}
.detail-modal__panel::-webkit-scrollbar {
  width: 5px;
}
.detail-modal__panel::-webkit-scrollbar-track {
  margin: 0.4rem 0;
  background: transparent;
  border-radius: 999px;
}
.detail-modal__panel::-webkit-scrollbar-thumb {
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.55), rgba(255, 138, 61, 0.28));
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.06);
}
.detail-modal__panel::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, rgba(255, 138, 61, 0.72), rgba(255, 138, 61, 0.42));
}
.detail-modal.is-open .detail-modal__panel {
  transform: none;
}
.detail-modal__close {
  position: absolute;
  top: clamp(0.75rem, 2vw, 1.1rem);
  right: clamp(0.75rem, 2vw, 1.1rem);
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--faint);
  border-radius: 50%;
  background: var(--glass);
  color: var(--ink);
  font-size: 1.4rem;
  line-height: 1;
  cursor: pointer;
  transition: background 0.25s var(--ease), border-color 0.25s var(--ease);
}
.detail-modal__close:hover {
  background: rgba(255, 255, 255, 0.12);
  border-color: rgba(255, 255, 255, 0.24);
}
.detail-modal__close:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.detail-modal__panel .eyebrow { margin-bottom: 0.75rem; }
.detail-modal__panel .title { margin-bottom: 1.4rem; }
.detail-modal__panel .featlist { gap: 1rem; margin-top: 0; }
.detail-modal__panel .feat {
  padding: 0.85rem 0;
  border: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0;
  background: transparent;
}
.detail-modal__panel .feat:last-child { border-bottom: none; }
body.detail-modal-open { overflow: hidden; }
@media (prefers-reduced-motion: reduce) {
  .detail-modal,
  .detail-modal__panel { transition: none; transform: none; }
}

/* ============================================================
   Projects · India Live-Monitoring console (data-i=4)
   A framed "monitor" that pushes in to fill the viewport as you
   scroll into the section, then reveals interactive location pins.
   --z (0→1) is driven by js/map-console.js.
   ============================================================ */
.panel--map { padding: 0; }
.panel--map::before { background: none; }

.map-console {
  --z: 0;
  --lift: 0;
  --cta: 0;
  --par: 0px;
  --hud-gap: 1.75rem; /* inner spacing within the HUD block */
  --hud-ap-clearance: clamp(3rem, 8vh, 4.75rem); /* gap above eyebrow — clears AP / Vizag label */
  position: absolute;
  inset: 0;
  overflow: hidden;
  /* transparent — the control-room scene shows through until the map screen
     dissolves in over it */
  background: transparent;
  pointer-events: none;
  /* --par cancels the engine's per-panel parallax on the clipping container
     itself, so the clip region stays aligned to the viewport (no edge sliver) */
  transform: translateY(var(--par, 0px));
}

/* the map CROSS-DISSOLVES in full-bleed as --z goes 0→1 (matching the site's
   cinematic scene transitions), with a subtle push-in. No framed "screen"
   scaling — it fades in over the control-room scene and takes it over. */
.map-console__screen {
  position: absolute;
  inset: 0;
  transform-origin: 50% 50%;
  /* subtle push-in on --z (parallax compensation lives on .map-console) */
  transform: scale(calc(1.06 - 0.06 * var(--z)));
  overflow: hidden;
  background: #060c14;               /* matches the map's deep-navy ocean */
  opacity: clamp(0, calc(var(--z) * 1.25), 1);
  will-change: transform, opacity;
}

.map-console__map {
  position: absolute;
  left: 0;
  top: 50%;
  width: 100%;
  aspect-ratio: 1024 / 576;
  transform: translateY(-50%);
}
/* scroll-hero transition frames cover the screen while scrubbing, then
   cross-fade away to reveal the interactive map. Above map/dim. */
.map-console__hero {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: 5;
  background: #060c14;
  opacity: 1;
  transition: opacity .55s ease;
  user-select: none;
  -webkit-user-drag: none;
}
.map-console.map-shown .map-console__hero {
  opacity: 0;
  pointer-events: none;
}
/* light, even dim of the map + states (sits above them, below the pins) so the
   centred content reads without darkening the pins, badges or the map to black */
.map-dim {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: rgba(3, 7, 13, 0.3);
  opacity: var(--cta, 0);   /* dims only once the headline + CTA are revealed */
}
.map-console__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  user-select: none;
  -webkit-user-drag: none;
}


/* HUD title — stays put, does not scale */
.map-console__hud {
  position: absolute;
  top: auto;
  bottom: calc(clamp(0.85rem, 2.5vh, 1.5rem) + var(--safe-bottom));
  right: calc(clamp(0.85rem, 4vw, 2.5rem) + var(--safe-right));
  left: auto;
  z-index: 3;
  width: min(62vw, 680px);
  padding-top: 0;
  text-align: right;
  pointer-events: none;
  text-shadow: 0 2px 22px rgba(0,0,0,0.9);
  /* revealed on the final scroll beat, after the states have risen */
  opacity: var(--cta, 0);
}
/* soft scrim anchored bottom-right to lift the text off the map */
.map-console__hud::before {
  content: "";
  position: absolute;
  inset: -60% -60% -60% -40%;
  z-index: -1;
  background: radial-gradient(70% 70% at 75% 70%, rgba(3,6,10,0.32), transparent 72%);
}
.map-console__hud .eyebrow {
  margin-top: var(--hud-ap-clearance);
  margin-bottom: 0.9rem;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.map-console__hud .title {
  font-size: clamp(1.9rem, 4.4vw, 3.3rem);
  line-height: 1.06;
  white-space: nowrap;
}
.map-console__hud .actions {
  display: inline-flex;
  flex-wrap: nowrap;
  gap: 0.85rem;
  margin-top: 1.8rem;
  justify-content: flex-end;
  pointer-events: none;   /* clickable only once revealed (see .cta-shown) */
}
.map-console__hud .actions .btn { margin-left: 0; flex: 0 0 auto; }
.map-console.cta-shown .map-console__hud .actions { pointer-events: auto; }

/* live status pill */
.map-console__status {
  position: absolute;
  top: clamp(4.4rem, 12vh, 6.7rem);
  right: clamp(1.4rem, 6vw, 4.5rem);
  z-index: 3;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 0.8rem;
  border: 1px solid rgba(62,224,137,0.3);
  border-radius: 999px;
  background: rgba(6,12,20,0.55);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  font-family: var(--mono);
  font-size: 0.68rem;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: #cfe9d8;
  opacity: clamp(0, calc((var(--z) - 0.35) * 2.2), 1);
}
.map-console__live {
  width: 7px; height: 7px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px var(--accent);
  animation: mapLive 1.8s ease-in-out infinite;
}
@keyframes mapLive { 0%,100% { opacity: 1; } 50% { opacity: 0.25; } }

/* fixed "socket" — the darkened footprint that stays anchored at the state
   boundary. The rising top face lifts out of this, so no black gap appears
   and the state reads as extruding from its boundary. */
.map-state-base {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter: brightness(0.4) saturate(0.85);
}

/* rising top face — physically rises as you SCROLL (driven by --lift 0→1, set
   by js/map-console.js). Per-state --amp gives staggered depth. Not a timed
   animation — scrolling up lowers it back into its socket. */
.map-state-layer {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  pointer-events: none;
  filter:
    drop-shadow(0 0 9px rgba(62,224,137,0.4))
    drop-shadow(0 3px 5px rgba(0,0,0,0.5));
  transform: translateY(calc(var(--lift, 0) * var(--amp, -22px)));
  will-change: transform;
}

/* location pins — display only, not interactive */
.map-pin {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 2;
  width: 0; height: 0;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  pointer-events: none;
  opacity: clamp(0, calc((var(--z) - 0.6) * 3.4), 1);
  /* rise together with the pin's own state as you scroll */
  transform: translate(-50%, calc(-50% + var(--lift, 0) * var(--amp, -22px)));
}

.map-pin__dot {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: var(--accent);
  border: 2px solid #eafff3;
  box-shadow: 0 0 12px var(--accent), 0 0 26px rgba(62,224,137,0.55);
}
.map-pin__ping {
  position: absolute;
  left: 0; top: 0;
  width: 14px; height: 14px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px solid var(--accent);
  animation: pinPing 2.4s ease-out infinite;
  animation-delay: calc(var(--i) * 0.45s);
}
@keyframes pinPing {
  0%   { opacity: 0.7; transform: translate(-50%, -50%) scale(1); }
  70%,100% { opacity: 0; transform: translate(-50%, -50%) scale(3.6); }
}

.map-pin__label {
  position: absolute;
  left: 18px; top: 50%;
  transform: translateY(-50%);
  display: flex;
  flex-direction: column;
  line-height: 1.18;
  white-space: nowrap;
  text-shadow: 0 1px 12px rgba(0,0,0,0.9);
  transition: opacity 0.25s var(--ease);
}
.map-pin__label b {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.02em;
}
.map-pin__label i {
  font-style: normal;
  font-size: 0.82rem;
  font-weight: 500;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: color-mix(in srgb, var(--accent) 78%, #ffffff);
}
.map-pin__label--left {
  left: auto;
  right: 18px;
  text-align: right;
}
.map-pin__label--center {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 18px;
  transform: translateX(-50%);
  text-align: center;
}

/* world-map capacity callout — transparent bg, keep border */
.map-capacity {
  position: absolute;
  left: 6%;
  bottom: 13%;
  z-index: 3;
  display: block;
  max-width: min(92%, 420px);
  padding: 0;
  border: none;
  background: transparent;
  text-align: left;
  pointer-events: none;
  opacity: clamp(0, calc((var(--lift, 0) - 0.55) * 4), 1);
  transform: translateY(calc((1 - var(--lift, 0)) * 10px));
  transition: opacity 0.25s var(--ease);
}
.map-capacity__card {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: clamp(0.65rem, 1.6vw, 0.9rem);
  padding: clamp(0.65rem, 1.4vw, 0.85rem) clamp(0.85rem, 2vw, 1.15rem);
  border: 1px solid rgba(62, 224, 137, 0.72);
  border-radius: 12px;
  background: transparent;
  box-shadow:
    0 0 10px rgba(62, 224, 137, 0.32),
    0 0 24px rgba(62, 224, 137, 0.14),
    inset 0 0 14px rgba(62, 224, 137, 0.06);
}
.map-capacity__icon {
  flex: 0 0 auto;
  width: clamp(44px, 7vw, 56px);
  height: clamp(44px, 7vw, 56px);
  filter: drop-shadow(0 0 8px rgba(62, 224, 137, 0.45));
}
.map-capacity__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
.map-capacity__divider {
  flex: 0 0 1px;
  align-self: stretch;
  width: 1px;
  margin: 0.15rem 0;
  background: linear-gradient(
    180deg,
    transparent 0%,
    rgba(255, 255, 255, 0.35) 35%,
    rgba(255, 255, 255, 0.35) 65%,
    transparent 100%
  );
}
.map-capacity__text {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  font-size: clamp(0.72rem, 1.35vw, 0.88rem);
  line-height: 1.35;
  color: rgba(255, 255, 255, 0.92);
  letter-spacing: 0.01em;
}
.map-capacity__text p {
  margin: 0;
}
.map-capacity__text p + p {
  margin-top: 0.12rem;
}
.map-capacity__val {
  font-weight: 700;
  font-size: 1.15em;
  color: #3ee089;
  background: linear-gradient(135deg, #7af8b8 0%, #3ee089 55%, #2bc472 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}
@media (prefers-reduced-motion: reduce) {
  .map-capacity { transform: none; }
}

/* capacity value — transparent, no border */
.map-pin__tip {
  position: absolute;
  left: 0; bottom: 16px;
  transform: translate(-50%, 0);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
  padding: 0.15rem 0.2rem;
  border-radius: 0;
  border: none;
  background: transparent;
  box-shadow: none;
  white-space: nowrap;
  pointer-events: none;
  opacity: clamp(0, calc((var(--lift, 0) - 0.72) * 5), 1);
  transition: opacity 0.2s var(--ease);
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.85), 0 0 16px rgba(0, 0, 0, 0.45);
}
.map-pin__tip b { font-size: 1.15rem; font-weight: 800; color: var(--accent); }
.map-pin__tip span { font-size: 0.66rem; letter-spacing: 0.12em; text-transform: uppercase; color: #cfd8e2; }
.map-pin__tip::after { display: none; }

/* —— India micro-animation —— */
.map-india-hotspot {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 1;
  width: 0;
  height: 0;
  pointer-events: none;
  opacity: clamp(0, calc((var(--z) - 0.55) * 3), 1);
}
/* Invisible hit target over India's green landmass on the world map */
.map-india-hit {
  position: absolute;
  left: var(--x);
  top: var(--y);
  z-index: 3;
  width: 7.5%;
  aspect-ratio: 0.72;
  transform: translate(-50%, -52%);
  margin: 0;
  padding: 0;
  border: 0;
  border-radius: 42% 48% 55% 40%;
  background: transparent;
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
}
.map-india-hit:focus-visible {
  outline: 2px solid #eafff3;
  outline-offset: 3px;
}
.map-india-hotspot__glow {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(72px, 11vw, 140px);
  height: clamp(90px, 14vw, 170px);
  transform: translate(-50%, -52%);
  border-radius: 50%;
  background: radial-gradient(
    ellipse at center,
    rgba(62, 224, 137, 0.34) 0%,
    rgba(62, 224, 137, 0.12) 42%,
    transparent 72%
  );
  filter: blur(1px);
  animation: indiaGlow 2.8s ease-in-out infinite;
}
.map-india-hotspot__ring {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(36px, 5.5vw, 64px);
  height: clamp(36px, 5.5vw, 64px);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 1.5px solid rgba(62, 224, 137, 0.55);
  box-shadow: 0 0 12px rgba(62, 224, 137, 0.25);
  animation: indiaRing 2.6s ease-out infinite;
}
.map-india-hotspot__ring--late {
  animation-delay: 1.3s;
}
.map-pin--india .map-pin__dot {
  width: 16px;
  height: 16px;
  box-shadow:
    0 0 14px var(--accent),
    0 0 32px rgba(62, 224, 137, 0.7),
    0 0 48px rgba(62, 224, 137, 0.35);
  animation: indiaDot 2.2s ease-in-out infinite;
}
.map-pin--india .map-pin__ping {
  width: 16px;
  height: 16px;
  animation: pinPing 1.8s ease-out infinite;
}
.map-pin--india .map-pin__tip {
  border: none;
  background: transparent;
  box-shadow: none;
  animation: indiaTip 2.4s ease-in-out infinite;
}
.map-pin--india .map-pin__tip::after {
  display: none;
}
.map-pin--india .map-pin__cta {
  display: inline-block;
  margin-top: 0.4rem;
  font-size: 0.62rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #ffffff;
  border: 1px solid rgba(255, 255, 255, 0.55);
  border-radius: 999px;
  padding: 0.22rem 0.58rem;
  background: rgba(255, 255, 255, 0.06);
  box-shadow: 0 0 14px rgba(0, 0, 0, 0.35);
  opacity: clamp(0, calc((var(--lift, 0) - 0.65) * 4.5), 1);
  transition: border-color 0.2s var(--ease), background 0.2s var(--ease), color 0.2s var(--ease);
}
button.map-pin--link:hover .map-pin__cta,
button.map-pin--link:focus-visible .map-pin__cta {
  border-color: var(--accent);
  color: var(--accent);
  background: rgba(62, 224, 137, 0.12);
}
@keyframes indiaGlow {
  0%, 100% { opacity: 0.55; transform: translate(-50%, -52%) scale(0.92); }
  50%      { opacity: 1;    transform: translate(-50%, -52%) scale(1.08); }
}
@keyframes indiaRing {
  0%   { opacity: 0.65; transform: translate(-50%, -50%) scale(0.7); }
  70%, 100% { opacity: 0; transform: translate(-50%, -50%) scale(2.35); }
}
@keyframes indiaDot {
  0%, 100% { transform: translate(-50%, -50%) scale(1); }
  50%      { transform: translate(-50%, -50%) scale(1.12); }
}
@keyframes indiaTip {
  0%, 100% { filter: brightness(1); }
  50%      { filter: brightness(1.18); }
}

@media (prefers-reduced-motion: reduce) {
  .map-console__screen { transform: scale(1); border-radius: 0; }
  .map-pin__ping, .map-console__live,
  .map-india-hotspot__glow, .map-india-hotspot__ring,
  .map-pin--india .map-pin__dot, .map-pin--india .map-pin__tip { animation: none; }
  /* --lift is held at a static 1 by the script so tips remain visible. */
}

/* mobile / tablet map HUD — bottom-right, clears centre map pins */
@media (max-width: 768px) {
  .map-console__status { display: none; }
  .map-pin__label b { font-size: 1.02rem; }
  .map-pin__label i { font-size: 0.74rem; }
  .map-pin__tip b { font-size: 1.15rem; }
  .map-pin__dot, .map-pin__ping { width: 16px; height: 16px; }
  .map-console__hud {
    top: auto;
    bottom: calc(0.85rem + var(--safe-bottom));
    left: auto;
    right: calc(0.85rem + var(--safe-right));
    width: min(88vw, 400px);
    padding-top: 0;
    text-align: right;
  }
  .map-console__hud::before {
    inset: -45% -60% -60% -40%;
    background: radial-gradient(70% 70% at 75% 70%, rgba(3,6,10,0.42), transparent 72%);
  }
  .map-console__hud .eyebrow {
    justify-content: flex-end;
    flex-direction: row-reverse;
    margin-top: clamp(2rem, 5vh, 3rem);
    margin-bottom: 0.65rem;
  }
  .map-console__hud .title {
    font-size: clamp(1.15rem, 4vw, 1.65rem);
    line-height: 1.08;
    white-space: nowrap;
  }
  .map-console__hud .actions {
    justify-content: flex-end;
    margin-top: 1.25rem;
  }
}

/* Power panel background: 1.mp4 fly-in, scroll-scrubbed. Its own fixed layer
   (above the canvas, below the text/vignette) with JS-driven opacity so it
   snaps to full fast at band entry — no slow crossfade ghost against the
   canvas frame underneath. */
.power-bg {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  height: 100dvh;
  object-fit: cover;
  object-position: center center;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* —— India pin as open-link —— */
button.map-pin--link {
  cursor: pointer;
  pointer-events: auto;
  appearance: none;
  -webkit-appearance: none;
  font: inherit;
  z-index: 4;
}
button.map-pin--link::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 52px;
  height: 52px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
}
button.map-pin--link:focus-visible .map-pin__dot {
  outline: 2px solid #eafff3;
  outline-offset: 4px;
}
button.map-pin--link:hover .map-pin__dot {
  transform: translate(-50%, -50%) scale(1.15);
}

/* —— Fullscreen India map overlay —— */
.india-fs {
  position: fixed;
  inset: 0;
  z-index: 80;
  display: grid;
  place-items: stretch;
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity 0.35s ease, visibility 0.35s ease;
}
.india-fs.is-open {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}
.india-fs[hidden] { display: none; }
.india-fs.is-open[hidden] { display: grid; }
.india-fs__backdrop {
  position: absolute;
  inset: 0;
  background: rgba(2, 6, 12, 0.72);
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.india-fs__panel {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 100%;
  background: #060c14;
  transform: scale(0.96);
  opacity: 0;
  transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.35s ease;
}
.india-fs.is-open .india-fs__panel {
  transform: scale(1);
  opacity: 1;
}
.india-fs__close {
  position: absolute;
  top: calc(0.9rem + var(--safe-top, 0px));
  right: calc(1rem + var(--safe-right, 0px));
  z-index: 4;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid rgba(255, 255, 255, 0.22);
  border-radius: 999px;
  background: rgba(6, 12, 20, 0.55);
  color: #fff;
  font-size: 1.6rem;
  line-height: 1;
  cursor: pointer;
  transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
}
.india-fs__close:hover {
  border-color: var(--accent);
  color: var(--accent);
}
.india-fs__map {
  position: relative;
  flex: 1 1 auto;
  min-height: 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  padding: 0.35rem 1rem 1rem;
}
.india-fs__heading {
  position: absolute;
  right: calc(1.25rem + var(--safe-right, 0px));
  bottom: calc(1.1rem + var(--safe-bottom, 0px));
  z-index: 3;
  max-width: min(90vw, 560px);
  text-align: right;
  pointer-events: none;
  text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85);
}
.india-fs__heading .eyebrow {
  margin: 0 0 0.45rem;
  justify-content: flex-end;
  flex-direction: row-reverse;
}
.india-fs__title {
  margin: 0;
  font-size: clamp(1.25rem, 3.2vw, 2rem);
  font-weight: 700;
  color: #fff;
  letter-spacing: -0.02em;
}
.india-fs__stage {
  position: relative;
  width: min(100%, calc((100dvh - 6.5rem) * 903 / 847));
  max-width: 100%;
  max-height: 100%;
  aspect-ratio: 903 / 847;
  border-radius: 18px;
  overflow: hidden;
  isolation: isolate;
  border: none;
  box-shadow: none;
}
.india-fs__img,
.india-fs__state {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  object-position: center;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  border-radius: inherit;
}
.india-fs__img {
  background: transparent;
}
.india-fs__state {
  filter:
    drop-shadow(0 0 10px rgba(62, 224, 137, 0.45))
    drop-shadow(0 2px 6px rgba(0, 0, 0, 0.4));
  opacity: 0.95;
}
.india-fs__pin {
  opacity: 0;
  --z: 1;
  --lift: 1;
  --amp: 0px;
  transform: translate(-50%, -50%);
  animation: indiaFsPinIn 0.55s ease forwards;
  animation-delay: calc(0.25s + var(--i, 0) * 0.12s);
}
.india-fs__pin .map-pin__tip {
  opacity: 1;
}
.india-fs__pin .map-pin__tip b {
  font-size: 0.92rem;
}
.india-fs__pin .map-pin__tip span {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: none;
  color: #ffffff;
  text-shadow: 0 1px 8px rgba(0, 0, 0, 0.9), 0 0 12px rgba(0, 0, 0, 0.55);
}
/* City names sit clearly above the pin (not over the dot) */
.india-fs__pin .map-pin__label,
.india-fs__pin .map-pin__label--left,
.india-fs__pin .map-pin__label--center {
  left: 50%;
  right: auto;
  top: auto;
  bottom: 16px;
  transform: translateX(-50%);
  text-align: center;
}
.india-fs__pin .map-pin__label b {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.03em;
}
/* Noida / Mumbai / Vizag: tip also above pin — stack city above capacity */
.india-fs__pin:not(.map-pin--tip-below):not(.india-fs__pin--tip-east):not(.india-fs__pin--tip-west) .map-pin__label {
  bottom: 3.15rem;
}
/* Hyderabad: capacity tip below pin; city name stays above */
.india-fs__pin.map-pin--tip-below .map-pin__tip {
  bottom: auto;
  top: 18px;
  left: 0;
  right: auto;
  transform: translateX(-50%);
  align-items: center;
  text-align: center;
  gap: 2px;
}
.india-fs__pin.map-pin--tip-below .map-pin__label,
.india-fs__pin.map-pin--tip-below .map-pin__label--center {
  bottom: 16px;
  top: auto;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}
/* Vizag: keep MW + type to the right of the pin, clear of Hyderabad */
.india-fs__pin--tip-east .map-pin__tip {
  left: 16px;
  bottom: 12px;
  transform: none;
  align-items: flex-start;
  text-align: left;
}
/* Mumbai: MW + type west of pin over the Arabian Sea */
.india-fs__pin--tip-west .map-pin__tip {
  left: auto;
  right: 16px;
  bottom: 12px;
  transform: none;
  align-items: flex-end;
  text-align: right;
}
@keyframes indiaFsPinIn {
  from { opacity: 0; transform: translate(-50%, calc(-50% + 10px)); }
  to   { opacity: 1; transform: translate(-50%, -50%); }
}
body.india-fs-open { overflow: hidden; }

@media (max-width: 768px) {
  .india-fs__title { font-size: clamp(1.1rem, 4.5vw, 1.45rem); }
  .india-fs__pin .map-pin__label b { font-size: 0.68rem; }
  .india-fs__pin .map-pin__tip b { font-size: 0.85rem; }
  .india-fs__pin .map-pin__tip span { font-size: 0.58rem; }
  .india-fs__stage { border-radius: 14px; }
  .india-fs__map { padding: 0.25rem 0.75rem 0.85rem; }
}
@media (prefers-reduced-motion: reduce) {
  .india-fs,
  .india-fs__panel,
  .india-fs__pin { transition: none; animation: none; }
  .india-fs__pin { opacity: 1; }
}

/* ============================================================
   MOBILE OPTIMIZATION — site-wide pass
   ============================================================ */

/* Content images scale; fill-layer map/stage assets keep their own height rules */
.panel__media img,
.showcase__video,
.shot img {
  max-width: 100%;
  height: auto;
}
.psp-map > img,
.map-console__img,
.map-console__hero,
.india-fs__img,
.india-fs__state,
.power-bg {
  max-width: none;
}

@media (max-width: 1024px) {
  .panel--right .chips {
    flex-wrap: wrap;
    justify-content: flex-start;
  }
  .panel--right .chips span {
    white-space: normal;
  }
}

@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
    max-width: 100%;
  }

  .btn,
  .featlist--layers .feat[role="button"],
  .featlist--layers .feat[tabindex="0"] {
    min-height: 44px;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }

  .title,
  .display,
  .display--sm {
    overflow-wrap: break-word;
    word-break: break-word;
    hyphens: auto;
    max-width: 100%;
  }
  .body,
  .lede,
  .feat span,
  .feat b {
    overflow-wrap: break-word;
    max-width: 100%;
  }

  .panel--center .stats {
    justify-content: flex-start;
    gap: 0.55rem;
    margin-top: 1.5rem;
    width: 100%;
  }
  .panel--center .stat {
    min-width: calc(50% - 0.35rem);
    flex: 1 1 calc(50% - 0.35rem);
  }
  .panel--center .stat b {
    font-size: clamp(1.25rem, 5vw, 1.55rem);
  }
  .stats--divided {
    gap: 0.85rem 1.1rem;
  }

  .showcase__note {
    font-size: 0.72rem;
    line-height: 1.45;
    letter-spacing: 0.06em;
    overflow-wrap: anywhere;
  }
  .panel--right .showcase__note {
    text-align: left;
  }
  .showcase__strip {
    flex-wrap: wrap;
  }
  .shot img {
    height: auto;
    aspect-ratio: 16 / 10;
    object-fit: cover;
  }

  .stack-details-action {
    justify-content: stretch;
    margin-top: 1rem;
  }
  .stack-details-action .btn {
    width: 100%;
    text-align: center;
  }

  .energyos-br,
  .panel-visit,
  .panel-br {
    position: static !important;
    right: auto !important;
    bottom: auto !important;
    margin-top: 1.5rem !important;
    align-items: flex-start !important;
    text-align: left !important;
    max-width: 100% !important;
  }
  .energyos-br .btn,
  .panel-br .btn {
    width: 100%;
    white-space: normal;
    text-align: center;
  }
  .panel-visit {
    overflow-wrap: anywhere;
  }

  /* World map: show the entire map (all region pins, incl. USA) in one
     view on mobile rather than cropping to fill the viewport height. A
     modest 20% zoom (every pin sits within the image's middle ~83%, so
     nothing gets cropped) fills the dead space a plain full-width fit
     leaves, and centering on 40% — biased toward the shorter capacity
     badge above rather than the taller HUD text block below — closes
     the gap that used to show above the map. */
  .map-console__map {
    width: 120vw;
    left: 50%;
    top: 40%;
    transform: translate(-50%, -50%);
  }
  .map-capacity {
    left: calc(0.75rem + var(--safe-left)) !important;
    right: auto !important;
    bottom: calc(10.5rem + var(--safe-bottom)) !important;
    top: auto !important;
    max-width: min(calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)), 340px) !important;
  }
  .map-capacity__card {
    padding: 0.55rem 0.8rem;
  }
  .map-capacity__text {
    font-size: clamp(0.68rem, 2.8vw, 0.82rem);
  }

  /* Standalone colo map: capacity under nav, HUD full-width bottom */
  .map-console[data-immediate] .map-capacity {
    /* See matching comment in colo-compute.html: --nav-bar-height under-
       counts the real (44px hamburger-driven) nav row on mobile, so this
       needs a bigger add-on than the var alone to clear the nav. */
    top: calc(var(--nav-bar-height) + 1.75rem) !important;
    bottom: auto !important;
    max-width: min(calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)), 320px) !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .map-console[data-immediate] .map-console__hud {
    left: calc(0.75rem + var(--safe-left));
    right: calc(0.75rem + var(--safe-right));
    width: auto;
    max-width: none;
    bottom: calc(0.75rem + var(--safe-bottom));
    text-align: left;
    align-items: stretch;
  }
  .map-console[data-immediate] .map-console__hud .eyebrow {
    justify-content: flex-start;
    flex-direction: row;
    margin-top: 0;
  }
  .map-console[data-immediate] .map-console__hud .title {
    text-align: left;
    white-space: normal;
  }
  .map-console[data-immediate] .map-console__hud .actions {
    flex-direction: column;
    align-items: stretch;
    justify-content: stretch;
    gap: 0.55rem;
  }
  .map-console[data-immediate] .map-console__hud .actions .btn,
  .map-console__hud .actions .btn {
    width: 100%;
    text-align: center;
    min-height: 44px;
  }

  .map-console__hud {
    width: min(92vw, 400px);
    max-width: calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right));
  }
  .map-console__hud .title {
    white-space: normal;
    line-height: 1.12;
  }
  .map-console__hud .actions {
    flex-direction: column;
    align-items: stretch;
    gap: 0.55rem;
  }

  .map-pin--india .map-pin__label {
    max-width: min(46vw, 11rem);
  }
  .map-pin--india .map-pin__cta {
    margin-top: 0.3rem;
    padding: 0.35rem 0.65rem;
    font-size: 0.6rem;
    min-height: 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }
  .map-india-hit {
    width: max(12%, 56px);
    min-height: 56px;
  }
  button.map-pin--link::before {
    width: 56px;
    height: 56px;
  }

  .detail-modal {
    padding:
      calc(0.75rem + var(--safe-top))
      calc(0.65rem + var(--safe-right))
      calc(0.75rem + var(--safe-bottom))
      calc(0.65rem + var(--safe-left));
  }
  .detail-modal__panel {
    max-height: min(92dvh, 860px);
    padding: 1.15rem 1rem 1.25rem;
    border-radius: 12px;
  }
  .detail-modal__close {
    width: 44px;
    height: 44px;
  }

  .panel--stack-headings .feat b {
    font-size: clamp(0.82rem, 3.2vw, 0.94rem);
    line-height: 1.35;
  }

  .eyebrow {
    letter-spacing: 0.2em;
    font-size: 0.72rem;
    gap: 0.55rem;
  }
  .eyebrow::before {
    width: 26px;
  }

  .cases {
    gap: 0.45rem 0.65rem;
  }
  .cases span:not(:last-child)::after {
    margin-left: 0.45rem;
  }

  .india-fs__close {
    width: 44px;
    height: 44px;
  }
  .india-fs__stage {
    width: min(100%, calc((100dvh - 5.5rem - var(--safe-top) - var(--safe-bottom)) * 903 / 847));
    max-height: calc(100dvh - 5.5rem - var(--safe-top) - var(--safe-bottom));
  }
  .india-fs__heading {
    max-width: min(94vw, 420px);
    right: calc(0.75rem + var(--safe-right));
    bottom: calc(0.75rem + var(--safe-bottom));
  }

  /* Keep long feature lists readable without colliding with the nav stack */
  .featlist {
    width: 100%;
    max-width: 100%;
  }
  .chips {
    width: 100%;
  }
  .actions {
    width: 100%;
  }
}

@media (max-width: 480px) {
  .display {
    font-size: clamp(1.85rem, 9.5vw, 2.6rem);
  }
  .display--sm {
    font-size: clamp(1.75rem, 8.5vw, 2.35rem);
  }
  .title {
    font-size: clamp(1.35rem, 6vw, 1.75rem);
  }
  .lede {
    font-size: 0.95rem;
    margin-top: 1.25rem;
  }
  .body {
    font-size: 0.92rem;
  }
  .panel--center .stat {
    min-width: 100%;
    flex: 1 1 100%;
  }
  .stats--divided .stat + .stat {
    border-left: none;
    padding-left: 0;
    border-top: 2px solid color-mix(in srgb, var(--accent) 65%, transparent);
    padding-top: 0.9rem;
  }
  .map-capacity {
    bottom: calc(12.5rem + var(--safe-bottom)) !important;
    max-width: calc(100vw - 1.5rem - var(--safe-left) - var(--safe-right)) !important;
  }
  .map-capacity__icon {
    width: 40px;
    height: 40px;
  }
  .chips span {
    font-size: 0.68rem;
    padding: 0.4rem 0.75rem;
  }
  .panel {
    padding-left: calc(1rem + var(--safe-left));
    padding-right: calc(1rem + var(--safe-right));
  }
  .feat {
    padding: 0.65rem 0.78rem;
  }
  .india-fs__stage {
    border-radius: 10px;
  }
}

/* Small phones (iPhone SE / 390-class) */
@media (max-width: 390px) {
  :root {
    --nav-bar-height: calc(2.85rem + var(--safe-top));
    --menu-bar-height: 2.65rem;
  }
  .title {
    font-size: clamp(1.25rem, 6.2vw, 1.55rem);
    line-height: 1.18;
  }
  .body {
    font-size: 0.9rem;
    line-height: 1.5;
  }
  .eyebrow {
    font-size: 0.68rem;
    letter-spacing: 0.16em;
  }
  .stat b {
    font-size: 1.35rem;
  }
  .btn {
    padding: 0.82rem 1rem;
    font-size: 0.8rem;
  }
  .rail--detail .rail__labels {
    font-size: 0.72rem;
  }
  .nav__logo {
    height: 1.55rem;
  }
}

@media (max-width: 768px) and (max-height: 640px) {
  .panel {
    padding-bottom: calc(8vh + var(--safe-bottom));
  }
  .map-capacity {
    bottom: calc(9rem + var(--safe-bottom)) !important;
  }
  .map-console[data-immediate] .map-capacity {
    top: calc(var(--nav-bar-height) + 1.75rem) !important;
    bottom: auto !important;
  }
  .map-console__hud {
    width: min(92vw, 360px);
  }
  .map-console[data-immediate] .map-console__hud {
    width: auto;
  }
  .featlist { gap: 0.35rem; margin-top: 0.85rem; }
  .feat { padding: 0.55rem 0.72rem; }
  .title { font-size: clamp(1.25rem, 5vw, 1.55rem); }
}

@media (max-width: 768px) and (orientation: landscape) {
  .power-bg,
  .stage {
    object-position: center center;
  }
  .map-console__map {
    width: 118%;
    height: 100%;
    aspect-ratio: auto;
    left: 50%;
    top: 50%;
    transform: translate(-54%, -50%);
  }
  .map-console__img {
    object-fit: cover;
    height: 100%;
  }
  .map-console[data-immediate] .map-capacity {
    top: calc(var(--nav-bar-height) + 0.35rem) !important;
    bottom: auto !important;
    max-width: min(42vw, 280px) !important;
  }
  .map-console[data-immediate] .map-console__hud {
    max-width: min(46vw, 360px);
    left: auto;
    right: calc(0.75rem + var(--safe-right));
    width: auto;
    text-align: right;
    align-items: flex-end;
  }
  .map-console[data-immediate] .map-console__hud .eyebrow {
    justify-content: flex-end;
    flex-direction: row-reverse;
  }
  .map-console[data-immediate] .map-console__hud .title {
    text-align: right;
  }
  .map-console[data-immediate] .map-console__hud .actions {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: flex-end;
  }
  .map-console[data-immediate] .map-console__hud .actions .btn {
    width: auto;
    min-width: 8.5rem;
  }
}