/* Final hero geometry: artwork, copy and proof points stay in separate lanes. */
.hero {
  overflow: clip !important;
  isolation: isolate;
}

.hero-illustration,
.hero-illustration-mobile {
  display: none !important;
}

.hero-scene {
  transform: none !important;
  transition: none !important;
}

.hero-scene:not(.is-active) {
  opacity: 0 !important;
  visibility: hidden !important;
}

.hero-scene.is-active {
  opacity: 1 !important;
  visibility: visible !important;
}

/* Keep the hero artwork as a single, measurable layer. The legacy page used
   a second infrastructure illustration behind the carousel; the markup now
   omits it, and this guard keeps future fallback art from reappearing. */
.hero-system > .hero-illustration,
.hero-system > .hero-illustration-mobile {
  display: none !important;
}

.hero-scenes {
  position: absolute !important;
  inset: 0 !important;
  overflow: hidden !important;
  isolation: isolate;
}

.hero-scene {
  position: absolute !important;
  inset: 0 !important;
  display: none !important;
  overflow: hidden !important;
}

.hero-scene.is-active {
  display: grid !important;
  place-items: center;
}

/* v56: only the carousel may paint inside the hero illustration lane. */
.hero-system::before,
.hero-system::after,
.hero-system .system-orbit,
.hero-system .system-links,
.hero-system .system-node,
.hero-system .system-readout,
.hero-system .hero-illustration,
.hero-system .hero-illustration-mobile {
  display: none !important;
}

.hero-scenes .hero-scene {
  display: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: none !important;
}

.hero-scenes .hero-scene.is-active {
  display: grid !important;
  place-items: center;
  opacity: 1 !important;
  visibility: visible !important;
}

.hero-scene-image {
  width: 100% !important;
  height: 100% !important;
  max-width: 100% !important;
  max-height: 100% !important;
  object-fit: contain !important;
}

.hero-inner,
.hero-stats,
.hero-title,
.hero-lede,
.hero-cta,
.hero-stats div,
.hero-stats dd {
  min-width: 0;
}

.hero-title {
  max-width: min(7.6em, 100%) !important;
  font-size: clamp(42px, 4.5vw, 64px) !important;
  line-height: 1.08 !important;
  text-wrap: balance;
}

.hero-title .line,
.hero-title .line > span {
  max-width: 100%;
}

.hero-lede {
  max-width: min(520px, 100%) !important;
  overflow-wrap: anywhere;
}

.hero-cta a {
  max-width: 100%;
  white-space: nowrap;
}

.hero-scenes {
  contain: layout paint;
}

.hero-scene-image {
  object-fit: contain;
  object-position: center;
}

.hero-scene-meta {
  max-width: 42%;
  overflow-wrap: anywhere;
  text-wrap: balance;
}

.hero-scene-meta span,
.hero-scene-meta b {
  display: block;
  max-width: 100%;
}

.hero-stats {
  /* The legacy hero used an absolute bottom rail. Keep the proof points in
     document flow so they cannot cover the copy or actions on short screens. */
  position: relative !important;
  inset: auto !important;
  left: auto !important;
  bottom: auto !important;
  transform: none !important;
  margin: 0 auto !important;
  grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
}

.hero-stats dd {
  overflow-wrap: anywhere;
}

.hero-stats dt {
  line-height: 1.2 !important;
}

.hero-stats sup {
  vertical-align: .58em;
}

/* Reserve a distinct artwork lane above the proof points. */
.hero-system {
  top: 8% !important;
  right: max(0px, calc((100% - 1280px) / 2 - 10px)) !important;
  width: min(56vw, 740px) !important;
  height: min(64vh, 640px) !important;
  aspect-ratio: auto;
}

.hero-art-caption { display: none !important; }

/* Avoid clipping glyphs when a fallback font has a taller ascent. */
.hero-title .line {
  overflow: hidden;
  padding-bottom: .14em;
}

/* Keep compact labels readable while allowing narrow cards to wrap. */
.nw {
  white-space: normal;
  overflow-wrap: anywhere;
}

@media (max-width: 1080px) {
  .hero-title { font-size: clamp(40px, 5vw, 52px) !important; }
  .hero-system {
    top: 9% !important;
    right: 0 !important;
    width: min(52vw, 560px) !important;
    height: min(50vh, 420px) !important;
  }
}

@media (max-width: 720px) {
  #fluid-canvas,
  .hero-grain { display: none !important; }

  .hero::before {
    background:
      radial-gradient(70% 42% at 80% 12%, rgba(64,104,255,.15), transparent 72%),
      linear-gradient(180deg, #101a33 0%, #07101f 54%, #060b16 100%) !important;
  }

  .hero::after {
    background: linear-gradient(180deg, rgba(4,8,18,.18), rgba(4,8,18,.72) 72%, rgba(4,8,18,.96)) !important;
  }

  .hero { min-height: 0 !important; height: auto !important; }
  .hero-system { top: 62px !important; right: 0 !important; width: 100% !important; height: 188px !important; opacity: .52 !important; filter: saturate(.88); }
  .hero-art-glow { opacity: .34 !important; }
  .hero-scenes { opacity: .82 !important; }
  .hero-scene-meta { display: none !important; }
  .hero-scene-dots { display: none !important; }
  .hero-inner { width: calc(100% - 36px) !important; padding-top: 228px !important; padding-bottom: 42px !important; }
  .hero .kicker { max-width: 100%; font-size: 10px; letter-spacing: .08em; line-height: 1.5; }
  .hero-title { max-width: 100% !important; font-size: clamp(36px, 10vw, 46px) !important; line-height: 1.12 !important; }
  .display,
  .platform .display, .global .display, .scenes .display, .delivery .display,
  .contact-title {
    word-break: normal !important;
    overflow-wrap: anywhere !important;
    line-height: 1.32 !important;
  }
  .hero-foot { display: block !important; margin-top: 24px !important; }
  .hero-lede { font-size: 13px !important; line-height: 1.75 !important; }
  .hero-cta { display: flex !important; width: 100% !important; gap: 8px !important; margin-top: 20px !important; }
  .hero-cta a { flex: 1 1 0; min-width: 0; justify-content: center; padding-inline: 12px; font-size: 12px; }
  .hero-scroll { display: none !important; }
  .hero-stats { width: calc(100% - 36px) !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .hero-stats div { padding: 14px 10px 16px 0 !important; }
  .hero-stats div:nth-child(even) { padding-left: 12px !important; border-left: 1px solid var(--navy-line) !important; }
  .hero-stats dt { font-size: clamp(25px, 7.4vw, 32px) !important; }
  .hero-stats dd { min-height: 2.8em !important; font-size: 10px !important; line-height: 1.55 !important; }
  .hero-scene-dots { display: none !important; }
  .hero-scene-dots i { width: 14px; }
  .hero-scene-dots i.is-active { width: 24px; }
  .contact-title { font-size: clamp(38px, 10vw, 50px); }
}

@media (max-width: 360px) {
  .hero-inner,
  .hero-stats { width: calc(100% - 28px) !important; }
  .hero-inner { padding-top: 214px !important; padding-bottom: 36px !important; }
  .hero-system { height: 174px !important; }
  .hero-title { font-size: 34px !important; }
  .hero-lede { font-size: 12px !important; }
  .hero-cta a { font-size: 11px; padding-inline: 8px; }
  .hero-scene-meta { right: 5% !important; max-width: 50% !important; font-size: 6px !important; }
  .hero-scene-meta b { font-size: 9px !important; }
}

/* v51: keep the control-plane explorer in a measurable lane.  The legacy
   stylesheet contains several historical explorer blocks; these final rules
   make every grid child shrink before its text or diagram can collide. */
.hero-scene { display: none !important; }
.hero-scene.is-active { display: block !important; }

:where(.explorer-signal,
  .explorer-signal > div,
  .solution-explorer,
  .solution-stage,
  .solution-panel,
  .solution-panel-copy,
  .solution-panel-visual,
  .solution-tab,
  .visual-chrome,
  .visual-metrics,
  .visual-metrics span,
  .visual-activity,
  .visual-footer,
  .maas-map,
  .maas-col,
  .maas-core,
  .router-map,
  .access-map,
  .access-origin,
  .access-route,
  .access-dest) {
  min-width: 0;
}

.explorer-signal > div,
.solution-panel,
.solution-panel-copy,
.solution-panel-visual,
.visual-chrome > *,
.visual-metrics > *,
.visual-activity > *,
.visual-footer > *,
.maas-col > *,
.maas-core > *,
.access-origin > *,
.access-route > *,
.access-dest > * {
  overflow-wrap: anywhere;
}

.solution-explorer {
  min-height: clamp(520px, 52vw, 660px) !important;
}

.solution-panel {
  grid-template-columns: minmax(250px, .82fr) minmax(0, 1.18fr) !important;
  align-items: stretch;
}

.solution-panel-copy {
  align-self: center;
}

.solution-panel-copy h4 {
  max-width: 100%;
  overflow-wrap: anywhere;
  text-wrap: balance;
  letter-spacing: 0;
}

.solution-panel-copy > p,
.panel-stats dd {
  max-width: 100%;
  overflow-wrap: anywhere;
}

.solution-panel-visual {
  min-height: clamp(380px, 32vw, 500px) !important;
  grid-template-rows: auto auto minmax(175px, 1fr) auto auto !important;
}

.visual-chrome,
.visual-footer,
.visual-activity {
  flex-wrap: wrap;
}

.visual-chrome > *,
.visual-footer > * {
  min-width: 0;
  overflow-wrap: anywhere;
}

.visual-activity > span {
  white-space: normal;
}

.visual-activity b {
  min-width: 0;
  max-width: 100%;
  overflow-wrap: anywhere;
  text-align: right;
}

.visual-metrics span,
.visual-metrics small {
  min-width: 0;
  overflow-wrap: anywhere;
}

.maas-map {
  grid-template-columns: minmax(0, 1fr) minmax(108px, 1.3fr) minmax(0, 1fr);
}

.router-center {
  max-width: 42%;
}

.provider {
  min-width: 0;
  max-width: 92px;
}

@media (max-width: 1080px) {
  .solution-explorer {
    grid-template-columns: minmax(0, 1fr);
    min-height: auto !important;
  }
  .solution-tabs {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    align-content: stretch;
    gap: 8px;
    padding: 30px 14px 14px;
    border-right: 0;
    border-bottom: 1px solid rgba(139,180,255,.14);
  }
  .solution-tabs::after { display: none; }
  .solution-panel {
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
    padding: 34px clamp(18px, 4vw, 32px);
  }
  .solution-panel-copy { align-self: start; max-width: none; }
  .solution-panel-visual { min-height: clamp(360px, 48vw, 500px) !important; }
}

@media (max-width: 560px) {
  .solution-panel-visual { min-height: 360px !important; }
  .solution-tab {
    display: flex;
    align-items: flex-start;
    gap: 6px;
    min-height: 54px;
    padding: 9px 6px;
  }
  .solution-tab > span { flex: 0 0 auto; font-size: 8px; }
  .solution-tab b { min-width: 0; font-size: 11px; line-height: 1.35; }
  .solution-tab i { display: none; }
  .visual-metrics { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .visual-metrics small { font-size: 7px; letter-spacing: .04em; }
  .maas-map {
    grid-template-columns: minmax(0, .9fr) minmax(94px, 1.1fr) minmax(0, .9fr);
    gap: 6px;
  }
  .maas-col span { padding: 7px 6px; font-size: 9px; }
  .maas-core { padding: 12px 9px; }
  .maas-core b { font-size: 17px; }
  .solution-panel-visual .provider {
    min-width: 0 !important;
    max-width: 70px;
    padding-inline: 6px;
  }
  .router-center { min-width: 90px; }
  .access-map {
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.5fr) minmax(0, .8fr);
    gap: 6px;
  }
  .access-origin b,
  .access-dest b { white-space: normal; overflow-wrap: anywhere; }
}

.hero-title,
.display,
.contact-title,
.solution-panel-copy h4,
.solution-head h3 {
  letter-spacing: 0;
}

.section[id],
.solution-boards {
  scroll-margin-top: 90px;
}

@media (max-width: 360px) {
  .solution-panel-copy h4 { font-size: 28px !important; }
  .solution-panel-visual { min-height: 340px !important; }
  .visual-footer { gap: 6px; font-size: 7px; }
  .solution-panel-visual .provider { max-width: 62px; }
  .router-center { min-width: 84px; }
  .router-center b { font-size: 17px; }
  .router-center span { font-size: 8px; }
}

/* v59: place the chapter copy beside its lead use case so the first screen
   contains real product information. Keep the Agent diagram in a fixed lane;
   the SVG's intrinsic aspect ratio must not inflate its card. */
@media (min-width: 901px) {
  .scenes .wrap {
    display: grid;
    grid-template-columns: minmax(270px, .72fr) minmax(0, 1.28fr);
    column-gap: clamp(34px, 5.2vw, 82px);
    align-items: start;
  }

  .scenes .scenes-copy {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .scenes #scenes-title {
    max-width: 100%;
    margin: 20px 0 0;
    font-size: clamp(36px, 2.35vw, 42px);
    line-height: 1.2;
    text-wrap: balance;
  }

  .scenes .scenes-aside {
    min-width: 0;
    margin-top: 28px;
  }

  .scenes .scenes-aside > p {
    max-width: 28em;
    color: var(--navy-mute);
    font-size: 14px;
    line-height: 1.8;
  }

  .scenes .scenes-aside ol {
    display: grid;
    gap: 0;
    margin-top: 24px;
    padding: 0;
    list-style: none;
    border-top: 1px solid var(--navy-line);
  }

  .scenes .scenes-aside li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    padding: 13px 0;
    border-bottom: 1px solid var(--navy-line);
  }

  .scenes .scenes-aside li > span {
    grid-row: 1 / span 2;
    color: var(--cyan);
    font: 10px/1.6 var(--mono);
  }

  .scenes .scenes-aside li b {
    min-width: 0;
    color: rgba(255,255,255,.9);
    font-size: 13px;
    font-weight: 600;
    overflow-wrap: anywhere;
  }

  .scenes .scenes-aside li small {
    min-width: 0;
    color: var(--navy-mute);
    font-size: 11px;
    line-height: 1.5;
    overflow-wrap: anywhere;
  }

  .scenes .scene-grid {
    grid-column: 2;
    grid-row: 1;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 14px;
    margin: 0;
    min-width: 0;
  }

  .scenes .scene,
  .scenes .scene.wide {
    min-width: 0;
    min-height: 0;
    padding: clamp(22px, 2.1vw, 30px);
  }

  .scenes .scene.wide {
    grid-column: 1 / -1;
  }

  .scenes .scene.wide h3 {
    max-width: 100%;
    font-size: clamp(20px, 1.8vw, 28px);
    line-height: 1.28;
  }

  .scenes .agent-flow-art {
    display: block;
    width: 100%;
    height: clamp(178px, 15vw, 232px);
    max-height: 232px;
    margin: 12px auto 0;
    object-fit: contain;
  }

  .scenes .scene > p:not(.bp-tag) {
    max-width: 36em;
  }
}

@media (max-width: 900px) {
  .scenes .scenes-aside {
    margin-top: 24px;
  }

  .scenes .scenes-aside > p {
    max-width: 34em;
  }

  .scenes .scenes-aside ol {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 8px;
    margin-top: 18px;
    border-top: 0;
  }

  .scenes .scenes-aside li {
    display: block;
    padding: 11px 10px;
    border: 1px solid var(--navy-line);
    border-radius: 10px;
  }

  .scenes .scenes-aside li > span,
  .scenes .scenes-aside li b,
  .scenes .scenes-aside li small {
    display: block;
  }

  .scenes .scenes-aside li b {
    margin-top: 3px;
    font-size: 12px;
  }

  .scenes .scenes-aside li small {
    margin-top: 3px;
    font-size: 10px;
  }

  .scenes .scene-grid {
    grid-template-columns: minmax(0, 1fr);
    margin-top: 30px;
  }

  .scenes .scene.wide {
    grid-column: auto;
  }

  .scenes #scenes-title {
    max-width: none;
  }

  .scenes .agent-flow-art {
    display: block;
    width: 100%;
    height: clamp(150px, 42vw, 220px);
    max-height: 220px;
    object-fit: contain;
  }
}

@media (max-width: 560px) {
  .scenes .scenes-aside ol {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 0;
    border-top: 1px solid var(--navy-line);
  }

  .scenes .scenes-aside li {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 3px;
    min-width: 0;
    min-height: 86px;
    padding: 9px 7px;
    border: 0;
    border-right: 1px solid var(--navy-line);
    border-bottom: 1px solid var(--navy-line);
    border-radius: 0;
  }

  .scenes .scenes-aside li:last-child {
    border-right: 0;
  }

  .scenes .scenes-aside li > span {
    font-size: 9px;
  }

  .scenes .scenes-aside li b {
    font-size: 11px;
    line-height: 1.3;
  }

  .scenes .scenes-aside li small {
    font-size: 9px;
    line-height: 1.35;
    overflow-wrap: anywhere;
  }

  .scenes .scene-grid {
    gap: 12px;
    margin-top: 26px;
  }

  .scenes .scene,
  .scenes .scene.wide {
    padding: 18px;
  }

  .scenes .scene.wide h3 {
    max-width: none;
    font-size: 20px;
    line-height: 1.3;
  }

  .scenes .agent-flow-art {
    height: 150px;
    max-height: 150px;
    margin-top: 10px;
  }
}

@media (max-width: 360px) {
  .scenes .scenes-aside ol {
    grid-template-columns: 1fr;
  }

  .scenes .scenes-aside li {
    display: grid;
    grid-template-columns: 30px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 10px;
    min-height: 0;
    padding: 10px 0;
    border-right: 0;
  }

  .scenes .scenes-aside li > span {
    grid-row: 1 / span 2;
  }

  .scenes .scenes-aside li b,
  .scenes .scenes-aside li small {
    font-size: 10px;
  }
}

/* Keep the section's information available even when a screenshot or a fast
   anchor jump lands during the global reveal transition. */
.scenes .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

/* v52: explicit narrow-layout floors. These rules prevent SVG labels and
   diagram nodes from being compressed into one another on small phones. */
@media (max-width: 480px) {
  .hero-system {
    height: 176px !important;
    width: 100% !important;
    right: 0 !important;
  }

  .hero-scenes {
    inset: 0 4px !important;
  }

  .solution-panel-visual {
    min-height: 374px !important;
    padding: 14px !important;
  }

  .solution-panel-visual .visual-chrome,
  .solution-panel-visual .visual-footer {
    gap: 5px;
    font-size: 8px;
    letter-spacing: .06em;
  }

  .solution-panel-visual .visual-chrome > span,
  .solution-panel-visual .visual-footer > span {
    max-width: 48%;
  }

  .solution-panel-visual .visual-metrics {
    gap: 5px;
    margin: 10px 0 2px;
  }

  .solution-panel-visual .visual-metrics b {
    font-size: clamp(17px, 5vw, 23px);
  }

  .solution-panel-visual .visual-metrics small {
    font-size: 8px;
    line-height: 1.25;
    letter-spacing: .025em;
  }

  .solution-panel-visual .visual-footer {
    display: none;
  }

  .solution-panel-visual .visual-activity {
    align-items: flex-start;
    gap: 5px;
    line-height: 1.35;
  }

  .solution-panel-visual .visual-activity b {
    flex: 1 1 100%;
    text-align: left;
  }

  .solution-panel-visual .maas-map,
  .solution-panel-visual .router-map,
  .solution-panel-visual .access-map {
    margin-inline: 0 !important;
  }

  .solution-panel-visual .router-center {
    min-width: 78px !important;
    width: 78px;
  }

  .solution-panel-visual .provider {
    max-width: 60px !important;
    padding: 6px 5px !important;
  }

  .solution-panel-visual .provider b {
    font-size: 9px;
    line-height: 1.2;
  }

  .solution-panel-visual .provider span {
    font-size: 7px;
    line-height: 1.25;
  }

  .solution-panel-visual .access-origin,
  .solution-panel-visual .access-dest {
    padding: 10px 7px;
  }

  .solution-panel-visual .access-origin b,
  .solution-panel-visual .access-dest b {
    font-size: 11px;
    line-height: 1.25;
  }

  .solution-panel-visual .access-route {
    gap: 5px;
  }

  .solution-panel-visual .access-route span {
    padding: 8px 4px;
    font-size: 8px;
    line-height: 1.2;
  }
}

/* v53: move product navigation above the content so the diagrams keep their
   full working width. This mirrors the reference sites' clear tab hierarchy
   while keeping OmniXAI's own control-plane treatment. */
.solution-explorer {
  grid-template-columns: minmax(0, 1fr) !important;
  min-height: 0 !important;
}

.solution-tabs {
  grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  align-content: stretch;
  gap: 8px;
  padding: 38px 18px 12px;
  border-right: 0;
  border-bottom: 1px solid rgba(139, 180, 255, .14);
}

.solution-tabs::after {
  display: none;
}

.solution-tab {
  min-height: 72px;
  padding: 11px 14px;
  border-radius: 10px;
}

.solution-tab:hover,
.solution-tab:focus-visible {
  transform: translateY(-1px);
}

.solution-tab.active {
  box-shadow: inset 0 -2px var(--cyan), 0 12px 26px -22px rgba(54, 226, 212, .9);
}

.solution-panel {
  grid-template-columns: minmax(260px, .9fr) minmax(0, 1.1fr) !important;
  min-height: 540px !important;
  gap: 28px;
  padding: 40px clamp(22px, 3.2vw, 42px) 34px;
}

.solution-panel-copy h4 {
  font-size: clamp(28px, 2.55vw, 38px) !important;
  line-height: 1.14 !important;
}

@media (max-width: 1080px) {
  .solution-tabs {
    padding: 38px 14px 12px;
  }

  .solution-panel {
    grid-template-columns: minmax(0, 1fr) !important;
    min-height: 0 !important;
    padding: 34px clamp(18px, 4vw, 32px);
  }
}

@media (max-width: 560px) {
  .solution-tabs {
    padding: 34px 8px 8px;
  }

  .solution-tab {
    min-height: 54px;
    padding: 9px 6px;
    border-radius: 8px;
  }
}

/* v57: customer proof is part of the first fold of the section.  The
   previous single-column stack pushed the training wall below short desktop
   viewports, while the reveal animation could leave it transparent during a
   screenshot or fast scroll. Keep the proof visible and give the section the
   same editorial split rhythm as the reference sites. */
.clients .reveal {
  opacity: 1 !important;
  visibility: visible !important;
  transform: none !important;
  filter: none !important;
  animation: none !important;
}

.clients .wrap {
  min-width: 0;
}

.clients .client-wall-training,
.clients .client-wall-summary,
.clients .signed,
.clients .signed article,
.clients .cw-group,
.clients .cw-cats,
.clients .cw-cats > div {
  min-width: 0;
  max-width: 100%;
}

.clients .cw-cats {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.clients .cw-cats > div {
  overflow: hidden;
}

.clients .cw-cats dd,
.clients .cw-group li,
.clients .signed article h3,
.clients .signed article p {
  overflow-wrap: anywhere;
  word-break: break-word;
}

@media (min-width: 901px) {
  .clients .wrap {
    display: grid;
    grid-template-columns: minmax(270px, .82fr) minmax(0, 1.18fr);
    grid-template-rows: auto auto auto auto;
    column-gap: clamp(30px, 4.4vw, 72px);
    row-gap: 0;
    align-items: start;
  }

  .clients .clients-intro {
    grid-column: 1;
    grid-row: 1;
    min-width: 0;
  }

  .clients .clients-intro .sec-label {
    margin: 0 0 14px;
  }

  .clients .clients-intro .display {
    max-width: 12ch;
    margin: 0;
    font-size: clamp(36px, 3vw, 50px);
    line-height: 1.16;
    align-self: start;
  }

  .clients .client-wall-training {
    grid-column: 2;
    grid-row: 1;
    align-self: start;
    margin: 0 !important;
  }

  .clients .cw-train {
    padding: clamp(22px, 2.1vw, 30px);
  }

  .clients .signed-head {
    grid-column: 1 / -1;
    grid-row: 2;
    margin: clamp(38px, 4.2vw, 56px) 0 18px;
  }

  .clients .signed {
    grid-column: 1 / -1;
    grid-row: 3;
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .clients .client-wall-summary {
    grid-column: 1 / -1;
    grid-row: 4;
    margin-top: 18px;
  }
}

@media (min-width: 901px) and (max-height: 620px) {
  .clients.section {
    padding-block: 42px;
  }

  .clients .signed-head {
    margin-top: 34px;
  }
}

@media (max-width: 900px) {
  .clients .cw-cats {
    grid-template-columns: 1fr;
    gap: 0;
  }

  .clients .cw-cats > div {
    padding: 14px 0 !important;
    border-left: 0 !important;
    border-top: 1px solid var(--navy-line);
  }

  .clients .cw-cats > div:first-child {
    border-top: 0;
    padding-top: 0 !important;
  }
}

@media (max-width: 720px) {
  .clients.section {
    padding-block: 52px;
  }

  .clients .display {
    max-width: 14ch;
    font-size: clamp(30px, 8vw, 38px);
    line-height: 1.18;
  }

  .clients .client-wall-training {
    margin-top: 20px !important;
  }

  .clients .cw-group {
    padding: 20px;
  }

  .clients .cw-cats dd {
    font-size: clamp(17px, 4.7vw, 21px);
    line-height: 1.5;
  }

  .clients .signed-head {
    margin-top: 30px;
  }

  .clients .signed {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
  }

  .clients .signed article {
    min-height: 0;
    padding: 16px;
  }

  .clients .signed article h3 {
    font-size: 15px;
    line-height: 1.45;
    margin: 12px 0 auto;
  }

  .clients .client-wall-summary {
    margin-top: 16px;
  }
}

@media (max-width: 380px) {
  .clients .signed {
    grid-template-columns: 1fr;
  }
}

/* v60: keep the hero carousel controls usable after the markup switched from
   decorative <i> bars to real buttons. The artwork lane must also shrink with
   its container so narrow viewports cannot push the page wider. */
.hero-system,
.hero-scenes,
.hero-scene,
.hero-scene-image {
  box-sizing: border-box;
  max-width: 100%;
}

.hero-system,
.hero-scenes {
  overflow: hidden !important;
  overflow: clip !important;
}

.hero-scene {
  min-width: 0;
  min-height: 0;
  pointer-events: none;
}

.hero-scene-meta {
  max-width: min(42%, 280px);
  overflow-wrap: anywhere;
  word-break: normal;
  white-space: normal !important;
  line-height: 1.35;
}

.hero-scene-dots {
  z-index: 5;
  display: flex !important;
  align-items: center;
  gap: 7px;
  pointer-events: auto;
  white-space: normal;
}

.hero-scene-dots button {
  appearance: none;
  display: grid;
  place-items: center;
  width: 32px;
  height: 24px;
  flex: 0 0 auto;
  padding: 0;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: transparent;
  cursor: pointer;
}

.hero-scene-dots button::before {
  content: "";
  display: block;
  width: 22px;
  height: 2px;
  border-radius: 99px;
  background: rgba(193, 208, 244, .42);
  transition: width .25s ease, background .25s ease, box-shadow .25s ease;
}

.hero-scene-dots button.is-active { width: 48px; }
.hero-scene-dots button.is-active::before {
  width: 42px;
  background: var(--cyan, #36e2d4);
  box-shadow: 0 0 13px rgba(99, 221, 213, .8);
}

.hero-scene-dots button:hover::before,
.hero-scene-dots button:focus-visible::before {
  background: #d8e5ff;
}

.hero-scene-dots button:focus-visible {
  outline: 2px solid var(--focus-ring, #4c7dff);
  outline-offset: 2px;
}

@media (max-width: 720px) {
  .hero-scenes { inset: 0 !important; }
  .hero-scene-dots {
    right: 7% !important;
    bottom: 2% !important;
    gap: 4px;
  }
  .hero-scene-dots button {
    width: 28px;
    height: 26px;
  }
  .hero-scene-dots button::before { width: 18px; }
  .hero-scene-dots button.is-active { width: 38px; }
  .hero-scene-dots button.is-active::before { width: 32px; }
  .hero-scene-meta { max-width: 48%; }
}

@media (max-width: 360px) {
  .hero-scene-dots button { width: 25px; }
  .hero-scene-dots button.is-active { width: 34px; }
  .hero-scene-dots button.is-active::before { width: 28px; }
}

/* Final containment pass: every visual lane may shrink before its copy or
   diagram can force a grid track wider than the viewport. */
:where(.about-grid > *, .biz-panel > *, .router-block > *, .global-grid > *,
  .scene-grid > *, .client-wall > *, .solution-panel > *,
  .solution-panel-visual > *) {
  min-width: 0;
}

:where(img, svg, canvas) {
  max-width: 100%;
}

:where(.solution-panel-copy h4, .solution-tab b, .solution-panel-copy > p,
  .solution-card-copy h3, .scene h3, .scene > p:not(.bp-tag),
  .client-wall h3, .client-wall p) {
  overflow-wrap: anywhere;
  word-break: normal;
}

.solution-panel-visual {
  min-width: 0;
  contain: layout paint;
}

@media (max-width: 720px) {
  .solution-panel-visual {
    min-height: 340px;
  }

  .solution-panel-visual .visual-chrome,
  .solution-panel-visual .visual-footer {
    min-width: 0;
    flex-wrap: wrap;
  }

  .solution-panel-visual .visual-chrome > *,
  .solution-panel-visual .visual-footer > * {
    max-width: 100%;
    overflow-wrap: anywhere;
  }
}

/* Diagram connections stay behind the content nodes, so animated paths never
   wash through labels or make adjacent cards look merged. */
.maas-lines,
.router-map > svg,
.access-route::before {
  pointer-events: none;
}

.maas-lines { z-index: 0; }
.maas-col,
.maas-core,
.router-center,
.provider,
.access-origin,
.access-route,
.access-dest { z-index: 2; }

.maas-col span,
.provider,
.access-origin,
.access-dest,
.access-route span {
  background-color: rgba(10, 25, 48, .96);
}

@media (prefers-color-scheme: light) {
  .maas-col span,
  .provider,
  .access-origin,
  .access-dest,
  .access-route span {
    background-color: rgba(249, 252, 255, .96);
  }
}