/**
 * John Mackie — site styles.
 *
 * Values here were measured off the live Duda site (computed styles, not
 * eyeballed): 960px content column, 40px row gutter, 20px white canvas border,
 * Mulish everywhere except the four promise-strip headings which are Exo 700.
 */

:root {
	--jm-ink: #000;
	--jm-body: #3c3c3c;
	--jm-muted: #939393;
	--jm-grey: #666;
	--jm-plum: #995685;
	--jm-rose: #995656;
	--jm-band: #f6f6f6;
	--jm-band-alt: #f3f3f3;
	--jm-band-soft: #f9f9f9;
	--jm-footer: #000;
	--jm-link: #2041c5;

	--jm-canvas: 20px;
	--jm-gutter: 40px;
	--jm-content: 960px;

	--jm-ease: cubic-bezier(0.175, 0.885, 0.32, 1);
}

/* ---------------------------------------------------------------- base --- */

body.jm {
	font-family: var(--wp--preset--font-family--mulish);
	font-size: 14px;
	line-height: 1.5;
	color: var(--jm-ink);
	background: #fff;
	-webkit-font-smoothing: antialiased;
}

body.jm a { text-decoration: none; }
body.jm a:hover { text-decoration: none; }

body.jm p { margin: 0 0 1em; }
body.jm p:last-child { margin-bottom: 0; }

body.jm h1, body.jm h2, body.jm h3,
body.jm h4, body.jm h5, body.jm h6 { margin: 0 0 .35em; }

body.jm img { max-width: 100%; height: auto; }

/* The 20px white border Duda draws around the page body. Header and footer
   sit outside it and run edge to edge. */
.jm-main { padding-inline: var(--jm-canvas); background: #fff; }

/* ------------------------------------------------------------ sections --- */

.jm-section {
	padding: 15px var(--jm-gutter);
	background-position: center;
	background-size: cover;
	background-repeat: no-repeat;
}
.jm-section > :where(.wp-block-group__inner-container, .wp-block-cover__inner-container) {
	max-width: var(--jm-content);
	margin-inline: auto;
}

/* blockGap is 0 so stacked sections butt together like the original; columns
   get their gutter back here. */
.jm-section .wp-block-columns { gap: 40px; }

.jm-section--band { background-color: var(--jm-band); }
.jm-section--band-alt { background-color: var(--jm-band-alt); }
.jm-section--band-soft { background-color: var(--jm-band-soft); }
.jm-section--flush { padding: 0; }

/* --------------------------------------------------------------- header --- */

/* Fixed rather than sticky: the logo row collapses on scroll, and a fixed
   header plus a spacer keeps the page from jumping when it does. */
.jm-header {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	background: #fff;
	transition: box-shadow .2s;
}
.jm-header.is-stuck { box-shadow: 0 1px 6px rgba(0, 0, 0, .12); }
.jm-header-spacer { height: 166px; }

.jm-header__bar {
	background: var(--jm-band);
	padding: 15px var(--jm-gutter);
}
.jm-header__bar > .wp-block-group__inner-container,
.jm-header__main > .wp-block-group__inner-container {
	max-width: var(--jm-content);
	margin-inline: auto;
}

/* Duda collapses the logo row once you scroll — only the nav bar stays. */
.jm-header__main {
	padding: 28px var(--jm-gutter);
	transition: height .2s, padding .2s, opacity .2s;
	overflow: hidden;
}
.jm-header.is-stuck .jm-header__main {
	padding-block: 0;
	height: 0;
	opacity: 0;
	pointer-events: none;
}

.jm-header__cols {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 14px;
	min-height: 57px; /* keeps the at-rest header at the original 166px */
}
.jm-header__logo { text-align: center; }
.jm-header__logo img { width: 226px; max-width: 100%; display: inline-block; }

.jm-header__phone { text-align: right; line-height: 1.2; }
.jm-header__phone .jm-kicker {
	display: block;
	font-size: 12px;
	font-weight: 600;
	font-style: italic;
	color: var(--jm-plum);
	letter-spacing: .2px;
}
.jm-header__phone a.jm-tel {
	display: inline-block;
	font-size: 24px;
	font-weight: 600;
	color: var(--jm-ink);
	transition: color .2s ease-out;
}
.jm-header__phone a.jm-tel:hover { color: var(--jm-rose); }
.jm-header__phone .jm-tel__icon { display: none; color: var(--jm-rose); }
.jm-header__phone .jm-tel__icon svg { width: 26px; height: 26px; fill: currentColor; }

/* Navigation ------------------------------------------------------------- */

.jm-nav ul.wp-block-navigation__container,
.jm-nav .wp-block-navigation__container {
	justify-content: center;
	gap: 0;
}
.jm-nav .wp-block-navigation-item__content {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: .45px;
	line-height: 1.5;
	color: var(--jm-body);
	padding: 0 10px;
	text-transform: uppercase;
	transition: color .2s ease-out;
}
.jm-nav .wp-block-navigation-item__content:hover,
.jm-nav .current-menu-item > .wp-block-navigation-item__content,
.jm-nav .current_page_item > .wp-block-navigation-item__content,
.jm-nav .current-menu-ancestor > .wp-block-navigation-item__content {
	color: var(--jm-rose);
}

/* Burger — only used below the tablet breakpoint. */
.jm-nav .wp-block-navigation__responsive-container-open,
.jm-nav .wp-block-navigation__responsive-container-close { color: var(--jm-ink); }
.jm-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 24px;
	background: #fff;
}
.jm-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
	font-size: 20px;
	padding: 10px 0;
}

/* Social icons ----------------------------------------------------------- */

/* Duda drew these as thin outlined circles; core renders filled pills, so the
   background is stripped back and a 1px ring added. */
ul.jm-social {
	display: flex;
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}
ul.jm-social .wp-social-link,
ul.jm-social li {
	margin: 0;
	padding: 0;
	background: none !important;
}
ul.jm-social .wp-social-link a,
ul.jm-social li > a {
	display: grid;
	place-items: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid currentColor;
	border-radius: 50%;
	color: var(--jm-body);
	background: none;
	transition: color .2s ease-out, border-color .2s ease-out;
}
ul.jm-social .wp-social-link a:hover,
ul.jm-social li > a:hover { color: var(--jm-rose); }
ul.jm-social svg { width: 13px; height: 13px; fill: currentColor; }

/* --------------------------------------------------------------- buttons --- */

a.jm-btn,
body.jm .wp-block-button.jm-btn > .wp-block-button__link {
	display: inline-block;
	max-width: 100%;
	min-width: 226px;
	padding: 19px 24px;
	border: 1px solid #fff;
	border-radius: 0;
	background: transparent;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	line-height: 1.25;
	text-align: center;
	transition: background-color .2s, border-color .2s, color .2s;
}
a.jm-btn:hover,
body.jm .wp-block-button.jm-btn > .wp-block-button__link:hover {
	background: #fff;
	color: var(--jm-ink);
}

/* Dark variant for use on light backgrounds. */
a.jm-btn--ink,
body.jm .wp-block-button.jm-btn--ink > .wp-block-button__link {
	border-color: var(--jm-rose);
	color: var(--jm-rose);
}
a.jm-btn--ink:hover,
body.jm .wp-block-button.jm-btn--ink > .wp-block-button__link:hover {
	background: var(--jm-rose);
	color: #fff;
}

/* ----------------------------------------------------------------- hero --- */

.jm-hero { padding: 121.5px var(--jm-gutter); text-align: center; }
.jm-hero h1,
.jm-hero .jm-hero__title {
	max-width: 700px;
	font-size: 60px;
	font-weight: 700;
	line-height: 1.25;
	color: #fff;
	margin: 0 auto;
}
.jm-hero h2,
.jm-hero .jm-hero__sub {
	font-size: 24px;
	font-weight: 400;
	font-style: italic;
	line-height: 1.5;
	color: #fff;
	margin: .4em 0 0;
}
.jm-hero .wp-block-buttons { margin-top: 28px; justify-content: center; }

/* Shorter hero used on the inner pages. */
.jm-hero--short { padding-block: 108.5px; }
.jm-hero--mid { padding-block: 81.5px; }
.jm-hero--services { padding-block: 54px; }
.jm-hero--blog { padding-block: 120px; }

/* --------------------------------------------------- promise strip (4-up) --- */

.jm-strip { padding: 42.5px var(--jm-gutter); background: var(--jm-band); }
.jm-strip .wp-block-columns { gap: 10px; }
.jm-strip__title {
	font-family: var(--wp--preset--font-family--exo);
	font-size: 15px;
	font-weight: 700;
	line-height: 1.5;
	color: var(--jm-plum);
	margin: 0 0 4px;
}
.jm-strip__text {
	font-size: 14px;
	font-style: italic;
	line-height: 1.5;
	color: var(--jm-body);
	margin: 0;
}

/* ------------------------------------------------------------- typography --- */

.jm-h-plum {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: var(--jm-plum);
	line-height: 1.3;
}
.jm-h-rose {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: var(--jm-rose);
	line-height: 1.3;
}
.jm-h-dark {
	font-size: 36px;
	font-weight: 700;
	color: #212226;
	line-height: 1.25;
}
.jm-lede { font-size: 14px; line-height: 2; }
.jm-quote { font-size: 16px; font-style: italic; line-height: 1.8; color: var(--jm-ink); }
.jm-body-italic { font-style: italic; line-height: 1.5; }

.jm-feature { font-size: 32px; line-height: 1.5; text-align: center; }
.jm-feature a { color: var(--jm-link); font-weight: 700; }
.jm-feature a:hover { text-decoration: underline; }

/* ------------------------------------------------------ on-site / visits --- */

.jm-visits { padding: 86.5px var(--jm-gutter); text-align: center; }
.jm-visits h3 { font-size: 36px; font-weight: 700; color: #fff; margin: 0 0 .5em; }
.jm-visits p { color: #fff; line-height: 2; }
.jm-visits .wp-block-buttons { margin-top: 24px; justify-content: center; }

/* ----------------------------------------------------------- rose CTA band --- */

.jm-cta { padding: 15px var(--jm-gutter); background: var(--jm-rose); }
.jm-cta .wp-block-columns { align-items: center; gap: 20px; }
.jm-cta__text {
	font-size: 22px;
	font-weight: 700;
	font-style: italic;
	color: #fff;
	margin: 0;
}
.jm-cta__text a { color: #fff; }
.jm-cta .wp-block-buttons { justify-content: flex-end; }
.jm-cta .wp-block-button__link { min-width: 170px; padding: 15px 24px; }

/* ---------------------------------------------------------------- gallery --- */

.jm-gallery { padding: 20px 0; }
.jm-gallery > .wp-block-group__inner-container,
.jm-gallery .wp-block-html { max-width: none; }
/* The raw-HTML grid is the group's direct child, so core's constrained-layout
   rule caps it at 960px unless it is released here. */
body.jm .jm-gallery__grid {
	max-width: none;
	margin-inline: 0;
}
.jm-gallery__grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: 20px;
}

.jm-gallery__item {
	position: relative;
	display: block;
	overflow: hidden;
	aspect-ratio: 453 / 333;
	background: #000;
}
/* Specific enough to beat the base `img { height: auto }` rule. */
body.jm .jm-gallery__item img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform .2s ease-out;
}
.jm-gallery__item:hover img { transform: scale(1.06); }

.jm-gallery__caption {
	position: absolute;
	inset: 0;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
	padding: 15px;
	background: rgba(0, 0, 0, .19);
	pointer-events: none;
}
.jm-gallery__title {
	font-size: 36px;
	font-weight: 700;
	color: #fff;
	line-height: 1.25;
	margin: 0;
}
.jm-gallery__sub {
	font-size: 12px;
	font-weight: 700;
	line-height: 1.5;
	color: #fff;
	text-transform: uppercase;
	margin: 0;
}

/* ---------------------------------------------------------------- reviews --- */

.jm-reviews { padding: 65.5px var(--jm-gutter); background: var(--jm-band-alt); }
.jm-reviews .wp-block-columns { gap: 40px; }
.jm-review__stars { margin: 0 0 10px; }
.jm-review__stars img { width: 126px; height: auto; }
.jm-review__text { font-size: 14px; font-style: italic; line-height: 1.6; color: var(--jm-body); }
.jm-review__name { font-size: 14px; font-weight: 700; color: var(--jm-plum); margin-top: 10px; }

/* ------------------------------------------------------------------ forms --- */

/* Contact Form 7 leaves controls on content-box, so padding pushes a 100%-wide
   input past its container. */
body.jm .wpcf7 input,
body.jm .wpcf7 textarea,
body.jm .wpcf7 select { box-sizing: border-box; }

/* The form card sits inside a Cover block, which paints its content white —
   reset to ink so the labels are readable. */
.jm-form {
	background: #fff;
	padding: 26px;
	color: var(--jm-ink);
}
/* On light sections Duda tinted the form panel rather than leaving it white. */
.jm-form--panel { background: rgba(0, 0, 0, .07); }

.jm-form h3,
.jm-form p,
.jm-form label { color: var(--jm-ink); }
.jm-form h3 { font-size: 18px; font-weight: 700; margin: 0 0 14px; text-align: center; }
.jm-form .wpcf7-form p { margin-bottom: 12px; }
.jm-form .wpcf7-form-control-wrap { display: block; }

body.jm .wpcf7 input[type="text"],
body.jm .wpcf7 input[type="email"],
body.jm .wpcf7 input[type="tel"],
body.jm .wpcf7 textarea {
	width: 100%;
	padding: 11px 12px;
	border: 1px solid #dcdcdc;
	border-radius: 0;
	background: #fff;
	font-family: inherit;
	font-size: 14px;
	color: var(--jm-ink);
	transition: border-color .2s;
}
body.jm .wpcf7 input:focus,
body.jm .wpcf7 textarea:focus { border-color: var(--jm-rose); outline: none; }
body.jm .wpcf7 textarea { min-height: 92px; }
body.jm .wpcf7 label { display: block; font-size: 14px; margin-bottom: 10px; }
body.jm .wpcf7 .jm-optin { font-size: 11.2px; color: var(--jm-grey); line-height: 1.5; }

body.jm .wpcf7 input[type="submit"] {
	display: block;
	width: 100%;
	padding: 14px 24px;
	border: 1px solid var(--jm-rose);
	border-radius: 0;
	background: transparent;
	color: var(--jm-rose);
	font-family: inherit;
	font-size: 16px;
	font-weight: 700;
	cursor: pointer;
	transition: background-color .2s, color .2s;
}
body.jm .wpcf7 input[type="submit"]:hover { background: var(--jm-rose); color: #fff; }

/* The honeypot must never be visible or focusable. */
body.jm .jm-hp { position: absolute !important; left: -9999px !important; }

/* ------------------------------------------------------------------- blog --- */

.jm-postlist { padding: 15px var(--jm-gutter); }
.jm-postlist .wp-block-post-title { font-size: 24px; font-weight: 700; margin: 0 0 6px; }
.jm-postlist .wp-block-post-title a { color: var(--jm-ink); transition: color .2s; }
.jm-postlist .wp-block-post-title a:hover { color: var(--jm-rose); }
.jm-postlist .wp-block-post-date,
.jm-postlist .wp-block-post-author-name { font-size: 12px; color: var(--jm-muted); }
.jm-postlist li { padding-bottom: 28px; margin-bottom: 28px; border-bottom: 1px solid #eee; }

.jm-single__body { padding: 15px var(--jm-gutter) 60px; }
.jm-single__body h1 { font-size: 36px; margin-bottom: .4em; }
.jm-single__body p { line-height: 1.8; }

/* ----------------------------------------------------------------- footer --- */

.jm-footer__logo { background: #fff; padding: 25px var(--jm-gutter) 45px; text-align: center; }
.jm-footer__logo img { width: 300px; max-width: 100%; }

.jm-footer__main { background: var(--jm-footer); padding: 73px var(--jm-gutter); color: #fff; }
.jm-footer__main > .wp-block-group__inner-container { max-width: var(--jm-content); margin-inline: auto; }
.jm-footer__main h4 {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: .5px;
	text-transform: uppercase;
	color: #fff;
	margin: 0 0 18px;
}
.jm-footer__main p,
.jm-footer__main a { color: #fff; font-size: 14px; line-height: 1.6; }
.jm-footer__main a:hover { color: var(--jm-rose); }
.jm-footer .jm-social a { color: #fff; }
.jm-footer .jm-social a:hover { color: var(--jm-rose); }

.jm-footer__map { display: block; width: 100%; aspect-ratio: 320 / 263; border: 0; filter: grayscale(20%); }

.jm-footer__credit { background: var(--jm-rose); padding: 12px var(--jm-gutter); text-align: center; }
.jm-footer__credit, .jm-footer__credit a { color: #fff; font-size: 14px; font-weight: 700; }
.jm-footer__credit a:hover { text-decoration: underline; }

/* Click-to-play video (16:9). Nothing loads from YouTube until the play
   button is pressed, which also mirrors the original site's consent gate. */
.jm-video { position: relative; margin: 0 0 20px; background: #000; }
.jm-video__play {
	position: relative;
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: #000;
	cursor: pointer;
	aspect-ratio: 16 / 9;
	overflow: hidden;
}
body.jm .jm-video__play img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: opacity .2s ease-out, transform .3s ease-out;
}
.jm-video__play:hover img { opacity: .82; transform: scale(1.02); }
.jm-video__icon {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 68px;
	height: 48px;
	pointer-events: none;
}
.jm-video__icon svg { width: 100%; height: 100%; }
.jm-video__bg { fill: #212121; fill-opacity: .8; transition: fill-opacity .2s; }
.jm-video__play:hover .jm-video__bg { fill: #f00; fill-opacity: 1; }
.jm-video__label {
	position: absolute;
	width: 1px; height: 1px;
	overflow: hidden;
	clip-path: inset(50%);
}
.jm-video iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	border: 0;
}

/* Duda coloured the service lead-ins plum while leaving other bold text black. */
.jm-svc { color: var(--jm-plum); }

/* ------------------------------------------------- misc section chrome --- */

/* Cover ships a 430px floor; heroes here are sized by their padding. */
.jm-section.wp-block-cover { min-height: 0; }

.jm-content { padding-block: 60px; }
.jm-pagetitle { padding: 40px var(--jm-gutter) 10px; }
.jm-pagetitle h1 { font-size: 45px; }
.jm-hero__tel { font-size: 24px; font-weight: 700; margin-top: 14px; }
.jm-hero__tel a { color: #fff; }
.jm-googlebadge { margin-top: 22px; }

/* Sticky "5* reviews" badge — Duda pinned this bottom-right on desktop. */
.jm-revbadge {
	position: fixed;
	right: 0;
	bottom: 24px;
	z-index: 80;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 14px 20px 14px 16px;
	background: #fff;
	box-shadow: 0 3px 11px rgba(0, 0, 0, .25);
	color: var(--jm-ink);
	font-size: 16px;
	font-weight: 700;
	transition: transform .2s ease-out;
}
.jm-revbadge:hover { transform: translateX(-4px); }
.jm-revbadge img { width: 32px; height: 32px; }
@media (max-width: 781px) { .jm-revbadge { display: none; } }

/* ------------------------------------------------------------- animations --- */

@keyframes jmFadeInLeft {
	from { opacity: 0; transform: translate3d(-100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes jmFadeInRight {
	from { opacity: 0; transform: translate3d(100%, 0, 0); }
	to   { opacity: 1; transform: none; }
}
@keyframes jmFadeInUp {
	from { opacity: 0; transform: translate3d(0, 100%, 0); }
	to   { opacity: 1; transform: none; }
}

/* Hidden until the observer marks it in-view, but only when JS is running —
   otherwise the content would be invisible to anyone without it. */
.js .jm-anim { opacity: 0; }
.js .jm-anim.is-in {
	animation-duration: 1s;
	animation-fill-mode: both;
	animation-timing-function: var(--jm-ease);
	opacity: 1;
}
.js .jm-anim--left.is-in  { animation-name: jmFadeInLeft; }
.js .jm-anim--right.is-in { animation-name: jmFadeInRight; }
.js .jm-anim--up.is-in    { animation-name: jmFadeInUp; }

/* The slide-in animations translate by 100% of the element, so they must not
   widen the page while they run. */
.jm-main { overflow-x: clip; }

@media (prefers-reduced-motion: reduce) {
	.js .jm-anim, .js .jm-anim.is-in { opacity: 1; animation: none !important; }
	.jm-gallery__item img { transition: none; }
	.jm-gallery__item:hover img { transform: none; }
}

/* ------------------------------------------------------------- responsive --- */

/* Duda's desktop layout stops adapting below 1024 and its phone site is a
   separate build. This clone stays fluid all the way down instead. */

@media (max-width: 1024px) {
	.jm-hero h1, .jm-hero .jm-hero__title { font-size: 46px; }
	.jm-visits h3, .jm-h-rose {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: var(--jm-rose);
	line-height: 1.3;
}
.jm-h-dark { font-size: 30px; }
	.jm-feature { font-size: 26px; }
	.jm-gallery__title { font-size: 28px; }
}

@media (max-width: 900px) {
	.jm-cta .wp-block-columns { flex-wrap: wrap !important; text-align: center; }
	.jm-cta__text { text-align: center; }
	.jm-cta .wp-block-buttons { justify-content: center; }
	.jm-reviews .wp-block-columns { gap: 28px; }
}

@media (max-width: 781px) {
	:root { --jm-gutter: 24px; --jm-canvas: 12px; }

	/* Phone header is one row: burger, logo, phone icon — same as Duda's
	   separate mobile build, but on the one responsive DOM. */
	.jm-header {
		display: grid;
		grid-template-columns: auto 1fr;
		align-items: center;
	}
	.jm-header__bar {
		grid-column: 1;
		background: transparent;
		padding: 0 0 0 14px;
	}
	.jm-header__main {
		grid-column: 2;
		padding: 12px 14px 12px 4px;
	}
	.jm-header__cols {
		grid-template-columns: 1fr auto;
		gap: 10px;
		min-height: 0;
	}
	.jm-header__logo img { width: 175px; }
	/* More specific than the base `ul.jm-social { display: flex }`. */
	ul.jm-social { display: none; }

	.jm-header__phone .jm-kicker,
	.jm-header__phone .jm-tel__number { display: none; }
	.jm-header__phone .jm-tel__icon { display: inline-block; }

	/* Nothing to collapse on mobile — the logo row is the header. */
	.jm-header.is-stuck .jm-header__main { height: auto; padding-block: 12px; opacity: 1; pointer-events: auto; }

	/* Force the burger below 782px; core's own breakpoint is 600px. */
	.jm-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { display: none; }
	.jm-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }

	.jm-hero { padding: 60px var(--jm-gutter); }
	a.jm-btn,
	body.jm .wp-block-button.jm-btn > .wp-block-button__link { min-width: 190px; padding: 15px 20px; }
	.jm-hero h1, .jm-hero .jm-hero__title { font-size: 32px; }
	.jm-hero h2, .jm-hero .jm-hero__sub { font-size: 18px; }
	.jm-hero--short, .jm-hero--mid, .jm-hero--services, .jm-hero--blog { padding-block: 60px; }

	.jm-visits { padding: 50px var(--jm-gutter); }
	.jm-visits h3, .jm-h-rose {
	font-size: 24px;
	font-weight: 700;
	font-style: italic;
	color: var(--jm-rose);
	line-height: 1.3;
}
.jm-h-dark { font-size: 26px; }
	.jm-feature { font-size: 22px; line-height: 1.4; }

	.jm-strip { padding: 32px var(--jm-gutter); }
	.jm-strip .wp-block-columns { gap: 24px; }
	.jm-strip .wp-block-column { text-align: center; }
	.jm-strip__title, .jm-strip__text { text-align: center; }

	.jm-gallery__grid { grid-template-columns: 1fr; gap: 12px; }
	.jm-gallery__item { aspect-ratio: 16 / 10; }
	.jm-gallery__title { font-size: 24px; }

	.jm-reviews { padding: 40px var(--jm-gutter); }
	.jm-footer__main { padding: 48px var(--jm-gutter); text-align: center; }
	.jm-footer .jm-social ul { justify-content: center; }
	.jm-form { padding: 20px; }
	.jm-single__body h1 { font-size: 28px; }
}

/* Columns stack below 781px by default in core; make sure the 4-up strip
   goes 2-up on small tablets rather than straight to one column. */
@media (min-width: 600px) and (max-width: 781px) {
	/* Core stacks columns below 782px; the four promise cards read better 2-up. */
	.jm-strip .wp-block-columns {
		flex-direction: row !important;
		flex-wrap: wrap !important;
	}
	/* Matches core's own stacking selector so the override actually lands. */
	.jm-strip .wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column {
		flex-basis: calc(50% - 12px) !important;
		flex-grow: 0;
	}
}

/* --------------------------------------------------------------- longform --- */

/* Privacy policy and other text-only pages. */
.jm-longform h2 { font-size: 24px; margin-top: 1.6em; }
.jm-longform h3 { font-size: 18px; margin-top: 1.4em; }
.jm-longform p,
.jm-longform li { line-height: 1.8; }
.jm-longform ul { padding-left: 1.2em; }

/* ------------------------------------------------------------ blog cards --- */

.jm-postlist { padding-block: 60px; }
.jm-cards { gap: 20px !important; }
.jm-cards > li {
	padding: 24px;
	margin: 0;
	border: 1px solid #f0f0f0;
	background: #fff;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .05);
}
.jm-card__title { font-size: 24px; font-weight: 700; line-height: 1.25; margin: 0 0 8px; }
.jm-card__title a { color: var(--jm-rose); transition: color .2s ease-out; }
.jm-card__title a:hover { color: var(--jm-plum); }
.jm-card__meta {
	gap: 6px;
	font-size: 12px;
	color: var(--jm-muted);
	margin-bottom: 10px;
}
.jm-card__meta p, .jm-card__meta time, .jm-card__meta div { margin: 0; font-size: 12px; }
.jm-card__excerpt { font-size: 14px; line-height: 1.6; color: var(--jm-body); }
.jm-card__excerpt .wp-block-post-excerpt__more-link { display: inline-block; margin-top: 10px; color: var(--jm-rose); font-weight: 700; }

/* Blog search field in the hero. */
.jm-blogsearch { max-width: 432px; margin: 22px auto 0; }
.jm-blogsearch .wp-block-search__inside-wrapper { border: 0; background: #fff; padding: 0; }
.jm-blogsearch .wp-block-search__input {
	border: 0;
	border-radius: 0;
	padding: 14px 16px;
	font-family: inherit;
	font-size: 14px;
	color: var(--jm-ink);
}
.jm-blogsearch .wp-block-search__button {
	border: 0;
	border-radius: 0;
	background: #fff;
	color: var(--jm-ink);
	font-weight: 700;
	padding: 14px 18px;
	cursor: pointer;
}
.jm-blogsearch .wp-block-search__button:hover { color: var(--jm-rose); }

@media (max-width: 781px) {
	.jm-cards { grid-template-columns: 1fr !important; }
	.jm-postlist { padding-block: 36px; }
}

/* Duda printed "By <author> • <date>" above each excerpt. */
.jm-card__meta .wp-block-post-author-name::before { content: "By "; }
.jm-blogsearch .wp-block-search__button svg { width: 22px; height: 22px; fill: currentColor; }