/* Trust + Industry band — same light look as home (service pages).
   Scope: .home-mid-stack wrapper (no body.home required). */
.home-mid-stack {
  --hp-red: #ee3d25;
  background-color: #f7f7f8 !important;
  background-image: none !important;
  overflow: visible !important;
}

.home-mid-stack .trust-stats,
.home-mid-stack .trust-stats.dark-block,
.home-mid-stack .sx.dark-block#solutions,
.home-mid-stack .sx#solutions {
  background: transparent !important;
  background-color: transparent !important;
  background-image: none !important;
  border: 0 !important;
  box-shadow: none !important;
  color: #233058;
}

.home-mid-stack .trust-stats::before,
.home-mid-stack .trust-stats::after,
.home-mid-stack .sx#solutions::before,
.home-mid-stack .sx#solutions::after {
  display: none !important;
  content: none !important;
}

/* ----- Trust cards ----- */
.home-mid-stack .trust-stats .ts-glow.g1,
.home-mid-stack .trust-stats .ts-glow.g2 {
  opacity: 0.35;
}

.home-mid-stack .trust-stats .ts-glow.g1 {
  background: radial-gradient(circle, rgba(238, 61, 37, 0.08) 0%, rgba(238, 61, 37, 0) 70%) !important;
}

.home-mid-stack .trust-stats .ts-glow.g2 {
  background: radial-gradient(circle, rgba(35, 48, 88, 0.06) 0%, rgba(35, 48, 88, 0) 70%) !important;
}

.home-mid-stack .trust-stats .ts-card {
  background: #fff !important;
  border: 1px solid rgba(10, 8, 3, 0.1) !important;
  box-shadow: 0 10px 28px rgba(35, 48, 88, 0.06) !important;
}

.home-mid-stack .trust-stats .ts-card:hover,
.home-mid-stack .trust-stats .ts-card:focus-visible {
  transform: translateY(-0.45vw) !important;
  border-color: #ee3d25 !important;
  background: linear-gradient(160deg, #fff1ee 0%, #fff6f4 45%, #fffcfb 100%) !important;
  box-shadow:
    0 18px 40px rgba(238, 61, 37, 0.16),
    0 6px 14px rgba(35, 48, 88, 0.06),
    0 0 0 1px rgba(238, 61, 37, 0.12) !important;
}
.home-mid-stack .trust-stats .ts-card::before {
  background: linear-gradient(
    140deg,
    rgba(238, 61, 37, 0.55),
    rgba(238, 61, 37, 0) 42%
  ) !important;
}
.home-mid-stack .trust-stats .ts-card:hover::before,
.home-mid-stack .trust-stats .ts-card:focus-visible::before {
  opacity: 1 !important;
}

.home-mid-stack .trust-stats .ts-logo,
.home-mid-stack .trust-stats .ts-rating,
.home-mid-stack .trust-stats .ts-caption,
.home-mid-stack .trust-stats .ts-eyebrow,
.home-mid-stack .trust-stats .ts-stat .label {
  color: #0a0803 !important;
}

.home-mid-stack .trust-stats .ts-card p {
  color: rgba(10, 8, 3, 0.62) !important;
}

.home-mid-stack .trust-stats .ts-caption {
  color: rgba(10, 8, 3, 0.7) !important;
  border-left-color: #ee3d25 !important;
}

.home-mid-stack .trust-stats .ts-rating {
  background: rgba(238, 61, 37, 0.1) !important;
  border-color: rgba(238, 61, 37, 0.28) !important;
  color: #233058 !important;
}

.home-mid-stack .trust-stats .ts-card:hover .ts-rating,
.home-mid-stack .trust-stats .ts-card:focus-visible .ts-rating {
  background: rgba(238, 61, 37, 0.14) !important;
  border-color: #ee3d25 !important;
  color: #233058 !important;
}

.home-mid-stack .trust-stats .ts-rating svg,
.home-mid-stack .trust-stats .ts-rating svg *,
.home-mid-stack .trust-stats .ts-card:hover .ts-rating svg,
.home-mid-stack .trust-stats .ts-card:hover .ts-rating svg *,
.home-mid-stack .trust-stats .ts-card:focus-visible .ts-rating svg,
.home-mid-stack .trust-stats .ts-card:focus-visible .ts-rating svg * {
  fill: #ee3d25 !important;
  color: #ee3d25 !important;
}

.home-mid-stack .trust-stats .ts-card:hover p,
.home-mid-stack .trust-stats .ts-card:focus-visible p {
  color: rgba(10, 8, 3, 0.62) !important;
}

.home-mid-stack .trust-stats .ts-right h2 .ts-muted {
  color: #ee3d25 !important;
}

.home-mid-stack .trust-stats .ts-right h2 .ts-bold {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #233058 !important;
  -webkit-text-fill-color: #233058 !important;
}

.home-mid-stack .trust-stats .ts-eyebrow .dot {
  background: #ee3d25 !important;
}

.home-mid-stack .trust-stats .ts-eyebrow-line {
  background: linear-gradient(to right, rgba(10, 8, 3, 0.14), rgba(10, 8, 3, 0)) !important;
}

.home-mid-stack .trust-stats .ts-stats {
  border-top-color: rgba(10, 8, 3, 0.1) !important;
}

.home-mid-stack .trust-stats .ts-stat {
  border-bottom-color: rgba(10, 8, 3, 0.1) !important;
}

.home-mid-stack .trust-stats .ts-stat:nth-child(2n) {
  border-left-color: rgba(10, 8, 3, 0.1) !important;
}

.home-mid-stack .trust-stats .ts-stat .num {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  color: #ee3d25 !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

.home-mid-stack .trust-stats .ts-stat:hover {
  background: linear-gradient(180deg, rgba(238, 61, 37, 0.04), rgba(238, 61, 37, 0) 70%) !important;
}

/* ----- Industry picker (.sx#solutions) ----- */
.home-mid-stack .sx#solutions {
  color: #233058 !important;
}

.home-mid-stack .sx#solutions .sx-h {
  color: #233058 !important;
}

.home-mid-stack .sx#solutions .sx-lead {
  color: rgba(10, 8, 3, 0.62) !important;
}

.home-mid-stack .sx#solutions .sx-tabs {
  scrollbar-color: rgba(35, 48, 88, 0.25) rgba(35, 48, 88, 0.06);
}

.home-mid-stack .sx#solutions .sx-tab {
  color: #233058 !important;
  background: #fff !important;
  border: 1px solid rgba(10, 8, 3, 0.1) !important;
  box-shadow: 0 6px 18px rgba(35, 48, 88, 0.04);
}

.home-mid-stack .sx#solutions .sx-tab svg {
  color: #ee3d25 !important;
}

.home-mid-stack .sx#solutions .sx-tab:hover:not(.on) {
  transform: translateX(8px) !important;
  background: linear-gradient(
    165deg,
    rgba(255, 255, 255, 0.95) 0%,
    rgba(238, 61, 37, 0.1) 100%
  ) !important;
  border-color: rgba(238, 61, 37, 0.55) !important;
  box-shadow:
    0 14px 32px rgba(35, 48, 88, 0.14),
    inset 0 1px 0 #fff !important;
  backdrop-filter: blur(14px) saturate(1.2);
  -webkit-backdrop-filter: blur(14px) saturate(1.2);
}

.home-mid-stack .sx#solutions .sx-tab.on {
  background: linear-gradient(90deg, #ee3d25, #c92f1a) !important;
  border-color: #ee3d25 !important;
  color: #fff !important;
  box-shadow: 0 14px 40px rgba(238, 61, 37, 0.28) !important;
}

.home-mid-stack .sx#solutions .sx-tab.on:hover {
  transform: none !important;
}

.home-mid-stack .sx#solutions .sx-tab.on svg {
  color: #fff !important;
}

.home-mid-stack .sx#solutions .sx-pn {
  background: #1a2340;
  border-color: rgba(35, 48, 88, 0.2);
  box-shadow: 0 16px 40px rgba(35, 48, 88, 0.14);
}

.home-mid-stack .sx#solutions .sx-pn:after {
  background:
    linear-gradient(180deg,
      rgba(35, 48, 88, 0.18) 0%,
      rgba(26, 35, 64, 0.22) 35%,
      rgba(26, 35, 64, 0.92) 100%),
    radial-gradient(70% 90% at 100% 0%, rgba(238, 61, 37, 0.22), transparent 65%) !important;
}

.home-mid-stack .sx#solutions .sx-pn .sx-copy h3 {
  color: #fff !important;
  -webkit-text-fill-color: #fff !important;
}

.home-mid-stack .sx#solutions .sx-pn .sx-copy p {
  color: rgba(255, 255, 255, 0.9) !important;
}

.home-mid-stack .sx#solutions .sx-pn .sx-ch span {
  color: #fff !important;
  background: rgba(255, 255, 255, 0.16) !important;
  border-color: rgba(255, 255, 255, 0.3) !important;
}

.home-mid-stack .sx#solutions .sx-in .big {
  display: none !important;
}

/* CTA trio on preview panel ("Pick your industry, see what we build") */
.home-mid-stack .sx#solutions .sx-lk a,
body.home .sx#solutions .sx-lk a,
.sx-lk a {
  transition: all 0.3s ease !important;
}

.home-mid-stack .sx#solutions .sx-lk a:nth-child(1),
body.home .sx#solutions .sx-lk a:nth-child(1),
.sx-lk a:nth-child(1) {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !important;
}

.home-mid-stack .sx#solutions .sx-lk a:nth-child(2),
body.home .sx#solutions .sx-lk a:nth-child(2),
.sx-lk a:nth-child(2) {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
}

.home-mid-stack .sx#solutions .sx-lk a:nth-child(3),
body.home .sx#solutions .sx-lk a:nth-child(3),
.sx-lk a:nth-child(3) {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
}

/* HOVER ON PURPLE BUTTON 2 ("Related work"): Button 2 -> RED, Button 1 -> PURPLE */
.home-mid-stack .sx#solutions .sx-lk a:nth-child(2):hover,
body.home .sx#solutions .sx-lk a:nth-child(2):hover,
.sx-lk a:nth-child(2):hover {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.45) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

.home-mid-stack .sx#solutions .sx-lk:has(a:nth-child(2):hover) a:nth-child(1),
body.home .sx#solutions .sx-lk:has(a:nth-child(2):hover) a:nth-child(1),
.sx-lk:has(a:nth-child(2):hover) a:nth-child(1) {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
}

/* HOVER ON PURPLE BUTTON 3 ("Talk To Us"): Button 3 -> RED, Button 1 -> PURPLE */
.home-mid-stack .sx#solutions .sx-lk a:nth-child(3):hover,
body.home .sx#solutions .sx-lk a:nth-child(3):hover,
.sx-lk a:nth-child(3):hover {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(238, 61, 37, 0.45) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

.home-mid-stack .sx#solutions .sx-lk:has(a:nth-child(3):hover) a:nth-child(1),
body.home .sx#solutions .sx-lk:has(a:nth-child(3):hover) a:nth-child(1),
.sx-lk:has(a:nth-child(3):hover) a:nth-child(1) {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
}

/* HOVER ON RED BUTTON 1 ("Mobile Apps"): Button 1 -> PURPLE, Button 2 -> RED */
.home-mid-stack .sx#solutions .sx-lk a:nth-child(1):hover,
body.home .sx#solutions .sx-lk a:nth-child(1):hover,
.sx-lk a:nth-child(1):hover {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border-color: #8b78de !important;
  color: #fff !important;
  box-shadow: 0 10px 24px rgba(110, 92, 191, 0.45) !important;
  transform: translateY(-3px) scale(1.03) !important;
}

.home-mid-stack .sx#solutions .sx-lk:has(a:nth-child(1):hover) a:nth-child(2),
body.home .sx#solutions .sx-lk:has(a:nth-child(1):hover) a:nth-child(2),
.sx-lk:has(a:nth-child(1):hover) a:nth-child(2) {
  background: #EE3D25 !important;
  border-color: #EE3D25 !important;
  color: #fff !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;
}

/* Number badges on deliver cards — keep red gradient on light band */
.mad section:has(.grid.g3) .card .n,
.mad section:has(.g3) .card .n {
  background: linear-gradient(180deg, #ee3d25, rgba(238, 61, 37, 0.2)) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  color: transparent !important;
  -webkit-text-fill-color: transparent !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;
}

/* ============================================================
   HOW WE WORK (CLEAN BUSINESS LIGHT THEME)
   Corporate business light theme (#f8f9fc)
   - Removes top separator line above the section
   - Adds signature Brand Red line directly under the heading
   - Crisp white floating cards with red gradient numbers
   - Dark Navy title, readable slate description
   - Smooth hover elevation with red accent border
   ============================================================ */

/* 1. Section container & Background */
.how-we-work-sec,
.mad section:has(.g4),
.mad section:has(.grid.g4) {
  position: relative !important;
  background-color: #f8f9fc !important;
  background-image:
    radial-gradient(circle at 92% 14%, rgba(238, 61, 37, 0.05), transparent 48%),
    radial-gradient(circle at 8% 86%, rgba(35, 48, 88, 0.04), transparent 42%) !important;
  border-top: 1px solid rgba(35, 48, 88, 0.08) !important;
  border-bottom: 1px solid rgba(35, 48, 88, 0.08) !important;
  padding: clamp(65px, 7vw, 110px) 0 !important;
  overflow: hidden !important;
}

/* Remove default dark top separator line */
.how-we-work-sec::before,
.how-we-work-sec::after,
.mad section:has(.g4)::before,
.mad section:has(.g4)::after,
.mad section:has(.grid.g4)::before,
.mad section:has(.grid.g4)::after,
.mad section+section:has(.g4)::after,
.mad section+section:has(.grid.g4)::after,
.mad section+section.how-we-work-sec::after,
.mad section+section:not(.cta):not(.svc-marquee):has(.g4)::after,
.mad section+section:not(.cta):not(.svc-marquee):has(.grid.g4)::after {
  display: none !important;
  content: none !important;
}

/* Hide dark glow orbs inside clean light section */
.how-we-work-sec .glow,
.mad section:has(.g4) .glow,
.mad section:has(.grid.g4) .glow {
  display: none !important;
}

.how-we-work-sec>.w,
.mad section:has(.g4)>.w,
.mad section:has(.grid.g4)>.w {
  position: relative !important;
  z-index: 2 !important;
}

/* 2. Heading: Deep Navy, Brand Red emphasis, NO top line, Red accent underline only */
.how-we-work-sec h2,
.mad section:has(.g4) h2,
.mad section:has(.grid.g4) h2 {
  color: #233058 !important;
  font-size: clamp(32px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 20px !important;
  margin-bottom: clamp(36px, 4vw, 56px) !important;
}

.how-we-work-sec h2 em,
.mad section:has(.g4) h2 em,
.mad section:has(.grid.g4) h2 em {
  color: #ee3d25 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

/* Completely KILL any line ABOVE the "How we work" heading */
.how-we-work-sec h2::before,
.how-we-work-sec h2:before,
.mad section:has(.g4) h2::before,
.mad section:has(.g4) h2:before,
.mad section:has(.grid.g4) h2::before,
.mad section:has(.grid.g4) h2:before,
.hw-section h2::before,
.hw-section h2:before,
.mad .how-we-work-sec h2::before,
.mad .how-we-work-sec h2:before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.g4) h2::before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.g4) h2:before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.grid.g4) h2::before,
.mad section:not(.hero):not(.cta):not(.svc-marquee):has(.grid.g4) h2:before,
.mad section.how-we-work-sec h2:before,
.mad section.how-we-work-sec h2::before {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  visibility: hidden !important;
  height: 0 !important;
  width: 0 !important;
}

/* Signature Brand Red accent line strictly UNDER the heading */
.how-we-work-sec h2::after,
.how-we-work-sec h2:after,
.mad section:has(.g4) h2::after,
.mad section:has(.g4) h2:after,
.mad section:has(.grid.g4) h2::after,
.mad section:has(.grid.g4) h2:after,
.hw-section h2::after,
.hw-section h2:after,
.mad .how-we-work-sec h2::after,
.mad .how-we-work-sec h2:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  top: auto !important;
  width: 56px !important;
  height: 3.5px !important;
  border-radius: 3px !important;
  background: #ee3d25 !important;
  box-shadow: 0 2px 8px rgba(238, 61, 37, 0.3) !important;
  display: block !important;
  transform: none !important;
}

/* 3. Process Cards (Clean White floating cards) */
.how-we-work-sec .card,
.mad section:has(.g4) .card,
.mad section:has(.grid.g4) .card {
  background: #ffffff !important;
  border: 1.5px solid rgba(35, 48, 88, 0.1) !important;
  border-radius: 20px !important;
  padding: clamp(26px, 2.5vw, 38px) !important;
  box-shadow: 0 8px 24px 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 .3s ease,
    background-color .3s ease,
    box-shadow .35s ease !important;
  position: relative !important;
  overflow: hidden !important;
  animation: none !important;
}

/* Card Hover Top Accent Line (Restored on user request) */
.how-we-work-sec .card::before,
.mad section:has(.g4) .card::before,
.mad section:has(.grid.g4) .card::before,
.hw-section .hw-steps .card::before {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  right: 0 !important;
  top: 0 !important;
  height: 3.5px !important;
  background: linear-gradient(90deg, #ee3d25, #ff6a3d) !important;
  opacity: 0 !important;
  transition: opacity .3s ease !important;
  z-index: 5 !important;
  display: block !important;
  pointer-events: none !important;
}

.how-we-work-sec .card:hover::before,
.mad section:has(.g4) .card:hover::before,
.mad section:has(.grid.g4) .card:hover::before,
.hw-section .hw-steps .card:hover::before {
  opacity: 1 !important;
  display: block !important;
}

/* Disable dark card:after and broken running beams */
.how-we-work-sec .card::after,
.how-we-work-sec .card:hover::after,
.how-we-work-sec .card .hw-beam,
.how-we-work-sec .card:hover .hw-beam,
.mad section:has(.g4) .card::after,
.mad section:has(.g4) .card:hover::after,
.mad section:has(.g4) .card .hw-beam,
.mad section:has(.g4) .card:hover .hw-beam,
.mad section:has(.grid.g4) .card::after,
.mad section:has(.grid.g4) .card:hover::after,
.mad section:has(.grid.g4) .card .hw-beam,
.mad section:has(.grid.g4) .card:hover .hw-beam {
  display: none !important;
  content: none !important;
  opacity: 0 !important;
  transform: none !important;
  animation: none !important;
  visibility: hidden !important;
}

/* Card Hover: Prominent elevation lift (-16px), warm brand tint background, solid Brand Red border, rich shadow */
.how-we-work-sec .card:hover,
.mad section:has(.g4) .card:hover,
.mad section:has(.grid.g4) .card:hover {
  background-color: #fff2ef !important;
  background-image: linear-gradient(175deg, #ffffff 10%, #ffe9e4 100%) !important;
  transform: translateY(-16px) !important;
  border-color: #ee3d25 !important;
  box-shadow:
    0 26px 52px rgba(35, 48, 88, 0.15),
    0 10px 24px rgba(238, 61, 37, 0.14) !important;
}

/* 4. Numbers: 01, 02, 03, 04 */
.how-we-work-sec .card .n,
.mad section:has(.g4) .card .n,
.mad section:has(.grid.g4) .card .n {
  font-size: clamp(44px, 4vw, 64px) !important;
  font-weight: 800 !important;
  line-height: 1 !important;
  margin-bottom: 16px !important;
  background: linear-gradient(180deg, #ee3d25 0%, rgba(238, 61, 37, 0.35) 100%) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
  letter-spacing: -0.02em !important;
  transition: color .3s ease, filter .3s ease !important;
}

.how-we-work-sec .card:hover .n,
.mad section:has(.g4) .card:hover .n,
.mad section:has(.grid.g4) .card:hover .n {
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
  color: #ee3d25 !important;
  filter: drop-shadow(0 2px 10px rgba(238, 61, 37, 0.35)) !important;
}

/* Accent separator line under number inside card */
.how-we-work-sec .card .n::after,
.mad section:has(.g4) .card .n::after,
.mad section:has(.grid.g4) .card .n::after {
  content: "" !important;
  display: block !important;
  height: 2.5px !important;
  width: 100% !important;
  margin-top: 14px !important;
  border-radius: 3px !important;
  background: linear-gradient(90deg, #ee3d25, rgba(238, 61, 37, 0.06)) !important;
  opacity: 0.7 !important;
  transition: opacity .3s ease, background .3s ease !important;
}

.how-we-work-sec .card:hover .n::after,
.mad section:has(.g4) .card:hover .n::after,
.mad section:has(.grid.g4) .card:hover .n::after {
  background: #ee3d25 !important;
  opacity: 1 !important;
}

/* 5. Card Title */
.how-we-work-sec .card h3,
.mad section:has(.g4) .card h3,
.mad section:has(.grid.g4) .card h3 {
  color: #1e294b !important;
  font-size: clamp(20px, 1.6vw, 24px) !important;
  font-weight: 700 !important;
  margin: 0 0 10px !important;
  letter-spacing: -0.01em !important;
  transition: color .3s ease !important;
}

.how-we-work-sec .card:hover h3,
.mad section:has(.g4) .card:hover h3,
.mad section:has(.grid.g4) .card:hover h3 {
  color: #141b30 !important;
}

/* 6. Card Description */
.how-we-work-sec .card p,
.mad section:has(.g4) .card p,
.mad section:has(.grid.g4) .card p {
  color: #55627a !important;
  font-size: clamp(14px, 1.05vw, 16px) !important;
  line-height: 1.6 !important;
  margin: 0 !important;
  transition: color .3s ease !important;
}

.how-we-work-sec .card:hover p,
.mad section:has(.g4) .card:hover p,
.mad section:has(.grid.g4) .card:hover p {
  color: #3e4b63 !important;
}

/* ============================================================
   COMMON QUESTIONS (FAQ) — DEEP NAVY WITH AMBIENT RED GLOW
   Premium high-contrast theme breaking the light sequence
   - Rich Deep Navy (#233058) canvas with subtle red radial glows
   - Crisp White heading with Brand Red emphasis
   - Glassy dark cards with Brand Red borders on hover
   - When opened: Brand Red header with white text & minus icon
   - Answer panel in CLEAN CRISP WHITE (#ffffff) with Deep Navy text (#233058)
   - Balanced vertical spacing
   ============================================================ */

/* 1. Section Container & Canvas */
.faq-sec,
.mad section:has(details) {
  background-color: #233058 !important;
  background-image:
    radial-gradient(circle at 10% 18%, rgba(238, 61, 37, 0.18), transparent 48%),
    radial-gradient(circle at 90% 82%, rgba(238, 61, 37, 0.14), transparent 45%),
    radial-gradient(circle at 80% 16%, rgba(46, 64, 122, 0.65), transparent 50%) !important;
  padding: clamp(55px, 6vw, 85px) 0 clamp(40px, 4.5vw, 65px) !important;
  position: relative !important;
  border-top: 1px solid rgba(255, 255, 255, 0.12) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.faq-sec::before,
.faq-sec::after,
.mad section:has(details)::before,
.mad section:has(details)::after,
.mad section+section:has(details)::after {
  display: none !important;
  content: none !important;
}

.faq-sec .glow,
.mad section:has(details) .glow {
  display: none !important;
}

/* 2. Heading: Crisp White with Brand Red emphasis */
.faq-sec h2,
.mad section:has(details) h2 {
  color: #ffffff !important;
  font-size: clamp(32px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.01em !important;
  position: relative !important;
  display: inline-block !important;
  padding-bottom: 20px !important;
  margin-bottom: clamp(28px, 3.5vw, 44px) !important;
}

.faq-sec h2 em,
.mad section:has(details) h2 em {
  color: #ee3d25 !important;
  background: none !important;
  -webkit-background-clip: unset !important;
  background-clip: unset !important;
  -webkit-text-fill-color: #ee3d25 !important;
}

/* Remove any line above heading */
.faq-sec h2::before,
.faq-sec h2:before,
.mad section:has(details) h2::before,
.mad section:has(details) h2:before {
  display: none !important;
  content: none !important;
}

/* Red accent line strictly under the heading */
.faq-sec h2::after,
.faq-sec h2:after,
.mad section:has(details) h2::after,
.mad section:has(details) h2:after {
  content: "" !important;
  position: absolute !important;
  left: 0 !important;
  bottom: 0 !important;
  width: 56px !important;
  height: 3.5px !important;
  border-radius: 3px !important;
  background: #ee3d25 !important;
  box-shadow: 0 2px 10px rgba(238, 61, 37, 0.6) !important;
  display: block !important;
}

/* 3. Accordion Item (<details>) */
.mad details,
.mad section:has(details) details {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 12px !important;
  margin-bottom: 12px !important;
  padding: 0 !important;
  overflow: hidden !important;
  isolation: isolate !important;
  box-shadow: 0 4px 18px rgba(0, 0, 0, 0.15) !important;
  backdrop-filter: blur(8px) !important;
  -webkit-backdrop-filter: blur(8px) !important;
  transition:
    border-color 0.25s ease,
    box-shadow 0.25s ease,
    transform 0.25s ease,
    background-color 0.25s ease !important;
}

/* Remove dark vertical line on details */
.mad details::before,
.mad details:before,
.mad details::after,
.mad details:after {
  display: none !important;
  content: none !important;
}

/* 4. Question Item Hover */
.mad details:hover,
.mad section:has(details) details:hover {
  border-color: #ee3d25 !important;
  background-color: rgba(238, 61, 37, 0.08) !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 20px rgba(238, 61, 37, 0.22) !important;
  transform: translateY(-2px) !important;
}

/* 5. Summary / Question Title */
.mad details summary,
.mad section:has(details) details summary {
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 16px !important;
  padding: 1.15rem 1.4rem !important;
  cursor: pointer !important;
  font-family: "Geometria", sans-serif !important;
  font-weight: 600 !important;
  font-size: clamp(15px, 1.1vw, 17px) !important;
  line-height: 1.35 !important;
  color: #ffffff !important;
  list-style: none !important;
  outline: none !important;
  transition: background-color 0.25s ease, color 0.25s ease !important;
}

.mad details summary::-webkit-details-marker,
.mad details summary::marker {
  display: none !important;
}

.mad details:hover summary,
.mad section:has(details) details:hover summary {
  color: #ee3d25 !important;
}

/* Plus/Minus icon */
.mad details summary::after,
.mad section:has(details) details summary::after {
  content: "+" !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: #ee3d25 !important;
  flex: none !important;
  width: 26px !important;
  height: 26px !important;
  display: grid !important;
  place-items: center !important;
  border: none !important;
  border-radius: 0 !important;
  background: transparent !important;
  transform: none !important;
  transition: color 0.25s ease, transform 0.25s ease !important;
}

.mad details:hover summary::after,
.mad section:has(details) details:hover summary::after {
  color: #ee3d25 !important;
}

/* 6. OPEN STATE — Red Header with Pure White Crisp Answer Panel */
.mad details[open],
.mad section:has(details) details[open] {
  border: 1px solid #ee3d25 !important;
  border-radius: 12px !important;
  box-shadow: 0 16px 36px rgba(0, 0, 0, 0.35), 0 0 24px rgba(238, 61, 37, 0.25) !important;
  background: #ffffff !important;
  overflow: hidden !important;
  transform: none !important;
}

.mad details[open] summary,
.mad section:has(details) details[open] summary {
  background: #ee3d25 !important;
  color: #ffffff !important;
}

.mad details[open]:hover summary,
.mad section:has(details) details[open]:hover summary {
  background: #ee3d25 !important;
  color: #ffffff !important;
}

.mad details[open] summary::after,
.mad section:has(details) details[open] summary::after {
  content: "–" !important;
  color: #ffffff !important;
  font-size: 22px !important;
  font-weight: 500 !important;
  background: transparent !important;
  border: none !important;
  transform: none !important;
}

/* Answer Body — Crisp High-Contrast Light Surface (White with Deep Navy Text) */
.mad details[open] p,
.mad section:has(details) details[open] p {
  padding: 22px 26px !important;
  margin: 0 !important;
  background: #ffffff !important;
  color: #233058 !important;
  font-family: "Raleway", sans-serif !important;
  font-weight: 500 !important;
  font-size: clamp(15px, 1.05vw, 16.5px) !important;
  line-height: 1.65 !important;
  border-top: 1px solid rgba(238, 61, 37, 0.2) !important;
  max-width: 100% !important;
}

/* ============================================================
   READY TO BUILD YOUR... (CTA SECTION)
   Light Background Wrapper (#f8f9fc) with Floating Navy Rounded Card
   ============================================================ */

.mad section.cta {
  background-color: #f8f9fc !important;
  background-image: none !important;
  padding: clamp(38px, 5vw, 70px) 0 clamp(50px, 6vw, 85px) !important;
  position: relative !important;
  border-top: 1px solid rgba(35, 48, 88, 0.08) !important;
}

.mad section.cta::before,
.mad section.cta::after {
  display: none !important;
  content: none !important;
}

/* CTA Navy Box with Red Shades */
.mad section.cta > .w {
  background:
    radial-gradient(75% 85% at 0% 0%, rgba(238, 61, 37, 0.38) 0%, transparent 60%),
    radial-gradient(65% 75% at 100% 100%, rgba(238, 61, 37, 0.28) 0%, transparent 55%),
    radial-gradient(60% 70% at 85% 15%, rgba(46, 64, 122, 0.95) 0%, transparent 60%), #233058 !important;
  border: 1px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 32px !important;
  padding: clamp(36px, 4.5vw, 56px) clamp(24px, 4vw, 56px) !important;
  box-shadow:
    0 24px 60px rgba(35, 48, 88, 0.22),
    0 8px 24px rgba(238, 61, 37, 0.15) !important;
  text-align: center !important;
  position: relative !important;
  overflow: hidden !important;
  isolation: isolate !important;
}

/* Floating Red Ambient Orbs inside CTA Box */
.mad section.cta > .w::before {
  content: "" !important;
  position: absolute !important;
  width: 340px !important;
  height: 340px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(238, 61, 37, 0.32), transparent 70%) !important;
  top: -120px !important;
  left: -90px !important;
  pointer-events: none !important;
  filter: blur(40px) !important;
  z-index: -1 !important;
}

.mad section.cta > .w::after {
  content: "" !important;
  position: absolute !important;
  width: 300px !important;
  height: 300px !important;
  border-radius: 50% !important;
  background: radial-gradient(circle, rgba(238, 61, 37, 0.25), transparent 70%) !important;
  bottom: -90px !important;
  right: -70px !important;
  pointer-events: none !important;
  filter: blur(40px) !important;
  z-index: -1 !important;
}

/* CTA Heading */
.mad section.cta h2 {
  color: #ffffff !important;
  font-size: clamp(30px, 3.8vw, 54px) !important;
  font-weight: 700 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em !important;
  max-width: 24ch !important;
  margin: 0 auto 16px !important;
  display: block !important;
  padding-bottom: 0 !important;
}

.mad section.cta h2 em {
  color: #ee3d25 !important;
  background: linear-gradient(90deg, #ee3d25, #ff7a63) !important;
  -webkit-background-clip: text !important;
  background-clip: text !important;
  -webkit-text-fill-color: transparent !important;
}

.mad section.cta h2::before,
.mad section.cta h2::after {
  display: none !important;
  content: none !important;
}

/* CTA Description */
.mad section.cta p {
  color: rgba(255, 255, 255, 0.82) !important;
  font-size: clamp(15px, 1.15vw, 18px) !important;
  max-width: 52ch !important;
  margin: 0 auto clamp(20px, 2.5vw, 28px) !important;
  line-height: 1.6 !important;
}

/* CTA Buttons — Flex Row & Perfect Alignment */
.mad section.cta .btns {
  display: flex !important;
  flex-direction: row !important;
  justify-content: center !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
  margin-top: 0 !important;
  width: 100% !important;
}

/* Shared button styling */
.mad section.cta .accent-btn,
.mad section.cta .dark-btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  gap: 9px !important;
  height: 52px !important;
  min-height: 52px !important;
  padding: 0 30px !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  font-family: "Geometria", sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  letter-spacing: 0.05em !important;
  text-transform: uppercase !important;
  cursor: pointer !important;
  position: relative !important;
  overflow: hidden !important;
  transition: transform 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 0.32s cubic-bezier(0.34, 1.56, 0.64, 1), background-color 0.25s ease, border-color 0.25s ease !important;
  will-change: transform, box-shadow !important;
  box-sizing: border-box !important;
  vertical-align: middle !important;
}

/* Clean Reset on Button Text (<p>) for absolute vertical and horizontal centering */
.mad section.cta .accent-btn p,
.mad section.cta .dark-btn p {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: inherit !important;
  font-weight: inherit !important;
  font-size: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
  color: #ffffff !important;
  text-align: center !important;
  vertical-align: middle !important;
}

/* Primary Button (CONTACT US) — Default Brand Red, Hover Vibrant Purple */
.mad section.cta .accent-btn {
  background: #ee3d25 !important;
  border: 2px solid #ee3d25 !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(238, 61, 37, 0.45) !important;
}

.mad section.cta .accent-btn:hover {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 2px solid #8b78de !important;
  color: #ffffff !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 18px 42px rgba(110, 92, 191, 0.58), 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 24px rgba(139, 120, 222, 0.45) !important;
}

/* Arrow inside CONTACT US — guaranteed 100% visible and centered */
.mad section.cta .accent-btn span {
  display: inline-block !important;
  width: 13px !important;
  height: 9px !important;
  min-width: 13px !important;
  min-height: 9px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='10' height='7' viewBox='0 0 10 7' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M7.244 2.894L5.102 0.5H6.684L9.30199 3.524L6.684 6.534H5.102L7.244 4.126H1V2.894H7.244Z' fill='%23ffffff'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform .25s ease !important;
  vertical-align: middle !important;
}

.mad section.cta .accent-btn:hover span {
  transform: translateX(4px) !important;
}

/* Secondary Button (ALL SERVICES) — Vibrant Purple with Brand Red Hover */
.mad section.cta .dark-btn {
  background: linear-gradient(135deg, #6e5cbf 0%, #544199 50%, #3e2b7a 100%) !important;
  border: 2px solid #8b78de !important;
  color: #ffffff !important;
  box-shadow: 0 8px 24px rgba(110, 92, 191, 0.4) !important;
}

.mad section.cta .dark-btn:hover {
  background: #ee3d25 !important;
  border: 2px solid #ee3d25 !important;
  color: #ffffff !important;
  transform: translateY(-6px) scale(1.03) !important;
  box-shadow: 0 18px 42px rgba(238, 61, 37, 0.58), 0 8px 18px rgba(0, 0, 0, 0.28), 0 0 24px rgba(238, 61, 37, 0.4) !important;
}

.mad section.cta .dark-btn:hover p {
  color: #ffffff !important;
}


/* Service icon inside ALL SERVICES button */
.mad section.cta .dark-btn span {
  display: inline-block !important;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  margin: 0 !important;
  padding: 0 !important;
  flex: none !important;
  background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M2.00732 9.08203H8.99048L2.00732 2.09888V9.08203Z' fill='white'/%3E%3Cpath d='M8.99023 9.08203H15.9734L8.99023 2.09888V9.08203Z' fill='white'/%3E%3Cpath d='M2.00732 17.0273H8.99048L2.00732 10.0442V17.0273Z' fill='white'/%3E%3Cpath d='M8.98999 17.0273H15.9738L8.98999 10.0445V17.0273Z' fill='white'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: center !important;
  background-size: contain !important;
  transition: transform .25s ease !important;
  vertical-align: middle !important;
}

.mad section.cta .dark-btn:hover span {
  transform: rotate(90deg) !important;
}


/* Active press-down feel on CTA buttons */
.mad section.cta .accent-btn:active,
.mad section.cta .dark-btn:active {
  transform: translateY(-2px) scale(0.99) !important;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.35) !important;
  transition-duration: 0.1s !important;
}