/* Bulk Material Supply: add this page's custom section styles here. Shared catalogue styles load first. */
/* =========================================================
   SINDYBAD — BULK MATERIALS
   Premium Project Materials Section
========================================================= */

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


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

.sbbm {
  --sbbm-gold: #F09A2B;
  --sbbm-gold-light: #F6B55C;

  --sbbm-copper: #B95F38;
  --sbbm-copper-light: #D98559;

  --sbbm-purple: #7137D6;

  --sbbm-text: #191715;
  --sbbm-muted: #6E6863;

  --sbbm-dark: #100D0B;
  --sbbm-dark-2: #221711;

  --sbbm-line:
    rgba(25,23,21,.085);

  position: relative;
  isolation: isolate;

  width: 100%;

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

  overflow: hidden;

  color:
    var(--sbbm-text);

  background:
    radial-gradient(
      circle at 13% 19%,
      rgba(240,154,43,.045),
      transparent 27%
    ),
    radial-gradient(
      circle at 40% 88%,
      rgba(113,55,214,.025),
      transparent 30%
    ),
    linear-gradient(
      135deg,
      #FFFFFF 0%,
      #FBF9F6 48%,
      #F2EEE8 100%
    );
}


/* premium top accent */

.sbbm::before {
  position: absolute;

  z-index: 20;

  top: 0;
  left: 0;

  width: 158px;
  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbbm-gold),
      var(--sbbm-copper),
      var(--sbbm-purple)
    );
}


/* background architecture */

.sbbm::after {
  position: absolute;

  z-index: -1;

  inset: 0;

  content: "";

  pointer-events: none;

  opacity: .40;

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

  background-size:
    76px 76px;

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

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


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

.sbbm__main {
  display: grid;

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

  width: 100%;

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


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

.sbbm__content {
  position: relative;

  display: flex;

  min-width: 0;

  align-items: center;

  overflow: hidden;

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


.sbbm__content::before {
  position: absolute;

  z-index: 0;

  top: 8%;
  left: -24%;

  width: 63%;

  aspect-ratio: 1;

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

  border-radius: 50%;

  content: "";
}


.sbbm__content::after {
  position: absolute;

  z-index: 0;

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

  width: 45%;

  aspect-ratio: 1;

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

  border-radius: 50%;

  content: "";
}


.sbbm__content-inner {
  position: relative;

  z-index: 2;

  width: 100%;

  max-width: 700px;
}


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

.sbbm__kicker {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 20px;

  color:
    #97918B;

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

  letter-spacing: .15em;

  text-transform: uppercase;
}


.sbbm__kicker span {
  color:
    var(--sbbm-copper);
}


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

  background:
    linear-gradient(
      90deg,
      var(--sbbm-gold),
      var(--sbbm-copper),
      var(--sbbm-purple)
    );
}


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

.sbbm__classification {
  display: flex;

  align-items: center;

  gap: 10px;

  margin-bottom: 15px;
}


.sbbm__classification > span {
  display: grid;

  width: 31px;
  height: 31px;

  place-items: center;

  border:
    1px solid
    rgba(185,95,56,.15);

  border-radius: 7px;

  color:
    var(--sbbm-copper);

  background:
    rgba(185,95,56,.035);

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


.sbbm__classification small {
  display: block;

  color:
    #9C9690;

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

  letter-spacing: .11em;
}


.sbbm__classification strong {
  display: block;

  margin-top: 3px;

  color:
    #6C6660;

  font-size: 8px;
}


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

.sbbm__title {
  max-width: 670px;

  margin: 0;

  color:
    var(--sbbm-text);

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

  font-weight: 880;

  line-height: 1.01;

  letter-spacing:
    -.045em;

  text-wrap: balance;
}


.sbbm__title span {
  display: block;

  margin-top: 6px;

  color:
    var(--sbbm-copper);
}


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

.sbbm__lead {
  max-width: 650px;

  margin:
    24px
    0
    0;

  color:
    #635E59;

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

  line-height: 1.72;
}


.sbbm__secondary {
  max-width: 625px;

  margin:
    11px
    0
    0;

  color:
    #918A84;

  font-size: 11px;

  line-height: 1.65;
}


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

.sbbm__tags {
  display: flex;

  flex-wrap: wrap;

  gap: 7px;

  margin-top: 22px;
}


.sbbm__tags span {
  padding:
    7px
    10px;

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

  border-radius: 5px;

  color:
    #6D6761;

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

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


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

.sbbm__actions {
  display: flex;

  flex-wrap: wrap;

  gap: 9px;

  margin-top: 26px;
}


.sbbm__button {
  display: inline-flex;

  min-height: 47px;

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

  gap: 14px;

  padding:
    0
    18px;

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

  border-radius: 7px;

  color:
    var(--sbbm-text);

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

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

  text-decoration: none;

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


.sbbm__button--primary {
  color: #FFFFFF;

  border-color:
    var(--sbbm-copper);

  background:
    linear-gradient(
      135deg,
      #8E4428,
      var(--sbbm-copper)
    );

  box-shadow:
    0 14px 29px
    rgba(185,95,56,.20);
}


@media (hover:hover) {

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

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

}


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

.sbbm__service-line {
  display: grid;

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

  max-width: 660px;

  margin-top: 31px;

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

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


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


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


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


.sbbm__service-line span {
  display: block;

  color:
    var(--sbbm-gold);

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


.sbbm__service-line strong {
  display: block;

  margin-top: 5px;

  color:
    #57514C;

  font-size: 9px;
}


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

.sbbm__visual {
  min-width: 0;

  min-height: 0;

  padding:
    16px
    16px
    16px
    0;
}


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

.sbbm__figure {
  position: relative;

  width: 100%;
  height: 100%;

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

  margin: 0;

  overflow: hidden;

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

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

  background:
    var(--sbbm-dark);

  box-shadow:
    0 28px 76px
    rgba(57,39,26,.18);
}


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

.sbbm__image {
  position: absolute;

  z-index: 1;

  inset: 0;

  display: block;

  width: 100%;
  height: 100%;

  object-fit: cover;

  object-position:
    center center;

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

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

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


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

.sbbm__shade {
  position: absolute;

  z-index: 2;

  inset: 0;

  pointer-events: none;

  background:
    linear-gradient(
      180deg,
      rgba(12,9,7,.08),
      rgba(12,9,7,.03) 31%,
      rgba(14,10,8,.20) 60%,
      rgba(10,7,6,.84)
    ),
    linear-gradient(
      90deg,
      rgba(13,8,6,.22),
      transparent 54%
    ),
    radial-gradient(
      circle at 70% 37%,
      rgba(240,154,43,.14),
      transparent 30%
    );
}


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

.sbbm__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% 44%,
      #000,
      transparent 76%
    );

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


/* =========================================================
   MEASURE LINES
========================================================= */

.sbbm__measure-line {
  position: absolute;

  z-index: 4;

  width: 78%;
  height: 1px;

  pointer-events: none;

  background:
    repeating-linear-gradient(
      90deg,
      rgba(255,255,255,.15)
      0
      12px,
      transparent
      12px
      24px
    );
}


.sbbm__measure-line--a {
  top: 31%;
  left: -5%;

  transform:
    rotate(-10deg);
}


.sbbm__measure-line--b {
  right: -8%;
  bottom: 28%;

  transform:
    rotate(8deg);
}


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

.sbbm__visual-top {
  position: absolute;

  z-index: 8;

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

  display: flex;

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


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


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

  border-radius: 50%;

  background:
    var(--sbbm-gold-light);

  box-shadow:
    0 0 12px
    rgba(246,181,92,.58);
}


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

  font-size: 7px;

  letter-spacing: .13em;
}


/* =========================================================
   MEASURE TARGET
========================================================= */

.sbbm__measure {
  position: absolute;

  z-index: 4;

  top: 45%;
  right: 8%;

  width:
    min(47%,420px);

  aspect-ratio: 1;

  border:
    1px solid
    rgba(246,181,92,.21);

  border-radius: 50%;

  transform:
    translateY(-50%);

  pointer-events: none;
}


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

  border-radius: 50%;

  content: "";
}


.sbbm__measure::before {
  inset: 18%;

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


.sbbm__measure::after {
  inset: 36%;

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


.sbbm__measure > span {
  position: absolute;

  top: 50%;
  left: 50%;
}


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

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

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


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

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

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


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

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

  border-radius: 50%;

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


/* nodes */

.sbbm__node {
  position: absolute;

  width: 7px;
  height: 7px;

  border-radius: 50%;

  background:
    var(--sbbm-gold-light);

  box-shadow:
    0 0 0 5px
    rgba(246,181,92,.11),
    0 0 16px
    rgba(246,181,92,.45);
}


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


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

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


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

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


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

.sbbm__ghost {
  position: absolute;

  z-index: 3;

  top: 46%;
  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
========================================================= */

.sbbm__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,9,7,.27);

  text-align: center;
}


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


.sbbm__brand span {
  margin-top: 4px;

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

  letter-spacing: .10em;
}


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

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


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

.sbbm__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(14,9,7,.91),
      rgba(35,23,16,.76)
    );

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


.sbbm__panel-head {
  display: flex;

  align-items: center;

  gap: 9px;
}


.sbbm__panel-head span {
  color:
    #FFD08C;

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

  letter-spacing: .13em;
}


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

  background:
    linear-gradient(
      90deg,
      var(--sbbm-gold),
      var(--sbbm-copper),
      var(--sbbm-purple)
    );
}


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

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

  letter-spacing: .10em;
}


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


.sbbm__panel p {
  max-width: 540px;

  margin:
    8px
    0
    0;

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

  font-size: 10px;

  line-height: 1.6;
}


.sbbm__panel-meta {
  display: flex;

  flex-wrap: wrap;

  gap: 6px;

  margin-top: 14px;

  padding-top: 12px;

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


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


/* =========================================================
   TECH STRIP
========================================================= */

.sbbm__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,8,6,.45);
}


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


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


.sbbm__technical span {
  display: block;

  color:
    var(--sbbm-gold-light);

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


.sbbm__technical strong {
  display: block;

  margin-top: 3px;

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

  font-size: 7px;
}


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

.sbbm__rail {
  position: relative;

  z-index: 10;

  min-height: 92px;

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

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


.sbbm__rail-inner {
  display: grid;

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

  width: 100%;

  min-height: 92px;
}


.sbbm__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(25,23,21,.06);

  color:
    inherit;

  text-decoration: none;

  transition:
    background .18s ease;
}


.sbbm__rail-inner > a > span {
  color:
    var(--sbbm-copper);

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


.sbbm__rail-inner small {
  display: block;

  color:
    #9D9690;

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

  letter-spacing: .09em;
}


.sbbm__rail-inner strong {
  display: block;

  margin-top: 4px;

  overflow: hidden;

  color:
    #4D4844;

  font-size: 9px;

  text-overflow: ellipsis;

  white-space: nowrap;
}


.sbbm__rail-inner i {
  color:
    #9D9690;

  font-size: 11px;

  font-style: normal;
}


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

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

  height: 2px;

  content: "";

  background:
    linear-gradient(
      90deg,
      var(--sbbm-gold),
      var(--sbbm-copper),
      var(--sbbm-purple)
    );

  transform:
    scaleX(0);

  transform-origin: left;

  transition:
    transform .2s ease;
}


@media (hover:hover) {

  .sbbm__rail-inner > a:hover {
    background:
      rgba(185,95,56,.02);
  }


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

}


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

.sbbm a:focus-visible {
  outline:
    2px solid
    var(--sbbm-copper);

  outline-offset: 3px;
}


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

@media (max-width:1050px) {

  .sbbm {
    min-height: auto;
  }


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

    min-height: auto;
  }


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


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


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


  .sbbm__figure {
    height: 650px;

    min-height: 650px;
  }


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


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

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

}


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

@media (max-width:650px) {

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


  .sbbm__kicker b {
    display: none;
  }


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


  .sbbm__lead {
    font-size: 13px;
  }


  .sbbm__actions {
    flex-direction: column;
  }


  .sbbm__button {
    width: 100%;
  }


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


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


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

    border-left: 0;
  }


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


  .sbbm__figure {
    height: 570px;

    min-height: 570px;

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


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


  .sbbm__vertical {
    display: none;
  }


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

    width: 48px;
    height: 48px;
  }


  .sbbm__measure {
    right: -34px;

    width: 230px;
  }


  .sbbm__ghost {
    right: 4%;

    font-size: 110px;
  }


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

    padding: 17px;
  }


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

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


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

    border-left: 0;
  }


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


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


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

    border-right: 0;
  }

}


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

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

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

}