/* MAQ LAB — Elementor-native layer.
 * Layout, spacing, type scale and responsive structure live in Elementor.
 * This file is limited to editorial details, states and technical placeholders.
 */

.maq-elementor-header {
  position: sticky;
  top: 0;
  z-index: 90;
  backdrop-filter: blur(14px);
  box-shadow: 0 1px 0 rgba(16, 35, 45, .08);
}

.maq-elementor-header .elementor-nav-menu a,
.maq-elementor-footer .elementor-nav-menu a {
  font-family: var(--ml-mono);
  letter-spacing: .055em;
  text-transform: uppercase;
}

.maq-elementor-footer .elementor-widget-image img {
  filter: grayscale(1) brightness(0) invert(1);
}

.maq-elementor-footer .elementor-widget-text-editor,
.maq-elementor-footer .elementor-widget-text-editor p,
.maq-elementor-footer .elementor-widget-text-editor a {
  color: rgba(255, 255, 255, .72) !important;
}

.maq-elementor-footer .elementor-widget-text-editor a:hover,
.maq-elementor-footer .elementor-widget-text-editor a:focus-visible {
  color: #FFFFFF !important;
}

.maq-tech-label .elementor-heading-title::before { content: "[ "; }
.maq-tech-label .elementor-heading-title::after { content: " ]"; }

.maq-underline-yellow {
  text-decoration: underline;
  text-decoration-color: var(--ml-yellow);
  text-decoration-thickness: .1em;
  text-underline-offset: .08em;
}

.maq-tech-placeholder {
  background-color: var(--ml-soft-grey);
  background-image:
    linear-gradient(rgba(16, 35, 45, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 35, 45, .055) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}

.maq-tech-placeholder--dark {
  background-color: rgba(255, 255, 255, .035);
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
}

.maq-tech-placeholder::before,
.maq-loop-image-wrap::before {
  content: "";
  position: absolute;
  inset: 22%;
  border: 1px solid rgba(16, 35, 45, .22);
  border-radius: 50%;
  transform: rotate(22deg);
  pointer-events: none;
}

.maq-tech-placeholder::after,
.maq-loop-image-wrap::after {
  content: "";
  position: absolute;
  inset: 33%;
  border: 1px solid rgba(97, 194, 200, .34);
  border-radius: 50%;
  transform: rotate(-35deg);
  pointer-events: none;
}

.maq-tech-placeholder--dark::before { border-color: rgba(255, 255, 255, .22); }
.maq-tech-placeholder--dark::after { border-color: rgba(255, 179, 0, .42); }

.maq-native-button .elementor-button {
  transition: color 180ms ease-out, background-color 180ms ease-out,
    border-color 180ms ease-out, transform 180ms ease-out;
}

.maq-native-button .elementor-button:hover,
.maq-native-button .elementor-button:focus-visible { transform: translateY(-2px); }

.maq-loop-card {
  transition: transform 180ms ease-out, border-color 180ms ease-out;
}

.maq-loop-card:hover,
.maq-loop-card:focus-within {
  transform: translateY(-4px);
  border-color: var(--ml-dark) !important;
}

.maq-loop-image-wrap {
  isolation: isolate;
  background-color: var(--ml-soft-grey);
  background-image:
    linear-gradient(rgba(16, 35, 45, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(16, 35, 45, .055) 1px, transparent 1px);
  background-size: 40px 40px;
  overflow: hidden;
}

.maq-loop-image-wrap .elementor-widget-image,
.maq-loop-image-wrap .elementor-widget-container,
.maq-loop-image-wrap a { height: 100%; width: 100%; }

.maq-loop-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform 240ms ease-out;
}

.maq-loop-card:hover .maq-loop-image-wrap img { transform: scale(1.02); }

.maq-loop-number .elementor-heading-title { transition: color 180ms ease-out; }
.maq-loop-card:hover .maq-loop-number .elementor-heading-title { color: var(--ml-yellow) !important; }

.maq-verb-dot {
  position: relative;
  overflow: visible;
}

.maq-verb-dot::after {
  content: "";
  position: absolute;
  right: -1px;
  top: 50%;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ml-yellow);
  transform: translateY(-50%);
}

.maq-chip .elementor-heading-title { white-space: nowrap; }

.maq-elementor-footer a:focus-visible,
.maq-elementor-header a:focus-visible,
.maq-native-home a:focus-visible {
  outline: 3px solid var(--ml-yellow);
  outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
  .maq-native-button .elementor-button,
  .maq-loop-card,
  .maq-loop-image-wrap img,
  .maq-loop-number .elementor-heading-title {
    transition: none !important;
  }
}

@media (max-width: 1024px) {
  .maq-elementor-header {
    flex-wrap: nowrap !important;
  }

  .maq-elementor-header .elementor-widget-nav-menu {
    width: auto !important;
    margin-left: auto;
  }
}