/* Industrial Services: page-specific styles. */


/*hero section start here */

/* =========================================================
   SINDYBAD — INDUSTRIAL CONSUMABLES
   Premium MRO / Operational Supply Section
========================================================= */

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


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

.sbic {
  --sbic-orange: #FF7A00;
  --sbic-orange-soft: #F09A2B;

  --sbic-copper: #B96035;
  --sbic-copper-light: #DB8B58;

  --sbic-purple: #7137D6;

  --sbic-text: #17171C;
  --sbic-muted: #6C6869;

  --sbic-dark: #100D0D;
  --sbic-dark-2: #1D1412;

  --sbic-line:
    rgba(23,23,28,.085);

  position: relative;
  isolation: isolate;

  width: 100%;

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

  overflow: hidden;

  color:
    var(--sbic-text);

  background:
    radial-gradient(
      circle at 13% 20%,
      rgba(255,122,0,.045),
      transparent 27%
    ),
    radial-gradient(
      circle at 39% 88%,
      rgba(113,55,214,.028),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FCFAF9 48%,
      #F5F1EF 100%
    );
}


/* top signature */

.sbic::before {
  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  width: 156px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbic-orange),
      var(--sbic-copper),
      var(--sbic-purple)
    );
}


/* subtle editorial grid */

.sbic::after {
  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  pointer-events: none;

  opacity: .42;

  background:
    linear-gradient(
      rgba(30,22,20,.022) 1px,
      transparent 1px
    ),
    linear-gradient(
      90deg,
      rgba(30,22,20,.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
========================================================= */

.sbic__main {
  display: grid;

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

  width: 100%;

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


/* =========================================================
   LEFT
========================================================= */

.sbic__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  overflow: hidden;

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


.sbic__content::before {
  position: absolute;

  z-index: 0;

  top: 8%;
  left: -24%;

  width: 63%;

  aspect-ratio: 1;

  border:
    1px solid
    rgba(255,122,0,.055);

  border-radius: 50%;

  content: "";
}


.sbic__content::after {
  position: absolute;

  z-index: 0;

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

  width: 45%;

  aspect-ratio: 1;

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

  border-radius: 50%;

  content: "";
}


.sbic__content-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;
}


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

.sbic__kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color:
    #97908E;

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

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sbic__kicker span {
  color:
    var(--sbic-orange);
}


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

  background:
    linear-gradient(
      90deg,
      var(--sbic-orange),
      var(--sbic-copper),
      var(--sbic-purple)
    );
}


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

.sbic__classification {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.sbic__classification > span {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

  border:
    1px solid
    rgba(255,122,0,.16);

  border-radius: 7px;

  color:
    var(--sbic-orange);

  background:
    rgba(255,122,0,.035);

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


.sbic__classification small {
  display: block;

  color:
    #9F9895;

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

  letter-spacing: .11em;
}


.sbic__classification strong {
  display: block;

  margin-top: 3px;

  color:
    #6B6461;

  font-size: 8px;
}


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

.sbic__title {
  max-width: 670px;

  margin: 0;

  color:
    var(--sbic-text);

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

  font-weight: 880;

  line-height: 1.01;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbic__title span {
  display: block;

  margin-top: 6px;

  color:
    var(--sbic-orange);
}


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

.sbic__lead {
  max-width: 650px;

  margin:
    24px
    0
    0;

  color:
    #625D5B;

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

  line-height: 1.72;
}


.sbic__secondary {
  max-width: 625px;

  margin:
    11px
    0
    0;

  color:
    #908987;

  font-size: 11px;

  line-height: 1.65;
}


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

.sbic__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbic__tags span {
  padding:
    7px
    10px;

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

  border-radius: 5px;

  color:
    #6D6663;

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

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


/* =========================================================
   BUTTONS
========================================================= */

.sbic__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 26px;
}


.sbic__button {
  display: inline-flex;

  min-height: 47px;

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

  gap: 14px;

  padding:
    0
    18px;

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

  border-radius: 7px;

  color:
    var(--sbic-text);

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

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

  text-decoration: none;

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


.sbic__button--primary {
  color: #FFFFFF;

  border-color:
    var(--sbic-orange);

  background:
    linear-gradient(
      135deg,
      #D85F00,
      var(--sbic-orange)
    );

  box-shadow:
    0 14px 29px
    rgba(255,122,0,.20);
}


@media (hover:hover) {

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

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

}


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

.sbic__service-line {
  display: grid;

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

  max-width: 660px;

  margin-top: 31px;

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

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


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


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


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


.sbic__service-line span {
  display: block;

  color:
    var(--sbic-orange);

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


.sbic__service-line strong {
  display: block;

  margin-top: 5px;

  color:
    #57504E;

  font-size: 9px;
}


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

.sbic__visual {
  min-width: 0;

  min-height: 0;

  padding:
    16px
    16px
    16px
    0;
}


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

.sbic__figure {
  position: relative;

  width: 100%;
  height: 100%;

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

  margin: 0;

  overflow: hidden;

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

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

  background:
    var(--sbic-dark);

  box-shadow:
    0 28px 76px
    rgba(52,31,22,.17);
}


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

.sbic__image {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

  filter:
    saturate(.74)
    contrast(1.08)
    brightness(.72);

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

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


/* =========================================================
   OVERLAY
========================================================= */

.sbic__shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(12,8,8,.08),
      rgba(12,8,8,.03) 31%,
      rgba(15,9,8,.20) 60%,
      rgba(10,6,6,.84)
    ),
    linear-gradient(
      90deg,
      rgba(12,7,7,.23),
      transparent 54%
    ),
    radial-gradient(
      circle at 68% 38%,
      rgba(255,122,0,.15),
      transparent 30%
    );
}


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

.sbic__grid {
  position: absolute;

  z-index: 3;

  inset: 0;

  opacity: .18;

  pointer-events: none;

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

  background-size:
    64px 64px;

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

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


/* =========================================================
   SUPPLY TRACKS
========================================================= */

.sbic__track {
  position: absolute;

  z-index: 4;

  left: -7%;

  width: 112%;
  height: 1px;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.16)
      0
      13px,
      transparent
      13px
      26px
    );
}


.sbic__track--a {
  top: 34%;

  transform:
    rotate(-8deg);
}


.sbic__track--b {
  bottom: 30%;

  opacity: .55;

  transform:
    rotate(7deg);
}


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

.sbic__visual-top {
  position: absolute;

  z-index: 8;

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

  display: flex;

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


.sbic__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;
}


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

  border-radius: 50%;

  background:
    var(--sbic-orange-soft);

  box-shadow:
    0 0 12px
    rgba(240,154,43,.64);
}


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

  font-size: 7px;

  letter-spacing: .13em;
}


/* =========================================================
   INVENTORY RING
========================================================= */

.sbic__inventory {
  position: absolute;

  z-index: 4;

  top: 45%;
  right: 8%;

  width:
    min(47%,420px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(240,154,43,.21);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


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

  border-radius: 50%;

  content: "";
}


.sbic__inventory::before {
  inset: 18%;

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


.sbic__inventory::after {
  inset: 36%;

  border:
    1px dashed
    rgba(113,55,214,.28);
}


.sbic__inventory > span {
  position: absolute;

  top: 50%;
  left: 50%;
}


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

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

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


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

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

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


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

  border:
    1px solid
    rgba(255,122,0,.12);

  border-radius: 50%;

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


/* nodes */

.sbic__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbic-orange-soft);

  box-shadow:
    0 0 0 5px
    rgba(240,154,43,.11),
    0 0 16px
    rgba(240,154,43,.45);
}


.sbic__node--a {
  top: 12%;
  right: 17%;
}


.sbic__node--b {
  top: 51%;
  right: -4px;

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


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

  background:
    var(--sbic-copper-light);
}


/* =========================================================
   GHOST NUMBER
========================================================= */

.sbic__ghost {
  position: absolute;

  z-index: 3;

  top: 47%;
  right: 10%;

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

  font-size:
    clamp(110px,10vw,190px);

  font-weight: 900;

  line-height: 1;

  letter-spacing:
    -.08em;

  transform:
    translateY(-50%);

  pointer-events: none;
}


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

.sbic__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(13,8,8,.27);

  text-align: center;
}


.sbic__brand strong {
  font-size: 15px;

  line-height: 1;
}


.sbic__brand span {
  margin-top: 4px;

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

  letter-spacing: .10em;
}


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

.sbic__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);
}


/* =========================================================
   PANEL
========================================================= */

.sbic__panel {
  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,.18);

  border-radius: 13px;

  color: #FFFFFF;

  background:
    linear-gradient(
      135deg,
      rgba(15,9,8,.91),
      rgba(35,19,15,.76)
    );

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


.sbic__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbic__panel-head span {
  color:
    #FFB470;

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

  letter-spacing: .13em;
}


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

  background:
    linear-gradient(
      90deg,
      var(--sbic-orange),
      var(--sbic-copper),
      var(--sbic-purple)
    );
}


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

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

  letter-spacing: .10em;
}


.sbic__panel h2 {
  margin:
    9px
    0
    0;

  color: #FFFFFF;

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

  font-weight: 850;

  line-height: 1.05;

  letter-spacing:
    -.035em;
}


.sbic__panel p {
  max-width: 540px;

  margin:
    8px
    0
    0;

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

  font-size: 10px;

  line-height: 1.6;
}


.sbic__panel-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

  padding-top: 12px;

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


.sbic__panel-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 STRIP
========================================================= */

.sbic__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(11,7,7,.45);
}


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


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


.sbic__technical span {
  display: block;

  color:
    var(--sbic-orange-soft);

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


.sbic__technical strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


/* =========================================================
   BOTTOM CATEGORY RAIL
========================================================= */

.sbic__rail {
  position: relative;

  z-index: 10;

  min-height: 92px;

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

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


.sbic__rail-inner {
  display: grid;

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

  width: 100%;

  min-height: 92px;
}


.sbic__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,23,28,.06);

  color:
    inherit;

  text-decoration: none;

  transition:
    background .18s ease;
}


.sbic__rail-inner > a > span {
  color:
    var(--sbic-orange);

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


.sbic__rail-inner small {
  display: block;

  color:
    #A09996;

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

  letter-spacing: .09em;
}


.sbic__rail-inner strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    #4E4947;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbic__rail-inner i {
  color:
    #A09996;

  font-size: 11px;

  font-style: normal;
}


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

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

  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbic-orange),
      var(--sbic-copper),
      var(--sbic-purple)
    );

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    transform .2s ease;
}


@media (hover:hover) {

  .sbic__rail-inner > a:hover {
    background:
      rgba(255,122,0,.018);
  }


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

}


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

.sbic a:focus-visible {
  outline:
    2px solid
    var(--sbic-orange);

  outline-offset: 3px;
}


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

@media (max-width:1050px) {

  .sbic {
    min-height: auto;
  }


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

    min-height: auto;
  }


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


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


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


  .sbic__figure {
    height: 650px;

    min-height: 650px;
  }


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


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

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

}


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

@media (max-width:650px) {

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


  .sbic__kicker b {
    display: none;
  }


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


  .sbic__lead {
    font-size: 13px;
  }


  .sbic__actions {
    flex-direction: column;
  }


  .sbic__button {
    width: 100%;
  }


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


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


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

    border-left: 0;
  }


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


  .sbic__figure {
    height: 570px;

    min-height: 570px;

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


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


  .sbic__vertical {
    display: none;
  }


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

    width: 48px;
    height: 48px;
  }


  .sbic__inventory {
    right: -34px;

    width: 230px;
  }


  .sbic__ghost {
    right: 4%;

    font-size: 110px;
  }


  .sbic__panel {
    right: 14px;
    bottom: 105px;
    left: 14px;

    padding: 17px;
  }


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

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


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

    border-left: 0;
  }


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


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


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

    border-right: 0;
  }

}


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

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

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

}



/*hero section end here*/