.elementor-kit-7{--e-global-color-primary:#6EC1E4;--e-global-color-secondary:#54595F;--e-global-color-text:#7A7A7A;--e-global-color-accent:#61CE70;--e-global-typography-primary-font-family:"Roboto";--e-global-typography-primary-font-weight:600;--e-global-typography-secondary-font-family:"Roboto Slab";--e-global-typography-secondary-font-weight:400;--e-global-typography-text-font-family:"Roboto";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"Roboto";--e-global-typography-accent-font-weight:500;}.elementor-kit-7 e-page-transition{background-color:#FFBC7D;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1140px;}.e-con{--container-max-width:1140px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ===== DecodingLeads brand system — overrides Pixor defaults ===== */
@font-face{font-family:"Truetypewriter DL";src:url("/wp-content/uploads/fonts/truetypewriter-dl.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap}

/* --- Type --- */
body,body p,body li,body td,body blockquote,.wpo-section p,.entry-content p{font-family:"Playfair Display",Georgia,serif !important}
body{font-size:17px;line-height:1.7}
h1,h2,h3,h4,h5,h6,h1 a,h2 a,h3 a,h4 a,h5 a,h6 a,.elementor-heading-title{font-family:"Truetypewriter DL","Courier Prime",monospace !important;font-weight:400 !important;letter-spacing:-.5px}
h1{letter-spacing:-1px}
h5,h6{letter-spacing:.5px}
.theme-btn,.theme-btn-s2,.theme-btn-s3,button,input[type="submit"],.elementor-button,.wpo-btn,.btn{font-family:"League Spartan",sans-serif !important;letter-spacing:.8px;font-size:19px !important;font-weight:700 !important}

/* --- Ground: newsprint --- */
body,.wpo-site-wrapper{background-color:#F2EDE4 !important;color:#1C1C1A !important}

/* --- Header --- */
.wpo-site-header .navigation,.wpo-site-header .navigation.navbar,.wpo-site-header .navigation.sticky,.wpo-site-header .navigation.sticky-header,.header-builder .navigation,.wpo-site-header,.header-builder{background-color:#F2EDE4 !important}
.wpo-site-header .navigation,.header-builder .navigation{border-bottom:1px solid #D9D2C5}
.wpo-site-header #navbar>ul>li>a{font-family:"League Spartan",sans-serif !important;font-size:14px !important;letter-spacing:.04em}
/* The static header sat at x=70/w=1165 while the fixed sticky clone sat at
   x=50/w=1325, so the bar visibly jumped on scroll. Lock both to the same
   1320px centred box the page sections use. */
@media (min-width:992px){
  /* Pixor puts 70px of side padding on .wpo-site-header and another 120px of
     padding-right on .navigation.original, which shrank the usable box to
     1165px and pushed the bar off the 1320px section grid. */
  .wpo-site-header{padding-left:0 !important;padding-right:0 !important}
  .wpo-site-header .navigation,
  .wpo-site-header .navigation.original,
  .wpo-site-header .navigation.sticky-header{padding-left:0 !important;padding-right:0 !important}
  .wpo-site-header .navigation>.container-fluid,
  .wpo-site-header .navigation>.container,
  .wpo-site-header .navigation.original>.container-fluid,
  .wpo-site-header .navigation.sticky-header>.container-fluid{
    max-width:1360px !important;
    margin-left:auto !important;
    margin-right:auto !important;
    padding-left:20px !important;
    padding-right:20px !important;
    width:100% !important;
    box-sizing:border-box !important;
  }
}
/* The header template's own stylesheet (post-105.css) is not enqueued on every
   render, so the mobile rails live here in the kit, which always loads. */

/* ---- Mobile + tablet (<992px) ---------------------------------------
   navbar-expand-lg / .d-lg-none put the burger in play below 992px. */
@media (max-width:991.98px){

  /* Gutter. The desktop block above used to run unscoped, so padding was 0 at
     every width and the burger sat flush on the viewport edge. .row carries
     -11.25px margins that the columns' +11.25px padding cancels, so 20px of
     container padding lands content at exactly 20px. */
  .wpo-site-header{padding-left:0 !important;padding-right:0 !important}
  .wpo-site-header .navigation,
  .wpo-site-header .navigation.original{padding:14px 0 !important}
  .wpo-site-header .navigation>.container-fluid,
  .wpo-site-header .navigation>.container{
    max-width:100% !important;width:100% !important;margin:0 !important;
    padding-left:20px !important;padding-right:20px !important;
    box-sizing:border-box !important;
  }

  /* Bootstrap's 25/50/8.3/16.7 split put the badge 10px left of centre and
     left a dead 31px column between it and the CTA. Equal 48px rails instead,
     with the brand column taking the middle. */
  .wpo-site-header .navigation .row{
    display:flex !important;flex-wrap:nowrap !important;align-items:center !important;
    margin-left:0 !important;margin-right:0 !important;
  }
  .wpo-site-header .navigation .row>[class*="col-"]{padding-left:0 !important;padding-right:0 !important}
  .wpo-site-header .navigation .row>.col-3,
  .wpo-site-header .navigation .row>.col-2{flex:0 0 48px !important;max-width:48px !important;width:48px !important}
  .wpo-site-header .navigation .row>.col-6{flex:1 1 auto !important;max-width:none !important;width:auto !important}
  /* .navigation-holder inside this column is position:fixed, so zeroing it is safe */
  .wpo-site-header .navigation .row>.col-1{flex:0 0 0px !important;max-width:0 !important;width:0 !important;padding:0 !important}

  /* The 100x100 badge made the bar 141px tall - a third of a phone screen. */
  .wpo-site-header .navbar-header{
    display:flex !important;align-items:center !important;justify-content:center !important;
    width:100% !important;margin:0 !important;
  }
  .wpo-site-header .navbar-header .navbar-brand{
    display:inline-flex !important;align-items:center !important;
    padding:0 !important;margin:0 !important;height:auto !important;
  }
  .wpo-site-header .navbar-header img{
    width:56px !important;height:56px !important;max-width:56px !important;
    object-fit:contain !important;
  }

  /* Burger was 40x35, CTA 50x52 - two different red blocks on two different
     baselines. Both become the same 48px square. */
  .wpo-site-header .mobail-menu{display:flex !important;align-items:center !important;width:48px !important;height:48px !important}
  .wpo-site-header .mobail-menu button.navbar-toggler{
    width:48px !important;height:48px !important;
    padding:0 !important;margin:0 !important;border:0 !important;border-radius:0 !important;
    display:flex !important;flex-direction:column !important;
    align-items:center !important;justify-content:center !important;gap:5px !important;
    background-color:#E90C0C !important;
  }
  .wpo-site-header .mobail-menu button.navbar-toggler .icon-bar{margin:0 !important;background:#F2EDE4 !important}
  /* .sr-only kept a 5px bottom margin that pushed the bars off centre */
  .wpo-site-header .mobail-menu button.navbar-toggler .sr-only{
    position:absolute !important;width:1px !important;height:1px !important;
    margin:0 !important;overflow:hidden !important;clip:rect(0 0 0 0) !important;
  }

  /* Pixor nudges .header-right with position:relative;left:10px, which pushed
     the CTA 10px past its column and made the right gutter 10px against the
     burger's 20px. */
  .wpo-site-header .header-right{
    width:48px !important;height:48px !important;
    justify-content:flex-end !important;align-items:center !important;
    position:relative !important;left:0 !important;right:auto !important;
  }
  .wpo-site-header .header-right .action-btn{display:none !important}
  .wpo-site-header .header-right .close-form{width:48px !important;height:48px !important}
  html body .wpo-site-header .header-right .theme-btn{
    width:48px !important;height:48px !important;min-width:48px !important;
    padding:0 !important;margin:0 !important;border-radius:0 !important;
    display:flex !important;align-items:center !important;justify-content:center !important;
    background-color:#E90C0C !important;
  }
  .wpo-site-header .header-right .theme-btn i{font-size:18px !important;line-height:1 !important}
}

/* --- Hero --- */
/* Pixor drops the hero headline to 30px/50px below 992px, which reads as body
   copy rather than the page's main heading. Measured against the real face:
   "Navigating images." is 7.998em wide, so the largest size that still sets the
   headline as two clean lines in a (100vw - 22px) container is ~44px at 375px.
   11vw keeps 17px of slack at 320px and caps at 44px from 400px up. */
@media (max-width:575.98px){
  .pixor-hero .title h2,
  .hero-section-s2 .title h2,
  .pixor-hero .title h1,
  .hero-section-s2 .title h1{
    font-size:clamp(30px,11vw,44px) !important;
    line-height:1.14 !important;
  }
}
@media (min-width:576px) and (max-width:991.98px){
  .pixor-hero .title h2,
  .hero-section-s2 .title h2,
  .pixor-hero .title h1,
  .hero-section-s2 .title h1{
    font-size:56px !important;
    line-height:1.12 !important;
  }
}

.pixor-hero .title,.pixor-hero .title *,.hero-section-s2 .title,.hero-section-s2 .title *,.pixor-hero .hero-wrap p,.hero-section-s2 .hero-wrap p{color:#1C1C1A !important}

/* --- Dark bands -> newsprint --- */
.pixor-footer,.footer-section-s2,.pixor-footer .footer-top{background-color:#000000 !important}
.pixor-footer,.pixor-footer p,.pixor-footer li,.pixor-footer span,.pixor-footer h1,.pixor-footer h2,.pixor-footer h3,.pixor-footer h4,.pixor-footer h5,.pixor-footer h6{color:#F2EDE4 !important}
.pixor-footer a{color:#F4262A !important}
.pixor-footer a:hover{color:#FFFFFF !important}
.pixor-footer,.footer-section-s2{border-top:0}

/* --- Palette remap: PRIMARY = RED #E90C0C --- */
.contact-validation-active #c-loader i,.contact-validation-active #loader i,.wpo-section-title span,.topbar .contact-info ul li a:hover,.wpo-site-header #navbar>ul li a:hover,.wpo-site-header #navbar>ul li a:focus,.wpo-site-header #navbar ul a:hover,.wpo-site-header #navbar ul li.current a,.hero-section .p-style i,.hero-section-s2 .p-style i,.about-wraper h2 .color,.about-wraper a,.about-wraper .funfact .item p span,.about-wraper .funfact .item p i,.service-section .title h2,.service-section-s2 .title h2,.service-card .text h2 a:hover,.service-card .icon,.award-section .title h2,.award-section-s2 .title h2,.award-section .content ul li span,.award-section-s2 .content ul li span,.project-title a,.testimonial-content h3 span,.marquee-section-s2 h2 span,.marquee-section-s3 h2 span,.marquee-section-s4 h2 span,.text-animation h2 span,.marquee-section-s2 h2 i,.marquee-section-s3 h2 i,.marquee-section-s4 h2 i,.text-animation h2 i,.team-section .title h2,.team-section .title-bottom a,.team-card .image ul li a:hover,.team-card .text span,.blog-section .title h2,.blog-section .title-bottom a,.award-section-s2 .title-bottom a,.section-title-s2 .title p,.section-title-s2 .title-bottom a,.team-section-s2 .title h2,.team-section-s2 .title-bottom a,.blog-section-s2 .title h2,.blog-section-s2 .title-bottom a,.partners-section-s2 .title h2 span,.project-top-info .section-title h2,.project-top-info .project-info ul li span a,.project-wrap .item ul li::before,.team-info-text span,.office-info .office-info-item.active .office-info-icon .icon i:before,.wpo-blog-pg-section .entry-meta ul li a:hover,.wpo-blog-pg-section .post h3 a:hover,.wpo-blog-pg-section .post a.read-more,.contact-page-section .wpo-contact-form .title span,.wpo-site-header-s3 .location>span,.marquee-section-s4 h2 .color,.award-section-s3 h2 .color{color:#E90C0C !important}
.wpo-page-title .wpo-breadcumb-wrap ol li a:hover,.blog-sidebar .recent-post-widget .post h4 a:hover,.wpo-site-header #navbar>ul li a:hover>i,.footer-section .footer-topbar h2 span,.footer-section .item ul li a:hover,.footer-section .widget-contact h4,.footer-section .widget-social li a:hover,.footer-section-s2 .widget-contact h4,.footer-section-s2 .f-menu ul a:hover,.footer-section-s2 .footer-lower .copyright span,.footer-section-s2 .widget-social li a:hover,.service-card-s3 h2 a:hover,.office-info .office-info-item .office-info-icon .icon i:before,.wpo-blog-single-section .entry-meta ul li a:hover,.wpo-blog-single-section .post blockquote:before{color:#9B1F28 !important}
.back-to-top:hover,.wpo-section-title h2:before,.social-links li a:hover,.pagination-wrapper .pg-pagination .active a,.pagination-wrapper .pg-pagination li a:hover,.wpo-site-header .mobail-menu button,.testimonial-section .slick-arrow:hover,.blog-section .owl-dot.active,.project-section-s2 .project-card .slingle-page-link,.project-section-s2 .project-card .text span::before,.team-info-text ul li a:hover,.education-area ul li:before,.hero-section-s2 .bottom-image a,.team-section-s2 .team-card .image ul li a,.blog-section-s2 .blog-card .content a i,.blog-section-s2 .blog-btn .theme-btn{background-color:#E90C0C !important}
.preloader,.blog-sidebar .search-widget input,.blog-sidebar .about-widget,.blog-sidebar .category-widget ul a,.blog-sidebar .tag-widget ul li a,.wpo-site-header #navbar,.hero-section,.hero-section-s2,.project-section-s2,.contact-page-section .wpo-contact-form{background-color:#F2EDE4 !important}
.blog-sidebar .tag-widget ul li a:hover,.wpo-site-header .header-right .close-form .theme-btn:hover,.pricing-page .pricing-card.active .theme-btn,.work-section .item:hover span,.work-section .item.active span,.team-info-text .wpo-skill-progress .progress-bar{background-color:#9B1F28 !important}
.footer-section-s2 .title p,.project-section-s2 .project-card .text span,.team-section-s2 .team-card .text span,.office-info .office-info-item .office-info-text p,.contact-left p,.contact-right .title p{color:#5C574E !important}
.back-to-top,.theme-btn-s2,.header-search-area input:focus{border-color:#E90C0C !important}
.fanfuct-section-s2 .title .shape svg path{fill:#E90C0C !important}

/* --- Corrections --- */
.theme-btn,.view-cart-btn{background-color:#E90C0C !important;color:#F2EDE4 !important;border-color:#E90C0C !important}
.theme-btn:hover,.view-cart-btn:hover{background-color:#9B1F28 !important;border-color:#9B1F28 !important}
.wpo-site-header #navbar>ul>li>a,.wpo-site-header #navbar>ul>li>a>i{color:#1C1C1A !important}
.contact-section .contact-wrap,.contact-section-s2 .contact-wrap{background-color:#F2EDE4 !important;border:1px solid #D9D2C5}
.hero-social .social-link,.pixor-hero .hero-social a{color:#1C1C1A !important}
.hero-social .social-link:hover,.pixor-hero .hero-social a:hover{color:#E90C0C !important}
.blog-card .content .meta,.blog-card .meta{color:#5C574E !important}
.office-info .office-info-text h2,.office-info .office-info-text h3,.office-info h2,.office-info h3{color:#1C1C1A !important}
.elementor-widget-text-editor,.elementor-widget-text-editor p{color:#1C1C1A !important}
.blog-card .content a,.blog-card .content a span,.blog-card .content h3 a{color:#D40A0A !important}

/* --- Forms (global: homepage, Services and Contact all use this widget) --- */
.wpo-contact-form-area{background-color:#F2EDE4 !important;box-shadow:none !important}
.wpo-contact-form-area .wpcf7,.wpo-contact-form-area>.container,.wpo-contact-form-area form{max-width:1320px;margin-left:auto;margin-right:auto;width:100%}
html body .wpo-contact-form-area input[type="text"],html body .wpo-contact-form-area input[type="email"],html body .wpo-contact-form-area input[type="tel"],html body .wpo-contact-form-area textarea,html body .wpo-contact-form-area select,html body .wpo-contact-pg-section form input,html body .wpo-contact-pg-section form textarea,html body .wpo-contact-pg-section form select{background-color:#EAE4D8 !important;border:1px solid #D6CDBC !important;border-radius:0 !important;color:#1C1C1A !important;padding:14px 16px !important}
.wpo-contact-form-area ::placeholder,.wpo-contact-pg-section ::placeholder{color:#5C574E !important;opacity:1}
html body .wpo-contact-form-area input:focus,html body .wpo-contact-form-area textarea:focus,html body .wpo-contact-form-area select:focus,html body .wpo-contact-pg-section form input:focus,html body .wpo-contact-pg-section form textarea:focus{border-color:#E90C0C !important;outline:2px solid rgba(233,12,12,.3) !important;outline-offset:1px !important;box-shadow:none !important}
html body .wpo-contact-form-area .wpcf7 form.wpcf7-form input.wpcf7-submit,html body .wpo-contact-form-area .wpcf7 form.wpcf7-form input[type="submit"],html body .wpo-contact-pg-section form .submit-area .theme-btn{background-color:#E90C0C !important;border-color:#E90C0C !important;color:#F2EDE4 !important}
html body .wpo-contact-form-area .wpcf7 form.wpcf7-form input.wpcf7-submit:hover,html body .wpo-contact-form-area .wpcf7 form.wpcf7-form input[type="submit"]:hover{background-color:#9B1F28 !important;border-color:#9B1F28 !important}

/* --- Funfact counters --- */
/* Pixor gives each counter col-12 below 768px, so all four stack full-width and
   the block runs 1040px tall on a phone. Two-up instead: the fixed 230px item
   height and 22.25px side margins both have to go for a 187px column. */
@media (max-width:767.98px){
  .elementor-widget-wpo-pixor_funfact .row{margin-left:-6px !important;margin-right:-6px !important}
  .elementor-widget-wpo-pixor_funfact .row>.col{
    flex:0 0 50% !important;max-width:50% !important;width:50% !important;
    padding-left:6px !important;padding-right:6px !important;
  }
  .elementor-widget-wpo-pixor_funfact .row>.col .item{
    max-width:100% !important;width:100% !important;
    height:auto !important;min-height:0 !important;
    margin:0 0 14px !important;padding:22px 6px !important;
  }
  .elementor-widget-wpo-pixor_funfact .item h2,
  .elementor-widget-wpo-pixor_funfact .item h2 .odometer,
  .elementor-widget-wpo-pixor_funfact .item h2 .odometer *{
    font-size:40px !important;line-height:1.1 !important;
  }
  .elementor-widget-wpo-pixor_funfact .item h2{margin:0 0 10px !important}
  .elementor-widget-wpo-pixor_funfact .item h3{
    font-size:13px !important;line-height:1.35 !important;
    text-align:center !important;margin:0 !important;letter-spacing:.04em !important;
  }
}

/* Pixor fills one counter with #F4F4F4 - a cool grey card that reads as a
   smudge on the #F2EDE4 newsprint ground and makes that one counter look
   selected. All four sit flat on the paper instead. */
.elementor-widget-wpo-pixor_funfact .item,
.elementor-widget-wpo-pixor_funfact .item:hover,
.elementor-widget-wpo-pixor_funfact .item.active,
.fanfuct-section-s2 .item,
.fanfuct-section-s2 .item:hover,
.fanfuct-section-s2 .item.active{background-color:transparent !important;box-shadow:none !important}

/* --- Ink on red --- */
/* The hero's Calendly circle inherited #1C1C1A, so the arrow sat black on red
   (3.68:1) while the header CTA next to it used #F2EDE4. Match them.
   .theme-btn.button--stroke was worse: the palette remap gave it a red fill
   while its label kept the red stroke colour, so "CONTACT US" was red on red
   at 1.0:1 - completely invisible. #F2EDE4 on #E90C0C measures 3.98:1, which
   clears WCAG 1.4.3 for large text (>=24px) and 1.4.11 for UI components. */
.pixor-hero .hire-btn,
.hero-section-s2 .hire-btn,
.pixor-hero .hire-btn i,
.hero-section-s2 .hire-btn i,
a.theme-btn.button--stroke,
a.theme-btn.button--stroke:hover,
a.theme-btn.button--stroke span{color:#F2EDE4 !important}
.pixor-hero .hire-btn i,
.hero-section-s2 .hire-btn i{fill:#F2EDE4 !important}

/* --- Service hover images --- */
/* Pixor's service card fades in .service-card .image on .active, but the div is
   empty and 0x0 because the template pulls from a custom meta field that only
   its own demo posts carry. Painting the image in CSS gets the hover working
   without that field. Sizing mirrors the theme's own .service-section-s2 rule
   (max 350x446, 9px radius). */
.elementor-widget-wpo-pixor_service .service-card .image{
  width:350px;height:446px;
  background-size:cover;background-position:center;background-repeat:no-repeat;
  border-radius:9px;pointer-events:none;
}
.elementor-widget-wpo-pixor_service .row>[class*="col-"]:nth-child(1) .service-card .image{background-image:url("https://decodingleads.com/wp-content/uploads/2026/08/dl-service-brand-strategy-2.webp")}
.elementor-widget-wpo-pixor_service .row>[class*="col-"]:nth-child(2) .service-card .image{background-image:url("https://decodingleads.com/wp-content/uploads/2026/08/dl-service-brand-identity-2.webp")}
.elementor-widget-wpo-pixor_service .row>[class*="col-"]:nth-child(3) .service-card .image{background-image:url("https://decodingleads.com/wp-content/uploads/2026/08/dl-service-digital-marketing-2.webp")}
.elementor-widget-wpo-pixor_service .row>[class*="col-"]:nth-child(4) .service-card .image{background-image:url("https://decodingleads.com/wp-content/uploads/2026/08/dl-service-content-2.webp")}

@media (max-width:991.98px){
  /* No hover on touch, and a 350px panel would overhang the row. */
  .elementor-widget-wpo-pixor_service .service-card .image{display:none !important}
}


/* ── Services section: back to the theme's dark ground ──────────────────────
   The palette pass had bundled this section with the footer and forced it
   cream, which also wasted the theme's own light dividers
   (rgba(217,217,217,.13)) and .active hover wash. #080905 is the value Pixor
   ships for .service-section-s2.
   Contrast on #080905: cream 17.1:1. Brand #E90C0C is 4.3:1 — fine for the
   28px rows but short of 4.5:1 for the 18px eyebrow, so that uses #F4262A
   (4.9:1). Rows stay cream on hover: over the .active wash (#393A37) red
   falls to 2.5:1, below even the 3:1 large-text floor. */
.pixor-service.service-section-s2,
.service-section-s2{background-color:#080905 !important}

.service-section-s2,
.service-section-s2 p,
.service-section-s2 span,
.service-section-s2 h1,
.service-section-s2 h2,
.service-section-s2 h3,
.service-section-s2 h4,
.service-section-s2 .service-card .text h2 a,
.service-section-s2 .service-card .icon,
.service-section-s2 .service-card .icon i{color:#F2EDE4 !important}

.service-section-s2 .title>h2{color:#F4262A !important}

/* The hover affordance is the background wash and the revealed image, so the
   row keeps its cream ink rather than dropping to an unreadable red. */
.service-section-s2 .service-card:hover .text h2 a,
.service-section-s2 .service-card.active .text h2 a,
.service-section-s2 .service-card:hover .icon i,
.service-section-s2 .service-card.active .icon i,
.service-section-s2 a:hover{color:#F2EDE4 !important}

/* Those counters keep the theme's fixed .item height (308px desktop, 270px and
   230px at the lower breakpoints), which existed to make the filled cards a
   uniform size. With the card background removed the height is just dead space
   below each label - the number and caption sit centred in a box that is no
   longer drawn. Let the height follow the content; the 2-up mobile block above
   already does this under 768px. */
@media (min-width:768px){
  .elementor-widget-wpo-pixor_funfact .row>.col .item,
  .fanfuct-section-s2 .item{
    height:auto !important;
    min-height:0 !important;
    padding:0 6px !important;
  }
}

/* This section ships with padding-top:0 against a 110px bottom, so it butts
   straight into whatever sits above it - now the dark services block, where
   the seam is obvious. Give it the theme's own section rhythm on top, the
   same 120/90/80 scale .section-padding uses. */
.fanfuct-section-s2{padding-top:120px !important}
@media (max-width:991.98px){.fanfuct-section-s2{padding-top:90px !important}}
@media (max-width:767.98px){.fanfuct-section-s2{padding-top:80px !important}}

/* Pixor adds .active to a service row on mouseenter but never removes it on
   mouseleave, so the last row hovered keeps its wash and its image after the
   pointer has moved away. Drive the visual state from the pointer itself, and
   let an .active row that is no longer hovered fall back to rest. Keyboard
   users get the same affordance via :focus-within - the row holds two links.
   Card and image already carry the theme's 0.8s ease-in-out, so both ends of
   the transition stay smooth. */
.service-section-s2 .service-card:hover,
.service-section-s2 .service-card:focus-within{
  background-color:rgba(255,255,255,.2) !important;
}
.service-section-s2 .service-card:hover .image,
.service-section-s2 .service-card:focus-within .image{
  opacity:1 !important;visibility:visible !important;
}
.service-section-s2 .service-card.active:not(:hover):not(:focus-within){
  background-color:transparent !important;
}
.service-section-s2 .service-card.active:not(:hover):not(:focus-within) .image{
  opacity:0 !important;visibility:hidden !important;
}


/* -- Footer back to the theme's black -------------------------------------
   The palette pass had flipped this band to newsprint cream; #000000 is what
   Pixor ships for .footer-section-s2. The colours below were folded into
   shared groups with sections that are still on light grounds, so each is
   re-stated here at matching specificity rather than edited in place.
   On black: #F2EDE4 body 18.0:1, #A9A296 caption 8.3:1, #F4262A 5.16:1.
   The old values measured 1.23:1, 2.93:1 and 2.62:1 - invisible. #E90C0C
   would technically pass at 4.52:1 but with no margin, so the footer uses the
   same lifted red as the services eyebrow. */
.footer-section-s2 .title p{color:#A9A296 !important}
.footer-section-s2 .widget-contact h4,
.footer-section-s2 .footer-lower .copyright span{color:#F4262A !important}
.footer-section-s2 .f-menu ul a:hover,
.footer-section-s2 .widget-social li a:hover{color:#FFFFFF !important}

/* The social ring is #292929 on black - 1.44:1, effectively invisible. WCAG
   1.4.11 asks 3:1 for a UI component boundary; #5E5E5E measures 3.24:1. */
.footer-section-s2 .widget-social li a{border-color:#5E5E5E !important}

/* Font Awesome is never enqueued on this site. These three social links are
   the only `fab fa-*` icons anywhere in it, so every one resolved to no glyph
   and the links rendered as empty rings - broken on the cream footer too, just
   less obvious. Themify is loaded and carries all three, so map them across
   rather than pulling in a whole icon library for three glyphs. */
.pixor-footer .widget-social li a i[class*="fa-"]{
  font-family:'themify' !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-variant:normal !important;
  text-transform:none !important;
  line-height:1 !important;
  speak:never;
}
.pixor-footer .widget-social li a i.fa-linkedin-in::before,
.pixor-footer .widget-social li a i.fa-linkedin::before{content:"\e735" !important}
.pixor-footer .widget-social li a i.fa-instagram::before{content:"\e73d" !important}
.pixor-footer .widget-social li a i.fa-facebook-f::before,
.pixor-footer .widget-social li a i.fa-facebook::before{content:"\e741" !important}

/* Social marks read better in white than in the accent red. Red moves to the
   hover state so there is still a state change rather than just losing one.
   White 21:1, red 5.16:1 - both clear on black. */
.pixor-footer .widget-social li a,
.pixor-footer .widget-social li a i{color:#FFFFFF !important}
.pixor-footer .widget-social li a:hover,
.pixor-footer .widget-social li a:hover i{color:#F4262A !important}
.footer-section-s2 .widget-social li a:hover{border-color:#F4262A !important}

/* --- Inner-page title banner ------------------------------------------- */
/* .wpo-site-header is position:absolute over this section (102px desktop /
   85px mobile, opaque cream), so the theme's justify-content:center centres
   the title inside the FULL height while the top of that height sits behind
   the header. Result: title rides high with dead space below, and at <=991px
   the header actually clips into the heading. Pad the header's height back in
   so the free space is measured from the visible top edge. */
.wpo-page-title{
  min-height:400px !important;
  padding-top:102px !important;
  padding-bottom:0 !important;
}
@media (max-width:991.98px){
  .wpo-page-title{min-height:330px !important;padding-top:85px !important}
}
@media (max-width:767.98px){
  .wpo-page-title{min-height:300px !important;padding-top:85px !important}
}
/* Dot matrix reads as "decoding"; red glow rises from the bottom-right, away
   from the centred text; cream wash softens the seam with the header above.
   Base #080905 is the same dark the services band uses, not flat black. */
.wpo-page-title{
  background-color:#080905 !important;
  background-image:
    radial-gradient(circle at 50% 50%, rgba(242,237,228,.11) 1px, rgba(242,237,228,0) 1.6px),
    radial-gradient(ellipse 92% 72% at 76% 130%, rgba(244,38,42,.40), rgba(244,38,42,0) 66%),
    radial-gradient(ellipse 58% 85% at 8% -22%, rgba(242,237,228,.10), rgba(242,237,228,0) 62%) !important;
  background-size:26px 26px,100% 100%,100% 100% !important;
  background-repeat:repeat,no-repeat,no-repeat !important;
  background-position:center,center,center !important;
  background-attachment:scroll !important;
}
/* Theme ships word-break:break-all here, which snaps titles mid-word. */
.wpo-page-title .wpo-breadcumb-wrap h2{
  word-break:normal !important;
  overflow-wrap:break-word !important;
  text-wrap:balance;
}

/* --- CTA headline scale ------------------------------------------------- */
/* Theme ships 225px on the bare word and 120px on the spans with a fixed
   208px line-height, so the headline block alone ran 832px tall. The widget's
   own font-size controls (154/38) never reach it - theme CSS outranks them -
   so set it here. Ratio held at ~1.85 so the big/small contrast survives. */
.elementor-widget-wpo-pixor_cta .project-title .title h2{
  font-size:clamp(56px,9.6vw,152px) !important;
  line-height:1.08 !important;
}
.elementor-widget-wpo-pixor_cta .project-title .title h2 span{
  font-size:clamp(32px,5.2vw,82px) !important;
  line-height:1.12 !important;
}

/* The theme tints this CTA with a blurred orange ellipse (.bg-shape svg,
   1746x1177) that is far taller than the 417px section, while .project-title
   carries overflow:hidden - so the soft glow got sliced into a hard-edged
   rectangle with visible seams. An ellipse also falls off at the sides, which
   reads as a floating oval rather than a band. Replaced with a wash that is
   uniform left-to-right and fades only top and bottom, so the section melts
   into the newsprint vertically. Same hue as the theme blob (#FD5B38).
   Scoped to the CTA so other .project-title uses keep their clip; the body
   already clips sideways, so nothing here adds horizontal scroll. */
.elementor-widget-wpo-pixor_cta .project-title{
  position:relative !important;
  overflow:visible !important;
}
.elementor-widget-wpo-pixor_cta .project-title .bg-shape{display:none !important}
.elementor-widget-wpo-pixor_cta .project-title::before{
  content:"";
  position:absolute;left:0;right:0;top:-150px;bottom:-150px;
  background:linear-gradient(to bottom,
    rgba(253,91,56,0) 0%,
    rgba(253,91,56,.10) 26%,
    rgba(253,91,56,.17) 50%,
    rgba(253,91,56,.10) 74%,
    rgba(253,91,56,0) 100%);
  z-index:-1;pointer-events:none;
}
/* Shorter section on phones, so the bleed shortens with it. */
@media (max-width:767.98px){
  .elementor-widget-wpo-pixor_cta .project-title::before{top:-80px;bottom:-80px}
}

/* --- Project marquee, second row --------------------------------------- */
/* The style-three widget splits projects 4 / remainder across two rows. With
   6 projects the second row gets 2 slides (1166px). Once the rail is wider
   than that, Swiper's loop has nowhere to advance, sets isEnd and parks -
   frozen from ~1300px up, fine below. The row is direction:rtl by design, so
   it travels the opposite way to row one. The wrapper holds the 2 slides
   three times over, so shifting exactly one 2-slide unit (573+10)*2 = 1166px
   repeats seamlessly and always keeps the rail covered. */
@media (min-width:1200px){
  .swiper.s2.project-slider-active .swiper-wrapper{
    animation:dl-project-marquee-rtl 6s linear infinite;
    will-change:transform;
  }
  .swiper.s2.project-slider-active:hover .swiper-wrapper{animation-play-state:paused}
}
@keyframes dl-project-marquee-rtl{
  from{transform:translate3d(0,0,0)}
  to{transform:translate3d(1166px,0,0)}
}
@media (prefers-reduced-motion:reduce){
  .swiper.s2.project-slider-active .swiper-wrapper{animation:none !important}
}

/* --- Funfact band + marquee: off-palette Pixor demo assets -------------- */
/* funfact-bg-shape.svg is drawn in #0049F3 at 0.6 opacity, which read as a
   sage-green grid against the cream. Re-tinted to warm sand rather than
   removed, since the shape still gives the band some depth. */
.fanfuct-section img[src*="funfact-bg-shape"]{
  filter:grayscale(1) sepia(.62) saturate(1.9) hue-rotate(-14deg) opacity(.62) !important;
}
/* Marquee rail was #101112, a near-black that is not our dark. */
/* Scope matters here: the theme's own dark rail is .marquee-section
   .marquee_container (#101112). The -s4 marquees do NOT carry the
   .marquee-section class - they are built for the light page ground with
   #121725 text and black-stroked outline text. An unscoped rule painted a
   black rail behind that dark text and made both rows unreadable. */
.marquee-section .marquee_container{background-color:#080905 !important}
.marquee-section-s4.style2{background-color:#080905 !important}
/* Odometer ships its own font-family on .odometer-auto-theme, which outranks
   the h2 and rendered every counter digit on the site in Helvetica instead of
   the brand face. The widget markup is nested spans, hence the descendant. */
.odometer.odometer-auto-theme,.odometer.odometer-auto-theme *,
.odometer.odometer-theme-default,.odometer.odometer-theme-default *{
  font-family:"Truetypewriter DL","Courier Prime",monospace !important;
}

/* --- Project marquee slide height -------------------------------------- */
/* Slides took their height from the 4:5 source art: 573x716, most of a laptop
   viewport for what is a passing showcase. Width is deliberately left at 573
   because the row-two marquee above steps by exactly (573+10)*2; changing it
   would desync that loop. Crop is biased upward so board titles survive. */
@media (min-width:576px){
  .project-slider-active .swiper-slide,
  .project-slider-active .swiper-slide > a,
  .project-slider-active .swiper-slide .project-box,
  .project-slider-active .swiper-slide .project-box img{height:540px !important}
  .project-slider-active .swiper-slide .project-box img{
    object-fit:cover !important;
    object-position:50% 28% !important;
  }
}

/* Theme's muted second line in the about headline shipped #BCC0CB, a cool
   blue-grey missed in the palette pass: 1.56:1 on the cream ground, i.e.
   effectively invisible. Warm stone keeps the intended muted step down from
   the main line while measuring 3.84:1, clear of the 3:1 large-text floor. */
.about-wraper h2 .line,.about-wraper h3 .line{color:#7E766A !important}

/* --- Services page: capability pillars ---------------------------------- */
/* Custom HTML block that reuses the theme's own service-card-s3 markup, so
   the three pillars match the page without introducing a second visual
   language. The theme's card carries an empty .icon div that opens a gap
   under the number; this markup omits it and pushes the heading down with
   margin-top:auto instead, which keeps the look and lets cards equalise. */
.dl-pillars .dl-pillars-intro{
  max-width:66ch;
  margin:0 0 52px;
  font-size:18px;
  line-height:1.7;
  color:#5A5348;          /* theme default here is a cool blue-grey, off-palette. 6.51:1 */
}
.dl-pillars .row{align-items:stretch}
.dl-pillars .row>[class*="col-"]{display:flex}
.dl-pillars .service-card-s3{width:100%;display:flex;flex-direction:column}
/* Theme colours this heading via the <a> its own markup nests inside; ours is
   a plain h2, so it fell back to the dark body heading colour and sat at
   1.01:1 on the card. Cream restores it to 15.2:1. */
.dl-pillars .service-card-s3 h2{margin-top:auto;color:#F2EDE4}
@media (max-width:991.98px){
  .dl-pillars .row>[class*="col-"]{margin-bottom:24px}
}

/* --- Contact band, style-two (services page) ---------------------------- */
/* Theme's own two-column layout is kept; only the palette changes. It shipped
   a lime #BAE900 submit, a lime glow shape and a stock photo of a woman with
   a laptop - the photo is now the brand collage and the glow is gone, both
   swapped at the widget. Fields move from cold grey to warm paper. */
.contact-section-s2 .contact-wrap{background-color:transparent !important;position:relative !important;border:0 !important}
.contact-section-s2 .contact-wrap h2,
.contact-section-s2 .contact-wrap h3,
.contact-section-s2 .contact-wrap label{color:#1C1C1A !important}
.contact-section-s2 .contact-wrap p{color:#5A5348 !important}
html body .contact-section-s2 .contact-wrap input[type="text"],
html body .contact-section-s2 .contact-wrap input[type="email"],
html body .contact-section-s2 .contact-wrap input[type="tel"],
html body .contact-section-s2 .contact-wrap textarea,
html body .contact-section-s2 .contact-wrap select{
  background-color:#EAE4D8 !important;
  color:#1C1C1A !important;
  border:1px solid #D6CDBC !important;
  border-radius:0 !important;
  box-shadow:none !important;
}
.contact-section-s2 .contact-wrap ::placeholder{color:#6E665A !important}
.contact-section-s2 .contact-wrap select option{color:#1C1C1A;background:#FFFFFF}
/* Submit was lime #BAE900 on near-black. Brand red on white is 4.64:1. */
html body .contact-section-s2 .contact-wrap input.wpcf7-submit{
  background-color:#E90C0C !important;
  border-color:#E90C0C !important;
  color:#FFFFFF !important;
  border-radius:0 !important;
}
html body .contact-section-s2 .contact-wrap input.wpcf7-submit:hover{
  background-color:#1C1C1A !important;
  border-color:#1C1C1A !important;
  color:#FFFFFF !important;
}

/* --- Brand texture on the pillar cards ---------------------------------- */
/* The artwork is light ink-on-newsprint and these cards are near-black, so it
   rides on a pseudo-element at low opacity rather than as the card's own
   background-image: the text layer stays untouched and the fade is tunable.
   Each card takes a different third of the skyline (300% wide, positioned
   0/50/100%) so the three read as one panorama instead of a repeat. */
.dl-pillars .service-card-s3{position:relative;overflow:hidden;isolation:isolate}
.dl-pillars .service-card-s3::after{
  content:"";
  position:absolute;
  inset:0;
  background-image:url("https://decodingleads.com/wp-content/uploads/2026/08/dl-brand-texture.webp");
  background-size:300% auto;
  background-repeat:no-repeat;
  opacity:.07;
  pointer-events:none;
  z-index:0;
}
.dl-pillars .row>[class*="col-"]:nth-child(1) .service-card-s3::after{background-position:0% 62%}
.dl-pillars .row>[class*="col-"]:nth-child(2) .service-card-s3::after{background-position:50% 62%}
.dl-pillars .row>[class*="col-"]:nth-child(3) .service-card-s3::after{background-position:100% 62%}
/* Keep the copy above the texture. */
.dl-pillars .service-card-s3>*{position:relative;z-index:1}

/* The theme sizes this column from the image's natural dimensions and bleeds
   it off the bottom, which suits the cut-out PNG it shipped with. The brand
   collage is a full rectangle, so it is contained and centred in the right
   half instead. .shape is an empty 1067x1136 box once its image is cleared. */
.contact-section-s2 .contact-image{
  position:absolute !important;
  left:auto !important;
  right:0 !important;
  top:50% !important;
  bottom:auto !important;
  transform:translateY(-50%) !important;
  width:min(40%,440px) !important;
  height:auto !important;
}
.contact-section-s2 .contact-image .shape{display:none !important}
.contact-section-s2 .contact-image .image{width:100% !important;height:auto !important}
.contact-section-s2 .contact-image .image img{
  width:100% !important;
  height:520px !important;
  object-fit:cover !important;
  object-position:50% 32% !important;
  display:block !important;
}
/* The theme hides this column below 992px (display:none of its own), so the
   phone layout is form-only. Rules that tried to reposition it here were dead
   code and have been removed; if the collage should show on phones it needs
   display:block adding back, not just geometry. */

/* --- Contact info icons ------------------------------------------------- */
/* Font Awesome is never enqueued on this site, so every fa-* glyph resolves
   to a 0x0 box with ::before content:none and the font falling back to
   Playfair - the same fault the footer socials had. Themify is loaded and
   already draws the location pin next to these, so map onto it.
   Codepoints read from the live themify stylesheet, not guessed. */
i.fa-envelope,i.fa-phone-alt,i.fa-phone,i.fa-mobile-alt{
  font-family:'themify' !important;
  font-style:normal !important;
  font-weight:400 !important;
  font-variant:normal !important;
  text-transform:none !important;
  line-height:1 !important;
  speak:never;
}
i.fa-envelope::before{content:"\e75a" !important}          /* ti-email */
i.fa-phone-alt::before,
i.fa-phone::before,
i.fa-mobile-alt::before{content:"\e621" !important}        /* ti-mobile */

/* --- Contact page: info cards + form ------------------------------------ */
/* Highlighted card used Pixor's orange rgb(255,114,54) on a ::before behind
   the content. Brand red instead - but the theme leaves the card's text dark,
   and #1C1C1A on #E90C0C is only 3.68:1, which fails for the body line. The
   highlighted state therefore flips its text to white (4.64:1). */
.office-info .office-info-item::before{background:#E90C0C !important}
.office-info .office-info-item.active h2,
.office-info .office-info-item.active h3,
.office-info .office-info-item.active h4,
.office-info .office-info-item.active p,
.office-info .office-info-item.active p a,
.office-info .office-info-item:hover h2,
.office-info .office-info-item:hover h3,
.office-info .office-info-item:hover h4,
.office-info .office-info-item:hover p,
.office-info .office-info-item:hover p a{color:#FFFFFF !important}

/* Field colours live in the .wpo-contact-form-area rule further up - a single
   source of truth. A second block here lost anyway: "…pg-section form textarea"
   is (0,1,4) and outranked "…pg-section textarea" at (0,1,3), both !important. */
.wpo-contact-pg-section ::placeholder{color:#6E665A !important}
.wpo-contact-pg-section select option{color:#1C1C1A;background:#FFFFFF}

/* --- Client logo strip --------------------------------------------------- */
/* Source logos were 500x500 with white baked in; backgrounds were flood-filled
   to transparency so they sit on the newsprint ground rather than as white
   tiles. They arrive normalised to 200px tall, which is far too large for a
   strip and lets neighbours collide, so cap on BOTH axes - height alone makes
   circular marks read much heavier than wordmarks. */
.partners-section .partners-slider .slick-slide{
  display:flex !important;
  align-items:center !important;
  justify-content:center !important;
  padding:0 26px !important;
  height:96px !important;
}
.partners-section .partners-slider .slick-slide img{
  max-height:58px !important;
  max-width:150px !important;
  width:auto !important;
  height:auto !important;
  margin:0 auto !important;
  object-fit:contain !important;
  opacity:.85;
  transition:opacity .3s ease;
}
.partners-section .partners-slider .slick-slide img:hover{opacity:1}
.partners-section .partners-slider .slick-track{display:flex !important;align-items:center !important}
@media (max-width:575.98px){
  .partners-section .partners-slider .slick-slide{padding:0 16px !important}
  .partners-section .partners-slider .slick-slide img{max-height:46px !important;max-width:118px !important}
}

/* --- About section: rotating badges removed ----------------------------- */
/* Clearing rotate_content emptied the SVG text but left the two .rotate-anm
   containers (187px and 143px) still holding layout space with the asterisk
   inside. Scoped to about-section-s2 so the hero's own badge is untouched. */
/* .circle-content wraps BOTH the rotating badge (.rotate-anm) and the red
   asterisk (.arrows > svg, fill #EE3736) as siblings, which is why hiding
   .rotate-anm alone left the asterisk behind. Hide the wrapper instead. */
.about-section-s2 .circle-content{display:none !important}
/* That block carried the gap above the heading: margin 80px/120px height/30px
   = 230px on desktop (200px below 1200px). Hiding it collapsed the heading
   onto the images, so the space is restored as padding - tighter than 230px
   because there is no longer a badge occupying it. */
.about-section-s2 .about-wraper{padding-top:120px}
@media (max-width:1199.98px){.about-section-s2 .about-wraper{padding-top:100px}}
@media (max-width:991.98px){.about-section-s2 .about-wraper{padding-top:80px}}
@media (max-width:767.98px){.about-section-s2 .about-wraper{padding-top:60px}}


/* --- Hero paragraph: under the heading, not floated right --------------- */
/* Theme parks it bottom-right of the hero box:
   position:absolute; right:0; margin-right:-120px; bottom:45px; max-width:344px.
   Put it back in normal flow so it sits under the heading and shares its left
   edge. Also kills text-transform:lowercase, which the theme sets on this
   paragraph and which would render the brand name as "decodingleads". */
.hero-section-s2 .p-style-s2{
  position:static !important;
  right:auto !important;
  bottom:auto !important;
  margin-right:0 !important;
  margin-top:26px !important;
  max-width:640px !important;
}
.hero-section-s2 .p-style-s2 p{
  text-transform:none !important;
}
@media (max-width:767.98px){
  .hero-section-s2 .p-style-s2{margin-top:18px !important;max-width:100% !important}
}

/* -- Homepage services: a supporting line under each service --------------
   The wpo-pixor_service style-two template renders the title and nothing
   else - there is no description field on the widget and no excerpt in the
   markup - so the copy ships as real markup in an HTML widget (e870726) and
   a script moves each <p> into its own .service-card .text, right after that
   card's h2. Cards are matched on their /service/<slug>/ href rather than on
   position, so reordering or relimiting the widget cannot mismatch the copy.
   The source wrapper stays display:none so nothing flashes at the foot of
   the section; moving a <p> out of it is what reveals it.
   Colour: the section-wide rule paints every p cream #F2EDE4 !important,
   far too loud under a 28px title. This .elementor-kit-7 is (0,4,1) and beats that
   (0,1,1) rule. #B8B0A2 measures 9.3:1 on the #080905 ground and still
   5.3:1 over the rgba(255,255,255,.2) hover wash, so it stays readable in
   both states.
   .service-section-s2 .service-card is align-items:center, so the arrow
   stays centred against the now-taller text block. */
.dl-service-line-src{display:none}

.service-section-s2 .service-card .text p.dl-service-line{
  display:block;
  max-width:560px;
  margin:10px 0 0;
  font-size:16px;
  line-height:1.6;
  font-weight:400;
  color:#B8B0A2 !important;
  text-transform:none;
}

@media (max-width:991.98px){
  .service-section-s2 .service-card .text p.dl-service-line{font-size:15px;max-width:420px}
}

@media (max-width:767.98px){
  .service-section-s2 .service-card .text p.dl-service-line{
    font-size:14px;line-height:1.55;margin-top:8px;max-width:100%;
  }
}

/* -- Funfact band: counters replaced with copy ----------------------------
   The counter repeater on widget bf5eacb is now empty, so the numbers and
   the Odometer instances are gone at the source rather than hidden. The
   replacement paragraph ships as real markup in an HTML widget (6bdf194)
   and is moved in as a sibling after .title: it cannot live inside .title,
   because that div is the splittext-line GSAP target and its own <p> is the
   50px headline.
   The negative margin-top pulls against .fanfuct-section-s2 .title's
   margin-bottom:50px, tightening the headline-to-copy gap to about 26px.
   Doing it here rather than editing .title keeps the change scoped to
   wherever this paragraph actually appears, so any other page using the
   same funfact band is untouched.
   Colour #5A5348 on the #F2EDE4 ground measures 6.5:1, and matches the
   intro copy already used on the services page. */
.dl-band-copy-src{display:none}

.fanfuct-section-s2 p.dl-band-copy{
  display:block;
  max-width:720px;
  margin:-24px auto 0;
  font-size:18px;
  line-height:1.75;
  font-weight:400;
  text-align:center;
  color:#5A5348 !important;
  text-transform:none;
}

@media (max-width:991.98px){
  .fanfuct-section-s2 p.dl-band-copy{font-size:17px;max-width:620px;margin-top:-18px}
}

@media (max-width:767.98px){
  .fanfuct-section-s2 p.dl-band-copy{font-size:16px;line-height:1.7;max-width:100%;margin-top:-14px}
}

/* -- Homepage: clients grid in place of the team cards --------------------
   The Pixor team widget and its four demo people are gone; container
   cb781cb now holds an HTML widget (afd3974) with the eight real client
   logos. The theme's own wpo-pixor_title widget still supplies the eyebrow,
   the 65px uppercase heading and the right-hand link, so this section keeps
   the same head treatment as "Selected Works.." above it - only the grid
   below is custom.
   The lattice is drawn with borders on the cells plus a top/left border on
   the wrapper, rather than the usual gap-plus-background trick: the cells
   stay transparent, so the section sits on the page's cream ground without
   this file needing to know what that colour is.
   All eight logos are 500x500 with transparent backgrounds and internal
   padding, so a fixed image height gives them consistent optical weight
   without any per-logo tuning. They are decorative-but-named: real alt text,
   no links, so the cells are not controls and the hairlines are dividers
   rather than UI boundaries. */
.dl-clients{width:100%}

.dl-clients-grid{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  border-top:1px solid rgba(18,23,37,.14);
  border-left:1px solid rgba(18,23,37,.14);
  border-radius:9px;
  overflow:hidden;
}

.dl-clients-grid .dl-client-cell{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:190px;
  padding:28px 26px;
  border-right:1px solid rgba(18,23,37,.14);
  border-bottom:1px solid rgba(18,23,37,.14);
  transition:background-color .45s ease-in-out;
}

/* The small corner marks echo the grid intersections in the reference
   layout, in ink rather than orange. */
.dl-clients-grid .dl-client-cell::before{
  content:"";
  position:absolute;top:11px;left:11px;
  width:3px;height:3px;border-radius:50%;
  background:rgba(18,23,37,.28);
}

.dl-clients-grid .dl-client-cell img{
  width:auto;
  max-width:84%;
  height:118px;
  object-fit:contain;
  transition:transform .45s ease-in-out;
}

.dl-clients-grid .dl-client-cell:hover{background-color:#EAE4D8}
.dl-clients-grid .dl-client-cell:hover img{transform:scale(1.045)}

@media (max-width:1199.98px){
  .dl-clients-grid .dl-client-cell{min-height:168px;padding:24px 20px}
  .dl-clients-grid .dl-client-cell img{height:100px}
}

@media (max-width:991.98px){
  .dl-clients-grid{grid-template-columns:repeat(2,1fr)}
  .dl-clients-grid .dl-client-cell{min-height:160px}
  .dl-clients-grid .dl-client-cell img{height:96px}
}

@media (max-width:575.98px){
  .dl-clients-grid .dl-client-cell{min-height:132px;padding:18px 14px}
  .dl-clients-grid .dl-client-cell img{height:76px;max-width:88%}
  .dl-clients-grid .dl-client-cell::before{top:8px;left:8px}
}

@media (prefers-reduced-motion:reduce){
  .dl-clients-grid .dl-client-cell,
  .dl-clients-grid .dl-client-cell img{transition:none}
  .dl-clients-grid .dl-client-cell:hover img{transform:none}
}

/* -- Footer: social icons under the contact block -------------------------
   The theme renders .widget-social inside .footer-lower's right-hand column,
   a different subtree from .left-widget .widget-contact, so the move is done
   in JS (HTML widgets 1a08fb4 on footer template 2392 and deedca9 on 2502 -
   both templates render the same footer-section-s2 markup, so this one rule
   set covers both).
   Everything that changes the bottom bar is scoped to .dl-social-moved,
   which the script only adds after the move succeeds. Without that guard,
   collapsing the empty column would hide the icons outright on any page
   where the script did not run.
   The theme right-aligns .widget-social for its old bottom-bar position;
   under the contact block it needs to align left with the address above it,
   and the first pill has to shed the theme's 7px side margin so the row
   starts flush with the text. */
.pixor-footer .widget-contact ul.widget-social{
  text-align:left;
  padding-left:0;
  margin:26px 0 0;
  list-style:none;
}

.pixor-footer .widget-contact ul.widget-social li:first-child{margin-left:0}

/* Bottom bar: the copyright takes the full row once the icons have left. */
.pixor-footer.dl-social-moved .footer-lower .row>.col-lg-4{display:none}

.pixor-footer.dl-social-moved .footer-lower .row>.col-lg-8{
  flex:0 0 auto;
  width:100%;
}

@media (max-width:991.98px){
  .pixor-footer .widget-contact ul.widget-social{margin-top:20px}
  .pixor-footer.dl-social-moved .footer-lower p{text-align:left}
}

/* -- WhatsApp chat button -------------------------------------------------
   Lives in both header templates (HTML widget c10b8f0 on 105, d7fd925 on
   137) so it renders on every page, and its script reparents it to <body>:
   GSAP ScrollSmoother transforms the content wrapper, and a transformed
   ancestor makes position:fixed resolve against that ancestor rather than
   the viewport, so the button would otherwise scroll away with the page.
   The theme's own .back-to-top is fixed at right:15px/bottom:15px and would
   sit on top of this, so it is lifted to stack directly above, centred on
   the same axis as the badge (badge centre is 24+56/2 = 52px from the right,
   so a 45px back-to-top needs right:29px to line up; 35px below 992px needs
   right:24px against the smaller 52px badge).
   The green is WhatsApp's own #25D366 - brand recognition is the whole point
   of this control, and a logo carries no contrast requirement. The label is
   theme ink instead: cream on #121725 is 15.3:1, and the muted lead line
   #B8B0A2 on the same ground is 8.3:1. */
#dl-wa{
  position:fixed;
  right:24px;
  bottom:24px;
  z-index:9990;
}

#dl-wa .dl-wa-link{
  display:flex;
  align-items:center;
  gap:12px;
  text-decoration:none;
}

#dl-wa .dl-wa-label{
  background-color:#121725;
  color:#F2EDE4;
  border:1px solid rgba(242,237,228,.18);
  border-radius:100px;
  padding:11px 18px;
  font-size:14px;
  font-weight:600;
  line-height:1;
  white-space:nowrap;
  box-shadow:0 6px 22px rgba(8,9,5,.22);
  transition:transform .3s ease-in-out;
}

#dl-wa .dl-wa-lead{color:#B8B0A2;font-weight:400}

#dl-wa .dl-wa-badge{
  width:56px;
  height:56px;
  flex:0 0 56px;
  border-radius:50%;
  background-color:#25D366;
  color:#FFFFFF;
  display:flex;
  align-items:center;
  justify-content:center;
  box-shadow:0 8px 26px rgba(37,211,102,.34),0 2px 8px rgba(8,9,5,.28);
  transition:transform .3s ease-in-out;
}

#dl-wa .dl-wa-link:hover .dl-wa-badge,
#dl-wa .dl-wa-link:focus-visible .dl-wa-badge{transform:scale(1.06)}

#dl-wa .dl-wa-link:focus-visible{outline:2px solid #F2EDE4;outline-offset:4px;border-radius:100px}

/* Stack the theme's back-to-top above the button instead of under it. */
.back-to-top{bottom:96px !important;right:29px !important}

@media (max-width:991.98px){
  #dl-wa{right:16px;bottom:16px}
  #dl-wa .dl-wa-badge{width:52px;height:52px;flex:0 0 52px}
  #dl-wa .dl-wa-label{font-size:13px;padding:10px 15px}
  .back-to-top{bottom:82px !important;right:24px !important}
}

/* Below 576px the label would crowd the screen - the mark alone is enough. */
@media (max-width:575.98px){
  #dl-wa .dl-wa-label{display:none}
}

@media (prefers-reduced-motion:reduce){
  #dl-wa .dl-wa-label,
  #dl-wa .dl-wa-badge{transition:none}
  #dl-wa .dl-wa-link:hover .dl-wa-badge{transform:none}
}

/* -- Homepage about: the two-up image row ---------------------------------
   The theme only sets width:100% on these, so each column rendered at its
   source image's own aspect ratio and the two sat at different heights -
   fine for the original artwork, which was cut to fit, but it means any
   future swap silently changes the layout. Pinning a height with
   object-fit:cover makes the row hold its shape whatever is dropped in.
   Heights are tuned per breakpoint rather than using aspect-ratio, because
   the columns are 5/7 of the row: a single ratio would give them very
   different heights, which is the problem being fixed. */
.about-section-s2 .top-img .row>[class*="col-"]>img{
  width:100%;
  height:470px;
  object-fit:cover;
  object-position:50% 50%;
  border-radius:9px;
}

@media (max-width:1199.98px){
  .about-section-s2 .top-img .row>[class*="col-"]>img{height:400px}
}

@media (max-width:991.98px){
  .about-section-s2 .top-img .row>[class*="col-"]>img{height:340px}
}

@media (max-width:575.98px){
  .about-section-s2 .top-img .row>[class*="col-"]>img{height:250px}
}

/* -- About page: the two tilted photos ------------------------------------
   Pixor ships fanfact-2.jpg stored upside down and rights it with
   transform:rotate(-164.36deg) - i.e. 180 degrees of flip plus a 15.64
   degree tilt. Any normally-oriented replacement dropped into that slot
   renders inverted. Rotating by the tilt alone means the media library can
   hold an upright image that reads upright, which is what anyone editing
   this later will expect. Mirrors the left card's -15.636deg.
   The demo files were also 248x299 for a 246x298 slot - 1x, so soft on
   retina. The replacements are 492x596 (2x) and object-fit:cover pins the
   frame so a differently proportioned photo cannot change the card shape. */
.fanfuct-section .top-content .right-image img{
  transform:rotate(15.64deg);
}

.fanfuct-section .top-content .left-image img,
.fanfuct-section .top-content .right-image img{
  width:100%;
  height:298px;
  object-fit:cover;
}

/* -- About page: single stat in the about widget --------------------------
   The theme lays this row out for a pair - .funfact is a 535px flex box with
   .item capped at max-width:50% - so one stat alone sits in the left half
   with dead space beside it. :only-child scopes the fix to exactly the case
   where a second item is absent, so restoring one needs no CSS change. */
.about-wraper .funfact .item:only-child{
  max-width:100%;
  margin-right:0;
}

/* -- Homepage award section: the outline watermark ------------------------
   The theme sizes this for its demo word "Award" / "Decode" - 120px with
   left:-80px inside a 493px box. "DECODINGLEADS" is more than twice as many
   characters, so at 120px it runs far outside the box and .award-section's
   overflow:hidden clips it to a few letters. Sized so the full word occupies
   roughly the same footprint the short word did, and pulled back from the
   left edge, since -80px was an offset chosen for much wider glyphs. */
.pixor-award-section.award-section .bg-text h1{
  font-size:56px;
  line-height:1.1;
  left:-20px;
}

@media (max-width:1199.98px){
  .pixor-award-section.award-section .bg-text h1{font-size:46px;left:-10px}
}

@media (max-width:767.98px){
  .pixor-award-section.award-section .bg-text h1{font-size:36px;left:0}
}

/* -- Logo sizing after the switch to SVG ----------------------------------
   The old PNG was 100x100, and the theme's only constraint is
   max-width:170px in the header and the global img{max-width:100%} in the
   footer - neither of which upscales, so the PNG always drew at its own
   100px. The SVG declares width="500" height="500", so it took the full
   170px cap in the header and stretched to the 253px column in the footer.
   Setting an explicit width restores the previous size and makes the logo
   independent of whatever intrinsic size a future file happens to carry. */
.wpo-site-header .navbar-header .navbar-brand img{
  width:100px;
  height:auto;
  max-width:100px;
}

.pixor-footer .widget-contact img.default-logo{
  width:100px;
  height:auto;
  max-width:100px;
}

/* The header is 85px tall below 992px, so the mark has to come down with it. */
@media (max-width:991.98px){
  .wpo-site-header .navbar-header .navbar-brand img{width:72px;max-width:72px}
  .pixor-footer .widget-contact img.default-logo{width:88px;max-width:88px}
}/* End custom CSS */