/* Solutions tabs (.b3) — desktop + mobile chips (match home). Load on every page with Solutions. */
.b3.dark-block {
  --tab-bg: #ee3d25;
  --tab-text: #ffffff;
  --tab-active-bar: #ffffff;
  --tab-width: 78%;
}

@media (min-width: 769px) {
  .b3.dark-block .left .list .item {
    width: var(--tab-width);
  }
}

.b3.dark-block .left .list .item {
  transition: background-color 0.3s ease, transform 0.25s ease,
    box-shadow 0.3s ease;
}

.b3.dark-block .left .list .item:before {
  background: none;
}

.b3.dark-block .left .list .item:after {
  background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 14 14' fill='none'%3E%3Cpath d='M4.96 2.92 9.04 7l-4.08 4.08' stroke='%23fff' stroke-linejoin='round'/%3E%3C/svg%3E")
    center center / cover no-repeat;
}

@media (min-width: 769px) {
  .b3.dark-block .left .list .item:hover {
    transform: translateX(0.35vw);
  }
}

.b3.dark-block .left .list .item.active {
  background: var(--tab-bg);
  border-left-color: var(--tab-active-bar);
  box-shadow: 0 0.4vw 1.2vw rgba(238, 61, 37, 0.35);
}

.b3.dark-block .left .list .item.active p {
  color: var(--tab-text);
  opacity: 1;
}

.b3.dark-block .left .list .item.active img {
  opacity: 1;
  filter: brightness(0) invert(1);
}

.b3.dark-block .left .list .item.active:after {
  opacity: 1;
}

/* ===== Mobile/tablet: chips + hide native select (override page CSS) ===== */
@media (max-width: 768px) {
  .b3 .select-wrapper,
  .b3 .my-select {
    display: none !important;
    pointer-events: none !important;
    opacity: 0 !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
  }

  .b3 {
    padding: 14vw 0 !important;
  }

  .b3 .container {
    max-width: 92vw !important;
    width: 100% !important;
    grid-template-columns: minmax(0, 1fr) !important;
    overflow: hidden !important;
  }

  .b3 .left,
  .b3 .right {
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  .b3 h2 {
    font-size: 10vw !important;
    line-height: 102% !important;
  }

  .b3 .left .list {
    margin-top: 5.5vw !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 2.2vw !important;
    grid-gap: 2.2vw !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none !important;
    -ms-overflow-style: none !important;
    padding: 0.5vw 0 1.5vw !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .b3 .left .list::-webkit-scrollbar {
    display: none !important;
    height: 0 !important;
    width: 0 !important;
  }

  .b3 .left .list .item {
    position: relative !important;
    display: flex !important;
    flex-shrink: 0 !important;
    align-items: center !important;
    gap: 1.8vw !important;
    grid-gap: 1.8vw !important;
    padding: 2.4vw 3.6vw !important;
    border: 0.35vw solid rgba(255, 255, 255, 0.18) !important;
    border-left: 0.35vw solid rgba(255, 255, 255, 0.18) !important;
    border-radius: 1.6vw !important;
    cursor: pointer !important;
    background: rgba(255, 255, 255, 0.03) !important;
    box-shadow: none !important;
    width: auto !important;
    transform: none !important;
  }

  .b3 .left .list .item:before,
  .b3 .left .list .item:after {
    display: none !important;
    content: none !important;
  }

  .b3 .left .list .item img {
    width: 3.8vw !important;
    height: 3.8vw !important;
    opacity: 0.55 !important;
    filter: none !important;
  }

  .b3 .left .list .item p {
    font-size: 3.4vw !important;
    line-height: 1.2 !important;
    color: rgba(255, 255, 255, 0.7) !important;
    opacity: 1 !important;
    white-space: nowrap !important;
  }

  .b3 .left .list .item.active {
    border-color: #ee3d25 !important;
    border-left: 0.7vw solid #fff !important;
    background: #ee3d25 !important;
    box-shadow: 0 2vw 4vw rgba(238, 61, 37, 0.4) !important;
  }

  .b3 .left .list .item.active img {
    opacity: 1 !important;
    filter: brightness(0) invert(1) !important;
  }

  .b3 .left .list .item.active p {
    color: #fff !important;
    opacity: 1 !important;
  }

  .b3 .left .list-2 {
    display: none !important;
  }

  .b3 .right {
    padding-top: 5vw !important;
  }

  .b3 .right .item.active {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    grid-template-areas:
      "title"
      "cont"
      "swiper"
      "more" !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .b3 .right h3 {
    grid-area: title !important;
    font-size: 5.8vw !important;
    order: unset !important;
  }

  .b3 .right .cont {
    grid-area: cont !important;
    margin-top: 2.2vw !important;
    order: unset !important;
    max-width: 100% !important;
  }

  .b3 .right .swiper {
    grid-area: swiper !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-top: 4.5vw !important;
    height: 58vw !important;
    overflow: hidden !important;
  }

  .b3 .right .swiper img,
  .b3 .right .swiper .ind-slide img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
    border-radius: 1.2vw !important;
  }

  .b3 .right .more-info {
    grid-area: more !important;
    order: unset !important;
    flex-direction: column-reverse !important;
    margin-top: 5vw !important;
    max-width: 100% !important;
  }

  .b3 .right .cont p,
  .b3 .right .more-info .list p {
    font-size: 3.6vw !important;
    max-width: 100% !important;
  }

  .b3 .right .cont .slider-btn {
    display: none !important;
  }
}

/* ===== Explore More CTA + services/list polish ===== */
.b3 .right .more-info .dark-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 0.55vw !important;
  padding: 0.75vw 1.35vw !important;
  border-radius: 999px !important;
  border: 1px solid #ee3d25 !important;
  background: #ee3d25 !important;
  box-shadow: 0 0.55vw 1.4vw rgba(238, 61, 37, 0.35) !important;
  overflow: hidden !important;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease,
    transform 0.25s ease !important;
}
.b3 .right .more-info .dark-btn p {
  font-weight: 700 !important;
  font-size: 0.86vw !important;
  letter-spacing: 0.04em !important;
  color: #fff !important;
}
.b3 .right .more-info .dark-btn span {
  width: 0.65vw !important;
  height: 0.45vw !important;
  background: url(../img/accent-btn-arrow-dark.svg) center / cover no-repeat !important;
  filter: brightness(0) invert(1);
  flex: none;
}
.b3 .right .more-info .dark-btn:before {
  display: none !important;
}
.b3 .right .more-info .dark-btn:hover {
  background: #233058 !important;
  border-color: #233058 !important;
  box-shadow: 0 0.65vw 1.6vw rgba(35, 48, 88, 0.4) !important;
  transform: translateY(-0.12vw);
}
.b3 .right .more-info .dark-btn:hover p {
  color: #fff !important;
}
.b3 .right .more-info .dark-btn:hover span {
  background: url(../img/accent-btn-arrow-dark.svg) center / cover no-repeat !important;
  filter: brightness(0) invert(1);
}

.b3 .right .more-info .list p {
  font-weight: 600 !important;
  color: rgba(255, 255, 255, 0.78) !important;
}

.b3 .left .list-2 .head,
.b3 .mob .list-2 .head {
  font-weight: 700 !important;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.45) !important;
}
.b3 .left .list-2 a,
.b3 .mob .list-2 a {
  font-weight: 600 !important;
  opacity: 0.78 !important;
  color: #fff !important;
}
.b3 .left .list-2 a:hover,
.b3 .mob .list-2 a:hover {
  opacity: 1 !important;
  color: #ee3d25 !important;
  font-weight: 700 !important;
}
.b3 .left .list-2 a:hover span,
.b3 .mob .list-2 a:hover span {
  opacity: 1 !important;
}

@media (max-width: 768px) {
  .b3 .right .more-info .dark-btn {
    padding: 3.2vw 5.5vw !important;
    gap: 2vw !important;
    box-shadow: 0 2vw 5vw rgba(238, 61, 37, 0.35) !important;
  }
  .b3 .right .more-info .dark-btn p {
    font-size: 3.4vw !important;
  }
  .b3 .right .more-info .dark-btn span {
    width: 2.6vw !important;
    height: 1.8vw !important;
  }
  .b3 .right .more-info .list p {
    font-weight: 600 !important;
  }
}

/* ============================================================
   SERVICE PAGES HERO THEME SYNC
   Matches Home Hero palette: Navy #233058 + Brand Red #EE3D25
   ============================================================ */
.mad .hero,
main.mad section.hero {
  position: relative;
  overflow: hidden;
  background-color: #233058 !important;
  background-image:
    radial-gradient(circle at 105% -5%, rgba(238, 61, 37, 0.58), transparent 52%),
    radial-gradient(circle at -10% 105%, rgba(238, 61, 37, 0.28), transparent 48%),
    radial-gradient(ellipse 65% 55% at 50% 45%, rgba(42, 57, 104, 0.45), transparent 75%),
    linear-gradient(135deg, #1a2340 0%, #233058 52%, #1e294b 100%) !important;
  border-top: 0 !important;
}

/* Tech mesh grid overlay with smooth circular fade */
.mad .hero::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 60px 60px !important;
  -webkit-mask-image: radial-gradient(75% 85% at 30% 25%, #000 35%, transparent 85%) !important;
  mask-image: radial-gradient(75% 85% at 30% 25%, #000 35%, transparent 85%) !important;
  opacity: 0.7 !important;
  z-index: 1 !important;
}

/* Ensure hero contents sit cleanly above grid */
.mad .hero .w,
.mad .hero .logos-strip.rp-strip {
  position: relative !important;
  z-index: 2 !important;
}

/* Red ambient aura behind right showcase (phone/laptop/video) */
.mad .hero .g-b {
  background: radial-gradient(circle, rgba(238, 61, 37, 0.45) 0%, rgba(238, 61, 37, 0) 70%) !important;
  opacity: 0.7 !important;
  filter: blur(45px) !important;
  pointer-events: none !important;
}

/* Review strip inside .mad .hero: seamless background with home-matching divider line */
.mad .hero .logos-strip.rp-strip {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12) !important;
  box-shadow: none !important;
  margin-top: clamp(24px, 3.2vw, 48px) !important;
}

/* Edge masks fade out into the theme navy #233058 */
.mad .hero .logos-strip.rp-strip::before {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0; bottom: 0; left: 0;
  width: 9vw !important;
  background: linear-gradient(90deg, #233058 15%, rgba(35, 48, 88, 0)) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}
.mad .hero .logos-strip.rp-strip::after {
  content: "" !important;
  display: block !important;
  position: absolute !important;
  top: 0; bottom: 0; right: 0;
  width: 9vw !important;
  background: linear-gradient(270deg, #233058 15%, rgba(35, 48, 88, 0)) !important;
  z-index: 3 !important;
  pointer-events: none !important;
}

/* Glass chips under hero text */
.mad .hero .chips span {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.12), rgba(255, 255, 255, 0.04)) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #fff !important;
}
.mad .hero .chips span:hover {
  border-color: #ee3d25 !important;
  box-shadow: 0 4px 16px rgba(238, 61, 37, 0.3) !important;
}

/* Tag above H1 */
.mad .hero .tag {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.14), rgba(255, 255, 255, 0.05)) !important;
  border: 1px solid rgba(255, 255, 255, 0.24) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  color: #fff !important;
}

/* ============================================================
   MID SECTIONS: BETWEEN HERO AND WORK-BY-SERVICE (LIGHT THEME)
   Reel showcase & Feature rows styled in crisp light palette
   ============================================================ */
.mad .hero + section:not(#work-by-service),
.mad .hero + section:not(#work-by-service) + section:not(#work-by-service),
.mad section:has(.reel),
.mad section:has(.feat) {
  background-color: #f7f7f8 !important;
  background-image: none !important;
  color: #233058 !important;
  border-top: 1px solid rgba(35, 48, 88, 0.08) !important;
  border-bottom: 1px solid rgba(35, 48, 88, 0.08) !important;
  position: relative;
}

/* Headings & text inside mid light sections */
.mad .hero + section:not(#work-by-service) h2,
.mad .hero + section:not(#work-by-service) + section:not(#work-by-service) h2,
.mad section:has(.reel) h2,
.mad section:has(.feat) h2,
.mad .feat h3 {
  color: #233058 !important;
}

.mad .hero + section:not(#work-by-service) h2 em,
.mad .hero + section:not(#work-by-service) + section:not(#work-by-service) h2 em,
.mad section:has(.reel) h2 em,
.mad section:has(.feat) h2 em,
.mad .feat h3 em {
  color: #ee3d25 !important;
  -webkit-text-fill-color: #ee3d25 !important;
  background: none !important;
}

.mad .hero + section:not(#work-by-service) p,
.mad .hero + section:not(#work-by-service) + section:not(#work-by-service) p,
.mad section:has(.reel) p,
.mad section:has(.feat) p,
.mad .feat .txt p,
.mad .reel .cap {
  color: rgba(10, 8, 3, 0.68) !important;
}

/* Feature list items */
.mad .feat ul li {
  color: #1e2538 !important;
}
.mad .feat ul li:before {
  color: #ee3d25 !important;
  background: rgba(238, 61, 37, 0.12) !important;
  border: 1px solid rgba(238, 61, 37, 0.35) !important;
  display: inline-grid;
  place-items: center;
}

/* Feature video frame card */
.mad .feat .frame {
  background: #ffffff !important;
  border: 1px solid rgba(35, 48, 88, 0.12) !important;
  box-shadow: 0 20px 48px rgba(35, 48, 88, 0.08), 0 0 0 1px rgba(35, 48, 88, 0.04) !important;
  border-radius: 24px !important;
  padding: 8px !important;
}
.mad .feat .frame video {
  border-radius: 18px !important;
  background: #000;
}

/* Phone showcase in reel */
.mad .reel .phone {
  background: linear-gradient(#ffffff, #f4f5f8) padding-box,
              linear-gradient(150deg, rgba(238, 61, 37, 0.55), rgba(35, 48, 88, 0.12)) border-box !important;
  border: 1px solid rgba(35, 48, 88, 0.1) !important;
  box-shadow: 0 24px 60px rgba(35, 48, 88, 0.1) !important;
}

/* Glow orbs in mid light sections */
.mad .hero + section .glow,
.mad .hero + section + section .glow,
.mad section:has(.reel) .glow,
.mad section:has(.feat) .glow {
  opacity: 0.12 !important;
}

/* ============================================================
   "WHAT WE BUILD" / DELIVER SECTION
   BUSINESS AGENCY LIGHT SHADE (Executive Navy #233058 & Brand Red #EE3D25)
   Clean, trustworthy, high-readability business palette
   ============================================================ */
.mad section:has(.grid.g3),
.mad section:has(.g3) {
  position: relative !important;
  overflow: hidden !important;
  background-color: #f5f7fb !important;
  background-image:
    radial-gradient(circle at 92% 15%, rgba(238, 61, 37, 0.07), transparent 52%),
    radial-gradient(circle at 8% 85%, rgba(35, 48, 88, 0.06), transparent 50%),
    linear-gradient(180deg, #f7f8fc 0%, #f1f4f9 100%) !important;
  border-top: 1px solid rgba(35, 48, 88, 0.08) !important;
  border-bottom: 1px solid rgba(35, 48, 88, 0.08) !important;
}

/* Subtle architectural grid inside What we build */
.mad section:has(.grid.g3)::before,
.mad section:has(.g3)::before {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  pointer-events: none !important;
  background-image:
    linear-gradient(rgba(35, 48, 88, 0.035) 1px, transparent 1px),
    linear-gradient(90deg, rgba(35, 48, 88, 0.035) 1px, transparent 1px) !important;
  background-size: 40px 40px !important;
  -webkit-mask-image: radial-gradient(75% 85% at 50% 30%, #000 25%, transparent 85%) !important;
  mask-image: radial-gradient(75% 85% at 50% 30%, #000 25%, transparent 85%) !important;
  opacity: 0.7 !important;
  z-index: 1 !important;
}

.mad section:has(.grid.g3) > .w,
.mad section:has(.g3) > .w {
  position: relative !important;
  z-index: 2 !important;
}

/* Headings in What we build */
.mad section:has(.grid.g3) h2,
.mad section:has(.g3) h2 {
  color: #233058 !important;
}

.mad section:has(.grid.g3) h2 em,
.mad section:has(.g3) h2 em {
  color: #ee3d25 !important;
  -webkit-text-fill-color: #ee3d25 !important;
  background: none !important;
}

.mad section:has(.grid.g3) p.sub,
.mad section:has(.g3) p.sub {
  color: rgba(35, 48, 88, 0.7) !important;
}

/* Crisp White Business Cards */
.mad section:has(.grid.g3) .card,
.mad section:has(.g3) .card {
  background: #ffffff !important;
  border: 1px solid rgba(35, 48, 88, 0.09) !important;
  border-radius: 20px !important;
  box-shadow: 0 8px 26px rgba(35, 48, 88, 0.05), 0 1px 3px rgba(35, 48, 88, 0.03) !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
  transition: transform .35s cubic-bezier(0.16, 1, 0.3, 1), border-color .35s ease, box-shadow .35s ease !important;
}

.mad section:has(.grid.g3) .card:hover,
.mad section:has(.g3) .card:hover {
  background: #ffffff !important;
  border-color: #ee3d25 !important;
  transform: translateY(-6px) !important;
  box-shadow: 0 18px 40px rgba(35, 48, 88, 0.12), 0 0 0 1px #ee3d25, 0 8px 20px rgba(238, 61, 37, 0.12) !important;
}

.mad section:has(.grid.g3) .card h3,
.mad section:has(.g3) .card h3 {
  color: #1e294b !important;
  font-weight: 700 !important;
}

.mad section:has(.grid.g3) .card p,
.mad section:has(.g3) .card p {
  color: #55627a !important;
  line-height: 1.6 !important;
}

/* Card Icons */
.mad section:has(.grid.g3) .card .ic,
.mad section:has(.g3) .card .ic {
  box-shadow: 0 4px 12px rgba(35, 48, 88, 0.06) !important;
}

.mad section:has(.grid.g3) .card .ic.ic-ios,
.mad section:has(.g3) .card .ic.ic-ios {
  background: #233058 !important;
  border-color: rgba(35, 48, 88, 0.2) !important;
}

.mad section:has(.grid.g3) .card .ic.ic-ios svg,
.mad section:has(.g3) .card .ic.ic-ios svg {
  fill: #ffffff !important;
}