/* ─────────────────────────────────────────────────────────────
   Inverse Paradox × Ollie bridge (hand-written; not generated).
   Makes Ollie / core blocks follow the IP rules where theme.json
   cannot: accent layers, the 30° top-right cut, square forms,
   and flush full-width sections.
   Loaded after ip-site.css. Ollie's own style.css sits in the
   low "ollie" cascade layer (see functions.php), so these
   unlayered rules win without !important.
   ───────────────────────────────────────────────────────────── */

/* Moved to assets/styles/ (0.23.0, loaded with their blocks, right after this file): §6, §32, §45 title band →
   core-post-title.css; §14 Verses pagination → inverse-paradox-posts.css; §16, §18, §26–§28, §33, §35, §38, §43,
   §44, §47 content cards → core-column.css; §40 FAQ mark → core-details.css. */

/* 1. Colour layers. A page accent (template main group) or brand
   accent (.ip-accent-<key>) also retints Ollie's "Brand" slot, so
   Ollie patterns on the WooCommerce page turn Woo purple. The
   header and footer never carry an accent class, so they stay IP red. */
[class*="ip-accent-"] {
	--wp--preset--color--primary: var(--ip-red);
	--wp--preset--color--primary-accent: color-mix(in srgb, var(--ip-red) 10%, #fff);
	--wp--preset--color--red-on-dark: var(--ip-red-on-dark);
	--wp--preset--color--red-press: var(--ip-red-press);
}

/* 2. Core buttons get the IP accent corner: a top-right cut at the honeycomb angle
   (30° from horizontal, --ip-slope = tan 30°; never 45°).
   Outline buttons keep square corners (a clipped border would
   lose its diagonal). The cut is removed while focused so the
   focus ring is never clipped (WCAG 2.4.7 / 2.4.11). */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link,
.wp-element-button:not(.wp-block-button__link) {
	clip-path: polygon(0 0, calc(100% - var(--ip-cut-sm, 0.75rem)) 0, 100% calc(var(--ip-cut-sm, 0.75rem) * var(--ip-slope, 0.57735)), 100% 100%, 0 100%);
	border-radius: 0;
}
.wp-block-button__link:focus-visible,
.wp-element-button:focus-visible {
	clip-path: none;
	outline: 3px solid var(--ip-focus, #ffb000);
	outline-offset: 3px;
}
.wp-block-button.is-style-outline > .wp-block-button__link {
	border-radius: 0;
	border-width: 1px;
}
/* 0.26.1 / 0.27.0 (owner): every red button behaves like the header's "Get in touch": a white fill wipes in from
   the left and the label turns red. A red outline (with its diagonal along the corner cut) keeps the shape on white
   sections; it is red on red until the white arrives. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
	background:
		linear-gradient(to top right, transparent calc(50% - 1.5px), var(--ip-red, #d31020) calc(50% - 1.5px), var(--ip-red, #d31020) 50%, transparent 50%) top right / var(--ip-cut-sm, 0.75rem) calc(var(--ip-cut-sm, 0.75rem) * var(--ip-slope, 0.57735)) no-repeat,
		linear-gradient(90deg, var(--ip-white, #fff) 0 50%, var(--ip-red, #d31020) 50% 100%) 100% 0 / 201% 100% no-repeat;
	box-shadow: inset 0 0 0 1.5px var(--ip-red, #d31020);
	transition: background-position 0.6s var(--ip-ease, ease), color 0.6s var(--ip-ease, ease);
}
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):is(:hover, :focus-visible) {
	background-position: top right, 0 0;
	color: var(--ip-red, #d31020);
}
/* Focused, the button is square (no cut, so the focus ring isn't clipped): no diagonal line. */
.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background):focus-visible {
	background-size: 0 0, 201% 100%;
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
		transition: none;
	}
}
html[data-motion="paused"] .wp-block-button:not(.is-style-outline) > .wp-block-button__link:not(.has-background) {
	transition: none;
}

/* 3. Square form fields and IP focus colour (Ollie ships 5px radius). */
:where(input:not([type="submit"]):not([type="radio"]):not([type="checkbox"]), select, textarea) {
	border-radius: 0;
}
:where(input, select, textarea):focus-visible {
	outline: 3px solid var(--ip-focus, #ffb000);
	outline-offset: 2px;
}

/* 4. Images, embeds and cards stay square even when a pattern
   sets an explicit radius. Logos are images too, and are never cut. */
:where(.wp-block-image, .wp-block-cover, .wp-block-media-text, .wp-block-post-featured-image) img,
.wp-block-cover,
.wp-block-group.has-background {
	border-radius: 0;
}

/* 5. Full-width IP sections sit flush: no block-gap between the
   header, main and footer, or between sections inside main. */
:root :where(.wp-site-blocks) > *,
:root :where(main#main) > * {
	margin-block-start: 0;
}

/* 7. Post content uses the IP prose rhythm; keep Ollie's list indent. */
.ip-prose :where(ul, ol) {
	padding-inline-start: 1.25em;
}

/* 8. Query loop cards: square, IP hover streak colour. */
.ip-post-card {
	border-top: 1px solid var(--wp--preset--color--border-light);
	padding-top: 1.5rem;
}
.ip-post-card .wp-block-post-title a {
	color: var(--ip-text, #121928);
	text-decoration: none;
}
.ip-post-card .wp-block-post-title a:hover,
.ip-post-card .wp-block-post-title a:focus-visible {
	color: var(--ip-red);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.wp-element-button,
	.wp-block-button__link {
		transition: none;
	}
}

/* ─────────────────────────────────────────────────────────────
   9. Headings and links in IP-styled core sections (title bands,
   menu panels, header, footer). WordPress's global heading colour
   is navy; inside .ip-dark they take the section colour. IP blocks
   are excluded: they style themselves.
   ───────────────────────────────────────────────────────────── */
.ip-dark :is(h1, h2, h3, h4, h5, h6):not(.ip-block *) {
	color: inherit;
}
.ip-dark :is(.wp-block-heading, .wp-block-post-title) a:not(.ip-block *) {
	color: inherit;
	text-decoration: none;
}

/* 10. Header: sticky navigation row (core Group + Navigation + Buttons).
   Ollie makes the whole <header> sticky when a sticky row is its direct child, which
   pinned the partner bar too. Dissolve the header box instead, so only the nav row
   sticks and the partner bar scrolls away, as in the reference. */
body:not(.wp-admin) header.wp-block-template-part:has(> .ip-site-nav) {
	display: contents;
}
.ip-site-nav {
	min-height: var(--ip-header-h, 4.5rem);
	z-index: 50;
	gap: var(--wp--preset--spacing--medium);
}
.ip-site-nav .ip-chrome--logo {
	flex: 1 0 0;
}
.ip-site-nav .ip-nav-cta {
	flex: 1 0 0;
	justify-content: flex-end;
}
.ip-main-nav {
	flex: 0 1 auto;
	font-size: 0.9375rem;
	font-weight: 500;
	--ip-nav-fg: var(--ip-text-inv-muted, #ced6df);
}
/* Items: a plain link, or (Menu Designer) a link + a separate toggle button.
   Reference: 16px | label | 6px | 14px plus | 16px. */
.ip-main-nav .wp-block-navigation__container > .wp-block-navigation-item {
	display: flex;
	align-items: center;
}
.ip-main-nav .wp-block-navigation__container > .wp-block-navigation-item > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle) {
	position: relative;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	min-height: 2.75rem;
	padding: 0 1rem;
	color: var(--ip-nav-fg);
	text-decoration: none !important; /* also for the current page (Ollie underlines aria-current) */
	transition: color var(--ip-dur-fast, 200ms) var(--ip-ease, ease);
}
.ip-main-nav .wp-block-navigation__container > .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__link {
	padding-right: 0;
}
.ip-main-nav .wp-block-navigation__container > .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__link + .wp-block-ollie-mega-menu__toggle {
	padding: 0 1rem 0 0.375rem;
}
.ip-main-nav .wp-block-navigation-item:is(:hover, :focus-within) > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle),
.ip-main-nav .wp-block-ollie-mega-menu:has(> [aria-expanded="true"]) > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle) {
	color: var(--ip-white, #fff);
}
/* Red underline under the hovered / open item, as in the reference (inset 1rem each side). */
.ip-main-nav .wp-block-navigation__container > .wp-block-navigation-item > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle:only-of-type)::after {
	content: "";
	position: absolute;
	inset: auto 1rem 0.375rem 1rem;
	height: 2px;
	background: var(--ip-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 500ms var(--ip-ease, ease);
}
.ip-main-nav .wp-block-navigation__container > .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__link::after {
	right: calc(-0.375rem - 0.875rem); /* run under the plus too */
}
.ip-main-nav .wp-block-navigation-item:hover > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle)::after,
.ip-main-nav .wp-block-ollie-mega-menu:has(> [aria-expanded="true"]) > :is(.wp-block-navigation-item__content, .wp-block-ollie-mega-menu__toggle)::after {
	transform: scaleX(1);
}
.ip-main-nav .wp-block-navigation__container > .wp-block-ollie-mega-menu > .wp-block-ollie-mega-menu__link + .wp-block-ollie-mega-menu__toggle::after {
	content: none;
}
/* Panels open flush under the 4.5rem nav row (items are 2.75rem, centred). Menu Designer
   sets "top" inline from its topSpacing setting, hence !important. */
.ip-main-nav .wp-block-ollie-mega-menu__menu-container {
	top: calc(100% + (var(--ip-header-h, 4.5rem) - 2.75rem) / 2) !important;
}
/* Plus icon (lucide "plus", 14px box, 2px stroke at 24 → 1.25px) that turns into a cross.
   Menu Designer sizes the icon with a 0-3-0 selector, so this one is 0-4-0. */
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon {
	width: 0.875rem;
	height: 0.875rem;
	margin: 0;
	background:
		linear-gradient(currentColor, currentColor) center / 58% 1.25px no-repeat,
		linear-gradient(currentColor, currentColor) center / 1.25px 58% no-repeat;
	transition: transform 300ms var(--ip-ease, ease);
}
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle .wp-block-ollie-mega-menu__toggle-icon svg {
	display: none; /* Menu Designer shows its chevron with a 0-3-1 selector */
}
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] .wp-block-ollie-mega-menu__toggle-icon {
	transform: rotate(45deg);
}

/* ── Mobile: a 44px red square (hamburger / close), as in the reference ── */
.ip-main-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close),
.ip-main-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close):has(svg) {
	/* No `display` here: core hides the open button above its 600px breakpoint and shows it
	   as flex below it; overriding display put "Menu" on desktop. */
	align-items: center;
	min-height: 2.75rem;
	padding: 0;
	background: transparent;
	border-radius: 0;
	color: var(--ip-white, #fff);
	font-size: 0.9375rem;
	font-weight: 500;
	line-height: 1;
}
.ip-main-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close) svg {
	display: none;
}
/* No visible "Menu" / "Close" label (owner's call): the red square alone, named by core's aria-label. */
/* The red square: two white lines drawn with gradients. Closed = hamburger (horizontal lines
   4px above/below centre); open = × (lines at ±45°: an × icon, as in the reference header,
   not a design diagonal — those use the 30° honeycomb angle). The Close button (shown in place of the
   Menu button when the overlay opens) animates from the hamburger to the ×. */
@property --ip-burger-a { syntax: "<angle>"; inherits: false; initial-value: 0deg; }
@property --ip-burger-o { syntax: "<length>"; inherits: false; initial-value: 4px; }
@property --ip-burger-s { syntax: "<length>"; inherits: false; initial-value: 16px; }
.ip-main-nav :is(.wp-block-navigation__responsive-container-open, .wp-block-navigation__responsive-container-close)::after {
	content: "";
	display: block;
	width: 2.75rem;
	height: 2.75rem;
	flex: none;
	--ip-burger-a: 0deg;
	--ip-burger-o: 4px;
	--ip-burger-s: 16px;
	background:
		linear-gradient(var(--ip-burger-a), transparent calc(50% + var(--ip-burger-o) - 0.75px), #fff calc(50% + var(--ip-burger-o) - 0.75px), #fff calc(50% + var(--ip-burger-o) + 0.75px), transparent calc(50% + var(--ip-burger-o) + 0.75px)) center / var(--ip-burger-s) var(--ip-burger-s) no-repeat,
		linear-gradient(calc(0deg - var(--ip-burger-a)), transparent calc(50% - var(--ip-burger-o) - 0.75px), #fff calc(50% - var(--ip-burger-o) - 0.75px), #fff calc(50% - var(--ip-burger-o) + 0.75px), transparent calc(50% - var(--ip-burger-o) + 0.75px)) center / var(--ip-burger-s) var(--ip-burger-s) no-repeat,
		var(--ip-red);
}
.ip-main-nav .wp-block-navigation__responsive-container-close::after {
	--ip-burger-a: 45deg;
	--ip-burger-o: 0px;
	--ip-burger-s: 11.5px;
	animation: ip-burger-to-x 350ms var(--ip-ease, ease) both;
}
@keyframes ip-burger-to-x {
	from { --ip-burger-a: 0deg; --ip-burger-o: 4px; --ip-burger-s: 16px; }
	to { --ip-burger-a: 45deg; --ip-burger-o: 0px; --ip-burger-s: 11.5px; }
}
@media (prefers-reduced-motion: reduce) {
	.ip-main-nav .wp-block-navigation__responsive-container-close::after {
		animation: none;
	}
}
html[data-motion="paused"] .ip-main-nav .wp-block-navigation__responsive-container-close::after {
	animation: none;
}
/* The overlay opens below the nav row (--ip-nav-top, assets/js/ip-child.js); the logo and the
   Close button stay where they were. The overlay lives inside the sticky row, so the row is
   lifted above the partner bar while open. */
.ip-site-nav:has(.wp-block-navigation__responsive-container.is-menu-open) {
	z-index: 100;
}
.ip-site-nav .ip-chrome--logo {
	position: relative;
	z-index: 100001;
}
/* `contain: layout` makes the overlay the containing block for the fixed Close button in every
   case (core's fade-in leaves a transform behind, reduced motion does not), and the top padding
   is forced because core and Menu Designer pad the overlay with more specific rules. */
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	top: var(--ip-nav-top, 0px);
	padding: var(--ip-header-h, 4.5rem) 0 0 !important;
	background: var(--ip-ink, #121928);
	contain: layout;
}
/* Open/close like the reference: the overlay is revealed from the top-right corner (clip-path
   polygon growing from 100% 0 to the full box, 0.6s, IP ease) and the rows fade up in a stagger.
   Closing reverses into the corner (assets/js/ip-child.js holds the close until it has played). */
@keyframes ip-menu-reveal {
	from { clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); }
	to { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
}
@keyframes ip-menu-conceal {
	from { clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%); }
	to { clip-path: polygon(100% 0, 100% 0, 100% 0, 100% 0); }
}
@keyframes ip-menu-row {
	from { opacity: 0; transform: translateY(24px); }
	to { opacity: 1; transform: none; }
}
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	animation: ip-menu-reveal 600ms var(--ip-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open.ip-menu-closing {
	animation: ip-menu-conceal 450ms var(--ip-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
.ip-main-nav .is-menu-open .ip-mobile-menu > * {
	animation: ip-menu-row 600ms var(--ip-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
	animation-delay: calc(150ms + var(--ip-row, 0) * 50ms);
}
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(2) { --ip-row: 1; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(3) { --ip-row: 2; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(4) { --ip-row: 3; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(5) { --ip-row: 4; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(6) { --ip-row: 5; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(7) { --ip-row: 6; }
.ip-main-nav .is-menu-open .ip-mobile-menu > :nth-child(n+8) { --ip-row: 7; }
@media (prefers-reduced-motion: reduce) {
	.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open,
	.ip-main-nav .is-menu-open .ip-mobile-menu > * {
		animation: none;
	}
}
html[data-motion="paused"] .ip-main-nav .wp-block-navigation__responsive-container.is-menu-open,
html[data-motion="paused"] .ip-main-nav .is-menu-open .ip-mobile-menu > * {
	animation: none;
}
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
	display: inline-flex; /* core uses display:block above 600px, which collapses the red square */
	position: fixed;
	top: calc((var(--ip-header-h, 4.5rem) - 2.75rem) / 2);
	right: var(--wp--preset--spacing--gutter);
	left: auto;
	z-index: 2;
}
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 0;
}
/* 0.25.0: with sections expanded the menu is taller than the screen. Scroll the menu list itself, below
   the logo row, rather than the whole overlay, so items never slide up behind the logo and Close button. */
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open {
	overflow: hidden !important;
}
.ip-main-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	max-height: calc(100dvh - var(--ip-nav-top, 0px) - var(--ip-header-h, 4.5rem));
	overflow-y: auto;
	overscroll-behavior: contain;
}
.ip-main-nav .wp-block-navigation__responsive-container-open {
	justify-content: flex-end;
}
/* Header "Get in touch" (0.13.1): on hover a white fill wipes in from the left over the red and the
   label turns red (core buttons would turn navy, which disappears in the navy header). */
.ip-site-nav .ip-nav-cta .wp-block-button__link {
	background: linear-gradient(90deg, #fff 0 50%, var(--ip-red, #d31020) 50% 100%) !important;
	background-size: 201% 100% !important;
	background-position: 100% 0 !important;
	transition: background-position 0.6s var(--ip-ease, ease), color 0.6s var(--ip-ease, ease) !important;
}
.ip-site-nav .ip-nav-cta .wp-block-button__link:is(:hover, :focus-visible) {
	background-position: 0 0 !important;
	color: var(--ip-red, #d31020) !important;
}
@media (prefers-reduced-motion: reduce) {
	.ip-site-nav .ip-nav-cta .wp-block-button__link {
		transition: none !important;
	}
}
.ip-nav-cta .wp-block-button__link {
	white-space: nowrap;
	min-height: 2.75rem;
	display: inline-flex;
	align-items: center;
	padding-block: 0;
}
/* Phones and tablets (0.23.3, owner): a red phone square left of the Menu button, a tel: link. Hidden
   from 1024px, where the inline menu and "Get in touch" show. */
.ip-site-nav .ip-nav-phone {
	display: none;
	flex: none;
	place-items: center;
	width: 2.75rem;
	height: 2.75rem;
	margin-right: calc(0.5rem - var(--wp--preset--spacing--medium)); /* 0.5rem from the Menu button */
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}
.ip-site-nav .ip-nav-phone:is(:hover, :focus-visible) {
	background: var(--wp--preset--color--red-press);
}
.ip-site-nav .ip-nav-phone:focus-visible {
	outline: 2px solid var(--wp--preset--color--base);
	outline-offset: 2px;
}
@media (max-width: 1023px) {
	.ip-site-nav .ip-nav-phone {
		display: grid;
	}
}

/* Mobile menu below 1024px (the reference's lg breakpoint) instead of core's 600px: show the
   Menu button and hide the inline menu between 600 and 1023px, where core would show it. */
@media (max-width: 1023px) {
	.ip-site-nav .ip-nav-cta {
		display: none;
	}
	.ip-site-nav .ip-chrome--logo {
		flex: 1 1 auto;
	}
	.ip-main-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.ip-main-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
}

/* Hide the nav row on scroll-down, bring it back on scroll-up (assets/js/ip-child.js toggles
   .ip-nav-hidden). The sticky `top` moves it out of view — no transform, which would trap the
   fixed mobile overlay inside the row. */
.ip-site-nav {
	transition: top 450ms var(--ip-ease, ease), background-color 300ms ease;
}
.ip-site-nav.ip-nav-hidden {
	top: calc(-1 * var(--ip-header-h, 4.5rem) - 2px) !important;
}
/* Our history (0.25.7, owner): on the year slides the nav row stays hidden and only the logo stays,
   fixed exactly where it sits in the stuck row (assets/js/ip-child.js measures --ip-logo-pin-*). */
html.ip-logo-pinned .ip-site-nav .ip-chrome--logo {
	position: fixed;
	top: var(--ip-logo-pin-top, 0px);
	left: var(--ip-logo-pin-left, var(--wp--preset--spacing--gutter));
	flex: none;
	width: auto;
	z-index: 60;
}
html.ip-logo-pinned.ip-logo-pin-fade .ip-site-nav .ip-chrome--logo {
	animation: ip-logo-pin-in 300ms var(--ip-ease, ease) both;
}
@keyframes ip-logo-pin-in {
	from { opacity: 0; }
	to { opacity: 1; }
}
html[data-motion="paused"].ip-logo-pinned .ip-site-nav .ip-chrome--logo {
	animation: none;
}
@media (prefers-reduced-motion: reduce) {
	.ip-site-nav {
		transition: none;
	}
	html.ip-logo-pinned .ip-site-nav .ip-chrome--logo {
		animation: none;
	}
}
html[data-motion="paused"] .ip-site-nav {
	transition: none;
}

/* Arrow after IP-style core buttons ("Get in touch →"). */
.ip-btn-arrow .wp-block-button__link::after {
	content: "";
	width: 1rem;
	height: 1rem;
	margin-left: 0.875rem;
	flex: none;
	background: currentColor;
	-webkit-mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	transition: transform var(--ip-dur-fast, 200ms) var(--ip-ease, ease);
}
.ip-btn-arrow .wp-block-button__link {
	display: inline-flex;
	align-items: center;
}
.ip-btn-arrow .wp-block-button__link:hover::after {
	transform: translateX(3px);
}
:root {
	--ip-icon-arrow-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--ip-icon-arrow-up-right: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M7 7h10v10'/%3E%3Cpath d='M7 17 17 7'/%3E%3C/svg%3E");
	--ip-icon-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'%3E%3Cpath d='M5 12h14'/%3E%3Cpath d='M12 5v14'/%3E%3C/svg%3E");
}

/* Full-width Menu Designer panels are 100vw (scrollbar included): never let them scroll
   the page sideways. `clip` (not `hidden`) keeps position: sticky working. */
body {
	overflow-x: clip;
}

/* 11. Menu Designer panels (template parts mega-*): 12-col grid, 4 + 8 or 4 + 4 + 4. */
.ip-mega {
	border-bottom: 1px solid var(--ip-ink-3, #293545);
}
.ip-mega .wp-block-columns {
	margin: 0;
}
.ip-mega .ip-eyebrow {
	margin: 0 0 1.5rem;
}
.ip-mega .ip-mega-intro {
	color: var(--ip-white, #fff);
	font-weight: 300;
	letter-spacing: -0.015em;
	line-height: 1.15;
	margin: 0 0 2rem;
}
.ip-mega .ip-mega-all {
	margin: 0;
}
.ip-mega .ip-mega-all a {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	min-height: 2.25rem;
	color: var(--ip-white, #fff);
	font-weight: 500;
	text-decoration: none;
}
.ip-mega .ip-mega-all a::after {
	content: "";
	width: 1rem;
	height: 1rem;
	background: currentColor;
	-webkit-mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	transition: transform var(--ip-dur-fast, 200ms) var(--ip-ease, ease);
}
.ip-mega .ip-mega-all a:hover::after {
	transform: translateX(3px);
}
.ip-mega-links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	align-content: start;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	column-gap: 2.5rem;
}
.ip-mega-links--one {
	grid-template-columns: 1fr;
}
.ip-mega-links li {
	margin: 0;
	border-bottom: 1px solid var(--ip-line-inv, rgba(255, 255, 255, 0.12));
}
.ip-mega-links a {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1rem;
	min-height: 3.5rem;
	padding-block: 0.75rem;
	font-size: 1.0625rem;
	color: var(--ip-text-inv-muted, #ced6df);
	text-decoration: none;
	transition: color var(--ip-dur-fast, 200ms) var(--ip-ease, ease), padding-left 500ms var(--ip-ease, ease);
}
.ip-mega-links a:is(:hover, :focus-visible) {
	padding-left: 0.375rem; /* the label nudges 6px right, as in the reference */
}
/* ↗ appears on hover/focus only, sliding in (reference behaviour). */
.ip-mega-links a::after {
	content: "";
	width: 1.125rem;
	height: 1.125rem;
	flex: none;
	background: var(--ip-red-on-dark);
	/* 0.27.5 (owner): a right arrow; up-right means another site. */
	-webkit-mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	mask: var(--ip-icon-arrow-right) center / contain no-repeat;
	opacity: 0;
	transform: translateX(-0.5rem);
	transition: opacity 300ms var(--ip-ease, ease), transform 300ms var(--ip-ease, ease);
}
.ip-mega-links a:is(:hover, :focus-visible) {
	color: var(--ip-white, #fff);
}
.ip-mega-links a:is(:hover, :focus-visible)::after {
	opacity: 1;
	transform: none;
}
/* Open / close like the reference header: the panel wipes down from the nav row (clip-path
   inset + fade, 0.5s, IP ease) and wipes back up on close; the intro rises 12px, the links 10px
   with a 30ms stagger, the featured card 12px. Menu Designer's own 0.1s fade is overridden (its
   open rule is 0-4-0, these are 0-5-0); visibility waits for the close wipe to finish. */
@keyframes ip-mega-rise {
	from { opacity: 0; transform: translateY(var(--ip-rise, 12px)); }
	to { opacity: 1; transform: none; }
}
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container {
	transition: opacity 500ms var(--ip-ease, ease), visibility 0s linear 500ms;
}
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container {
	transition: opacity 500ms var(--ip-ease, ease), visibility 0s linear 0s;
}
.ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega {
	clip-path: inset(0 0 100% 0);
	transition: clip-path 500ms var(--ip-ease, ease);
}
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega {
	clip-path: inset(0 0 0 0);
}
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega .wp-block-column:first-child,
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega :is(.ip-chrome--feature-work, .ip-chrome--feature-company) {
	--ip-rise: 12px;
	animation: ip-mega-rise 500ms var(--ip-ease, ease) both;
}
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega-links li {
	--ip-rise: 10px;
	animation: ip-mega-rise 450ms var(--ip-ease, ease) both;
	animation-delay: calc(var(--ip-i, 0) * 30ms);
}
.ip-mega-links li:nth-child(2) { --ip-i: 1; }
.ip-mega-links li:nth-child(3) { --ip-i: 2; }
.ip-mega-links li:nth-child(4) { --ip-i: 3; }
.ip-mega-links li:nth-child(5) { --ip-i: 4; }
.ip-mega-links li:nth-child(6) { --ip-i: 5; }
.ip-mega-links li:nth-child(7) { --ip-i: 6; }
.ip-mega-links li:nth-child(8) { --ip-i: 7; }
.ip-mega-links li:nth-child(9) { --ip-i: 8; }
.ip-mega-links li:nth-child(n+10) { --ip-i: 9; }
@media (prefers-reduced-motion: reduce) {
	.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
	.ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega {
		transition: none;
	}
	.ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega,
	.ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega * {
		animation: none !important;
	}
}
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega {
	transition: none;
}
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega,
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega * {
	animation: none !important;
}

/* Featured card (inverse-paradox/chrome feature-*) fills its column. */
.ip-mega .ip-chrome--feature-work,
.ip-mega .ip-chrome--feature-company {
	height: 100%;
}
.ip-mega .ip-chrome--feature-work > a,
.ip-mega .ip-chrome--feature-company > a {
	height: 100%;
}

/* Mobile menu (template part ip-mobile-menu). */
.ip-mobile-menu {
	min-height: 100%;
}
.ip-mobile-section,
.ip-mobile-menu .wp-block-details.ip-mobile-section {
	border-top: 0;
	border-bottom: 1px solid var(--ip-line-inv, rgba(255, 255, 255, 0.12));
	padding-block: 0;
	margin-block-start: 0;
}
.ip-mobile-section summary {
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding-block: 1rem;
	font-size: clamp(2rem, 9vw, 2.75rem);
	font-weight: 300;
	letter-spacing: -0.02em;
	line-height: 1.15;
	color: var(--ip-white, #fff);
	cursor: pointer;
	list-style: none;
}
.ip-mobile-section summary::-webkit-details-marker {
	display: none;
}
.ip-mobile-section summary::after {
	content: "";
	width: 1.5rem;
	height: 1.5rem;
	flex: none;
	background: var(--ip-red-on-dark);
	-webkit-mask: var(--ip-icon-plus) center / contain no-repeat;
	mask: var(--ip-icon-plus) center / contain no-repeat;
	transition: transform 300ms var(--ip-ease, ease);
}
.ip-mobile-section[open] summary::after {
	transform: rotate(45deg);
}
.ip-mobile-links {
	list-style: none;
	margin: 0 0 1rem;
	padding: 0;
}
.ip-mobile-links li {
	margin: 0;
}
.ip-mobile-links a {
	display: flex;
	min-height: 2.75rem;
	align-items: center;
	padding-block: 0.5rem;
	color: var(--ip-text-inv-muted, #ced6df);
	text-decoration: none;
	font-size: 1.0625rem;
}
.ip-mobile-links .ip-mobile-all a {
	color: var(--ip-white, #fff);
	font-weight: 500;
}
.ip-mobile-links .ip-mobile-all a::after {
	content: " →";
	white-space: pre;
}
.ip-mobile-links a:is(:hover, :focus-visible) {
	color: var(--ip-white, #fff);
}
.ip-mobile-cta .wp-block-button__link {
	width: 100%;
	justify-content: space-between;
	min-height: 3.25rem;
	padding: 0 1.5rem;
}
.ip-mobile-contact {
	margin: 1.5rem 0 0;
}
.ip-mobile-contact + .ip-mobile-contact {
	margin-top: 0.5rem;
}
.ip-mobile-contact a {
	display: inline-flex;
	min-height: 2.75rem;
	align-items: center;
	color: var(--ip-white, #fff);
	font-weight: 500;
	text-decoration: none;
}

/* 12. Footer (core Group + Navigation, IP brand column). */
.ip-site-footer .ip-footer-heading {
	color: var(--ip-white, #fff);
	font-size: 0.8125rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	line-height: 1.5;
	text-transform: uppercase;
	margin: 0;
}
.ip-footer-nav .wp-block-navigation-item__content {
	text-decoration: none !important;
	display: inline-flex;
	align-items: center;
	min-height: 2.25rem;
	color: var(--ip-text-inv-muted, #ced6df);
	font-size: 0.9375rem;
	line-height: 1.25; /* 0.23.3 (owner): links that wrap to two lines sit closer together */
	padding-block: 0.25rem;
	text-decoration: none;
	transition: color var(--ip-dur-fast, 200ms) var(--ip-ease, ease);
}
.ip-footer-nav .wp-block-navigation-item__content:is(:hover, :focus-visible) {
	color: var(--ip-white, #fff);
}
/* 0.27.4 (owner): the legal links (Sitemap, Accessibility, Terms, Privacy) and "Top" underline on hover; the
   footer links' "none !important" above would otherwise win. */
.ip-footer-legal .wp-block-navigation-item__content:is(:hover, :focus-visible),
.ip-site-footer .ip-footer-top:is(:hover, :focus-visible) {
	text-decoration: underline !important;
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}
.ip-footer-bottom {
	color: var(--ip-text-inv-muted, #ced6df);
	font-size: 0.875rem;
}
.ip-footer-bottom p {
	margin: 0;
}
.ip-footer-legal .wp-block-navigation-item__content {
	font-size: 0.875rem;
}

/* 13. Contact form (Gravity Forms "Contact request", inc/forms.php), styled as the reference
   quote form: 2-column grid, IP inputs (.ip-input values), red asterisk, IP button. The
   repeated .gform_wrapper raises specificity above Gravity Forms' own theme rules. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper {
	margin: 0;
	color: inherit;
	font: inherit;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_fields {
	display: grid;
	grid-template-columns: repeat(12, minmax(0, 1fr));
	gap: 1.5rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield {
	grid-column: span 12;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 0.5rem;
}
@media (min-width: 640px) {
	.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield--width-half {
		grid-column: span 6;
	}
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield_label,
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield_label_before_complex {
	font-size: 0.875rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
	padding: 0;
	color: inherit;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield_required {
	color: var(--ip-red);
	margin-left: 0.125rem;
	font-weight: 500;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper :is(input[type="text"], input[type="tel"], input[type="email"], input[type="url"], input[type="number"], select, textarea) {
	background: var(--ip-white, #fff);
	width: 100%;
	min-height: 3.25rem;
	color: var(--ip-text, #121928);
	font: inherit;
	font-size: 1rem;
	line-height: 1.5;
	border: 1px solid #8a94a3;
	border-radius: 0;
	padding: 0.75rem 1rem;
	box-shadow: none;
	transition: border-color var(--ip-dur-fast, 200ms), box-shadow var(--ip-dur-fast, 200ms);
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper :is(input, select, textarea)::placeholder {
	color: #6b7482;
	opacity: 1;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper :is(input, select, textarea):hover {
	border-color: var(--ip-ink, #121928);
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper :is(input, select, textarea):focus-visible {
	border-color: var(--ip-ink, #121928);
	box-shadow: 0 0 0 3px var(--ip-ink, #121928);
	outline: none;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper select {
	appearance: none;
	-webkit-appearance: none;
	padding-right: 2.75rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--ip-ink, #121928) 50%), linear-gradient(135deg, var(--ip-ink, #121928) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 50%, calc(100% - 0.9rem) 50%;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	background-repeat: no-repeat;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper textarea {
	min-height: 9rem;
	resize: vertical;
}
/* One dashed drop area (Gravity Forms wraps it in a container; only the area is outlined). */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .ginput_container_fileupload {
	border: 0;
	background: none;
	padding: 0;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_fileupload_multifile .gform_drop_area {
	border: 1px dashed #8a94a3;
	border-radius: 0;
	background: var(--ip-grey-1, #f3f5f7);
	padding: 1.25rem;
	color: var(--ip-text-muted, #4a5565);
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_button_select_files {
	background: var(--ip-ink, #121928);
	color: #fff;
	border: 0;
	border-radius: 0;
	padding: 0.5rem 1rem;
	font: inherit;
	font-size: 0.875rem;
	cursor: pointer;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield_description,
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_fileupload_rules {
	font-size: 0.8125rem;
	color: var(--ip-text-muted, #4a5565);
	padding: 0;
	margin: 0;
}
/* Errors: red border and message under the field; the summary keeps square corners. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gfield_error :is(input, select, textarea) {
	border-color: var(--ip-red);
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .validation_message {
	color: var(--ip-red);
	font-size: 0.875rem;
	background: none;
	border: 0;
	padding: 0;
	margin: 0;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_errors {
	border-radius: 0;
	border: 1px solid var(--ip-red);
	background: color-mix(in srgb, var(--ip-red) 6%, #fff);
	box-shadow: none;
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_errors h2 {
	display: flex;
	align-items: center;
	gap: 0.625rem;
	color: var(--ip-red);
	font-size: 1rem;
	font-weight: 500;
	line-height: 1.4;
	margin: 0;
}
/* 0.26.0 (owner): Gravity Forms places its "!" icon absolutely, 12px in from the box edge, which landed on
   the text with our padding. It sits in line before the message instead. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_errors h2 .gform-icon {
	position: static;
	flex: none;
	height: auto;
	font-size: 1.375rem;
	line-height: 1;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_footer {
	margin: 1.5rem 0 0;
	padding: 0;
}
/* 0.26.0 (owner): the submit button is a <button>, which kept the browser's 2px outset border; IP buttons have none. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_footer .ip-btn {
	border: 0;
	box-shadow: none;
}
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_ajax_spinner {
	margin-left: 1rem;
}
/* The intro sentence already explains the asterisk; Gravity Forms' own legend repeats it. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_required_legend {
	display: none;
}
/* Honeypot stays hidden. */
.ip-gf-host .gform_wrapper.gform_wrapper.gform_wrapper .gform_validation_container {
	display: none;
}
/* Confirmation ("Thanks, we've got it.") */
.ip-gf-host .ip-gf-thanks {
	padding: 2rem;
}
.ip-gf-host .ip-gf-thanks .ip-h3 {
	font-weight: 400;
	margin: 0 0 0.5rem;
}
.ip-gf-host .ip-gf-thanks .ip-muted {
	margin: 0;
}
/* Editor placeholder. */
.ip-gf-placeholder {
	border: 1px dashed #8a94a3;
	background: var(--ip-grey-1, #f3f5f7);
	padding: 2rem;
	font-size: 0.9375rem;
	color: var(--ip-text, #121928);
}

/* 15. Content sections built from core blocks (rebuilt pages and the service, platform,
   project and job singles): <section class="wp-block-group ip-section ip-light|ip-grey|ip-dark">.
   Every rule is scoped to .wp-block-group so it never reaches the IP blocks' own sections
   (they share the ip-section / surface classes). */
/* 0.26.1 (owner): 24px from eyebrow to heading, the same as the IP blocks' section heads and page heroes. */
.ip-section.wp-block-group .ip-eyebrow + .wp-block-heading {
	margin-block-start: 1.5rem;
}
.ip-section.wp-block-group > h2.wp-block-heading {
	margin-block-end: 0.5rem;
}
.ip-section.wp-block-group :where(p:not(.ip-eyebrow), li) {
	font-size: 1.0625rem;
	line-height: 1.7;
}
.ip-section.wp-block-group.ip-light p:not(.ip-eyebrow),
.ip-section.wp-block-group.ip-grey p:not(.ip-eyebrow) {
	color: var(--ip-text-muted, #4a5565);
}
.ip-section.wp-block-group.ip-dark p:not(.ip-eyebrow),
.ip-section.wp-block-group.ip-dark li {
	color: var(--ip-text-inv-muted, #ced6df);
}
.ip-section.wp-block-group h3.wp-block-heading {
	font-size: clamp(1.25rem, 1vw + 1rem, 1.625rem);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.25;
}
.ip-section.wp-block-group a:not(.wp-element-button) {
	color: var(--ip-red);
	text-underline-offset: 3px;
}
.ip-section.wp-block-group.ip-dark a:not(.wp-element-button) {
	color: var(--ip-red-on-dark);
}
/* 0.26.0 (owner): links in running text get a hover: a darker red (white on navy) and a heavier underline. */
.ip-section.wp-block-group :is(p, li, td, dd, figcaption) a:not(.wp-element-button, .ip-btn) {
	text-decoration-line: underline;
	text-decoration-thickness: 1px;
	transition: color var(--ip-dur-fast, 200ms), text-decoration-thickness var(--ip-dur-fast, 200ms);
}
.ip-section.wp-block-group :is(p, li, td, dd, figcaption) a:not(.wp-element-button, .ip-btn):is(:hover, :focus-visible) {
	color: var(--ip-red-press);
	text-decoration-thickness: 2px;
}
.ip-section.wp-block-group.ip-dark :is(p, li, td, dd, figcaption) a:not(.wp-element-button, .ip-btn):is(:hover, :focus-visible) {
	color: var(--ip-white, #fff);
}
.ip-section.wp-block-group .wp-block-list {
	padding-inline-start: 1.25em;
}
.ip-section.wp-block-group .wp-block-list li + li {
	margin-top: 0.5rem;
}
.ip-section.wp-block-group .wp-block-list li::marker {
	color: var(--ip-red);
}
.ip-section.wp-block-group .wp-block-columns {
	gap: clamp(1.5rem, 3vw, 2.5rem);
	margin-block: 1.5rem 0;
}
.ip-section.wp-block-group .wp-block-image.ip-cut {
	margin-block: 1rem;
}
/* FAQ: core/details as the IP accordion (rules between rows, red plus that turns). */
.ip-section.wp-block-group .wp-block-details {
	border-top: 1px solid var(--ip-line, #e4e8ed);
	padding: 0;
	margin-block-start: 0;
}
.ip-section.wp-block-group.ip-dark .wp-block-details {
	border-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12));
}
.ip-section.wp-block-group .wp-block-details:last-of-type {
	border-bottom: 1px solid var(--ip-line, #e4e8ed);
}
.ip-section.wp-block-group.ip-dark .wp-block-details:last-of-type {
	border-bottom-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12));
}
.ip-section.wp-block-group .wp-block-details summary {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.5rem;
	min-height: 3.5rem;
	padding-block: 1.25rem;
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
	font-weight: 400;
	cursor: pointer;
	list-style: none;
}
.ip-section.wp-block-group .wp-block-details summary::-webkit-details-marker {
	display: none;
}
.ip-section.wp-block-group .wp-block-details summary::after {
	content: "";
	width: 1.25rem;
	height: 1.25rem;
	flex: none;
	background: var(--ip-red);
	-webkit-mask: var(--ip-icon-plus) center / contain no-repeat;
	mask: var(--ip-icon-plus) center / contain no-repeat;
	transition: transform 300ms var(--ip-ease, ease);
}
.ip-section.wp-block-group.ip-dark .wp-block-details summary::after {
	background: var(--ip-red-on-dark);
}
.ip-section.wp-block-group .wp-block-details[open] summary::after {
	transform: rotate(45deg);
}
.ip-section.wp-block-group .wp-block-details > :not(summary) {
	padding-bottom: 1.25rem;
	margin: 0;
}
@media (prefers-reduced-motion: reduce) {
	.ip-section.wp-block-group .wp-block-details summary::after {
		transition: none;
	}
}

/* Emphasis in content headings = brand red at the same weight, never italic (owner rule). */
.ip-section.wp-block-group :is(h1, h2, h3, h4) em {
	font-style: normal;
	color: var(--ip-red);
}
.ip-section.wp-block-group.ip-dark :is(h1, h2, h3, h4) em {
	color: var(--ip-red-on-dark);
}

/* 17. Ollie removes the bottom padding of a list's last item inside .entry-content; inside IP blocks
   the item's own utility padding applies (Contact page billing card, About contact cards). */
.entry-content .ip-block.ip-block li:last-child {
	padding-bottom: revert-layer;
}
/* 0.20.3: and the top padding of the first item (Ollie: `.entry-content :not(.wp-block-group) > li:first-child`),
   which lifted the Contact page's first drive-time card. */
.entry-content .ip-block.ip-block li:first-child {
	padding-top: revert-layer;
}

/* 19. Rows list (Careers benefits): the home Services rows without the hover or links. Add the
   class "ip-rows" to a List block. */
.ip-section.wp-block-group .wp-block-list.ip-rows {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	border-top: 1px solid var(--ip-line, #e4e8ed);
	display: grid;
	column-gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 782px) {
	.ip-section.wp-block-group .wp-block-list.ip-rows {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}
.ip-section.wp-block-group.ip-dark .wp-block-list.ip-rows {
	border-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12));
}
.ip-section.wp-block-group .wp-block-list.ip-rows > li {
	display: grid;
	grid-template-columns: 0.75rem minmax(0, 1fr);
	align-items: start; /* 0.26.0: bullet on the first line, text top-aligned */
	gap: 1.25rem;
	margin: 0;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--ip-line, #e4e8ed);
	font-size: clamp(1.125rem, 0.6vw + 1rem, 1.375rem);
	font-weight: 300;
	line-height: 1.35;
	color: var(--ip-text, #121928);
}
.ip-section.wp-block-group.ip-dark .wp-block-list.ip-rows > li {
	border-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12));
	color: var(--ip-white, #fff);
}
.ip-section.wp-block-group .wp-block-list.ip-rows > li::before {
	content: "";
	margin-top: calc((1lh - 0.75rem) / 2); /* centred on the first line */
	width: 0.75rem;
	height: 0.75rem;
	background: linear-gradient(to bottom left, transparent 50%, var(--ip-red) 50%);
}
.ip-section.wp-block-group.ip-dark .wp-block-list.ip-rows > li::before {
	background: linear-gradient(to bottom left, transparent 50%, var(--ip-red-on-dark) 50%);
}

/* 20. Footer bottom: copyright left, legal links centred, back to top right. */
.ip-footer-legal,
.ip-footer-legal .wp-block-navigation__container {
	justify-content: center;
}
@media (min-width: 782px) {
	.ip-footer-bottom.ip-footer-bottom {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
		align-items: center;
	}
	.ip-footer-bottom > .ip-footer-legal {
		justify-self: center;
	}
	.ip-footer-bottom > :last-child {
		justify-self: end;
	}
}
/* Phones (0.14.0): copyright left with "Top" on the same line at the right, the legal menu left-aligned
   right under it. */
@media (max-width: 781px) {
	.ip-footer-bottom.ip-footer-bottom {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "copy top" "legal legal";
		column-gap: 1rem;
		row-gap: 0;
		align-items: center;
		text-align: left;
	}
	.ip-footer-bottom > p { grid-area: copy; margin: 0; }
	.ip-footer-bottom > .ip-footer-legal { grid-area: legal; justify-self: start; margin: 0; }
	.ip-footer-bottom > .ip-footer-legal,
	.ip-footer-bottom > .ip-footer-legal .wp-block-navigation__container { justify-content: flex-start; }
	.ip-footer-bottom > :last-child { grid-area: top; justify-self: end; }
}

/* 21. FAQ sections built from core blocks (services, solutions, careers…) in the platform pages' FAQ
   format: heading column on the left with the faint question-block mark in the brand colour, accordion on
   the right (rules between rows, a grey square with a chevron that turns red when open). */
.ip-section.wp-block-group:has(> .wp-block-details) {
	padding-inline: max(var(--ip-gutter, 1.5rem), calc((100% - var(--ip-max, 80rem)) / 2 + var(--ip-gutter, 1.5rem)));
}
.ip-section.wp-block-group:has(> .wp-block-details) > * {
	max-width: none !important;
	margin-inline: 0 !important;
}
.ip-section.wp-block-group:has(> .wp-block-details)::after {
	content: "";
	display: table;
	clear: both;
}
.ip-section.wp-block-group:has(> .wp-block-details) > h2.wp-block-heading {
	position: relative;
	isolation: isolate;
	font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.05;
}
.ip-section.wp-block-group:has(> .wp-block-details) > h2.wp-block-heading::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: calc(-0.75rem - 30px); /* 0.27.6 (owner): 30px higher */
	width: 7rem;
	height: 7rem;
	z-index: -1;
	background: rgb(var(--ip-red-rgb, 211 16 32) / 0.1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
@media (min-width: 1024px) {
	.ip-section.wp-block-group:has(> .wp-block-details) > :not(.wp-block-details) {
		float: left;
		clear: left;
		width: 33%;
	}
	.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details {
		margin-left: 42% !important;
	}
	.ip-section.wp-block-group:has(> .wp-block-details) > h2.wp-block-heading::before {
		left: -1.5rem;
		width: 8rem;
		height: 8rem;
	}
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details summary {
	padding: 1.5rem 1rem;
	font-size: 1.1875rem;
	font-weight: 400;
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details summary::after {
	width: 2.5rem;
	height: 2.5rem;
	-webkit-mask: none;
	mask: none;
	background: var(--ip-grey-1, #f3f5f7) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23121928' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E") center / 18px no-repeat;
	transition: background-color 300ms;
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details[open] summary::after {
	transform: none;
	background: var(--ip-red) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E") center / 18px no-repeat;
}
/* On grey sections the closed square is white, so it stands out from the background. */
.ip-section.wp-block-group.ip-grey:has(> .wp-block-details) > .wp-block-details:not([open]) summary::after {
	background-color: var(--ip-white, #fff);
}
.ip-section.wp-block-group.ip-dark:has(> .wp-block-details) > .wp-block-details summary::after {
	background-color: var(--ip-ink-3, #293545);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details > :not(summary) {
	padding: 0 1rem 1.75rem;
	max-width: 70ch;
}
/* 0.26.0 (owner): a closed question fills with navy from the left on hover (as the home page's service rows);
   an open question keeps its row and only its arrow square changes colour. */
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details summary {
	background: linear-gradient(var(--ip-acc-fill, var(--ip-ink, #121928)), var(--ip-acc-fill, var(--ip-ink, #121928))) no-repeat 0 0 / 0% 100%;
	transition: background-size 500ms var(--ip-ease, ease), color 300ms;
}
.ip-section.wp-block-group.ip-dark:has(> .wp-block-details) > .wp-block-details summary {
	--ip-acc-fill: var(--ip-ink-3, #293545);
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details:not([open]) summary:is(:hover, :focus-visible) {
	background-size: 100% 100%;
	color: var(--ip-white, #fff);
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details:not([open]) summary:is(:hover, :focus-visible)::after {
	background-color: var(--ip-red);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23ffffff' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}
.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details[open] summary:is(:hover, :focus-visible)::after {
	background-color: var(--ip-ink, #121928);
}
.ip-section.wp-block-group.ip-dark:has(> .wp-block-details) > .wp-block-details[open] summary:is(:hover, :focus-visible)::after {
	background-color: var(--ip-white, #fff);
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23121928' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m18 15-6-6-6 6'/%3E%3C/svg%3E");
}
@media (prefers-reduced-motion: reduce) {
	.ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details summary {
		transition: none;
	}
}
html[data-motion="paused"] .ip-section.wp-block-group:has(> .wp-block-details) > .wp-block-details summary {
	transition: none;
}

/* 22. Logo without the 20-year badge (the Inverse Paradox 20 Years plugin adds the badge back). */
.ip-chrome--logo .ip-wordmark-badge.ip-wordmark-plain {
	height: 1.76rem;
}
@media (min-width: 640px) {
	.ip-chrome--logo .ip-wordmark-badge.ip-wordmark-plain {
		height: 2.01rem;
	}
}

/* 23. Moving straight from one menu panel to another (assets/js/ip-child.js sets .ip-mega-switch for a
   moment): the old panel goes at once and the new one is there at once (only its contents rise in), so
   a closing panel never fades out over the opening one. The open panel also sits above the others. */
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container {
	z-index: 101;
}
.ip-main-nav.ip-mega-switch .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
.ip-main-nav.ip-mega-switch .wp-block-ollie-mega-menu__menu-container .ip-mega {
	transition: none !important;
}

/* 24. Content sections with a single photo (no cards or list): laid out like the home About section,
   photo on the left, copy on the right (desktop). The photo spans the copy's rows and sits centred. */
@media (min-width: 1024px) {
	.ip-section.wp-block-group:has(> .wp-block-image):not(:has(> .wp-block-columns, > .wp-block-list, > .wp-block-details)) {
		display: grid;
		grid-template-columns: minmax(0, 5fr) minmax(0, 6fr);
		column-gap: clamp(3rem, 6vw, 6rem);
		row-gap: 0;
		align-content: start;
		padding-inline: max(var(--ip-gutter, 1.5rem), calc((100% - var(--ip-max, 80rem)) / 2 + var(--ip-gutter, 1.5rem)));
	}
	.ip-section.wp-block-group:has(> .wp-block-image):not(:has(> .wp-block-columns, > .wp-block-list, > .wp-block-details)) > * {
		grid-column: 2;
		max-width: none !important;
		margin-inline: 0 !important;
	}
	.ip-section.wp-block-group:has(> .wp-block-image):not(:has(> .wp-block-columns, > .wp-block-list, > .wp-block-details)) > .wp-block-image {
		grid-column: 1;
		grid-row: 1 / span 14;
		align-self: center;
		margin: 0 !important;
	}
	.ip-section.wp-block-group:has(> .wp-block-image):not(:has(> .wp-block-columns, > .wp-block-list, > .wp-block-details)) > .wp-block-image.ip-cut img {
		width: 100%;
		aspect-ratio: 4 / 5;
		object-fit: cover;
	}
}

/* 25. Photos on white get a soft shadow: the cut corner moves to the image so the figure can carry it. */
.ip-section.wp-block-group.ip-light .wp-block-image.ip-cut {
	clip-path: none;
	filter: drop-shadow(0 16px 22px rgba(18, 25, 40, 0.14)) drop-shadow(0 2px 4px rgba(18, 25, 40, 0.08));
}
.ip-section.wp-block-group.ip-light .wp-block-image.ip-cut img {
	clip-path: polygon(0 0, calc(100% - var(--ip-cut, 2rem)) 0, 100% calc(var(--ip-cut, 2rem) * var(--ip-slope, 0.5774)), 100% 100%, 0 100%);
}

/* 29. No white stripe between full-width sections (0.14.2): WordPress's flow layout puts a 24px block gap
   above each block, so two coloured sections showed the page background between them. Full-width
   sections and IP blocks sit flush. */
main :is(.wp-block-post-content, [class*="ip-accent-"], .wp-block-group.alignfull:not(.ip-section)) > :is(.alignfull, .ip-block, section),
main > :is(.alignfull, .ip-block, .wp-block-post-content) {
	margin-block-start: 0 !important;
	margin-block-end: 0 !important;
}

/* 30. External articles (0.14.3): blog cards and case study blocks that link to another site show a badge
   naming the site on the image and an arrow after the title (inc/external-articles.php). */
.ip-ext-badge {
	position: absolute;
	right: 0;
	bottom: 0;
	z-index: 1;
	display: inline-flex;
	align-items: center;
	gap: 0.375rem;
	padding: 0.375rem 0.75rem;
	background: var(--ip-red);
	color: #fff;
	font-size: 0.75rem;
	font-weight: 700;
	letter-spacing: 0.1em;
	line-height: 1.2;
	text-transform: uppercase;
}
.ip-ext-badge svg {
	width: 0.9rem;
	height: 0.9rem;
}
.ip-ext-icon {
	display: inline-block;
	width: 0.75em;
	height: 0.75em;
	margin-left: 0.3em;
	vertical-align: 0.02em;
	color: var(--ip-red);
}
.ip-ext-icon svg {
	display: block;
	width: 100%;
	height: 100%;
}
.ip-dark .ip-ext-icon {
	color: var(--ip-red-on-dark);
}

/* 31. Breadcrumb eyebrows (0.14.4): "Solutions", "Services" or "Platforms" in sub-page headers links back
   to the main page (inc/breadcrumb-eyebrow.php). */
.ip-eyebrow a.ip-crumb {
	color: inherit;
	text-decoration: none;
	background: linear-gradient(currentColor, currentColor) left bottom / 0 1px no-repeat;
	transition: background-size 0.3s var(--ip-ease, ease);
}
.ip-eyebrow a.ip-crumb:is(:hover, :focus-visible) {
	background-size: 100% 1px;
}
.ip-eyebrow--crumb + .ip-hero-eyebrow-logo {
	margin-top: 0.25rem;
}

/* 34. One bullet style (0.16.0, owner): every bulleted list placed straight in a section (services,
   solutions, careers…) uses the Careers benefits rows; lists in articles use the same red corner marker. */
.ip-section.wp-block-group > ul.wp-block-list,
.ip-section-intro > ul.wp-block-list {
	list-style: none;
	padding: 0;
	margin: 2rem 0 0;
	border-top: 1px solid var(--ip-line, #e4e8ed);
	display: grid;
	column-gap: clamp(1.5rem, 4vw, 3rem);
}
@media (min-width: 782px) {
	.ip-section.wp-block-group > ul.wp-block-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
.ip-section.wp-block-group.ip-dark > ul.wp-block-list { border-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12)); }
.ip-section.wp-block-group > ul.wp-block-list > li,
.ip-section-intro > ul.wp-block-list > li {
	display: grid;
	grid-template-columns: 0.75rem minmax(0, 1fr);
	align-items: start; /* 0.26.0: bullet on the first line, text top-aligned */
	gap: 1.25rem;
	margin: 0 !important;
	padding: 1.5rem 0;
	border-bottom: 1px solid var(--ip-line, #e4e8ed);
	font-size: clamp(1.0625rem, 0.5vw + 0.95rem, 1.25rem);
	font-weight: 300;
	line-height: 1.4;
}
.ip-section.wp-block-group.ip-dark > ul.wp-block-list > li { border-color: var(--ip-line-inv, rgba(255, 255, 255, 0.12)); color: var(--ip-white, #fff); }
.ip-section.wp-block-group > ul.wp-block-list > li::before,
.ip-section-intro > ul.wp-block-list > li::before {
	content: "";
	margin-top: calc((1lh - 0.75rem) / 2); /* centred on the first line */
	width: 0.75rem;
	height: 0.75rem;
	background: linear-gradient(to bottom left, transparent 50%, var(--ip-red) 50%);
}
.ip-section.wp-block-group.ip-dark > ul.wp-block-list > li::before { background: linear-gradient(to bottom left, transparent 50%, var(--ip-red-on-dark) 50%); }
.ip-prose ul.wp-block-list,
.wp-block-post-content.ip-prose ul,
.single-post .wp-block-post-content ul:not([class*="ip-"]) {
	list-style: none;
	padding-inline-start: 0;
}
.ip-prose ul.wp-block-list > li,
.single-post .wp-block-post-content ul:not([class*="ip-"]) > li {
	position: relative;
	padding-left: 1.75rem;
	margin-block: 0.6rem;
}
.ip-prose ul.wp-block-list > li::before,
.single-post .wp-block-post-content ul:not([class*="ip-"]) > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.55em;
	width: 0.6rem;
	height: 0.6rem;
	background: linear-gradient(to bottom left, transparent 50%, var(--ip-red) 50%);
}

/* 36. Intro left, content right (0.16.0, owner): FAQ sections and "split" sections (class ip-split) put
   the eyebrow, heading and lead in a column that stays in view (sticky) while the questions or cards on
   the right scroll past. inc/content-cards.php wraps the intro in .ip-section-intro. */
.ip-section-intro > h2.wp-block-heading {
	position: relative;
	isolation: isolate;
}
.ip-section.wp-block-group:has(> .wp-block-details) > .ip-section-intro > h2.wp-block-heading {
	font-size: clamp(2rem, 2.5vw + 1rem, 3.25rem);
	font-weight: 300;
	letter-spacing: -0.025em;
	line-height: 1.05;
}
.ip-section.wp-block-group:has(> .wp-block-details) > .ip-section-intro > h2.wp-block-heading::before {
	content: "";
	position: absolute;
	left: -1rem;
	top: calc(-0.75rem - 30px); /* 0.27.6 (owner): 30px higher */
	width: 7rem;
	height: 7rem;
	z-index: -1;
	background: rgb(var(--ip-red-rgb, 211 16 32) / 0.1);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cdefs%3E%3Cmask id='g'%3E%3Crect width='24' height='24' fill='white'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black' stroke='black' stroke-width='2.4' stroke-linejoin='miter'/%3E%3C/mask%3E%3C/defs%3E%3Cpath d='M1 3H13.5L15.5 4.15V12H6L3 13.73V12H1Z' fill='black' mask='url(%23g)'/%3E%3Cpath d='M9 8H21L23 9.15V18H21V19.73L18 18H9Z' fill='black'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
.ip-section.wp-block-group:has(> .ip-section-intro) {
	padding-inline: max(var(--ip-gutter, 1.5rem), calc((100% - var(--ip-max, 80rem)) / 2 + var(--ip-gutter, 1.5rem)));
}
.ip-section.wp-block-group:has(> .ip-section-intro) > * {
	max-width: none !important;
	margin-inline: 0 !important;
}
.ip-section-intro > * + * { margin-top: 1.5rem; }
@media (min-width: 1024px) {
	.ip-section.wp-block-group:has(> .ip-section-intro) {
		display: grid !important;
		grid-template-columns: minmax(0, 4fr) minmax(0, 7fr);
		column-gap: 8%;
		align-items: start;
	}
	.ip-section.wp-block-group:has(> .ip-section-intro) > .ip-section-intro {
		grid-column: 1;
		grid-row: 1 / span 60;
		position: sticky;
		top: 7rem;
		float: none !important;
		width: auto !important;
	}
	.ip-section.wp-block-group:has(> .ip-section-intro) > :not(.ip-section-intro) {
		grid-column: 2;
		margin-left: 0 !important;
		float: none !important;
		width: auto !important;
		clear: none !important;
	}
	.ip-section.wp-block-group:has(> .ip-section-intro) > .wp-block-details:first-of-type { margin-top: 0; }
	.ip-section.wp-block-group:has(> .wp-block-details) > .ip-section-intro > h2.wp-block-heading::before { left: -1.5rem; width: 8rem; height: 8rem; }
	/* Split card sections never add the stagger's extra bottom space. */
	.ip-section.wp-block-group.ip-split:has(> .ip-section-intro) { padding-bottom: var(--ip-section, 6rem) !important; }
}

/* 37. Award graphic beside a paragraph (0.19.1, Shopify page's Clutch award): floated right, text wraps. */
.ip-float-wrap { display: flow-root; }
.ip-float-wrap > p + p { margin-top: 1.25rem; }
.ip-float-badge {
	float: right;
	width: clamp(6.5rem, 12vw, 9rem);
	height: auto;
	margin: 0.25rem 0 1rem 1.5rem;
}

/* 39. Single-item feature row (0.20.1, owner: UserWay is one item, so no card): logo left, text right,
   between two hairlines. Logos are never corner-cut. */
.ip-section.wp-block-group > .wp-block-columns.ip-feature-row {
	margin-top: 2.5rem;
	padding-block: 2rem;
	gap: 3rem;
	border-top: 1px solid var(--ip-line);
	border-bottom: 1px solid var(--ip-line);
	align-items: center;
}
.ip-feature-row .wp-block-image { margin: 0; }
.ip-feature-row .wp-block-image img { display: block; height: 3.5rem; width: auto; max-width: 100%; object-fit: contain; }

/* 41. Menu panels: hover intent (0.20.4, owner: "a flash over the page when interacting with the navigation").
   Ollie Menu Designer opens a full-width panel the moment the pointer touches a nav item, so moving the mouse
   from the header into the page blinked a dark panel open and shut. A panel now waits 150ms before it
   appears; a pass over the nav never shows one. Switching between open menus stays instant (.ip-mega-switch). */
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container {
	transition: opacity 400ms var(--ip-ease, ease) 150ms, visibility 0s linear 150ms;
}
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega {
	transition: clip-path 450ms var(--ip-ease, ease) 150ms;
}
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega .wp-block-column:first-child,
.ip-main-nav .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container .ip-mega-links li {
	animation-delay: 150ms;
}
/* Closing: fade out quickly and drop visibility with it, so a closed panel cannot linger over the page. */
.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container {
	transition: opacity 200ms var(--ip-ease, ease), visibility 0s linear 200ms;
}
.ip-main-nav.ip-mega-switch .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
.ip-main-nav.ip-mega-switch .wp-block-ollie-mega-menu__menu-container .ip-mega {
	transition: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
	.ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container,
	.ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega { transition: none; }
}
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__menu-container,
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu .wp-block-ollie-mega-menu__toggle[aria-expanded="true"] ~ .wp-block-ollie-mega-menu__menu-container,
html[data-motion="paused"] .ip-main-nav .wp-block-ollie-mega-menu__menu-container .ip-mega { transition: none; }

/* 42. Client phone renderings in an intro frame (0.20.4, owner: websites on phones, not office photos).
   The platform intro frames a photo at 4:3 behind a corner cut; a rendering is shown whole instead, on
   the section background, like the eCommerce intro. */
.ip-block .ip-cut:has(> img:is([src*="mockup-"], [src*="device-"])) {
	background: transparent !important;
	clip-path: none;
	aspect-ratio: auto;
	overflow: visible;
}
.ip-block .ip-cut > img:is([src*="mockup-"], [src*="device-"]) {
	height: auto;
	object-fit: contain;
}
.ip-block .ip-shadow:has(img:is([src*="mockup-"], [src*="device-"])) {
	box-shadow: none;
	filter: none;
}
.ip-block .ip-shadow:has(img:is([src*="mockup-"], [src*="device-"]))::before,
.ip-block .ip-shadow:has(img:is([src*="mockup-"], [src*="device-"]))::after {
	display: none;
}

/* 46. 0.21.1 (owner): an intro with only one or two blocks beside it doesn't stay in view while scrolling. */
@media (min-width: 1024px) {
	.ip-section.wp-block-group:has(> .ip-section-intro) > .ip-section-intro.ip-section-intro--static {
		position: static;
	}
}

/* 47. HTML sitemap (0.26.0, owner): the sitemap plugin's lists (.wsp-container) get one even rhythm. Every
   item, nested list and section title has the same spacing, whatever margins the plugin or WordPress add. */
.wsp-container :is(ul, li) {
	margin: 0;
}
.wsp-container ul {
	padding-inline-start: 1.25em;
	list-style: square;
}
.wsp-container li {
	padding: 0;
	line-height: 1.5;
}
.wsp-container li::marker {
	color: var(--ip-red);
}
.wsp-container li + li,
.wsp-container li > ul {
	margin-top: 0.625rem;
}
.wsp-container :is(h2, h3) {
	margin: 2.5rem 0 1rem;
}
.wsp-container > :is(h2, h3):first-child {
	margin-top: 0;
}

/* 48. Page heroes printed by PHP templates (careers and job posts, solution, service and platform singles, the blog):
   their h1 kept the browser's default margin (0.67em, ~63px at display size), so the eyebrow and the lead sat far
   from the headline. 0.26.0 (owner): no margin, as on the other pages. */
h1.ip-display {
	margin-block: 0;
}

/* 49. Menu panels' featured case study / article (0.27.0, owner): the whole card is the link and nothing in it
   underlines except its call to action ("Launch website", "Read the article"), which underlines with the card. */
.ip-mega a.ip-cut,
.ip-mega a.ip-cut:is(:hover, :focus-visible),
.ip-mega a.ip-cut * {
	text-decoration: none !important;
}