/* ==========================================================================
   ETC STUDIOS - ISOLATED MOBILE STYLESHEET (mobile.css)
   ========================================================================= */

/* 1. HIDE ALL MOBILE ELEMENTS BY DEFAULT ON DESKTOP */
.m-header,
.m-mobile-menu,
.m-hero,
.m-about,
.m-services,
.m-work,
.m-growth,
.m-testimonials,
.m-contact,
.m-footer,
.review-modal {
  display: none !important;
}

/* 2. MOBILE VIEW OVERRIDES (VIEWPORT <= 767px OR WITHIN DESKTOP MOCKUP SIMULATOR) */
@media (max-width: 767px) {
  /* Hide Desktop Layout Elements */
  header.header,
  div.hero-viewport-wrapper,
  section.about-section,
  section.why-section,
  section.services-section,
  section.process-section,
  section.testimonials-section,
  section.cta-section,
  section.contact-section,
  footer.footer,
  .custom-cursor {
    display: none !important;
  }

  /* Show Mobile Layout Elements */
  .m-header {
    display: flex !important;
  }
  .m-hero,
  .m-about,
  .m-services,
  .m-work,
  .m-growth,
  .m-testimonials,
  .m-contact,
  .m-footer {
    display: block !important;
  }
}

/* Replicate for simulated mockup frame on desktop */
.mobile-mockup-frame header.header,
.mobile-mockup-frame div.hero-viewport-wrapper,
.mobile-mockup-frame section.about-section,
.mobile-mockup-frame section.why-section,
.mobile-mockup-frame section.services-section,
.mobile-mockup-frame section.process-section,
.mobile-mockup-frame section.testimonials-section,
.mobile-mockup-frame section.cta-section,
.mobile-mockup-frame section.contact-section,
.mobile-mockup-frame footer.footer,
.mobile-mockup-frame .custom-cursor {
  display: none !important;
}

.mobile-mockup-frame .m-header {
  display: flex !important;
}
.mobile-mockup-frame .m-hero,
.mobile-mockup-frame .m-about,
.mobile-mockup-frame .m-services,
.mobile-mockup-frame .m-work,
.mobile-mockup-frame .m-growth,
.mobile-mockup-frame .m-testimonials,
.mobile-mockup-frame .m-contact,
.mobile-mockup-frame .m-footer {
  display: block !important;
}

/* 3. MOBILE-SPECIFIC RULES (ACTIVE ONLY ON MOBILE OR IN SIMULATOR) */
@media (max-width: 767px) {
  body {
    background-color: var(--bg-cream) !important;
    color: var(--text-dark) !important;
    font-family: var(--font-body) !important;
    overflow-x: hidden !important;
  }
}

.mobile-mockup-frame {
  background-color: var(--bg-cream) !important;
  color: var(--text-dark) !important;
  font-family: var(--font-body) !important;
}

/* Spacing Helpers */
.m-label {
  font-size: 12px !important;
  color: var(--text-gray) !important;
  letter-spacing: 2px !important;
  font-weight: 600 !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-body) !important;
}

.m-section-title {
  font-family: var(--font-hand) !important;
  font-size: 28px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  color: var(--text-dark) !important;
  margin: 12px 0 16px !important;
}

.m-section-sub {
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: var(--text-gray) !important;
  margin-bottom: 24px !important;
  font-family: var(--font-body) !important;
}

.c-orange { color: var(--mustard-yellow) !important; }
.c-blue { color: var(--stories-blue) !important; }
.c-red { color: var(--brands-red) !important; }
.m-underline { text-decoration: underline !important; }

/* SHARED BUTTONS */
.m-btn-solid {
  background: var(--mustard-yellow) !important;
  color: var(--text-dark) !important;
  border-radius: 30px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-family: var(--font-hand) !important;
  font-weight: 500 !important;
  text-align: center !important;
  border: none !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.m-btn-outline {
  border: 1.5px solid var(--text-dark) !important;
  color: var(--text-dark) !important;
  border-radius: 30px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-family: var(--font-hand) !important;
  font-weight: 500 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.m-btn-outline-white {
  border: 1.5px solid #ffffff !important;
  color: #ffffff !important;
  border-radius: 30px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-family: var(--font-hand) !important;
  font-weight: 500 !important;
  background: transparent !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.m-btn-text {
  color: var(--text-dark) !important;
  font-size: 16px !important;
  font-family: var(--font-hand) !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  cursor: pointer !important;
}

.m-full {
  width: 100% !important;
  box-sizing: border-box !important;
}

.m-center {
  display: flex !important;
  margin: 24px auto 0 !important;
  width: fit-content !important;
}

/* Icons */
.icon-arrow, .icon-arrow-down, .icon-chevron {
  width: 14px !important;
  height: 14px !important;
  fill: currentColor !important;
}

/* ==========================================================================
   1. HEADER
   ========================================================================= */
/* .m-header layout props — display is controlled by the hide rule (line 6)
   and the media-query override below; DO NOT add display:flex here globally */
.m-header {
  position: relative !important;
  z-index: 999 !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background-color: var(--bg-cream) !important;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05) !important;
  box-sizing: border-box !important;
}

.m-logo-link {
  display: block !important;
  text-decoration: none !important;
  background: transparent !important;
  border: none !important;
  padding: 0 !important;
  box-shadow: none !important;
}

.m-logo-img {
  height: 50px !important;
  width: auto !important;
  max-width: 100% !important;
  display: block !important;
  object-fit: contain !important;
  background: transparent !important;
  border: none !important;
}

.m-header-right {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
}

.m-header-right .m-btn-outline {
  padding: 8px 16px !important;
  font-size: 13px !important;
}

.m-hamburger {
  background: transparent !important;
  border: none !important;
  padding: 4px !important;
  cursor: pointer !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.m-hamburger .bar {
  display: block !important;
  width: 22px !important;
  height: 2px !important;
  background: var(--text-dark) !important;
  transition: 0.3s ease !important;
}

/* ==========================================================================
   2. MOBILE MENU OVERLAY
   ========================================================================= */
.m-mobile-menu {
  position: fixed !important;
  top: 0 !important;
  right: -100% !important;
  width: 85% !important;
  height: 100vh !important;
  background-color: var(--text-dark) !important;
  transition: right 0.3s ease !important;
  padding: 20px !important;
  overflow-y: auto !important;
  z-index: 1000 !important;
  box-sizing: border-box !important;
  display: block !important;
}

.m-mobile-menu.active {
  right: 0 !important;
}

.m-menu-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 30px !important;
}

.m-close-btn {
  color: #ffffff !important;
  font-size: 28px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
}

.m-nav-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 30px 0 !important;
}

.m-nav-list li {
  padding: 14px 0 !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.1) !important;
}

.m-nav-list a {
  color: #ffffff !important;
  font-size: 18px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  display: flex !important;
  align-items: center !important;
  font-family: var(--font-body) !important;
}

.dot-active {
  display: inline-block !important;
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: var(--mustard-yellow) !important;
  margin-left: 6px !important;
}

.m-menu-cta {
  background-color: #2A2A2A !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-top: 20px !important;
  box-sizing: border-box !important;
}

.m-menu-cta-title {
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 600 !important;
  margin: 0 0 16px 0 !important;
  font-family: var(--font-body) !important;
}

.m-menu-cta .m-btn-solid {
  width: 100% !important;
}

.m-menu-contact {
  margin-top: 30px !important;
}

.m-menu-contact .contact-item {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 13px !important;
  color: #cccccc !important;
  margin-bottom: 12px !important;
  font-family: var(--font-body) !important;
}

.m-menu-contact .contact-item svg {
  color: var(--mustard-yellow) !important;
  width: 16px !important;
  height: 16px !important;
}

.m-menu-contact .m-phone-link {
  color: #cccccc !important;
  text-decoration: none !important;
}

.m-menu-social {
  margin-top: 30px !important;
}

.m-menu-social .social-icons {
  display: flex !important;
  gap: 10px !important;
  margin-top: 10px !important;
}

.social-circle {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  border: 1px solid #444444 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #ffffff !important;
  text-decoration: none !important;
}

.m-menu-footer {
  font-size: 11px !important;
  color: #888888 !important;
  margin-top: 30px !important;
  text-align: center !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   3. HERO SECTION
   ========================================================================= */
.m-hero {
  padding: 40px 16px 40px !important;
  background-color: var(--bg-cream) !important;
  box-sizing: border-box !important;
}

.m-subnav {
  display: flex !important;
  overflow-x: auto !important;
  white-space: nowrap !important;
  gap: 18px !important;
  padding-bottom: 8px !important;
  margin-bottom: 16px !important;
}

.m-subnav::-webkit-scrollbar {
  display: none !important;
}

.m-subnav a {
  font-size: 12px !important;
  color: var(--text-gray) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  font-family: var(--font-body) !important;
}

.m-subnav a.active {
  color: var(--mustard-yellow) !important;
  border-bottom: 2px solid var(--mustard-yellow) !important;
  padding-bottom: 4px !important;
}

.m-hero-title {
  font-family: var(--font-hand) !important;
  font-size: 32px !important;
  line-height: 1.3 !important;
  font-weight: 400 !important;
  margin-top: 20px !important;
  color: var(--text-dark) !important;
}

.m-hero-sub {
  font-size: 15px !important;
  color: var(--text-gray) !important;
  line-height: 1.6 !important;
  margin: 16px 0 !important;
  font-family: var(--font-body) !important;
}

.m-hero-img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  margin: 20px 0 !important;
}

.m-hero-cta {
  display: flex !important;
  align-items: center !important;
  gap: 16px !important;
  flex-wrap: wrap !important;
}

.m-stats-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  margin-top: 24px !important;
  box-sizing: border-box !important;
}

.m-stat-item {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.m-stat-item svg {
  color: var(--mustard-yellow) !important;
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 4px !important;
}

.stat-number {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

.stat-label {
  font-size: 11px !important;
  color: var(--text-gray) !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

.m-scroll-down {
  text-align: center !important;
  margin-top: 30px !important;
  font-size: 12px !important;
  color: #999999 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 6px !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   4. ABOUT SECTION
   ========================================================================= */
.m-about {
  background-color: var(--text-dark) !important;
  padding: 50px 16px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

.m-about .m-label {
  color: #999999 !important;
}

.m-about .m-section-title {
  color: #ffffff !important;
}

.m-about-text {
  font-size: 14px !important;
  color: #cccccc !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
  font-family: var(--font-body) !important;
}

.m-about-cta {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.m-about-cta .m-btn-solid,
.m-about-cta .m-btn-outline-white {
  width: 100% !important;
}

/* ==========================================================================
   5. SERVICES SECTION
   ========================================================================= */
.m-services {
  background-color: var(--bg-cream) !important;
  padding: 50px 16px !important;
  box-sizing: border-box !important;
}

.m-services-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
  margin-top: 20px !important;
}

.m-service-card {
  background: #ffffff !important;
  border-radius: 14px !important;
  padding: 16px !important;
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  border: 1.5px solid rgba(28, 28, 28, 0.08) !important;
}

.m-service-card svg {
  color: var(--mustard-yellow) !important;
  width: 24px !important;
  height: 24px !important;
}

.m-service-card h4 {
  font-family: var(--font-hand) !important;
  font-size: 16px !important;
  font-weight: 400 !important;
  color: var(--text-dark) !important;
  margin: 10px 0 6px 0 !important;
}

.m-service-card p {
  font-size: 12px !important;
  color: var(--text-gray) !important;
  margin: 0 !important;
  line-height: 1.4 !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   6. OUR WORK SECTION
   ========================================================================= */
.m-work {
  background-color: var(--bg-cream) !important;
  padding: 50px 16px !important;
  box-sizing: border-box !important;
}

.m-filter-tabs {
  display: flex !important;
  overflow-x: auto !important;
  gap: 10px !important;
  margin: 20px 0 !important;
  padding-bottom: 6px !important;
}

.m-filter-tabs::-webkit-scrollbar {
  display: none !important;
}

.m-filter-tabs button {
  background: transparent !important;
  border: 1px solid #dddddd !important;
  color: var(--text-gray) !important;
  border-radius: 20px !important;
  padding: 8px 16px !important;
  font-size: 13px !important;
  cursor: pointer !important;
  white-space: nowrap !important;
  font-family: var(--font-body) !important;
}

.m-filter-tabs button.active {
  background: var(--mustard-yellow) !important;
  color: var(--text-dark) !important;
  border-color: var(--mustard-yellow) !important;
  font-weight: 600 !important;
}

.m-work-grid {
  column-count: 2 !important;
  column-gap: 10px !important;
  display: block !important;
  width: 100% !important;
}

.m-work-card {
  break-inside: avoid !important;
  -webkit-column-break-inside: avoid !important;
  display: inline-block !important;
  width: 100% !important;
  margin-bottom: 12px !important;
  box-sizing: border-box !important;
}

.m-work-card img {
  width: 100% !important;
  height: auto !important;
  border-radius: 12px !important;
  display: block !important;
  object-fit: contain !important;
}

.m-work-card .work-title {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: var(--text-dark) !important;
  margin: 8px 0 2px 0 !important;
  font-family: var(--font-body) !important;
}

.m-work-card .work-category {
  font-size: 11px !important;
  color: var(--text-gray) !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   7. GROWTH ANALYSER SECTION
   ========================================================================= */
.m-growth {
  background-color: var(--text-dark) !important;
  padding: 50px 16px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
}

.m-growth-form {
  margin-top: 20px !important;
}

.m-growth-form label {
  display: block !important;
  font-size: 13px !important;
  color: #cccccc !important;
  margin-bottom: 8px !important;
  font-family: var(--font-body) !important;
}

.m-input-wrap {
  position: relative !important;
}

.m-input-wrap input {
  background: #2A2A2A !important;
  border: 1px solid #444444 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  color: #ffffff !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  font-family: var(--font-body) !important;
}

.m-input-wrap svg {
  position: absolute !important;
  right: 12px !important;
  top: 15px !important;
  color: #888888 !important;
}

.m-select {
  background: #2A2A2A !important;
  border: 1px solid #444444 !important;
  border-radius: 10px !important;
  padding: 12px !important;
  color: #ffffff !important;
  width: 100% !important;
  margin-bottom: 16px !important;
  box-sizing: border-box !important;
  font-size: 14px !important;
  appearance: none !important;
  font-family: var(--font-body) !important;
}

.m-results-card {
  background: #2A2A2A !important;
  border-radius: 16px !important;
  box-sizing: border-box !important;
  max-height: 0px !important;
  opacity: 0 !important;
  overflow: hidden !important;
  transition: max-height 0.4s cubic-bezier(0.25, 1, 0.5, 1), opacity 0.4s ease, padding 0.4s ease, margin-top 0.4s ease !important;
  padding: 0 20px !important;
  margin-top: 0 !important;
}

.m-results-card.expanded {
  max-height: 350px !important;
  opacity: 1 !important;
  padding: 20px !important;
  margin-top: 20px !important;
}

.m-results-header {
  font-size: 15px !important;
  font-weight: 600 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 16px !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
}

.m-results-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr 1fr !important;
  gap: 10px !important;
  text-align: center !important;
}

.m-results-grid div {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
}

.m-results-grid svg {
  color: var(--mustard-yellow) !important;
  width: 20px !important;
  height: 20px !important;
  margin-bottom: 6px !important;
}

.m-results-grid h4 {
  font-size: 16px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  margin: 0 0 4px 0 !important;
  font-family: var(--font-body) !important;
}

.m-results-grid p {
  font-size: 11px !important;
  color: #aaaaaa !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   8. CONTACT FORM SECTION
   ========================================================================= */
.m-contact {
  background-color: var(--bg-cream) !important;
  padding: 50px 16px !important;
  box-sizing: border-box !important;
}

.m-contact-form {
  margin-top: 20px !important;
}

.m-contact-form input,
.m-contact-form textarea {
  background: #ffffff !important;
  border: 1px solid #dddddd !important;
  border-radius: 10px !important;
  padding: 14px !important;
  width: 100% !important;
  margin-bottom: 14px !important;
  font-size: 14px !important;
  box-sizing: border-box !important;
  color: var(--text-dark) !important;
  font-family: var(--font-body) !important;
}

.m-contact-form textarea {
  resize: vertical !important;
}

/* ==========================================================================
   9. FOOTER SECTION
   ========================================================================= */
.m-footer {
  background-color: var(--text-dark) !important;
  padding: 40px 16px !important;
  color: #ffffff !important;
  box-sizing: border-box !important;
  text-align: center !important;
}

.m-footer .m-logo {
  color: #ffffff !important;
  display: block !important;
  margin-bottom: 20px !important;
}

.m-footer-nav {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  align-items: center !important;
  margin-bottom: 30px !important;
}

.m-footer-nav a {
  color: #cccccc !important;
  font-size: 14px !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
}

.m-footer-socials {
  display: flex !important;
  justify-content: center !important;
  gap: 12px !important;
  margin-bottom: 30px !important;
}

.m-footer-copyright {
  font-size: 11px !important;
  color: #888888 !important;
  margin: 0 !important;
  font-family: var(--font-body) !important;
}

/* ==========================================================================
   MOBILE ANIMATIONS & MICRO-INTERACTIONS
   ========================================================================= */

/* Scroll Reveal Base Class */
.m-reveal {
  opacity: 0 !important;
  transform: translateY(20px) !important;
  transition: opacity 0.5s cubic-bezier(0.25, 1, 0.5, 1), transform 0.5s cubic-bezier(0.25, 1, 0.5, 1) !important;
  will-change: transform, opacity !important;
}

.m-reveal.m-revealed {
  opacity: 1 !important;
  transform: translateY(0) !important;
}

/* Stats Card Staggered Delay */
.m-stats-grid .m-stat-item:nth-child(1) { transition-delay: 0ms !important; }
.m-stats-grid .m-stat-item:nth-child(2) { transition-delay: 100ms !important; }
.m-stats-grid .m-stat-item:nth-child(3) { transition-delay: 200ms !important; }
.m-stats-grid .m-stat-item:nth-child(4) { transition-delay: 300ms !important; }

/* Service Cards Staggered Delay */
.m-services-grid .m-service-card:nth-child(1) { transition-delay: 0ms !important; }
.m-services-grid .m-service-card:nth-child(2) { transition-delay: 100ms !important; }
.m-services-grid .m-service-card:nth-child(3) { transition-delay: 200ms !important; }
.m-services-grid .m-service-card:nth-child(4) { transition-delay: 300ms !important; }
.m-services-grid .m-service-card:nth-child(5) { transition-delay: 400ms !important; }
.m-services-grid .m-service-card:nth-child(6) { transition-delay: 500ms !important; }
.m-services-grid .m-service-card:nth-child(7) { transition-delay: 600ms !important; }
.m-services-grid .m-service-card:nth-child(8) { transition-delay: 700ms !important; }
.m-services-grid .m-service-card:nth-child(9) { transition-delay: 800ms !important; }

/* Active button scaling feedback */
.m-btn-solid, .m-btn-outline, .m-btn-outline-white {
  transition: all 0.2s cubic-bezier(0.25, 1, 0.5, 1) !important;
}

.m-btn-solid:active, .m-btn-outline:active, .m-btn-outline-white:active {
  transform: scale(0.96) !important;
}

.m-btn-solid:active svg, .m-btn-outline:active svg, .m-btn-outline-white:active svg {
  transform: translate(2px, -2px) !important;
  transition: transform 0.2s ease !important;
}

/* Contact Form and Calculator Input Focus States */
.m-contact-form input:focus, .m-contact-form textarea:focus,
.m-input-wrap input:focus {
  border-color: var(--mustard-yellow) !important;
  outline: none !important;
  transition: border-color 0.2s ease !important;
}

/* Mobile Menu Backdrop & Design */
.m-mobile-menu {
  backdrop-filter: blur(10px) !important;
  background-color: rgba(28, 28, 28, 0.96) !important;
}

/* Image Skeleton Shimmer Loader */
.m-image-container {
  position: relative !important;
  width: 100% !important;
  aspect-ratio: auto !important;
  background: #2a2a2a !important;
  border-radius: 12px !important;
  overflow: hidden !important;
}

.m-image-container::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.08) 50%,
    rgba(255, 255, 255, 0) 100%
  ) !important;
  animation: m-shimmer 1.5s infinite !important;
  z-index: 3 !important;
  transition: opacity 0.3s ease !important;
}

.m-image-container.loaded::before {
  opacity: 0 !important;
  animation: none !important;
  pointer-events: none !important;
}

@keyframes m-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

.m-image-container img,
.m-image-container video {
  position: relative !important;
  z-index: 2 !important;
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
  opacity: 1 !important;
}

/* =============================================
   MOBILE GROWTH ANALYSER FORM STYLES
   ============================================= */

.m-growth-dynamic-inputs {
  margin-bottom: 16px !important;
}

.m-growth-input-group {
  margin-bottom: 16px !important;
}

.m-growth-input-group label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #cccccc !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
}

.m-growth-input-group input[type="number"] {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  -moz-appearance: textfield !important;
}

.m-growth-input-group input[type="number"]:focus {
  border-color: var(--mustard-yellow) !important;
}

.m-growth .m-select {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid rgba(255, 255, 255, 0.15) !important;
  border-radius: 10px !important;
  background: rgba(255, 255, 255, 0.06) !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23aaa' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

.m-growth .m-select:focus {
  border-color: var(--mustard-yellow) !important;
}

.m-results-grid {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 14px !important;
}

.m-results-grid > div {
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 10px !important;
  padding: 12px !important;
  border: 1px solid rgba(255, 255, 255, 0.06) !important;
}

.m-results-grid .m-result-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.55) !important;
  font-weight: 500 !important;
  margin-bottom: 4px !important;
  font-family: var(--font-body) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.04em !important;
}

.m-results-grid .m-result-value {
  font-size: 18px !important;
  font-weight: 700 !important;
  color: #ffffff !important;
  font-family: var(--font-body) !important;
}

.m-results-grid .m-result-value.highlight-green {
  color: #4CAF50 !important;
}

.m-results-grid .m-result-value.highlight-red {
  color: #FF5252 !important;
}

.m-roas-dial {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.04) !important;
  border-radius: 14px !important;
  padding: 16px !important;
  border: 1px dashed rgba(232, 155, 60, 0.3) !important;
  margin-bottom: 16px !important;
}

.m-roas-value {
  font-size: 42px !important;
  font-weight: 700 !important;
  color: var(--mustard-yellow) !important;
  line-height: 1 !important;
  font-family: var(--font-body) !important;
}

.m-roas-label {
  font-size: 11px !important;
  color: rgba(255, 255, 255, 0.5) !important;
  text-transform: uppercase !important;
  letter-spacing: 0.08em !important;
  margin-top: 4px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
}

.m-growth-disclaimer {
  font-size: 11px !important;
  color: #888 !important;
  margin-top: 16px !important;
  padding: 12px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
  line-height: 1.5 !important;
  font-family: var(--font-body) !important;
}

/* =============================================
   MOBILE CONTACT FORM CARD FLIP STYLES
   ============================================= */

.m-contact-card-container {
  perspective: 1200px !important;
  width: 100% !important;
}

.m-contact-card-inner {
  position: relative !important;
  width: 100% !important;
  transition: transform 0.8s cubic-bezier(0.25, 1, 0.5, 1) !important;
  transform-style: preserve-3d !important;
}

.m-contact-card-inner.flipped {
  transform: rotateY(180deg) !important;
}

.m-contact-card-front,
.m-contact-card-back {
  width: 100% !important;
  backface-visibility: hidden !important;
  -webkit-backface-visibility: hidden !important;
}

.m-contact-card-front {
  position: relative !important;
  z-index: 2 !important;
}

.m-contact-card-back {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  height: 100% !important;
  width: 100% !important;
  transform: rotateY(180deg) !important;
  background: #F5EFE6 !important;
  border-radius: 16px !important;
  padding: 40px 20px !important;
  text-align: center !important;
  box-sizing: border-box !important;
  z-index: 1 !important;
  overflow: hidden !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
}

.m-success-check {
  width: 60px !important;
  height: 60px !important;
  margin: 0 auto 20px !important;
  color: var(--mustard-yellow) !important;
}

.m-success-title {
  font-size: 24px !important;
  font-weight: 700 !important;
  color: #1A1A1A !important;
  margin-bottom: 16px !important;
  font-family: var(--font-body) !important;
}

.m-success-message {
  font-size: 14px !important;
  color: #555 !important;
  line-height: 1.7 !important;
  margin-bottom: 24px !important;
  font-family: var(--font-body) !important;
}

.m-success-close-btn {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 12px 24px !important;
  border: 1.5px solid #1A1A1A !important;
  border-radius: 8px !important;
  background: transparent !important;
  color: #1A1A1A !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  font-family: var(--font-body) !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.m-success-close-btn:active {
  transform: scale(0.96) !important;
}

.m-contact-form .m-form-group {
  margin-bottom: 14px !important;
}

.m-contact-form .m-form-label {
  display: block !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #1A1A1A !important;
  margin-bottom: 6px !important;
  font-family: var(--font-body) !important;
}

.m-contact-form input,
.m-contact-form textarea,
.m-contact-form select {
  width: 100% !important;
  padding: 12px 14px !important;
  border: 1.5px solid rgba(26, 26, 26, 0.15) !important;
  border-radius: 10px !important;
  background: #ffffff !important;
  color: #1A1A1A !important;
  font-size: 15px !important;
  font-weight: 500 !important;
  font-family: var(--font-body) !important;
  outline: none !important;
  box-sizing: border-box !important;
  transition: border-color 0.2s ease !important;
}

.m-contact-form input:focus,
.m-contact-form textarea:focus,
.m-contact-form select:focus {
  border-color: var(--mustard-yellow) !important;
}

.m-contact-form textarea {
  resize: vertical !important;
  min-height: 100px !important;
}

.m-contact-form select {
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 14px center !important;
}

.m-form-error {
  color: #C83E2D !important;
  font-size: 12px !important;
  margin-top: 4px !important;
  display: none !important;
  font-family: var(--font-body) !important;
}

/* Support Prefers Reduced Motion Media Query */
@media (prefers-reduced-motion: reduce) {
  .m-reveal {
    transition: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .m-btn-solid:active, .m-btn-outline:active, .m-btn-outline-white:active {
    transform: none !important;
  }
  .m-btn-solid:active svg, .m-btn-outline:active svg, .m-btn-outline-white:active svg {
    transform: none !important;
  }
  .m-image-container::before {
    animation: none !important;
  }
  .m-image-container img {
    transition: none !important;
    opacity: 1 !important;
  }
}

/* ==========================================================================
   Mobile Testimonials Section Styling (.m-testimonials)
   ========================================================================== */
.m-testimonials {
  background-color: #F5EFE6 !important;
  padding: 50px 16px !important;
  box-sizing: border-box !important;
}

.m-testimonials .m-section-title {
  margin: 10px 0 0 0 !important;
  font-family: var(--font-hand) !important;
  font-weight: 400 !important;
  line-height: 1.3 !important;
  color: var(--text-dark) !important;
}

.m-testimonials .c-orange {
  color: #E89B3C !important;
}

.m-heading-underline {
  border-bottom: 3px solid #E89B3C !important;
  width: 60px !important;
  margin-top: 8px !important;
  margin-bottom: 24px !important;
}

.m-testimonial-slider {
  display: flex !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  gap: 16px !important;
  padding: 10px 4px 20px 4px !important;
  box-sizing: border-box !important;
  scroll-behavior: smooth !important;
}

/* Hide scrollbar but keep functionality */
.m-testimonial-slider::-webkit-scrollbar {
  display: none !important;
}
.m-testimonial-slider {
  -ms-overflow-style: none !important;
  scrollbar-width: none !important;
}

.m-testimonial-card {
  scroll-snap-align: center !important;
  flex: 0 0 90% !important;
  background: #ffffff !important;
  border-radius: 16px !important;
  padding: 20px !important;
  box-shadow: 0 4px 12px rgba(0,0,0,0.05) !important;
  border: 1.5px solid #1C1C1C !important; /* Premium hand-drawn aesthetic border */
  box-sizing: border-box !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  min-height: 240px !important;
}

.m-stars {
  color: #E89B3C !important;
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.m-quote-wrap {
  margin: 12px 0 !important;
  flex-grow: 1 !important;
}

.m-quote {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  line-height: 1.6 !important;
  color: #333333 !important;
  margin: 0 !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  transition: all 0.3s ease !important;
}

/* Expanded state class */
.m-quote.expanded {
  -webkit-line-clamp: unset !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

.m-read-more-btn {
  background: none !important;
  border: none !important;
  color: #E89B3C !important;
  font-family: var(--font-body) !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  text-decoration: underline !important;
  cursor: pointer !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  text-align: left !important;
  align-self: flex-start !important;
}

.m-client-meta {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  border-top: 1px dashed rgba(28, 28, 28, 0.1) !important;
  padding-top: 14px !important;
  margin-top: 4px !important;
}

.m-avatar {
  width: 36px !important;
  height: 36px !important;
  border-radius: 50% !important;
  background-color: #E89B3C !important;
  color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-family: var(--font-hand) !important;
  font-size: 18px !important;
  font-weight: bold !important;
  border: 1.5px solid #1C1C1C !important;
}

.m-client-info {
  display: flex !important;
  flex-direction: column !important;
}

.m-client-name {
  font-family: var(--font-body) !important;
  font-size: 14px !important;
  font-weight: 700 !important;
  color: var(--text-dark) !important;
  margin: 0 !important;
}

.m-client-role {
  font-family: var(--font-body) !important;
  font-size: 12px !important;
  color: var(--text-gray) !important;
  margin: 0 !important;
}

.m-slider-progress {
  width: 100% !important;
  height: 4px !important;
  background-color: rgba(28, 28, 28, 0.08) !important;
  border-radius: 2px !important;
  margin-top: 12px !important;
  overflow: hidden !important;
  position: relative !important;
}

.m-slider-progress-fill {
  height: 100% !important;
  background-color: #E89B3C !important;
  width: 16.66% !important; /* Starts at ~1/6th */
  transition: width 0.1s ease-out !important;
  will-change: width, transform !important;
  transform: translate3d(0, 0, 0) !important;
}