.elementor-8113 .elementor-element.elementor-element-1656826{--display:flex;--min-height:85vh;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;--gap:0px 0px;--row-gap:0px;--column-gap:0px;border-style:none;--border-style:none;--border-radius:0px 0px 0px 0px;--padding-top:20px;--padding-bottom:0px;--padding-left:150px;--padding-right:150px;overflow:visible;}.elementor-8113 .elementor-element.elementor-element-1656826:not(.elementor-motion-effects-element-type-background), .elementor-8113 .elementor-element.elementor-element-1656826 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:var( --e-global-color-primary );background-image:url("https://www.mosaicdigital.ae/wp-content/uploads/2026/01/webHeader.jpg");}.elementor-8113 .elementor-element.elementor-element-1656826.e-con{--flex-grow:0;--flex-shrink:0;}.elementor-8113 .elementor-element.elementor-element-65259ce{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;--margin-top:80px;--margin-bottom:0px;--margin-left:0px;--margin-right:0px;--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;overflow:visible;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-icon i{color:var( --e-global-color-49f85ba );transition:color 0.3s;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-icon svg{fill:var( --e-global-color-49f85ba );transition:fill 0.3s;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5{--e-icon-list-icon-size:28px;--icon-vertical-offset:0px;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-item > a{font-size:22px;font-weight:600;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-text{color:var( --e-global-color-c5eafae );transition:color 0.3s;}.elementor-8113 .elementor-element.elementor-element-721cf19.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-8113 .elementor-element.elementor-element-721cf19 .elementor-heading-title{font-family:"Hedvig Letters Serif", Sans-serif;font-size:55px;font-weight:700;line-height:55px;color:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-463d60a{padding:0px 0px 0px 0px;font-family:"Tenon - normal", Sans-serif;font-size:19px;font-weight:400;letter-spacing:0.8px;color:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-463d60a.elementor-element{--flex-grow:0;--flex-shrink:0;}.elementor-8113 .elementor-element.elementor-element-5e13b7f{--display:grid;--e-con-grid-template-columns:repeat(2, 1fr);--e-con-grid-template-rows:repeat(1, 1fr);--grid-auto-flow:row;overflow:visible;}.elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button{background-color:var( --e-global-color-49f85ba );font-family:"Tenon - normal", Sans-serif;font-size:15px;font-weight:500;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:20px 20px 20px 20px;}.elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button:hover, .elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button:focus{background-color:var( --e-global-color-49f85ba );color:#FFFFFF;border-color:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button .elementor-button-content-wrapper{gap:11px;}.elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button:hover svg, .elementor-8113 .elementor-element.elementor-element-a63a9f2 .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button{background-color:var( --e-global-color-49f85ba );font-family:"Tenon - normal", Sans-serif;font-size:15px;font-weight:500;text-decoration:none;fill:#FFFFFF;color:#FFFFFF;border-style:solid;border-width:1px 1px 1px 1px;border-color:#FFFFFF;border-radius:20px 20px 20px 20px;}.elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button:hover, .elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button:focus{background-color:var( --e-global-color-49f85ba );color:#FFFFFF;border-color:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button-content-wrapper{flex-direction:row-reverse;}.elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button .elementor-button-content-wrapper{gap:11px;}.elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button:hover svg, .elementor-8113 .elementor-element.elementor-element-d15893f .elementor-button:focus svg{fill:#FFFFFF;}.elementor-8113 .elementor-element.elementor-element-11f7d5a{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;overflow:visible;}html{height:100vh;margin:0;overflow:hidden;}body{height:100vh;overflow:auto;scroll-snap-type:y mandatory;}:root{--page-title-display:none;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}@media(max-width:1024px){.elementor-8113 .elementor-element.elementor-element-721cf19 .elementor-heading-title{font-size:41px;line-height:1.5em;}.elementor-8113 .elementor-element.elementor-element-5e13b7f{--grid-auto-flow:row;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}@media(min-width:768px){.elementor-8113 .elementor-element.elementor-element-65259ce{--width:55%;}}@media(max-width:1366px) and (min-width:768px){.elementor-8113 .elementor-element.elementor-element-1656826{--width:1208.8%;}}@media(max-width:1024px) and (min-width:768px){.elementor-8113 .elementor-element.elementor-element-65259ce{--width:80%;}}@media(max-width:1366px){.elementor-8113 .elementor-element.elementor-element-721cf19{width:var( --container-widget-width, 660.55px );max-width:660.55px;--container-widget-width:660.55px;--container-widget-flex-grow:0;}.elementor-8113 .elementor-element.elementor-element-463d60a{width:var( --container-widget-width, 706.55px );max-width:706.55px;--container-widget-width:706.55px;--container-widget-flex-grow:0;}.elementor-8113 .elementor-element.elementor-element-5e13b7f{--grid-auto-flow:row;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}@media(max-width:767px){.elementor-8113 .elementor-element.elementor-element-1656826{--padding-top:0px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8113 .elementor-element.elementor-element-65259ce{--padding-top:50px;--padding-bottom:0px;--padding-left:0px;--padding-right:0px;}.elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-item > .elementor-icon-list-text, .elementor-8113 .elementor-element.elementor-element-4c8e7b5 .elementor-icon-list-item > a{font-size:16px;}.elementor-8113 .elementor-element.elementor-element-721cf19{text-align:center;}.elementor-8113 .elementor-element.elementor-element-721cf19 .elementor-heading-title{font-size:28px;line-height:1.3em;}.elementor-8113 .elementor-element.elementor-element-463d60a{padding:0px 10px 0px 15px;--container-widget-width:376px;--container-widget-flex-grow:0;width:var( --container-widget-width, 376px );max-width:376px;font-size:16px;}.elementor-8113 .elementor-element.elementor-element-5e13b7f{--e-con-grid-template-columns:repeat(1, 1fr);--grid-auto-flow:row;}.elementor-section:not(.elementor-inner-section), .elementor-location-header, .elementor-location-footer, .page-header, .site-header, .elementor-add-section, .e-con:not(.e-child){scroll-snap-align:start;scroll-snap-stop:normal;}}/* Start custom CSS for html, class: .elementor-element-d688291 *//* === MOSAIC STATS BAR === */
.md-stats {
  background: #0A0A1A;
  border-top: 1px solid rgba(255,255,255,0.06);
  border-bottom: 1px solid rgba(255,255,255,0.06);
  padding: 40px 20px;
  position: relative;
  overflow: hidden;
}

.md-stats::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #E8175D, #9C27B0, #00BCD4, #4CAF50);
  opacity: .7;
}

.md-stats__wrap {
  max-width: 900px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.md-stats__item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  flex: 1;
  text-align: center;
  padding: 0 10px;
}

.md-stats__icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  background: rgba(232,23,93,.12);
  border: 1px solid rgba(232,23,93,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #E8175D;
  transition: transform .3s ease, box-shadow .3s ease;
}

.md-stats__icon svg { width: 22px; height: 22px; }

.md-stats__icon--cyan   { background: rgba(0,188,212,.12);  border-color: rgba(0,188,212,.2);  color: #00BCD4; }
.md-stats__icon--purple { background: rgba(156,39,176,.12); border-color: rgba(156,39,176,.2); color: #CE93D8; }
.md-stats__icon--green  { background: rgba(76,175,80,.12);  border-color: rgba(76,175,80,.2);  color: #4CAF50; }

.md-stats__item:hover .md-stats__icon {
  transform: translateY(-3px);
  box-shadow: 0 8px 20px rgba(232,23,93,.25);
}

.md-stats__item:nth-child(3):hover .md-stats__icon { box-shadow: 0 8px 20px rgba(0,188,212,.25); }
.md-stats__item:nth-child(5):hover .md-stats__icon { box-shadow: 0 8px 20px rgba(156,39,176,.25); }
.md-stats__item:nth-child(7):hover .md-stats__icon { box-shadow: 0 8px 20px rgba(76,175,80,.25); }

.md-stats__num {
  font-size: clamp(22px, 3vw, 32px);
  font-weight: 800;
  letter-spacing: -1px;
  line-height: 1;
  background: linear-gradient(135deg, #E8175D, #9C27B0, #00BCD4);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.md-stats__label {
  font-size: 12px;
  font-weight: 600;
  color: rgba(255,255,255,.55);
  letter-spacing: .3px;
  line-height: 1.4;
}

.md-stats__divider {
  width: 1px;
  height: 60px;
  background: rgba(255,255,255,.08);
  flex-shrink: 0;
}

/* Tablet */
@media (max-width: 768px) {
  .md-stats__wrap { gap: 6px; }
  .md-stats__icon { width: 40px; height: 40px; }
  .md-stats__icon svg { width: 18px; height: 18px; }
  .md-stats__divider { height: 50px; }
}

/* Mobile */
@media (max-width: 480px) {
  .md-stats__wrap { flex-wrap: wrap; }
  .md-stats__item { width: 45%; flex: none; padding: 16px 10px; }
  .md-stats__divider { display: none; }
  .md-stats__item:nth-child(1),
  .md-stats__item:nth-child(3) { border-right: 1px solid rgba(255,255,255,.08); }
  .md-stats__item:nth-child(1),
  .md-stats__item:nth-child(2) { border-bottom: 1px solid rgba(255,255,255,.08); }
}

@media (prefers-reduced-motion: reduce) {
  .md-stats__icon { transition: none; }
}/* End custom CSS */
/* Start custom CSS for container, class: .elementor-element-1656826 */.elementor-8113 .elementor-element.elementor-element-1656826 {
    width: 100%;

}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-3794152 *//* ══════════════════════════════════════
   SECTION 2 — WHAT IS LOCAL SEO
   AI Overview / Definition Block
   Brand: Mosaic | Logo Colors Applied
══════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mosaic-red:      #E8393A;
    --mosaic-orange:   #F5A623;
    --mosaic-green:    #4CAF50;
    --mosaic-blue:     #2196F3;
    --mosaic-purple:   #9C27B0;
    --dark:            #1A1A2E;
    --dark-2:          #2D2D2D;
    --gray:            #6B7280;
    --gray-2:          #9CA3AF;
    --light:           #F9FAFB;
    --white:           #FFFFFF;
    --border:          rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.local-seo-def-section {
    background: linear-gradient(
        160deg,
        #FAFBFF 0%,
        #F5F0FF 30%,
        #F0F8FF 65%,
        #F5FFF7 100%
    );
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

.local-seo-def-section::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(
        circle,
        rgba(33,150,243,0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.local-seo-def-section::after {
    content: '';
    position: absolute;
    bottom: -180px; left: -180px;
    width: 550px; height: 550px;
    background: radial-gradient(
        circle,
        rgba(76,175,80,0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.def-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION LABEL
══════════════════════════════════════ */
.def-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(33,150,243,0.10);
    color: #1565C0;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(33,150,243,0.18);
}

.def-section-label i { font-size: 11px; }

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.def-header {
    max-width: 880px;
    margin-bottom: 50px;
}

.def-header h2 {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 22px;
    letter-spacing: -0.5px;
}

.def-header h2 .gradient-word {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.def-opening-answer {
    font-size: clamp(15px, 1.8vw, 17px);
    color: var(--gray);
    line-height: 1.85;
    margin-bottom: 22px;
    font-weight: 400;
}

.def-opening-answer strong {
    color: var(--dark);
    font-weight: 700;
}

/* ── Search Example Pills ── */
.def-search-pills {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 18px;
}

.def-search-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 8px 16px;
    background: white;
    border-radius: 50px;
    font-size: 12.5px;
    font-weight: 600;
    color: var(--dark-2);
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.25s;
    cursor: default;
}

.def-search-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.def-search-pill i { font-size: 10px; }
.pill-blue   i { color: var(--mosaic-blue); }
.pill-green  i { color: var(--mosaic-green); }
.pill-orange i { color: var(--mosaic-orange); }
.pill-purple i { color: var(--mosaic-purple); }
.pill-red    i { color: var(--mosaic-red); }

/* ══════════════════════════════════════
   KEY STATS BANNER — DARK BAR
══════════════════════════════════════ */
.def-stats-banner {
    background: var(--dark);
    border-radius: 22px;
    padding: 32px 40px;
    margin-bottom: 56px;
    display: grid;
    grid-template-columns: 1fr auto 1fr auto 1fr auto 1fr;
    align-items: center;
    position: relative;
    overflow: hidden;
}

/* Gradient top stripe */
.def-stats-banner::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
}

/* Glow */
.def-stats-banner::after {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 260px; height: 260px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.stat-item {
    text-align: center;
    padding: 0 20px;
}

.stat-item-num {
    display: block;
    font-size: clamp(24px, 3vw, 34px);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 8px;
}

.si-red    { color: #FF6B6B; }
.si-orange { color: #FFB347; }
.si-green  { color: #69F08C; }
.si-blue   { color: #64B5F6; }

.stat-item-label {
    font-size: 12px;
    color: rgba(255,255,255,0.55);
    font-weight: 500;
    line-height: 1.4;
}

.stat-banner-divider {
    width: 1px;
    height: 56px;
    background: rgba(255,255,255,0.10);
}

/* ══════════════════════════════════════
   WHY IT MATTERS — 2 COL LAYOUT
══════════════════════════════════════ */
.def-why-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 28px;
    align-items: center;
    margin-bottom: 64px;
}

/* ── Left: Text ── */
.def-why-text {
    padding-right: 16px;
}

.def-why-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(232,57,58,0.09);
    color: var(--mosaic-red);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(232,57,58,0.14);
}

.def-why-text h3 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.22;
    margin-bottom: 16px;
    letter-spacing: -0.3px;
}

.def-why-text p {
    font-size: 14.5px;
    color: var(--gray);
    line-height: 1.85;
    margin-bottom: 14px;
}

.def-why-text p strong {
    color: var(--dark);
    font-weight: 700;
}

/* ── Client Proof Chips ── */
.def-client-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
}

.def-client-chip {
    display: flex;
    align-items: center;
    gap: 9px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 12px;
    padding: 9px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-2);
    box-shadow: var(--shadow-sm);
    transition: all 0.22s;
    text-decoration: none;
    cursor: pointer;
}

.def-client-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
    border-color: rgba(33,150,243,0.20);
}

.chip-avatar {
    width: 30px;
    height: 30px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.ca-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.ca-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.ca-ac { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.ca-sh { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.chip-text-block {}

.chip-name {
    display: block;
    font-size: 11.5px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

.chip-result {
    display: block;
    font-size: 10px;
    color: var(--mosaic-green);
    font-weight: 600;
}

/* ── Right: Google Maps Visual Card ── */
.def-why-visual {
    position: relative;
}

/* Floating stat cards */
.why-float-card {
    position: absolute;
    background: white;
    border-radius: 14px;
    padding: 11px 16px;
    box-shadow: 0 10px 32px rgba(0,0,0,0.14);
    border: 1px solid rgba(255,255,255,0.9);
    display: flex;
    align-items: center;
    gap: 11px;
    z-index: 5;
    white-space: nowrap;
    pointer-events: none;
}

.wfc-top {
    top: -16px; left: -16px;
    animation: wfcFloat1 3.5s ease-in-out infinite;
}

.wfc-bot {
    bottom: -16px; right: -16px;
    animation: wfcFloat2 3s ease-in-out infinite;
}

@keyframes wfcFloat1 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-7px); }
}
@keyframes wfcFloat2 {
    0%, 100% { transform: translateY(0); }
    50%       { transform: translateY(-5px); }
}

.wfc-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
}

.wfc-icon-green  { background: rgba(76,175,80,0.12);  color: var(--mosaic-green); }
.wfc-icon-orange { background: rgba(245,166,35,0.14);  color: var(--mosaic-orange); }

.wfc-num {
    font-size: 18px;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 2px;
}

.wfc-label {
    font-size: 10px;
    color: var(--gray-2);
    font-weight: 500;
}

/* ── Map Mockup Card ── */
.map-mockup-card {
    background: white;
    border-radius: 20px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
}

/* Map top search bar */
.map-search-bar {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 16px;
    background: #F8F9FA;
    border-bottom: 1px solid #F3F4F6;
}

.map-search-input {
    flex: 1;
    display: flex;
    align-items: center;
    gap: 8px;
    background: white;
    border: 1.5px solid #E5E7EB;
    border-radius: 9px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--gray);
    font-family: 'Poppins', sans-serif;
}

.map-search-input i {
    color: var(--mosaic-blue);
    font-size: 11px;
}

/* Map visual area — CSS map simulation */
.map-visual-area {
    height: 170px;
    background: linear-gradient(135deg, #EBF5EB 0%, #E8F4FF 50%, #F0EBF8 100%);
    position: relative;
    overflow: hidden;
}

/* Grid overlay */
.map-visual-area::before {
    content: '';
    position: absolute;
    inset: 0;
    background-image:
        linear-gradient(rgba(69,123,157,0.07) 1px, transparent 1px),
        linear-gradient(90deg, rgba(69,123,157,0.07) 1px, transparent 1px);
    background-size: 28px 28px;
}

/* Road lines */
.map-road {
    position: absolute;
    background: rgba(255,255,255,0.72);
    border-radius: 4px;
}

.mr-h1 { width: 100%; height: 9px; top: 38%; }
.mr-h2 { width: 65%; height: 7px; top: 68%; left: 18%; }
.mr-v1 { width: 9px; height: 100%; left: 32%; }
.mr-v2 { width: 7px; height: 72%; left: 63%; top: 0; }

/* Map pins */
.map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    z-index: 3;
    cursor: default;
    transition: transform 0.2s;
}

.map-pin:hover { transform: scale(1.12); }

.mp-icon {
    width: 32px; height: 32px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 14px rgba(0,0,0,0.22);
}

.mp-icon i {
    transform: rotate(45deg);
    font-size: 12px;
    color: white;
}

.mp-label {
    background: white;
    border-radius: 6px;
    padding: 3px 8px;
    font-size: 9px;
    font-weight: 700;
    color: var(--dark);
    box-shadow: 0 2px 8px rgba(0,0,0,0.12);
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
}

/* Pin positions */
.mpin-aa  { top: 25%; left: 24%; }
.mpin-fm  { top: 18%; left: 57%; }
.mpin-ac  { top: 55%; left: 52%; }
.mpin-sh  { top: 62%; left: 22%; }

.mpin-aa  .mp-icon { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.mpin-fm  .mp-icon { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.mpin-ac  .mp-icon { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.mpin-sh  .mp-icon { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

/* Dubai area labels on map */
.map-area-label {
    position: absolute;
    font-size: 8.5px;
    font-weight: 700;
    color: rgba(44,62,80,0.45);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    pointer-events: none;
}

.mal-1 { top: 8%;  left: 8%; }
.mal-2 { top: 8%;  right: 8%; }
.mal-3 { bottom: 10%; left: 8%; }
.mal-4 { bottom: 10%; right: 8%; }

/* Map Results (3-pack list) */
.map-results-list {
    border-top: 1px solid #F3F4F6;
}

.map-result-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 16px;
    border-bottom: 1px solid #F9FAFB;
    transition: background 0.2s;
    cursor: pointer;
}

.map-result-row:last-child { border-bottom: none; }
.map-result-row:hover { background: #F5F8FF; }

.map-result-rank {
    width: 26px; height: 26px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.rank-c-1 { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.rank-c-2 { background: #9CA3AF; }
.rank-c-3 { background: #C4CAD4; }

.map-result-info { flex: 1; }

.map-result-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 2px;
}

.map-result-meta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 10px;
    color: var(--gray-2);
}

.map-result-stars { color: var(--mosaic-orange); font-size: 10px; font-weight: 700; }

.map-open-tag {
    background: rgba(76,175,80,0.10);
    color: #2E7D32;
    padding: 1px 7px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 700;
}

.map-verified-chip {
    background: var(--dark);
    color: white;
    padding: 2px 9px;
    border-radius: 50px;
    font-size: 9px;
    font-weight: 700;
    display: flex;
    align-items: center;
    gap: 3px;
    flex-shrink: 0;
    white-space: nowrap;
}

/* ══════════════════════════════════════
   CORE COMPONENTS — 6-CARD GRID
══════════════════════════════════════ */
.def-components-wrap {
    margin-bottom: 60px;
}

.def-components-heading {
    margin-bottom: 36px;
}

.def-components-heading h3 {
    font-size: clamp(22px, 2.8vw, 34px);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 12px;
    line-height: 1.2;
    letter-spacing: -0.3px;
}

.def-components-heading h3 .gradient-word {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.def-components-heading p {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.7;
    max-width: 580px;
}

/* 6-card grid */
.def-components-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
}

/* ── Component Card ── */
.def-comp-card {
    background: white;
    border-radius: 20px;
    padding: 28px 24px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
}

/* Top color strip */
.def-comp-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 20px 20px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.def-comp-card:hover {
    transform: translateY(-7px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.def-comp-card:hover::before { opacity: 1; }

/* Card strip colors */
.dcc-gbp::before      { background: linear-gradient(90deg, var(--mosaic-blue),   var(--mosaic-purple)); }
.dcc-citation::before { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-red)); }
.dcc-maps::before     { background: linear-gradient(90deg, var(--mosaic-red),    var(--mosaic-orange)); }
.dcc-reviews::before  { background: linear-gradient(90deg, var(--mosaic-green),  var(--mosaic-blue)); }
.dcc-onpage::before   { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.dcc-links::before    { background: linear-gradient(90deg, var(--mosaic-blue),   var(--mosaic-green)); }

/* Card number watermark */
.dcc-num {
    position: absolute;
    top: 18px; right: 20px;
    font-size: 38px;
    font-weight: 900;
    color: rgba(0,0,0,0.04);
    line-height: 1;
    user-select: none;
}

/* Card icon */
.dcc-icon {
    width: 52px; height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 20px;
    margin-bottom: 18px;
}

.icon-c-gbp      { background: rgba(33,150,243,0.10);   color: var(--mosaic-blue); }
.icon-c-citation { background: rgba(245,166,35,0.12);   color: var(--mosaic-orange); }
.icon-c-maps     { background: rgba(232,57,58,0.10);    color: var(--mosaic-red); }
.icon-c-reviews  { background: rgba(76,175,80,0.10);    color: var(--mosaic-green); }
.icon-c-onpage   { background: rgba(156,39,176,0.10);   color: var(--mosaic-purple); }
.icon-c-links    { background: rgba(33,150,243,0.10);   color: var(--mosaic-blue); }

/* Card title */
.dcc-title {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.3;
}

/* Card description */
.dcc-desc {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.78;
    margin-bottom: 16px;
}

.dcc-desc strong {
    color: var(--dark-2);
    font-weight: 700;
}

/* Client proof tag */
.dcc-proof-tag {
    display: flex;
    align-items: flex-start;
    gap: 7px;
    padding: 8px 12px;
    border-radius: 9px;
    font-size: 11px;
    font-weight: 600;
    line-height: 1.4;
    margin-bottom: 14px;
}

.pt-gbp      { background: rgba(33,150,243,0.07);  color: #1565C0; }
.pt-citation { background: rgba(245,166,35,0.10);  color: #E65100; }
.pt-maps     { background: rgba(232,57,58,0.07);   color: #C62828; }
.pt-reviews  { background: rgba(76,175,80,0.08);   color: #1B5E20; }
.pt-onpage   { background: rgba(156,39,176,0.08);  color: #6A1B9A; }
.pt-links    { background: rgba(33,150,243,0.07);  color: #0D47A1; }

.dcc-proof-tag i { font-size: 10px; flex-shrink: 0; margin-top: 2px; }

/* Impact bar */
.dcc-impact-bar {
    border-top: 1px solid #F3F4F6;
    padding-top: 14px;
}

.impact-bar-meta {
    display: flex;
    justify-content: space-between;
    font-size: 10px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.3px;
    margin-bottom: 6px;
}

.impact-bar-track {
    height: 5px;
    background: #F3F4F6;
    border-radius: 3px;
    overflow: hidden;
}

.impact-bar-fill {
    height: 100%;
    border-radius: 3px;
    transition: width 1.6s ease;
}

.ibf-gbp      { background: linear-gradient(90deg, var(--mosaic-blue),   var(--mosaic-purple)); }
.ibf-citation { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-red)); }
.ibf-maps     { background: linear-gradient(90deg, var(--mosaic-red),    var(--mosaic-orange)); }
.ibf-reviews  { background: linear-gradient(90deg, var(--mosaic-green),  var(--mosaic-blue)); }
.ibf-onpage   { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.ibf-links    { background: linear-gradient(90deg, var(--mosaic-blue),   var(--mosaic-green)); }

/* ══════════════════════════════════════
   AI OVERVIEW CALLOUT — DARK BLOCK
══════════════════════════════════════ */
.def-ai-callout {
    background: var(--dark);
    border-radius: 24px;
    padding: 44px 52px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 48px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.def-ai-callout::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
}

.def-ai-callout::after {
    content: '';
    position: absolute;
    bottom: -90px; right: -90px;
    width: 250px; height: 250px;
    border-radius: 50%;
    background: rgba(255,255,255,0.025);
    pointer-events: none;
}

/* Decorative dot grid */
.ai-callout-dots {
    position: absolute;
    top: 0; left: 0; right: 0; bottom: 0;
    background-image: radial-gradient(circle, rgba(255,255,255,0.04) 1px, transparent 1px);
    background-size: 28px 28px;
    pointer-events: none;
}

/* Text side */
.ai-callout-text { position: relative; z-index: 1; }

.ai-callout-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.85);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 16px;
    border: 1px solid rgba(255,255,255,0.12);
}

.ai-callout-heading {
    font-size: clamp(18px, 2.4vw, 26px);
    font-weight: 800;
    color: white;
    margin-bottom: 12px;
    line-height: 1.25;
}

.ai-callout-heading .gradient-word {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ai-callout-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.78;
    max-width: 480px;
}

/* Platform pills */
.ai-callout-platforms {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.ai-platform-pill {
    display: flex;
    align-items: center;
    gap: 11px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 14px;
    padding: 11px 18px;
    font-size: 13px;
    font-weight: 700;
    color: white;
    min-width: 190px;
    transition: all 0.22s;
    cursor: default;
}

.ai-platform-pill:hover {
    background: rgba(255,255,255,0.11);
    border-color: rgba(255,255,255,0.20);
}

.app-icon-wrap {
    width: 30px; height: 30px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    flex-shrink: 0;
}

.ai-gpt    { background: #10A37F; }
.ai-gemini { background: #4285F4; }
.ai-google { background: linear-gradient(135deg, #EA4335, #FBBC04, #34A853, #4285F4); }
.ai-perp   { background: #7B2FBE; }

.app-check-dot {
    margin-left: auto;
    width: 20px; height: 20px;
    border-radius: 50%;
    background: rgba(76,175,80,0.18);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    color: #69F08C;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1024px) {
    .def-stats-banner {
        grid-template-columns: 1fr 1fr;
        gap: 0;
        padding: 28px 24px;
    }

    .stat-banner-divider { display: none; }

    .stat-item {
        padding: 12px 16px;
        border-right: 1px solid rgba(255,255,255,0.08);
        border-bottom: 1px solid rgba(255,255,255,0.08);
    }

    .stat-item:nth-child(2n) { border-right: none; }
    .stat-item:nth-child(3),
    .stat-item:nth-child(4)  { border-bottom: none; }

    .def-components-grid { grid-template-columns: 1fr 1fr; }

    .def-ai-callout {
        grid-template-columns: 1fr;
        gap: 28px;
        padding: 32px 28px;
    }

    .ai-callout-platforms {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .ai-platform-pill {
        min-width: 150px;
        flex: 1;
    }
}

@media (max-width: 768px) {
    .local-seo-def-section { padding: 70px 16px; }

    .def-why-row {
        grid-template-columns: 1fr;
        gap: 36px;
    }

    .def-why-text { padding-right: 0; }

    .why-float-card { display: none; }

    .def-components-grid { grid-template-columns: 1fr; }
}

@media (max-width: 480px) {
    .def-header h2  { font-size: 26px; }
    .def-search-pills { gap: 7px; }
    .def-search-pill  { font-size: 11px; padding: 6px 12px; }
    .def-client-chips { gap: 7px; }
    .ai-callout-platforms { flex-direction: column; }
    .ai-platform-pill { min-width: unset; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-e20cedd *//* ══════════════════════════════════════
   SECTION 3 — CLIENT RESULTS & PROOF
   4 Real UAE Businesses — Verified Data
   Mosaic Brand Colors
══════════════════════════════════════ */

* { margin: 0; padding: 0; box-sizing: border-box; }

:root {
    --mosaic-red:     #E8393A;
    --mosaic-orange:  #F5A623;
    --mosaic-green:   #4CAF50;
    --mosaic-blue:    #2196F3;
    --mosaic-purple:  #9C27B0;
    --dark:           #1A1A2E;
    --dark-2:         #2D2D2D;
    --gray:           #6B7280;
    --gray-2:         #9CA3AF;
    --light:          #F9FAFB;
    --white:          #FFFFFF;
    --border:         rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 24px 64px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.cr-section {
    background: linear-gradient(160deg, #FAFBFF 0%, #F8F5FF 30%, #FFF8F2 65%, #F5FFF8 100%);
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

.cr-section::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(232,57,58,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.cr-section::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(33,150,243,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.cr-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.cr-section-header {
    text-align: center;
    margin-bottom: 60px;
}

.cr-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(232,57,58,0.09);
    color: var(--mosaic-red);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(232,57,58,0.15);
}

.cr-section-label i { font-size: 11px; }

.cr-section-header h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.cr-gradient-text {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.cr-section-subline {
    font-size: 16px;
    color: var(--gray);
    line-height: 1.75;
    max-width: 660px;
    margin: 0 auto 28px;
}

/* Verified badges row */
.cr-verified-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.cr-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 7px 16px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark-2);
    box-shadow: var(--shadow-sm);
}

.cr-verified-badge i { font-size: 11px; }
.cvb-green  i { color: var(--mosaic-green); }
.cvb-blue   i { color: var(--mosaic-blue); }
.cvb-orange i { color: var(--mosaic-orange); }

/* ══════════════════════════════════════
   CLIENT TABS NAV
══════════════════════════════════════ */
.cr-tabs-nav {
    display: flex;
    gap: 10px;
    margin-bottom: 36px;
    background: white;
    border-radius: 20px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    overflow-x: auto;
}

.cr-tab-btn {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 14px 20px;
    border-radius: 14px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex-shrink: 0;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    min-width: 200px;
}

.cr-tab-btn:hover { background: var(--light); }

.cr-tab-btn.active {
    background: var(--dark);
    box-shadow: 0 6px 20px rgba(26,26,46,0.20);
}

.cr-tab-avatar {
    width: 40px;
    height: 40px;
    border-radius: 11px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.tab-color-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.tab-color-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.tab-color-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.tab-color-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.cr-tab-info { flex: 1; text-align: left; }

.cr-tab-name {
    display: block;
    font-size: 13px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 2px;
    transition: color 0.3s;
}

.cr-tab-industry {
    display: block;
    font-size: 10.5px;
    color: var(--gray-2);
    font-weight: 500;
    transition: color 0.3s;
}

.cr-tab-btn.active .cr-tab-name,
.cr-tab-btn.active .cr-tab-industry { color: white; }

.cr-tab-result-pill {
    background: rgba(76,175,80,0.12);
    color: #2E7D32;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    white-space: nowrap;
    transition: all 0.3s;
}

.cr-tab-btn.active .cr-tab-result-pill {
    background: rgba(255,255,255,0.15);
    color: rgba(255,255,255,0.90);
}

/* ══════════════════════════════════════
   CLIENT PANELS
══════════════════════════════════════ */
.cr-panel {
    display: none;
    animation: crFadeIn 0.4s ease;
}

.cr-panel.active { display: block; }

@keyframes crFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   MAIN CLIENT CARD
══════════════════════════════════════ */
.cr-client-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
}

/* Top gradient stripe */
.cr-client-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 2;
    border-radius: 24px 24px 0 0;
}

.cr-card-aa::before { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.cr-card-pf::before { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.cr-card-fm::before { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-blue)); }
.cr-card-tl::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }

/* ── IDENTITY BAR ── */
.cr-identity-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 28px 36px 24px;
    border-bottom: 1px solid #F3F4F6;
    background: #FAFBFF;
    flex-wrap: wrap;
    gap: 16px;
}

.cr-identity-left {
    display: flex;
    align-items: center;
    gap: 18px;
}

.cr-client-logo {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
}

.logo-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.logo-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.logo-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.logo-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.cr-client-name {
    font-size: 18px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.2;
}

.cr-client-meta {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cr-industry-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 11px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

.pill-aa { background: rgba(156,39,176,0.10); color: var(--mosaic-purple); }
.pill-pf { background: rgba(232,57,58,0.09);  color: var(--mosaic-red); }
.pill-fm { background: rgba(76,175,80,0.10);  color: #2E7D32; }
.pill-tl { background: rgba(33,150,243,0.10); color: var(--mosaic-blue); }

.cr-location-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--gray-2);
    font-weight: 500;
}

.cr-location-pill i { color: var(--mosaic-red); font-size: 10px; }

.cr-website-link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--mosaic-blue);
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(33,150,243,0.20);
    padding: 3px 11px;
    border-radius: 50px;
    transition: all 0.2s;
}

.cr-website-link:hover {
    background: rgba(33,150,243,0.07);
    border-color: var(--mosaic-blue);
}

.cr-identity-right {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.cr-comp-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    background: rgba(232,57,58,0.08);
    color: #C62828;
    border: 1px solid rgba(232,57,58,0.14);
}

.cr-featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: linear-gradient(135deg, var(--mosaic-orange), var(--mosaic-red));
    color: white;
    padding: 6px 14px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: 700;
    box-shadow: 0 3px 10px rgba(232,57,58,0.22);
}

/* ── BODY 3-COL ── */
.cr-card-body {
    display: grid;
    grid-template-columns: 1fr 1fr 1.1fr;
    gap: 0;
}

.cr-col {
    padding: 30px 30px;
    border-right: 1px solid #F3F4F6;
}

.cr-col:last-child { border-right: none; }

.cr-col-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-2);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F3F4F6;
}

.cr-col-label i { font-size: 12px; }
.ccl-red    i { color: var(--mosaic-red); }
.ccl-blue   i { color: var(--mosaic-blue); }
.ccl-green  i { color: var(--mosaic-green); }

/* ── COL 1: CHALLENGE ── */
.cr-col h3 {
    font-size: 15px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 13px;
    line-height: 1.3;
}

.cr-col p {
    font-size: 13px;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 18px;
}

/* Before card */
.cr-before-card {
    background: rgba(232,57,58,0.04);
    border: 1.5px solid rgba(232,57,58,0.12);
    border-radius: 14px;
    padding: 16px;
}

.cr-before-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--mosaic-red);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cr-before-items {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 12px;
}

.cr-before-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-size: 12px;
    color: var(--dark-2);
    font-weight: 500;
    line-height: 1.4;
}

.cr-before-dot {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(232,57,58,0.10);
    color: var(--mosaic-red);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    flex-shrink: 0;
    margin-top: 1px;
}

.cr-before-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 8px 11px;
    background: white;
    border-radius: 9px;
    border: 1px solid rgba(232,57,58,0.10);
    margin-top: 6px;
}

.cr-before-stat-label {
    font-size: 11px;
    color: var(--gray-2);
    font-weight: 500;
}

.cr-before-stat-val {
    font-size: 14px;
    font-weight: 800;
    color: var(--mosaic-red);
}

/* ── COL 2: SOLUTION ── */
.cr-steps {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cr-step {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 13px;
    background: var(--light);
    border-radius: 11px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    cursor: default;
}

.cr-step:hover {
    background: #EFF6FF;
    border-color: rgba(33,150,243,0.15);
    transform: translateX(3px);
}

.cr-step-icon {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    color: white;
    flex-shrink: 0;
}

.step-bg-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.step-bg-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.step-bg-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.step-bg-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.cr-step-text {
    font-size: 12px;
    color: var(--dark-2);
    font-weight: 500;
    line-height: 1.5;
}

.cr-step-text strong { color: var(--dark); font-weight: 700; }

/* ── COL 3: RESULTS ── */
.cr-after-card {
    background: rgba(76,175,80,0.05);
    border: 1.5px solid rgba(76,175,80,0.15);
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
}

.cr-after-title {
    font-size: 10.5px;
    font-weight: 700;
    color: #2E7D32;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 12px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cr-rank-display {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cr-rank-badge {
    width: 48px;
    height: 48px;
    border-radius: 13px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: white;
    flex-shrink: 0;
    box-shadow: 0 4px 14px rgba(0,0,0,0.18);
}

.rb-aa { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.rb-pf { background: linear-gradient(135deg, var(--mosaic-orange), var(--mosaic-green)); }
.rb-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.rb-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.cr-rank-info-label {
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    display: block;
    margin-bottom: 2px;
}

.cr-rank-info-kw {
    font-size: 11px;
    color: var(--gray-2);
    font-weight: 500;
}

.cr-rating-row {
    display: flex;
    align-items: center;
    gap: 7px;
    margin-top: 10px;
    padding: 7px 11px;
    background: white;
    border-radius: 9px;
    border: 1px solid rgba(76,175,80,0.12);
}

.cr-stars { color: var(--mosaic-orange); font-size: 12px; letter-spacing: 1px; }
.cr-rating-num { font-size: 13px; font-weight: 800; color: #2E7D32; }
.cr-review-count { font-size: 10px; color: var(--gray-2); font-weight: 600; margin-left: auto; }

/* Metrics grid */
.cr-metrics-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 9px;
}

.cr-metric {
    background: var(--light);
    border-radius: 12px;
    padding: 14px 12px;
    border: 1.5px solid var(--border);
    text-align: center;
    transition: all 0.25s;
    cursor: default;
    position: relative;
    overflow: hidden;
}

.cr-metric::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 12px 12px 0 0;
}

.cr-metric:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.cr-metric:hover::before { opacity: 1; }

/* Per-client metric accent */
/* AA */
.cr-card-aa .cr-metric:nth-child(1)::before { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.cr-card-aa .cr-metric:nth-child(2)::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-green)); }
.cr-card-aa .cr-metric:nth-child(3)::before { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-orange)); }
.cr-card-aa .cr-metric:nth-child(4)::before { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-red)); }
.cr-card-aa .cr-metric:nth-child(5)::before { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-purple)); }
.cr-card-aa .cr-metric:nth-child(6)::before { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-orange)); }

.cr-metric-emoji { font-size: 20px; display: block; margin-bottom: 7px; }

.cr-metric-num {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 5px;
    display: block;
}

.mn-purple { color: var(--mosaic-purple); }
.mn-blue   { color: var(--mosaic-blue); }
.mn-green  { color: var(--mosaic-green); }
.mn-orange { color: var(--mosaic-orange); }
.mn-red    { color: var(--mosaic-red); }

.cr-metric-label { font-size: 10.5px; color: var(--gray); font-weight: 600; line-height: 1.3; }
.cr-metric-kw    { display: block; font-size: 9px; color: var(--gray-2); font-weight: 500; margin-top: 3px; }

/* ══════════════════════════════════════
   SCREENSHOT GALLERY
══════════════════════════════════════ */
.cr-gallery {
    border-top: 1px solid #F3F4F6;
    padding: 26px 36px;
    background: #FAFAFA;
}

.cr-gallery-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 18px;
    flex-wrap: wrap;
    gap: 10px;
}

.cr-gallery-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
}

.cr-gallery-title i { color: var(--mosaic-green); }

.cr-gallery-note {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    color: var(--gray-2);
    font-weight: 500;
}

.cr-gallery-note i { color: var(--mosaic-blue); font-size: 10px; }

.cr-screenshots-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 12px;
}

.cr-sc-card {
    background: white;
    border-radius: 13px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    transition: all 0.25s;
    cursor: pointer;
    position: relative;
}

.cr-sc-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow);
    border-color: rgba(33,150,243,0.20);
}

.cr-sc-img-area {
    height: 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    overflow: hidden;
}

/* Screenshot type theme colors */
.sct-maps    .cr-sc-img-area { background: linear-gradient(135deg, #E8F5E9, #C8E6C9); }
.sct-gsc     .cr-sc-img-area { background: linear-gradient(135deg, #E3F2FD, #BBDEFB); }
.sct-gbp     .cr-sc-img-area { background: linear-gradient(135deg, #FFF8E1, #FFECB3); }
.sct-web     .cr-sc-img-area { background: linear-gradient(135deg, #F3E5F5, #E1BEE7); }
.sct-compare .cr-sc-img-area { background: linear-gradient(135deg, #FCE4EC, #F8BBD9); }

.cr-sc-num {
    position: absolute;
    top: 7px; left: 7px;
    width: 19px; height: 19px;
    border-radius: 50%;
    background: var(--dark);
    color: white;
    font-size: 9px;
    font-weight: 800;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.cr-sc-icon { font-size: 24px; margin-bottom: 5px; opacity: 0.75; }

.cr-sc-placeholder-text {
    font-size: 8.5px;
    color: var(--gray-2);
    text-align: center;
    font-weight: 600;
    line-height: 1.4;
    padding: 0 6px;
}

/* Real image inside — just uncomment and add src */
.cr-sc-real-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

.cr-sc-expand {
    position: absolute;
    inset: 0;
    background: rgba(26,26,46,0.60);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transition: opacity 0.2s;
}

.cr-sc-expand i { color: white; font-size: 18px; }
.cr-sc-card:hover .cr-sc-expand { opacity: 1; }

.cr-sc-info { padding: 9px 11px; }

.cr-sc-title {
    font-size: 10.5px;
    font-weight: 700;
    color: var(--dark);
    margin-bottom: 3px;
    line-height: 1.3;
}

.cr-sc-source {
    font-size: 9.5px;
    color: var(--gray-2);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 4px;
}

.cr-sc-source i { font-size: 8px; color: var(--mosaic-green); }

/* ══════════════════════════════════════
   BEFORE vs AFTER BANNER
══════════════════════════════════════ */
.cr-bab-banner {
    border-top: 1px solid #F3F4F6;
    padding: 24px 36px;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 0;
    align-items: center;
}

.cr-bab-before {
    background: rgba(232,57,58,0.04);
    border: 1.5px solid rgba(232,57,58,0.10);
    border-radius: 16px;
    padding: 20px 22px;
}

.cr-bab-after {
    background: rgba(76,175,80,0.05);
    border: 1.5px solid rgba(76,175,80,0.12);
    border-radius: 16px;
    padding: 20px 22px;
}

.cr-bab-label {
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 14px;
    display: flex;
    align-items: center;
    gap: 6px;
}

.cr-bab-before .cr-bab-label { color: var(--mosaic-red); }
.cr-bab-after  .cr-bab-label { color: #2E7D32; }

.cr-bab-rows {
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.cr-bab-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.cr-bab-row-name {
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
}

.cr-bab-row-val {
    font-size: 12.5px;
    font-weight: 800;
}

.val-bad  { color: var(--mosaic-red); }
.val-good { color: #2E7D32; }

/* Arrow col */
.cr-bab-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 0 24px;
}

.cr-bab-arrow-circle {
    width: 50px;
    height: 50px;
    border-radius: 50%;
    background: var(--dark);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: 18px;
    box-shadow: 0 6px 20px rgba(26,26,46,0.20);
}

.cr-bab-arrow-lbl {
    font-size: 10px;
    color: var(--gray-2);
    font-weight: 700;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ══════════════════════════════════════
   CLIENT QUOTE
══════════════════════════════════════ */
.cr-quote-bar {
    border-top: 1px solid #F3F4F6;
    padding: 28px 36px;
    display: flex;
    align-items: flex-start;
    gap: 22px;
    background: white;
}

.cr-quote-mark {
    font-size: 72px;
    line-height: 1;
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    flex-shrink: 0;
    margin-top: -12px;
    font-family: Georgia, serif;
}

.cr-quote-text {
    font-size: 15px;
    color: var(--dark-2);
    line-height: 1.8;
    font-weight: 500;
    font-style: italic;
    margin-bottom: 16px;
}

.cr-quote-author {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.cr-quote-avatar {
    width: 42px;
    height: 42px;
    border-radius: 12px;
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    font-weight: 800;
    flex-shrink: 0;
}

.qa-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.qa-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.qa-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.qa-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.cr-quote-author-name {
    display: block;
    font-size: 13px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 1px;
}

.cr-quote-author-role {
    display: block;
    font-size: 11px;
    color: var(--gray-2);
    font-weight: 500;
    margin-bottom: 3px;
}

.cr-quote-author-link {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 11px;
    color: var(--mosaic-blue);
    font-weight: 600;
    text-decoration: none;
    transition: color 0.2s;
}

.cr-quote-author-link:hover { color: var(--mosaic-purple); }

.cr-quote-stars {
    color: var(--mosaic-orange);
    font-size: 14px;
    letter-spacing: 1px;
    margin-left: auto;
}

/* ══════════════════════════════════════
   BOTTOM STATS STRIP
══════════════════════════════════════ */
.cr-stats-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    margin-top: 20px;
    background: var(--dark);
    border-radius: 20px;
    overflow: hidden;
    position: relative;
}

.cr-stats-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
}

.cr-strip-item {
    padding: 22px 18px;
    text-align: center;
    border-right: 1px solid rgba(255,255,255,0.07);
    transition: background 0.2s;
}

.cr-strip-item:last-child { border-right: none; }
.cr-strip-item:hover { background: rgba(255,255,255,0.04); }

.cr-strip-num {
    display: block;
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 900;
    line-height: 1;
    margin-bottom: 6px;
}

.cr-strip-label {
    font-size: 11.5px;
    color: rgba(255,255,255,0.50);
    font-weight: 500;
    line-height: 1.4;
}

.csn-red    { color: #FF6B6B; }
.csn-orange { color: #FFB347; }
.csn-green  { color: #69F08C; }
.csn-blue   { color: #64B5F6; }
.csn-purple { color: #CE93D8; }

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
    .cr-card-body {
        grid-template-columns: 1fr 1fr;
    }

    .cr-col:nth-child(3) {
        grid-column: 1 / -1;
        border-top: 1px solid #F3F4F6;
        border-right: none;
    }

    .cr-screenshots-grid { grid-template-columns: repeat(3, 1fr); }

    .cr-stats-strip { grid-template-columns: 1fr 1fr; }
    .cr-strip-item:nth-child(2) { border-right: none; }
    .cr-strip-item:nth-child(3) { border-top: 1px solid rgba(255,255,255,0.07); }
}

@media (max-width: 768px) {
    .cr-section { padding: 70px 16px; }

    .cr-card-body { grid-template-columns: 1fr; }

    .cr-col {
        border-right: none;
        border-bottom: 1px solid #F3F4F6;
        padding: 22px 20px;
    }

    .cr-col:last-child { border-bottom: none; }

    .cr-identity-bar {
        padding: 20px 20px 16px;
        flex-direction: column;
        align-items: flex-start;
    }

    .cr-bab-banner {
        grid-template-columns: 1fr;
        gap: 14px;
        padding: 20px;
    }

    .cr-bab-arrow {
        flex-direction: row;
        padding: 0;
        justify-content: center;
    }

    .cr-screenshots-grid { grid-template-columns: repeat(2, 1fr); }
    .cr-gallery { padding: 20px; }
    .cr-quote-bar { padding: 20px; flex-direction: column; }
    .cr-tabs-nav { gap: 6px; padding: 6px; }
    .cr-tab-btn { min-width: 160px; padding: 10px 14px; }
}

@media (max-width: 480px) {
    .cr-metrics-grid { grid-template-columns: 1fr 1fr; }
    .cr-screenshots-grid { grid-template-columns: 1fr 1fr; }
    .cr-tab-result-pill { display: none; }
    .cr-stats-strip { grid-template-columns: 1fr 1fr; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-1344593 *//* ══════════════════════════════════════
   SECTION 4 — VISUAL PROOF GALLERY
   Mosaic Brand Colors Applied
══════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mosaic-red:    #E8393A;
    --mosaic-orange: #F5A623;
    --mosaic-green:  #4CAF50;
    --mosaic-blue:   #2196F3;
    --mosaic-purple: #9C27B0;
    --dark:          #1A1A2E;
    --dark-2:        #2D2D2D;
    --gray:          #6B7280;
    --gray-2:        #9CA3AF;
    --light:         #F9FAFB;
    --white:         #FFFFFF;
    --border:        rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.proof-gallery-section {
    background: var(--dark);
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

/* Background decoration */
.proof-gallery-section::before {
    content: '';
    position: absolute;
    top: -300px; right: -300px;
    width: 700px; height: 700px;
    background: radial-gradient(
        circle,
        rgba(33,150,243,0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

.proof-gallery-section::after {
    content: '';
    position: absolute;
    bottom: -300px; left: -300px;
    width: 700px; height: 700px;
    background: radial-gradient(
        circle,
        rgba(156,39,176,0.06) 0%,
        transparent 70%
    );
    pointer-events: none;
}

/* Gradient top border */
.proof-gallery-section .section-gradient-line {
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
    z-index: 2;
}

.gallery-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.gallery-header {
    text-align: center;
    margin-bottom: 64px;
}

.gallery-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.09);
    color: rgba(255,255,255,0.85);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(255,255,255,0.12);
}

.gallery-section-label i { font-size: 11px; color: var(--mosaic-orange); }

.gallery-header h2 {
    font-size: clamp(28px, 4vw, 46px);
    font-weight: 800;
    color: var(--white);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.gallery-header h2 .gradient-text {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.gallery-subline {
    font-size: 16px;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    max-width: 680px;
    margin: 0 auto 32px;
}

/* Platform trust row */
.gallery-platform-row {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 14px;
    flex-wrap: wrap;
}

.gallery-platform-badge {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.75);
    padding: 7px 16px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 600;
    transition: all 0.2s;
}

.gallery-platform-badge:hover {
    background: rgba(255,255,255,0.12);
    color: white;
}

.gallery-platform-badge i { font-size: 11px; }
.gpb-gsc    i { color: #4285F4; }
.gpb-gbp    i { color: var(--mosaic-orange); }
.gpb-maps   i { color: var(--mosaic-red); }
.gpb-perm   i { color: var(--mosaic-green); }

/* ══════════════════════════════════════
   CLIENT FILTER TABS
══════════════════════════════════════ */
.gallery-filter-tabs {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 36px;
    flex-wrap: wrap;
    justify-content: center;
}

.gallery-filter-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    border-radius: 50px;
    border: 1.5px solid rgba(255,255,255,0.12);
    background: transparent;
    color: rgba(255,255,255,0.60);
    font-size: 12.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.25s ease;
    font-family: 'Poppins', sans-serif;
}

.gallery-filter-btn:hover {
    border-color: rgba(255,255,255,0.30);
    color: rgba(255,255,255,0.90);
    background: rgba(255,255,255,0.06);
}

.gallery-filter-btn.active {
    background: var(--white);
    color: var(--dark);
    border-color: transparent;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.gfb-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-all    { background: var(--mosaic-gradient); }
.dot-aa     { background: var(--mosaic-purple); }
.dot-pf     { background: var(--mosaic-red); }
.dot-fm     { background: var(--mosaic-green); }
.dot-tl     { background: var(--mosaic-blue); }

.gfb-count {
    background: rgba(255,255,255,0.12);
    color: rgba(255,255,255,0.70);
    padding: 1px 7px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}

.gallery-filter-btn.active .gfb-count {
    background: rgba(26,26,46,0.10);
    color: var(--dark);
}

/* ══════════════════════════════════════
   GALLERY GRID — 8 IMAGES
══════════════════════════════════════ */
.gallery-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-template-rows: auto auto;
    gap: 16px;
    margin-bottom: 32px;
}

/* Featured items span more columns */
.gallery-item-featured {
    grid-column: span 2;
}

/* ══════════════════════════════════════
   GALLERY ITEM BASE
══════════════════════════════════════ */
.gallery-item {
    background: rgba(255,255,255,0.05);
    border-radius: 18px;
    overflow: hidden;
    border: 1.5px solid rgba(255,255,255,0.09);
    transition: all 0.3s ease;
    cursor: pointer;
    position: relative;
    display: flex;
    flex-direction: column;
}

.gallery-item:hover {
    transform: translateY(-6px);
    border-color: rgba(255,255,255,0.22);
    box-shadow: 0 20px 50px rgba(0,0,0,0.35);
    background: rgba(255,255,255,0.08);
}

.gallery-item:hover .gallery-overlay {
    opacity: 1;
}

.gallery-item:hover .gallery-img-area {
    transform: scale(1.03);
}

/* ── Image Area ── */
.gallery-img-wrapper {
    overflow: hidden;
    position: relative;
    flex-shrink: 0;
}

.gallery-img-area {
    width: 100%;
    height: 200px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    transition: transform 0.4s ease;
    overflow: hidden;
}

.gallery-item-featured .gallery-img-area {
    height: 240px;
}

/* Image area backgrounds per client */
.gi-gsc-aa   { background: linear-gradient(135deg, #0D1B2A, #1A3A5C); }
.gi-maps-aa  { background: linear-gradient(135deg, #1A2A1A, #0F3D1F); }
.gi-gsc-pf   { background: linear-gradient(135deg, #2A0A0A, #5C1A1A); }
.gi-maps-fm  { background: linear-gradient(135deg, #0A2A10, #1A5C24); }
.gi-gbp-tl   { background: linear-gradient(135deg, #0A1A2A, #1A3A5C); }
.gi-clicks-pf { background: linear-gradient(135deg, #2A1A0A, #5C3A1A); }
.gi-reviews-aa { background: linear-gradient(135deg, #1A0A2A, #3A1A5C); }
.gi-clients  { background: linear-gradient(135deg, #1A1A2E, #2D2D4A); }

/* Actual screenshot image */
.gallery-screenshot-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    border-radius: 0;
    display: block;
}

/* Placeholder when no image yet */
.gallery-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 100%;
    gap: 10px;
}

/* Simulated chart */
.sim-chart {
    width: 85%;
    height: 70%;
    position: relative;
    display: flex;
    align-items: flex-end;
    justify-content: space-between;
    gap: 4px;
    padding-bottom: 8px;
}

.sim-chart::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: rgba(255,255,255,0.15);
}

.sim-bar {
    flex: 1;
    border-radius: 4px 4px 0 0;
    opacity: 0.8;
    transition: height 0.6s ease;
    min-width: 6px;
}

/* Line chart simulation */
.sim-line-chart {
    width: 85%;
    height: 65%;
    position: relative;
}

.sim-line-chart svg {
    width: 100%;
    height: 100%;
    overflow: visible;
}

/* Map simulation */
.sim-map {
    width: 88%;
    height: 72%;
    position: relative;
    border-radius: 10px;
    overflow: hidden;
    background: linear-gradient(135deg, #1A3A1A, #0D2A10);
}

.sim-map-grid {
    position: absolute;
    inset: 0;
    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);
    background-size: 20px 20px;
}

.sim-map-road-h {
    position: absolute;
    height: 5px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.sim-map-road-v {
    position: absolute;
    width: 5px;
    background: rgba(255,255,255,0.15);
    border-radius: 3px;
}

.sim-map-pin {
    position: absolute;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
}

.sim-pin-dot {
    width: 14px;
    height: 14px;
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    box-shadow: 0 2px 6px rgba(0,0,0,0.3);
}

.sim-pin-label {
    font-size: 7px;
    font-weight: 700;
    color: white;
    background: rgba(0,0,0,0.6);
    padding: 1px 5px;
    border-radius: 3px;
    white-space: nowrap;
}

/* Before/After simulation */
.sim-before-after {
    width: 88%;
    height: 68%;
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: 8px;
    align-items: center;
}

.sim-ba-side {
    border-radius: 8px;
    padding: 12px;
    text-align: center;
}

.sim-ba-before { background: rgba(232,57,58,0.15); }
.sim-ba-after  { background: rgba(76,175,80,0.15); }

.sim-ba-num {
    font-size: 18px;
    font-weight: 900;
    display: block;
    margin-bottom: 4px;
}

.sim-ba-label {
    font-size: 8px;
    font-weight: 600;
    display: block;
    opacity: 0.7;
}

.sim-ba-arrow {
    font-size: 20px;
    color: rgba(255,255,255,0.5);
}

/* Client logos grid simulation */
.sim-clients-row {
    width: 88%;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

.sim-client-logo {
    background: rgba(255,255,255,0.08);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 14px 10px;
    text-align: center;
}

.sim-client-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
    margin: 0 auto 6px;
}

.sim-cl-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.sim-cl-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.sim-cl-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.sim-cl-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.sim-client-name {
    font-size: 8px;
    font-weight: 700;
    color: rgba(255,255,255,0.80);
    display: block;
}

.sim-client-industry {
    font-size: 7px;
    color: rgba(255,255,255,0.45);
    display: block;
    margin-top: 2px;
}

/* Expand overlay */
.gallery-overlay {
    position: absolute;
    inset: 0;
    background: rgba(26,26,46,0.75);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    opacity: 0;
    transition: opacity 0.3s;
    z-index: 3;
}

.gallery-overlay-icon {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    color: var(--dark);
    box-shadow: 0 6px 20px rgba(0,0,0,0.25);
}

.gallery-overlay-text {
    font-size: 12px;
    font-weight: 700;
    color: white;
}

/* ── Gallery Item Info Bar ── */
.gallery-info {
    padding: 16px 18px;
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.gallery-info-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 10px;
}

.gallery-client-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
}

.gct-aa { background: rgba(156,39,176,0.18); color: #CE93D8; }
.gct-pf { background: rgba(232,57,58,0.18);  color: #EF9A9A; }
.gct-fm { background: rgba(76,175,80,0.18);  color: #A5D6A7; }
.gct-tl { background: rgba(33,150,243,0.18); color: #90CAF9; }
.gct-all { background: rgba(245,166,35,0.18); color: #FFE082; }

.gallery-source-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 9.5px;
    color: rgba(255,255,255,0.40);
    font-weight: 500;
    white-space: nowrap;
}

.gallery-source-tag i { font-size: 9px; color: var(--mosaic-green); }

.gallery-label {
    font-size: 14px;
    font-weight: 800;
    color: white;
    line-height: 1.3;
}

.gallery-item-featured .gallery-label {
    font-size: 16px;
}

.gallery-stat-highlight {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 11px;
    font-weight: 600;
    color: rgba(255,255,255,0.55);
}

.gallery-stat-highlight i { font-size: 10px; }
.gsh-green  i { color: var(--mosaic-green); }
.gsh-blue   i { color: var(--mosaic-blue); }
.gsh-orange i { color: var(--mosaic-orange); }
.gsh-red    i { color: var(--mosaic-red); }

/* ══════════════════════════════════════
   LIGHTBOX MODAL
══════════════════════════════════════ */
.gallery-lightbox {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.92);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.gallery-lightbox.open {
    opacity: 1;
    pointer-events: all;
}

.lightbox-inner {
    background: #12121E;
    border-radius: 24px;
    max-width: 900px;
    width: 100%;
    overflow: hidden;
    border: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 40px 100px rgba(0,0,0,0.60);
    transform: scale(0.95);
    transition: transform 0.3s ease;
    position: relative;
}

.gallery-lightbox.open .lightbox-inner {
    transform: scale(1);
}

/* Lightbox top bar */
.lightbox-topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 16px 24px;
    border-bottom: 1px solid rgba(255,255,255,0.08);
    background: rgba(255,255,255,0.04);
}

.lightbox-topbar-left {
    display: flex;
    align-items: center;
    gap: 12px;
}

.lightbox-client-avatar {
    width: 36px;
    height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
    font-weight: 800;
    color: white;
}

.lightbox-title {
    font-size: 14px;
    font-weight: 800;
    color: white;
}

.lightbox-source {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
}

.lightbox-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(255,255,255,0.08);
    border: none;
    display: flex;
    align-items: center;
    justify-content: center;
    color: rgba(255,255,255,0.70);
    font-size: 14px;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
}

.lightbox-close:hover {
    background: rgba(255,255,255,0.15);
    color: white;
}

/* Lightbox image */
.lightbox-img-area {
    width: 100%;
    min-height: 420px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: #0A0A14;
    position: relative;
    overflow: hidden;
}

.lightbox-img-area img {
    max-width: 100%;
    max-height: 520px;
    object-fit: contain;
    display: block;
}

/* Lightbox placeholder */
.lightbox-placeholder {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 14px;
    padding: 60px 40px;
    text-align: center;
}

.lightbox-placeholder-icon {
    font-size: 48px;
    opacity: 0.5;
}

.lightbox-placeholder-title {
    font-size: 16px;
    font-weight: 700;
    color: rgba(255,255,255,0.70);
}

.lightbox-placeholder-note {
    font-size: 13px;
    color: rgba(255,255,255,0.35);
    line-height: 1.6;
}

.lightbox-placeholder-code {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    padding: 12px 20px;
    font-family: monospace;
    font-size: 12px;
    color: var(--mosaic-green);
    text-align: left;
    margin-top: 8px;
}

/* Lightbox navigation */
.lightbox-nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 24px;
    border-top: 1px solid rgba(255,255,255,0.08);
}

.lightbox-nav-btn {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 18px;
    background: rgba(255,255,255,0.07);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 10px;
    color: rgba(255,255,255,0.70);
    font-size: 12px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    font-family: 'Poppins', sans-serif;
}

.lightbox-nav-btn:hover {
    background: rgba(255,255,255,0.13);
    color: white;
}

.lightbox-nav-btn:disabled {
    opacity: 0.3;
    cursor: not-allowed;
}

.lightbox-counter {
    font-size: 12px;
    color: rgba(255,255,255,0.40);
    font-weight: 600;
}

/* ══════════════════════════════════════
   PROOF DISCLAIMER BANNER
══════════════════════════════════════ */
.proof-disclaimer-banner {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 20px 28px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    margin-bottom: 40px;
}

.disclaimer-icon {
    width: 40px;
    height: 40px;
    border-radius: 12px;
    background: rgba(76,175,80,0.15);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    color: var(--mosaic-green);
    flex-shrink: 0;
}

.disclaimer-text {}

.disclaimer-title {
    font-size: 13px;
    font-weight: 800;
    color: white;
    margin-bottom: 5px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.disclaimer-title-check {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    background: rgba(76,175,80,0.20);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 8px;
    color: var(--mosaic-green);
}

.disclaimer-body {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    line-height: 1.65;
}

/* ══════════════════════════════════════
   CLIENT SUMMARY STRIP
══════════════════════════════════════ */
.client-summary-strip {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
    margin-top: 20px;
}

.css-card {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 16px;
    padding: 20px 18px;
    text-align: center;
    transition: all 0.25s;
    cursor: pointer;
    text-decoration: none;
    display: block;
    position: relative;
    overflow: hidden;
}

.css-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s;
}

.css-card:hover {
    background: rgba(255,255,255,0.09);
    border-color: rgba(255,255,255,0.18);
    transform: translateY(-4px);
}

.css-card:hover::before { opacity: 1; }

.css-aa::before { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.css-pf::before { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.css-fm::before { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-blue)); }
.css-tl::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }

.css-avatar {
    width: 52px;
    height: 52px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: white;
    margin: 0 auto 12px;
    box-shadow: 0 4px 16px rgba(0,0,0,0.25);
}

.css-aa .css-avatar { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.css-pf .css-avatar { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.css-fm .css-avatar { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.css-tl .css-avatar { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.css-name {
    font-size: 13px;
    font-weight: 800;
    color: white;
    display: block;
    margin-bottom: 3px;
}

.css-industry {
    font-size: 11px;
    color: rgba(255,255,255,0.45);
    font-weight: 500;
    display: block;
    margin-bottom: 12px;
}

.css-key-result {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 800;
}

.css-aa .css-key-result { background: rgba(156,39,176,0.18); color: #CE93D8; }
.css-pf .css-key-result { background: rgba(232,57,58,0.18);  color: #EF9A9A; }
.css-fm .css-key-result { background: rgba(76,175,80,0.18);  color: #A5D6A7; }
.css-tl .css-key-result { background: rgba(33,150,243,0.18); color: #90CAF9; }

.css-website {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    font-size: 10px;
    color: rgba(255,255,255,0.30);
    margin-top: 10px;
    font-weight: 500;
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
    .gallery-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .gallery-item-featured {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .proof-gallery-section { padding: 70px 16px; }

    .gallery-grid {
        grid-template-columns: 1fr 1fr;
        gap: 12px;
    }

    .gallery-item-featured {
        grid-column: span 2;
    }

    .gallery-filter-tabs { gap: 6px; }

    .client-summary-strip {
        grid-template-columns: 1fr 1fr;
        gap: 10px;
    }

    .proof-disclaimer-banner {
        flex-direction: column;
        padding: 16px 18px;
    }

    .lightbox-inner { border-radius: 16px; }
    .lightbox-img-area { min-height: 280px; }
}

@media (max-width: 480px) {
    .gallery-grid {
        grid-template-columns: 1fr;
    }

    .gallery-item-featured {
        grid-column: span 1;
    }

    .client-summary-strip {
        grid-template-columns: 1fr 1fr;
    }

    .gallery-filter-btn span:not(.gfb-dot):not(.gfb-count) {
        display: none;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-38a5a6c *//* ══════════════════════════════════════
   SECTION 5 — LOCAL SEO SERVICES
   Mosaic Brand Colors Applied
══════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mosaic-red:    #E8393A;
    --mosaic-orange: #F5A623;
    --mosaic-green:  #4CAF50;
    --mosaic-blue:   #2196F3;
    --mosaic-purple: #9C27B0;
    --dark:          #1A1A2E;
    --dark-2:        #2D2D2D;
    --gray:          #6B7280;
    --gray-2:        #9CA3AF;
    --light:         #F9FAFB;
    --white:         #FFFFFF;
    --border:        rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.services-section {
    background: linear-gradient(
        160deg,
        #F8FEFF 0%,
        #F0F8FF 30%,
        #F5F0FF 65%,
        #FFF8F0 100%
    );
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

.services-section::before {
    content: '';
    position: absolute;
    top: -220px; right: -220px;
    width: 650px; height: 650px;
    background: radial-gradient(circle,
        rgba(33,150,243,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.services-section::after {
    content: '';
    position: absolute;
    bottom: -220px; left: -220px;
    width: 600px; height: 600px;
    background: radial-gradient(circle,
        rgba(156,39,176,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.services-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.services-section-header {
    text-align: center;
    margin-bottom: 64px;
}

.services-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(33,150,243,0.09);
    color: #1565C0;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(33,150,243,0.15);
}

.services-section-label i { font-size: 11px; }

.services-section-header h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.services-section-header h2 .gradient-text {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.services-section-subpara {
    font-size: 15.5px;
    color: var(--gray);
    line-height: 1.8;
    max-width: 780px;
    margin: 0 auto 24px;
}

.services-section-subpara strong {
    color: var(--dark);
    font-weight: 700;
}

/* Client proof mini strip */
.services-proof-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 8px;
}

.sps-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dark-2);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: all 0.2s;
}

.sps-chip:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.sps-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.dot-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.dot-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.dot-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.dot-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

/* ══════════════════════════════════════
   SERVICE NAVIGATION TABS
══════════════════════════════════════ */
.services-nav {
    display: flex;
    align-items: stretch;
    gap: 0;
    background: white;
    border-radius: 18px;
    padding: 8px;
    box-shadow: var(--shadow-sm);
    border: 1px solid var(--border);
    margin-bottom: 40px;
    overflow-x: auto;
}

.service-nav-btn {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    border: 2px solid transparent;
    flex: 1;
    min-width: 140px;
    background: transparent;
    font-family: 'Poppins', sans-serif;
    text-align: left;
    position: relative;
}

.service-nav-btn:hover {
    background: var(--light);
}

.service-nav-btn.active {
    background: var(--dark);
    box-shadow: 0 4px 16px rgba(26,26,46,0.20);
}

.snb-icon {
    width: 36px; height: 36px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 15px;
    flex-shrink: 0;
    transition: all 0.3s;
}

/* Nav button icon colors */
.snb-1 { background: rgba(33,150,243,0.12); color: var(--mosaic-blue); }
.snb-2 { background: rgba(245,166,35,0.15); color: var(--mosaic-orange); }
.snb-3 { background: rgba(232,57,58,0.10); color: var(--mosaic-red); }
.snb-4 { background: rgba(76,175,80,0.10); color: var(--mosaic-green); }
.snb-5 { background: rgba(156,39,176,0.10); color: var(--mosaic-purple); }
.snb-6 { background: rgba(33,150,243,0.12); color: var(--mosaic-blue); }

.service-nav-btn.active .snb-icon {
    background: rgba(255,255,255,0.15);
    color: white;
}

.snb-text {}

.snb-num {
    display: block;
    font-size: 9px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 2px;
    transition: color 0.3s;
}

.snb-name {
    display: block;
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.3;
    transition: color 0.3s;
}

.service-nav-btn.active .snb-num,
.service-nav-btn.active .snb-name {
    color: white;
}

/* Active indicator dot */
.snb-active-dot {
    position: absolute;
    bottom: 10px;
    right: 10px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: white;
    opacity: 0;
    transition: opacity 0.3s;
}

.service-nav-btn.active .snb-active-dot {
    opacity: 0.6;
}

/* ══════════════════════════════════════
   SERVICE PANELS
══════════════════════════════════════ */
.service-panel {
    display: none;
    animation: serviceFadeIn 0.4s ease;
}

.service-panel.active { display: block; }

@keyframes serviceFadeIn {
    from { opacity: 0; transform: translateY(14px); }
    to   { opacity: 1; transform: translateY(0); }
}

/* ══════════════════════════════════════
   SERVICE CARD
══════════════════════════════════════ */
.service-card {
    background: white;
    border-radius: 24px;
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--border);
    position: relative;
}

/* Top accent bar */
.service-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    z-index: 2;
}

.sc-gbp::before      { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }
.sc-citation::before { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-red)); }
.sc-maps::before     { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.sc-reviews::before  { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-blue)); }
.sc-onpage::before   { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.sc-location::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-green)); }

/* ── Service Card Header ── */
.sc-header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 36px 40px 28px;
    border-bottom: 1px solid #F3F4F6;
    gap: 24px;
    flex-wrap: wrap;
}

.sc-header-left {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    flex: 1;
}

.sc-main-icon {
    width: 64px; height: 64px;
    border-radius: 18px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.10);
}

/* Service icon backgrounds */
.sci-gbp      { background: linear-gradient(135deg, rgba(33,150,243,0.12), rgba(156,39,176,0.10)); color: var(--mosaic-blue); }
.sci-citation { background: linear-gradient(135deg, rgba(245,166,35,0.15), rgba(232,57,58,0.10)); color: var(--mosaic-orange); }
.sci-maps     { background: linear-gradient(135deg, rgba(232,57,58,0.10), rgba(245,166,35,0.12)); color: var(--mosaic-red); }
.sci-reviews  { background: linear-gradient(135deg, rgba(76,175,80,0.10), rgba(33,150,243,0.10)); color: var(--mosaic-green); }
.sci-onpage   { background: linear-gradient(135deg, rgba(156,39,176,0.10), rgba(33,150,243,0.10)); color: var(--mosaic-purple); }
.sci-location { background: linear-gradient(135deg, rgba(33,150,243,0.10), rgba(76,175,80,0.10)); color: var(--mosaic-blue); }

.sc-header-info {}

.sc-service-num {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    margin-bottom: 6px;
    display: block;
}

.sc-header h3 {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.2;
    margin-bottom: 10px;
    letter-spacing: -0.3px;
}

.sc-header h3 .sc-title-highlight {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.sc-what-it-is {
    font-size: 14.5px;
    color: var(--gray);
    line-height: 1.75;
    max-width: 580px;
}

.sc-what-it-is strong {
    color: var(--dark);
    font-weight: 700;
}

/* Impact Badge */
.sc-impact-badge {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    flex-shrink: 0;
}

.impact-ring {
    position: relative;
    width: 72px; height: 72px;
}

.impact-ring svg {
    width: 72px; height: 72px;
    transform: rotate(-90deg);
}

.impact-ring circle {
    fill: none;
    stroke-width: 5;
    stroke-linecap: round;
}

.ring-track { stroke: #F3F4F6; }

.ring-gbp      { stroke: var(--mosaic-blue); stroke-dasharray: 188; stroke-dashoffset: 10; }
.ring-citation { stroke: var(--mosaic-orange); stroke-dasharray: 188; stroke-dashoffset: 34; }
.ring-maps     { stroke: var(--mosaic-red); stroke-dasharray: 188; stroke-dashoffset: 20; }
.ring-reviews  { stroke: var(--mosaic-green); stroke-dasharray: 188; stroke-dashoffset: 28; }
.ring-onpage   { stroke: var(--mosaic-purple); stroke-dasharray: 188; stroke-dashoffset: 42; }
.ring-location { stroke: var(--mosaic-blue); stroke-dasharray: 188; stroke-dashoffset: 56; }

.impact-ring-num {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 14px;
    font-weight: 900;
    color: var(--dark);
}

.impact-ring-label {
    font-size: 10px;
    color: var(--gray-2);
    font-weight: 600;
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

/* ── Service Card Body ── */
.sc-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
}

.sc-body-col {
    padding: 32px 36px;
    border-right: 1px solid #F3F4F6;
}

.sc-body-col:last-child { border-right: none; }

/* Column label */
.sc-col-label {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.6px;
    color: var(--gray-2);
    margin-bottom: 18px;
    padding-bottom: 14px;
    border-bottom: 1px solid #F3F4F6;
}

.sc-col-label i { font-size: 12px; }
.sccl-what  i { color: var(--mosaic-blue); }
.sccl-proof i { color: var(--mosaic-green); }

/* What we do list */
.sc-what-we-do-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-wwd-item {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 12px 14px;
    background: var(--light);
    border-radius: 12px;
    border: 1px solid var(--border);
    transition: all 0.2s;
    cursor: default;
}

.sc-wwd-item:hover {
    background: #EFF6FF;
    border-color: rgba(33,150,243,0.15);
    transform: translateX(3px);
}

.sc-wwd-icon {
    width: 28px; height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    color: white;
    flex-shrink: 0;
}

/* Wwd icon colors per service */
.wwd-gbp      { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }
.wwd-citation { background: linear-gradient(135deg, var(--mosaic-orange), var(--mosaic-red)); }
.wwd-maps     { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.wwd-reviews  { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.wwd-onpage   { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.wwd-location { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-green)); }

.sc-wwd-text {
    font-size: 13px;
    color: var(--dark-2);
    font-weight: 500;
    line-height: 1.55;
}

.sc-wwd-text strong {
    color: var(--dark);
    font-weight: 700;
}

/* ── Client proof cards ── */
.sc-proof-cards {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sc-proof-card {
    background: var(--light);
    border-radius: 14px;
    padding: 14px 16px;
    border: 1.5px solid var(--border);
    transition: all 0.25s;
    text-decoration: none;
    display: block;
    cursor: pointer;
}

.sc-proof-card:hover {
    transform: translateY(-3px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.sc-proof-card-top {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 10px;
}

.sc-proof-avatar {
    width: 34px; height: 34px;
    border-radius: 9px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    font-weight: 800;
    color: white;
    flex-shrink: 0;
}

.spa-aa { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.spa-pf { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.spa-fm { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.spa-tl { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.sc-proof-name {
    font-size: 12.5px;
    font-weight: 800;
    color: var(--dark);
    display: block;
    margin-bottom: 1px;
}

.sc-proof-industry {
    font-size: 10.5px;
    color: var(--gray-2);
    font-weight: 500;
}

.sc-proof-result-badge {
    margin-left: auto;
    padding: 3px 10px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 800;
    white-space: nowrap;
}

.rb-green  { background: rgba(76,175,80,0.12); color: #2E7D32; }
.rb-blue   { background: rgba(33,150,243,0.10); color: #1565C0; }
.rb-orange { background: rgba(245,166,35,0.12); color: #E65100; }
.rb-purple { background: rgba(156,39,176,0.10); color: #6A1B9A; }
.rb-red    { background: rgba(232,57,58,0.10); color: #C62828; }

.sc-proof-text {
    font-size: 12px;
    color: var(--gray);
    line-height: 1.6;
    font-weight: 400;
}

.sc-proof-text strong {
    color: var(--mosaic-green);
    font-weight: 700;
}

/* ── Tags Row ── */
.sc-tags-row {
    padding: 20px 36px;
    border-top: 1px solid #F3F4F6;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.sc-tags-label {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

.sc-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    background: white;
    border: 1.5px solid var(--border);
    border-radius: 50px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dark-2);
    box-shadow: var(--shadow-sm);
    transition: all 0.2s;
    cursor: default;
}

.sc-tag:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.sc-tag i { font-size: 9px; }

/* Tag accent colors per service */
.tag-blue   { border-color: rgba(33,150,243,0.20); }
.tag-blue i { color: var(--mosaic-blue); }

.tag-orange   { border-color: rgba(245,166,35,0.25); }
.tag-orange i { color: var(--mosaic-orange); }

.tag-red   { border-color: rgba(232,57,58,0.18); }
.tag-red i { color: var(--mosaic-red); }

.tag-green   { border-color: rgba(76,175,80,0.20); }
.tag-green i { color: var(--mosaic-green); }

.tag-purple   { border-color: rgba(156,39,176,0.18); }
.tag-purple i { color: var(--mosaic-purple); }

/* ══════════════════════════════════════
   SERVICES OVERVIEW GRID
   (All 6 services at a glance)
══════════════════════════════════════ */
.services-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 16px;
    margin-top: 48px;
}

.sog-card {
    background: white;
    border-radius: 18px;
    padding: 24px 22px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s;
    cursor: pointer;
    position: relative;
    overflow: hidden;
}

.sog-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    border-radius: 18px 18px 0 0;
    opacity: 0;
    transition: opacity 0.3s;
}

.sog-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.sog-card:hover::before { opacity: 1; }

.sog-1::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }
.sog-2::before { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-red)); }
.sog-3::before { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.sog-4::before { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-blue)); }
.sog-5::before { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.sog-6::before { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-green)); }

.sog-icon {
    width: 44px; height: 44px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    margin-bottom: 14px;
}

.sog-1 .sog-icon { background: rgba(33,150,243,0.10); color: var(--mosaic-blue); }
.sog-2 .sog-icon { background: rgba(245,166,35,0.12); color: var(--mosaic-orange); }
.sog-3 .sog-icon { background: rgba(232,57,58,0.10); color: var(--mosaic-red); }
.sog-4 .sog-icon { background: rgba(76,175,80,0.10); color: var(--mosaic-green); }
.sog-5 .sog-icon { background: rgba(156,39,176,0.10); color: var(--mosaic-purple); }
.sog-6 .sog-icon { background: rgba(33,150,243,0.10); color: var(--mosaic-blue); }

.sog-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 7px;
    line-height: 1.3;
}

.sog-desc {
    font-size: 12.5px;
    color: var(--gray);
    line-height: 1.65;
    margin-bottom: 14px;
}

.sog-client-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
}

.sog-client-tag {
    padding: 3px 9px;
    border-radius: 50px;
    font-size: 10px;
    font-weight: 700;
    cursor: pointer;
    transition: all 0.2s;
}

.sct-aa { background: rgba(156,39,176,0.08); color: var(--mosaic-purple); }
.sct-pf { background: rgba(232,57,58,0.08); color: var(--mosaic-red); }
.sct-fm { background: rgba(76,175,80,0.08); color: var(--mosaic-green); }
.sct-tl { background: rgba(33,150,243,0.08); color: var(--mosaic-blue); }

.sog-view-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-2);
    margin-top: 12px;
    cursor: pointer;
    transition: color 0.2s;
    background: none;
    border: none;
    font-family: 'Poppins', sans-serif;
    padding: 0;
}

.sog-card:hover .sog-view-btn { color: var(--mosaic-blue); }

/* ══════════════════════════════════════
   BOTTOM CTA STRIP
══════════════════════════════════════ */
.services-cta-strip {
    margin-top: 48px;
    background: var(--dark);
    border-radius: 22px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    flex-wrap: wrap;
    position: relative;
    overflow: hidden;
}

.services-cta-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
}

.services-cta-strip::after {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.scs-text {}

.scs-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.80);
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.scs-heading {
    font-size: clamp(18px, 2.5vw, 26px);
    font-weight: 800;
    color: white;
    line-height: 1.25;
    margin-bottom: 10px;
}

.scs-heading span {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.scs-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
}

.scs-btns {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-scs-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--mosaic-gradient);
    color: white;
    padding: 13px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    border: none;
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(232,57,58,0.25);
}

.btn-scs-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 28px rgba(232,57,58,0.35);
}

.btn-scs-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    color: white;
    padding: 13px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.15);
    cursor: pointer;
    font-family: 'Poppins', sans-serif;
    transition: all 0.3s;
}

.btn-scs-secondary:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.28);
    transform: translateY(-2px);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
    .services-overview-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sc-body {
        grid-template-columns: 1fr;
    }

    .sc-body-col {
        border-right: none;
        border-bottom: 1px solid #F3F4F6;
    }

    .sc-body-col:last-child { border-bottom: none; }
}

@media (max-width: 900px) {
    .services-nav {
        flex-wrap: nowrap;
        overflow-x: auto;
    }

    .service-nav-btn {
        min-width: 130px;
        flex: 0 0 auto;
    }

    .sc-header {
        padding: 24px 24px 20px;
        flex-direction: column;
    }

    .sc-impact-badge {
        flex-direction: row;
        align-items: center;
        gap: 12px;
    }

    .sc-tags-row { padding: 16px 24px; }
    .sc-body-col { padding: 24px 24px; }
}

@media (max-width: 768px) {
    .services-section { padding: 70px 16px; }

    .services-overview-grid {
        grid-template-columns: 1fr;
    }

    .services-cta-strip {
        padding: 28px 24px;
        flex-direction: column;
        align-items: flex-start;
    }

    .scs-btns {
        width: 100%;
    }

    .btn-scs-primary,
    .btn-scs-secondary {
        flex: 1;
        justify-content: center;
    }
}

@media (max-width: 480px) {
    .services-section-header h2 { font-size: 24px; }

    .snb-name { font-size: 11px; }

    .sc-header h3 { font-size: 20px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-848c39e *//* ══════════════════════════════════════
   SECTION 6 — INDUSTRIES WE SERVE
   Mosaic Brand Colors Applied
══════════════════════════════════════ */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

:root {
    --mosaic-red:    #E8393A;
    --mosaic-orange: #F5A623;
    --mosaic-green:  #4CAF50;
    --mosaic-blue:   #2196F3;
    --mosaic-purple: #9C27B0;
    --dark:          #1A1A2E;
    --dark-2:        #2D2D2D;
    --gray:          #6B7280;
    --gray-2:        #9CA3AF;
    --light:         #F9FAFB;
    --white:         #FFFFFF;
    --border:        rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.industries-section {
    background: linear-gradient(
        160deg,
        #F8FAFF 0%,
        #F2F0FF 30%,
        #FFF8F0 65%,
        #F0FFF5 100%
    );
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
}

/* Background blobs */
.industries-section::before {
    content: '';
    position: absolute;
    top: -200px; right: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(156,39,176,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.industries-section::after {
    content: '';
    position: absolute;
    bottom: -200px; left: -200px;
    width: 600px; height: 600px;
    background: radial-gradient(circle, rgba(33,150,243,0.05) 0%, transparent 70%);
    pointer-events: none;
    z-index: 0;
}

.industries-container {
    max-width: 1200px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.industries-header {
    text-align: center;
    margin-bottom: 64px;
}

.industries-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(156,39,176,0.09);
    color: var(--mosaic-purple);
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11.5px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 20px;
    border: 1px solid rgba(156,39,176,0.15);
}

.industries-section-label i { font-size: 11px; }

.industries-header h2 {
    font-size: clamp(28px, 4vw, 44px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 18px;
    letter-spacing: -0.5px;
}

.industries-header h2 .grad {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.industries-header p {
    font-size: 16px;
    color: var(--gray);
    line-height: 1.75;
    max-width: 620px;
    margin: 0 auto 32px;
}

/* Industry count strip */
.industry-count-strip {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 28px;
    flex-wrap: wrap;
}

.ind-count-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: var(--dark-2);
}

.ind-count-dot {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.dot-red    { background: var(--mosaic-red); }
.dot-orange { background: var(--mosaic-orange); }
.dot-green  { background: var(--mosaic-green); }
.dot-blue   { background: var(--mosaic-blue); }

/* ══════════════════════════════════════
   FEATURED INDUSTRIES — TOP 4
   (Verified Clients — Full Cards)
══════════════════════════════════════ */
.featured-industries-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.featured-industries-label span {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
}

.featured-line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, #E5E7EB, transparent);
}

.featured-badge {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    background: rgba(245,166,35,0.12);
    color: #B45309;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
}

/* Featured Grid — 2 cols */
.featured-industries-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 48px;
}

/* ── Featured Industry Card ── */
.ind-featured-card {
    background: var(--white);
    border-radius: 22px;
    overflow: hidden;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    cursor: default;
}

.ind-featured-card::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    opacity: 0;
    transition: opacity 0.3s;
}

.ind-featured-card:hover {
    transform: translateY(-6px);
    box-shadow: var(--shadow-lg);
    border-color: transparent;
}

.ind-featured-card:hover::before { opacity: 1; }

/* Card accent by industry */
.ifc-business::before  { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }
.ifc-fitness::before   { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.ifc-retail::before    { background: linear-gradient(90deg, var(--mosaic-green), var(--mosaic-blue)); }
.ifc-shipping::before  { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }

/* Card Header */
.ifc-header {
    padding: 24px 26px 18px;
    display: flex;
    align-items: flex-start;
    gap: 16px;
    border-bottom: 1px solid #F3F4F6;
}

.ifc-icon-wrap {
    width: 58px;
    height: 58px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 26px;
    flex-shrink: 0;
}

.icon-business { background: linear-gradient(135deg, rgba(156,39,176,0.12), rgba(33,150,243,0.10)); }
.icon-fitness  { background: linear-gradient(135deg, rgba(232,57,58,0.10), rgba(245,166,35,0.12)); }
.icon-retail   { background: linear-gradient(135deg, rgba(76,175,80,0.10), rgba(33,150,243,0.08)); }
.icon-shipping { background: linear-gradient(135deg, rgba(33,150,243,0.10), rgba(156,39,176,0.10)); }

.ifc-header-info { flex: 1; }

.ifc-title {
    font-size: 17px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 6px;
    line-height: 1.2;
}

.ifc-subtitle {
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
    line-height: 1.5;
}

/* Verified result badge */
.ifc-verified-badge {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 12px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    white-space: nowrap;
    flex-shrink: 0;
}

.vb-purple { background: rgba(156,39,176,0.10); color: var(--mosaic-purple); border: 1px solid rgba(156,39,176,0.15); }
.vb-red    { background: rgba(232,57,58,0.09);  color: var(--mosaic-red);    border: 1px solid rgba(232,57,58,0.14); }
.vb-green  { background: rgba(76,175,80,0.10);  color: #2E7D32;              border: 1px solid rgba(76,175,80,0.15); }
.vb-blue   { background: rgba(33,150,243,0.10); color: #1565C0;              border: 1px solid rgba(33,150,243,0.15); }

/* Card Body */
.ifc-body {
    padding: 20px 26px;
}

.ifc-desc {
    font-size: 13.5px;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 18px;
}

/* Verified Result Block */
.ifc-result-block {
    border-radius: 14px;
    padding: 14px 16px;
    margin-bottom: 16px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.irb-business { background: rgba(156,39,176,0.06); border: 1.5px solid rgba(156,39,176,0.10); }
.irb-fitness  { background: rgba(232,57,58,0.05);  border: 1.5px solid rgba(232,57,58,0.09); }
.irb-retail   { background: rgba(76,175,80,0.06);  border: 1.5px solid rgba(76,175,80,0.10); }
.irb-shipping { background: rgba(33,150,243,0.05); border: 1.5px solid rgba(33,150,243,0.10); }

.irb-icon {
    width: 34px;
    height: 34px;
    border-radius: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: white;
    flex-shrink: 0;
}

.irb-icon-business { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.irb-icon-fitness  { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.irb-icon-retail   { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.irb-icon-shipping { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.irb-content {}

.irb-label {
    font-size: 10px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 4px;
    display: block;
}

.irb-business .irb-label { color: var(--mosaic-purple); }
.irb-fitness  .irb-label { color: var(--mosaic-red); }
.irb-retail   .irb-label { color: #2E7D32; }
.irb-shipping .irb-label { color: #1565C0; }

.irb-client-name {
    font-size: 12px;
    font-weight: 700;
    color: var(--dark);
    display: block;
    margin-bottom: 3px;
}

.irb-result-text {
    font-size: 12px;
    color: var(--gray);
    font-weight: 500;
    line-height: 1.4;
}

/* Result stats row */
.irb-stats {
    display: flex;
    gap: 12px;
    margin-top: 10px;
    flex-wrap: wrap;
}

.irb-stat {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.irb-stat-num {
    font-size: 16px;
    font-weight: 900;
    line-height: 1;
}

.isn-purple { color: var(--mosaic-purple); }
.isn-red    { color: var(--mosaic-red); }
.isn-green  { color: var(--mosaic-green); }
.isn-blue   { color: var(--mosaic-blue); }

.irb-stat-label {
    font-size: 10px;
    color: var(--gray-2);
    font-weight: 500;
}

/* Keyword Tags */
.ifc-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 16px;
}

.kw-pill {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 5px 11px;
    border-radius: 7px;
    font-size: 11px;
    font-weight: 600;
    background: var(--light);
    color: var(--dark-2);
    border: 1px solid #E5E7EB;
    transition: all 0.2s;
    cursor: default;
}

.kw-pill:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-sm);
}

.kw-pill i { font-size: 9px; }

.kw-business i { color: var(--mosaic-purple); }
.kw-fitness  i { color: var(--mosaic-red); }
.kw-retail   i { color: var(--mosaic-green); }
.kw-shipping i { color: var(--mosaic-blue); }

/* Card Footer */
.ifc-footer {
    padding: 14px 26px;
    border-top: 1px solid #F3F4F6;
    background: #FAFAFA;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.ifc-client-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.ifc-client-chip:hover { opacity: 0.75; }

.ifc-chip-avatar {
    width: 28px;
    height: 28px;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 10px;
    font-weight: 800;
    color: white;
}

.ca-business { background: linear-gradient(135deg, var(--mosaic-purple), var(--mosaic-blue)); }
.ca-fitness  { background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange)); }
.ca-retail   { background: linear-gradient(135deg, var(--mosaic-green), var(--mosaic-blue)); }
.ca-shipping { background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple)); }

.ifc-chip-text {}

.ifc-chip-name {
    display: block;
    font-size: 11px;
    font-weight: 700;
    color: var(--dark);
    line-height: 1.2;
}

.ifc-chip-url {
    display: block;
    font-size: 10px;
    color: var(--gray-2);
    font-weight: 500;
}

.ifc-learn-more {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 12px;
    font-weight: 700;
    text-decoration: none;
    transition: gap 0.2s;
    padding: 6px 14px;
    border-radius: 8px;
}

.ilm-business {
    color: var(--mosaic-purple);
    background: rgba(156,39,176,0.08);
}

.ilm-fitness {
    color: var(--mosaic-red);
    background: rgba(232,57,58,0.07);
}

.ilm-retail {
    color: #2E7D32;
    background: rgba(76,175,80,0.08);
}

.ilm-shipping {
    color: #1565C0;
    background: rgba(33,150,243,0.08);
}

.ifc-learn-more:hover { gap: 8px; }

/* ══════════════════════════════════════
   MORE INDUSTRIES — COMPACT GRID
══════════════════════════════════════ */
.more-industries-label {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 24px;
}

.more-industries-label span {
    font-size: 12px;
    font-weight: 700;
    color: var(--gray-2);
    text-transform: uppercase;
    letter-spacing: 0.6px;
    white-space: nowrap;
}

.more-line {
    flex: 1;
    height: 1px;
    background: #E5E7EB;
}

/* Compact Industries Grid — 4 col */
.more-industries-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 16px;
    margin-bottom: 48px;
}

/* ── Compact Card ── */
.ind-compact-card {
    background: var(--white);
    border-radius: 18px;
    padding: 22px 20px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    transition: all 0.3s ease;
    position: relative;
    overflow: hidden;
    cursor: default;
}

.ind-compact-card::after {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 3px;
    opacity: 0;
    transition: opacity 0.3s;
    border-radius: 0 0 18px 18px;
}

.ind-compact-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.ind-compact-card:hover::after { opacity: 1; }

/* Compact card accent colors */
.icc-healthcare::after { background: linear-gradient(90deg, var(--mosaic-red), var(--mosaic-orange)); }
.icc-restaurant::after { background: linear-gradient(90deg, var(--mosaic-orange), var(--mosaic-green)); }
.icc-realestate::after { background: linear-gradient(90deg, var(--mosaic-blue), var(--mosaic-purple)); }
.icc-legal::after      { background: linear-gradient(90deg, var(--mosaic-purple), var(--mosaic-blue)); }

/* Compact icon */
.icc-icon {
    width: 48px;
    height: 48px;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    margin-bottom: 14px;
}

.icc-healthcare .icc-icon { background: rgba(232,57,58,0.09); }
.icc-restaurant .icc-icon { background: rgba(245,166,35,0.12); }
.icc-realestate .icc-icon { background: rgba(33,150,243,0.09); }
.icc-legal      .icc-icon { background: rgba(156,39,176,0.09); }

.icc-title {
    font-size: 14px;
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 8px;
    line-height: 1.3;
}

.icc-desc {
    font-size: 12.5px;
    color: var(--gray);
    line-height: 1.7;
    margin-bottom: 14px;
}

/* Compact keyword tags */
.icc-keywords {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 14px;
}

.icc-kw {
    font-size: 10px;
    font-weight: 600;
    padding: 3px 9px;
    border-radius: 6px;
    background: var(--light);
    color: var(--dark-2);
    border: 1px solid #E5E7EB;
}

/* Compact footer */
.icc-footer {
    padding-top: 12px;
    border-top: 1px solid #F3F4F6;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.icc-enquire {
    font-size: 11px;
    font-weight: 700;
    color: var(--gray-2);
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 4px;
    transition: all 0.2s;
}

.icc-enquire:hover {
    color: var(--mosaic-purple);
}

.icc-enquire i { font-size: 9px; }

.icc-tag {
    font-size: 10px;
    font-weight: 700;
    padding: 3px 9px;
    border-radius: 50px;
}

.icc-healthcare .icc-tag { background: rgba(232,57,58,0.08);  color: var(--mosaic-red); }
.icc-restaurant .icc-tag { background: rgba(245,166,35,0.12); color: #B45309; }
.icc-realestate .icc-tag { background: rgba(33,150,243,0.09); color: #1565C0; }
.icc-legal      .icc-tag { background: rgba(156,39,176,0.09); color: var(--mosaic-purple); }

/* ══════════════════════════════════════
   BOTTOM CTA STRIP
══════════════════════════════════════ */
.industries-cta-strip {
    background: var(--dark);
    border-radius: 24px;
    padding: 40px 48px;
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 40px;
    align-items: center;
    position: relative;
    overflow: hidden;
}

.industries-cta-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--mosaic-gradient);
}

.industries-cta-strip::after {
    content: '';
    position: absolute;
    bottom: -80px; right: -80px;
    width: 240px; height: 240px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.ics-text {}

.ics-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(255,255,255,0.10);
    color: rgba(255,255,255,0.80);
    padding: 5px 14px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin-bottom: 14px;
    border: 1px solid rgba(255,255,255,0.12);
}

.ics-heading {
    font-size: clamp(20px, 2.5vw, 28px);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 10px;
    line-height: 1.2;
}

.ics-heading span {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.ics-desc {
    font-size: 14px;
    color: rgba(255,255,255,0.55);
    line-height: 1.7;
    max-width: 480px;
}

.ics-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
    flex-shrink: 0;
}

.ics-btn-primary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: var(--mosaic-gradient);
    color: var(--white);
    padding: 13px 28px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(232,57,58,0.25);
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    border: none;
    cursor: pointer;
}

.ics-btn-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 12px 30px rgba(232,57,58,0.35);
}

.ics-btn-secondary {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.85);
    padding: 12px 24px;
    border-radius: 50px;
    font-size: 13px;
    font-weight: 600;
    text-decoration: none;
    border: 1.5px solid rgba(255,255,255,0.15);
    transition: all 0.3s;
    white-space: nowrap;
    font-family: 'Poppins', sans-serif;
    cursor: pointer;
}

.ics-btn-secondary:hover {
    background: rgba(255,255,255,0.13);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-2px);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 1100px) {
    .featured-industries-grid {
        grid-template-columns: 1fr 1fr;
    }

    .more-industries-grid {
        grid-template-columns: 1fr 1fr;
    }

    .industries-cta-strip {
        grid-template-columns: 1fr;
        gap: 24px;
        padding: 32px 28px;
    }

    .ics-actions {
        flex-direction: row;
        flex-wrap: wrap;
    }
}

@media (max-width: 768px) {
    .industries-section { padding: 70px 16px; }

    .featured-industries-grid {
        grid-template-columns: 1fr;
    }

    .more-industries-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ifc-header { flex-wrap: wrap; }

    .ifc-verified-badge { margin-top: 8px; }
}

@media (max-width: 480px) {
    .industries-header h2 { font-size: 26px; }

    .more-industries-grid {
        grid-template-columns: 1fr;
    }

    .industry-count-strip { gap: 14px; }

    .ics-actions { flex-direction: column; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-af91154 *//* ══════════════════════════════════════
   SECTION 7 — OUR PROCESS
   Mosaic Brand | Lean & Secure Code
══════════════════════════════════════ */

:root {
    --red:    #E8393A;
    --orange: #F5A623;
    --green:  #4CAF50;
    --blue:   #2196F3;
    --purple: #9C27B0;
    --dark:   #1A1A2E;
    --gray:   #6B7280;
    --gray-2: #9CA3AF;
    --light:  #F9FAFB;
    --white:  #FFFFFF;
    --border: rgba(0,0,0,0.07);
    --grad:   linear-gradient(135deg,#E8393A 0%,#F5A623 25%,#4CAF50 55%,#2196F3 80%,#9C27B0 100%);
    --shadow: 0 10px 40px rgba(0,0,0,0.09);
    --shadow-sm: 0 4px 16px rgba(0,0,0,0.07);
}

/* ── Section Wrapper ── */
.process-section {
    background: linear-gradient(160deg,#FAFBFF 0%,#F0F4FF 40%,#F5FFF8 100%);
    padding: 100px 24px;
    position: relative;
    overflow: hidden;
    font-family: 'Poppins', sans-serif;
}

.process-section::before,
.process-section::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    pointer-events: none;
    z-index: 0;
}

.process-section::before {
    top: -180px; right: -180px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(33,150,243,0.05) 0%, transparent 70%);
}

.process-section::after {
    bottom: -180px; left: -180px;
    width: 500px; height: 500px;
    background: radial-gradient(circle, rgba(76,175,80,0.05) 0%, transparent 70%);
}

.process-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ── Section Header ── */
.process-header {
    text-align: center;
    margin-bottom: 64px;
}

.process-label {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: rgba(33,150,243,0.10);
    color: #1565C0;
    padding: 7px 18px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(33,150,243,0.15);
}

.process-header h2 {
    font-size: clamp(26px, 3.8vw, 42px);
    font-weight: 800;
    color: var(--dark);
    line-height: 1.15;
    margin-bottom: 16px;
    letter-spacing: -0.4px;
}

.process-header h2 .grad-text {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.process-subline {
    font-size: 15px;
    color: var(--gray);
    line-height: 1.8;
    max-width: 680px;
    margin: 0 auto 28px;
}

/* Client proof pills row */
.process-proof-row {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 10px;
}

.process-proof-pill {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    background: var(--white);
    border: 1.5px solid var(--border);
    border-radius: 50px;
    padding: 6px 14px;
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dark);
    box-shadow: var(--shadow-sm);
    text-decoration: none;
    transition: all 0.2s;
}

.process-proof-pill:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow);
}

.pill-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.pd-aa  { background: var(--purple); }
.pd-pf  { background: var(--red); }
.pd-fm  { background: var(--green); }
.pd-tl  { background: var(--blue); }

/* ══════════════════════════════════════
   STEPS LAYOUT
   Timeline left, content right
══════════════════════════════════════ */
.process-steps-wrap {
    display: grid;
    grid-template-columns: 60px 1fr;
    gap: 0 24px;
    position: relative;
}

/* Vertical timeline line */
.process-timeline-line {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.timeline-line-inner {
    position: absolute;
    top: 28px;
    bottom: 28px;
    left: 50%;
    transform: translateX(-50%);
    width: 2px;
    background: linear-gradient(
        180deg,
        var(--red) 0%,
        var(--orange) 20%,
        var(--green) 40%,
        var(--blue) 60%,
        var(--purple) 80%,
        var(--blue) 100%
    );
    opacity: 0.25;
}

/* Each step row */
.process-step-row {
    display: contents;
}

/* Step number node */
.step-node {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 24px;
    position: relative;
    z-index: 1;
}

.step-node-circle {
    width: 52px;
    height: 52px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 900;
    color: var(--white);
    flex-shrink: 0;
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transition: transform 0.3s;
    font-family: 'Poppins', sans-serif;
}

.step-node-circle:hover { transform: scale(1.08); }

.snc-1 { background: linear-gradient(135deg, var(--red), var(--orange)); }
.snc-2 { background: linear-gradient(135deg, var(--orange), var(--green)); }
.snc-3 { background: linear-gradient(135deg, var(--green), var(--blue)); }
.snc-4 { background: linear-gradient(135deg, var(--blue), var(--purple)); }
.snc-5 { background: linear-gradient(135deg, var(--purple), var(--red)); }
.snc-6 { background: linear-gradient(135deg, var(--blue), var(--green)); }

/* Step card */
.step-card {
    background: var(--white);
    border-radius: 20px;
    margin-bottom: 20px;
    border: 1.5px solid var(--border);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    transition: all 0.3s ease;
    cursor: default;
    position: relative;
}

.step-card::before {
    content: '';
    position: absolute;
    left: 0; top: 0; bottom: 0;
    width: 4px;
    border-radius: 20px 0 0 20px;
    opacity: 0;
    transition: opacity 0.3s;
}

.step-card:hover {
    transform: translateX(6px);
    box-shadow: var(--shadow);
    border-color: transparent;
}

.step-card:hover::before { opacity: 1; }

.sc-1::before { background: linear-gradient(180deg, var(--red), var(--orange)); }
.sc-2::before { background: linear-gradient(180deg, var(--orange), var(--green)); }
.sc-3::before { background: linear-gradient(180deg, var(--green), var(--blue)); }
.sc-4::before { background: linear-gradient(180deg, var(--blue), var(--purple)); }
.sc-5::before { background: linear-gradient(180deg, var(--purple), var(--red)); }
.sc-6::before { background: linear-gradient(180deg, var(--blue), var(--green)); }

/* Step card inner layout */
.step-card-inner {
    display: grid;
    grid-template-columns: 1fr auto;
    gap: 20px;
    padding: 28px 32px;
    align-items: start;
}

/* Step text block */
.step-text-block {}

.step-tag {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 12px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    margin-bottom: 12px;
}

.st-1 { background: rgba(232,57,58,0.09);  color: #C62828; }
.st-2 { background: rgba(245,166,35,0.12); color: #E65100; }
.st-3 { background: rgba(76,175,80,0.10);  color: #2E7D32; }
.st-4 { background: rgba(33,150,243,0.10); color: #1565C0; }
.st-5 { background: rgba(156,39,176,0.09); color: #6A1B9A; }
.st-6 { background: rgba(33,150,243,0.10); color: #0D47A1; }

.step-card h3 {
    font-size: clamp(15px, 2vw, 18px);
    font-weight: 800;
    color: var(--dark);
    margin-bottom: 10px;
    line-height: 1.25;
}

.step-card p {
    font-size: 13.5px;
    color: var(--gray);
    line-height: 1.8;
    margin-bottom: 16px;
}

/* Deliverable tag */
.step-deliverable {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 14px;
    font-size: 12px;
    font-weight: 600;
    color: var(--dark);
}

.step-deliverable i {
    font-size: 11px;
    color: var(--green);
}

/* Step right panel — icon + time */
.step-right-panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 12px;
    padding-top: 4px;
    flex-shrink: 0;
}

.step-icon-wrap {
    width: 56px;
    height: 56px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 22px;
    flex-shrink: 0;
}

.si-1 { background: rgba(232,57,58,0.09); }
.si-2 { background: rgba(245,166,35,0.12); }
.si-3 { background: rgba(76,175,80,0.10); }
.si-4 { background: rgba(33,150,243,0.10); }
.si-5 { background: rgba(156,39,176,0.09); }
.si-6 { background: rgba(33,150,243,0.10); }

.step-timing {
    text-align: center;
}

.step-timing-num {
    display: block;
    font-size: 18px;
    font-weight: 900;
    color: var(--dark);
    line-height: 1;
    margin-bottom: 2px;
    font-family: 'Poppins', sans-serif;
}

.step-timing-label {
    display: block;
    font-size: 9.5px;
    color: var(--gray-2);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.4px;
}

/* ── Action items list inside card ── */
.step-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 14px;
}

.step-action-tag {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: var(--light);
    border: 1px solid var(--border);
    border-radius: 7px;
    padding: 4px 10px;
    font-size: 11px;
    font-weight: 600;
    color: var(--dark);
}

.step-action-tag i { font-size: 9px; }

/* ── Client result chip inside step ── */
.step-client-result {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 9px 14px;
    background: rgba(76,175,80,0.06);
    border: 1px solid rgba(76,175,80,0.14);
    border-radius: 10px;
    margin-top: 4px;
}

.scr-avatar {
    width: 26px;
    height: 26px;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 9px;
    font-weight: 800;
    color: var(--white);
    flex-shrink: 0;
    font-family: 'Poppins', sans-serif;
}

.scr-text {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--dark);
    line-height: 1.3;
}

.scr-text span {
    display: block;
    font-size: 10.5px;
    color: #2E7D32;
    font-weight: 700;
}

/* ══════════════════════════════════════
   BOTTOM CTA STRIP
══════════════════════════════════════ */
.process-cta-strip {
    margin-top: 48px;
    background: var(--dark);
    border-radius: 22px;
    padding: 40px 48px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 32px;
    position: relative;
    overflow: hidden;
}

.process-cta-strip::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 3px;
    background: var(--grad);
}

.process-cta-strip::after {
    content: '';
    position: absolute;
    bottom: -60px; right: -60px;
    width: 200px; height: 200px;
    border-radius: 50%;
    background: rgba(255,255,255,0.03);
    pointer-events: none;
}

.pcs-text {}

.pcs-heading {
    font-size: clamp(18px, 2.5vw, 24px);
    font-weight: 800;
    color: var(--white);
    margin-bottom: 8px;
    line-height: 1.25;
    font-family: 'Poppins', sans-serif;
}

.pcs-heading span {
    background: var(--grad);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.pcs-sub {
    font-size: 13.5px;
    color: rgba(255,255,255,0.55);
    line-height: 1.6;
    font-family: 'Poppins', sans-serif;
}

.pcs-buttons {
    display: flex;
    gap: 12px;
    flex-shrink: 0;
    flex-wrap: wrap;
}

.btn-pcs-primary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: var(--grad);
    color: var(--white);
    padding: 13px 26px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 700;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    border: none;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 6px 20px rgba(232,57,58,0.25);
    white-space: nowrap;
}

.btn-pcs-primary:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 28px rgba(232,57,58,0.35);
}

.btn-pcs-secondary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    color: var(--white);
    padding: 13px 24px;
    border-radius: 50px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
    font-family: 'Poppins', sans-serif;
    border: 1.5px solid rgba(255,255,255,0.14);
    cursor: pointer;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-pcs-secondary:hover {
    background: rgba(255,255,255,0.14);
    border-color: rgba(255,255,255,0.25);
    transform: translateY(-3px);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 900px) {
    .process-steps-wrap {
        grid-template-columns: 44px 1fr;
        gap: 0 16px;
    }

    .step-node-circle {
        width: 44px;
        height: 44px;
        font-size: 14px;
    }

    .step-card-inner {
        grid-template-columns: 1fr;
        padding: 22px 24px;
    }

    .step-right-panel {
        flex-direction: row;
        align-items: center;
        padding-top: 0;
        border-top: 1px solid var(--border);
        padding-top: 14px;
    }

    .process-cta-strip {
        flex-direction: column;
        text-align: center;
        padding: 32px 28px;
    }

    .pcs-buttons {
        justify-content: center;
    }
}

@media (max-width: 600px) {
    .process-section { padding: 70px 16px; }

    .process-steps-wrap {
        grid-template-columns: 1fr;
    }

    .step-node { display: none; }

    .timeline-line-inner { display: none; }

    .step-card { margin-bottom: 14px; }

    .step-card:hover { transform: none; }

    .process-proof-row { gap: 7px; }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-2a95e6d *//* ══════════════════════════════════════
   FINAL SECTION — INTERNAL LINKS
   Related Services & Navigation
   Mosaic Brand Colors
══════════════════════════════════════ */

:root {
    --mosaic-red:    #E8393A;
    --mosaic-orange: #F5A623;
    --mosaic-green:  #4CAF50;
    --mosaic-blue:   #2196F3;
    --mosaic-purple: #9C27B0;
    --dark:          #1A1A2E;
    --dark-2:        #2D2D2D;
    --gray:          #6B7280;
    --gray-2:        #9CA3AF;
    --light:         #F9FAFB;
    --white:         #FFFFFF;
    --border:        rgba(0,0,0,0.07);
    --mosaic-gradient: linear-gradient(
        135deg,
        #E8393A 0%,
        #F5A623 25%,
        #4CAF50 55%,
        #2196F3 80%,
        #9C27B0 100%
    );
    --shadow-sm: 0 4px 20px rgba(0,0,0,0.07);
    --shadow:    0 10px 40px rgba(0,0,0,0.10);
    --shadow-lg: 0 20px 60px rgba(0,0,0,0.13);
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--dark);
    background: var(--white);
    overflow-x: hidden;
}

/* ══════════════════════════════════════
   SECTION WRAPPER
══════════════════════════════════════ */
.internal-links-section {
    background: var(--dark);
    padding: 80px 24px;
    position: relative;
    overflow: hidden;
}

/* Gradient top border */
.internal-links-section::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 4px;
    background: var(--mosaic-gradient);
    z-index: 2;
}

/* Background glow blobs */
.internal-links-section::after {
    content: '';
    position: absolute;
    top: -150px;
    right: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(33,150,243,0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

.il-bg-blob {
    position: absolute;
    bottom: -150px;
    left: -150px;
    width: 500px;
    height: 500px;
    background: radial-gradient(
        circle,
        rgba(156,39,176,0.07) 0%,
        transparent 70%
    );
    pointer-events: none;
    z-index: 0;
}

/* ── Container ── */
.il-container {
    max-width: 1100px;
    margin: 0 auto;
    position: relative;
    z-index: 1;
}

/* ══════════════════════════════════════
   SECTION HEADER
══════════════════════════════════════ */
.il-header {
    text-align: center;
    margin-bottom: 48px;
}

.il-section-label {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    background: rgba(255,255,255,0.08);
    color: rgba(255,255,255,0.75);
    padding: 6px 16px;
    border-radius: 50px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    margin-bottom: 18px;
    border: 1px solid rgba(255,255,255,0.10);
}

.il-section-label i { font-size: 10px; }

.il-header h2 {
    font-size: clamp(22px, 3vw, 34px);
    font-weight: 800;
    color: white;
    line-height: 1.2;
    margin-bottom: 14px;
    letter-spacing: -0.4px;
}

.il-header h2 .il-gradient-text {
    background: var(--mosaic-gradient);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.il-header p {
    font-size: 15px;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    max-width: 520px;
    margin: 0 auto;
}

/* ══════════════════════════════════════
   INTERNAL LINK CARDS GRID
══════════════════════════════════════ */
.il-cards-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
    margin-bottom: 40px;
}

/* ── Individual Link Card ── */
.il-card {
    background: rgba(255,255,255,0.05);
    border: 1.5px solid rgba(255,255,255,0.09);
    border-radius: 20px;
    padding: 32px 28px;
    text-decoration: none;
    display: flex;
    align-items: flex-start;
    gap: 20px;
    transition: all 0.35s ease;
    position: relative;
    overflow: hidden;
    cursor: pointer;
}

/* Gradient border on hover */
.il-card::before {
    content: '';
    position: absolute;
    inset: 0;
    border-radius: 20px;
    padding: 1.5px;
    background: var(--mosaic-gradient);
    -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
    -webkit-mask-composite: xor;
    mask-composite: exclude;
    opacity: 0;
    transition: opacity 0.35s ease;
}

/* Glow blob inside card */
.il-card::after {
    content: '';
    position: absolute;
    top: -60px;
    right: -60px;
    width: 180px;
    height: 180px;
    border-radius: 50%;
    opacity: 0;
    transition: opacity 0.35s ease;
    pointer-events: none;
}

.il-card-dma::after {
    background: radial-gradient(circle, rgba(232,57,58,0.12) 0%, transparent 70%);
}

.il-card-ast::after {
    background: radial-gradient(circle, rgba(33,150,243,0.12) 0%, transparent 70%);
}

.il-card:hover {
    background: rgba(255,255,255,0.08);
    border-color: rgba(255,255,255,0.15);
    transform: translateY(-5px);
    box-shadow: 0 20px 50px rgba(0,0,0,0.30);
}

.il-card:hover::before { opacity: 1; }
.il-card:hover::after  { opacity: 1; }

/* ── Card Icon ── */
.il-card-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 24px;
    flex-shrink: 0;
    position: relative;
    z-index: 1;
    transition: transform 0.3s ease;
}

.il-card:hover .il-card-icon {
    transform: scale(1.10);
}

.icon-dma {
    background: linear-gradient(135deg, var(--mosaic-red), var(--mosaic-orange));
    box-shadow: 0 6px 20px rgba(232,57,58,0.30);
}

.icon-ast {
    background: linear-gradient(135deg, var(--mosaic-blue), var(--mosaic-purple));
    box-shadow: 0 6px 20px rgba(33,150,243,0.30);
}

/* ── Card Content ── */
.il-card-content {
    flex: 1;
    position: relative;
    z-index: 1;
}

.il-card-label {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 10px;
    font-weight: 700;
    letter-spacing: 0.6px;
    text-transform: uppercase;
    padding: 3px 10px;
    border-radius: 50px;
    margin-bottom: 10px;
}

.label-dma {
    background: rgba(232,57,58,0.15);
    color: #FF8A80;
    border: 1px solid rgba(232,57,58,0.20);
}

.label-ast {
    background: rgba(33,150,243,0.15);
    color: #82B1FF;
    border: 1px solid rgba(33,150,243,0.20);
}

.il-card-title {
    font-size: clamp(16px, 2vw, 20px);
    font-weight: 800;
    color: white;
    line-height: 1.25;
    margin-bottom: 10px;
    display: block;
    transition: color 0.2s;
}

.il-card-dma:hover .il-card-title { color: #FFB74D; }
.il-card-ast:hover .il-card-title  { color: #82B1FF; }

.il-card-desc {
    font-size: 13.5px;
    color: rgba(255,255,255,0.55);
    line-height: 1.75;
    margin-bottom: 18px;
    font-weight: 400;
}

/* ── Card Feature Tags ── */
.il-card-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 7px;
    margin-bottom: 18px;
}

.il-tag {
    padding: 4px 11px;
    border-radius: 50px;
    font-size: 10.5px;
    font-weight: 600;
    border: 1px solid transparent;
}

.tag-dma {
    background: rgba(232,57,58,0.10);
    color: rgba(255,138,128,0.90);
    border-color: rgba(232,57,58,0.18);
}

.tag-ast {
    background: rgba(33,150,243,0.10);
    color: rgba(130,177,255,0.90);
    border-color: rgba(33,150,243,0.18);
}

/* ── Card CTA Row ── */
.il-card-cta {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 700;
    transition: gap 0.25s ease;
}

.il-card-dma .il-card-cta { color: #FFB74D; }
.il-card-ast .il-card-cta { color: #82B1FF; }

.il-card:hover .il-card-cta { gap: 14px; }

.il-cta-arrow {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    transition: transform 0.25s ease;
    flex-shrink: 0;
}

.il-card-dma .il-cta-arrow {
    background: rgba(232,57,58,0.20);
    color: #FF8A80;
}

.il-card-ast .il-cta-arrow {
    background: rgba(33,150,243,0.20);
    color: #82B1FF;
}

.il-card:hover .il-cta-arrow {
    transform: translateX(4px);
}

/* ── Card URL Display ── */
.il-card-url {
    position: absolute;
    bottom: 18px;
    right: 20px;
    font-size: 10px;
    color: rgba(255,255,255,0.25);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: 5px;
    transition: color 0.2s;
    z-index: 1;
}

.il-card:hover .il-card-url {
    color: rgba(255,255,255,0.45);
}

/* ══════════════════════════════════════
   BOTTOM BRAND STRIP
══════════════════════════════════════ */
.il-brand-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 22px 28px;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.07);
    border-radius: 16px;
    gap: 20px;
    flex-wrap: wrap;
}

/* Mosaic Logo Block */
.il-brand-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.il-brand-logo:hover { opacity: 0.80; }

.il-logo-mosaic {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 3px;
    width: 30px;
    height: 30px;
    flex-shrink: 0;
}

.il-logo-mosaic span {
    border-radius: 2px;
    display: block;
}

.ilm-1 { background: var(--mosaic-red); }
.ilm-2 { background: var(--mosaic-orange); }
.ilm-3 { background: var(--mosaic-green); }
.ilm-4 { background: var(--mosaic-blue); }

.il-brand-name {
    font-size: 16px;
    font-weight: 700;
    color: white;
    letter-spacing: -0.2px;
}

/* Brand tagline */
.il-brand-tagline {
    font-size: 13px;
    color: rgba(255,255,255,0.45);
    font-weight: 400;
}

/* Quick nav links */
.il-quick-nav {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
}

.il-quick-nav a {
    color: rgba(255,255,255,0.50);
    font-size: 12px;
    font-weight: 600;
    text-decoration: none;
    padding: 5px 12px;
    border-radius: 8px;
    border: 1px solid rgba(255,255,255,0.08);
    transition: all 0.2s;
    white-space: nowrap;
}

.il-quick-nav a:hover {
    color: white;
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

.il-quick-nav-divider {
    width: 1px;
    height: 14px;
    background: rgba(255,255,255,0.12);
}

/* ══════════════════════════════════════
   RESPONSIVE
══════════════════════════════════════ */
@media (max-width: 768px) {
    .internal-links-section {
        padding: 60px 16px;
    }

    .il-cards-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }

    .il-brand-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 16px;
        padding: 18px 20px;
    }

    .il-quick-nav {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .il-header h2 { font-size: 22px; }

    .il-card {
        padding: 24px 20px;
    }

    .il-card-icon {
        width: 48px;
        height: 48px;
        font-size: 20px;
    }

    .il-card-tags { gap: 5px; }

    .il-quick-nav a {
        font-size: 11px;
        padding: 4px 10px;
    }
}/* End custom CSS */
/* Start custom CSS for html, class: .elementor-element-7897a22 *//* === MOSAIC FAQ SECTION === */
/* Brand: Pink #E8175D | Purple #9C27B0 | Cyan #00BCD4 | Green #4CAF50 */

.mosaic-faq {
  position: relative;
  background: #ffffff;
  padding: 90px 0 80px;
  overflow: hidden;
  font-family: inherit;
}

.faq-bg {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.faq-blob {
  position: absolute;
  border-radius: 50%;
  filter: blur(80px);
  opacity: 0.06;
}

.faq-blob--1 {
  width: 400px; height: 400px;
  background: radial-gradient(circle, #E8175D, transparent 70%);
  top: -100px; right: -100px;
}

.faq-blob--2 {
  width: 300px; height: 300px;
  background: radial-gradient(circle, #00BCD4, transparent 70%);
  bottom: -80px; left: -80px;
}

.faq-container {
  position: relative;
  z-index: 1;
  max-width: 1240px;
  margin: 0 auto;
  padding: 0 40px;
  /* FIX: prevent horizontal overflow */
  box-sizing: border-box;
  width: 100%;
}

/* --- HEADER --- */
.faq-header {
  text-align: center;
  margin-bottom: 60px;
  max-width: 700px;
  margin-left: auto;
  margin-right: auto;
}

.faq-tag {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: rgba(232,23,93,0.08);
  color: #E8175D;
  border: 1px solid rgba(232,23,93,0.2);
  border-radius: 50px;
  padding: 6px 16px;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  margin-bottom: 18px;
  text-transform: uppercase;
}

.faq-title {
  font-size: clamp(28px, 3.5vw, 42px);
  font-weight: 800;
  color: #0A0A1A;
  line-height: 1.15;
  letter-spacing: -1px;
  margin: 0 0 16px 0;
}

.faq-title--accent {
  background: linear-gradient(135deg, #E8175D 0%, #9C27B0 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-subtitle {
  font-size: 16px;
  color: #555;
  line-height: 1.7;
  margin: 0;
}

.faq-subtitle strong { color: #0A0A1A; }

/* --- GRID --- */
.faq-grid {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: 50px;
  align-items: start;
  /* FIX: prevent overflow */
  width: 100%;
  box-sizing: border-box;
}

/* --- ACCORDION --- */
.faq-accordion {
  display: flex;
  flex-direction: column;
  gap: 12px;
  /* FIX: constrain width */
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.faq-item {
  background: #fff;
  border: 1.5px solid #f0f0f5;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color 0.25s ease, box-shadow 0.25s ease;
  /* FIX: full width, no overflow */
  width: 100%;
  box-sizing: border-box;
}

.faq-item:hover {
  border-color: rgba(232,23,93,0.2);
}

.faq-item.is-open {
  border-color: rgba(232,23,93,0.3);
  box-shadow: 0 8px 30px rgba(232,23,93,0.08);
}

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 20px 22px;
  background: none;
  border: none;
  cursor: pointer;
  text-align: left;
  transition: background 0.2s ease;
  /* FIX: prevent overflow, allow wrapping */
  box-sizing: border-box;
  min-width: 0;
}

.faq-question:hover { background: rgba(232,23,93,0.02); }

.faq-q-num {
  font-size: 11px;
  font-weight: 800;
  color: #E8175D;
  background: rgba(232,23,93,0.08);
  border-radius: 6px;
  padding: 4px 8px;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}

.faq-q-text {
  flex: 1;
  font-size: 15px;
  font-weight: 700;
  color: #0A0A1A;
  line-height: 1.4;
  /* FIX: allow text to wrap, no truncation */
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
  white-space: normal;
  text-align: left;
}

.faq-q-icon {
  display: flex;
  align-items: center;
  color: #E8175D;
  flex-shrink: 0;
  transition: transform 0.3s cubic-bezier(0.16,1,0.3,1);
  /* FIX: always visible */
  margin-left: auto;
  padding-left: 8px;
}

.faq-item.is-open .faq-q-icon { transform: rotate(180deg); }

/* Answer Panel */
.faq-answer {
  overflow: hidden;
  max-height: 0;
  transition: max-height 0.4s cubic-bezier(0.16,1,0.3,1);
  /* FIX: contain width */
  width: 100%;
  box-sizing: border-box;
}

.faq-answer[hidden] {
  display: block !important;
  max-height: 0;
  visibility: hidden;
}

.faq-item.is-open .faq-answer {
  max-height: 600px;
  visibility: visible;
}

.faq-answer-inner {
  padding: 0 22px 22px 22px;
  border-top: 1px solid #f5f5fa;
  padding-top: 18px;
  /* FIX: contain content */
  box-sizing: border-box;
  width: 100%;
}

.faq-answer-inner p {
  font-size: 14.5px;
  line-height: 1.75;
  color: #555;
  margin: 0 0 14px 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.faq-answer-inner p:last-child { margin-bottom: 0; }
.faq-answer-inner strong { color: #0A0A1A; }

/* Stat Row */
.faq-stat-row {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  /* FIX: wrap on small screens */
  flex-wrap: wrap;
}

.faq-stat {
  flex: 1;
  min-width: 80px;
  background: linear-gradient(135deg, rgba(232,23,93,0.05), rgba(156,39,176,0.05));
  border: 1px solid rgba(232,23,93,0.12);
  border-radius: 12px;
  padding: 14px 12px;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 4px;
  box-sizing: border-box;
}

.faq-stat__num {
  font-size: 22px;
  font-weight: 900;
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  letter-spacing: -0.5px;
}

.faq-stat__label {
  font-size: 10.5px;
  color: #777;
  font-weight: 600;
  line-height: 1.3;
}

/* Timeline */
.faq-timeline {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 14px 0;
  padding-left: 4px;
  box-sizing: border-box;
  width: 100%;
}

.faq-timeline__item {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.faq-timeline__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 5px;
}

.faq-timeline__dot--pink { background: #E8175D; }
.faq-timeline__dot--cyan { background: #00BCD4; }

.faq-timeline__content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.faq-timeline__content strong {
  font-size: 13.5px;
  color: #0A0A1A;
  font-weight: 700;
}

.faq-timeline__content span {
  font-size: 13px;
  color: #666;
}

.faq-timeline__content em {
  color: #E8175D;
  font-style: normal;
  font-weight: 700;
}

/* Price Cards */
.faq-price-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
  box-sizing: border-box;
  width: 100%;
}

.faq-price-card {
  background: #f8f8fc;
  border: 1.5px solid #e8e8f0;
  border-radius: 12px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  text-align: center;
  transition: border-color 0.2s;
  box-sizing: border-box;
}

.faq-price-card--featured {
  background: linear-gradient(135deg, rgba(232,23,93,0.05), rgba(156,39,176,0.05));
  border-color: rgba(232,23,93,0.25);
}

.faq-price-card__label {
  font-size: 11px;
  font-weight: 700;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faq-price-card__price {
  font-size: 20px;
  font-weight: 900;
  color: #0A0A1A;
  letter-spacing: -0.5px;
}

.faq-price-card--featured .faq-price-card__price {
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-price-card__price small {
  font-size: 13px;
  font-weight: 600;
  -webkit-text-fill-color: #888;
  color: #888;
}

.faq-price-card__note {
  font-size: 10.5px;
  color: #aaa;
}

/* Compare */
.faq-compare {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin: 14px 0;
  box-sizing: border-box;
  width: 100%;
}

.faq-compare__col {
  border-radius: 12px;
  padding: 14px;
  background: #f8f8fc;
  border: 1.5px solid #e8e8f0;
  box-sizing: border-box;
  min-width: 0;
}

.faq-compare__col--featured {
  background: linear-gradient(135deg, rgba(232,23,93,0.04), rgba(156,39,176,0.04));
  border-color: rgba(232,23,93,0.2);
}

.faq-compare__head {
  display: block;
  font-size: 12px;
  font-weight: 800;
  margin-bottom: 10px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.faq-compare__head--grey { color: #888; }

.faq-compare__head--pink {
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.faq-compare__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.faq-compare__list li {
  font-size: 12.5px;
  color: #555;
  padding-left: 14px;
  position: relative;
  word-wrap: break-word;
  overflow-wrap: break-word;
}

.faq-compare__list li::before {
  content: '•';
  position: absolute;
  left: 0;
  color: #00BCD4;
}

.faq-compare__col--featured .faq-compare__list li::before {
  color: #E8175D;
}

/* Result Card */
.faq-result-card {
  background: linear-gradient(135deg, rgba(232,23,93,0.04), rgba(156,39,176,0.04));
  border: 1.5px solid rgba(232,23,93,0.15);
  border-radius: 14px;
  padding: 18px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 14px;
  box-sizing: border-box;
  width: 100%;
}

.faq-result-card__logo {
  width: 44px;
  height: 44px;
  background: rgba(232,23,93,0.08);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.faq-result-card__content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 120px;
}

.faq-result-card__content strong {
  font-size: 13.5px;
  color: #0A0A1A;
  font-weight: 700;
}

.faq-result-card__content span {
  font-size: 12px;
  color: #777;
}

.faq-result-card__stats {
  display: flex;
  gap: 16px;
}

.rc-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  text-align: center;
}

.rc-stat b {
  font-size: 20px;
  font-weight: 900;
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
}

.rc-stat small {
  font-size: 10px;
  color: #888;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}

/* --- RIGHT SIDE --- */
.faq-side {
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: sticky;
  top: 100px;
  min-width: 0;
  box-sizing: border-box;
}

/* Image Block */
.faq-image-block {
  position: relative;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 20px 50px rgba(0,0,0,0.1);
}

.faq-image {
  width: 100%;
  height: 220px;
  object-fit: cover;
  display: block;
  transition: transform 0.4s ease;
}

.faq-image-block:hover .faq-image {
  transform: scale(1.03);
}

.faq-image-badge {
  position: absolute;
  bottom: 14px;
  left: 14px;
  background: rgba(255,255,255,0.95);
  backdrop-filter: blur(10px);
  border-radius: 12px;
  padding: 10px 14px;
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: 0 4px 20px rgba(0,0,0,0.15);
}

.faq-image-badge > div {
  display: flex;
  flex-direction: column;
  gap: 1px;
}

.faq-image-badge strong {
  font-size: 12px;
  font-weight: 800;
  color: #0A0A1A;
}

.faq-image-badge small {
  font-size: 10.5px;
  color: #777;
}

/* Client Chips */
.faq-clients {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-clients__label {
  font-size: 11px;
  font-weight: 700;
  color: #aaa;
  text-transform: uppercase;
  letter-spacing: 0.8px;
}

.faq-clients__grid {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.faq-client-chip {
  background: #f5f5fa;
  border: 1px solid #e8e8f0;
  border-radius: 50px;
  padding: 6px 14px;
  font-size: 12px;
  font-weight: 700;
  color: #333;
  transition: all 0.2s ease;
  cursor: default;
}

.faq-client-chip:hover {
  background: rgba(232,23,93,0.07);
  border-color: rgba(232,23,93,0.25);
  color: #E8175D;
}

/* CTA Card */
.faq-cta-card {
  background: linear-gradient(135deg, #0A0A1A 0%, #1A0A2E 100%);
  border-radius: 20px;
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  box-sizing: border-box;
}

.faq-cta-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, #E8175D, #9C27B0, #00BCD4);
}

.faq-cta-card__icon {
  width: 52px;
  height: 52px;
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.faq-cta-card__title {
  font-size: 18px;
  font-weight: 800;
  color: #fff;
  margin: 0;
  line-height: 1.3;
}

.faq-cta-card__text {
  font-size: 13.5px;
  color: rgba(255,255,255,0.65);
  line-height: 1.65;
  margin: 0;
}

.faq-cta-card__list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 7px;
}

.faq-cta-card__list li {
  font-size: 13px;
  color: rgba(255,255,255,0.8);
  font-weight: 600;
}

.faq-cta-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  background: linear-gradient(135deg, #E8175D, #9C27B0);
  color: #fff;
  text-decoration: none;
  padding: 14px 24px;
  border-radius: 50px;
  font-size: 14.5px;
  font-weight: 800;
  transition: all 0.25s ease;
  box-shadow: 0 8px 25px rgba(232,23,93,0.4);
  letter-spacing: 0.2px;
}

.faq-cta-btn:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 35px rgba(232,23,93,0.5);
}

.faq-cta-btn svg {
  transition: transform 0.2s ease;
}

.faq-cta-btn:hover svg {
  transform: translateX(4px);
}

.faq-cta-card__note {
  font-size: 11.5px;
  color: rgba(255,255,255,0.4);
  text-align: center;
  margin: 0;
}

/* ============================================
   RESPONSIVE — TABLET (768px - 1024px)
============================================ */
@media (max-width: 1024px) {
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .faq-side {
    position: static;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px;
  }

  .faq-image-block { grid-column: 1 / -1; }
  .faq-cta-card    { grid-column: 1 / -1; }
}

/* ============================================
   RESPONSIVE — MOBILE (< 768px)
   KEY FIX: All overflow/cut-off issues
============================================ */
@media (max-width: 767px) {

  .mosaic-faq {
    padding: 60px 0;
    /* FIX: stop any bleed */
    overflow-x: hidden;
  }

  /* FIX: tighter padding on mobile */
  .faq-container {
    padding: 0 16px;
    overflow-x: hidden;
  }

  .faq-header {
    margin-bottom: 32px;
    padding: 0;
  }

  /* FIX: grid goes single column */
  .faq-grid {
    grid-template-columns: 1fr;
    gap: 28px;
    width: 100%;
    overflow: hidden;
  }

  /* FIX: accordion full width, no overflow */
  .faq-accordion {
    width: 100%;
    overflow: hidden;
  }

  /* FIX: each item contained */
  .faq-item {
    width: 100%;
    max-width: 100%;
    overflow: hidden;
    border-radius: 12px;
  }

  /* FIX: button padding reduced, no overflow */
  .faq-question {
    padding: 16px 14px;
    gap: 10px;
    width: 100%;
    box-sizing: border-box;
    overflow: hidden;
  }

  /* FIX: number badge smaller */
  .faq-q-num {
    font-size: 10px;
    padding: 3px 7px;
    min-width: 28px;
    text-align: center;
  }

  /* FIX: text wraps properly, no cut-off */
  .faq-q-text {
    font-size: 13.5px;
    line-height: 1.45;
    word-wrap: break-word;
    overflow-wrap: break-word;
    white-space: normal;
    min-width: 0;
    flex: 1;
  }

  /* FIX: icon stays visible and right-aligned */
  .faq-q-icon {
    flex-shrink: 0;
    margin-left: 4px;
    padding-left: 0;
  }

  /* FIX: answer inner padding tighter */
  .faq-answer-inner {
    padding: 0 14px 18px 14px;
    padding-top: 16px;
    overflow: hidden;
    box-sizing: border-box;
    width: 100%;
  }

  .faq-answer-inner p {
    font-size: 14px;
    word-wrap: break-word;
    overflow-wrap: break-word;
  }

  /* FIX: stat row stacks on very small screens */
  .faq-stat-row {
    flex-direction: column;
    gap: 8px;
  }

  .faq-stat {
    width: 100%;
    min-width: unset;
    box-sizing: border-box;
  }

  /* FIX: price cards stack */
  .faq-price-cards {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* FIX: compare table stacks */
  .faq-compare {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  /* FIX: result card stacks */
  .faq-result-card {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .faq-result-card__stats {
    width: 100%;
    justify-content: flex-start;
    gap: 24px;
  }

  /* FIX: side panel single column */
  .faq-side {
    grid-template-columns: 1fr;
    gap: 16px;
  }

  .faq-image-block { grid-column: unset; }
  .faq-cta-card    { grid-column: unset; }

  /* FIX: CTA card padding */
  .faq-cta-card {
    padding: 22px 18px;
  }

  .faq-cta-card__title {
    font-size: 16px;
  }

  .faq-cta-btn {
    font-size: 14px;
    padding: 13px 20px;
  }
}

/* Extra small phones */
@media (max-width: 375px) {
  .faq-container {
    padding: 0 12px;
  }

  .faq-question {
    padding: 14px 12px;
    gap: 8px;
  }

  .faq-q-text {
    font-size: 13px;
  }

  .faq-q-num {
    font-size: 9.5px;
    padding: 3px 6px;
  }
}

/* Accessibility */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation: none !important;
    transition-duration: 0.01ms !important;
  }
}

.faq-cta-btn:focus-visible,
.faq-question:focus-visible {
  outline: 3px solid #E8175D;
  outline-offset: 3px;
}/* End custom CSS */
/* Start Custom Fonts CSS */@font-face {
	font-family: 'Tenon &#8211; normal';
	font-style: normal;
	font-weight: normal;
	font-display: auto;
	src: url('https://www.mosaicdigital.ae/wp-content/uploads/2025/10/Fontspring-DEMO-tenon-regular-2.woff') format('woff');
}
@font-face {
	font-family: 'Tenon &#8211; normal';
	font-style: normal;
	font-weight: 200;
	font-display: auto;
	src: url('https://www.mosaicdigital.ae/wp-content/uploads/2025/10/Fontspring-DEMO-tenon-medium-2.woff') format('woff');
}
@font-face {
	font-family: 'Tenon &#8211; normal';
	font-style: normal;
	font-weight: bold;
	font-display: auto;
	src: url('https://www.mosaicdigital.ae/wp-content/uploads/2025/10/Fontspring-DEMO-tenon-bold-2.woff') format('woff');
}
/* End Custom Fonts CSS */