/* Line icons (24px grid, 1.5 stroke), used as CSS masks so they take the text colour. */
:root {
	--jr-i-browser: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4.5' width='18' height='15' rx='2'/%3E%3Cpath d='M3 9h18M6 6.75h.5M8.5 6.75h.5'/%3E%3C/svg%3E");
	--jr-i-code: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m8 7-5 5 5 5M16 7l5 5-5 5M13.5 4.5l-3 15'/%3E%3C/svg%3E");
	--jr-i-ai: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='6' width='12' height='12' rx='2'/%3E%3Cpath d='M9 3v3M15 3v3M9 18v3M15 18v3M3 9h3M3 15h3M18 9h3M18 15h3M12 9.25l.8 1.95 1.95.8-1.95.8-.8 1.95-.8-1.95-1.95-.8 1.95-.8z'/%3E%3C/svg%3E");
	--jr-i-api: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='6' cy='6' r='2.5'/%3E%3Ccircle cx='18' cy='6' r='2.5'/%3E%3Ccircle cx='12' cy='18' r='2.5'/%3E%3Cpath d='M8.5 6h7M7.2 8.2l3.6 7.5M16.8 8.2l-3.6 7.5'/%3E%3C/svg%3E");
	--jr-i-server: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3.5' y='4' width='17' height='7' rx='1.5'/%3E%3Crect x='3.5' y='13' width='17' height='7' rx='1.5'/%3E%3Cpath d='M7 7.5h.5M7 16.5h.5M11 7.5h6M11 16.5h6'/%3E%3C/svg%3E");
	--jr-i-support: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Ccircle cx='12' cy='12' r='4'/%3E%3Cpath d='m5.6 5.6 3.6 3.6M14.8 14.8l3.6 3.6M18.4 5.6l-3.6 3.6M9.2 14.8l-3.6 3.6'/%3E%3C/svg%3E");
	--jr-i-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h15M13.5 6l6 6-6 6'/%3E%3C/svg%3E");
	--jr-i-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Ccircle cx='9' cy='10' r='1.75'/%3E%3Cpath d='m3 17 5-5 4 4 3-3 6 6'/%3E%3C/svg%3E");
	--jr-i-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9.5' cy='19.5' r='1.25'/%3E%3Ccircle cx='17' cy='19.5' r='1.25'/%3E%3Cpath d='M2.5 4h2.25l2.2 10.5h11.3L20.5 7H5.6'/%3E%3C/svg%3E");
	--jr-i-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
	--jr-i-plus: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
	/* Added icons (same 24px / 1.5 stroke system). */
	--jr-i-refresh: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M19.5 11A7.5 7.5 0 0 0 6 6.5L4.5 8M4.5 4v4h4M4.5 13A7.5 7.5 0 0 0 18 17.5l1.5-1.5M19.5 20v-4h-4'/%3E%3C/svg%3E");
	--jr-i-landing: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='16' rx='2'/%3E%3Cpath d='M3 8h18M7.5 12h9'/%3E%3Crect x='8.5' y='15' width='7' height='2.5' rx='1'/%3E%3C/svg%3E");
	--jr-i-globe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='9'/%3E%3Cpath d='M3 12h18M12 3c2.4 2.5 3.6 5.5 3.6 9s-1.2 6.5-3.6 9c-2.4-2.5-3.6-5.5-3.6-9S9.6 5.5 12 3z'/%3E%3C/svg%3E");
	--jr-i-currency: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='9' r='5.5'/%3E%3Cpath d='M14.4 10.2a5.5 5.5 0 1 1-4.2 4.2M9 6.5v5M10.6 7.6H8.3a1 1 0 0 0 0 2h1.4a1 1 0 0 1 0 2H7.4'/%3E%3C/svg%3E");
	--jr-i-bulb: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 18h5M10.5 21h3M12 3a6 6 0 0 0-3.6 10.8c.7.5 1.1 1.3 1.1 2.1v.1h5v-.1c0-.8.4-1.6 1.1-2.1A6 6 0 0 0 12 3z'/%3E%3C/svg%3E");
	--jr-i-chart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h16M7 16.5v-4M12 16.5V8M17 16.5V5'/%3E%3C/svg%3E");
	--jr-i-shield: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3 5 6v5.2c0 4.4 2.9 8.2 7 9.8 4.1-1.6 7-5.4 7-9.8V6z'/%3E%3C/svg%3E");
	--jr-i-doc: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v5h5M9 13h6M9 17h6'/%3E%3C/svg%3E");
	--jr-i-pencil: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 20h4L19 9l-4-4L4 16z'/%3E%3Cpath d='m13.5 6.5 4 4'/%3E%3C/svg%3E");
	--jr-i-rocket: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 17.5 6.5 14.5C8 9.6 11.5 5.3 19 3.5c-1.8 7.5-6.1 11-11 12.5'/%3E%3Cpath d='M6.5 14.5 4 15l1.5-3.5 3-.5M9.5 17.5 9 20l3.5-1.5.5-3'/%3E%3Ccircle cx='14.5' cy='9' r='1.5'/%3E%3C/svg%3E");
	--jr-i-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='6.5'/%3E%3Cpath d='m16 16 4.5 4.5'/%3E%3C/svg%3E");
	--jr-i-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 5h16v11H9.5L4 20z'/%3E%3Cpath d='M8 9.5h8M8 12.5h5'/%3E%3C/svg%3E");
	--jr-i-list: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M9.5 6.5h10M9.5 12h10M9.5 17.5h10M5 6.5h.5M5 12h.5M5 17.5h.5'/%3E%3C/svg%3E");
	--jr-i-gear: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='3.25'/%3E%3Cpath d='M12 3v2.5M12 18.5V21M3 12h2.5M18.5 12H21M5.6 5.6l1.8 1.8M16.6 16.6l1.8 1.8M5.6 18.4l1.8-1.8M16.6 7.4l1.8-1.8'/%3E%3C/svg%3E");
	--jr-i-wrench: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 4.5a4.5 4.5 0 0 0-4.3 5.8L4.5 16.5a2.1 2.1 0 0 0 3 3l6.2-6.2A4.5 4.5 0 0 0 19.5 9l-2.8 2.8-2.5-.4-.4-2.5L16.6 6A4.5 4.5 0 0 0 15 4.5z'/%3E%3C/svg%3E");
	--jr-i-people: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='9' cy='8' r='3'/%3E%3Cpath d='M3.5 19a5.5 5.5 0 0 1 11 0M15.5 5.2a3 3 0 0 1 0 5.6M17 13.6a5.5 5.5 0 0 1 3.5 5.4'/%3E%3C/svg%3E");
	--jr-i-devices: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='14' height='10' rx='1.5'/%3E%3Cpath d='M7 17.5h6M10 14v3.5'/%3E%3Crect x='16.5' y='9' width='4.5' height='9' rx='1'/%3E%3C/svg%3E");
}

/* ==========================================================================
   Jennifer Rahhal — theme styles
   Colours, fonts, sizes and spacing come from theme.json (--wp--preset--*).
   ========================================================================== */

/* Metric-matched fallback so text doesn’t jump when Poppins loads (CLS). */
@font-face {
	font-family: "Poppins Fallback";
	src: local("Arial");
	ascent-override: 93.62%;
	descent-override: 31.21%;
	line-gap-override: 8.92%;
	size-adjust: 112.16%;
}

:root {
	--jr-navy: var(--wp--preset--color--navy);
	--jr-navy-raised: var(--wp--preset--color--navy-raised);
	--jr-teal: var(--wp--preset--color--teal);
	--jr-teal-ink: var(--wp--preset--color--teal-ink);
	--jr-line: var(--wp--preset--color--line);
	--jr-radius: 8px;
	--jr-radius-sm: 4px;
	--jr-ease: cubic-bezier(.2, .7, .2, 1);
	--jr-accent: var(--jr-teal-ink); /* teal for text/lines on light backgrounds (contrast) */
	--jr-focus: var(--jr-teal-ink);
	--jr-header-h: 5.25rem;
}

/* Dark sections switch the accent to the brand teal (6:1 on navy). */
.has-navy-background-color,
.has-navy-raised-background-color,
.wp-block-navigation__responsive-container.is-menu-open {
	--jr-accent: var(--jr-teal);
	--jr-focus: var(--jr-teal);
}

html { scroll-behavior: smooth; scroll-padding-top: 1rem; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; }
img { height: auto; }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--jr-focus);
	outline-offset: 3px;
}

.has-navy-background-color :where(h1, h2, h3, h4) { color: var(--wp--preset--color--off-white); }
.has-navy-background-color { --jr-muted: var(--wp--preset--color--slate); }
.has-navy-background-color :where(p:not([class*="-color"])) { color: var(--wp--preset--color--slate); }

/* Skip link (core adds it; make it on-brand). */
.skip-link.screen-reader-text:focus {
	background: var(--wp--preset--color--off-white);
	color: var(--jr-navy);
	font-weight: 500;
	z-index: 100001;
}

/* --------------------------------------------------------------------------
   Block styles
   -------------------------------------------------------------------------- */

/* Eyebrow */
.is-style-jr-eyebrow {
	color: var(--jr-accent);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .2em;
	line-height: 1.5;
	text-transform: uppercase;
	margin-bottom: .75rem !important;
}

/* Heading with short teal rule */
.is-style-jr-accent::after {
	background: var(--jr-teal);
	content: "";
	display: block;
	height: 2px;
	margin-top: 1.1rem;
	width: 2.75rem;
}
.has-text-align-center.is-style-jr-accent::after { margin-inline: auto; }

/* Buttons */
.wp-block-button__link {
	align-items: center;
	display: inline-flex;
	gap: .6em;
	justify-content: center;
	transition: background-color .2s var(--jr-ease), border-color .2s var(--jr-ease), color .2s var(--jr-ease);
}
.is-style-jr-arrow .wp-block-button__link::after,
.is-style-jr-outline-arrow .wp-block-button__link::after {
	background: currentColor;
	content: "";
	flex: none;
	height: 1.05em;
	mask: var(--jr-i-arrow) center / contain no-repeat;
	transition: transform .2s var(--jr-ease);
	width: 1.05em;
}
.is-style-jr-arrow .wp-block-button__link:hover::after,
.is-style-jr-outline-arrow .wp-block-button__link:hover::after { transform: translateX(3px); }

:where(.is-style-outline, .is-style-jr-outline-arrow) > .wp-block-button__link {
	background: transparent;
	border-color: var(--jr-accent);
	color: inherit;
}
:where(.is-style-outline, .is-style-jr-outline-arrow) > .wp-block-button__link:hover {
	background: color-mix(in srgb, var(--jr-teal) 12%, transparent);
	border-color: var(--jr-teal);
}
.has-navy-background-color :where(.is-style-outline, .is-style-jr-outline-arrow) > .wp-block-button__link { color: var(--wp--preset--color--off-white); }
:where(.has-white-background-color, .has-off-white-background-color, .has-mist-background-color) :where(.is-style-outline, .is-style-jr-outline-arrow) > .wp-block-button__link { color: var(--jr-navy); }

/* Button whose page isn’t published yet (local/staging only — removed on production). */
.jr-pending-link > .wp-block-button__link {
	border-style: dashed !important;
	cursor: not-allowed;
	opacity: .7;
}

/* Cards (Services) */
.is-style-jr-card,
[class*="is-style-jr-icon-"] {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	padding: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	position: relative;
	transition: border-color .25s var(--jr-ease), box-shadow .25s var(--jr-ease), transform .25s var(--jr-ease);
}
[class*="is-style-jr-icon-"]::before {
	background: var(--jr-teal-ink);
	content: "";
	display: block;
	height: 2.25rem;
	margin-bottom: 1rem;
	mask: var(--jr-icon) left center / contain no-repeat;
	width: 2.25rem;
}
.is-style-jr-icon-browser { --jr-icon: var(--jr-i-browser); }
.is-style-jr-icon-code { --jr-icon: var(--jr-i-code); }
.is-style-jr-icon-ai { --jr-icon: var(--jr-i-ai); }
.is-style-jr-icon-api { --jr-icon: var(--jr-i-api); }
.is-style-jr-icon-server { --jr-icon: var(--jr-i-server); }
.is-style-jr-icon-support { --jr-icon: var(--jr-i-support); }
.is-style-jr-icon-search { --jr-icon: var(--jr-i-search); }
.is-style-jr-icon-cart { --jr-icon: var(--jr-i-cart); }
/* Generic icon classes: add “jr-ico-NAME” in Advanced → Additional CSS class. */
.jr-ico-refresh { --jr-icon: var(--jr-i-refresh); }
.jr-ico-landing { --jr-icon: var(--jr-i-landing); }
.jr-ico-globe { --jr-icon: var(--jr-i-globe); }
.jr-ico-currency { --jr-icon: var(--jr-i-currency); }
.jr-ico-bulb { --jr-icon: var(--jr-i-bulb); }
.jr-ico-chart { --jr-icon: var(--jr-i-chart); }
.jr-ico-shield { --jr-icon: var(--jr-i-shield); }
.jr-ico-doc { --jr-icon: var(--jr-i-doc); }
.jr-ico-pencil { --jr-icon: var(--jr-i-pencil); }
.jr-ico-rocket { --jr-icon: var(--jr-i-rocket); }
.jr-ico-search { --jr-icon: var(--jr-i-search); }
.jr-ico-chat { --jr-icon: var(--jr-i-chat); }
.jr-ico-list { --jr-icon: var(--jr-i-list); }
.jr-ico-gear { --jr-icon: var(--jr-i-gear); }
.jr-ico-wrench { --jr-icon: var(--jr-i-wrench); }
.jr-ico-people { --jr-icon: var(--jr-i-people); }
.jr-ico-devices { --jr-icon: var(--jr-i-devices); }
.jr-ico-browser { --jr-icon: var(--jr-i-browser); }
.jr-ico-code { --jr-icon: var(--jr-i-code); }
.jr-ico-ai { --jr-icon: var(--jr-i-ai); }
.jr-ico-api { --jr-icon: var(--jr-i-api); }
.jr-ico-server { --jr-icon: var(--jr-i-server); }
.jr-ico-support { --jr-icon: var(--jr-i-support); }
.jr-ico-cart { --jr-icon: var(--jr-i-cart); }
.jr-ico-image { --jr-icon: var(--jr-i-image); }
.jr-ico-check { --jr-icon: var(--jr-i-check); }

body .wp-block-group:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) > * { margin-block: 0; }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) h3 {
	color: var(--jr-navy);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.35;
}
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) p { font-size: .9375rem; line-height: 1.65; }

/* Linked card: whole card is clickable; arrow appears only when there is a real link. */
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) h3 a { color: inherit; text-decoration: none; }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) h3 a::after { content: ""; inset: 0; position: absolute; border-radius: inherit; }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):has(h3 a) { padding-bottom: 3.25rem; }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):has(h3 a)::after {
	background: var(--jr-teal-ink);
	bottom: 1.5rem;
	content: "";
	height: 1.15rem;
	mask: var(--jr-i-arrow) center / contain no-repeat;
	position: absolute;
	right: 1.5rem;
	transition: transform .2s var(--jr-ease);
	width: 1.15rem;
}
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):has(h3 a):hover {
	border-color: color-mix(in srgb, var(--jr-teal) 55%, var(--jr-line));
	box-shadow: 0 12px 32px -18px rgb(21 40 56 / .35);
	transform: translateY(-2px);
}
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):has(h3 a):hover::after { transform: translateX(3px); }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):has(a:focus-visible) { outline: 2px solid var(--jr-focus); outline-offset: 3px; }
:where(.is-style-jr-card, [class*="is-style-jr-icon-"]) h3 a:focus-visible { outline: none; }

/* Dark panel (contact form) */
.is-style-jr-panel {
	background: var(--jr-navy-raised);
	border: 1px solid rgb(165 180 194 / .22);
	border-radius: var(--jr-radius);
	padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
}

/* Step number (Process) */
.is-style-jr-step {
	align-items: center;
	border: 1px solid var(--jr-teal);
	border-radius: 50%;
	color: var(--jr-teal-ink);
	display: inline-flex;
	font-size: var(--wp--preset--font-size--small);
	font-weight: 500;
	height: 3rem;
	justify-content: center;
	line-height: 1;
	margin: 0 0 1.25rem !important;
	width: 3rem;
	background: var(--wp--preset--color--off-white);
	position: relative;
	z-index: 1;
}

/* --------------------------------------------------------------------------
   Header
   -------------------------------------------------------------------------- */
.jr-site-header { position: relative; z-index: 20; }
.jr-header { padding-block: 1.1rem; border-bottom: 1px solid rgb(165 180 194 / .08); }
.jr-header__inner { gap: 1.5rem; }
.jr-header__actions { gap: clamp(1.25rem, 3vw, 2.75rem); }

.jr-brand__link {
	align-items: center;
	color: inherit;
	display: inline-flex;
	gap: .9rem;
	text-decoration: none;
}
.jr-brand__link:hover { text-decoration: none; }
.jr-brand__mark { display: block; flex: none; height: 2.6rem; width: auto; }
.jr-brand__name {
	font-size: .8125rem;
	font-weight: 500;
	letter-spacing: .28em;
	line-height: 1;
	text-transform: uppercase;
	white-space: nowrap;
}
.jr-brand--light .jr-brand__name { color: var(--wp--preset--color--off-white); }
.jr-brand--dark .jr-brand__name { color: var(--jr-navy); }

/* Navigation */
.jr-nav .wp-block-navigation-item__content {
	color: var(--wp--preset--color--off-white);
	padding-block: .35rem;
	position: relative;
	text-decoration: none;
}
.jr-nav .wp-block-navigation-item__content::after {
	background: var(--jr-teal);
	bottom: -.1rem;
	content: "";
	height: 2px;
	left: 0;
	position: absolute;
	right: 0;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform .25s var(--jr-ease);
}
.jr-nav .wp-block-navigation-item__content:hover { text-decoration: none; }
.jr-nav .wp-block-navigation-item__content:hover::after,
.jr-nav .current-menu-item > .wp-block-navigation-item__content::after,
.jr-nav .current-menu-ancestor > .wp-block-navigation-item__content::after,
.jr-nav [aria-current="page"]::after { transform: scaleX(1); }
.jr-nav .wp-block-navigation__container { gap: clamp(1.25rem, 2.4vw, 2.25rem); }

.jr-header__cta .wp-block-button__link { font-size: .875rem; padding: .6rem 1.25rem; }

/* Mobile menu (core overlay) */
.jr-nav .wp-block-navigation__responsive-container-open,
.jr-nav .wp-block-navigation__responsive-container-close {
	color: var(--wp--preset--color--off-white);
	padding: .5rem;
	margin: -.5rem;
}
.jr-nav .wp-block-navigation__responsive-container-open svg,
.jr-nav .wp-block-navigation__responsive-container-close svg { height: 28px; width: 28px; }
.jr-nav .wp-block-navigation__responsive-container.is-menu-open {
	padding: 1.25rem clamp(1rem, 4vw, 2.5rem) 2rem;
}
.jr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 4.5rem;
}
.jr-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container {
	gap: .25rem;
	width: 100%;
}
.jr-nav .is-menu-open .wp-block-navigation-item { width: 100%; }
.jr-nav .is-menu-open .wp-block-navigation-item__content {
	border-bottom: 1px solid rgb(165 180 194 / .18);
	display: block;
	font-size: 1.25rem;
	padding-block: .9rem !important;
	width: 100%;
}
.jr-nav .is-menu-open .wp-block-navigation-item__content::after { display: none; }

@media (max-width: 599px) {
	body .jr-header__cta { display: none; }
	.jr-brand__name { font-size: .75rem; letter-spacing: .22em; }
	.jr-brand__mark { height: 2.3rem; }
}
@media (max-width: 359px) {
	.jr-header .jr-brand__name { display: none; }
}

/* --------------------------------------------------------------------------
   Sections
   -------------------------------------------------------------------------- */
.jr-main { margin-block: 0 !important; }
/* No gaps between header, main and footer. */
body .wp-site-blocks > * { margin-block: 0; }
body .jr-main > .wp-block-post-content > * { margin-block: 0; }
.jr-section { padding-block: var(--wp--preset--spacing--60); }
.jr-section__head { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.25rem); }
body .jr-section__head > * { margin-block: 0; }
.jr-grid { gap: clamp(1rem, .75rem + 1vw, 1.5rem); }

/* Hero */
.jr-hero {
	overflow: hidden;
	padding-block: clamp(3rem, 1.5rem + 6vw, 6.5rem) clamp(3.5rem, 2rem + 6vw, 7rem);
	position: relative;
}
.jr-hero__cols { gap: clamp(2rem, 4vw, 4rem); margin-block: 0; }
body .jr-hero__text > * { margin-block: 0; }
.jr-hero__title { margin-top: .25rem !important; text-wrap: balance; }
mark.has-inline-color { background: transparent; padding: 0; }
.jr-hero__lead {
	color: var(--wp--preset--color--slate) !important;
	line-height: 1.7;
	margin-top: 1.5rem !important;
	max-width: 34rem;
}
.jr-hero__actions { gap: .875rem; margin-top: 2.25rem !important; }

.jr-hero-mark {
	align-items: center;
	aspect-ratio: 1 / .9;
	color: var(--jr-teal);
	display: flex;
	justify-content: center;
	margin-inline: auto;
	max-width: 32rem;
	position: relative;
	width: 100%;
}
.jr-hero-mark__lines {
	height: 130%;
	left: -20%;
	position: absolute;
	top: -15%;
	width: 140%;
	-webkit-mask-image: radial-gradient(closest-side, #000 55%, transparent);
	mask-image: radial-gradient(closest-side, #000 55%, transparent);
}
.jr-hero-mark__dot { filter: drop-shadow(0 0 4px rgb(32 182 170 / .9)); }
.jr-hero-mark__glow {
	background: radial-gradient(closest-side, rgb(32 182 170 / .30), rgb(32 182 170 / .10) 55%, transparent 100%);
	height: 85%;
	left: 50%;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 85%;
}
.jr-hero-mark__logo {
	height: auto;
	position: relative;
	width: 62%;
}
@media (prefers-reduced-motion: no-preference) {
	.jr-hero-mark__dot { animation: jr-pulse 4.5s ease-in-out infinite; animation-delay: calc(var(--jr-i) * -.6s); }
	.jr-hero-mark__glow { animation: jr-breathe 9s ease-in-out infinite; }
}
@keyframes jr-pulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
@keyframes jr-breathe { 0%, 100% { opacity: 1; } 50% { opacity: .75; } }

@media (max-width: 781px) {
	.jr-hero__visual { order: 2; }
	.jr-hero-mark { max-width: 20rem; }
}

/* Selected work */
.jr-projects .wp-block-post-template { gap: clamp(1rem, .75rem + 1vw, 1.5rem); }
.jr-project-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	display: flex;
	flex-direction: column;
	height: 100%;
	overflow: hidden;
	position: relative;
	transition: box-shadow .25s var(--jr-ease), transform .25s var(--jr-ease);
}
body .jr-project-card > * { margin-block: 0; }
.jr-project-card__media { margin: 0; overflow: hidden; }
.jr-project-card__media img { display: block; transition: transform .5s var(--jr-ease); width: 100%; }
/* No image yet: neutral frame instead of an invented visual. */
.jr-project-card:not(:has(.jr-project-card__media img))::before {
	aspect-ratio: 16 / 10;
	background:
		var(--jr-i-image) center / 2.5rem no-repeat,
		linear-gradient(135deg, #dfe5eb, #cfd8e1);
	content: "";
	display: block;
	opacity: .9;
}
.jr-project-card__body {
	padding: 1.1rem 3.25rem 1.25rem 1.25rem;
	position: relative;
}
body .jr-project-card__body > * { margin-block: 0; }
.jr-project-card__title {
	color: var(--jr-navy);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
}
.jr-project-card__title a { color: inherit; text-decoration: none; }
.jr-project-card__title a::after { content: ""; inset: 0; position: absolute; }
.jr-project-card__meta { font-size: .8125rem; margin-top: .3rem !important; }
.jr-project-card__meta a { color: inherit; pointer-events: none; text-decoration: none; }
.jr-project-card__body::after {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.1rem;
	mask: var(--jr-i-arrow) center / contain no-repeat;
	position: absolute;
	right: 1.25rem;
	top: 50%;
	transform: translateY(-50%);
	transition: transform .2s var(--jr-ease);
	width: 1.1rem;
}
.jr-project-card:hover { box-shadow: 0 14px 36px -20px rgb(21 40 56 / .4); transform: translateY(-2px); }
.jr-project-card:hover .jr-project-card__media img { transform: scale(1.025); }
.jr-project-card:hover .jr-project-card__body::after { transform: translate(3px, -50%); }
.jr-project-card:has(a:focus-visible) { outline: 2px solid var(--jr-focus); outline-offset: 3px; }
.jr-project-card a:focus-visible { outline: none; }
.jr-project-card .wp-block-post-title { position: static; }

.jr-placeholder-badge {
	background: #fff4d6;
	border: 1px solid #e6c46b;
	border-radius: 3px;
	color: #5c4400;
	display: inline-block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	line-height: 1.5;
	margin-right: .5rem;
	padding: 0 .4rem;
	text-transform: uppercase;
	vertical-align: .1em;
}

/* About */
.jr-about__cols { gap: clamp(2rem, 1rem + 5vw, 5rem); margin-block: 0; }
body .jr-about__text > * { margin-block: 0; }
body .jr-about__text > * + * { margin-top: 1.25rem; }
body .jr-about__text > .is-style-jr-accent { margin-top: 0; margin-bottom: 1.75rem; }
body .jr-about__text .wp-block-buttons { margin-top: 2rem; }
.jr-about__lead { line-height: 1.6; }
.jr-about .wp-block-image img { border-radius: var(--jr-radius); display: block; }
.jr-portrait { margin: 0; }
.jr-portrait img {
	aspect-ratio: 1;
	border-radius: var(--jr-radius);
	box-shadow: 0 24px 48px -32px rgb(21 40 56 / .45);
	display: block;
	height: auto;
	object-fit: cover;
	width: 100%;
}

.jr-portrait-placeholder {
	aspect-ratio: 1 / 1.05;
	background:
		var(--jr-i-image) center calc(50% - 2.75rem) / 2.75rem no-repeat,
		var(--wp--preset--color--slate);
	border-radius: var(--jr-radius);
	color: var(--jr-navy);
	gap: .25rem;
	padding: 4.5rem 2rem 2rem;
	text-align: center;
}
.jr-portrait-placeholder > * { margin: 0; max-width: 18rem; }
.jr-portrait-placeholder__label { font-weight: 500; }

/* Process */
.jr-steps {
	display: grid !important;
	gap: 2.5rem 2rem;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin-block: 0;
}
.jr-steps > .wp-block-column { position: relative; }
body .jr-steps > .wp-block-column > * { margin-block: 0; }
.jr-steps h3 { margin-bottom: .6rem !important; }
.jr-steps p:not(.is-style-jr-step) { font-size: .9375rem; line-height: 1.65; max-width: 17rem; }
.jr-steps > .wp-block-column:not(:last-child)::before {
	background: var(--jr-line);
	content: "";
	height: 1px;
	left: 3.75rem;
	position: absolute;
	right: -1.25rem;
	top: 1.5rem;
}
@media (max-width: 959px) {
	.jr-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.jr-steps > .wp-block-column:nth-child(2n)::before { display: none; }
}
@media (max-width: 559px) {
	.jr-steps { grid-template-columns: 1fr; gap: 0; }
	.jr-steps > .wp-block-column { padding: 0 0 2rem 4.5rem; }
	.jr-steps > .wp-block-column:last-child { padding-bottom: 0; }
	.jr-steps .is-style-jr-step { left: 0; position: absolute; top: 0; }
	.jr-steps h3 { padding-top: .7rem; }
	.jr-steps > .wp-block-column:not(:last-child)::before,
	.jr-steps > .wp-block-column:nth-child(2n):not(:last-child)::before {
		display: block;
		height: auto;
		left: 1.5rem;
		right: auto;
		top: 3rem;
		bottom: 0;
		width: 1px;
	}
}

/* Contact */
.jr-contact__cols { gap: clamp(2rem, 1rem + 5vw, 5rem); margin-block: 0; }
body .jr-contact__cols .wp-block-column > * { margin-block: 0; }
body .jr-contact__cols .wp-block-column > .is-style-jr-accent { margin-bottom: 1.5rem; }

@media (max-width: 1023px) {
	body .jr-contact__cols { flex-direction: column; align-items: stretch !important; }
	body .jr-contact__cols > .wp-block-column { flex-basis: auto !important; width: 100%; }
}

/* Inquiry form (block from JR Core) */
.jr-inquiry { color: var(--wp--preset--color--off-white); }
.jr-inquiry__grid { gap: 1.1rem 1.25rem; }
.jr-inquiry__field label { color: var(--wp--preset--color--off-white); font-size: .875rem; font-weight: 500; }
.jr-inquiry__req { color: var(--jr-teal); }
.jr-inquiry__optional { color: var(--wp--preset--color--slate); font-weight: 400; }
.jr-inquiry__field input,
.jr-inquiry__field select,
.jr-inquiry__field textarea {
	background-color: var(--jr-navy);
	border: 1px solid rgb(165 180 194 / .45);
	border-radius: var(--jr-radius-sm);
	color: var(--wp--preset--color--off-white);
	font-size: .9375rem;
	line-height: 1.5;
	padding: .75rem .9rem;
	transition: border-color .2s var(--jr-ease), box-shadow .2s var(--jr-ease);
}
.jr-inquiry__field select {
	appearance: none;
	background-image: linear-gradient(45deg, transparent 50%, #a5b4c2 50%), linear-gradient(135deg, #a5b4c2 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) 50%, calc(100% - .8rem) 50%;
	background-repeat: no-repeat;
	background-size: .35rem .35rem;
	cursor: pointer;
	padding-right: 2.5rem;
}
.jr-inquiry__field select:invalid,
.jr-inquiry__field select:has(option[value=""]:checked) { color: #94a3b3; }
.jr-inquiry__field select option { background: var(--jr-navy); color: var(--wp--preset--color--off-white); }
.jr-inquiry__field input::placeholder,
.jr-inquiry__field textarea::placeholder { color: #94a3b3; opacity: 1; }
.jr-inquiry__field input:hover,
.jr-inquiry__field select:hover,
.jr-inquiry__field textarea:hover { border-color: rgb(165 180 194 / .75); }
.jr-inquiry__field input:focus,
.jr-inquiry__field select:focus,
.jr-inquiry__field textarea:focus {
	border-color: var(--jr-teal);
	box-shadow: 0 0 0 3px rgb(32 182 170 / .25);
	outline: none;
}
.jr-inquiry__field [aria-invalid="true"] { border-color: #ff8a80; }
.jr-inquiry__error,
.jr-inquiry__errors { color: #ffb4ab; }
.jr-inquiry__error { font-size: .8125rem; margin: .4rem 0 0; }
.jr-inquiry__errors {
	background: rgb(255 138 128 / .08);
	border: 1px solid rgb(255 138 128 / .5);
	border-radius: var(--jr-radius-sm);
	font-size: .875rem;
	margin-bottom: 1.25rem;
	padding: .9rem 1rem;
}
.jr-inquiry__errors-title { color: #ffb4ab; font-weight: 500; margin: 0; }
.jr-inquiry__errors ul { margin: .4rem 0 0; padding-left: 1.2rem; }
.jr-inquiry__errors a { color: inherit; }
.jr-inquiry__note { color: var(--wp--preset--color--slate); font-size: .75rem; margin: .9rem 0 .75rem; }
.jr-inquiry__submit {
	align-items: center;
	display: inline-flex;
	gap: .6em;
	justify-content: center;
	font-size: .9375rem;
	padding-block: .85rem;
}
.jr-inquiry__submit::after {
	background: currentColor;
	content: "";
	height: 1.05em;
	mask: var(--jr-i-arrow) center / contain no-repeat;
	width: 1.05em;
}
.jr-inquiry__success { padding: 1rem 0; text-align: center; }
.jr-inquiry__success:focus { outline: none; }
.jr-inquiry__success-icon { color: var(--jr-teal); }
.jr-inquiry__success-title { color: var(--wp--preset--color--off-white); font-size: 1.25rem; font-weight: 500; margin: .75rem 0 .25rem; }
.jr-inquiry__success p:last-child { color: var(--wp--preset--color--slate); margin: 0; }

/* --------------------------------------------------------------------------
   Footer
   -------------------------------------------------------------------------- */
.jr-footer { padding-block: 2.5rem; }
.jr-footer__inner {
	border-top: 1px solid rgb(165 180 194 / .18);
	gap: 1.5rem 2rem;
	padding-top: 2.5rem;
}
.jr-footer .jr-brand__mark { height: 2.4rem; }
.jr-footer__nav { font-size: .8125rem; }
.jr-footer__nav .wp-block-navigation-item__content { color: var(--wp--preset--color--off-white); }
.jr-footer__nav .wp-block-navigation__container { gap: 1.75rem; }
.jr-footer__meta { gap: .75rem; }
.jr-copyright { font-size: .8125rem; line-height: 1.6; margin: 0; text-align: right; }
.jr-copyright__suffix { display: block; }
.jr-footer__cookies { font-size: .8125rem; line-height: 1.6; margin: 0; text-align: right; }
.jr-footer__cookies a { color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.jr-footer__cookies a:hover { color: var(--wp--preset--color--off-white); }
.jr-social:empty { display: none; }
/* LinkedIn prominent; other profiles small and understated. */
.jr-social.wp-block-social-links { align-items: center; gap: .85rem !important; }
.jr-social .wp-social-link { opacity: .75; transition: opacity .2s var(--jr-ease), color .2s var(--jr-ease); }
.jr-social .wp-social-link:hover { opacity: 1; }
.jr-social .wp-social-link svg { height: 18px; width: 18px; }
.jr-social .jr-social--primary { color: var(--jr-teal) !important; opacity: 1; }
.jr-social .jr-social--primary svg { height: 24px; width: 24px; }
.jr-linkedin-line { align-items: center; display: inline-flex; gap: .5rem; }
.jr-linkedin-line a { font-weight: 500; }
@media (max-width: 781px) {
	.jr-footer__inner { flex-direction: column; align-items: flex-start !important; }
	.jr-footer__nav .wp-block-navigation__container { gap: .5rem 1.5rem; }
	.jr-footer__meta { align-items: flex-start !important; }
	.jr-copyright, .jr-footer__cookies { text-align: left; }
}

/* Generic inner pages */
.jr-page-head { padding-block: clamp(3rem, 2rem + 4vw, 5rem); }
body .jr-page-head > * { margin-block: 0; }
.jr-page-body { padding-block: var(--wp--preset--spacing--50); }

/* --------------------------------------------------------------------------
   Inner pages (Services and service pages)
   -------------------------------------------------------------------------- */

/* Breadcrumb bar (template) sits flush on top of the page hero. */
.jr-crumbs {
	padding-top: 1.5rem;
	padding-bottom: 0;
}
.jr-crumbs .wp-block-breadcrumbs {
	color: var(--wp--preset--color--slate);
	font-size: .8125rem;
	line-height: 1.5;
}
.jr-crumbs .wp-block-breadcrumbs a { color: var(--wp--preset--color--off-white); text-decoration: none; }
.jr-crumbs .wp-block-breadcrumbs a:hover { color: var(--jr-teal); text-decoration: underline; }
.jr-crumbs + .jr-main .jr-page-hero:first-child,
body .jr-crumbs + .jr-main > .wp-block-post-content > .jr-page-hero:first-child { padding-top: clamp(2rem, 1.25rem + 3vw, 3.75rem); }

.jr-page-hero {
	overflow: hidden;
	padding-block: clamp(2.5rem, 1.5rem + 4vw, 5rem) clamp(3.25rem, 2rem + 5vw, 6rem);
	position: relative;
}
.jr-page-hero::before {
	background: radial-gradient(closest-side, rgb(32 182 170 / .18), transparent);
	content: "";
	height: 38rem;
	pointer-events: none;
	position: absolute;
	right: -12rem;
	top: -14rem;
	width: 38rem;
}
body .jr-page-hero > * { margin-block: 0; position: relative; }
body .jr-page-hero__inner > * { margin-block: 0; }
.jr-page-hero h1 {
	font-size: clamp(2.125rem, 1.5rem + 2.6vw, 3.5rem);
	line-height: 1.12;
	margin-top: .25rem !important;
	max-width: 22ch;
	text-wrap: balance;
}
.jr-page-hero__lead {
	color: var(--wp--preset--color--slate) !important;
	margin-top: 1.25rem !important;
	max-width: 40rem;
}
body .jr-page-hero .wp-block-buttons { gap: .875rem; margin-top: 2rem; }

/* Narrow intro paragraph under a section heading. */
.jr-section__intro { max-width: 46rem; }
body .jr-section__head > .jr-section__intro { margin-top: 1.25rem; }

/* Two-column text section (heading left, content right). */
.jr-split { gap: clamp(1.5rem, 1rem + 4vw, 5rem); margin-block: 0; }
body .jr-split > .wp-block-column > * { margin-block: 0; }
body .jr-split > .wp-block-column > * + * { margin-top: 1rem; }

/* Check list (core/list style). */
.is-style-jr-check { list-style: none; padding-left: 0; }
.is-style-jr-check li {
	padding-left: 2rem;
	position: relative;
}
.is-style-jr-check li + li { margin-top: .6rem; }
.is-style-jr-check li::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.25rem;
	left: 0;
	mask: var(--jr-i-check) center / contain no-repeat;
	position: absolute;
	top: .2rem;
	width: 1.25rem;
}
.has-navy-background-color .is-style-jr-check li::before { background: var(--jr-teal); }

/* "Which service do I need?" table. */
.jr-fit-table { margin: 0; }
.jr-fit-table table { border-collapse: collapse; width: 100%; }
.jr-fit-table th,
.jr-fit-table td {
	border: 0;
	border-bottom: 1px solid var(--jr-line);
	padding: 1.1rem 1rem 1.1rem 0;
	text-align: left;
	vertical-align: top;
}
.jr-fit-table thead th {
	border-bottom: 1px solid var(--jr-navy);
	color: var(--jr-navy);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .14em;
	text-transform: uppercase;
}
.jr-fit-table td:first-child { color: var(--jr-navy); width: 62%; }
.jr-fit-table td a { font-weight: 500; text-decoration: none; }
.jr-fit-table td a:hover { text-decoration: underline; }
@media (max-width: 639px) {
	.jr-fit-table thead { display: none; }
	.jr-fit-table tr { border-bottom: 1px solid var(--jr-line); display: block; padding: 1rem 0; }
	.jr-fit-table td { border: 0; display: block; padding: 0; width: auto !important; }
	.jr-fit-table td + td { margin-top: .35rem; }
}

/* FAQ (core/details). */
.jr-faq { border-top: 1px solid var(--jr-line); }
body .jr-faq > * { margin-block: 0; }
.jr-faq .wp-block-details { border-bottom: 1px solid var(--jr-line); padding: 0; }
.jr-faq .wp-block-details summary {
	color: var(--jr-navy);
	cursor: pointer;
	font-size: var(--wp--preset--font-size--large);
	font-weight: 500;
	line-height: 1.45;
	list-style: none;
	padding: 1.25rem 2.5rem 1.25rem 0;
	position: relative;
}
.jr-faq .wp-block-details summary::-webkit-details-marker { display: none; }
.jr-faq .wp-block-details summary::after {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.25rem;
	mask: var(--jr-i-plus) center / contain no-repeat;
	position: absolute;
	right: .25rem;
	top: 1.45rem;
	transition: transform .2s var(--jr-ease);
	width: 1.25rem;
}
.jr-faq .wp-block-details[open] summary::after { transform: rotate(45deg); }
body .jr-faq .wp-block-details > :not(summary) { margin: 0 0 1.25rem; max-width: 46rem; }

/* ---- Decorative connection lines (page heroes, CTA bands) ---- */
.jr-lines { overflow: hidden; position: relative; }
.jr-lines::after {
	background: url("../img/lines.svg") right center / auto 100% no-repeat;
	bottom: 0;
	content: "";
	opacity: .9;
	pointer-events: none;
	position: absolute;
	right: 0;
	top: 0;
	width: min(52%, 46rem);
	-webkit-mask-image: linear-gradient(to right, transparent, #000 35%);
	mask-image: linear-gradient(to right, transparent, #000 35%);
}
.jr-lines > * { position: relative; z-index: 1; }

/* Page hero with an illustration (service pages). */
.jr-page-hero__cols { align-items: center !important; gap: clamp(2rem, 4vw, 4rem); margin-block: 0; }
body .jr-page-hero__cols > .wp-block-column > * { margin-block: 0; }
.jr-hero-art { margin: 0; }
.jr-hero-art img { aspect-ratio: 480 / 360; display: block; height: auto; margin-left: auto; max-width: 100%; width: 30rem; }
@media (max-width: 781px) {
	.jr-hero-art img { margin: 0 auto; width: min(100%, 22rem); }
}
.jr-hero-meta {
	align-items: center;
	border-top: 2px solid var(--jr-teal);
	color: var(--wp--preset--color--off-white) !important;
	display: inline-flex;
	gap: .65rem;
	margin-top: 2rem !important;
	padding-top: 1.5rem;
}
.jr-hero-meta::before {
	background: var(--jr-teal);
	content: "";
	height: 1.35rem;
	mask: var(--jr-i-globe) center / contain no-repeat;
	width: 1.35rem;
}
.jr-hero-art figcaption {
	color: var(--wp--preset--color--slate);
	font-size: .75rem;
	margin: .5rem 0 0;
	text-align: right;
}
@media (max-width: 781px) { .jr-hero-art figcaption { text-align: center; } }
.jr-section-art { margin: 0; }

/* Wide explanatory diagram (APIs page). */
.jr-diagram { margin: 0; }
.jr-diagram img { aspect-ratio: 900 / 240; display: block; height: auto; width: 100%; }
.jr-diagram figcaption { color: var(--wp--preset--color--ink-muted); font-size: .8125rem; margin-top: .6rem; text-align: center; }

/* Banner: icon + text + button (e.g. “Need hosting too?”). */
.jr-banner {
	align-items: center;
	background: var(--wp--preset--color--mist);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	gap: 1.5rem !important;
	margin-bottom: 0 !important;
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1.5vw, 2.25rem);
}
.jr-banner > .wp-block-column { margin: 0 !important; }
.jr-banner > .wp-block-column:first-child { padding-left: 4.25rem; position: relative; }
.jr-banner > .wp-block-column:first-child::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 2.75rem;
	left: 0;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 2.75rem;
}
body .jr-banner .wp-block-column > * { margin-block: 0; }
.jr-banner h3 { font-size: var(--wp--preset--font-size--large); margin-bottom: .3rem !important; }
.jr-banner p { font-size: .9375rem; }
.jr-banner .wp-block-buttons { justify-content: flex-end; }
@media (max-width: 781px) { .jr-banner .wp-block-buttons { justify-content: flex-start; } }

/* Case study (single project) — mockup layout. */
.jr-case-hero { padding-bottom: clamp(9rem, 6rem + 10vw, 15rem) !important; }
.jr-case-eyebrow span { overflow-wrap: anywhere; }
body .jr-case-hero .jr-case-actions { gap: .875rem; margin-top: 2rem; }
.jr-external .wp-block-button__link::after {
	background: currentColor; content: ""; height: .9em; width: .9em;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 17 17 7M9 7h8v8'/%3E%3C/svg%3E") center / contain no-repeat;
}
.has-navy-background-color .jr-external .wp-block-button__link { border-color: var(--jr-teal); color: var(--wp--preset--color--off-white); }
.jr-case-shot { margin-top: calc(-1 * clamp(7rem, 4.5rem + 9vw, 13rem)); padding-bottom: clamp(2.5rem, 2rem + 2vw, 4rem); position: relative; z-index: 2; }
.jr-browser-frame {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: 10px;
	box-shadow: 0 40px 80px -40px rgb(21 40 56 / .55);
	overflow: hidden;
	padding-top: 2.25rem;
	position: relative;
}
.jr-browser-frame::before {
	background:
		radial-gradient(circle at 1.1rem 50%, #ff6159 .3rem, transparent .32rem),
		radial-gradient(circle at 1.9rem 50%, #ffbd2e .3rem, transparent .32rem),
		radial-gradient(circle at 2.7rem 50%, #28c840 .3rem, transparent .32rem),
		var(--wp--preset--color--mist);
	border-bottom: 1px solid var(--jr-line);
	content: "";
	height: 2.25rem;
	left: 0;
	position: absolute;
	right: 0;
	top: 0;
}
.jr-browser-frame .wp-block-post-featured-image { margin: 0; }
.jr-browser-frame img { display: block; height: auto; width: 100%; }
/* No screenshot yet: neutral frame instead of an invented image. */
.jr-browser-frame:not(:has(img))::after {
	aspect-ratio: 16 / 8;
	background: var(--jr-i-image) center / 3rem no-repeat, linear-gradient(135deg, #e6ebf0, #d6dee6);
	content: "";
	display: block;
	opacity: .9;
}
.jr-case-facts { background: var(--wp--preset--color--mist); border-block: 1px solid var(--jr-line); }
.jr-case-facts__list {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	margin: 0 auto;
	row-gap: 1rem;
	max-width: var(--wp--style--global--wide-size);
	padding: 1.5rem clamp(1rem, 4vw, 2.5rem);
}
.jr-case-facts__item { padding: .5rem 1.5rem .5rem 0; }
.jr-case-facts__item + .jr-case-facts__item { border-left: 1px solid var(--jr-line); padding-left: 1.5rem; }
.jr-case-facts dt { color: var(--jr-navy); font-size: .75rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; }
.jr-case-facts dd { color: var(--wp--preset--color--ink-muted); font-size: .9375rem; margin: .25rem 0 0; }
.jr-case-facts__item--tbc dd { color: #7a5800; font-style: italic; }
@media (max-width: 781px) {
	.jr-case-facts__item + .jr-case-facts__item { border-left: 0; padding-left: 0; }
}
body .jr-case-content > * { margin-block: 0; }
.jr-case-layout { gap: clamp(1.5rem, 1rem + 3vw, 4rem); margin-block: 0; }
body .jr-case-layout > .wp-block-column:last-child > * { margin-block: 0; }
body .jr-case-layout > .wp-block-column:last-child > * + * { margin-top: 1.25rem; }
body .jr-case-layout .wp-block-separator { margin-block: 2.5rem !important; }
.jr-case-toc {
	border-left: 1px solid var(--jr-line);
	list-style: none;
	margin: 0;
	padding: 0;
	position: sticky;
	top: 2rem;
}
.jr-case-toc li { margin: 0; }
.jr-case-toc a {
	border-left: 2px solid transparent;
	color: var(--wp--preset--color--ink-muted);
	display: block;
	font-size: .875rem;
	margin-left: -1px;
	padding: .55rem 1rem;
	text-decoration: none;
	transition: color .2s var(--jr-ease), border-color .2s var(--jr-ease);
}
.jr-case-toc a:hover,
.jr-case-toc a.is-current { border-left-color: var(--jr-teal); color: var(--jr-navy); font-weight: 500; }
@media (max-width: 781px) { .jr-case-toc-col { display: none; } }
.jr-tint.has-mist-background-color { background-color: #e6f5f3 !important; }
.jr-num-rows { display: grid; }
body .jr-num-rows > * { margin: 0; }
.jr-num-row {
	border-bottom: 1px solid rgb(21 40 56 / .12);
	display: grid;
	gap: .15rem 2rem;
	grid-template-columns: 4.5rem 1fr;
	padding: 1.15rem 0;
}
.jr-num-row:last-child { border-bottom: 0; }
body .jr-num-row > * { grid-column: 2; margin: 0; }
body .jr-num-row > .jr-num-row__n {
	color: var(--jr-teal-ink);
	font-size: 2.25rem;
	font-weight: 500;
	grid-column: 1;
	grid-row: 1 / span 2;
	line-height: 1.1;
}
.jr-num-row h3 { font-size: var(--wp--preset--font-size--large); }
.jr-devices { align-items: flex-end !important; gap: clamp(1rem, 2vw, 2rem); margin-block: 0; }
.jr-device { overflow: hidden; position: relative; }
.jr-device--desktop { border: 1px solid var(--jr-line); border-radius: 8px; box-shadow: 0 24px 48px -32px rgb(21 40 56 / .45); padding-top: 1.6rem; }
.jr-device--desktop::before {
	background: radial-gradient(circle at .8rem 50%, #ff6159 .22rem, transparent .24rem), radial-gradient(circle at 1.4rem 50%, #ffbd2e .22rem, transparent .24rem), radial-gradient(circle at 2rem 50%, #28c840 .22rem, transparent .24rem), var(--wp--preset--color--mist);
	content: ""; height: 1.6rem; left: 0; position: absolute; right: 0; top: 0;
}
.jr-device--mobile { border: 3px solid var(--jr-navy); border-radius: 1.4rem; margin-inline: auto; max-width: 14rem; padding: 1.1rem .35rem .35rem; }
.jr-device a { cursor: zoom-in; display: block; }
.jr-device a:focus-visible { outline: 2px solid var(--jr-focus); outline-offset: 2px; }
.jr-device--mobile::before { background: var(--jr-navy); border-radius: 0 0 .5rem .5rem; content: ""; height: .5rem; left: 35%; position: absolute; right: 35%; top: 0; }
body .jr-device > * { margin: 0; }
.jr-device img { border-radius: 4px; display: block; height: auto; width: 100%; }
.jr-device__placeholder {
	align-items: center;
	background: linear-gradient(135deg, #eef2f5, #dde4ea);
	color: var(--wp--preset--color--ink-muted);
	display: flex;
	font-size: .75rem;
	justify-content: center;
	padding: 1rem;
	text-align: center;
}
.jr-device--desktop .jr-device__placeholder { aspect-ratio: 16 / 9; }
.jr-device--mobile .jr-device__placeholder { aspect-ratio: 9 / 18; border-radius: 1rem; }
.jr-device__caption { color: var(--wp--preset--color--ink-muted); font-size: .8125rem; margin-top: .75rem !important; }
.jr-delivered li { border-bottom: 1px solid var(--jr-line); padding-bottom: .7rem; }
.jr-case-pager { border-top: 1px solid var(--jr-line); gap: 1.5rem !important; margin-top: clamp(2.5rem, 2rem + 2vw, 4rem) !important; padding-top: 1.5rem; }
.jr-case-pager .post-navigation-link-previous,
.jr-case-pager .post-navigation-link-next { font-size: .875rem; }
.jr-case-pager a { color: var(--jr-navy); font-weight: 500; text-decoration: none; }
.jr-case-pager a:hover { color: var(--jr-teal-ink); }
.jr-case-services__grid { display: grid; gap: 1rem; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); margin-top: 2rem; }
body .jr-case-services > h2,
body .jr-case-services > p { margin-block: 0; }
body .jr-case-services > p { margin-top: 1.25rem; }

/* Case study (single project). */
.jr-project-type a { color: inherit; pointer-events: none; text-decoration: none; }
.jr-case-study__image { margin-bottom: clamp(2rem, 1.5rem + 2vw, 3.5rem) !important; }
.jr-case-study__image img { border-radius: var(--jr-radius); box-shadow: 0 30px 60px -40px rgb(21 40 56 / .5); }
.jr-case-study .wp-block-post-content h2 { font-size: var(--wp--preset--font-size--x-large); margin-top: 2.5rem; }
.jr-case-study .wp-block-post-content p,
.jr-case-study .wp-block-post-content li { font-size: var(--wp--preset--font-size--large); }
body .jr-case-study__back { margin-top: 3rem; max-width: 760px; margin-inline: auto; }

/* Hosting packages. */
.jr-package { text-align: left; }
.jr-package h3 { font-size: var(--wp--preset--font-size--x-large) !important; }
.jr-package__price { color: var(--jr-navy) !important; font-size: .9375rem !important; }
.jr-package__price strong { font-size: 2.25rem; font-weight: 600; letter-spacing: -.02em; }
.jr-package .is-style-jr-check { font-size: .9375rem; margin-top: .75rem !important; }
.jr-package--featured { border-color: var(--jr-teal) !important; box-shadow: 0 0 0 1px var(--jr-teal) inset; }
.jr-package-notes { color: var(--wp--preset--color--ink-muted); margin-top: 1.5rem !important; padding-left: 1.1rem; }

/* Scope boxes (Maintenance): tinted + plain. */
.jr-scope-box { border-radius: var(--jr-radius); padding: clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem) clamp(1.25rem, 1rem + 1vw, 1.75rem) 4.5rem; position: relative; }
.jr-scope-box::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 2rem;
	left: 1.5rem;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: 1.6rem;
	width: 2rem;
}
body .jr-scope-box > * { margin-block: 0; }
body .jr-scope-box > * + * { margin-top: .6rem; }
.jr-scope-box h3 { font-size: var(--wp--preset--font-size--large); }
.jr-scope-box p { font-size: .9375rem; }
.jr-scope-box--tint { background: #e2f4f2; }
.jr-scope-box--plain { background: var(--wp--preset--color--mist); }

/* Vertical steps: filled number + icon circle + text (Custom Software). */
.jr-vsteps--filled .is-style-jr-step { background: var(--jr-teal); border-color: var(--jr-teal); color: var(--jr-navy); font-weight: 600; }
.jr-vsteps--icons .jr-vstep { min-height: 5rem; padding-left: 10rem; }
.jr-vsteps--icons .jr-vstep:not(:last-child)::after { background: var(--jr-teal); top: 3rem; }
/* Tinted circle behind the step icon; the icon itself is drawn by the heading’s ::before. */
.jr-vsteps--icons .jr-vstep::before {
	background: #e2f4f2;
	border-radius: 50%;
	content: "";
	height: 4.25rem;
	left: 4.5rem;
	position: absolute;
	top: -.5rem;
	width: 4.25rem;
}
.jr-vsteps--icons .jr-vstep > h3::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.8rem;
	left: 5.725rem;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: .725rem;
	width: 1.8rem;
}
@media (max-width: 559px) {
	.jr-vsteps--icons .jr-vstep { padding-left: 4.25rem; }
	.jr-vsteps--icons .jr-vstep::before,
	.jr-vsteps--icons .jr-vstep > h3::before { display: none; }
}

/* Check list items with a bold title line. */
.is-style-jr-check li strong { color: var(--jr-navy); display: block; font-weight: 500; }

/* “Learn more →” line inside a horizontal card. */
.jr-card--row .jr-card-link { padding-top: .5rem; }
.jr-card--row .jr-card-link a { font-size: .875rem; }
.jr-section-art img { aspect-ratio: 440 / 320; display: block; height: auto; margin-inline: auto; max-width: 100%; width: 28rem; }

/* ---- Icon cards using generic icon classes (Card style + “jr-ico-NAME”) ---- */
.is-style-jr-card[class*="jr-ico-"]::before {
	background: var(--jr-teal-ink);
	content: "";
	display: block;
	height: 2.25rem;
	margin-bottom: 1rem;
	mask: var(--jr-icon) left center / contain no-repeat;
	width: 2.25rem;
}
/* Tinted icon circles (Services list, service pages). */
.jr-icon-circles :is(.is-style-jr-card, [class*="is-style-jr-icon-"])[class*="jr-ico-"],
.jr-icon-circles [class*="is-style-jr-icon-"] {
	--jr-pad: clamp(1.5rem, 1.2rem + 1vw, 2rem);
	background-image: radial-gradient(circle 1.75rem at calc(var(--jr-pad) + 1.75rem) calc(var(--jr-pad) + 1.75rem), #e2f4f2 98%, transparent 100%);
	padding: var(--jr-pad);
}
.jr-icon-circles :is(.is-style-jr-card, [class*="is-style-jr-icon-"])::before {
	height: 3.5rem;
	mask-position: center;
	mask-size: 1.9rem;
	width: 3.5rem;
}
/* “Explore … →” link line inside a card. */
.jr-card-link { margin-top: auto !important; padding-top: 1rem; }
.jr-card-link a {
	align-items: center;
	color: var(--jr-teal-ink);
	display: inline-flex;
	font-size: .9375rem;
	font-weight: 500;
	gap: .45rem;
	text-decoration: none;
}
.jr-card-link a::after {
	background: currentColor;
	content: "";
	height: 1.05em;
	mask: var(--jr-i-arrow) center / contain no-repeat;
	transition: transform .2s var(--jr-ease);
	width: 1.05em;
}
.jr-card-link a:hover { text-decoration: underline; }
.jr-card-link a:hover::after { transform: translateX(3px); }

/* Horizontal card (icon left): related services, next steps. */
.jr-card--row.is-style-jr-card[class*="jr-ico-"] {
	display: grid;
	gap: .2rem 1rem;
	grid-template-columns: 2.25rem 1fr;
	padding: 1.35rem 3.25rem 1.35rem 1.35rem;
}
.jr-card--row.is-style-jr-card[class*="jr-ico-"]::before { grid-row: 1 / span 2; margin: 0; }
body .jr-card--row > * { grid-column: 2; margin: 0; }
.jr-card--row h3 { font-size: 1rem !important; }
.jr-card--row p { font-size: .875rem !important; }
.jr-card--row:has(h3 a)::after { bottom: auto !important; right: 1.25rem !important; top: 50%; transform: translateY(-50%); }
.jr-card--row:has(h3 a):hover::after { transform: translate(3px, -50%) !important; }

/* ---- “Not sure where to start?” rows ---- */
.jr-fit-rows { display: grid; gap: 1rem; }
body .jr-fit-rows > * { margin: 0; }
.jr-fit-row {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	gap: 0 !important;
	margin: 0 !important;
	padding: 1.5rem 1.75rem;
}
.jr-fit-row > .wp-block-column { margin: 0 !important; }
.jr-fit-row > .wp-block-column:first-child {
	padding-left: 4.75rem;
	padding-right: 2rem;
	position: relative;
}
.jr-fit-row > .wp-block-column:first-child::before {
	background: #e2f4f2;
	border-radius: 50%;
	content: "";
	height: 3.25rem;
	left: 0;
	position: absolute;
	top: 0;
	width: 3.25rem;
}
.jr-fit-row > .wp-block-column:first-child::after {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.6rem;
	left: .825rem;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: .825rem;
	width: 1.6rem;
}
.jr-fit-row > .wp-block-column:last-child { border-left: 1px solid var(--jr-line); padding-left: 2rem; }
body .jr-fit-row .wp-block-column > * { margin-block: 0; }
.jr-fit-row h3 { font-size: var(--wp--preset--font-size--large); margin-bottom: .35rem !important; }
.jr-fit-row p { font-size: .9375rem; }
.jr-fit-row .jr-fit-row__label {
	color: var(--wp--preset--color--ink-muted);
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .14em;
	margin-bottom: .5rem !important;
	text-transform: uppercase;
}
.jr-fit-row .jr-fit-row__links a { color: var(--jr-teal-ink); font-weight: 500; text-decoration: none; }
.jr-fit-row .jr-fit-row__links a:hover { text-decoration: underline; }
.jr-fit-row .jr-fit-row__links { line-height: 1.9; }
@media (max-width: 781px) {
	.jr-fit-row > .wp-block-column:last-child { border-left: 0; border-top: 1px solid var(--jr-line); margin-top: 1.25rem !important; padding: 1.25rem 0 0 4.75rem; }
}

/* ---- Step variants ---- */
/* Filled number circles. */
.jr-steps--filled .is-style-jr-step { background: var(--jr-teal); border-color: var(--jr-teal); color: var(--jr-navy); font-weight: 600; }
/* Icon steps: the number stays in the HTML for screen readers; an icon is shown instead. */
.jr-step-icon {
	background: #e2f4f2 !important;
	border: 0 !important;
	color: transparent !important;
	font-size: 0 !important;
	height: 4rem !important;
	position: relative;
	width: 4rem !important;
}
.jr-step-icon::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 1.75rem;
	left: 50%;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: 50%;
	transform: translate(-50%, -50%);
	width: 1.75rem;
}
.jr-steps--icons > .wp-block-column:not(:last-child)::before { left: 5rem; top: 2rem; }
.jr-steps--center { text-align: center; }
.jr-steps--center .is-style-jr-step { margin-inline: auto !important; }
.jr-steps--center p:not(.is-style-jr-step) { margin-inline: auto !important; }
.jr-steps--center.jr-steps--icons > .wp-block-column:not(:last-child)::before { left: calc(50% + 2.75rem); right: calc(-50% + 2.75rem - 2rem); }
@media (max-width: 559px) {
	.jr-steps--center { text-align: left; }
	.jr-steps--center .is-style-jr-step { margin-inline: 0 !important; }
	.jr-steps--icons > .wp-block-column { padding-left: 5.25rem !important; }
	.jr-steps--icons > .wp-block-column:not(:last-child)::before,
	.jr-steps--center.jr-steps--icons > .wp-block-column:not(:last-child)::before { left: 2rem !important; right: auto !important; top: 4rem !important; }
}
/* Steps on navy. */
.has-navy-background-color .is-style-jr-step { background: transparent; color: var(--jr-teal); }
.has-navy-background-color .jr-step-icon { background: transparent !important; border: 1px solid var(--jr-teal) !important; }
.has-navy-background-color .jr-step-icon::before { background: var(--jr-teal); }
.has-navy-background-color .jr-steps > .wp-block-column:not(:last-child)::before { background: rgb(32 182 170 / .45); }
.has-navy-background-color .jr-steps h3 { font-size: .875rem; letter-spacing: .08em; text-transform: uppercase; }

/* Vertical numbered steps (Contact, About approach). */
.jr-vsteps { display: grid; gap: 0; }
body .jr-vsteps > * { margin: 0; }
.jr-vstep {
	padding: 0 0 2rem 4.25rem;
	position: relative;
}
.jr-vstep:last-child { padding-bottom: 0; }
.jr-vstep:not(:last-child)::after {
	background: var(--jr-line);
	bottom: .5rem;
	content: "";
	left: 1.5rem;
	position: absolute;
	top: 3.5rem;
	width: 1px;
}
body .jr-vstep > * { margin-block: 0; }
.jr-vstep .is-style-jr-step { left: 0; position: absolute; top: 0; }
.jr-vstep--tinted .is-style-jr-step,
.jr-vsteps--tinted .is-style-jr-step { background: #e2f4f2; border-color: #e2f4f2; color: var(--jr-navy); font-weight: 600; }
.jr-vstep h3 { font-size: var(--wp--preset--font-size--large); margin: .6rem 0 .35rem !important; }

/* ---- FAQ, boxed variant (service pages, Contact) ---- */
.jr-faq--boxed { border-top: 0; display: grid; gap: .75rem; }
.jr-faq--boxed .wp-block-details {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	padding: 0 1.25rem;
}
.jr-faq--boxed .wp-block-details summary { font-size: 1rem; padding-block: 1.1rem; }
.jr-faq--boxed .wp-block-details summary::after { top: 1.2rem; }

/* ---- Feature grid (icon left, 2 × 2) ---- */
.jr-features { gap: 0 !important; }
.jr-features > * {
	border-bottom: 1px solid var(--jr-line);
	margin: 0 !important;
	padding: 1.25rem 0 1.25rem 3.25rem;
	position: relative;
}
.jr-features > *::before {
	background: var(--jr-teal-ink);
	content: "";
	height: 2rem;
	left: 0;
	mask: var(--jr-icon) center / contain no-repeat;
	position: absolute;
	top: 1.35rem;
	width: 2rem;
}
body .jr-features > * > * { margin-block: 0; }
.jr-features h3 { font-size: 1rem; margin-bottom: .25rem !important; }
.jr-features p { font-size: .875rem; }
@media (min-width: 782px) {
	.jr-features > *:nth-child(odd) { border-right: 1px solid var(--jr-line); padding-right: 1.5rem; }
	.jr-features > *:nth-child(even) { padding-left: 4.75rem; }
	.jr-features > *:nth-child(even)::before { left: 1.5rem; }
}

/* ---- Note card (explainer box) ---- */
.jr-note-card {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-left: 3px solid var(--jr-teal);
	border-radius: var(--jr-radius);
	padding: clamp(1.25rem, 1rem + 1vw, 1.75rem);
}
body .jr-note-card > * { margin-block: 0; }
body .jr-note-card > * + * { margin-top: .85rem; }
.jr-note-card h3 { font-size: var(--wp--preset--font-size--large); }
.jr-note-card p,
.jr-note-card li { font-size: .9375rem; }

/* ---- CTA band ---- */
.jr-cta-band {
	overflow: hidden;
	padding-block: clamp(3rem, 2rem + 4vw, 5rem);
	position: relative;
	text-align: center;
}
.jr-cta-band::before,
.jr-cta-band::after {
	background: url("../img/lines.svg") center / auto 100% no-repeat;
	bottom: 0;
	content: "";
	opacity: .7;
	pointer-events: none;
	position: absolute;
	top: 0;
	width: min(30%, 24rem);
}
.jr-cta-band::before { left: 0; transform: scaleX(-1); }
.jr-cta-band::after { right: 0; }
body .jr-cta-band > * { margin-block: 0; position: relative; z-index: 1; }
body .jr-cta-band > * + * { margin-top: 1rem; }
.jr-cta-band h2 { font-size: clamp(1.75rem, 1.4rem + 1.4vw, 2.5rem); }
.jr-cta-band p { margin-inline: auto !important; max-width: 36rem; }
body .jr-cta-band .wp-block-buttons { justify-content: center; margin-top: 1.75rem; }
@media (max-width: 781px) { .jr-cta-band::before, .jr-cta-band::after { opacity: .35; } }

/* Small navy info band with globe. */
.jr-info-band { padding-block: 1.75rem; }
.jr-info-band p {
	align-items: center;
	display: flex;
	gap: .75rem;
	justify-content: center;
	margin: 0;
}
.jr-info-band p::before {
	background: var(--jr-teal);
	content: "";
	height: 1.5rem;
	mask: var(--jr-i-globe) center / contain no-repeat;
	width: 1.5rem;
}

/* ---- About page ---- */
.jr-portrait-caption {
	color: var(--jr-teal-ink);
	font-size: var(--wp--preset--font-size--x-small);
	font-weight: 600;
	letter-spacing: .2em;
	margin-top: 1rem !important;
	text-transform: uppercase;
}
.jr-divided { gap: clamp(2rem, 1rem + 4vw, 4.5rem); margin-block: 0; }
@media (min-width: 782px) {
	.jr-divided > .wp-block-column:first-child { border-right: 1px solid var(--jr-line); padding-right: clamp(2rem, 1rem + 4vw, 4.5rem); }
}
body .jr-divided > .wp-block-column > * { margin-block: 0; }
body .jr-divided > .wp-block-column > * + * { margin-top: 1.25rem; }

/* ---- Light form variant (Contact page) ---- */
.jr-form-light {
	background: var(--wp--preset--color--white);
	border: 1px solid var(--jr-line);
	border-radius: var(--jr-radius);
	box-shadow: 0 18px 40px -30px rgb(21 40 56 / .35);
	padding: clamp(1.25rem, .9rem + 1.6vw, 2.25rem);
}
.jr-form-light .jr-inquiry,
.jr-form-light .jr-inquiry__field label,
.jr-form-light .jr-inquiry__success-title { color: var(--jr-navy); }
.jr-form-light .jr-inquiry__field input,
.jr-form-light .jr-inquiry__field select,
.jr-form-light .jr-inquiry__field textarea {
	background-color: var(--wp--preset--color--white);
	border-color: #c4cdd6;
	color: var(--jr-navy);
}
.jr-form-light .jr-inquiry__field input::placeholder,
.jr-form-light .jr-inquiry__field textarea::placeholder { color: #6b7a89; }
.jr-form-light .jr-inquiry__field select:has(option[value=""]:checked) { color: #6b7a89; }
.jr-form-light .jr-inquiry__field select option { background: var(--wp--preset--color--white); color: var(--jr-navy); }
.jr-form-light .jr-inquiry__field input:hover,
.jr-form-light .jr-inquiry__field select:hover,
.jr-form-light .jr-inquiry__field textarea:hover { border-color: #93a3b3; }
.jr-form-light .jr-inquiry__field input:focus,
.jr-form-light .jr-inquiry__field select:focus,
.jr-form-light .jr-inquiry__field textarea:focus { border-color: var(--jr-teal-ink); box-shadow: 0 0 0 3px rgb(32 182 170 / .2); }
.jr-form-light .jr-inquiry__req { color: var(--jr-teal-ink); }
.jr-form-light .jr-inquiry__optional,
.jr-form-light .jr-inquiry__note,
.jr-form-light .jr-inquiry__privacy,
.jr-form-light .jr-inquiry__success p:last-child { color: var(--wp--preset--color--ink-muted); }
.jr-form-light .jr-inquiry__field [aria-invalid="true"] { border-color: #b3261e; }
.jr-form-light .jr-inquiry__error,
.jr-form-light .jr-inquiry__errors,
.jr-form-light .jr-inquiry__errors-title { color: #b3261e; }
.jr-form-light .jr-inquiry__errors { background: #fdf0ef; border-color: #e6a19c; }
.jr-form-light .jr-inquiry__success-icon { color: var(--jr-teal-ink); }
.jr-inquiry__privacy { color: var(--wp--preset--color--slate); font-size: .8125rem; margin: 1rem 0 0; }
.jr-inquiry__privacy a { color: inherit; text-decoration: underline; }

/* Review notes & draft sections — local/staging only (removed on production by JR Core). */
.jr-draft-item {
	outline: 2px dashed #b8860b !important;
	outline-offset: 3px;
	position: relative;
}
.jr-draft-item::after {
	background: #fff8e1;
	border: 1px solid #b8860b;
	border-radius: 3px;
	color: #5c4400;
	content: "Draft · confirm";
	font-size: .625rem;
	font-weight: 600;
	letter-spacing: .06em;
	padding: .1rem .4rem;
	position: absolute;
	right: .75rem;
	text-transform: uppercase;
	top: .75rem;
}
.is-style-jr-review {
	background: #fff8e1;
	border: 1px dashed #b8860b;
	border-radius: var(--jr-radius-sm);
	color: #3d3000;
	font-size: .875rem;
	line-height: 1.6;
	padding: 1rem 1.15rem;
}
.is-style-jr-review::before {
	color: #7a5800;
	content: "For review · not shown on the live site";
	display: block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .1em;
	margin-bottom: .4rem;
	text-transform: uppercase;
}
body .is-style-jr-review > * { margin-block: 0; color: inherit !important; }
body .is-style-jr-review > * + * { margin-top: .5rem; }
.is-style-jr-review ul { padding-left: 1.1rem; }
.is-style-jr-review :where(h2, h3, h4) { font-size: .9375rem; font-weight: 600; }
.is-style-jr-draft {
	outline: 2px dashed #b8860b;
	outline-offset: -2px;
	position: relative;
}
.is-style-jr-draft::before {
	background: #fff8e1;
	border: 1px solid #b8860b;
	border-radius: 3px;
	color: #5c4400;
	content: "Draft section · proposed copy awaiting your confirmation · not shown on the live site";
	display: block;
	font-size: .6875rem;
	font-weight: 600;
	letter-spacing: .06em;
	margin: 0 auto 1.5rem;
	max-width: var(--wp--style--global--wide-size);
	padding: .35rem .6rem;
	text-transform: uppercase;
	width: fit-content;
}

/* --------------------------------------------------------------------------
   Services dropdown (desktop) — fades and rises in, fades out
   -------------------------------------------------------------------------- */
@media (min-width: 600px) {
	.jr-nav .has-child > .wp-block-navigation__submenu-container {
		background: var(--jr-navy-raised) !important;
		border: 1px solid rgb(165 180 194 / .2) !important;
		border-radius: var(--jr-radius);
		box-shadow: 0 24px 48px -24px rgb(0 0 0 / .55);
		color: var(--wp--preset--color--off-white) !important;
		height: auto !important;
		left: -1.25rem !important;
		min-width: 17rem !important;
		opacity: 0;
		overflow: visible !important;
		padding: .5rem !important;
		top: calc(100% + .6rem) !important;
		transform: translateY(8px);
		transition: opacity .22s var(--jr-ease), transform .22s var(--jr-ease), visibility 0s linear .22s;
		visibility: hidden;
		width: auto !important;
	}
	/* Invisible bridge so the menu doesn’t close while the pointer moves down to it. */
	.jr-nav .has-child > .wp-block-navigation__submenu-container::before {
		content: ""; height: .7rem; left: 0; position: absolute; right: 0; top: -.7rem;
	}
	.jr-nav .has-child:where(:hover, :focus-within) > .wp-block-navigation__submenu-container,
	.jr-nav .has-child > .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
		opacity: 1;
		transform: none;
		transition: opacity .22s var(--jr-ease), transform .22s var(--jr-ease), visibility 0s;
		visibility: visible;
	}
	.jr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		border-radius: var(--jr-radius-sm);
		display: block;
		padding: .6rem .85rem !important;
		transition: background-color .15s var(--jr-ease), color .15s var(--jr-ease);
		white-space: nowrap;
	}
	.jr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content::after { display: none; }
	.jr-nav .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.jr-nav .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background: rgb(32 182 170 / .12);
		color: var(--jr-teal);
	}
	.jr-nav .wp-block-navigation__submenu-icon { margin-left: .3rem; transition: transform .2s var(--jr-ease); }
	.jr-nav .has-child:where(:hover, :focus-within) .wp-block-navigation__submenu-icon { transform: rotate(180deg); }
}
/* Footer menu: top-level links only (services are listed in the header dropdown). */
.jr-footer__nav .wp-block-navigation__submenu-container,
.jr-footer__nav .wp-block-navigation__submenu-icon { display: none !important; }
/* Mobile overlay: services shown as an indented list. */
.jr-nav .is-menu-open .wp-block-navigation__submenu-container { padding: 0 0 .5rem 1rem !important; }
.jr-nav .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content { border-bottom: 0; color: var(--wp--preset--color--slate); font-size: 1rem; padding-block: .5rem !important; }
.jr-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }

/* --------------------------------------------------------------------------
   Footer reveal: the page slides up and uncovers the footer underneath
   -------------------------------------------------------------------------- */
.jr-crumbs,
.jr-main { position: relative; z-index: 1; }
.jr-site-header { position: relative; z-index: 20; }
.jr-main {
	background: var(--wp--preset--color--off-white);
	box-shadow: 0 34px 48px -34px rgb(0 0 0 / .6);
}
.jr-site-footer { bottom: 0; position: sticky; z-index: 0; }
.jr-site-footer .jr-footer__inner {
	opacity: calc(.35 + var(--jr-footer-p, 1) * .65);
	transform: translateY(calc((1 - var(--jr-footer-p, 1)) * -2.5rem));
	will-change: transform;
}

/* --------------------------------------------------------------------------
   Motion: reveal targets (only when JS added .jr-motion; keep list in sync with motion.js)
   -------------------------------------------------------------------------- */
.jr-motion :is(
	.jr-hero__text > *, .jr-hero-mark,
	.jr-page-hero__inner > *, .jr-page-hero__cols > .wp-block-column:first-child > *, .jr-hero-art,
	.jr-section__head > *, .jr-grid > *, .jr-steps > .wp-block-column, .jr-vsteps > *,
	.jr-faq > *, .jr-fit-rows > *, .jr-features > *, .jr-section-art, .jr-diagram,
	.jr-banner, .jr-note-card, .jr-scope-box, .jr-cta-band > *, .jr-about__cols > .wp-block-column,
	.jr-split > .wp-block-column, .jr-contact__cols > .wp-block-column, .jr-divided > .wp-block-column,
	.jr-projects .wp-block-post, .jr-form-light, .jr-info-band
):not(.is-in) { opacity: 0; }
.jr-motion :is(
	.jr-hero__text > *, .jr-hero-mark,
	.jr-page-hero__inner > *, .jr-page-hero__cols > .wp-block-column:first-child > *, .jr-hero-art,
	.jr-section__head > *, .jr-grid > *, .jr-steps > .wp-block-column, .jr-vsteps > *,
	.jr-faq > *, .jr-fit-rows > *, .jr-features > *, .jr-section-art, .jr-diagram,
	.jr-banner, .jr-note-card, .jr-scope-box, .jr-cta-band > *, .jr-about__cols > .wp-block-column,
	.jr-split > .wp-block-column, .jr-contact__cols > .wp-block-column, .jr-divided > .wp-block-column,
	.jr-projects .wp-block-post, .jr-form-light, .jr-info-band
).is-in {
	animation: jr-rise .75s cubic-bezier(.2, .7, .2, 1) backwards;
	animation-delay: calc(var(--jr-i, 0) * 90ms);
}
/* Headings that are likely the largest element on screen stay visible (they only rise),
   so animation never delays the Largest Contentful Paint. */
.jr-motion :is(h1, .jr-about__media):not(.is-in) { opacity: 1 !important; }
.jr-motion :is(h1, .jr-about__media).is-in { animation-name: jr-rise-only !important; }
.jr-motion :is(.jr-hero-mark, .jr-hero-art).is-in { animation-duration: 1.1s !important; animation-name: jr-fade-scale !important; }
@keyframes jr-rise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes jr-rise-only { from { transform: translateY(18px); } to { transform: none; } }
@keyframes jr-fade-scale { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: none; } }

/* Pop-ups and messages: fade in and out. */
/* Mobile overlay only: on desktop the same container holds the regular menu. */
@media (max-width: 599px) {
	.jr-nav .wp-block-navigation__responsive-container {
		transition: opacity .3s var(--jr-ease), display .3s allow-discrete, overlay .3s allow-discrete;
	}
	.jr-nav .wp-block-navigation__responsive-container:not(.is-menu-open) { opacity: 0; }
	.jr-nav .wp-block-navigation__responsive-container.is-menu-open { animation: none; opacity: 1; }
	@starting-style { .jr-nav .wp-block-navigation__responsive-container.is-menu-open { opacity: 0; } }
}
.jr-inquiry__success,
.jr-inquiry__errors { animation: jr-rise .5s cubic-bezier(.2, .7, .2, 1) both; }
/* FAQ answers open and close smoothly where the browser supports it. */
:root { interpolate-size: allow-keywords; }
.jr-faq details::details-content {
	block-size: 0;
	overflow: hidden;
	transition: block-size .35s var(--jr-ease), content-visibility .35s allow-discrete;
}
.jr-faq details[open]::details-content { block-size: auto; }

/* Smooth page-to-page fade (same-site navigations, supporting browsers). */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: .35s; }

/* --------------------------------------------------------------------------
   Motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	@view-transition { navigation: none; }
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
	}
	.jr-project-card:hover,
	:where(.is-style-jr-card, [class*="is-style-jr-icon-"]):hover { transform: none !important; }
}

/* Privacy policy: breathing room before each section heading. */
body.privacy-policy .wp-block-post-content h2.wp-block-heading:not(:first-child) { margin-top: 3rem; }

/* Work page filter. */
.jr-work-filter { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 clamp(1.5rem, 1rem + 1.5vw, 2.25rem); }
.jr-work-filter__item {
	border: 1px solid var(--jr-line);
	border-radius: 999px;
	background: var(--wp--preset--color--white);
	color: var(--wp--preset--color--navy);
	font-size: .875rem;
	font-weight: 500;
	line-height: 1.2;
	padding: .6rem 1.1rem;
	text-decoration: none;
	transition: background-color .2s, border-color .2s, color .2s;
}
.jr-work-filter__item:hover { border-color: var(--wp--preset--color--teal); color: var(--wp--preset--color--teal-ink); }
.jr-work-filter__item:focus-visible { outline: 2px solid var(--wp--preset--color--teal); outline-offset: 2px; }
.jr-work-filter__item.is-current { background: var(--wp--preset--color--navy); border-color: var(--wp--preset--color--navy); color: var(--wp--preset--color--white); }
@media (max-width: 599px) {
	.jr-work-filter { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * clamp(1rem, 4vw, 2.5rem)); padding-inline: clamp(1rem, 4vw, 2.5rem); scrollbar-width: none; }
	.jr-work-filter__item { flex: none; }
}

/* Stacked blocks: no automatic space between them (spacing is set per section/component).
   Kept out of theme.json blockGap so grid and flex layouts still calculate their columns with the real gap. */
html:root :where(.is-layout-flow, .is-layout-constrained) > * { margin-block-start: 0; }