/* Massi Network Group — Premium Institutional Black/Gold Upgrade */
:root{
  --mng-gold:#C9A84C;
  --mng-gold-bright:#E7C86A;
  --mng-black:#050505;
  --mng-charcoal:#0A0A0A;
  --mng-panel:#101010;
  --mng-ink:#F4F0E8;
  --mng-muted:#A9A39A;
  --mng-line:rgba(201,168,76,.22);
  --mng-soft:rgba(201,168,76,.08);
}

html{scroll-behavior:smooth;}
body{
  background:
    radial-gradient(circle at 20% 0%, rgba(201,168,76,.075), transparent 32rem),
    radial-gradient(circle at 85% 18%, rgba(201,168,76,.045), transparent 30rem),
    linear-gradient(180deg,#040404 0%,#090909 52%,#050505 100%) !important;
  color:var(--mng-ink) !important;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}

body::before{
  content:"";
  position:fixed;
  inset:0;
  pointer-events:none;
  z-index:-1;
  background-image:linear-gradient(rgba(255,255,255,.025) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.018) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:linear-gradient(180deg,rgba(0,0,0,.7),transparent 82%);
}

nav{
  height:78px !important;
  padding:0 clamp(18px,4vw,64px) !important;
  background:rgba(5,5,5,.82) !important;
  border-bottom:1px solid var(--mng-line) !important;
  box-shadow:0 18px 60px rgba(0,0,0,.38) !important;
}

.nav-logo img, nav img[src*="logo"]{
  filter:drop-shadow(0 8px 22px rgba(201,168,76,.15));
}

.nav-links{gap:clamp(18px,2.4vw,34px) !important;}
.nav-links a{
  color:rgba(244,240,232,.72) !important;
  font-size:10px !important;
  letter-spacing:2.4px !important;
}
.nav-links a:hover{color:var(--mng-gold-bright) !important;}

.nav-cta,.cta-primary,button.cta-primary,input[type="submit"],button[type="submit"]{
  border:1px solid rgba(231,200,106,.78) !important;
  background:linear-gradient(135deg,#E7C86A 0%,#C9A84C 42%,#9F7F2F 100%) !important;
  color:#050505 !important;
  border-radius:0 !important;
  box-shadow:0 16px 40px rgba(201,168,76,.16), inset 0 1px 0 rgba(255,255,255,.38) !important;
  transition:transform .25s ease, box-shadow .25s ease, filter .25s ease !important;
}
.nav-cta:hover,.cta-primary:hover,button[type="submit"]:hover{
  transform:translateY(-2px) !important;
  filter:saturate(1.08) brightness(1.06) !important;
  box-shadow:0 22px 55px rgba(201,168,76,.24), inset 0 1px 0 rgba(255,255,255,.44) !important;
}

.hero{
  min-height:100svh !important;
  padding-top:120px !important;
  isolation:isolate;
}
.hero-bg{
  background:
    linear-gradient(180deg,rgba(5,5,5,.25),rgba(5,5,5,.96)),
    radial-gradient(ellipse at center,rgba(201,168,76,.13),transparent 58%),
    linear-gradient(135deg,#040404 0%,#0E0E0E 50%,#050505 100%) !important;
}
.hero-bg::before{
  height:170px !important;
  background:linear-gradient(180deg,transparent,rgba(231,200,106,.95),transparent) !important;
}
.hero-label{
  letter-spacing:5px !important;
  color:var(--mng-gold-bright) !important;
  opacity:.96 !important;
}
.hero-headline{
  max-width:1040px !important;
  margin-left:auto !important;
  margin-right:auto !important;
  font-size:clamp(54px,8.5vw,116px) !important;
  line-height:.94 !important;
  letter-spacing:-.065em !important;
  font-weight:250 !important;
  text-wrap:balance;
  text-shadow:0 22px 70px rgba(0,0,0,.74) !important;
}
.hero-headline strong{
  font-weight:760 !important;
  letter-spacing:-.055em !important;
}
.hero-headline em{
  color:var(--mng-gold-bright) !important;
  font-family:Georgia, 'Times New Roman', serif !important;
  font-weight:400 !important;
  letter-spacing:-.045em !important;
}
.hero-sub{
  color:rgba(244,240,232,.64) !important;
  letter-spacing:3.6px !important;
}
.hero-body{
  max-width:740px !important;
  color:rgba(244,240,232,.78) !important;
  font-size:clamp(16px,1.35vw,19px) !important;
  line-height:1.85 !important;
}
.hero-services{
  color:rgba(231,200,106,.78) !important;
  border:1px solid var(--mng-line) !important;
  background:rgba(201,168,76,.04) !important;
  padding:14px 20px !important;
  backdrop-filter:blur(12px);
}
.cta-secondary{
  border:1px solid rgba(244,240,232,.16) !important;
  background:rgba(255,255,255,.035) !important;
  backdrop-filter:blur(14px);
  color:var(--mng-ink) !important;
}
.cta-secondary:hover{
  border-color:rgba(201,168,76,.45) !important;
  background:rgba(201,168,76,.07) !important;
}

section:not(.hero), .section, .content-section{
  position:relative;
}
.section-label,.eyebrow,.hero-label,.stat-label{
  text-transform:uppercase;
}
h1,h2,h3,.section-title{
  text-wrap:balance;
}
h2,.section-title{
  letter-spacing:-.035em !important;
  font-weight:520 !important;
}
p,.section-text,.body-text,li{
  color:rgba(244,240,232,.74) !important;
}

.card,.service-card,.division-card,.market-card,.report-card,.client-card,.feature-card,.form-card,.contact-card,.legal-card,.stat-item{
  background:linear-gradient(180deg,rgba(255,255,255,.055),rgba(255,255,255,.022)) !important;
  border:1px solid rgba(201,168,76,.18) !important;
  box-shadow:0 24px 80px rgba(0,0,0,.32) !important;
  backdrop-filter:blur(18px);
}
.card:hover,.service-card:hover,.division-card:hover,.market-card:hover,.report-card:hover,.client-card:hover,.feature-card:hover{
  border-color:rgba(231,200,106,.38) !important;
  transform:translateY(-4px);
  box-shadow:0 34px 95px rgba(0,0,0,.46),0 0 0 1px rgba(231,200,106,.06) inset !important;
}

.stats-bar{
  border-top:1px solid var(--mng-line) !important;
  border-bottom:1px solid var(--mng-line) !important;
  background:rgba(10,10,10,.78) !important;
  backdrop-filter:blur(18px);
}
.stat-number{
  color:var(--mng-gold-bright) !important;
  letter-spacing:-.04em !important;
}

input,textarea,select{
  background:rgba(255,255,255,.035) !important;
  border:1px solid rgba(201,168,76,.22) !important;
  color:var(--mng-ink) !important;
  border-radius:0 !important;
}
input:focus,textarea:focus,select:focus{
  outline:none !important;
  border-color:rgba(231,200,106,.74) !important;
  box-shadow:0 0 0 3px rgba(201,168,76,.12) !important;
}

footer{
  background:#030303 !important;
  border-top:1px solid var(--mng-line) !important;
}

@media (max-width:980px){
  nav{height:70px !important;}
  .hero{padding-left:22px !important;padding-right:22px !important;}
  .hero-headline{font-size:clamp(44px,13vw,72px) !important;letter-spacing:-.055em !important;}
  .hero-body{font-size:15.5px !important;}
  .hero-services{font-size:10px !important;line-height:1.8 !important;}
}

@media (max-width:640px){
  body::before{background-size:42px 42px;}
  .hero{padding-top:100px !important;min-height:auto !important;padding-bottom:74px !important;}
  .hero-label{font-size:9px !important;letter-spacing:2.6px !important;gap:10px !important;}
  .hero-label::before,.hero-label::after{width:24px !important;}
  .hero-headline{font-size:clamp(42px,15vw,60px) !important;line-height:.98 !important;}
  .hero-sub{font-size:10px !important;letter-spacing:2.1px !important;}
  .hero-ctas{width:100% !important;display:flex !important;flex-direction:column !important;gap:14px !important;}
  .cta-primary,.cta-secondary{width:100% !important;justify-content:center !important;text-align:center !important;}
  .stats-bar{grid-template-columns:1fr 1fr !important;}
}

/* =========================================================
   MOBILE-ONLY STABILIZATION LAYER
   Desktop remains governed by each page's original CSS.
   These rules activate only on phone/tablet widths.
   ========================================================= */

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
    -webkit-text-size-adjust: 100% !important;
  }

  *, *::before, *::after {
    box-sizing: border-box !important;
  }

  img, svg, video, canvas, iframe {
    max-width: 100% !important;
    height: auto;
  }

  body {
    font-size: 15px !important;
    line-height: 1.62 !important;
  }

  p, li,
  .body-text,
  .section-text,
  .client-desc,
  .product-desc,
  .why-desc,
  .step-desc,
  .service-row-desc,
  .division-desc,
  .market-desc,
  .report-desc,
  .contact-left-sub,
  .apply-left-sub,
  .disclaimer-text,
  .legal-text {
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
    line-height: 1.72 !important;
  }

  .section-label,
  .eyebrow,
  .breadcrumb,
  .hero-sub,
  .page-hero-sub,
  .product-range,
  .hero-range-label,
  .stat-label,
  .market-stat-label,
  .apply-note,
  .contact-form-note {
    letter-spacing: 1.4px !important;
    line-height: 1.5 !important;
    white-space: normal !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  .hero-headline,
  .page-hero-title,
  .section-title,
  .cta-title,
  .market-title,
  .apply-left-title,
  .contact-left-title,
  .big-quote,
  .quote-text {
    max-width: 100% !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
    hyphens: none !important;
  }

  .hero-headline { font-size: clamp(40px, 11vw, 58px) !important; line-height: 1.02 !important; }
  .page-hero-title { font-size: clamp(34px, 9.4vw, 50px) !important; line-height: 1.08 !important; }
  .section-title, .cta-title, .market-title { font-size: clamp(30px, 8vw, 42px) !important; line-height: 1.12 !important; }
  .apply-left-title, .contact-left-title { font-size: clamp(34px, 9.5vw, 44px) !important; line-height: 1.1 !important; }
  .big-quote, .quote-text { font-size: clamp(24px, 6.5vw, 34px) !important; line-height: 1.42 !important; }

  /* Force split/intake/contact sections into one clean column on mobile only. */
  .s-apply,
  .s-contact,
  .contact-section,
  .form-section,
  .prequal-section,
  section#apply,
  section#contact,
  section#prequal {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
    overflow: hidden !important;
  }

  .s-apply-inner,
  .s-contact-inner,
  .contact-inner,
  .form-inner,
  .prequal-inner,
  .apply-inner,
  .contact-content,
  .apply-content,
  .form-content,
  .s-intro-inner,
  .s-why-inner,
  .s-who-top,
  .market-inner,
  .market-inner.reverse,
  .s-about-inner,
  .s-integration-inner,
  .page-hero-inner {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 30px !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: auto !important;
    margin-right: auto !important;
    transform: none !important;
  }

  .s-apply-inner > *,
  .s-contact-inner > *,
  .contact-inner > *,
  .form-inner > *,
  .prequal-inner > *,
  .apply-inner > *,
  .contact-left,
  .contact-right,
  .apply-left,
  .apply-right,
  .form-left,
  .form-right {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    margin-right: 0 !important;
    transform: none !important;
  }

  .contact-form,
  .apply-form,
  .form-panel,
  .form-card,
  .form-fields,
  .form-grid,
  form {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
  }

  input,
  select,
  textarea,
  .contact-input,
  .contact-select,
  .contact-textarea,
  .apply-input,
  .apply-select,
  .form-input,
  .form-select,
  .form-textarea {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
    overflow-wrap: normal !important;
    word-break: normal !important;
  }

  button,
  button[type="submit"],
  .contact-btn,
  .apply-btn,
  .form-submit,
  .cta-primary,
  .cta-secondary {
    max-width: 100% !important;
    box-sizing: border-box !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
    letter-spacing: 1.7px !important;
  }

  .apply-btn,
  .contact-btn,
  .form-submit,
  button[type="submit"] {
    width: 100% !important;
    padding: 16px !important;
  }

  .products-grid,
  .client-types,
  .clients-grid,
  .sectors-grid,
  .services-grid,
  .pillars-grid,
  .why-grid,
  .reports-grid,
  .crossmarket-grid,
  .trust-signals,
  .process-steps,
  .country-columns,
  .toc-grid,
  .model-inner,
  .expect-grid {
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  .product-card,
  .client-card,
  .service-card,
  .division-card,
  .market-card,
  .report-card,
  .why-item,
  .step,
  .model-badge,
  .disclaimer-box,
  .legal-card,
  .contact-note-box {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
  }

  .stats-bar,
  .stats-row,
  .market-stats {
    display: grid !important;
    grid-template-columns: 1fr !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
  }

  .stat-item,
  .stat-block,
  .market-stat,
  .impact-stat,
  .about-stat {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    overflow: visible !important;
    padding: 30px 18px !important;
    text-align: center !important;
    border-right: none !important;
  }

  .stat-number,
  .stat-num,
  .market-stat-num,
  .impact-stat-num,
  .about-stat-num,
  .hero-range-num {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    overflow: visible !important;
    white-space: nowrap !important;
    word-break: keep-all !important;
    overflow-wrap: normal !important;
    font-size: clamp(40px, 14vw, 58px) !important;
    line-height: 1 !important;
    letter-spacing: -0.055em !important;
    text-align: center !important;
  }

  .hero-services,
  .hero-pillars,
  .service-selector,
  .service-options,
  .model-badge-tags {
    width: 100% !important;
    max-width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.65 !important;
  }

  .model-tag,
  .pillar-chip,
  .filter-tab,
  .srv-btn,
  .service-option {
    width: 100% !important;
    white-space: normal !important;
    text-align: center !important;
    line-height: 1.35 !important;
  }
}

@media (max-width: 430px) {
  .hero-headline { font-size: clamp(36px, 12vw, 50px) !important; }
  .page-hero-title { font-size: clamp(32px, 10vw, 46px) !important; }
  .section-title, .cta-title, .market-title { font-size: clamp(28px, 8.5vw, 38px) !important; }
  .big-quote, .quote-text { font-size: clamp(22px, 6.5vw, 30px) !important; }
  .stat-number,
  .stat-num,
  .market-stat-num,
  .impact-stat-num,
  .about-stat-num,
  .hero-range-num {
    font-size: clamp(38px, 14vw, 54px) !important;
  }
}