/**
 * Site-specific CSS that must not be merged into Webflow exports.
 * Webflow packages live under storage/app/html-R* and are linked as-is.
 */

@import './richtext-content.css';
@import './news-coverage.css';
@import './publications.css';
@import './contact-us.css';
@import './listing-filter.css';
@import './mobile-menu.css';
@import './website-search.css';
@import './tender-notice.css';
@import './menu-listing.css';

/**
 * CJK fallbacks for Specialgothic (latin). HK first (Traditional), then SC (Simplified).
 */
body {
  font-family: Specialgothic, "Noto Sans HK", "Noto Sans SC", Arial, sans-serif;
}

.body_tc {
  font-family: "Noto Sans HK", "Noto Sans SC", sans-serif;
}

.home_key_figure_number {
  font-family: Specialgothic, "Noto Sans HK", "Noto Sans SC", Arial, sans-serif;
}

/**
 * CJK fallbacks for Specialgothic (latin). HK first (Traditional), then SC (Simplified).
 */
body {
  font-family: Specialgothic, "Noto Sans HK", "Noto Sans SC", Arial, sans-serif;
}

.body_tc {
  font-family: "Noto Sans HK", "Noto Sans SC", sans-serif;
}

.home_key_figure_number {
  font-family: Specialgothic, "Noto Sans HK", "Noto Sans SC", Arial, sans-serif;
}

/**
 * Homepage hero: two lines (EN and Chinese), no middle-dot separator.
 */
.home_banner_tagline {
  display: flex;
  flex-flow: column;
}

/**
 * Banner heading when page title is omitted (e.g. press release / event detail).
 * Mirrors Webflow `h1` rules so `<span class="h1">` / `<a class="h1">` keep the same look.
 */
span.h1,
a.h1 {
  color: var(--white);
  text-align: center;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  display: block;
  text-decoration: none;
}

a.h1:hover,
.inner_banner_container_in h1 a:hover {
  color: var(--light_blue);
}

.inner_banner_container_in h1 a {
  color: inherit;
  text-decoration: none;
}

a.h1:hover,
.inner_banner_container_in h1 a:hover {
  color: var(--light_blue);
}

.inner_banner_container_in h1 a {
  color: inherit;
  text-decoration: none;
}

@media screen and (min-width: 1440px) {
  span.h1,
  a.h1 {
    letter-spacing: -1.44px;
    font-size: 72px;
    line-height: 72px;
  }
}

@media screen and (max-width: 991px) {
  span.h1,
  a.h1 {
    letter-spacing: -.9px;
    font-size: 45px;
    line-height: 45px;
  }
}

@media screen and (max-width: 767px) {
  span.h1,
  a.h1 {
    letter-spacing: -.75px;
    font-size: 37.5px;
    line-height: 37.5px;
  }
}

/* R14 header state and controls. */
button.header_center_btn {
  appearance: none;
  -webkit-appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  /* color: var(--white); */
  /* font-family: inherit; */
  /* font-size: inherit; */
  /* font-weight: 500; */
  /* line-height: inherit; */
  /* letter-spacing: inherit; */
  cursor: pointer;
}

.header_center_btn.w--current + .header_center_block_down .header_center_block_current_line {
  opacity: 1;
}

.header_search_btn.in_menu {
  background-image: url('/images/search_black.svg');
}

/* Homepage commercialisation and update cards. */
.home_comm_btn.hidden {
  display: none;
}

.home_comm_btn.shorter {
  width: 100%;
}

/* Page-specific R14 refinements. */
.page--about-us .large_text {
  /* display: block; */
  max-width: 1080px;
  margin-inline: auto;
  text-align: center;
  font-size: 24px;
  line-height: 34.8px;
}

.bod_chairman_name {
  color: var(--navy);
  font-size: 16.2px;
  line-height: 21px;
}

.page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img {
  display: block;
  width: 100%;
  margin-top: 18px;
  border-radius: 12.6px;
  overflow: hidden;
}

.page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img + p {
  height: 18px;
  margin: 0;
  padding: 0;
  font-size: 0;
  line-height: 0;
}

.page--senior-management .page-content-block:has(.richtext-content > img) .section_container_in {
  padding-bottom: 48px;
}

.page--senior-management .page-content-block:has(.team_members_container) + .page-content-block:has(.richtext-content > img) .section_container_in {
  padding-top: 120px;
}

.page--senior-management .team_members_container .team_member_btn {
  box-sizing: border-box;
  height: 100%;
  min-height: 100%;
}

.page--senior-management .team_members_container > .section_container_in > .bod_container {
  gap: 9px;
}

.page--senior-management .page-content-block:has(.grid_block_container) .section_container_in {
  padding-top: 48px;
  padding-bottom: 72px;
}

.page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container {
  margin-top: 18px;
  margin-bottom: 0;
}

.page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container + h3 {
  margin-top: 48px;
}

.page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container + h3 + p:has(+ .grid_block_container),
.page--senior-management .page-content-block:has(.grid_block_container) .richtext-content > p:last-child:empty {
  display: none;
}

.page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container + .grid_block_container {
  margin-top: 9px;
}

.page--rd-facilities .rd_fac_container {
  padding-top: 0;
}

.page--work-study-programme-phd .richtext-content .grid_block_container {
  justify-content: flex-start;
}

.page--rd-facilities .page-content-block--follows .section_container_in,
.page--success-stories .page-content-block--follows .section_container_in {
  padding-top: 0;
}

.page--success-stories .page-content-block:has(.success_stories_intro_btn_row) .section_container_in {
  padding-bottom: 0;
}

.page--core-area .page-content-block:first-child .section_container {
  background-color: var(--white);
}

.page--core-area .page-content-block:first-child .richtext_width_center {
  max-width: none;
}

.page--core-area .section_container_in {
  max-width: 1440px;
}

.page--core-area .center_text_block h2,
.page--core-area .richtext-content h2 {
  color: var(--navy);
}

/**
 * Core Area detail — flat Application Areas listing on plain navy (same shell as
 * Technology Division, without bg video). Cards reuse `.home_rnd_btn` /
 * `.home_rnd_grid` (4-col, centered remainder). Card videos must NOT use
 * `.w-background-video` (z-index -100 hides them inside rounded media).
 */
.core_area_listing_block {
  background-color: var(--navy);
}

.core_area_listing_card_media {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 10;
  overflow: hidden;
  background-color: rgba(0, 0, 0, 0.35);
}

.core_area_listing_card_video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

.core_area_listing_card_video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.core_area_listing_card.w--current .home_larger_text {
  color: var(--light_blue);
}

/* Shared listing alignment and interaction states. */
.news_coverage_total_count[data-listing-count] {
  width: 100%;
  text-align: center;
}

.press_release_listing_btn_content.no_img .press_release_listing_btn_content_in {
  display: flex;
  flex: 1;
  flex-direction: column;
  justify-content: center;
}

.press_release_listing_btn .generic_btn_right_bg {
  transform: scale(0.1);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

.press_release_listing_btn .generic_btn_right_arrow_before {
  transform: translateX(0);
  transition:
    opacity 500ms ease,
    transform 600ms ease;
}

.press_release_listing_btn .generic_btn_right_arrow_after {
  transform: translateX(-6px);
  transition:
    opacity 600ms ease,
    transform 600ms ease;
}

.press_release_listing_btn:hover .generic_btn_right_bg,
.press_release_listing_btn:focus-visible .generic_btn_right_bg {
  opacity: 1;
  transform: scale(1.2);
}

.press_release_listing_btn:hover .generic_btn_right_arrow_before,
.press_release_listing_btn:focus-visible .generic_btn_right_arrow_before {
  opacity: 0;
  transform: translateX(6px);
}

.press_release_listing_btn:hover .generic_btn_right_arrow_after,
.press_release_listing_btn:focus-visible .generic_btn_right_arrow_after {
  opacity: 1;
  transform: translateX(0);
}

@media (prefers-reduced-motion: reduce) {
  .press_release_listing_btn .generic_btn_right_bg,
  .press_release_listing_btn .generic_btn_right_arrow_before,
  .press_release_listing_btn .generic_btn_right_arrow_after {
    transition: none;
  }

  .press_release_listing_btn .generic_btn_right_bg,
  .press_release_listing_btn:hover .generic_btn_right_bg,
  .press_release_listing_btn:focus-visible .generic_btn_right_bg,
  .press_release_listing_btn .generic_btn_right_arrow_before,
  .press_release_listing_btn:hover .generic_btn_right_arrow_before,
  .press_release_listing_btn:focus-visible .generic_btn_right_arrow_before,
  .press_release_listing_btn .generic_btn_right_arrow_after,
  .press_release_listing_btn:hover .generic_btn_right_arrow_after,
  .press_release_listing_btn:focus-visible .generic_btn_right_arrow_after {
    transform: none;
  }
}

.listing--licensing .rd_projects_container_in {
  padding-top: 30px;
}

.listing--licensing .rd_projects_table .generic_table_row[data-listing-item]:nth-child(odd) {
  background-color: var(--light_blue18);
}

.patents_info_row {
  line-height: 18.6px;
}

@media screen and (max-width: 991px) {
  .page--about-us .large_text {
    text-align: left;
    font-size: 21px;
    line-height: 30px;
  }

  .listing--licensing .rd_projects_container_in {
    padding-top: 24px;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img {
    margin-top: 15px;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img + p {
    height: 15px;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .section_container_in {
    padding-bottom: 36px;
  }

  .page--senior-management .page-content-block:has(.team_members_container) + .page-content-block:has(.richtext-content > img) .section_container_in {
    padding-top: 72px;
  }

  .page--senior-management .team_members_container > .section_container_in > .bod_container {
    gap: 7.5px;
  }

  .page--senior-management .page-content-block:has(.grid_block_container) .section_container_in {
    padding-top: 36px;
    padding-bottom: 48px;
  }
}

@media screen and (max-width: 767px) {
  .page--about-us .large_text {
    max-width: 405px;
    font-size: 18px;
    line-height: 25.2px;
  }

  .page--senior-management .team_member_btn {
    height: auto;
    min-height: 0;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img {
    margin-top: 12px;
    border-radius: 10.2px;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .richtext-content > img + p {
    height: 12px;
  }

  .page--senior-management .page-content-block:has(.richtext-content > img) .section_container_in {
    padding-bottom: 24px;
  }

  .page--senior-management .page-content-block:has(.team_members_container) + .page-content-block:has(.richtext-content > img) .section_container_in {
    padding-top: 48px;
  }

  .page--senior-management .team_members_container > .section_container_in > .bod_container {
    gap: 6px;
    margin-bottom: 6px;
  }

  .page--senior-management .page-content-block:has(.grid_block_container) .section_container_in {
    padding-top: 24px;
    padding-bottom: 36px;
  }

  .page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container {
    margin-top: 12px;
  }

  .page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container + h3 {
    margin-top: 36px;
  }

  .page--senior-management .page-content-block:has(.grid_block_container) .grid_block_container + .grid_block_container {
    margin-top: 6px;
  }
}

@media screen and (max-width: 479px) {
  .listing--licensing .rd_projects_container_in {
    padding-top: 18px;
  }
}

@media screen and (max-width: 479px) {
  span.h1,
  a.h1 {
    letter-spacing: -.6px;
    font-size: 30px;
    line-height: 30px;
  }
}

/**
 * Article title below the banner on press release / event detail pages.
 * Overrides default `.section_container_in` 96px vertical padding so the title
 * sits closer to the banner and the following content block.
 */
.inner_page_article_header .section_container_in {
  padding-top: 54px;
  padding-bottom: 12px;
}

.inner_page_article_header + .section_container > .section_container_in,
.inner_page_article_header + .page-content-blocks > .page-content-block:first-child .section_container > .section_container_in {
  padding-top: 12px;
}

.inner_page_article_title {
  color: var(--navy);
  text-align: left;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  padding-top: 0;
  padding-bottom: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 42px;
}

.inner_page_article_meta {
  padding-top: 0;
  padding-bottom: 10.8px;
}

@media screen and (max-width: 991px) {
  .inner_page_article_header .section_container_in {
    padding-top: 42px;
    padding-bottom: 10px;
  }

  .inner_page_article_header + .section_container > .section_container_in,
  .inner_page_article_header + .page-content-blocks > .page-content-block:first-child .section_container > .section_container_in {
    padding-top: 10px;
  }

  .inner_page_article_title {
    font-size: 28.8px;
    line-height: 34px;
  }
}

@media screen and (max-width: 479px) {
  .inner_page_article_header .section_container_in {
    padding-top: 36px;
    padding-bottom: 8px;
  }

  .inner_page_article_header + .section_container > .section_container_in,
  .inner_page_article_header + .page-content-blocks > .page-content-block:first-child .section_container > .section_container_in {
    padding-top: 8px;
  }

  .inner_page_article_title {
    font-size: 24px;
    line-height: 30px;
  }
}

/**
 * CMS page content blocks: when consecutive blocks share the same effective
 * background (default / white / navy), drop the follower's top padding so
 * stacked section gaps do not double (~96 instead of ~192).
 */
.page-content-blocks > .page-content-block--same-bg > .section_container > .section_container_in {
  padding-top: 0;
}

/* .page-content-listing--follows .section_container > .section_container_in {
  padding-top: 0;
} */

/**
 * Tech Mart listing — half of default `.section_container_in` vertical padding
 * (96 / 72 / 48 → 48 / 36 / 24).
 */
.listing--tech-mart-in,
.listing--tech-mart > .section_container_in,
.page--tech-mart .page-content-listing .section_container_in {
  padding-top: 48px;
  padding-bottom: 48px;
}

.website_search_page .inner_search_block,
.listing--tech-mart .inner_search_block {
  position: relative;
  width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.website_search_page .inner_search_input,
.listing--tech-mart .inner_search_input {
  min-height: 44px;
  padding-right: 48px;
}

.website_search_page .inner_search_btn,
.listing--tech-mart .inner_search_btn {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  margin: 0;
  min-width: 44px;
  min-height: 44px;
}

.website_search_page .inner_search_btn:focus-visible,
.listing--tech-mart .inner_search_btn:focus-visible {
  outline: 3px solid var(--blue);
  outline-offset: 3px;
}

.listing--tech-mart .filter_section_left {
  border-top: 0;
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
}

.listing--tech-mart .inner_search_block {
  max-width: none;
}

.listing--tech-mart .filter_section_right {
  min-width: 0;
}

.listing--tech-mart [data-listing-count],
.listing--tech-mart [data-listing-empty],
.listing--tech-mart .tech_mart_image_notice {
  width: 100%;
  text-align: left;
}

.listing--tech-mart .news_coverage_total_count {
  padding-top: 0;
  margin-bottom: 14px;
}

.listing--tech-mart [data-listing-empty] {
  margin: 0;
  padding: 24px 0;
  text-align: center;
  font-size: 24px;
  line-height: 1.5;
}

.listing--tech-mart .tech_mart_image_notice {
  margin: 36px 0 0;
}

.listing--tech-mart .filter_section_right:has([data-listing-empty]:not([hidden])) .tech_mart_image_notice {
  display: none;
}

/**
 * Equal-height Tech Mart cards: pin Learn More to the bottom of each card.
 */
.listing--tech-mart .tech_mart_block,
.page--tech-mart .tech_mart_block {
  display: flex;
  flex-direction: column;
}

.listing--tech-mart .tech_mart_block_in,
.page--tech-mart .tech_mart_block_in {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}

.listing--tech-mart .tech_mart_block_in > .generic_btn_row.for_tech_mart,
.page--tech-mart .tech_mart_block_in > .generic_btn_row.for_tech_mart {
  margin-top: auto;
}

.listing--tech-mart .tech_mart_block .filter_section_tag_row,
.page--tech-mart .tech_mart_block .filter_section_tag_row {
  padding-top: 12px;
}

@media screen and (max-width: 991px) {
  .listing--tech-mart-in,
  .listing--tech-mart > .section_container_in,
  .page--tech-mart .page-content-listing .section_container_in {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media screen and (max-width: 767px) {
  .listing--tech-mart-in,
  .listing--tech-mart > .section_container_in,
  .page--tech-mart .page-content-listing .section_container_in {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/**
 * Technology Highlights listing — half of default `.section_container_in`
 * vertical padding (96 / 72 / 48 → 48 / 36 / 24).
 */
.listing--technology-highlights-in,
.listing--technology-highlights > .section_container_in,
.page--technology-highlights .page-content-listing .section_container_in {
  padding-top: 48px;
  padding-bottom: 48px;
}

.listing--technology-highlights .filter_section_left {
  position: relative;
  top: auto;
  max-height: none;
  overflow: visible;
}

@media screen and (max-width: 991px) {
  .listing--technology-highlights-in,
  .listing--technology-highlights > .section_container_in,
  .page--technology-highlights .page-content-listing .section_container_in {
    padding-top: 36px;
    padding-bottom: 36px;
  }
}

@media screen and (max-width: 767px) {
  .listing--technology-highlights-in,
  .listing--technology-highlights > .section_container_in,
  .page--technology-highlights .page-content-listing .section_container_in {
    padding-top: 24px;
    padding-bottom: 24px;
  }
}

/* Media slide / gallery (page content block: mediaGallerySlider) */

.video_section_image_figure {
  margin: 0;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.video_section_image,
.video_section_video {
  width: auto;
  max-width: 100%;
  height: auto;
  max-height: min(70vh, 720px);
  object-fit: contain;
  display: block;
  margin-left: auto;
  margin-right: auto;
}

.video_section_video {
  width: 100%;
  background: #000;
}

.video_section_image_caption {
  margin-top: 12px;
  text-align: center;
  max-width: 100%;
}

.video_section_slider {
  width: 100%;
}

.media-gallery-slider {
  position: relative;
  width: 100%;
  height: auto;
  background: transparent;
  clear: both;
  text-align: center;
}

.media-gallery-slider__controls {
  display: flex;
  align-items: center;
  gap: 18px;
  width: 100%;
}

.media-gallery-slider__autoplay {
  display: block;
  margin: 0 0 12px auto;
  padding: 8px 16px;
  min-height: 44px;
  border: 1px solid currentColor;
  border-radius: 4px;
  color: white;
  background: transparent;
  cursor: pointer;
}

.media-gallery-slider__viewport {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  width: 100%;
}

.media-gallery-slider__track {
  display: flex;
  width: 100%;
  transition: transform 500ms ease;
  will-change: transform;
}

@media (prefers-reduced-motion: reduce) {
  .media-gallery-slider__track {
    transition: none;
  }
}

.media-gallery-slider__slide {
  flex: 0 0 100%;
  width: 100%;
  min-width: 100%;
}

.media-gallery-slider .media-gallery-slider__arrow {
  position: static;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  flex: none;
  width: 48px;
  height: 48px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  transform: none;
  z-index: 1;
  cursor: pointer;
  overflow: visible;
  color: #fff;
}

.media-gallery-slider .media-gallery-slider__arrow .w-icon-slider-left,
.media-gallery-slider .media-gallery-slider__arrow .w-icon-slider-right {
  position: static;
  margin: 0 auto;
}

.media-gallery-slider .media-gallery-slider__nav {
  position: relative;
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
  margin: 16px auto 0;
  padding-top: 0;
  height: auto;
}

.media-gallery-slider .w-slider-dot {
  border: 0;
  padding: 0;
}

@media screen and (max-width: 767px) {
  .media-gallery-slider .media-gallery-slider__arrow {
    display: none;
  }

  .media-gallery-slider__controls {
    gap: 0;
  }

  /* Stay within section gutters instead of edge bleed. */
  .video_section_block {
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .video_section_block_in,
  .video_section_block .video_section_block_in:has(.media-gallery-slider) {
    width: 100%;
    max-width: 100%;
    margin-left: 0;
    margin-right: 0;
    padding-left: 0;
    padding-right: 0;
    box-sizing: border-box;
  }

  .video_section_image,
  .video_section_video {
    max-height: min(60vh, 480px);
  }

  .media-gallery-slider__slide {
    padding-left: 0;
    padding-right: 0;
  }

  .media-gallery-slider .media-gallery-slider__nav {
    margin-top: 12px;
    padding-left: 8px;
    padding-right: 8px;
  }
}

@media screen and (max-width: 479px) {
  .video_section_image,
  .video_section_video {
    max-height: min(55vh, 420px);
  }
}

/**
 * Press release / event (and related homepage update) thumbnails:
 * keep faces/subject matter visible when cover crops tall images.
 */
.home_update_btn_right .absolute_img,
.press_release_listing_btn_img .absolute_img {
  object-position: center top;
}

/**
 * Homepage Latest update: non-link “Coming Soon” fillers when a column has fewer than 3 items.
 */
.home_update_btn.is_coming_soon {
  cursor: default;
  pointer-events: none;
  opacity: 0.72;
}

.home_update_btn.is_coming_soon .generic_btn_right {
  display: none;
}

/**
 * Homepage Core Application Areas: keep the area name on small screens.
 * The Webflow sheet swaps the name for a number below 767px.
 */
@media screen and (max-width: 767px) {
  .home_7area_tab_link_text {
    display: block;
  }

  .home_7area_tab_link_number {
    display: none;
  }
}

/**
 * Accessibility — WCAG 2.2 AA chrome helpers (do not merge into Webflow export).
 */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: fixed;
  left: 24px;
  top: 0;
  z-index: 100000;
  padding: 0.75rem 1.25rem;
  border: 1px solid var(--light_blue67, #abdbf0ab);
  background-color: var(--navy, #00306b);
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
  color: var(--white, #fff);
  font-weight: 600;
  text-decoration: none;
  border-radius: 12px;
  /* Keep in tab order, but off-screen until focused */
  transform: translateY(-150%);
  transition:
    transform 0.15s ease,
    border-color 0.15s ease,
    background-color 0.15s ease,
    color 0.15s ease;
}

.skip-link:hover,
.skip-link:focus,
.skip-link:focus-visible {
  border-color: var(--navy67, #00306bab);
  background-color: var(--white90, #ffffffe6);
  color: var(--blue, #0092d2);
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 2px solid var(--blue, #0092d2);
  outline-offset: 2px;
}

.skip-target:focus,
.skip-target:focus-visible {
  outline: none;
}

.header_logo_btn:focus-visible,
.header_contact_us_btn:focus-visible,
.header_lang_btn:focus-visible,
.header_center_btn:focus-visible,
.mobile_menu_trigger_btn_open:focus-visible,
.mobile_menu_trigger_btn_close:focus-visible,
.mobile_menu_3rd_btn:focus-visible,
.footer_sns_btn:focus-visible,
.footer_right_title:focus-visible,
.footer_last_row_btn:focus-visible,
.footer_w3c_btn:focus-visible,
.footer_back_to_top_btn:focus-visible,
.floating_btn:focus-visible,
.header_search_btn:focus-visible,
.w-dropdown-toggle:focus-visible,
.w-dropdown-link:focus-visible,
.w-tab-link:focus-visible,
.w-nav-button:focus-visible,
.w-slider-arrow-left:focus-visible,
.w-slider-arrow-right:focus-visible,
.w-slider-dot:focus-visible {
  outline: 2px solid var(--blue, #3aa0ff);
  outline-offset: 2px;
}

/**
 * Keep wrapped form confirmations readable at every viewport width.
 */
.whitepapers_form .w-form-done {
  font-size: clamp(18px, 2vw, 24px);
  line-height: 1.5;
  overflow-wrap: anywhere;
}

/**
 * Public form text fields: small left inset so typed text is not flush to the
 * underline edge; focus keeps the navy outline without an extra bottom bar.
 */
.whitepapers_form_text_field,
.footer_newsletter_panel .whitepapers_form_text_field {
  padding-left: 8px;
  padding-right: 8px;
}

.whitepapers_form_text_field:focus,
.whitepapers_form_text_field:focus-visible,
.footer_newsletter_panel .whitepapers_form_text_field:focus,
.footer_newsletter_panel .whitepapers_form_text_field:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: -2px;
  border-top-color: transparent;
  border-right-color: transparent;
  border-left-color: transparent;
  border-bottom-color: var(--blue33);
  box-shadow: none;
}

/**
 * Popup accessibility helpers.
 */
body.popup-open {
  overflow: hidden;
}

/**
 * Closed dialogs often stay display:flex + opacity:0 (Webflow IX2).
 * inert blocks interaction on the overlay itself but does NOT pass clicks through —
 * pointer-events:none is required or the invisible overlay traps the whole page.
 */
.home_rnd_popup_container[inert],
.tech_mart_popup_container[inert],
.generic_popup_container[inert],
.home_rnd_popup_container[aria-hidden='true'],
.tech_mart_popup_container[aria-hidden='true'],
.generic_popup_container[aria-hidden='true'] {
  pointer-events: none !important;
}

.home_rnd_popup_container[aria-hidden='false'],
.tech_mart_popup_container[aria-hidden='false'],
.generic_popup_container[aria-hidden='false'] {
  pointer-events: auto;
}

.home_rnd_popup_tabs_prev_btn,
.home_rnd_popup_tabs_next_btn {
  min-width: 24px;
  min-height: 24px;
  box-sizing: content-box;
  padding-top: 8px;
  padding-bottom: 8px;
}

.generic_popup_close_btn:focus-visible,
.generic_2side_popup_close_area:focus-visible,
.home_rnd_popup_tabs_prev_btn:focus-visible,
.home_rnd_popup_tabs_next_btn:focus-visible {
  outline: 2px solid var(--blue, #3aa0ff);
  outline-offset: 2px;
}

/**
 * Desktop header mega-menu: open on keyboard focus / JS toggle.
 * Webflow IX2 uses inline display; `!important` + JS keep keyboard parity.
 */
.header_center_block.is-mega-open > .header_center_hover_container_out,
.header_center_block:focus-within > .header_center_hover_container_out {
  display: block !important;
}

.header_center_btn:focus-visible,
.header_center_btn_trigger:focus-visible,
.mobile_menu_2nd_lv_btn:focus-visible,
.mobile_menu_3rd_btn:focus-visible,
.mobile_menu_4th_btn:focus-visible {
  outline: 2px solid var(--blue, #3aa0ff);
  outline-offset: 2px;
}

/**
 * Contrast overrides (1.4.3) — keep Webflow export untouched.
 * Target ≥4.5:1 for normal text / placeholders; ≥3:1 for large/UI chrome.
 */
.generic_search_block_input::placeholder {
  color: #595959;
  opacity: 1;
}

.inner_search_input::placeholder {
  color: #595959;
  opacity: 1;
}

.header_search_input::placeholder {
  color: rgba(255, 255, 255, 0.9);
  opacity: 1;
}

.header_search_input.in_menu::placeholder {
  color: #3a3a4a;
  opacity: 1;
}

/* Disabled/exhausted paging state used var(--black33) ≈2.3:1 — bump to AA. */
.paging_next_prev_btn.last {
  color: #767676;
}

/**
 * Brand --blue (#0092d2) is ~3.5:1 on white — below AA for normal text.
 * Keep chrome accents on --blue; darken body link / label text only.
 */
.generic_text_link,
.richtext-content a,
.small_allcap_text {
  color: #0077ad;
}

.generic_text_link:hover,
.richtext-content a:hover {
  color: var(--navy, #00306b);
}

/**
 * Commercialisation copy sits over a decorative white panel (sibling, not ancestor).
 * Give the text block an opaque white background so contrast is measurable.
 */
.home_comm_container .home_section_container > .section_container:first-child {
  /* background-color: #fff; */
  border-radius: 12.6px;
  padding: 12px 18px 6px;
}

/**
 * Core Areas / R&D eyebrows sit on translucent navy + video. Local navy chips
 * keep white / light text at AA without darkening the whole commercialisation stack.
 */
/* .home_7area_container_in > h2.font_color_white,
.home_rnd_container .font_color_light_blue {
  display: inline-block;
  background-color: rgba(0, 48, 107, 0.92);
  border-radius: 6px;
  padding: 0.2em 0.55em;
} */

.home_rnd_container .font_color_light_blue {
  color: #fff;
}

.home_rnd_container .home_section_small_title {
  display: flex;
  justify-content: center;
}

@media screen and (min-width: 1440px) {
  .home_key_figure_title {
    text-align: left;
  }
}

.home_banner_content .generic_btn.light_green {
  background-color: var(--white90);
  color: var(--navy);
}

.home_banner_content .generic_btn.light_green:hover,
.home_banner_content .generic_btn.light_green:focus-visible {
  background-color: var(--navy);
  color: #fff;
}

.home_key_figure_title,
.home_key_figure_number,
.home_key_figure_block {
  color: #fff;
}

/**
 * Key figures card: desktop horizontal padding for all locales;
 * TC/SC content width capped at 1280px (EN stays 1440px).
 */
@media screen and (min-width: 992px) {
  .home_key_figure_container_out {
    padding-left: 50px;
    padding-right: 50px;
  }
}

html[lang='zh-Hant'] .home_key_figure_container_out,
html[lang='zh-Hans'] .home_key_figure_container_out {
  max-width: 1280px;
}

/**
 * Add space under section eyebrows (flex gap + .home_rnd_grid padding-top).
 */
.home_section_container_in > .home_section_small_title {
  margin-bottom: 12px;
}

.home_rnd_grid {
  padding-top: 42px;
}

@media screen and (max-width: 991px) {
  .home_rnd_grid {
    padding-top: 36px;
  }
}

@media screen and (max-width: 479px) {
  .home_rnd_grid {
    padding-top: 30px;
  }
}

.header_contact_us_btn,
.header_lang_btn,
.header_search_btn {
  opacity: 1;
}

.header_contact_us_btn:hover,
.header_lang_btn:hover,
.header_search_btn:hover {
  opacity: 1;
}

.mobile_menu_container.is-open.is-revealed .header_right_up_in.in_menu .header_lang_btn {
  opacity: 1;
}

/**
 * WCAG 2.5.8 target size (minimum 24×24) for header chrome controls.
 */
.header_search_input {
  box-sizing: border-box;
  min-height: 33px;
  height: 33px;
}

.header_search_btn {
  box-sizing: border-box;
  flex: none;
  min-width: 33px;
  min-height: 33px;
  width: 33px !important;
  height: 33px !important;
}

/* .header_lang_btn,
.header_contact_us_btn {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  min-height: 24px;
  padding-left: 6px;
  padding-right: 6px;
} */

/**
 * Filter checkboxes: keep native control focusable; show ring on custom box.
 */
.filter_checkbox {
  position: relative;
}

.filter_checkbox .filter_checkbox_input,
.filter_checkbox input[type="checkbox"] {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0, 0, 0, 0) !important;
  white-space: nowrap !important;
  border: 0 !important;
  opacity: 1 !important;
  z-index: 0 !important;
}

.filter_checkbox:has(input[type="checkbox"]:focus-visible) .filter_checkbox_dot {
  outline: 2px solid var(--blue, #3aa0ff);
  outline-offset: 2px;
}

body.lightbox-open {
  overflow: hidden;
}

.w-lightbox-close:focus-visible,
.w-lightbox-left:focus-visible,
.w-lightbox-right:focus-visible,
.w-lightbox-item:focus-visible {
  outline: 2px solid var(--blue, #3aa0ff);
  outline-offset: 2px;
}

/**
 * Safari paints a native overlay play button on muted autoplay videos.
 * These WebKit pseudos do not apply to videos that expose the controls attribute.
 */
video[autoplay][muted]::-webkit-media-controls-overlay-play-button,
video[autoplay][muted]::-webkit-media-controls-start-playback-button,
.w-background-video > video::-webkit-media-controls-overlay-play-button,
.w-background-video > video::-webkit-media-controls-start-playback-button {
  display: none !important;
  -webkit-appearance: none;
  opacity: 0;
  pointer-events: none;
}

/**
 * Background video pause/play (WCAG 2.2.2).
 * Fixed bottom-right on home + inner pages; one click pauses all bg videos.
 * Size + hover match .generic_btn_right / .generic_btn_right_bg (incl. mobile).
 */
.astri-bg-video-control {
  left: auto !important;
  top: auto !important;
  z-index: 10;
  box-sizing: border-box;
  /* Match .generic_btn_right (desktop) */
  width: 33px;
  height: 33px;
  min-width: 33px;
  min-height: 33px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 6px;
  background-color: var(--blue, #0092d2);
  color: var(--white, #fff);
  cursor: pointer;
  font-size: 11px;
  font-weight: 600;
  line-height: 1;
  margin: 0;
  padding: 0 0 1.8px;
  position: relative;
  overflow: hidden;
  -webkit-appearance: none;
  appearance: none;
}

.astri-bg-video-control__bg {
  background-color: var(--light_blue, #abdbf0);
  opacity: 0;
  border-radius: 6px;
  width: 100%;
  height: 100%;
  position: absolute;
  inset: 0;
  transform: scale(0.1);
  transition:
    opacity 0.6s ease,
    transform 0.6s ease;
  pointer-events: none;
}

.astri-bg-video-control:hover .astri-bg-video-control__bg,
.astri-bg-video-control:focus-visible .astri-bg-video-control__bg {
  opacity: 1;
  transform: scale(1.2);
}

.astri-bg-video-control__icons {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
  color: inherit;
  transition: color 0.6s ease;
}

.astri-bg-video-control__icon {
  display: block;
  width: 14px;
  height: 14px;
  flex: none;
}

.astri-bg-video-control__play .astri-bg-video-control__icon {
  /* Optical centering for the play triangle */
  margin-left: 1px;
}

.astri-bg-video-control:hover,
.astri-bg-video-control:focus-visible {
  color: var(--navy, #00306b);
}

.astri-bg-video-control--fixed {
  position: fixed !important;
  /* Align with .generic_btn_right inside .floating_btn (margin-right + padding-right) */
  right: calc(24px + 6px) !important;
  /*
   * Sit above Let’s Connect:
   * floating margin-bottom + padding-top + arrow height + padding-bottom + gap
   */
  bottom: calc(24px + 6px + 33px + 6px + 8px) !important;
}

@media screen and (min-width: 1440px) {
  .astri-bg-video-control--fixed {
    bottom: calc(36px + 6px + 33px + 6px + 8px) !important;
  }
}

/* Match .generic_btn_right @ max-width 991px */
@media screen and (max-width: 991px) {
  .astri-bg-video-control {
    width: 30px;
    height: 30px;
    min-width: 30px;
    min-height: 30px;
    border-radius: 4.8px;
    padding-bottom: 1.5px;
    font-size: 10px;
  }

  .astri-bg-video-control__bg {
    border-radius: 4.8px;
  }

  .astri-bg-video-control--fixed {
    bottom: calc(24px + 6px + 30px + 6px + 8px) !important;
  }
}

/* Match .generic_btn_right + .floating_btn @ max-width 767px */
@media screen and (max-width: 767px) {
  .astri-bg-video-control {
    width: 27px;
    height: 27px;
    min-width: 27px;
    min-height: 27px;
    border-radius: 3.6px;
    padding-bottom: 1.2px;
    font-size: 9px;
  }

  .astri-bg-video-control__bg {
    border-radius: 3.6px;
  }

  .astri-bg-video-control--fixed {
    right: calc(18px + 4.8px) !important;
    bottom: calc(18px + 4.8px + 27px + 4.8px + 6px) !important;
  }
}

/* Match .floating_btn @ max-width 479px (arrow stays 27px) */
@media screen and (max-width: 479px) {
  .astri-bg-video-control--fixed {
    right: calc(12px + 3.6px) !important;
    bottom: calc(12px + 3.6px + 27px + 3.6px + 4px) !important;
  }
}

.astri-bg-video-control:focus-visible {
  outline: 2px solid var(--blue, #0092d2);
  outline-offset: 2px;
}

/**
 * Preserve About Us video heading look after h3 → h2 for hierarchy.
 */
.video_section_block > h2.font_color_white {
  color: var(--white, #fff);
  text-align: center;
  letter-spacing: normal;
  text-transform: none;
  margin-top: 0;
  margin-bottom: 0;
  font-size: 36px;
  font-weight: 700;
  line-height: 39.6px;
}

/**
 * Target size (2.5.8): header chrome controls ≥ 24px.
 */
/* .header_contact_us_btn,
.header_lang_btn {
  min-height: 24px;
  padding-top: 4px;
  padding-bottom: 4px;
  box-sizing: border-box;
} */

/**
 * Heading hierarchy helpers mirror the R14 heading scale independently of the
 * semantic heading element used in the markup.
 */
.astri-heading-h1,
.astri-heading-h2,
.astri-heading-h3,
.astri-heading-h4,
.astri-heading-h5 {
  margin-top: 0;
  margin-bottom: 0;
}

.astri-heading-h1 {
  font-size: 60px;
  font-weight: 700;
  line-height: 60px;
  letter-spacing: -1.2px;
  text-transform: uppercase;
  text-align: center;
}

.astri-heading-h2 {
  font-size: 45px;
  font-weight: 700;
  line-height: 45px;
  letter-spacing: -.9px;
  text-transform: uppercase;
  text-align: center;
}

.astri-heading-h3 {
  font-size: 36px;
  font-weight: 700;
  line-height: 39.6px;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
}

.astri-heading-h4 {
  font-size: 19.8px;
  font-weight: 600;
  line-height: 24.6px;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
}

.astri-heading-h5 {
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
}

@media screen and (min-width: 1440px) {
  .astri-heading-h1 {
    font-size: 72px;
    line-height: 72px;
    letter-spacing: -1.44px;
  }

  .astri-heading-h2 {
    font-size: 52.5px;
    line-height: 52.5px;
    letter-spacing: -1.05px;
  }
}

@media screen and (max-width: 991px) {
  .astri-heading-h1 {
    font-size: 45px;
    line-height: 45px;
    letter-spacing: -.9px;
  }

  .astri-heading-h2 {
    font-size: 37.5px;
    line-height: 37.5px;
    letter-spacing: -.75px;
  }

  .astri-heading-h3 {
    font-size: 31.5px;
    line-height: 34.65px;
  }

  .astri-heading-h4 {
    font-size: 18px;
    line-height: 22.2px;
  }
}

@media screen and (max-width: 767px) {
  .astri-heading-h1 {
    font-size: 37.5px;
    line-height: 37.5px;
    letter-spacing: -.75px;
  }

  .astri-heading-h2 {
    font-size: 33.75px;
    line-height: 33.75px;
    letter-spacing: -.675px;
  }
}

@media screen and (max-width: 479px) {
  .astri-heading-h1,
  .astri-heading-h2 {
    font-size: 30px;
    line-height: 30px;
    letter-spacing: -.6px;
  }

  .astri-heading-h3 {
    font-size: 27px;
    line-height: 29.7px;
  }

  .astri-heading-h4 {
    font-size: 16.2px;
    line-height: 19.8px;
  }
}

.rd_projects_detail_title.astri-heading-h3 {
  text-align: center;
}

.press_release_listing_btn .astri-heading-h4,
.awards_content .astri-heading-h3,
.success_stories_tab_link .astri-heading-h4,
.tech_highlights_content_title .astri-heading-h3,
.success_stories_detail_point_title .astri-heading-h4,
.collapsible_trigger_btn .astri-heading-h4,
.center_text_block .astri-heading-h3,
.grid_block .astri-heading-h4,
.grid_block .astri-heading-h3,
.careers_block_container .astri-heading-h3,
.careers_block_container .astri-heading-h4,
.vnm_container .astri-heading-h4 {
  color: inherit;
}

/** Award categories with no items are not expandable — hide toggle affordance styling. */
.awards_category_header--static {
  cursor: default;
}

/**
 * Milestone timeline: full-width center entries must occupy the entire flex row.
 * Without this, the next side item sits beside the 1080px block and timeline dots misalign.
 */
.milestone_container .milestone_block.center {
  flex: 0 0 100%;
  width: 100%;
  max-width: 100%;
  min-width: 100%;
  margin-left: 0;
  margin-right: 0;
}

.milestone_container .milestone_block.center .milestone_block_content {
  max-width: 1080px;
  width: 100%;
}

.milestone_container .milestone_block_line.center {
  display: none;
}

/**
 * Accordion page block: no left logo column (awards listing placeholder),
 * and tighter title-row vertical spacing than awards categories.
 */
.page-content-accordion .center_text_block {
  margin-bottom: 36px;
}

.page-content-accordion .awards_container_in {
  grid-column-gap: 0;
  grid-row-gap: 0;
}

.page-content-accordion .collapsible_trigger_btn.for_awards {
  min-height: 0;
  padding-top: 18px;
  padding-bottom: 18px;
}

.page-content-accordion .collapsible_trigger_btn .astri-heading-h4 {
  color: inherit;
}

.page-content-accordion .collapsible_content {
  padding-bottom: 18px;
}

.page-content-accordion .collapsible_content .max_width_1080px {
  padding-top: 0;
}

/**
 * Listing paging actions may be native <button> (preferred over a[href="#"]).
 */
button.paging_next_prev_btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: inherit;
}

/**
 * Footer back-to-top is a <button> that must match the former <a.footer_back_to_top_btn>.
 * Do not use `font: inherit` here — it overrides Webflow typography via higher specificity.
 * Leave font-size/weight/spacing to `.footer_back_to_top_btn` (including media queries).
 */
button.footer_back_to_top_btn {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  padding: 0;
  text-decoration: none;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  text-align: inherit;
}

/**
 * Board of Directors page block: keep chairman thumbnail circular even when
 * the CMS photo is not square (Webflow sets width + border-radius only).
 */
.bod_chairman_btn_img {
  aspect-ratio: 1 / 1;
  height: auto;
  /* flex-shrink: 0; */
}

.bod_chairman_btn_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
}

/**
 * Team Members page block (aligned with live Senior Management layout):
 * - avatar always on the left, text on the right
 * - two members per row (one column on small screens)
 * - title / position match richtext `.grid_block` card typography
 * - "Read more" text link without underline, with trailing >
 */
.team_members_container > .section_container_in {
  padding-top: 0;
  padding-bottom: 0;
  max-width: 1080px;
}

.team_members_container > .section_container_in > .bod_container {
  grid-template-columns: 1fr 1fr;
  gap: 18px 24px;
}

.team_members_container .team_member_btn {
  box-sizing: border-box;
  flex-flow: row;
  align-items: flex-start;
  justify-content: flex-start;
  gap: 18px;
  height: 100%;
  min-height: 100%;
  padding: 24px 24px;
}

.team_members_container .team_member_btn .bod_chairman_btn_img {
  flex: none;
  width: 120px;
  max-width: 36%;
}

.team_members_container .team_member_btn .bod_chairman_btn_in {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-width: 0;
  justify-content: flex-start;
}

.team_members_container .team_member_btn .bod_chairman_title {
  margin-top: 0;
  margin-bottom: 0;
  padding-bottom: 0;
  color: var(--navy);
  font-size: 19.8px;
  font-weight: 600;
  line-height: 24.6px;
  letter-spacing: normal;
  text-transform: none;
  text-align: inherit;
}

.team_members_container .team_member_btn .team_member_position {
  margin: 0;
  padding-top: 0;
  color: inherit;
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}

.team_members_container .team_member_btn .team_member_read_more_row {
  margin-top: 12px;
}

.team_members_container .team_member_btn .team_member_read_more {
  color: #0077ad;
  font-weight: 400;
  text-decoration: none;
}

.team_members_container .team_member_btn .team_member_read_more::after {
  content: ' >';
}

.team_members_container .team_member_btn .team_member_read_more:hover {
  color: var(--navy, #00306b);
}

@media screen and (max-width: 991px) {
  .team_members_container > .section_container_in > .bod_container {
    grid-template-columns: 1fr;
  }

  .team_members_container .team_member_btn .bod_chairman_btn_img {
    width: 108px;
  }
}

@media screen and (max-width: 479px) {
  .team_members_container .team_member_btn {
    padding: 18px 15px;
    gap: 12px;
  }

  .team_members_container .team_member_btn .bod_chairman_btn_img {
    width: 84px;
  }
}

/**
 * Information Cards page block:
 * CSS grid with configurable columns (2, 3, or 4), fill direction (row/column),
 * and per-card colspan / rowspan. Align card content to the top.
 * Do not use .full_width (width:100%) here — it forces each card onto its own row.
 */
.vnm_container.vnm_container--flow-row,
.vnm_container.vnm_container--flow-column {
  display: grid;
  grid-auto-rows: minmax(min-content, auto);
}

.center_text_block + .vnm_container.vnm_container--flow-row,
.center_text_block + .vnm_container.vnm_container--flow-column {
  margin-top: 36px;
}

.vnm_container.vnm_container--flow-row {
  grid-auto-flow: row;
}

.vnm_container.vnm_container--flow-column {
  grid-auto-flow: column;
  grid-template-rows: repeat(var(--vnm-rows, 2), minmax(min-content, auto));
}

.vnm_container.vnm_container--cols-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.vnm_container.vnm_container--cols-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.vnm_container.vnm_container--cols-4 {
  grid-template-columns: repeat(4, minmax(0, 1fr));
}

.vnm_container.vnm_container--flow-row > .grid_block,
.vnm_container.vnm_container--flow-column > .grid_block {
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  min-width: 0;
  max-width: none;
  box-sizing: border-box;
}

.vnm_container.vnm_container--flow-row > .grid_block > .vnm_icon,
.vnm_container.vnm_container--flow-column > .grid_block > .vnm_icon {
  align-self: flex-start;
}

.vnm_container.vnm_container--flow-row > .grid_block > .astri-heading-h4,
.vnm_container.vnm_container--flow-column > .grid_block > .astri-heading-h4,
.vnm_container.vnm_container--flow-row > .grid_block > .richtext-content,
.vnm_container.vnm_container--flow-column > .grid_block > .richtext-content {
  width: 100%;
  max-width: none;
}

.vnm_card--colspan-1 { grid-column: span 1; }
.vnm_card--colspan-2 { grid-column: span 2; }
.vnm_card--colspan-3 { grid-column: span 3; }
.vnm_card--rowspan-1 { grid-row: span 1; }
.vnm_card--rowspan-2 { grid-row: span 2; }
.vnm_card--rowspan-3 { grid-row: span 3; }

@media screen and (max-width: 991px) {
  .vnm_container.vnm_container--flow-row.vnm_container--cols-2,
  .vnm_container.vnm_container--flow-row.vnm_container--cols-3,
  .vnm_container.vnm_container--flow-row.vnm_container--cols-4,
  .vnm_container.vnm_container--flow-column.vnm_container--cols-2,
  .vnm_container.vnm_container--flow-column.vnm_container--cols-3,
  .vnm_container.vnm_container--flow-column.vnm_container--cols-4 {
    display: grid;
    grid-auto-flow: row;
    grid-template-columns: 1fr;
    grid-template-rows: none;
  }

  .vnm_container.vnm_container--flow-row .vnm_card--colspan-1,
  .vnm_container.vnm_container--flow-row .vnm_card--colspan-2,
  .vnm_container.vnm_container--flow-row .vnm_card--colspan-3,
  .vnm_container.vnm_container--flow-column .vnm_card--colspan-1,
  .vnm_container.vnm_container--flow-column .vnm_card--colspan-2,
  .vnm_container.vnm_container--flow-column .vnm_card--colspan-3 {
    grid-column: span 1;
  }

  .vnm_container.vnm_container--flow-row .vnm_card--rowspan-1,
  .vnm_container.vnm_container--flow-row .vnm_card--rowspan-2,
  .vnm_container.vnm_container--flow-row .vnm_card--rowspan-3,
  .vnm_container.vnm_container--flow-column .vnm_card--rowspan-1,
  .vnm_container.vnm_container--flow-column .vnm_card--rowspan-2,
  .vnm_container.vnm_container--flow-column .vnm_card--rowspan-3 {
    grid-row: span 1;
  }
}

/**
 * Image Mosaic (R&D Facilities): replace Webflow node IDs with span width classes
 * on a 6-column `.rd_fac_container` grid (1/6–6/6).
 */
.rd_fac_block--span-1 { grid-column: span 1; }
.rd_fac_block--span-2 { grid-column: span 2; }
.rd_fac_block--span-3 { grid-column: span 3; }
.rd_fac_block--span-4 { grid-column: span 4; }
.rd_fac_block--span-5 { grid-column: span 5; }
.rd_fac_block--span-6 { grid-column: span 6; }

.coming_soon_block {
  display: block;
  width: 100%;
  text-align: center;
}

.coming_soon_block .astri-heading-h3 {
  color: inherit;
}

@media screen and (max-width: 991px) {
  .rd_fac_block--span-1,
  .rd_fac_block--span-2 {
    grid-column: span 3;
  }

  .rd_fac_block--span-3,
  .rd_fac_block--span-4,
  .rd_fac_block--span-5,
  .rd_fac_block--span-6 {
    grid-column: span 6;
  }
}

@media screen and (max-width: 767px) {
  .rd_fac_block--span-1,
  .rd_fac_block--span-2,
  .rd_fac_block--span-3,
  .rd_fac_block--span-4,
  .rd_fac_block--span-5,
  .rd_fac_block--span-6 {
    grid-column: span 6;
  }
}

.success_stories_testimonial_slider_nav .w-slider-dot {
  background-color: var(--black);
  height: 6px;
  width: 6px;
  opacity: .18;
  border-radius: 999px;
  margin: 0px !important
}
.success_stories_testimonial_slider_nav .w-slider-dot.w-active {
  background-color: var(--navy);
  opacity: 1
}
@media screen and (max-width: 991px) {
  .success_stories_testimonial_slider_nav .w-slider-dot {
    height: 4.8px;
    width: 4.8px
  }
}
@media screen and (max-width: 479px) {
  .success_stories_testimonial_slider_nav .w-slider-dot {
    height: 3.6px;
    width: 3.6px
  }
}
.footer_newsletter {
  max-width: 100%;
  align-self: flex-start;
}

.footer_newsletter > button {
  padding: 0;
  border: 0;
  background: transparent;
  font-family: inherit;
  text-align: left;
  cursor: pointer;
}

.footer_newsletter_panel {
  box-sizing: border-box;
  position: fixed;
  inset: 0;
  /* Stay under the hCaptcha challenge iframe (z-index: 2000000000). */
  z-index: 1000000;
  width: min(680px, calc(100vw - 32px));
  max-width: calc(100vw - 32px);
  min-width: 0;
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 32px;
  border: 0;
  border-radius: 12px;
  overflow-y: auto;
  background: var(--white);
  color: var(--navy);
}

.footer_newsletter_backdrop {
  position: fixed;
  inset: 0;
  z-index: 999999;
  background: rgb(0 0 0 / 55%);
}

body:has(.footer_newsletter_panel[open]) {
  overflow: hidden;
}

.footer_newsletter_title {
  margin: 0 32px 24px 0;
  font-size: 24px;
  line-height: 1.3;
}

.footer_newsletter_panel[data-form-success-dialog] {
  width: min(520px, calc(100vw - 32px));
  padding: 56px 24px 24px;
}

[data-form-success-dialog] .public_form_success {
  padding: 0;
  font-family: inherit;
  font-weight: 400;
  letter-spacing: normal;
  text-transform: none;
}

.footer_newsletter_panel .form_success_download {
  width: fit-content;
  max-width: 100%;
  margin-top: 24px;
}

.footer_newsletter_close {
  position: absolute;
  top: 8px;
  right: 8px;
  width: 44px;
  height: 44px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--navy);
  font-size: 32px;
  cursor: pointer;
}

.footer_newsletter_form {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.footer_newsletter [hidden],
.footer_newsletter_panel [hidden] {
  display: none !important;
}

.footer_newsletter_form input:not([type="checkbox"]) {
  width: 100%;
  min-width: 0;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--navy);
  border-radius: 4px;
  background: var(--white);
  color: var(--navy);
  font: inherit;
  font-size: 16px;
}

.footer_newsletter_submit {
  min-height: 44px;
  padding: 10px 16px;
  border: 0;
  border-radius: 4px;
  background: var(--navy);
  color: var(--white);
  font: inherit;
  cursor: pointer;
}

.footer_newsletter_submit:hover {
  background: var(--blue);
}

.footer_newsletter_submit[aria-busy="true"],
.generic_btn[aria-busy="true"] {
  cursor: progress;
}

.footer_newsletter :is(button, input):not(.whitepapers_form_text_field):focus-visible,
.footer_newsletter_panel :is(button, input):not(.whitepapers_form_text_field):focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 1px;
}

.footer_newsletter input:not([type="checkbox"]):not(.whitepapers_form_text_field):focus-visible,
.footer_newsletter_panel input:not([type="checkbox"]):not(.whitepapers_form_text_field):focus-visible {
  outline-offset: 0;
}

/**
 * Site Information → Condolent Mode: grayscale the public homepage.
 */
body.condolent-mode {
  filter: grayscale(100%);
}

/* Shared public enquiry and subscription forms. */

.whitepapers_form .w-form-done.public_form_success,
.w-form-done.public_form_success,
.public_form_success {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  margin: 0;
  padding: 0;
  text-align: left;
  background: transparent;
  color: var(--navy);
  font-size: 16px;
  line-height: 1.5;
  white-space: normal;
  overflow-wrap: anywhere;
}

.public_form_success_download {
  margin: 12px 0 0;
}

.public_form_consent {
  width: 100%;
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-top: 16px;
}

.public_form_hcaptcha {
  width: 100%;
  margin: 16px 0;
}

.public_form_checkbox {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  min-height: 44px;
  padding: 8px 0;
  margin: 0;
  color: var(--navy);
  font-weight: 400;
  line-height: 1.5;
  cursor: pointer;
}

.public_form_checkbox input[type="checkbox"] {
  appearance: auto;
  flex: 0 0 18px;
  width: 18px;
  height: 18px;
  min-height: 18px;
  margin: 3px 0 0;
  padding: 0;
  accent-color: var(--navy);
}

.public_form_inline_link {
  color: var(--navy);
  text-decoration: underline;
}

.public_form_privacy_note {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
}

.public_form_consent input:focus-visible,
.public_form_inline_link:focus-visible,
[data-tech-mart-inquire]:focus-visible {
  outline: 2px solid var(--navy);
  outline-offset: 3px;
}

.newsletter_choices {
  border: 0;
  padding: 0;
  margin: 16px 0 0;
  min-width: 0;
}

.newsletter_choices legend {
  font-weight: 600;
  margin-bottom: 8px;
}

.newsletter_subscribe_row {
  margin-top: 24px;
}

.newsletter_subscribe_row .generic_btn {
  white-space: normal;
  text-align: left;
}

.tech_mart_enquiry_panel .whitepapers_form,
.tech_mart_enquiry_panel .whitepapers_form_in {
  width: 100%;
}

.tech_mart_enquiry_panel [hidden] {
  display: none !important;
}

button[data-tech-mart-inquire] {
  font: inherit;
  cursor: pointer;
}

button.tech_mart_inquire_btn {
  border: 0;
  padding: 0;
  background: transparent;
}

.event_organiser_filter {
  border: 0;
  margin: 20px 0 0;
  padding: 0;
  min-width: 0;
  width: 100%;
  text-align: center;
}

.event_organiser_filter legend {
  margin: 0 auto 8px;
  color: var(--blue);
  font-weight: 600;
}

.event_organiser_choices {
  display: flex !important;
  flex-wrap: wrap;
  justify-content: center;
}

.event_card[data-organiser-keys="astri"] {
  background: linear-gradient(var(--light_blue67), var(--light_blue67)), var(--white);
}

.event_card[data-organiser-keys="partner"] {
  background: var(--white);
}

.event_card .event_organiser {
  background: linear-gradient(var(--navy12), var(--navy12)), var(--white);
}

.event_card .event_organiser.for_partner {
  background: linear-gradient(var(--light_blue67), var(--light_blue67)), var(--white);
}

.event_card[data-organiser-keys="astri"] .event_organiser {
  background: var(--white);
}

@media (max-width: 479px) {
  .footer_newsletter_panel {
    padding: 24px 20px;
  }
  .tech_mart_enquiry_panel .whitepapers_form_block {
    width: 100%;
  }
}

.event_card:hover {
  color: var(--navy);
}

/**
 * Website saving mode: still image in place of a deferred background video.
 */
.website-saving-still {
  display: none;
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

html.website-saving-mode .website-saving-still {
  display: block;
}

html.website-saving-mode [data-website-saving-video] > video {
  display: none;
}