/* ==========================================================================
   Nessar – client revision round 1 (11/2026)
   Loaded after every other stylesheet (see app/setup.php).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Mega menu – light panel so it separates clearly from the dark page.
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .site-header .mega-menu {
    border-top: 1px solid rgb(36 200 237 / 55%);
    border-bottom: 1px solid rgb(8 104 242 / 14%);
    background-color: #f3f7fd;
    background-image:
      radial-gradient(circle at 12% 0%, rgb(36 200 237 / 14%), transparent 26rem),
      radial-gradient(circle at 92% 100%, rgb(8 104 242 / 9%), transparent 24rem),
      linear-gradient(180deg, #ffffff, #eef4fc);
    color: var(--color-ink);
    box-shadow:
      0 0 0 1px rgb(36 200 237 / 10%),
      0 1.75rem 3.5rem rgb(0 6 30 / 45%);
  }

  .site-header .mega-menu::before {
    inset: 0 0 auto;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--color-cyan) 30%, var(--color-brand) 70%, transparent);
    opacity: 1;
  }

  /* Intro card stays dark – it anchors the panel to the Nessar brand. */
  .site-header .mega-menu__intro {
    border-color: transparent;
    background:
      radial-gradient(circle at 78% 10%, rgb(36 200 237 / 26%), transparent 9rem),
      linear-gradient(150deg, #052a6b, #001a48 60%, #000f38);
    color: #fff;
    box-shadow: 0 .8rem 1.6rem rgb(0 26 72 / 22%);
  }

  .site-header .mega-menu__column {
    border-color: rgb(8 104 242 / 12%);
    background: #fff;
    box-shadow: 0 .2rem .6rem rgb(6 20 47 / 4%);
  }

  .site-header .mega-menu__column:last-child {
    border-right-color: rgb(8 104 242 / 12%);
  }

  .site-header .mega-menu__column:hover,
  .site-header .mega-menu__column:focus-within {
    border-color: rgb(8 104 242 / 45%);
    background: linear-gradient(145deg, #ffffff, #eaf4ff);
    box-shadow: 0 .5rem 1.2rem rgb(8 104 242 / 12%);
  }

  .site-header nav .mega-menu__heading {
    color: var(--color-ink);
  }

  .site-header nav .mega-menu__heading::after,
  .mega-menu__links li.menu-item-has-children > .mega-menu__link::after {
    color: var(--color-brand);
  }

  .site-header nav .mega-menu__heading:hover,
  .site-header nav .mega-menu__link:hover {
    color: var(--color-brand);
  }

  .site-header nav .mega-menu__link {
    color: rgb(6 20 47 / 72%);
  }

  .site-header .mega-menu__column > .mega-menu__links,
  .site-header .mega-menu__links .mega-menu__links {
    border-color: rgb(8 104 242 / 18%);
    background: #fff;
    box-shadow: 0 1rem 2rem rgb(6 20 47 / 16%);
  }

  .site-header .mega-menu__column > .mega-menu__links > li > .mega-menu__link::before {
    background: rgb(8 104 242 / 45%);
    box-shadow: none;
  }

  .site-header .mega-menu__footer {
    border-top-color: rgb(8 104 242 / 12%);
  }

  .site-header .mega-menu__footer-copy {
    color: rgb(6 20 47 / 55%);
  }

  .site-header .mega-menu__footer-copy strong {
    color: var(--color-ink);
  }

  .site-header .mega-menu__footer-link {
    color: var(--color-brand);
  }

  /* Open state of the top-level item mirrors the panel accent. */
  .header-menu > .menu-item.is-open > .nav-link {
    color: var(--color-cyan);
    background: rgb(36 200 237 / 10%);
  }
}

/* --------------------------------------------------------------------------
   2. Products mega menu – vendor list + product panel
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .mega-menu--vendors .mega-menu__inner {
    grid-template-columns: minmax(13.5rem, 15rem) minmax(0, 1fr);
  }

  .mega-menu__vendors {
    position: relative;
    display: grid;
    grid-template-columns: minmax(0, 25rem) minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    column-gap: 1.25rem;
    min-height: 23rem;
  }

  .mega-menu__vendors-label {
    grid-column: 1;
    margin: 0 0 .55rem;
    color: rgb(6 20 47 / 55%);
    font-size: .62rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mega-menu--vendors .mega-menu__grid {
    grid-column: 1;
    grid-row: 2;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .3rem;
  }

  .mega-menu--vendors .mega-menu__column {
    position: static;
    padding: 0;
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .mega-menu--vendors .mega-menu__column:last-child {
    border-right-color: transparent;
  }

  .mega-menu--vendors .mega-menu__column:hover,
  .mega-menu--vendors .mega-menu__column:focus-within {
    border-color: transparent;
    background: transparent;
    box-shadow: none;
    transform: none;
  }

  .site-header nav .mega-menu--vendors .mega-menu__heading {
    min-height: 2rem;
    border: 1px solid transparent;
    border-radius: .4rem;
    padding: .45rem 1.6rem .45rem .7rem;
    font-size: .7rem;
    transition: background-color 160ms ease, border-color 160ms ease, color 160ms ease;
  }

  .site-header nav .mega-menu--vendors .mega-menu__heading::after {
    top: 50%;
    right: .6rem;
    opacity: 0;
    transform: translate(-.25rem, -50%);
    transition: opacity 160ms ease, transform 160ms ease;
  }

  .site-header nav .mega-menu--vendors .mega-menu__column.is-active > .mega-menu__heading {
    border-color: rgb(8 104 242 / 22%);
    background: #fff;
    color: var(--color-brand);
    box-shadow: 0 .35rem .9rem rgb(8 104 242 / 10%);
  }

  .site-header nav .mega-menu--vendors .mega-menu__column.is-active > .mega-menu__heading::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  /* Product panel: one per vendor, only the active one is shown. */
  .mega-menu--vendors .mega-menu__panel {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: calc(25rem + 1.25rem);
    display: flex;
    overflow-y: auto;
    flex-direction: column;
    visibility: hidden;
    border: 1px solid rgb(8 104 242 / 12%);
    border-radius: .6rem;
    background: #fff;
    padding: 1.1rem 1.25rem;
    opacity: 0;
    box-shadow: 0 .8rem 2rem rgb(6 20 47 / 7%);
    transform: translateX(.4rem);
    transition: opacity 180ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 180ms;
  }

  .mega-menu--vendors .mega-menu__column.is-active > .mega-menu__panel {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition-delay: 0s;
  }

  .mega-menu__panel-head {
    display: grid;
    grid-template-columns: 1fr auto;
    align-items: end;
    gap: .2rem 1rem;
    margin-bottom: .9rem;
    border-bottom: 1px solid rgb(8 104 242 / 12%);
    padding-bottom: .8rem;
  }

  .mega-menu__panel-label {
    grid-column: 1;
    color: var(--color-brand);
    font-size: .58rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mega-menu__panel-title {
    grid-column: 1;
    color: var(--color-ink);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .site-header nav .mega-menu__panel-link {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    border: 1px solid rgb(8 104 242 / 30%);
    border-radius: 999px;
    padding: .45rem .85rem;
    color: var(--color-brand);
    font-size: .66rem;
    font-weight: 700;
    white-space: nowrap;
    transition: background-color 160ms ease, color 160ms ease;
  }

  .site-header nav .mega-menu__panel-link:hover,
  .site-header nav .mega-menu__panel-link:focus-visible {
    background: var(--color-brand);
    color: #fff;
  }

  .mega-menu__panel-empty {
    max-width: 38ch;
    color: rgb(6 20 47 / 62%);
    font-size: .76rem;
    line-height: 1.6;
  }

  /* Product groups laid out as columns; nested items listed inline (no flyouts). */
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    position: static;
    display: grid;
    visibility: inherit;
    grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr));
    align-content: start;
    gap: .15rem 1.25rem;
    width: auto;
    border: 0;
    background: transparent;
    padding: 0;
    opacity: 1;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
  }

  .site-header .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links {
    position: static;
    visibility: inherit;
    width: auto;
    margin: .1rem 0 .55rem .35rem;
    border: 0;
    border-left: 1px solid rgb(8 104 242 / 16%);
    border-radius: 0;
    background: transparent;
    padding: 0 0 0 .55rem;
    opacity: 1;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__link {
    display: block;
    min-height: 0;
    padding: .34rem .2rem .34rem .75rem;
    color: rgb(6 20 47 / 76%);
    font-size: .72rem;
    font-weight: 560;
    line-height: 1.35;
    white-space: normal;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children > .mega-menu__link {
    color: var(--color-ink);
    font-weight: 700;
    pointer-events: auto;
  }

  .mega-menu--vendors .mega-menu__panel li.menu-item-has-children > .mega-menu__link::after {
    display: none;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__link:hover {
    color: var(--color-brand);
    transform: translateX(.15rem);
  }

  .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links .mega-menu__link::before {
    display: none;
  }
}

/* Mobile/tablet: vendors become a compact two-column list; panels are skipped. */
@media (max-width: 64rem) {
  .mega-menu__vendors-label,
  .mega-menu--vendors .mega-menu__panel {
    display: none;
  }

  .mega-menu--vendors .mega-menu__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .45rem;
  }
}

/* --------------------------------------------------------------------------
   3. Archive keyword search (products, solutions, projects, news)
   -------------------------------------------------------------------------- */
.archive-search {
  position: relative;
  z-index: 3;
  display: flex;
  align-items: center;
  gap: .5rem;
  margin: 1rem 0 .75rem;
  border: 1px solid rgb(8 104 242 / 22%);
  border-radius: .75rem;
  background: #fff;
  padding: .45rem .45rem .45rem 1rem;
  box-shadow: 0 1rem 2.4rem rgb(0 15 56 / 16%);
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.archive-search:focus-within {
  border-color: var(--color-brand, #0868f2);
  box-shadow: 0 0 0 3px rgb(8 104 242 / 16%), 0 1rem 2.4rem rgb(0 15 56 / 16%);
}

.archive-search__icon {
  width: 1.15rem;
  height: 1.15rem;
  flex: 0 0 auto;
  fill: none;
  stroke: #0868f2;
  stroke-linecap: round;
  stroke-width: 2;
}

.archive-search__input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: .7rem .25rem;
  color: #092a55;
  font-size: .95rem;
  font-weight: 560;
  outline: none;
}

.archive-search__input::placeholder {
  color: #7a8ba0;
  font-weight: 500;
}

.archive-search__input::-webkit-search-cancel-button {
  display: none;
}

.archive-search__clear {
  flex: 0 0 auto;
  padding: .5rem .6rem;
  color: #526982;
  font-size: .78rem;
  font-weight: 700;
}

.archive-search__clear:hover {
  color: #0868f2;
}

.archive-search__submit {
  flex: 0 0 auto;
  min-height: 2.75rem;
  border-radius: .55rem;
  background: linear-gradient(135deg, #0868f2, #0a4fc4);
  padding: .65rem 1.3rem;
  color: #fff;
  font-size: .82rem;
  font-weight: 750;
  cursor: pointer;
  transition: filter 160ms ease, transform 160ms ease;
}

.archive-search__submit:hover,
.archive-search__submit:focus-visible {
  filter: brightness(1.12);
  transform: translateY(-1px);
}

.archive-search__summary {
  margin: 0 0 .75rem;
  color: rgb(255 255 255 / 82%);
  font-size: .9rem;
}

.archive-search__summary strong {
  color: #fff;
}

body.nessar-unified-archive .archive-search + .archive-filter-panel,
body.nessar-unified-archive .archive-search__summary + .archive-filter-panel {
  margin-top: 0;
}

/* Mobile / tablet: chips wrap inside the panel instead of being clipped. */
@media (max-width: 64rem) {
  .archive-filter-panel .inner-filter {
    flex-wrap: wrap !important;
    max-height: 15rem;
    margin: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    padding: .8rem 1rem 1rem !important;
  }

  .archive-filter-panel .inner-filter__chip {
    flex: 0 0 auto;
    min-height: 2.1rem !important;
    padding: .5rem .8rem !important;
    font-size: .7rem !important;
  }
}

@media (max-width: 36rem) {
  .archive-search {
    padding-left: .8rem;
  }

  .archive-search__submit {
    padding-inline: .9rem;
  }

  .archive-filter-panel__summary {
    gap: .75rem;
  }
}

/* --------------------------------------------------------------------------
   4. Mobile gutters – 16px on each side everywhere, panels aligned to content.
   -------------------------------------------------------------------------- */
@media (max-width: 48rem) {
  .container-shell,
  .showcase-shell {
    width: calc(100% - 2rem);
  }

  .archive-filter-panel {
    margin-right: 0 !important;
    margin-left: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   5. Header global search
   -------------------------------------------------------------------------- */
.header-search {
  display: flex;
  flex: 0 0 auto;
  align-items: center;
}

.header-search__toggle {
  display: inline-grid;
  width: 2.55rem;
  height: 2.55rem;
  place-items: center;
  border: 1px solid rgb(36 200 237 / 28%);
  border-radius: 999px;
  background: rgb(0 7 29 / 48%);
  color: #fff;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, box-shadow 160ms ease;
}

.header-search__toggle:hover,
.header-search__toggle:focus-visible,
.header-search__toggle[aria-expanded="true"] {
  border-color: var(--color-cyan);
  background: rgb(36 200 237 / 14%);
  box-shadow: 0 0 .9rem rgb(36 200 237 / 30%);
}

.header-search__toggle svg,
.header-search__icon {
  width: 1.05rem;
  height: 1.05rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.header-search__panel {
  position: absolute;
  top: calc(100% + .6rem);
  right: 0;
  left: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: .6rem;
  border: 1px solid rgb(36 200 237 / 45%);
  border-radius: .8rem;
  background: rgb(255 255 255 / 98%);
  padding: .45rem .45rem .45rem 1.1rem;
  color: var(--color-ink);
  box-shadow: 0 0 0 4px rgb(36 200 237 / 10%), 0 1.5rem 3rem rgb(0 4 20 / 45%);
}

.header-search__icon {
  flex: 0 0 auto;
  color: var(--color-brand);
}

.header-search__input {
  min-width: 0;
  flex: 1 1 auto;
  border: 0;
  background: transparent;
  padding: .75rem .25rem;
  color: var(--color-ink);
  font-size: 1rem;
  font-weight: 560;
  outline: none;
}

.header-search__input::placeholder {
  color: #6f8197;
  font-weight: 500;
}

.header-search__submit {
  flex: 0 0 auto;
  min-height: 2.8rem;
  border-radius: .55rem;
  background: linear-gradient(135deg, #0868f2, #0a4fc4);
  padding: .65rem 1.4rem;
  color: #fff;
  font-size: .85rem;
  font-weight: 750;
  cursor: pointer;
}

.header-search__submit:hover,
.header-search__submit:focus-visible {
  filter: brightness(1.12);
}

@media (max-width: 90rem) and (min-width: 64.0625rem) {
  .site-header .header-menu > .menu-item > .nav-link {
    padding-inline: .6rem;
  }
}

@media (max-width: 64rem) {
  .site-header .header-inner {
    grid-template-columns: 1fr auto auto auto;
    column-gap: .5rem;
  }

  .header-search {
    grid-column: 2;
    grid-row: 1;
  }

  .site-header .header-languages {
    grid-column: 3;
  }

  .site-header .header-toggle {
    grid-column: 4;
  }

  .header-search__panel {
    top: calc(100% + .4rem);
  }

  .header-search__submit {
    padding-inline: 1rem;
  }
}

/* --------------------------------------------------------------------------
   6. Enterprise solutions wheel – natural letterforms, balanced bands,
      animated orbits and a backdrop that blends into the section.
   -------------------------------------------------------------------------- */
.ent-sol__wheel-items text {
  font-weight: 650;
  letter-spacing: 0;
}

.ent-sol__wheel-items--outer text {
  font-size: 8.4px;
}

.ent-sol__wheel-items--middle text {
  font-size: 7.1px;
}

.ent-sol__wheel-items--inner text {
  font-size: 7.8px;
  font-weight: 800;
  letter-spacing: .04em;
}

.ent-sol__arc-label--outer {
  font-size: 10.5px;
  letter-spacing: .16em;
}

.ent-sol__arc-label--middle {
  font-size: 8.6px;
  letter-spacing: .14em;
}

.ent-sol__arc-label--inner {
  font-size: 7px;
  letter-spacing: .14em;
}

.ent-sol__orbit {
  fill: none;
  stroke-linecap: round;
  transform-box: view-box;
  transform-origin: 260px 260px;
}

.ent-sol__orbit--outer {
  stroke: rgb(196 170 255 / 90%);
  stroke-width: 3;
  stroke-dasharray: 46 1487;
  filter: drop-shadow(0 0 6px rgb(168 136 255 / 90%));
  animation: nessar-orbit 22s linear infinite;
}

.ent-sol__orbit--middle {
  stroke: rgb(120 255 228 / 90%);
  stroke-width: 3;
  stroke-dasharray: 36 1083;
  filter: drop-shadow(0 0 6px rgb(45 235 203 / 90%));
  animation: nessar-orbit 16s linear infinite reverse;
}

.ent-sol__orbit--inner {
  stroke: rgb(140 220 255 / 95%);
  stroke-width: 3.5;
  stroke-dasharray: 28 676;
  filter: drop-shadow(0 0 6px rgb(30 169 255 / 95%));
  animation: nessar-orbit 11s linear infinite;
}

.ent-sol__ring--core {
  animation: nessar-core-pulse 3.2s ease-in-out infinite;
  transform-box: view-box;
  transform-origin: 260px 260px;
}

@keyframes nessar-orbit {
  to { transform: rotate(360deg); }
}

@keyframes nessar-core-pulse {
  0%, 100% { opacity: .75; stroke-width: 1.75; }
  50% { opacity: 1; stroke-width: 3.5; }
}

/* Dark halo + soft platform so the wheel sits in the scene instead of on top of the photo. */
.ent-sol__diagram {
  position: relative;
}

.ent-sol__wheel::before {
  position: absolute;
  inset: -9%;
  z-index: -1;
  border-radius: 50%;
  background:
    radial-gradient(circle, rgb(0 13 40 / 92%) 0 52%, rgb(0 13 40 / 62%) 62%, transparent 72%);
  content: "";
}

.ent-sol__wheel::after {
  position: absolute;
  left: 8%;
  right: 8%;
  bottom: -7%;
  z-index: -1;
  height: 16%;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgb(36 200 237 / 32%), rgb(8 104 242 / 12%) 45%, transparent 70%);
  filter: blur(6px);
  content: "";
}

.ent-sol__bg::before {
  filter: saturate(.85) brightness(.82);
}

/* --------------------------------------------------------------------------
   7. CTA system – primary contrasts with the dark navy, secondary gets a
      clear outline with a soft glow (client request, slide 13).
   -------------------------------------------------------------------------- */
.home-section .button,
.hero-slider .button,
.ent-sol .button,
.legacy-services .button {
  min-height: 3.1rem;
  gap: .55rem;
  border-radius: 999px;
  padding-inline: 1.6rem;
  font-size: .9rem;
  font-weight: 650;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease, color 180ms ease;
}

/* On dark surfaces: bright cyan → white primary, navy text. */
.hero-slider .button-primary,
.hero-slider .button-light,
.ent-sol .button-light,
.ent-sol .button-primary {
  border: 0;
  background: linear-gradient(135deg, #5fe3ff 0%, #24c8ed 45%, #ffffff 140%);
  color: #001a48;
  box-shadow: 0 .6rem 1.6rem rgb(36 200 237 / 34%), inset 0 1px 0 rgb(255 255 255 / 60%);
}

.hero-slider .button-primary:hover,
.hero-slider .button-light:hover,
.ent-sol .button-light:hover,
.ent-sol .button-primary:hover,
.hero-slider .button-primary:focus-visible,
.ent-sol .button-light:focus-visible {
  box-shadow: 0 .9rem 2.2rem rgb(36 200 237 / 48%), inset 0 1px 0 rgb(255 255 255 / 70%);
  transform: translateY(-2px);
}

.hero-slider .button-ghost,
.ent-sol .button-ghost {
  border: 1.5px solid rgb(95 227 255 / 75%);
  background: rgb(36 200 237 / 8%);
  color: #fff;
  box-shadow: 0 0 .9rem rgb(36 200 237 / 26%), inset 0 0 .8rem rgb(36 200 237 / 10%);
}

.hero-slider .button-ghost:hover,
.ent-sol .button-ghost:hover,
.hero-slider .button-ghost:focus-visible,
.ent-sol .button-ghost:focus-visible {
  border-color: #5fe3ff;
  background: rgb(36 200 237 / 16%);
  box-shadow: 0 0 1.4rem rgb(36 200 237 / 45%), inset 0 0 1rem rgb(36 200 237 / 16%);
  transform: translateY(-2px);
}

/* --------------------------------------------------------------------------
   8. Home hero – both banners share one grid, the Nessar logo hologram and
      layered motion effects over the background photos.
   -------------------------------------------------------------------------- */
.hero-nowrap {
  white-space: nowrap;
}

.hero-slider .hero-layout {
  width: min(var(--container-enterprise), calc(100% - var(--space-page-x))) !important;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(2rem, 4vw, 4.5rem);
  align-items: center;
}

.hero-slider .hero-layout .hero-balance-copy {
  max-width: 40rem;
}

.hero-slider .hero-layout .display-title {
  max-width: 17ch;
  color: #fff;
  font-size: clamp(2.25rem, 3.4vw, 3.6rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.06;
  text-wrap: balance;
}

.hero-slider .hero-layout .hero-copy {
  max-width: 36rem;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: .9rem;
}

.hero-visual {
  position: relative;
  display: grid;
  justify-items: center;
  align-content: center;
  width: 100%;
  max-width: 34rem;
  min-height: clamp(22rem, 34vw, 30rem);
  justify-self: end;
}

/* Pillar cards (banner 2) */
.hero-visual--cards {
  gap: .9rem;
}

.hero-pillar {
  position: relative;
  display: grid;
  width: 100%;
  grid-template-columns: 3rem minmax(0, 1fr) auto;
  align-items: center;
  gap: 1rem;
  overflow: hidden;
  border: 1px solid rgb(120 190 255 / 26%);
  border-radius: 1rem;
  background: linear-gradient(140deg, rgb(14 80 158 / 26%), rgb(1 21 58 / 78%));
  padding: 1.15rem 1.25rem;
  color: #fff;
  box-shadow: 0 .8rem 1.6rem rgb(0 8 32 / 24%);
  backdrop-filter: blur(10px);
  transition: border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
}

.hero-pillar::before {
  position: absolute;
  inset: 0;
  background: linear-gradient(105deg, transparent 30%, rgb(95 227 255 / 16%) 50%, transparent 70%);
  content: "";
  transform: translateX(-100%);
  transition: transform 700ms cubic-bezier(.22, 1, .36, 1);
}

.hero-pillar:hover,
.hero-pillar:focus-visible {
  border-color: rgb(95 227 255 / 70%);
  box-shadow: 0 0 1.4rem rgb(36 200 237 / 22%), 0 .8rem 1.6rem rgb(0 8 32 / 24%);
  transform: translateX(-4px);
}

.hero-pillar:hover::before {
  transform: translateX(100%);
}

.hero-pillar__icon {
  display: grid;
  width: 3rem;
  height: 3rem;
  place-items: center;
  border-radius: 999px;
  background: linear-gradient(135deg, #4f46e5, #24c8ed);
  font-size: .8rem;
  font-weight: 700;
  box-shadow: 0 0 1rem rgb(36 200 237 / 40%);
}

.hero-pillar__body strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 650;
}

.hero-pillar__body small {
  display: block;
  margin-top: .3rem;
  color: rgb(226 240 255 / 70%);
  font-size: .82rem;
  line-height: 1.5;
}

.hero-pillar__arrow {
  color: var(--color-cyan);
  font-size: 1.15rem;
  transition: transform 200ms ease;
}

.hero-pillar:hover .hero-pillar__arrow {
  transform: translateX(4px);
}

/* Logo hologram (banner 1) */
.hero-holo {
  position: relative;
  width: min(100%, 30rem);
  aspect-ratio: 1;
}

.hero-holo__glow {
  position: absolute;
  inset: 12% 12% 22%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(36 200 237 / 42%), rgb(8 104 242 / 18%) 45%, transparent 70%);
  filter: blur(18px);
  animation: nessar-holo-glow 5s ease-in-out infinite;
}

.hero-holo__beam {
  position: absolute;
  left: 50%;
  bottom: 20%;
  width: 42%;
  height: 62%;
  background: linear-gradient(0deg, rgb(36 200 237 / 30%), transparent 85%);
  clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%);
  filter: blur(4px);
  opacity: .55;
  transform: translateX(-50%);
}

.hero-holo__mark {
  position: absolute;
  left: 50%;
  top: 8%;
  z-index: 2;
  width: 72%;
  height: auto;
  filter: drop-shadow(0 0 1.6rem rgb(36 200 237 / 55%)) drop-shadow(0 1.5rem 2rem rgb(0 10 40 / 60%));
  transform: translateX(-50%);
  animation: nessar-holo-float 6s ease-in-out infinite;
}

.hero-holo__ring {
  position: absolute;
  left: 50%;
  bottom: 14%;
  border: 1.5px solid rgb(95 227 255 / 70%);
  border-radius: 50%;
  box-shadow: 0 0 1rem rgb(36 200 237 / 45%), inset 0 0 1rem rgb(36 200 237 / 30%);
  transform: translateX(-50%) rotateX(72deg);
}

.hero-holo__ring--1 {
  width: 46%;
  aspect-ratio: 1;
  bottom: 2%;
  animation: nessar-holo-ring 4s ease-in-out infinite;
}

.hero-holo__ring--2 {
  width: 72%;
  aspect-ratio: 1;
  bottom: -10%;
  border-color: rgb(95 227 255 / 45%);
  animation: nessar-holo-ring 4s ease-in-out .6s infinite;
}

.hero-holo__ring--3 {
  width: 98%;
  aspect-ratio: 1;
  bottom: -22%;
  border-style: dashed;
  border-color: rgb(95 227 255 / 28%);
  box-shadow: none;
  animation: nessar-holo-spin 30s linear infinite;
}

.hero-holo__dot {
  position: absolute;
  z-index: 3;
  width: .45rem;
  height: .45rem;
  border-radius: 50%;
  background: #bff4ff;
  box-shadow: 0 0 .8rem 2px rgb(36 200 237 / 90%);
}

.hero-holo__dot--1 {
  left: 18%;
  top: 30%;
  animation: nessar-holo-float 5s ease-in-out .8s infinite;
}

.hero-holo__dot--2 {
  right: 16%;
  top: 52%;
  animation: nessar-holo-float 7s ease-in-out infinite reverse;
}

@keyframes nessar-holo-float {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -14px; }
}

@keyframes nessar-holo-glow {
  0%, 100% { opacity: .7; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

@keyframes nessar-holo-ring {
  0%, 100% { opacity: .55; }
  50% { opacity: 1; }
}

@keyframes nessar-holo-spin {
  to { transform: translateX(-50%) rotateX(72deg) rotate(360deg); }
}

/* Background effect layers */
.hero-fx {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}

.hero-slider__slide > .hero-slider__content {
  position: relative;
  z-index: 1;
}

.hero-fx__photo {
  position: absolute;
  inset: -2%;
  background-position: center;
  background-size: cover;
  animation: nessar-kenburns 24s ease-in-out infinite alternate;
}

.hero-slider__slide--eco .hero-fx__photo {
  background-position: 68% center;
}

.hero-fx__photo::after {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(0 12 40 / 78%) 0%, rgb(0 12 40 / 35%) 48%, rgb(0 12 40 / 10%) 100%),
    linear-gradient(180deg, rgb(0 12 40 / 0%) 60%, rgb(0 12 40 / 70%) 100%);
  content: "";
}

.hero-fx__grid {
  position: absolute;
  right: -20%;
  bottom: -8%;
  left: -20%;
  height: 46%;
  background:
    linear-gradient(90deg, rgb(36 200 237 / 22%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(36 200 237 / 22%) 1px, transparent 1px);
  background-size: 64px 64px;
  mask-image: linear-gradient(0deg, rgb(0 0 0 / 80%), transparent 85%);
  transform: perspective(520px) rotateX(62deg);
  transform-origin: bottom center;
  animation: nessar-grid-move 6s linear infinite;
}

.hero-fx__particles {
  position: absolute;
  inset: -50% 0 0;
  background-image:
    radial-gradient(circle, rgb(191 244 255 / 85%) 0 1.2px, transparent 1.6px),
    radial-gradient(circle, rgb(95 227 255 / 60%) 0 1px, transparent 1.4px);
  background-position: 0 0, 70px 110px;
  background-size: 140px 220px, 190px 170px;
  opacity: .55;
  mask-image: radial-gradient(ellipse at 70% 50%, #000 0 35%, transparent 75%);
  animation: nessar-particles 28s linear infinite;
}

.hero-fx__particles--far {
  background-size: 90px 130px, 120px 150px;
  opacity: .3;
  animation-duration: 46s;
}

.hero-fx__sweep {
  position: absolute;
  top: -30%;
  bottom: -30%;
  left: -30%;
  width: 22%;
  background: linear-gradient(90deg, transparent, rgb(95 227 255 / 9%), transparent);
  transform: rotate(18deg);
  animation: nessar-sweep 9s ease-in-out infinite;
}

@keyframes nessar-kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.08) translate3d(-1%, -1%, 0); }
}

@keyframes nessar-grid-move {
  to { background-position: 0 64px, 0 64px; }
}

@keyframes nessar-particles {
  to { transform: translateY(33%); }
}

@keyframes nessar-sweep {
  0% { left: -30%; }
  60%, 100% { left: 130%; }
}

@media (prefers-reduced-motion: reduce) {
  .hero-fx *,
  .hero-holo *,
  .ent-sol__orbit,
  .ent-sol__ring--core {
    animation: none !important;
  }
}

@media (max-width: 64rem) {
  .hero-slider .hero-layout {
    grid-template-columns: 1fr;
    gap: 1.5rem;
  }

  .hero-visual {
    min-height: 0;
    justify-self: stretch;
    max-width: none;
  }

  .hero-visual--logo .hero-holo {
    width: min(70%, 18rem);
    margin-inline: auto;
  }
}

/* Mobile: vertically centred stack, full-width CTAs. */
@media (max-width: 48rem) {
  .hero-slider .hero-slider__content {
    align-content: center;
    padding-top: 0;
  }

  .hero-slider .hero-layout .display-title {
    font-size: clamp(1.9rem, 8.4vw, 2.5rem);
  }

  .hero-slider .hero-layout .hero-copy {
    margin-top: 1rem;
    font-size: 1rem;
  }

  .hero-actions {
    flex-direction: column;
    gap: .7rem;
  }

  .hero-actions .button {
    width: 100%;
  }

  .hero-visual--logo {
    order: -1;
  }

  .hero-visual--logo .hero-holo {
    width: min(52%, 12rem);
  }

  .hero-visual--cards {
    gap: .6rem;
  }

  .hero-pillar {
    grid-template-columns: 2.4rem minmax(0, 1fr) auto;
    gap: .75rem;
    padding: .8rem .9rem;
  }

  .hero-pillar__icon {
    width: 2.4rem;
    height: 2.4rem;
    font-size: .7rem;
  }

  .hero-pillar__body small {
    display: none;
  }
}

/* --------------------------------------------------------------------------
   9. Partner & customer logos in original brand colours (no negative logos).
   -------------------------------------------------------------------------- */
.legacy-customers .legacy-customers__card:has(> img.is-brand-color) {
  border-color: rgb(255 255 255 / 70%);
  background: linear-gradient(180deg, #ffffff, #eef5ff);
  box-shadow: 0 .6rem 1.4rem rgb(0 8 32 / 28%);
}

.legacy-customers .legacy-customers__card:has(> img.is-dark-tile) {
  border-color: rgb(36 200 237 / 35%);
  background: linear-gradient(160deg, #0a2d66, #021638);
}

.legacy-customers .legacy-customers__card img.is-brand-color,
.legacy-customers:not(.legacy-partners) .legacy-customers__card img.is-brand-color,
.legacy-partners .legacy-customers__card img.is-brand-color {
  width: min(11rem, 78%);
  height: 4.6rem;
  max-width: none;
  max-height: none;
  object-fit: contain;
  filter: none;
  opacity: 1;
  -webkit-mask-image: none;
  mask-image: none;
  transform: none;
  transition: transform 220ms ease;
}

.legacy-customers .legacy-customers__card:hover img.is-brand-color {
  transform: scale(1.05);
}

@media (max-width: 48rem) {
  .legacy-customers .legacy-customers__card img.is-brand-color {
    height: 3.4rem;
  }
}

/* Vendor logos (hero marquee, products section): original colours on light chips. */
.hero-slider .hero-slider__partner {
  border: 1px solid rgb(255 255 255 / 60%) !important;
  border-radius: .7rem !important;
  background: linear-gradient(180deg, #ffffff, #eaf3ff) !important;
  box-shadow: 0 .4rem 1rem rgb(0 8 32 / 30%);
}

.hero-slider .hero-slider__partner img {
  opacity: 1 !important;
}

.hero-slider .hero-slider__partner img,
.legacy-products__vendor-logo img,
.legacy-products__vendor-grid .legacy-products__vendor-logo img,
.legacy-products__vendor-grid .legacy-products__vendor-logo img.is-opaque,
.legacy-vendor-strip img,
.legacy-products .legacy-vendor-strip img {
  max-height: 2.5rem;
  filter: none;
  opacity: 1;
}

.legacy-products__vendor-logo,
.legacy-products__vendor-grid .legacy-products__vendor-logo,
.legacy-vendor-strip span,
.legacy-products .legacy-vendor-strip span {
  border-color: rgb(255 255 255 / 60%);
  background: linear-gradient(180deg, #ffffff, #eaf3ff);
  color: var(--color-ink);
}

.legacy-products__vendor-grid .legacy-products__vendor-logo:hover,
.legacy-products .legacy-vendor-strip span:hover {
  border-color: var(--color-cyan);
  background: #fff;
  box-shadow: 0 0 1rem rgb(36 200 237 / 35%);
}

/* --------------------------------------------------------------------------
   10. Services – numbered capability matrix (distinct from Solutions).
   -------------------------------------------------------------------------- */
.svc-matrix.legacy-services {
  position: relative;
  display: block;
  min-height: auto;
  overflow: hidden;
  background:
    radial-gradient(circle at 8% 10%, rgb(36 200 237 / 14%), transparent 28rem),
    linear-gradient(180deg, #f4f9ff 0%, #e8f2ff 100%);
  padding-block: clamp(4.5rem, 8vw, 7.5rem);
  color: var(--color-ink);
}

.svc-matrix::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 104 242 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(8 104 242 / 5%) 1px, transparent 1px);
  background-size: 56px 56px;
  mask-image: linear-gradient(180deg, #000, transparent 85%);
  content: "";
  pointer-events: none;
}

.svc-matrix__bg {
  position: absolute;
  top: 50%;
  left: -14rem;
  width: 46rem;
  opacity: .22;
  transform: translateY(-50%);
  pointer-events: none;
  mask-image: radial-gradient(closest-side, #000 35%, transparent 100%);
}

.svc-matrix__bg img {
  width: 100%;
  animation: nessar-holo-float 9s ease-in-out infinite;
}

.svc-matrix__inner {
  position: relative;
  z-index: 1;
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1.5fr);
  gap: clamp(2rem, 4.5vw, 4.5rem);
  align-items: start;
}

.svc-matrix__intro {
  position: sticky;
  top: calc(var(--header-height, 5rem) + 2rem);
}

.svc-matrix__eyebrow {
  color: var(--color-brand);
  font-size: .75rem;
  font-weight: 750;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.svc-matrix__title {
  margin-top: .8rem;
  color: var(--color-ink);
  font-size: clamp(2.2rem, 3.6vw, 3.4rem);
  font-weight: 500;
  letter-spacing: -.025em;
  line-height: 1.05;
}

.svc-matrix__title span {
  background: linear-gradient(90deg, var(--color-brand), #18b4e6);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.svc-matrix__copy {
  max-width: 28rem;
  margin-top: 1.1rem;
  color: #3e5472;
  font-size: 1.02rem;
  line-height: 1.7;
}

.svc-matrix__lifecycle {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: .4rem;
  max-width: 28rem;
  margin: 1.6rem 0 1.8rem;
  padding: 0;
  list-style: none;
}

.svc-matrix__lifecycle li {
  position: relative;
  border-top: 2px solid rgb(8 104 242 / 22%);
  padding-top: .55rem;
  color: var(--color-ink);
  font-size: .8rem;
  font-weight: 650;
}

.svc-matrix__lifecycle li:first-child {
  border-top-color: var(--color-brand);
}

.svc-matrix__lifecycle li span {
  display: block;
  color: var(--color-brand);
  font-size: .66rem;
  font-weight: 750;
}

.svc-matrix .svc-matrix__cta {
  border: 0;
  background: linear-gradient(135deg, #0868f2, #0a4fc4);
  color: #fff;
  box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 32%);
}

.svc-matrix .svc-matrix__cta:hover,
.svc-matrix .svc-matrix__cta:focus-visible {
  box-shadow: 0 .9rem 2rem rgb(8 104 242 / 45%);
  transform: translateY(-2px);
}

.svc-matrix__grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .9rem;
}

.svc-matrix__item {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto 1fr;
  gap: .25rem 1rem;
  min-height: 9.5rem;
  overflow: hidden;
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 86%);
  padding: 1.2rem 1.25rem;
  color: var(--color-ink);
  box-shadow: 0 .5rem 1.4rem rgb(7 26 61 / 6%);
  backdrop-filter: blur(8px);
  transition: transform 200ms ease, border-color 200ms ease, box-shadow 200ms ease;
}

.svc-matrix__item::after {
  position: absolute;
  inset: auto 0 0;
  height: 3px;
  background: linear-gradient(90deg, var(--color-brand), var(--color-cyan));
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms cubic-bezier(.22, 1, .36, 1);
}

.svc-matrix__item:hover,
.svc-matrix__item:focus-visible {
  border-color: rgb(8 104 242 / 35%);
  box-shadow: 0 1rem 2.2rem rgb(8 104 242 / 14%);
  transform: translateY(-3px);
}

.svc-matrix__item:hover::after,
.svc-matrix__item:focus-visible::after {
  transform: scaleX(1);
}

.svc-matrix__num {
  grid-column: 3;
  grid-row: 1;
  color: rgb(8 104 242 / 22%);
  font-size: 1.6rem;
  font-weight: 800;
  line-height: 1;
}

.svc-matrix__icon {
  grid-column: 1;
  grid-row: 1 / span 2;
  display: grid;
  width: 2.9rem;
  height: 2.9rem;
  place-items: center;
  border-radius: .8rem;
  background: linear-gradient(135deg, #0868f2, #24c8ed);
  box-shadow: 0 .5rem 1rem rgb(8 104 242 / 25%);
}

.svc-matrix__icon svg {
  width: 1.5rem;
  height: 1.5rem;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2.6;
}

.svc-matrix__body {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.svc-matrix__body strong {
  display: block;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.3;
}

.svc-matrix__body > span {
  display: block;
  margin-top: .45rem;
  color: #4a5f7c;
  font-size: .86rem;
  line-height: 1.55;
}

.svc-matrix__arrow {
  grid-column: 3;
  grid-row: 2;
  align-self: end;
  justify-self: end;
  color: var(--color-brand);
  opacity: 0;
  transform: translate(-4px, 4px);
  transition: opacity 200ms ease, transform 200ms ease;
}

.svc-matrix__item:hover .svc-matrix__arrow {
  opacity: 1;
  transform: none;
}

@media (max-width: 64rem) {
  .svc-matrix__inner {
    grid-template-columns: 1fr;
  }

  .svc-matrix__intro {
    position: static;
  }
}

@media (max-width: 40rem) {
  .svc-matrix__grid {
    grid-template-columns: 1fr;
  }

  .svc-matrix__item {
    min-height: 0;
  }

  .svc-matrix .svc-matrix__cta {
    width: 100%;
  }
}

/* Header background is always dark navy → always show the white logo. */
.site-header .header-logo--white {
  display: block !important;
}

.site-header .header-logo--color {
  display: none !important;
}

/* --------------------------------------------------------------------------
   11. About page – high-tech hero motion + sticky "Explore Nessar" sidebar.
   -------------------------------------------------------------------------- */
.inner-hero--about {
  position: relative;
  overflow: hidden;
}

.inner-hero--about::after {
  display: none;
}

.about-hero__fx .hero-fx__grid {
  height: 55%;
  opacity: .8;
}

.about-hero__orbit {
  position: absolute;
  top: 50%;
  right: clamp(1rem, 7vw, 8rem);
  z-index: 0;
  width: clamp(16rem, 30vw, 28rem);
  aspect-ratio: 1;
  transform: translateY(-42%);
}

.about-hero__ring {
  position: absolute;
  inset: 0;
  border: 1px solid rgb(36 200 237 / 30%);
  border-radius: 50%;
  animation: nessar-orbit 26s linear infinite;
}

.about-hero__ring--2 {
  inset: 14%;
  border-style: dashed;
  border-color: rgb(95 227 255 / 40%);
  animation-duration: 18s;
  animation-direction: reverse;
}

.about-hero__ring--3 {
  inset: 28%;
  border-color: rgb(36 200 237 / 55%);
  box-shadow: 0 0 2rem rgb(36 200 237 / 25%), inset 0 0 2rem rgb(36 200 237 / 18%);
  animation-duration: 12s;
}

.about-hero__ring i {
  position: absolute;
  top: -5px;
  left: calc(50% - 5px);
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #bff4ff;
  box-shadow: 0 0 12px 3px rgb(36 200 237 / 90%);
}

.about-hero__ring i:nth-child(2) {
  top: auto;
  bottom: -5px;
}

.about-hero__core {
  position: absolute;
  inset: 36%;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(36 200 237 / 30%), transparent 70%);
  animation: nessar-holo-glow 4s ease-in-out infinite;
}

.about-hero__core img {
  width: 150%;
  max-width: none;
  filter: drop-shadow(0 0 1.2rem rgb(36 200 237 / 60%));
}

.inner-hero--about .inner-hero__inner {
  z-index: 1;
}

.about-hero__facts strong {
  text-shadow: 0 0 1.2rem rgb(36 200 237 / 45%);
}

/* Sticky sidebar: the column must span the full article height. */
.about-page__layout {
  align-items: stretch !important;
}

.about-page__layout > .about-sidebar {
  align-self: stretch !important;
  height: auto !important;
}

.about-sidebar__sticky {
  position: sticky !important;
  top: calc(var(--header-height, 5rem) + 1.5rem) !important;
}

.about-sidebar__nav a {
  position: relative;
  transition: color 200ms ease, padding-left 200ms ease;
}

.about-sidebar__nav a::before {
  position: absolute;
  top: 50%;
  left: -.9rem;
  width: 3px;
  height: 0;
  border-radius: 3px;
  background: var(--color-cyan);
  box-shadow: 0 0 .6rem rgb(36 200 237 / 80%);
  content: "";
  transform: translateY(-50%);
  transition: height 220ms ease;
}

.about-sidebar__nav a.is-active {
  padding-left: .35rem;
  color: var(--color-cyan) !important;
}

.about-sidebar__nav a.is-active::before {
  height: 1.3rem;
}

@media (max-width: 64rem) {
  .about-hero__orbit {
    opacity: .35;
  }

  .about-sidebar__sticky {
    position: static !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__ring,
  .about-hero__core {
    animation: none !important;
  }
}

/* --------------------------------------------------------------------------
   12. Mobile fixes – solutions section no longer wider than the viewport,
       hero uses the same 16px gutters as the rest of the page.
   -------------------------------------------------------------------------- */
.ent-sol {
  grid-template-columns: minmax(0, 1fr);
}

.ent-sol__copy,
.ent-sol__diagram {
  min-width: 0;
}

@media (max-width: 48rem) {
  .ent-sol__top {
    grid-template-columns: minmax(0, 1fr);
  }

  .ent-sol__heading {
    font-size: clamp(1.7rem, 7.6vw, 2.3rem) !important;
    white-space: normal !important;
    overflow-wrap: break-word;
  }

  .ent-sol__wheel {
    width: 100%;
  }

  .hero-slider .hero-layout {
    width: calc(100% - 2rem) !important;
  }
}

/* Several legacy sections forced calc(100% - 1rem) with !important; unify on 16px gutters. */
@media (max-width: 48rem) {
  body .container-shell:not(.mega-menu__inner),
  body .showcase-shell {
    width: calc(100% - 2rem) !important;
    max-width: calc(100% - 2rem) !important;
    margin-inline: auto !important;
  }
}

/* Inline filtering state */
.archive-search.is-loading {
  border-color: var(--color-brand, #0868f2);
}


.archive-search {
  padding-right: 1rem;
}

.archive-results .archive-search__summary {
  margin: 0 0 1rem;
  color: rgb(232 243 255 / 85%);
  font-size: .92rem;
}

.archive-results .archive-search__summary strong {
  color: var(--color-cyan);
}

.archive-search__empty {
  border: 1px dashed rgb(36 200 237 / 40%);
  border-radius: .9rem;
  background: rgb(255 255 255 / 6%);
  padding: 2.5rem 1.5rem;
  color: #fff;
  text-align: center;
}

.archive-search__empty strong {
  font-size: 1.1rem;
}

.archive-search__empty p {
  margin-top: .4rem;
  color: rgb(232 243 255 / 75%);
}

/* --------------------------------------------------------------------------
   13. Smooth archive filtering + tech-style card hover
   -------------------------------------------------------------------------- */
.archive-search {
  overflow: hidden;
}

.archive-search__progress {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, var(--color-cyan, #24c8ed), #0868f2, transparent);
  background-size: 50% 100%;
  background-repeat: no-repeat;
  opacity: 0;
  transition: opacity 200ms ease;
}

.archive-search.is-loading .archive-search__progress {
  opacity: 1;
  animation: nessar-search-progress 1s cubic-bezier(.45, 0, .55, 1) infinite;
}

@keyframes nessar-search-progress {
  from { background-position: -50% 0; }
  to { background-position: 150% 0; }
}

.archive-results {
  position: relative;
  transition: height 480ms cubic-bezier(.22, 1, .36, 1);
}

.archive-results.is-filtering,
.archive-results.is-entering {
  overflow: clip;
  overflow-clip-margin: 2rem;
}

/* Current cards dim + blur while the new set loads, with a scan line sweeping across. */
.archive-results .inner-card-grid > * {
  transition: opacity 260ms ease, filter 260ms ease, transform 260ms cubic-bezier(.22, 1, .36, 1);
}

.archive-results.is-filtering .inner-card-grid > * {
  opacity: .45;
  filter: blur(1.5px) saturate(.7);
  transform: scale(.985);
}

.archive-results.is-leaving .inner-card-grid > * {
  opacity: 0;
  filter: blur(4px);
  transform: translateY(-8px) scale(.97);
}

.archive-results.is-filtering::after {
  position: absolute;
  inset: 0;
  z-index: 5;
  background: linear-gradient(100deg, transparent 30%, rgb(95 227 255 / 16%) 48%, rgb(255 255 255 / 22%) 50%, rgb(95 227 255 / 16%) 52%, transparent 70%);
  background-size: 250% 100%;
  content: "";
  pointer-events: none;
  animation: nessar-scan 1.1s linear infinite;
}

@keyframes nessar-scan {
  from { background-position: 120% 0; }
  to { background-position: -120% 0; }
}

/* New cards rise in one after another. */
.archive-results.is-entering .inner-card-grid > *,
.archive-results.is-entering .archive-search__summary,
.archive-results.is-entering .archive-search__empty {
  animation: nessar-card-in 620ms cubic-bezier(.22, 1, .36, 1) both;
  animation-delay: calc(var(--i, 0) * 45ms);
}

@keyframes nessar-card-in {
  from {
    opacity: 0;
    filter: blur(6px);
    transform: translateY(18px) scale(.97);
  }
  to {
    opacity: 1;
    filter: none;
    transform: none;
  }
}

/* Card hover: lift + 3D tilt toward the pointer, spotlight, glowing edge. */
.inner-card-grid .inner-card {
  perspective: 1000px;
}

body .inner-card-grid .inner-card__link {
  --mx: 50%;
  --my: 0%;
  --rx: 0deg;
  --ry: 0deg;
  --lift: 0px;
  transform: translateY(var(--lift)) rotateX(var(--rx)) rotateY(var(--ry)) !important;
  transform-style: preserve-3d;
  transition:
    transform 550ms cubic-bezier(.22, 1, .36, 1),
    box-shadow 450ms cubic-bezier(.22, 1, .36, 1),
    border-color 350ms ease !important;
  will-change: transform;
}

body .inner-card-grid .inner-card__link:hover,
body .inner-card-grid .inner-card__link:focus-visible {
  --lift: -6px;
  border-color: rgb(102 216 255 / 95%) !important;
  box-shadow:
    0 0 0 1px rgb(102 216 255 / 35%),
    0 0 1.6rem rgb(36 200 237 / 28%),
    0 1.6rem 3rem rgb(0 40 110 / 32%) !important;
}

/* Spotlight that follows the pointer */
body .inner-card-grid .inner-card__link::before {
  position: absolute;
  inset: 0;
  z-index: 3;
  border-radius: inherit;
  background: radial-gradient(22rem circle at var(--mx) var(--my), rgb(120 230 255 / 18%), transparent 45%);
  content: "";
  opacity: 0;
  pointer-events: none;
  transition: opacity 400ms ease;
  mix-blend-mode: screen;
}

/* Light sweep across the card on enter */
body .inner-card-grid .inner-card__link::after {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: linear-gradient(115deg, transparent 35%, rgb(255 255 255 / 14%) 50%, transparent 65%) !important;
  background-size: 250% 100% !important;
  background-position: 130% 0 !important;
  content: "";
  opacity: 1 !important;
  pointer-events: none;
  transition: background-position 900ms cubic-bezier(.22, 1, .36, 1) !important;
}

body .inner-card-grid .inner-card__link:hover::before {
  opacity: 1;
}

body .inner-card-grid .inner-card__link:hover::after {
  background-position: -30% 0 !important;
}

body .inner-card-grid .inner-card__media img {
  transition: transform 800ms cubic-bezier(.22, 1, .36, 1), filter 500ms ease !important;
}

body .inner-card-grid .inner-card__link:hover .inner-card__media img {
  transform: scale(1.06) translateZ(0) !important;
}

body .inner-card-grid .inner-card__title,
body .inner-card-grid .inner-card__label {
  transition: transform 550ms cubic-bezier(.22, 1, .36, 1), color 300ms ease;
}

body .inner-card-grid .inner-card__link:hover .inner-card__title {
  transform: translateX(3px);
}

body .inner-card-grid .inner-card__action-icon {
  transition: transform 450ms cubic-bezier(.22, 1, .36, 1), background-color 300ms ease, box-shadow 300ms ease !important;
}

body .inner-card-grid .inner-card__link:hover .inner-card__action-icon {
  box-shadow: 0 0 1rem rgb(102 216 255 / 70%);
  transform: translateX(4px) rotate(-45deg) !important;
}

@media (prefers-reduced-motion: reduce) {
  body .inner-card-grid .inner-card__link {
    transform: none !important;
  }

  .archive-results.is-entering .inner-card-grid > * {
    animation: none;
  }
}

/* Keep the card footer readable on hover (was blue on blue). */
body.nessar-card-catalog .inner-card-grid .inner-card__link:hover .inner-card__action {
  color: #fff !important;
  background: rgb(0 18 57 / 28%) !important;
}

body.nessar-card-catalog .inner-card-grid .inner-card__link:hover .inner-card__action-icon {
  background: var(--color-cyan, #24c8ed) !important;
  color: #001a48 !important;
}

/* Products mega menu: client-supplied background for the intro card. */
@media (min-width: 64.0625rem) {
  .site-header .mega-menu--vendors .mega-menu__intro,
  .site-header .mega-menu--cards .mega-menu__intro {
    background:
      linear-gradient(180deg, rgb(0 20 60 / 0%) 30%, rgb(0 20 60 / 35%) 70%, rgb(0 15 50 / 55%) 100%),
      url("../images/home/bg-menu-product.webp") center / cover no-repeat,
      #062a6b;
  }

  /* The artwork already carries the target icon and the circle detail. */
  .site-header .mega-menu--vendors .mega-menu__intro-icon,
  .site-header .mega-menu--vendors .mega-menu__intro::after,
  .site-header .mega-menu--cards .mega-menu__intro-icon,
  .site-header .mega-menu--cards .mega-menu__intro::after {
    visibility: hidden;
  }

  .site-header .mega-menu--vendors .mega-menu__intro p,
  .site-header .mega-menu--cards .mega-menu__intro p {
    color: rgb(232 243 255 / 82%);
  }
}

/* Products menu panel: vendor logo header. */
@media (min-width: 64.0625rem) {
  .mega-menu__panel-head {
    align-items: center;
  }

  .mega-menu__panel-logo {
    grid-column: 1;
    display: flex;
    height: 2.6rem;
    align-items: center;
    margin-top: .35rem;
  }

  .mega-menu__panel-logo img {
    width: auto;
    max-width: 9.5rem;
    height: auto;
    max-height: 100%;
    object-fit: contain;
    object-position: left center;
  }

  .mega-menu--vendors .mega-menu__column.is-active > .mega-menu__panel .mega-menu__panel-logo img {
    animation: nessar-logo-in 420ms cubic-bezier(.22, 1, .36, 1) both;
  }

  .mega-menu__panel-count {
    color: rgb(6 20 47 / 50%);
    font-style: normal;
    letter-spacing: .04em;
    text-transform: none;
  }

  /* Soft brand-tinted wash behind the header so each vendor feels distinct. */
  .mega-menu--vendors .mega-menu__panel-head {
    margin: -1.1rem -1.25rem .9rem;
    border-radius: .6rem .6rem 0 0;
    background: linear-gradient(180deg, #f3f8ff, #fff);
    padding: 1rem 1.25rem .9rem;
  }
}

@keyframes nessar-logo-in {
  from { opacity: 0; transform: translateY(6px); filter: blur(3px); }
  to { opacity: 1; transform: none; filter: none; }
}

/* --------------------------------------------------------------------------
   14. Products archive: client artwork behind the hero + search/filter band.
       One layer spans the whole dark band so it reads as a single scene.
   -------------------------------------------------------------------------- */
body.nessar-product-archive main#main,
body.tax-product_cat main#main {
  position: relative;
  isolation: isolate;
}

body.nessar-product-archive main#main::before,
body.tax-product_cat main#main::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: var(--archive-band, 36.5rem);
  background:
    linear-gradient(90deg, rgb(0 12 40 / 72%) 0%, rgb(0 12 40 / 38%) 38%, rgb(0 12 40 / 0%) 62%),
    linear-gradient(180deg, rgb(0 12 40 / 30%) 0%, rgb(0 12 40 / 0%) 30%),
    url("../images/home/bg-hero-sanpham.webp") center 42% / cover no-repeat,
    #001a52;
  content: "";
  pointer-events: none;
}

body.nessar-product-archive .inner-hero,
body.tax-product_cat .inner-hero {
  background: transparent !important;
}

body.nessar-product-archive .inner-hero::before,
body.tax-product_cat .inner-hero::before,
body.nessar-product-archive .inner-hero::after,
body.tax-product_cat .inner-hero::after {
  display: none !important;
}

body.nessar-product-archive.nessar-unified-archive .inner-section,
body.tax-product_cat.nessar-unified-archive .inner-section {
  background: linear-gradient(180deg, transparent 0, transparent 19rem, #edf4fb 19rem, #f6faff 100%) !important;
}

@media (max-width: 48rem) {
  body.nessar-product-archive main#main::before,
  body.tax-product_cat main#main::before {
    background:
      linear-gradient(180deg, rgb(0 12 40 / 55%) 0%, rgb(0 12 40 / 25%) 60%),
      url("../images/home/bg-hero-sanpham.webp") 30% center / cover no-repeat,
      #001a52;
  }
}

/* --------------------------------------------------------------------------
   15. Products mega menu – distribution country level
   -------------------------------------------------------------------------- */
.mega-menu__countries {
  display: flex;
  align-items: center;
  gap: .4rem;
  min-width: 0;
  margin: 0 0 .85rem;
  overflow-x: auto;
  border-bottom: 1px solid rgb(8 104 242 / 12%);
  padding: 0 0 .75rem;
  scrollbar-width: none;
}

.mega-menu__countries::-webkit-scrollbar {
  display: none;
}

.mega-menu__countries-label {
  flex: none;
  margin-right: .5rem;
  color: rgb(6 20 47 / 55%);
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.mega-menu__country {
  position: relative;
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: .45rem;
  min-height: 2.1rem;
  border: 1px solid rgb(8 104 242 / 14%);
  border-radius: 999px;
  background: rgb(255 255 255 / 72%);
  padding: .3rem .7rem .3rem .4rem;
  color: var(--color-ink, #06142f);
  font-size: .72rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  cursor: pointer;
  transition: border-color 160ms ease, background-color 160ms ease, color 160ms ease, box-shadow 200ms ease, transform 200ms cubic-bezier(.16, 1, .3, 1);
}

.mega-menu__country:hover {
  border-color: rgb(8 104 242 / 38%);
  transform: translateY(-1px);
}

.mega-menu__country:focus-visible {
  outline: 2px solid var(--color-brand, #0868f2);
  outline-offset: 2px;
}

.mega-menu__country.is-active {
  border-color: transparent;
  background: linear-gradient(135deg, #0868f2 0%, #0a3fa8 100%);
  color: #fff;
  box-shadow: 0 .45rem 1.1rem rgb(8 104 242 / 28%), 0 0 0 3px rgb(36 200 237 / 16%);
}

.mega-menu__country-flag {
  width: 1.3rem;
  height: auto;
  aspect-ratio: 3 / 2;
  border-radius: .2rem;
  object-fit: cover;
  box-shadow: 0 0 0 1px rgb(6 20 47 / 12%);
}

.mega-menu__country-count {
  min-width: 1.15rem;
  border-radius: 999px;
  background: rgb(8 104 242 / 10%);
  padding: .18rem .35rem;
  color: var(--color-brand, #0868f2);
  font-size: .6rem;
  font-style: normal;
  font-weight: 700;
  text-align: center;
}

.mega-menu__country.is-active .mega-menu__country-count {
  background: rgb(255 255 255 / 20%);
  color: #fff;
}

@media (min-width: 64.0625rem) {
  .mega-menu__vendors {
    grid-template-rows: auto auto 1fr;
  }

  .mega-menu__countries {
    grid-column: 1 / -1;
    grid-row: 1;
  }

  .mega-menu__vendors-label {
    grid-row: 2;
  }

  .mega-menu--vendors .mega-menu__grid {
    grid-row: 3;
    align-content: start;
  }

  /* Product panel sits beside the vendor list, under the country bar. */
  .mega-menu--vendors .mega-menu__panel {
    top: 3.75rem;
  }
}

@media (max-width: 64rem) {
  .mega-menu__countries {
    margin: .25rem 0 .75rem;
  }

  .mega-menu__countries-label {
    display: none;
  }

  .mega-menu__countries {
    border-bottom-color: rgb(255 255 255 / 10%);
  }

  .mega-menu__country:not(.is-active) {
    border-color: rgb(255 255 255 / 16%);
    background: rgb(255 255 255 / 6%);
    color: rgb(255 255 255 / 86%);
  }

  .mega-menu__country:not(.is-active) .mega-menu__country-count {
    background: rgb(36 200 237 / 16%);
    color: #7fe3ff;
  }
}

@media (min-width: 64.0625rem) and (max-width: 80rem) {
  .mega-menu__countries-label {
    display: none;
  }

  .mega-menu__country {
    gap: .35rem;
    padding-right: .55rem;
  }
}

/*
 * Inactive vendor panels must be fully invisible to the pointer: they are
 * stacked on top of the active panel, so any visible descendant would steal
 * hover and open the wrong vendor (root cause of the "jumps to ACTi" bug).
 */
@media (min-width: 64.0625rem) {
  .mega-menu--vendors .mega-menu__column:not(.is-active) > .mega-menu__panel,
  .mega-menu--vendors .mega-menu__column:not(.is-active) > .mega-menu__panel * {
    visibility: hidden !important;
    pointer-events: none !important;
  }

  .mega-menu--vendors .mega-menu__column.is-active > .mega-menu__panel {
    z-index: 2;
  }
}

/* --------------------------------------------------------------------------
   16. Products mega menu – product detail panel (tiles + grouped cards)
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .mega-menu--vendors .mega-menu__panel {
    padding: 1.1rem 1.25rem 1rem;
    background:
      radial-gradient(38rem 16rem at 100% 100%, rgb(36 200 237 / 7%), transparent 70%),
      radial-gradient(24rem 14rem at 0% 100%, rgb(8 104 242 / 5%), transparent 70%),
      #fff;
  }

  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    grid-template-columns: repeat(auto-fill, minmax(15rem, 1fr));
    align-items: start;
    gap: .6rem;
  }

  /* Shared product icon (chip) and group icon (layers), drawn with masks. */
  .mega-menu__item-icon,
  .mega-menu__group-icon,
  .mega-menu__panel-foot-icon {
    position: relative;
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.1rem;
    height: 2.1rem;
    border-radius: .55rem;
    background: linear-gradient(135deg, rgb(8 104 242 / 10%), rgb(36 200 237 / 14%));
    box-shadow: inset 0 0 0 1px rgb(8 104 242 / 10%);
    transition: background 220ms ease, box-shadow 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  }

  .mega-menu__item-icon::before,
  .mega-menu__group-icon::before,
  .mega-menu__panel-foot-icon::before {
    width: 1.05rem;
    height: 1.05rem;
    background: var(--color-brand, #0868f2);
    content: "";
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color 220ms ease;
  }

  .mega-menu__item-icon {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Crect x='9.5' y='9.5' width='5' height='5' rx='.8'/%3E%3Cpath d='M9 2v4M15 2v4M9 18v4M15 18v4M2 9h4M2 15h4M18 9h4M18 15h4'/%3E%3C/svg%3E");
  }

  .mega-menu__group-icon {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 3 9 5-9 5-9-5 9-5z'/%3E%3Cpath d='m3 13 9 5 9-5'/%3E%3Cpath d='m3 17.5 9 5 9-5' opacity='.55'/%3E%3C/svg%3E");
  }

  .mega-menu__panel-foot-icon {
    --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 13v-1a8 8 0 0 1 16 0v1'/%3E%3Crect x='3' y='13' width='4' height='6' rx='1.5'/%3E%3Crect x='17' y='13' width='4' height='6' rx='1.5'/%3E%3Cpath d='M19 19c0 1.5-2 2.5-5 2.5'/%3E%3C/svg%3E");
  }

  /* Leaf product directly under the vendor → tile. */
  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li:not(.menu-item-has-children) > .mega-menu__link {
    position: relative;
    display: flex;
    align-items: center;
    gap: .75rem;
    min-height: 3.4rem;
    overflow: hidden;
    border: 1px solid rgb(8 104 242 / 11%);
    border-radius: .7rem;
    background: rgb(255 255 255 / 86%);
    padding: .6rem .8rem .6rem .65rem;
    color: var(--color-ink, #06142f);
    font-size: .8rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    transform: none;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), color 200ms ease;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li:not(.menu-item-has-children) > .mega-menu__link:hover,
  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li:not(.menu-item-has-children) > .mega-menu__link:focus-visible {
    border-color: rgb(8 104 242 / 34%);
    background: #f6faff;
    color: var(--color-brand, #0868f2);
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 12%);
    transform: translateY(-2px);
  }

  .mega-menu__link:hover > .mega-menu__item-icon,
  .mega-menu__link:focus-visible > .mega-menu__item-icon,
  .mega-menu__link:hover > .mega-menu__group-icon {
    background: linear-gradient(135deg, #0868f2, #24c8ed);
    box-shadow: 0 .4rem .9rem rgb(8 104 242 / 28%);
    transform: scale(1.04);
  }

  .mega-menu__link:hover > .mega-menu__item-icon::before,
  .mega-menu__link:focus-visible > .mega-menu__item-icon::before,
  .mega-menu__link:hover > .mega-menu__group-icon::before {
    background: #fff;
  }

  .mega-menu__item-text {
    flex: 1;
    min-width: 0;
  }

  .mega-menu__item-arrow {
    flex: none;
    color: var(--color-brand, #0868f2);
    opacity: 0;
    transform: translateX(-.35rem);
    transition: opacity 200ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  }

  .mega-menu__link:hover > .mega-menu__item-arrow,
  .mega-menu__link:focus-visible > .mega-menu__item-arrow {
    opacity: 1;
    transform: none;
  }

  /* Product group (has children) → card with header + list. */
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children {
    border: 1px solid rgb(8 104 242 / 11%);
    border-radius: .75rem;
    background: rgb(255 255 255 / 86%);
    padding: .55rem .55rem .45rem;
    transition: border-color 200ms ease, box-shadow 260ms ease;
  }

  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children:hover {
    border-color: rgb(8 104 242 / 24%);
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 9%);
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children > .mega-menu__link {
    display: flex;
    align-items: center;
    gap: .65rem;
    margin-bottom: .3rem;
    border-bottom: 1px solid rgb(8 104 242 / 9%);
    padding: .15rem .2rem .55rem;
    color: var(--color-ink, #06142f);
    font-size: .78rem;
    font-weight: 700;
    line-height: 1.3;
    text-transform: none;
    transform: none;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children > .mega-menu__link:hover {
    color: var(--color-brand, #0868f2);
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li.menu-item-has-children > .mega-menu__link .mega-menu__group-icon {
    width: 1.85rem;
    height: 1.85rem;
  }

  .site-header .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links {
    margin: 0;
    border: 0;
    padding: 0;
  }

  /* Products inside a group → compact rows. */
  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links .mega-menu__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    border-radius: .45rem;
    padding: .42rem .45rem;
    color: rgb(6 20 47 / 78%);
    font-size: .76rem;
    font-weight: 550;
    line-height: 1.3;
    text-transform: none;
    transform: none;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links .mega-menu__link:hover,
  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links .mega-menu__link:focus-visible {
    background: rgb(8 104 242 / 7%);
    color: var(--color-brand, #0868f2);
  }

  .mega-menu__links .mega-menu__links .mega-menu__item-icon {
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: rgb(8 104 242 / 35%);
    box-shadow: none;
  }

  .mega-menu__links .mega-menu__links .mega-menu__item-icon::before {
    display: none;
  }

  .mega-menu__links .mega-menu__links .mega-menu__link:hover > .mega-menu__item-icon {
    background: var(--color-cyan, #24c8ed);
    box-shadow: 0 0 0 3px rgb(36 200 237 / 20%);
    transform: none;
  }

  .mega-menu__links .mega-menu__links .mega-menu__item-arrow {
    font-size: .7rem;
  }

  /* Panel footer: consultation CTA pinned to the bottom. */
  .mega-menu__panel-foot {
    display: flex;
    align-items: center;
    gap: .8rem;
    margin-top: auto;
    border: 1px solid rgb(8 104 242 / 10%);
    border-radius: .75rem;
    background: linear-gradient(100deg, rgb(8 104 242 / 6%), rgb(36 200 237 / 8%));
    padding: .7rem .8rem;
  }

  .mega-menu__panel > .mega-menu__links + .mega-menu__panel-foot,
  .mega-menu__panel-empty + .mega-menu__panel-foot {
    margin-top: auto;
  }

  .mega-menu__panel > .mega-menu__links {
    margin-bottom: 1rem;
  }

  .mega-menu__panel-foot-copy {
    display: grid;
    flex: 1;
    gap: .15rem;
    min-width: 0;
    color: rgb(6 20 47 / 62%);
    font-size: .7rem;
    line-height: 1.4;
  }

  .mega-menu__panel-foot-copy strong {
    color: var(--color-ink, #06142f);
    font-size: .76rem;
  }

  .site-header nav .mega-menu__panel-foot-link {
    flex: none;
    border-radius: 999px;
    background: linear-gradient(135deg, #0868f2, #0a3fa8);
    padding: .55rem 1rem;
    color: #fff;
    font-size: .7rem;
    font-weight: 700;
    white-space: nowrap;
    box-shadow: 0 .5rem 1.2rem rgb(8 104 242 / 25%);
    transition: box-shadow 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
  }

  .site-header nav .mega-menu__panel-foot-link:hover,
  .site-header nav .mega-menu__panel-foot-link:focus-visible {
    color: #fff;
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 38%), 0 0 0 3px rgb(36 200 237 / 22%);
    transform: translateY(-1px);
  }
}

@media (max-width: 64rem) {
  .mega-menu__panel-foot {
    display: none;
  }
}

@media (min-width: 64.0625rem) {
  /* Long portfolios scroll inside the panel; header + consultation bar stay put. */
  .mega-menu--vendors .mega-menu__panel {
    overflow: hidden;
  }

  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    margin: 0 -.35rem .75rem;
    padding: .2rem .35rem .3rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(8 104 242 / 25%) transparent;
  }

  .mega-menu__panel-head {
    flex: none;
  }

  .mega-menu__panel-foot {
    flex: none;
    padding: .55rem .6rem .55rem .7rem;
  }

  .site-header nav .mega-menu--vendors .mega-menu__panel .mega-menu__links .mega-menu__links .mega-menu__link {
    padding: .34rem .45rem;
  }
}

@media (min-width: 64.0625rem) {
  /* Soft fade where a long list continues below (scroll hint). */
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    -webkit-mask-image: linear-gradient(180deg, #000 calc(100% - 1.6rem), transparent);
    mask-image: linear-gradient(180deg, #000 calc(100% - 1.6rem), transparent);
    padding-bottom: 1.4rem;
    margin-bottom: .35rem;
  }
}

/* --------------------------------------------------------------------------
   17. Other mega menus (Giải pháp, Dự án, Tin tức…) – same card language
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .mega-menu__item-icon[data-icon="shield"], .mega-menu__group-icon[data-icon="shield"], .mega-menu__panel-feature-icon[data-icon="shield"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 4 6v6c0 4.5 3.4 8.3 8 9 4.6-.7 8-4.5 8-9V6l-8-3z'/%3E%3Cpath d='m9 12 2 2 4-4'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="building"], .mega-menu__group-icon[data-icon="building"], .mega-menu__panel-feature-icon[data-icon="building"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 21V5l8-2v18M12 8l8 2v11M3 21h18M7 8h2M7 12h2M7 16h2M15 13h2M15 17h2'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="grid"], .mega-menu__group-icon[data-icon="grid"], .mega-menu__panel-feature-icon[data-icon="grid"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='3' width='7' height='7' rx='1.5'/%3E%3Crect x='3' y='14' width='7' height='7' rx='1.5'/%3E%3Crect x='14' y='14' width='7' height='7' rx='1.5'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="radar"], .mega-menu__group-icon[data-icon="radar"], .mega-menu__panel-feature-icon[data-icon="radar"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='5'/%3E%3Cpath d='M12 12 18 6'/%3E%3Ccircle cx='12' cy='12' r='1'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="cap"], .mega-menu__group-icon[data-icon="cap"], .mega-menu__panel-feature-icon[data-icon="cap"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m2 9 10-5 10 5-10 5L2 9z'/%3E%3Cpath d='M6 11v5c0 1.5 2.7 3 6 3s6-1.5 6-3v-5M22 9v6'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="antenna"], .mega-menu__group-icon[data-icon="antenna"], .mega-menu__panel-feature-icon[data-icon="antenna"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 12v9M9 21h6M8.5 8.5a5 5 0 0 0 0 7M15.5 8.5a5 5 0 0 1 0 7M5.6 5.6a9 9 0 0 0 0 12.8M18.4 5.6a9 9 0 0 1 0 12.8'/%3E%3Ccircle cx='12' cy='12' r='1.5'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="sparkle"], .mega-menu__group-icon[data-icon="sparkle"], .mega-menu__panel-feature-icon[data-icon="sparkle"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l1.8 5.2L19 10l-5.2 1.8L12 17l-1.8-5.2L5 10l5.2-1.8L12 3zM19 15l.8 2.2L22 18l-2.2.8L19 21l-.8-2.2L16 18l2.2-.8L19 15z'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="briefcase"], .mega-menu__group-icon[data-icon="briefcase"], .mega-menu__panel-feature-icon[data-icon="briefcase"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='7' width='18' height='13' rx='2'/%3E%3Cpath d='M9 7V5a2 2 0 0 1 2-2h2a2 2 0 0 1 2 2v2M3 13h18'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="hotel"], .mega-menu__group-icon[data-icon="hotel"], .mega-menu__panel-feature-icon[data-icon="hotel"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 21V8l9-5 9 5v13M3 21h18M8 21v-5h8v5M8 11h.01M12 11h.01M16 11h.01'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="cart"], .mega-menu__group-icon[data-icon="cart"], .mega-menu__panel-feature-icon[data-icon="cart"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='20' r='1.4'/%3E%3Ccircle cx='18' cy='20' r='1.4'/%3E%3Cpath d='M2 3h3l2.6 12.2a1.5 1.5 0 0 0 1.5 1.2h9.2a1.5 1.5 0 0 0 1.5-1.1L21.5 8H6'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="cubes"], .mega-menu__group-icon[data-icon="cubes"], .mega-menu__panel-feature-icon[data-icon="cubes"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m12 2 4.5 2.5v5L12 12 7.5 9.5v-5L12 2z'/%3E%3Cpath d='m7.5 12 4.5 2.5v5L7.5 22 3 19.5v-5L7.5 12zM16.5 12l4.5 2.5v5L16.5 22 12 19.5'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="landmark"], .mega-menu__group-icon[data-icon="landmark"], .mega-menu__panel-feature-icon[data-icon="landmark"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 10h18L12 4 3 10zM5 10v8M9.5 10v8M14.5 10v8M19 10v8M3 21h18'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="bank"], .mega-menu__group-icon[data-icon="bank"], .mega-menu__panel-feature-icon[data-icon="bank"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='6' width='20' height='13' rx='2'/%3E%3Ccircle cx='12' cy='12.5' r='2.5'/%3E%3Cpath d='M6 9.5v.01M18 15.5v.01'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="pulse"], .mega-menu__group-icon[data-icon="pulse"], .mega-menu__panel-feature-icon[data-icon="pulse"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 12h4l2-5 4 10 2-5h6'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="calendar"], .mega-menu__group-icon[data-icon="calendar"], .mega-menu__panel-feature-icon[data-icon="calendar"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='16' rx='2'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4M8 14h2M14 14h2M8 17h2'/%3E%3C/svg%3E"); }
  .mega-menu__item-icon[data-icon="news"], .mega-menu__group-icon[data-icon="news"], .mega-menu__panel-feature-icon[data-icon="news"] { --icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='15' height='16' rx='2'/%3E%3Cpath d='M18 8h2a1 1 0 0 1 1 1v9a2 2 0 0 1-2 2M7 8h7M7 12h7M7 16h4'/%3E%3C/svg%3E"); }

  .mega-menu--cards .mega-menu__grid {
    grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
    align-items: start;
    align-content: start;
    gap: .6rem;
  }

  /* Reset the old column/flyout chrome. */
  .site-header .mega-menu--cards .mega-menu__column,
  .site-header .mega-menu--cards .mega-menu__column:hover,
  .site-header .mega-menu--cards .mega-menu__column:focus-within {
    position: relative;
    border: 0;
    background: transparent;
    padding: 0;
    box-shadow: none;
    transform: none;
  }

  .site-header nav .mega-menu--cards .mega-menu__heading::after,
  .site-header nav .mega-menu--cards .mega-menu__link::after,
  .site-header .mega-menu--cards .mega-menu__links .mega-menu__link::before {
    display: none !important;
  }

  /* Leaf entry → tile. */
  .site-header nav .mega-menu--cards .mega-menu__column:not(.menu-item-has-children) > .mega-menu__heading {
    position: relative;
    display: flex;
    align-items: center;
    gap: .8rem;
    min-height: 3.9rem;
    border: 1px solid rgb(8 104 242 / 11%);
    border-radius: .75rem;
    background: rgb(255 255 255 / 88%);
    padding: .7rem .9rem .7rem .7rem;
    color: var(--color-ink, #06142f);
    font-size: .84rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    transition: border-color 200ms ease, background-color 200ms ease, box-shadow 260ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1), color 200ms ease;
  }

  .site-header nav .mega-menu--cards .mega-menu__column:not(.menu-item-has-children) > .mega-menu__heading:hover,
  .site-header nav .mega-menu--cards .mega-menu__column:not(.menu-item-has-children) > .mega-menu__heading:focus-visible {
    border-color: rgb(8 104 242 / 34%);
    background: #f6faff;
    color: var(--color-brand, #0868f2);
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 12%);
    transform: translateY(-2px);
  }

  .mega-menu--cards .mega-menu__heading > .mega-menu__item-icon,
  .mega-menu--cards .mega-menu__heading > .mega-menu__group-icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .65rem;
  }

  .mega-menu--cards .mega-menu__heading > .mega-menu__item-icon::before,
  .mega-menu--cards .mega-menu__heading > .mega-menu__group-icon::before {
    width: 1.2rem;
    height: 1.2rem;
  }

  .mega-menu__heading:hover > .mega-menu__item-icon,
  .mega-menu__heading:focus-visible > .mega-menu__item-icon,
  .mega-menu__heading:hover > .mega-menu__group-icon {
    background: linear-gradient(135deg, #0868f2, #24c8ed);
    box-shadow: 0 .4rem .9rem rgb(8 104 242 / 28%);
    transform: scale(1.04);
  }

  .mega-menu__heading:hover > .mega-menu__item-icon::before,
  .mega-menu__heading:focus-visible > .mega-menu__item-icon::before,
  .mega-menu__heading:hover > .mega-menu__group-icon::before {
    background: #fff;
  }

  .mega-menu__heading:hover > .mega-menu__item-arrow,
  .mega-menu__heading:focus-visible > .mega-menu__item-arrow {
    opacity: 1;
    transform: none;
  }

  /* Entry with children → group card, children always listed. */
  .site-header .mega-menu--cards .mega-menu__column.menu-item-has-children {
    border: 1px solid rgb(8 104 242 / 11%);
    border-radius: .8rem;
    background: rgb(255 255 255 / 88%);
    padding: .6rem .6rem .5rem;
    transition: border-color 200ms ease, box-shadow 260ms ease;
  }

  .site-header .mega-menu--cards .mega-menu__column.menu-item-has-children:hover {
    border-color: rgb(8 104 242 / 24%);
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 9%);
  }

  .site-header nav .mega-menu--cards .mega-menu__column.menu-item-has-children > .mega-menu__heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 0;
    margin-bottom: .3rem;
    border: 0;
    border-bottom: 1px solid rgb(8 104 242 / 9%);
    border-radius: 0;
    background: transparent;
    padding: .1rem .2rem .6rem;
    color: var(--color-ink, #06142f);
    font-size: .84rem;
    font-weight: 700;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  .site-header nav .mega-menu--cards .mega-menu__column.menu-item-has-children > .mega-menu__heading:hover {
    color: var(--color-brand, #0868f2);
  }

  .site-header .mega-menu--cards .mega-menu__column > .mega-menu__links {
    position: static;
    display: block;
    visibility: inherit;
    max-height: none;
    overflow: visible;
    width: auto;
    margin: 0;
    border: 0;
    background: transparent;
    padding: 0;
    opacity: 1;
    box-shadow: none;
    transform: none;
    pointer-events: auto;
  }

  .site-header .mega-menu--cards .mega-menu__links .mega-menu__links {
    display: none;
  }

  .site-header nav .mega-menu--cards .mega-menu__column > .mega-menu__links > li > .mega-menu__link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 0;
    border-radius: .45rem;
    padding: .38rem .45rem;
    color: rgb(6 20 47 / 78%);
    font-size: .78rem;
    font-weight: 550;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
    transform: none;
    transition: background-color 180ms ease, color 180ms ease;
  }

  .site-header nav .mega-menu--cards .mega-menu__column > .mega-menu__links > li > .mega-menu__link:hover,
  .site-header nav .mega-menu--cards .mega-menu__column > .mega-menu__links > li > .mega-menu__link:focus-visible {
    background: rgb(8 104 242 / 7%);
    color: var(--color-brand, #0868f2);
  }

  .mega-menu--cards .mega-menu__links .mega-menu__item-icon {
    width: .4rem;
    height: .4rem;
    border-radius: 999px;
    background: rgb(8 104 242 / 35%);
    box-shadow: none;
  }

  .mega-menu--cards .mega-menu__links .mega-menu__item-icon::before {
    display: none;
  }

  .mega-menu--cards .mega-menu__links .mega-menu__link:hover > .mega-menu__item-icon {
    background: var(--color-cyan, #24c8ed);
    box-shadow: 0 0 0 3px rgb(36 200 237 / 20%);
    transform: none;
  }

  .mega-menu--cards .mega-menu__links .mega-menu__item-arrow {
    font-size: .7rem;
  }
}

/* Mobile/tablet keep the compact accordion: hide card decorations. */
@media (max-width: 64rem) {
  .mega-menu__item-icon,
  .mega-menu__group-icon,
  .mega-menu__item-arrow {
    display: none;
  }
}

@media (min-width: 64.0625rem) {
  /* Mixed menus (tiles + groups): tiles stack in the first column, groups beside. */
  .mega-menu--cards .mega-menu__grid:has(> .menu-item-has-children) {
    grid-template-columns: minmax(15rem, .85fr) repeat(auto-fit, minmax(15rem, 1fr));
    grid-auto-flow: row dense;
  }

  .mega-menu--cards .mega-menu__grid:has(> .menu-item-has-children) > li:not(.menu-item-has-children) {
    grid-column: 1;
  }

  .mega-menu--cards .mega-menu__grid:has(> .menu-item-has-children) > li.menu-item-has-children {
    grid-row: span 6;
  }

  /* Tile-only menus (Dự án, Tin tức): feature cards filling the panel height. */
  .mega-menu--cards .mega-menu__inner:has(.mega-menu__grid:not(:has(> .menu-item-has-children))) {
    align-items: stretch;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) {
    grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
    grid-auto-rows: 1fr;
    align-content: stretch;
    align-items: stretch;
    align-self: stretch;
    gap: .75rem;
  }

  .site-header nav .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) > li > .mega-menu__heading {
    flex-direction: column;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1rem;
    height: 100%;
    min-height: 6.5rem;
    overflow: hidden;
    background:
      radial-gradient(14rem 9rem at 100% 0%, rgb(36 200 237 / 9%), transparent 70%),
      rgb(255 255 255 / 90%);
    padding: 1.05rem 1.1rem;
    font-size: .95rem;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__item-text {
    flex: none;
    padding-right: 1.5rem;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__item-arrow {
    position: absolute;
    right: 1.05rem;
    bottom: 1rem;
    opacity: .45;
    transform: none;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__heading:hover .mega-menu__item-arrow {
    opacity: 1;
    transform: translateX(.2rem);
  }

  /* Large faint watermark of the tile icon. */
  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__item-icon {
    position: static;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__item-icon::after {
    position: absolute;
    top: -.9rem;
    right: -.9rem;
    width: 6.5rem;
    height: 6.5rem;
    background: rgb(8 104 242 / 6%);
    content: "";
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    transition: background-color 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1);
    pointer-events: none;
  }

  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) .mega-menu__heading:hover .mega-menu__item-icon::after {
    background: rgb(8 104 242 / 11%);
    transform: rotate(-8deg) scale(1.06);
  }
}

/* --------------------------------------------------------------------------
   18. Solutions mega menu – same list + detail panel as Products
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .mega-menu--solutions .mega-menu__vendors {
    grid-template-columns: minmax(0, 19rem) minmax(0, 1fr);
    min-height: 24rem;
  }

  .mega-menu--solutions .mega-menu__grid {
    grid-template-columns: 1fr !important;
    gap: .35rem !important;
  }

  .mega-menu--solutions .mega-menu__panel {
    top: 0 !important;
    left: calc(19rem + 1.25rem) !important;
  }

  /* Solution area rows: icon + readable title. */
  .site-header nav .mega-menu--solutions .mega-menu__column > .mega-menu__heading {
    display: flex;
    align-items: center;
    gap: .7rem;
    min-height: 3.2rem;
    border: 1px solid transparent;
    border-radius: .65rem;
    padding: .5rem 2rem .5rem .55rem;
    color: var(--color-ink, #06142f);
    font-size: .82rem;
    font-weight: 600;
    letter-spacing: 0;
    line-height: 1.3;
    text-transform: none;
  }

  .mega-menu--solutions .mega-menu__heading > .mega-menu__item-icon {
    width: 2.2rem;
    height: 2.2rem;
  }

  .site-header nav .mega-menu--solutions .mega-menu__column:hover > .mega-menu__heading {
    background: rgb(255 255 255 / 70%);
  }

  .site-header nav .mega-menu--solutions .mega-menu__column.is-active > .mega-menu__heading {
    border-color: rgb(8 104 242 / 22%);
    background: #fff;
    color: var(--color-brand, #0868f2);
    box-shadow: 0 .6rem 1.4rem rgb(8 104 242 / 10%);
  }

  .site-header nav .mega-menu--solutions .mega-menu__column.is-active > .mega-menu__heading::after {
    opacity: 1;
    transform: translate(0, -50%);
  }

  .mega-menu--solutions .mega-menu__column.is-active > .mega-menu__heading > .mega-menu__item-icon {
    background: linear-gradient(135deg, #0868f2, #24c8ed);
    box-shadow: 0 .4rem .9rem rgb(8 104 242 / 28%);
  }

  .mega-menu--solutions .mega-menu__column.is-active > .mega-menu__heading > .mega-menu__item-icon::before {
    background: #fff;
  }

  /* Panel header: icon + title instead of a vendor logo. */
  .mega-menu--solutions .mega-menu__panel-title {
    display: flex;
    align-items: center;
    gap: .7rem;
    font-size: 1.1rem;
  }

  .mega-menu--solutions .mega-menu__panel-title .mega-menu__group-icon {
    width: 2.4rem;
    height: 2.4rem;
  }

  .mega-menu--solutions .mega-menu__panel-empty {
    max-width: 52ch;
    margin: .25rem 0 0;
    font-size: .82rem;
  }
}

@media (min-width: 64.0625rem) {
  .mega-menu--solutions .mega-menu__vendors {
    min-height: 29rem;
  }

  /* Solution area without sub-items: feature card with a CTA. */
  .mega-menu__panel-feature {
    position: relative;
    display: grid;
    align-content: center;
    justify-items: start;
    gap: 1rem;
    min-height: 11rem;
    overflow: hidden;
    margin-bottom: 1rem;
    border: 1px solid rgb(8 104 242 / 11%);
    border-radius: .85rem;
    background:
      radial-gradient(22rem 14rem at 100% 0%, rgb(36 200 237 / 12%), transparent 70%),
      linear-gradient(135deg, #f7fbff, #fff);
    padding: 1.5rem 1.6rem;
  }

  .mega-menu__panel-feature-icon {
    position: absolute;
    top: -1.5rem;
    right: -1rem;
    width: 12rem;
    height: 12rem;
    background: rgb(8 104 242 / 7%);
    -webkit-mask: var(--icon) center / contain no-repeat;
    mask: var(--icon) center / contain no-repeat;
    pointer-events: none;
  }

  .mega-menu--solutions .mega-menu__panel-feature .mega-menu__panel-empty {
    position: relative;
    max-width: 44ch;
    margin: 0;
    color: rgb(6 20 47 / 72%);
    font-size: .9rem;
    line-height: 1.6;
  }

  .site-header nav .mega-menu__panel-feature-link {
    position: relative;
    border-radius: 999px;
    background: linear-gradient(135deg, #0868f2, #0a3fa8);
    padding: .6rem 1.15rem;
    color: #fff;
    font-size: .74rem;
    font-weight: 700;
    box-shadow: 0 .5rem 1.2rem rgb(8 104 242 / 25%);
    transition: box-shadow 220ms ease, transform 220ms cubic-bezier(.16, 1, .3, 1);
  }

  .site-header nav .mega-menu__panel-feature-link:hover,
  .site-header nav .mega-menu__panel-feature-link:focus-visible {
    color: #fff;
    box-shadow: 0 .7rem 1.6rem rgb(8 104 242 / 38%), 0 0 0 3px rgb(36 200 237 / 22%);
    transform: translateY(-1px);
  }
}

@media (max-width: 64rem) {
  .mega-menu--solutions .mega-menu__grid {
    grid-template-columns: 1fr !important;
  }

  .site-header nav .mega-menu--solutions .mega-menu__heading,
  .site-header nav .mega-menu--solutions .mega-menu__item-text {
    overflow: visible;
    white-space: normal;
    text-overflow: clip;
  }
}

/*
 * A closed mega menu is only faded out (opacity 0), so nothing inside it may
 * take the pointer — otherwise its invisible panels sit over the open menu
 * and make it close as if the pointer had left it.
 */
@media (min-width: 64.0625rem) {
  .header-menu > .menu-item-has-children:not(.is-open):not(:has(:focus-visible)) > .mega-menu,
  .header-menu > .menu-item-has-children:not(.is-open):not(:has(:focus-visible)) > .mega-menu * {
    pointer-events: none !important;
  }
}

/* Scrolling a panel list never chains to the page. */
.mega-menu,
.mega-menu__panel,
.mega-menu__panel > .mega-menu__links {
  overscroll-behavior: contain;
}

/* --------------------------------------------------------------------------
   19. Detail panels: masonry flow, capped groups, vendor logos
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  /* Cards of different heights flow in columns → no empty holes. */
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    display: block;
    columns: 15rem 3;
    column-gap: .6rem;
  }

  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li {
    display: inline-block;
    width: 100%;
    margin: 0 0 .6rem;
    break-inside: avoid;
    vertical-align: top;
  }

  .mega-menu__links li.is-overflow {
    display: none !important;
  }

  .site-header nav .mega-menu__more > a {
    display: inline-flex;
    align-items: center;
    gap: .3rem;
    margin: .15rem 0 .1rem .45rem;
    border-radius: 999px;
    padding: .25rem .6rem;
    color: var(--color-brand, #0868f2);
    font-size: .72rem;
    font-weight: 700;
    transition: background-color 180ms ease;
  }

  .site-header nav .mega-menu__more > a:hover {
    background: rgb(8 104 242 / 8%);
  }

  /* Vendor colour logo in place of the generic icon. */
  .mega-menu__vendor-logo {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 4.6rem;
    height: 2.1rem;
    border-radius: .5rem;
    background: #fff;
    padding: .25rem .4rem;
    box-shadow: inset 0 0 0 1px rgb(8 104 242 / 12%);
  }

  .mega-menu__vendor-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }
}

@media (min-width: 64.0625rem) {
  /*
   * The whole panel scrolls (lists keep their natural height so the masonry
   * columns balance); header and consultation bar stay pinned.
   */
  .mega-menu--vendors .mega-menu__panel {
    overflow-x: hidden;
    overflow-y: auto;
    padding-top: 0;
    padding-bottom: 1rem;
    scrollbar-width: thin;
    scrollbar-color: rgb(8 104 242 / 25%) transparent;
  }

  .mega-menu--vendors .mega-menu__panel-head {
    position: sticky;
    top: 0;
    z-index: 3;
    margin: 0 -1.25rem .9rem;
    background: rgb(255 255 255 / 94%);
    padding: 1.1rem 1.25rem .8rem;
    backdrop-filter: blur(8px);
  }

  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    flex: none;
    overflow: visible;
    margin: 0 0 .4rem;
    padding: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }

  .mega-menu--vendors .mega-menu__panel-foot {
    position: sticky;
    bottom: 0;
    z-index: 3;
    background:
      linear-gradient(100deg, rgb(8 104 242 / 6%), rgb(36 200 237 / 8%)),
      #fff;
    box-shadow: 0 1rem 0 #fff, 0 -1.2rem 1.2rem rgb(255 255 255 / 92%);
  }
}

@media (min-width: 64.0625rem) {
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links > li {
    display: block;
    break-inside: avoid-column;
    page-break-inside: avoid;
  }
}

/* --------------------------------------------------------------------------
   20. Dự án / Tin tức – photo cards
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .site-header nav .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)) > li > .mega-menu__heading:has(.mega-menu__tile-media) {
    justify-content: flex-end;
    min-height: 8rem;
    border-color: rgb(8 104 242 / 18%);
    background: #071a3d;
    color: #fff;
    isolation: isolate;
  }

  .mega-menu__tile-media {
    position: absolute;
    inset: 0;
    z-index: -1;
    overflow: hidden;
  }

  .mega-menu__tile-media img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scale(1.02);
    transition: transform 700ms cubic-bezier(.16, 1, .3, 1), filter 400ms ease;
    filter: saturate(1.05);
  }

  /* Legibility: navy gradient from the bottom + brand tint. */
  .mega-menu__tile-media::after {
    position: absolute;
    inset: 0;
    background:
      linear-gradient(180deg, rgb(3 14 40 / 30%) 0%, rgb(3 14 40 / 52%) 45%, rgb(3 14 40 / 92%) 100%),
      linear-gradient(135deg, rgb(8 104 242 / 18%), transparent 60%);
    content: "";
    transition: opacity 300ms ease;
  }

  .site-header nav .mega-menu--cards .mega-menu__heading:has(.mega-menu__tile-media):hover,
  .site-header nav .mega-menu--cards .mega-menu__heading:has(.mega-menu__tile-media):focus-visible {
    border-color: rgb(36 200 237 / 60%);
    background: #071a3d;
    color: #fff;
    box-shadow: 0 1rem 2rem rgb(8 104 242 / 22%), 0 0 0 3px rgb(36 200 237 / 16%);
  }

  .mega-menu__heading:hover .mega-menu__tile-media img {
    transform: scale(1.09);
  }

  /* Icon chip becomes a glass badge on the photo; no watermark. */
  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-icon {
    position: absolute !important;
    top: .85rem;
    left: .85rem;
    width: 2.2rem !important;
    height: 2.2rem !important;
    background: rgb(255 255 255 / 16%);
    box-shadow: inset 0 0 0 1px rgb(255 255 255 / 28%);
    backdrop-filter: blur(6px);
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-icon::before {
    background: #fff;
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-icon::after {
    display: none;
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-text {
    font-size: 1rem;
    font-weight: 700;
    text-shadow: 0 1px 8px rgb(0 0 0 / 35%);
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-arrow {
    display: inline-grid;
    place-items: center;
    width: 1.9rem;
    height: 1.9rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 16%);
    color: #fff;
    opacity: 1 !important;
    backdrop-filter: blur(6px);
    transition: background-color 220ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  }

  .mega-menu__heading:has(.mega-menu__tile-media):hover .mega-menu__item-arrow {
    background: var(--color-cyan, #24c8ed);
    transform: translateX(.15rem) !important;
  }
}

@media (max-width: 64rem) {
  .mega-menu__tile-media {
    display: none;
  }
}

@media (min-width: 64.0625rem) {
  /* 6+ photo cards → 3 per row (two rows filling the panel height). */
  .mega-menu--cards .mega-menu__grid:not(:has(> .menu-item-has-children)):has(> li:nth-child(6)) {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 64.0625rem) {
  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-text {
    padding-right: 2.6rem;
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-arrow {
    bottom: .9rem;
  }
}

@media (min-width: 64.0625rem) {
  .site-header nav .mega-menu--cards .mega-menu__heading:has(.mega-menu__tile-media),
  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-text {
    overflow-wrap: anywhere;
    text-overflow: clip;
    white-space: normal;
  }

  .mega-menu__heading:has(.mega-menu__tile-media) .mega-menu__item-text {
    display: block;
    max-width: 100%;
    overflow: visible;
  }
}

/* --------------------------------------------------------------------------
   21. Mobile nav: label toggles the submenu, round → button opens the page
   -------------------------------------------------------------------------- */
.submenu-go,
.nav-link__chevron {
  display: none;
}

@media (max-width: 64rem) {
  .header-menu > .menu-item-has-children {
    grid-template-columns: minmax(0, 1fr) auto !important;
    align-items: center;
  }

  .header-menu > .menu-item-has-children > .submenu-toggle {
    display: none !important;
  }

  .header-menu > .menu-item-has-children > .nav-link {
    display: flex;
    align-items: center;
    gap: .55rem;
    min-height: 3.25rem;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
  }

  .nav-link__chevron {
    display: inline-grid;
    place-items: center;
    width: 1.5rem;
    height: 1.5rem;
    border-radius: 999px;
    background: rgb(255 255 255 / 8%);
    transition: background-color 200ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
  }

  .nav-link__chevron svg {
    width: .62rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .header-menu > .menu-item.is-open > .nav-link .nav-link__chevron {
    background: rgb(36 200 237 / 20%);
    transform: rotate(180deg);
  }

  .submenu-go {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 2.6rem;
    height: 2.6rem;
    margin-left: .5rem;
    border: 1px solid rgb(255 255 255 / 18%);
    border-radius: 999px;
    color: #fff;
    transition: background-color 180ms ease, border-color 180ms ease;
  }

  .submenu-go svg {
    width: 1.05rem;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 1.8;
  }

  .submenu-go:active,
  .submenu-go:focus-visible {
    border-color: var(--color-cyan, #24c8ed);
    background: rgb(36 200 237 / 18%);
  }

  .header-menu > .menu-item.is-open > .submenu-go {
    border-color: rgb(36 200 237 / 55%);
    color: var(--color-cyan, #24c8ed);
  }

  /* Mega menu spans the full row under label + button. */
  .header-menu > .menu-item-has-children > .mega-menu {
    grid-column: 1 / -1;
  }
}

/* --------------------------------------------------------------------------
   22. Mobile drill-down navigation
   -------------------------------------------------------------------------- */
.mobile-nav {
  display: none;
}

@media (max-width: 64rem) {
  html.is-nav-locked,
  html.is-nav-locked body {
    overflow: hidden;
  }

  .header-nav {
    inset: var(--header-height) 0 0 !important;
    max-height: none !important;
    height: calc(100dvh - var(--header-height));
    padding: 0 !important;
    overflow: hidden !important;
    background:
      radial-gradient(28rem 18rem at 100% 0%, rgb(36 200 237 / 12%), transparent 70%),
      radial-gradient(22rem 16rem at 0% 100%, rgb(8 104 242 / 18%), transparent 70%),
      #010d28 !important;
    overscroll-behavior: contain;
  }

  .header-nav.is-open {
    display: flex !important;
    flex-direction: column;
  }

  .header-nav > .header-menu {
    display: none !important;
  }

  .mobile-nav {
    position: relative;
    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;
    color: #fff;
  }

  .mobile-nav__bar {
    flex: none;
    border-bottom: 1px solid rgb(255 255 255 / 8%);
    padding: .55rem 1rem;
  }

  .mobile-nav__back {
    display: inline-flex;
    align-items: center;
    gap: .35rem;
    max-width: 100%;
    border-radius: 999px;
    padding: .45rem .8rem .45rem .45rem;
    color: rgb(214 236 255 / 86%);
    font-size: .85rem;
    font-weight: 600;
    transition: background-color 160ms ease;
  }

  .mobile-nav__back:active {
    background: rgb(255 255 255 / 8%);
  }

  .mobile-nav__back svg {
    width: 1.15rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  .mobile-nav__back span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .mobile-nav__view {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 1rem 1rem 1.5rem;
    -webkit-overflow-scrolling: touch;
    animation: mobile-nav-in 320ms cubic-bezier(.16, 1, .3, 1) both;
  }

  .mobile-nav__view.is-back {
    animation-name: mobile-nav-in-back;
  }

  @keyframes mobile-nav-in {
    from { opacity: 0; transform: translateX(2.5rem); }
    to { opacity: 1; transform: none; }
  }

  @keyframes mobile-nav-in-back {
    from { opacity: 0; transform: translateX(-2.5rem); }
    to { opacity: 1; transform: none; }
  }

  /* Current level header. */
  .mobile-nav__head {
    display: grid;
    gap: .35rem;
    margin: 0 .25rem 1rem;
  }

  .mobile-nav__crumb {
    color: var(--color-cyan, #24c8ed);
    font-size: .68rem;
    font-weight: 700;
    letter-spacing: .12em;
    text-transform: uppercase;
  }

  .mobile-nav__title {
    display: flex;
    align-items: center;
    gap: .65rem;
    font-size: 1.45rem;
    font-weight: 700;
    line-height: 1.2;
  }

  .mobile-nav__head-logo {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 5.5rem;
    height: 2.5rem;
    border-radius: .6rem;
    background: #fff;
    padding: .3rem .5rem;
  }

  .mobile-nav__head-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .mobile-nav__all {
    display: inline-flex;
    align-items: center;
    justify-self: start;
    gap: .4rem;
    margin-top: .35rem;
    border: 1px solid rgb(36 200 237 / 40%);
    border-radius: 999px;
    padding: .45rem .9rem;
    color: var(--color-cyan, #24c8ed);
    font-size: .8rem;
    font-weight: 700;
  }

  .mobile-nav__all svg,
  .mobile-nav__arrow,
  .mobile-nav__chevron,
  .mobile-nav__cta svg {
    width: 1.05rem;
    flex: none;
    fill: none;
    stroke: currentColor;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 2;
  }

  /* Rows. */
  .mobile-nav__list {
    display: grid;
    gap: .45rem;
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .mobile-nav__item {
    animation: mobile-nav-row 380ms cubic-bezier(.16, 1, .3, 1) both;
    animation-delay: calc(var(--i, 0) * 28ms);
  }

  @keyframes mobile-nav-row {
    from { opacity: 0; transform: translateY(.4rem); }
    to { opacity: 1; transform: none; }
  }

  .mobile-nav__row {
    display: flex;
    align-items: center;
    gap: .75rem;
    width: 100%;
    min-height: 3.5rem;
    border: 1px solid rgb(255 255 255 / 8%);
    border-radius: .9rem;
    background: rgb(255 255 255 / 4%);
    padding: .65rem .9rem .65rem 1rem;
    color: #fff;
    font-size: 1rem;
    font-weight: 600;
    line-height: 1.3;
    text-align: left;
    -webkit-tap-highlight-color: transparent;
    transition: background-color 160ms ease, border-color 160ms ease, transform 160ms ease;
  }

  .mobile-nav__row:active {
    border-color: rgb(36 200 237 / 45%);
    background: rgb(36 200 237 / 12%);
    transform: scale(.985);
  }

  .mobile-nav__row.is-current {
    border-color: rgb(36 200 237 / 45%);
    color: var(--color-cyan, #24c8ed);
  }

  .mobile-nav__label {
    flex: 1;
    min-width: 0;
  }

  .mobile-nav__logo {
    display: inline-grid;
    flex: none;
    place-items: center;
    width: 4.4rem;
    height: 2.1rem;
    border-radius: .5rem;
    background: #fff;
    padding: .25rem .4rem;
  }

  .mobile-nav__logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
  }

  .mobile-nav__count {
    flex: none;
    min-width: 1.6rem;
    border-radius: 999px;
    background: rgb(36 200 237 / 14%);
    padding: .2rem .5rem;
    color: #7fe3ff;
    font-size: .72rem;
    font-weight: 700;
    text-align: center;
  }

  .mobile-nav__chevron {
    color: rgb(214 236 255 / 70%);
  }

  .mobile-nav__arrow {
    color: rgb(214 236 255 / 45%);
  }

  /* Pinned contact button. */
  .mobile-nav__footer {
    flex: none;
    border-top: 1px solid rgb(255 255 255 / 8%);
    background: rgb(1 13 40 / 92%);
    padding: .85rem 1rem calc(.85rem + env(safe-area-inset-bottom));
    backdrop-filter: blur(12px);
  }

  .mobile-nav__cta {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    min-height: 3.1rem;
    border-radius: 999px;
    background: linear-gradient(135deg, #0868f2, #24c8ed);
    color: #fff;
    font-size: .95rem;
    font-weight: 700;
    box-shadow: 0 .8rem 1.8rem rgb(8 104 242 / 35%);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mobile-nav__view,
  .mobile-nav__item {
    animation: none !important;
  }
}

@media (max-width: 64rem) {
  .header-nav.is-open {
    align-items: stretch !important;
    justify-content: flex-start !important;
  }

  .mobile-nav {
    align-self: stretch;
    width: 100%;
  }
}

/* --------------------------------------------------------------------------
   23. Scrollbars + scroll progress (brand styling)
   -------------------------------------------------------------------------- */

/* Page scrollbar (Chromium / Safari / Edge). */
html::-webkit-scrollbar {
  width: 11px;
  height: 11px;
}

html::-webkit-scrollbar-track {
  background:
    linear-gradient(90deg, rgb(255 255 255 / 4%), transparent 40%),
    #010b22;
}

html::-webkit-scrollbar-thumb {
  border: 3px solid #010b22;
  border-radius: 999px;
  background: linear-gradient(180deg, #24c8ed 0%, #0868f2 55%, #0a3fa8 100%);
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 12%);
}

html::-webkit-scrollbar-thumb:hover {
  border-width: 2px;
  background: linear-gradient(180deg, #7fe3ff 0%, #24c8ed 40%, #0868f2 100%);
}

html::-webkit-scrollbar-corner {
  background: #010b22;
}

/* Firefox (no gradient support → brand blue on navy). */
@supports not selector(::-webkit-scrollbar) {
  html {
    scrollbar-color: #1e8cf0 #010b22;
    scrollbar-width: thin;
  }
}

/* Inner scroll areas (mega menu panels, mobile menu, filters…): slim floating thumb. */
.mega-menu *::-webkit-scrollbar,
.mobile-nav *::-webkit-scrollbar,
.header-nav::-webkit-scrollbar {
  width: 6px;
  height: 6px;
}

.mega-menu *::-webkit-scrollbar-track,
.mobile-nav *::-webkit-scrollbar-track,
.header-nav::-webkit-scrollbar-track {
  margin-block: .6rem;
  background: transparent;
}

.mega-menu *::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: rgb(8 104 242 / 28%);
}

.mega-menu *::-webkit-scrollbar-thumb:hover {
  background: linear-gradient(180deg, #24c8ed, #0868f2);
}

.mobile-nav *::-webkit-scrollbar-thumb,
.header-nav::-webkit-scrollbar-thumb {
  border-radius: 999px;
  background: linear-gradient(180deg, rgb(36 200 237 / 70%), rgb(8 104 242 / 70%));
}

@supports selector(::-webkit-scrollbar) {
  /* Let the custom WebKit scrollbars win over the standard properties. */
  .mega-menu--vendors .mega-menu__panel,
  .site-header .mega-menu--vendors .mega-menu__panel > .mega-menu__links {
    scrollbar-color: auto;
    scrollbar-width: auto;
  }
}

@supports not selector(::-webkit-scrollbar) {
  .mobile-nav__view {
    scrollbar-color: rgb(36 200 237 / 60%) transparent;
    scrollbar-width: thin;
  }
}

/* Mobile menu list: soft fade at the scroll edges. */
@media (max-width: 64rem) {
  .mobile-nav__view {
    -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 .9rem, #000 calc(100% - 1.4rem), transparent 100%);
    mask-image: linear-gradient(180deg, transparent 0, #000 .9rem, #000 calc(100% - 1.4rem), transparent 100%);
  }
}

/* Reading progress line under the header. */
.scroll-progress {
  position: fixed;
  top: var(--header-height, 4.5rem);
  left: 0;
  z-index: 60;
  width: 100%;
  height: 2px;
  pointer-events: none;
}

.scroll-progress span {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, #0868f2, #24c8ed 70%, #fff);
  box-shadow: 0 0 .6rem rgb(36 200 237 / 70%), 0 0 1.4rem rgb(8 104 242 / 45%);
  transform: scaleX(var(--scroll-progress, 0));
  transform-origin: left center;
  will-change: transform;
}

.scroll-progress span::after {
  position: absolute;
  top: 50%;
  right: 0;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: #fff;
  box-shadow: 0 0 .5rem 2px rgb(36 200 237 / 90%);
  content: "";
  transform: translate(50%, -50%) scaleX(calc(1 / max(var(--scroll-progress, 0), .001)));
}

html.is-nav-locked .scroll-progress {
  opacity: 0;
}

/* --------------------------------------------------------------------------
   24. About hero – partner logos orbiting Nessar (clean background)
   -------------------------------------------------------------------------- */
.inner-hero--about .hero-fx__grid,
.inner-hero--about .hero-fx__particles {
  display: none !important;
}

.about-hero__orbit {
  width: clamp(18rem, 34vw, 32rem);
}

.about-hero__ring--1 { --dur: 70s; animation-duration: 70s; }
.about-hero__ring--2 { --dur: 52s; animation-duration: 52s; }
.about-hero__ring--3 { --dur: 38s; animation-duration: 38s; }

/* Each logo sits on its ring and counter-rotates so it always stays upright. */
.about-hero__planet {
  position: absolute;
  top: calc(50% + 50% * sin(var(--a)));
  left: calc(50% + 50% * cos(var(--a)));
  display: grid;
  place-items: center;
  width: clamp(3.6rem, 5.4vw, 5.2rem);
  height: clamp(1.75rem, 2.5vw, 2.4rem);
  border-radius: 999px;
  background: rgb(255 255 255 / 96%);
  padding: .3rem .6rem;
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 60%),
    0 0 1.1rem rgb(36 200 237 / 55%),
    0 .5rem 1.2rem rgb(0 10 40 / 35%);
  transform: translate(-50%, -50%);
  animation: about-planet-upright var(--dur) linear infinite;
  will-change: transform;
}

.about-hero__ring--2 .about-hero__planet {
  animation-direction: reverse;
}

.about-hero__planet img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
}

@keyframes about-planet-upright {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to { transform: translate(-50%, -50%) rotate(-360deg); }
}

/* Subtle pulse travelling around the logos. */
.about-hero__planet::after {
  position: absolute;
  inset: -4px;
  border: 1px solid rgb(36 200 237 / 55%);
  border-radius: inherit;
  content: "";
  opacity: 0;
  animation: about-planet-ping 4.8s ease-out infinite;
}

.about-hero__planet:nth-child(2)::after { animation-delay: 1.2s; }
.about-hero__planet:nth-child(3)::after { animation-delay: 2.4s; }
.about-hero__planet:nth-child(4)::after { animation-delay: 3.6s; }
.about-hero__planet:nth-child(5)::after { animation-delay: .6s; }
.about-hero__ring--2 .about-hero__planet::after { animation-duration: 5.6s; }
.about-hero__ring--3 .about-hero__planet::after { animation-duration: 4.2s; }

@keyframes about-planet-ping {
  0% { opacity: .9; transform: scale(1); }
  70%, 100% { opacity: 0; transform: scale(1.35); }
}

@media (max-width: 64rem) {
  .about-hero__orbit {
    opacity: .5;
  }
}

@media (prefers-reduced-motion: reduce) {
  .about-hero__planet,
  .about-hero__planet::after {
    animation: none !important;
  }
}

.about-hero__orbit {
  top: calc(50% + 1rem);
  width: clamp(17rem, 29vw, 26.5rem);
  transform: translateY(-50%);
}

.about-hero__planet {
  width: clamp(3.4rem, 4.8vw, 4.7rem);
  height: clamp(1.65rem, 2.2vw, 2.15rem);
}

@media (max-width: 64rem) {
  .about-hero__orbit {
    opacity: .3;
  }

  .about-hero__planet {
    display: none;
  }
}

/* Faster, clearly visible orbit (client request: "xoay tròn"). */
.about-hero__ring--1 { --dur: 32s; animation: nessar-orbit 32s linear infinite !important; }
.about-hero__ring--2 { --dur: 24s; animation: nessar-orbit 24s linear infinite reverse !important; }
.about-hero__ring--3 { --dur: 16s; animation: nessar-orbit 16s linear infinite !important; }

.about-hero__planet {
  animation: about-planet-upright var(--dur) linear infinite !important;
}

.about-hero__ring--2 .about-hero__planet {
  animation-direction: reverse !important;
}

/* Keep the (decorative) orbit turning even with OS "reduce motion", just slower. */
@media (prefers-reduced-motion: reduce) {
  .about-hero__ring--1 { --dur: 60s; animation-duration: 60s !important; }
  .about-hero__ring--2 { --dur: 48s; animation-duration: 48s !important; }
  .about-hero__ring--3 { --dur: 36s; animation-duration: 36s !important; }
}

/* Vendor logos recede; the Nessar core is the hero. */
.about-hero__planet {
  background: rgb(255 255 255 / 72%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 25%),
    0 0 .6rem rgb(36 200 237 / 22%);
  opacity: .5;
  filter: saturate(.55);
}

.about-hero__planet::after {
  border-color: rgb(36 200 237 / 30%);
}

.about-hero__ring {
  border-color: rgb(36 200 237 / 18%);
}

.about-hero__ring--2 {
  border-color: rgb(95 227 255 / 24%);
}

.about-hero__core {
  z-index: 2;
  inset: 33%;
  background: radial-gradient(circle, rgb(36 200 237 / 45%) 0%, rgb(8 104 242 / 22%) 45%, transparent 72%);
}

.about-hero__core::before {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(36 200 237 / 28%), transparent 65%);
  content: "";
  animation: about-core-breathe 3.6s ease-in-out infinite;
}

.about-hero__core img {
  position: relative;
  width: 165%;
  filter:
    drop-shadow(0 0 .9rem rgb(36 200 237 / 85%))
    drop-shadow(0 0 2.4rem rgb(8 104 242 / 70%))
    brightness(1.12);
}

@keyframes about-core-breathe {
  0%, 100% { opacity: .55; transform: scale(.92); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* No blinking: steady glow, original logo size. */
.about-hero__core {
  inset: 36%;
  animation: none !important;
}

.about-hero__core::before {
  animation: none !important;
  opacity: .8;
  transform: none;
}

.about-hero__core img {
  width: 150%;
}

.about-hero__planet::after {
  display: none;
}

/* About hero: city skyline backdrop (same artwork as the home solutions section). */
.inner-hero--about {
  background:
    linear-gradient(90deg, rgb(1 12 38 / 92%) 0%, rgb(1 12 38 / 70%) 32%, rgb(1 12 38 / 18%) 62%, rgb(1 12 38 / 35%) 100%),
    linear-gradient(180deg, rgb(1 12 38 / 55%) 0%, rgb(1 12 38 / 0%) 28%, rgb(1 12 38 / 0%) 70%, rgb(1 12 38 / 70%) 100%),
    url("../images/home/ent-sol-bg.webp") 62% 58% / cover no-repeat,
    #010c26 !important;
}

.inner-hero--about::before {
  display: none !important;
}

@media (max-width: 64rem) {
  .inner-hero--about {
    background:
      linear-gradient(180deg, rgb(1 12 38 / 78%) 0%, rgb(1 12 38 / 62%) 55%, rgb(1 12 38 / 88%) 100%),
      url("../images/home/ent-sol-bg.webp") 55% 50% / cover no-repeat,
      #010c26 !important;
  }
}

@media (min-width: 64.0625rem) {
  .inner-hero--about {
    background:
      linear-gradient(90deg, rgb(1 12 38 / 94%) 0%, rgb(1 12 38 / 82%) 30%, rgb(1 12 38 / 45%) 48%, rgb(1 12 38 / 10%) 66%, rgb(1 12 38 / 35%) 100%),
      linear-gradient(180deg, rgb(1 12 38 / 55%) 0%, rgb(1 12 38 / 0%) 28%, rgb(1 12 38 / 0%) 70%, rgb(1 12 38 / 70%) 100%),
      url("../images/home/ent-sol-bg.webp") 30% 58% / cover no-repeat,
      #010c26 !important;
  }
}

/* Logos fixed to their ring: they turn with it (no upright counter-rotation),
   facing outward along the circle. */
.about-hero__planet,
.about-hero__ring--2 .about-hero__planet {
  animation: none !important;
  transform: translate(-50%, -50%) rotate(calc(var(--a) + 90deg)) !important;
}

/* Background a bit dimmer; rings + vendor logos a bit brighter. */
@media (min-width: 64.0625rem) {
  .inner-hero--about {
    background:
      linear-gradient(90deg, rgb(1 12 38 / 94%) 0%, rgb(1 12 38 / 78%) 32%, rgb(1 12 38 / 48%) 60%, rgb(1 12 38 / 58%) 100%),
      linear-gradient(180deg, rgb(1 12 38 / 60%) 0%, rgb(1 12 38 / 15%) 28%, rgb(1 12 38 / 15%) 70%, rgb(1 12 38 / 75%) 100%),
      url("../images/home/ent-sol-bg.webp") 30% 58% / cover no-repeat,
      #010c26 !important;
  }
}

.about-hero__ring {
  border-color: rgb(36 200 237 / 34%);
}

.about-hero__ring--2 {
  border-color: rgb(95 227 255 / 42%);
}

.about-hero__ring--3 {
  border-color: rgb(36 200 237 / 55%);
}

.about-hero__planet {
  background: rgb(255 255 255 / 88%);
  box-shadow:
    0 0 0 1px rgb(255 255 255 / 45%),
    0 0 .8rem rgb(36 200 237 / 38%);
  opacity: .78;
  filter: saturate(.85);
}

/* Mobile/tablet: same side-by-side layout – compact copy left, smaller orbit right. */
@media (max-width: 64rem) {
  .inner-hero--about {
    --orbit-size: min(44vw, 21rem);
  }

  .about-hero__orbit {
    top: 7.5rem !important;
    right: -.75rem !important;
    width: var(--orbit-size) !important;
    opacity: 1 !important;
    transform: none !important;
  }

  .inner-hero--about .inner-hero__eyebrow,
  .inner-hero--about h1,
  .inner-hero--about .inner-hero__description {
    max-width: calc(100% - var(--orbit-size) + 1.5rem);
  }

  .inner-hero--about .inner-hero__description {
    font-size: .9rem;
    line-height: 1.55;
  }

  .about-hero__planet {
    display: grid !important;
    width: clamp(1.9rem, 9.5vw, 3.4rem);
    height: clamp(.95rem, 4.6vw, 1.65rem);
    padding: .1rem .22rem;
  }

  .about-hero__core img {
    width: 140%;
  }
}

@media (min-width: 40rem) and (max-width: 64rem) {
  .about-hero__orbit {
    top: 50% !important;
    right: 1.5rem !important;
    transform: translateY(-50%) !important;
  }
}

@media (max-width: 64rem) {
  /* Title keeps the full width; only the description narrows beside the orbit. */
  .inner-hero--about h1,
  .inner-hero--about .inner-hero__eyebrow {
    max-width: none !important;
  }

  .inner-hero--about .inner-hero__description {
    min-height: calc(var(--orbit-size) - 1rem);
  }
}

@media (max-width: 39.99rem) {
  .inner-hero--about {
    --orbit-size: 40vw;
  }

  .about-hero__orbit {
    top: 13.25rem !important;
    right: .6rem !important;
  }
}

@media (min-width: 40rem) and (max-width: 64rem) {
  .inner-hero--about {
    --orbit-size: min(34vw, 17rem);
  }

  .about-hero__orbit {
    top: 9.5rem !important;
    right: 1.5rem !important;
    transform: none !important;
  }
}

@media (max-width: 64rem) {
  .inner-hero--about .inner-hero__description {
    max-width: calc(100% - var(--orbit-size) - .5rem) !important;
  }
}

@media (min-width: 40rem) and (max-width: 64rem) {
  .inner-hero--about .inner-hero__description {
    min-height: 0;
    max-width: calc(100% - var(--orbit-size) - 3rem) !important;
  }

  .about-hero__orbit {
    top: 7rem !important;
  }
}

/* Facts: always one row of three (mobile included). */
@media (max-width: 64rem) {
  .about-hero__facts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  .about-hero__facts span {
    min-width: 0;
    font-size: clamp(.62rem, 2.9vw, .8rem) !important;
    line-height: 1.35;
  }

  .about-hero__facts strong {
    font-size: clamp(1.3rem, 6.4vw, 1.9rem) !important;
  }
}

@media (min-width: 40rem) and (max-width: 64rem) {
  .about-hero__facts {
    max-width: calc(100% - var(--orbit-size) - 1rem);
  }
}

/* Phones: bigger orbit, vertically centred on the description (top set by JS). */
@media (max-width: 39.99rem) {
  .inner-hero--about {
    --orbit-size: 44vw;
  }

  .about-hero__orbit {
    top: var(--orbit-top, 13.25rem) !important;
    right: 3vw !important;
    transform: translateY(-50%) !important;
  }

  .inner-hero--about .inner-hero__description {
    max-width: calc(100% - var(--orbit-size) - 1vw) !important;
    min-height: calc(var(--orbit-size) * .82);
    display: flex;
    align-items: center;
    font-size: clamp(.78rem, 3.6vw, .9rem);
  }
}

@media (max-width: 39.99rem) {
  .inner-hero--about h1 {
    max-width: calc(100% - var(--orbit-size) + 2.5rem) !important;
    font-size: clamp(1.9rem, 9.4vw, 2.5rem) !important;
    line-height: 1.05 !important;
  }

  .inner-hero--about .inner-hero__description {
    min-height: calc(var(--orbit-size) * .7);
    align-items: flex-start;
    margin-top: .85rem !important;
  }
}

/* Phones/tablets: the "Khám phá Nessar" sidebar nav is not needed (CTA kept). */
@media (max-width: 64rem) {
  .about-sidebar__nav {
    display: none !important;
  }
}

@media (max-width: 64rem) {
  .about-page__layout > .about-sidebar {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   25. About – "Hệ sinh thái giải pháp": one unified dark panel
   -------------------------------------------------------------------------- */
.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section > .elementor-container {
  position: relative;
  grid-template-columns: minmax(0, 1.45fr) minmax(14rem, .75fr) !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(36 200 237 / 22%);
  border-radius: 1.1rem;
  background:
    radial-gradient(36rem 22rem at 0% 0%, rgb(3 81 131 / 95%), transparent 70%),
    radial-gradient(26rem 18rem at 100% 100%, rgb(36 200 237 / 14%), transparent 70%),
    linear-gradient(120deg, #024a7c 0%, #0b2f63 55%, #141d47 100%);
  box-shadow: 0 1.6rem 3.2rem rgb(0 26 72 / 22%);
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column,
.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column:first-child,
.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column:last-child {
  min-height: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-widget-image img {
  max-height: none !important;
  padding: clamp(.75rem, 1.6vw, 1.25rem) !important;
  object-fit: contain;
}

/* Right column: title with a thin divider, aligned to the diagram. */
.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column:last-child {
  position: relative;
  align-items: center !important;
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column:last-child::before {
  position: absolute;
  top: 14%;
  bottom: 14%;
  left: 0;
  width: 1px;
  background: linear-gradient(180deg, transparent, rgb(36 200 237 / 55%), transparent);
  content: "";
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-absolute {
  padding: clamp(1.25rem, 2.4vw, 2.25rem) clamp(1.25rem, 2.6vw, 2.5rem) !important;
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-widget-text-editor p:first-child:empty,
.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-widget-text-editor p:first-child:has(> br:only-child) {
  display: none;
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-widget-text-editor :where(p, span, b, strong) {
  font-size: clamp(1.45rem, 2.15vw, 2.35rem) !important;
  letter-spacing: -.01em;
  overflow-wrap: anywhere;
}

.about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-widget-text-editor .elementor-widget-container::before {
  display: block;
  margin-bottom: .9rem;
  color: #24c8ed;
  content: "Nessar Technology Ecosystem";
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

@media (max-width: 47.99rem) {
  .about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section > .elementor-container {
    grid-template-columns: 1fr !important;
  }

  .about-page__content .elementor-widget-heading:has(#about-ecosystem) + .elementor-inner-section .elementor-column:last-child::before {
    top: 0;
    right: 12%;
    bottom: auto;
    left: 12%;
    width: auto;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgb(36 200 237 / 55%), transparent);
  }
}

/* --------------------------------------------------------------------------
   26. Footer on phones – compact, two-up layout
   -------------------------------------------------------------------------- */
@media (max-width: 639px) {
  #contact .nessar-footer-stage {
    padding-block: 2.25rem 1.25rem !important;
  }

  #contact .nessar-footer-zone {
    width: calc(100% - 2rem) !important;
  }

  #contact .nessar-footer-row {
    row-gap: 1.9rem !important;
  }

  #contact .nessar-footer-row + .nessar-footer-row {
    margin-top: 1.9rem !important;
  }

  /* About + Solutions side by side. */
  #contact .nessar-footer-link-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1rem !important;
    row-gap: 1.9rem !important;
  }

  #contact .nessar-footer-heading {
    padding-bottom: .55rem;
    font-size: .92rem !important;
  }

  #contact .nessar-footer-list {
    gap: .5rem !important;
    margin-top: .8rem !important;
  }

  #contact .nessar-footer-list a,
  #contact .nessar-footer-offices p {
    font-size: .8rem !important;
  }

  /* Partners: 3 compact columns. */
  #contact .nessar-footer-vendors {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .45rem .75rem !important;
    margin-top: .8rem !important;
  }

  #contact .nessar-footer-vendors a {
    overflow: hidden;
    font-size: .76rem !important;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  /* Newsletter: smaller headline. */
  #contact .nessar-footer-newsletter h2 {
    font-size: 1.35rem !important;
    line-height: 1.3 !important;
  }

  #contact .nessar-footer-newsletter form {
    margin-top: 1rem !important;
  }

  /* Offices side by side, socials under them. */
  #contact .nessar-footer-offices {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    column-gap: 1rem !important;
    row-gap: 1.25rem !important;
  }

  #contact .nessar-footer-offices > div:not(.nessar-footer-socials) p:first-of-type {
    margin-top: .8rem !important;
  }

  #contact .nessar-footer-offices p {
    line-height: 1.5 !important;
    overflow-wrap: anywhere;
  }

  #contact .nessar-footer-socials {
    grid-column: 1 / -1;
  }

  #contact .nessar-footer-brand {
    margin-top: 1.5rem !important;
  }

  #contact .nessar-footer-brand img {
    max-width: 16rem;
    margin-inline: auto;
  }
}

/* Home hero (phones): breathing room between the CTA and the visual below. */
@media (max-width: 63.99rem) {
  .hero-slider .hero-layout > .hero-visual,
  .hero-slider .hero-layout > :not(.hero-balance-copy) {
    margin-top: 1.25rem !important;
  }
}

/* --------------------------------------------------------------------------
   27. Home hero banner 1 – plain glowing logo, chevrons centred (JS)
   -------------------------------------------------------------------------- */
.hero-visual--logo {
  align-self: center !important;
}

.hero-visual--logo .hero-holo {
  aspect-ratio: 1.15;
}

.hero-holo__mark {
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  animation: none !important;
}

.hero-holo__glow {
  inset: 18% 14% !important;
  opacity: .8;
  animation: none !important;
}

.hero-holo__beam,
.hero-holo__ring,
.hero-holo__dot {
  display: none !important;
}

/* Photo positioned by JS (chevron apex at the copy centre); zoom keeps that point fixed. */
.hero-fx__photo[data-apex] {
  animation-name: nessar-kenburns-still;
}

@keyframes nessar-kenburns-still {
  from { transform: scale(1); }
  to { transform: scale(1.05); }
}

/* Phones/tablets: chevrons sit behind the logo, copy side darkened for legibility. */
@media (max-width: 64rem) {
  .hero-fx__photo[data-apex]::after {
    background:
      linear-gradient(180deg, rgb(0 12 40 / 82%) 0%, rgb(0 12 40 / 70%) 55%, rgb(0 12 40 / 15%) 75%, rgb(0 12 40 / 70%) 100%) !important;
  }
}

/* Home hero: never shorter than its tallest slide (short phones), so the
   logo / cards never run into the partner strip. --hero-min set by JS. */
.hero-slider {
  min-height: max(100svh, var(--hero-min, 0px)) !important;
}

/* Phones: whole banner fits one screen – small Nessar mark above the copy. */
@media (max-width: 48rem) {
  .hero-slider .hero-layout {
    gap: .9rem !important;
  }

  .hero-slider .hero-layout > .hero-visual--logo {
    order: -1 !important;
    justify-self: start !important;
    margin-top: 0 !important;
  }

  .hero-visual--logo .hero-holo {
    width: 3.6rem !important;
    aspect-ratio: 1 !important;
    margin: 0 !important;
  }

  .hero-holo__mark {
    width: 100% !important;
  }

  .hero-holo__glow {
    inset: -20% !important;
  }

  .hero-slider .hero-layout .hero-copy {
    margin-top: .75rem !important;
    font-size: .92rem !important;
    line-height: 1.6 !important;
  }

  .hero-actions {
    margin-top: 1.25rem !important;
  }
}

@media (max-width: 48rem) {
  .hero-slider .hero-slider__content.hero-layout {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
  }

  .hero-slider .hero-layout > .hero-visual {
    margin-top: 0 !important;
  }

  /* Banner 2: the three pillars become one compact row of tiles. */
  .hero-visual--cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .5rem !important;
  }

  .hero-pillar {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-height: 0;
    padding: .65rem .6rem !important;
  }

  .hero-pillar__icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: .65rem !important;
  }

  .hero-pillar__body strong {
    font-size: .78rem !important;
    line-height: 1.25 !important;
  }

  .hero-pillar__body small,
  .hero-pillar__arrow {
    display: none !important;
  }
}

@media (max-width: 48rem) {
  .hero-slider {
    --hero-top-space: 5.25rem;
    --hero-bottom-space: 9.5rem;
  }

  .hero-slider .hero-layout .hero-copy {
    display: -webkit-box !important;
    overflow: hidden;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .hero-actions {
    flex-direction: row !important;
    gap: .5rem !important;
  }

  .hero-actions .button {
    flex: 1 1 0;
    min-width: 0;
    padding-inline: .6rem !important;
    font-size: .82rem !important;
    white-space: nowrap;
  }

  .hero-slider .eyebrow {
    margin-bottom: .5rem !important;
  }

  .hero-slider .hero-layout .display-title {
    font-size: clamp(1.7rem, 7.6vw, 2.3rem) !important;
  }
}

@media (max-width: 22.5rem) {
  .hero-actions .button {
    padding-inline: .35rem !important;
    font-size: .74rem !important;
  }

  .hero-actions .button span[aria-hidden] {
    display: none;
  }

  .hero-pillar__body strong {
    font-size: .7rem !important;
  }
}

/* --------------------------------------------------------------------------
   28. Home hero – one consistent stacked layout below 1024px
   -------------------------------------------------------------------------- */
@media (max-width: 64rem) {
  .hero-slider {
    --hero-top-space: 5.5rem;
    --hero-bottom-space: 9.75rem;
  }

  .hero-slider .hero-slider__content.hero-layout {
    display: flex !important;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    gap: 1.1rem !important;
  }

  .hero-slider .hero-layout > .hero-balance-copy {
    width: 100%;
    max-width: 38rem;
  }

  /* Banner 1: Nessar mark sits just above the eyebrow. */
  .hero-slider .hero-layout > .hero-visual--logo {
    order: -1 !important;
    justify-self: start !important;
    align-self: flex-start !important;
    width: auto !important;
    margin: 0 0 -.35rem !important;
  }

  .hero-visual--logo .hero-holo {
    width: clamp(3.4rem, 9vw, 4.6rem) !important;
    aspect-ratio: 1.5 !important;
    margin: 0 !important;
  }

  .hero-holo__mark {
    width: 100% !important;
  }

  .hero-holo__glow {
    inset: -25% !important;
  }

  /* Buttons keep their natural width. */
  .hero-actions {
    flex-direction: row !important;
    flex-wrap: wrap;
    gap: .6rem !important;
    margin-top: 1.4rem !important;
  }

  .hero-actions .button {
    flex: 0 0 auto !important;
    width: auto !important;
    padding-inline: 1.25rem !important;
    font-size: .85rem !important;
  }

  /* Banner 2: pillars as one row of compact tiles. */
  .hero-slider .hero-layout > .hero-visual--cards {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: .55rem !important;
    width: 100%;
    max-width: 38rem;
    margin: 0 !important;
  }

  .hero-pillar {
    display: flex !important;
    flex-direction: column;
    align-items: flex-start;
    gap: .45rem;
    min-height: 0;
    padding: .7rem .7rem !important;
  }

  .hero-pillar__icon {
    width: 1.9rem !important;
    height: 1.9rem !important;
    font-size: .65rem !important;
  }

  .hero-pillar__body strong {
    font-size: .8rem !important;
    line-height: 1.25 !important;
  }

  .hero-pillar__body small,
  .hero-pillar__arrow {
    display: none !important;
  }
}

@media (max-width: 22.5rem) {
  .hero-actions .button {
    padding-inline: .8rem !important;
    font-size: .76rem !important;
  }
}

@media (max-width: 26rem) {
  .hero-actions {
    flex-wrap: nowrap;
  }

  .hero-actions .button {
    flex: 1 1 0 !important;
    min-width: 0;
    padding-inline: .5rem !important;
    font-size: .78rem !important;
    white-space: nowrap;
  }

  .hero-pillar {
    padding: .6rem .5rem !important;
  }

  .hero-pillar__body strong {
    font-size: .72rem !important;
    overflow-wrap: anywhere;
  }
}

@media (max-width: 22.5rem) {
  .hero-actions .button {
    font-size: .72rem !important;
  }

  .hero-actions .button span[aria-hidden] {
    display: none;
  }

  .hero-pillar__body strong {
    font-size: .66rem !important;
  }
}

@media (max-width: 22.5rem) {
  .hero-pillar__body strong {
    font-size: .62rem !important;
    overflow-wrap: normal !important;
    letter-spacing: -.01em;
  }
}

/* --------------------------------------------------------------------------
   29. Banner 1 artwork without JS: an oversized layer whose chevron tip
       (40.7% of the image height) is pinned to the middle of the content
       band between the header and the partner strip – pure CSS, so it is
       always correct after any resize / device switch.
   -------------------------------------------------------------------------- */
.hero-fx__photo[data-apex] {
  inset: 0;
  overflow: hidden;
  background-size: 0 0 !important;
  background-repeat: no-repeat !important;
  transform-origin: 100% 47%;
}

.hero-fx__photo[data-apex]::before {
  position: absolute;
  top: calc(var(--hero-top-space) + (100% - var(--hero-top-space) - var(--hero-bottom-space)) / 2);
  right: 0;
  height: max(125%, 57vw);
  aspect-ratio: 16 / 9;
  background-image: inherit;
  background-position: center;
  background-repeat: no-repeat;
  background-size: 100% 100%;
  content: "";
  transform: translateY(-40.7%);
}

/* Overlay stays above the artwork layer. */
.hero-fx__photo[data-apex]::after {
  z-index: 1;
}

/* --------------------------------------------------------------------------
   30. Hero performance – compositor-only animations (smooth partner marquee)
   -------------------------------------------------------------------------- */
/* Static photo: zooming a 2000px layer every frame starved the marquee. */
.hero-fx__photo,
.hero-fx__photo[data-apex] {
  animation: none !important;
  transform: none !important;
}

/* Grid: no per-frame background repaint. */
.hero-fx__grid {
  animation: none !important;
}

/* Light sweep: move with transform (was animating `left` → layout every frame). */
.hero-fx__sweep {
  left: -30% !important;
  will-change: transform;
  animation: nessar-sweep-fast 9s ease-in-out infinite !important;
}

@keyframes nessar-sweep-fast {
  0% { transform: translateX(0) rotate(18deg); }
  60%, 100% { transform: translateX(730%) rotate(18deg); }
}

/* Partner strip: edge fades as overlays instead of a mask on the moving layer. */
.hero-slider__partner-marquee {
  position: relative;
  -webkit-mask-image: none !important;
  mask-image: none !important;
  contain: paint;
}

.hero-slider__partner-marquee::before,
.hero-slider__partner-marquee::after {
  position: absolute;
  top: 0;
  bottom: 0;
  z-index: 2;
  width: 8%;
  content: "";
  pointer-events: none;
}

.hero-slider__partner-marquee::before {
  left: 0;
  background: linear-gradient(90deg, #000f33, rgb(0 15 51 / 0%));
}

.hero-slider__partner-marquee::after {
  right: 0;
  background: linear-gradient(270deg, #000f33, rgb(0 15 51 / 0%));
}

.hero-slider__partner-track {
  will-change: transform;
  transform: translate3d(0, 0, 0);
}

.hero-slider__partner img {
  image-rendering: auto;
}

/* Sections outside the viewport pause their decorative animations (set by JS). */
.is-offscreen,
.is-offscreen * {
  animation-play-state: paused !important;
}

/* No backdrop blur over animated areas (each blur re-renders every frame). */
.mega-menu--vendors .mega-menu__panel-head {
  background: #fff !important;
  backdrop-filter: none !important;
}

.hero-pillar {
  backdrop-filter: none !important;
  background-color: rgb(4 24 66 / 72%);
}

/* A closed mega menu is not painted at all. */
.header-menu > .menu-item-has-children:not(.is-open):not(:has(:focus-visible)) > .mega-menu {
  visibility: hidden;
}

.header-menu > .menu-item-has-children:not(.is-open):not(:has(:focus-visible)) > .mega-menu,
.header-menu > .menu-item-has-children:not(.is-open):not(:has(:focus-visible)) > .mega-menu * {
  backdrop-filter: none !important;
}

/* Light sweep removed (not requested by the client). */
.hero-fx__sweep {
  display: none !important;
}

/* --------------------------------------------------------------------------
   31. Enterprise wheel – entrance, sector scan, hover highlight
   -------------------------------------------------------------------------- */
.ent-sol__sector {
  opacity: 0;
  transition: opacity 520ms ease;
  pointer-events: all;
  cursor: default;
}

.ent-sol__sector--outer {
  fill: url(#entSectorOuter);
}

.ent-sol__sector--middle {
  fill: url(#entSectorMiddle);
}

.ent-sol__sector.is-lit {
  opacity: 1;
}

.ent-sol__core-quadrant {
  transition: opacity 520ms ease, filter 520ms ease;
}

.ent-sol__core-quadrant.is-lit {
  filter: brightness(2.2) saturate(1.3);
}

.ent-sol__item {
  cursor: default;
}

.ent-sol__item-inner {
  transform-box: fill-box;
  transform-origin: center;
  transition: transform 520ms cubic-bezier(.16, 1, .3, 1), opacity 520ms ease, filter 520ms ease;
}

.ent-sol__item.is-lit .ent-sol__item-inner {
  transform: scale(1.14);
  filter: drop-shadow(0 0 4px rgb(120 240 255 / 85%));
}

.ent-sol__item.is-lit text {
  fill: #fff;
}

/* Entrance (wheel gets .is-revealed when scrolled into view). */
[data-wheel]:not(.is-revealed) .ent-sol__rings,
[data-wheel]:not(.is-revealed) .ent-sol__ring-fills,
[data-wheel]:not(.is-revealed) .ent-sol__orbits {
  opacity: 0;
  transform: scale(.82);
}

.ent-sol__rings,
.ent-sol__ring-fills,
.ent-sol__orbits {
  transform-box: view-box;
  transform-origin: 260px 260px;
  transition: opacity 900ms ease, transform 1100ms cubic-bezier(.16, 1, .3, 1);
}

.ent-sol__ring-fills {
  transition-delay: 80ms;
}

[data-wheel]:not(.is-revealed) .ent-sol__wheel-dividers,
[data-wheel]:not(.is-revealed) .ent-sol__core-dividers,
[data-wheel]:not(.is-revealed) .ent-sol__arc-labels,
[data-wheel]:not(.is-revealed) .ent-sol__core-logo {
  opacity: 0;
}

.ent-sol__wheel-dividers,
.ent-sol__core-dividers,
.ent-sol__arc-labels {
  transition: opacity 900ms ease 700ms;
}

.ent-sol__core-logo {
  transform-box: fill-box;
  transform-origin: center;
  transition: opacity 700ms ease 200ms, transform 900ms cubic-bezier(.16, 1, .3, 1) 200ms;
}

[data-wheel]:not(.is-revealed) .ent-sol__core-logo {
  transform: scale(.5);
}

[data-wheel]:not(.is-revealed) .ent-sol__item-inner {
  opacity: 0;
  transform: scale(.6);
}

[data-wheel] .ent-sol__item-inner {
  transition-delay: var(--d, 0s);
}

[data-wheel].is-settled .ent-sol__item-inner {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  [data-wheel] .ent-sol__rings,
  [data-wheel] .ent-sol__ring-fills,
  [data-wheel] .ent-sol__orbits,
  [data-wheel] .ent-sol__item-inner,
  [data-wheel] .ent-sol__core-logo,
  [data-wheel] .ent-sol__wheel-dividers,
  [data-wheel] .ent-sol__arc-labels {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* --------------------------------------------------------------------------
   32. Enterprise wheel – refined HUD detail panel
   -------------------------------------------------------------------------- */
[data-wheel] {
  position: relative;
  --hud-accent: #38bdf8;
  --hud-accent-rgb: 56 189 248;
}

[data-wheel][data-hud-ring="outer"] { --hud-accent: #a78bfa; --hud-accent-rgb: 167 139 250; }
[data-wheel][data-hud-ring="middle"] { --hud-accent: #2dd4bf; --hud-accent-rgb: 45 212 191; }
[data-wheel][data-hud-ring="core"] { --hud-accent: #38bdf8; --hud-accent-rgb: 56 189 248; }

.ent-hud__wire {
  position: absolute;
  inset: 0;
  z-index: 4;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none;
}

.ent-hud__wire polyline {
  fill: none;
  stroke: var(--hud-accent);
  stroke-width: 1;
  stroke-linejoin: round;
  stroke-dasharray: 900;
  stroke-dashoffset: 900;
  opacity: .85;
  transition: stroke-dashoffset 520ms cubic-bezier(.65, 0, .35, 1), stroke 300ms ease;
}

.ent-hud__node {
  fill: #0a1630;
  stroke: var(--hud-accent);
  stroke-width: 1.2;
  opacity: 0;
  transition: opacity 240ms ease, stroke 300ms ease;
}

.ent-hud__node--a {
  fill: var(--hud-accent);
  filter: drop-shadow(0 0 4px rgb(var(--hud-accent-rgb) / 90%));
}

[data-wheel].has-hud .ent-hud__wire polyline { stroke-dashoffset: 0; }
[data-wheel].has-hud .ent-hud__node { opacity: 1; }
[data-wheel].has-hud .ent-hud__node--b { transition-delay: 380ms; }

.ent-hud {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 5;
  width: 17.5rem;
  border-radius: 14px;
  background:
    linear-gradient(160deg, rgb(var(--hud-accent-rgb) / 14%), rgb(var(--hud-accent-rgb) / 0%) 45%),
    rgb(6 16 40 / 86%);
  color: #e6f1ff;
  box-shadow:
    inset 0 0 0 1px rgb(255 255 255 / 7%),
    0 0 0 1px rgb(var(--hud-accent-rgb) / 28%),
    0 18px 48px rgb(0 6 24 / 55%),
    0 0 40px rgb(var(--hud-accent-rgb) / 12%);
  backdrop-filter: blur(14px);
  opacity: 0;
  visibility: hidden;
  transform: translateX(8px);
  transition: opacity 260ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1), visibility 0s linear 420ms, box-shadow 300ms ease;
  pointer-events: auto;
}

[data-wheel].has-hud .ent-hud {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 160ms, 160ms, 0s, 0s;
}

/* Thin HUD corner ticks. */
.ent-hud__tick {
  position: absolute;
  width: 14px;
  height: 14px;
  border-color: var(--hud-accent);
  border-style: solid;
  border-width: 0;
  opacity: .9;
  transition: border-color 300ms ease;
}

.ent-hud__tick--tl { top: -1px; left: -1px; border-top-width: 1.5px; border-left-width: 1.5px; border-top-left-radius: 14px; }
.ent-hud__tick--br { right: -1px; bottom: -1px; border-right-width: 1.5px; border-bottom-width: 1.5px; border-bottom-right-radius: 14px; }

.ent-hud__body {
  padding: 1.15rem 1.25rem 1.1rem;
  transition: opacity 180ms ease, transform 260ms cubic-bezier(.16, 1, .3, 1);
}

.ent-hud.is-swapping .ent-hud__body {
  opacity: 0;
  transform: translateY(4px);
}

.ent-hud__eyebrow {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  margin: 0;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.ent-hud__ring {
  display: inline-flex;
  align-items: center;
  gap: .45rem;
  color: var(--hud-accent);
}

.ent-hud__ring::before {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--hud-accent);
  box-shadow: 0 0 8px rgb(var(--hud-accent-rgb) / 90%);
  content: "";
}

.ent-hud__index {
  color: rgb(230 241 255 / 45%);
  font-variant-numeric: tabular-nums;
}

.ent-hud__title {
  display: block;
  margin-top: .7rem;
  color: #fff;
  font-size: 1.12rem;
  font-weight: 650;
  letter-spacing: -.01em;
  line-height: 1.25;
}

.ent-hud__text {
  margin: .5rem 0 0;
  color: rgb(214 228 250 / 74%);
  font-size: .8rem;
  line-height: 1.6;
}

.ent-hud__tags {
  display: flex;
  flex-wrap: wrap;
  gap: .35rem;
  margin-top: .85rem;
  border-top: 1px solid rgb(255 255 255 / 8%);
  padding-top: .85rem;
}

.ent-hud__tags span {
  border: 1px solid rgb(var(--hud-accent-rgb) / 28%);
  border-radius: 999px;
  background: rgb(var(--hud-accent-rgb) / 8%);
  padding: .2rem .55rem;
  color: rgb(230 241 255 / 86%);
  font-size: .64rem;
  font-weight: 600;
  letter-spacing: .02em;
}

.ent-hud__link {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  margin-top: .95rem;
  color: var(--hud-accent) !important;
  font-size: .75rem;
  font-weight: 700;
  text-decoration: none;
}

.ent-hud__link svg {
  width: .9rem;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 2;
  transition: transform 220ms ease;
}

.ent-hud__link:hover svg {
  transform: translateX(3px);
}

@media (max-width: 48rem) {
  .ent-hud {
    width: min(18rem, calc(100vw - 2rem));
  }
}

/* HUD must float above the solution cards (stacked layouts). */
.ent-sol :has(> [data-wheel].has-hud),
.ent-sol :has([data-wheel].has-hud) {
  z-index: 30;
}

[data-wheel].has-hud {
  z-index: 30;
}

/* Blur only while the panel is visible (no idle compositing cost). */
[data-wheel]:not(.has-hud) .ent-hud {
  backdrop-filter: none;
}

/* HUD centred on the wheel: the core dims behind it. */
.ent-hud {
  width: min(17rem, 56%);
  transform: scale(.94);
  transform-origin: center;
}

[data-wheel].has-hud .ent-sol__wheel-items--inner,
[data-wheel].has-hud .ent-sol__core-logo,
[data-wheel].has-hud .ent-sol__arc-label--inner {
  opacity: .12;
  transition: opacity 300ms ease;
}

.ent-sol__wheel-items--inner,
.ent-sol__core-logo,
.ent-sol__arc-label--inner {
  transition: opacity 300ms ease;
}

.ent-hud__body {
  padding: 1rem 1.1rem .95rem;
}

.ent-hud__title {
  font-size: 1.02rem;
}

.ent-hud__text {
  font-size: .76rem;
}

@media (max-width: 48rem) {
  .ent-hud {
    width: 72%;
  }

  .ent-hud__body {
    padding: .75rem .8rem;
  }

  .ent-hud__title {
    margin-top: .45rem;
    font-size: .9rem;
  }

  .ent-hud__text {
    font-size: .7rem;
    line-height: 1.5;
  }

  .ent-hud__tags {
    margin-top: .55rem;
    padding-top: .55rem;
  }

  .ent-hud__link {
    margin-top: .6rem;
  }
}

@media (min-width: 48.0625rem) {
  .ent-hud {
    width: min(15.5rem, 46%);
  }

  .ent-hud__body {
    padding: .85rem .95rem .8rem;
  }

  .ent-hud__title {
    margin-top: .5rem;
    font-size: .95rem;
  }

  .ent-hud__text {
    font-size: .72rem;
    line-height: 1.5;
  }

  .ent-hud__tags {
    margin-top: .6rem;
    padding-top: .6rem;
  }

  .ent-hud__link {
    margin-top: .65rem;
  }
}

/* Focus: everything except the active item steps back while the panel is open. */
[data-wheel].has-hud .ent-sol__item:not(.is-lit) {
  opacity: .32;
}

[data-wheel] .ent-sol__item {
  transition: opacity 300ms ease;
}

/* --------------------------------------------------------------------------
   33. Wheel HUD v3 – docked detail card, clickable ring titles, live orbits
   -------------------------------------------------------------------------- */
[data-wheel].hud-docked .ent-hud {
  width: min(24rem, 30vw);
  transform: translateY(8px);
  transform-origin: left top;
}

[data-wheel].hud-docked.has-hud .ent-hud {
  transform: none;
}

[data-wheel].hud-docked .ent-hud__body {
  padding: 1.15rem 1.3rem 1.1rem;
}

[data-wheel].hud-docked .ent-hud__title {
  font-size: 1.15rem;
}

[data-wheel].hud-docked .ent-hud__text {
  font-size: .82rem;
  line-height: 1.6;
}

/* Docked: core stays fully visible; no wire, only the item marker. */
[data-wheel].hud-docked.has-hud .ent-sol__wheel-items--inner,
[data-wheel].hud-docked.has-hud .ent-sol__core-logo,
[data-wheel].hud-docked.has-hud .ent-sol__arc-label--inner {
  opacity: 1;
}

[data-wheel].hud-docked.has-hud .ent-sol__item:not(.is-lit) {
  opacity: .5;
}

.ent-hud__wire polyline,
.ent-hud__node--b {
  display: none;
}

/* Ring titles are interactive. */
.ent-sol__arc-label {
  cursor: pointer;
  pointer-events: all;
  transition: fill 240ms ease;
}

.ent-sol__arc-label.is-lit {
  fill: #fff;
}

.ent-sol__sector--label.is-lit {
  opacity: .55;
}

.ent-sol__sector {
  cursor: pointer;
}

/* Orbit markers keep circling even with OS "reduce motion" (decorative, slow). */
@media (prefers-reduced-motion: reduce) {
  .ent-sol__orbit--outer { animation: nessar-orbit 40s linear infinite !important; }
  .ent-sol__orbit--middle { animation: nessar-orbit 30s linear infinite reverse !important; }
  .ent-sol__orbit--inner { animation: nessar-orbit 22s linear infinite !important; }
}

/* --------------------------------------------------------------------------
   34. Wheel scan – soft hand-over between sectors (comet trail)
   Lighting up is quick, fading out is long, so the previous sector is still
   glowing while the next one brightens – no hard switch.
   -------------------------------------------------------------------------- */
.ent-sol__sector {
  transition: opacity 1600ms cubic-bezier(.25, .1, .25, 1);
}

.ent-sol__sector.is-lit {
  transition: opacity 650ms cubic-bezier(.22, 1, .36, 1);
}

.ent-sol__core-quadrant {
  transition: filter 1600ms cubic-bezier(.25, .1, .25, 1), opacity 1600ms ease;
}

.ent-sol__core-quadrant.is-lit {
  transition: filter 650ms cubic-bezier(.22, 1, .36, 1), opacity 650ms ease;
}

[data-wheel].is-settled .ent-sol__item-inner {
  transition:
    transform 1400ms cubic-bezier(.25, .1, .25, 1),
    filter 1600ms cubic-bezier(.25, .1, .25, 1),
    opacity 600ms ease;
}

[data-wheel].is-settled .ent-sol__item.is-lit .ent-sol__item-inner {
  transition:
    transform 700ms cubic-bezier(.22, 1, .36, 1),
    filter 650ms cubic-bezier(.22, 1, .36, 1),
    opacity 600ms ease;
}

.ent-sol__item text {
  transition: fill 1400ms ease;
}

.ent-sol__item.is-lit text {
  transition: fill 600ms ease;
}

.ent-sol__arc-label {
  transition: fill 1400ms ease;
}

.ent-sol__arc-label.is-lit {
  transition: fill 600ms ease;
}

/* Softer, glowier lit state (less "on/off"). */
.ent-sol__item.is-lit .ent-sol__item-inner {
  transform: scale(1.1);
  filter: drop-shadow(0 0 6px rgb(120 240 255 / 70%));
}

/* --------------------------------------------------------------------------
   35. Enterprise section fits one screen under the fixed header
   -------------------------------------------------------------------------- */
@media (min-width: 64.0625rem) {
  .ent-sol {
    padding-top: calc(var(--header-height, 4.6rem) + 1.25rem) !important;
    padding-bottom: 2rem !important;
  }

  .ent-sol__wheel {
    width: clamp(26rem, calc(100svh - 25rem), 36rem) !important;
    justify-self: center;
  }

  .ent-sol__top {
    margin-bottom: 1.5rem !important;
  }
}

/* Reading-progress line under the header removed (client request). */
.scroll-progress {
  display: none !important;
}

/* Desktop: intro copy steps aside while the detail card is shown in its place. */
.ent-sol__copy {
  transition: opacity 320ms ease, transform 420ms cubic-bezier(.16, 1, .3, 1), filter 320ms ease;
}

.ent-sol.is-hud-open .ent-sol__copy {
  opacity: 0;
  filter: blur(4px);
  transform: translateX(-12px);
  pointer-events: none;
}

[data-wheel].hud-docked .ent-hud {
  width: min(26rem, 32vw);
}

.ent-sol.is-hud-open .ent-sol__copy {
  opacity: 0 !important;
  filter: blur(4px) !important;
  transform: translateX(-12px) !important;
}

/* Detail panel switched off: no "clickable" cursor on the wheel. */
[data-wheel]:not([data-hud]) .ent-sol__sector,
[data-wheel]:not([data-hud]) .ent-sol__arc-label {
  cursor: default;
}

/* --------------------------------------------------------------------------
   36. Vendor logo chips – optical sizing (equal visual weight)
   -------------------------------------------------------------------------- */
.legacy-products__vendor-grid .legacy-products__vendor-logo,
.hero-slider .hero-slider__partner {
  display: flex !important;
  align-items: center;
  justify-content: center;
  aspect-ratio: 3.4 / 1;
  min-height: 0 !important;
  padding: 0 !important;
}

.legacy-products__vendor-grid .legacy-products__vendor-logo img,
.hero-slider .hero-slider__partner img {
  width: calc(var(--logo-w, 78%) * .86) !important;
  max-width: 86% !important;
  height: auto !important;
  max-height: 64% !important;
  object-fit: contain;
  transform: none !important;
}

/* Last row centred (8 per row grid already uses flex-wrap + center). */
.legacy-products__vendor-grid {
  justify-content: center !important;
}

/* --------------------------------------------------------------------------
   37. "Nessar in numbers" – light, highlighted stat cards
   -------------------------------------------------------------------------- */
.legacy-performance--light {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(40rem 22rem at 10% 0%, rgb(36 200 237 / 16%), transparent 70%),
    radial-gradient(36rem 22rem at 95% 100%, rgb(8 104 242 / 12%), transparent 70%),
    linear-gradient(180deg, #f5f9ff 0%, #eaf2ff 100%) !important;
  padding-block: clamp(4rem, 7vw, 6.5rem) !important;
}

.legacy-performance--light::before {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(90deg, rgb(8 104 242 / 5%) 1px, transparent 1px),
    linear-gradient(0deg, rgb(8 104 242 / 5%) 1px, transparent 1px);
  background-size: 56px 56px;
  content: "";
  mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%);
  pointer-events: none;
}

.legacy-performance--light .container-shell {
  position: relative;
}

.legacy-performance__head {
  max-width: 46rem;
  margin: 0 auto clamp(2.25rem, 4vw, 3.25rem);
  text-align: center;
}

.legacy-performance__eyebrow {
  margin: 0 0 .75rem;
  color: var(--color-brand, #0868f2);
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .16em;
  text-transform: uppercase;
}

.legacy-performance__title {
  margin: 0;
  color: var(--color-ink, #06142f);
  font-size: clamp(1.8rem, 3vw, 2.7rem);
  font-weight: 600;
  letter-spacing: -.02em;
  line-height: 1.15;
}

.legacy-performance__title span {
  background: linear-gradient(90deg, #0868f2, #24c8ed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

.legacy-performance--light .legacy-performance__intro {
  margin: 1rem auto 0 !important;
  color: rgb(6 20 47 / 64%) !important;
  font-size: clamp(.95rem, 1.1vw, 1.05rem);
  line-height: 1.6;
}

.legacy-performance--light .legacy-performance__card {
  position: relative;
  display: flex;
  min-height: 0;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1rem;
  background: rgb(255 255 255 / 88%);
  padding: clamp(1.4rem, 2vw, 1.9rem);
  box-shadow: 0 1.2rem 2.6rem rgb(8 50 120 / 8%);
  transition: transform 320ms cubic-bezier(.16, 1, .3, 1), box-shadow 320ms ease, border-color 320ms ease;
}

/* Gradient accent bar on top. */
.legacy-performance--light .legacy-performance__card::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  height: 3px;
  background: linear-gradient(90deg, #0868f2, #24c8ed);
  content: "";
  transform: scaleX(.25);
  transform-origin: left;
  transition: transform 420ms cubic-bezier(.16, 1, .3, 1);
}

/* Soft glow blob in the corner. */
.legacy-performance--light .legacy-performance__card::after {
  position: absolute;
  top: -40%;
  right: -30%;
  width: 70%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(circle, rgb(36 200 237 / 18%), transparent 70%);
  content: "";
  transition: transform 500ms cubic-bezier(.16, 1, .3, 1);
  pointer-events: none;
}

.legacy-performance--light .legacy-performance__card:hover {
  border-color: rgb(8 104 242 / 28%);
  box-shadow: 0 1.6rem 3.2rem rgb(8 80 200 / 16%);
  transform: translateY(-6px);
}

.legacy-performance--light .legacy-performance__card:hover::before {
  transform: scaleX(1);
}

.legacy-performance--light .legacy-performance__card:hover::after {
  transform: scale(1.3);
}

.legacy-performance__icon {
  display: inline-grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  border-radius: .85rem;
  background: linear-gradient(135deg, #0868f2, #24c8ed);
  box-shadow: 0 .6rem 1.4rem rgb(8 104 242 / 30%);
}

.legacy-performance__icon svg {
  width: 1.4rem;
  fill: none;
  stroke: #fff;
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.8;
}

.legacy-performance__index {
  position: absolute;
  top: clamp(1.4rem, 2vw, 1.9rem);
  right: clamp(1.4rem, 2vw, 1.9rem);
  color: rgb(8 104 242 / 22%);
  font-size: .85rem;
  font-weight: 700;
  letter-spacing: .08em;
}

.legacy-performance--light .legacy-performance__card strong {
  margin-top: 1.4rem;
  background: linear-gradient(135deg, #06142f 10%, #0868f2 70%, #24c8ed);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent !important;
  font-size: clamp(2.8rem, 4.2vw, 4.3rem) !important;
  font-weight: 600 !important;
  font-variant-numeric: tabular-nums;
  letter-spacing: -.03em;
  line-height: 1 !important;
  text-shadow: none !important;
}

.legacy-performance--light .legacy-performance__label {
  margin-top: .75rem !important;
  color: var(--color-ink, #06142f) !important;
  font-size: clamp(.95rem, 1.1vw, 1.08rem) !important;
  font-weight: 650 !important;
}

.legacy-performance--light .legacy-performance__card small {
  margin-top: .35rem;
  color: rgb(6 20 47 / 55%);
  font-size: .82rem;
}

.legacy-performance--light .legacy-performance__card i {
  display: none;
}

.legacy-performance__icon svg {
  display: block;
  width: 1.4rem !important;
  height: 1.4rem !important;
}

@media (max-width: 40rem) {
  .legacy-performance--light .legacy-performance__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: .7rem !important;
  }

  .legacy-performance--light .legacy-performance__card {
    padding: 1rem;
  }

  .legacy-performance__icon {
    width: 2.4rem;
    height: 2.4rem;
    border-radius: .7rem;
  }

  .legacy-performance__icon svg {
    width: 1.15rem !important;
    height: 1.15rem !important;
  }

  .legacy-performance__index {
    top: 1rem;
    right: 1rem;
  }

  .legacy-performance--light .legacy-performance__card strong {
    margin-top: .9rem;
    font-size: 2.2rem !important;
  }

  .legacy-performance--light .legacy-performance__label {
    margin-top: .45rem !important;
    font-size: .85rem !important;
  }

  .legacy-performance--light .legacy-performance__card small {
    font-size: .72rem;
  }
}

.legacy-performance--light .legacy-performance__icon {
  display: grid !important;
  flex: none;
  place-items: center;
}

/* Stats: understated line icons (no glossy tiles). */
.legacy-performance--light .legacy-performance__icon {
  position: absolute;
  top: clamp(1.4rem, 2vw, 1.9rem);
  right: clamp(1.4rem, 2vw, 1.9rem);
  width: auto !important;
  height: auto !important;
  border-radius: 0;
  background: none !important;
  box-shadow: none !important;
}

.legacy-performance--light .legacy-performance__icon svg {
  width: 1.6rem !important;
  height: 1.6rem !important;
  stroke: rgb(8 104 242 / 45%);
  stroke-width: 1.4;
  transition: stroke 300ms ease;
}

.legacy-performance--light .legacy-performance__card:hover .legacy-performance__icon svg {
  stroke: var(--color-brand, #0868f2);
}

/* Index moves to the top-left as a quiet label. */
.legacy-performance--light .legacy-performance__index {
  position: static;
  color: var(--color-brand, #0868f2);
  font-size: .75rem;
  letter-spacing: .14em;
}

.legacy-performance--light .legacy-performance__card strong {
  margin-top: 1.1rem;
}

@media (max-width: 40rem) {
  .legacy-performance--light .legacy-performance__icon {
    top: 1rem;
    right: 1rem;
  }

  .legacy-performance--light .legacy-performance__icon svg {
    width: 1.3rem !important;
    height: 1.3rem !important;
  }

  .legacy-performance--light .legacy-performance__card strong {
    margin-top: .8rem;
  }
}

/* --------------------------------------------------------------------------
   38. Stats v3 – one clean band, hairline dividers, big numbers (no icons)
   -------------------------------------------------------------------------- */
.legacy-performance--light .legacy-performance__band {
  position: relative;
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  gap: 0 !important;
  overflow: hidden;
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1.25rem;
  background: rgb(255 255 255 / 78%);
  box-shadow: 0 2rem 4rem rgb(8 50 120 / 8%), inset 0 1px 0 #fff;
  backdrop-filter: blur(6px);
}

/* Light line that sweeps across the bottom once the numbers have counted. */
.legacy-performance--light .legacy-performance__band::after {
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent, #0868f2 30%, #24c8ed 70%, transparent);
  content: "";
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 1.6s cubic-bezier(.16, 1, .3, 1) .3s;
}

.legacy-performance--light .legacy-performance__band.is-visible::after,
.legacy-performance--light .legacy-performance__band.is-revealed::after,
.legacy-performance--light .legacy-performance__band[data-revealed]::after {
  transform: scaleX(1);
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card {
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  padding: clamp(1.8rem, 3vw, 2.8rem) clamp(1.4rem, 2.4vw, 2.4rem) !important;
  box-shadow: none !important;
  transform: none !important;
  transition: background-color 300ms ease !important;
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card + .legacy-performance__card {
  border-left: 1px solid rgb(8 104 242 / 10%) !important;
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card::after {
  display: none !important;
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card::before {
  height: 2px;
  transform: scaleX(0);
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card:hover {
  background: rgb(8 104 242 / 3%) !important;
}

.legacy-performance--light .legacy-performance__band .legacy-performance__card:hover::before {
  transform: scaleX(1);
}

.legacy-performance--light .legacy-performance__band strong {
  margin-top: 0 !important;
  font-size: clamp(3rem, 5vw, 4.8rem) !important;
  font-weight: 500 !important;
  letter-spacing: -.045em !important;
}

.legacy-performance--light .legacy-performance__band .legacy-performance__label {
  margin-top: 1rem !important;
  font-size: clamp(.95rem, 1.05vw, 1.05rem) !important;
  font-weight: 600 !important;
}

.legacy-performance--light .legacy-performance__band small {
  margin-top: .3rem;
  font-size: .85rem;
}

@media (max-width: 64rem) {
  .legacy-performance--light .legacy-performance__band {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .legacy-performance--light .legacy-performance__band .legacy-performance__card:nth-child(3) {
    border-left: 0 !important;
  }

  .legacy-performance--light .legacy-performance__band .legacy-performance__card:nth-child(n + 3) {
    border-top: 1px solid rgb(8 104 242 / 10%) !important;
  }
}

@media (max-width: 40rem) {
  .legacy-performance--light .legacy-performance__band .legacy-performance__card {
    padding: 1.3rem 1.1rem !important;
  }

  .legacy-performance--light .legacy-performance__band strong {
    font-size: 2.4rem !important;
  }

  .legacy-performance--light .legacy-performance__band .legacy-performance__label {
    margin-top: .5rem !important;
    font-size: .88rem !important;
  }

  .legacy-performance--light .legacy-performance__band small {
    font-size: .72rem;
  }
}

/* --------------------------------------------------------------------------
   39. Products archive hero – trial: city skyline backdrop (same as About).
   Revert = delete this block (previous artwork: bg-hero-sanpham.webp).
   -------------------------------------------------------------------------- */
body.nessar-product-archive main#main::before,
body.tax-product_cat main#main::before {
  background:
    linear-gradient(90deg, rgb(1 12 38 / 94%) 0%, rgb(1 12 38 / 78%) 32%, rgb(1 12 38 / 50%) 62%, rgb(1 12 38 / 60%) 100%),
    linear-gradient(180deg, rgb(1 12 38 / 55%) 0%, rgb(1 12 38 / 0%) 30%, rgb(1 12 38 / 10%) 70%, rgb(1 12 38 / 75%) 100%),
    url("../images/home/ent-sol-bg.webp") 30% 15% / cover no-repeat,
    #010c26;
}

@media (max-width: 48rem) {
  body.nessar-product-archive main#main::before,
  body.tax-product_cat main#main::before {
    background:
      linear-gradient(180deg, rgb(1 12 38 / 84%) 0%, rgb(1 12 38 / 70%) 55%, rgb(1 12 38 / 88%) 100%),
      url("../images/home/ent-sol-bg.webp") 55% 25% / cover no-repeat,
      #010c26;
  }
}

/* --------------------------------------------------------------------------
   40. City skyline hero on every inner page (archives + regular pages)
   -------------------------------------------------------------------------- */
body.nessar-unified-archive main#main {
  position: relative;
  isolation: isolate;
}

body.nessar-unified-archive main#main::before {
  position: absolute;
  top: 0;
  right: 0;
  left: 0;
  z-index: -1;
  height: var(--archive-band, 36.5rem);
  background:
    linear-gradient(90deg, rgb(1 12 38 / 94%) 0%, rgb(1 12 38 / 78%) 32%, rgb(1 12 38 / 50%) 62%, rgb(1 12 38 / 60%) 100%),
    linear-gradient(180deg, rgb(1 12 38 / 55%) 0%, rgb(1 12 38 / 0%) 30%, rgb(1 12 38 / 10%) 70%, rgb(1 12 38 / 75%) 100%),
    url("../images/home/ent-sol-bg.webp") 30% 15% / cover no-repeat,
    #010c26;
  content: "";
  pointer-events: none;
}

body.nessar-unified-archive .inner-hero {
  background: transparent !important;
}

body.nessar-unified-archive .inner-hero::before,
body.nessar-unified-archive .inner-hero::after {
  display: none !important;
}

body.nessar-unified-archive .inner-section {
  background: linear-gradient(180deg, transparent 0, transparent 19rem, #edf4fb 19rem, #f6faff 100%) !important;
}

/* Regular pages (contact, search, single…): skyline directly on the hero. */
body:not(.nessar-unified-archive):not(.tax-product_cat) .inner-hero:not(.inner-hero--about) {
  background:
    linear-gradient(90deg, rgb(1 12 38 / 94%) 0%, rgb(1 12 38 / 78%) 32%, rgb(1 12 38 / 50%) 62%, rgb(1 12 38 / 60%) 100%),
    linear-gradient(180deg, rgb(1 12 38 / 55%) 0%, rgb(1 12 38 / 0%) 35%, rgb(1 12 38 / 70%) 100%),
    url("../images/home/ent-sol-bg.webp") 30% 15% / cover no-repeat,
    #010c26 !important;
}

body:not(.nessar-unified-archive):not(.tax-product_cat) .inner-hero:not(.inner-hero--about)::before,
body:not(.nessar-unified-archive):not(.tax-product_cat) .inner-hero:not(.inner-hero--about)::after {
  display: none !important;
}

@media (max-width: 48rem) {
  body.nessar-unified-archive main#main::before,
  body:not(.nessar-unified-archive):not(.tax-product_cat) .inner-hero:not(.inner-hero--about) {
    background:
      linear-gradient(180deg, rgb(1 12 38 / 84%) 0%, rgb(1 12 38 / 70%) 55%, rgb(1 12 38 / 88%) 100%),
      url("../images/home/ent-sol-bg.webp") 55% 25% / cover no-repeat,
      #010c26 !important;
  }
}

/* --------------------------------------------------------------------------
   41. Contact page v2 – aligned two-column layout, map at the end
   -------------------------------------------------------------------------- */
/* Hero matches the other inner pages. */
body.page-template-contact .inner-hero__eyebrow {
  display: none !important;
}

body.page-template-contact .inner-hero h1 {
  color: #fff;
  font-size: clamp(2.28rem, 3.05vw, 3.25rem) !important;
  font-weight: 500 !important;
  letter-spacing: 0 !important;
  line-height: 1.12 !important;
}

body.page-template-contact .inner-hero__description {
  max-width: 42rem;
  color: rgb(255 255 255 / 82%) !important;
  font-size: clamp(1rem, 1.2vw, 1.08rem) !important;
}

.contact-page--v2 {
  background: linear-gradient(180deg, #edf4fb 0%, #f6faff 100%);
  padding-block: clamp(2.5rem, 5vw, 4.5rem) clamp(3rem, 6vw, 5rem);
}

.contact-v2 {
  display: grid;
  grid-template-columns: minmax(0, .9fr) minmax(0, 1.25fr);
  align-items: start;
  gap: clamp(1.25rem, 3vw, 2.5rem);
}

.contact-v2__info {
  display: grid;
  gap: 1rem;
}

.contact-v2__intro {
  position: relative;
  overflow: hidden;
  border-radius: 1rem;
  background:
    radial-gradient(22rem 14rem at 100% 0%, rgb(36 200 237 / 20%), transparent 70%),
    linear-gradient(145deg, #0a3a86, #041c4a);
  padding: clamp(1.5rem, 2.4vw, 2rem);
  color: #fff;
}

.contact-v2__intro h2 {
  margin: .4rem 0 .6rem;
  color: #fff;
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 650;
  letter-spacing: -.01em;
}

.contact-v2__intro p:not(.contact-page__eyebrow) {
  margin: 0;
  color: rgb(226 238 255 / 80%);
  font-size: .95rem;
  line-height: 1.65;
}

.contact-v2__channels {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1rem;
}

.contact-v2__channel {
  display: flex;
  align-items: center;
  gap: .8rem;
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1rem;
  background: #fff;
  padding: 1rem 1.1rem;
  color: var(--color-ink, #06142f);
  text-decoration: none;
  box-shadow: 0 .8rem 1.8rem rgb(8 50 120 / 6%);
  transition: border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}

.contact-v2__channel:hover {
  border-color: rgb(8 104 242 / 35%);
  box-shadow: 0 1rem 2.2rem rgb(8 80 200 / 12%);
  transform: translateY(-2px);
}

.contact-v2__channel-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: .7rem;
  background: rgb(8 104 242 / 8%);
}

.contact-v2__channel-icon svg {
  width: 1.2rem;
  height: 1.2rem;
  fill: none;
  stroke: var(--color-brand, #0868f2);
  stroke-linecap: round;
  stroke-linejoin: round;
  stroke-width: 1.7;
}

.contact-v2__channel small {
  display: block;
  color: rgb(6 20 47 / 55%);
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.contact-v2__channel strong {
  display: block;
  margin-top: .1rem;
  font-size: .95rem;
  font-weight: 650;
  white-space: nowrap;
}

.contact-v2__offices {
  display: grid;
  gap: 1rem;
}

.contact-v2__office {
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1rem;
  background: #fff;
  padding: 1.15rem 1.25rem;
  box-shadow: 0 .8rem 1.8rem rgb(8 50 120 / 6%);
}

.contact-v2__office h3 {
  margin: 0;
  color: var(--color-ink, #06142f);
  font-size: 1.02rem;
  font-weight: 650;
}

.contact-v2__office p {
  margin: .4rem 0 .6rem;
  color: rgb(6 20 47 / 68%);
  font-size: .9rem;
  line-height: 1.55;
}

.contact-v2__office a {
  color: var(--color-brand, #0868f2);
  font-size: .82rem;
  font-weight: 700;
  text-decoration: none;
}

.contact-v2__form {
  margin: 0 !important;
  border-radius: 1rem !important;
}

.contact-v2__map {
  overflow: hidden;
  height: clamp(18rem, 32vw, 24rem);
  margin-top: clamp(2rem, 4vw, 3rem);
  border: 1px solid rgb(8 104 242 / 12%);
  border-radius: 1rem;
  box-shadow: 0 1rem 2.4rem rgb(8 50 120 / 8%);
}

.contact-v2__map iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
  filter: saturate(.85);
}

@media (max-width: 64rem) {
  .contact-v2 {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 30rem) {
  .contact-v2__channels {
    grid-template-columns: 1fr;
  }
}

/* 42. Header "Contact Expert" – one solid look on every page and header state. */
html body .site-header a.header-cta,
html body .site-header a.header-cta.is-light {
  border: 1px solid rgb(36 200 237 / 70%);
  background: linear-gradient(135deg, #0870f0, #0346a8);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 1px rgb(255 255 255 / 14%), 0 .35rem .9rem rgb(3 50 130 / 22%);
  opacity: 1;
}

html body .site-header a.header-cta:hover,
html body .site-header a.header-cta:focus-visible {
  border-color: var(--color-cyan);
  background: linear-gradient(135deg, #0a7cff, #0752ba);
  color: #fff;
}

/* 43. Country chips – raised "cards" so the distribution level stands out. */
@media (min-width: 64.0625rem) {
  .mega-menu__countries {
    gap: .55rem;
    padding: .2rem .15rem .9rem;
  }

  .mega-menu__country {
    min-height: 2.35rem;
    border: 1px solid rgb(8 104 242 / 16%);
    background: linear-gradient(180deg, #fff 0%, #f3f8ff 100%);
    padding: .35rem .8rem .35rem .45rem;
    box-shadow:
      0 1px 0 rgb(255 255 255 / 90%) inset,
      0 .15rem .35rem rgb(6 20 47 / 7%),
      0 .45rem 1rem rgb(8 60 150 / 10%);
  }

  .mega-menu__country:hover {
    border-color: rgb(8 104 242 / 42%);
    background: #fff;
    box-shadow:
      0 1px 0 rgb(255 255 255 / 90%) inset,
      0 .3rem .6rem rgb(6 20 47 / 9%),
      0 .7rem 1.4rem rgb(8 104 242 / 18%);
    transform: translateY(-2px);
  }

  .mega-menu__country.is-active {
    border-color: rgb(36 200 237 / 60%);
    background: linear-gradient(135deg, #0a78ff 0%, #0868f2 45%, #0a3fa8 100%);
    box-shadow:
      0 1px 0 rgb(255 255 255 / 25%) inset,
      0 .55rem 1.3rem rgb(8 104 242 / 38%),
      0 0 0 3px rgb(36 200 237 / 18%);
    transform: translateY(-2px);
  }

  .mega-menu__country-flag {
    width: 1.45rem;
    box-shadow: 0 0 0 1px rgb(6 20 47 / 12%), 0 1px 3px rgb(6 20 47 / 18%);
  }
}

/* Keep the products menu the same height whichever country is picked. */
@media (min-width: 64.0625rem) {
  .mega-menu--vendors .mega-menu__vendors:has(.mega-menu__countries) {
    min-height: 32rem;
  }
}

/* 44. Country chips – stronger, more prominent (client: "nổi lên nữa"). */
@media (min-width: 64.0625rem) {
  .mega-menu__countries {
    gap: .65rem;
    margin-bottom: 1rem;
    border: 1px solid rgb(8 104 242 / 14%);
    border-radius: .9rem;
    background: linear-gradient(180deg, rgb(232 242 255 / 95%), rgb(214 232 255 / 85%));
    padding: .65rem .8rem;
    box-shadow: inset 0 1px 0 #fff, 0 .4rem 1.2rem rgb(8 60 150 / 10%);
  }

  .mega-menu__countries-label {
    color: #0a3fa8;
    font-size: .66rem;
    font-weight: 800;
  }

  .mega-menu__country {
    min-height: 2.7rem;
    border: 1.5px solid rgb(8 104 242 / 28%);
    background: linear-gradient(180deg, #fff 0%, #eef5ff 100%);
    padding: .4rem .95rem .4rem .5rem;
    color: #06142f;
    font-size: .8rem;
    font-weight: 700;
    box-shadow:
      inset 0 1px 0 #fff,
      0 .2rem .4rem rgb(6 20 47 / 10%),
      0 .6rem 1.3rem rgb(8 60 150 / 16%);
  }

  .mega-menu__country:hover {
    border-color: #0868f2;
    background: #fff;
    box-shadow:
      inset 0 1px 0 #fff,
      0 .35rem .7rem rgb(6 20 47 / 12%),
      0 .9rem 1.8rem rgb(8 104 242 / 26%);
    transform: translateY(-3px);
  }

  .mega-menu__country.is-active {
    border-color: #24c8ed;
    background: linear-gradient(135deg, #1a86ff 0%, #0868f2 45%, #0a3fa8 100%);
    color: #fff;
    box-shadow:
      inset 0 1px 0 rgb(255 255 255 / 30%),
      0 .7rem 1.6rem rgb(8 104 242 / 45%),
      0 0 0 4px rgb(36 200 237 / 22%);
    transform: translateY(-3px);
  }

  .mega-menu__country-flag {
    width: 1.75rem;
    border-radius: .25rem;
  }

  .mega-menu__country-count {
    min-width: 1.4rem;
    background: #0868f2;
    padding: .22rem .42rem;
    color: #fff;
    font-size: .66rem;
  }

  .mega-menu__country.is-active .mega-menu__country-count {
    background: #fff;
    color: #0868f2;
  }

  .mega-menu--vendors .mega-menu__panel {
    top: 4.9rem;
  }
}

/* 45. Home solution cards are real links (open in new tab via right-click). */
a.ent-sol__card,
a.ent-sol__card:hover,
a.ent-sol__card:focus-visible {
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}

a.ent-sol__card:focus-visible {
  outline: 2px solid #24c8ed;
  outline-offset: 3px;
}

/* 46. "Nessar Products" logo grid: 37 vendors in 4 rows (10 per row) on desktop. */
@media (min-width: 64.0625rem) {
  .legacy-products__vendor-grid .legacy-products__vendor-logo {
    width: calc((100% - 5.85rem) / 10);
    flex: 0 0 calc((100% - 5.85rem) / 10);
  }
}

/* 47. Customer & partner logos: white tiles, optical sizing (equal visual weight). */
html body .legacy-customers .legacy-customers__card img.is-brand-color {
  width: var(--logo-w, 70%) !important;
  max-width: 90% !important;
  height: auto !important;
  max-height: 4.4rem !important;
  object-fit: contain;
  filter: none !important;
  transform: none !important;
}

@media (max-width: 48rem) {
  html body .legacy-customers .legacy-customers__card img.is-brand-color {
    max-height: 3.2rem !important;
  }
}

/* 48. Archive "Xem thêm" (load more) button replaces numbered pagination. */
.inner-pagination--more {
  gap: 0.85rem;
}

.inner-pagination--more .inner-pagination__summary strong {
  color: #06142f;
}

.inner-load-more {
  display: inline-flex;
  min-height: 3rem;
  align-items: center;
  justify-content: center;
  gap: 0.6rem;
  border-radius: 999px;
  background: #0868f2;
  padding: 0 1.15rem 0 1.6rem;
  color: #fff;
  font-size: 0.95rem;
  font-weight: 850;
  line-height: 1;
  box-shadow: 0 0.6rem 1.2rem rgb(8 104 242 / 22%);
  transition: background-color 180ms ease, transform 180ms ease, box-shadow 180ms ease;
}

.inner-load-more:hover,
.inner-load-more:focus-visible {
  background: #06142f;
  color: #fff;
  transform: translateY(-0.1rem);
  box-shadow: 0 0.8rem 1.4rem rgb(6 20 47 / 22%);
}

.inner-load-more__icon {
  display: grid;
  width: 1.75rem;
  height: 1.75rem;
  place-items: center;
  border-radius: 999px;
  background: rgb(255 255 255 / 18%);
}

.inner-load-more.is-loading {
  pointer-events: none;
  opacity: 0.75;
}

.inner-load-more.is-loading .inner-load-more__icon svg {
  animation: inner-load-more-bounce 700ms ease-in-out infinite;
}

@keyframes inner-load-more-bounce {
  50% { transform: translateY(3px); }
}

.inner-card-grid > .is-appended {
  animation: inner-card-rise 560ms cubic-bezier(0.22, 1, 0.36, 1) var(--append-delay, 0ms) both;
}

/* 49. Bottom CTA: same pill CTA system as the sections above; headline breaks
       only between sentences (2 on line 1, 1 on line 2). */
.legacy-cta .legacy-cta__title {
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: .08em;
  max-width: none !important;
  text-wrap: initial !important;
}

.legacy-cta .legacy-cta__line {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  column-gap: .28em;
}

.legacy-cta .legacy-cta__sentence {
  white-space: nowrap;
}

.legacy-cta .legacy-cta__actions {
  gap: .85rem !important;
  margin-top: 2rem !important;
}

.legacy-cta .legacy-cta__actions .button {
  min-width: 0 !important;
  min-height: 3.1rem !important;
  gap: .55rem;
  border-radius: 999px !important;
  padding: 0 1.6rem !important;
  font-size: .9rem !important;
  font-weight: 650 !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  transition: transform 180ms ease, box-shadow 180ms ease, background-color 180ms ease, border-color 180ms ease;
}

.legacy-cta .legacy-cta__actions .button-primary {
  border: 0 !important;
  background: linear-gradient(135deg, #5fe3ff 0%, #24c8ed 45%, #ffffff 140%) !important;
  color: #001a48 !important;
  box-shadow: 0 .6rem 1.6rem rgb(36 200 237 / 34%), inset 0 1px 0 rgb(255 255 255 / 60%) !important;
}

.legacy-cta .legacy-cta__actions .button-primary:hover,
.legacy-cta .legacy-cta__actions .button-primary:focus-visible {
  background: linear-gradient(135deg, #5fe3ff 0%, #24c8ed 45%, #ffffff 140%) !important;
  box-shadow: 0 .9rem 2.2rem rgb(36 200 237 / 48%), inset 0 1px 0 rgb(255 255 255 / 70%) !important;
  transform: translateY(-2px);
}

.legacy-cta .legacy-cta__actions .button-ghost {
  border: 1.5px solid rgb(95 227 255 / 75%) !important;
  background: rgb(36 200 237 / 8%) !important;
  color: #fff !important;
  box-shadow: 0 0 .9rem rgb(36 200 237 / 26%), inset 0 0 .8rem rgb(36 200 237 / 10%) !important;
}

.legacy-cta .legacy-cta__actions .button-ghost:hover,
.legacy-cta .legacy-cta__actions .button-ghost:focus-visible {
  border-color: #5fe3ff !important;
  background: rgb(36 200 237 / 16%) !important;
  color: #fff !important;
  transform: translateY(-2px);
}

@media (max-width: 48rem) {
  /* Phones: one sentence per line, still never broken inside a sentence. */
  .legacy-cta .legacy-cta__line {
    flex-direction: column;
    align-items: center;
  }

  html body .legacy-cta .legacy-cta__inner h2 {
    font-size: clamp(1.45rem, 6.6vw, 2.1rem) !important;
  }
}

/* 50. World map: Sweden (Stockholm) pin. */
.legacy-global .pin-sweden { left: 53.6%; top: 28.6%; --pulse-delay: -1.1s; --pulse-duration: 4.2s; }
.legacy-global .pin-sweden b { top: 50%; }

/* 51. Partner logo strip pauses while hovered / focused (client request). */
.hero-slider__partner-marquee:hover .hero-slider__partner-track,
.hero-slider__partner-marquee:focus-within .hero-slider__partner-track {
  -webkit-animation-play-state: paused !important;
  animation-play-state: paused !important;
}

/* ==========================================================================
   Client review round 3 (slides 33–46)
   ========================================================================== */

/* 52. Homepage customers: smaller logos, 8 tiles per row (slide 37). */
@media (min-width: 72.0625rem) {
  html body .legacy-customers:not(.legacy-partners) .legacy-customers__grid {
    width: 100% !important;
    grid-template-columns: repeat(8, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  html body .legacy-customers:not(.legacy-partners) .legacy-customers__card {
    min-height: 5.6rem !important;
    padding: .7rem !important;
    border-radius: .75rem !important;
  }

  html body .legacy-customers:not(.legacy-partners) .legacy-customers__card img.is-brand-color {
    max-height: 2.9rem !important;
  }
}

@media (min-width: 48.0625rem) and (max-width: 72rem) {
  html body .legacy-customers:not(.legacy-partners) .legacy-customers__grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: .75rem !important;
  }

  html body .legacy-customers:not(.legacy-partners) .legacy-customers__card {
    min-height: 6rem !important;
  }
}

/* 53. "Nessar Products" logo grid: 36 vendors in 2 rows of 18 (slide 44). */
@media (min-width: 64.0625rem) {
  html body .legacy-products__vendor-grid {
    gap: .4rem !important;
  }

  html body .legacy-products__vendor-grid .legacy-products__vendor-logo {
    width: calc((100% - 6.8rem) / 18) !important;
    flex: 0 0 calc((100% - 6.8rem) / 18) !important;
    min-width: 0 !important;
  }
}

/* 54. Homepage projects: compact cards, 6 per row (slide 45); news: see below. */
@media (min-width: 72.0625rem) {
  html body .legacy-projects .legacy-project-track {
    --project-card-gap: 1rem;
  }

  html body .legacy-projects .legacy-project-track .legacy-project-card {
    flex: 0 0 calc((100% - 5 * var(--project-card-gap)) / 6) !important;
    min-height: 0 !important;
    border-radius: .75rem !important;
  }

  html body .legacy-projects .legacy-project-card__body {
    gap: .45rem !important;
    padding: .8rem .8rem .9rem !important;
  }

  html body .legacy-projects .legacy-project-track .legacy-project-card h3 {
    font-size: .88rem !important;
    line-height: 1.3 !important;
  }

  html body .legacy-projects .legacy-project-track .legacy-project-card p {
    font-size: .74rem !important;
    line-height: 1.45 !important;
    -webkit-line-clamp: 3;
  }

  html body .legacy-projects .legacy-project-card__category {
    font-size: .62rem !important;
  }

  html body .legacy-projects .legacy-project-track .legacy-project-card dl {
    font-size: .7rem !important;
  }

  /* Homepage news keeps 4 per row, slightly smaller cards, 3 rows = 12 posts (slide 35). */
  html body .legacy-news-grid {
    --news-card-gap: 1.5rem;
    width: 88% !important;
    margin-inline: auto !important;
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
  }

  html body .legacy-news-card,
  html body .legacy-news-card.is-lead,
  html body .legacy-news-card.is-featured {
    min-height: 0 !important;
  }

  html body .legacy-news .legacy-news-grid .legacy-news-card.is-lead .legacy-news-card__body,
  html body .legacy-news-card .legacy-news-card__body {
    padding: .75rem .8rem .85rem !important;
    gap: .35rem !important;
  }

  html body .legacy-news .legacy-news-grid .legacy-news-card.is-lead .legacy-news-card__body > strong,
  html body .legacy-news-card .legacy-news-card__body > strong {
    font-size: .95rem !important;
    line-height: 1.32 !important;
  }

  html body .legacy-news-card .legacy-news-card__body > span:not(.legacy-news-card__meta):not(.legacy-news-card__category) {
    font-size: .72rem !important;
    line-height: 1.45 !important;
  }

  html body .legacy-news-card .legacy-news-card__meta {
    font-size: .64rem !important;
  }
}

/* 55. Archive listings (news and the other tabs): compact cards, 6 per row (slide 35). */
@media (min-width: 80rem) {
  html body.nessar-card-catalog .inner-card-grid {
    grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
    gap: 1rem !important;
  }
}

@media (min-width: 80rem) {
  html body.nessar-card-catalog .inner-card-grid .inner-card__title {
    display: -webkit-box !important;
    overflow: hidden !important;
    max-height: 2.5em !important;
    padding-bottom: 0 !important;
    font-size: .95rem !important;
    line-height: 1.25 !important;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
  }
}

/* 56. Home hero: official Nessar mark, tightly cropped artwork (slide 39). */
html body .hero-holo .hero-holo__mark {
  width: 27% !important;
  height: auto !important;
}

/* 57. Enterprise wheel: larger diagram, mark on a dark disc (slide 38). */
.ent-sol__core-disc {
  fill: #020b26;
  stroke: rgb(36 200 237 / 55%);
  stroke-width: 1.2;
  filter: drop-shadow(0 0 6px rgb(36 200 237 / 45%));
}

[data-wheel].has-hud .ent-sol__core-logo {
  opacity: 1 !important;
}

@media (min-width: 64.0625rem) {
  html body .ent-sol .ent-sol__wheel {
    width: clamp(28rem, calc(100svh - 21rem), 40rem) !important;
  }

  html body .ent-sol .ent-sol__top {
    margin-bottom: 1rem !important;
  }
}

/* 58. About hero: official mark in the orbit core (tight-cropped artwork). */
html body .about-hero__core img {
  width: 58% !important;
  height: auto !important;
}

/* 59. News mega menu: category list + panel with the 3 latest posts (slide 40). */
@media (min-width: 64.0625rem) {
  .mega-menu--news .mega-menu__posts {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: .9rem !important;
    margin: .9rem 0 0 !important;
    padding: 0 !important;
    list-style: none !important;
  }

  .mega-menu--news .mega-menu__posts > li {
    margin: 0 !important;
    padding: 0 !important;
  }

  .site-header nav .mega-menu--news .mega-menu__post {
    display: flex !important;
    height: 100%;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid rgb(13 71 161 / 14%);
    border-radius: .75rem;
    background: #fff;
    color: #0a1f44 !important;
    text-decoration: none !important;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
  }

  .site-header nav .mega-menu--news .mega-menu__post:hover,
  .site-header nav .mega-menu--news .mega-menu__post:focus-visible {
    border-color: rgb(36 150 237 / 60%);
    box-shadow: 0 .5rem 1.2rem rgb(13 71 161 / 14%);
    transform: translateY(-2px);
  }

  .mega-menu--news .mega-menu__post-media {
    display: block;
    aspect-ratio: 16 / 9;
    overflow: hidden;
    background: linear-gradient(135deg, #0b3a82, #062054);
  }

  .mega-menu--news .mega-menu__post-media img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }

  .mega-menu--news .mega-menu__post-body {
    display: flex;
    flex: 1;
    flex-direction: column;
    gap: .3rem;
    padding: .7rem .8rem .8rem;
  }

  .mega-menu--news .mega-menu__post-body time {
    color: #5b6b85;
    font-size: .68rem;
    font-weight: 600;
  }

  .mega-menu--news .mega-menu__post-body strong {
    display: -webkit-box;
    overflow: hidden;
    color: #0a1f44;
    font-size: .84rem;
    font-weight: 700;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
  }

  .mega-menu--news .mega-menu__post-body em {
    margin-top: auto;
    padding-top: .35rem;
    color: #0b63d6;
    font-size: .72rem;
    font-style: normal;
    font-weight: 700;
  }
}

@media (min-width: 64.0625rem) {
  .site-header nav .mega-menu--news .mega-menu__post-body strong {
    white-space: normal !important;
    text-overflow: clip !important;
  }
}

/* 59b. Projects mega menu reuses the news layout; note shown when a sector has no project yet. */
@media (min-width: 64rem) {
  .mega-menu--news .mega-menu__panel-note {
    margin: 0;
    padding: 1rem 0 0;
    color: #5b6b85;
    font-size: .8125rem;
    line-height: 1.5;
  }
}

/* 60. Vendor landing page (product_cat): intro + products + related news (slide 42). */
.vendor-block {
  margin-bottom: clamp(1.5rem, 2.6vw, 2.25rem);
}

.vendor-block__eyebrow {
  margin: 0 0 .35rem;
  color: #0b63d6;
  font-size: .74rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
}

.vendor-block__title {
  margin: 0;
  color: #0a1f44;
  font-size: clamp(1.45rem, 2.2vw, 1.95rem);
  font-weight: 800;
  line-height: 1.2;
}

.vendor-block--head {
  margin-bottom: 1.1rem;
}

.vendor-intro {
  padding: clamp(1.25rem, 2.4vw, 2rem);
  border: 1px solid rgb(13 71 161 / 12%);
  border-radius: 1rem;
  background: #fff;
  box-shadow: 0 .6rem 1.6rem rgb(10 31 68 / 6%);
}

.vendor-intro__body {
  max-width: 62rem;
  margin-top: .9rem;
  overflow: hidden;
  color: #40526c;
  font-size: 1rem;
  line-height: 1.75;
}

.vendor-intro__body > * {
  margin: 0 0 .85rem !important;
  max-width: 100% !important;
}

.vendor-intro__body > *:last-child {
  margin-bottom: 0 !important;
}

html body .vendor-intro .vendor-intro__body h1,
html body .vendor-intro .vendor-intro__body h2,
html body .vendor-intro .vendor-intro__body h3,
html body .vendor-intro .vendor-intro__body h4,
html body .vendor-intro .vendor-intro__body h1 *,
html body .vendor-intro .vendor-intro__body h2 *,
html body .vendor-intro .vendor-intro__body h3 * {
  color: #0a1f44 !important;
  font-size: 1.15rem !important;
  font-weight: 800 !important;
  line-height: 1.35 !important;
}

.vendor-intro__body img {
  display: block;
  max-width: min(100%, 26rem) !important;
  height: auto !important;
  border-radius: .6rem;
}

.vendor-intro__body a {
  color: #0b63d6;
}

.vendor-intro__body table {
  display: block;
  width: 100% !important;
  overflow-x: auto;
}

.vendor-news {
  margin-top: clamp(2rem, 4vw, 3.25rem);
  margin-bottom: 0;
}

.vendor-news__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 1.1rem;
  margin-top: 1.1rem;
}

.vendor-news__card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid rgb(13 71 161 / 12%);
  border-radius: .9rem;
  background: #fff;
  color: #0a1f44;
  text-decoration: none;
  box-shadow: 0 .5rem 1.4rem rgb(10 31 68 / 6%);
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}

.vendor-news__card:hover,
.vendor-news__card:focus-visible {
  border-color: rgb(36 150 237 / 55%);
  box-shadow: 0 .8rem 1.8rem rgb(13 71 161 / 14%);
  transform: translateY(-3px);
}

.vendor-news__media {
  display: block;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: linear-gradient(135deg, #0b3a82, #062054);
}

.vendor-news__media img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.vendor-news__body {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: .4rem;
  padding: 1rem 1.1rem 1.1rem;
}

.vendor-news__body time {
  color: #5b6b85;
  font-size: .74rem;
  font-weight: 600;
}

.vendor-news__body strong {
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.35;
}

.vendor-news__body > span {
  color: #51627c;
  font-size: .86rem;
  line-height: 1.55;
}

.vendor-news__body em {
  margin-top: auto;
  padding-top: .4rem;
  color: #0b63d6;
  font-size: .8rem;
  font-style: normal;
  font-weight: 700;
}

@media (max-width: 64rem) {
  .vendor-news__grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 40rem) {
  .vendor-news__grid {
    grid-template-columns: 1fr;
  }
}

/* The products heading can sit on the dark hero overlap when the intro is short → own card. */
.vendor-block--head {
  padding: .9rem 1.25rem;
  border: 1px solid rgb(13 71 161 / 12%);
  border-radius: .9rem;
  background: #fff;
  box-shadow: 0 .4rem 1.1rem rgb(10 31 68 / 5%);
}