/**
 * Tuwaiq Responsive Architecture
 * Version: 1.0.0
 * Scope: frontend responsive behavior only.
 *
 * Breakpoint reference (content-led, mobile-first):
 * xs  0–359 | sm 360–479 | md 480–767 | tablet 768–1023
 * laptop 1024–1279 | desktop 1280–1535 | wide 1536–1919 | ultra 1920+
 */

/* --------------------------------------------------------------------------
   1. Responsive design tokens
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture {
  --mjw-r-vw-min: 20rem;
  --mjw-r-vw-max: 120rem;

  --mjw-r-gutter: clamp(1rem, 0.55rem + 2.1vw, 4.5rem);
  --mjw-r-container-sm: 48rem;
  --mjw-r-container-md: 64rem;
  --mjw-r-container-lg: 90rem;
  --mjw-r-container-xl: 105rem;

  --mjw-r-space-1: clamp(0.25rem, 0.22rem + 0.14vw, 0.375rem);
  --mjw-r-space-2: clamp(0.5rem, 0.43rem + 0.28vw, 0.75rem);
  --mjw-r-space-3: clamp(0.75rem, 0.64rem + 0.42vw, 1.125rem);
  --mjw-r-space-4: clamp(1rem, 0.82rem + 0.7vw, 1.625rem);
  --mjw-r-space-5: clamp(1.25rem, 0.98rem + 1.05vw, 2.25rem);
  --mjw-r-space-6: clamp(1.75rem, 1.28rem + 1.8vw, 3.5rem);
  --mjw-r-space-7: clamp(2.5rem, 1.72rem + 3vw, 5.5rem);
  --mjw-r-space-8: clamp(3.25rem, 2.08rem + 4.6vw, 8rem);

  --mjw-r-text-xs: clamp(0.75rem, 0.72rem + 0.12vw, 0.875rem);
  --mjw-r-text-sm: clamp(0.875rem, 0.83rem + 0.18vw, 1rem);
  --mjw-r-text-base: clamp(1rem, 0.94rem + 0.22vw, 1.125rem);
  --mjw-r-text-lg: clamp(1.125rem, 1.02rem + 0.42vw, 1.375rem);
  --mjw-r-text-xl: clamp(1.25rem, 1.08rem + 0.68vw, 1.75rem);
  --mjw-r-text-2xl: clamp(1.5rem, 1.2rem + 1.15vw, 2.25rem);
  --mjw-r-text-3xl: clamp(1.875rem, 1.35rem + 2vw, 3.25rem);
  --mjw-r-text-hero: clamp(2.1rem, 1.25rem + 3.4vw, 5.5rem);

  --mjw-r-line-tight: 1.15;
  --mjw-r-line-heading: 1.28;
  --mjw-r-line-body: 1.75;

  --mjw-r-card-min: 16rem;
  --mjw-r-card-ideal: 21rem;
  --mjw-r-radius-fluid: clamp(0.75rem, 0.55rem + 0.75vw, 1.5rem);
  --mjw-r-control-height: clamp(2.75rem, 2.5rem + 0.75vw, 3.75rem);
}

/* --------------------------------------------------------------------------
   2. Safe global foundation (scoped to the plugin body class)
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture,
body.mjw-responsive-architecture * ,
body.mjw-responsive-architecture *::before,
body.mjw-responsive-architecture *::after {
  box-sizing: border-box;
}

html:has(body.mjw-responsive-architecture) {
  overflow-x: hidden;
  overflow-x: clip;
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body.mjw-responsive-architecture {
  width: 100%;
  min-width: 0;
  overflow-x: hidden;
  overflow-x: clip;
}

body.mjw-responsive-architecture :where(
  main, section, article, aside, header, footer, nav,
  .elementor, .elementor-element, .elementor-widget,
  .elementor-widget-container, .e-con, .e-con-inner,
  .mjw-section, .mjw-hero, .mjw-container
) {
  min-width: 0;
  max-width: 100%;
}

body.mjw-responsive-architecture :where(h1, h2, h3, h4, h5, h6, p, li, a, button, label, span) {
  overflow-wrap: break-word;
  word-break: normal;
}

body.mjw-responsive-architecture :where(img, picture, video, canvas, iframe, embed, object) {
  display: block;
  max-width: 100%;
}

body.mjw-responsive-architecture :where(img, video) {
  height: auto;
}

body.mjw-responsive-architecture :where(svg) {
  max-width: 100%;
  flex: 0 0 auto;
}

body.mjw-responsive-architecture :where(input, select, textarea, button) {
  max-width: 100%;
  font: inherit;
}

/* --------------------------------------------------------------------------
   3. Container and full-width section rules
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(.mjw-container, .e-con-inner) {
  width: min(100%, var(--mjw-r-container-lg));
  margin-inline: auto;
  padding-inline: var(--mjw-r-gutter);
}

body.mjw-responsive-architecture.mjw-landing-page :where(
  .elementor-section > .elementor-container,
  .e-con-boxed > .e-con-inner
) {
  width: min(100%, var(--mjw-r-container-xl));
  max-width: none;
  margin-inline: auto;
}

body.mjw-responsive-architecture :where(.mjw-section, .mjw-final-cta) {
  padding-block: var(--mjw-r-space-7);
}

body.mjw-responsive-architecture :where(.mjw-footer-inner) {
  padding-block: var(--mjw-r-space-6);
}

body.mjw-responsive-architecture :where(.mjw-heading) {
  margin-bottom: var(--mjw-r-space-6);
}

/* Prevent Elementor legacy and container layouts from creating horizontal overflow. */
body.mjw-responsive-architecture :where(
  .elementor-section,
  .elementor-container,
  .elementor-row,
  .elementor-column,
  .elementor-column-wrap,
  .elementor-widget-wrap,
  .e-con,
  .e-con-inner
) {
  min-width: 0;
}

body.mjw-responsive-architecture :where(.elementor-section, .e-con) {
  max-width: 100vw;
}

/* --------------------------------------------------------------------------
   4. Fluid typography system
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(.mjw-hero-title) {
  font-size: var(--mjw-r-text-hero) !important;
  line-height: var(--mjw-r-line-tight);
  text-wrap: balance;
}

body.mjw-responsive-architecture :where(.mjw-h2) {
  font-size: var(--mjw-r-text-3xl) !important;
  line-height: var(--mjw-r-line-heading);
  text-wrap: balance;
}

body.mjw-responsive-architecture :where(.mjw-request-form-head h3) {
  font-size: var(--mjw-r-text-2xl);
  line-height: var(--mjw-r-line-heading);
}

body.mjw-responsive-architecture :where(
  .mjw-service-body h3,
  .mjw-why-card h3,
  .mjw-type-card h3,
  .mjw-offer-card h3,
  .mjw-footer h4
) {
  font-size: var(--mjw-r-text-xl);
  line-height: var(--mjw-r-line-heading);
}

body.mjw-responsive-architecture :where(
  .mjw-hero-desc,
  .mjw-lead,
  .mjw-final-cta-desc,
  .mjw-faq-cta p
) {
  font-size: var(--mjw-r-text-lg);
  line-height: var(--mjw-r-line-body);
  text-wrap: pretty;
}

body.mjw-responsive-architecture :where(
  .mjw-service-body p,
  .mjw-why-card p,
  .mjw-type-card p,
  .mjw-faq-a p,
  .mjw-footer-about p,
  .mjw-footer-services,
  .mjw-footer-contact
) {
  font-size: var(--mjw-r-text-base);
  line-height: var(--mjw-r-line-body);
}

body.mjw-responsive-architecture :where(.mjw-btn, .mjw-request-submit) {
  font-size: clamp(0.9375rem, 0.85rem + 0.3vw, 1.125rem);
  line-height: 1.35;
}

/* --------------------------------------------------------------------------
   5. Unified layout and grid rules
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(
  .mjw-services-grid,
  .mjw-types-grid,
  .mjw-why-grid,
  .mjw-offers-grid,
  .mjw-trust-grid,
  .mjw-stats-grid
) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--mjw-r-card-min)), 1fr));
  gap: var(--mjw-r-space-5);
  align-items: stretch;
}

body.mjw-responsive-architecture :where(
  .mjw-service-card,
  .mjw-type-card,
  .mjw-why-card,
  .mjw-offer-card,
  .mjw-trust-item,
  .mjw-stat-card
) {
  width: 100%;
  min-width: 0;
  height: 100%;
  border-radius: var(--mjw-r-radius-fluid);
}

body.mjw-responsive-architecture :where(
  .mjw-service-body,
  .mjw-type-card,
  .mjw-why-card,
  .mjw-offer-card,
  .mjw-trust-item,
  .mjw-stat-card
) {
  padding: var(--mjw-r-space-5);
}

body.mjw-responsive-architecture :where(.mjw-hero-inner) {
  width: min(100%, var(--mjw-r-container-xl));
  margin-inline: auto;
  padding-inline: var(--mjw-r-gutter);
  padding-block: var(--mjw-r-space-7);
}

body.mjw-responsive-architecture .mjw-hero-with-form .mjw-hero-inner {
  grid-template-columns: minmax(0, 1.08fr) minmax(min(100%, 22rem), 0.92fr);
  gap: var(--mjw-r-space-6);
  min-height: clamp(36rem, 75svh, 52rem);
}

body.mjw-responsive-architecture :where(.mjw-hero-content, .mjw-hero-form-card, .mjw-request-form-card) {
  min-width: 0;
  max-width: 100%;
}

body.mjw-responsive-architecture :where(.mjw-hero-cta, .mjw-cta-banner-actions, .mjw-final-badges) {
  gap: var(--mjw-r-space-3);
}

body.mjw-responsive-architecture :where(.mjw-btn) {
  min-height: 2.75rem;
  padding: clamp(0.7rem, 0.6rem + 0.35vw, 1rem) clamp(1rem, 0.75rem + 0.9vw, 1.75rem);
  white-space: normal;
  text-align: center;
}

/* --------------------------------------------------------------------------
   6. Forms and interactive controls
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(.mjw-request-form, .mjw-hero-form-card .mjw-request-form) {
  padding: var(--mjw-r-space-5);
}

body.mjw-responsive-architecture :where(.mjw-form-grid, .mjw-request-form-card .mjw-form-grid) {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--mjw-r-space-4);
}

body.mjw-responsive-architecture :where(
  .mjw-form-field input,
  .mjw-form-field select,
  .mjw-form-field textarea
) {
  min-height: var(--mjw-r-control-height);
  font-size: max(1rem, var(--mjw-r-text-sm));
}

body.mjw-responsive-architecture :where(button, [role="button"], input[type="button"], input[type="submit"], .mjw-btn) {
  touch-action: manipulation;
}

@media (pointer: coarse) {
  body.mjw-responsive-architecture :where(button, [role="button"], .mjw-btn, input, select) {
    min-height: 2.75rem;
  }
}

/* --------------------------------------------------------------------------
   7. Media system
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(.mjw-service-img, .mjw-hero-bg) {
  overflow: hidden;
}

body.mjw-responsive-architecture :where(.mjw-service-img img, .mjw-hero-bg img) {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

body.mjw-responsive-architecture :where(.mjw-service-img) {
  aspect-ratio: 16 / 10;
}

body.mjw-responsive-architecture :where(iframe) {
  width: 100%;
  border: 0;
  aspect-ratio: 16 / 9;
}

/* --------------------------------------------------------------------------
   8. Component-level responsiveness via container queries
   -------------------------------------------------------------------------- */
@supports (container-type: inline-size) {
  body.mjw-responsive-architecture [class*="elementor-widget-mjw_"] {
    container-type: inline-size;
  }

  @container (max-width: 42rem) {
    .mjw-form-grid,
    .mjw-request-form-card .mjw-form-grid {
      grid-template-columns: 1fr;
    }

    .mjw-form-field-wide {
      grid-column: auto;
    }

    .mjw-hero-cta,
    .mjw-cta-banner-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .mjw-hero-cta .mjw-btn,
    .mjw-cta-banner-actions .mjw-btn {
      width: 100%;
    }
  }
}

/* --------------------------------------------------------------------------
   9. Centralized viewport breakpoints
   -------------------------------------------------------------------------- */
@media (max-width: 79.999rem) {
  body.mjw-responsive-architecture .mjw-hero-with-form .mjw-hero-inner {
    grid-template-columns: minmax(0, 1fr) minmax(20rem, 0.82fr);
  }
}

@media (max-width: 63.999rem) {
  body.mjw-responsive-architecture .mjw-hero-with-form .mjw-hero-inner {
    grid-template-columns: 1fr;
    min-height: 0;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-content, .mjw-hero-form-card) {
    width: min(100%, 48rem);
    margin-inline: auto;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-content) {
    text-align: center;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-tags, .mjw-hero-stats, .mjw-hero-cta) {
    justify-content: center;
  }
}

@media (max-width: 47.999rem) {
  body.mjw-responsive-architecture {
    --mjw-r-gutter: clamp(1rem, 0.7rem + 1.8vw, 1.5rem);
    --mjw-r-card-min: 14.5rem;
  }

  body.mjw-responsive-architecture :where(.mjw-section, .mjw-final-cta) {
    padding-block: var(--mjw-r-space-6);
  }

  body.mjw-responsive-architecture :where(.mjw-form-grid, .mjw-request-form-card .mjw-form-grid) {
    grid-template-columns: 1fr;
  }

  body.mjw-responsive-architecture :where(.mjw-form-field-wide) {
    grid-column: auto;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-cta, .mjw-cta-banner-actions) {
    flex-direction: column;
    align-items: stretch;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-cta .mjw-btn, .mjw-cta-banner-actions .mjw-btn) {
    width: 100%;
  }

  body.mjw-responsive-architecture :where(.mjw-faq-q) {
    padding-block: var(--mjw-r-space-4);
  }

  body.mjw-responsive-architecture :where(.mjw-faq-q span) {
    font-size: var(--mjw-r-text-base);
  }
}

@media (max-width: 29.999rem) {
  body.mjw-responsive-architecture {
    --mjw-r-gutter: 1rem;
    --mjw-r-space-5: 1.125rem;
  }

  body.mjw-responsive-architecture :where(.mjw-hero-tags, .mjw-final-badges) {
    gap: var(--mjw-r-space-2);
  }

  body.mjw-responsive-architecture :where(.mjw-request-form-head) {
    align-items: flex-start;
    flex-direction: column;
  }

  body.mjw-responsive-architecture :where(.mjw-request-form-code) {
    white-space: normal;
  }
}

@media (min-width: 96rem) {
  body.mjw-responsive-architecture {
    --mjw-r-container-lg: 96rem;
    --mjw-r-container-xl: 112rem;
  }
}

@media (min-width: 120rem) {
  body.mjw-responsive-architecture {
    --mjw-r-gutter: clamp(3rem, 3vw, 6rem);
  }
}

/* Landscape phones and compact foldable viewports. */
@media (max-height: 32rem) and (orientation: landscape) and (max-width: 64rem) {
  body.mjw-responsive-architecture .mjw-hero-with-form .mjw-hero-inner {
    min-height: 0;
    padding-block: var(--mjw-r-space-5);
  }
}

/* --------------------------------------------------------------------------
   10. Accessibility, motion and rendering stability
   -------------------------------------------------------------------------- */
body.mjw-responsive-architecture :where(:focus-visible) {
  outline: 3px solid currentColor;
  outline-offset: 3px;
}

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

@media print {
  body.mjw-responsive-architecture {
    overflow: visible;
  }

  body.mjw-responsive-architecture :where(.mjw-section, .mjw-hero, .mjw-final-cta, .mjw-footer) {
    break-inside: avoid;
  }
}


/* ========================================================================== 
   11. Tuwaiq secondary full-page widget responsive system
   Extends the same tokens without changing identity, content, or controls.
   ========================================================================== */
body.mjw-responsive-architecture .twl-page {
  --twl-r-gutter: var(--mjw-r-gutter);
  --twl-r-space-1: var(--mjw-r-space-1);
  --twl-r-space-2: var(--mjw-r-space-2);
  --twl-r-space-3: var(--mjw-r-space-3);
  --twl-r-space-4: var(--mjw-r-space-4);
  --twl-r-space-5: var(--mjw-r-space-5);
  --twl-r-space-6: var(--mjw-r-space-6);
  --twl-r-space-7: var(--mjw-r-space-7);
  --twl-r-text-sm: var(--mjw-r-text-sm);
  --twl-r-text-base: var(--mjw-r-text-base);
  --twl-r-text-lg: var(--mjw-r-text-lg);
  --twl-r-text-xl: var(--mjw-r-text-xl);
  --twl-r-text-2xl: var(--mjw-r-text-2xl);
  --twl-r-text-3xl: var(--mjw-r-text-3xl);
  --twl-r-text-hero: var(--mjw-r-text-hero);
  width: 100%;
  min-width: 0;
  max-width: 100%;
  overflow-x: clip;
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-shell, .twl-header, .twl-hero, .twl-stats, .twl-why-section,
  .twl-services-section, .twl-process-section, .twl-portfolio-section,
  .twl-testimonials-section, .twl-offer, .twl-form-final,
  .twl-carousel, .twl-carousel-viewport
) {
  min-width: 0;
  max-width: 100%;
}

body.mjw-responsive-architecture .twl-page :where(.twl-shell) {
  width: min(100%, var(--mjw-r-container-xl));
  margin-inline: auto;
  padding-inline: var(--twl-r-gutter);
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-why-section, .twl-services-section, .twl-process-section,
  .twl-portfolio-section, .twl-testimonials-section
) {
  padding-block: var(--twl-r-space-7);
}

body.mjw-responsive-architecture .twl-page :where(.twl-title) {
  font-size: var(--twl-r-text-3xl) !important;
  line-height: var(--mjw-r-line-heading);
  text-wrap: balance;
}

body.mjw-responsive-architecture .twl-page :where(.twl-hero h1, .twl-hero-copy h1) {
  font-size: var(--twl-r-text-hero) !important;
  line-height: var(--mjw-r-line-tight);
  text-wrap: balance;
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-hero-copy p, .twl-offer-copy p, .twl-form-wrap p
) {
  font-size: var(--twl-r-text-lg);
  line-height: var(--mjw-r-line-body);
  text-wrap: pretty;
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-why, .twl-services, .twl-steps, .twl-stats,
  .twl-offer-list
) {
  gap: var(--twl-r-space-5);
}

body.mjw-responsive-architecture .twl-page :where(.twl-why, .twl-services, .twl-steps) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  align-items: stretch;
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-why > *, .twl-services > *, .twl-steps > *,
  .twl-offer-card, .twl-form-wrap
) {
  min-width: 0;
  width: 100%;
  height: 100%;
}

body.mjw-responsive-architecture .twl-page :where(.twl-stats) {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 10rem), 1fr));
  align-items: stretch;
}

body.mjw-responsive-architecture .twl-page :where(.twl-form) {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--twl-r-space-3);
}

body.mjw-responsive-architecture .twl-page :where(
  .twl-form input, .twl-form select, .twl-form textarea,
  .twl-wide-btn, .twl-actions a, .twl-actions button
) {
  min-height: var(--mjw-r-control-height);
  max-width: 100%;
  font-size: max(1rem, var(--twl-r-text-sm));
}

body.mjw-responsive-architecture .twl-page :where(.twl-actions) {
  display: flex;
  flex-wrap: wrap;
  gap: var(--twl-r-space-3);
}

body.mjw-responsive-architecture .twl-page :where(.twl-actions > *) {
  min-width: min(100%, 12rem);
}

body.mjw-responsive-architecture .twl-page :where(
  img, video, picture, iframe, canvas, svg
) {
  max-width: 100%;
}

body.mjw-responsive-architecture .twl-page :where(img, video) {
  height: auto;
}

body.mjw-responsive-architecture .twl-page :where(.twl-carousel-viewport) {
  overflow: hidden;
}

body.mjw-responsive-architecture .twl-page :where(.twl-carousel) {
  width: 100%;
}

@supports (container-type: inline-size) {
  body.mjw-responsive-architecture .elementor-widget-tawiq_secondary_landing_page {
    container-type: inline-size;
  }

  @container (max-width: 48rem) {
    .twl-form {
      grid-template-columns: 1fr;
    }

    .twl-actions {
      flex-direction: column;
      align-items: stretch;
    }

    .twl-actions > * {
      width: 100%;
    }
  }
}

@media (max-width: 63.999rem) {
  body.mjw-responsive-architecture .twl-page :where(.twl-header) {
    padding-inline: var(--twl-r-gutter);
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-hero) {
    min-height: auto;
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-hero-copy, .twl-form-wrap) {
    width: min(100%, 48rem);
    margin-inline: auto;
  }
}

@media (max-width: 47.999rem) {
  body.mjw-responsive-architecture .twl-page :where(.twl-form) {
    grid-template-columns: 1fr;
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-actions) {
    flex-direction: column;
    align-items: stretch;
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-actions > *, .twl-wide-btn) {
    width: 100%;
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-header) {
    gap: var(--twl-r-space-2);
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-menu) {
    max-width: 100%;
  }
}

@media (max-width: 29.999rem) {
  body.mjw-responsive-architecture .twl-page :where(.twl-logo, .twl-phone, .twl-menu) {
    min-width: 0;
  }

  body.mjw-responsive-architecture .twl-page :where(.twl-phone, .twl-menu) {
    font-size: var(--twl-r-text-xs, 0.8rem);
  }
}

/* Compact landscape phones and foldables. */
@media (max-height: 32rem) and (orientation: landscape) and (max-width: 64rem) {
  body.mjw-responsive-architecture .twl-page :where(.twl-hero) {
    min-height: 0;
    padding-block: var(--twl-r-space-5);
  }
}


/* =========================================================
   Interaction motion system — action buttons and numeric counters
   ========================================================= */
.mjw-responsive-architecture :is(
  .mjw-btn,
  .mjw-request-submit,
  .mjw-offer-card a,
  .twl-actions a,
  .twl-wide-btn,
  .twl-form button[type="submit"],
  .twl-phone
){
  position:relative;
  isolation:isolate;
  will-change:transform,box-shadow;
  animation:tuwaiq-action-idle 3.8s ease-in-out infinite;
  transition:transform .28s ease,box-shadow .28s ease,filter .28s ease,border-color .28s ease,background-color .28s ease,color .28s ease;
}

.mjw-responsive-architecture :is(
  .mjw-btn,
  .mjw-request-submit,
  .mjw-offer-card a,
  .twl-actions a,
  .twl-wide-btn,
  .twl-form button[type="submit"]
)::after{
  content:"";
  position:absolute;
  inset:0;
  z-index:-1;
  border-radius:inherit;
  background:linear-gradient(110deg,transparent 28%,rgba(255,255,255,.18) 46%,transparent 64%);
  transform:translateX(-135%);
  animation:tuwaiq-action-sheen 4.8s ease-in-out infinite;
  pointer-events:none;
}

.mjw-responsive-architecture :is(
  .mjw-btn,
  .mjw-request-submit,
  .mjw-offer-card a,
  .twl-actions a,
  .twl-wide-btn,
  .twl-form button[type="submit"],
  .twl-phone
):hover{
  animation-play-state:paused;
  transform:translateY(-4px) scale(1.025) rotate(.15deg);
  filter:saturate(1.08) brightness(1.04);
  box-shadow:0 18px 38px rgba(20,15,15,.24);
}

.mjw-responsive-architecture :is(
  .mjw-btn,
  .mjw-request-submit,
  .mjw-offer-card a,
  .twl-actions a,
  .twl-wide-btn,
  .twl-form button[type="submit"],
  .twl-phone
):active{
  transform:translateY(-1px) scale(.985);
  transition-duration:.1s;
}

.mjw-responsive-architecture :is(.mjw-stat-num,.mjw-process-number,.mjw-final-badge,.twl-stats strong,.twl-steps article>b,.twl-offer-card>strong){
  font-variant-numeric:tabular-nums;
}

@keyframes tuwaiq-action-idle{
  0%,100%{transform:translateY(0)}
  50%{transform:translateY(-2px)}
}

@keyframes tuwaiq-action-sheen{
  0%,70%,100%{transform:translateX(-135%);opacity:0}
  78%{opacity:1}
  92%{transform:translateX(135%);opacity:0}
}

@media (hover:none){
  .mjw-responsive-architecture :is(
    .mjw-btn,
    .mjw-request-submit,
    .mjw-offer-card a,
    .twl-actions a,
    .twl-wide-btn,
    .twl-form button[type="submit"],
    .twl-phone
  ):hover{
    transform:none;
    filter:none;
    box-shadow:inherit;
  }
}

@media (prefers-reduced-motion:reduce){
  .mjw-responsive-architecture :is(
    .mjw-btn,
    .mjw-request-submit,
    .mjw-offer-card a,
    .twl-actions a,
    .twl-wide-btn,
    .twl-form button[type="submit"],
    .twl-phone
  ),
  .mjw-responsive-architecture :is(
    .mjw-btn,
    .mjw-request-submit,
    .mjw-offer-card a,
    .twl-actions a,
    .twl-wide-btn,
    .twl-form button[type="submit"]
  )::after{
    animation:none!important;
    transition:none!important;
  }
}