.sir-icon svg {
  width: 18px;
  height: 18px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.55;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.sir-item:hover .sir-icon {
  color: var(--primary);
  border-color: transparent;
  background: linear-gradient(135deg,var(--secondary),var(--accent2));
}

.sir-copy {
  min-width: 0;
  display: block
}

.sir-copy strong {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: #f0f5f3;
  font: 600 17px/1.12 "Rethink Sans",sans-serif;
  letter-spacing: -.025em;
}

.sir-copy small {
  display: block;
  margin-top: 6px;
  color: #68847b;
  font: 750 8px/1 "DM Sans",sans-serif;
  letter-spacing: .13em;
  text-transform: uppercase;
}

.service-index-reel.is-dragging .sir-item {
  pointer-events: none
}

@media(max-width:760px) {
  .service-index-reel {
    height: 90px
  }
  .sir-item {
    width: 250px;
    min-width: 250px;
    padding: 0 20px;
    grid-template-columns: 34px 1fr;
    gap: 12px
  }
  .sir-icon {
    width: 34px;
    height: 34px
  }
  .sir-copy strong {
    font-size: 15px
  }
}

@media(prefers-reduced-motion:reduce) {
  .service-index-reel {
    overflow-x: auto
  }
  .sir-track {
    position: relative;
    transform: none!important
  }
}

/* ===== Brand logo ===== */
.brand-logo {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  min-width: max-content;
  background: transparent!important;
  border: 0!important;
  box-shadow: none!important;
}

.exact-brand-logo {
  display: block;
  width: 205px!important;
  height: auto!important;
  max-height: 62px;
  object-fit: contain;
  image-rendering: auto;
  background: transparent!important;
}

.premium-logo.brand-logo {
  padding: 0!important;
  border-radius: 0!important;
}

.footer-brand-logo {
  padding: 0;
  border-radius: 0;
}

footer .footer-exact-brand-logo {
  width: 215px!important;
  height: auto!important;
  background: transparent!important;
}

.brand-loader {
  display: flex;
  align-items: center;
  justify-content: center;
}

.loader-exact-brand-logo {
  width: 245px!important;
  height: auto!important;
  background: transparent!important;
}

body[data-theme="obsidian"] {
  --primary:#090D14;
  --primary-rgb:9,13,20;
  --secondary:#63F4FF;
  --secondary-rgb:99,244,255;
  --optional:#3DDCF2;
  --accent2:#8B7CFF;
  --accent3:#5CFFBF;
  --accent4:#F6E27F;
  --albastor:#F2F4F7;
  --title:#242A33;
  --para:#717985;
}

body[data-theme="obsidian"] .hero-photo {
  filter: saturate(.48) contrast(1.13)
}

/* ===== Services composition ===== */
.services-jl {
  min-height: 760px!important;
  padding: 96px 0 58px!important;
}

.services-jl-head {
  align-items: start!important;
}

.services-jl-filters {
  margin-top: 22px!important;
}

.services-jl-stage {
  height: 475px!important;
  margin-top: 8px!important;
}

.services-jl-track {
  overflow: visible!important;
}

.service-sheet {
  width: 360px!important;
  height: 390px!important;
  margin-left: -180px!important;
  margin-top: -195px!important;
  border-radius: 24px!important;
  padding: 26px 25px 23px!important;
  background: radial-gradient(circle at 85% 0%,rgba(var(--secondary-rgb),.045),transparent 32%),
    linear-gradient(150deg,rgba(255,255,255,.068),rgba(255,255,255,.026))!important;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04),
    0 18px 48px rgba(0,0,0,.12)!important;
}

.service-sheet.is-active {
  border-color: rgba(var(--secondary-rgb),.58)!important;
  box-shadow: 0 0 0 1px rgba(var(--secondary-rgb),.07),
    0 26px 70px rgba(0,0,0,.24),
    0 0 44px rgba(var(--secondary-rgb),.075)!important;
}

.service-sheet header {
  margin-bottom: 31px!important;
}
