/* ============================================================
   i9Startups EVO-X
   Cinematic Hero Carousel 1.0
   Additive layer - preserves network/depth engines
   ============================================================ */

#hero.v12-hero{
  position:relative !important;
  overflow:hidden !important;
  isolation:isolate;
  background:#07121c !important;
}

#hero.v12-hero::before{
  content:"";
  position:absolute;
  inset:0;
  z-index:2;
  pointer-events:none;
  background:
    linear-gradient(
      90deg,
      rgba(3,10,17,.91) 0%,
      rgba(3,10,17,.78) 24%,
      rgba(3,10,17,.45) 46%,
      rgba(3,10,17,.18) 67%,
      rgba(3,10,17,.22) 100%
    ),
    linear-gradient(
      180deg,
      rgba(2,8,14,.18) 0%,
      rgba(2,8,14,.06) 52%,
      rgba(2,8,14,.32) 100%
    );
}

#hero .evox-hero-carousel{
  position:absolute;
  inset:0;
  z-index:0;
  overflow:hidden;
  pointer-events:none;
}

#hero .evox-hero-slide{
  position:absolute;
  inset:-1.5%;
  opacity:0;
  visibility:hidden;
  transition:
    opacity 900ms cubic-bezier(.2,.7,.2,1),
    visibility 900ms linear;
  will-change:opacity,transform;
}

#hero .evox-hero-slide.is-active{
  opacity:1;
  visibility:visible;
}

#hero .evox-hero-slide img{
  width:100%;
  height:100%;
  display:block;
  object-fit:cover;
  object-position:center center;
  transform:scale(1.01);
  transition:transform 7600ms cubic-bezier(.16,.8,.22,1);
  filter:
    saturate(.93)
    contrast(1.04)
    brightness(.86);
}

#hero .evox-hero-slide.is-active img{
  transform:scale(1.035);
}

/* Individual photographic focal points */
#hero .evox-hero-slide[data-slide="1"] img{
  object-position:56% 50%;
}

#hero .evox-hero-slide[data-slide="2"] img{
  object-position:58% 50%;
}

#hero .evox-hero-slide[data-slide="3"] img{
  object-position:67% 50%;
}

#hero .evox-hero-slide[data-slide="4"] img{
  object-position:56% 50%;
}

/* Hide previous static visual layer without removing its markup */
#hero .evo-people-layer,
#hero .v12-hero-media{
  opacity:0 !important;
  visibility:hidden !important;
  pointer-events:none !important;
}

/* Existing dynamic network stays above photography */
#hero #evo-network,
#hero .evo-network{
  z-index:3 !important;
  pointer-events:none !important;
}

/* Existing copy */
#hero .v12-hero-grid{
  position:relative !important;
  z-index:5 !important;
}

#hero .v12-hero-grid > div:first-child{
  position:relative;
  transition:
    opacity 360ms ease,
    transform 520ms cubic-bezier(.2,.7,.2,1);
}

#hero.evox-copy-changing .v12-hero-grid > div:first-child{
  opacity:0;
  transform:translate3d(0,10px,0);
}

#hero .v12-eyebrow,
#hero h1,
#hero .v12-hero-grid > div:first-child > p,
#hero .v12-actions{
  text-shadow:0 2px 16px rgba(0,0,0,.42);
}

/* Progress/navigation */
#hero .evox-hero-nav{
  position:absolute;
  z-index:8;
  left:max(24px,calc((100vw - 1440px)/2 + 40px));
  right:max(24px,calc((100vw - 1440px)/2 + 40px));
  bottom:18px;
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:12px;
  pointer-events:auto;
}

#hero .evox-hero-dot{
  appearance:none;
  border:0;
  padding:10px 0 0;
  margin:0;
  background:none;
  color:rgba(255,255,255,.6);
  text-align:left;
  cursor:pointer;
  font:600 11px/1.2 Arial,Helvetica,sans-serif;
  letter-spacing:.12em;
}

#hero .evox-hero-track{
  display:block;
  width:100%;
  height:2px;
  margin-bottom:8px;
  overflow:hidden;
  border-radius:999px;
  background:rgba(255,255,255,.2);
}

#hero .evox-hero-fill{
  display:block;
  width:100%;
  height:100%;
  background:#fff;
  transform:scaleX(0);
  transform-origin:left center;
}

#hero .evox-hero-dot.is-active{
  color:#fff;
}

#hero .evox-hero-dot.is-active .evox-hero-fill{
  animation:evoxHeroProgress 7000ms linear forwards;
}

#hero.is-paused .evox-hero-dot.is-active .evox-hero-fill{
  animation-play-state:paused;
}

@keyframes evoxHeroProgress{
  from{transform:scaleX(0)}
  to{transform:scaleX(1)}
}

@media (max-width:719px){

  #hero.v12-hero::before{
    background:
      linear-gradient(
        180deg,
        rgba(3,10,17,.40) 0%,
        rgba(3,10,17,.50) 30%,
        rgba(3,10,17,.82) 64%,
        rgba(3,10,17,.94) 100%
      );
  }

  #hero .evox-hero-slide{
    inset:0;
  }

  #hero .evox-hero-slide img{
    transform:scale(1.01);
  }

  #hero .evox-hero-slide.is-active img{
    transform:scale(1.02);
  }

  #hero .evox-hero-slide[data-slide="1"] img{
    object-position:64% 50%;
  }

  #hero .evox-hero-slide[data-slide="2"] img{
    object-position:73% 50%;
  }

  #hero .evox-hero-slide[data-slide="3"] img{
    object-position:72% 50%;
  }

  #hero .evox-hero-slide[data-slide="4"] img{
    object-position:58% 50%;
  }

  #hero .v12-hero-grid{
    align-items:end !important;
    padding-bottom:58px !important;
  }

  #hero .evox-hero-nav{
    left:18px;
    right:18px;
    bottom:12px;
    gap:7px;
  }

  #hero .evox-hero-dot{
    font-size:9px;
    padding-top:6px;
  }
}

@media (prefers-reduced-motion:reduce){

  #hero .evox-hero-slide,
  #hero .evox-hero-slide img,
  #hero .v12-hero-grid > div:first-child{
    transition:none !important;
    transform:none !important;
  }

  #hero .evox-hero-dot.is-active .evox-hero-fill{
    animation:none !important;
    transform:scaleX(1);
  }
}

/* ============================================================
   EVO-X GATE 10O-E3.1
   HERO VISUAL POLISH
   2026-08-31
   ============================================================ */


/* ------------------------------------------------------------
   1. DYNAMIC NETWORK
   More visible, still subordinate to content
   ------------------------------------------------------------ */

#hero #evo-network,
#hero .evo-network {
  opacity: .76 !important;
}

#hero #evo-network canvas,
#hero .evo-network canvas {
  opacity: .82 !important;
}


/* Preserve cinematic integration with photographs */
#hero #evo-network,
#hero .evo-network,
#hero #evo-network canvas,
#hero .evo-network canvas {
  mix-blend-mode: screen;
}


/* ------------------------------------------------------------
   2. HERO SAFETY
   Prevent any carousel element from expanding viewport
   ------------------------------------------------------------ */

#hero.v12-hero {
  width: 100% !important;
  max-width: 100vw !important;
  overflow-x: clip !important;
}

#hero.v12-hero,
#hero.v12-hero * {
  box-sizing: border-box;
}

#hero .evox-hero-carousel {
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}


/* ------------------------------------------------------------
   3. PROGRESS NAV
   Desktop normalization
   ------------------------------------------------------------ */

#hero .evox-hero-nav {
  width: auto;
  max-width: none;
  min-width: 0;
  box-sizing: border-box;
}

#hero .evox-hero-dot {
  min-width: 0;
  width: 100%;
  overflow: hidden;
}

#hero .evox-hero-track {
  width: 100%;
  max-width: 100%;
}


/* ------------------------------------------------------------
   4. MOBILE 01 / 02 / 03 / 04
   Exactly four equal columns inside viewport
   ------------------------------------------------------------ */

@media (max-width: 719px) {

  #hero.v12-hero {
    overflow-x: hidden !important;
    max-width: 100vw !important;
  }

  #hero .evox-hero-nav {
    position: absolute !important;

    left: 12px !important;
    right: auto !important;

    width: calc(100% - 24px) !important;
    max-width: calc(100% - 24px) !important;

    bottom: 12px !important;

    display: grid !important;
    grid-template-columns:
      minmax(0,1fr)
      minmax(0,1fr)
      minmax(0,1fr)
      minmax(0,1fr) !important;

    column-gap: 8px !important;
    row-gap: 0 !important;

    margin: 0 !important;
    padding: 0 !important;

    transform: none !important;
    overflow: hidden !important;
  }

  #hero .evox-hero-dot {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 7px 0 0 !important;

    overflow: hidden !important;

    font-size: 9px !important;
    line-height: 1 !important;

    letter-spacing: .08em !important;

    white-space: nowrap !important;
  }

  #hero .evox-hero-track {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 2px !important;

    margin: 0 0 8px 0 !important;

    overflow: hidden !important;
  }

  #hero .evox-hero-fill {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Content itself must never force horizontal viewport */
  #hero .v12-hero-grid,
  #hero .v12-hero-grid > div,
  #hero .v12-actions,
  #hero h1,
  #hero p {
    min-width: 0 !important;
    max-width: 100% !important;
  }

  #hero .v12-actions {
    width: 100% !important;
  }

  #hero .v12-actions a {
    max-width: 100% !important;
  }
}


/* ------------------------------------------------------------
   5. EXTRA NARROW MOBILE
   iPhone SE / compact Android
   ------------------------------------------------------------ */

@media (max-width: 390px) {

  #hero .evox-hero-nav {
    left: 10px !important;
    width: calc(100% - 20px) !important;
    max-width: calc(100% - 20px) !important;
    column-gap: 6px !important;
  }

  #hero .evox-hero-dot {
    font-size: 8px !important;
  }
}


/* ------------------------------------------------------------
   6. REDUCED MOTION PRESERVATION
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {

  #hero #evo-network,
  #hero .evo-network {
    transition: none !important;
  }
}


/* ============================================================
   EVO-X GATE 10O-E3.2
   MOBILE HERO NAV HARD FIX
   ============================================================ */

@media (max-width: 719px) {

  html,
  body {
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  #hero,
  #hero.v12-hero {
    position: relative !important;
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin-left: 0 !important;
    margin-right: 0 !important;

    overflow-x: hidden !important;
  }

  #hero .evox-hero-nav {
    position: absolute !important;

    left: 16px !important;
    right: 16px !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;
    padding: 0 !important;

    bottom: 12px !important;

    display: grid !important;

    grid-template-columns:
      repeat(4, minmax(0, 1fr)) !important;

    gap: 8px !important;

    transform: none !important;
    translate: none !important;

    overflow: visible !important;

    box-sizing: border-box !important;
  }

  #hero .evox-hero-dot {
    appearance: none !important;

    display: block !important;

    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;

    margin: 0 !important;

    padding:
      7px
      0
      0
      0 !important;

    border: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;

    font-size: 9px !important;
    line-height: 1 !important;
    letter-spacing: .06em !important;

    white-space: nowrap !important;
  }

  #hero .evox-hero-track {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    height: 2px !important;

    margin:
      0
      0
      8px
      0 !important;

    padding: 0 !important;

    overflow: hidden !important;

    box-sizing: border-box !important;
  }

  #hero .evox-hero-fill {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding: 0 !important;

    box-sizing: border-box !important;
  }

  /* critical: every grid child must be allowed to shrink */
  #hero .evox-hero-nav > * {
    min-width: 0 !important;
    max-width: 100% !important;
  }

}


/* Extra narrow devices */
@media (max-width: 390px) {

  #hero .evox-hero-nav {
    left: 12px !important;
    right: 12px !important;
    gap: 6px !important;
  }

  #hero .evox-hero-dot {
    font-size: 8px !important;
  }

}


/* Emergency viewport guard */
@media (max-width: 719px) {

  #hero .evox-hero-carousel,
  #hero .evox-hero-slide,
  #hero .v12-hero-grid,
  #hero .v12-hero-grid > *,
  #hero .v12-actions {
    min-width: 0 !important;
    max-width: 100% !important;
  }

}

/* ============================================================
   EVO-X GATE 10O-E3.4
   MOBILE NAV DEFINITIVE GEOMETRY
   Root cause:
   nav width = hero width + left offset
   Solution:
   nav border-box = exactly 100% of hero
   spacing moved inside via padding
   ============================================================ */

@media (max-width:719px) {

  #hero .evox-hero-nav {
    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;

    column-gap: 8px !important;
    row-gap: 0 !important;

    transform: none !important;
    translate: none !important;

    overflow: hidden !important;
  }

  #hero .evox-hero-nav > .evox-hero-dot {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    box-sizing: border-box !important;
  }

  #hero .evox-hero-track {
    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

}


/* Compact mobile */
@media (max-width:390px) {

  #hero .evox-hero-nav {
    left: 0 !important;
    right: auto !important;

    width: 100% !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    column-gap: 6px !important;
  }

}

/* ============================================================
   EVO-X GATE 10O-E3.4
   MOBILE HERO NAV DEFINITIVE GEOMETRY
   ============================================================ */

@media (max-width:719px) {

  #hero,
  #hero.v12-hero {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
  }

  #hero .evox-hero-nav {
    position: absolute !important;

    left: 0 !important;
    right: auto !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    padding-left: 18px !important;
    padding-right: 18px !important;

    margin: 0 !important;

    box-sizing: border-box !important;

    display: grid !important;
    grid-template-columns: repeat(4, minmax(0,1fr)) !important;

    column-gap: 8px !important;
    row-gap: 0 !important;

    transform: none !important;
    translate: none !important;

    overflow: hidden !important;
  }

  #hero .evox-hero-nav > .evox-hero-dot {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    margin: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

  #hero .evox-hero-track {
    display: block !important;

    width: 100% !important;
    min-width: 0 !important;
    max-width: 100% !important;

    box-sizing: border-box !important;
    overflow: hidden !important;
  }

}

@media (max-width:390px) {

  #hero .evox-hero-nav {
    left: 0 !important;
    right: auto !important;

    width: 100% !important;

    padding-left: 12px !important;
    padding-right: 12px !important;

    column-gap: 6px !important;
  }

}