/*
	Theme Name: Master Study Child
	Theme URI: http://stylemix.net
	Description: MasterStudy Child Theme — MJ Prep customizations
	Author: StylemixThemes (with MJ Prep overrides)
	Author URI: http://stylemix.net
	Template: masterstudy
	Version: 1.62
	License: GNU General Public License v2 or later
	License URI: http://www.gnu.org/licenses/gpl-2.0.html
	Tags: classes, courses, education, education center, learning center, tutoring, teaching, study, studying, learning, lessons, instructor, teacher, mentor
	Text Domain: masterstudy-child
*/

/* ================================================================
   Brand color overrides — supersede MasterStudy parent theme defaults
   that drift from the official brand palette. Source of truth:
   CLAUDE.md > Brand / Design System (from MJ Prep Style Guide PDF).
   Loaded at wp_enqueue_scripts priority 999 via functions.php.
   ================================================================ */

/* ================================================================
   Design tokens — single source of truth for color, spacing, type.
   Reference these via var(--mjp-…) in all new CSS. Element-ID-keyed
   rules are deprecated; use the utility classes below instead.
   ================================================================ */
:root {
	/* Brand palette — exact values from MJ Prep Style Guide PDF */
	--mjp-maroon: #8c1e1b;
	--mjp-maroon-hover: #6d1614;
	--mjp-text: #282827;
	--mjp-text-muted: #565655;
	--mjp-bg-cream: #e5e6e3;
	--mjp-cta: #FF9900;
	--mjp-white: #ffffff;

	/* Vertical rhythm */
	--mjp-section-pad-y: 80px;
	--mjp-section-pad-y-mobile: 48px;
	--mjp-container-max: 1200px;

	/* Type system */
	--mjp-letter-spacing-heading: 0.1em;
	--mjp-letter-spacing-body: 0.01em;
	--mjp-eyebrow-size: 15px;       /* was 13px — bumped 2026-05-11; 13px read smaller than body text and felt undersized for a section eyebrow. 15px keeps the eyebrow character (uppercase + letter-spaced + maroon) but is actually readable. */
	--mjp-eyebrow-tracking: 3px;

	/* Buttons */
	--mjp-cta-radius: 6px;
	--mjp-cta-border-w: 2px;
}

/* ================================================================
   Utility classes — apply these in Elementor "CSS Classes" field on
   widgets/sections so new pages inherit alignment without bespoke
   per-element rules.
   ================================================================ */

/* Centering fix for .mjp-cta inside .mjp-title-bar (closing bands).
   Elementor's `.elementor-align-center` applies `text-align: center` at
   the widget level, but the button-wrapper sometimes ends up a few pixels
   right-of-center because the inner inline-block button doesn't quite
   line up with the H2 above it. Force text-align: center at every nesting
   level + full-width on the wrappers so the inline-block button anchor
   sits on the exact vertical axis as the heading. */
.mjp-title-bar .mjp-cta,
.mjp-title-bar .mjp-cta > .elementor-widget-container,
.mjp-title-bar .mjp-cta .elementor-button-wrapper {
	text-align: center !important;
	width: 100% !important;
	margin-left: 0 !important;
	margin-right: 0 !important;
}
.mjp-title-bar .mjp-cta .elementor-button-wrapper {
	display: block !important;
}

/* .mjp-cta — canonical primary CTA. Apply on Elementor button widgets'
   CSS Classes field. Replaces the per-element rules in
   snapshots/2026-05-02-custom-css.css for hero, 3-step, and bottom CTAs. */
.mjp-cta .elementor-button,
a.mjp-cta,
button.mjp-cta {
	background-color: var(--mjp-cta) !important;
	color: var(--mjp-white) !important;
	border: var(--mjp-cta-border-w) solid var(--mjp-white) !important;
	border-radius: var(--mjp-cta-radius) !important;
	font-size: 18px !important;
	font-weight: 700 !important;
	letter-spacing: 0.05em !important;
	text-transform: uppercase !important;
	transition: background-color 0.2s ease, box-shadow 0.2s ease, transform 0.15s ease !important;
}
/* Render inner button text uppercase regardless of how the source text
   was authored — older buttons (GW#4460) ship "SCHEDULE A CONSULTATION"
   while newer ones may be authored Title Case. Uniform rendering. */
.mjp-cta .elementor-button .elementor-button-text {
	text-transform: uppercase !important;
	letter-spacing: 0.05em !important;
}
.mjp-cta .elementor-button:hover,
.mjp-cta .elementor-button:focus,
a.mjp-cta:hover,
a.mjp-cta:focus,
button.mjp-cta:hover,
button.mjp-cta:focus {
	background-color: var(--mjp-maroon-hover) !important;
	color: var(--mjp-white) !important;
	box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
	transform: translateY(-1px) !important;
}
@media (max-width: 767px) {
	.mjp-cta .elementor-button,
	a.mjp-cta,
	button.mjp-cta {
		font-size: 15px !important;
	}
}

/* .mjp-section — applies the standard top/bottom rhythm so every
   section breathes the same way. Apply on Elementor section's CSS
   Classes field. Use sparingly — pages may still need bespoke padding
   for hero/footer/full-bleed bands. */
.mjp-section {
	padding-top: var(--mjp-section-pad-y) !important;
	padding-bottom: var(--mjp-section-pad-y) !important;
}
@media (max-width: 767px) {
	.mjp-section {
		padding-top: var(--mjp-section-pad-y-mobile) !important;
		padding-bottom: var(--mjp-section-pad-y-mobile) !important;
	}
}

/* .mjp-eyebrow — small uppercase maroon label that sits above section
   H2s. Apply on Elementor heading widgets (or text/divider widgets
   with text). Generalizes the bespoke .elementor-element-7ff2343
   divider rule in snapshots/2026-05-02-custom-css.css. */
.mjp-eyebrow,
.mjp-eyebrow .elementor-heading-title,
.mjp-eyebrow .elementor-divider__text {
	color: var(--mjp-maroon) !important;
	font-size: var(--mjp-eyebrow-size) !important;
	font-weight: 700 !important;
	letter-spacing: var(--mjp-eyebrow-tracking) !important;
	text-transform: uppercase !important;
	font-family: inherit !important;
}
.mjp-eyebrow .elementor-divider-separator::before,
.mjp-eyebrow .elementor-divider-separator::after {
	border-color: var(--mjp-maroon) !important;
	border-top-color: var(--mjp-maroon) !important;
	opacity: 0.4 !important;
}

/* ====================================================================
   Modular content components for the modernized informational pages.
   Introduced 2026-05-11 as part of the ACT-page "beautiful cake"
   restructure. Same components reusable on SAT / College / About as
   those pages get the same treatment.
   ==================================================================== */

/* .mjp-feature-icon — maroon circular icon used above column H3s in
   3-up feature sections (e.g., "Why MJ Prep" 1-on-1 / Home / Custom
   Plan). Applied via _css_classes on an Elementor icon widget. */
.mjp-feature-icon .elementor-icon-wrapper {
	text-align: center;
	margin-bottom: 16px;
}
.mjp-feature-icon .elementor-icon {
	width: 64px;
	height: 64px;
	background-color: var(--mjp-maroon);
	border-radius: 50%;
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	transition: transform 0.25s ease, box-shadow 0.25s ease;
	border: none !important;
	padding: 0 !important;
}
.mjp-feature-icon .elementor-icon i,
.mjp-feature-icon .elementor-icon svg {
	color: var(--mjp-white) !important;
	fill: var(--mjp-white) !important;
	font-size: 26px !important;
	width: 26px;
	height: 26px;
}
.mjp-feature-icon:hover .elementor-icon {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(140, 30, 27, 0.25);
}

/* .mjp-step-row + .mjp-step-card — 5-step process visualization.
   Used inside a text-editor widget's editor HTML; the wrapping
   .mjp-step-row gives the responsive grid; each .mjp-step-card is one
   step with its own circular icon, name, and short description. */
.mjp-step-row {
	display: grid;
	grid-template-columns: repeat(5, minmax(0, 1fr));
	gap: 24px;
	max-width: 1100px;
	margin: 0 auto;
	align-items: start;
}
@media (max-width: 991px) {
	.mjp-step-row {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
@media (max-width: 600px) {
	.mjp-step-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* .mjp-step-row--7 modifier — 7-column overview row used on HIW for
   the full "Consultation → Diagnostic → Roadmap → Tutor Match →
   Program Support → Test Results → College App Help" process. Same
   .mjp-step-card markup, but tighter (smaller icon, smaller label,
   no description) since 7 cells need to fit. Responsive: 7 → 4 → 2
   → 1 columns. Replaces the 3-viewport-variant hide_*-flag soup that
   used to live on HIW. */
.mjp-step-row.mjp-step-row--7 {
	grid-template-columns: repeat(7, minmax(0, 1fr));
	gap: 12px;
	max-width: 1200px;
}
@media (max-width: 991px) {
	.mjp-step-row.mjp-step-row--7 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
		gap: 18px;
	}
}
@media (max-width: 599px) {
	.mjp-step-row.mjp-step-row--7 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 16px;
	}
}
@media (max-width: 399px) {
	.mjp-step-row.mjp-step-row--7 {
		grid-template-columns: minmax(0, 1fr);
	}
}
.mjp-step-row--7 .mjp-step-card {
	padding: 12px 4px;
}
.mjp-step-row--7 .mjp-step-card .mjp-step-icon {
	width: 56px;
	height: 56px;
	font-size: 22px;
	margin-bottom: 10px;
}
.mjp-step-row--7 .mjp-step-card h3 {
	font-size: 15px !important;
	line-height: 1.3 !important;
	margin: 0 !important;
}

.mjp-step-card {
	text-align: center;
	padding: 16px 8px;
}
.mjp-step-card .mjp-step-icon {
	width: 64px;
	height: 64px;
	background-color: var(--mjp-maroon);
	color: var(--mjp-white);
	border-radius: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 24px;
	margin: 0 auto 14px auto;
	transition: transform 200ms ease, box-shadow 200ms ease, background-color 200ms ease;
}
.mjp-step-card .mjp-step-icon i {
	color: var(--mjp-white);
}
.mjp-step-card:hover .mjp-step-icon {
	transform: translateY(-2px);
	box-shadow: 0 8px 22px rgba(140, 30, 27, 0.25);
	background-color: var(--mjp-maroon-hover);
}
.mjp-step-card h3 {
	font-size: 18px !important;
	font-weight: 700 !important;
	color: var(--mjp-text) !important;
	margin: 0 0 8px 0 !important;
	line-height: 1.3 !important;
	border-bottom: none !important;  /* override design-system H2 underline if matched */
	display: block !important;
	padding-bottom: 0 !important;
}
.mjp-step-card p {
	font-size: 15px !important;
	line-height: 1.5 !important;
	color: var(--mjp-text) !important;
	margin: 0 !important;
}

/* .mjp-city-pills + .mjp-city-pill — visual pill component for
   service-area city lists. Replaces text-paragraph treatments. */
.mjp-city-pills {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	justify-content: center;
	max-width: 800px;
	margin: 0 auto;
}
.mjp-city-pill {
	display: inline-block;
	padding: 7px 16px;
	border: 1.5px solid var(--mjp-maroon);
	color: var(--mjp-maroon);
	background: transparent;
	border-radius: 999px;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.02em;
	white-space: nowrap;
}
.mjp-city-pill--note {
	border-style: dashed;
	opacity: 0.8;
}

/* ================================================================
   Every body section AFTER a title bar — force white background, no
   alternating cream/transparent bands. Earlier authoring on some
   pages (notably How It Works) gave alternating sections classic
   cream and transparent backgrounds; the body's cream bleeds
   through transparent sections and creates a chaotic stripe
   effect. This rule normalizes them all to white.
   The first section also gets the standardized top gap below the
   hero. Subsequent sections keep their authored padding.
   ================================================================ */
.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) {
	background-color: var(--mjp-white) !important;
	background-image: none !important;
}
/* Elementor "Background Overlay" feature is set on some sections
   (e.g., How It Works' first body section has a cream overlay at
   50% opacity). The overlay sits above the section's bg, so it
   tints the whole section cream — but inner widgets with their own
   white bg punch through, creating a "section stuck inside a
   differently-colored section" look. Hide overlays in body sections
   so the white bg shows through cleanly. */
.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-background-overlay {
	display: none !important;
	background-color: transparent !important;
	opacity: 0 !important;
}
.mjp-title-bar + .elementor-section,
.mjp-title-bar + .elementor-section > .elementor-container,
.mjp-title-bar + .elementor-section .elementor-column-wrap,
.mjp-title-bar + .elementor-section .elementor-widget-wrap,
.mjp-title-bar + .elementor-section .elementor-widget-container {
	background-color: var(--mjp-white) !important;
	background-image: none !important;
}
.mjp-title-bar + .elementor-section {
	padding-top: 72px !important;
	padding-bottom: 48px !important;
}
/* Universal body-section vertical rhythm — 2026-05-10 extension.
   Previously only the FIRST body section after the hero got 72/48
   padding; subsequent sections kept their per-Elementor percentage
   padding (e.g., HIW intermediate sections shipped with 02% top, 0%
   bottom — sections butted against each other with cramped gaps).
   Apply the same 72/48 to EVERY body section so vertical rhythm is
   identical across the page. !important wins over Elementor's per-
   element post-CSS rule (equal specificity, !important breaks tie).
   Side padding zeroed too — body-content max-width 1140px + 32px
   inner padding governs horizontal flow at the container level. */
.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) {
	padding-top: 72px !important;
	padding-bottom: 48px !important;
	padding-left: 0 !important;
	padding-right: 0 !important;
}
/* Some pages' first widget has its own _padding (e.g. ACT/SAT bodies
   ship with ~22.79px top padding from a 1.5em authoring choice; College
   Prep ships with 0). Zero them all so the visible gap from hero
   bottom → first paragraph is exactly the section's padding-top.
   Targets the first widget INSIDE each first-row column, on both old
   (.elementor-widget-wrap) and current (.elementor-element-populated)
   Elementor structures. */
.mjp-title-bar + .elementor-section .elementor-widget-wrap > .elementor-widget:first-child > .elementor-widget-container,
.mjp-title-bar + .elementor-section .elementor-element-populated > .elementor-widget:first-child > .elementor-widget-container {
	padding-top: 0 !important;
	margin-top: 0 !important;
}
/* Inline-styled inner elements (e.g. Schedule's credibility <p
   style="margin:1em 0">) escape via margin-collapse, pushing the
   visible content down by their margin-top. Zero out the first-child
   element's top margin so the visible gap is exactly the section's
   padding-top (72px) on every page. */
.mjp-title-bar + .elementor-section .elementor-widget-wrap > .elementor-widget:first-child > .elementor-widget-container > *:first-child,
.mjp-title-bar + .elementor-section .elementor-element-populated > .elementor-widget:first-child > .elementor-widget-container > *:first-child {
	margin-top: 0 !important;
}
@media (max-width: 767px) {
	.mjp-title-bar + .elementor-section,
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) {
		padding-top: 48px !important;
		padding-bottom: 32px !important;
	}
}

/* ================================================================
   Contact Form 7 sitewide width fix. CF7 ships hardcoded
   width: 400px on text/email inputs, which bleeds past the column
   on narrower viewports — caused the form fields on /contact-us/ to
   overlap the right column over "Service Area". Force inputs to fill
   their container with proper box-sizing.
   ================================================================ */
.wpcf7-form input[type="text"],
.wpcf7-form input[type="email"],
.wpcf7-form input[type="tel"],
.wpcf7-form input[type="url"],
.wpcf7-form input[type="number"],
.wpcf7-form input[type="search"],
.wpcf7-form textarea,
.wpcf7-form select {
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}

/* The theme title bar (.entry-header) wraps the page H1 + optional
   subtitle on every page that has title=show in postmeta. Applying
   .mjp-title-bar look to it directly means all such pages — ACT, SAT,
   College, About, How It Works, Reviews, Contact, Schedule — get the
   standardized hero treatment without per-page postmeta surgery.
   Pages with title=hide (Home) keep their custom Elementor hero. */
.entry-header:not(.small) {
	background-color: var(--mjp-text) !important;
	color: var(--mjp-white) !important;
	padding-top: 100px !important;
	padding-bottom: 100px !important;
	min-height: 320px;
}
.entry-header.small {
	background-color: var(--mjp-text) !important;
	color: var(--mjp-white) !important;
	padding-top: 60px !important;
	padding-bottom: 60px !important;
}
.entry-header .entry-title h1,
.entry-header h1 {
	color: var(--mjp-white) !important;
	text-transform: uppercase;
	letter-spacing: var(--mjp-letter-spacing-heading);
	margin-bottom: 12px;
}
.entry-header .sub_title,
.entry-header .sub_title.h3 {
	color: var(--mjp-bg-cream) !important;
	letter-spacing: var(--mjp-letter-spacing-body);
	font-weight: 400;
}
@media (max-width: 767px) {
	.entry-header:not(.small) {
		padding-top: 64px !important;
		padding-bottom: 64px !important;
		min-height: 220px;
	}
	.entry-header.small {
		padding-top: 40px !important;
		padding-bottom: 40px !important;
	}
}

/* Breadcrumbs strip sits directly below .entry-header — match the
   dark band so the top of every page reads as one cohesive header.
   Body content begins after this strip. */
.stm_lms_breadcrumbs,
.stm_breadcrumbs_unit {
	background-color: var(--mjp-text) !important;
}
.stm_breadcrumbs_unit .navxtBreads,
.stm_breadcrumbs_unit .navxtBreads > span,
.stm_breadcrumbs_unit .navxtBreads a {
	color: var(--mjp-bg-cream) !important;
}
.stm_breadcrumbs_unit .navxtBreads a:hover,
.stm_breadcrumbs_unit .navxtBreads a:focus {
	color: var(--mjp-white) !important;
}

/* .mjp-title-bar — applied to the Elementor section that contains the
   page H1. Forces the standardized hero look: dark band, white +
   uppercase + letter-spaced heading, cream subtitle. Inner widget
   containers may have their own _background_color set from older work;
   we explicitly clear them so the section's dark bg shows through.
   Pair with .mjp-title-bar--hero (large) or --compact (½ height). */
.mjp-title-bar {
	background-color: var(--mjp-text) !important;
	color: var(--mjp-white) !important;
}
.mjp-title-bar > .elementor-container,
.mjp-title-bar .elementor-column,
.mjp-title-bar .elementor-column-wrap,
.mjp-title-bar .elementor-widget-wrap,
.mjp-title-bar .elementor-widget-container {
	background-color: transparent !important;
	background-image: none !important;
}
.mjp-title-bar h1,
.mjp-title-bar h2,
.mjp-title-bar h3,
.mjp-title-bar .elementor-heading-title {
	color: var(--mjp-white) !important;
	font-size: 42px !important;
	line-height: 1.15 !important;
	font-weight: 700 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
}
.mjp-title-bar p,
.mjp-title-bar .elementor-widget-text-editor,
.mjp-title-bar .elementor-widget-text-editor p {
	color: var(--mjp-bg-cream) !important;
}
.mjp-title-bar a:not(.elementor-button) {
	color: var(--mjp-white) !important;
	text-decoration: underline;
}
/* Single canonical height for every title bar. min-height + flex
   centering ensures every page's hero renders the same height even
   when the underlying Elementor section structure differs (some are
   full_width without content_position, others are boxed with
   content-middle). Earlier --hero and --compact modifiers still
   appear on some sections in postmeta; they're inert and can be
   cleaned up in Phase 3. */
.mjp-title-bar,
.mjp-title-bar--hero,
.mjp-title-bar--compact {
	padding-top: 56px !important;
	padding-bottom: 56px !important;
	min-height: 200px !important;
	display: flex !important;
	align-items: center !important;
}
.mjp-title-bar > .elementor-container,
.mjp-title-bar--hero > .elementor-container,
.mjp-title-bar--compact > .elementor-container {
	width: 100% !important;
}
@media (max-width: 767px) {
	/* Tight hero on mobile — was eating too much above-the-fold real
	   estate. Removed min-height entirely; just enough padding to feel
	   like a hero band, not a full screen takeover. */
	.mjp-title-bar,
	.mjp-title-bar--hero,
	.mjp-title-bar--compact {
		padding-top: 24px !important;
		padding-bottom: 24px !important;
		padding-left: 18px !important;
		padding-right: 18px !important;
		min-height: 0 !important;
	}
	/* Inner Elementor containers default to 1140px; on mobile that's
	   wider than viewport, so H2 text in closing bands ("Ready to start
	   prepping for the ACT?") overflows. Force container to viewport
	   width so headings wrap properly. */
	.mjp-title-bar > .elementor-container,
	.mjp-title-bar--hero > .elementor-container,
	.mjp-title-bar--compact > .elementor-container {
		max-width: 100% !important;
		width: 100% !important;
		padding-left: 0 !important;
		padding-right: 0 !important;
	}
	.mjp-title-bar h1,
	.mjp-title-bar h2,
	.mjp-title-bar h3,
	.mjp-title-bar .elementor-heading-title {
		font-size: 22px !important;
		letter-spacing: 0.05em !important;
		line-height: 1.2 !important;
		margin: 0 !important;
		white-space: normal !important;
		word-wrap: break-word !important;
		overflow-wrap: break-word !important;
		hyphens: manual !important;
		max-width: 100% !important;
		display: block !important;
	}
	.mjp-title-bar .elementor-widget-heading,
	.mjp-title-bar .elementor-widget-heading .elementor-widget-container {
		max-width: 100% !important;
		overflow: visible !important;
	}
	/* Headshot on mobile: show the user's uploaded crop as-is. Earlier
	   versions forced object-fit / object-position / circular crop, but
	   that was fighting the manual re-crops happening in WP Media Editor.
	   Now: stack above text, center, cap width — let the source image's
	   own framing show. */
	body .elementor-widget-text-editor img.alignright,
	body .elementor-widget-text-editor img.alignleft {
		float: none !important;
		display: block !important;
		margin: 0 auto 18px auto !important;
		max-width: 180px !important;
		width: auto !important;
		height: auto !important;
	}
}

/* Body images that float right/left (e.g., About Us headshot): on
   phone-width, stop floating and stack above the text instead.
   Float-wrapping at 390px doesn't leave enough column width for body
   text — long hyphenated phrases ("Teach-out-of-a-book") overflow
   the viewport. Stacking gives body text full container width.
   Also force overflow-wrap to handle any remaining edge cases. */
@media (max-width: 600px) {
	/* Prevent any rogue horizontal overflow on phone */
	html, body {
		overflow-x: hidden !important;
		max-width: 100vw !important;
	}
	/* Force Elementor layout primitives to fit viewport (some sections
	   ship with content that overflows at narrow widths). */
	.elementor-section,
	.elementor-container,
	.elementor-row,
	.elementor-column,
	.elementor-element-populated,
	.elementor-widget,
	.elementor-widget-wrap,
	.elementor-widget-container,
	.elementor-column-wrap {
		max-width: 100vw !important;
		min-width: 0 !important;
	}
	/* Body sections after the title bar were authored with
	   .elementor-column-gap-no (zero column padding), which leaves
	   text glued to the viewport edges on phone widths. Add 18px of
	   side breathing room — but ONLY on the outermost column chain.
	   Earlier the rule used descendant selectors and compounded the
	   18px at every nested level, squeezing ACT/SAT prep body text
	   to ~38% of viewport. Direct-child combinators keep the padding
	   to a single layer regardless of how deep the Elementor structure
	   nests. Title bar excluded — has its own padding. */
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) > .elementor-container > .elementor-column,
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) > .elementor-container > .elementor-column > .elementor-element-populated {
		padding-left: 18px !important;
		padding-right: 18px !important;
		box-sizing: border-box !important;
	}
	/* Hide explicit <br> tags inside headings on mobile — the homepage
	   H1 ("We Can Help Your<br>Student<br>Improve Their SAT<br>and ACT Score")
	   was authored to break in 4 places at desktop width; on phone
	   widths the same forced breaks chop the headline into 4 awkward
	   short lines. Letting natural wrapping run instead. */
	.elementor-heading-title br,
	h1.elementor-heading-title br,
	h2.elementor-heading-title br,
	h3.elementor-heading-title br {
		display: none !important;
	}
	/* Force text containers to fit the viewport, and break long words.
	   Note: hyphens: auto was removed — Chrome on Android was
	   hyphenating common words ("preparing" → "pre-paring") which read
	   as broken. overflow-wrap alone handles unbreakable strings. */
	.elementor-widget-text-editor,
	.elementor-widget-text-editor .elementor-widget-container,
	.elementor-widget-text-editor .wp-block-column,
	.elementor-widget-text-editor p,
	.elementor-widget-text-editor div,
	.elementor-widget-text-editor li {
		max-width: 100% !important;
		overflow-wrap: break-word !important;
		word-wrap: break-word !important;
		word-break: normal !important;
		hyphens: manual !important;
	}
}

/* ================================================================
   Body-content margins — cap section content width on desktop so
   body text doesn't run edge-to-edge. Hero/footer bands stay full
   viewport width (their dark color makes them book-end the page);
   only body sections get the constrained max-width treatment.
   Tablet+ only — phone gets its own 18px padding via the mobile rule
   block further down.
   ================================================================ */
@media (min-width: 768px) {
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) > .elementor-container {
		max-width: 1140px !important;
		margin-left: auto !important;
		margin-right: auto !important;
		padding-left: 32px !important;
		padding-right: 32px !important;
		box-sizing: border-box !important;
	}
}

/* ================================================================
   Body-section H2 maroon underline — UNIVERSAL (all viewports).
   The full typographic ramp (font-size/weight/margins) is in the
   tablet+ media query below because phone defaults already render
   H2s at a comfortable size; we only need the brand accent to
   appear at every width. Without this rule, phones get bigger H2s
   from the <strong>→<h2> conversion but no maroon underline —
   making sliver passes look cosmetic. v1.56.
   ================================================================ */
.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor h2 {
	padding-bottom: 0.35em !important;
	border-bottom: 2px solid var(--mjp-maroon) !important;
	display: inline-block !important;
}
.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-heading h2.elementor-heading-title {
	padding-bottom: 0.35em !important;
	border-bottom: 2px solid var(--mjp-maroon) !important;
	display: inline-block !important;
}

/* ================================================================
   Body-content reading rhythm — basic typographic standards applied
   to every text-editor in body sections (post-hero) on desktop.
   - Body paragraphs: 1.65 line-height (was 22px/1.22, too tight)
   - H2 sub-headings: real margin-top so they break from preceding
     paragraphs; proper line-height
   - Photo: subtle frame (rounded corners, soft shadow, breathing room)
   ================================================================ */
@media (min-width: 768px) {
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor p {
		line-height: 1.65 !important;
		margin-bottom: 1.1em !important;
	}
	/* Lede paragraph — first <p> in the first body section reads as
	   a magazine-style intro. Slightly larger, lighter weight, just
	   a touch more muted than body. Works whether the <p> contains
	   text only or an inline image. */
	.mjp-title-bar + .elementor-section .elementor-widget-text-editor .wp-block-column > p:first-child,
	.mjp-title-bar + .elementor-section .elementor-widget-text-editor > .elementor-widget-container > p:first-child {
		font-size: 21px !important;
		line-height: 1.55 !important;
		color: var(--mjp-text) !important;
		font-weight: 400 !important;
		margin-bottom: 1.4em !important;
	}
	/* Subtle alternating bg on body sections so the page has visual
	   rhythm instead of one flat white wall. Cream is very light so it
	   reads as a section break, not as a colored band. Note: the
	   earlier `.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) { background-color:
	   white !important }` rule needs the same specificity here to win
	   on odd sections; using :not(:nth-of-type(odd)) inverts cleanly. */
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar):nth-of-type(odd) {
		background-color: #faf9f6 !important;
	}
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor h2 {
		font-size: 30px !important;
		line-height: 1.25 !important;
		font-weight: 700 !important;
		margin-top: 2em !important;
		margin-bottom: 0.6em !important;
		padding-bottom: 0.4em !important;
		border-bottom: 2px solid var(--mjp-maroon) !important;
		display: inline-block !important;
	}
	/* Maroon-underline accent extended 2026-05-10 to heading-widget H2s
	   too (was only on text-editor h2s). Typography (font-size, weight)
	   is intentionally NOT overridden here — heading widgets often have
	   their own per-element typography (e.g., HIW intermediate section
	   H2s ship at 32–38px from postmeta). Only the accent treatment
	   (maroon 2px underline + inline-block + padding-bottom) is forced
	   so every body-section H2 reads as a design-system section heading. */
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-heading h2.elementor-heading-title {
		padding-bottom: 0.4em !important;
		border-bottom: 2px solid var(--mjp-maroon) !important;
		display: inline-block !important;
	}
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor h3 {
		font-size: 21px !important;
		line-height: 1.3 !important;
		font-weight: 700 !important;
		margin-top: 1.5em !important;
		margin-bottom: 0.4em !important;
	}
	/* FAQ-style widgets each start with <h3> as the first child of the
	   text-editor container — the 1.5em top margin above compounds with
	   the prior H2's bottom margin and creates a ~70px gap between the
	   FAQ section heading and the first question. Zero the top margin
	   only when the H3 is the first element in its widget. Long-form
	   articles with multiple H3s inside one editor still get the 1.5em
	   separator on subsequent H3s. */
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor h3:first-child {
		margin-top: 0 !important;
	}
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor img.alignright {
		margin: 0 0 16px 32px !important;
		border-radius: 6px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
	}
	.mjp-title-bar ~ .elementor-section:not(.mjp-title-bar) .elementor-widget-text-editor img.alignleft {
		margin: 0 32px 16px 0 !important;
		border-radius: 6px !important;
		box-shadow: 0 8px 24px rgba(0, 0, 0, 0.14) !important;
	}
}

/* ----------------------------------------------------------------------
   Testimonial cards — modern 2026 redesign. Replaces the legacy
   `testimonial-carousel` widgets (skin: bubble, gray secondary bg,
   speech-bubble tails, mixed heights). New pattern is cream cards with
   a maroon opening-quote glyph, 5-star row, abridged quote, name + tag.

   Wired up on HIW 2026-05-10 (commit pending). Section's inner row
   gets `.mjp-testimonials-row` class for equal-height flex; each card
   is a text-editor widget carrying `.mjp-testimonial-card` markup.
   ---------------------------------------------------------------------- */
/* CSS Grid for predictable 3/2/1 column behavior regardless of parent
   section width. Previous flex implementation with `flex-basis: 33.333% - 16px`
   misbehaved when the parent was Elementor's `layout: full_width` (no
   inner max-width constraint) AND one card's quote was much longer than
   the others — the long quote stretched the row, pushing the third card
   to wrap alone below. Grid with `minmax(0, 1fr)` guarantees equal-width
   columns and packs cards tight regardless of content length. */
.mjp-testimonials-row {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	align-items: stretch;
	gap: 24px;
	max-width: 1100px;
	margin-left: auto;
	margin-right: auto;
}
/* 3 columns hold all the way down to the phone breakpoint. Owner
   preference: at tablet/medium (768–991px) it should stay 3-up rather
   than collapsing to 2 (which produced an unbalanced 2+1 layout when
   shuffled count was 3). Cards get narrow at 768px (~240px) but still
   readable. */
@media (max-width: 767px) {
	.mjp-testimonials-row {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Adaptive column count when fewer than 3 cards render. The shortcode
   may return 2 (or 1) when the tag filter only matches that many
   reviews — without these overrides, the 3-col grid leaves an empty
   cell on the right and looks broken (see /sat-prep/ 2026-05-11).
   `:has()` lets us detect "exactly N children" via `:nth-child(N):last-child`.
   Row max-width is also tightened so cards stay in the same visual
   width range as the 3-up case (~360px each) rather than ballooning
   to half the 1100px row. */
.mjp-testimonials-row:has(> .mjp-testimonial-card:nth-child(2):last-child) {
	grid-template-columns: repeat(2, minmax(0, 1fr));
	max-width: 760px;
}
.mjp-testimonials-row:has(> .mjp-testimonial-card:nth-child(1):last-child) {
	grid-template-columns: minmax(0, 1fr);
	max-width: 420px;
}
/* Legacy: .elementor-column children (postmeta-driven 3-column row, pre-shortcode).
   Currently unused after HIW migration; kept for backward compat / future
   cases where a section author prefers the column structure over the shortcode. */
.mjp-testimonials-row > .elementor-column {
	display: flex;
}
.mjp-testimonials-row > .elementor-column > .elementor-column-wrap,
.mjp-testimonials-row > .elementor-column > .elementor-widget-wrap {
	display: flex;
	width: 100%;
}
.mjp-testimonials-row .elementor-widget-text-editor {
	width: 100%;
	display: flex;
}
.mjp-testimonials-row .elementor-widget-text-editor > .elementor-widget-container {
	width: 100%;
	display: flex;
}

.mjp-testimonial-card {
	background: var(--mjp-bg-cream);
	color: var(--mjp-text);
	padding: 36px 28px 28px;
	border-radius: 6px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
	position: relative;
	display: flex;
	flex-direction: column;
	width: 100%;
	height: 100%;
}
.mjp-testimonial-card::before {
	content: "\201C"; /* curly opening quote — design accent */
	position: absolute;
	top: 6px;
	left: 16px;
	font-size: 72px;
	line-height: 1;
	color: var(--mjp-maroon);
	font-family: Georgia, "Times New Roman", serif;
	opacity: 0.35;
	pointer-events: none;
}
.mjp-testimonial-card .mjp-testimonial-stars {
	color: var(--mjp-maroon);
	font-size: 13px;
	letter-spacing: 3px;
	margin: 0 0 14px 0;
	line-height: 1;
}
.mjp-testimonial-card .mjp-testimonial-quote {
	font-size: 16px !important;
	line-height: 1.6 !important;
	color: var(--mjp-text) !important;
	margin: 0 0 22px 0 !important;
	/* No `flex: 1` here: combined with the abridged-quote strategy in the
	   mu-plugin (cards prefer ~40-55 word abridged versions), cards stay
	   roughly balanced in height. The cite block sits naturally right
	   after the quote text — any residual height difference shows up as
	   clean empty space at the BOTTOM of shorter cards instead of as an
	   ugly hole between quote and cite. */
}
.mjp-testimonial-card .mjp-testimonial-cite {
	font-size: 13px;
	line-height: 1.4;
	color: var(--mjp-text-muted);
}
.mjp-testimonial-card .mjp-testimonial-cite strong {
	display: block;
	font-weight: 700;
	font-size: 15px;
	color: var(--mjp-text);
	margin-bottom: 2px;
}

@media (max-width: 767px) {
	/* Grid template already collapses to 1fr at <600px via the testimonials
	   row rule above; legacy elementor-column children get explicit stacking
	   here for backward compat. */
	.mjp-testimonials-row > .elementor-column {
		display: block;
		margin-bottom: 16px;
	}
	.mjp-testimonial-card {
		padding: 32px 24px 24px;
	}
	.mjp-testimonial-card::before {
		font-size: 60px;
		top: 4px;
		left: 14px;
	}
	.mjp-testimonial-card .mjp-testimonial-quote {
		font-size: 15px !important;
	}
}

/* Body-content link color: parent theme uses #48a7d4 (sky blue);
   brand spec calls for maroon (var(--mjp-maroon)) with hover lowlight.
   Excludes buttons — they keep their own orange CTA pattern. */
a:not(.elementor-button):not(.button):not(.btn) {
	color: var(--mjp-maroon);
}
a:not(.elementor-button):not(.button):not(.btn):hover,
a:not(.elementor-button):not(.button):not(.btn):focus {
	color: var(--mjp-maroon-hover);
}

/* Preserve footer link readability on dark footer background — keep
   the parent theme's light-gray treatment, NOT brand maroon (would
   not have enough contrast on dark bg). Higher specificity than the
   rule above wins the cascade. */
footer a:not(.elementor-button):not(.button):not(.btn),
#footer_bottom a:not(.elementor-button):not(.button):not(.btn) {
	color: #cccccc;
}
footer a:not(.elementor-button):not(.button):not(.btn):hover,
footer a:not(.elementor-button):not(.button):not(.btn):focus,
#footer_bottom a:not(.elementor-button):not(.button):not(.btn):hover,
#footer_bottom a:not(.elementor-button):not(.button):not(.btn):focus {
	color: #ffffff;
}

/* Header top bar (phone number, hours) is on a dark gray bg. The
   sitewide maroon link color was disappearing against it. Force white
   so the phone number is readable; orange (CTA color) on hover for
   affordance — matches the visual cue that the rest of the site uses
   for the primary action color. */
.header_top_bar a:not(.elementor-button):not(.button):not(.btn),
.top_bar_info a:not(.elementor-button):not(.button):not(.btn),
#header_top_bar a:not(.elementor-button):not(.button):not(.btn) {
	color: var(--mjp-white) !important;
}
.header_top_bar a:not(.elementor-button):not(.button):not(.btn):hover,
.header_top_bar a:not(.elementor-button):not(.button):not(.btn):focus,
.top_bar_info a:not(.elementor-button):not(.button):not(.btn):hover,
.top_bar_info a:not(.elementor-button):not(.button):not(.btn):focus,
#header_top_bar a:not(.elementor-button):not(.button):not(.btn):hover,
#header_top_bar a:not(.elementor-button):not(.button):not(.btn):focus {
	color: var(--mjp-cta) !important;
}

.post_list_cats {
	margin-bottom: 15px !important;
}


.sidebar-area-right .heateor_sss_sharing_container {
    float: right;
    display: none;
}

.single-post .stm_share{
    display: none;
    }

/* Kill unconditional 50px gap below header at tablet widths */
@media (max-width:1024px) {
    #header.sticky_header {
        margin-bottom: 0 !important;
    }
}

/* Mobile/tablet header overhaul */
@media (max-width:991px) {
    /* 1. Hide phone/hours top bar — reclaims ~37px */
    .header_top_bar { display: none !important; }

    /* 2. Compact header padding: 28px+25px → 10px+10px */
    .transparent_header_off .header_default,
    .header_default { padding: 10px 0 !important; }

    /* 3. Logo left-aligned, hamburger right with breathing room */
    #header .col-md-3 {
        display: flex;
        align-items: center;
        justify-content: flex-start;
        position: relative;
    }
    #header .logo-unit { float: none; margin-top: 0; }
    #header .navbar-toggle {
        float: none;
        margin: 0;
        position: absolute;
        right: 15px;
        top: 50%;
        transform: translateY(-50%);
    }
}

/* ============================================================
   Footer widget area — grid-based layout. Three equal cells
   (1fr each); each widget shrinks to its widest child's natural
   width and centers within its cell. Children inside the widget
   stack as plain block elements, so the title's left edge lines
   up with the content's left edge (no shrink-wrap-per-child
   misalignment). Badge column vertically centers via the row's
   align-items.
   ============================================================ */
#footer_top .footer_widgets_wrapper .widgets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    align-items: center;
}
/* Bootstrap's .clearfix adds ::before and ::after with display: table,
   which become grid items and shove the real widgets into the wrong
   cells (cell 1 stolen by ::before, last row's cells leftover). Hide
   the pseudos so the 3 widgets land in cells 1, 2, 3 cleanly. */
#footer_top .footer_widgets_wrapper .widgets::before,
#footer_top .footer_widgets_wrapper .widgets::after {
    content: none;
    display: none;
}
#footer_top .footer_widgets_wrapper .widgets > .widget,
#footer_top .footer_widgets_wrapper .widgets > [class*="col"] {
    float: none;
    /* Parent theme sets `clear: both` on the first widget for the
       float-based grid; that interacts badly with grid auto-flow,
       skipping cell 1 and forcing a second row. Neutralize it. */
    clear: none !important;
    width: max-content;
    max-width: 100%;
    justify-self: center;
}
#footer_top .footer_widgets_wrapper .widgets img {
    display: block;
    margin-left: auto;
    margin-right: auto;
    /* Cap to column width so the NTPA logo (300px inline-sized in widget
       HTML) doesn't overflow the ~240px-wide column at tablet/md widths. */
    max-width: 100% !important;
    height: auto !important;
}

/* Stack footer widgets to a single column only at phone widths (<768px).
   Previously this stacked at <992px which collapsed three columns far too
   early — at tablet/medium (768–991px) the 3-up Bootstrap layout fits and
   reads better than a stacked tower. Adjusted 2026-05-10. */
@media (max-width: 767px) {
    #footer_top .footer_widgets_wrapper .widgets {
        grid-template-columns: 1fr;
    }
    #footer_top .footer_widgets_wrapper .widgets > .widget,
    #footer_top .footer_widgets_wrapper .widgets > [class*="col"],
    #footer_top .footer_widgets_wrapper .widgets > .widget *,
    #footer_top .footer_widgets_wrapper .widgets > [class*="col"] * {
        text-align: center;
    }
    #footer_top .footer_widgets_wrapper .widgets ul {
        list-style: none;
        padding-left: 0;
    }
}

/* ============================================================
   About Us — hide ONLY the "Who is Michael Jordan?" Q&A widget.
   Paused 2026-05-11 per owner directive so the answer can be
   reworked for full accuracy before re-enabling. The other three
   Q&As (How long, What makes us different, Where we tutor) remain
   visible. Restore by removing this rule once the answer is final.
   FOLLOW-UP: mu-plugins/mjprep-schema-augment.php still emits a
   FAQPage entry for this question — strip just this one Q&A from
   the schema array there (or update its acceptedAnswer text once
   the rewrite is approved) so structured data stays honest.
   ============================================================ */
.elementor-element-f6d5471 {
    display: none !important;
}

/* ============================================================
   Footer compression — both the dark pre-footer CTA section
   and the widget-area footer were running far too tall (368px
   and 309px respectively on desktop). Tighten vertical rhythm.
   ============================================================ */

/* Pre-footer CTA section ("Your Student's Score Can Improve…").
   Targets the specific Elementor section by class so the rule
   stays scoped. Parent theme + Elementor inline both set
   padding: 80px 0; we override with a higher-specificity
   selector that beats them without !important. */
.elementor .elementor-section.elementor-element-fa185a0 {
    padding-top: 44px;
    padding-bottom: 44px;
}

/* Footer_top widget area — parent theme sets padding: 63px 0 30px.
   Tighten top, keep bottom in line. */
#footer_top {
    padding-top: 32px;
    padding-bottom: 20px;
}

/* NTPA badge was rendered at 300px wide via inline style; that
   single image was driving most of the widget-row height. Cap
   it at 220px so the row collapses to ~140px content height. */
#footer_top .widgets img {
    max-width: 220px;
    width: 220px;
    height: auto;
}

/* MJ PREP heading and SITE LINKS heading carry generous bottom
   margins from the parent theme; trim them so the columns match
   the now-shorter badge column. */
#footer_top .widget h3,
#footer_top .widget h4,
#footer_top .widget .widget-title {
    margin-top: 0;
    margin-bottom: 10px;
}

/* Tighten list and paragraph spacing inside footer widgets. */
#footer_top .widget p,
#footer_top .widget ul li {
    margin-bottom: 4px;
    line-height: 1.45;
}

@media (max-width: 991px) {
    /* On mobile the pre-footer CTA can be a touch taller for
       thumb comfort, but still well below the original 80/80. */
    .elementor .elementor-section.elementor-element-fa185a0 {
        padding-top: 36px;
        padding-bottom: 36px;
    }
    #footer_top {
        padding-top: 24px;
        padding-bottom: 12px;
    }
    /* Each widget on mobile carries 20px margin-bottom + 15px
       padding-bottom from the parent theme, producing ~35px of
       dead space between stacked columns. Collapse to ~12px. */
    #footer_top .widgets > .widget,
    #footer_top .widgets > [class*="col"] {
        margin-bottom: 12px;
        padding-bottom: 0;
    }
    #footer_top .widgets > .widget:last-child,
    #footer_top .widgets > [class*="col"]:last-child {
        margin-bottom: 0;
    }
}

/* Copyright bar: center at tablet AND mobile widths. The desktop
   logo-left / menu-right layout only kicks back in at lg (≥1200px),
   matching Bootstrap's lg breakpoint. Below that we stack the row's
   two cols full-width (otherwise col-md-6 would leave the content
   centered in the LEFT half, with dead space on the right). */
/* Slim the parent theme's chunky 23/20px copyright-bar padding to a
   tighter rhythm. At all widths. The bar is footer chrome, not content
   — should be visually quiet, not robbing breath from content above. */
#footer_copyright {
    padding: 14px 0 14px !important;
}
/* Logo: keep it small and consistent at all viewport widths. */
#footer_copyright .footer_logo {
    max-width: 26px !important;
    height: auto !important;
    margin: 0 10px 0 0 !important;
    vertical-align: middle !important;
    display: inline-block !important;
}
/* Copyright text: inline (not block) so it sits on the same line as the
   logo and centers as one unit at narrow widths. */
#footer_copyright .copyright_text {
    display: inline-block !important;
    vertical-align: middle !important;
    margin: 0 !important;
}

/* Below 768px (phones + small tablets in portrait) the copyright row's
   two cols stack to full-width and center. Bumped the breakpoint up from
   1199px on 2026-05-10 — at medium/tablet widths (768–1199px) there's
   plenty of horizontal space for the original Bootstrap two-col layout
   to render naturally with logo+text on the left and socials on the
   right. The old aggressive breakpoint was making the bar look chunky
   on tablets where horizontal would fit fine. */
@media (max-width: 767px) {
    /* Stack the row's two cols full-width and center them. */
    #footer_copyright .row > [class*="col"] {
        float: none !important;
        width: 100%;
        text-align: center;
        padding-top: 4px;
        padding-bottom: 4px;
    }
    /* Defloat the pull-* containers and let the parent's text-align: center
       handle centering of the inline-block children (logo + text). */
    #footer_copyright .pull-left,
    #footer_copyright .pull-right,
    #footer_copyright .xs-pull-left {
        float: none !important;
        display: inline-block;
        margin: 0;
    }
    /* The .clearfix wrapper inside each col holds logo + text. Make it
       text-align: center so the inline-blocks center as a group. */
    #footer_copyright .col-md-6 > .clearfix,
    #footer_copyright .col-sm-8 > .clearfix,
    #footer_copyright .col-sm-4 > .clearfix {
        text-align: center;
    }
    /* Socials row: tight rhythm, centered. */
    #footer_copyright .copyright_socials {
        margin: 0;
    }
    #footer_copyright .copyright_socials ul {
        margin: 0;
        padding: 0;
    }
}

/* ================================================================
   Contact page — redesigned hero: photo + value prop + contact
   methods on the left, form on the right. Below: trust row +
   service-area pills. Selectors are scoped via .mjp-contact-*
   classes set on the Elementor structure so this CSS is inert
   on every other page.
   ================================================================ */
.mjp-contact-body .mjp-contact-hero-row {
    align-items: flex-start;
}

/* LEFT column */
.mjp-contact-hero-left img.attachment-medium_large,
.mjp-contact-hero-left .elementor-widget-image img {
    border-radius: 8px;
    max-width: 200px;
    height: auto;
    margin-bottom: 16px;
    display: block;
}
.mjp-contact-left h3 {
    margin: 0 0 8px 0;
    font-size: 22px;
    color: var(--mjp-text);
}
.mjp-contact-left > .mjp-contact-intro > p {
    margin: 0 0 24px 0;
    color: var(--mjp-text-muted);
    line-height: 1.55;
}
.mjp-contact-methods {
    list-style: none;
    padding: 0;
    margin: 0 0 16px 0;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.mjp-contact-methods li {
    display: grid;
    grid-template-columns: 28px 70px 1fr;
    align-items: center;
    gap: 8px;
    padding: 10px 12px;
    background-color: var(--mjp-bg-cream);
    border-radius: 6px;
}
.mjp-contact-icon {
    font-size: 20px;
    line-height: 1;
}
.mjp-contact-label {
    font-weight: 700;
    color: var(--mjp-text);
    font-size: 14px;
}
.mjp-contact-value {
    color: var(--mjp-text);
    font-size: 15px;
}
.mjp-contact-value[href] {
    color: var(--mjp-maroon);
    text-decoration: none;
}
.mjp-contact-value[href]:hover,
.mjp-contact-value[href]:focus {
    color: var(--mjp-maroon-hover);
    text-decoration: underline;
}
.mjp-contact-response {
    margin: 0;
    color: var(--mjp-text-muted);
    font-size: 14px;
    font-style: italic;
}

/* RIGHT column — form heading + form */
.mjp-contact-form-heading h2,
.mjp-contact-form-heading .elementor-heading-title {
    font-size: 26px !important;
    margin: 0 0 18px 0 !important;
    color: var(--mjp-text) !important;
}

/* CF7 form fields */
.mjp-contact-body .wpcf7-form .mjp-form-row {
    margin-bottom: 14px;
}
.mjp-contact-body .wpcf7-form input[type="text"],
.mjp-contact-body .wpcf7-form input[type="email"],
.mjp-contact-body .wpcf7-form input[type="tel"],
.mjp-contact-body .wpcf7-form select,
.mjp-contact-body .wpcf7-form textarea {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    padding: 12px 14px !important;
    border: 1px solid #d0d0cf !important;
    border-radius: 6px !important;
    font-size: 16px !important;
    font-family: inherit !important;
    background-color: var(--mjp-white) !important;
    color: var(--mjp-text) !important;
}
.mjp-contact-body .wpcf7-form input:focus,
.mjp-contact-body .wpcf7-form select:focus,
.mjp-contact-body .wpcf7-form textarea:focus {
    outline: 2px solid var(--mjp-maroon) !important;
    outline-offset: -2px;
    border-color: var(--mjp-maroon) !important;
}
.mjp-contact-body .wpcf7-form textarea {
    min-height: 96px;
    resize: vertical;
}
.mjp-contact-body .mjp-form-submit {
    margin-top: 18px;
}
.mjp-contact-body .wpcf7-form .mjp-cta.wpcf7-submit,
.mjp-contact-body .wpcf7-form input.wpcf7-submit {
    background-color: var(--mjp-cta) !important;
    color: var(--mjp-white) !important;
    border: var(--mjp-cta-border-w) solid var(--mjp-white) !important;
    border-radius: var(--mjp-cta-radius) !important;
    font-size: 16px !important;
    font-weight: 700 !important;
    letter-spacing: 0.05em !important;
    text-transform: uppercase !important;
    padding: 14px 28px !important;
    width: 100% !important;
    cursor: pointer;
    transition: background-color 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease;
}
.mjp-contact-body .wpcf7-form input.wpcf7-submit:hover,
.mjp-contact-body .wpcf7-form input.wpcf7-submit:focus {
    background-color: var(--mjp-maroon-hover) !important;
    box-shadow: 0 4px 14px rgba(0, 0, 0, 0.28) !important;
    transform: translateY(-1px);
}
.mjp-contact-body .mjp-form-privacy {
    margin: 14px 0 0 0;
    text-align: center;
    color: var(--mjp-text-muted);
    font-size: 13px;
}

/* TRUST ROW */
.mjp-trust-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin: 48px 0 32px 0;
    padding: 20px 0;
    border-top: 1px solid #d0d0cf;
    border-bottom: 1px solid #d0d0cf;
}
.mjp-trust-card {
    text-align: center;
    padding: 8px;
}
.mjp-trust-headline {
    font-weight: 800;
    color: var(--mjp-text);
    font-size: 18px;
    letter-spacing: 0.03em;
    margin-bottom: 4px;
}
.mjp-trust-label {
    color: var(--mjp-text-muted);
    font-size: 13px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* SERVICE AREA */
.mjp-service-area h3 {
    text-align: center;
    color: var(--mjp-text);
    font-size: 22px;
    margin: 0 0 16px 0;
}
.mjp-service-pills {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
}
.mjp-service-pills li {
    padding: 6px 14px;
    background-color: var(--mjp-bg-cream);
    color: var(--mjp-text);
    border-radius: 999px;
    font-size: 14px;
    border: 1px solid transparent;
}

/* Mobile — stack the hero, tighten spacing */
@media (max-width: 767px) {
    .mjp-contact-hero-left img.attachment-medium_large,
    .mjp-contact-hero-left .elementor-widget-image img {
        max-width: 140px;
        margin: 0 auto 12px auto;
    }
    .mjp-contact-left {
        text-align: center;
    }
    .mjp-contact-methods {
        max-width: 320px;
        margin-left: auto;
        margin-right: auto;
    }
    .mjp-contact-methods li {
        text-align: left;
    }
    .mjp-trust-row {
        grid-template-columns: repeat(2, 1fr);
        gap: 16px;
        margin: 32px 0 24px 0;
    }
}