@charset "utf-8";
/* =============================================================================
   IEI Maritime Solution - page stylesheet
   Bootstrap 5.3.5 + jQuery 3.5.1
   Design reference : Figma "IEI_Maritime Solution Landing Page" (1920 x 17940)
   Desktop base grid : 1920 canvas / 240px side padding / 1440px content
   ========================================================================== */

/* -----------------------------------------------------------------------------
   1. Design tokens
   -------------------------------------------------------------------------- */
:root {
  /* brand */
  --ms-primary: #1F63D6;
  --ms-primary-soft: rgba(31, 99, 214, 0.1);
  --ms-primary-deep: #1C3DA4;
  --ms-violet: #3F42D3;
  --ms-violet-soft: rgba(108, 110, 230, 0.1);
  --ms-gold: #FFD685;
  --ms-mint: #90FFD4;

  /* text */
  --ms-navy: #0B1B2B;
  --ms-text: #000000;
  --ms-text-muted: #40566E;
  --ms-text-grey: #838383;
  --ms-text-cta: #333333;
  --ms-white: #FFFFFF;

  /* surfaces */
  --ms-bg-1: #F8FCFF;
  --ms-bg-2: #F1F3F5;
  --ms-bg-3: #F7FAFF;
  --ms-bg-4: #FBFDFF;
  --ms-bg-dark: #010A1B;
  --ms-bg-darker: #000006;
  --ms-line: #B9D2EC;
  --ms-line-soft: #D4D4D4;

  /* type */
  --ms-font: "Roboto", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;
  --ms-font-alt: "Lato", "Noto Sans TC", "Microsoft JhengHei", Arial, sans-serif;

  /* fluid metrics */
  --ms-radius: 20px;
  --ms-radius-lg: 30px;
  --ms-sec-py: 60px;
  --ms-gap: 24px;
}

@media (min-width: 768px) {
  :root { --ms-sec-py: 80px; }
}
@media (min-width: 1200px) {
  :root { --ms-sec-py: 120px; }
}

/* -----------------------------------------------------------------------------
   2. Base
   -------------------------------------------------------------------------- */
.ms-page {
  font-family: var(--ms-font);
  font-size: 16px;
  line-height: 32px;
  color: var(--ms-text);
  background-color: var(--ms-white);
  /* `clip` contains the full-bleed decorations WITHOUT creating a scroll
     container, so the sticky anchor bar keeps working. */
  overflow-x: clip;
}
@supports not (overflow-x: clip) {
  .ms-page { overflow-x: hidden; }
}
.ms-page *,
.ms-page *::before,
.ms-page *::after { box-sizing: border-box; }

.ms-page :where(img) { max-width: 100%; height: auto; }
/* :where() keeps this at zero specificity so component link colours win */
.ms-page :where(a) { color: inherit; text-decoration: none; }
.ms-page :where(p) { margin: 0; }
.ms-page :where(ul) { margin: 0; padding: 0; list-style: none; }

/* container : follows the 1440px design content width at 1920 canvas */
.ms-page .container { width: 100%; padding-right: 20px; padding-left: 20px; margin-right: auto; margin-left: auto; }
@media (min-width: 576px)  { .ms-page .container { max-width: 540px; } }
@media (min-width: 768px)  { .ms-page .container { max-width: 720px; } }
@media (min-width: 992px)  { .ms-page .container { max-width: 960px; } }
@media (min-width: 1200px) { .ms-page .container { max-width: 1140px; } }
@media (min-width: 1400px) { .ms-page .container { max-width: 1320px; } }
@media (min-width: 1700px) { .ms-page .container { max-width: 1440px; } }

/* -----------------------------------------------------------------------------
   3. Section shell
   -------------------------------------------------------------------------- */
.ms-sec {
  position: relative;
  padding-top: var(--ms-sec-py);
  padding-bottom: var(--ms-sec-py);
  overflow: hidden;
}
.ms-sec--bg1 { background-color: var(--ms-bg-1); }
.ms-sec--bg2 { background-color: var(--ms-bg-2); }
.ms-sec--bg3 { background-color: var(--ms-bg-3); }
.ms-sec--bg4 { background-color: var(--ms-bg-4); }
.ms-sec--dark { background-color: var(--ms-bg-dark); }
/* a section that leads with the breadcrumb needs far less headroom than a
   normal section start */
.ms-sec--crumb { padding-top: 40px; }

/* full-bleed decorative photo layer (desktop only, never affects flow) */
.ms-sec__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-repeat: no-repeat;
}
.ms-sec > .container { position: relative; z-index: 1; }

/* -----------------------------------------------------------------------------
   4. Typography helpers
   -------------------------------------------------------------------------- */
.ms-badge {
  display: block;
  margin: 0;
  font-family: var(--ms-font-alt);
  font-size: clamp(15px, 1.2vw, 20px);
  font-weight: 700;
  line-height: 32px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-primary);
}
.ms-badge--pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  padding: 0 24px;
  border-radius: 100px;
  background-color: rgba(30, 84, 168, 0.1);
  box-shadow: inset 0 0 0 1px rgba(30, 84, 168, 0.25);
}
.ms-badge--pill::before {
  content: "";
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background-color: var(--ms-primary);
  /* slow, gentle blink on the hero badge dot */
  animation: ms-dot-blink 2.4s ease-in-out infinite;
}
@keyframes ms-dot-blink {
  0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(31, 99, 214, 0.35); }
  50%      { opacity: .25; box-shadow: 0 0 0 4px rgba(31, 99, 214, 0); }
}
@media (prefers-reduced-motion: reduce) {
  .ms-badge--pill::before { animation: none; opacity: 1; }
}

/* Badge -> heading rhythm. Single source of truth for every section, using the
   "Flexible Configuration" block as the baseline (24px). */
.ms-badge + .ms-h1,
.ms-badge + .ms-h2,
.ms-badge + .ms-h3,
.ms-badge + .ms-tabs { margin-top: var(--ms-gap); }

.ms-h1 {
  margin: 0;
  font-size: clamp(28px, 3.4vw, 46px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--ms-navy);
}
.ms-h2 {
  margin: 0;
  font-size: clamp(24px, 2.6vw, 36px);
  font-weight: 800;
  line-height: 1.55;
  color: var(--ms-navy);
}
.ms-h3 {
  margin: 0;
  font-size: clamp(20px, 1.7vw, 24px);
  font-weight: 800;
  line-height: 1.75;
  color: var(--ms-navy);
}
.ms-lead { font-size: 16px; line-height: 32px; }
.ms-text-justify { text-align: justify; }
.ms-cat {
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 32px;
  color: var(--ms-primary);
}
.ms-num {
  font-family: var(--ms-font-alt);
  font-size: clamp(28px, 2.5vw, 36px);
  font-weight: 300;
  line-height: 1;
  color: var(--ms-primary);
}
.ms-white { color: var(--ms-white) !important; }

.ms-accent { color: var(--ms-primary); }

/* -----------------------------------------------------------------------------
   5. Buttons
   -------------------------------------------------------------------------- */
.ms-btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 8px 24px;
  border: 0;
  border-radius: 8px;
  font-size: 16px;
  font-weight: 700;
  line-height: 32px;
  text-align: center;
  transition: background-color .25s ease, color .25s ease, box-shadow .25s ease;
}
.ms-btn--primary { background-color: var(--ms-primary); color: var(--ms-white); }
.ms-btn--primary:hover,
.ms-btn--primary:focus { background-color: var(--ms-primary-deep); color: var(--ms-white); }
.ms-btn--light { background-color: rgba(255, 255, 255, 0.9); color: var(--ms-primary); }
.ms-btn--light:hover,
.ms-btn--light:focus { background-color: var(--ms-white); color: var(--ms-primary-deep); }
.ms-btn--block { width: 100%; }
.ms-btn__arrow {
  flex: 0 0 auto;
  width: 16px;
  height: 12px;
  transition: transform .25s ease;
}
@media (hover: hover) {
  .ms-btn:hover .ms-btn__arrow,
  .ms-btn--ghost:hover .ms-btn__arrow { transform: translateX(4px); }
}
.ms-btn--sm { min-height: 36px; font-size: 14px; line-height: 20px; }

.ms-btn--ghost {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  padding: 0 24px;
  min-height: 36px;
  border: 1px solid var(--ms-white);
  border-radius: 100px;
  background-color: rgba(255, 255, 255, 0.1);
  color: var(--ms-white);
  font-size: 16px;
  font-weight: 600;
  line-height: 20px;
  transition: background-color .25s ease;
}
.ms-btn--ghost:hover { background-color: rgba(255, 255, 255, 0.25); color: var(--ms-white); }

/* -----------------------------------------------------------------------------
   6. Banner
   -------------------------------------------------------------------------- */
.ms-banner {
  position: relative;
  padding-top: var(--ms-sec-py);
  padding-bottom: var(--ms-sec-py);
  background-color: var(--ms-bg-1);
  background-image: url("../_img/maritime-solution/banner-bridge.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  overflow: hidden;
}
@media (min-width: 1700px) {
  .ms-banner { background-size: auto 100%; min-height: 802px; }
}
.ms-banner::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(248, 252, 255, 0.96) 0%, rgba(248, 252, 255, 0.85) 38%, rgba(248, 252, 255, 0) 65%);
}
.ms-banner > .container { position: relative; z-index: 2; }
.ms-banner__inner { max-width: 680px; }
.ms-banner__title { margin-bottom: var(--ms-gap); }
.ms-banner__desc { color: var(--ms-text); }
.ms-banner__actions { display: flex; flex-wrap: wrap; gap: var(--ms-gap); margin-top: 32px; }
.ms-banner__actions .ms-btn { min-width: 196px; }

@media (max-width: 991.98px) {
  .ms-banner { background-position: 72% center; }
  .ms-banner::after {
    background: linear-gradient(180deg, rgba(248, 252, 255, 0.94) 0%, rgba(248, 252, 255, 0.88) 60%, rgba(248, 252, 255, 0.8) 100%);
  }
}
@media (max-width: 575.98px) {
  .ms-banner__actions .ms-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   7. Anchor navigation (sticky)
   -------------------------------------------------------------------------- */
/* anchor targets keep clear of the site header AND the sticky bar
   (--ms-header-h is measured and published by maritime-solution.js) */
.ms-page [id] { scroll-margin-top: calc(var(--ms-header-h, 0px) + 64px); }

.ms-anchor {
  position: sticky;
  /* sits directly under the official IEI header instead of behind it */
  top: var(--ms-header-h, 0px);
  z-index: 20;
  background-color: var(--ms-white);
  box-shadow: 0 0.75px 0 0 var(--ms-line-soft);
}
.ms-anchor__list {
  display: flex;
  align-items: center;
  gap: 4px;
  min-height: 48px;
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.ms-anchor__list::-webkit-scrollbar { display: none; }
.ms-anchor__item { flex: 0 0 auto; }
.ms-anchor__link {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 48px;
  padding: 4px 16px;
  font-size: 16px;
  line-height: 24px;
  white-space: nowrap;
  color: var(--ms-navy);
  border-bottom: 2px solid transparent;
  transition: color .2s ease, border-color .2s ease;
}
.ms-anchor__link:hover { color: var(--ms-primary); }
.ms-anchor__link.is-active {
  color: var(--ms-primary);
  font-weight: 700;
  border-bottom-color: var(--ms-primary);
}
@media (min-width: 1200px) {
  .ms-anchor__list { gap: 24px; }
  .ms-anchor__link { padding: 4px 8px; }
}

/* -----------------------------------------------------------------------------
   8. Breadcrumb
   -------------------------------------------------------------------------- */
.ms-crumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 40px;
  font-size: 14px;
  line-height: 20px;
  color: var(--ms-text-grey);
}
.ms-crumb a:hover { color: var(--ms-primary); }
.ms-crumb__sep { color: var(--ms-text-grey); }
.ms-crumb__current { color: var(--ms-navy); }
@media (min-width: 1200px) { .ms-crumb { margin-bottom: 64px; } }

/* -----------------------------------------------------------------------------
   9. Overview
   -------------------------------------------------------------------------- */
.ms-overview__figure { margin: 0; }
.ms-overview__figure img {
  width: 100%;
  border-radius: var(--ms-radius);
  box-shadow: 0 0 40px rgba(30, 84, 168, 0.12);
}
.ms-overview__body > * + * { margin-top: var(--ms-gap); }

/* -----------------------------------------------------------------------------
   10. Challenges (tabs + cards)
   -------------------------------------------------------------------------- */
.ms-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 48px;
  margin-bottom: 48px;
  border-bottom: 1px solid rgba(11, 27, 43, 0.15);
}
.ms-tabs__btn {
  position: relative;
  padding: 0 0 12px;
  border: 0;
  background: none;
  font-family: var(--ms-font);
  font-size: clamp(18px, 1.7vw, 24px);
  font-weight: 500;
  line-height: 36px;
  color: var(--ms-navy);
  cursor: pointer;
  transition: color .2s ease;
}
.ms-tabs__btn::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background-color: var(--ms-navy);
  opacity: 0;
  transition: opacity .2s ease;
}
.ms-tabs__btn.is-active { font-weight: 700; }
.ms-tabs__btn.is-active::after { opacity: 1; }
.ms-tabs__panel { display: none; }
.ms-tabs__panel.is-active { display: block; }

.ms-chal-card {
  height: 100%;
  padding: 28px;
  border-radius: var(--ms-radius);
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 0 1px #fff, 4px 12px 40px rgba(15, 30, 56, 0.16);
}
.ms-chal-card__num { margin-bottom: 20px; }
.ms-chal-card__title { margin-bottom: 8px; }
.ms-chal-card__desc { color: var(--ms-text-muted); }

/* -----------------------------------------------------------------------------
   11. Highlights
   -------------------------------------------------------------------------- */
.ms-hl-item {
  height: 100%;
  padding: 24px 12px;
  border-top: 1px solid var(--ms-line);
}
.ms-hl-item__icon { width: 100px; height: 100px; margin-bottom: 16px; }
.ms-hl-item__cat { margin-bottom: 16px; }
.ms-hl-item__title { margin-bottom: 16px; }

/* -----------------------------------------------------------------------------
   12. Product family
   -------------------------------------------------------------------------- */
.ms-prod__head > * + * { margin-top: var(--ms-gap); }
.ms-prod__lead { color: var(--ms-text); }

.ms-prod-core {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 40px;
  height: 100%;
  padding: 36px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: 4px 12px 30px rgba(30, 84, 168, 0.1);
}
.ms-prod-core__head { width: 100%; text-align: center; }
.ms-prod-core__name { margin: var(--ms-gap) 0 0; font-size: clamp(26px, 2.5vw, 36px); font-weight: 800; line-height: 1.4; color: var(--ms-navy); }
.ms-prod-core__sub { font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 32px; color: var(--ms-primary); }
.ms-prod-core__img { width: 100%; max-width: 360px; margin: 0; }
/* the border-top IS the card divider. Its offsets match the Figma card; on top
   of that, maritime-solution.js adds a margin-top so the divider drops onto the
   middle branch of the connector tree - the amount needed grows as the viewport
   narrows and the optional cards get taller. */
.ms-prod-core__list { width: 100%; padding-top: 64px; border-top: 1px solid var(--ms-line); }
.ms-prod-core__foot { width: 100%; margin-top: auto; }

.ms-pill {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-height: 32px;
  padding: 0 24px;
  border-radius: 100px;
  background-color: var(--ms-primary-soft);
  font-family: var(--ms-font-alt);
  font-size: 14px;
  font-weight: 700;
  line-height: 20px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--ms-primary);
}

.ms-feat {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.ms-feat__item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
  font-size: 16px;
  line-height: 32px;
  color: var(--ms-navy);
}
/* the core platform card uses the larger 20px spec list */
.ms-prod-core .ms-feat__item { font-size: clamp(16px, 1.35vw, 20px); }
.ms-feat__item::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 32px;
  background: url("../_img/maritime-solution/icon/check-blue.svg") no-repeat center / 20px 17px;
}
.ms-feat--2col { display: grid; grid-template-columns: 1fr; gap: 8px 40px; }
@media (min-width: 768px) { .ms-feat--2col { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ms-prod-opt {
  display: flex;
  flex-direction: column;
  gap: 24px;
  padding: 24px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: 4px 12px 30px rgba(30, 84, 168, 0.1);
}
.ms-prod-opt + .ms-prod-opt { margin-top: 24px; }
.ms-prod-opt__img { flex: 0 0 auto; width: 200px; max-width: 100%; margin: 0; align-self: center; }
.ms-prod-opt__body { flex: 1 1 auto; display: flex; flex-direction: column; gap: 16px; }
.ms-prod-opt__badges { display: flex; flex-wrap: wrap; gap: 8px; }
.ms-prod-opt__title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 24px; }
.ms-prod-opt__name { font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 42px; color: var(--ms-navy); }
.ms-prod-opt__sub { font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 42px; color: var(--ms-primary); }
.ms-prod-opt__foot { display: flex; justify-content: flex-end; }
@media (min-width: 768px) {
  .ms-prod-opt { flex-direction: row; align-items: center; gap: 48px; }
}

/* connector tree between the core platform and the optional modules
   (mirrors the Figma lines: solid trunk + stub per optional card).
   The trunk's top/height and the core stub's offset are measured from the real
   card centres in maritime-solution.js, so they always line up exactly. */
.ms-prod-grid { position: relative; }
.ms-prod-grid__trunk { display: none; }
@media (min-width: 992px) {
  /* vertical trunk, centred in the column gutter */
  .ms-prod-grid__trunk {
    display: block;
    position: absolute;
    left: 33.3333%;
    width: 2px;
    /* reset the .row > * gutter padding/margin Bootstrap applies to every
       direct child, which would otherwise widen and offset the trunk */
    padding: 0;
    margin: 0 0 0 -1px;
    background-color: var(--ms-primary);
    pointer-events: none;
  }
  /* stub from the trunk across to the core platform card */
  .ms-prod-grid__trunk::before {
    content: "";
    position: absolute;
    right: 100%;
    top: var(--ms-stub-y, 50%);
    width: 24px;
    height: 2px;
    margin-top: -1px;
    background-color: var(--ms-primary);
  }
  /* stub from the trunk to each optional card */
  .ms-prod-opt { position: relative; transition: transform .25s ease, box-shadow .25s ease; }
  .ms-prod-opt::before {
    content: "";
    position: absolute;
    left: -24px;
    top: 50%;
    width: 24px;
    height: 1px;
    margin-top: -0.5px;
    background-color: var(--ms-primary);
    opacity: .3;
    transition: left .25s ease, width .25s ease, height .25s ease, margin-top .25s ease, opacity .25s ease;
  }
  @media (hover: hover) {
    /* the card slides 8px right; the stub grows by the same 8px so it still
       reaches the trunk, and thickens to 2px */
    .ms-prod-opt:hover {
      transform: translateX(8px);
      box-shadow: 4px 12px 40px rgba(30, 84, 168, 0.18);
    }
    .ms-prod-opt:hover::before {
      left: -32px;
      width: 32px;
      height: 2px;
      margin-top: -1px;
      opacity: 1;
    }
  }
}

/* -----------------------------------------------------------------------------
   13. Solution architecture (single full-bleed artwork)
   -------------------------------------------------------------------------- */
.ms-arch {
  position: relative;
  padding: 0;
  background-color: var(--ms-bg-dark);
  font-size: 0;            /* no inline-image baseline gap */
}
.ms-arch__img {
  display: block;
  width: 100%;
  height: auto;
  aspect-ratio: 1920 / 1061;   /* reserves the box before the image loads */
}
/* the artwork has no baked-in title; it sits in the empty top-left area and
   scales with the image (240 / 1920 across, 90 / 1061 down, 36px at 1920) */
.ms-arch__title {
  position: absolute;
  left: 12.5%;
  top: 8.5%;
  margin: 0;
  font-size: clamp(13px, 1.875vw, 36px);
  font-weight: 800;
  line-height: 1.4;
  color: var(--ms-white);
}

/* -----------------------------------------------------------------------------
   14. Product showcase (MCS-DB001 / MCS-DM)
   -------------------------------------------------------------------------- */
.ms-show { position: relative; }
.ms-show__figure { margin: 0 0 32px; }
.ms-show__figure img { width: 100%; }
.ms-show__intro > * + * { margin-top: var(--ms-gap); }
.ms-show__title { margin-bottom: 0; }
.ms-show__title span { display: block; }
.ms-show__desc { max-width: 560px; }
.ms-show__grid { margin-top: 40px; }
.ms-show-item {
  height: 100%;
  padding: 24px 12px;
  border-top: 1px solid var(--ms-line);
}
.ms-show-item__num { margin-bottom: 16px; }
.ms-show-item__title { margin-bottom: 16px; }

/* the showcase photo is nearly full-bleed in the design (1811 / 1877 px of the
   1920 canvas) so it is expressed as a share of the section width */
@media (min-width: 1200px) {
  /* 5.7% 是原稿值，但機器會壓到左側文字，往右挪出淨空
     （右緣超出的部分由 section 的 overflow 裁掉）。
     文字欄是固定 560px，視窗越窄佔比越大，所以窄桌機要再往右一點。 */
  .ms-show--db001 { --ms-show-img-left: 19%; --ms-show-img-width: 94.3%; }
  .ms-show--dm { --ms-show-img-left: 2.2%; --ms-show-img-width: 97.8%; }
  .ms-show__figure {
    position: absolute;
    left: var(--ms-show-img-left, 0);
    top: 0;
    width: var(--ms-show-img-width, 100%);
    margin: 0;
    z-index: 0;
    pointer-events: none;
  }
  .ms-show__intro { position: relative; z-index: 1; max-width: 560px; }
  .ms-show__grid { position: relative; z-index: 1; margin-top: 80px; }
}
@media (min-width: 1440px) {
  .ms-show--db001 { --ms-show-img-left: 13%; }
}

/* dark variant : MCS-DM */
.ms-show--dark { color: var(--ms-white); }
.ms-show--dark .ms-btn--primary {
  background-color: rgba(255, 255, 255, 0.06);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  color: var(--ms-white);
}
.ms-show--dark .ms-btn--primary:hover,
.ms-show--dark .ms-btn--primary:focus {
  background-color: rgba(255, 255, 255, 0.18);
  color: var(--ms-white);
}
.ms-show--dark .ms-show__title,
.ms-show--dark .ms-show-item__title { color: var(--ms-white); }
.ms-show--dark .ms-show-item { border-top-color: rgba(255, 214, 133, 0.5); }
.ms-show--dark .ms-show-item__num { color: var(--ms-gold); }
.ms-show--dark .ms-badge { color: var(--ms-gold); }

/* -----------------------------------------------------------------------------
   15. iVEC / iRM layer cards
   -------------------------------------------------------------------------- */
.ms-layers { position: relative; }
/* the Figma row puts 60px between the two cards */
@media (min-width: 992px) { .ms-layers { --bs-gutter-x: 60px; } }

/* Values below come from the Figma export (card 690x686, padding 36, gap 48). */
.ms-layer {
  position: relative;
  isolation: isolate;
  height: 100%;
  padding: 28px;
  border-radius: var(--ms-radius-lg);
  overflow: hidden;
  color: var(--ms-white);
}
@media (min-width: 992px) { .ms-layer { padding: 36px; } }

.ms-layer--ivec {
  --ms-layer-accent: #3F42D3;
  --ms-layer-glow: rgba(105, 107, 230, 0.5);
  --ms-layer-card-shadow: 0 8px 20px rgba(105, 107, 230, 0.5);
  --ms-deco-left: 26.4%;
  --ms-deco-top: 28.6%;
  --ms-deco-width: 93.5%;
  background: conic-gradient(from 135deg at 50% 50%, #696BE6 -0.37deg, #BECCFF 181.66deg, #696BE6 359.63deg, #BECCFF 541.66deg);
  box-shadow: 8px 20px 50px rgba(105, 107, 230, 0.3);
}
.ms-layer--irm {
  --ms-layer-accent: #1C3DA4;
  --ms-layer-glow: rgba(0, 54, 126, 0.4);
  --ms-layer-card-shadow: 0 8px 20px rgba(0, 54, 126, 0.4);
  --ms-deco-left: 24.5%;
  --ms-deco-top: 25.7%;
  --ms-deco-width: 98.3%;
  background: conic-gradient(from 135deg at 50% 50%, #BBD8FF -178.36deg, #00367E 1.45deg, #BBD8FF 181.64deg, #00367E 361.45deg), var(--ms-white);
  box-shadow: 8px 20px 50px rgba(0, 54, 126, 0.3);
}

/* the artwork is blended into the gradient rather than laid on top of it */
.ms-layer__deco {
  position: absolute;
  left: var(--ms-deco-left, 25%);
  top: var(--ms-deco-top, 27%);
  width: var(--ms-deco-width, 95%);
  height: auto;
  z-index: 0;
  pointer-events: none;
  mix-blend-mode: screen;
}
.ms-layer--irm .ms-layer__deco { mix-blend-mode: soft-light; }
@supports (mix-blend-mode: plus-lighter) {
  .ms-layer--ivec .ms-layer__deco { mix-blend-mode: plus-lighter; }
}

.ms-layer__inner {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 32px;
  height: 100%;
}
.ms-layer__head { position: relative; display: flex; align-items: center; gap: 20px; }
.ms-layer__logo {
  flex: 0 0 auto;
  /* Figma: 123px of a 618px head, i.e. ~20%, so it scales with the card */
  width: clamp(72px, 20%, 123px);
  filter: drop-shadow(0 8px 50px var(--ms-layer-glow));
}
/* basis 0 : a long sub-title must wrap inside the block, never push the whole
   block onto its own line below the logo */
.ms-layer__id { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ms-layer__name { font-size: clamp(30px, 3.2vw, 48px); font-weight: 800; line-height: 1.25; }
.ms-layer__sub { font-size: clamp(16px, 1.7vw, 24px); font-weight: 500; line-height: 32px; }
.ms-layer__action { flex: 0 0 auto; }
@media (min-width: 992px) {
  .ms-layer__inner { gap: 48px; }
  .ms-layer__head { gap: 36px; }
}
@media (max-width: 1199.98px) {
  /* not enough room beside the name for the floating pill, so it takes its own
     line instead of overlapping the product name */
  .ms-layer__head { flex-wrap: wrap; }
  .ms-layer__action { flex: 0 0 100%; }
}
@media (min-width: 1200px) {
  /* in the design the pill floats over the top-right corner; the reserved
     padding keeps the product name out from under it */
  .ms-layer__action { position: absolute; right: 0; top: 4px; }
  .ms-layer__name { padding-right: 170px; }
}

.ms-layer__what-title { font-size: clamp(24px, 2.6vw, 36px); font-weight: 800; line-height: 1.17; }
.ms-layer__what-desc { margin-top: 12px; font-size: clamp(16px, 1.35vw, 20px); font-weight: 800; line-height: 32px; }
.ms-layer__grid { margin-top: auto; }

.ms-mini {
  height: 100%;
  padding: 16px 10px;
  border-radius: 16px;
  background-color: var(--ms-white);
  box-shadow: var(--ms-layer-card-shadow, none);
  text-align: center;
}
.ms-mini__title {
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 800;
  line-height: 28px;
  text-transform: capitalize;
  color: var(--ms-layer-accent, var(--ms-violet));
}
.ms-mini__desc {
  margin-top: 8px;
  font-size: 13px;
  line-height: 22px;
  text-transform: capitalize;
  color: var(--ms-text);
}
/* two columns down to the smallest phones: long single words must never
   spill out of the chip */
.ms-mini__title,
.ms-mini__desc { overflow-wrap: break-word; }
@media (max-width: 359.98px) {
  .ms-mini { padding: 12px 6px; }
  .ms-mini__title { font-size: 13px; line-height: 20px; }
  .ms-mini__desc { font-size: 12px; line-height: 20px; }
}
@media (min-width: 576px) {
  .ms-mini { padding: 20px 16px; }
  .ms-mini__desc { font-size: 15px; line-height: 26px; }
}
@media (min-width: 992px) {
  .ms-mini { padding: 24px 16px; }
  .ms-mini__desc { font-size: 16px; line-height: 28px; }
}

.ms-layers__plus {
  display: none;
  position: absolute;
  left: 50%;
  top: 50%;
  z-index: 2;
  width: 80px;
  height: 80px;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: 0 0 24px rgba(30, 84, 168, 0.18);
}
.ms-layers__plus img { position: absolute; left: 10px; top: 10px; width: 60px; height: 60px; }
@media (min-width: 992px) { .ms-layers__plus { display: block; } }

/* -----------------------------------------------------------------------------
   16. How they work together (steps)
   -------------------------------------------------------------------------- */
.ms-howwork { position: relative; color: var(--ms-white); }
.ms-howwork__bg {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  z-index: 0;
  pointer-events: none;
}
.ms-howwork__head { margin-bottom: 48px; }
.ms-howwork__head .ms-h2 { color: var(--ms-white); }
.ms-howwork__head p { margin-top: 24px; color: rgba(255, 255, 255, 0.9); }

/* Values below come from the Figma export (card 460x686, padding 360/36/36). */
.ms-step {
  position: relative;
  isolation: isolate;
  display: flex;
  flex-direction: column;
  height: 100%;
  border-radius: var(--ms-radius);
  background-image: linear-gradient(180deg, rgba(0, 9, 23, 0.9) 0%, rgba(0, 9, 23, 0.9) 45%, rgba(0, 9, 23, 0.045) 100%);
  box-shadow: 0 0 50px rgba(0, 221, 255, 0.4);
  backdrop-filter: blur(5px);
  overflow: hidden;
}
.ms-step__media { position: relative; height: 220px; }
.ms-step__badge {
  position: absolute;
  left: 24px;
  top: 20px;
  z-index: 3;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 44px;
  padding: 4px 24px;
  border: 1px solid #A0C4FF;
  border-radius: 100px;
  background-image: linear-gradient(180deg, #151515 10%, rgba(21, 21, 21, 0) 100%);
  filter: drop-shadow(0 0 20px rgba(160, 196, 255, 0.7));
  font-family: "Open Sans", var(--ms-font);
  font-size: 20px;
  font-weight: 700;
  line-height: 1.7;
  color: #A0C4FF;
}

/* the artwork keeps the share of the card it has in the design */
.ms-step__art { position: absolute; z-index: 1; }
.ms-step__art--main {
  left: var(--ms-art-left, 15%);
  top: var(--ms-art-top, 10%);
  width: var(--ms-art-width, 75%);
}
.ms-step__art--logo { left: -5.2%; top: 47.8%; width: 50%; }
.ms-step__art--device { left: -2.6%; top: 46.9%; width: 80.9%; }
.ms-step--01 { --ms-art-left: 21.1%; --ms-art-top: 10%;  --ms-art-width: 73.3%; }
.ms-step--02 { --ms-art-left: 10.4%; --ms-art-top: 8.9%; --ms-art-width: 80.4%; }
.ms-step--03 { --ms-art-left: 15.9%; --ms-art-top: 10.3%; --ms-art-width: 91.5%; }

.ms-step__body { position: relative; z-index: 2; padding: 24px; }
.ms-step__title { font-size: clamp(26px, 2.6vw, 36px); font-weight: 800; line-height: 1.17; color: var(--ms-white); }
.ms-step__desc { margin-top: 8px; font-size: 16px; font-weight: 500; line-height: 32px; color: var(--ms-white); }
.ms-step__list { margin-top: 8px; display: flex; flex-direction: column; gap: 0; }
.ms-step__list li {
  display: flex;
  align-items: center;
  gap: 20px;
  font-size: clamp(16px, 1.35vw, 20px);
  font-weight: 800;
  line-height: 42px;
  color: var(--ms-white);
}
.ms-step__list li::before {
  content: "";
  flex: 0 0 auto;
  width: 20px;
  height: 42px;
  background: url("../_img/maritime-solution/icon/check-blue.svg") no-repeat center / 20px 17px;
}
@media (min-width: 992px) {
  .ms-step__media { height: 360px; }
  .ms-step__badge { left: 36px; top: 24px; min-height: 56px; padding: 4px 28px; font-size: 28px; line-height: 48px; }
  .ms-step__body { padding: 0 36px 36px; }
}

/* -----------------------------------------------------------------------------
   17. Why valuable at sea
   -------------------------------------------------------------------------- */
.ms-value__head { margin-bottom: 48px; }
.ms-value__head p { margin-top: 24px; }
.ms-value-card {
  display: flex;
  flex-direction: column;
  gap: 24px;
  height: 100%;
  padding: 28px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: 4px 12px 40px rgba(30, 84, 168, 0.2);
}
@media (min-width: 992px) { .ms-value-card { gap: 36px; padding: 36px; } }
.ms-value-card__icon { width: 100%; max-width: 173px; height: 100px; object-fit: contain; object-position: left center; }
.ms-value-card__title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 32px; color: var(--ms-navy); }
.ms-value-card__desc { margin-top: 12px; }

/* -----------------------------------------------------------------------------
   18. Redundancy modes
   -------------------------------------------------------------------------- */
/* Values below come from the Figma export (section 1920x1120, card 696x880). */
.ms-red {
  position: relative;
  isolation: isolate;
  background-color: #DEEBFB;
}
/* two large white radial glows over the pale blue base */
.ms-red__blob { position: absolute; z-index: 0; pointer-events: none; }
.ms-red__blob--l { left: 0; top: 24.9%; width: 43.9%; }
.ms-red__blob--r { left: 58.3%; top: 0; width: 41.7%; }

.ms-red-card {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  height: 100%;
  padding: 28px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: 4px 12px 60px rgba(30, 84, 168, 0.2);
  overflow: hidden;
}
@media (min-width: 992px) { .ms-red-card { gap: 48px; padding: 36px; } }

.ms-red-card__top {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 36px;
  width: 100%;
}
.ms-red-card__head { width: 100%; }
@media (min-width: 992px) { .ms-red-card__head { padding: 0 24px; } }
.ms-red-card__label { font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 42px; color: var(--ms-primary); }
.ms-red-card__title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 42px; color: var(--ms-navy); }
.ms-red-card__desc { color: var(--ms-text); }

/* Physical Host -> Physical Standby pills, arrow centred in the 60px gap */
.ms-red-card__flow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 40px;
  width: 100%;
  max-width: 585px;
}
@media (min-width: 992px) { .ms-red-card__flow { gap: 60px; } }
.ms-red-pill {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 48px;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: clamp(15px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 1.4;
  text-align: center;
}
.ms-red-pill--from { background-color: var(--ms-violet-soft); box-shadow: inset 0 0 0 1px #6C6EE6; color: #6C6EE6; }
.ms-red-pill--to { background-color: var(--ms-primary-soft); box-shadow: inset 0 0 0 1px var(--ms-primary); color: var(--ms-primary); }
.ms-red-card__arrow {
  position: absolute;
  left: 50%;
  top: 50%;
  width: 37px;
  height: 16px;
  transform: translate(-50%, -50%);
}

.ms-red-card__diagram { width: 100%; }

/* iRM device photo + the logo/text group, both centred */
.ms-red-irm__device { width: 100%; max-width: 297px; margin: 0 auto; }
.ms-red-irm {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 16px;
  margin-top: 24px;
}
.ms-red-irm__logo { flex: 0 0 auto; width: 58px; }
.ms-red-irm__text { display: flex; flex-direction: column; justify-content: center; }
.ms-red-irm__name { font-size: clamp(20px, 1.6vw, 24px); font-weight: 800; line-height: 32px; color: var(--ms-navy); }
.ms-red-irm__sub { font-size: 16px; font-weight: 500; line-height: 24px; color: var(--ms-navy); }

/* the bracket that splits the iRM layer into the host / standby nodes */
.ms-red-branch { display: flex; flex-direction: column; align-items: center; margin-top: 24px; }
.ms-red-branch__tick { width: 1px; height: 20px; background-color: #2A5AA8; }
.ms-red-branch__bar {
  width: 50%;
  height: 20px;
  border: 1px solid #2A5AA8;
  border-bottom: 0;
}

.ms-red-nodes {min-height:220px; position: relative; display: flex; align-items: flex-end; }
.ms-red-node { flex: 1 1 0; min-width: 0; text-align: center; }
.ms-red-node__cluster { width: 100%; max-width: 280px; margin: 0 auto; }
.ms-red-node__cluster-top { display: block; width: 50.2%; margin: 0 auto -1px; }
.ms-red-node__cluster-row { display: flex; }
.ms-red-node__cluster-row img { width: 50%; }
.ms-red-node__device { position: relative; width: 100%; max-width: 237px; margin: 0 auto; }
.ms-red-node__device > img { display: block; width: 100%; }
.ms-red-node__vms {
  position: absolute;
  left: 0;
  right: 0;
  top: -21px;
  display: flex;
  gap: 8px;
}
.ms-red-node__vm {
  flex: 1 1 0;
  min-width: 0;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  min-height: 32px;
  padding: 6px 4px;
  background-color: rgba(31, 99, 214, 0.08);
  font-size: clamp(12px, 1.35vw, 20px);
  font-weight: 500;
  line-height: 20px;
  color: var(--ms-primary);
}
.ms-red-node__label { margin-top: 12px; font-size: clamp(16px, 1.35vw, 20px); font-weight: 500; line-height: 24px; color: var(--ms-primary); }
.ms-red-node__name { font-size: clamp(17px, 1.6vw, 24px); font-weight: 800; line-height: 42px; color: var(--ms-navy); }
/* host -> standby arrow, on the product-name line between the two labels */
.ms-red-nodes__arrow {
  position: absolute;
  left: 50%;
  bottom: 21px;
  width: 24%;
  height: 15px;
  transform: translateX(-50%);
  background:
    url("../_img/maritime-solution/diagram/red-arrow-line.svg") no-repeat left center / calc(100% - 9px) 1px,
    url("../_img/maritime-solution/diagram/red-arrow-head.svg") no-repeat right center / 9px 15px;
}

/* -----------------------------------------------------------------------------
   19. Maritime applications
   -------------------------------------------------------------------------- */
.ms-app__head { margin-bottom: 48px; text-align: center; }
.ms-app-card {
  display: flex;
  flex-direction: column;
  gap: 20px;
  height: 100%;
  padding-bottom: 24px;
  border-radius: var(--ms-radius);
  background-color: var(--ms-white);
  box-shadow: 0 0 60px rgba(30, 84, 168, 0.12);
  overflow: hidden;
  transition: transform .3s ease, box-shadow .3s ease;
}
.ms-app-card:hover { transform: translateY(-6px); box-shadow: 0 12px 60px rgba(30, 84, 168, 0.24); }
.ms-app-card__img { margin: 0; }
.ms-app-card__img img { width: 100%; aspect-ratio: 460 / 242; object-fit: cover; }
.ms-app-card__body { padding: 0 24px; }
.ms-app-card__title { margin-top: 2px; font-size: clamp(20px, 1.7vw, 24px); font-weight: 800; line-height: 32px; color: var(--ms-navy); }
.ms-app-card__desc { margin-top: 12px; }

/* -----------------------------------------------------------------------------
   20. Marine certifications
   -------------------------------------------------------------------------- */
/* Values below come from the Figma export (section gap 80, card 460x360,
   padding 230/24/24, seal 300x300 overhanging the card top by 74px). */
/* the seal overhangs the card top by 17.9% of the card width, so the headroom
   below the intro and between stacked cards is expressed the same way */
.ms-cert__head { margin-bottom: 20%; max-width: 926px; }
.ms-cert__head p { margin-top: 24px; }
@media (min-width: 768px) { .ms-cert__head { margin-bottom: 80px; } }

.ms-cert-row { --bs-gutter-x: 30px; --bs-gutter-y: 100px; }
@media (min-width: 768px) { .ms-cert-row { --bs-gutter-y: 74px; } }

.ms-cert-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100%;
  padding: 0 24px 24px;
  border-radius: var(--ms-radius);
  background-color: rgba(255, 255, 255, 0.1);
  box-shadow:
    inset 0 0 0 2px #fff,
    0 0 50px rgba(47, 128, 255, 0.2),
    inset 10px -10px 50px #fff;
  text-align: center;
}
/* the seal sits in the flow with a negative margin, so both its size and its
   overhang stay proportional to the card at every width */
.ms-cert-card__badge {
  width: 72.8%;        /* 300 / 412 content box */
  margin-top: -17.9%;  /*  -74 / 412 */
  margin-bottom: 4px;
  filter: drop-shadow(0 0 50px rgba(47, 128, 255, 0.2));
}
.ms-cert-card__body { width: 100%; }
.ms-cert-card__title { font-size: clamp(20px, 1.7vw, 24px); font-weight: 700; line-height: 42px; color: var(--ms-text); }
.ms-cert-card__desc { color: var(--ms-text); }

/* -----------------------------------------------------------------------------
   21. Why IEI
   -------------------------------------------------------------------------- */
.ms-why {
  position: relative;
  background-image: linear-gradient(90deg, rgba(10, 27, 53, 1) 18.27%, rgba(36, 69, 126, 1) 49.52%, rgba(84, 128, 200, 1) 100%);
  color: var(--ms-white);
}
.ms-why__bg { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.ms-why__bg img { width: 100%; height: 100%; object-fit: cover; }
.ms-why__head .ms-h2 { color: var(--ms-white); font-size: clamp(22px, 1.9vw, 26px); }
.ms-why__head .ms-badge { color: var(--ms-white); font-size: clamp(22px, 2.2vw, 30px); }
/* Values below come from the Figma export (2x2 group 950x478, card 460x224,
   padding 20/140/24/24, artwork anchored to the bottom-right and clipped).
   Every metric is a share of the card width, and the type scales with the card
   (cqw), so the design proportions - and the single-line titles - hold at every
   width. `grid-auto-rows: 1fr` keeps all four cards exactly the same height. */
.ms-why-grid {
  display: grid;
  grid-template-columns: 1fr;
  grid-auto-rows: 1fr;
  gap: 30px;
  filter: drop-shadow(0 0 24px rgba(0, 221, 255, 0.75));
}
@media (min-width: 1200px) { .ms-why-grid { grid-template-columns: repeat(2, 1fr); } }
.ms-why-grid > * { min-width: 0; }

.ms-why-card {
  container-type: inline-size;
  position: relative;
  height: 100%;
  /* 20 / 140 / 24 / 24 of a 460px card */
  padding: 4.35% var(--ms-why-pad-right, 30.4%) 5.22% 5.22%;
  border-radius: var(--ms-radius);
  background-color: var(--ms-bg-darker);
  overflow: hidden;
}
/* the artwork sits in the bottom-right corner and bleeds past both edges */
.ms-why-card__art {
  position: absolute;
  right: var(--ms-why-art-right, -11%);
  bottom: 0;
  width: var(--ms-why-art-width, 52%);
  z-index: 0;
  pointer-events: none;
  transform: translateY(var(--ms-why-art-drop, 22%));
}
/* cqw resolves against the container's CONTENT box, which differs between the
   two card widths, so the type unit (= 24px at design size) is set per card */
/* --ms-why-art-width : 插圖寬度（卡片寬度的百分比）  -> 數字小 = 圖變小
   --ms-why-art-right : 距卡片右緣（卡片寬度的百分比）-> 數字大 = 圖往左
   --ms-why-art-drop  : 向下位移（插圖自身高度的百分比）-> 數字小 = 圖往上 */
.ms-why-card--01 { --ms-why-pad-right: 30.4%; --ms-why-unit: 8.108cqw; --ms-why-art-width: 42%; --ms-why-art-right: 0%; --ms-why-art-drop: 4%; }
.ms-why-card--02 { --ms-why-pad-right: 21.7%; --ms-why-unit: 7.143cqw; --ms-why-art-width: 42%; --ms-why-art-right: 0%; --ms-why-art-drop: 4%; }
.ms-why-card--03 { --ms-why-pad-right: 30.4%; --ms-why-unit: 8.108cqw; --ms-why-art-width: 42%; --ms-why-art-right: 0%; --ms-why-art-drop: 4%; }
.ms-why-card--04 { --ms-why-pad-right: 30.4%; --ms-why-unit: 8.108cqw; --ms-why-art-width: 42%; --ms-why-art-right: 0%; --ms-why-art-drop: 4%; }

.ms-why-card__body { position: relative; z-index: 1; }
.ms-why-card__cat {
  font-size: clamp(14px, calc(var(--ms-why-unit, 8.108cqw) * 0.8333), 20px);  /* 20 / 24 */
  font-weight: 600;
  line-height: 2.1;                        /* 42 / 20 */
  color: #A0C4FF;
}
.ms-why-card__title {
  font-size: clamp(15px, var(--ms-why-unit, 8.108cqw), 24px);
  font-weight: 800;
  line-height: 1.75;                       /* 42 / 24 */
  color: var(--ms-white);
  /* the design keeps every product title on a single line */
  white-space: nowrap;
}
.ms-why-card__desc {
  font-size: clamp(13px, calc(var(--ms-why-unit, 8.108cqw) * 0.6667), 16px);  /* 16 / 24 */
  line-height: 2;                          /* 32 / 16 */
  color: var(--ms-white);
}
@supports not (container-type: inline-size) {
  .ms-why-card__cat { font-size: clamp(14px, 1.1vw, 20px); }
  .ms-why-card__title { font-size: clamp(15px, 1.3vw, 24px); white-space: normal; }
  .ms-why-card__desc { font-size: clamp(13px, 0.9vw, 16px); }
}

/* -----------------------------------------------------------------------------
   22. FAQ accordion
   -------------------------------------------------------------------------- */
.ms-faq__head { margin-bottom: 48px; text-align: center; }
.ms-faq__list { max-width: 1440px; margin: 0 auto; }
.ms-faq-item { border-bottom: 1px solid rgba(200, 216, 236, 1); }
.ms-faq-item__btn {
  display: flex;
  align-items: center;
  gap: 24px;
  width: 100%;
  padding: 18px 0;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
}
.ms-faq-item__q {
  flex: 1 1 auto;
  font-size: 16px;
  font-weight: 500;
  line-height: 28px;
  color: var(--ms-navy);
  transition: font-weight .2s ease;
}
.ms-faq-item__icon {
  flex: 0 0 auto;
  width: 28px;
  height: 28px;
  background: url("../_img/maritime-solution/icon/faq-closed.svg") no-repeat center / 28px 28px;
}
.ms-faq-item.is-open .ms-faq-item__icon { background-image: url("../_img/maritime-solution/icon/faq-open.svg"); }
.ms-faq-item.is-open .ms-faq-item__q { font-size: clamp(18px, 1.7vw, 24px); font-weight: 800; line-height: 42px; }
.ms-faq-item__panel { display: none; padding: 0 52px 28px 0; }
.ms-faq-item__intro { color: var(--ms-text-muted); }
/* bulleted "How IEI helps" block, indented from the question like the design */
.ms-faq-help { position: relative; margin-top: 20px; padding-left: 56px; }
.ms-faq-help::before {
  content: "";
  position: absolute;
  left: 34px;
  top: 13px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--ms-primary);
}
.ms-faq-help p { color: var(--ms-primary); }
.ms-faq-help__label { font-weight: 700; }
@media (max-width: 575.98px) {
  .ms-faq-item__panel { padding-right: 0; }
  .ms-faq-help { padding-left: 22px; }
  .ms-faq-help::before { left: 4px; }
}

/* -----------------------------------------------------------------------------
   23. Closing CTA
   -------------------------------------------------------------------------- */
.ms-cta {
  position: relative;
  background-color: var(--ms-white);
  background-image: url("../_img/maritime-solution/cta-bg.png");
  background-repeat: no-repeat;
  background-position: right center;
  background-size: cover;
  overflow: hidden;
}
@media (min-width: 1700px) { .ms-cta { background-size: auto 100%; min-height: 600px; } }
.ms-cta::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0.96) 0%, rgba(255, 255, 255, 0.85) 34%, rgba(255, 255, 255, 0) 60%);
}
.ms-cta > .container { position: relative; z-index: 2; }
.ms-cta__inner { max-width: 550px; }
.ms-cta__title { color: var(--ms-text-cta); }
.ms-cta__desc { margin-top: 24px; color: var(--ms-text-cta); }
.ms-cta__actions { margin-top: 32px; }
@media (max-width: 991.98px) {
  .ms-cta::after { background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(255, 255, 255, 0.85) 100%); }
}
@media (max-width: 575.98px) {
  .ms-cta__actions .ms-btn { width: 100%; }
}

/* -----------------------------------------------------------------------------
   24. AOS safety net - never leave content invisible
   -------------------------------------------------------------------------- */
.no-aos [data-aos] { opacity: 1 !important; transform: none !important; }