/**
 * LTTRBX — Mobile / Tablet responsiveness overlay
 * Linked AFTER lttrbx-theme.css. Desktop (≥1200px) is intentionally unchanged.
 * Scope: media-query-only layout fixes. No redesign / content changes.
 */

/* ------------------------------------------------------------------
   Arrow icons — SVG (never OS emoji glyphs like ↗ / →)
------------------------------------------------------------------- */
.lx-text-arrow,
.hero-btn-arrow,
.lx-port-card-arrow,
.sol-item-arrow,
.svc-list-arrow,
.br-c,
.br-arw {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  line-height: 0;
}
.lx-text-arrow {
  vertical-align: -0.12em;
  margin-left: 0.2em;
}
.lx-text-arrow svg,
.hero-btn-arrow svg,
.lx-port-card-arrow svg,
.sol-item-arrow svg,
.svc-list-arrow svg,
.br-c svg,
.br-arw svg,
.lx-testi-prev svg,
.lx-testi-next svg {
  display: block;
  width: 1em;
  height: 1em;
  max-width: none;
  flex-shrink: 0;
}
.hero-btn-arrow {
  color: #15150F !important;
}
.hero-btn-arrow svg path {
  stroke: #15150F !important;
}
.lx-port-card-arrow svg {
  width: 16px;
  height: 16px;
}
.lx-testi-prev,
.lx-testi-next {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
}

/* ------------------------------------------------------------------
   Global overflow safety (all sizes — does not alter desktop look)
------------------------------------------------------------------- */
html {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
body.common-front {
  max-width: 100% !important;
  overflow-x: hidden !important;
}
img,
video,
svg,
iframe,
embed,
object {
  max-width: 100%;
}
img,
video {
  height: auto;
}
table {
  max-width: 100%;
}

/* ------------------------------------------------------------------
   ≤1199px — Small laptop / large tablet
------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
  /* Services stage: kill desktop overhang early (was only ≤991) */
  .plx-svc-stage {
    margin-right: 0 !important;
    max-width: 100% !important;
    width: min(560px, 100%) !important;
    height: auto !important;
    aspect-ratio: 1 / 1;
  }

  .plx-svc-left,
  .plx-svc-right {
    max-width: 100%;
    min-width: 0;
  }

  .hero-ref-stat-box {
    min-width: 0 !important;
  }

  /* Portfolio / blog negative gutters can bleed past container */
  .portfolio-grid,
  .blog-grid {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }

  .portfolio-grid > [class*="col-"],
  .blog-grid > [class*="col-"] {
    padding-left: 12px;
    padding-right: 12px;
  }

  /* Branding hero clearance */
  .branding-page .br-hero {
    padding-top: calc(var(--site-topbar-height, 84px) + 36px);
  }
}

/* ------------------------------------------------------------------
   ≤991px — Tablet
------------------------------------------------------------------- */
@media (max-width: 991.98px) {
  /* Topbar: free space — Connect lives in sidebar CTA */
  .site-connect-btn,
  body .site-connect-btn {
    display: none !important;
  }

  .site-topbar-inner {
    gap: 10px !important;
  }

  .site-phone {
    font-size: 13px !important;
    padding-left: 10px !important;
    padding-right: 10px !important;
  }

  .menu-toggle {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Home about / grids */
  .about-new-grid {
    grid-template-columns: 1fr !important;
    gap: 36px !important;
  }

  .about-new-btn,
  a.about-new-btn {
    white-space: normal !important;
    max-width: 100%;
  }

  /* Services listing: 2 cols on tablet */
  .svc-list-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .svc-list-hero {
    padding-left: 20px;
    padding-right: 20px;
  }

  /* Career cards */
  .career-cards-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  .career-hero h1,
  .career-main-title {
    font-size: clamp(28px, 5vw, 40px) !important;
    word-break: break-word;
  }

  /* Contact CTA */
  .contact-cta-title {
    font-size: clamp(36px, 7vw, 56px) !important;
  }

  .contact-cta-left,
  .contact-cta-right {
    padding: 40px 28px !important;
  }

  /* Forms: full-width controls */
  .cnt-form-box input:not([type="checkbox"]):not([type="radio"]),
  .cnt-form-box textarea,
  .cnt-form-box select,
  .int-form-card input:not([type="checkbox"]):not([type="radio"]),
  .int-form-card textarea,
  .int-form-card select,
  .career-apply-form input:not([type="checkbox"]):not([type="radio"]),
  .career-apply-form textarea,
  .career-apply-form select,
  form input[type="text"],
  form input[type="email"],
  form input[type="tel"],
  form input[type="url"],
  form input[type="number"],
  form input[type="file"],
  form textarea,
  form select {
    max-width: 100%;
    box-sizing: border-box;
  }

  .cnt-captcha-wrap,
  .g-recaptcha {
    max-width: 100%;
    overflow-x: auto;
  }

  /* Blog / portfolio heroes */
  .blog-hero,
  .portfolio-hero,
  .lx-products-hero {
    padding-left: 16px;
    padding-right: 16px;
  }

  /* Post detail */
  .post-dt-hero-layout {
    grid-template-columns: 1fr !important;
  }

  .post-dt .container,
  .post-dt-prose {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  .post-dt-prose img,
  .post-dt-prose table {
    max-width: 100% !important;
  }

  .post-dt-prose .table-responsive,
  .post-dt-prose table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Project detail */
  .project-page,
  .project-hero,
  .prj-wrap {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Sidebar drawer */
  .site-sidebar {
    width: min(360px, 92vw) !important;
    max-width: 100vw;
  }

  .site-sidebar-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

/* ------------------------------------------------------------------
   ≤767px — Phones / small tablet portrait
------------------------------------------------------------------- */
@media (max-width: 767.98px) {
  .site-phone,
  .site-connect-btn,
  body .site-connect-btn {
    display: none !important;
  }

  .site-topbar-inner {
    padding: 10px 14px !important;
  }

  .site-logo-img {
    max-height: 34px !important;
    width: auto !important;
  }

  /* Services listing: single column */
  .svc-list-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  .svc-list-title {
    font-size: clamp(26px, 7vw, 34px) !important;
  }

  .svc-list-cta-btns {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .svc-list-btn,
  .svc-list-btn-ghost {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Career */
  .career-cards-grid {
    grid-template-columns: 1fr !important;
  }

  .career-hero-pills {
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
  }

  .career-hero-btn,
  .career-apply-btn,
  .career-detail-btn {
    width: 100%;
    justify-content: center;
    min-height: 44px;
  }

  /* Contact / footer CTA */
  .contact-cta-left,
  .contact-cta-right {
    padding: 32px 18px !important;
  }

  .contact-cta-title {
    font-size: clamp(30px, 9vw, 42px) !important;
  }

  .contact-cta-social {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }

  .contact-cta-social a {
    min-width: 40px;
    min-height: 40px;
  }

  .contact-cta-address,
  .contact-cta-bottom p,
  .site-sidebar-address {
    overflow-wrap: anywhere;
    word-break: break-word;
  }

  /* Products chips scroll contained */
  .lx-products-chips {
    max-width: 100%;
  }

  /* Portfolio / blog cards */
  .pf-card-body,
  .blog-card-body {
    padding: 16px !important;
  }

  .pf-card-title,
  .blog-card-title {
    font-size: clamp(16px, 4.5vw, 20px) !important;
    overflow-wrap: anywhere;
  }

  /* Home FAQ answer indent */
  .faq-right .faq-item-body,
  .faq-right .faq-item.open .faq-item-body {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  /* About orbit / team */
  .ab-right-visual {
    height: auto !important;
    min-height: 280px;
    margin-top: 24px !important;
  }

  .ab-orbit-svg {
    width: min(280px, 85vw) !important;
    height: auto !important;
  }

  .team-section-v3 .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Buttons touch-friendly */
  .hero-ref-main-btn,
  .hero-ref-actions a,
  .cnt-submit-btn,
  .int-submit-btn,
  .lx-pd-btn,
  .about-new-btn {
    min-height: 44px;
  }

  /* Owl / carousels */
  .owl-carousel .owl-nav button,
  .owl-nav button {
    min-width: 40px;
    min-height: 40px;
  }

  /* Bootstrap rows already zeroed in theme; reinforce col min-width */
  .row > [class*="col-"] {
    min-width: 0;
  }

  /* Legal / tables */
  .legal-page-inner,
  .table-responsive {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: 100%;
  }

  /* Internship page */
  .int-page {
    padding-left: 0;
    padding-right: 0;
  }

  .int-form-card {
    max-width: 100%;
  }

  .int-form-card .int-row {
    grid-template-columns: 1fr !important;
  }

  .int-form-card input:not([type="checkbox"]):not([type="radio"]),
  .int-form-card textarea,
  .int-form-card select {
    width: 100% !important;
  }

  /* Privacy checkbox — keep text horizontal (not letter-stacked) */
  .int-privacy-label {
    display: flex !important;
    flex-direction: row !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    line-height: 1.5 !important;
  }
  .int-privacy-label input[type="checkbox"] {
    width: 18px !important;
    height: 18px !important;
    min-width: 18px !important;
    max-width: 18px !important;
    flex-shrink: 0 !important;
    margin: 2px 0 0 !important;
    padding: 0 !important;
    accent-color: #CDFF4D;
  }
  .int-privacy-label span {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    width: auto !important;
    max-width: 100% !important;
    white-space: normal !important;
    word-break: normal !important;
    overflow-wrap: break-word !important;
    writing-mode: horizontal-tb !important;
    font-size: 13px !important;
    line-height: 1.55 !important;
    color: #C8C8C0 !important;
  }
}

/* ------------------------------------------------------------------
   ≤575px — Small phones
------------------------------------------------------------------- */
@media (max-width: 575.98px) {
  .container,
  .container-fluid {
    padding-left: 14px !important;
    padding-right: 14px !important;
  }

  .hero-ref-left h1 {
    font-size: clamp(24px, 7.5vw, 30px) !important;
    line-height: 1.2 !important;
  }

  .lx-products-title,
  .blog-hero-title,
  .portfolio-hero h1,
  .svc-list-title,
  .cnt-hero h1 {
    font-size: clamp(24px, 8vw, 32px) !important;
  }

  .lx-products-grid {
    grid-template-columns: 1fr !important;
  }

  .lx-pd-highlights-grid,
  .lx-pd-modules {
    grid-template-columns: 1fr !important;
  }

  .clients_logo .cli-cell {
    min-height: 96px !important;
    padding: 14px 8px !important;
  }

  .clients_logo .cli-cell .client_logo {
    max-width: 100px !important;
  }

  .wc-grid {
    grid-template-columns: 1fr !important;
  }

  .team-section-v3 .team-grid {
    grid-template-columns: 1fr 1fr !important;
    gap: 20px 10px !important;
  }

  .ab-service-grid {
    grid-template-columns: 1fr !important;
  }

  /* reCAPTCHA scale on very narrow screens */
  .g-recaptcha {
    transform-origin: left top;
  }
}

/* ------------------------------------------------------------------
   ≤480px
------------------------------------------------------------------- */
@media (max-width: 480px) {
  .site-topbar-inner {
    padding: 10px 12px !important;
  }

  .contact-cta-left,
  .contact-cta-right {
    padding: 28px 16px !important;
  }

  .contact-cta-btn {
    width: 100% !important;
    justify-content: center !important;
  }

  .plx-svc-header {
    padding: 36px 16px !important;
  }

  .faq-heading-left {
    font-size: clamp(22px, 7vw, 28px) !important;
  }

  .branding-page .br-wrap {
    padding: 0 16px !important;
  }
}

/* ------------------------------------------------------------------
   ≤375px / ≤320px — extreme narrow
------------------------------------------------------------------- */
@media (max-width: 375.98px) {
  .hero-ref-left h1 {
    font-size: 22px !important;
  }

  .ab-orbit-svg {
    width: min(240px, 78vw) !important;
  }

  .team-section-v3 .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 260px;
    margin-left: auto;
    margin-right: auto;
  }
}

@media (max-width: 320.98px) {
  .container {
    padding-left: 12px !important;
    padding-right: 12px !important;
  }

  .site-logo-img {
    max-height: 30px !important;
  }

  .menu-toggle {
    padding: 6px !important;
  }
}

/* ------------------------------------------------------------------
   Landscape phones
------------------------------------------------------------------- */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-ref-section {
    min-height: auto !important;
    padding-top: calc(var(--site-topbar-height, 84px) + 16px) !important;
    padding-bottom: 40px !important;
  }

  .site-sidebar {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .plx-svc-pin,
  .plx-svc-pin.is-fixed,
  .plx-svc-pin.is-bottom {
    position: relative !important;
    height: auto !important;
    top: auto !important;
  }
}

/* Desktop: keep Google rating block visible (do not clip absolute bottom bar) */
@media (min-width: 1200px) {
  .hero-ref-section {
    overflow: visible !important;
    padding-bottom: 0 !important;
  }
  .hero-ref-stats {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 6 !important;
    position: absolute !important;
    left: 50% !important;
    bottom: 0 !important;
    transform: translateX(-50%) !important;
  }
  .hero-ref-bg-img {
    height: 100% !important;
    max-width: none !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}
@media (max-width: 1199.98px) {
  .hero-ref-section,
  .about-section-new,
  .sol-section,
  .plx-svc-wrap,
  .lx-portfolio-section,
  .lx-testimonial-section,
  .blog-section-new,
  .contact-cta-wrap,
  .lx-products-page,
  .portfolio-page-section,
  .blog-list-section,
  .svc-list,
  .cnt-hero,
  .career-page-section,
  .int-page,
  .branding-page {
    max-width: 100%;
    overflow-x: hidden;
  }

  /* Hero must NOT clip the Google rating block */
  .hero-ref-section {
    overflow: visible !important;
  }

  /* Google rating — desktop-like side-by-side bar (not stacked) */
  .hero-ref-stats {
    position: relative !important;
    left: auto !important;
    right: auto !important;
    bottom: auto !important;
    transform: none !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 6 !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 28px 0 0 !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    border-top-left-radius: 16px !important;
    border-top-right-radius: 16px !important;
    overflow: visible !important;
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 38%,
      #f2ffc4 48%,
      #CDFF4D 58%,
      #CDFF4D 100%
    ) !important;
    box-shadow: none !important;
  }
  .hero-ref-stat-box {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    max-width: none !important;
    width: auto !important;
    margin-left: 0 !important;
    padding: 22px 18px !important;
    display: flex !important;
    align-items: center !important;
    visibility: visible !important;
    opacity: 1 !important;
    background: transparent !important;
  }
  .hero-ref-stat-box.dark {
    background: linear-gradient(
      90deg,
      #ffffff 0%,
      #ffffff 72%,
      rgba(255, 255, 255, 0) 100%
    ) !important;
    border-radius: 16px 0 0 0 !important;
    margin-left: 0 !important;
    padding-left: 18px !important;
  }
  .hero-ref-stat-box.green {
    background: linear-gradient(
      90deg,
      rgba(205, 255, 77, 0) 0%,
      #e8ffa0 18%,
      #CDFF4D 42%,
      #CDFF4D 100%
    ) !important;
    border-radius: 0 16px 0 0 !important;
    margin-left: -28px !important;
    padding-left: 40px !important;
  }

  /* HERO copy — same as desktop: left aligned */
  .hero-ref-container {
    justify-content: flex-start !important;
    text-align: left !important;
    align-items: flex-start !important;
  }
  .hero-ref-left {
    text-align: left !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    padding-left: 0 !important;
  }
  .hero-ref-left h1,
  .hero-ref-left h4,
  .hero-ref-left p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    text-align: left !important;
  }
  .hero-ref-actions {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .hero-ref-tag {
    margin-left: 0 !important;
  }

  .hero-ref-container,
  .plx-svc-wrap,
  .about-new-grid,
  .contact-cta-grid,
  .lx-products-toolbar,
  .cnt-form-grid {
    min-width: 0;
  }
}

/* ==================================================================
   HOMEPAGE — mobile / tablet spacing & alignment polish
   Overrides conflicting theme rules. Desktop ≥1200px unchanged.
================================================================== */

/* ---- Tablet ≤991 ---- */
@media (max-width: 991.98px) {
  /* Consistent horizontal inset */
  .hero-ref-section,
  .plx-svc-header,
  .lx-portfolio-section {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  .about-section-new,
  .sol-section,
  .fun-facts-new .ff-bottom,
  .blog-section-new,
  .faq-section-new {
    padding-left: 0 !important;
    padding-right: 0 !important;
  }

  .about-section-new .container,
  .sol-section .container,
  .blog-section-new .container,
  .faq-section-new .container,
  .plx-svc-wrap .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  /* HERO — left align like desktop + clear fixed nav */
  .hero-ref-section {
    min-height: auto !important;
    padding-top: calc(var(--site-topbar-height, 84px) + 12px) !important;
    padding-bottom: 0 !important;
    overflow: visible !important;
  }
  .hero-ref-container {
    min-height: auto !important;
    padding: 12px 0 20px !important;
    align-items: flex-start !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .hero-ref-left {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    text-align: left !important;
    margin: 0 !important;
  }
  .hero-ref-left h1,
  .hero-ref-left h4,
  .hero-ref-left p {
    margin-left: 0 !important;
    margin-right: 0 !important;
    max-width: 100% !important;
    text-align: left !important;
  }
  .hero-ref-left h1 {
    font-size: clamp(28px, 5.2vw, 42px) !important;
    line-height: 1.12 !important;
    letter-spacing: -0.5px !important;
  }
  .hero-ref-left h4 {
    font-size: clamp(15px, 2.4vw, 19px) !important;
  }
  .hero-ref-left p {
    font-size: 15px !important;
    line-height: 1.65 !important;
  }
  .hero-ref-actions {
    justify-content: flex-start !important;
    align-items: flex-start !important;
    width: auto !important;
  }
  .hero-ref-main-btn {
    width: auto !important;
    min-width: 230px !important;
  }

  /* Rating bar — keep desktop side-by-side UI */
  .hero-ref-stats {
    position: relative !important;
    transform: none !important;
    left: auto !important;
    bottom: auto !important;
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 24px 0 0 !important;
    justify-content: flex-start !important;
  }
  .hero-ref-stat-box {
    flex: 1 1 50% !important;
    min-width: 0 !important;
    width: auto !important;
    padding: 20px 16px !important;
  }
  .hero-ref-stat-box.green {
    margin-left: -24px !important;
    padding-left: 36px !important;
  }
  .hero-ref-stat-box h3 {
    font-size: clamp(26px, 5vw, 36px) !important;
  }
  .hero-ref-stat-box p {
    font-size: 13px !important;
  }
  .hero-ref-stat-box h3,
  .hero-ref-stat-box p {
    color: #15150F !important;
    -webkit-text-fill-color: #15150F !important;
  }

  /* ABOUT — stack cleanly, remove side padding skew */
  .about-section-new {
    padding: 56px 0 !important;
  }
  .about-new-grid {
    grid-template-columns: 1fr !important;
    gap: 32px !important;
    align-items: start !important;
  }
  .about-new-left,
  .about-new-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .about-new-left {
    padding: 0 !important;
  }
  .about-new-right {
    padding: 28px 0 20px !important;
    position: relative !important;
  }
  .about-new-heading {
    font-size: clamp(26px, 4.5vw, 34px) !important;
  }
  .about-new-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 10px !important;
    width: 100% !important;
  }
  .about-stat-pill {
    min-width: 0 !important;
    width: 100% !important;
    padding: 12px 8px !important;
    box-sizing: border-box;
  }
  .about-stat-num {
    font-size: clamp(16px, 3.5vw, 20px) !important;
  }
  .about-stat-lbl {
    font-size: 10px !important;
    text-align: center;
    line-height: 1.3;
  }
  .about-new-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  .about-main-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 360px;
    object-fit: contain !important;
    display: block;
    margin: 0 auto;
  }
  .about-exp-badge {
    z-index: 2;
  }
  .about-new-btn,
  a.about-new-btn {
    width: auto !important;
    max-width: 100%;
    justify-content: center !important;
  }

  /* SOLUTIONS — even gaps, scrollable tabs */
  .sol-section {
    padding: 48px 0 !important;
  }
  .sol-header {
    display: flex !important;
    flex-direction: column !important;
    gap: 20px !important;
    margin-bottom: 28px !important;
  }
  .sol-title {
    font-size: clamp(26px, 4.5vw, 34px) !important;
  }
  .sol-desc {
    font-size: 14px !important;
    line-height: 1.65 !important;
    max-width: 100% !important;
  }
  .sol-tabs-wrap {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sol-tabs {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
    gap: 8px !important;
    padding-bottom: 6px !important;
    scrollbar-width: thin;
  }
  .sol-tab {
    flex-shrink: 0 !important;
    min-height: 36px;
    white-space: nowrap;
  }
  .sol-layout {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }
  .sol-list,
  .sol-detail {
    width: 100% !important;
    max-width: 100% !important;
  }
  .sol-detail {
    position: static !important;
    padding: 24px 18px !important;
  }

  /* SERVICES header + wrap */
  .plx-svc-header {
    display: flex !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 14px !important;
    padding: 40px 20px 20px !important;
    margin: 0 !important;
  }
  .plx-svc-header-left h2 {
    font-size: clamp(26px, 4.5vw, 36px) !important;
    line-height: 1.15 !important;
  }
  .plx-svc-header-right {
    width: 100% !important;
  }
  .plx-svc-header-right p {
    max-width: 100% !important;
  }
  .plx-svc-wrap {
    flex-direction: column !important;
    gap: 0 !important;
    margin: 0 !important;
  }
  .plx-svc-left,
  .plx-svc-right {
    width: 100% !important;
    max-width: 100% !important;
  }
  .plx-svc-left {
    padding: 12px 16px 8px !important;
  }
  .plx-svc-right {
    padding: 8px 16px 40px !important;
  }
  .plx-svc-stage {
    margin: 0 auto !important;
    width: min(320px, 78vw) !important;
    height: auto !important;
  }
  .plx-svc-pin {
    height: auto !important;
    padding: 16px 8px 24px !important;
  }
  .plx-card {
    margin-bottom: 12px !important;
  }

  /* FUN FACTS — spacing only; colors handled in final block below */
  .ff-bottom {
    padding: 24px 0 48px !important;
  }
  .ff-bottom-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 0 !important;
  }

  /* PORTFOLIO */
  .lx-portfolio-section {
    padding: 48px 20px 64px !important;
    overflow: hidden !important;
  }
  .lx-port-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .lx-port-title {
    font-size: clamp(26px, 5vw, 40px) !important;
  }
  .lx-port-cards {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 14px !important;
    align-items: stretch !important;
    perspective: none !important;
  }
  .lx-port-card,
  .lx-port-card:nth-child(1),
  .lx-port-card:nth-child(2),
  .lx-port-card:nth-child(3),
  .lx-port-card:nth-child(4) {
    margin: 0 !important;
    margin-bottom: 0 !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    z-index: 1 !important;
  }

  /* TESTIMONIALS */
  .lx-testi-top {
    padding: 48px 20px 36px !important;
  }
  .lx-testi-title {
    font-size: clamp(26px, 5vw, 40px) !important;
    line-height: 1.15 !important;
  }
  .lx-testi-sub {
    max-width: 100% !important;
    padding: 0 4px;
  }
  .lx-testi-bottom {
    padding: 28px 16px 48px !important;
  }
  .lx-testi-cards {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }

  /* FAQ */
  .faq-section-new {
    padding: 56px 0 64px !important;
  }
  .faq-layout {
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }
  .faq-heading-left {
    font-size: clamp(24px, 5vw, 32px) !important;
  }

  /* BLOG */
  .blog-section-new {
    padding: 48px 0 56px !important;
  }
  .bl-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .bl-heading {
    font-size: clamp(26px, 5vw, 36px) !important;
  }
  .bl-cards,
  #bl-cards-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  .bl-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Get in touch / typed */
  .getintouch-home {
    padding: 48px 16px !important;
  }
  .typed-section {
    padding: 36px 16px !important;
  }
}

/* ---- Phone ≤767 ---- */
@media (max-width: 767.98px) {
  .about-section-new .container,
  .sol-section .container,
  .blog-section-new .container,
  .faq-section-new .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .hero-ref-section {
    padding-top: calc(var(--site-topbar-height, 84px) + 8px) !important;
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-bottom: 0 !important;
  }
  .hero-ref-container {
    padding: 8px 0 16px !important;
    justify-content: flex-start !important;
    text-align: left !important;
  }
  .hero-ref-left {
    text-align: left !important;
  }
  .hero-ref-tag {
    font-size: 12px !important;
    padding: 8px 14px !important;
    margin-bottom: 16px !important;
    max-width: 100%;
    line-height: 1.4;
  }
  .hero-ref-left h1 {
    font-size: clamp(24px, 7vw, 32px) !important;
    margin-bottom: 12px !important;
    text-align: left !important;
  }
  .hero-ref-left h4 {
    font-size: 14px !important;
    margin-bottom: 12px !important;
    line-height: 1.45 !important;
    text-align: left !important;
  }
  .hero-ref-left p {
    font-size: 13.5px !important;
    margin-bottom: 20px !important;
    text-align: left !important;
  }
  .hero-ref-actions {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 12px !important;
  }
  .hero-ref-main-btn,
  a.hero-ref-main-btn {
    width: auto !important;
    min-width: 0 !important;
    max-width: 100% !important;
    justify-content: flex-start !important;
    padding: 5px 20px 5px 5px !important;
  }

  /* Keep rating side-by-side like desktop (do NOT stack) */
  .hero-ref-stats {
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    max-width: 100% !important;
    width: 100% !important;
    margin: 20px 0 0 !important;
    display: flex !important;
  }
  .hero-ref-stat-box {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
    padding: 16px 12px !important;
    display: flex !important;
  }
  .hero-ref-stat-box.dark {
    border-top-left-radius: 14px !important;
  }
  .hero-ref-stat-box.green {
    margin-left: -20px !important;
    padding-left: 28px !important;
    border-top-right-radius: 14px !important;
  }
  .hero-ref-stat-box h3 {
    font-size: 22px !important;
  }
  .hero-ref-stat-box h3 .google-rating-star-svg {
    width: 18px !important;
    height: 18px !important;
  }
  .hero-ref-stat-box p {
    font-size: 11px !important;
    line-height: 1.3 !important;
  }
  .hero-ref-stat-box .hero-stat-cta {
    font-size: 10px !important;
  }

  /* ABOUT */
  .about-section-new {
    padding: 44px 0 !important;
  }
  .about-new-grid {
    gap: 28px !important;
  }
  .about-new-stats {
    grid-template-columns: 1fr !important;
  }
  .about-stat-pill {
    flex-direction: row !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: 12px 16px !important;
    text-align: left;
  }
  .about-stat-lbl {
    margin-top: 0 !important;
    text-align: right;
  }
  .about-new-features {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .about-team-row {
    flex-wrap: wrap !important;
    gap: 10px !important;
  }
  .about-new-btn,
  a.about-new-btn {
    width: 100% !important;
    box-sizing: border-box;
  }
  .about-exp-badge {
    width: 84px !important;
    height: 84px !important;
    top: 4px !important;
    left: 4px !important;
  }
  .about-exp-number {
    font-size: 22px !important;
  }
  .about-exp-text {
    font-size: 7px !important;
  }
  .about-new-right {
    padding: 20px 0 12px !important;
  }

  /* SOL */
  .sol-section {
    padding: 40px 0 !important;
  }
  .sol-detail-num {
    font-size: 42px !important;
  }
  .sol-detail-name {
    font-size: 20px !important;
  }

  /* SERVICES */
  .plx-svc-header {
    padding: 36px 16px 16px !important;
  }
  .plx-svc-left {
    padding: 8px 12px 4px !important;
  }
  .plx-svc-right {
    padding: 4px 12px 36px !important;
  }
  .plx-svc-stage {
    width: min(260px, 72vw) !important;
  }
  .plx-svc-name h3 {
    font-size: 20px !important;
    text-align: center;
  }

  /* PORTFOLIO — 1 col on phone, no overlap */
  .lx-portfolio-section {
    padding: 40px 16px 52px !important;
    overflow: hidden !important;
  }
  .lx-port-cards {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 16px !important;
    align-items: stretch !important;
    perspective: none !important;
  }
  .lx-port-card,
  .lx-port-card:nth-child(1),
  .lx-port-card:nth-child(2),
  .lx-port-card:nth-child(3),
  .lx-port-card:nth-child(4) {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    margin-bottom: 0 !important;
    transform: none !important;
    translate: none !important;
    aspect-ratio: 1 / 1 !important;
    height: auto !important;
    z-index: 1 !important;
    will-change: auto !important;
  }
  .lx-port-viewall {
    width: 100%;
    justify-content: center;
  }

  /* TESTIMONIALS */
  .lx-testi-top {
    padding: 40px 16px 28px !important;
  }
  .lx-testi-bottom {
    padding: 20px 12px 40px !important;
  }
  .lx-rating-pills {
    flex-wrap: wrap !important;
    justify-content: center !important;
    gap: 8px !important;
  }

  /* FAQ */
  .faq-section-new {
    padding: 44px 0 52px !important;
  }
  .faq-right .faq-item-header {
    padding: 14px 14px !important;
    gap: 10px !important;
  }
  .faq-right .faq-item-q {
    font-size: 13px !important;
    line-height: 1.4 !important;
  }
  .faq-right .faq-item-body,
  .faq-right .faq-item.open .faq-item-body {
    padding: 0 14px 14px 14px !important;
  }

  /* BLOG */
  .blog-section-new {
    padding: 40px 0 48px !important;
  }
  .bl-view-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
  .bl-card-title {
    font-size: 16px !important;
    line-height: 1.35 !important;
  }
}

/* ---- Small phone ≤480 ---- */
@media (max-width: 480px) {
  .hero-ref-section {
    padding-bottom: 0 !important;
  }
  .hero-ref-left {
    text-align: left !important;
  }
  .hero-ref-left h1 {
    font-size: 24px !important;
    text-align: left !important;
  }
  .hero-ref-left h4,
  .hero-ref-left p {
    text-align: left !important;
  }
  .hero-ref-actions {
    justify-content: flex-start !important;
    align-items: center !important;
  }
  .hero-ref-main-btn,
  a.hero-ref-main-btn {
    width: auto !important;
    justify-content: flex-start !important;
  }
  .hero-ref-stats {
    margin-top: 18px !important;
    flex-direction: row !important;
  }
  .hero-ref-stat-box {
    padding: 14px 10px !important;
  }
  .hero-ref-stat-box.green {
    margin-left: -16px !important;
    padding-left: 24px !important;
  }
  .hero-ref-stat-box h3 {
    font-size: 20px !important;
  }
  .hero-ref-stat-box p {
    font-size: 10px !important;
  }

  .about-section-new {
    padding: 36px 0 !important;
  }
  .about-new-heading {
    font-size: 24px !important;
  }
  .about-new-desc {
    font-size: 14px !important;
  }

  .sol-section {
    padding: 32px 0 !important;
  }
  .sol-title {
    font-size: 24px !important;
  }

  .plx-svc-header-left h2 {
    font-size: 24px !important;
  }
  .plx-svc-stage {
    width: min(220px, 70vw) !important;
  }
  .plx-card {
    padding: 14px 12px !important;
  }

  .lx-portfolio-section {
    padding: 32px 14px 44px !important;
  }
  .lx-port-title {
    font-size: 24px !important;
  }

  .lx-testi-title {
    font-size: 24px !important;
  }
  .lx-testi-quote {
    font-size: 14px !important;
  }

  .faq-section-new {
    padding: 36px 0 44px !important;
  }
  .faq-heading-left {
    font-size: 22px !important;
  }

  .blog-section-new {
    padding: 32px 0 40px !important;
  }
  .bl-heading {
    font-size: 24px !important;
  }

  .ff-stats-row {
    gap: 16px 10px !important;
  }
  .ff-stat-num,
  .ff-stat-num .timer {
    font-size: 24px !important;
  }
}

/* ---- Tiny ≤360 ---- */
@media (max-width: 360px) {
  .about-new-stats {
    grid-template-columns: 1fr !important;
  }
  .hero-ref-tag {
    font-size: 11px !important;
    padding: 7px 10px !important;
  }
  .plx-svc-stage {
    width: min(200px, 68vw) !important;
  }
}

/* ==================================================================
   HERO FINAL — match desktop: left text + side-by-side rating bar
   (beats theme center / stacked rules)
================================================================== */
@media (max-width: 1199.98px) {
  .hero-ref-container,
  .hero-ref-left,
  .hero-ref-left h1,
  .hero-ref-left h4,
  .hero-ref-left p,
  .hero-ref-tag {
    text-align: left !important;
  }
  .hero-ref-container {
    justify-content: flex-start !important;
    align-items: flex-start !important;
  }
  .hero-ref-actions {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: wrap !important;
    justify-content: flex-start !important;
    align-items: center !important;
    gap: 18px !important;
    width: auto !important;
    max-width: 100% !important;
  }
  .hero-ref-left h1,
  .hero-ref-left h4,
  .hero-ref-left p {
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-ref-stats {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
  }
  .hero-ref-stat-box {
    flex: 1 1 50% !important;
    width: auto !important;
    min-width: 0 !important;
  }

  /* CTA button — identical to desktop pill */
  .hero-ref-main-btn,
  a.hero-ref-main-btn,
  .hero-ref-actions .hero-ref-main-btn,
  .hero-ref-actions a.hero-ref-main-btn {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center !important;
    justify-content: flex-start !important;
    gap: 14px !important;
    width: auto !important;
    max-width: 100% !important;
    min-width: 0 !important;
    min-height: 0 !important;
    height: auto !important;
    padding: 5px 24px 5px 5px !important;
    border-radius: 999px !important;
    background: #15150F !important;
    color: #CDFF4D !important;
    border: 1px solid rgba(205, 255, 77, 0.35) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
  }
  .hero-ref-main-btn .hero-btn-arrow,
  a.hero-ref-main-btn .hero-btn-arrow {
    width: 36px !important;
    height: 36px !important;
    min-width: 36px !important;
    border-radius: 50% !important;
    background: #CDFF4D !important;
    color: #15150F !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    flex-shrink: 0 !important;
    font-size: 16px !important;
    line-height: 1 !important;
  }
  .hero-ref-main-btn .hero-btn-text,
  a.hero-ref-main-btn .hero-btn-text {
    color: #CDFF4D !important;
    -webkit-text-fill-color: #CDFF4D !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    white-space: nowrap !important;
    line-height: 1 !important;
    flex-shrink: 0 !important;
  }
}

/* ==================================================================
   FUN FACTS — same as desktop/web, only scaled for smaller screens
   No alternate mobile layout (no pill strip, no stacked redesign).
================================================================== */
@media (max-width: 1199.98px) {
  .fun-facts-new,
  body .fun-facts-new,
  div.fun-facts-new,
  .ff-bottom,
  body .ff-bottom,
  .fun-facts-new .ff-bottom,
  .ff-mountain,
  .fun-facts-new .ff-mountain {
    background: #15150F !important;
    background-color: #15150F !important;
  }

  /* Mountain — same overlay structure as desktop */
  .ff-mountain,
  .fun-facts-new .ff-mountain {
    position: relative !important;
    height: 240px !important;
    overflow: hidden !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    line-height: 0 !important;
  }
  .ff-mountain svg {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
  }

  /* Labels stay absolutely positioned on the mountain (like web) */
  .fun-facts-new .ff-labels,
  .ff-mountain .ff-labels,
  .ff-labels {
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    overflow: visible !important;
    background: transparent !important;
    pointer-events: none !important;
    flex-direction: unset !important;
    flex-wrap: unset !important;
    gap: 0 !important;
  }

  .fun-facts-new .ff-tag,
  .ff-labels .ff-tag,
  .ff-tag {
    position: absolute !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    gap: 6px !important;
    transform: translateX(-50%) !important;
    left: inherit; /* keep .ff-tag-N left/top */
    top: inherit;
    z-index: 3 !important;
    flex-shrink: unset !important;
  }

  /* Keep desktop tag positions */
  .ff-tag-1 { left: 20% !important; top: 38% !important; }
  .ff-tag-2 { left: 32% !important; top: 54% !important; }
  .ff-tag-3 { left: 43% !important; top: 28% !important; }
  .ff-tag-4 { left: 53% !important; top: 42% !important; }
  .ff-tag-5 { left: 63% !important; top: 14% !important; }
  .ff-tag-6 { left: 74% !important; top: 24% !important; }

  .fun-facts-new .ff-tag-box,
  .ff-labels .ff-tag-box,
  .ff-tag-box {
    background: #ffffff !important;
    border: 1.5px solid #CDFF4D !important;
    border-radius: 999px !important;
    padding: 5px 10px !important;
    font-size: 9px !important;
    font-weight: 700 !important;
    letter-spacing: 0.02em !important;
    color: #15150F !important;
    -webkit-text-fill-color: #15150F !important;
    white-space: nowrap !important;
    box-shadow: 0 0 12px rgba(205, 255, 77, 0.4) !important;
  }

  .fun-facts-new .ff-tag-num,
  .ff-labels .ff-tag-num,
  .ff-tag-num {
    background: #CDFF4D !important;
    border: 1.5px solid #CDFF4D !important;
    border-radius: 50% !important;
    width: 26px !important;
    height: 26px !important;
    font-size: 9px !important;
    font-weight: 800 !important;
    color: #15150F !important;
    -webkit-text-fill-color: #15150F !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    box-shadow:
      0 0 0 4px rgba(205, 255, 77, 0.2),
      0 2px 10px rgba(205, 255, 77, 0.4) !important;
  }

  .ff-rocket {
    display: block !important;
    position: absolute !important;
    right: 12% !important;
    top: 6% !important;
    width: 56px !important;
    height: 56px !important;
    z-index: 5 !important;
  }
  .ff-rocket img {
    width: 100% !important;
    height: 100% !important;
    object-fit: contain !important;
  }

  /* Bottom — same content order as web */
  .ff-bottom,
  body .ff-bottom,
  .fun-facts-new .ff-bottom {
    margin-top: -4px !important;
    padding: 20px 0 56px !important;
  }
  .ff-bottom > .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .ff-bottom-inner {
    display: grid !important;
    grid-template-columns: 260px minmax(0, 1fr) !important;
    gap: 36px !important;
    align-items: start !important;
    max-width: 1140px !important;
    margin: 0 auto !important;
    padding: 0 !important;
    width: 100% !important;
  }

  .ff-intro-card,
  .ff-ranking-card {
    width: 100% !important;
    max-width: 260px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ff-ranking-thumb {
    width: 100% !important;
    max-width: 100% !important;
    height: 160px !important;
    object-fit: cover !important;
    border-radius: 14px !important;
  }

  .ff-right {
    max-width: 100% !important;
    min-width: 0 !important;
  }
  .fun-facts-new .ff-right-title,
  .ff-right-title {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
    font-size: clamp(28px, 4vw, 40px) !important;
    line-height: 1.1 !important;
    margin: 0 0 22px !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  /* Stats in one row like web (3 items) */
  .ff-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .ff-stat {
    min-width: 0 !important;
    padding: 0 12px 0 0 !important;
    border: none !important;
    text-align: left !important;
  }
  .ff-stat + .ff-stat {
    padding-left: 12px !important;
    border-left: none !important;
  }

  .fun-facts-new .ff-stat-num,
  .fun-facts-new .ff-stat-num .timer,
  .fun-facts-new .ff-stat-num span.timer,
  .fun-facts-new .ff-stat-num sup,
  .ff-stats-row .ff-stat .ff-stat-num,
  .ff-stats-row .ff-stat .ff-stat-num .timer,
  .ff-stats-row .ff-stat .ff-stat-num sup {
    font-size: clamp(28px, 4.5vw, 40px) !important;
    color: #CDFF4D !important;
    -webkit-text-fill-color: #CDFF4D !important;
    margin: 0 0 14px !important;
    padding: 0 0 12px !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.18) !important;
    display: flex !important;
    align-items: baseline !important;
    white-space: nowrap !important;
  }
  .fun-facts-new .ff-stat-num sup {
    font-size: 0.55em !important;
  }

  .fun-facts-new .ff-stat-lbl,
  .ff-stats-row .ff-stat .ff-stat-lbl,
  .ff-stat-lbl {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: #aaaaaa !important;
    -webkit-text-fill-color: #aaaaaa !important;
    font-size: 13px !important;
    line-height: 1.45 !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    border: none !important;
    text-align: left !important;
  }

  .ff-service-tags {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin-top: 28px !important;
    max-width: 100% !important;
  }
  .fun-facts-new .ff-service-pill,
  .ff-service-pill {
    background: #1a1a1a !important;
    border: 1.5px solid rgba(205, 255, 77, 0.3) !important;
    color: #CDFF4D !important;
    -webkit-text-fill-color: #CDFF4D !important;
    font-size: 12px !important;
    padding: 10px 14px !important;
  }
}

/* Phone: still same web layout, tighter scale (stack only the left card) */
@media (max-width: 767.98px) {
  .ff-mountain,
  .fun-facts-new .ff-mountain {
    height: 180px !important;
  }

  .ff-tag-box {
    padding: 4px 8px !important;
    font-size: 7px !important;
  }
  .ff-tag-num {
    width: 20px !important;
    height: 20px !important;
    font-size: 8px !important;
    box-shadow: 0 0 0 3px rgba(205, 255, 77, 0.2) !important;
  }
  .ff-tag {
    gap: 4px !important;
  }
  .ff-rocket {
    width: 40px !important;
    height: 40px !important;
    right: 10% !important;
  }

  .ff-bottom-inner {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ff-intro-card,
  .ff-ranking-card {
    max-width: 100% !important;
  }
  .ff-ranking-thumb {
    height: 180px !important;
    max-width: 100% !important;
  }

  /* Keep 3 stats in one row like web */
  .ff-stats-row {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
  .ff-stat {
    padding-right: 8px !important;
  }
  .ff-stat + .ff-stat {
    padding-left: 8px !important;
  }
  .fun-facts-new .ff-stat-num,
  .ff-stats-row .ff-stat .ff-stat-num {
    font-size: 22px !important;
    margin-bottom: 10px !important;
    padding-bottom: 8px !important;
  }
  .fun-facts-new .ff-stat-lbl,
  .ff-stat-lbl {
    font-size: 11px !important;
    color: #aaaaaa !important;
    -webkit-text-fill-color: #aaaaaa !important;
  }
  .fun-facts-new .ff-right-title,
  .ff-right-title {
    font-size: 26px !important;
  }
}

@media (max-width: 400px) {
  /* Slightly smaller mountain tags; still desktop-style overlay */
  .ff-mountain,
  .fun-facts-new .ff-mountain {
    height: 150px !important;
  }
  .ff-tag-box {
    font-size: 6px !important;
    padding: 3px 6px !important;
  }
  .ff-tag-num {
    width: 16px !important;
    height: 16px !important;
    font-size: 7px !important;
  }
  .fun-facts-new .ff-stat-num,
  .ff-stats-row .ff-stat .ff-stat-num {
    font-size: 18px !important;
  }
  .fun-facts-new .ff-stat-lbl,
  .ff-stat-lbl {
    font-size: 10px !important;
  }
}

/* ==================================================================
   ABOUT FINAL — mobile layout like desktop, no overlap / clip
   (beats theme absolute/relative badge + float animation conflicts)
================================================================== */
@media (max-width: 991.98px) {
  .about-section-new {
    padding: 52px 0 !important;
    overflow: visible !important;
  }
  .about-section-new .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
  .about-new-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
    align-items: start !important;
    width: 100% !important;
    max-width: 100% !important;
  }
  .about-new-left,
  .about-new-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Keep content visible (avoid stuck opacity:0 if IO is slow) */
  .about-new-left > *,
  .about-section-new .about-new-left > * {
    opacity: 1 !important;
    transform: none !important;
  }
  .about-new-right,
  .about-section-new .about-new-right {
    opacity: 1 !important;
    transform: none !important;
    perspective: none !important;
  }

  .about-new-label {
    display: inline-flex !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: left !important;
    font-size: 11px !important;
    line-height: 1.35 !important;
    box-sizing: border-box;
    word-break: break-word;
  }
  .about-new-heading {
    font-size: clamp(26px, 5vw, 34px) !important;
    line-height: 1.2 !important;
    margin-bottom: 14px !important;
  }
  .about-new-desc,
  .about-new-desc p {
    font-size: 14px !important;
    line-height: 1.7 !important;
    margin-bottom: 20px !important;
  }

  /* Stats — 3 across like desktop */
  .about-new-stats {
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 8px !important;
    width: 100% !important;
    flex-direction: unset !important;
  }
  .about-stat-pill {
    width: 100% !important;
    min-width: 0 !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    padding: 12px 6px !important;
    box-sizing: border-box !important;
  }
  .about-stat-num {
    font-size: clamp(15px, 3.6vw, 20px) !important;
  }
  .about-stat-lbl {
    font-size: 10px !important;
    line-height: 1.25 !important;
    text-align: center !important;
    margin-top: 4px !important;
  }

  .about-new-features {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .about-feature-card {
    font-size: 13px !important;
    padding: 12px 12px !important;
    min-width: 0 !important;
  }
  .about-feature-card:hover {
    transform: none !important;
  }

  .about-team-row {
    flex-direction: row !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 10px !important;
  }

  .about-new-btn,
  a.about-new-btn {
    width: auto !important;
    max-width: 100% !important;
    justify-content: center !important;
    white-space: normal !important;
  }

  /* Image + badge — desktop-style overlay, no float collision */
  .about-new-right {
    position: relative !important;
    padding: 0 !important;
    margin-top: 4px !important;
  }
  .about-main-img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: none !important;
    aspect-ratio: 4 / 3;
    object-fit: cover !important;
    object-position: center 20% !important;
    display: block !important;
    margin: 0 !important;
    border-radius: 16px !important;
    animation: none !important;
    transform: none !important;
  }
  .about-exp-badge {
    position: absolute !important;
    top: 12px !important;
    left: 12px !important;
    right: auto !important;
    bottom: auto !important;
    width: 96px !important;
    height: 96px !important;
    z-index: 3 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    transform: none !important;
  }
  .about-exp-badge::before {
    animation: none !important;
  }
  .about-exp-number {
    font-size: 28px !important;
  }
  .about-exp-text {
    font-size: 8px !important;
    padding: 0 4px !important;
  }
}

@media (max-width: 767.98px) {
  .about-section-new {
    padding: 44px 0 !important;
  }
  .about-section-new .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .about-new-grid {
    gap: 24px !important;
  }
  .about-new-features {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }
  .about-exp-badge {
    width: 84px !important;
    height: 84px !important;
    top: 10px !important;
    left: 10px !important;
  }
  .about-exp-number {
    font-size: 24px !important;
  }
  .about-exp-text {
    font-size: 7px !important;
  }
  .about-main-img {
    aspect-ratio: 5 / 4;
    border-radius: 14px !important;
  }
}

@media (max-width: 400px) {
  .about-new-label {
    font-size: 10px !important;
    padding: 5px 12px !important;
  }
  .about-new-heading {
    font-size: 22px !important;
  }
  .about-stat-num {
    font-size: 14px !important;
  }
  .about-stat-lbl {
    font-size: 9px !important;
  }
  .about-exp-badge {
    width: 76px !important;
    height: 76px !important;
  }
  .about-exp-number {
    font-size: 20px !important;
  }
}

/* ==================================================================
   ABOUT PAGE (/about-us) — full mobile pass (desktop ≥1200 unchanged)
================================================================== */
@media (max-width: 1199.98px) {
  /* Banner — clear fixed nav, no full-viewport dead space */
  .banner-section {
    height: auto !important;
    min-height: 0 !important;
    padding: calc(var(--site-topbar-height, 84px) + 28px) 20px 48px !important;
    justify-content: flex-start !important;
  }
  .banner-title {
    font-size: clamp(36px, 7vw, 52px) !important;
    line-height: 1.1 !important;
    word-break: break-word;
  }
  .banner-desc {
    font-size: 14px !important;
    max-width: 100% !important;
  }
  .banner-social-inline,
  .banner-section .header-social-share.banner-social-inline {
    display: flex !important;
    position: static !important;
    margin: 24px 0 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
  }
  .banner-social-inline ul {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .banner-section .hero__scroll {
    display: none !important;
  }
  .banner-blob-1,
  .banner-blob-2,
  .banner-blob-3 {
    opacity: 0.45;
    transform: scale(0.7);
  }

  /* Hero under banner — no extra topbar padding */
  .ab-hero {
    padding: 48px 0 40px !important;
  }
  .ab-hero .container,
  .wc-section .container,
  .ab-service-row .container,
  .team-section-v3 .container,
  .testimonial-section .container {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }
}

@media (max-width: 991.98px) {
  .ab-hero {
    padding: 40px 0 32px !important;
  }
  .ab-hero-grid {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
  }
  .ab-left-h1 {
    font-size: clamp(28px, 6vw, 40px) !important;
  }
  .ab-left-desc {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }
  .ab-left-desc img,
  .ab-left-desc table,
  .ab-left-desc iframe {
    max-width: 100% !important;
    height: auto !important;
  }
  .ab-right-visual {
    --orbit-r: 135px !important;
    --orbit-node: 48px !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 340px !important;
    margin: 8px auto 0 !important;
    overflow: visible !important;
  }
  .ab-orbit-svg {
    width: min(320px, 88vw) !important;
    height: auto !important;
  }

  .wc-section {
    padding: 48px 0 56px !important;
    overflow: hidden !important;
  }
  .wc-header {
    flex-direction: column !important;
    gap: 16px !important;
    margin-bottom: 28px !important;
  }
  .wc-heading {
    font-size: clamp(26px, 5.5vw, 36px) !important;
  }
  .wc-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }
  .wc-card {
    min-width: 0 !important;
  }
  .ab-contact-wrap {
    text-align: center;
    margin-top: 28px !important;
  }
  .ab-contact-btn {
    display: inline-flex !important;
    max-width: 100%;
    white-space: normal !important;
  }

  .ab-service-row {
    padding: 0 0 28px !important;
  }
  .ab-service-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  .team-section-v3 .team-lead-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .team-section-v3 .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }

  /* Testimonials — kill overlapping avatar / huge margins */
  .testimonial-section.light-section {
    padding: 48px 0 56px !important;
    overflow: hidden !important;
  }
  .testimonial-section-slider,
  .testimonial-section .owl-carousel {
    max-width: 100% !important;
  }
  blockquote.testimonial-slide {
    margin: 12px 0 !important;
  }
  .testimonial-layout1 {
    margin: 0 8px !important;
    padding: 24px 18px 22px !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
  }
  .testimonial-layout1 .item-figure {
    position: static !important;
    left: auto !important;
    top: auto !important;
    width: 72px !important;
    height: 72px !important;
    margin: 0 auto 14px !important;
    padding: 4px !important;
    flex-shrink: 0;
  }
  .testimonial-layout1 .item-figure img {
    max-width: 100% !important;
    width: 100% !important;
    height: 100% !important;
    object-fit: cover;
    border-radius: 50%;
  }
  .testimonial-layout1 .item-content {
    width: 100% !important;
    text-align: center !important;
  }
  .testimonial-layout1 .item-title {
    font-size: 18px !important;
  }
  .testimonial-layout1 .item-sub-title {
    font-size: 13px !important;
    margin-bottom: 10px !important;
  }
  .testimonial-layout1 .item-paragraph,
  .testimonial-layout1 .item-paragraph p {
    font-size: 14px !important;
    line-height: 1.65 !important;
  }
}

@media (max-width: 767.98px) {
  .banner-section {
    padding: calc(var(--site-topbar-height, 84px) + 20px) 16px 40px !important;
  }
  .banner-title {
    font-size: clamp(30px, 8vw, 40px) !important;
  }
  /* Force-show socials (venor hides .header-social-share ≤767) */
  .banner-section .header-social-share,
  .banner-social-inline {
    display: flex !important;
  }

  .ab-hero {
    padding: 36px 0 28px !important;
  }
  .ab-hero .container,
  .wc-section .container,
  .ab-service-row .container,
  .team-section-v3 .container,
  .testimonial-section .container {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }

  .ab-right-visual {
    --orbit-r: 118px !important;
    --orbit-node: 44px !important;
    height: 300px !important;
  }
  .ab-orbit-svg {
    width: min(280px, 85vw) !important;
  }

  .wc-grid {
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .ab-service-grid {
    grid-template-columns: 1fr !important;
  }

  .members-section.team-section-v3 {
    padding: 36px 0 64px !important;
  }
  .team-section-v3 .team-lead-grid {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
    gap: 28px !important;
  }
  .team-section-v3 .team-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 24px 12px !important;
  }
  .team-section-v3 .team-person-social {
    opacity: 1 !important;
    transform: none !important;
  }

  .testimonial-layout1 {
    margin: 0 4px !important;
    padding: 20px 14px 18px !important;
  }
}

@media (max-width: 575.98px) {
  .ab-right-visual {
    --orbit-r: 105px !important;
    --orbit-node: 40px !important;
    height: 270px !important;
  }
  .ab-orbit-center {
    width: 78px !important;
    height: 78px !important;
  }
  .ab-orbit-center img {
    width: 44px !important;
  }
  .wc-heading {
    font-size: 26px !important;
  }
  .ab-contact-btn {
    width: 100% !important;
    justify-content: center !important;
    box-sizing: border-box;
  }
}

@media (max-width: 400px) {
  .banner-title {
    font-size: 28px !important;
  }
  .team-section-v3 .team-grid {
    grid-template-columns: 1fr !important;
    max-width: 260px !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
  .ab-right-visual {
    --orbit-r: 96px !important;
    --orbit-node: 38px !important;
    height: 250px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .ab-orbit-center,
  .ab-orbit-center::before,
  .ab-orbit-center::after,
  .ab-orbit-center img,
  .banner-blob,
  .ab-orbit-svg circle[style*="animation"] {
    animation: none !important;
  }
}