/* ========================================================================== 
   LEAFORGE 365 - MOBILE RESPONSIVE CORRECTIONS
   VERSION: 0002

   Loaded after leaforge.css, slider.css and inner-page-header-images.css.
   All rules are restricted to tablet/mobile widths so the approved desktop
   appearance remains unchanged.
   ========================================================================== */

/* --------------------------------------------------------------------------
   01. Tablet header and navigation
   -------------------------------------------------------------------------- */
@media (max-width: 1100px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-x: clip !important;
  }

  *,
  *::before,
  *::after {
    box-sizing: border-box;
  }

  img,
  picture,
  video,
  canvas,
  svg,
  iframe {
    max-width: 100%;
  }

  .lf-fw2-header .lf-fw2-main,
  .lf-fw2-header.is-scrolled .lf-fw2-main,
  body:not(.home-page) .lf-fw2-header.is-scrolled .lf-fw2-main {
    background: #002228 !important;
    background-color: #002228 !important;
    box-shadow: 0 7px 20px rgba(0, 0, 0, 0.16) !important;
  }

  .lf-fw2-header .lf-fw2-main-inner,
  .lf-fw2-header.is-scrolled .lf-fw2-main-inner {
    width: 100% !important;
    height: 78px !important;
    min-height: 78px !important;
    padding: 0 22px !important;
    gap: 14px !important;
  }

  .lf-fw2-header .lf-fw2-logo,
  .lf-fw2-header.is-scrolled .lf-fw2-logo,
  .lf-fw2-logo {
    width: auto !important;
    min-width: 0 !important;
    max-width: min(270px, calc(100vw - 100px)) !important;
    flex: 0 1 auto !important;
  }

  .lf-fw2-header .lf-fw2-logo img,
  .lf-fw2-header .lf-fw2-logo-img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo-img {
    width: min(255px, calc(100vw - 112px)) !important;
    max-width: 100% !important;
    height: auto !important;
    max-height: 54px !important;
    object-fit: contain !important;
  }

  .lf-fw2-header .lf-fw2-brand-tagline,
  .lf-fw2-header.is-scrolled .lf-fw2-brand-tagline,
  .lf-fw2-nav {
    display: none !important;
  }

  .lf-fw2-header .lf-fw2-menu-toggle,
  .lf-fw2-header.is-scrolled .lf-fw2-menu-toggle,
  #lfFw2MenuToggle {
    width: 46px !important;
    height: 46px !important;
    min-width: 46px !important;
    flex: 0 0 46px !important;
    margin-left: auto !important;
    border-color: rgba(255, 255, 255, 0.55) !important;
    background: rgba(255, 255, 255, 0.08) !important;
  }

  body.lf-header-scrolled:not(.home-page) {
    padding-top: 78px !important;
  }

  #lfMegaMenu,
  .lf-mega-menu {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    max-height: 100dvh !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    overscroll-behavior: contain;
    background: #002228 !important;
    background-color: #002228 !important;
  }

  .lf-mega-menu-left {
    width: 100% !important;
    min-height: 0 !important;
    padding: 92px 24px 32px !important;
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: 28px 24px !important;
    background: #002228 !important;
    background-color: #002228 !important;
  }

  .lf-mega-menu-right {
    width: 100% !important;
    min-height: 0 !important;
    padding: 34px 24px 46px !important;
    background: #04414b !important;
    background-color: #04414b !important;
  }

  .lf-mega-col,
  .lf-mega-col ul,
  .lf-mega-col li {
    min-width: 0 !important;
  }

  .lf-mega-col h2 {
    margin-bottom: 14px !important;
    font-size: 18px !important;
    line-height: 1.3 !important;
  }

  .lf-mega-col a,
  .lf-mega-quick-links a,
  .lf-mega-contact a {
    min-height: 44px !important;
    padding-top: 9px !important;
    padding-bottom: 9px !important;
    line-height: 1.45 !important;
    overflow-wrap: anywhere !important;
  }

  .lf-mega-close {
    position: absolute !important;
    top: 22px !important;
    right: 22px !important;
    width: 48px !important;
    height: 48px !important;
  }

  .lf-fw2-header .lf-fw2-bc-for-dropdown > .lf-fw2-bc-for-menu {
    width: 100% !important;
    min-width: 0 !important;
    grid-template-columns: 1fr !important;
  }
}

/* --------------------------------------------------------------------------
   02. Mobile color consistency and global readability
   -------------------------------------------------------------------------- */
@media (max-width: 900px) {
  .lf-bc-modules-green-section,
  body.home-page .lf-bc-modules-green-section,
  body:not(.home-page) .lf-bc-modules-green-section {
    background: #04414b !important;
    background-color: #04414b !important;
  }

  .lf-bc-modules-green-heading,
  body.home-page .lf-bc-modules-green-heading,
  .lf-bc-modules-green-grid,
  body.home-page .lf-bc-modules-green-grid {
    padding-left: 20px !important;
    padding-right: 20px !important;
  }

  body.home-page .lf-home-transform {
    background: linear-gradient(180deg, #268ed3 0 46%, #093c6e 46% 100%) !important;
  }
}

@media (max-width: 768px) {
  .lf-v7-why-section > .lf-v7-why-wrap,
  .lf-page-reusable-why-section > .lf-v7-why-wrap,
  body.home-page .lf-v7-why-section > .lf-v7-why-wrap,
  body:not(.home-page) .lf-page-reusable-why-section > .lf-v7-why-wrap,
  .lf-v7-why-section > .lf-v7-why-wrap > .lf-v7-why-content,
  .lf-page-reusable-why-section > .lf-v7-why-wrap > .lf-v7-why-content {
    background: #04414b !important;
    background-color: #04414b !important;
  }

  .lf-v7-why-section > .lf-v7-why-wrap > .lf-v7-why-image,
  .lf-page-reusable-why-section > .lf-v7-why-wrap > .lf-v7-why-image {
    background: #1e5e69 !important;
    background-color: #1e5e69 !important;
  }
}

/* --------------------------------------------------------------------------
   03. Home slider - readable content over the image
   -------------------------------------------------------------------------- */
@media (max-width: 700px) {
  body.home-page .lf-home-hero-slider,
  body.home-page .lf-home-slide {
    height: 744px !important;
    min-height: 744px !important;
    max-height: 744px !important;
  }

  body.home-page .lf-home-slide {
    background-position: 65% center !important;
  }

  body.home-page .lf-home-slide::before {
    content: "" !important;
    display: block !important;
    position: absolute !important;
    inset: 0 !important;
    z-index: 1 !important;
    pointer-events: none !important;
    background: linear-gradient(
      180deg,
      rgba(2, 15, 27, 0.93) 0%,
      rgba(2, 15, 27, 0.88) 55%,
      rgba(2, 15, 27, 0.94) 100%
    ) !important;
  }

  body.home-page .lf-home-slide::after {
    opacity: 0.3 !important;
  }

  body.home-page .lf-home-slide-content,
  body.home-page .lf-home-hero-slider .lf-home-slide-content {
    width: calc(100% - 36px) !important;
    max-width: calc(100% - 36px) !important;
    min-height: 100% !important;
    margin: 0 18px !important;
    padding: 110px 0 66px !important;
    justify-content: center !important;
  }

  body.home-page .lf-home-slide-content h1,
  body.home-page .lf-home-hero-slider .lf-home-slide-content h1 {
    max-width: 100% !important;
    margin-bottom: 16px !important;
    color: #ffffff !important;
    font-size: clamp(29px, 8vw, 36px) !important;
    line-height: 1.15 !important;
    letter-spacing: -0.55px !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.45) !important;
    overflow-wrap: normal !important;
  }

  body.home-page .lf-home-slide-content h1 br,
  body.home-page .lf-home-hero-slider .lf-home-slide-content h1 br {
    display: none !important;
  }

  body.home-page .lf-home-slide-content p,
  body.home-page .lf-home-hero-slider .lf-home-slide-content p {
    max-width: 100% !important;
    margin-bottom: 20px !important;
    color: rgba(255, 255, 255, 0.94) !important;
    font-size: 14.5px !important;
    line-height: 1.62 !important;
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.42) !important;
  }

  body.home-page .lf-home-slide-eyebrow {
    margin-bottom: 16px !important;
  }

  body.home-page .lf-home-eyebrow-text {
    color: #f9b857 !important;
    font-size: 11.5px !important;
    line-height: 1.4 !important;
    white-space: normal !important;
  }

  body.home-page .lf-home-slide-features {
    width: 100% !important;
    max-width: 100% !important;
    margin-bottom: 22px !important;
    display: grid !important;
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
    gap: 12px !important;
  }

  body.home-page .lf-home-feature-item {
    min-width: 0 !important;
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 7px !important;
  }

  body.home-page .lf-home-feature-icon {
    width: 40px !important;
    height: 40px !important;
    flex: 0 0 40px !important;
  }

  body.home-page .lf-home-feature-icon svg {
    width: 26px !important;
    height: 26px !important;
  }

  body.home-page .lf-home-feature-text {
    color: #ffffff !important;
    font-size: 11.5px !important;
    line-height: 1.38 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
  }

  body.home-page .lf-home-slide-buttons,
  body.home-page .lf-home-hero-slider .lf-home-slide-buttons {
    width: 100% !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 10px !important;
  }

  body.home-page .lf-home-hero-slider .lf-home-btn {
    min-height: 50px !important;
    padding: 13px 16px !important;
    font-size: 11.5px !important;
    line-height: 1.35 !important;
    text-align: center !important;
  }

  body.home-page .lf-home-slider-dots {
    bottom: 28px !important;
  }
}

@media (max-width: 430px) {
  .lf-fw2-header .lf-fw2-main-inner,
  .lf-fw2-header.is-scrolled .lf-fw2-main-inner {
    height: 72px !important;
    min-height: 72px !important;
    padding: 0 16px !important;
  }

  .lf-fw2-header .lf-fw2-logo,
  .lf-fw2-header.is-scrolled .lf-fw2-logo,
  .lf-fw2-logo {
    max-width: calc(100vw - 88px) !important;
  }

  .lf-fw2-header .lf-fw2-logo img,
  .lf-fw2-header .lf-fw2-logo-img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo-img {
    width: min(220px, calc(100vw - 96px)) !important;
    max-height: 48px !important;
  }

  body.lf-header-scrolled:not(.home-page) {
    padding-top: 72px !important;
  }

  .lf-mega-menu-left {
    grid-template-columns: 1fr !important;
    padding: 84px 20px 30px !important;
    gap: 24px !important;
  }

  .lf-mega-menu-right {
    padding: 30px 20px 42px !important;
  }

  body.home-page .lf-home-hero-slider,
  body.home-page .lf-home-slide {
    height: 780px !important;
    min-height: 780px !important;
    max-height: 780px !important;
  }

  body.home-page .lf-home-slide-content,
  body.home-page .lf-home-hero-slider .lf-home-slide-content {
    width: calc(100% - 32px) !important;
    max-width: calc(100% - 32px) !important;
    margin: 0 16px !important;
    padding: 96px 0 60px !important;
  }

  body.home-page .lf-home-slide-content h1,
  body.home-page .lf-home-hero-slider .lf-home-slide-content h1 {
    font-size: 29px !important;
  }

  body.home-page .lf-home-slide-features {
    grid-template-columns: 1fr !important;
    gap: 9px !important;
  }

  body.home-page .lf-home-feature-item {
    flex-direction: row !important;
    align-items: center !important;
    gap: 11px !important;
  }

  body.home-page .lf-home-feature-icon {
    width: 36px !important;
    height: 36px !important;
    flex-basis: 36px !important;
  }

  body.home-page .lf-home-feature-icon svg {
    width: 23px !important;
    height: 23px !important;
  }

  body.home-page .lf-home-feature-text {
    font-size: 12px !important;
  }

  body.home-page .lf-home-slide-buttons,
  body.home-page .lf-home-hero-slider .lf-home-slide-buttons {
    flex-direction: column !important;
  }

  body.home-page .lf-home-hero-slider .lf-home-btn {
    width: 100% !important;
    max-width: none !important;
  }
}

/* --------------------------------------------------------------------------
   04. Common section sizing, typography and text wrapping
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  body {
    font-size: 16px;
    line-height: 1.6;
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
  }

  main,
  section,
  article,
  aside,
  header,
  footer,
  div {
    min-width: 0;
  }

  h1,
  h2,
  h3,
  h4,
  h5,
  h6,
  p,
  li,
  a,
  label,
  button,
  input,
  select,
  textarea {
    overflow-wrap: anywhere;
    word-break: normal;
  }

  p,
  li {
    line-height: 1.68;
  }

  section[class],
  .lf-modern-card-section,
  .lf-bc-area-section,
  .lf-benefits-section,
  .lf-cap-section,
  .lf-impl-section {
    scroll-margin-top: 82px;
  }

  .lf-page-container,
  .lf-fw2-container,
  .lf-modern-container,
  .lf-cap-container,
  .lf-impl-container,
  .lf-training-container,
  .lf-pricing-container,
  .lf-partner-container,
  .lf-sa-container,
  .lf-support-container,
  .lf-rapid-container,
  .lf-blog-container,
  .lf365-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lf-page-hero,
  .lf-modern-card-section,
  .lf-bc-area-section,
  .lf-benefits-section {
    margin-left: 0 !important;
    margin-right: 0 !important;
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lf-modern-heading,
  .lf-bc-heading,
  .lf-cap-heading,
  .lf-impl-heading,
  .lf-training-heading,
  .lf-pricing-heading,
  .lf-partner-heading {
    margin-bottom: 34px !important;
  }

  .lf-modern-heading h2,
  .lf-bc-heading h2,
  .lf-cap-heading h2,
  .lf-impl-heading h2,
  .lf-training-heading h2,
  .lf-pricing-heading h2,
  .lf-partner-heading h2,
  .lf-section-title,
  .lf-page-hero h1 {
    font-size: clamp(28px, 8vw, 36px) !important;
    line-height: 1.2 !important;
    letter-spacing: -0.45px !important;
  }

  .lf-section-subtitle,
  [class*="small-title"],
  [class*="eyebrow"] {
    letter-spacing: 2.2px !important;
  }

  .lf-modern-card,
  .lf-cap-card,
  .lf-impl-card,
  .lf-training-card,
  .lf-pricing-card,
  .lf-partner-card,
  .lf-support-card,
  .lf-sa-card,
  .lf-blog-card {
    min-height: 0 !important;
    padding: 22px 20px !important;
  }

  .lf-modern-card p,
  .lf-cap-card p,
  .lf-impl-card p,
  .lf-training-card p,
  .lf-pricing-card p,
  .lf-partner-card p,
  .lf-support-card p,
  .lf-sa-card p,
  .lf-blog-card p {
    font-size: 14px !important;
    line-height: 1.7 !important;
  }

  img {
    height: auto;
  }

  button,
  [role="button"],
  input[type="submit"],
  input[type="button"],
  a[class*="btn"],
  a[class*="button"] {
    min-height: 44px;
  }

  .lf-inner-hero-actions,
  .lf-partner-cta-inner,
  body.home-page .lf-home-adviser-cta__inner,
  body.page-leaforge365 .lf-book-demo__inner {
    align-items: stretch !important;
  }

  .lf-inner-hero-actions > a,
  .lf-partner-cta-inner > a,
  body.home-page .lf-home-adviser-cta__inner a,
  body.page-leaforge365 .lf-book-demo__inner a {
    width: 100% !important;
    max-width: 100% !important;
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   05. Inner-page hero correction
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .lf-inner-hero,
  .lf-page-hero.lf-contact-hero {
    min-height: 0 !important;
    padding: 76px 18px 56px !important;
    align-items: flex-start !important;
  }

  .lf-inner-hero::before,
  .lf-page-hero::before,
  .lf-contact-hero::before {
    width: 100% !important;
    background: linear-gradient(
      180deg,
      rgba(0, 34, 40, 0.91) 0%,
      rgba(0, 34, 40, 0.83) 100%
    ) !important;
  }

  .lf-inner-hero-container {
    width: 100% !important;
    max-width: 100% !important;
    grid-template-columns: 1fr !important;
    gap: 28px !important;
  }

  .lf-inner-hero-content,
  .lf-page-hero .lf-page-container,
  .lf-contact-hero .lf-page-container {
    width: 100% !important;
    max-width: 100% !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  .lf-inner-hero-content h1,
  .lf-page-hero h1,
  .lf-contact-hero h1 {
    margin-bottom: 18px !important;
    color: #ffffff !important;
    font-size: clamp(32px, 9vw, 42px) !important;
    line-height: 1.13 !important;
    letter-spacing: -0.7px !important;
    text-transform: none !important;
    text-shadow: 0 3px 18px rgba(0, 0, 0, 0.3) !important;
  }

  .lf-inner-hero-content h1 span,
  .lf-page-hero h1 span,
  .lf-contact-hero h1 span {
    color: #f9b857 !important;
  }

  .lf-inner-hero-content p,
  .lf-page-hero p,
  .lf-contact-hero p {
    max-width: 100% !important;
    margin-bottom: 24px !important;
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: 15px !important;
    line-height: 1.68 !important;
  }

  .lf-inner-hero-tags {
    gap: 8px !important;
    margin-bottom: 25px !important;
  }

  .lf-inner-hero-tags span {
    min-height: 34px !important;
    padding: 7px 11px !important;
    font-size: 12px !important;
  }

  .lf-inner-hero-actions {
    width: 100% !important;
    flex-direction: column !important;
    gap: 10px !important;
  }

  .lf-inner-hero-primary,
  .lf-inner-hero-secondary {
    min-height: 50px !important;
    padding: 0 18px !important;
    border-radius: 7px !important;
    font-size: 13px !important;
  }

  .lf-inner-hero-primary {
    background: #08745f !important;
  }

  .lf-inner-hero-secondary {
    background: #ffffff !important;
    color: #04414b !important;
    border-color: #ffffff !important;
  }

  .lf-inner-hero-card {
    justify-self: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 23px 20px !important;
    border-radius: 16px !important;
    background: rgba(255, 255, 255, 0.96) !important;
  }

  .lf-inner-hero-card h2 {
    font-size: 20px !important;
  }

  .lf-inner-hero-card li {
    font-size: 13.5px !important;
  }
}

/* --------------------------------------------------------------------------
   06. One-column mobile layouts for major content sections
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :is(
    .lf-v7-projects-grid,
    .lf-modern-card-grid,
    .lf-gym-about-wrap,
    .lf-np-studio-grid,
    .lf-bc-classic-grid,
    .lf-bc-row,
    .lf-benefits-container,
    .lf-bc-potential-grid,
    .lf-bc-feature-items,
    .lf-wd-home-split,
    .lf-wd-home-dark-band,
    .lf-wd-home-green-split,
    .lf-wd-process-layout,
    .contact-container,
    .lf-pricing-card-grid,
    .lf-pricing-cost-grid,
    .lf-pricing-assessment-grid,
    .lf-pricing-steps,
    .lf-pricing-faq-grid,
    .lf-partner-hero-inner,
    .lf-partner-benefit-grid,
    .lf-partner-service-grid,
    .lf-partner-model-grid,
    .lf-partner-commercial-grid,
    .lf-partner-process-grid,
    .lf-partner-scenarios-grid,
    .lf-partner-trust-grid,
    body.page-blog .lf-blog-card-grid,
    body.page-business-central-customization .lf-bc-dev-grid,
    body.page-business-central-implementation .lf-card-grid,
    body.page-business-central-implementation .bc-services-grid,
    body.page-business-central-implementation .lf-rapid-info-layout,
    body.page-business-central-implementation .lf-help-layout,
    body.page-business-central-implementation .lf-rapid-why-layout,
    body.page-business-central-implementation .lf-ri-card-grid,
    body.page-business-central-implementation .lf-r5-fit-grid,
    body.page-business-central-rapid5 .lf-rapid5-layout,
    body.page-business-central-rapid5 .lf-r5-steps-grid,
    body.page-business-central-rapid5 .lf-r5-home-style-grid,
    body.page-business-central-rapid8 .lf-rapid8-layout,
    body.page-business-central-rapid8 .lf-r8-steps-grid,
    body.page-business-central-rapid8 .lf-r5-home-style-grid,
    body.page-business-central-support .lf-bc-support-grid,
    body.page-business-central-support .lf-support-pro-grid-4,
    body.page-business-central-support .lf-support-plans-grid,
    body.page-business-central-support .lf-support-process-grid,
    body.page-business-central-support .lf-support-value-grid,
    body.page-smart-business-central-access .lf-sa-intro-grid,
    body.page-smart-business-central-access .lf-sa-cap-grid,
    body.page-smart-business-central-access .lf-sa-process-grid,
    body.page-smart-business-central-access .lf-sa-use-layout,
    body.page-smart-business-central-access .lf-sa-benefit-grid,
    body.page-smart-business-central-access .lf-sa-license-layout,
    body.home-page .lf-home-adviser-cta__inner,
    body.home-page .lf-small-business-help,
    #lfMegaMenu,
    .lf-why-grid,
    .lf-gym-feature-strip,
    body.page-leaforge365 .lf-book-demo__inner,
    body.home-page .lf-home-transform__inner,
    body.home-page .lf-home-transform__gallery,
    body.page-business-central-implementation .lf-smarter-erp-container,
    .lf-cap-overview-grid,
    .lf-cap-feature-grid,
    .lf-cap-step-grid,
    .lf-cap-benefits-grid,
    body.page-business-central-capabilities .lf-capabilities-directory__grid,
    body.page-business-central-rapid-packages .lf-rapid-packages-directory__grid,
    body.page-d365-bc-services .lf-rapid-packages-directory__grid,
    body.page-dynamics-365-business-central .lf-rapid-packages-directory__grid,
    body.page-business-central-implementation .lf-rapid-packages-directory__grid,
    body.home-page .lf-rapid-packages-directory__grid,
    body.page-leaforge365 .lf365-index-grid,
    body.page-leaforge365 .lf-blog-card-grid,
    .lf-home-why-overview,
    .lf-impl-showcase__panel,
    .lf-impl-dual-grid,
    .lf-impl-timeline-grid,
    .lf-impl-card-grid--three,
    .lf-impl-card-grid--four,
    .lf-impl-readiness-grid,
    .lf-impl-process-grid,
    .lf-impl-module-grid,
    .lf-impl-feature-split,
    .lf-impl-faq-layout,
    body.page-business-central-rapid5 .lf-rapid-fit-grid,
    body.page-business-central-rapid8 .lf-rapid-fit-grid,
    body.page-business-central-rapid5 .lf-r5-classic-grid,
    .lf-rapid-pricing-layout,
    .page-business-central-training .lf-training-audience-grid,
    .page-business-central-training .lf-training-online-grid,
    .page-business-central-training .lf-training-modules-grid,
    .page-business-central-training .lf-training-formats-layout,
    .page-business-central-training .lf-training-formats-grid
  ) {
    grid-template-columns: minmax(0, 1fr) !important;
    columns: 1 !important;
    gap: 22px !important;
  }

  :is(
    .lf-v7-about-wrap,
    .lf-gym-about-wrap,
    .lf-bc-row,
    .lf-wd-home-split,
    .lf-wd-home-dark-band,
    .lf-wd-home-green-split,
    .contact-container,
    .lf-partner-hero-inner,
    .lf-partner-cta-inner,
    .lf-rapid-info-layout,
    .lf-help-layout,
    .lf-rapid-why-layout,
    .lf-rapid5-layout,
    .lf-rapid8-layout,
    .lf-sa-intro-grid,
    .lf-sa-use-layout,
    .lf-sa-license-layout,
    .lf-impl-dual-grid,
    .lf-impl-feature-split,
    .lf-impl-faq-layout,
    .lf-rapid-pricing-layout,
    .lf-training-formats-layout
  ) {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 26px !important;
  }

  :is(
    .lf-modern-card,
    .lf-bc-classic-card,
    .lf-bc-feature,
    .lf-v7-project-card,
    .bc-service-item,
    .lf-ri-card,
    .lf-r5-fit-card,
    .lf-support-card,
    .lf-sa-cap-card,
    .lf-cap-feature-card,
    .lf-impl-card,
    .lf-training-audience-card,
    .lf-training-module-card
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  :is(
    .lf-ri-card-content,
    .lf-modern-card-content,
    .lf-cap-card-content,
    .lf-support-card-content,
    .lf-sa-card-content,
    .lf-blog-card-content
  ) {
    min-height: 0 !important;
  }
}

/* --------------------------------------------------------------------------
   07. Images, split sections and cards
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  :is(
    .lf-v7-about-image,
    .lf-gym-about-image,
    .lf-np-studio-image,
    .lf-wd-home-image,
    .lf-help-image-wrap,
    .lf-rapid-why-image,
    .lf-sa-intro-image,
    .lf-impl-feature-media,
    .lf-training-formats-media
  ) {
    width: 100% !important;
    max-width: 100% !important;
    min-height: 0 !important;
  }

  :is(
    .lf-v7-about-image img,
    .lf-gym-about-image img,
    .lf-np-studio-image img,
    .lf-wd-home-image img,
    .lf-help-image-wrap img,
    .lf-rapid-why-image img,
    .lf-sa-intro-image img,
    .lf-impl-feature-media img,
    .lf-training-formats-media img
  ) {
    width: 100% !important;
    height: clamp(230px, 68vw, 320px) !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .lf-v7-why-section > .lf-v7-why-wrap > .lf-v7-why-image,
  .lf-page-reusable-why-section > .lf-v7-why-wrap > .lf-v7-why-image,
  .lf-v7-why-image img {
    min-height: 290px !important;
    height: 290px !important;
  }

  .lf-bc-module-green-card {
    grid-template-columns: 44px minmax(0, 1fr) !important;
    gap: 14px !important;
  }

  .lf-bc-module-green-content h3 {
    font-size: 20px !important;
  }

  .lf-bc-module-green-content p {
    font-size: 14px !important;
    line-height: 1.68 !important;
  }

  #industries-we-serve .lf-v7-project-inner,
  #industries-we-serve .lf-v7-project-card {
    min-height: 0 !important;
  }

  #industries-we-serve .lf-v7-project-info,
  #industries-we-serve .lf-v7-project-hover {
    position: relative !important;
    inset: auto !important;
    transform: none !important;
    opacity: 1 !important;
    visibility: visible !important;
    height: auto !important;
    min-height: 0 !important;
  }

  #industries-we-serve .lf-v7-project-hover {
    display: none !important;
  }
}

/* --------------------------------------------------------------------------
   08. Forms, tables and long content
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .form-row {
    grid-template-columns: 1fr !important;
    gap: 14px !important;
  }

  input,
  select,
  textarea,
  button {
    max-width: 100%;
    font-size: 16px;
  }

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

  textarea {
    min-height: 135px;
  }

  .table-responsive,
  .lf-table-wrap,
  [class*="table-wrap"],
  [class*="table-responsive"] {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    max-width: 100%;
    font-size: 13px;
  }

  pre,
  code {
    white-space: pre-wrap;
    overflow-wrap: anywhere;
  }
}

/* --------------------------------------------------------------------------
   09. Footer
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .lf-footer-container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }

  .lf-footer-col,
  .lf-footer-about,
  .lf-footer-contact,
  .lf-footer-address {
    width: 100% !important;
    max-width: 100% !important;
    text-align: left !important;
  }

  .lf-footer-address span,
  .lf-footer-address strong,
  .lf-footer-col a,
  .lf-footer-col p {
    text-align: left !important;
  }

  .lf-linkedin {
    margin-left: 0 !important;
    margin-right: auto !important;
  }

  .lf-footer-bottom,
  .lf-footer-bottom-inner {
    padding-left: 20px !important;
    padding-right: 20px !important;
    text-align: center !important;
  }
}

/* --------------------------------------------------------------------------
   10. Extra-small screens
   -------------------------------------------------------------------------- */
@media (max-width: 359px) {
  .lf-fw2-header .lf-fw2-logo img,
  .lf-fw2-header .lf-fw2-logo-img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo img,
  .lf-fw2-header.is-scrolled .lf-fw2-logo-img {
    width: min(195px, calc(100vw - 88px)) !important;
  }

  body.home-page .lf-home-slide-content h1,
  body.home-page .lf-home-hero-slider .lf-home-slide-content h1 {
    font-size: 27px !important;
  }

  .lf-inner-hero-content h1,
  .lf-page-hero h1,
  .lf-contact-hero h1 {
    font-size: 30px !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Final hero animation safeguard: prevent partially animated text/overlay states
   on slower mobile devices and during page restoration. */
@media (max-width: 700px) {
  body.home-page .lf-home-slide::before {
    opacity: 1 !important;
  }

  body.home-page .lf-home-slide-content h1,
  body.home-page .lf-home-slide-content p,
  body.home-page .lf-home-slide-eyebrow,
  body.home-page .lf-home-slide-features,
  body.home-page .lf-home-slide-buttons {
    opacity: 1 !important;
    transform: none !important;
    animation: none !important;
  }
}

@media (max-width: 700px) {
  body.home-page .lf-home-slide::before,
  body.home-page .lf-home-slide::after {
    visibility: visible !important;
  }

  body.home-page .lf-home-hero-slider .lf-home-btn {
    font-size: 12.5px !important;
  }
}

/* --------------------------------------------------------------------------
   11. Mobile media frames and comparison tables
   -------------------------------------------------------------------------- */
@media (max-width: 767px) {
  .lf-small-business-help__image,
  .lf-home-why-overview__image,
  .lf-small-business-help__image picture,
  .lf-home-why-overview__image picture,
  .lf-small-business-help__image img,
  .lf-home-why-overview__image img {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .lf-small-business-help__image,
  .lf-home-why-overview__image {
    overflow: hidden !important;
  }

  .lf-small-business-help__image img,
  .lf-home-why-overview__image img {
    height: clamp(240px, 72vw, 330px) !important;
    min-height: 0 !important;
    object-fit: cover !important;
    object-position: center !important;
  }

  .lf-pricing-table-wrap,
  .lf-impl-table-wrap {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
    padding-bottom: 10px !important;
  }

  .lf-pricing-table,
  .lf-impl-comparison-table {
    width: 680px !important;
    min-width: 680px !important;
    max-width: none !important;
  }

  .lf-pricing-table th,
  .lf-pricing-table td,
  .lf-impl-comparison-table th,
  .lf-impl-comparison-table td {
    padding: 13px 12px !important;
    font-size: 13px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }

  .lf-pricing-table-wrap::after,
  .lf-impl-table-wrap::after {
    content: "Swipe table horizontally to compare";
    display: block;
    padding-top: 9px;
    color: #65777c;
    font: 500 12px/1.4 "Poppins", Arial, sans-serif;
    text-align: left;
  }

  .lf-bc-features-table-section,
  .lf-bc-features-table-container,
  .lf-bc-features-content,
  .lf-bc-features-table,
  .lf-bc-feature-row,
  .lf-bc-feature-category,
  .lf-bc-feature-items {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  .lf-bc-features-table-section {
    padding-left: 18px !important;
    padding-right: 18px !important;
  }

  .lf-bc-feature-row {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
  }

  .lf-bc-feature-category {
    padding: 15px 16px !important;
    font-size: 16px !important;
    line-height: 1.4 !important;
  }

  .lf-bc-feature-items {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    padding: 8px 0 !important;
  }

  .lf-bc-feature-items span {
    width: 100% !important;
    min-width: 0 !important;
    padding: 11px 16px !important;
    font-size: 13.5px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
  }
}

@media (max-width: 767px) {
  .lf-pricing-table-wrap::after,
  .lf-impl-table-wrap::after {
    margin-top: 0;
    padding: 10px 12px !important;
    color: #04414b !important;
    background: #eef4f3 !important;
  }
}

/* Mobile mega-menu: stack the full navigation in one readable column. */
@media (max-width: 1100px) {
  #lfMegaMenu.is-open,
  #lfMegaMenu.force-open,
  body.lf-mega-menu-open #lfMegaMenu,
  html.lf-mega-menu-open #lfMegaMenu,
  .lf-mega-menu.is-open,
  .lf-mega-menu.force-open,
  body.lf-mega-menu-open .lf-mega-menu,
  html.lf-mega-menu-open .lf-mega-menu {
    display: flex !important;
    flex-direction: column !important;
    grid-template-columns: none !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    height: 100dvh !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    overscroll-behavior: contain;
  }

  #lfMegaMenu .lf-mega-menu-left,
  #lfMegaMenu .lf-mega-menu-right,
  .lf-mega-menu .lf-mega-menu-left,
  .lf-mega-menu .lf-mega-menu-right {
    position: relative !important;
    inset: auto !important;
    left: auto !important;
    right: auto !important;
    top: auto !important;
    bottom: auto !important;
    transform: none !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    height: auto !important;
    min-height: 0 !important;
    flex: 0 0 auto !important;
  }

  #lfMegaMenu .lf-mega-menu-left,
  .lf-mega-menu .lf-mega-menu-left {
    order: 1 !important;
    padding-top: 76px !important;
  }

  #lfMegaMenu .lf-mega-menu-right,
  .lf-mega-menu .lf-mega-menu-right {
    order: 2 !important;
  }

  #lfMegaMenu .lf-mega-close,
  .lf-mega-menu .lf-mega-close {
    position: fixed !important;
    top: 16px !important;
    right: 16px !important;
    left: auto !important;
    z-index: 10002 !important;
  }
}