/* ============================================================
   Luminous — full-screen Services mega menu (v2)
   Solid-color cards with abstract line art, divider + CTA row.
   Tokens: ink #121217 · body #494949 · muted #5c5c63 · blue #0854a5
   ============================================================ */

/* Keep the scrollbar gutter reserved while body scroll is locked, so
   opening the menu doesn't widen the viewport and shift the layout. */
html { scrollbar-gutter: stable; }

/* ---------- Trigger (matches .w-nav-link metrics: 20px padding,
   inline-block, vertical-align top — keeps it level with siblings) ---------- */
.lum-mega-trigger {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
  vertical-align: top;
}
.lum-mega-trigger .lum-mega-caret {
  width: 10px;
  height: 10px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lum-mega-trigger[aria-expanded="true"] .lum-mega-caret { transform: rotate(180deg); }
.lum-mega-trigger[aria-expanded="true"] { opacity: 1 !important; }

/* ---------- Backdrop: dim + blur the page ---------- */
.lum-mega-backdrop {
  position: fixed;
  inset: 0;
  z-index: 9997;
  background: rgba(18, 18, 23, 0.35);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  opacity: 0;
  visibility: hidden;
}

/* ---------- Panel ---------- */
.lum-mega {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 9998; /* below the .navbar (9999): nav stays visible on the panel */
  background: #faf9f6;
  border-bottom: 1px solid rgba(18, 18, 23, 0.07);
  box-shadow: 0 40px 80px -20px rgba(18, 18, 23, 0.22);
  padding: 128px 5% 40px; /* clears the 100px navbar */
  visibility: hidden;
  will-change: transform;
}

.lum-mega-inner { max-width: 1360px; margin: 0 auto; }

.lum-mega-heading {
  color: #121217;
  font-family: Poppins, sans-serif;
  font-size: 27px;
  font-weight: 500;
  line-height: 1.35;
  letter-spacing: -0.2px;
  max-width: 26em;
  margin-bottom: 30px;
}

.lum-mega-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

/* ---------- Cards: solid background, art, divider + CTA foot ---------- */
.lum-mega-card {
  --card-bg: #f3f1ea;
  --card-fg: #121217;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 296px;
  padding: 26px 24px 20px;
  border-radius: 16px;
  overflow: hidden;
  background: var(--card-bg);
  color: var(--card-fg);
  text-decoration: none;
  transition: transform 0.35s cubic-bezier(0.215, 0.61, 0.355, 1),
    box-shadow 0.35s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lum-mega-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 22px 40px -18px rgba(18, 18, 23, 0.35);
  color: var(--card-fg);
}

/* abstract line art, anchored bottom-right behind the text */
.lum-mega-card-art {
  position: absolute;
  right: -14px;
  bottom: 34px;
  width: 190px;
  height: 190px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  opacity: 0.16;
  pointer-events: none;
  transition: transform 0.6s cubic-bezier(0.215, 0.61, 0.355, 1), opacity 0.4s ease;
}
.lum-mega-card:hover .lum-mega-card-art {
  transform: translate(-5px, -5px) rotate(-3deg);
  opacity: 0.26;
}

.lum-mega-card-top { display: block; position: relative; }
.lum-mega-card-title {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 16.5px;
  font-weight: 600;
  line-height: 1.35;
  margin-bottom: 9px;
}
.lum-mega-card-desc {
  display: block;
  font-family: Poppins, sans-serif;
  font-size: 12.5px;
  font-weight: 400;
  line-height: 1.6;
  opacity: 0.72;
  max-width: 30ch;
}

/* divider + CTA row */
.lum-mega-card-foot {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 15px;
  border-top: 1px solid color-mix(in srgb, var(--card-fg) 22%, transparent);
  font-family: Poppins, sans-serif;
  font-size: 13px;
  font-weight: 500;
}
.lum-mega-card-foot svg {
  width: 15px;
  height: 15px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform 0.3s cubic-bezier(0.215, 0.61, 0.355, 1);
}
.lum-mega-card:hover .lum-mega-card-foot svg { transform: translate(3px, -3px); }

/* ---------- Close button (mobile only) ---------- */
.lum-mega-close {
  display: none;
  position: absolute;
  top: 18px;
  right: 18px;
  width: 42px;
  height: 42px;
  border: none;
  border-radius: 50%;
  background: #edebe6;
  cursor: pointer;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.lum-mega-close svg {
  width: 16px;
  height: 16px;
  stroke: #121217;
  stroke-width: 2;
  stroke-linecap: round;
}

/* ---------- Navbar treatment while the menu is open ---------- */
body.lum-mega-open .navbar,
body.lum-mega-open .navbar.transparent {
  background-color: #faf9f6 !important;
  border-bottom-color: transparent;
}
body.lum-mega-open .navbar .brand-logo { opacity: 0 !important; }
body.lum-mega-open .navbar .brand-logo-v2 { opacity: 1 !important; }
body.lum-mega-open .navbar .nav-link.white-version,
body.lum-mega-open .navbar .nav-link.white-version.w-dropdown-toggle {
  color: #121217 !important;
}
body.lum-mega-open .navbar .phone-number.white { color: #121217 !important; }
body.lum-mega-open .navbar .line-divider-nav.second-style {
  background-color: rgba(18, 18, 23, 0.18) !important;
}
body.lum-mega-open { overflow: hidden; }

/* ---------- Mobile ---------- */
@media (max-width: 991px) {
  /* in the Webflow mobile overlay the links are left-aligned blocks —
     match them exactly */
  .lum-mega-trigger {
    display: flex;
    width: 100%;
    justify-content: flex-start;
    text-align: left;
  }
  .lum-mega {
    top: 0;
    bottom: 0;
    z-index: 100001; /* above the Webflow mobile nav overlay */
    padding: 82px 6% 40px;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }
  .lum-mega-close { display: flex; }
  .lum-mega-backdrop { z-index: 100000; }
  .lum-mega-heading { font-size: 21px; margin-bottom: 22px; padding-right: 40px; }
  .lum-mega-grid { grid-template-columns: 1fr 1fr; gap: 12px; }
  .lum-mega-card { min-height: 240px; padding: 22px 20px 16px; }
  .lum-mega-card-art { width: 150px; height: 150px; bottom: 30px; }
}

@media (max-width: 599px) {
  .lum-mega-grid { grid-template-columns: 1fr; }
  .lum-mega-card { min-height: 0; }
  .lum-mega-card-desc { max-width: none; }
  .lum-mega-card-top { margin-bottom: 34px; }
  .lum-mega-card-art { width: 120px; height: 120px; bottom: 44px; opacity: 0.12; }
}

/* ---------- Reduced motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .lum-mega, .lum-mega-backdrop, .lum-mega-card, .lum-mega-card-art,
  .lum-mega-card-foot svg, .lum-mega-trigger .lum-mega-caret { transition: none !important; }
}