/* Electrical & Instrumentation: add this page's custom section styles here. Shared catalogue styles load first. */
/* =========================================================
   SINDYBAD — ELECTRICAL & INSTRUMENTATION
   Premium / full-width / scoped
========================================================= */

.sbei,
.sbei * {
  box-sizing: border-box;
}


/* =========================================================
   ROOT
========================================================= */

.sbei {
  --sbei-blue: #306FE8;
  --sbei-blue-light: #67A0FF;

  --sbei-cyan: #23B9D3;
  --sbei-cyan-light: #72D8EA;

  --sbei-purple: #7137D6;
  --sbei-orange: #F09A2B;

  --sbei-text: #171824;
  --sbei-muted: #686D79;

  --sbei-line:
    rgba(23,24,36,.085);

  position: relative;
  isolation: isolate;

  width: 100%;

  min-height:
    calc(100svh - 72px);

  overflow: hidden;

  color:
    var(--sbei-text);

  background:
    radial-gradient(
      circle at 12% 18%,
      rgba(48,111,232,.045),
      transparent 27%
    ),
    radial-gradient(
      circle at 39% 88%,
      rgba(113,55,214,.035),
      transparent 28%
    ),
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FAFBFD 50%,
      #F2F3F7 100%
    );
}


/* top accent */

.sbei::before {
  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  width: 150px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbei-blue),
      var(--sbei-cyan),
      var(--sbei-purple),
      var(--sbei-orange)
    );
}


/* architectural background */

.sbei::after {
  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  opacity: .42;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(23,24,36,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(23,24,36,.022) 1px,
      transparent 1px
    );

  background-size:
    76px 76px;

  -webkit-mask-image:
    linear-gradient(
      90deg,
      #000,
      rgba(0,0,0,.42) 45%,
      transparent 74%
    );

  mask-image:
    linear-gradient(
      90deg,
      #000,
      rgba(0,0,0,.42) 45%,
      transparent 74%
    );
}


/* =========================================================
   MAIN
========================================================= */

.sbei__main {
  display: grid;

  grid-template-columns:
    minmax(0,46%)
    minmax(0,54%);

  width: 100%;

  min-height:
    calc(100svh - 164px);
}


/* =========================================================
   CONTENT
========================================================= */

.sbei__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  overflow: hidden;

  padding:
    clamp(54px,6vh,84px)
    clamp(42px,6vw,115px);
}


.sbei__content::before {
  position: absolute;

  z-index: 0;

  top: 8%;
  left: -24%;

  width: 63%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(48,111,232,.055);

  border-radius: 50%;

  content: "";
}


.sbei__content::after {
  position: absolute;

  z-index: 0;

  right: -10%;
  bottom: -23%;

  width: 45%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(113,55,214,.045);

  border-radius: 50%;

  content: "";
}


.sbei__content-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;
}


/* =========================================================
   KICKER
========================================================= */

.sbei__kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color:
    #9297A2;

  font-size: 9px;
  font-weight: 900;

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sbei__kicker span {
  color:
    var(--sbei-blue);
}


.sbei__kicker i {
  width: 36px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbei-blue),
      var(--sbei-cyan),
      var(--sbei-orange)
    );
}


/* =========================================================
   CLASSIFICATION
========================================================= */

.sbei__classification {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.sbei__classification > span {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

  border:
    1px solid
    rgba(48,111,232,.14);

  border-radius: 7px;

  color:
    var(--sbei-blue);

  background:
    rgba(48,111,232,.035);

  font-size: 7px;
  font-weight: 900;
}


.sbei__classification small {
  display: block;

  color:
    #999EA8;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .11em;
}


.sbei__classification strong {
  display: block;

  margin-top: 3px;

  color:
    #696E79;

  font-size: 8px;
}


/* =========================================================
   TITLE
========================================================= */

.sbei__title {
  max-width: 675px;

  margin: 0;

  color:
    var(--sbei-text);

  font-size:
    clamp(34px,3vw,39px);

  font-weight: 880;

  line-height: 1.01;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbei__title span {
  display: block;

  margin-top: 6px;

  color:
    var(--sbei-blue);
}


/* =========================================================
   COPY
========================================================= */

.sbei__lead {
  max-width: 650px;

  margin:
    24px
    0
    0;

  color:
    #5F6571;

  font-size:
    clamp(13px,.95vw,15px);

  line-height: 1.72;
}


.sbei__secondary {
  max-width: 625px;

  margin:
    11px
    0
    0;

  color:
    #898E99;

  font-size: 11px;

  line-height: 1.65;
}


/* =========================================================
   TAGS
========================================================= */

.sbei__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbei__tags span {
  padding:
    7px
    10px;

  border:
    1px solid
    rgba(23,24,36,.075);

  border-radius: 5px;

  color:
    #686E79;

  background:
    rgba(255,255,255,.67);

  font-size: 8px;
  font-weight: 800;
}


/* =========================================================
   ACTIONS
========================================================= */

.sbei__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 26px;
}


.sbei__button {
  display: inline-flex;

  min-height: 47px;

  align-items: center;
  justify-content: center;

  gap: 14px;

  padding:
    0
    18px;

  border:
    1px solid
    rgba(23,24,36,.11);

  border-radius: 7px;

  color:
    var(--sbei-text);

  background:
    rgba(255,255,255,.78);

  font-size: 10px;
  font-weight: 850;

  text-decoration: none;

  transition:
    transform .18s ease,
    box-shadow .18s ease;
}


.sbei__button--primary {
  color: #FFFFFF;

  border-color:
    var(--sbei-blue);

  background:
    linear-gradient(
      135deg,
      #225FCB,
      var(--sbei-blue)
    );

  box-shadow:
    0 14px 29px
    rgba(48,111,232,.20);
}


@media (hover:hover) {

  .sbei__button:hover {
    transform:
      translateY(-2px);

    box-shadow:
      0 12px 28px
      rgba(23,24,36,.09);
  }

}


/* =========================================================
   SERVICE LINE
========================================================= */

.sbei__service-line {
  display: grid;

  grid-template-columns:
    repeat(3,minmax(0,1fr));

  max-width: 660px;

  margin-top: 31px;

  border-top:
    1px solid
    var(--sbei-line);

  border-bottom:
    1px solid
    var(--sbei-line);
}


.sbei__service-line > div {
  padding:
    13px
    12px;
}


.sbei__service-line > div:first-child {
  padding-left: 0;
}


.sbei__service-line > div + div {
  border-left:
    1px solid
    rgba(23,24,36,.06);
}


.sbei__service-line span {
  display: block;

  color:
    var(--sbei-orange);

  font-size: 7px;
  font-weight: 900;
}


.sbei__service-line strong {
  display: block;

  margin-top: 5px;

  color:
    #535965;

  font-size: 9px;
}


/* =========================================================
   VISUAL
========================================================= */

.sbei__visual {
  min-width: 0;

  min-height: 0;

  padding:
    16px
    16px
    16px
    0;
}


/* =========================================================
   FIGURE
========================================================= */

.sbei__figure {
  position: relative;

  width: 100%;
  height: 100%;

  min-height:
    calc(100svh - 196px);

  margin: 0;

  overflow: hidden;

  border:
    1px solid
    rgba(23,24,36,.08);

  border-radius:
    28px
    28px
    28px
    80px;

  background:
    #070914;

  box-shadow:
    0 28px 76px
    rgba(24,30,63,.17);
}


/* =========================================================
   IMAGE
========================================================= */

.sbei__image {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

  filter:
    saturate(.73)
    contrast(1.09)
    brightness(.72);

  transform:
    translate3d(
      var(--sbei-x,0),
      var(--sbei-y,0),
      0
    )
    scale(1.035);

  transition:
    transform .9s
    cubic-bezier(.2,.7,.2,1);
}


/* =========================================================
   SHADE
========================================================= */

.sbei__shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(5,6,15,.10),
      rgba(5,6,15,.04) 33%,
      rgba(6,7,18,.19) 61%,
      rgba(5,6,15,.80)
    ),
    linear-gradient(
      90deg,
      rgba(8,9,22,.24),
      transparent 55%
    ),
    radial-gradient(
      circle at 68% 37%,
      rgba(48,111,232,.16),
      transparent 30%
    );
}


/* =========================================================
   CIRCUIT GRID
========================================================= */

.sbei__grid {
  position: absolute;

  z-index: 3;

  inset: 0;

  opacity: .20;

  pointer-events: none;

  background:
    linear-gradient(
      rgba(255,255,255,.08) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(255,255,255,.08) 1px,
      transparent 1px
    );

  background-size:
    62px 62px;

  -webkit-mask-image:
    radial-gradient(
      circle at 56% 45%,
      #000,
      transparent 76%
    );

  mask-image:
    radial-gradient(
      circle at 56% 45%,
      #000,
      transparent 76%
    );
}


/* circuit detail */

.sbei__circuit {
  position: absolute;

  z-index: 3;

  top: 27%;
  right: -8%;

  width: 76%;
  height: 38%;

  border-top:
    1px solid
    rgba(35,185,211,.21);

  border-bottom:
    1px solid
    rgba(113,55,214,.15);

  transform:
    rotate(-9deg);

  pointer-events: none;
}


/* =========================================================
   TOP
========================================================= */

.sbei__visual-top {
  position: absolute;

  z-index: 8;

  top: 27px;
  right: 29px;
  left: 29px;

  display: flex;

  align-items: center;
  justify-content: space-between;
}


.sbei__visual-top span {
  display: flex;

  align-items: center;

  gap: 8px;

  color:
    rgba(255,255,255,.68);

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .14em;
}


.sbei__visual-top span i {
  width: 6px;
  height: 6px;

  border-radius: 50%;

  background:
    var(--sbei-cyan-light);

  box-shadow:
    0 0 11px
    rgba(114,216,234,.58);
}


.sbei__visual-top b {
  color:
    rgba(255,255,255,.34);

  font-size: 7px;

  letter-spacing: .13em;
}


/* =========================================================
   INSTRUMENT TARGET
========================================================= */

.sbei__instrument {
  position: absolute;

  z-index: 4;

  top: 46%;
  right: 8%;

  width:
    min(47%,420px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(103,160,255,.20);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


.sbei__instrument::before,
.sbei__instrument::after {
  position: absolute;

  border-radius: 50%;

  content: "";
}


.sbei__instrument::before {
  inset: 18%;

  border:
    1px solid
    rgba(114,216,234,.13);
}


.sbei__instrument::after {
  inset: 36%;

  border:
    1px dashed
    rgba(240,154,43,.25);
}


.sbei__instrument > span {
  position: absolute;

  top: 50%;
  left: 50%;
}


.sbei__instrument > span:nth-child(1) {
  width: 112%;
  height: 1px;

  background:
    rgba(255,255,255,.07);

  transform:
    translate(-50%,-50%);
}


.sbei__instrument > span:nth-child(2) {
  width: 1px;
  height: 112%;

  background:
    rgba(255,255,255,.07);

  transform:
    translate(-50%,-50%);
}


.sbei__instrument > span:nth-child(3) {
  width: 72%;
  height: 72%;

  border:
    1px solid
    rgba(113,55,214,.13);

  border-radius: 50%;

  transform:
    translate(-50%,-50%);
}


.sbei__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbei-cyan-light);

  box-shadow:
    0 0 0 5px
    rgba(114,216,234,.10),
    0 0 16px
    rgba(114,216,234,.42);
}


.sbei__node--a {
  top: 12%;
  right: 18%;
}


.sbei__node--b {
  top: 52%;
  right: -4px;

  background:
    var(--sbei-orange);
}


.sbei__node--c {
  bottom: 14%;
  left: 12%;

  background:
    var(--sbei-purple);
}


/* =========================================================
   SIGNAL WAVE
========================================================= */

.sbei__signal {
  position: absolute;

  z-index: 5;

  top: 83px;
  left: 30px;

  display: flex;

  height: 54px;

  align-items: center;

  gap: 5px;

  opacity: .52;
}


.sbei__signal span {
  width: 2px;

  border-radius: 4px;

  background:
    linear-gradient(
      var(--sbei-cyan-light),
      var(--sbei-purple)
    );
}


.sbei__signal span:nth-child(1),
.sbei__signal span:nth-child(7) {
  height: 14px;
}


.sbei__signal span:nth-child(2),
.sbei__signal span:nth-child(6) {
  height: 26px;
}


.sbei__signal span:nth-child(3),
.sbei__signal span:nth-child(5) {
  height: 39px;
}


.sbei__signal span:nth-child(4) {
  height: 52px;
}


/* =========================================================
   BRAND
========================================================= */

.sbei__brand {
  position: absolute;

  z-index: 8;

  top: 70px;
  right: 28px;

  display: grid;

  width: 56px;
  height: 56px;

  place-content: center;

  border:
    1px solid
    rgba(255,255,255,.24);

  border-radius: 50%;

  color: #FFFFFF;

  background:
    rgba(6,7,18,.27);

  text-align: center;
}


.sbei__brand strong {
  font-size: 15px;
  line-height: 1;
}


.sbei__brand span {
  margin-top: 4px;

  font-size: 4px;
  font-weight: 900;

  letter-spacing: .10em;
}


/* =========================================================
   VERTICAL
========================================================= */

.sbei__vertical {
  position: absolute;

  z-index: 6;

  right: 21px;
  top: 50%;

  color:
    rgba(255,255,255,.24);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .18em;

  transform:
    translateY(-50%)
    rotate(90deg);
}


/* =========================================================
   VISUAL CARD
========================================================= */

.sbei__visual-card {
  position: absolute;

  z-index: 8;

  right:
    clamp(24px,3vw,46px);

  bottom:
    clamp(76px,8vw,110px);

  left:
    clamp(24px,3vw,46px);

  max-width: 660px;

  padding:
    20px
    22px;

  border:
    1px solid
    rgba(255,255,255,.19);

  border-radius: 13px;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      rgba(6,7,18,.91),
      rgba(14,17,40,.76)
    );

  box-shadow:
    0 22px 52px
    rgba(0,0,0,.21);
}


.sbei__visual-card-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbei__visual-card-head span {
  color:
    #8DDBF0;

  font-size: 7px;
  font-weight: 900;

  letter-spacing: .13em;
}


.sbei__visual-card-head i {
  width: 34px;
  height: 1px;

  background:
    linear-gradient(
      90deg,
      var(--sbei-cyan),
      var(--sbei-purple),
      var(--sbei-orange)
    );
}


.sbei__visual-card-head small {
  color:
    rgba(255,255,255,.38);

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .10em;
}


.sbei__visual-card h2 {
  margin:
    9px
    0
    0;

  color: #FFFFFF;

  font-size:
    clamp(20px,1.7vw,28px);

  font-weight: 850;

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbei__visual-card p {
  max-width: 540px;

  margin:
    8px
    0
    0;

  color:
    rgba(255,255,255,.64);

  font-size: 10px;

  line-height: 1.6;
}


.sbei__visual-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

  padding-top: 12px;

  border-top:
    1px solid
    rgba(255,255,255,.09);
}


.sbei__visual-meta span {
  padding:
    5px
    7px;

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 5px;

  color:
    rgba(255,255,255,.52);

  font-size: 6px;
  font-weight: 850;

  letter-spacing: .09em;
}


/* =========================================================
   TECHNICAL FOOTER
========================================================= */

.sbei__technical {
  position: absolute;

  z-index: 8;

  right: 24px;
  bottom: 22px;
  left: 24px;

  display: grid;

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

  border:
    1px solid
    rgba(255,255,255,.10);

  border-radius: 9px;

  background:
    rgba(6,7,18,.43);
}


.sbei__technical > div {
  padding:
    10px
    12px;
}


.sbei__technical > div + div {
  border-left:
    1px solid
    rgba(255,255,255,.07);
}


.sbei__technical span {
  display: block;

  color:
    var(--sbei-orange);

  font-size: 6px;
  font-weight: 900;
}


.sbei__technical strong {
  display: block;

  margin-top: 3px;

  color:
    rgba(255,255,255,.68);

  font-size: 7px;
}


/* =========================================================
   PRODUCT RAIL
========================================================= */

.sbei__rail {
  position: relative;

  z-index: 10;

  min-height: 92px;

  border-top:
    1px solid
    rgba(23,24,36,.075);

  background:
    rgba(255,255,255,.95);
}


.sbei__rail-inner {
  display: grid;

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

  width: 100%;

  min-height: 92px;
}


.sbei__rail-inner > a {
  position: relative;

  display: grid;

  grid-template-columns:
    27px
    minmax(0,1fr)
    auto;

  align-items: center;

  gap: 9px;

  min-width: 0;

  padding:
    0
    clamp(16px,2.2vw,34px);

  border-right:
    1px solid
    rgba(23,24,36,.06);

  color:
    inherit;

  text-decoration: none;

  transition:
    background .18s ease;
}


.sbei__rail-inner > a > span {
  color:
    var(--sbei-blue);

  font-size: 7px;
  font-weight: 900;
}


.sbei__rail-inner small {
  display: block;

  color:
    #9A9FAA;

  font-size: 6px;
  font-weight: 900;

  letter-spacing: .09em;
}


.sbei__rail-inner strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    #484D59;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbei__rail-inner i {
  color:
    #9A9FAA;

  font-size: 11px;

  font-style: normal;
}


.sbei__rail-inner > a::after {
  position: absolute;

  right: 20px;
  bottom: 0;
  left: 20px;

  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbei-blue),
      var(--sbei-cyan),
      var(--sbei-purple),
      var(--sbei-orange)
    );

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    transform .2s ease;
}


@media (hover:hover) {

  .sbei__rail-inner > a:hover {
    background:
      rgba(48,111,232,.02);
  }


  .sbei__rail-inner > a:hover::after {
    transform:
      scaleX(1);
  }

}


/* =========================================================
   ACCESSIBILITY
========================================================= */

.sbei a:focus-visible {
  outline:
    2px solid
    var(--sbei-blue);

  outline-offset: 3px;
}


/* =========================================================
   TABLET
========================================================= */

@media (max-width:1050px) {

  .sbei {
    min-height: auto;
  }


  .sbei__main {
    grid-template-columns: 1fr;

    min-height: auto;
  }


  .sbei__content {
    padding:
      70px
      28px
      44px;
  }


  .sbei__content-inner {
    max-width: 820px;
  }


  .sbei__visual {
    padding:
      0
      28px
      28px;
  }


  .sbei__figure {
    height: 650px;

    min-height: 650px;
  }


  .sbei__rail-inner {
    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbei__rail-inner > a {
    min-height: 76px;

    border-bottom:
      1px solid
      rgba(23,24,36,.06);
  }

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width:650px) {

  .sbei__content {
    padding:
      54px
      16px
      34px;
  }


  .sbei__kicker b {
    display: none;
  }


  .sbei__title {
    font-size:
      clamp(34px,8.5vw,37px);
  }


  .sbei__lead {
    font-size: 13px;
  }


  .sbei__actions {
    flex-direction: column;
  }


  .sbei__button {
    width: 100%;
  }


  .sbei__service-line {
    grid-template-columns: 1fr;
  }


  .sbei__service-line > div {
    padding:
      11px
      0;
  }


  .sbei__service-line > div + div {
    border-top:
      1px solid
      rgba(23,24,36,.06);

    border-left: 0;
  }


  .sbei__visual {
    padding:
      0
      14px
      14px;
  }


  .sbei__figure {
    height: 570px;

    min-height: 570px;

    border-radius:
      20px
      20px
      20px
      48px;
  }


  .sbei__visual-top {
    top: 18px;
    right: 18px;
    left: 18px;
  }


  .sbei__vertical {
    display: none;
  }


  .sbei__brand {
    top: 57px;
    right: 18px;

    width: 48px;
    height: 48px;
  }


  .sbei__instrument {
    right: -30px;

    width: 230px;
  }


  .sbei__signal {
    top: 65px;
    left: 18px;
  }


  .sbei__visual-card {
    right: 14px;
    bottom: 105px;
    left: 14px;

    padding: 17px;
  }


  .sbei__technical {
    right: 14px;
    bottom: 14px;
    left: 14px;

    grid-template-columns:
      repeat(2,minmax(0,1fr));
  }


  .sbei__technical > div:nth-child(3) {
    border-top:
      1px solid
      rgba(255,255,255,.07);

    border-left: 0;
  }


  .sbei__technical > div:nth-child(4) {
    border-top:
      1px solid
      rgba(255,255,255,.07);
  }


  .sbei__rail-inner {
    grid-template-columns: 1fr;
  }


  .sbei__rail-inner > a {
    min-height: 67px;

    border-right: 0;
  }

}


/* =========================================================
   REDUCED MOTION
========================================================= */

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

  .sbei *,
  .sbei *::before,
  .sbei *::after {
    transition-duration:
      .01ms !important;
  }

}