/*
 * Just Practice – design styles (Heidi FitzGerald's XD design, 1920px artboards).
 *
 * Desktop is the design scaled to the window: every size is "design px × --s", where --s is
 * 1px at 1920 and shrinks with the window (0.75px at 1440). Text has a floor so it stays readable
 * on small laptops. Below 1000px the menu collapses; below 900px every two-column row stacks.
 */

:root {
	--jp-bg: #ebe0da;
	--jp-ink: #1b172a;
	--jp-ink2: #13121f;
	--jp-coral: #ea6855;
	--jp-blue: #85b1d6;
	--jp-mist: #c3cdd9;
	--jp-sans: "Google Sans", "Product Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	--jp-serif: "Noto Serif", Georgia, serif;

	--s: min(1px, 100vw / 1920);
	--gut: calc(94 * var(--s));
	--wrap: min(100% - 2 * var(--gut), 1731px);

	--fs-body: max(15px, calc(22 * var(--s)));
	--fs-small: max(13px, calc(18 * var(--s)));
	--fs-h2: max(28px, calc(50.79 * var(--s)));
	--fs-h3: max(22px, calc(38 * var(--s)));
	--fs-xl: max(34px, calc(77 * var(--s)));
	--fs-quote: max(15px, calc(20 * var(--s)));
	--fs-btn: max(14px, calc(22 * var(--s)));
	--fs-toggle: max(13px, calc(18 * var(--s)));
	--line: 1px solid var(--jp-blue);
}

@media (max-width: 999px) {
	:root { --gut: 32px; }
}
@media (max-width: 899px) {
	:root {
		--fs-body: 16px;
		--fs-small: 14px;
		--fs-h2: 30px;
		--fs-h3: 24px;
		--fs-xl: 36px;
		--fs-quote: 16px;
		--fs-btn: 16px;
		--fs-toggle: 15px;
	}
}
@media (max-width: 599px) {
	:root { --gut: 20px; --fs-xl: 32px; --fs-h2: 28px; }
}

/* ---------- Base ---------- */

html { -webkit-text-size-adjust: 100%; }
body.jp {
	background: var(--jp-bg);
	color: var(--jp-ink);
	font-family: var(--jp-sans);
	font-size: var(--fs-body);
	line-height: 1.409;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}
.jp .site.grid-container,
.jp .site-content,
.jp .content-area,
.jp .site-main,
.jp .inside-article,
.jp .entry-content { max-width: none; margin: 0; padding: 0; background: none; }
.jp .site-content { display: block; }
.jp .site-main > article { margin: 0; }
.jp a { color: inherit; }
.jp a:focus-visible, .jp button:focus-visible { outline: 2px solid var(--jp-ink2); outline-offset: 3px; }
.jp img { max-width: 100%; height: auto; }

.jp .entry-content h1, .jp .entry-content h2, .jp .entry-content h3, .jp .entry-content h4 {
	font-family: var(--jp-sans); font-weight: 500; margin: 0; color: var(--jp-ink2); letter-spacing: 0;
}
.jp .entry-content p, .jp .entry-content li { font-size: var(--fs-body); line-height: 1.409; }
.jp .entry-content p { margin: 0 0 1.409em; }
.jp .entry-content ul { list-style: none; margin: 0 0 1.409em; padding: 0; }
.jp .entry-content li { position: relative; margin: 0; padding-left: 1.2em; }
.jp .entry-content li::before { content: "•"; position: absolute; left: 0; }
.jp .entry-content :is(p, ul, .wp-block-buttons):last-child { margin-bottom: 0; }
.jp .entry-content strong { font-weight: 700; }
.jp .entry-content figure { margin: 0; }
.jp .entry-content .wp-block-columns { margin-top: 0; margin-bottom: 0; }

/* Links that look like "Explore", "See this in action", emails */
.jp .jp-link, .jp .jp-link a { color: var(--jp-coral); }
.jp .jp-link a, .jp a.jp-mail, .jp .jp-footer a {
	color: var(--jp-coral); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.18em;
}
.jp .jp-link a { letter-spacing: 0.057em; }
.jp .jp-link a:hover, .jp .jp-footer a:hover { text-decoration-thickness: 2px; }

/* Buttons */
.jp .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 16px; margin: 0; }
/* .wp-block-button in the selector: GeneratePress styles a.wp-block-button__link:not(.has-background) grey. */
.jp .wp-block-button .wp-block-button__link,
.jp .wpcf7-submit {
	display: inline-block;
	background: var(--jp-blue);
	color: var(--jp-ink2);
	font-family: var(--jp-sans);
	font-weight: 700;
	font-size: var(--fs-btn);
	letter-spacing: 0.057em;
	line-height: 1.2;
	padding: max(11px, calc(13.5 * var(--s))) max(18px, calc(28 * var(--s)));
	border: 0;
	border-radius: max(8px, calc(13 * var(--s)));
	text-decoration: none;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease;
}
.jp .wp-block-button .wp-block-button__link:hover, .jp .wp-block-button .wp-block-button__link:focus,
.jp .wpcf7-submit:hover, .jp .wpcf7-submit:focus { background: var(--jp-ink2); color: #fff; }

/* Shared layout pieces */
.jp-sec { width: var(--wrap); margin-inline: auto; border-top: var(--line); }
.jp-sec.jp-noline { border-top: 0; }
.jp .jp-2col { display: grid !important; grid-template-columns: 1fr 1fr; gap: 0; align-items: start; }
.jp .jp-2col > .wp-block-column { flex: none !important; width: auto; min-width: 0; margin: 0 !important; }

.jp .entry-content .jp-h1 { font-size: var(--fs-h2); line-height: 1.2; color: var(--jp-ink); }
.jp .entry-content .jp-h2 { font-size: var(--fs-h2); line-height: 1.2; }
/* Page titles sit 7px in from the grid on every artboard (x 101). */
.jp .entry-content .jp-title { margin-left: calc(7 * var(--s)) !important; }
.jp .entry-content .jp-title { font-family: var(--jp-serif); font-weight: 500; font-size: var(--fs-h2); line-height: 1.2; color: var(--jp-ink2); }
.jp .entry-content .jp-h3 { font-size: var(--fs-h3); line-height: 1.2; color: var(--jp-coral); }
.jp .entry-content .jp-xl { font-size: var(--fs-xl); line-height: 1.052; color: var(--jp-coral); }

/* ---------- Header (GeneratePress markup) ---------- */

.jp .site-header { background: transparent; position: relative; z-index: 20; }
.jp .inside-header {
	width: var(--wrap); max-width: none; margin: 0 auto;
	/* Line under the header at y 256 of the artboard, whatever the nav adds to the content height. */
	box-sizing: border-box; height: calc(257 * var(--s));
	padding: calc(88 * var(--s)) 0 0;
	border-bottom: var(--line);
	display: flex; align-items: flex-start; justify-content: space-between; gap: 24px;
}
.jp .site-logo { margin: 0; line-height: 0; }
.jp .site-logo a { display: inline-block; color: var(--jp-ink2); }
.jp .jp-logo { display: block; width: auto; height: max(48px, calc(87 * var(--s))); }

.jp .main-navigation { background: transparent; margin-top: calc(39 * var(--s)); }
.jp .main-navigation .inside-navigation { max-width: none; padding: 0; }
.jp .main-navigation .main-nav > ul { display: flex; align-items: center; gap: 0; }
.jp .main-navigation .main-nav ul li a {
	font-family: var(--jp-sans); font-weight: 400; font-size: var(--fs-btn); letter-spacing: 0.066em;
	color: var(--jp-ink2); background: transparent;
	line-height: max(40px, calc(54 * var(--s))); padding: 0;
}
.jp .main-navigation .main-nav > ul > li { margin-left: var(--jp-nav-gap, calc(54.3 * var(--s))); }
.jp .main-navigation .main-nav > ul > li:first-child { margin-left: 0; }
.jp .main-navigation .main-nav ul li:not(.jp-nav-btn) a:hover { color: var(--jp-coral); background: transparent; }
.jp .main-navigation .main-nav ul li[class*="current-menu-"]:not(.jp-nav-btn) > a {
	color: var(--jp-coral); font-weight: 500; background: transparent;
	text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 0.3em;
}
/* Design: items start at x 960 / 1111 / 1302 / 1495, button 1680–1824 (1920 artboard). */
.jp .main-navigation .main-nav ul li.jp-nav-btn { margin-left: calc(48 * var(--s)); }
.jp .main-navigation .main-nav ul li.jp-nav-btn > a {
	background: var(--jp-blue); color: var(--jp-ink2); font-weight: 700; letter-spacing: 0.057em;
	border-radius: max(8px, calc(13 * var(--s))); padding: 0 max(18px, calc(30.5 * var(--s)));
}
.jp .main-navigation .main-nav ul li.jp-nav-btn > a:hover { background: var(--jp-ink2); color: #fff; }
/* On the Contact page the XD shows the button paler: the blue at 75% over the page colour. */
.jp .main-navigation .main-nav ul li.jp-nav-btn[class*="current-menu-"] > a { background: #9dbfdb; color: var(--jp-ink2); }

/* Mobile menu: GeneratePress's toggle opens the same menu as a panel under the header. */
.jp .main-navigation .menu-toggle {
	background: transparent; color: var(--jp-ink2); font-family: var(--jp-sans);
	font-size: 16px; font-weight: 500; letter-spacing: 0.06em; padding: 10px 0 10px 12px; line-height: 1;
	display: none; align-items: center; justify-content: center; gap: 10px; min-height: 44px; min-width: 44px;
}
.jp .main-navigation .menu-toggle .gp-icon svg { width: 22px; height: 22px; }
.jp .main-navigation .menu-toggle:hover, .jp .main-navigation .menu-toggle:focus { background: transparent; color: var(--jp-coral); }

@media (max-width: 999px) {
	.jp .inside-header { align-items: center; padding: 20px 0; height: auto; }
	.jp .jp-logo { height: 48px; }
	.jp .main-navigation { margin-top: 0; position: static; }
	.jp .main-navigation .menu-toggle { display: inline-flex; }
	.jp .main-navigation .main-nav { display: none; }
	.jp .main-navigation.toggled .main-nav {
		display: block; position: absolute; left: 0; right: 0; top: 100%;
		background: var(--jp-bg); border-bottom: var(--line); box-shadow: 0 18px 30px -18px rgba(19, 18, 31, 0.25);
		padding: 8px var(--gut) 24px;
	}
	.jp .main-navigation.toggled .main-nav > ul { display: block; width: var(--wrap); margin: 0 auto; }
	.jp .main-navigation .main-nav > ul > li,
	.jp .main-navigation .main-nav ul li.jp-nav-btn { margin: 0; float: none; display: block; border-bottom: 1px solid rgba(133, 177, 214, 0.5); }
	.jp .main-navigation .main-nav ul li a { font-size: 18px; line-height: 1.3; padding: 14px 0; display: block; }
	.jp .main-navigation .main-nav ul li.jp-nav-btn { border-bottom: 0; padding-top: 18px; }
	.jp .main-navigation .main-nav ul li.jp-nav-btn > a { display: inline-block; padding: 12px 24px; }
}

/* ---------- Footer (synced pattern "Site footer") ---------- */

.jp .site-footer, .jp .jp-site-footer { background: transparent; padding: 0; text-align: left; color: var(--jp-ink); }
.jp .jp-footer {
	width: var(--wrap); margin: 0 auto; border-top: var(--line);
	padding: calc(51 * var(--s)) 0 calc(48 * var(--s));
	display: grid; grid-template-columns: calc(432 * var(--s)) calc(434 * var(--s)) 1fr; gap: 0; align-items: start;
}
.jp .jp-footer > * { margin: 0 !important; }
.jp .jp-footer p { font-size: var(--fs-small); line-height: 1.389; margin: 0; }
/* XD: Naarm / email / phone sit 30px apart with a heavier underline. */
.jp .jp-footer .jp-footer-contact p { line-height: 1.667; }
.jp .jp-footer .jp-footer-contact a { text-decoration-thickness: 0.09em; text-underline-offset: 0.22em; }
.jp .jp-footer .jp-footer-logo { line-height: 0; }
.jp .jp-footer .jp-footer-logo img { width: max(130px, calc(198 * var(--s))); height: auto; display: block; }
.jp .jp-footer .jp-footer-ack p { max-width: calc(807 * var(--s)); }
.jp .jp-footer .jp-flags { display: flex; gap: calc(18 * var(--s)); margin-top: calc(44 * var(--s)) !important; align-items: flex-start; }
.jp .jp-footer .jp-flags img { height: max(30px, calc(46 * var(--s))); width: auto; display: block; }
.jp .jp-footer .jp-flags figure:last-child img { height: max(33px, calc(51 * var(--s))); margin-top: calc(-2 * var(--s)); }
.jp .jp-footer .jp-flags figure { margin: 0; }

/* ---------- Home ---------- */

.jp-hero { padding: calc(151 * var(--s)) 0 calc(152 * var(--s)); }
.jp-hero > .wp-block-column:first-child { padding-top: calc(9 * var(--s)); padding-right: calc(115 * var(--s)); }
.jp-hero--training > .wp-block-column:first-child { padding-right: calc(74 * var(--s)); }
.jp .entry-content .jp-hero .jp-h1 { margin-bottom: calc(53 * var(--s)); }
.jp-hero .wp-block-buttons { margin-top: calc(49 * var(--s)); }
.jp-hero .jp-hero-img img { display: block; width: 100%; height: calc(538 * var(--s)); object-fit: cover; }
/* Home hero: the XD mask is a rectangle with 11px corners (the inner-page heroes are square). */
.jp-hero:not(.jp-hero--page):not(.jp-hero--training) .jp-hero-img img { border-radius: max(6px, calc(11 * var(--s))); }

.jp-intro { padding: calc(17 * var(--s)) 0 calc(154 * var(--s)); }
.jp-intro > .wp-block-column:last-child { padding-top: calc(45 * var(--s)); }
.jp-intro .wp-block-buttons { margin-top: calc(41 * var(--s)); }
/* Text boxes in the design are 750px (intro) and 786px (partner rows) wide. */
.jp .entry-content .jp-intro > .wp-block-column:last-child p { max-width: calc(750 * var(--s)); }
.jp .entry-content .jp-item p { max-width: calc(786 * var(--s)); }

.jp-partner { padding: calc(11 * var(--s)) 0 calc(155 * var(--s)); }
.jp-partner > .wp-block-column:last-child { padding-top: calc(13 * var(--s)); }
.jp-item { padding: calc(25 * var(--s)) 0 calc(86 * var(--s)); border-bottom: var(--line); }
.jp-item:first-child { padding-top: 0; }
.jp-item:last-child { border-bottom: 0; padding-bottom: 0; }
.jp .entry-content .jp-item .jp-h3 { margin-bottom: calc(37 * var(--s)); }
.jp .entry-content .jp-item p { margin-bottom: calc(19 * var(--s)); }
.jp .entry-content .jp-item p.jp-link { line-height: 1.2; }
.jp .entry-content .jp-item p.jp-link { margin-bottom: 0; }

/* Client logo strip: scrolls left on its own (jp.js doubles the row so it loops). */
.jp-logos { overflow: hidden; height: calc(167 * var(--s)); min-height: 90px; display: flex; align-items: center; margin-bottom: calc(160 * var(--s)); }
.jp-logos .jp-logos-track { display: flex; align-items: center; flex: none; width: max-content; }
.jp-logos.is-running .jp-logos-track { animation: jp-marquee var(--jp-marquee-time, 45s) linear infinite; }
.jp-logos:hover .jp-logos-track, .jp-logos:focus-within .jp-logos-track { animation-play-state: paused; }
.jp-logos figure { flex: none; margin: 0 calc(112 * var(--s)) !important; }
.jp-logos img { display: block; width: auto; max-width: none; }
.jp-logos .jp-l-western img { height: max(62px, calc(126 * var(--s))); }
.jp-logos .jp-l-vichealth img { height: max(60px, calc(123 * var(--s))); }
.jp-logos .jp-l-refuge img { height: max(80px, calc(167 * var(--s))); }
.jp-logos .jp-l-vaada img { height: max(54px, calc(109 * var(--s))); }
.jp-logos .jp-l-odyssey img { height: max(50px, calc(101 * var(--s))); }
@keyframes jp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }
@media (prefers-reduced-motion: reduce) {
	.jp-logos { overflow-x: auto; }
	.jp-logos.is-running .jp-logos-track { animation: none; }
}

/* Testimonials: a row of cards, the active one centred; arrows and swipe move it. */
.jp-clients { padding: calc(11 * var(--s)) 0 0; }
.jp-quotes { position: relative; margin: calc(101 * var(--s)) 0 calc(148 * var(--s)); }
.jp-quotes .jp-quotes-track {
	display: flex; gap: calc(52 * var(--s));
	overflow-x: auto; scroll-snap-type: x mandatory; scroll-behavior: smooth;
	padding-inline: calc(50% - var(--jp-card) / 2);
	scrollbar-width: none;
	--jp-card: max(280px, calc(813 * var(--s)));
}
.jp-quotes .jp-quotes-track::-webkit-scrollbar { display: none; }
.jp .jp-quote {
	flex: none; width: var(--jp-card); min-height: calc(591 * var(--s));
	scroll-snap-align: center;
	background: var(--jp-mist);
	padding: calc(43 * var(--s)) calc(40 * var(--s)) calc(60 * var(--s)) calc(41 * var(--s));
	cursor: pointer;
}
.jp .jp-quote.is-active { cursor: default; }
.jp .jp-quote::before {
	content: ""; display: block; width: max(50px, calc(88 * var(--s))); height: max(39px, calc(69 * var(--s)));
	margin-bottom: calc(151 * var(--s));
	background: var(--jp-coral);
	-webkit-mask: url("img/quote.svg") no-repeat 0 0 / contain; mask: url("img/quote.svg") no-repeat 0 0 / contain;
}
.jp .entry-content .jp-quote .jp-h3 { color: var(--jp-ink); margin-bottom: calc(38 * var(--s)); }
.jp .entry-content .jp-quote p { font-size: var(--fs-quote); line-height: 1.2; padding-left: calc(5 * var(--s)); }
/* The arrows sit in the gap under the cards so the section keeps the design's height. */
.jp-quotes-nav { position: absolute; left: 0; right: 0; top: calc(100% + 24px); display: flex; justify-content: center; gap: 14px; }
.jp-quotes-nav button {
	width: 44px; height: 44px; border-radius: 50%; border: 0; padding: 0; cursor: pointer;
	background: var(--jp-blue); color: var(--jp-ink2); display: inline-flex; align-items: center; justify-content: center;
}
.jp-quotes-nav button:hover { background: var(--jp-ink2); color: #fff; }
.jp-quotes-nav button[disabled] { opacity: 0.35; cursor: default; background: var(--jp-blue); color: var(--jp-ink2); }
.jp-quotes-nav svg { width: 18px; height: 18px; }

/* "Interested in strengthening practice" banner (synced pattern) */
.jp-cta-sec { padding: calc(151 * var(--s)) 0 calc(150 * var(--s)); }
.jp .jp-cta {
	position: relative; isolation: isolate;
	min-height: calc(351 * var(--s));
	display: flex; align-items: center; justify-content: center; gap: calc(94 * var(--s));
	padding: 40px calc(60 * var(--s));
}
/* The design shows the gradient at 39.8% opacity over the page colour (XD group opacity 0.398). */
.jp .jp-cta::before {
	content: ""; position: absolute; inset: 0; z-index: -1;
	background: url("img/cta-gradient.jpg") 50% 91% / 100% auto no-repeat; opacity: 0.398;
}
.jp .entry-content .jp-cta p.jp-cta-text { text-wrap: balance;
}
.jp .entry-content .jp-cta p.jp-cta-text { font-size: var(--fs-h3); line-height: 1.316; font-weight: 500; color: var(--jp-ink); margin: 0; }

/* ---------- Inner page heading bars and heroes ---------- */

.jp-titlebar { padding: calc(82 * var(--s)) 0 calc(147 * var(--s)); }
.jp-titlebar.jp-titlebar--practice { padding-bottom: calc(152 * var(--s)); }

.jp-hero--page { padding: calc(140 * var(--s)) 0 calc(154 * var(--s)); }
.jp-hero--page > .wp-block-column:first-child { padding-top: 0; }
.jp-hero--page > .wp-block-column:last-child { padding-top: calc(12 * var(--s)); }
.jp .entry-content .jp-hero--page .jp-title { margin-bottom: calc(41 * var(--s)); }
.jp-hero--page .jp-hero-img img { height: calc(468 * var(--s)); }
.jp-hero--training { padding-top: calc(136 * var(--s)); }
.jp .entry-content .jp-hero--training .jp-title { margin-bottom: calc(46 * var(--s)); }
.jp-hero--training > .wp-block-column:last-child { padding-top: calc(17 * var(--s)); }

/* Services and training rows: big coral title left, text right */
.jp-row { padding: 0 0 calc(150 * var(--s)); }
.jp-row > .wp-block-column:first-child { padding: calc(37 * var(--s)) calc(60 * var(--s)) 0 calc(43 * var(--s)); }
.jp-row > .wp-block-column:last-child { padding-top: calc(40 * var(--s)); }
.jp .entry-content .jp-row .jp-xl { margin: 0; }
.jp .entry-content .jp-row ul + .jp-link { margin-top: calc(62 * var(--s)); }
.jp .entry-content .jp-row p + .jp-link { margin-top: calc(31 * var(--s)); }
/* Our services: the XD's row spacing is not uniform, so each row follows its own measurements. */
.jp .entry-content #capability > .wp-block-column:last-child { padding-top: calc(35 * var(--s)); }
.jp .entry-content #interim > .wp-block-column:last-child { padding-top: calc(76 * var(--s)); }
.jp .entry-content #capability ul + .jp-link { margin-top: calc(75 * var(--s)); }
.jp .entry-content #facilitation ul + .jp-link { margin-top: calc(42 * var(--s)); }
.jp .entry-content #training ul + .jp-link { margin-top: calc(40 * var(--s)); }
.jp .entry-content #neurodivergent-inclusion ul + .jp-link { margin-top: calc(100 * var(--s)); }
/* Text box widths in the XD: 841px, with 804 / 819px on some rows. */
.jp .entry-content .jp-row > .wp-block-column:last-child > :is(p, ul) { max-width: calc(841 * var(--s)); }
.jp .entry-content .jp-row.jp-w804 > .wp-block-column:last-child > :is(p, ul) { max-width: calc(804 * var(--s)); }
.jp .entry-content .jp-row.jp-w819 > .wp-block-column:last-child > :is(p, ul) { max-width: calc(819 * var(--s)); }

.jp-row--training > .wp-block-column:first-child { padding: calc(46 * var(--s)) calc(80 * var(--s)) 0 calc(7 * var(--s)); }
/* Training text boxes in the XD: left 751px, right 872px (792px on the first row and the intro). */
.jp .entry-content .jp-row--training > .wp-block-column:first-child > :is(p, ul) { max-width: calc(751 * var(--s)); }
/* The XD's 872px boxes run 6px past the column; let them, so lines break where the design breaks them. */
.jp .entry-content .jp-row--training > .wp-block-column:last-child > :is(p, ul) { width: calc(872 * var(--s)); max-width: none; }
.jp .entry-content .jp-row--training :is(p, ul) + :is(.jp-link, .wp-block-buttons) { margin-top: calc(40 * var(--s)); }
.jp .entry-content #training-package :is(p, ul) + :is(.jp-link, .wp-block-buttons) { margin-top: calc(34 * var(--s)); }
.jp .entry-content #leadership-intensive > .wp-block-column:last-child > :is(p, ul) { width: auto; max-width: calc(792 * var(--s)); }
.jp .entry-content .jp-hero--training p { max-width: calc(792 * var(--s)); }
.jp .entry-content .jp-row--training .jp-xl { line-height: 1.13; margin-bottom: calc(47 * var(--s)); }

/* About: people */
.jp-person { padding: calc(42 * var(--s)) 0 calc(154 * var(--s)); }
.jp-person > .wp-block-column:first-child { padding-right: calc(103 * var(--s)); }
.jp-person > .wp-block-column:last-child { margin-top: calc(-6 * var(--s)) !important; }
.jp .jp-photo { aspect-ratio: 763 / 527; width: 100%; background: var(--jp-mist); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.jp .jp-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.jp .entry-content .jp-photo p { font-style: italic; font-size: var(--fs-h2); line-height: 1.2; color: var(--jp-ink2); margin: 0; }
.jp .entry-content .jp-person .jp-xl { line-height: 1.052; margin-bottom: calc(38 * var(--s)); }
.jp .jp-pronoun { font-size: 0.4935em; margin-left: calc(9 * var(--s)); white-space: nowrap; vertical-align: baseline; }
.jp .entry-content .jp-role { font-size: var(--fs-h3); line-height: 1.316; font-weight: 500; color: var(--jp-coral); margin-bottom: calc(42 * var(--s)); }
.jp-person .wp-block-buttons { margin-top: calc(40 * var(--s)); }
/* Heather's row in the XD sits 3px / 6px tighter under the name and role than Lucy's. */
.jp .entry-content #heather-ryan .jp-xl { margin-bottom: calc(35 * var(--s)); }
.jp .entry-content #heather-ryan .jp-role { margin-bottom: calc(36 * var(--s)); }
.jp-person#heather-ryan { padding-bottom: calc(160 * var(--s)); }

.jp-collab { padding: calc(11 * var(--s)) 0 calc(150 * var(--s)); }
.jp-collab > .wp-block-column:last-child { padding-top: calc(16 * var(--s)); }
.jp .entry-content .jp-big { font-size: var(--fs-h3); line-height: 1.316; margin-bottom: calc(47 * var(--s)); }
.jp .entry-content .jp-collab .jp-h3 { line-height: 1.316; margin-bottom: calc(6 * var(--s)); }

/* Our practice: case studies with "read more" */
.jp-case { padding: calc(42 * var(--s)) 0 calc(146 * var(--s)); }
.jp-case > .wp-block-column:first-child { padding-right: calc(152 * var(--s)); }
.jp-case > .wp-block-column:last-child { padding-left: calc(8 * var(--s)); margin-top: calc(-11 * var(--s)) !important; }
.jp-case .jp-case-img img { display: block; width: 100%; aspect-ratio: 714 / 468; object-fit: cover; }
.jp .entry-content .jp-case .jp-h3 { line-height: 1.316; margin-bottom: calc(33 * var(--s)); }
.jp .entry-content .jp-case .jp-meta { margin-bottom: calc(29 * var(--s)); }
/* XD: the first case title has 50px lines, the other two 45.6px. */
.jp .entry-content :is(#odyssey-victoria, #vichealth) .jp-h3 { line-height: 1.2; }
.jp .jp-case .jp-case-logo img { display: block; width: auto; }
.jp .jp-case .jp-case-logo.jp-l-refuge img { height: max(60px, calc(94 * var(--s))); }
.jp .jp-case .jp-case-logo.jp-l-odyssey img { height: max(50px, calc(68 * var(--s))); }
.jp .jp-case .jp-case-logo.jp-l-vichealth img { height: max(48px, calc(75 * var(--s))); }
.jp .jp-nowrap { white-space: nowrap; }
.jp .jp-more { padding-top: calc(34 * var(--s)); }
.jp .jp-more[hidden] { display: none; }
/* Developing and Designing put a lead-in line straight on its list ("…brought together:"); Building keeps a blank line. */
.jp .entry-content :is(#refuge-victoria, #vichealth) .jp-more p:has(+ ul) { margin-bottom: 0; }
/* Designing: the text starts lower, and "How we did it" has a blank line under it. */
.jp #vichealth .jp-more { padding-top: calc(64 * var(--s)); }
.jp .entry-content #vichealth .jp-more h3 + h4 { margin-top: 1.409em; }
/* XD body text boxes are 864px, 6px wider than the column. */
.jp .entry-content .jp-more > :is(p, ul, h3, h4) { width: calc(864 * var(--s)); max-width: none; }
.jp .entry-content .jp-more h3, .jp .entry-content .jp-more h4 { font-size: var(--fs-body); line-height: 1.409; font-weight: 700; color: var(--jp-ink2); margin: 0; }
.jp .entry-content .jp-more h4 { font-style: italic; }
.jp .entry-content .jp-more p.jp-link a { font-style: italic; }
.jp-toggle {
	display: inline-flex; align-items: center; gap: calc(17 * var(--s));
	margin-top: calc(43 * var(--s)); padding: 4px 4px 4px 0; border: 0; background: none; cursor: pointer;
	font-family: var(--jp-sans); font-weight: 700; font-size: var(--fs-toggle); letter-spacing: 0.067em; color: var(--jp-ink2);
	margin-left: calc(-7 * var(--s));
}
.jp-more:not([hidden]) + .jp-toggle { margin-top: calc(48 * var(--s)); }
/* Closed state: the XD puts "read more" at a slightly different distance under each logo. */
#refuge-victoria .jp-more[hidden] + .jp-toggle { margin-top: calc(36 * var(--s)); }
#refuge-victoria .jp-more:not([hidden]) + .jp-toggle { margin-top: calc(36 * var(--s)); }
#odyssey-victoria .jp-more:not([hidden]) + .jp-toggle { margin-top: calc(24 * var(--s)); }
#vichealth .jp-more:not([hidden]) + .jp-toggle { margin-top: calc(4 * var(--s)); }
#odyssey-victoria .jp-more[hidden] + .jp-toggle { margin-top: calc(57 * var(--s)); }
#vichealth .jp-more[hidden] + .jp-toggle { margin-top: calc(47 * var(--s)); }
.jp-toggle-icon {
	width: max(28px, calc(34 * var(--s))); height: max(28px, calc(34 * var(--s))); border-radius: 50%;
	background: var(--jp-blue); display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.jp-toggle-icon svg { width: 42%; height: 42%; }
.jp-toggle:hover .jp-toggle-icon { background: var(--jp-ink2); color: #fff; }
/* GeneratePress colours every button grey on hover; the toggle keeps the page colours. */
.jp .jp-toggle:hover, .jp .jp-toggle:focus { background: none; color: var(--jp-ink2); }

/* Contact */
.jp-contact { padding: calc(43 * var(--s)) 0 calc(148 * var(--s)); }
.jp-contact > .wp-block-column:first-child { padding-right: calc(123 * var(--s)); }
.jp-contact > .wp-block-column:last-child { padding-top: calc(89 * var(--s)); }
.jp .entry-content .jp-contact .jp-h3 { font-weight: 700; margin-bottom: calc(43 * var(--s)); }
.jp .entry-content .jp-contact p.jp-contact-mail { margin: calc(40 * var(--s)) 0 calc(14 * var(--s)); }
.jp .entry-content .jp-contact p.jp-contact-phone, .jp .jp-contact-phone a { color: var(--jp-coral); text-decoration: none; }

.jp .wpcf7 form { margin: 0; }
.jp .jp-form label { display: block; font-size: var(--fs-body); line-height: 1.2; letter-spacing: 0.067em; color: var(--jp-ink2); margin: 0 0 calc(15 * var(--s)); }
.jp .jp-form .jp-field { margin: 0 0 calc(41 * var(--s)); }
.jp .jp-form .wpcf7-form-control-wrap { display: block; position: relative; }
.jp .jp-form input[type="text"], .jp .jp-form input[type="email"], .jp .jp-form textarea {
	display: block; width: 100%; border: 0; border-radius: max(8px, calc(11 * var(--s)));
	background: var(--jp-mist); color: var(--jp-ink2); font-family: var(--jp-sans); font-size: var(--fs-body);
	height: max(46px, calc(53 * var(--s))); padding: 0 max(14px, calc(20 * var(--s)));
}
.jp .jp-form textarea { height: calc(542 * var(--s)); min-height: 200px; padding-top: 14px; padding-bottom: 14px; resize: none; }
.jp .jp-form input:focus, .jp .jp-form textarea:focus { outline: 2px solid var(--jp-blue); outline-offset: 0; background: #d3dae3; }
.jp .jp-form .jp-field--message { margin-bottom: calc(44 * var(--s)); }
.jp .jp-form .wpcf7-submit { margin: 0; padding-left: max(20px, calc(33 * var(--s))); padding-right: max(20px, calc(33 * var(--s))); }
.jp .jp-form .wpcf7-spinner { vertical-align: middle; }
/* Tips sit in the field's bottom margin: if they pushed the button down, it would jump up when a tip clears on blur and swallow the click. */
.jp .wpcf7-not-valid-tip { position: absolute; top: 100%; left: 0; color: #b3261e; font-size: var(--fs-small); line-height: 1.2; margin-top: 3px; }
.jp .wpcf7 form .wpcf7-response-output { margin: 24px 0 0; padding: 12px 16px; border-radius: 8px; font-size: var(--fs-small); }
.jp .jp-hp { position: absolute !important; left: -9999px !important; width: 1px; height: 1px; overflow: hidden; }

/* ---------- Tablet and phone ---------- */

@media (max-width: 899px) {
	.jp .jp-2col { grid-template-columns: 1fr; }
	.jp .jp-2col > .wp-block-column { padding-left: 0 !important; padding-right: 0 !important; margin-top: 0 !important; }

	.jp-hero, .jp-hero--page, .jp-hero--training { padding: 40px 0 56px; }
	.jp-hero > .wp-block-column:first-child, .jp-hero--page > .wp-block-column:first-child { padding-top: 0; }
	.jp-hero > .wp-block-column:last-child { padding-top: 32px !important; }
	.jp .entry-content .jp-hero .jp-h1 { margin-bottom: 24px; }
	.jp .entry-content .jp-hero--page .jp-title { margin-bottom: 20px; }
	.jp-hero .wp-block-buttons { margin-top: 28px; }
	.jp-hero .jp-hero-img img, .jp-hero--page .jp-hero-img img { height: auto; aspect-ratio: 865 / 538; }

	.jp-intro, .jp-partner, .jp-collab, .jp-clients { padding: 32px 0 56px; }
	.jp-clients { padding-bottom: 0; }
	.jp-intro > .wp-block-column:last-child, .jp-partner > .wp-block-column:last-child, .jp-collab > .wp-block-column:last-child { padding-top: 24px !important; }
	.jp-intro .wp-block-buttons { margin-top: 28px; }
	.jp-item { padding: 24px 0 32px; }
	.jp .entry-content .jp-item .jp-h3 { margin-bottom: 12px; }
	.jp .entry-content .jp-item p { margin-bottom: 12px; }

	.jp-logos figure { margin: 0 28px !important; }
	.jp .entry-content .jp-intro > .wp-block-column:last-child p, .jp .entry-content .jp-item p,
	.jp .entry-content :is(.jp-row, .jp-hero--training) > .wp-block-column > :is(p, ul) { max-width: none !important; width: auto !important; }
	.jp .entry-content .jp-title { margin-left: 0 !important; }
	/* Per-row desktop offsets don't apply once the rows stack. */
	.jp .entry-content #heather-ryan .jp-xl { margin-bottom: 10px; }
	.jp .entry-content #heather-ryan .jp-role { margin-bottom: 20px; }
	.jp .entry-content :is(#capability, #interim) > .wp-block-column:last-child { padding-top: 0; }
	.jp .entry-content .jp-cta p.jp-cta-text br { display: none; }
	/* Same slice of the gradient as desktop (27% of the image height, 91% down), stretched to the box. */
	.jp .jp-cta::before { background-size: 100% 370%; background-position: 50% 91%; }
	.jp .jp-form .wpcf7-submit { min-height: 44px; }
	.jp-logos { margin-bottom: 40px; }
	.jp-quotes { margin: 28px 0 112px; }
	.jp-quotes .jp-quotes-track { --jp-card: min(84vw, 420px); gap: 14px; }
	.jp .jp-quote { min-height: 0; padding: 24px 22px 30px; }
	.jp .jp-quote::before { width: 44px; height: 35px; margin-bottom: 40px; }
	.jp .entry-content .jp-quote .jp-h3 { margin-bottom: 14px; }

	.jp-cta-sec { padding: 40px 0 56px; }
	.jp .jp-cta { flex-direction: column; text-align: center; gap: 22px; padding: 44px 24px; min-height: 0; }

	.jp-titlebar, .jp-titlebar.jp-titlebar--practice { padding: 40px 0 36px; }

	.jp-row, .jp-row--training { padding: 32px 0 56px; }
	.jp-row > .wp-block-column:first-child, .jp-row--training > .wp-block-column:first-child { padding: 0 0 20px !important; }
	.jp .entry-content .jp-row--training .jp-xl { margin-bottom: 18px; }
	.jp-row > .wp-block-column:last-child { padding-top: 0; }
	.jp .entry-content .jp-row ul + .jp-link { margin-top: 28px; }

	.jp-person { padding: 32px 0 56px; }
	.jp-person > .wp-block-column:last-child { padding-top: 28px !important; }
	.jp .entry-content .jp-person .jp-xl { margin-bottom: 10px; }
	.jp .jp-pronoun { display: inline-block; margin-left: 8px; }
	.jp .entry-content .jp-role { margin-bottom: 20px; }
	.jp-person .wp-block-buttons { margin-top: 28px; }
	.jp .entry-content .jp-big { margin-bottom: 28px; }

	.jp-case { padding: 32px 0 56px; }
	.jp-case > .wp-block-column:last-child { padding-top: 24px !important; }
	.jp .entry-content .jp-case .jp-h3 { margin-bottom: 16px; }
	.jp .entry-content .jp-case .jp-meta { margin-bottom: 20px; }
	.jp .jp-more { padding-top: 24px; }
	.jp-toggle { margin-top: 24px; gap: 12px; margin-left: 0; min-height: 44px; }
	.jp-more:not([hidden]) + .jp-toggle { margin-top: 28px; }

	.jp-contact { padding: 32px 0 56px; }
	.jp-contact > .wp-block-column:last-child { padding-top: 36px !important; }
	.jp .entry-content .jp-contact .jp-h3 { margin-bottom: 16px; }
	.jp .entry-content .jp-contact p.jp-contact-mail { margin: 24px 0 8px; }
	.jp .jp-form label { margin-bottom: 8px; }
	.jp .jp-form .jp-field { margin-bottom: 22px; }
	.jp .jp-form textarea { height: 220px; }

	.jp .jp-footer { grid-template-columns: 1fr; gap: 24px; padding: 36px 0 40px; }
	.jp .jp-footer .jp-footer-ack p { max-width: none; }
	.jp .jp-footer .jp-flags { margin-top: 20px !important; gap: 14px; }
}

/* Classic-theme group wrappers must not break the grid/flex layouts above. */
.jp .entry-content .wp-block-group__inner-container,
.jp .jp-site-footer .wp-block-group__inner-container { display: contents; }
.jp .entry-content li li::before { content: "-"; }
.jp .entry-content li > ul { margin: 0; }
.jp .jp-more p a, .jp .jp-more li a { color: var(--jp-coral); text-decoration: underline; text-underline-offset: 0.18em; }
.jp .entry-content [id] { scroll-margin-top: 24px; }

/* Phones: the case-study headings' desktop line break leaves a short or single-word line ("sector"). */
@media (max-width: 599px) {
	.jp .entry-content h2.jp-h3 br { display: none; }
	.jp .entry-content h2.jp-h3:has(br) { text-wrap: balance; }
}

/* XD sets the first case's meta box narrower (750) than the other two, so Services wraps at "living / experience". */
@media (min-width: 900px) {
	.jp .entry-content #refuge-victoria .jp-meta { max-width: calc(750 * var(--s)); }
}