.temasek-purple {
  color: #891798;
}
.temasek-green {
  color: #95BA29;
}
.temasek-blue {
  color: #009EE4;
}
/* Popup and slider styles */
.dp-popup {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
  opacity: 0;
  width: 960px;
  max-width: 90vw;
  z-index: 1000;
  pointer-events: none;
  transition: bottom 0.3s ease, opacity 0.3s ease;
}
/* Larger widths for bigger screens - desktop only */
@media (min-width: 1200px) {
  .dp-popup {
    width: 1100px;
  }
}
@media (min-width: 1400px) {
  .dp-popup {
    width: 1200px;
  }
}
.dp-popup.active {
  bottom: 40px;
  opacity: 1;
  pointer-events: auto;
}
.dp-popup-inner {
  position: relative;
  border-radius: 50px;
  overflow: hidden;
  height: 90vh;
  max-height: 690px;
  padding: 40px 60px;
  background: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/pop-bg.png') no-repeat center center;
  background-size: cover;
}
.dp-slide {
  display: flex;
  gap: 0;
  height: 80vh;
  max-height: 720px;
}
.dp-slide[data-dp-id="dp_1994"] .dp-slide-img img {
  object-fit: contain;
}
.dp-slider {
  padding-top: 80px;
}
.dp-slider .slick-track {
  display: flex;
}
.dp-slider .slick-slide {
  height: auto;
}
.dp-slider .dp-slide {
  display: flex !important;
  padding-bottom: 40px;
}
.dp-left {
  flex: 0 0 40%;
  padding: 0 40px 0 0;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.dp-title {
  margin: 0;
  color: #111;
  font-size: 1.875rem;
  line-height: 1.25;
  font-weight: 800;
}
.dp-left-img {
  flex: 1 1 auto;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.dp-left-img img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}
.dp-right {
  flex: 1 1 60%;
  display: flex;
  flex-direction: column;
}
.dp-right.with-video .dp-slide-img {
  height: 30vh;
}
.dp-right.with-video .dp-slide-img iframe {
  width: 100%;
  height: 100%;
}
.dp-right.with-video .dp-slide-text {
  max-height: 35%;
}
.dp-right.with-video .dp-slide-text p:first-child {
  margin-top: 20px;
}
.with-image .dp-slide-img {
  height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.with-image .dp-slide-img img {
  max-height: 100%;
  max-width: 100%;
  object-fit: cover;
  width: 100%;
}
.with-image .dp-slide-text {
  margin-top: 20px;
  max-height: 40%;
}
.with-image .dp-slide-text p:first-child {
  margin-top: 20px;
}
.with-image .dp-slide-text a {
  text-decoration: underline;
  color: #15af9b;
}
.dp-slide-text {
  padding: 0 20px 20px 0;
  margin-top: 0;
  color: #333;
  overflow: auto;
  font-size: 18px;
  line-height: 1.6;
}
.dp-slide-text p:first-child {
  margin-top: 0;
}
.dp-slide-text a {
  color: #6B46C1;
  text-decoration: underline;
  transition: opacity 0.2s ease;
}
.dp-slide-text a:hover {
  opacity: 0.7;
}
.dp-close {
  position: absolute;
  top: 0;
  right: -60px;
  padding: 0;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  background: none;
  border: none;
  width: 32px;
  height: 32px;
  z-index: 2;
  filter: invert(1);
}
/* Slick arrows positioning and custom icons */
.dp-popup-inner .slick-prev,
.dp-popup-inner .slick-next {
  position: absolute;
  top: 0;
  z-index: 2;
  width: max-content;
  height: 36px;
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;
  line-height: 1.2;
  color: #333 !important;
  background: transparent;
  transform: none;
  border: none;
  background: #fff !important;
}
.dp-popup-inner .slick-prev:hover,
.dp-popup-inner .slick-next:hover {
  color: #333 !important;
  background: #fff !important;
}
.dp-popup-inner .slick-prev img,
.dp-popup-inner .slick-next img {
  width: 36px;
  height: 36px;
}
.slick-prev,
.slick-next {
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  width: 36px;
  height: 36px;
}
.slick-prev img,
.slick-next img {
  width: 36px;
  height: 36px;
}
.dp-popup-inner .slick-prev {
  left: 0;
  text-align: left;
}
.dp-popup-inner .slick-next {
  left: auto;
  right: 0 !important;
  justify-content: flex-end;
  text-align: right;
}
.dp-popup-inner .slick-prev:before,
.dp-popup-inner .slick-next:before {
  display: none;
}
/* Overlay for popup */
.dp-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  opacity: 0;
  pointer-events: none;
  z-index: 900;
  transition: opacity 0.3s ease;
}
.dp-overlay.active {
  opacity: 1;
  pointer-events: auto;
}
body.dp-modal-open {
  overflow: hidden;
}
/* NPV Popup */
.npv-popup {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: -100%;
  opacity: 0;
  width: 960px;
  max-width: 95vw;
  height: 80vh;
  max-height: 720px;
  z-index: 1100;
  pointer-events: none;
}
@media (max-height: 900px) {
  .npv-popup {
    height: 95vh;
  }
}
/* Larger widths for bigger screens - desktop only */
@media (min-width: 1200px) {
  .npv-popup {
    width: 1100px;
  }
}
@media (min-width: 1400px) {
  .npv-popup {
    width: 1200px;
  }
}
.npv-popup-inner {
  position: absolute;
  inset: 0;
  display: flex;
  gap: 10px;
  border-radius: 24px;
  overflow: hidden;
  background: #fff url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/bg-3links.png') no-repeat center center;
  background-size: cover;
  background-clip: border-box;
  opacity: 0;
  pointer-events: none;
}
.npv-popup-inner.is-active {
  opacity: 1;
  pointer-events: auto;
}
/* Smooth cross-fade between variants */
.npv-popup-inner,
.npv-popup-inner.is-active {
  transition: opacity 0.45s ease-in-out;
}
.npv-left {
  flex: 0 0 40%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 2;
  padding: 70px 0 50px 50px;
  /* Hide scrollbar but keep scroll functionality */
  scrollbar-width: none;
  /* Firefox */
  -ms-overflow-style: none;
  /* IE/Edge */
}
.npv-left::-webkit-scrollbar {
  display: none;
  /* Chrome/Safari/Opera */
}
@media (max-height: 900px) {
  .npv-left {
    max-height: 700px;
    overflow: scroll;
  }
}
/* Keep header/links constrained to the base left width; only chart uses extra width */
.npv-links,
.npv-expand {
  max-width: 300px;
}
.npv-title {
  margin: 0;
  color: #111;
  font-size: 1.75rem;
  line-height: 1.25;
  font-weight: 800;
}
@media (max-height: 900px) {
  .npv-title {
    font-size: 1.5rem;
  }
}
.npv-links {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 20px;
}
.npv-link {
  color: #3C1053;
  text-decoration: underline;
  font-weight: 700;
  display: inline-flex;
  gap: 24px;
  font-size: 0.875rem;
}
.npv-link:before {
  content: '';
  display: inline-block;
  width: 24px;
  min-width: 24px;
  height: 21px;
  background: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/arrow_link.svg') no-repeat center center;
  background-size: contain;
}
.npv-link--green {
  color: #95BA29;
}
.npv-link--blue {
  color: #009EE4;
}
.npv-chart {
  flex: 0 0 auto;
  /* prevent vertical growth in column layout */
  display: flex;
  align-items: center;
  justify-content: flex-start;
  /* anchor chart to the left; overflow will crop */
  overflow: hidden;
  /* allow this region to absorb extra width during expand */
  width: auto;
  min-height: 0;
  /* prevent flex children from forcing growth */
  padding-top: 40px;
}
@media (max-height: 900px) {
  .npv-chart {
    padding-top: 20px;
  }
}
.npv-chart img {
  display: block;
  max-width: none;
  /* allow natural/intrinsic width beyond container */
  height: 100%;
  /* follow container height, width grows */
  max-width: 1050px;
}
.npv-expand {
  align-self: flex-start;
  padding: 0;
  border: none;
  background: transparent;
  cursor: pointer;
  display: inline-flex;
  margin-top: 20px;
}
@media (max-height: 900px) {
  .npv-expand img {
    height: 40px;
  }
}
.npv-expand .npv-svg-collapse {
  display: none;
}
.npv-left.is-overlay .npv-expand .npv-svg-expand {
  display: none;
}
.npv-left.is-overlay .npv-expand .npv-svg-collapse {
  display: inline;
}
.npv-right {
  flex: 1 1 60%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  z-index: 1;
  background: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/3links-shadow.png') no-repeat left center;
  background-size: auto;
  padding: 70px 70px 50px 70px;
  transition: opacity 0.3s ease;
}
.npv-right.is-dimmed {
  opacity: 0;
  pointer-events: none;
}
/* Overlay state: left panel floats above right and can grow over it */
.npv-left.is-overlay {
  position: absolute;
  background: #fff url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/bg-3links.png') no-repeat center center;
  background-size: cover;
  background-clip: border-box;
  box-sizing: border-box;
  border: 0;
  /* avoid sub-pixel expansion */
}
.npv-left.is-overlay .npv-chart img {
  width: 100%;
}
.npv-text {
  color: #333;
  max-height: 510px;
  overflow-y: auto;
  padding-right: 30px;
}
.npv-text a {
  text-decoration: underline;
  color: #15af9b;
}
.npv-logos {
  margin-top: auto;
  display: block;
}
.npv-logos.slick-slider {
  padding: 0 28px;
  position: relative;
  overflow: visible;
}
.npv-logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 120px;
  padding: 0 15px;
}
.npv-logo a {
  display: grid;
  grid-template-rows: 60px auto;
  grid-gap: 8px;
  align-items: start;
  justify-items: center;
  text-decoration: none;
  max-width: 100%;
  width: 100%;
}
.npv-logo img {
  max-width: 100%;
  max-height: 60px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  align-self: center;
}
.npv-logo-name {
  font-size: 12px;
  text-align: center;
  color: #242A2D;
  text-decoration: underline;
  max-width: 150px;
  line-height: 1.3;
}
/* Logos without links */
.npv-logo > img {
  max-width: 100%;
  max-height: 60px;
  height: 60px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.npv-logo > .npv-logo-name {
  text-decoration: none;
  margin-top: 8px;
}
/* Slick arrows: center vertically, left/right of slider */
.npv-logos .slick-prev,
.npv-logos .slick-next {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  width: 30px;
  height: 30px;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  background: transparent !important;
}
.npv-logos .slick-prev {
  left: -40px;
}
.npv-logos .slick-next {
  right: -40px;
}
.npv-logos .slick-prev img,
.npv-logos .slick-next img {
  display: block;
  width: 100%;
  height: 100%;
}
.npv-close {
  position: absolute;
  top: 24px;
  right: 40px;
  background: none;
  border: none;
  width: 30px;
  height: 30px;
  padding: 0;
  cursor: pointer;
  z-index: 2;
}
/*
  Mobile Main Styles
  ==================
  Base mobile styles for timeline visualization
*/
/* Mobile graph wrapper */
.mobile-timeline-container {
  display: none;
  /* Hidden by default, shown by JS on mobile */
  width: 100%;
  position: relative;
  overflow: visible;
  /* Changed from hidden to see if this causes the white line */
}
/* Mobile graph container */
.mobile-graph-container {
  width: 100%;
  height: 360px;
  display: block;
  /* Always visible */
  position: relative;
  margin-bottom: 5px;
  padding: 0;
  border: none;
  outline: none;
  box-shadow: none;
  /* Enable horizontal scrolling */
  overflow-x: auto;
  overflow-y: hidden;
  /* Prevent vertical scrolling and scrollbar */
  -webkit-overflow-scrolling: touch;
  /* Smooth scrolling on iOS */
  /* Hide scrollbar but keep scroll functionality */
  /* Firefox */
  scrollbar-width: none;
  /* IE/Edge */
  -ms-overflow-style: none;
  /* Cursor animation overlay - only over graph */
}
.mobile-graph-container::-webkit-scrollbar {
  width: 0;
  /* Remove vertical scrollbar width */
  height: 0;
  /* Remove horizontal scrollbar height */
}
.mobile-graph-container::-webkit-scrollbar-track {
  background: transparent;
}
.mobile-graph-container::-webkit-scrollbar-thumb {
  background: transparent;
}
.mobile-graph-container .cursor-overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transform: translateY(-40px);
}
.mobile-graph-container .cursor-overlay img {
  width: 80px;
  height: auto;
}
/* Mobile SVG */
.mobile-timeline-svg {
  margin-left: -30px;
  display: block;
  max-width: none;
  /* Allow to extend beyond viewport */
  border: none;
  outline: none;
  stroke: none;
}
/* Decade navigation - based on Figma design */
.decade-navigation {
  display: none;
  /* Hidden by default, shown on mobile */
  gap: 0;
  margin-bottom: 20px;
}
/* Show decade navigation on mobile */
@media (max-width: 1023px) {
  .decade-navigation {
    display: flex;
  }
}
.decade-btn {
  border: 0.5px solid #fff;
  background: none;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 600;
  line-height: 1.362;
  cursor: pointer;
  padding: 10px 30px;
  position: relative;
  -webkit-tap-highlight-color: transparent;
  width: 120px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  /* First button - rounded left */
  /* Last button - rounded right */
  /* Middle button - no border radius */
}
.light-mode .decade-btn {
  border-color: #333;
  color: #333;
}
.decade-btn:first-child {
  border-radius: 50px 0 0 50px;
}
.decade-btn:last-child {
  border-radius: 0 50px 50px 0;
}
.decade-btn:not(:first-child):not(:last-child) {
  border-radius: 0;
}
.decade-btn.active {
  background: #fff;
  color: #891798;
  border-color: #fff;
}
.decade-btn:active {
  opacity: 0.8;
}
/* Decade description text */
.decade-text-container {
  display: none;
  /* Hidden by default, shown on mobile */
  padding: 0;
  color: #fff;
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-style: normal;
  opacity: 0;
  margin-bottom: 40px;
  margin-top: 10px;
}
.light-mode .decade-text-container {
  color: #333;
}
.decade-text-container .filter-box {
  display: flex;
  position: relative;
  z-index: 1;
  border: solid 1px #fff;
  border-radius: 30px;
  overflow: hidden;
  flex-direction: column;
}
.light-mode .decade-text-container .filter-box {
  border-color: #333;
}
.decade-text-container .filter-box.expand {
  height: auto;
  border-radius: 10px;
}
.decade-text-container .filter-box.expand::before,
.decade-text-container .filter-box.expand::after {
  opacity: 0;
}
.decade-text-container .filter-box.expand .filter-item {
  display: flex;
}
.decade-text-container .filter-box::before,
.decade-text-container .filter-box::after {
  content: '';
  position: absolute;
  top: 0px;
  right: 15px;
  font-size: 16px;
  height: 20px;
  bottom: 0;
  margin: auto;
  display: block;
  width: 8px;
  height: 1px;
  background: #000;
  transform: rotate(-45deg);
  z-index: 1;
}
.decade-text-container .filter-box::after {
  transform: rotate(45deg);
  right: 20px;
}
.decade-text-container .filter-box .filter-item {
  display: flex;
  padding: 10px 30px 10px 10px;
  align-items: center;
  display: none;
  width: 100%;
  box-sizing: border-box;
}
.decade-text-container .filter-box .filter-item.selected {
  position: relative;
  display: flex;
  background: #fff;
  color: #000;
}
.decade-text-container .filter-box .filter-item .filter-color {
  width: 12px;
  height: 12px;
  border-radius: 30px;
  margin-right: 8px;
  display: block;
}
.decade-text-container .filter-box .filter-item .filter-color.filter-purple {
  background-color: #9B51E0;
}
.decade-text-container .filter-box .filter-item .filter-color.filter-blue {
  background-color: #2F80ED;
}
.decade-text-container .filter-box .filter-item .filter-color.filter-green {
  background-color: #27AE60;
}
/* Show decade text on mobile */
@media (max-width: 1023px) {
  .decade-text-container {
    display: block;
  }
  /* T-point tooltip (desktop only) */
  .tpoint-tooltip,
  .month-tooltip {
    position: fixed;
    background: #FFFFFF;
    color: #000000;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    z-index: 9999;
    pointer-events: none;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 300px;
  }
}
/* NPV Category Buttons Container - outside timeline container */
.mobile-npv-buttons {
  display: none;
  /* Hidden by default, shown by JS on mobile */
  flex-direction: column;
  gap: 0;
  padding: 0 0 20px;
}
/* Show mobile NPV buttons on mobile */
@media (max-width: 1023px) {
  .mobile-npv-buttons {
    display: flex;
  }
}
/* Three buttons SVG - mobile specific */
.mobile-npv-buttons .three-buttons {
  width: 100%;
  height: 76px;
  cursor: pointer;
  display: flex;
  flex-direction: row;
  gap: 0;
}
.mobile-npv-buttons .purple-button-npv,
.mobile-npv-buttons .blue-button-npv,
.mobile-npv-buttons .green-button-npv {
  width: 33.33%;
  height: 100%;
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  cursor: pointer;
}
.mobile-npv-buttons .purple-button-npv {
  background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/purple-button-npv-m.svg');
}
.mobile-npv-buttons .blue-button-npv {
  background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/blue-button-npv-m.svg');
}
.mobile-npv-buttons .green-button-npv {
  background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/green-button-npv-m.svg');
}
/* Mobile Decade Content Section */
.mobile-decade-content {
  display: none;
  /* Hidden by default, shown on mobile */
  padding: 20px 0;
  color: #fff;
}
.light-mode .mobile-decade-content {
  color: #333;
}
@media (max-width: 1023px) {
  .mobile-decade-content {
    display: block;
  }
}
.decade-content-item {
  display: none;
}
.decade-content-item.active {
  display: block;
}
.decade-content-title {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 800;
  font-style: normal;
  font-size: 24px;
  line-height: 100%;
  letter-spacing: 0%;
  text-transform: uppercase;
  margin: 0 0 15px 0;
  color: #fff;
}
.light-mode .decade-content-title {
  color: #333;
}
.decade-content-list {
  list-style: none;
  padding: 0;
  margin: 0;
}
.decade-content-list li {
  font-family: 'Noto Sans', sans-serif;
  font-weight: 400;
  font-size: 14px;
  line-height: 150%;
  color: #fff;
  padding-left: 20px;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  margin-bottom: 12px;
}
.light-mode .decade-content-list li {
  color: #333;
}
.decade-content-list li:before {
  content: '•';
  position: absolute;
  left: 0;
  color: #fff;
}
.light-mode .decade-content-list li:before {
  color: #333;
}
.decade-content-list li:last-child {
  margin-bottom: 0;
}
/* Pulse animation for mobile dots */
@keyframes mobile-pulse {
  0% {
    r: 8;
    opacity: 0.7;
  }
  50% {
    r: 12;
    opacity: 0.3;
  }
  100% {
    r: 8;
    opacity: 0.7;
  }
}
.mobile-timeline-svg .pulse-ring {
  animation: mobile-pulse 2s ease-in-out infinite;
}
/* Mobile-specific typography */
@media (max-width: 1023px) {
  .journey-of-growth {
    font-size: 14px;
  }
  /* Hero mobile adjustments */
  .hero {
    padding: 70px 20px 100px;
  }
  /* Ensure desktop is hidden */
  .timeline-container {
    display: none;
  }
  /* Show mobile */
  .mobile-timeline-container {
    display: block;
  }
  /* Fix content flex layout for mobile */
  .content {
    display: block;
    margin-bottom: 20px;
  }
  /* Mobile title styling */
  .title-wrap {
    margin-bottom: 10px;
    flex: none;
  }
  .title-wrap .title {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 800;
    font-size: 20px;
    text-transform: uppercase;
    margin: 0;
  }
  /* Mobile description styling */
  .description {
    margin-bottom: 20px;
  }
  .description p {
    font-family: 'Noto Sans', sans-serif;
    font-weight: 400;
    margin: 0 0 10px 0;
  }
  .description p:last-child {
    margin-bottom: 0;
  }
}
/* Mobile marker and hover indicator */
#mobile-marker-container {
  z-index: 50;
}
#mobile-marker {
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}
#mobile-hover-indicator {
  pointer-events: none;
}
.mobile-hover-line {
  stroke: #C8B2CE;
  stroke-width: 2;
  stroke-dasharray: 4, 4;
  opacity: 0.7;
}
.light-mode .mobile-hover-line {
  stroke: #333;
}
.mobile-hover-dot {
  filter: drop-shadow(0px 2px 4px rgba(0, 0, 0, 0.3));
}
.mobile-hover-label {
  fill: #fff;
  font-family: 'Noto Sans', sans-serif;
  font-size: 10px;
  font-weight: 600;
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.light-mode .mobile-hover-label {
  fill: #333;
  text-shadow: none;
}
.mobile-drag-area {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* Milestone tooltip box */
.milestone-tooltip-box {
  filter: drop-shadow(0px 2px 8px rgba(0, 0, 0, 0.25));
}
/* Milestone percentage labels */
.mobile-timeline-svg text[class^="milestone-percentage-"] {
  text-shadow: 0px 1px 2px rgba(0, 0, 0, 0.8);
}
.light-mode .mobile-timeline-svg text[class^="milestone-percentage-"] {
  text-shadow: none;
}
/* Touch optimizations */
@media (hover: none) and (pointer: coarse) {
  /* This is a touch device */
  * {
    -webkit-tap-highlight-color: transparent;
  }
  button,
  .clickable {
    touch-action: manipulation;
    /* Prevent double-tap zoom */
  }
}
/*
  Mobile Popup Styles - NPV Category Popups
  ==========================================
  Styles for category detail popups (TPC, GDI, PFA)
*/
/*
  Mobile Popup Base Styles
  =========================
  Shared styles for all mobile popups
*/
/* Base popup overlay */
.mobile-popup-base,
.mobile-npv-popup,
.mobile-dp-popup {
  position: fixed;
  top: 60px;
  left: 20px;
  width: calc(100vw - 20px);
  height: 100vh;
  background: transparent;
  z-index: 1000;
  display: none;
  overflow: visible;
}
/* Base popup content wrapper */
.popup-content-wrapper-base,
.mobile-npv-popup .popup-content-wrapper,
.mobile-dp-popup .dp-popup-content-wrapper {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  background: #fff;
  border-radius: 50px 0 0 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: translateY(100%);
}
/* Base popup header */
.popup-header-base,
.mobile-npv-popup .popup-header {
  position: relative;
  background: #fff;
  padding: 30px;
}
.popup-header-base .popup-title,
.mobile-npv-popup .popup-header .popup-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.36;
  color: #242A2D;
  margin: 20px 0 0;
}
.popup-header-base .close-btn,
.mobile-npv-popup .popup-header .close-btn {
  position: absolute;
  top: 15px;
  right: 30px;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  font-size: 32px;
  color: #242A2D;
  cursor: pointer;
  padding: 0;
  line-height: 1;
  -webkit-tap-highlight-color: transparent;
}
.popup-header-base .close-btn:active,
.mobile-npv-popup .popup-header .close-btn:active {
  opacity: 0.7;
}
/* Base popup content */
.popup-content-base {
  padding: 30px;
}
.popup-content-base p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.36;
  color: #242A2D;
  margin: 0 0 20px 0;
}
/* NPV Popup - extends base */
.mobile-npv-popup .popup-header {
  position: sticky;
  top: 0;
  padding: 50px 30px 20px;
  z-index: 10;
  background: #fff;
  border-radius: 50px 0 0 0;
}
/* NPV-specific popup content */
.mobile-npv-popup .popup-content {
  padding: 30px;
  position: relative;
  z-index: 1;
  /* Links section - at top per Figma */
  /* Chart in popup - with horizontal scroll */
  /* Description text */
  /* Company logos slider */
}
.mobile-npv-popup .popup-content .popup-links {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-bottom: 30px;
  position: relative;
  z-index: 1;
}
.mobile-npv-popup .popup-content .popup-links a {
  display: flex;
  align-items: center;
  gap: 10px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.36;
  text-decoration: none;
  padding: 6px 0;
  font-weight: 700;
  text-decoration: underline;
}
.mobile-npv-popup .popup-content .popup-links a.link-tpc {
  color: #891798;
}
.mobile-npv-popup .popup-content .popup-links a.link-gdi {
  color: #009EE4;
}
.mobile-npv-popup .popup-content .popup-links a.link-pfa {
  color: #95BA29;
}
.mobile-npv-popup .popup-content .popup-links a svg {
  width: 18px;
  height: 10px;
  flex-shrink: 0;
}
.mobile-npv-popup .popup-content .popup-links a:active {
  opacity: 0.7;
}
.mobile-npv-popup .popup-content .popup-chart {
  margin-bottom: 30px;
  width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  /* Custom scrollbar styling */
}
.mobile-npv-popup .popup-content .popup-chart .scroll-for-more {
  font-size: 0.75rem;
  text-align: center;
  opacity: 0.4;
  position: fixed;
  right: 40px;
  margin-top: -40px;
  display: none;
}
.mobile-npv-popup .popup-content .popup-chart img {
  display: block;
  max-width: none;
  height: auto;
  width: 835px;
  /* Fixed width for horizontal scroll */
}
.mobile-npv-popup .popup-content .popup-chart::-webkit-scrollbar {
  height: 6px;
}
.mobile-npv-popup .popup-content .popup-chart::-webkit-scrollbar-track {
  background: rgba(36, 42, 45, 0.1);
  border-radius: 3px;
}
.mobile-npv-popup .popup-content .popup-chart::-webkit-scrollbar-thumb {
  background: rgba(36, 42, 45, 0.3);
  border-radius: 3px;
}
.mobile-npv-popup .popup-content .popup-chart::-webkit-scrollbar-thumb:active {
  background: rgba(36, 42, 45, 0.5);
}
.mobile-npv-popup .popup-content .popup-copy {
  margin-bottom: 30px;
}
.mobile-npv-popup .popup-content .popup-copy p {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  line-height: 1.36;
  color: #242A2D;
  margin: 0 0 20px 0;
}
.mobile-npv-popup .popup-content .popup-copy a {
  color: #15af9b;
  text-decoration: underline;
}
.mobile-npv-popup .popup-content .popup-copy a:active {
  opacity: 0.7;
}
.mobile-npv-popup .popup-content .popup-companies {
  margin-bottom: 50px;
  padding-bottom: 20px;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos {
  /* Slick carousel will be initialized here */
  padding: 0;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  min-height: 90px;
  max-width: 120px;
  padding: 0 10px;
  /* Logos without links */
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo a {
  display: grid;
  grid-template-rows: 50px auto;
  grid-gap: 6px;
  align-items: start;
  justify-items: center;
  text-decoration: none;
  max-width: 100%;
  width: 100%;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo img {
  max-width: 100%;
  max-height: 50px;
  width: auto;
  height: auto;
  object-fit: contain;
  display: block;
  margin: auto;
  align-self: center;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo .company-name {
  font-family: 'Noto Sans', sans-serif;
  font-size: 10px;
  font-weight: 400;
  line-height: 1.3;
  color: #242A2D;
  text-align: center;
  text-decoration: underline;
  max-width: 120px;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo > img {
  max-width: 100%;
  max-height: 50px;
  height: 50px;
  width: auto;
  object-fit: contain;
  display: block;
  margin: 0 auto;
}
.mobile-npv-popup .popup-content .popup-companies .npv-logos .npv-logo > .company-name {
  text-decoration: none;
  margin-top: 6px;
}
/*
  Mobile DP Popup Styles - Datapoint Event Popups
  ================================================
  Styles for event datapoint detail popups
*/
/* DP Popup - extends base */
.mobile-dp-popup {
  top: 120px;
}
.mobile-dp-popup .dp-popup-content-wrapper {
  position: relative;
  height: calc(100vh - 120px);
}
/* Close button at wrapper level for DP popup only */
.mobile-dp-popup .dp-popup-content-wrapper > .close-btn {
  position: absolute;
  top: 30px;
  right: 30px;
  z-index: 1002;
  background: none;
  border: none;
  width: 40px;
  height: 40px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
/* DP Popup content */
.dp-popup-content {
  padding: 110px 30px 30px 30px;
  position: relative;
  /* Mobile DP Slider */
}
.dp-popup-content .mobile-dp-slider {
  position: relative;
}
/* Event title inside each slide */
.mobile-dp-popup .dp-event-title {
  font-family: 'Noto Sans', sans-serif;
  font-size: 24px;
  font-weight: 800;
  line-height: 1.36;
  color: #242A2D;
  margin: 0 0 20px 0;
}
/* Slick navigation arrows at top */
.mobile-dp-popup .mobile-dp-slider .slick-arrow {
  position: absolute !important;
  top: -80px !important;
  bottom: auto !important;
  z-index: 1001;
  width: 36px;
  height: 36px;
  border: none !important;
  background: transparent !important;
  padding: 0 !important;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.mobile-dp-popup .mobile-dp-slider .slick-arrow img {
  width: 36px !important;
  height: 36px !important;
  display: block !important;
}
.mobile-dp-popup .mobile-dp-slider .slick-arrow:active {
  opacity: 0.7;
}
.mobile-dp-popup .mobile-dp-slider .slick-arrow.slick-disabled {
  opacity: 0.3;
  pointer-events: none;
}
.mobile-dp-popup .mobile-dp-slider .slick-arrow:before,
.mobile-dp-popup .mobile-dp-slider .slick-arrow:after {
  display: none !important;
  content: none !important;
}
.mobile-dp-popup .mobile-dp-slider .slick-prev {
  left: 0 !important;
}
.mobile-dp-popup .mobile-dp-slider .slick-next {
  left: 48px !important;
}
/* Graph image (first image) */
.mobile-dp-popup .dp-graph-image {
  width: 100%;
  margin-bottom: 20px;
}
.mobile-dp-popup .dp-graph-image img {
  width: 100%;
  height: auto;
  display: block;
}
/* Event image (second image) */
.mobile-dp-popup .dp-event-image {
  width: 100%;
  height: 150px;
  margin-bottom: 20px;
  border-radius: 10px;
  overflow: hidden;
  background: #f0f0f0;
}
.mobile-dp-popup .dp-event-image.with-video {
  height: 200px;
}
.mobile-dp-popup .dp-event-image.with-video iframe {
  width: 100%;
  height: 100%;
  border: none;
}
.mobile-dp-popup .dp-event-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
/* Event description */
.mobile-dp-popup .dp-event-description {
  font-family: 'Noto Sans', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #242A2D;
  margin-bottom: 60px;
}
.mobile-dp-popup .dp-event-description p {
  margin: 0 0 15px 0;
}
.mobile-dp-popup .dp-event-description p:last-child {
  margin-bottom: 0;
}
.mobile-dp-popup .dp-event-description a {
  color: #15af9b;
  text-decoration: underline;
  transition: opacity 0.2s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-dp-popup .dp-event-description a:active {
  opacity: 0.7;
}
/*
  Mobile Tooltip Styles
  ======================
  Styles for milestone dot tooltips
*/
/* Tooltip */
.mobile-tooltip {
  position: fixed;
  background: rgba(0, 0, 0, 0.9);
  color: #fff;
  padding: 10px 15px;
  border-radius: 8px;
  font-family: 'Noto Sans', sans-serif;
  font-size: 12px;
  font-weight: 400;
  line-height: 1.36;
  z-index: 2000;
  pointer-events: none;
  display: none;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
  /* Arrow pointing down */
}
.mobile-tooltip::after {
  content: '';
  position: absolute;
  bottom: -8px;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid rgba(0, 0, 0, 0.9);
}
.mobile-tooltip .tooltip-content strong {
  font-weight: 700;
  display: block;
  margin-bottom: 5px;
}
body {
  margin: 0;
  background-color: #2d184d;
}
body.light-mode {
  background-color: #f5f5f5;
}
body.focus-year .scroll-to-left-arrow,
body.focus-year .scroll-to-right-arrow,
body.focus-year .tpoint-tooltip {
  display: none !important;
}
body.focus-year #T_points * {
  pointer-events: none;
}
body.focus-year .timeline-container {
  cursor: default;
}
body.demo footer {
  background: white !important;
}
body.demo .html.parbase.section {
  margin-bottom: 0 !important;
}
body.demo .slick-slider .slick-arrow:hover,
body.demo .slick-slider .slick-arrow:focus {
  color: none !important;
  background: none !important;
}
body.demo .slick-slider .slick-arrow {
  border: none !important;
}
body.demo .slick-slider .slick-arrow:before {
  display: none !important;
  content: none !important;
}
body.demo .slick-slider .slick-arrow:after {
  display: none !important;
  content: none !important;
}
body .dp-close img {
  max-width: none !important;
}
.sectionbanner.image-video-banner {
  display: none !important;
}
#theme-toggle {
  display: flex;
  gap: 10px;
  align-items: center;
  position: absolute;
  right: 40px;
}
@media (max-width: 1023px) {
  #theme-toggle {
    position: static;
    margin-bottom: 40px;
  }
}
#theme-toggle.dark-mode button span {
  margin: auto 0 auto auto;
}
#theme-toggle.light-mode p {
  color: #333;
}
#theme-toggle.light-mode button {
  border-color: #333;
}
#theme-toggle button {
  padding: 5px;
  border-radius: 20px;
  width: 70px;
  border: solid 1px #fff;
  background: transparent;
  height: 30px;
  cursor: pointer;
}
#theme-toggle button span {
  width: 20px;
  height: 20px;
  background: #00af9b;
  border-radius: 20px;
  display: block;
}
#theme-toggle p {
  margin: 0;
}
.journey-of-growth {
  font-family: 'Noto Sans', system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif !important;
  padding-top: 50px;
  /* Base styles for all screens */
  /* Desktop styles (1024px and up) */
  /* Smaller desktop screens */
  /* Desktop timeline layout */
  /* Non-desktop: ensure full content stacks naturally */
}
.journey-of-growth .slick-slider .slick-arrow:before {
  display: none !important;
  content: none !important;
}
.journey-of-growth .slick-slider .slick-arrow:after {
  display: none !important;
  content: none !important;
}
.journey-of-growth .title {
  padding: 0 !important;
  line-height: 1.2 !important;
  max-width: none !important;
}
.journey-of-growth .hero {
  position: relative;
  color: #fff;
}
.journey-of-growth .content {
  box-sizing: border-box;
  color: #fff;
}
.journey-of-growth .title-wrap {
  min-width: 0;
}
.journey-of-growth .title {
  margin: 0;
  text-transform: uppercase;
  font-weight: 800;
  font-style: normal;
  color: #fff;
}
.light-mode .journey-of-growth .title {
  color: #333;
}
.journey-of-growth .description {
  min-width: 0;
  color: #fff;
  font-weight: 400;
  font-style: normal;
  background: rgba(0, 0, 0, 0.5);
  padding: 20px 40px;
  border-radius: 10px;
  width: 90%;
}
@media (max-width: 1023px) {
  .journey-of-growth .description {
    margin: 40px 0;
    padding: 20px;
    width: 87%;
  }
}
.light-mode .journey-of-growth .description {
  color: #333;
  background: rgba(255, 255, 255, 0.8);
  border: solid 1px #ccc;
}
@media (min-width: 1024px) {
  .journey-of-growth {
    padding-top: 200px;
  }
  .journey-of-growth .hero {
    min-height: 100vh;
    padding-top: 0px;
    padding-left: 40px;
    padding-right: 40px;
    padding-bottom: 100px;
  }
  .journey-of-growth .content {
    margin-bottom: 0;
  }
  .focus-year .journey-of-growth .content {
    margin-bottom: 40px;
  }
  .journey-of-growth .title-wrap {
    flex: 1 1 60%;
    margin-bottom: 40px;
  }
  .journey-of-growth .title {
    font-size: 52px !important;
  }
  .journey-of-growth .description {
    flex: 1 1 40%;
    font-size: 18px !important;
  }
}
@media (max-width: 640px) {
  .journey-of-growth .title {
    font-size: 36px !important;
  }
}
@media (min-width: 1024px) {
  .journey-of-growth {
    /* Scroll to left arrow */
    /* Common base styles for all T-point overlays */
    /* Dots default hidden; revealed via JS */
    /* Office icons */
  }
  .journey-of-growth .timeline-container {
    overflow-x: auto;
    overflow-y: hidden;
    width: 100vw;
    max-width: 100%;
    box-sizing: border-box;
    padding-bottom: 10px;
    position: relative;
    display: grid;
    align-items: start;
    padding-right: 0px;
    padding-top: 30px;
    cursor: grab;
    user-select: none;
    scroll-behavior: smooth;
    white-space: nowrap;
    margin: auto;
    -ms-overflow-style: none;
    /* For Internet Explorer and older Edge */
    scrollbar-width: none;
    /* For Firefox */
    /* Alternatively, make the scrollbar transparent */
  }
  .journey-of-growth .timeline-container.active {
    cursor: grabbing;
  }
  .journey-of-growth .timeline-container ::-webkit-scrollbar {
    display: none;
  }
  .journey-of-growth .timeline-container ::-webkit-scrollbar {
    width: 0;
    background: transparent;
  }
  .journey-of-growth .y-axis-bg {
    left: 0;
    bottom: 0;
    margin-top: auto;
    max-width: none;
    display: block;
    z-index: 0;
    pointer-events: none;
  }
  .journey-of-growth .timeline-main-svg {
    position: relative;
    z-index: 1;
    display: block;
    margin-left: 40px;
    padding-top: 120px;
    overflow: visible;
    transition: 0.4s;
  }
  .journey-of-growth .timeline-container > .y-axis-bg,
  .journey-of-growth .timeline-container > .timeline-main-svg,
  .journey-of-growth .timeline-container > .three-buttons {
    grid-area: 1 / 1;
  }
  .journey-of-growth .scroll-to-left-arrow,
  .journey-of-growth .scroll-to-right-arrow {
    position: sticky;
    top: 130px;
    z-index: 100;
    width: 40px;
    height: 40px;
    background: transparent;
    border: none;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease, transform 0.15s ease;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    grid-area: 1 / 1;
    align-self: start;
    margin-top: -30px;
  }
  .journey-of-growth .scroll-to-left-arrow img,
  .journey-of-growth .scroll-to-right-arrow img {
    filter: invert(1);
    width: 100%;
    height: 100%;
    object-fit: contain;
  }
  .light-mode .journey-of-growth .scroll-to-left-arrow img,
  .light-mode .journey-of-growth .scroll-to-right-arrow img {
    filter: invert(0);
  }
  .journey-of-growth .scroll-to-left-arrow.visible,
  .journey-of-growth .scroll-to-right-arrow.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .journey-of-growth .scroll-to-left-arrow:hover,
  .journey-of-growth .scroll-to-right-arrow:hover {
    transform: scale(1.1);
  }
  .journey-of-growth .scroll-to-left-arrow {
    left: 50px;
    justify-self: start;
  }
  .journey-of-growth .scroll-to-left-arrow img {
    transform: scaleX(-1);
  }
  .journey-of-growth .scroll-to-right-arrow {
    right: 50px;
    justify-self: end;
  }
  .journey-of-growth .t2010-list,
  .journey-of-growth .t2020-list,
  .journey-of-growth .t2030-list {
    color: #fff;
    z-index: 5;
    padding: 8px 12px 8px 0;
    width: 100%;
    max-width: 1200px;
    transition: opacity 0.4s;
    opacity: 0;
  }
  .light-mode .journey-of-growth .t2010-list,
  .light-mode .journey-of-growth .t2020-list,
  .light-mode .journey-of-growth .t2030-list {
    color: #333;
  }
  .journey-of-growth .t2010-list > ul,
  .journey-of-growth .t2020-list > ul,
  .journey-of-growth .t2030-list > ul {
    padding-left: 0;
  }
  .journey-of-growth .t2010-list .filter-box,
  .journey-of-growth .t2020-list .filter-box,
  .journey-of-growth .t2030-list .filter-box {
    display: flex;
    height: 40px;
    width: max-content;
    position: relative;
    z-index: 1;
    border: solid 1px #fff;
    border-radius: 30px;
    overflow: hidden;
  }
  .light-mode .journey-of-growth .t2010-list .filter-box,
  .light-mode .journey-of-growth .t2020-list .filter-box,
  .light-mode .journey-of-growth .t2030-list .filter-box {
    border-color: #333;
  }
  .journey-of-growth .t2010-list .filter-box .filter-item,
  .journey-of-growth .t2020-list .filter-box .filter-item,
  .journey-of-growth .t2030-list .filter-box .filter-item {
    display: flex;
    padding: 10px 30px;
    align-items: center;
    cursor: pointer;
  }
  .journey-of-growth .t2010-list .filter-box .filter-item.selected,
  .journey-of-growth .t2020-list .filter-box .filter-item.selected,
  .journey-of-growth .t2030-list .filter-box .filter-item.selected {
    width: max-content;
    position: relative;
    background: #fff;
    color: #000;
  }
  .light-mode .journey-of-growth .t2010-list .filter-box .filter-item.selected,
  .light-mode .journey-of-growth .t2020-list .filter-box .filter-item.selected,
  .light-mode .journey-of-growth .t2030-list .filter-box .filter-item.selected {
    background: rgba(0, 0, 0, 0.2);
  }
  .journey-of-growth .t2010-list .filter-box .filter-item .filter-color,
  .journey-of-growth .t2020-list .filter-box .filter-item .filter-color,
  .journey-of-growth .t2030-list .filter-box .filter-item .filter-color {
    width: 12px;
    height: 12px;
    border-radius: 30px;
    margin-right: 8px;
  }
  .journey-of-growth .t2010-list .filter-box .filter-item .filter-color.filter-purple,
  .journey-of-growth .t2020-list .filter-box .filter-item .filter-color.filter-purple,
  .journey-of-growth .t2030-list .filter-box .filter-item .filter-color.filter-purple {
    background-color: #9B51E0;
  }
  .journey-of-growth .t2010-list .filter-box .filter-item .filter-color.filter-blue,
  .journey-of-growth .t2020-list .filter-box .filter-item .filter-color.filter-blue,
  .journey-of-growth .t2030-list .filter-box .filter-item .filter-color.filter-blue {
    background-color: #2F80ED;
  }
  .journey-of-growth .t2010-list .filter-box .filter-item .filter-color.filter-green,
  .journey-of-growth .t2020-list .filter-box .filter-item .filter-color.filter-green,
  .journey-of-growth .t2030-list .filter-box .filter-item .filter-color.filter-green {
    background-color: #27AE60;
  }
  .journey-of-growth .t2010-list-ul,
  .journey-of-growth .t2020-list-ul,
  .journey-of-growth .t2030-list-ul {
    margin: 0;
    list-style: disc;
    font-size: 0.875rem;
    white-space: normal;
  }
  .journey-of-growth .t2010-list-ul li,
  .journey-of-growth .t2020-list-ul li,
  .journey-of-growth .t2030-list-ul li {
    line-height: 24px;
  }
  .journey-of-growth .t2010-list-ul p,
  .journey-of-growth .t2020-list-ul p,
  .journey-of-growth .t2030-list-ul p {
    font-size: 1.25rem;
    font-weight: 600;
    border: solid 2px #fff;
    padding: 15px 30px;
    border-radius: 40px;
    width: max-content;
  }
  .light-mode .journey-of-growth .t2010-list-ul p,
  .light-mode .journey-of-growth .t2020-list-ul p,
  .light-mode .journey-of-growth .t2030-list-ul p {
    border-color: #333;
  }
  .journey-of-growth .dot {
    cursor: pointer;
    transition: filter 150ms ease;
  }
  .journey-of-growth .timeline-container .three-buttons {
    position: absolute;
    display: none;
    z-index: 10;
    cursor: pointer;
    opacity: 0;
    width: 240px;
    height: 316px;
    /* Position will be set dynamically by timeline.js at year 2029, 50px above y-axis */
  }
  .journey-of-growth .purple-button-npv,
  .journey-of-growth .blue-button-npv,
  .journey-of-growth .green-button-npv {
    width: 100%;
    height: 33.33%;
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    cursor: pointer;
  }
  .journey-of-growth .purple-button-npv {
    background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/purple-button-npv.svg');
  }
  .journey-of-growth .blue-button-npv {
    background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/blue-button-npv.svg');
  }
  .journey-of-growth .green-button-npv {
    background-image: url('/content/dam/temasek-corporate/our-investments/npv-chart/assets/green-button-npv.svg');
  }
  .journey-of-growth .office-icon-group {
    cursor: pointer;
    transition: filter 0.2s ease;
  }
  .journey-of-growth .office-icon-group *:not(.office-pill-bg-clone) {
    pointer-events: none;
  }
  .journey-of-growth .office-info-label {
    fill: #FFFFFF;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    dominant-baseline: middle;
    text-anchor: start;
  }
}
@media (max-width: 1023px) {
  .journey-of-growth {
    /* Hide scroll arrows on mobile */
  }
  .journey-of-growth .timeline-container {
    width: 100%;
  }
  .journey-of-growth .scroll-to-left-arrow,
  .journey-of-growth .scroll-to-right-arrow {
    display: none !important;
  }
}
.journey-of-growth .journey-of-growth .t2010-list,
.journey-of-growth .journey-of-growth .t2020-list,
.journey-of-growth .journey-of-growth .t2030-list {
  max-width: 700px;
}
.journey-of-growth #hover-milestone-group circle {
  cursor: pointer;
}
@media (min-width: 1024px) {
  /* T-point tooltip (desktop only) */
  .tpoint-tooltip,
  .month-tooltip {
    position: fixed;
    background: #FFFFFF;
    color: #000000;
    padding: 10px 15px;
    border-radius: 8px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.4;
    z-index: 9999;
    pointer-events: none;
    display: none;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
    max-width: 300px;
  }
  /* Timeline reset button */
  .timeline-reset-btn {
    position: fixed;
    bottom: 40px;
    right: 20px;
    padding: 12px 24px;
    background: #5FB3B3;
    color: white;
    border: none;
    border-radius: 6px;
    font-family: 'Noto Sans', sans-serif;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
    transition: background 0.2s;
  }
  .timeline-reset-btn:hover {
    background: #4a9c9c;
  }
}
footer {
  background: #fff;
}