/* ================================================================
   Mitra Proteksindo — Custom CSS v3.3
   ================================================================ */

:root {
	--navy:       #000d22;
	--blue:       #1a3a6e;
	--gold:       #515f74;
	--gold-light: #0a2342;
	--bg:         #f7f9fb;
	--text:       #191c1e;
	--white:      #ffffff;
	--gray:       #74777e;
	--dark:       #000831;
	--mp-blue:    #0d4a8a;
}

*, *::before, *::after { box-sizing: border-box; }
body { font-family: 'Inter', sans-serif; color: var(--text); background: var(--white); scroll-behavior: smooth; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }

/* ── NAVBAR — sticky ─────────────────────────────────────────────*/
.mp-navbar-wrap {
	position: sticky !important;
	top: 0 !important;
	left: 0;
	right: 0;
	z-index: 999;
	background: var(--navy) !important;
	box-shadow: 0 2px 16px rgba(0,0,0,.25);
}
.mp-navbar-inner { height: 70px; padding: 0 5%; max-width: 1400px; margin: 0 auto; }
.mp-nav-brand .wp-block-site-logo img { height: 40px; width: auto; }
.mp-nav-brand .wp-block-site-title,
.mp-nav-brand .wp-block-site-title a { color: #ffffff !important; font-weight: 700 !important; font-size: .95rem !important; line-height: 1.2; }

/* Nuclear nav link white override */
.mp-navbar-wrap a,
.mp-navbar-wrap a:visited,
.mp-navbar-wrap .wp-block-navigation a,
.mp-navbar-wrap .wp-block-navigation-item a,
.mp-navbar-wrap .wp-block-navigation-item__content,
.mp-navbar-wrap .wp-block-navigation__responsive-container a,
.mp-navbar-wrap :where(a),
.mp-navbar-wrap :where(.wp-block-navigation-item a),
.mp-navbar-wrap li a { color: rgba(255,255,255,.9) !important; text-decoration: none !important; }
.mp-navbar-wrap a:hover,
.mp-navbar-wrap .wp-block-navigation-item a:hover { color: #8fa0b4 !important; }
.mp-navbar-wrap .nav-cta a,
.mp-navbar-wrap .nav-cta a:hover { color: #ffffff !important; }
.mp-navbar-wrap .nav-cta a {
	background: linear-gradient(135deg, var(--navy), var(--gold-light)) !important;
	padding: 10px 22px !important; border-radius: 6px !important; font-weight: 600 !important;
}
.mp-navbar-wrap .nav-cta a:hover { background: var(--gold-light) !important; }
.wp-block-navigation__responsive-container-open,
.wp-block-navigation__responsive-container-close { color: #ffffff !important; }
.wp-block-navigation__responsive-container-open svg,
.wp-block-navigation__responsive-container-close svg { color: #ffffff !important; fill: #ffffff !important; }
.wp-block-navigation__responsive-container.is-menu-open { background: var(--navy) !important; }
.wp-block-navigation__responsive-container.is-menu-open a,
.wp-block-navigation__responsive-container.is-menu-open :where(a) { color: rgba(255,255,255,.9) !important; }

/* ── SECTION COMMON ──────────────────────────────────────────────*/
.mp-section-label {
	display: block !important; color: var(--gold) !important;
	font-size: .78rem !important; font-weight: 700 !important;
	letter-spacing: 3px !important; text-transform: uppercase !important;
	margin-bottom: 14px !important; margin-top: 0 !important;
}
.mp-section-title {
	font-size: clamp(1.7rem, 3.5vw, 2.5rem) !important; font-weight: 800 !important;
	color: var(--navy) !important; line-height: 1.25 !important;
	margin-bottom: 20px !important; margin-top: 0 !important;
}
.mp-section-sub { color: var(--gray) !important; font-size: 1rem !important; line-height: 1.8 !important; max-width: 680px; margin: 0 auto 0 !important; }
.mp-text-center { text-align: center !important; }
.mp-white { color: #ffffff !important; }
.mp-section-divider { margin: 60px 0 !important; border-color: #e5e7eb !important; }

/* ── HERO ────────────────────────────────────────────────────────*/
.mp-hero-section.wp-block-cover { min-height: 100vh !important; justify-content: flex-start !important; }
.mp-hero-section .wp-block-cover__inner-container { margin-left: 0 !important; margin-right: auto !important; max-width: 700px; width: 100%; }
.mp-hero-badge { display: inline-block !important; background: rgba(81,95,116,.15) !important; border: 1px solid var(--gold) !important; color: var(--gold) !important; font-size: .78rem !important; font-weight: 600 !important; letter-spacing: 2px !important; text-transform: uppercase !important; padding: 6px 16px !important; border-radius: 30px !important; margin-bottom: 24px !important; }
.mp-hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem) !important; font-weight: 800 !important; color: #ffffff !important; line-height: 1.15 !important; margin-bottom: 20px !important; }
.mp-hero-title .hero-accent { color: var(--gold); font-weight: 400; }
.mp-hero-desc { font-size: 1.1rem !important; color: rgba(255,255,255,.8) !important; line-height: 1.8 !important; margin-bottom: 36px !important; }
.mp-hero-btns { gap: 16px !important; }
.mp-btn-primary .wp-block-button__link { background: linear-gradient(135deg, var(--navy), var(--gold-light)) !important; color: #ffffff !important; border: 2px solid var(--navy) !important; padding: 14px 32px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: .95rem !important; }
.mp-btn-primary .wp-block-button__link:hover { background: var(--gold-light) !important; transform: translateY(-2px); }
.mp-btn-outline .wp-block-button__link { background: transparent !important; color: #ffffff !important; border: 2px solid rgba(255,255,255,.5) !important; padding: 14px 32px !important; border-radius: 8px !important; font-weight: 600 !important; font-size: .95rem !important; }
.mp-btn-outline .wp-block-button__link:hover { border-color: #ffffff !important; background: rgba(255,255,255,.08) !important; }
@media (max-width: 480px) {
	.mp-hero-btns .wp-block-button { width: 100%; }
	.mp-hero-btns .wp-block-button__link { display: block !important; text-align: center !important; }
}

/* ── ABOUT ───────────────────────────────────────────────────────*/
.mp-about-section { background: #ffffff; }
.mp-about-img-col .wp-block-image { position: relative; margin: 0; }
.mp-about-img-col .wp-block-image img { width: 100%; height: 460px; object-fit: cover; object-position: center; display: block; }
.mp-about-img-col .wp-block-image::after { content: ''; position: absolute; bottom: -16px; right: -16px; width: 80%; height: 80%; border: 3px solid var(--gold); border-radius: 16px; z-index: -1; }
.mp-about-text-col > .wp-block-paragraph { color: var(--gray); line-height: 1.85; margin-bottom: 16px; font-size: .97rem; }
.mp-usp-list { gap: 16px !important; margin-top: 28px !important; }
.mp-usp-item { padding: 16px !important; background: var(--bg) !important; border-radius: 10px !important; border-left: 3px solid var(--gold) !important; gap: 14px !important; align-items: flex-start !important; }
.mp-usp-icon { font-size: 1.4rem !important; flex-shrink: 0 !important; margin: 0 !important; line-height: 1.4 !important; }
.mp-usp-text { flex: 1 !important; min-width: 0 !important; }
.mp-usp-title { font-size: .92rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 4px !important; margin-top: 0 !important; }
.mp-usp-desc { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.6 !important; margin: 0 !important; }

/* ── VISION / MISSION ────────────────────────────────────────────*/
.mp-vision-section { background: var(--navy) !important; }
.mp-vision-section .mp-section-title { color: #ffffff !important; }
.mp-vision-section .mp-section-label { text-align: center !important; }
.mp-vm-grid { display: flex !important; flex-wrap: nowrap !important; gap: 32px !important; margin-top: 48px !important; align-items: stretch !important; }
.mp-vm-grid > .wp-block-column { margin: 0 !important; }

/* Vision/Misi cards — dark glass (back to original style) */
.mp-vm-white-card,
.mp-vm-dark-card {
	background: rgba(255,255,255,.06) !important;
	border: 1px solid rgba(255,255,255,.12) !important;
	border-radius: 16px !important;
	padding: 36px !important;
	height: 100% !important;
	box-shadow: none !important;
}
.mp-vm-eyebrow { font-size: .8rem !important; font-weight: 700 !important; letter-spacing: 2px !important; text-transform: uppercase !important; color: var(--gold) !important; margin-bottom: 20px !important; margin-top: 0 !important; }
.mp-visi-quote { font-size: clamp(1rem, 1.8vw, 1.25rem) !important; font-weight: 400 !important; color: rgba(255,255,255,.9) !important; line-height: 1.85 !important; padding-left: 20px !important; border-left: 3px solid var(--gold) !important; margin-top: 0 !important; font-style: italic; }
.mp-misi-steps { gap: 20px !important; }
.mp-misi-step { gap: 16px !important; align-items: flex-start !important; }
.mp-misi-num { font-size: 1.6rem !important; font-weight: 800 !important; color: #8fa0b4 !important; line-height: 1 !important; flex-shrink: 0 !important; min-width: 40px !important; margin: 0 !important; opacity: 1 !important; }
.mp-misi-text { color: rgba(255,255,255,.75) !important; font-size: .92rem !important; line-height: 1.75 !important; padding-top: 2px !important; margin: 0 !important; }
.mp-vm-divider { border: none !important; border-top: 1px solid rgba(255,255,255,.15) !important; margin: 56px 0 !important; background: transparent !important; height: 1px !important; }

/* Value cards — WHITE boxes on navy bg */
.mp-values-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; }
.mp-value-card {
	background: #ffffff !important;
	border: none !important;
	border-left: 4px solid var(--mp-blue) !important;
	border-radius: 12px !important;
	padding: 28px 20px !important;
	text-align: center !important;
	transition: box-shadow .25s, transform .25s;
	box-shadow: 0 2px 16px rgba(0,0,0,.1) !important;
}
.mp-value-card:hover { box-shadow: 0 8px 28px rgba(0,0,0,.16) !important; transform: translateY(-4px); }
.mp-value-icon { font-size: 1.8rem !important; margin-bottom: 10px !important; margin-top: 0 !important; }
.mp-value-title { color: var(--navy) !important; font-weight: 700 !important; font-size: .9rem !important; margin-bottom: 8px !important; margin-top: 0 !important; }
.mp-value-card .wp-block-paragraph { color: var(--gray) !important; font-size: .82rem !important; line-height: 1.65 !important; margin: 0 !important; }
@media (max-width: 768px) {
	.mp-vm-grid { flex-wrap: wrap !important; }
	.mp-visi-col, .mp-misi-col { flex-basis: 100% !important; }
	.mp-values-grid { grid-template-columns: 1fr 1fr !important; }
}

/* ── SERVICES ────────────────────────────────────────────────────*/
.mp-services-section { background: var(--bg); }
.mp-services-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-top: 48px !important; }
.mp-service-card { background: #ffffff !important; border-radius: 14px !important; padding: 32px 28px !important; border: 1px solid #E5E7EB !important; transition: box-shadow .3s, transform .3s; position: relative; overflow: hidden; text-align: left !important; }
.mp-service-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--gold); transform: scaleX(0); transition: transform .3s; }
.mp-service-card:hover { box-shadow: 0 12px 40px rgba(13,33,55,.1); transform: translateY(-4px); }
.mp-service-card:hover::before { transform: scaleX(1); }
.mp-service-icon { font-size: 2.2rem !important; margin-bottom: 18px !important; margin-top: 0 !important; }
.mp-service-card .wp-block-heading { font-size: 1rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 12px !important; margin-top: 0 !important; }
.mp-service-card .wp-block-paragraph { font-size: .88rem !important; color: var(--gray) !important; line-height: 1.75 !important; margin: 0 !important; }

/* ── PRODUCTS ────────────────────────────────────────────────────*/
.mp-products-grid { display: grid !important; grid-template-columns: repeat(2, 1fr) !important; gap: 20px !important; margin-top: 40px !important; }
.mp-product-card { background: #ffffff !important; border-radius: 14px !important; padding: 28px 24px !important; border: 1px solid #E5E7EB !important; transition: box-shadow .25s, transform .25s; display: flex; flex-direction: column; gap: 10px; text-align: left !important; }
.mp-product-card:hover { box-shadow: 0 8px 32px rgba(13,33,55,.1); transform: translateY(-3px); border-color: var(--gold); }
.mp-product-icon { font-size: 1.8rem !important; margin: 0 !important; }
.mp-product-card .wp-block-heading { font-size: .95rem !important; font-weight: 700 !important; color: var(--navy) !important; margin: 0 !important; }
.mp-product-card .wp-block-paragraph { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.7 !important; margin: 0 !important; }

/* ── WHY US — number + icon + content ───────────────────────────*/
.mp-why-section { background: #ffffff; }
.mp-why-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 28px !important; margin-top: 48px !important; }
.mp-why-card { padding: 32px 28px !important; border-radius: 14px !important; background: var(--bg) !important; border: 1px solid #E5E7EB !important; transition: border-color .25s, box-shadow .25s; text-align: left !important; }
.mp-why-card:hover { border-color: var(--gold); box-shadow: 0 8px 30px rgba(81,95,116,.12); }
/* Number — contrasting MP blue, prominent */
.mp-why-num {
	font-size: 2.2rem !important;
	font-weight: 800 !important;
	color: var(--mp-blue) !important;
	opacity: 1 !important;
	line-height: 1 !important;
	margin-bottom: 10px !important;
	margin-top: 0 !important;
	letter-spacing: -1px !important;
	display: block !important;
}
.mp-why-icon { font-size: 1.8rem !important; margin-bottom: 12px !important; margin-top: 0 !important; }
.mp-why-card .wp-block-heading { font-size: 1rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 10px !important; margin-top: 0 !important; }
.mp-why-card .wp-block-paragraph { font-size: .88rem !important; color: var(--gray) !important; line-height: 1.75 !important; margin: 0 !important; }

/* ── STATS ───────────────────────────────────────────────────────*/
.mp-stats-section { background: var(--navy) !important; }
.mp-stats-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 24px !important; }
.mp-stat-item { padding: 44px 24px !important; text-align: center !important; }
.mp-stat-num { font-size: clamp(3rem, 5vw, 5rem) !important; font-weight: 800 !important; color: var(--gold) !important; line-height: 1 !important; margin-bottom: 16px !important; margin-top: 0 !important; }
.mp-stat-label { color: rgba(255,255,255,.85) !important; font-size: 1.15rem !important; font-weight: 600 !important; margin: 0 !important; letter-spacing: .3px !important; }

/* ── TEAM — single outer border via box-shadow ───────────────────*/
.mp-team-section { background: var(--bg); }
.mp-team-grid { gap: 32px !important; margin-top: 48px !important; }
.mp-team-card {
	width: 320px !important;
	background: #ffffff !important;
	border-radius: 16px !important;
	overflow: hidden !important;
	/* Single outer border + drop shadow combined in one box-shadow */
	box-shadow: 0 0 0 4px var(--mp-blue), 0 12px 40px rgba(13,33,55,.18) !important;
	transition: transform .3s, box-shadow .3s;
	text-align: center !important;
}
.mp-team-card:hover {
	transform: translateY(-6px);
	box-shadow: 0 0 0 4px var(--mp-blue), 0 20px 50px rgba(13,33,55,.24) !important;
}
.mp-team-img-block { margin: 0 !important; }
.mp-team-img-block img { width: 100% !important; height: 280px !important; object-fit: cover !important; object-position: top !important; border-radius: 0 !important; display: block !important; }
.mp-team-img-block figcaption { display: none !important; }
.mp-team-info { padding: 24px 24px 28px !important; }
.mp-team-info .wp-block-heading { font-size: 1.05rem !important; font-weight: 700 !important; color: var(--navy) !important; margin-bottom: 4px !important; margin-top: 0 !important; }
.mp-team-role { color: var(--mp-blue) !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 12px !important; margin-top: 0 !important; }
.mp-team-info .wp-block-paragraph { font-size: .85rem !important; color: var(--gray) !important; line-height: 1.7 !important; margin: 0 !important; }

/* ── PARTNERS — logo image grid ──────────────────────────────────*/
.mp-partners-section { background: #ffffff; }
.mp-partners-note { color: var(--gray) !important; font-size: .88rem !important; max-width: 640px; margin: 0 auto 40px !important; }
.mp-partners-grid { display: grid !important; grid-template-columns: repeat(4, 1fr) !important; gap: 20px !important; margin-top: 0 !important; }
.mp-partner-card {
	background: var(--bg) !important;
	border: 1.5px solid #E5E7EB !important;
	border-radius: 12px !important;
	padding: 24px !important;
	transition: border-color .2s, box-shadow .2s, transform .2s;
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 100px;
}
.mp-partner-card:hover { border-color: var(--gold); box-shadow: 0 4px 16px rgba(81,95,116,.1); transform: translateY(-2px); }
.mp-partner-logo { margin: 0 !important; width: 100% !important; }
.mp-partner-logo img {
	max-height: 60px !important;
	width: auto !important;
	max-width: 100% !important;
	object-fit: contain !important;
	margin: 0 auto !important;
	display: block !important;
	filter: grayscale(0.2);
	transition: filter .2s;
}
.mp-partner-logo img:hover { filter: grayscale(0); }
/* Hide any figcaption if editor accidentally adds one */
.mp-partner-logo figcaption { display: none !important; }

/* ── GALLERY ─────────────────────────────────────────────────────*/
.mp-gallery-section { background: var(--bg); }
.mp-gallery-grid { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 20px !important; margin-top: 40px !important; }
.mp-gallery-item { overflow: hidden; border-radius: 12px; }
.mp-gallery-img { margin: 0 !important; }
.mp-gallery-img img { width: 100% !important; height: 240px !important; object-fit: cover !important; border-radius: 12px !important; display: block !important; background: #d1d5db; transition: transform .3s; }
.mp-gallery-img:hover img { transform: scale(1.04); }
.mp-gallery-img figcaption { font-size: .82rem !important; color: var(--gray) !important; text-align: center !important; margin-top: 8px !important; }
.mp-gallery-note { font-size: .82rem !important; color: var(--gray) !important; margin-top: 20px !important; font-style: italic; }

/* ── CTA — fix spacing above button ─────────────────────────────*/
.mp-cta-section { background: linear-gradient(135deg, var(--navy) 0%, var(--gold-light) 100%) !important; }
.mp-cta-section .wp-block-heading { font-size: clamp(1.7rem, 3vw, 2.5rem) !important; font-weight: 800 !important; color: #ffffff !important; margin-bottom: 20px !important; margin-top: 0 !important; }
.mp-cta-section .wp-block-paragraph { color: rgba(255,255,255,.85) !important; font-size: 1.05rem !important; margin-bottom: 56px !important; line-height: 1.8 !important; }
.mp-btn-white .wp-block-button__link { background: #ffffff !important; color: var(--gold) !important; padding: 16px 48px !important; border-radius: 8px !important; font-weight: 700 !important; font-size: 1rem !important; border: none !important; }
.mp-btn-white .wp-block-button__link:hover { background: #f0f0f0 !important; transform: translateY(-2px); }

/* ── CONTACT ─────────────────────────────────────────────────────*/
.mp-contact-section { background: #ffffff; }
.mp-contact-grid { margin-top: 48px !important; }
.mp-contact-info { gap: 24px !important; }
.mp-contact-item { gap: 16px !important; align-items: flex-start !important; }
.mp-contact-icon { font-size: 1.3rem !important; flex-shrink: 0 !important; width: 48px !important; height: 48px !important; background: rgba(81,95,116,.1) !important; border-radius: 10px !important; display: flex !important; align-items: center !important; justify-content: center !important; margin: 0 !important; }
.mp-contact-item > .wp-block-group { flex: 1 !important; min-width: 0 !important; }
.mp-contact-label { font-size: .85rem !important; font-weight: 700 !important; color: var(--navy) !important; text-transform: uppercase !important; letter-spacing: .5px !important; margin-bottom: 4px !important; margin-top: 0 !important; }
.mp-contact-item .wp-block-group .wp-block-paragraph { font-size: .93rem !important; color: var(--gray) !important; line-height: 1.6 !important; margin: 0 !important; }
.mp-contact-item a:hover { color: var(--gold) !important; }
.mp-contact-section .wp-block-column:last-child iframe { display: block !important; border-radius: 12px !important; width: 100% !important; }

/* ── FOOTER ──────────────────────────────────────────────────────*/
.mp-footer { background: var(--dark) !important; padding: 64px 5% 0 !important; }
.mp-footer-grid { display: grid !important; grid-template-columns: 1.5fr 1fr 1fr 1.2fr !important; gap: 48px !important; margin-bottom: 48px !important; }
.mp-footer-brand .wp-block-site-logo img { height: 40px !important; margin-bottom: 16px !important; }
.mp-footer-tagline { color: var(--gold) !important; font-size: .82rem !important; font-weight: 600 !important; letter-spacing: 1px !important; text-transform: uppercase !important; margin-bottom: 12px !important; margin-top: 0 !important; }
.mp-footer-brand .wp-block-paragraph { color: rgba(255,255,255,.55) !important; font-size: .85rem !important; line-height: 1.75 !important; }
.mp-footer-col .wp-block-heading { color: #ffffff !important; font-size: .9rem !important; font-weight: 700 !important; margin-bottom: 18px !important; padding-bottom: 10px !important; border-bottom: 2px solid rgba(81,95,116,.3) !important; margin-top: 0 !important; }
.mp-footer-list { list-style: none !important; padding: 0 !important; display: flex !important; flex-direction: column !important; gap: 10px !important; margin: 0 !important; }
.mp-footer-list li, .mp-footer-list a { font-size: .85rem !important; color: rgba(255,255,255,.55) !important; transition: color .2s; }
.mp-footer-list a:hover { color: var(--gold) !important; }
.mp-footer-bottom { border-top: 1px solid rgba(255,255,255,.08) !important; padding: 20px 0 !important; text-align: center !important; }
.mp-footer-bottom .wp-block-paragraph { color: rgba(255,255,255,.35) !important; font-size: .82rem !important; margin: 0 !important; }

/* ── WHATSAPP ────────────────────────────────────────────────────*/
.mp-wa-btn { position: fixed !important; bottom: 28px; right: 28px; z-index: 1000; background: #25D366 !important; width: 58px; height: 58px; border-radius: 50%; display: flex !important; align-items: center; justify-content: center; box-shadow: 0 6px 24px rgba(37,211,102,.4); transition: transform .3s, box-shadow .3s; text-decoration: none !important; color: inherit !important; }
.mp-wa-btn:hover { transform: scale(1.1) translateY(-3px); box-shadow: 0 10px 30px rgba(37,211,102,.5); }
.mp-wa-icon { width: 30px; height: 30px; color: #ffffff; display: block; }
.mp-wa-tooltip { position: absolute; right: 68px; background: var(--navy); color: #ffffff; font-size: .82rem; font-weight: 600; padding: 6px 14px; border-radius: 6px; white-space: nowrap; opacity: 0; transition: opacity .2s; pointer-events: none; }
.mp-wa-btn:hover .mp-wa-tooltip { opacity: 1; }

/* ================================================================
   RESPONSIVE
   ================================================================ */
@media (max-width: 1024px) {
	.mp-services-grid, .mp-why-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-products-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-stats-grid  { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-footer-grid { grid-template-columns: 1fr 1fr !important; }
	.mp-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-gallery-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
	.mp-about-img-col { display: none !important; }
	.mp-services-grid, .mp-why-grid, .mp-products-grid { grid-template-columns: 1fr !important; }
	.mp-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-values-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-footer-grid { grid-template-columns: 1fr !important; }
	.mp-team-card { width: 100% !important; max-width: 340px !important; }
	.mp-partners-grid { grid-template-columns: repeat(2, 1fr) !important; }
	.mp-gallery-grid { grid-template-columns: 1fr !important; }
}
/* Fix 2: values 1 column on small mobile */
@media (max-width: 480px) {
	.mp-values-grid { grid-template-columns: 1fr !important; }
	.mp-hero-btns .wp-block-button { width: 100%; }
	.mp-hero-btns .wp-block-button__link { display: block !important; text-align: center !important; }
}

/* ── PAGE TEMPLATE ───────────────────────────────────────────────*/
.mp-page-main { min-height: 60vh; }
.mp-page-title {
	font-size: clamp(1.8rem, 3.5vw, 2.8rem) !important;
	font-weight: 800 !important;
	color: var(--navy) !important;
	margin-bottom: 32px !important;
	margin-top: 0 !important;
	padding-bottom: 20px !important;
	border-bottom: 3px solid var(--gold) !important;
}
.mp-page-main .wp-block-post-content p {
	font-size: 1rem !important;
	line-height: 1.85 !important;
	color: #333 !important;
	margin-bottom: 16px !important;
}
.mp-page-main .wp-block-post-content h2 { color: var(--navy) !important; font-weight: 700 !important; margin-top: 32px !important; }
.mp-page-main .wp-block-post-content h3 { color: var(--navy) !important; font-weight: 600 !important; margin-top: 24px !important; }
.mp-page-main .wp-block-post-content a { color: var(--mp-blue) !important; text-decoration: underline !important; }
.mp-page-main .wp-block-post-content ul,
.mp-page-main .wp-block-post-content ol { padding-left: 24px !important; margin-bottom: 16px !important; }
.mp-page-main .wp-block-post-content li { line-height: 1.8 !important; color: #333 !important; }

/* Post meta */
.mp-post-meta { gap: 16px !important; margin-bottom: 32px !important; }
.mp-post-date { font-size: .85rem !important; color: var(--gray) !important; }

/* Back link */
.mp-post-back a { color: var(--mp-blue) !important; font-size: .9rem !important; font-weight: 500 !important; text-decoration: none !important; }
.mp-post-back a:hover { text-decoration: underline !important; }

/* 404 */
.mp-404 { background: var(--bg); }