/* AgentX's technology layer keeps people and the consulting offer in front.
   The X mark supplies the angular geometry; the connected labels describe the
   relationship, not a live system, an activity feed, or measured performance. */
.hero-connected {
  --signal: #9de4d1;
  background: #163c32;
  isolation: isolate;
  min-height: 730px;
}
.hero-connected .hero-image {
  width: 100%;
  height: 100%;
  left: auto;
  right: 0;
  object-position: 50% 47%;
}
.hero-connected .hero-shade {
  inset: 0;
  height: auto;
  background: linear-gradient(90deg, #163c32 0%, #163c32 29%, rgba(22,60,50,.97) 40%, rgba(22,60,50,.7) 53%, rgba(22,60,50,.08) 76%, rgba(22,60,50,.1));
}
/* These traces echo the brand's diagonal cuts. They stay behind all content
   and carry no information, so the reading order remains ordinary HTML. */
.hero-connections {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  fill: #9de4d1;
  stroke: #9de4d1;
  stroke-width: 1;
  opacity: .25;
}
.hero-connections path { fill: none; }
.hero-connected .hero-content { padding-top: 108px; padding-bottom: 96px; }
.hero-connected h1 { font-weight: 600; letter-spacing: -.055em; }
.hero-connected .hero-content>p.hero-ambition { color: #c4e8d9; }
.hero-connected .button-light {
  background: var(--signal);
  color: #143b30;
  border-color: var(--signal);
  font-weight: 600;
}
.hero-connected .button-light:hover { background: #c2f0df; border-color: #c2f0df; }
.hero-connected .button-light:focus-visible { outline-color: #fff; }
.hero-connected .hero-promise { max-width: 495px; color: #d3e4dc; }

/* A small consulting diagram sits below the people in the photograph. Unlike
   a screenshot, its labels remain full-size text at every viewport width. */
.hero-system {
  position: absolute;
  width: 420px;
  right: max(42px, calc((100% - 1200px) / 2));
  bottom: 35px;
  padding: 27px 28px 22px;
  background: rgba(18, 48, 40, .96);
  border: 1px solid rgba(157, 228, 209, .6);
  border-radius: 12px;
  color: #fff;
  box-shadow: 0 12px 40px #071e2440;
}
.system-core { display: flex; gap: 16px; align-items: center; justify-content: center; }
.system-mark {
  width: 54px;
  height: 54px;
  display: grid;
  place-items: center;
  border: 1px solid #7cbaa2;
  border-radius: 10px;
  background: #254e41;
  flex-shrink: 0;
}
.system-mark svg { width: 32px; height: 32px; fill: #b3efd6; }
.system-core strong { display: block; font-size: 24px; line-height: 1.2; font-weight: 500; letter-spacing: -.02em; }
.system-core div>span { display: block; font-size: 16px; line-height: 1.45; color: #c2d8cb; margin-top: 5px; }
.system-branches {
  position: relative;
  list-style: none;
  padding: 25px 0 0;
  margin: 21px 0 0;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 10px;
}
.system-branches::before {
  content: '';
  position: absolute;
  left: calc(100% / 6);
  right: calc(100% / 6);
  top: 0;
  height: 25px;
  border: 1px solid #628f7b;
  border-bottom: 0;
  border-radius: 7px 7px 0 0;
}
.system-branches::after {
  content: '';
  position: absolute;
  left: 50%;
  top: -21px;
  height: 46px;
  border-left: 1px solid #628f7b;
}
.system-branches li {
  position: relative;
  z-index: 1;
  padding: 9px 5px;
  background: #254e41;
  border: 1px solid #628f7b;
  border-radius: 5px;
  text-align: center;
  font-size: 16px;
  line-height: 1.35;
  color: #eff9f3;
}
.hero-system>p { margin-top: 19px; color: #c2d8cb; font-size: 15px; line-height: 1.5; text-align: center; }

/* Intermediate screens keep both the copy and diagram in the page flow. The
   photograph gets its own space, without a diagram obscuring people's faces. */
@media (min-width: 801px) and (max-width: 1200px) {
  /* Let the diagram follow the promise in normal flow, so wrapped copy never
     collides with a card whose height changes with its supporting text. */
  .hero-connected .hero-content { padding-bottom: 32px; }
  .hero-system { position: relative; width: 390px; left: auto; right: auto; bottom: auto; margin: 0 0 32px 36px; }
  .hero-connected .hero-promise { max-width: 450px; }
}
@media (max-width: 800px) {
  .hero-connected { display: flex; flex-direction: column; align-items: stretch; min-height: 0; padding-bottom: 0; }
  .hero-connected .hero-content { padding-top: 54px; padding-bottom: 38px; margin: 0 auto; }
  .hero-connected .hero-image { position: relative; inset: auto; order: 2; width: 100%; height: 280px; object-position: 69% 44%; }
  .hero-connected .hero-shade { display: none; }
  .hero-connections { height: 500px; opacity: .17; }
  .hero-system { position: relative; order: 3; left: auto; right: auto; bottom: auto; width: calc(100% - 48px); margin: -1px auto 30px; border-radius: 0 0 12px 12px; background: #123028; }
  .hero-connected .hero-promise { max-width: 100%; }
}
@media (max-width: 560px) {
  .hero-connected .hero-content { padding-top: 42px; padding-bottom: 33px; }
  .hero-connected h1 { font-size: clamp(36px, 9.7vw, 42px); line-height: 1.12; }
  .hero-connected .hero-image { height: 215px; object-position: 70% 37%; }
  .hero-system { width: calc(100% - 40px); padding: 23px 18px 21px; margin-bottom: 24px; }
  .system-core { gap: 12px; }
  .system-core strong { font-size: 23px; }
  .system-core div>span { font-size: 16px; }
  .system-branches { gap: 6px; }
  .system-branches li { font-size: 16px; padding: 9px 3px; }
  .hero-system>p { text-align: left; font-size: 16px; }
}

/* An industry with commissioned artwork gets a visual opening. Explicit grid
   areas preserve headline → artwork → advice in the document and mobile order,
   while the desktop artwork sits beside both text blocks. Pages without image
   metadata retain their existing layout and spacing. */
.industry-visual-layout {
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.12fr);
  grid-template-areas: "heading artwork" "copy artwork";
  gap: 28px 54px;
  align-items: start;
}
.industry-visual-layout>h1 { grid-area: heading; font-weight: 550; }
.industry-visual-copy { grid-area: copy; min-width: 0; }
.industry-visual-art {
  grid-area: artwork;
  align-self: center;
  min-width: 0;
  margin: 0;
  overflow: hidden;
  border: 1px solid #bdcfc5;
  border-radius: 10px;
  background: #f3f4ed;
}
/* Keep the complete illustration visible. Intrinsic HTML dimensions reserve
   its natural height; no fixed crop hides the roof or its technical details. */
.industry-visual-art img { width: 100%; height: auto; object-fit: contain; }
.industry-visual-hero .inner-promise { font-size: 16px; line-height: 1.55; }

@media (max-width: 1100px) and (min-width: 801px) {
  .industry-visual-layout { gap: 26px 35px; }
}
@media (max-width: 800px) {
  .industry-visual-layout {
    grid-template-columns: minmax(0, 1fr);
    grid-template-areas: "heading" "artwork" "copy";
    gap: 27px;
  }
  .industry-visual-layout>.industry-visual-copy { max-width: none; }
  .industry-visual-art { align-self: stretch; }
}
@media (max-width: 560px) {
  .industry-visual-hero .back-link { margin-bottom: 26px; }
  .industry-visual-layout { gap: 24px; }
}