/* ===================================================
   NexGen AIvolution: Hero Section Styles
   Component variables use the --hero- prefix.
   header.css owns --h-  footer.css owns --f-
   All three stylesheets load on every page.
   =================================================== */

/* --- Hero-specific measured colors ---
   Override 3: sampled from CS TEST.png source image.
   These are brighter than brand tokens and are hardcoded
   on purpose. Do not change to token values. */
:root {
  --hero-img-w:   1916px;
  --hero-edge-l:  #0F0C08;   /* left 10-col average over cropped photo */
  --hero-edge-r:  #040A11;   /* right 10-col average */
  --hero-rule:    #2B444E;   /* rule row measured above strip */
  --hero-legacy:  #E79B42;   /* LEGACY icon and label */
  --hero-modern:  #3AE8BF;   /* MODERNIZE node and label */
  --hero-ai:      #1F8DFD;   /* AI-ENABLED shield and label */
  --hero-pad-top: 40px;
  --hero-pad-bot: 32px;
}

/* ===================================================
   Hero section wrapper
   =================================================== */
.elementor.elementor-8 .ng-hero {
  display: flex;
  flex-direction: column;
  background: var(--ink);
  width: 100%;
  overflow: hidden;
  padding-inline: 0; /* neutralise Elementor e-con 10px section default */
}

/* ===================================================
   Headline block — sits above the image
   max-width constrains to standard container
   =================================================== */
.elementor.elementor-8 .ng-hero-head {
  width: 100%;
  max-width: var(--w-main);
  margin-inline: auto;
  padding-inline: var(--gutter);
  padding-block-start: var(--hero-pad-top);
  padding-block-end: var(--hero-pad-bot);
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--s-5);
}

/* ===================================================
   Teal pill eyebrow — first child of ng-hero-head
   Recoloured from C02 anchor-nav pill in the design system.
   =================================================== */
.elementor.elementor-8 .ng-hero-eyebrow {
  font-family: var(--font-mono);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--teal);
  background: rgba(59,191,160,.13);
  border: 1px solid rgba(59,191,160,.32);
  padding: 9px 16px;
  border-radius: 8px;
  display: inline-block;
  margin: 0;
}

/* Below 767px step to 14px, matching all section eyebrows. */
@media (max-width:767px){
  .elementor.elementor-8 .ng-hero-eyebrow{font-size:14px;}
}

/* Below 520px the eyebrow wraps. Pin the break between terms so no
   separator strands at end of line, and trim horizontal padding since
   the pill is now two lines. */
@media (max-width:520px){
  .elementor.elementor-8 .ng-hero-eb-a{display:block;}
  .elementor.elementor-8 .ng-hero-eb-sep{display:none;}
  .elementor.elementor-8 .ng-hero-eyebrow{padding:9px 12px;}
}

/* ===================================================
   H1 — IBM Plex Sans, max weight 700
   =================================================== */
.elementor.elementor-8 .ng-hero-h1 {
  font-family: var(--font-heading);
  font-weight: var(--fw-display);
  font-size: var(--fs-display);
  line-height: var(--lh-display);
  letter-spacing: var(--tr-display);
  color: var(--text);
  margin: 0;
}

/* ===================================================
   Forced H1 break — .ng-brk hidden on mobile,
   becomes display:block at 768px to split the two phrases.
   =================================================== */
.elementor.elementor-8 .ng-hero-h1 .ng-brk {
  display: none;
}

@media (min-width: 768px) {
  .elementor.elementor-8 .ng-hero-h1 .ng-brk {
    display: block;
  }

  .elementor.elementor-8 .ng-hero-h1 {
    text-wrap: auto;
  }
}

/* ===================================================
   Subhead — lede paragraph, secondary colour
   =================================================== */
.elementor.elementor-8 .ng-hero-sub {
  font-family: var(--font-body);
  font-weight: var(--fw-body);
  font-size: var(--fs-lede);
  line-height: var(--lh-lede);
  color: var(--text);
  max-width: 62ch;
  margin: 0;
}

/* ===================================================
   CTA button — gold fill, matches header button style.
   Targets the atomic e-button element which renders with
   no hash class (no Elementor styling set).
   Double selector covers both a and button elements.
   =================================================== */
.elementor.elementor-8 .ng-hero-cta,
.elementor.elementor-8 a.ng-hero-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--gold);
  color: var(--ink);
  font-family: var(--font-display);
  font-weight: var(--fw-ui);
  font-size: var(--fs-btn);
  letter-spacing: var(--tr-ui);
  line-height: var(--lh-ui);
  border-radius: var(--r-btn);
  padding: var(--pad-btn-y) var(--pad-btn-x);
  text-decoration: none;
  border: none;
  white-space: nowrap;
  cursor: pointer;
}

@media (prefers-reduced-motion: no-preference) {
  .elementor.elementor-8 .ng-hero-cta,
  .elementor.elementor-8 a.ng-hero-cta {
    transition: transform 0.2s ease, box-shadow 0.2s ease;
  }

  .elementor.elementor-8 .ng-hero-cta:hover,
  .elementor.elementor-8 a.ng-hero-cta:hover {
    transform: translateY(-2px);
    box-shadow:
      0 0 0 1px color-mix(in srgb, var(--gold) 30%, transparent),
      0 8px 28px color-mix(in srgb, var(--gold) 20%, transparent);
  }
}

.elementor.elementor-8 .ng-hero-cta:focus-visible,
.elementor.elementor-8 a.ng-hero-cta:focus-visible {
  outline: 2px solid var(--text);
  outline-offset: 2px;
}

/* ===================================================
   Media container — full-bleed with gradient extensions.
   When viewport > 1916px, background-image layers paint
   the gutters with gradients from edge colours into ink.
   Sizes computed as max(0, (100% - 1916px) / 2) so the
   layers collapse to nothing when image fills the viewport.
   =================================================== */
.elementor.elementor-8 .ng-hero-media {
  width: 100%;
  position: relative;
  background-color: var(--ink);
  background-image:
    linear-gradient(to right, var(--ink), var(--hero-edge-l)),
    linear-gradient(to left,  var(--ink), var(--hero-edge-r));
  background-size:
    max(0px, calc((100% - var(--hero-img-w)) / 2)) 100%,
    max(0px, calc((100% - var(--hero-img-w)) / 2)) 100%;
  background-position: left top, right top;
  background-repeat: no-repeat;
  line-height: 0;
}

/* ===================================================
   Hero image — native 1916px, scales down under max-width
   =================================================== */
.elementor.elementor-8 .ng-hero-img {
  display: block;
  width: var(--hero-img-w);
  max-width: 100%;
  height: auto;
  margin-inline: auto;
}

/* ===================================================
   Right half — CSS background, shown only on mobile.
   URL is passed via inline custom property on the element:
   style="--ng-hero-right-src:url('...')"
   Desktop: hidden (full 1916px image already shows both sides)
   =================================================== */
.elementor.elementor-8 .ng-hero-right {
  display: none;
}

@media (max-width: 1023px) {
  .elementor.elementor-8 .ng-hero-right {
    display: block;
    width: 100%;
    aspect-ratio: 958 / 722;
    background-image: var(--ng-hero-right-src);
    background-size: cover;
    background-position: center;
  }
}

/* --- Strip ------------------------------------------
   Override 3: colours sampled from the source image, not the
   brand tokens. Hardcoded on purpose. Do not replace them
   with token values.

   Grid at 1fr auto 1fr sized to the image width, not the
   content container. Measured source positions: LEGACY 13.3%,
   MODERNIZE 49.7%, AI 84.8%. Arrow one is longer than arrow
   two in the source too: 433px against 378px. Icons measure
   40x43 in the source; labels about 16px. */
.elementor.elementor-8 .ng-strip-outer {
  width: 100%;
  border-top: 1px solid var(--hero-rule);
  background-color: var(--ink);
}

.elementor.elementor-8 .ng-strip {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: var(--s-5);
  width: 100%;
  max-width: var(--hero-img-w);
  margin-inline: auto;
  padding-inline: 9%;
  padding-block: var(--s-5);
  box-sizing: border-box;
}

.elementor.elementor-8 .ng-strip .ng-strip-seg {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-5);
  min-width: 0;
}

.elementor.elementor-8 .ng-strip .ng-seg-right {
  justify-content: flex-end;
}

.elementor.elementor-8 .ng-strip .ng-strip-item {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  flex: 0 0 auto;
}

.elementor.elementor-8 .ng-strip .ng-strip-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  display: block;
}

@media (min-width: 1024px) {
  .elementor.elementor-8 .ng-strip .ng-strip-icon {
    width: 40px;
    height: 40px;
  }
}

/* Occludes the document behind it, reproducing the stacked
   look in the source. Ink is the strip background, so the fill
   is invisible as colour and only hides the outline beneath. */
.elementor.elementor-8 .ng-strip .ng-doc-front {
  fill: var(--ink);
}

.elementor.elementor-8 .ng-i-legacy    { color: var(--hero-legacy); }
.elementor.elementor-8 .ng-i-modernize { color: var(--hero-modern); }
.elementor.elementor-8 .ng-i-ai        { color: var(--hero-ai); }

/* Outfit at 15px. NOT JetBrains Mono, which is why the labels
   previously rendered too small next to the icons. */
.elementor.elementor-8 .ng-strip .ng-strip-label {
  font-family: var(--font-display);
  font-size: var(--fs-body-sm);
  font-weight: var(--fw-h5);
  letter-spacing: var(--tr-badge);
  line-height: var(--lh-ui);
  text-transform: uppercase;
  white-space: nowrap;
  overflow: visible;
}

.elementor.elementor-8 .ng-seg-left  .ng-strip-label { color: var(--hero-legacy); }
.elementor.elementor-8 .ng-item-mod  .ng-strip-label { color: var(--hero-modern); }
.elementor.elementor-8 .ng-seg-right .ng-strip-label { color: var(--hero-ai); }

/* The line is a CSS gradient span at flex:1 so it fills the
   whole gap. A fixed-width SVG line cannot, and a 1.5px stroke
   inside a scaled SVG falls below the visible threshold. The
   head is a separate fixed-size SVG triangle. */
.elementor.elementor-8 .ng-strip .ng-strip-arrow {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex: 1 1 auto;
  min-width: 40px;
}

.elementor.elementor-8 .ng-strip .ng-strip-line {
  flex: 1 1 auto;
  height: 1.5px;
  display: block;
}

.elementor.elementor-8 .ng-strip .ng-strip-head {
  width: 8px;
  height: 10px;
  flex: 0 0 auto;
  display: block;
}

.elementor.elementor-8 .ng-arrow-1 .ng-strip-line {
  background: linear-gradient(to right, var(--hero-legacy), var(--hero-modern));
}

.elementor.elementor-8 .ng-arrow-2 .ng-strip-line {
  background: linear-gradient(to right, var(--hero-modern), var(--hero-ai));
}

/* Stacks at tablet as well as mobile. At 768 the right 1fr
   column is 217px and the AI item alone is 277px, which
   collapses arrow two to a 32px stub. */
@media (max-width: 1023px) {
  .elementor.elementor-8 .ng-strip {
    grid-template-columns: 1fr;
    justify-items: start;
    gap: var(--s-2);
    padding-inline: var(--gutter);
  }
  .elementor.elementor-8 .ng-strip .ng-strip-seg {
    flex-direction: column;
    align-items: flex-start;
    gap: var(--s-2);
  }
  .elementor.elementor-8 .ng-strip .ng-strip-arrow {
    flex-direction: column;
    flex: 0 0 auto;
    min-width: 0;
    width: 32px;
    height: 28px;
    align-items: center;
  }
  .elementor.elementor-8 .ng-strip .ng-strip-line {
    width: 1.5px;
    height: auto;
    flex: 1 1 auto;
  }
  .elementor.elementor-8 .ng-strip .ng-strip-head {
    width: 10px;
    height: 8px;
    transform: rotate(90deg);
  }
  .elementor.elementor-8 .ng-arrow-1 .ng-strip-line {
    background: linear-gradient(to bottom, var(--hero-legacy), var(--hero-modern));
  }
  .elementor.elementor-8 .ng-arrow-2 .ng-strip-line {
    background: linear-gradient(to bottom, var(--hero-modern), var(--hero-ai));
  }
  .elementor.elementor-8 .ng-strip .ng-strip-label { white-space: normal; }
}