/* ==========================================================================
   JRW Finance — component layer on top of theme.json tokens.
   Class names are applied by the theme's block patterns; everything inside
   the blocks stays editable in the editor.
   ========================================================================== */

:root {
	--jrw-radius-card: 14px;
	--jrw-shadow-warm: 0 16px 40px rgba(84, 88, 20, 0.16);
	--jrw-ease: cubic-bezier(0.16, 1, 0.3, 1);
}

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
}
/* Stop the page rubber-banding / "picking up like an image" at the scroll
   ends (overscroll bounce chaining) — Josh, 5 July 2026. */
html, body { overscroll-behavior: none; }

/* Anchor targets land clear of the viewport edge */
[id] { scroll-margin-top: 24px; }

/* Sections butt together edge-to-edge: kill the default block gap at the
   page level (header/content/footer) and between top-level page sections.
   Gaps INSIDE sections come from their own containers, untouched. */
.wp-site-blocks > * + *,
main#content > * + *,
main.entry-content > * + *,
#content .entry-content > * + * {
	margin-block-start: 0 !important;
}
/* ...but an article (single post) IS prose, so restore readable flow spacing
   inside it. The #content id here out-specifies the reset above. */
#content.jrw-prose .entry-content > * + * { margin-block-start: 1.4em !important; }
#content.jrw-prose .entry-content > h2 { margin-block-start: 1.6em !important; }
#content.jrw-prose .entry-content > h3 { margin-block-start: 1.35em !important; }
/* The framed article blocks (intro callout, stats table, example box, dark
   takeaways, CTA rule-off, newsletter) need more breathing room than a line. */
#content.jrw-prose .entry-content > .wp-block-group,
#content.jrw-prose .entry-content > .wp-block-table,
#content.jrw-prose .entry-content > figure,
#content.jrw-prose .entry-content > #mlb2-39901779 { margin-block-start: 2.4em !important; }
/* Article column: one consistent, generous width for EVERYTHING — title, meta,
   image, paragraphs and framed blocks all share the same bounds (Josh,
   5 July 2026 — wider than the old thin measure, and no narrow-text-under-wide
   mismatch). Larger body type + roomier line-height for the wider column. */
#content.jrw-prose .entry-content,
#content.jrw-prose .wp-block-post-title,
#content.jrw-prose .wp-block-post-date,
#content.jrw-prose .wp-block-post-terms,
#content.jrw-prose .wp-block-post-featured-image { max-width: 940px; }
#content.jrw-prose .entry-content > p { font-size: 18px; line-height: 1.75; }
#content.jrw-prose .wp-block-post-title { font-size: clamp(32px, 4vw, 46px); line-height: 1.15; }
/* Article header rhythm: category → title → date → image → body are spaced out
   (the top-level "sections butt" reset had squashed them; Josh, 5 July 2026). */
#content.jrw-prose > .wp-block-post-title { margin-block-start: 12px !important; }
#content.jrw-prose > .wp-block-post-date { margin-block-start: 14px !important; }
#content.jrw-prose > .wp-block-post-featured-image { margin-block-start: 34px !important; }
#content.jrw-prose > .entry-content { margin-block-start: 44px !important; }
/* The disclaimer is a top-level section too, so the reset above zeroes its
   inline margin — restore a clear gap below the newsletter (Josh, 12 July 2026). */
#content.jrw-prose > .jrw-article-disclaimer { margin-block-start: 64px !important; }

/* Headline wrapping */
h1, h2 { text-wrap: balance; }
h3, p { text-wrap: pretty; }

/* Touch behaviour */
a, button, .wp-block-button__link { touch-action: manipulation; }
html { -webkit-tap-highlight-color: rgba(46, 49, 5, 0.1); }

/* ---------- Skip link ---------- */
.jrw-skip {
	position: absolute; left: -9999px; top: 0; z-index: 100;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	padding: 12px 20px; text-decoration: none;
}
.jrw-skip:focus { left: 12px; top: 12px; }

/* ---------- Small-caps label (category labels, section tags) ----------
   Was JetBrains Mono; Josh disliked the mono look on labels like "Home Loans"
   and "Example scenario" (5 July 2026) — now DM Sans semibold small-caps. */
.jrw-mono {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}

/* ---------- Header ---------- */
.jrw-header {
	position: relative; z-index: 10;
}
.jrw-header .wp-block-navigation a:hover {
	color: var(--wp--preset--color--accent);
}
/* Header nav + Contact sized to match the logo; medium weight, not heavy
   (Josh, 7 July 2026 — 18px felt right, 600 read too thick, so 500). */
.jrw-header .wp-block-navigation, .jrw-header .jrw-nav-contact { font-size: 18px; font-weight: 500; }
.jrw-header .wp-block-navigation a,
.jrw-header .wp-block-navigation .wp-block-navigation-item__content,
.jrw-header .jrw-nav-contact a { font-weight: 500; }

/* Related-insights (service pages): responsive 3→2→1 card grid */
.jrw-rel-grid { margin-top: 44px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
@media (max-width: 820px) { .jrw-rel-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .jrw-rel-grid { grid-template-columns: 1fr; } }
/* Lighter date: override the .jrw-mono treatment on the tile date so it reads
   as a small plain muted line, not a heavy uppercase label (Josh, 9 July 2026). */
.jrw-ins-date {
	margin: 0 0 6px;
	font-weight: 400;
	letter-spacing: 0;
	text-transform: none;
	font-size: 13px;
	color: var(--wp--preset--color--mid);
	opacity: 1;
}
.jrw-ins-more { display: inline-block; margin-top: 14px; font-weight: 500; color: var(--wp--preset--color--primary); }
.jrw-ins-card:hover .jrw-ins-more { text-decoration: underline; }

/* Footer social icon row — mask icons so one monochrome SVG recolours on hover.
   Smaller (20px) than the old 26px, cream by default, accent yellow on hover. */
.jrw-social { display: flex; gap: 10px; margin-top: 20px; }
.jrw-social a {
	display: block; width: 19px; height: 19px;
	background-color: var(--wp--preset--color--cream);
	-webkit-mask: var(--jrw-soc) center / contain no-repeat;
	mask: var(--jrw-soc) center / contain no-repeat;
	transition: background-color 0.15s var(--jrw-ease), transform 0.15s var(--jrw-ease);
}
.jrw-social a:hover { background-color: var(--wp--preset--color--accent); transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .jrw-social a { transition: none; } .jrw-social a:hover { transform: none; } }

/* ---------- Insights search results page ---------- */
.jrw-search-form { max-width: 560px; }
.jrw-search-form .wp-block-search__input {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px 0 0 8px;
	color: var(--wp--preset--color--primary);
	padding: 12px 14px;
}
.jrw-search-form .wp-block-search__button {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	border: 0;
	border-radius: 0 8px 8px 0;
	font-weight: 600;
	padding: 12px 22px;
}
.jrw-search-form .wp-block-search__button:hover { background: var(--wp--preset--color--primary-soft); }

/* ---------- 404 page (dark olive) ---------- */
.jrw-404 {
	min-height: 66vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	text-align: center;
}
.jrw-404 .jrw-mono { color: var(--wp--preset--color--body-olive); letter-spacing: 0.08em; margin: 0; }
.jrw-404 h1 { margin-top: 16px; font-size: clamp(48px, 8vw, 82px); line-height: 1.02; color: var(--wp--preset--color--primary); }
.jrw-404 p:not(.jrw-mono) { max-width: 440px; margin-top: 20px; color: var(--wp--preset--color--body-olive); }
.jrw-404-search { max-width: 520px; margin-top: 30px; }
.jrw-404-search .wp-block-search__input {
	background: var(--wp--preset--color--cream);
	border: 1px solid rgba(254, 255, 233, 0.25);
	border-radius: 8px 0 0 8px;
	color: var(--wp--preset--color--primary);
	padding: 12px 14px;
}
.jrw-404-search .wp-block-search__button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	border: 0;
	border-radius: 0 8px 8px 0;
	font-weight: 600;
	padding: 12px 22px;
}
.jrw-404-search .wp-block-search__button:hover { background: var(--wp--preset--color--pale); }
.jrw-404-links { gap: 12px 28px; }
.jrw-404-links p { margin: 0; }
.jrw-404-links a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	border-bottom: 1px solid rgba(254, 255, 233, 0.32);
	padding-bottom: 2px;
}
.jrw-404-links a:hover { color: var(--wp--preset--color--accent); border-color: var(--wp--preset--color--accent); }
/* Header "Contact" text link (replaced the accent button, Josh 5 July 2026).
   The .jrw-header.jrw-dark prefix out-specifies the dark-section link colour
   (rgba cream 0.82) so Contact is FULL cream, matching the nav items. */
.jrw-nav-contact { margin: 0; }
.jrw-header.jrw-dark .jrw-nav-contact a {
	color: var(--wp--preset--color--cream);
	text-decoration: none;
	padding: 10px 0;
}
.jrw-header.jrw-dark .jrw-nav-contact a:hover { color: var(--wp--preset--color--accent); }

/* Dropdown parents (Services, Resources) open on hover and aren't clickable —
   show the normal arrow cursor, not the text I-beam (Josh, 5 July 2026). */
.wp-block-navigation-submenu > .wp-block-navigation-item__content { cursor: default; }

/* ---------- Modern header dropdown (Josh, 7 July 2026) ----------
   Was WordPress's bare default: cream nav text on a near-white box, tight to the
   header, overlapping the hero. Restyled as a floating cream card with a soft
   shadow, rounded corners, padded rows and a hover highlight. Desktop only so the
   mobile overlay menu is untouched. WordPress still controls open/close on hover;
   we only style appearance + add a gentle entrance. */
@media (min-width: 600px) {
	.jrw-header .wp-block-navigation__submenu-container {
		/* !important so WordPress's own submenu colour (it inherits the nav's dark
		   overlay background in some core versions) can't turn this dark and hide
		   the dark text — Josh, 8 July 2026: dropdown items had gone invisible. */
		background: var(--wp--preset--color--cream) !important;
		color: var(--wp--preset--color--primary) !important;
		border: 1px solid var(--wp--preset--color--border);
		border-radius: 14px;
		box-shadow: 0 20px 44px rgba(16, 17, 3, 0.30);
		padding: 8px;
		min-width: 244px;
		margin-top: 12px;   /* gap below the nav item */
		z-index: 60;
	}
	/* Transparent bridge across the gap so the dropdown doesn't close when the
	   pointer travels from the nav item down to the card. */
	.jrw-header .wp-block-navigation__submenu-container::before {
		content: ''; position: absolute; top: -12px; left: 0; right: 0; height: 12px;
	}
	/* Gentle slide/fade in — rides on WordPress's own visibility toggle. */
	@media (prefers-reduced-motion: no-preference) {
		.jrw-header .wp-block-navigation__submenu-container {
			transition: opacity 0.2s var(--jrw-ease), transform 0.2s var(--jrw-ease);
			transform: translateY(-6px);
		}
		.jrw-header .wp-block-navigation-submenu:hover > .wp-block-navigation__submenu-container,
		.jrw-header .wp-block-navigation-submenu:focus-within > .wp-block-navigation__submenu-container {
			transform: translateY(0);
		}
	}
	.jrw-header .wp-block-navigation__submenu-container li { margin: 0; }
	.jrw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		display: block;
		color: var(--wp--preset--color--primary) !important;
		padding: 11px 16px;
		border-radius: 9px;
		font-size: 16px;
		line-height: 1.3;
		white-space: nowrap;
		transition: background-color 0.14s var(--jrw-ease), color 0.14s var(--jrw-ease);
	}
	.jrw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.jrw-header .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus {
		background: var(--wp--preset--color--surface);
		color: var(--wp--preset--color--primary) !important;
	}
	/* Parent chevron: nudge + rotate when its menu is open, for a live feel. */
	.jrw-header .wp-block-navigation-submenu__toggle svg { transition: transform 0.2s var(--jrw-ease); }
	.jrw-header .wp-block-navigation-submenu:hover > .wp-block-navigation-submenu__toggle svg,
	.jrw-header .wp-block-navigation-submenu:focus-within > .wp-block-navigation-submenu__toggle svg { transform: rotate(180deg); }
}

/* ---------- Mobile menu (hamburger overlay) — Josh, 9 July 2026 ----------
   The default overlay was unstyled: cramped, left-aligned, submenu cards looked
   broken. Restyle as a clean full-screen olive sheet with generous tap targets,
   indented sub-items and a clear close button. */
.jrw-header .wp-block-navigation__responsive-container-open,
.jrw-header .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--cream);
}
.jrw-header .wp-block-navigation__responsive-container-open svg,
.jrw-header .wp-block-navigation__responsive-container-close svg {
	width: 30px; height: 30px; fill: currentColor;
}
@media (max-width: 600px) {
	.jrw-header .wp-block-navigation__responsive-container.is-menu-open {
		background-color: var(--wp--preset--color--primary);
		padding: 12px 30px 32px !important;
		align-items: stretch !important;
		justify-content: flex-start !important;
		/* Let the sheet scroll if the expanded menu is taller than the screen, so
		   the last item (Contact) is always reachable (Josh, 11 July 2026). */
		overflow-y: auto !important;
		animation: jrw-menu-in 0.26s var(--jrw-ease) both;
	}
	/* Pin the sheet to the TOP. WordPress centres it vertically by default, which
	   pushed the X and the links ~20% down and cut content off (Josh, 9 July 2026). */
	.jrw-header .is-menu-open .wp-block-navigation__responsive-close { margin-top: 0 !important; width: 100%; }
	.jrw-header .is-menu-open .wp-block-navigation__responsive-dialog { margin: 0 !important; }
	.jrw-header .is-menu-open .wp-block-navigation__responsive-container-content {
		margin-top: 2px;
		width: 100%;
	}
	.jrw-header .is-menu-open .wp-block-navigation__responsive-container-close {
		top: 8px; right: 22px;
	}
	.jrw-header .is-menu-open .wp-block-navigation__container {
		gap: 0;
		align-items: stretch;
		padding-top: 4px; /* lift the links right up under the X (Josh, 11 July 2026) */
	}
	.jrw-header .is-menu-open .wp-block-navigation__container > * {
		animation: jrw-menu-item-in 0.46s cubic-bezier(0.16, 1, 0.3, 1) both;
	}
	.jrw-header .is-menu-open .wp-block-navigation__container > *:nth-child(1) { animation-delay: 0.05s; }
	.jrw-header .is-menu-open .wp-block-navigation__container > *:nth-child(2) { animation-delay: 0.12s; }
	.jrw-header .is-menu-open .wp-block-navigation__container > *:nth-child(3) { animation-delay: 0.19s; }
	.jrw-header .is-menu-open .wp-block-navigation__container > *:nth-child(4) { animation-delay: 0.26s; }
	/* Clean rows — no divider lines, spacing does the separating. */
	.jrw-header .is-menu-open .wp-block-navigation-item__content {
		color: var(--wp--preset--color--accent) !important; /* top-level headings in the button green */
		font-size: 20px;
		font-weight: 500;
		padding: 5px 0;
		display: block;
	}
	.jrw-header .is-menu-open .wp-block-navigation-submenu__toggle {
		color: var(--wp--preset--color--accent);
		padding: 5px 0;
	}
	/* Submenus: flatten the card, indent the children, lighten them. */
	.jrw-header .is-menu-open .wp-block-navigation__submenu-container {
		background: transparent !important;
		border: 0 !important;
		box-shadow: none !important;
		border-radius: 0 !important;
		padding: 0 0 4px 18px !important;
		margin: 0 !important;
		min-width: 0 !important;
	}
	.jrw-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item {
		border: 0 !important;
	}
	.jrw-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		font-size: 16px !important;
		font-weight: 400;
		color: rgba(254, 255, 233, 0.82) !important;
		padding: 4px 0 !important;
	}
	.jrw-header .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
		color: var(--wp--preset--color--accent) !important;
		background: transparent !important;
	}
}

/* Mobile menu open motion (Josh, 11 July 2026). */
@keyframes jrw-menu-in { from { opacity: 0; transform: translateY(-12px); } to { opacity: 1; transform: none; } }
@keyframes jrw-menu-item-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
	.jrw-header .wp-block-navigation__responsive-container.is-menu-open,
	.jrw-header .is-menu-open .wp-block-navigation__container > * { animation: none !important; }
}

/* ---------- Hero ---------- */
.jrw-hero {
	position: relative;
	background-color: var(--wp--preset--color--primary);
	overflow: hidden;
}
/* Stop the hero background image being click-dragged (it "slid like an image"
   and shoved the page — Josh, 5 July 2026). Applies to all images. */
img { -webkit-user-drag: none; user-drag: none; }
.wp-block-cover__image-background { pointer-events: none; user-select: none; }
/* Home hero background video: fills the cover, sits above the poster image and
   below the scrim/content. If the mp4 is missing it stays transparent and the
   image background shows through. */
.jrw-hero-video {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: 80% 50%;
	z-index: 0;
	pointer-events: none;
}
/* Respect reduced-motion: hide the autoplaying video, the poster/render shows. */
@media (prefers-reduced-motion: reduce) { .jrw-hero-video { display: none; } }
/* Scrim above the cover image, below the content: guarantees headline
   contrast whatever render (or video, later) sits behind it. */
.jrw-hero::before {
	content: '';
	position: absolute; inset: 0; z-index: 1; pointer-events: none;
	background:
		linear-gradient(180deg, rgba(46, 49, 5, 0) 72%, rgba(46, 49, 5, 0.9) 100%),
		linear-gradient(90deg, #2e3105 6%, rgba(46, 49, 5, 0.88) 32%, rgba(46, 49, 5, 0.3) 58%, rgba(46, 49, 5, 0.1) 100%);
}
.jrw-hero .wp-block-cover__inner-container { position: relative; z-index: 2; }
/* Hero text sits in one intentional column: headline and subhead share the
   same left/right bounds instead of the headline wrapping narrow and the
   subhead running wide (Josh, 5 July 2026). */
.jrw-hero h1 { color: var(--wp--preset--color--cream); max-width: 620px; }
.jrw-hero p { max-width: 620px; margin-top: 22px; }
.jrw-hero--page h1 { font-size: clamp(38px, 4vw, 56px); }
.jrw-step-num {
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600;
	font-size: 13px; letter-spacing: 0.14em;
	color: var(--wp--preset--color--body-olive);
}
.jrw-hero p { color: rgba(254, 255, 233, 0.82); }
.jrw-hero .jrw-ghost-link a { color: rgba(254, 255, 233, 0.85); text-decoration: none; }
.jrw-hero .jrw-ghost-link a:hover { text-decoration: underline; text-underline-offset: 3px; }
/* Hero CTA row: vertically centre the ghost link against the button (it was
   sitting low off its own paragraph margins) — Josh, 7 July 2026. */
.jrw-hero-cta { align-items: center; column-gap: 26px; }
.jrw-hero-cta .wp-block-buttons,
.jrw-hero-cta .jrw-ghost-link { margin-top: 0; margin-bottom: 0; }
/* Mobile: shrink the home hero and lift its text up from centre so the banner,
   headline, CTA and "Explore our services" all fit on the first screen now that
   the Blueprint banner sits above it (Josh, 11 July 2026). Page heroes keep their
   size — this only targets the home hero (no .jrw-hero--page). */
@media (max-width: 600px) {
	.jrw-hero:not(.jrw-hero--page) { min-height: 66vh !important; }
	.jrw-hero:not(.jrw-hero--page).is-position-center-left { align-items: flex-start; }
	.jrw-hero:not(.jrw-hero--page) .wp-block-cover__inner-container { padding-top: 5vh; }
}

/* ---------- Ruled rows (differentiators, scenarios, insight list) ---------- */
.jrw-ruled { border-top: 1px solid var(--wp--preset--color--border); }
.jrw-ruled > * {
	border-bottom: 1px solid var(--wp--preset--color--border);
	padding-top: 26px !important;
	padding-bottom: 26px !important;
	margin: 0 !important;
}

/* ---------- Cards (services grid) ---------- */
.jrw-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jrw-radius-card);
	box-shadow: 0 1px 2px rgba(84, 88, 20, 0.05);
	transition: transform 0.18s var(--jrw-ease), box-shadow 0.18s var(--jrw-ease);
}
.jrw-card:hover {
	transform: translateY(-6px) scale(1.012);
	box-shadow: 0 22px 48px rgba(84, 88, 20, 0.22);
}
.jrw-card a { text-decoration: none; }
/* A touch more life on the image cards: the photo eases up slightly as the card
   lifts (clipped by the card's overflow:hidden) — Josh, 9 July 2026. */
.jrw-card--media .jrw-card-media img,
.jrw-ins-card .wp-block-post-featured-image img {
	transition: transform 0.4s var(--jrw-ease);
}
.jrw-card--media:hover .jrw-card-media img,
.jrw-ins-card:hover .wp-block-post-featured-image img {
	transform: scale(1.045);
}
@media (prefers-reduced-motion: reduce) {
	.jrw-card, .jrw-card:hover { transform: none; transition: none; }
	.jrw-card--media .jrw-card-media img,
	.jrw-ins-card .wp-block-post-featured-image img,
	.jrw-card--media:hover .jrw-card-media img,
	.jrw-ins-card:hover .wp-block-post-featured-image img { transition: none; transform: none; }
}

/* ---------- Lender marquee ---------- */
.jrw-marquee { overflow: hidden; position: relative; }
.jrw-marquee::before, .jrw-marquee::after {
	content: ''; position: absolute; top: 0; bottom: 0; width: 120px; z-index: 2; pointer-events: none;
}
.jrw-marquee::before { left: 0; background: linear-gradient(90deg, var(--wp--preset--color--cream), rgba(254, 255, 233, 0)); }
.jrw-marquee::after { right: 0; background: linear-gradient(-90deg, var(--wp--preset--color--cream), rgba(254, 255, 233, 0)); }
.jrw-marquee-track {
	display: flex; gap: 14px; width: max-content;
	animation: jrw-scroll 46s linear infinite;
}
.jrw-marquee:hover .jrw-marquee-track { animation-play-state: paused; }
@keyframes jrw-scroll { to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	/* Static but intact: rows keep their single-line shape (no wrap — wrapping
	   read as a broken multi-row grid), overflow simply stays hidden. */
	.jrw-marquee-track { animation: none; }
}
.jrw-marquee-track p {
	flex: none; height: 58px; padding: 0 26px; border-radius: 10px;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	display: flex; align-items: center; justify-content: center;
	font-size: 14.5px; font-weight: 500; letter-spacing: 0.02em;
	color: var(--wp--preset--color--body-olive); white-space: nowrap;
	margin: 0;
}
/* Lender logos at original proportions in a plain box — no padding, the logo
   fills the box edge to edge (Josh, 5 July 2026). width/height attrs (from
   the SVG viewBox) keep the row measurable before lazy images load. */
.jrw-marquee-stack .jrw-marquee + .jrw-marquee { margin-top: 18px; }
.jrw-lender-logo {
	flex: none; box-sizing: border-box;
	height: 72px; padding: 12px 24px;
	display: flex; align-items: center; justify-content: center;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 10px; overflow: hidden;
}
/* Logo scales to the box's inner height so every pill has even breathing room
   top and bottom, regardless of the whitespace baked into each source SVG. */
.jrw-lender-logo img { max-height: 100%; width: auto; display: block; }
/* Reverse rows: mirror the wrapper, un-mirror each logo — the JS conveyor and
   the CSS fallback then both run visually right-to-left with no extra logic. */
.jrw-marquee--reverse { transform: scaleX(-1); }
.jrw-marquee--reverse .jrw-lender-logo { transform: scaleX(-1); }

/* ---------- Insights article cards (image / date / title / read more) ----------
   Every article card is the SAME size regardless of title length: the grid row
   stretches the cards, the image is locked to 16/9, the title is clamped to a
   max of 3 lines (and always reserves 3 lines so short titles don't shrink the
   box), and "Read more" is pinned to the bottom. Applies to every card that
   carries .jrw-ins-card — home teaser, Insights index, and service pages. */
.jrw-ins-cards { align-items: stretch; }
.jrw-ins-card { overflow: hidden; padding: 0; display: flex; flex-direction: column; height: 100%; }
.jrw-ins-card .wp-block-post-featured-image { margin: 0; }
.jrw-ins-card .wp-block-post-featured-image,
.jrw-ins-card .wp-block-post-featured-image img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; }
.jrw-ins-card-body { display: flex; flex-direction: column; flex: 1 1 auto; }
/* Title: thinner and natural-height (Josh, 9 July 2026 — the forced 3-line
   reserve read too heavy/blocky). Lets the title size to its own length like
   the service h3; clamps at 2 lines so a long one can't blow the box out. */
.jrw-ins-card .wp-block-post-title {
	margin: 0;
	font-weight: 500;
	letter-spacing: -0.015em;
	line-height: 1.3;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 2;
	overflow: hidden;
}
/* Excerpt: a short description line like the service tiles, capped at 3 lines
   with a trailing ellipsis (Josh, 9 July 2026). */
.jrw-ins-card .wp-block-post-excerpt,
.jrw-ins-card .jrw-ins-excerpt {
	margin: 8px 0 0;
}
.jrw-ins-card .wp-block-post-excerpt__excerpt,
.jrw-ins-card .jrw-ins-excerpt {
	font-size: 14.5px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-olive);
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: 3;
	overflow: hidden;
}
.jrw-ins-card .wp-block-post-excerpt__more-text,
.jrw-ins-card .wp-block-post-excerpt .wp-block-read-more { display: none; }
.jrw-ins-card .jrw-ins-more,
.jrw-ins-card .wp-block-read-more {
	margin-top: auto; /* pin to the bottom so cards line up */
	padding-top: 16px;
	display: inline-block;
	font-weight: 500;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	width: fit-content;
}
.jrw-ins-card:hover .jrw-ins-more,
.jrw-ins-card:hover .wp-block-read-more { text-decoration: underline; }

/* "All insights" button — a centred outline button that fills olive on hover.
   Reads as a clear secondary CTA, softer than the filled accent buttons
   (Josh, 9 July 2026 — replaces the plain "All insights →" text link). */
.jrw-allbtn .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--primary);
	border: 1.5px solid var(--wp--preset--color--primary);
	transition: background-color 0.15s var(--jrw-ease), color 0.15s var(--jrw-ease);
}
.jrw-allbtn .wp-block-button__link:hover,
.jrw-allbtn .wp-block-button__link:focus-visible {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
}
/* Posts without a featured image still show a branded slot. Two cases: the
   editor renders an empty placeholder div (:empty), while the frontend skips
   the block entirely (:not(:has())). */
.jrw-ins-card .wp-block-post-featured-image:empty,
.jrw-ins-card:not(:has(.wp-block-post-featured-image))::before {
	content: '';
	display: block;
	aspect-ratio: 16 / 9;
	background:
		radial-gradient(60% 80% at 75% 20%, #3d4109 0%, rgba(46, 49, 5, 0) 70%),
		var(--wp--preset--color--primary);
}
.jrw-ins-card-body { padding: 28px 30px 30px; gap: 4px; }
/* Linked titles: same treatment as the "Read more" / "Find out more" links —
   no underline, primary colour, gentle colour shift on hover (Josh, 9 July 2026). */
.jrw-ins-card .wp-block-post-title a,
.jrw-card--media h3 a,
.jrw-calc-card h3 a { text-decoration: none; color: var(--wp--preset--color--primary); transition: color 0.15s var(--jrw-ease); }
.jrw-ins-card:hover .wp-block-post-title a,
.jrw-card--media:hover h3 a { color: var(--wp--preset--color--body-olive); }

/* ---------- Insights pagination (numbered pills, centred) ----------
   Turns the default text links into a tidy centred row of pill buttons; the
   current page is a filled olive chip, prev/next carry arrows. Matches the
   card/button language used across the site. */
.wp-block-query-pagination {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 8px;
	margin-top: 52px;
}
.wp-block-query-pagination .wp-block-query-pagination-numbers { display: flex; gap: 8px; }
.wp-block-query-pagination a,
.wp-block-query-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 14px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--mono, monospace);
	font-size: 15px;
	text-decoration: none;
	transition: background-color 0.15s var(--jrw-ease), border-color 0.15s var(--jrw-ease), color 0.15s var(--jrw-ease);
}
.wp-block-query-pagination a:hover {
	background: var(--wp--preset--color--pale);
	border-color: var(--wp--preset--color--primary);
}
.wp-block-query-pagination .page-numbers.current {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
}
.wp-block-query-pagination .page-numbers.dots {
	border-color: transparent;
	min-width: 24px;
	padding: 0 4px;
}
.wp-block-query-pagination-previous,
.wp-block-query-pagination-next { font-weight: 600; }
@media (prefers-reduced-motion: reduce) {
	.wp-block-query-pagination a { transition: none; }
}
/* Insights index pagination sits clearly below the last card row. The nav is a
   direct child of main#content, so the top-level margin RESET (margin-block-start:
   0 !important) was silently zeroing the gap — every earlier attempt failed for
   this reason. Re-assert it with matching specificity + !important (Josh, 12 July
   2026, root cause finally found). */
.jrw-ins-pagination { margin-bottom: 16px; }
main#content > .jrw-ins-pagination { margin-top: 120px !important; }
@media (max-width: 700px) {
	main#content > .jrw-ins-pagination { margin-top: 84px !important; }
}

/* ---------- Insights filter bar (search + topic dropdown) ----------
   Sits above the card grid on /insights; the service pages deep-link in with a
   topic pre-selected. Search covers insights only (Josh, 9 July 2026). */
.jrw-ins-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 14px;
	align-items: stretch;
	margin-bottom: 44px;
}
.jrw-ins-search {
	position: relative;
	display: flex;
	flex: 1 1 320px;
	min-width: 220px;
}
.jrw-ins-search input {
	flex: 1;
	height: 52px;
	padding: 0 52px 0 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	-webkit-appearance: none;
	appearance: none;
}
.jrw-ins-search input:focus {
	outline: none;
	border-color: var(--wp--preset--color--primary);
}
.jrw-ins-search button {
	position: absolute;
	right: 6px;
	top: 50%;
	transform: translateY(-50%);
	width: 40px;
	height: 40px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	border: 0;
	border-radius: 9px;
	background: transparent;
	color: var(--wp--preset--color--primary);
	cursor: pointer;
	transition: background-color 0.15s var(--jrw-ease);
}
.jrw-ins-search button:hover { background: var(--wp--preset--color--pale); }
.jrw-ins-catwrap { position: relative; display: flex; }
.jrw-ins-catwrap::after {
	content: '';
	position: absolute;
	right: 18px;
	top: 50%;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-70%) rotate(45deg);
	pointer-events: none;
}
.jrw-ins-catwrap select {
	height: 52px;
	min-width: 210px;
	padding: 0 44px 0 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 12px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	font-weight: 500;
	cursor: pointer;
	-webkit-appearance: none;
	appearance: none;
}
.jrw-ins-catwrap select:focus { outline: none; border-color: var(--wp--preset--color--primary); }
@media (max-width: 560px) {
	.jrw-ins-catwrap, .jrw-ins-catwrap select { width: 100%; }
}
.jrw-ins-empty { margin: 8px 0 0; font-size: 17px; color: var(--wp--preset--color--body-olive); }

/* ---------- Booking embed (Outlook iframe needs an explicitly sized wrapper) ---------- */
.jrw-booking-frame {
	background: var(--wp--preset--color--white);
	border-radius: var(--jrw-radius-card);
	overflow: hidden;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.28);
}
.jrw-booking-frame iframe { display: block; width: 100%; height: 720px; border: 0; }
@media (max-width: 700px) {
	.jrw-booking-frame iframe { height: 640px; }
}
/* Calendly test embed (Josh, 11 July 2026): no box/outline at all — the widget
   brings its own cream surface — kept wide so it stays a two-column calendar and
   tall enough that the whole thing fits with no inner scrollbar. */
/* Bare embed — no frame/box at all, just the widget (Josh, 11 July 2026). Height
   is deliberately modest; Calendly scrolls inside if it needs to. */
.jrw-booking-calendly {
	height: 720px;
	max-width: 1000px;
	margin-left: auto;
	margin-right: auto;
	background: transparent;
	border: 0;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}
.jrw-booking-calendly iframe { height: 100%; }
@media (max-width: 700px) {
	.jrw-booking-calendly { height: 560px; }
}
/* Click-to-open facade (prevents the Outlook iframe auto-scrolling the page) */
.jrw-booking-facade {
	display: flex; align-items: center; justify-content: center;
	min-height: 300px; text-align: center;
}
.jrw-booking-facade-inner { padding: 44px 32px; max-width: 480px; }
.jrw-booking-facade-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 22px; letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary); margin: 0 0 8px;
}
.jrw-booking-facade-sub {
	color: var(--wp--preset--color--body-olive);
	font-size: 15px; line-height: 1.6; margin: 0 0 26px;
}
.jrw-booking-open {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500; font-size: 16px;
	padding: 15px 30px; border: 0; border-radius: 8px; cursor: pointer;
	min-height: 44px;
}
.jrw-booking-open:hover { background: var(--wp--preset--color--pale); }

/* ---------- FAQ accordion ---------- */
.jrw-faq .wp-block-details {
	border-bottom: 1px solid var(--wp--preset--color--border);
	margin: 0; padding: 0;
}
.jrw-faq .wp-block-details summary {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 18px; letter-spacing: -0.01em;
	color: var(--wp--preset--color--primary);
	padding: 20px 44px 20px 0;
	cursor: pointer; position: relative;
	list-style: none;
}
.jrw-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.jrw-faq .wp-block-details summary::after {
	content: '';
	position: absolute; right: 6px; top: 50%;
	width: 10px; height: 10px;
	border-right: 2px solid var(--wp--preset--color--primary);
	border-bottom: 2px solid var(--wp--preset--color--primary);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s var(--jrw-ease);
}
.jrw-faq .wp-block-details[open] summary::after { transform: translateY(-30%) rotate(225deg); }
@media (prefers-reduced-motion: reduce) {
	.jrw-faq .wp-block-details summary::after { transition: none; }
}
.jrw-faq .wp-block-details > :not(summary) { padding-bottom: 22px; margin: 0; max-width: 62ch; }
.jrw-faq .wp-block-details summary:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary); outline-offset: 3px;
}

/* ---------- Contact form ---------- */
.jrw-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.jrw-form-notice {
	padding: 14px 18px; border-radius: 8px; margin-bottom: 24px;
	font-size: 15px; line-height: 1.5;
}
.jrw-form-notice--ok {
	background: #eef3d8; border: 1px solid #b9c46a; color: #3a3f08;
}
.jrw-form-notice--err {
	background: #fbeceb; border: 1px solid #d8a29c; color: #7a241c;
}
.jrw-form { margin-top: 32px; }
.jrw-form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .jrw-form-row { grid-template-columns: 1fr; } }
/* Keep First/Last side by side inside the narrow Blueprint modal on mobile
   (they don't fit stacked comfortably) — Josh, 11 July 2026. */
@media (max-width: 600px) { .jrw-modal .jrw-form-row { grid-template-columns: 1fr 1fr; gap: 12px; } }
.jrw-form-field { margin-bottom: 24px; }
.jrw-form-field label {
	display: block; margin-bottom: 9px;
	font-size: 15px; font-weight: 500; color: var(--wp--preset--color--primary);
}
.jrw-form-field input,
.jrw-form-field textarea {
	box-sizing: border-box; /* without this, width:100% + padding overflows the grid cell → fields collide */
	width: 100%; padding: 15px 18px;
	font-family: var(--wp--preset--font-family--body); font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
.jrw-form-field input:focus-visible,
.jrw-form-field textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.jrw-form-check { margin: 4px 0 26px; }
.jrw-form-check label {
	display: flex; align-items: center; gap: 10px;
	font-size: 15px; color: var(--wp--preset--color--body-olive);
	cursor: pointer; min-height: 44px;
}
.jrw-form-check input { width: 18px; height: 18px; accent-color: var(--wp--preset--color--primary); }
.jrw-form button.wp-element-button {
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 500; font-size: 16px;
	padding: 15px 30px; border: 0; border-radius: 8px; cursor: pointer;
	min-height: 44px;
}
.jrw-form button.wp-element-button:hover { background: var(--wp--preset--color--pale); }

/* ---------- Dark sections: readable defaults ----------
   Buttons are excluded: the cream/accent link colours were bleeding into the
   accent-background buttons (unreadable text, and hover turned the header CTA
   accent-on-accent — Josh, 5 July 2026). Buttons keep dark olive text. */
.jrw-dark p { color: rgba(254, 255, 233, 0.82); }
.jrw-dark h1, .jrw-dark h2, .jrw-dark h3 { color: var(--wp--preset--color--cream); }
.jrw-dark a:not(.wp-block-button__link) { color: rgba(254, 255, 233, 0.82); }
.jrw-dark a:not(.wp-block-button__link):hover { color: var(--wp--preset--color--accent); }
.jrw-dark .wp-block-button__link,
.jrw-dark .wp-block-button__link:hover,
.jrw-header .wp-block-button__link:hover,
.jrw-nav-cta .wp-block-button__link:hover {
	color: var(--wp--preset--color--primary);
}

/* ---------- Footer ---------- */
.jrw-footer { border-top: 1px solid rgba(232, 232, 226, 0.14); }
.jrw-footer .jrw-foot-label {
	font-family: var(--wp--preset--font-family--body);
	font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase;
	color: rgba(254, 255, 233, 0.55); font-weight: 600;
}
.jrw-footer p, .jrw-footer a { color: rgba(254, 255, 233, 0.78); font-size: 14.5px; }
/* Link columns breathe a little more than body text (Josh, 5 July 2026) */
.jrw-footer .jrw-foot-label + p { line-height: 2.3; }
.jrw-footer a { text-decoration: none; }
.jrw-footer a:hover { color: var(--wp--preset--color--accent); }
.jrw-footer .jrw-foot-email a { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; }
.jrw-legal p { font-size: 12.5px; line-height: 1.7; color: rgba(254, 255, 233, 0.55); }

/* ---------- Calculators ---------- */
.jrw-calc {
	display: grid; grid-template-columns: 1fr 1fr; gap: 0;
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jrw-radius-card);
	overflow: hidden;
	box-shadow: var(--jrw-shadow-warm);
}
@media (max-width: 860px) { .jrw-calc { grid-template-columns: 1fr; } }
.jrw-calc-form { padding: 34px 34px 26px; }
.jrw-calc-field select {
	width: 100%; padding: 13px 16px;
	font-family: var(--wp--preset--font-family--body); font-size: 16px;
	color: var(--wp--preset--color--ink);
	background: var(--wp--preset--color--white);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
}
.jrw-calc-field select:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary); outline-offset: 1px;
	border-color: var(--wp--preset--color--primary);
}
.jrw-calc-input { position: relative; }
.jrw-calc-input[data-prefix]::before {
	content: attr(data-prefix);
	position: absolute; left: 16px; top: 50%; transform: translateY(-50%);
	font-size: 15px; color: var(--wp--preset--color--body-olive); pointer-events: none;
}
.jrw-calc-input[data-prefix] input { padding-left: 34px; }
.jrw-calc input[type="number"] { appearance: textfield; -moz-appearance: textfield; }
.jrw-calc input::-webkit-outer-spin-button,
.jrw-calc input::-webkit-inner-spin-button { appearance: none; margin: 0; }
.jrw-calc-check { margin: 4px 0 0; }

.jrw-calc-results {
	background: var(--wp--preset--color--primary);
	padding: 34px 34px 28px;
}
.jrw-calc-results-label {
	font-size: 11.5px; color: rgba(254, 255, 233, 0.55); margin: 0 0 18px;
}
.jrw-calc-results dl { margin: 0; }
.jrw-calc-line {
	display: flex; justify-content: space-between; align-items: baseline; gap: 18px;
	padding: 11px 0; border-bottom: 1px solid rgba(232, 232, 226, 0.14);
}
.jrw-calc-line dt { font-size: 14.5px; color: rgba(254, 255, 233, 0.72); }
.jrw-calc-line dd {
	margin: 0; text-align: right;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 15px; color: var(--wp--preset--color--cream);
}
.jrw-calc-line--big dd { font-size: 26px; color: var(--wp--preset--color--accent); }
.jrw-calc-text { font-size: 14.5px; line-height: 1.6; color: rgba(254, 255, 233, 0.82); margin: 16px 0 0; }
.jrw-calc-text:empty { display: none; }
.jrw-calc-disclaimer { font-size: 12px; line-height: 1.65; color: rgba(254, 255, 233, 0.5); margin: 20px 0 0; }
.jrw-calc-results--empty dd { opacity: 0.35; }

/* Calculator embed sits in the same 1240 content column as the rest of the
   page (the tool's own max-width:100% otherwise lets it fill full viewport). */
.jrw-calc-embed { max-width: 1240px; margin-left: auto; margin-right: auto; }

/* ---------- Dark cards (calculators hub) ---------- */
.jrw-card--dark {
	background: rgba(254, 255, 233, 0.05);
	border-color: rgba(232, 232, 226, 0.16);
	box-shadow: none;
}
.jrw-card--dark:hover { box-shadow: 0 16px 40px rgba(0, 0, 0, 0.25); }
.jrw-card--dark h3 { color: var(--wp--preset--color--cream); }
.jrw-card--dark p { color: rgba(254, 255, 233, 0.78); }
.jrw-card--dark a { color: var(--wp--preset--color--accent); }
.jrw-calc-icon {
	width: 52px; height: 52px; border-radius: 12px;
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	display: flex; align-items: center; justify-content: center;
	margin-bottom: 20px;
}
.jrw-calc-icon svg { width: 24px; height: 24px; }

/* ---------- Insights article components (used by article patterns / posts) ---------- */
.jrw-post-intro {
	border-left: 4px solid var(--wp--preset--color--primary);
	padding-left: 20px; margin: 8px 0 36px;
	font-size: 17px; line-height: 1.75; font-style: italic;
}
.jrw-post-intro p { margin: 0; }
.jrw-post-example {
	background: var(--wp--preset--color--surface);
	border-left: 4px solid var(--wp--preset--color--border);
	padding: 18px 22px; margin: 22px 0;
	font-size: 14.5px; line-height: 1.75;
}
.jrw-post-example .jrw-mono { font-size: 12px; margin: 0 0 8px; color: var(--wp--preset--color--body-olive); }
.jrw-post-takeaways { border-radius: var(--jrw-radius-card); }
.jrw-post-takeaways h2 {
	font-size: 18px; text-transform: uppercase; letter-spacing: 0.06em;
	color: var(--wp--preset--color--accent);
}
.jrw-post-takeaways ul { margin: 18px 0 0; padding-left: 20px; }
.jrw-post-takeaways li { font-size: 14.5px; line-height: 1.75; margin-bottom: 10px; color: rgba(254, 255, 233, 0.88); }
.jrw-post-takeaways li:last-child { margin-bottom: 0; }
.jrw-post-cta {
	border-top: 2px solid var(--wp--preset--color--primary);
	padding-top: 24px; margin-top: 36px;
}
.jrw-post-table { overflow-x: auto; } /* wide data tables scroll on narrow phones instead of overflowing */

/* Standing disclaimer under every article's subscribe block (Josh, 11 July 2026).
   Footer-text sized and muted; no divider line (Josh removed it). */
.jrw-article-disclaimer p {
	margin: 0;
	font-size: 14px;
	line-height: 1.6;
	color: var(--wp--preset--color--mid);
}
.jrw-post-table thead th,
.jrw-post-table tr:first-child th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	padding: 12px 16px; text-align: left; border: 0;
}
.jrw-post-table td {
	padding: 12px 16px; border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top; font-size: 14.5px;
}
.jrw-post-table tbody tr:nth-child(even) td { background: var(--wp--preset--color--surface); }
.jrw-post-table tbody tr:last-child td { border-bottom: 0; }

/* Every table inside an article gets the same olive-header look, even the
   migrated Squarespace ones that came in as a bare <table> with no class
   (they were rendering borderless, which read as plain tab-separated text).
   Josh, 7 July 2026. */
#content.jrw-prose .entry-content table {
	width: 100%; border-collapse: collapse; margin: 1.6em 0;
	border: 1px solid var(--wp--preset--color--border);
}
#content.jrw-prose .entry-content table th {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--accent);
	font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em;
	padding: 12px 16px; text-align: left; border: 0;
}
#content.jrw-prose .entry-content table td {
	padding: 12px 16px; border: 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	vertical-align: top; font-size: 14.5px; line-height: 1.6;
}
#content.jrw-prose .entry-content table tr:nth-child(even) td { background: var(--wp--preset--color--surface); }
#content.jrw-prose .entry-content table tr:last-child td { border-bottom: 0; }
/* Some migrated tables use a first-column <td> as the row label - make it read
   as a heading (bold, olive) so 2-column comparison tables are legible. */
#content.jrw-prose .entry-content table td:first-child { font-weight: 600; color: var(--wp--preset--color--primary); }

/* ---------- Prose sections: one site-wide grid ----------
   All jrw-prose sections sit on the same 1240px grid as the header/footer and
   their content fills that grid edge-to-edge (Josh, 5 July 2026 — content must
   match the header/footer width, not sit in a narrower column). The class is
   kept on the markup as the hook if a measure ever needs reintroducing. */

/* ---------- Booking slide-in (pages without the embed; jrw-motion.js) ---------- */
.jrw-slidein {
	position: fixed; right: 20px; bottom: 20px; z-index: 90;
	max-width: 330px;
	background: var(--wp--preset--color--primary);
	border-radius: var(--jrw-radius-card);
	padding: 24px 26px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, 0.35);
	opacity: 0; transform: translateY(16px);
	transition: opacity 0.35s var(--jrw-ease), transform 0.35s var(--jrw-ease);
}
.jrw-slidein.jrw-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
	.jrw-slidein { transition: none; transform: none; }
}
.jrw-slidein-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 17px; line-height: 1.35;
	color: var(--wp--preset--color--cream);
	margin: 0 28px 8px 0;
}
.jrw-slidein p:not(.jrw-slidein-title) {
	font-size: 14px; line-height: 1.6;
	color: rgba(254, 255, 233, 0.8);
	margin: 0 0 16px;
}
.jrw-slidein .wp-element-button { display: inline-block; }
.jrw-slidein-close {
	position: absolute; top: 4px; right: 4px;
	width: 44px; height: 44px;
	background: transparent; border: 0; cursor: pointer;
	color: rgba(254, 255, 233, 0.7); font-size: 22px; line-height: 1;
}
.jrw-slidein-close:hover { color: var(--wp--preset--color--cream); }
@media (max-width: 600px) {
	.jrw-slidein { left: 20px; right: 20px; max-width: none; }
}

/* ---------- Focus visibility (WCAG 2.2) ---------- */
a:focus-visible, button:focus-visible, [role="button"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
.jrw-dark a:focus-visible, .jrw-hero a:focus-visible, .jrw-header a:focus-visible {
	outline-color: var(--wp--preset--color--accent);
}

/* ---------- Scroll reveal (class added by jrw-motion.js only when motion allowed) ---------- */
@media (prefers-reduced-motion: no-preference) {
	.jrw-reveal {
		opacity: 0; transform: translateY(18px);
		transition: opacity 0.65s var(--jrw-ease), transform 0.65s var(--jrw-ease);
		transition-delay: var(--jrw-rd, 0s);
	}
	.jrw-reveal.jrw-in { opacity: 1; transform: none; }
}

/* ==========================================================================
   v2.0.4 — service-card imagery, FAQ motion, page transitions, top banner
   + Property Portfolio Blueprint popup. All additive; existing selectors
   untouched.
   ========================================================================== */

/* ---------- Service cards with a hero image (home "What we can help with") ---------- */
.jrw-card--media { overflow: hidden; padding-top: 0 !important; }
.jrw-card--media .jrw-card-media { margin: 0 -30px 22px; border-radius: 0; }
.jrw-card--media .jrw-card-media img {
	display: block; width: 100%; height: auto;
	aspect-ratio: 16 / 9; object-fit: cover;
}

/* ---------- FAQ accordion: smoother reveal on open ---------- */
@media (prefers-reduced-motion: no-preference) {
	.jrw-faq .wp-block-details[open] > :not(summary) {
		animation: jrw-faq-in 0.3s var(--jrw-ease) both;
	}
}
@keyframes jrw-faq-in {
	from { opacity: 0; transform: translateY(-6px); }
	to   { opacity: 1; transform: none; }
}

/* ---------- Page transition: gentle fade-in only (Josh, 8 July 2026) ----------
   No outgoing fade — the click navigates instantly and the new page eases in as
   it loads (see jrw-motion.js). Slightly longer than before so it reads as a
   soft settle-in, not a blink. */
@media (prefers-reduced-motion: no-preference) {
	body { animation: jrw-page-in 0.75s var(--jrw-ease) both; }
}
@keyframes jrw-page-in { from { opacity: 0; } to { opacity: 1; } }

/* ---------- Top banner (home only): Property Portfolio Blueprint lead magnet ---------- */
.jrw-banner {
	display: block; width: 100%;
	box-sizing: border-box; /* keep padding inside 100% width — was causing a horizontal scroll (Josh, 11 July 2026) */
	background: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--body);
	font-weight: 600; font-size: 14.5px; line-height: 1.45;
	letter-spacing: 0.005em; text-align: center;
	padding: 12px 24px;
}
.jrw-banner .jrw-banner-arrow { margin-left: 8px; font-weight: 700; }
/* Only the underlined "Download..." link is clickable; the rest of the bar is
   plain text. The link is a reset button that reads as inline text. */
.jrw-banner-link {
	border: 0; background: none; padding: 0; margin: 0; cursor: pointer;
	font: inherit; color: inherit; letter-spacing: inherit;
}
.jrw-banner-link u {
	text-underline-offset: 3px; text-decoration-thickness: 1px;
	border-radius: 3px;
	-webkit-box-decoration-break: clone; box-decoration-break: clone;
	transition: background-color 0.15s var(--jrw-ease), color 0.15s var(--jrw-ease), box-shadow 0.15s var(--jrw-ease);
}
.jrw-banner-link:hover u,
.jrw-banner-link:focus-visible u {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream);
	text-decoration-color: transparent;
	box-shadow: 0 0 0 2px var(--wp--preset--color--primary); /* pads the marker around the text without shifting layout */
}
@media (prefers-reduced-motion: reduce) { .jrw-banner-link u { transition: none; } }
/* Smaller on mobile so the message fits in two lines, not three (Josh, 11 July 2026). */
@media (max-width: 600px) {
	.jrw-banner { font-size: 12px; line-height: 1.4; padding: 9px 14px; letter-spacing: 0; }
	.jrw-banner .jrw-banner-arrow { margin-left: 5px; }
}

/* ---------- Lead-magnet modal ---------- */
.jrw-modal-overlay {
	position: fixed; inset: 0; z-index: 200;
	background: rgba(16, 17, 3, 0.62);
	display: none; align-items: center; justify-content: center;
	padding: 24px 20px; overflow-y: auto;
}
.jrw-modal-overlay.jrw-open { display: flex; }
@media (prefers-reduced-motion: no-preference) {
	.jrw-modal-overlay.jrw-open .jrw-modal { animation: jrw-modal-in 0.3s var(--jrw-ease) both; }
}
@keyframes jrw-modal-in { from { opacity: 0; transform: translateY(14px) scale(0.98); } to { opacity: 1; transform: none; } }
.jrw-modal {
	position: relative; width: 100%; max-width: 460px;
	background: var(--wp--preset--color--cream);
	border-radius: var(--jrw-radius-card);
	padding: 40px 36px 34px;
	box-shadow: 0 30px 80px rgba(0, 0, 0, 0.4);
}
.jrw-modal .jrw-mono { color: var(--wp--preset--color--body-olive); margin: 0 0 10px; }
.jrw-modal h2 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 24px; letter-spacing: -0.02em; line-height: 1.2;
	color: var(--wp--preset--color--primary); margin: 0 0 10px;
}
.jrw-modal-lead { font-size: 15px; line-height: 1.6; color: var(--wp--preset--color--body-olive); margin: 0 0 22px; }
.jrw-modal .jrw-form { margin-top: 0; }
.jrw-modal .jrw-form-field { margin-bottom: 16px; }
.jrw-modal .jrw-form button.wp-element-button { width: 100%; margin-top: 6px; }
/* Filled rounded-square so the X stays clear over Calendly's own top-right
   "powered by" chrome (Josh, 11 July 2026). Same on both modals. */
.jrw-modal-close {
	position: absolute; top: 8px; right: 8px;
	width: 40px; height: 40px; border: 0; cursor: pointer;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--cream); font-size: 24px; line-height: 1;
	border-radius: 10px; z-index: 3;
	box-shadow: 0 2px 8px rgba(16, 17, 3, 0.28);
	transition: background-color 0.15s var(--jrw-ease);
}
.jrw-modal-close:hover { background: var(--wp--preset--color--body-olive); color: var(--wp--preset--color--cream); }
.jrw-modal-done { text-align: center; padding: 8px 0 4px; }
.jrw-modal-done h2 { margin-bottom: 12px; }

/* Calendly call pop-up (Josh, 11 July 2026): just the calendar, no copy — white,
   compact so it never fills the screen, X nudged down so it's easy to see, and a
   thin frame with a small gutter so text isn't at the edge. */
body.jrw-modal-lock { overflow: hidden; } /* freeze the page behind an open modal */
.jrw-call-modal .jrw-modal { background: #fff; padding: 30px 6px 6px; } /* just room for the close X */
.jrw-call-modal .jrw-modal-close { top: 14px; right: 12px; }
.jrw-modal--wide { max-width: 680px; }
.jrw-calendly-mount {
	height: min(660px, 78vh);
	margin-top: 0;
	background: transparent;
	border: 0;
	padding: 0;
}
.jrw-calendly-mount iframe { height: 100% !important; border: 0; }
@media (max-width: 700px) {
	.jrw-modal--wide { max-width: 420px; }
	.jrw-calendly-mount { height: 74vh; }
}

/* ---------- Book-a-call CTA directly under each calculator ---------- */
.jrw-calc-cta {
	gap: 20px 28px;
	background: var(--wp--preset--color--pale);
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--jrw-radius-card);
	padding: 22px 26px;
}
.jrw-calc-cta .jrw-calc-cta-text {
	margin: 0; flex: 1 1 320px;
	font-size: 16px; line-height: 1.5; font-weight: 500;
	color: var(--wp--preset--color--primary);
}
.jrw-calc-cta .wp-block-buttons { margin: 0; }
/* Hidden until the calculator produces a result — jrw-motion.js adds
   .jrw-cta-on once the tool's results panel shows (Josh, 9 July 2026). */
.jrw-calc-cta:not(.jrw-cta-on) { display: none !important; }

/* ==========================================================================
   REDESIGN SHOWCASE (internal preview page only — /redesign-test/).
   Every selector below is prefixed .jrw-showcase- (plus .jrw-mask/.jrw-counter/
   .jrw-spotlight, which are new, previously-unused class names) so none of it
   can affect any existing page. Same locked tokens (colour/type) as the rest
   of the site — this is a layout/motion/texture exploration only.
   ========================================================================== */

/* Reusable noise texture (no image asset — inline SVG turbulence) */
.jrw-showcase-hero-grain,
.jrw-showcase-grain {
	position: absolute; inset: 0; pointer-events: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
	mix-blend-mode: overlay;
	opacity: 0.4;
}

/* ---------- Concept 1: cinematic hero reveal ---------- */
.jrw-showcase-hero {
	position: relative;
	min-height: 100dvh;
	display: flex;
	align-items: center;
	background-color: var(--wp--preset--color--primary);
}
.jrw-showcase-hero-media { position: absolute; inset: 0; overflow: hidden; z-index: 0; }
.jrw-showcase-hero-bg {
	position: absolute; inset: 0; width: 100%; height: 100%;
	object-fit: cover; object-position: 80% 50%;
}
.jrw-showcase-hero-video { z-index: 1; pointer-events: none; }
.jrw-showcase-hero-scrim {
	position: absolute; inset: 0; z-index: 2;
	background:
		linear-gradient(180deg, rgba(46, 49, 5, 0) 55%, rgba(46, 49, 5, 0.92) 100%),
		linear-gradient(90deg, #2e3105 6%, rgba(46, 49, 5, 0.88) 34%, rgba(46, 49, 5, 0.35) 60%, rgba(46, 49, 5, 0.12) 100%);
}
.jrw-showcase-hero-grain { z-index: 3; }
.jrw-showcase-hero-inner {
	position: relative; z-index: 4;
	max-width: 1240px; width: 100%; margin: 0 auto; padding: 0 24px 120px;
}
.jrw-showcase-eyebrow { color: var(--wp--preset--color--accent); margin: 0 0 22px; }
.jrw-showcase-eyebrow--dark { color: var(--wp--preset--color--primary); }
.jrw-showcase-hero-h1 {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; letter-spacing: -0.03em; line-height: 1.04;
	font-size: clamp(42px, 7vw, 104px);
	color: var(--wp--preset--color--cream);
	margin: 0; max-width: 900px;
}
.jrw-showcase-hero-sub {
	max-width: 560px; margin-top: 26px; font-size: 19px; line-height: 1.6;
	color: rgba(254, 255, 233, 0.82);
}
.jrw-mask { display: block; overflow: hidden; }
.jrw-mask-in { display: inline-block; }
@media (prefers-reduced-motion: no-preference) {
	.jrw-mask-in {
		opacity: 0; transform: translateY(112%);
		animation: jrw-showcase-mask-in 1s var(--jrw-ease) both;
		animation-delay: var(--d, 0s);
	}
	.jrw-showcase-hero-bg { animation: jrw-showcase-kenburns 15s ease-out both; }
}
@keyframes jrw-showcase-mask-in { to { opacity: 1; transform: none; } }
@keyframes jrw-showcase-kenburns { from { transform: scale(1); } to { transform: scale(1.08); } }

.jrw-showcase-stat-float {
	position: relative; margin-top: 52px;
	display: inline-flex; align-items: center; gap: 18px;
	background: var(--wp--preset--color--white);
	border-radius: var(--jrw-radius-card);
	box-shadow: var(--jrw-shadow-warm);
	padding: 24px 30px;
	transform: translateY(64px);
}
.jrw-showcase-stat-num {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 700; letter-spacing: -0.02em; line-height: 1;
	font-size: clamp(40px, 5vw, 60px);
	color: var(--wp--preset--color--primary);
}
.jrw-showcase-stat-label {
	font-size: 13px; font-weight: 600; line-height: 1.4;
	color: var(--wp--preset--color--body-olive);
	max-width: 10em;
}
@media (max-width: 640px) { .jrw-showcase-hero-inner { padding-bottom: 90px; } .jrw-showcase-stat-float { transform: none; margin-top: 40px; } }

/* ---------- Concept 2: asymmetric, oversized type ---------- */
.jrw-showcase-broken {
	position: relative;
	padding: calc(var(--wp--preset--spacing--70) + 40px) 24px var(--wp--preset--spacing--70);
}
.jrw-showcase-broken .jrw-showcase-eyebrow { text-align: center; }
.jrw-showcase-broken-grid {
	max-width: 1240px; margin: 0 auto; padding: 0 24px;
	display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 64px; align-items: center;
}
@media (max-width: 900px) { .jrw-showcase-broken-grid { grid-template-columns: 1fr; gap: 48px; } }
.jrw-showcase-quote {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; letter-spacing: -0.02em; line-height: 1.14;
	font-size: clamp(28px, 3.6vw, 44px);
	color: var(--wp--preset--color--primary);
	margin: 0;
}
.jrw-showcase-card-stack { position: relative; max-width: 340px; margin-left: auto; padding: 10px 0 30px; }
@media (max-width: 900px) { .jrw-showcase-card-stack { margin: 0 auto; } }
.jrw-showcase-stack-card { position: relative; padding: 24px 26px !important; }
.jrw-showcase-stack-card--1 { transform: rotate(-2deg); z-index: 3; }
.jrw-showcase-stack-card--2 { transform: rotate(1.5deg) translateX(-16px); z-index: 2; margin-top: -14px; }
.jrw-showcase-stack-card--3 { transform: rotate(-1deg) translateX(8px); z-index: 1; margin-top: -14px; }
@media (prefers-reduced-motion: reduce) {
	.jrw-showcase-stack-card--1, .jrw-showcase-stack-card--2, .jrw-showcase-stack-card--3 { transform: none; }
}

/* ---------- Concept 3: textured depth / glass ---------- */
.jrw-showcase-texture {
	position: relative; overflow: hidden;
	background: var(--wp--preset--color--primary);
	padding: var(--wp--preset--spacing--70) 24px;
}
.jrw-showcase-texture .jrw-showcase-grain { z-index: 0; }
.jrw-showcase-texture-inner { position: relative; z-index: 1; max-width: 1240px; margin: 0 auto; }
.jrw-showcase-texture-h2 { font-size: clamp(34px, 4.5vw, 52px); margin: 14px 0 44px; max-width: 700px; }
.jrw-showcase-glass {
	position: relative; max-width: 460px;
	padding: 40px 36px; border-radius: var(--jrw-radius-card);
	background: rgba(254, 255, 233, 0.06);
	backdrop-filter: blur(18px); -webkit-backdrop-filter: blur(18px);
	border: 1px solid rgba(254, 255, 233, 0.14);
	box-shadow: inset 0 1px 0 rgba(254, 255, 233, 0.18), 0 30px 80px rgba(0, 0, 0, 0.35);
}
.jrw-showcase-glass-title {
	font-family: var(--wp--preset--font-family--heading);
	font-weight: 600; font-size: 22px; color: var(--wp--preset--color--cream); margin: 0 0 10px;
}
.jrw-showcase-glass-sub {
	color: rgba(254, 255, 233, 0.78); font-size: 15px; line-height: 1.6; margin: 0 0 26px;
}
/* Spotlight border: a soft ring of accent light that tracks the cursor (jrw-motion.js sets --mx/--my) */
.jrw-spotlight { position: relative; }
.jrw-spotlight::before {
	content: ''; position: absolute; inset: -1px; z-index: 2; border-radius: inherit; padding: 1px;
	background: radial-gradient(240px circle at var(--mx, 50%) var(--my, 50%), rgba(223, 231, 119, 0.55), transparent 62%);
	-webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor; mask-composite: exclude;
	pointer-events: none; opacity: 0; transition: opacity 0.3s var(--jrw-ease);
}
.jrw-spotlight:hover::before, .jrw-spotlight:focus-within::before { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .jrw-spotlight::before { transition: none; } }