@import url("https://fonts.googleapis.com/css2?family=Zen+Dots&display=swap");

/* MOONFOX V1.67 */
/*
  MOONFOX — Cyberpunk Editorial Theme
  Visual layer for the original Ashley architecture.
  Keeps Ashley's GSAP / Swup / Swiper / Fancybox / cursor / preloader systems intact.
*/
:root {
  --mf-void: #050508;
  --mf-violet: #160B2E;
  --mf-purple: #AA00FF;
  --mf-magenta: #AA00FF;
  --mf-green: #AA00FF;
  --mf-cyan: #AA00FF;
  --mf-white: #F4F4F7;
  --mf-muted: #9A96A8;
  --mf-line: rgba(255,255,255,.08);
  --mf-line-purple: rgba(170,0,255,.18);
  --mf-ease: cubic-bezier(.22,.61,.36,1);
}

html, body {
  background: var(--mf-void);
  color: var(--mf-muted);
}

body {
  position: relative;
  min-height: 100vh;
  background:
    radial-gradient(circle at 78% 12%, rgba(170,0,255,.08), transparent 28%),
    radial-gradient(circle at 18% 76%, rgba(170,0,255,.035), transparent 24%),
    var(--mf-void);
}

body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  opacity: .22;
  background-image:
    linear-gradient(rgba(255,255,255,.025) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,.025) 1px, transparent 1px);
  background-size: 72px 72px;
  mask-image: linear-gradient(to bottom, rgba(0,0,0,.7), transparent 78%);
}

.mil-wrapper,
.mil-content,
.mil-main-transition { position: relative; z-index: 1; }

/* Typography */
h1, .mil-h1, h2, .mil-h12, h3, .mil-h3, h4, .mil-h4, h5, .mil-h5, h6, .mil-h6 {
  color: var(--mf-white);
}

.mil-muted { color: var(--mf-white) !important; }
.mil-light, .mil-light a { color: var(--mf-white) !important; }
.mil-light-soft { color: rgba(214, 212, 224, 0.934) !important; }
.mil-dark, .mil-dark a { color: var(--mf-white) !important; }
.mil-dark-soft { color: rgba(154,150,168,.65) !important; }
.mil-accent { color: var(--mf-purple) !important; }

.mil-upper {
  color: var(--mf-muted);
  letter-spacing: 2.6px;
}

.mil-suptitle::before { background: var(--mf-purple) !important; opacity: .28 !important; }
.mil-divider { background: var(--mf-line) !important; }

/* Darken every light Ashley surface without changing its layout. */
.mil-soft-bg,
.mil-banner-personal,
.mil-banner-personal .mil-banner-content .mil-banner-panel,
.mil-footer {
  background: var(--mf-void) !important;
}

.mil-dark-bg {
  background:
    radial-gradient(circle at 72% 35%, rgba(170,0,255,.09), transparent 30%),
    radial-gradient(circle at 28% 70%, rgba(170,0,255,.025), transparent 26%),
    var(--mf-void) !important;
}

.mil-dark-bg::before { display: none !important; }
.mil-dark-bg .mi-invert-fix { z-index: 3; }

/* Hero atmosphere */
.mil-banner::after,
.mil-inner-banner::after,
.mil-banner-personal::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
  background:
    linear-gradient(90deg, transparent 0 49.9%, rgba(170,0,255,.08) 50%, transparent 50.1%),
    linear-gradient(rgba(255,255,255,.018) 1px, transparent 1px);
  background-size: 100% 100%, 100% 96px;
  opacity: .32;
}

.mil-banner .container,
.mil-inner-banner .container,
.mil-banner-personal .container { position: relative; z-index: 2; }

/* Geometric animation layer */
.mil-animation-frame { opacity: .9; }
.mil-animation {
  filter: drop-shadow(0 0 18px rgba(170,0,255,.16));
}
.mil-animation::before {
  border-color: rgba(170,0,255,.18) !important;
}
.mil-gradient {
  opacity: .45 !important;
  background: radial-gradient(circle, rgba(170,0,255,.12), transparent 65%) !important;
}
.mil-lines-place { opacity: .38; }
.mil-lines { opacity: .42; }

/* Buttons — editorial, not SaaS */
.mil-button {
  background: transparent !important;
  color: var(--mf-white) !important;
  border: 1px solid rgba(170,0,255,.55) !important;
  border-radius: 0 !important;
  box-shadow: inset 0 0 0 0 var(--mf-purple);
  transition: color .45s var(--mf-ease), box-shadow .45s var(--mf-ease), border-color .45s var(--mf-ease), transform .45s var(--mf-ease) !important;
}
.mil-button svg { background: var(--mf-purple) !important; }
.mil-button svg path { fill: var(--mf-white) !important; }
.mil-button:hover {
  color: var(--mf-white) !important;
  border-color: var(--mf-purple) !important;
  box-shadow: inset 0 0 0 100px rgba(170,0,255,.92), 0 0 28px rgba(170,0,255,.12);
  filter: none !important;
}

.mil-link svg {
  background: rgba(170,0,255,.10) !important;
  border: 1px solid rgba(170,0,255,.22);
}
.mil-link svg path { fill: var(--mf-purple) !important; }
.mil-link:hover { color: var(--mf-white) !important; }

/* Frame */
.mil-frame { color: var(--mf-white); }
.mil-frame .mil-frame-top { border-color: var(--mf-line); }
.mil-frame-top .mil-logo,
.mil-frame .mil-frame-bottom .mil-current-page,
.mil-frame .mil-frame-bottom .mil-back-to-top a { color: var(--mf-white) !important; }
.mil-logo {
  letter-spacing: -.04em;
  text-shadow: 0 0 22px rgba(170,0,255,.16);
}
.mil-menu-btn span,
.mil-menu-btn span::before,
.mil-menu-btn span::after { background: var(--mf-white) !important; }
.mil-menu-btn:hover span,
.mil-menu-btn:hover span::before,
.mil-menu-btn:hover span::after { background: var(--mf-purple) !important; }

@media screen and (min-width: 1201px) {
  .mil-frame::before,
  .mil-frame::after {
    content: "";
    position: absolute;
    pointer-events: none;
    background: var(--mf-line);
  }
  .mil-frame::before { left: 60px; right: 60px; top: 50px; height: 1px; }
  .mil-frame::after { left: 60px; right: 60px; bottom: 60px; height: 1px; }
}

/* Moonfox v1.63 — remove the fixed top and bottom frame lines. */
.mil-frame::before,
.mil-frame::after {
  display: none !important;
}

/* Full-screen menu */
.mil-menu-frame {
  background:
    radial-gradient(circle at 75% 25%, rgba(170,0,255,.12), transparent 34%),
    linear-gradient(135deg, #050508 0%, #0b0614 52%, #160B2E 100%) !important;
}
.mil-menu-frame .mil-menu-right-frame { border-left-color: var(--mf-line-purple); }
.mil-main-menu ul li a { color: rgba(244,244,247,.72); }
.mil-main-menu ul li a:hover,
.mil-main-menu ul li.mil-active > a { color: var(--mf-purple) !important; }
.mil-main-menu ul li a::before { background: var(--mf-purple) !important; box-shadow: 0 0 12px rgba(170,0,255,.45); }
.mil-menu-list li a:hover { color: var(--mf-white) !important; }

/* Cursor */
.mil-ball {
  background: var(--mf-purple) !important;
  box-shadow: 0 0 30px rgba(170,0,255,.28);
  mix-blend-mode: normal;
}
.mil-ball .mil-more-text,
.mil-ball .mil-choose-text { color: var(--mf-white) !important; }
.mil-ball .mil-icon-1 svg { fill: var(--mf-white) !important; }
.mil-ball.mil-accent { background: var(--mf-magenta) !important; }
.mil-ball.mil-accent .mil-more-text,
.mil-ball.mil-accent .mil-choose-text { color: var(--mf-white) !important; }

/* Scroll progress */
.mil-progress-track { background: rgba(255,255,255,.035) !important; width: 3px !important; }
.mil-progress-track .mil-progress {
  width: 3px !important;
  background: var(--mf-purple) !important;
  box-shadow: 0 0 12px rgba(170,0,255,.35);
}

/* Cards / portfolio / services */
.mil-service-card,
.mil-service-card-sm,
.mil-blog-card,
.mil-team-card,
.mil-project-card,
.mil-portfolio-card {
  background: transparent;
}

.mil-service-card-sm,
.mil-blog-card,
.mil-team-card {
  border-color: var(--mf-line) !important;
}

.mil-service-card-sm:hover,
.mil-blog-card:hover,
.mil-team-card:hover {
  border-color: rgba(170,0,255,.28) !important;
}

.mil-blog-card .mil-descr,
.mil-service-card-sm .mil-descr { color: var(--mf-muted); }

/* Images remain dominant; add only restrained color treatment. */
.mil-img-frame,
.mil-image-frame {
  background: #09090f;
}
.mil-img-frame img,
.mil-image-frame img {
  transition: transform 1s var(--mf-ease), filter 1s var(--mf-ease);
}
.mil-img-frame:hover img,
.mil-image-frame:hover img {
  transform: scale(1.025);
  filter: saturate(.92) contrast(1.05);
}
.mil-img-frame::after,
.mil-image-frame::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(135deg, rgba(170,0,255,.04), transparent 45%, rgba(170,0,255,.025));
  opacity: .7;
}

/* Form fields */
input, textarea, select {
  background: transparent !important;
  color: var(--mf-white) !important;
  border-color: rgba(255,255,255,.14) !important;
}
input:focus, textarea:focus, select:focus {
  border-color: rgba(170,0,255,.6) !important;
  box-shadow: 0 1px 0 rgba(170,0,255,.55);
}
input::placeholder, textarea::placeholder { color: rgba(154,150,168,.62) !important; }

/* Accordion */
.mil-accordion-menu { border-color: var(--mf-line) !important; }
.mil-accordion-menu .mil-symbol { border-color: rgba(170,0,255,.24) !important; }

/* Footer / social */
.mil-footer .mil-link:hover,
.mil-footer a:hover { color: var(--mf-purple) !important; }

/* Tiny cyber-technical markers */
.mil-suptitle,
.mil-upper { position: relative; }
.mil-suptitle::after {
  content: "// MOONFOX";
  display: block;
  margin-top: 10px;
  color: rgba(178, 171, 195, 0.888);
  font-size: 9px;
  letter-spacing: 3px;
  font-weight: 500;
}

/* Preloader */
.mil-preloader { background: var(--mf-void) !important; }
.mil-preloader .mil-preloader-logo { display: block; }
.mil-preloader .mil-reveal-box { background: var(--mf-purple) !important; }
.mil-preloader .mil-h3 { color: var(--mf-white) !important; }

/* Page transitions */
.mil-curtain {
  background:
    linear-gradient(120deg, #050508 0%, #160B2E 55%, #AA00FF 100%) !important;
}
html.is-animating .mil-curtain { box-shadow: inset 0 0 80px rgba(170,0,255,.18); }

/* Selection */
*::selection { background: rgba(170,0,255,.45); color: var(--mf-white); }

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

@media screen and (max-width: 1200px) {
  body::before { opacity: .12; background-size: 56px 56px; }
  .mil-frame .mil-frame-top {
    background: rgba(5,5,8,.88) !important;
    border-bottom: 1px solid var(--mf-line-purple) !important;
    backdrop-filter: blur(14px) !important;
  }
}

@media screen and (max-width: 768px) {
  .mil-banner::after,
  .mil-inner-banner::after,
  .mil-banner-personal::after { opacity: .14; }
  .mil-animation-frame { opacity: .48; }
}


/* ==========================================================
   MOONFOX v1.05 — SHAPE PRESERVATION PASS
   Preserve Ashley's original component geometry while keeping
   Moonfox's dark / purple visual system.
   ========================================================== */

/* ORIGINAL ASHLEY BUTTON GEOMETRY, RECOLORED FOR MOONFOX */
.mil-button {
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  border: 1px solid transparent !important;
  letter-spacing: 2px !important;
  font-size: 12px !important;
  background: var(--mf-purple) !important;
  color: var(--mf-white) !important;
  border-radius: 70px !important;
  padding: 0 15px 0 50px !important;
  height: 70px !important;
  text-transform: uppercase !important;
  font-weight: 500 !important;
  box-shadow: 0 0 24px rgba(170,0,255,.08) !important;
  transition:
    transform .4s var(--mf-ease),
    filter .4s var(--mf-ease),
    box-shadow .4s var(--mf-ease),
    background-color .4s var(--mf-ease) !important;
}

.mil-button span {
  white-space: nowrap !important;
}

.mil-button svg {
  margin-left: 30px !important;
  border-radius: 50% !important;
  width: 40px !important;
  height: 40px !important;
  padding: 10px !important;
  background: var(--mf-void) !important;
  box-shadow: none !important;
  transition: transform .4s var(--mf-ease) !important;
}

.mil-button svg path {
  fill: var(--mf-purple) !important;
}

.mil-button.mil-icon-button {
  padding: 15px !important;
}

.mil-button.mil-icon-button svg {
  margin-left: 0 !important;
}

.mil-button.mil-icon-button-sm {
  padding: 0 !important;
  height: 40px !important;
  width: 40px !important;
}

.mil-button.mil-icon-button-sm svg {
  margin-left: 0 !important;
  background: var(--mf-purple) !important;
}

.mil-button.mil-icon-button-sm svg path {
  fill: var(--mf-white) !important;
}

.mil-button:hover {
  transform: scale(1.015) !important;
  filter: brightness(112%) !important;
  background: var(--mf-purple) !important;
  border-color: transparent !important;
  box-shadow: 0 0 32px rgba(170,0,255,.16) !important;
}

.mil-button:hover svg {
  transform: scale(1.15) !important;
}

.mil-button.mil-arrow-down svg {
  transform: rotate(90deg);
}

.mil-button.mil-arrow-down:hover {
  transform: scale(1.015) !important;
}

.mil-button.mil-arrow-down:hover svg {
  transform: scale(1.15) rotate(90deg) !important;
}

@media screen and (max-width: 992px) {
  .mil-button {
    height: 60px !important;
    padding: 0 10px 0 40px !important;
  }

  .mil-button svg {
    margin-left: 25px !important;
  }
}

/* Keep the original service-card geometry: no artificial card radius/border. */
.mil-service-card-sm {
  position: relative;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
}

.mil-service-card-sm:before {
  height: 4px !important;
  background: var(--mf-purple) !important;
}

.mil-service-card-sm .mil-button {
  background: var(--mf-purple) !important;
}

/* Keep original service grid lines, recolored subtly for Moonfox. */
.mil-services-grid {
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.mil-services-grid .mil-services-grid-item {
  border-right: 1px solid rgba(255,255,255,.10) !important;
}

.mil-services-grid .mil-services-grid-item:first-child {
  border-left: 1px solid rgba(255,255,255,.10) !important;
}

/* Team cards: preserve Ashley's original rectangular image geometry. */
.mil-team-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mil-team-card:after {
  height: 4px !important;
  background: var(--mf-purple) !important;
}

.mil-team-card .mil-description {
  background:
    linear-gradient(180deg, rgba(5,5,8,.12), rgba(5,5,8,.88)) !important;
}

.mil-team-card .mil-description .mil-secrc-text a:hover {
  color: var(--mf-purple) !important;
}

/* Preserve original blog/image proportions and square-ish editorial crops. */
.mil-blog-card,
.mil-project-card,
.mil-portfolio-card {
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: transparent !important;
}

.mil-blog-card .mil-cover-frame,
.mil-img-frame,
.mil-image-frame {
  border-radius: 0 !important;
  box-shadow: none !important;
}

/* Do not introduce extra card backgrounds. */
.mil-service-card,
.mil-service-card-sm,
.mil-blog-card,
.mil-team-card,
.mil-project-card,
.mil-portfolio-card {
  background: transparent !important;
}

/* Original footer / newsletter geometry with Moonfox colors. */
.mil-subscribe-form input {
  background: transparent !important;
  color: var(--mf-white) !important;
}

.mil-subscribe-form input::placeholder {
  color: rgba(154,150,168,.65) !important;
}

/* The main cyberpunk character comes from atmosphere, not rounded UI. */
.mil-animation {
  filter: drop-shadow(0 0 22px rgba(170,0,255,.16)) !important;
}

.mil-animation::before {
  border-color: rgba(170,0,255,.22) !important;
}

.mil-gradient {
  opacity: .55 !important;
  background: radial-gradient(circle, rgba(170,0,255,.15), transparent 65%) !important;
}

/* Hero remains spacious and editorial. */
.mil-banner .mil-h1,
.mil-banner .mil-h1 * {
  text-shadow: 0 0 28px rgba(170,0,255,.035);
}

/* Small purple system glow — deliberately restrained. */
.mil-progress-track .mil-progress {
  box-shadow: 0 0 12px rgba(170,0,255,.38) !important;
}

.mil-logo {
  text-shadow: 0 0 22px rgba(170,0,255,.16) !important;
}

/* Preserve the original circular scroll-down control. */
.mil-button.mil-arrow-down {
  border-radius: 70px !important;
}

/* Preserve original pagination / testimonial geometry. */
.mil-pagination-btn,
.swiper-pagination-bullet {
  border-radius: 50% !important;
}

/* Avoid globally rounding media or layout containers. */
.mil-cover-frame,
.mil-banner-image,
.mil-portrait-frame {
  border-radius: 0 !important;
}

/* Mobile keeps the same original shapes, simply scaled by Ashley's breakpoints. */
@media screen and (max-width: 768px) {
  .mil-button {
    border-radius: 60px !important;
  }

  .mil-service-card-sm,
  .mil-team-card,
  .mil-blog-card,
  .mil-project-card,
  .mil-portfolio-card {
    border-radius: 0 !important;
  }
}


/* Moonfox v1.11 — header logo only. Original geometry/styles preserved. */
.mil-logo-image { display:inline-flex; align-items:center; width:58px; height:58px; line-height:0; font-size:0; }
.mil-logo-image img { display:block; width:52px; height:auto; max-width:none; object-fit:contain; }
@media screen and (max-width:992px) { .mil-logo-image { width:50px; height:50px; } .mil-logo-image img { width:46px; } }

/* Moonfox v1.13 — fox mark left + centered wordmark. No geometry or button rules changed. */
.mil-frame-top {
  position: relative;
}
.mil-logo-image {
  width: 52px !important;
  height: 52px !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
  line-height: 0 !important;
  font-size: 0 !important;
  flex: 0 0 52px !important;
}
.mil-logo-image img {
  display: block !important;
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}
.mil-header-wordmark {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 168px !important;
  height: auto !important;
  line-height: 0 !important;
  z-index: 2 !important;
}
.mil-header-wordmark img {
  display: block !important;
  width: 168px !important;
  height: auto !important;
  max-width: 168px !important;
  object-fit: contain !important;
}
@media screen and (max-width: 992px) {
  .mil-logo-image {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }
  .mil-logo-image img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
  .mil-header-wordmark,
  .mil-header-wordmark img {
    width: 138px !important;
    max-width: 138px !important;
  }
}
@media screen and (max-width: 500px) {
  .mil-header-wordmark,
  .mil-header-wordmark img {
    width: 118px !important;
    max-width: 118px !important;
  }
}


/* Moonfox v1.15 — homepage spacing + remove top-right menu trigger. */
.moonfox-homepage .mil-banner .mil-banner-content > h1 {
  margin-top: 42px !important;
}

.mil-frame-top .mil-menu-btn {
  display: none !important;
}

@media screen and (max-width: 768px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    margin-top: 28px !important;
  }
}


/* Moonfox v1.28 — logos scroll with the document; frame bottom remains fixed. */
.moonfox-site-header {
  position: relative;
  width: 100%;
  height: 110px;
  z-index: 8;
  pointer-events: auto;
  padding: 0 60px;
}

.moonfox-site-header-inner {
  position: relative;
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

.moonfox-site-header .mil-logo-image {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.moonfox-site-header .mil-header-wordmark {
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
}

/* Only the main frame's top row is removed. The menu's cloned frame-top remains intact. */
.mil-frame > .mil-frame-top {
  display: none !important;
}

/* Restore Ashley's fixed frame so Homepage/current-page + Back to top retain their prior behavior. */
.mil-frame {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
}

/* The frame top row is removed for the non-sticky logos. Keep the bottom
   controls pinned to the same viewport position they occupied in Ashley. */
@media screen and (min-width: 1201px) {
  .mil-frame .mil-frame-bottom {
    position: absolute !important;
    left: 60px !important;
    right: 60px !important;
    bottom: 60px !important;
    width: auto !important;
  }
}

/* The non-sticky header now provides the vertical space previously provided by the fixed frame. */
.moonfox-homepage .mil-banner {
  min-height: 100vh !important;
  height: auto !important;
}

.moonfox-homepage .mil-banner .container {
  min-height: 100vh !important;
  padding-top: 8px !important;
}

.moonfox-homepage .mil-banner .mil-banner-content {
  padding-bottom: 88px !important;
}

@media screen and (max-width: 1200px) {
  .moonfox-site-header {
    height: 90px;
    padding: 0 30px;
  }

  .mil-frame {
    height: 90px !important;
  }

  .moonfox-homepage .mil-banner .container {
    min-height: 100vh !important;
    padding-top: 14px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 72px !important;
  }
}

@media screen and (max-width: 768px) {
  .moonfox-homepage .mil-banner .container {
    min-height: 100vh !important;
    padding-top: 6px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 66px !important;
  }
}


/* Footer contact formatting — Moonfox v1.32 */
.mil-footer .mil-no-wrap {
  white-space: nowrap;
  letter-spacing: .02em;
}


/* Service content lists — source content from Moonfox service brief. */
.moonfox-service-list {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
}
.moonfox-service-list p {
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
}

/* Moonfox v1.37 — service list alignment + original hover reveal restored. */
.mil-service-card-sm > h5 {
  min-height: 90px !important;
}

.moonfox-service-list {
  margin-top: 0 !important;
}

.moonfox-service-list p {
  opacity: 0 !important;
  transform: translateY(10px) !important;
  transition: opacity .4s cubic-bezier(0, 0, .3642, 1), transform .4s cubic-bezier(0, 0, .3642, 1) !important;
}

.mil-service-card-sm:hover .moonfox-service-list p {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

@media screen and (max-width: 992px) {
  .mil-service-card-sm > h5 {
    min-height: 90px !important;
  }

  .moonfox-service-list p,
  .mil-service-card-sm:hover .moonfox-service-list p {
    opacity: 1 !important;
    transform: translateY(0) !important;
  }
}


/* Moonfox v1.77 — service descriptions: prevent text clipping in hover state. */
/* Moonfox v1.78 — media box is now a size container so the caption text
   (font-size, padding, gap) can scale to the box's actual rendered size
   at any column width, viewport, or browser zoom, instead of overflowing
   a fixed 16px/26px layout tuned only for the widest breakpoint. */
.moonfox-service-media {
  position: relative;
  width: 100%;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  margin-top: 6px;
  background: rgba(255,255,255,.035);
  container-type: inline-size;
}

.moonfox-service-media > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1);
  opacity: 1;
  transition: opacity .45s cubic-bezier(0,0,.3642,1), transform .55s cubic-bezier(0,0,.3642,1);
  filter: saturate(.72) contrast(1.02);
}

.moonfox-service-media::after {
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(180deg, rgba(5,5,8,.04) 0%, rgba(5,5,8,.22) 100%);
  transition: opacity .35s ease;
}

.moonfox-service-list {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: clamp(4px, 2cqw, 8px);
  margin: 0 !important;
  padding: clamp(14px, 6cqw, 26px) clamp(12px, 5.5cqw, 24px);
  box-sizing: border-box;
  overflow-y: auto;
  overflow-x: hidden;
  opacity: 0 !important;
  transform: translateY(18px);
  transition: opacity .45s cubic-bezier(0,0,.3642,1), transform .45s cubic-bezier(0,0,.3642,1);
  background: rgba(5,5,8,.94);
}

.moonfox-service-list p {
  margin: 0 !important;
  opacity: 1 !important;
  transform: none !important;
  display: block !important;
  overflow: visible !important;
  -webkit-line-clamp: unset !important;
  line-clamp: unset !important;
  -webkit-box-orient: initial !important;
  /*font-size: clamp(11px, 4.8cqw, 16px);*/
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.35;
}

@media (hover: hover) and (pointer: fine) {
  .mil-service-card-sm:hover .moonfox-service-media > img {
    opacity: 0;
    transform: scale(1.045);
  }

  .mil-service-card-sm:hover .moonfox-service-media::after {
    opacity: 0;
  }

  .mil-service-card-sm:hover .moonfox-service-list {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .mil-service-card-sm:hover::before {
    box-shadow: 0 0 5px var(--mf-purple), 0 0 14px rgba(170,0,255,.85), 0 0 28px rgba(170,0,255,.45);
  }
}

@media screen and (max-width: 992px) {
  .moonfox-service-media {
    aspect-ratio: 1 / 1;
    cursor: pointer;
  }

  /* Touch devices have no hover state: tapping/focusing the card reveals
     the same image -> description transition used on desktop hover. */
  .mil-service-card-sm {
    cursor: pointer;
    outline: none;
  }

  .moonfox-service-media > img {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .moonfox-service-media::after {
    opacity: 1;
  }

  .moonfox-service-list {
    position: absolute;
    inset: 0;
    z-index: 2;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: clamp(4px, 2cqw, 8px);
    margin: 0 !important;
    padding: clamp(14px, 6cqw, 22px) clamp(12px, 5.5cqw, 20px);
    box-sizing: border-box;
    overflow-y: auto;
    overflow-x: hidden;
    opacity: 0 !important;
    transform: translateY(18px);
    background: rgba(5,5,8,.94);
    transition: opacity .45s cubic-bezier(0,0,.3642,1), transform .45s cubic-bezier(0,0,.3642,1);
  }

  /* Touch state is controlled exclusively by the JS toggle class.
     Do not use :focus/:active here: a tapped element can stay focused after
     the second tap, which would prevent it from returning to the image state. */
  .mil-service-card-sm.is-touch-active .moonfox-service-media > img {
    opacity: 0 !important;
    transform: scale(1.045) !important;
  }

  .mil-service-card-sm.is-touch-active .moonfox-service-media::after {
    opacity: 0;
  }

  .mil-service-card-sm.is-touch-active .moonfox-service-list {
    opacity: 1 !important;
    transform: translateY(0);
  }

  .mil-service-card-sm.is-touch-active::before {
    width: 100%;
  }
}


/* Bangladesh footer address */
.moonfox-footer-address {
  margin-top: 8px;
  line-height: 1.6;
}


/* Moonfox v1.41 — hero copy lifted closer to the logo/header level. */
.moonfox-homepage .mil-banner .mil-banner-content {
  padding-bottom: 120px !important;
}

@media screen and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 100px !important;
  }
}

@media screen and (max-width: 768px) {
  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 88px !important;
  }
}


/* Moonfox v1.42 — move homepage hero content and scroll control substantially upward. */
.moonfox-homepage .mil-banner .mil-banner-content {
  padding-bottom: 180px !important;
}

.moonfox-homepage .mil-banner .mil-circle-text {
  bottom: 190px !important;
}

@media screen and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 180px !important;
  }
  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 160px !important;
  }
}

@media screen and (max-width: 992px) {
  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: auto !important;
  }
}

@media screen and (max-width: 768px) {
  .moonfox-homepage .mil-banner .mil-banner-content {
    padding-bottom: 150px !important;
  }
}

/* Moonfox v1.43 — lift hero text, CTA and scroll control much higher. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1,
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    position: relative !important;
    top: -150px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 340px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1,
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    position: relative !important;
    top: -120px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 270px !important;
  }
}

@media screen and (max-width: 992px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1,
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    position: relative !important;
    top: -90px !important;
  }
}

/* Moonfox v1.45 — fine-tune hero positions from the proven v1.43 layout.
   Headline moves only slightly down; the two hero controls align near the
   fixed HOMEPAGE label without moving the entire hero section. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    top: -110px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 60px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 60px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    top: -85px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 45px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 45px !important;
  }
}

/* Moonfox v1.46 — fine hero alignment from the v1.45 current layout.
   Headline slightly down; both hero controls lifted together. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    top: -80px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 0 !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 120px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    top: -55px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 0 !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: 105px !important;
  }
}

/* Moonfox v1.47 — integrate the non-sticky brand marks visually into the hero.
   The marks remain outside .mil-frame and therefore remain non-sticky. */
@media screen and (min-width: 993px) {
  .moonfox-homepage .moonfox-site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 110px !important;
    z-index: 8 !important;
    background: transparent !important;
  }

  .moonfox-homepage .mil-content {
    margin-top: 0 !important;
  }

  /* Pull only the hero background up behind the logos while adding the
     same amount of internal space back, so the existing hero content keeps
     its current vertical relationship. */
  .moonfox-homepage .mil-banner {
    margin-top: -110px !important;
  }

  .moonfox-homepage .mil-banner > .mi-invert-fix {
    padding-top: 110px !important;
    box-sizing: border-box !important;
  }
}

@media screen and (max-width: 992px) {
  .moonfox-homepage .moonfox-site-header {
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 90px !important;
    background: transparent !important;
    z-index: 8 !important;
  }

  .moonfox-homepage .mil-banner {
    margin-top: -90px !important;
  }

  .moonfox-homepage .mil-banner > .mi-invert-fix {
    padding-top: 90px !important;
    box-sizing: border-box !important;
  }
}

/* Moonfox v1.48 — restore the hero text/action positions to the previous
   v1.46 layout while keeping the logos integrated into the hero. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > h1 {
    top: 19px !important;
  }

  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 211px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    bottom: -91px !important;
  }
}

/* Moonfox v1.49 — raise both hero controls slightly from v1.48. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: 181px !important;
  }

  .moonfox-homepage .mil-circle-text {
    bottom: -61px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: -30px !important;
  }

  .moonfox-homepage .mil-circle-text {
    bottom: -61px !important;
  }
}

/* Moonfox v1.50 — align both hero controls on the same horizontal level. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: auto !important;
    bottom: 150px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    top: auto !important;
    bottom: 115px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    top: auto !important;
    bottom: 120px !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    top: auto !important;
    bottom: 85px !important;
  }
}

/* Moonfox v1.51 — independently anchor the two hero controls.
   The primary CTA and scroll control no longer use relative offsets tied
   to their normal-flow positions. Each is positioned independently from
   the hero container, with their visual centers aligned. */
@media screen and (min-width: 1201px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    position: absolute !important;
    left: 0 !important;
    top: auto !important;
    bottom: 110px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    bottom: 75px !important;
  }
}

@media screen and (min-width: 993px) and (max-width: 1200px) {
  .moonfox-homepage .mil-banner .mil-banner-content > .mil-button {
    position: absolute !important;
    left: 0 !important;
    top: auto !important;
    bottom: 90px !important;
    transform: none !important;
    margin: 0 !important;
  }

  .moonfox-homepage .mil-banner .mil-circle-text {
    position: absolute !important;
    right: 0 !important;
    top: auto !important;
    bottom: 55px !important;
  }
}


/* Moonfox footer division line */
.moonfox-footer-division {
  margin-top: 6px;
  font-size: 11px;
  letter-spacing: 0.04em;
  line-height: 1.5;
  opacity: 0.72;
}

/* Moonfox v1.53 — footer uses the supplied Moonfox wordmark artwork. */
.moonfox-footer-wordmark {
  display: block;
  width: 205px;
  height: auto;
  max-width: 100%;
  object-fit: contain;
  object-position: left center;
}

@media screen and (max-width: 992px) {
  .moonfox-footer-wordmark {
    width: 175px;
  }
}


/* Moonfox v1.55 — swap the top brand marks: wordmark left, fox mark centered.
   Responsive sizing prevents overlap on narrow/mobile views. */
.moonfox-site-header-inner {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: flex-start !important;
}

.moonfox-site-header .mil-header-wordmark {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  transform: none !important;
  width: 168px !important;
  max-width: min(168px, calc(50% - 80px)) !important;
  height: auto !important;
  margin: 0 !important;
  z-index: 2 !important;
}

.moonfox-site-header .mil-header-wordmark img {
  width: 100% !important;
  max-width: 100% !important;
  height: auto !important;
  display: block !important;
}

.moonfox-site-header .mil-logo-image {
  position: absolute !important;
  left: 50% !important;
  top: 50% !important;
  transform: translate(-50%, -50%) !important;
  width: 52px !important;
  height: 52px !important;
  flex: 0 0 52px !important;
  margin: 0 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 3 !important;
}

.moonfox-site-header .mil-logo-image img {
  width: 44px !important;
  height: 44px !important;
  max-width: 44px !important;
  max-height: 44px !important;
  object-fit: contain !important;
}

@media screen and (max-width: 992px) {
  .moonfox-site-header .mil-header-wordmark {
    width: 138px !important;
    max-width: min(138px, calc(50% - 58px)) !important;
  }

  .moonfox-site-header .mil-logo-image {
    width: 46px !important;
    height: 46px !important;
    flex-basis: 46px !important;
  }

  .moonfox-site-header .mil-logo-image img {
    width: 38px !important;
    height: 38px !important;
    max-width: 38px !important;
    max-height: 38px !important;
  }
}

@media screen and (max-width: 500px) {
  .moonfox-site-header .mil-header-wordmark {
    width: 118px !important;
    max-width: min(118px, calc(50% - 59px)) !important;
  }

  .moonfox-site-header .mil-logo-image {
    width: 42px !important;
    height: 42px !important;
    flex-basis: 42px !important;
  }

  .moonfox-site-header .mil-logo-image img {
    width: 34px !important;
    height: 34px !important;
    max-width: 34px !important;
    max-height: 34px !important;
  }
}


/* Moonfox v1.61 — widen the footer contact block so the full address stays on one line on larger views. */
@media screen and (min-width: 769px) {
  .mil-footer .moonfox-footer-address {
    white-space: nowrap;
  }
}

@media screen and (max-width: 768px) {
  .mil-footer .moonfox-footer-address {
    white-space: normal;
  }
}

/* Moonfox v1.61 — right-side scroll slider neon treatment. */
.mil-progress-track {
  width: 4px !important;
  background: rgba(170, 0, 255, 0.07) !important;
  box-shadow: inset 0 0 7px rgba(170, 0, 255, 0.16) !important;
}

.mil-progress-track .mil-progress {
  width: 4px !important;
  background: #aa00ff !important;
  box-shadow:
    0 0 3px rgba(255, 255, 255, 0.95),
    0 0 7px rgba(170, 0, 255, 0.95),
    0 0 14px rgba(170, 0, 255, 0.85),
    0 0 28px rgba(170, 0, 255, 0.55),
    0 0 46px rgba(170, 0, 255, 0.32) !important;
}

@media screen and (max-width: 992px) {
  .mil-progress-track,
  .mil-progress-track .mil-progress {
    box-shadow: none !important;
  }
}


/* Moonfox v1.62 — landing-page WhatsApp contact button. */
.moonfox-homepage .moonfox-whatsapp {
  position: absolute !important;
  top: 50% !important;
  right: 0 !important;
  transform: translateY(-50%) !important;
  z-index: 4 !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 9px !important;
  min-width: 104px !important;
  height: 38px !important;
  padding: 0 13px !important;
  box-sizing: border-box !important;
  color: #fff !important;
  background: transparent !important;
  border: 1px solid rgba(255,255,255,.92) !important;
  border-radius: 0 !important;
  text-decoration: none !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .18em !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  transition: background .3s ease, color .3s ease, border-color .3s ease, box-shadow .3s ease, transform .3s ease !important;
}

.moonfox-homepage .moonfox-whatsapp i {
  color: #fff !important;
  font-size: 18px !important;
  line-height: 1 !important;
  letter-spacing: 0 !important;
}

.moonfox-homepage .moonfox-whatsapp:hover {
  color: #050508 !important;
  background: #fff !important;
  border-color: #fff !important;
  box-shadow: 0 0 18px rgba(255,255,255,.16) !important;
  transform: translateY(-50%) !important;
}

.moonfox-homepage .moonfox-whatsapp:hover i {
  color: #050508 !important;
}

@media screen and (max-width: 1200px) {
  .moonfox-homepage .moonfox-whatsapp {
    min-width: 96px !important;
    height: 35px !important;
    padding: 0 11px !important;
    gap: 7px !important;
    font-size: 10px !important;
  }

  .moonfox-homepage .moonfox-whatsapp i {
    font-size: 17px !important;
  }
}

@media screen and (max-width: 500px) {
  .moonfox-homepage .moonfox-whatsapp {
    min-width: 88px !important;
    height: 32px !important;
    padding: 0 9px !important;
    gap: 6px !important;
    font-size: 9px !important;
    letter-spacing: .14em !important;
  }

  .moonfox-homepage .moonfox-whatsapp i {
    font-size: 16px !important;
  }
}


/* Moonfox v1.75 — Zen Dots for hero headline and service-box headings. */
.moonfox-homepage .mil-banner .mil-banner-content > h1,
.mil-service-card-sm > h5 {
  font-family: "Zen Dots", sans-serif !important;
}


/* Moonfox v1.78 — touch-only service hint. Hidden whenever a mouse/hover
   input is present; shown above the four service cards on touch viewports. */
.moonfox-touch-hint {
  display: none;
  margin: -78px 0 28px;
  text-align: center;
  color: rgb(244, 244, 247);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .2em;
  line-height: 1.4;
  text-transform: uppercase;
  pointer-events: none;
}

@media (hover: none), (pointer: coarse) {
  .moonfox-touch-hint {
    display: block;
  }
}

@media screen and (max-width: 576px) and (hover: none) and (pointer: coarse) {
  .moonfox-touch-hint {
    margin: -82px 0 24px;
    font-size: 9px;
    letter-spacing: .17em;
  }
}


/* Moonfox v2.01 — center the touch instruction independently of grid/card widths. */
@media (hover: none), (pointer: coarse) {
  .moonfox-touch-hint {
    position: relative !important;
    width: 100% !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    left: 0 !important;
    right: auto !important;
    text-align: center !important;
    display: block !important;
  }
}


/* Moonfox v2.02 — footer email between phone and address. */
.moonfox-footer-email {
  margin-top: 3px;
  margin-bottom: 3px;
}

.moonfox-footer-email a {
  color: inherit;
  text-decoration: none;
}

.moonfox-footer-email a:hover {
  color: #aa00ff;
}


/* Moonfox v2.03 — contact banner replaces Send message with direct contact details. */
.moonfox-contact-quick {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  margin-top: -24px;
}

.moonfox-contact-quick a {
  text-decoration: none !important;
  transition: opacity .3s ease, transform .3s ease, color .3s ease !important;
}

.moonfox-contact-phone {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: #fff !important;
  font-size: 16px;
  letter-spacing: .03em;
}

.moonfox-contact-phone i {
  color: #fff !important;
  font-size: 20px;
  line-height: 1;
}

.moonfox-contact-email {
  color: #9a96a8 !important;
  font-size: 14px;
}

.moonfox-contact-quick a:hover {
  opacity: 1;
  transform: translateY(-2px);
}

.moonfox-contact-email:hover {
  color: #aa00ff !important;
}

@media screen and (max-width: 576px) {
  .moonfox-contact-phone { font-size: 15px; }
  .moonfox-contact-phone i { font-size: 19px; }
  .moonfox-contact-email { font-size: 13px; }
}


/* Moonfox v2.05 — AJAX contact form state */
.moonfox-contact-form button[type="submit"][disabled] {
  opacity: 0.65;
  pointer-events: none;
}
.moonfox-contact-form input[required]:invalid,
.moonfox-contact-form textarea[required]:invalid {
  box-shadow: none;
}


/* Moonfox v2.10 — deterministic mobile/touch service-card state.
   The JS toggle owns this state; template hover/focus/active behavior cannot
   override it. */
@media (hover: none) and (pointer: coarse) {
  .mil-service-card-sm {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
    cursor: pointer !important;
    outline: none;
    user-select: none;
  }

  .mil-service-card-sm .moonfox-service-media > img {
    opacity: 1 !important;
    transform: scale(1) !important;
    pointer-events: none !important;
  }

  .mil-service-card-sm .moonfox-service-media::after {
    opacity: 1 !important;
    pointer-events: none !important;
  }

  .mil-service-card-sm .moonfox-service-list {
    opacity: 0 !important;
    transform: translateY(18px) !important;
    pointer-events: none !important;
  }

  .mil-service-card-sm::before {
    width: 0 !important;
    box-shadow: none !important;
  }

  .mil-service-card-sm.is-touch-active .moonfox-service-media > img {
    opacity: 0 !important;
    transform: scale(1.045) !important;
  }

  .mil-service-card-sm.is-touch-active .moonfox-service-media::after {
    opacity: 0 !important;
  }

  .mil-service-card-sm.is-touch-active .moonfox-service-list {
    opacity: 1 !important;
    transform: translateY(0) !important;
    pointer-events: none !important;
  }

  .mil-service-card-sm.is-touch-active::before {
    width: 100% !important;
    box-shadow: 0 0 5px var(--mf-purple), 0 0 14px rgba(170,0,255,.85), 0 0 28px rgba(170,0,255,.45) !important;
  }

  /* Neutralize the template's persistent mobile hover/focus/active state. */
  .mil-service-card-sm:hover:not(.is-touch-active) .moonfox-service-media > img,
  .mil-service-card-sm:focus:not(.is-touch-active) .moonfox-service-media > img,
  .mil-service-card-sm:active:not(.is-touch-active) .moonfox-service-media > img {
    opacity: 1 !important;
    transform: scale(1) !important;
  }

  .mil-service-card-sm:hover:not(.is-touch-active) .moonfox-service-media::after,
  .mil-service-card-sm:focus:not(.is-touch-active) .moonfox-service-media::after,
  .mil-service-card-sm:active:not(.is-touch-active) .moonfox-service-media::after {
    opacity: 1 !important;
  }

  .mil-service-card-sm:hover:not(.is-touch-active) .moonfox-service-list,
  .mil-service-card-sm:focus:not(.is-touch-active) .moonfox-service-list,
  .mil-service-card-sm:active:not(.is-touch-active) .moonfox-service-list {
    opacity: 0 !important;
    transform: translateY(18px) !important;
  }

  .mil-service-card-sm:hover:not(.is-touch-active)::before,
  .mil-service-card-sm:focus:not(.is-touch-active)::before,
  .mil-service-card-sm:active:not(.is-touch-active)::before {
    width: 0 !important;
    box-shadow: none !important;
  }
}

/* Moonfox v2.11 — keep footer email visible while exempting it from Cloudflare Email Address Obfuscation. */
.moonfox-footer-email-link {
  color: inherit;
  text-decoration: none;
}

.moonfox-footer-email-link:hover {
  color: #aa00ff;
}

/* Moonfox v2.12 — desktop contact details: keep email directly below phone. */
@media screen and (min-width: 993px) {
  .moonfox-contact-quick {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 6px !important;
  }

  .moonfox-contact-phone,
  .moonfox-contact-email {
    display: block !important;
    width: max-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }

  .moonfox-contact-email {
    margin-top: 0 !important;
  }
}

/* Moonfox v2.28 — enlarge and center the partners label, with more space before the slider. */
.moonfox-partners-title {
  display: block;
  width: 100%;
  margin: 0 0 60px !important;
  color: rgba(178, 171, 195, 0.888) !important;
  font-family: "Montserrat", sans-serif !important;
  font-size: 30px !important;
  line-height: 1.2 !important;
  font-weight: 500 !important;
  letter-spacing: 3px !important;
  text-align: center !important;
  text-transform: uppercase !important;
}

/* Moonfox v2.20 — add more space between the four service boxes and the infinite partners slider. */
.moonfox-partners-spaced {
  padding-top: 120px !important;
}

@media screen and (max-width: 992px) {
  .moonfox-partners-spaced {
    padding-top: 90px !important;
  }
}

/* Moonfox v2.16 — add more breathing room between the upper content section and footer content. */
.moonfox-footer-spaced .container {
  padding-top: 180px !important;
}

@media screen and (max-width: 992px) {
  .moonfox-footer-spaced .container {
    padding-top: 135px !important;
  }
}


/* Moonfox v2.25 — let the services decoration extend upward across the
   hero/services boundary. The original section overflow rule clips it at
   the top of #services, so only that section is opened up. */
.moonfox-homepage #services {
  overflow: visible !important;
  z-index: auto !important;
}

/* Restore the hero's original stacking/overflow behavior. The shape belongs
   to #services, so the hero itself does not need to overflow. */
.moonfox-homepage .mil-banner {
  overflow: hidden !important;
  z-index: auto !important;
}

/* Moonfox v2.26 — services intro typography. */
.moonfox-homepage #services .mil-suptitle {
  font-size: 20px !important;
}

.moonfox-homepage #services .mil-suptitle::after {
  font-size: 14px !important;
}

/* Keep the loader above the fixed frame and all animated site layers. */
.mil-preloader {
  z-index: 100000 !important;
}

html.moonfox-prepaint .mil-frame,
html.moonfox-prepaint .moonfox-site-header {
  visibility: hidden !important;
}

/* ==========================================================
   MOONFOX v2.39 — CHROMIUM MOBILE RENDER-STABILITY PASS
   Stabilize the first frame and avoid repeated mobile viewport
   recompositing without changing the desktop visual system.
   ========================================================== */

/* The inline head script adds this before the body can paint. */
html.moonfox-prepaint .mil-up {
  visibility: hidden !important;
}

/* Keep the hero decoration hidden until the unified first-viewport reveal. */
html.moonfox-prepaint .moonfox-homepage .mil-banner .mil-animation-frame {
  visibility: hidden !important;
  opacity: 0 !important;
}

html.moonfox-prepaint .moonfox-homepage .mil-banner .mil-banner-content {
  visibility: hidden !important;
}

html.moonfox-prepaint .mil-animation .mil-dodecahedron {
  animation-play-state: paused !important;
}

html.moonfox-prepaint .mil-animation {
  will-change: auto !important;
}

/* Keep the preloader itself deterministic while the real layout settles. */
html.moonfox-prepaint .mil-preloader,
html.moonfox-prepaint .mil-preloader-animation {
  min-height: 100%;
}

/* Stable mobile viewport: prevents the initial 100vh measurement from
   changing when Chromium establishes its visual viewport. */
@media screen and (max-width: 768px) {
  .mil-banner {
    height: 100vh !important;
    height: 100svh !important;
    min-height: 100svh !important;
  }

  .mil-preloader,
  .mil-preloader .mil-preloader-animation,
  .mil-preloader .mil-preloader-animation .mil-pos-abs {
    height: 100vh !important;
    height: 100svh !important;
  }
}

/*
 * The decorative system is intentionally lighter on touch screens. The
 * artwork remains present, but expensive live filters are removed from the
 * continuously composited layers.
 */
@media screen and (max-width: 768px) and (hover: none) and (pointer: coarse) {
  .mil-animation {
    filter: none !important;
    -webkit-filter: none !important;
    transform: translate3d(0, 0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .mil-animation .mil-dodecahedron {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }

  .mil-banner::after,
  .mil-inner-banner::after,
  .mil-banner-personal::after {
    will-change: auto !important;
  }

  .moonfox-site-header,
  .moonfox-site-header-inner {
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
  }
}


/* Moonfox v2.53 — restore the larger legacy Masalacha presentation. */
.moonfox-partner-special-18 {
  width: 180px !important;
  max-width: 180px !important;
}
.moonfox-partner-special-18 .moonfox-partner-white,
.moonfox-partner-special-18 .moonfox-partner-original {
  width: 180px !important;
  max-width: 180px !important;
  max-height: none !important;
}
@media screen and (max-width: 991px) {
  .moonfox-partner-special-18 { width: 150px !important; max-width: 150px !important; }
  .moonfox-partner-special-18 .moonfox-partner-white,
  .moonfox-partner-special-18 .moonfox-partner-original { width: 150px !important; max-width: 150px !important; }
}
@media screen and (max-width: 575px) {
  .moonfox-partner-special-18 { width: 120px !important; max-width: 120px !important; }
  .moonfox-partner-special-18 .moonfox-partner-white,
  .moonfox-partner-special-18 .moonfox-partner-original { width: 120px !important; max-width: 120px !important; }
}

/* Moonfox v2.53 — final partner contrast overrides. */
.moonfox-partner-special .moonfox-partner-white,
.moonfox-partner-special .moonfox-partner-original {
  filter: none !important;
  opacity: 0;
}
.moonfox-partner-special .moonfox-partner-white { opacity: 1; }
@media (hover: hover) and (pointer: fine) {
  .moonfox-partner-special:hover .moonfox-partner-white { opacity: 0; }
  .moonfox-partner-special:hover .moonfox-partner-original { opacity: 1; }
}
.moonfox-partner-special.moonfox-partner-tapped .moonfox-partner-white { opacity: 0; }
.moonfox-partner-special.moonfox-partner-tapped .moonfox-partner-original { opacity: 1; }
.moonfox-partner-special.moonfox-partner-special-18.moonfox-partner-tapped,
.moonfox-partner-special.moonfox-partner-special-18:hover {
  background: rgba(247, 245, 239, 0.96);
  border-radius: 999px;
}


/* Moonfox v2.53 — partner logos are static white only.
 * Removed hover/tap enlargement and original-colour states.
 * Special logos use prepared white variants so internal lettering stays readable.
 */
.mil-partner-frame,
.mil-partner-frame:hover,
.mil-partner-frame.moonfox-partner-tapped {
  transform: none !important;
  z-index: 1 !important;
  transition: none !important;
  will-change: auto !important;
}
.mil-partner-frame img,
.mil-partner-frame:hover img,
.mil-partner-frame.moonfox-partner-tapped img {
  transform: none !important;
  transition: none !important;
  will-change: auto !important;
  filter: brightness(0) invert(1) !important;
}
.moonfox-partner-special .moonfox-partner-white,
.moonfox-partner-special .moonfox-partner-original {
  opacity: 1 !important;
}
.moonfox-partner-special .moonfox-partner-original {
  display: none !important;
}
.moonfox-partner-special-18,
.moonfox-partner-special-18:hover,
.moonfox-partner-special-18.moonfox-partner-tapped {
  background: transparent !important;
  border-radius: 0 !important;
}


/* Moonfox v2.53 — preserve readable lettering inside prepared white partner variants.
 * Generic partner images are inverted to white. The four special variants are
 * already artwork-composed for the white presentation and must bypass that filter.
 */
.mil-partner-frame.moonfox-partner-special .moonfox-partner-white {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.mil-partner-frame.moonfox-partner-special .moonfox-partner-original {
  display: none !important;
  opacity: 0 !important;
}
.mil-partner-frame.moonfox-partner-special:hover,
.mil-partner-frame.moonfox-partner-special.moonfox-partner-tapped {
  transform: none !important;
  z-index: 1 !important;
}


/* Moonfox v2.53 — Adelaide Nut Co gets the same composed white treatment as the other logos
 * whose lettering sits inside a detailed/colored shape. The prepared artwork contains
 * white fills with dark internal outlines/details, so it must bypass the generic invert filter.
 */
.mil-partner-frame.moonfox-partner-special-02 {
  filter: none !important;
}
.mil-partner-frame.moonfox-partner-special-02 .moonfox-partner-white {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}


/* Moonfox v2.53 — six newly supplied partner logos use precomposed white assets. */
.mil-partner-frame.moonfox-partner-new .moonfox-partner-white {
  filter: none !important;
  -webkit-filter: none !important;
  opacity: 1 !important;
  transform: none !important;
}
.mil-partner-frame.moonfox-partner-new,
.mil-partner-frame.moonfox-partner-new:hover,
.mil-partner-frame.moonfox-partner-new.moonfox-partner-tapped {
  transform: none !important;
}