/* Blueprint design layer (Sterling Blueprint, signed-off design 2026-10-14).
   Header pill menu, left rail, centred full-height hero with four backgrounds (soft glow,
   photo, Ken Burns, video). Palette and font tokens only: Site Settings > Brand restyles
   all of it. Measurements are from the agreed header/hero spec (1920 x 900 and 375 x 812);
   see the project CLAUDE.md. */

/* ---------------------------------------------------------------------------------------
   Header: 96px tall over the hero. Logo 104px from the left (40px right of the rail), pill
   menu centred, "Start a Conversation" 64px from the right.
   ------------------------------------------------------------------------------------ */
.bp-header {
	padding: 0 64px 0 104px !important;
}
.bp-header .bp-header-row {
	position: relative;
	height: 96px;
}
.bp-brand { gap: 0; }
.bp-brand:has(.wp-block-site-logo img) .bp-site-title { display: none; }
/* Logo height from Site Settings > Brand > Logos (--bp-logo-h, phones --bp-logo-h-phone);
   the width follows the logo's shape, whatever width the block was given. */
.bp-brand .wp-block-site-logo,
.bp-brand .wp-block-site-logo a { display: block; line-height: 0; }
.bp-brand .wp-block-site-logo img {
	display: block;
	height: var(--bp-logo-h, 56px) !important;
	width: auto !important;
	max-width: none;
}
.bp-site-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
}
.bp-site-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }

/* Pill menu: 5px inner padding, items 13px uppercase at 0.1em, 11 x 18px, pill hover. */
@media (min-width: 1181px) {
	/* nav only: WordPress also copies the class onto the inner list. */
	nav.bp-pill-nav {
		position: absolute;
		left: 50%;
		top: 50%;
		/* Centred on the page, not the row (the row is inset 104px left, 64px right). */
		margin-left: -20px;
		width: max-content;
		transform: translate(-50%, -50%);
	}
	.bp-pill-nav .wp-block-navigation__container {
		flex-wrap: nowrap;
		white-space: nowrap;
		gap: 2px;
		padding: 5px;
		border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 16%, transparent);
		border-radius: 999px;
		background: color-mix(in srgb, var(--wp--preset--color--base) 78%, transparent);
		-webkit-backdrop-filter: blur(10px);
		backdrop-filter: blur(10px);
	}
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item {
		border-radius: 999px;
		transition: background-color 0.2s ease;
	}
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item {
		background: color-mix(in srgb, var(--wp--preset--color--contrast) 8%, transparent);
	}
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
		padding: 11px 18px;
		font-size: 13px;
		font-weight: var(--wp--custom--font-weight--regular);
		line-height: 16px;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		color: var(--wp--preset--color--contrast);
	}
	.bp-pill-nav .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-right: 4px; }
	.bp-pill-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		margin: 0 16px 0 2px;
		width: 9px;
		height: 9px;
		opacity: 0.6;
		color: var(--wp--preset--color--contrast);
	}
	/* The dropdown starts 10px under the pill, its items lined up with the label. */
	.bp-pill-nav.wp-block-navigation.items-justified-center .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container,
	.bp-pill-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		top: calc(100% + 11px);
		left: -7px;
		right: auto;
	}
	/* The mobile-only "Start a Conversation" item: the header button covers it here. */
	.bp-pill-nav .bp-nav-cta { display: none; }
}

/* Header button: 48px tall (13/24 + 12px padding), 24px sides. */
:root .bp-header .wp-block-button.rogiq-header-cta > .wp-block-button__link {
	padding: 12px 24px;
	font-size: 13px;
	letter-spacing: 0.1em;
	white-space: nowrap;
}

/* Over a photo, slideshow or video hero the header is a dark zone (light text). The
   button turns to a light outline; the pill takes a dark glass tint automatically. */
:root body:has(.bp-hero:not(.is-hero-glow)) .bp-header .wp-block-button.rogiq-header-cta > .wp-block-button__link {
	background: transparent;
	border: 1px solid color-mix(in srgb, var(--wp--custom--inverse--text) 70%, transparent);
	color: var(--wp--custom--inverse--text);
}

/* ---------------------------------------------------------------------------------------
   Left rail (desktop, >1180px). There is no drawn track: only the progress line
   (.bp-rail-progress, below) grows down the rail at x64 as the page scrolls, and each
   section's label appears as the line reaches it. 2026-10-15: the light grey track was
   removed (user request).
   ------------------------------------------------------------------------------------ */
.wp-site-blocks { position: relative; }
/* The footer sits over the rail. */
.wp-site-blocks > footer { position: relative; z-index: 4; }

/* ---------------------------------------------------------------------------------------
   Hero: fills the first screen (min 760px). Content centred: eyebrow, H1 (line 2 italic,
   indented 1.1em, primary colour), intro 19/1.6 at 600px, buttons 42px below.
   ------------------------------------------------------------------------------------ */
:root { --bp-hero-h: max(100vh, 760px); }
.rogiq-page-banner.rogiq-hero.bp-hero {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	min-height: var(--bp-hero-h);
	padding: 96px 160px 72px !important;
	overflow: hidden;
	text-align: center;
}
.bp-hero > .rogiq-hero-content {
	width: 100%;
	max-width: 1100px;
	margin: 0 auto;
}
.bp-hero .rogiq-hero-content > .rogiq-eyebrow {
	justify-content: center;
	gap: 14px;
	margin: 0 0 30px;
}
.bp-hero .rogiq-hero-content > h1 {
	max-width: none;
	margin: 0 auto;
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	color: var(--wp--preset--color--contrast);
}
.bp-hero .rogiq-hero-content > h1 em {
	display: block;
	padding-left: 1.1em;
	font-style: italic;
	color: var(--wp--preset--color--primary);
}
.bp-hero .rogiq-hero-content > .rogiq-hero-lead {
	max-width: 600px;
	margin: 30px auto 0;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}
.bp-hero .rogiq-hero-content > .rogiq-hero-buttons {
	justify-content: center;
	align-items: center;
	gap: 32px;
	margin-top: 42px;
}
.bp-hero .rogiq-hero-content > .rogiq-eyebrow { animation: rogiq-hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) 0.1s both; }

/* Buttons come from Site Settings > Buttons (Primary = default, Secondary = outline,
   Text = text). Only context tweaks live here: the header button's size and the light
   button over a photo hero. */

/* Soft glow (Hero background > Soft glow): two blurred shapes in the brand colours drift
   slowly behind the text. Pure CSS on the hero's ::before (no photo, no overlay), so it
   also shows in the editor. */
.rogiq-page-banner.bp-hero.is-hero-glow,
.rogiq-page-banner.is-hero-glow {
	background-image: none !important;
	background-color: var(--wp--preset--color--base);
}
.rogiq-page-banner.is-hero-glow::after { display: none; }
.rogiq-page-banner.bp-hero.is-hero-glow::before {
	display: block;
	inset: -12%;
	mix-blend-mode: normal;
	background:
		radial-gradient(28% 30% at 41% 45%, color-mix(in srgb, var(--wp--preset--color--secondary) 62%, transparent) 0%, transparent 100%),
		radial-gradient(26% 30% at 58% 57%, color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0%, transparent 100%);
	filter: blur(48px);
	animation: bp-glow 20s ease-in-out infinite alternate;
}
@keyframes bp-glow {
	0% { transform: translate(-2%, -1%) scale(1); }
	50% { transform: translate(2%, 1.5%) scale(1.05); }
	100% { transform: translate(-1%, 2%) scale(0.97); }
}

/* Photo, Ken Burns and video: slate (the overlay colour, Site Settings > Header Banners)
   at 66% behind the text, 45% at the edges, plus a darker band at the top for the header.
   Keeps the light text at 4.5:1 or better even on a pure white photo. */
.rogiq-page-banner.bp-hero:not(.is-hero-glow)::before {
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--rogiq-overlay-from) calc(55% * var(--rogiq-overlay-strength)), transparent) 0, transparent 220px),
		radial-gradient(62% 58% at 50% 54%,
			color-mix(in srgb, var(--rogiq-overlay-to) calc(66% * var(--rogiq-overlay-strength)), transparent) 0%,
			color-mix(in srgb, var(--rogiq-overlay-to) calc(66% * var(--rogiq-overlay-strength)), transparent) 55%,
			color-mix(in srgb, var(--rogiq-overlay-to) calc(45% * var(--rogiq-overlay-strength)), transparent) 100%);
}
/* On media the italic line stays light (the brand colour would be too dark on the scrim).
   Buttons over photos come from Site Settings > Buttons > "… over photos" (2026-11-03). */
.bp-hero:not(.is-hero-glow) .rogiq-hero-content > h1 em { color: inherit; }
/* Intro in the full light colour too (the softer body tone drops below 4.5:1 on a light photo). */
.bp-hero:not(.is-hero-glow) .rogiq-hero-content > .rogiq-hero-lead { color: var(--wp--preset--color--contrast); }

/* ---------------------------------------------------------------------------------------
   Sections and rail labels. A section is a full-width Group with class bp-section (add
   bp-optional for the "Show this section" switch). Its rail label (.bp-rail-label, editable
   text) sits on the left rail: a 14px circle centred on the line (x64), 14px gap, then the
   label in 12px uppercase at 0.2em. Content starts 104px from the left (40px right of the
   rail) and ends 64px from the right, like the header.
   ------------------------------------------------------------------------------------ */
.bp-section {
	position: relative;
	box-sizing: border-box;
	padding-left: 104px !important;
	padding-right: 64px !important;
	background-color: var(--wp--preset--color--base);
}
.bp-section > .bp-rail-label {
	position: absolute;
	left: 57px; /* circle centre on the rail at 64px */
	top: var(--bp-label-top, 56px);
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.bp-section > .bp-rail-label::before {
	content: "";
	flex: 0 0 auto;
	box-sizing: border-box;
	width: 14px;
	height: 14px;
	border: 1px solid var(--wp--preset--color--contrast-alt);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
}

/* Client logos (Home, optional): a slim band under the hero. Rail label at 56px, logos 40px
   below it (label 16px + 24px), 36px tall and up to 160px wide, drifting left (the
   foundation's logo slider: copies fill any width, pauses on hover, still for reduced
   motion). Logos are drawn in the muted text colour (mask), so any uploaded logo matches
   the brand. 64px below. */
.bp-logos {
	padding-top: 96px !important;
	padding-bottom: 64px !important;
}
.bp-logos.rogiq-logos-slider .rogiq-logo-row {
	max-width: none;
	margin: 0;
}
.bp-logos .rogiq-logo-row .wp-block-post-template {
	justify-content: flex-start;
	gap: 32px 72px;
	max-width: none;
}
.bp-logos .rogiq-logo-row .wp-block-post-template.is-sliding { gap: 72px; }
.bp-logos .rogiq-logo-row:has(.is-sliding) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 96px, #000 calc(100% - 96px), transparent 100%);
}
.bp-logos .rogiq-logo-row .rogiq-logo-mark img {
	max-width: 160px;
	height: 36px;
}
.bp-logos.rogiq-logos-mono .rogiq-logo-mark[style*="--rogiq-logo"] {
	background-color: var(--wp--preset--color--contrast-alt);
}

/* Rail progress (assets/js/blueprint.js, desktop only): a line in the Primary brand colour
   that starts at the first rail label's dot (top set by the script) and grows down the rail
   as the page scrolls, its tip 60% down the screen. When the tip reaches a label it gets
   .is-reached (see below). */
.bp-rail-progress {
	position: absolute;
	left: 64px;
	top: 96px;
	width: 1px;
	height: 0;
	z-index: 3;
	pointer-events: none;
	background: var(--wp--preset--color--primary);
}
/* Desktop with the script running: a label (dot + text) is invisible until the line's tip
   reaches it, then fades in (0.6s), its dot fills with Primary and two soft rings ripple out
   from the dot (2 x 2.4s, Primary at 35% → 0, 1 → 3.4 times the dot). Scrolling back up hides
   it again, so the ripple replays next time. Tablets/phones (no rail) and no-JS: always shown. */
@media (min-width: 1181px) {
	.bp-has-rail-progress .bp-section > .bp-rail-label:not(.is-reached) { opacity: 0; }
	.bp-has-rail-progress .bp-section > .bp-rail-label.is-reached::after {
		content: "";
		position: absolute;
		left: 0;
		top: 1px;
		width: 14px;
		height: 14px;
		box-sizing: border-box;
		border: 1px solid var(--wp--preset--color--primary);
		border-radius: 50%;
		pointer-events: none;
		opacity: 0;
		animation: bp-sonar 2.4s cubic-bezier(0.2, 0.6, 0.3, 1) 0.15s 2;
	}
}
@keyframes bp-sonar {
	0% { transform: scale(1); opacity: 0.35; }
	100% { transform: scale(3.4); opacity: 0; }
}
.bp-has-rail-progress .bp-section > .bp-rail-label {
	transition: opacity 0.6s ease, color 0.4s ease;
}
.bp-has-rail-progress .bp-section > .bp-rail-label::before {
	transition: background-color 0.4s ease, border-color 0.4s ease;
}
.bp-has-rail-progress .bp-section > .bp-rail-label.is-reached {
	color: var(--wp--preset--color--contrast);
}
.bp-has-rail-progress .bp-section > .bp-rail-label.is-reached::before {
	border-color: var(--wp--preset--color--primary);
	background-color: var(--wp--preset--color--primary);
}
@media (prefers-reduced-motion: reduce) {
	.bp-has-rail-progress .bp-section > .bp-rail-label,
	.bp-has-rail-progress .bp-section > .bp-rail-label::before { transition: none; }
	.bp-has-rail-progress .bp-section > .bp-rail-label:not(.is-reached) { opacity: 1; }
	.bp-has-rail-progress .bp-section > .bp-rail-label.is-reached::after { display: none; }
}

/* Section tones: bp-tone-base (page background) or bp-tone-alt (alternate background).
   When switching an optional section off leaves two sections of the same tone touching,
   a hairline appears between them so they never merge. */
.bp-section.bp-tone-alt { background-color: var(--wp--preset--color--base-alt); }
.bp-section.bp-tone-alt > .bp-rail-label::before { background: var(--wp--preset--color--base-alt); }
.bp-tone-base + .bp-tone-base,
.bp-tone-alt + .bp-tone-alt { border-top: 1px solid var(--wp--preset--color--border); }

/* What We Do (Home, required): statement, intro and a text button on the left; a photo on
   the right (both columns 820px at 1920, 112px apart); four stats in a hairline row below.
   128px top and bottom; rail label at 128; columns start 56px below it (label 16 + 40). */
.bp-wwd {
	--bp-label-top: 128px;
	padding-top: 128px !important;
	padding-bottom: 128px !important;
}
.bp-wwd > .bp-wwd-main {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	column-gap: 112px;
	align-items: start;
	margin: 56px 0 0;
}
.bp-wwd-text > * { margin-block-start: 0; }
.bp-h2,
.bp-wwd-heading {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, calc(2.4vw + 18px), 64px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	color: var(--wp--preset--color--contrast);
}
.bp-h2 em,
.bp-wwd-heading em {
	display: block;
	padding-left: 1.1em;
	font-style: italic;
	color: var(--wp--preset--color--primary);
}
.bp-wwd-intro {
	max-width: 560px;
	margin: 32px 0 0 !important;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-wwd-text > .wp-block-buttons { margin-top: 40px; }
.bp-wwd-image { margin: 0; overflow: hidden; }
.bp-wwd-image img {
	display: block;
	width: 100%;
	height: 640px;
	object-fit: cover;
	border-radius: 0;
}
/* Stats: a hairline across the top, dividers between columns; number 64px Fraunces,
   label 15px muted, 12px below. Numbers count up (carousels.js, .rogiq-stat-value). */
.bp-stats {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	margin: 112px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-stats > .bp-stat {
	margin: 0;
	padding: 40px 32px 0;
	border-left: 1px solid var(--wp--preset--color--border);
}
.bp-stats > .bp-stat:first-child { padding-left: 0; border-left: 0; }
.bp-stat > .rogiq-stat-value {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(44px, calc(1.6vw + 33.5px), 64px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--contrast);
}
.bp-stat > .bp-stat-label {
	max-width: 240px;
	margin: 12px 0 0 !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-alt);
}
@media (max-width: 1100px) {
	.bp-wwd > .bp-wwd-main { grid-template-columns: minmax(0, 1fr); row-gap: 56px; }
	.bp-wwd-image img { height: auto; aspect-ratio: 16 / 10; }
	.bp-stats { margin-top: 80px; }
}
@media (max-width: 900px) {
	.bp-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-stats > .bp-stat:nth-child(odd) { padding-left: 0; border-left: 0; }
	.bp-stats > .bp-stat:nth-child(n+3) { margin-top: 32px; border-top: 1px solid var(--wp--preset--color--border); }
}
@media (max-width: 767px) {
	.bp-wwd { padding-top: 96px !important; padding-bottom: 96px !important; --bp-label-top: 96px; }
}

/* Who We Serve (Home, required): rail label + heading (56px under the label), then three
   text paths in a hairline row 80px below (.bp-paths, no photos), 128px bottom.
   Each path: a 1px line across the top and dividers between, 40px top padding; 12px
   uppercase number label, 32px Fraunces title, 17px line, Text button. Hover/focus tints
   the column with the alternate background. */
.bp-wws-paths { padding-bottom: 128px !important; }
.bp-paths {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin: 80px 0 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-path {
	display: flex;
	flex-direction: column;
	margin: 0 !important;
	padding: 40px 40px 48px !important;
	border-left: 1px solid var(--wp--preset--color--border);
	transition: background-color 0.4s ease;
}
.bp-path:first-child { border-left: 0; }
.bp-path:hover,
.bp-path:focus-within { background-color: var(--wp--preset--color--base-alt); }
.bp-path > * { margin-block-start: 0; }
.bp-path-label {
	margin: 0 0 24px !important;
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-path-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(28px, calc(0.8vw + 17px), 32px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.15;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.bp-path-text {
	max-width: 420px;
	margin: 16px 0 0 !important;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}
.bp-path > .wp-block-buttons { margin-top: auto !important; padding-top: 32px; }

/* Photo tiles (.bp-tiles / .bp-tile): edge-to-edge photo tiles, kept as a reusable design
   (first used for Who We Serve). Heading 56px under the label, tiles 80px below, running
   into the next section (no bottom padding).
   Tiles: 640 x 720 at 1920, no gaps; photo = the tile's own Background image (Styles), so
   editors swap it in the sidebar. A dark fade (Headings colour, 10% top to 82% bottom) keeps
   the light text readable; on hover the photo zooms to 106% over 1.2s and the text lifts
   6px. Text: 12px uppercase label, 40px Fraunces title, 17px line, Text button; all light
   (rogiq-scheme-inverse swaps the colours). */
.bp-wws {
	padding-top: 128px !important;
	padding-bottom: 0 !important;
	--bp-label-top: 128px;
}
.bp-wws > .bp-h2 { margin-top: 56px; }
.bp-tiles {
	/* Above the rail and its progress line (z-index 3), so both pass behind the photos. */
	position: relative;
	z-index: 4;
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 0;
	margin: 80px -64px 0 -104px;
}
.bp-tile {
	position: relative;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	min-height: 720px;
	margin: 0 !important;
	padding: 56px 48px !important;
	overflow: hidden;
	isolation: isolate;
	background-size: cover;
	background-position: center;
	box-sizing: border-box;
}
.bp-tile::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -2;
	background: inherit;
	background-size: cover;
	background-position: center;
	transform: scale(1);
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-tile::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--custom--inverse--background) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 35%, transparent) 45%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 82%, transparent) 100%);
	transition: opacity 0.6s ease;
}
.bp-tile > * {
	margin-block-start: 0;
	transition: transform 0.6s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-tile:hover::before,
.bp-tile:focus-within::before { transform: scale(1.06); }
.bp-tile:hover > *,
.bp-tile:focus-within > * { transform: translateY(-6px); }
.bp-tile-label {
	margin: 0 0 16px !important;
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.bp-tile-title {
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(32px, calc(1.2vw + 17px), 40px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.1;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.bp-tile-text {
	max-width: 420px;
	margin: 16px 0 0 !important;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.bp-tile > .wp-block-buttons { margin-top: 28px !important; }
@media (prefers-reduced-motion: reduce) {
	.bp-tile::before, .bp-tile > * { transition: none; }
}

/* Expertise panels (Home, required): rail label + heading, then a full-width row of photo
   panels from the Expertise post type (Query Loop), 720px tall, 80px below the heading,
   running into the next section. Closed panels are at least 120px wide and show their number
   and the name written up the panel; the open one (first by default; hover, focus or click
   opens another, see blueprint.js) grows to 4 shares (min 560px) and shows the name, excerpt
   and an "Explore" link. If the panels don't fit, the row scrolls sideways with arrow
   buttons. Photo = each entry's Featured image. Text is light (rogiq-scheme-inverse). */
.bp-xp-section {
	padding-top: 128px !important;
	padding-bottom: 0 !important;
	--bp-label-top: 128px;
}
.bp-xp-section > .bp-h2 { margin-top: 56px; }
.bp-xp {
	position: relative;
	z-index: 4; /* above the rail */
	margin: 80px -64px 0 -104px;
}
.bp-xp .bp-xp-list {
	display: flex;
	height: 720px;
	margin: 0;
	padding: 0;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scrollbar-width: none;
	scroll-behavior: smooth;
	counter-reset: bp-xp;
}
.bp-xp .bp-xp-list::-webkit-scrollbar { display: none; }
.bp-xp .bp-xp-list > * {
	position: relative;
	flex: 1 1 0;
	min-width: 120px;
	/* Every panel carries the half-row cap (closed ones never reach it). If only the open panel
	   had it, a closing panel would lose it instantly and jump wider before shrinking: a stutter. */
	max-width: 50%;
	margin: 0;
	overflow: hidden;
	isolation: isolate;
	counter-increment: bp-xp;
	cursor: pointer;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent);
	transition: flex-grow 1s cubic-bezier(0.45, 0, 0.2, 1), min-width 1s cubic-bezier(0.45, 0, 0.2, 1);
}
.bp-xp .bp-xp-list > *:first-child { border-left: 0; }
/* Open: 4 shares, at least 560px, at most half the row (the cap above: so with only 2–3 areas
   it doesn't dominate; with 6+ it never applies). */
.bp-xp .bp-xp-list > *.is-open { flex-grow: 4; min-width: 560px; cursor: default; }
/* One or two panels (blueprint.js adds .bp-xp-all-open): all open, equal widths, no motion. */
.bp-xp .bp-xp-list.bp-xp-all-open > * { flex: 1 1 0; min-width: 0; max-width: none; transition: none; }
/* Photo */
.bp-xp .bp-xp-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	height: 100%;
}
/* The photo keeps one size (an open panel's width: half the row, at least 560px), centred in
   its panel, so widening a panel reveals more of it instead of enlarging it. Only the gentle
   1.06 → 1 zoom below changes its scale. (cqw = % of the .bp-xp width.) */
.bp-xp { container-type: inline-size; }
.bp-xp .bp-xp-photo img {
	position: absolute;
	top: 0;
	left: 50%;
	translate: -50% 0;
	width: max(100%, 50cqw, 560px);
	max-width: none;
	height: 100%;
	object-fit: cover;
	transform: scale(1.06);
	transition: transform 2s cubic-bezier(0.45, 0, 0.2, 1);
}
.bp-xp .bp-xp-list > *.is-open .bp-xp-photo img { transform: scale(1); }
/* Shade: darker when closed, a bottom fade when open (Headings colour). */
.bp-xp .bp-xp-list > *::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--custom--inverse--background) 45%, transparent) 0%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 65%, transparent) 100%);
	transition: background 1s ease;
}
.bp-xp .bp-xp-list > *.is-open::after {
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--custom--inverse--background) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 35%, transparent) 45%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 85%, transparent) 100%);
}
/* Number (01, 02, …), top-left */
.bp-xp .bp-xp-list > *::before {
	content: counter(bp-xp, decimal-leading-zero);
	position: absolute;
	top: 40px;
	left: 40px;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--contrast);
}
/* Text block, bottom-left */
.bp-xp .bp-xp-body {
	position: absolute;
	left: 40px;
	right: 40px;
	bottom: 56px;
	margin: 0;
}
.bp-xp .bp-xp-body > * { margin-block-start: 0; }
.bp-xp .bp-xp-title {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.15;
	letter-spacing: -0.01em;
	white-space: nowrap;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
	color: var(--wp--preset--color--contrast);
}
.bp-xp .bp-xp-title a { color: inherit; text-decoration: none; }
.bp-xp .bp-xp-excerpt,
.bp-xp .bp-xp-more,
.bp-xp .bp-xp-body > .wp-block-buttons { display: none; }
.bp-xp .bp-xp-list > *.is-open .bp-xp-title {
	max-width: 480px;
	font-size: 40px;
	white-space: normal;
	writing-mode: horizontal-tb;
	transform: none;
	animation: bp-xp-in 0.8s 0.4s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bp-xp .bp-xp-list > *.is-open .bp-xp-excerpt,
.bp-xp .bp-xp-list > *.is-open .bp-xp-more,
.bp-xp .bp-xp-list > *.is-open .bp-xp-body > .wp-block-buttons {
	display: block;
	animation: bp-xp-in 0.8s 0.6s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bp-xp .bp-xp-excerpt {
	max-width: 440px;
	margin: 16px 0 0;
	font-size: 17px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.bp-xp .bp-xp-excerpt p { margin: 0; }
.bp-xp .bp-xp-excerpt .wp-block-post-excerpt__more-text { display: none; }
/* "Explore" link: styled like the Text button (uppercase, Secondary line, arrow). */
.bp-xp .bp-xp-more {
	width: max-content;
	margin: 28px 0 0;
	padding: 8px 0;
	font-size: 14px;
	line-height: 24px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary);
}
.bp-xp .bp-xp-more::after { content: " →"; letter-spacing: 0; }
.bp-xp .bp-xp-more:hover,
.bp-xp .bp-xp-more:focus-visible { color: var(--wp--preset--color--secondary); }
/* Manual cards (pattern "Expertise cards (manual)"): each card is a Group (.bp-xp-card) with an
   Image (.bp-xp-photo), and a body with a heading, a paragraph (.bp-xp-excerpt) and an optional
   Text button (often an #anchor on a one-page site). Same behaviour as the Expertise version. */
.bp-xp .bp-xp-card { margin: 0 !important; }
.bp-xp .bp-xp-photo img { display: block; }
.bp-xp .bp-xp-body > .wp-block-buttons { margin-top: 28px !important; }
@keyframes bp-xp-in { from { opacity: 0; transform: translateY(12px); } }
/* Arrows (added by blueprint.js only when the row overflows): above the row, right. */
.bp-xp-nav {
	position: absolute;
	right: 64px;
	top: -72px;
	display: flex;
	gap: 8px;
}
/* Only when the row overflows: the script sets [hidden] otherwise, and display:flex above
   would override the browser's own hidden style. */
.bp-xp-nav[hidden] { display: none; }
.bp-xp-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, opacity 0.2s ease;
}
.bp-xp-nav button:hover:not(:disabled) { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
.bp-xp-nav button:disabled { opacity: 0.35; cursor: default; }
@media (prefers-reduced-motion: reduce) {
	.bp-xp .bp-xp-list > *,
	.bp-xp .bp-xp-photo img,
	.bp-xp .bp-xp-list > *::after { transition: none; }
	.bp-xp .bp-xp-list > *.is-open .bp-xp-title,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-excerpt,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-more { animation: none; }
	.bp-xp .bp-xp-list { scroll-behavior: auto; }
}

/* Testimonials (Home, optional): one large quote at a time from the Testimonials post type.
   128px top and bottom; rail label at 128. Quote block centred in the content box, max
   1000px: a 120px Fraunces quotation mark in Secondary (line height 0.6), the quote in
   Fraunces 300 at 40px / 1.3, the name 32px below in 13px uppercase at 0.14em, then
   "Role · Company" (from the testimonial's fields) 8px below in 15px muted. Controls 56px
   below: ← 01 / 03 →. Slides share one grid cell (the tallest sets the height) and fade
   (0.6s). Behaviour in blueprint.js. */
.bp-quotes-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-quotes {
	max-width: 1000px;
	margin: 0 auto;
	text-align: center;
}
.bp-quotes .bp-quotes-list {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	margin: 0;
	padding: 0;
	list-style: none;
}
.bp-quotes .bp-quotes-list > * {
	grid-area: 1 / 1;
	margin: 0;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.6s ease, visibility 0s linear 0.6s;
}
.bp-quotes .bp-quotes-list > *:first-child,
.bp-quotes.is-ready .bp-quotes-list > *.is-active {
	opacity: 1;
	visibility: visible;
	transition: opacity 0.6s ease, visibility 0s;
}
.bp-quotes.is-ready .bp-quotes-list > *:first-child:not(.is-active) {
	opacity: 0;
	visibility: hidden;
}
.bp-quotes .bp-quotes-list > *::before {
	content: "\201C";
	display: block;
	height: 56px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 120px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 0.85;
	color: var(--wp--preset--color--secondary);
}
.bp-quotes .bp-quote-text,
.bp-quotes .bp-quote-text p {
	margin: 0;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(26px, calc(1.2vw + 17px), 40px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.bp-quotes .bp-quote-text p + p { margin-top: 0.6em; }
.bp-quotes .bp-quote-name {
	margin: 32px 0 0 !important;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 20px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.bp-quotes .bp-quote-meta {
	display: flex;
	justify-content: center;
	flex-wrap: wrap;
	margin: 8px 0 0 !important;
}
.bp-quotes .bp-quote-meta > p {
	margin: 0 !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-quotes .bp-quote-meta > p:empty { display: none; }
.bp-quotes .bp-quote-role:not(:empty) + .bp-quote-company:not(:empty)::before {
	content: "\00B7";
	margin: 0 0.5em;
}
/* Controls (added by blueprint.js when there are 2+ testimonials). */
.bp-quotes-nav {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 24px;
	margin-top: 56px;
}
.bp-quotes-nav[hidden] { display: none; }
.bp-quotes-nav button {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 50%;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-size: 18px;
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bp-quotes-nav button:hover {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bp-quotes-count {
	min-width: 72px;
	font-size: 13px;
	letter-spacing: 0.14em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--contrast-alt);
}
@media (prefers-reduced-motion: reduce) {
	.bp-quotes .bp-quotes-list > * { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   Tablet and below (≤1180px): hamburger menu, no rail (desktop only), 40px margins.
   ------------------------------------------------------------------------------------ */
@media (max-width: 1180px) {
	/* The rail, its progress line and the label circles are desktop-only: tablets and phones
	   get even margins (40px here, 16px on phones) and the labels sit above the content. */
	.bp-header { padding: 0 32px 0 40px !important; }
	.bp-header .bp-header-actions { display: none; }
	.wp-site-blocks::before,
	.bp-rail-progress { display: none; }
	.rogiq-page-banner.rogiq-hero.bp-hero { padding: 96px 40px 72px !important; }
	.bp-section { padding-left: 40px !important; padding-right: 40px !important; }
	.bp-section > .bp-rail-label { position: static; margin: 0 0 20px; }
	.bp-section > .bp-rail-label::before { display: none; }
	/* With the label in the flow, the content no longer needs room for it above. */
	.bp-logos { padding-top: 64px !important; }
	.bp-wwd > .bp-wwd-main { margin-top: 0; }
	.bp-wws { padding-top: 96px !important; }
	.bp-wws > .bp-h2 { margin-top: 0; }
	.bp-tiles { margin: 56px -40px 0; }
	.bp-tile { min-height: 600px; padding: 40px 32px !important; }
	.bp-wws-paths { padding-bottom: 96px !important; }
	.bp-xp-section { padding-top: 96px !important; }
	.bp-xp-section > .bp-h2 { margin-top: 0; }
	.bp-xp { margin: 56px -40px 0; }
	.bp-xp .bp-xp-list { height: 600px; }
	.bp-xp-nav { right: 40px; top: -64px; }
	.bp-quotes-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-paths { margin-top: 56px; }
	.bp-path { padding: 32px 28px 40px !important; }
	/* Show the menu button and keep the menu folded until it is opened (core only does
	   this below 600px). */
	.bp-pill-nav .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; }
	.bp-pill-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; }
	.bp-pill-nav .wp-block-navigation__responsive-container-open { color: var(--wp--preset--color--contrast); }
	.bp-pill-nav .wp-block-navigation__responsive-container-open svg { width: 30px; height: 30px; }
}
@media (max-width: 900px) {
	.bp-tiles { grid-template-columns: minmax(0, 1fr); }
	.bp-tile { min-height: 480px; }
	.bp-paths { grid-template-columns: minmax(0, 1fr); }
	.bp-path { border-left: 0; border-top: 1px solid var(--wp--preset--color--border); padding: 32px 0 40px !important; }
	.bp-path:first-child { border-top: 0; }
	.bp-path:hover, .bp-path:focus-within { background-color: transparent; }
	/* Expertise: panels stack, each fully open (no expanding). */
	.bp-xp .bp-xp-list { flex-direction: column; height: auto; overflow: visible; }
	.bp-xp .bp-xp-list > *,
	.bp-xp .bp-xp-list > *.is-open { flex: none; min-width: 0; max-width: none; min-height: 440px; cursor: default; border-left: 0; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 18%, transparent); }
	.bp-xp .bp-xp-list > *:first-child { border-top: 0; }
	.bp-xp .bp-xp-list > *::after {
		background: linear-gradient(to bottom,
			color-mix(in srgb, var(--wp--custom--inverse--background) 10%, transparent) 0%,
			color-mix(in srgb, var(--wp--custom--inverse--background) 35%, transparent) 40%,
			color-mix(in srgb, var(--wp--custom--inverse--background) 85%, transparent) 100%);
	}
	.bp-xp .bp-xp-photo img { transform: none; left: 0; translate: none; width: 100%; }
	.bp-xp .bp-xp-title,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-title { max-width: none; font-size: 32px; white-space: normal; writing-mode: horizontal-tb; transform: none; animation: none; }
	.bp-xp .bp-xp-excerpt,
	.bp-xp .bp-xp-more,
	.bp-xp .bp-xp-body > .wp-block-buttons,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-excerpt,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-more,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-body > .wp-block-buttons { display: block; animation: none; }
	.bp-xp-nav { display: none; }
}

/* ---------------------------------------------------------------------------------------
   Phones (≤600px): 72px header, 16px gutters, no rail, stacked full-width button.
   ------------------------------------------------------------------------------------ */
@media (max-width: 600px) {
	.bp-header { padding: 0 8px 0 16px !important; }
	.bp-header .bp-header-row { height: 72px; }
	.bp-site-title { font-size: 20px; }
	.bp-brand .wp-block-site-logo img { height: var(--bp-logo-h-phone, 44px) !important; max-width: calc(100vw - 120px); object-fit: contain; object-position: left center; }
	/* Sections: 16px gutters; smaller labels. */
	.bp-section { padding-left: 16px !important; padding-right: 16px !important; }
	.bp-section > .bp-rail-label { font-size: 11px; letter-spacing: 0.16em; }
	.bp-logos { padding-top: 40px !important; padding-bottom: 48px !important; }
	.bp-wwd { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-wwd > .bp-wwd-main { margin-top: 0; row-gap: 40px; }
	.bp-h2, .bp-wwd-heading { font-size: 36px; }
	.bp-h2 em, .bp-wwd-heading em { padding-left: 0.45em; }
	.bp-wwd-intro { margin-top: 24px !important; font-size: 17px; }
	.bp-wwd-text > .wp-block-buttons { margin-top: 32px; }
	.bp-wwd-image img { aspect-ratio: 4 / 3; }
	.bp-stats { margin-top: 56px; }
	.bp-stats > .bp-stat { padding: 28px 16px 0; }
	.bp-stat > .bp-stat-label { font-size: 14px; }
	.bp-wws { padding-top: 72px !important; }
	.bp-tiles { margin: 40px -16px 0; }
	.bp-tile { min-height: 420px; padding: 32px 24px !important; }
	.bp-tile-text { font-size: 16px; }
	.bp-wws-paths { padding-bottom: 72px !important; }
	.bp-xp-section { padding-top: 72px !important; }
	.bp-xp { margin: 40px -16px 0; }
	.bp-xp .bp-xp-list > *,
	.bp-xp .bp-xp-list > *.is-open { min-height: 420px; }
	.bp-xp .bp-xp-list > *::before { top: 32px; left: 24px; }
	.bp-xp .bp-xp-body { left: 24px; right: 24px; bottom: 40px; }
	.bp-xp .bp-xp-title,
	.bp-xp .bp-xp-list > *.is-open .bp-xp-title { font-size: 28px; }
	.bp-xp .bp-xp-excerpt { font-size: 16px; }
	.bp-quotes-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-quotes .bp-quotes-list > *::before { height: 44px; font-size: 96px; }
	.bp-quotes .bp-quote-name { margin-top: 24px !important; }
	.bp-quotes-nav { margin-top: 40px; }
	.bp-paths { margin-top: 40px; }
	.bp-path-text { font-size: 16px; }
	.bp-logos .rogiq-logo-row .wp-block-post-template.is-sliding { gap: 48px; }
	.bp-logos .rogiq-logo-row .rogiq-logo-mark img { max-width: 120px; height: 28px; }
	.bp-logos .rogiq-logo-row:has(.is-sliding) {
		-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
		mask-image: linear-gradient(90deg, transparent 0, #000 32px, #000 calc(100% - 32px), transparent 100%);
	}
	.rogiq-page-banner.rogiq-hero.bp-hero {
		display: flex;
		min-height: 100vh;
		min-height: 100svh;
		padding: 72px 16px 64px !important;
	}
	.bp-hero .rogiq-hero-content > .rogiq-eyebrow {
		--rogiq-eyebrow-size: 11px;
		--rogiq-eyebrow-lh: 15px;
		--rogiq-eyebrow-spacing: 0.16em;
		--rogiq-eyebrow-mark-w: 24px;
		gap: 10px;
		margin-bottom: 22px;
	}
	.bp-hero .rogiq-hero-content > h1 { line-height: 1.02; }
	.bp-hero .rogiq-hero-content > h1 em { padding-left: 0.45em; }
	.bp-hero .rogiq-hero-content > .rogiq-hero-lead { margin-top: 22px; font-size: 17px; }
	.bp-hero .rogiq-hero-content > .rogiq-hero-buttons {
		flex-direction: column;
		gap: 18px;
		margin-top: 32px;
	}
	.bp-hero .rogiq-hero-buttons > .wp-block-button:not([class*="is-style-"]) { width: 100%; }
	.bp-hero .rogiq-hero-buttons > .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link {
		display: flex;
		justify-content: center;
		width: 100%;
		padding-top: 15px;
		padding-bottom: 15px;
	}
	.rogiq-page-banner.bp-hero:not(.is-hero-glow)::before {
		background:
			linear-gradient(to bottom, color-mix(in srgb, var(--rogiq-overlay-from) calc(55% * var(--rogiq-overlay-strength)), transparent) 0, transparent 160px),
			color-mix(in srgb, var(--rogiq-overlay-to) calc(66% * var(--rogiq-overlay-strength)), transparent);
	}
	.rogiq-page-banner.bp-hero.is-hero-glow::before {
		background:
			radial-gradient(55% 28% at 38% 42%, color-mix(in srgb, var(--wp--preset--color--secondary) 62%, transparent) 0%, transparent 100%),
			radial-gradient(50% 26% at 62% 56%, color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0%, transparent 100%);
	}
}

/* Reduced motion: no drawing rail, no drifting glow. */
@media (prefers-reduced-motion: reduce) {
	.wp-site-blocks::before,
	.rogiq-page-banner.bp-hero.is-hero-glow::before,
	.bp-hero .rogiq-hero-content > .rogiq-eyebrow { animation: none; }
}
/* Quote carousels in the editor (testimonials and written-in team quotes): no slider script
   there, so every quote shows, stacked, with a dashed divider between them, and each one can be
   selected and edited directly. */
.editor-styles-wrapper .bp-quotes .bp-quotes-list { display: block; }
.editor-styles-wrapper .bp-quotes .bp-quotes-list > * {
	opacity: 1;
	visibility: visible;
	transition: none;
}
.editor-styles-wrapper .bp-quotes .bp-quotes-list > * + *:not(.block-list-appender) {
	margin-top: 56px !important;
	padding-top: 56px;
	border-top: 1px dashed var(--wp--preset--color--border);
}
/* Expertise panels in the editor: no hover script there, so every card shows open, side by
   side (360px each, scrolls sideways), with its text editable. The block appender stays small. */
.editor-styles-wrapper .bp-xp .bp-xp-list {
	height: auto;
	min-height: 560px;
	overflow-x: auto;
}
.editor-styles-wrapper .bp-xp .bp-xp-list > * {
	flex: 0 0 360px;
	min-width: 360px;
	max-width: none;
	min-height: 560px;
	cursor: auto;
}
.editor-styles-wrapper .bp-xp .bp-xp-list > *::after {
	background: linear-gradient(to bottom,
		color-mix(in srgb, var(--wp--custom--inverse--background) 10%, transparent) 0%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 35%, transparent) 40%,
		color-mix(in srgb, var(--wp--custom--inverse--background) 85%, transparent) 100%);
}
.editor-styles-wrapper .bp-xp .bp-xp-list > .block-list-appender {
	flex: 0 0 64px;
	min-width: 64px;
	min-height: 0;
	align-self: center;
	border: 0;
}
.editor-styles-wrapper .bp-xp .bp-xp-list > .block-list-appender::before,
.editor-styles-wrapper .bp-xp .bp-xp-list > .block-list-appender::after { display: none; }
.editor-styles-wrapper .bp-xp .bp-xp-title {
	font-size: 32px;
	white-space: normal;
	writing-mode: horizontal-tb;
	transform: none;
}
.editor-styles-wrapper .bp-xp .bp-xp-excerpt,
.editor-styles-wrapper .bp-xp .bp-xp-more,
.editor-styles-wrapper .bp-xp .bp-xp-body > .wp-block-buttons { display: block; animation: none; }
.editor-styles-wrapper .bp-xp .bp-xp-photo img { transform: none; left: 0; translate: none; width: 100%; }

/* In the editor the glow stays still and the rail is not drawn. */
.editor-styles-wrapper .rogiq-page-banner.bp-hero.is-hero-glow::before { animation: none; }

/* ---------------------------------------------------------------------------------------
   Closing call to action (.bp-cta, pattern rogiq-base/cta-band). Each page has its own copy
   (its own text); the design lives here. Edge-to-edge photo (Image block "CTA photo", cover)
   under a fade in the Headings colour that is darkest on the left (80% at the edge, 72% up to
   880px, where the text ends, then clearing to 20% on the right), so the photo shows on the
   right. Text left-aligned on the section margin (104px, like the other sections' headings):
   heading (bp-h2 size, italic second line indented), one line of text, the buttons. Light text
   stays at 4.5:1 or better even on a white photo. 640px tall at least, 160px top/bottom; above
   the rail (z-index 4). Motion: the photo settles from 108% to 100% over 3s when the band
   comes into view ("photo settle", below; also on the What We Do image).
   Single pages: Post Settings can swap the heading ("CTA text"), the main button
   ("CTA button") and the photo ("CTA photo").
   ------------------------------------------------------------------------------------ */
.bp-section.bp-cta {
	position: relative;
	z-index: 4;
	isolation: isolate;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: center;
	min-height: 640px;
	padding: 160px 64px 160px 104px !important;
	overflow: hidden;
	text-align: left;
	box-sizing: border-box;
}
.bp-cta > * { position: relative; margin-block-start: 0; }
.bp-cta > .bp-cta-photo {
	position: absolute;
	inset: 0;
	z-index: -2;
	margin: 0;
	overflow: hidden;
}
.bp-cta .bp-cta-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Photo settle, shared: the band's photo, the What We Do image and any block with the class
   bp-settle (its image needs a clipping parent). The transition is only on .is-in, so setting
   the starting 108% happens instantly. */
.bp-cta.bp-anim .bp-cta-photo img,
.bp-wwd-image.bp-anim img,
.bp-profile-photo.bp-anim img,
.bp-settle.bp-anim img { transform: scale(1.08); }
.bp-cta.bp-anim.is-in .bp-cta-photo img,
.bp-wwd-image.bp-anim.is-in img,
.bp-profile-photo.bp-anim.is-in img,
.bp-settle.bp-anim.is-in img {
	transform: scale(1);
	transition: transform 3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.bp-settle { overflow: hidden; }
.bp-cta::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background: linear-gradient(to right,
		color-mix(in srgb, var(--wp--custom--inverse--background) 80%, transparent) 0,
		color-mix(in srgb, var(--wp--custom--inverse--background) 72%, transparent) 880px,
		color-mix(in srgb, var(--wp--custom--inverse--background) 20%, transparent) 100%);
}
.bp-cta-title {
	max-width: 760px;
	margin: 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, calc(2.4vw + 18px), 64px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.08;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	color: var(--wp--preset--color--contrast);
}
.bp-cta-title em { display: block; padding-left: 1.1em; font-style: italic; color: inherit; }
.bp-cta-intro {
	max-width: 600px;
	margin: 28px 0 0 !important;
	font-size: 19px;
	line-height: 1.6;
	color: var(--wp--preset--color--contrast);
}
.bp-cta-buttons {
	justify-content: flex-start;
	align-items: center;
	gap: 32px;
	margin-top: 42px !important;
}
/* Its buttons: Site Settings > Buttons > "… over photos" designs (2026-11-03). */
@media (max-width: 1180px) {
	/* Text spans most of the width here: one even fade. */
	.bp-section.bp-cta { min-height: 560px; padding: 128px 40px !important; }
	.bp-cta::after { background: color-mix(in srgb, var(--wp--custom--inverse--background) 72%, transparent); }
}
@media (max-width: 600px) {
	.bp-section.bp-cta { min-height: 0; padding: 96px 16px !important; }
	.bp-cta-title { font-size: 36px; }
	.bp-cta-title em { padding-left: 0.45em; }
	.bp-cta-intro { margin-top: 20px !important; font-size: 17px; }
	.bp-cta-buttons { flex-direction: column; align-items: flex-start; gap: 24px; margin-top: 36px !important; width: 100%; }
	.bp-cta-buttons > .wp-block-button:not([class*="is-style-"]) { width: 100%; }
	.bp-cta-buttons > .wp-block-button:not([class*="is-style-"]) > .wp-block-button__link { width: 100%; box-sizing: border-box; }
}

/* ---------------------------------------------------------------------------------------
   Footer (parts/footer.html, .bp-footer). Light by default: the alternate background, the
   site's own text colours. Site Settings > Site Colours > Footer still overrides it
   (custom.footer.*: background, text, icon colours), so a client can make it dark.
   1920: 128px top, content 104px from the left / 64px from the right (like the sections).
   Columns: brand (the logo; the site title in the header's style until a logo is set; social
   icons) takes the free space on the left; Firm, Expertise (Query Loop of the Expertise post
   type) and Contact (Site Settings > Contact & Social, plus a Text button) are as wide as their
   content, 96px apart, ending on the right margin. Column headings 12px uppercase 0.2em muted;
   links 16px on 32px lines. Then the site name as a large Fraunces sign-off (sized by
   blueprint.js to fill the content width, 320px at most) 112px below, in a soft tone; then a
   hairline and the copyright row (14px muted): © year + name, Sitemap, Privacy Policy, and the
   agency credit at the right end; 40px from the bottom.
   ------------------------------------------------------------------------------------ */
.bp-footer {
	--bp-f-bg: var(--wp--custom--footer--background, var(--wp--preset--color--base-alt));
	--bp-f-text: var(--wp--custom--footer--text, var(--wp--preset--color--contrast));
	--bp-f-body: var(--wp--custom--footer--body, var(--wp--preset--color--body-text));
	--bp-f-muted: var(--wp--custom--footer--body, var(--wp--preset--color--contrast-alt));
	--bp-f-line: color-mix(in srgb, var(--bp-f-text) 14%, transparent);
	position: relative;
	z-index: 4;
	margin: 0;
	padding: 128px 64px 40px 104px;
	background: var(--bp-f-bg);
	color: var(--bp-f-body);
	box-sizing: border-box;
}
.bp-footer :where(p, h1, h2, h3, h4, ul) { margin-block: 0; }
.bp-footer a { color: inherit; text-decoration: none; transition: color 0.2s ease; }
.bp-footer a:hover,
.bp-footer a:focus-visible { color: var(--wp--preset--color--primary); }
.bp-footer-grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr) repeat(3, max-content);
	column-gap: 96px;
	align-items: start;
}
.bp-footer-grid > * { margin: 0 !important; }
.bp-footer-brand > * + * { margin-top: 24px !important; }
.bp-footer-logo img { display: block; height: var(--bp-flogo-h, 64px) !important; width: auto !important; max-width: 100%; object-fit: contain; object-position: left center; }
.bp-footer-brand:has(.wp-block-site-logo img) .bp-footer-title { display: none; }
.bp-footer-title a { color: var(--bp-f-text); }
.bp-footer-social:empty { display: none; }
.bp-footer .rogiq-social-icons { gap: 8px; }
.bp-footer .rogiq-social-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--sm);
	background: var(--wp--custom--footer--icon-bg, transparent);
	box-shadow: inset 0 0 0 1px var(--bp-f-line);
}
.bp-footer .rogiq-social-icon::before { width: 18px; height: 18px; background-color: var(--wp--custom--footer--icon-glyph, var(--bp-f-text)); }
.bp-footer .rogiq-social-icon:hover,
.bp-footer .rogiq-social-icon:focus-visible { background: var(--wp--custom--footer--icon-hover, var(--wp--preset--color--primary)); box-shadow: none; }
.bp-footer .rogiq-social-icon:hover::before,
.bp-footer .rogiq-social-icon:focus-visible::before { background-color: var(--wp--preset--color--primary-contrast); }
.bp-footer-heading {
	margin-bottom: 20px !important;
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--bp-f-muted);
}
.bp-footer-col > * + *:not(.bp-footer-heading) { margin-top: 0; }
.bp-footer-menu.wp-block-navigation,
.bp-footer-menu .wp-block-navigation__container { gap: 0; align-items: flex-start; }
.bp-footer-menu.wp-block-navigation,
.bp-footer-list .wp-block-post-title,
.bp-footer-contact p:not(.bp-footer-heading) {
	font-family: var(--wp--preset--font-family--body);
	font-size: 16px;
	letter-spacing: normal;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 32px;
	color: var(--bp-f-text);
}
.bp-footer-menu .wp-block-navigation-item__content { padding: 0; color: var(--bp-f-text); }
.bp-footer-list .wp-block-post-template { margin: 0; padding: 0; list-style: none; }
.bp-footer-list .wp-block-post-template > li { margin: 0; }
.bp-footer-contact p:not(.bp-footer-heading) + p { margin-top: 16px !important; }
.bp-footer-buttons { margin-top: 24px !important; }
.bp-footer-wordmark {
	display: block;
	margin: 112px 0 0 !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(56px, 9vw, 320px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 0.9;
	letter-spacing: -0.035em;
	font-variation-settings: "opsz" 144;
	white-space: nowrap;
	/* Room for the descenders (g, p, y hang 0.156em below the tight 0.9 line box in
	   Fraunces), so the hairline below stays 40px clear of them at any size. */
	padding-bottom: 0.16em;
	color: color-mix(in srgb, var(--bp-f-text) 16%, var(--bp-f-bg));
}
.bp-footer-wordmark a { color: inherit; pointer-events: none; }
.bp-footer-bottom {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-start;
	gap: 12px 32px;
	margin-top: 40px !important;
	padding-top: 24px;
	border-top: 1px solid var(--bp-f-line);
	font-size: 14px;
	line-height: 20px;
	color: var(--bp-f-muted);
}
.bp-footer-bottom p { font-size: inherit; line-height: inherit; color: inherit; }
.bp-footer-legal { display: flex; gap: 24px; }
/* Agency credit, pushed to the right end of the row. */
.bp-footer-credit { margin-left: auto !important; }
.bp-footer-credit a { color: var(--bp-f-text); }
/* Same credit in the one-page Foundation footer (older dark design, .rogiq-footer-bottom):
   copyright and links together on the left, the credit at the right end. */
.rogiq-footer .rogiq-footer-bottom:has(.bp-footer-credit) { justify-content: flex-start; gap: 8px 32px; }
.rogiq-footer .rogiq-footer-bottom .bp-footer-credit a { color: var(--wp--preset--color--contrast); }
@media (max-width: 1180px) {
	.bp-footer { padding: 96px 40px 32px; }
	.bp-footer-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 56px 40px; }
	.bp-footer-grid > .bp-footer-col { min-width: 0; }
	.bp-footer-brand { grid-column: 1 / -1; }
	.bp-footer-wordmark { margin-top: 88px !important; }
}
@media (max-width: 900px) {
	/* Not enough room for one line: copyright and links stay together, the credit below. */
	.bp-footer-credit { flex-basis: 100%; margin-left: 0 !important; }
}
@media (max-width: 600px) {
	.bp-footer { padding: 72px 16px 32px; }
	.bp-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.bp-footer-wordmark { margin-top: 64px !important; }
	.bp-footer-bottom { flex-direction: column; }
	.bp-footer-credit { margin-left: 0 !important; }
}

/* ---------------------------------------------------------------------------------------
   Sub-page header (.bp-subhero, pattern rogiq-base/page-header). The Home hero's machinery
   (Hero background panel: soft glow by default, photo, Ken Burns, video) at 640px tall, text
   left-aligned on the section margin and resting toward the bottom: eyebrow, H1 (fluid
   48 to 88px, italic second line indented 1.1em), intro 19px at 600px. Glow shifted right,
   behind empty space; over media the fade is dark on the left (like the closing band) with
   the header band on top. --bp-hero-h also drives the light first stretch of the rail.
   ------------------------------------------------------------------------------------ */
body:has(.bp-subhero) { --bp-hero-h: 640px; }
.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero {
	align-items: flex-start;
	justify-content: flex-end;
	padding: 200px 64px 112px 104px !important;
	text-align: left;
}
.bp-subhero > .rogiq-hero-content { max-width: 1100px; margin: 0; }
.bp-subhero .rogiq-hero-content > .rogiq-eyebrow { justify-content: flex-start; margin: 0 0 28px; }
.bp-subhero .rogiq-hero-content > h1 {
	margin: 0;
	font-size: clamp(48px, calc(3.4vw + 22px), 88px);
	line-height: 1.02;
}
.bp-subhero .rogiq-hero-content > .rogiq-hero-lead { margin: 28px 0 0; }
/* The glow layer overhangs the header by 12% each side and is clipped at its edge; fade it
   out before the bottom edge (the box's 90% mark) so it melts into the next section. */
.rogiq-page-banner.bp-subhero.is-hero-glow::before {
	-webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%);
	mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 86%);
	background:
		radial-gradient(26% 34% at 70% 46%, color-mix(in srgb, var(--wp--preset--color--secondary) 62%, transparent) 0%, transparent 100%),
		radial-gradient(24% 34% at 84% 60%, color-mix(in srgb, var(--wp--preset--color--primary) 30%, transparent) 0%, transparent 100%);
}
.rogiq-page-banner.bp-subhero:not(.is-hero-glow)::before {
	background:
		linear-gradient(to bottom, color-mix(in srgb, var(--wp--custom--inverse--background) 55%, transparent) 0, transparent 220px),
		linear-gradient(to right,
			color-mix(in srgb, var(--wp--custom--inverse--background) 80%, transparent) 0,
			color-mix(in srgb, var(--wp--custom--inverse--background) 72%, transparent) 1000px,
			color-mix(in srgb, var(--wp--custom--inverse--background) 25%, transparent) 100%);
}

/* ---------------------------------------------------------------------------------------
   Staircase steps (.bp-steps, pattern rogiq-base/steps-staircase): company history or a
   process. Any number of steps share the width (48px apart); each one sits 96px lower than
   the one before (--i is its position, set below for up to 10). A step: 1px line on its left,
   28px in; number or year Fraunces 56px in Primary, 56px above the title (Fraunces 26px);
   text 16/1.6, max 340px. When the row comes into view the steps rise in one after another
   (0.8s, 0.18s apart; blueprint.js adds .bp-anim / .is-in; off for reduced motion).
   ------------------------------------------------------------------------------------ */
.bp-steps-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-steps-section > .bp-h2 { margin-top: 56px; }
.bp-steps {
	--bp-step-drop: 96px;
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	column-gap: 48px;
	align-items: start;
	margin: 96px 0 0;
}
.bp-step {
	margin: calc(var(--i, 0) * var(--bp-step-drop)) 0 0 !important;
	padding: 0 0 8px 28px;
	border-left: 1px solid var(--wp--preset--color--border);
}
.bp-step:nth-child(2) { --i: 1; }
.bp-step:nth-child(3) { --i: 2; }
.bp-step:nth-child(4) { --i: 3; }
.bp-step:nth-child(5) { --i: 4; }
.bp-step:nth-child(6) { --i: 5; }
.bp-step:nth-child(7) { --i: 6; }
.bp-step:nth-child(8) { --i: 7; }
.bp-step:nth-child(9) { --i: 8; }
.bp-step:nth-child(10) { --i: 9; }
.bp-step > * { margin-block: 0; }
.bp-step-num {
	margin-bottom: 56px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 56px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	color: var(--wp--preset--color--primary);
}
.bp-step-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.bp-step-text {
	max-width: 340px;
	margin-top: 12px !important;
	font-size: 16px;
	line-height: 1.6;
	color: var(--wp--preset--color--body-text);
}
.bp-steps.bp-anim .bp-step { opacity: 0; transform: translateY(24px); }
.bp-steps.bp-anim.is-in .bp-step {
	opacity: 1;
	transform: none;
	transition: opacity 0.8s ease, transform 0.8s cubic-bezier(0.2, 0.7, 0.2, 1);
	transition-delay: calc(var(--i, 0) * 0.18s);
}

/* ---------------------------------------------------------------------------------------
   Principles (.bp-principles, pattern rogiq-base/principles): the Who We Serve hairline row
   (.bp-paths / .bp-path) with any number of columns sharing the width (.bp-paths-auto).
   Leadership preview (.bp-team-section, pattern rogiq-base/team-preview): heading with a
   "Meet the Team" link on the right, then four Team Members: 4:5 portrait (zooms to 104% on
   hover, 1.2s), name Fraunces 26px 24px below, role 15px muted 6px below; 32px apart.
   ------------------------------------------------------------------------------------ */
.bp-principles,
.bp-team-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-principles > .bp-h2 { margin-top: 56px; }
/* The columns run to the bottom of the section (no padding below), like Who We Serve on
   Home, so a column's hover tint meets the next section. */
.bp-section.bp-principles { padding-bottom: 0 !important; }
/* Tighter variant (class bp-principles-tight, e.g. Clients' search services): 112px above,
   columns 56px under the heading. */
.bp-section.bp-principles.bp-principles-tight { padding-top: 112px !important; --bp-label-top: 112px; }
.bp-principles-tight > .bp-paths { margin-top: 56px; }
.bp-paths.bp-paths-auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.bp-team-head {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px 40px;
	margin-top: 56px;
}
.bp-team-head > * { margin: 0 !important; }
.bp-team { margin-top: 80px; }
.bp-team-list {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: 48px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bp-team-list > li { margin: 0; }
.bp-team-list > li > * { margin-block: 0; }
.bp-team-photo {
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}
.bp-team-photo a { display: block; height: 100%; }
.bp-team-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-team-list > li:hover .bp-team-photo img,
.bp-team-list > li:focus-within .bp-team-photo img { transform: scale(1.04); }
.bp-team-name {
	margin-top: 24px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.bp-team-name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-team-name a:hover { color: var(--wp--preset--color--primary); }
.bp-team-role {
	margin-top: 6px !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-alt);
}

@media (max-width: 1180px) {
	body:has(.bp-subhero) { --bp-hero-h: 560px; }
	.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero { padding: 168px 40px 88px !important; }
	.bp-steps-section, .bp-principles, .bp-team-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-section.bp-principles, .bp-section.bp-principles.bp-principles-tight { padding-top: 96px !important; padding-bottom: 0 !important; }
	.bp-steps-section > .bp-h2, .bp-principles > .bp-h2, .bp-team-head { margin-top: 0; }
	.bp-steps { --bp-step-drop: 64px; column-gap: 32px; margin-top: 72px; }
	/* Five or more steps would be ~160px wide here: stack them instead. */
	.bp-steps:has(> .bp-step:nth-child(5)) { --bp-step-drop: 0px; grid-auto-flow: row; row-gap: 40px; }
	.bp-steps:has(> .bp-step:nth-child(5)) .bp-step-num { margin-bottom: 20px !important; }
	.bp-step { padding-left: 20px; }
	.bp-step-num { font-size: 44px; margin-bottom: 40px !important; }
	.bp-step-title { font-size: 22px; }
	.bp-team { margin-top: 56px; }
	.bp-team-list { gap: 40px 24px; }
	/* Principles: 2 x 2 on tablets (four columns would leave ~150px lines). */
	.bp-paths.bp-paths-auto { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-paths-auto > .bp-path:nth-child(odd) { border-left: 0; }
	.bp-paths-auto > .bp-path:nth-child(n+3) { border-top: 1px solid var(--wp--preset--color--border); }
	.bp-team-name { font-size: 22px; }
}
@media (max-width: 900px) {
	.bp-steps { --bp-step-drop: 0px; grid-auto-flow: row; row-gap: 40px; }
	.bp-step-num { margin-bottom: 20px !important; }
	.bp-paths.bp-paths-auto { grid-template-columns: minmax(0, 1fr); }
	.bp-team-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	body:has(.bp-subhero) { --bp-hero-h: auto; }
	.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero { min-height: 0; padding: 144px 16px 72px !important; }
	.bp-subhero .rogiq-hero-content > h1 { font-size: 40px; }
	.bp-subhero .rogiq-hero-content > .rogiq-hero-lead { margin-top: 20px; }
	.bp-steps-section, .bp-principles, .bp-team-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-section.bp-principles, .bp-section.bp-principles.bp-principles-tight { padding-top: 72px !important; padding-bottom: 0 !important; }
	.bp-steps { margin-top: 48px; }
	.bp-team { margin-top: 40px; }
	.bp-team-list { gap: 32px 16px; }
	.bp-team-name { font-size: 20px; margin-top: 16px !important; }
	.bp-team-role { font-size: 14px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-team-photo img { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   Leadership Team page (templates/archive-team_member.html): sub-page header, then every
   Team Member in the team-card grid (.bp-team-list, as on About) under a practice filter
   ([rogiq_team_filter]: All + one button per Team Category; blueprint.js hides the other
   cards). Filter: 13px uppercase 0.12em buttons, 44px tall, 1px border, 8px apart; the
   active one filled with the Headings colour; 56px above the grid.
   ------------------------------------------------------------------------------------ */
.bp-team-all .bp-team { margin-top: 0; }
.bp-team-filter {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	margin: 0 0 56px;
}
.bp-team-filter button {
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm, 0);
	background: transparent;
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	font-weight: var(--wp--custom--font-weight--regular);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bp-team-filter button:hover { border-color: var(--wp--preset--color--contrast); }
.bp-team-filter button.is-active {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bp-team-list > li[hidden] { display: none; }

/* Where a section starts straight with content (no heading), keep it 56px under the rail
   label on desktop, like the headings elsewhere, so the label never runs into it. */
@media (min-width: 1181px) {
	.bp-team-all > .bp-rail-label + *,
	.bp-profile > .bp-rail-label + * { margin-top: 56px !important; }
}

/* ---------------------------------------------------------------------------------------
   Team profile (templates/single-team_member.html). Split: portrait (4:5, up to 640px)
   on the left, staying in view while the bio scrolls (sticky, 48px from the top); on the
   right, 112px away: a small "Leadership Team" link, the name (H1, Fraunces fluid 40-72),
   the title (19px muted), the contact/social squares (40px, outlined; LinkedIn, Facebook,
   Instagram, email, phone, only those filled in) and the bio (18/1.7, max 680px) under a
   hairline. Then "Articles by <first name>" (their posts, 3 across, 6 per page with
   numbers; the section disappears when there are none), testimonials about them (the Home
   quote design), and the closing band.
   ------------------------------------------------------------------------------------ */
.bp-profile {
	padding-top: 200px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 200px;
}
.bp-profile-grid {
	display: grid;
	grid-template-columns: minmax(0, 640px) minmax(0, 1fr);
	gap: 112px;
	align-items: start;
}
.bp-profile-grid > * { margin: 0 !important; }
.bp-profile-media { position: sticky; top: 48px; }
.bp-profile-photo {
	margin: 0;
	aspect-ratio: 4 / 5;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}
.bp-profile-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-profile-body { max-width: 760px; }
.bp-profile-body > * { margin-block: 0; }
.bp-profile-back {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
}
.bp-profile-back a { color: var(--wp--preset--color--contrast-alt); text-decoration: none; }
.bp-profile-back a::before { content: "\2190\00a0\00a0"; }
.bp-profile-back a:hover { color: var(--wp--preset--color--primary); }
.bp-profile-name {
	margin-top: 32px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: clamp(40px, calc(2.6vw + 22px), 72px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-variation-settings: "opsz" 144;
	color: var(--wp--preset--color--contrast);
}
.bp-profile-role {
	margin-top: 16px !important;
	font-size: 19px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-profile-body .rogiq-member-contact { gap: 8px; margin-top: 32px !important; }
.bp-profile-body .rogiq-member-contact a {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--sm, 0);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
}
.bp-profile-body .rogiq-member-contact a:hover,
.bp-profile-body .rogiq-member-contact a:focus-visible {
	background: var(--wp--preset--color--primary);
	box-shadow: none;
	color: var(--wp--preset--color--primary-contrast);
}
.bp-profile-body .rogiq-member-contact svg { width: 16px; height: 16px; }
.bp-profile-bio {
	margin-top: 48px !important;
	padding-top: 48px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-profile-bio > * { max-width: 680px; margin-block: 0 0; }
.bp-profile-bio > * + * { margin-top: 24px !important; }
.bp-profile-bio p { font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--body-text); }

/* Articles by a team member: post cards 3 across, 32px apart (rows 64px), 16:10 photo
   (zooms to 104% on hover), category 12px uppercase muted 24px below, title Fraunces 26,
   date 14px muted. Pagination: 40px squares, the current page filled. */
.bp-articles-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-articles-section > .bp-h2 { margin-top: 56px; }
.bp-posts { margin-top: 80px; }
.bp-post-grid {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 64px 32px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bp-post-grid > li { margin: 0; }
.bp-post-grid > li > * { margin-block: 0; }
.bp-post-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--border); }
.bp-post-photo a { display: block; height: 100%; }
.bp-post-photo img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-post-grid > li:hover .bp-post-photo img { transform: scale(1.04); }
.bp-post-cat {
	margin-top: 24px !important;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-post-cat a { color: inherit; text-decoration: none; }
.bp-post-title {
	margin-top: 12px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.25;
	letter-spacing: -0.01em;
}
.bp-post-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-post-title a:hover { color: var(--wp--preset--color--primary); }
.bp-post-date { margin-top: 12px !important; font-size: 14px; color: var(--wp--preset--color--contrast-alt); }
.bp-pagination { gap: 8px; margin-top: 64px !important; font-size: 14px; }
.bp-pagination .page-numbers,
.bp-pagination .wp-block-query-pagination-previous,
.bp-pagination .wp-block-query-pagination-next {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 40px;
	height: 40px;
	padding: 0 12px;
	box-sizing: border-box;
	border: 1px solid var(--wp--preset--color--border);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.bp-pagination .page-numbers.current {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

@media (max-width: 1180px) {
	.bp-profile { padding-top: 168px !important; padding-bottom: 96px !important; }
	.bp-profile-grid { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; }
	.bp-articles-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-articles-section > .bp-h2 { margin-top: 0; }
	.bp-posts { margin-top: 56px; }
	.bp-post-grid { gap: 48px 24px; }
	.bp-post-title { font-size: 22px; }
}
@media (max-width: 900px) {
	.bp-profile-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.bp-profile-media { position: static; max-width: 480px; }
	.bp-post-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 600px) {
	.bp-profile { padding-top: 120px !important; padding-bottom: 72px !important; }
	.bp-profile-name { margin-top: 24px !important; }
	.bp-profile-role { font-size: 17px; }
	.bp-profile-bio { margin-top: 40px !important; padding-top: 40px; }
	.bp-profile-bio p { font-size: 17px; }
	.bp-articles-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-posts { margin-top: 40px; }
	.bp-post-grid { grid-template-columns: minmax(0, 1fr); gap: 48px; }
	.bp-team-filter { margin-bottom: 40px; }
	.bp-team-filter button { height: 40px; padding: 0 14px; font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-post-photo img { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   Section glow (.bp-glow on any .bp-section; on by default in the staircase pattern): the
   hero's soft brand glow, placed in the top-right whitespace (secondary at 55% centred 70%
   across / 26% down, primary at 26% at 84% / 40%), blurred 56px, drifting slowly (24s).
   Kept clear of the edges so it is never cut off; behind the content. Tablets: smaller and
   fainter; phones: off (no spare whitespace there). Still for reduced motion and in the editor.
   ------------------------------------------------------------------------------------ */
.bp-section.bp-glow { isolation: isolate; overflow: hidden; }
.bp-section.bp-glow::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background:
		radial-gradient(20% 22% at 70% 26%, color-mix(in srgb, var(--wp--preset--color--secondary) 55%, transparent) 0%, transparent 100%),
		radial-gradient(16% 20% at 84% 40%, color-mix(in srgb, var(--wp--preset--color--primary) 26%, transparent) 0%, transparent 100%);
	filter: blur(56px);
	animation: bp-glow 24s ease-in-out infinite alternate;
}
@media (max-width: 1180px) {
	.bp-section.bp-glow::before {
		background:
			radial-gradient(26% 16% at 72% 18%, color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent) 0%, transparent 100%),
			radial-gradient(20% 14% at 84% 26%, color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent) 0%, transparent 100%);
	}
}
@media (max-width: 600px) {
	.bp-section.bp-glow::before { display: none; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-section.bp-glow::before { animation: none; }
}
.editor-styles-wrapper .bp-section.bp-glow::before { animation: none; }

/* ---------------------------------------------------------------------------------------
   Stats row, any number (.bp-stats.bp-stats-auto, pattern rogiq-base/stats-row): the What We
   Do stats with the columns sharing the width whatever the count. In a team member's bio
   (.bp-profile-bio) it sits 56px under the text, uses the full body width, 32px top padding,
   24px between columns, numbers Fraunces fluid 40-48px. ≤900 two per row; ≤600 two per row
   with 36px numbers.
   ------------------------------------------------------------------------------------ */
.bp-stats.bp-stats-auto { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.bp-profile-bio > .bp-stats { max-width: none; margin-top: 56px !important; }
.bp-profile-bio .bp-stats > .bp-stat { padding: 32px 24px 0; }
.bp-profile-bio .bp-stats > .bp-stat:first-child { padding-left: 0; }
.bp-profile-bio .bp-stat > .rogiq-stat-value { font-size: clamp(40px, calc(1vw + 26px), 48px); }
.bp-profile-bio .bp-stat > .bp-stat-label { margin-top: 10px !important; font-size: 15px; line-height: 1.5; }
@media (max-width: 900px) {
	.bp-stats.bp-stats-auto { grid-auto-flow: row; grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.bp-profile-bio .bp-stats > .bp-stat:nth-child(odd) { padding-left: 0; }
}
@media (max-width: 600px) {
	.bp-profile-bio .bp-stat > .rogiq-stat-value { font-size: 36px; }
	.bp-profile-bio .bp-stats > .bp-stat { padding: 24px 16px 0; }
}

/* ---------------------------------------------------------------------------------------
   Photo gallery mosaic (.bp-gallery, pattern rogiq-base/gallery-mosaic): a core Gallery laid
   out as a grid, 4 columns x 260px rows, 16px gaps, 80px under the heading; the first photo
   spans 2 columns and 2 rows (5 photos fill it exactly). Photos cover their cell and zoom to
   104% on hover (1.2s). ≤900: 2 columns, 220px rows, the first photo full width; ≤600: 160px.
   ------------------------------------------------------------------------------------ */
.bp-gallery-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-gallery-section > .bp-h2 { margin-top: 56px; }
.wp-block-gallery.bp-gallery {
	display: grid !important;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 260px;
	gap: 16px !important;
	margin: 80px 0 0 !important;
}
.wp-block-gallery.bp-gallery > figure.wp-block-image {
	width: auto !important;
	height: 100%;
	margin: 0 !important;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}
.wp-block-gallery.bp-gallery > figure.wp-block-image:first-child { grid-column: span 2; grid-row: span 2; }
.wp-block-gallery.bp-gallery > figure.wp-block-image img {
	width: 100% !important;
	height: 100% !important;
	object-fit: cover;
	transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.wp-block-gallery.bp-gallery > figure.wp-block-image:hover img { transform: scale(1.04); }

/* Team quotes (pattern rogiq-base/team-quotes): written-in slides in the quote design; the
   name links to the person's profile. */
.bp-quotes .bp-quote-name a { color: inherit; text-decoration: none; }
.bp-quotes .bp-quote-name a:hover { color: var(--wp--preset--color--primary); }
.bp-quotes .bp-quote > * { margin-block-start: 0; }

/* ---------------------------------------------------------------------------------------
   Application form section (.bp-apply, pattern rogiq-base/apply-form; anchor #apply). Two
   columns (5 : 7, 112px apart): heading + text + contact line on the left, the Gravity Forms
   form (classic "gravity-theme" markup, foundation styles in carousels.css) on the right,
   restyled to the Blueprint: labels 12px uppercase 0.14em, fields 56px tall, square, 1px
   border on the page background, Primary focus ring; required mark in Primary; the submit
   button = the Primary button (solid Primary, 14px uppercase 0.1em, 56px). The intro column is
   sticky beside the form on desktop. ≤1100 stacked.
   ------------------------------------------------------------------------------------ */
.bp-apply {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-apply-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 112px;
	align-items: start;
	margin-top: 56px;
}
.bp-apply-grid > * { margin: 0 !important; }
/* Side by side (>1100px): the intro stays in view while the form scrolls past, stopping
   level with the form's bottom (sticky within the grid row), 48px from the top. */
@media (min-width: 1101px) {
	.bp-apply-intro { position: sticky; top: 48px; }
}
.bp-apply-intro > * { margin-block: 0; }
.bp-apply-text {
	max-width: 480px;
	margin-top: 28px !important;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-apply-note { margin-top: 24px !important; font-size: 15px; color: var(--wp--preset--color--contrast-alt); }
.bp-apply-note a { color: var(--wp--preset--color--contrast); text-decoration: none; box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary); }
.bp-apply .gform_wrapper.gravity-theme .gform_fields { grid-column-gap: 24px; grid-row-gap: 28px; }
.bp-apply .gform_wrapper.gravity-theme .gfield_label,
.bp-apply .gform_wrapper.gravity-theme .gfield_label_before_complex,
.bp-apply .gform_wrapper.gravity-theme legend.gfield_label {
	margin: 0 0 10px;
	font-size: 12px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.bp-apply .gform_wrapper.gravity-theme .ginput_complex label,
.bp-apply .gform_wrapper.gravity-theme .gform-field-label--type-sub {
	margin-top: 6px;
	font-size: 13px;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-apply .gform_wrapper.gravity-theme .ginput_container input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.bp-apply .gform_wrapper.gravity-theme .ginput_container select,
.bp-apply .gform_wrapper.gravity-theme .rogiq-file-box {
	height: 56px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	font-size: 16px;
}
.bp-apply .gform_wrapper.gravity-theme .ginput_container textarea {
	height: 160px;
	min-height: 160px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: var(--wp--preset--color--base);
	font-size: 16px;
}
.bp-apply .gform_wrapper.gravity-theme .ginput_container select { padding-left: 16px; }
.bp-apply .gform_wrapper.gravity-theme .ginput_container input:focus,
.bp-apply .gform_wrapper.gravity-theme .ginput_container textarea:focus,
.bp-apply .gform_wrapper.gravity-theme .ginput_container select:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 0;
	border-color: var(--wp--preset--color--primary);
}
.bp-apply .rogiq-file-btn {
	border-radius: 0;
	font-size: 12px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bp-apply .gform_wrapper.gravity-theme .gfield_required { color: var(--wp--preset--color--primary); }
.bp-apply .gform_wrapper.gravity-theme .gfield--type-consent .ginput_container_consent {
	display: flex;
	align-items: flex-start;
	gap: 12px;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--body-text);
}
.bp-apply .gform_wrapper.gravity-theme .gfield--type-consent input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	accent-color: var(--wp--preset--color--primary);
}
.bp-apply .gform_wrapper.gravity-theme .gform_footer { margin-top: 36px; }
.bp-apply .gform_wrapper.gravity-theme .gform_footer .gform_button {
	height: 56px;
	padding: 0 34px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 0;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}
.bp-apply .gform_wrapper.gravity-theme .gform_footer .gform_button:hover {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}

/* Sub-page header with buttons (e.g. Thank You): left-aligned like the text. */
.bp-subhero .rogiq-hero-content > .rogiq-hero-buttons { justify-content: flex-start; align-items: flex-start; }

@media (max-width: 1180px) {
	.bp-gallery-section, .bp-apply { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-gallery-section > .bp-h2, .bp-apply-grid { margin-top: 0; }
	.wp-block-gallery.bp-gallery { margin-top: 56px !important; grid-auto-rows: 220px; }
	.bp-apply-grid { gap: 56px; }
}
@media (max-width: 1100px) {
	.bp-apply-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 900px) {
	.wp-block-gallery.bp-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); }
	.wp-block-gallery.bp-gallery > figure.wp-block-image:first-child { grid-row: span 1; }
}
@media (max-width: 600px) {
	.bp-gallery-section, .bp-apply { padding-top: 72px !important; padding-bottom: 72px !important; }
	.wp-block-gallery.bp-gallery { margin-top: 40px !important; grid-auto-rows: 160px; gap: 8px !important; }
	.bp-apply-text { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.wp-block-gallery.bp-gallery > figure.wp-block-image img { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   FAQ (.bp-faq-section, pattern rogiq-base/faq): intro (heading, line, Text link) 5 shares on
   the left, sticky on desktop; questions 7 shares on the right, 112px apart. Each question is a
   core Details block (.bp-faq-item): hairline above (and below the last), summary Fraunces
   24px with 28px padding and a plus that turns to a minus when open; the answer 17/1.7, max
   640px, fading in. One open at a time (blueprint.js). ≤1100 stacked; ≤600 20px questions.
   ------------------------------------------------------------------------------------ */
.bp-faq-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-faq-grid {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 112px;
	align-items: start;
	margin-top: 56px;
}
.bp-faq-grid > * { margin: 0 !important; }
.bp-faq-intro > * { margin-block: 0; }
.bp-faq-text {
	max-width: 440px;
	margin-top: 28px !important;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-faq-intro > .wp-block-buttons { margin-top: 32px !important; }
.bp-faq > .bp-faq-item {
	margin: 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-faq > .bp-faq-item:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.bp-faq-item > summary {
	position: relative;
	display: block;
	padding: 28px 56px 28px 0;
	list-style: none;
	cursor: pointer;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 24px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.3;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
	transition: color 0.2s ease;
}
.bp-faq-item > summary::-webkit-details-marker { display: none; }
.bp-faq-item > summary:hover { color: var(--wp--preset--color--primary); }
.bp-faq-item > summary:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 4px; }
.bp-faq-item > summary::before,
.bp-faq-item > summary::after {
	content: "";
	position: absolute;
	right: 8px;
	top: 50%;
	width: 16px;
	height: 1px;
	background: currentColor;
	transition: transform 0.3s ease;
}
.bp-faq-item > summary::after { transform: rotate(90deg); }
.bp-faq-item[open] > summary::after { transform: rotate(0deg); }
.bp-faq-item > :not(summary) {
	max-width: 640px;
	margin: 0 0 28px !important;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-faq-item[open] > :not(summary) { animation: bp-faq-in 0.4s ease both; }
@keyframes bp-faq-in { from { opacity: 0; transform: translateY(-4px); } }
@media (min-width: 1101px) {
	.bp-faq-intro { position: sticky; top: 48px; }
}
@media (max-width: 1180px) {
	.bp-faq-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-faq-grid { margin-top: 0; gap: 56px; }
}
@media (max-width: 1100px) {
	.bp-faq-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.bp-faq-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-faq-item > summary { padding: 22px 44px 22px 0; font-size: 20px; }
	.bp-faq-item > :not(summary) { font-size: 16px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-faq-item > summary::after { transition: none; }
	.bp-faq-item[open] > :not(summary) { animation: none; }
}

/* ---------------------------------------------------------------------------------------
   Slim link band (.bp-linkband, pattern rogiq-base/link-band): heading (bp-h2) 7 shares on the
   left; a line (18/1.7, max 520px) and a Text link 5 shares on the right, 112px apart, both
   resting on the same bottom line; 128px top/bottom. ≤1100 stacked (28px between).
   ------------------------------------------------------------------------------------ */
.bp-linkband {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-linkband-row {
	display: grid;
	grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
	gap: 28px 112px;
	align-items: end;
	margin-top: 56px;
}
.bp-linkband-row > * { margin: 0 !important; }
.bp-linkband-side > * { margin-block: 0; }
.bp-linkband-text {
	max-width: 520px;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-linkband-side > .wp-block-buttons { margin-top: 24px !important; }
@media (max-width: 1180px) {
	.bp-linkband { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-linkband-row { margin-top: 0; gap: 28px 56px; }
}
@media (max-width: 1100px) {
	.bp-linkband-row { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 600px) {
	.bp-linkband { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-linkband-text { font-size: 17px; }
}

/* ---------------------------------------------------------------------------------------
   Bento grid (.bp-bento, pattern rogiq-base/bento): 4 columns x 300px rows on 1px hairline
   gaps (the grid's border colour shows through), 80px under the heading. Photo tile 2 x 2
   (covers, settles in); stat tile (figure Fraunces 72 + label); text tile (Fraunces 26 kicker
   + label); quote tile 2 wide (Fraunces 30 quote with a secondary opening mark + attribution).
   Tiles 40px padding, contents at the bottom. ≤1100: 2 columns, photo full width 360px;
   ≤600: 1 column, auto heights, photo 280px.
   ------------------------------------------------------------------------------------ */
.bp-bento-section,
.bp-swap-section,
.bp-numlist-section,
.bp-zig-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-bento-section > .bp-h2,
.bp-numlist-section > .bp-h2,
.bp-zig-section > .bp-h2 { margin-top: 56px; }
.bp-bento {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	grid-auto-rows: 300px;
	gap: 1px;
	margin-top: 80px;
	border: 1px solid var(--wp--preset--color--border);
	background: var(--wp--preset--color--border);
}
.bp-bento > * { margin: 0 !important; background: var(--wp--preset--color--base); }
.bp-bento-photo { grid-column: span 2; grid-row: span 2; height: 100%; overflow: hidden; }
.bp-bento-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-bento-tile {
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	padding: 40px !important;
	box-sizing: border-box;
}
.bp-bento-tile > * { margin-block: 0; }
.bp-bento-quote { grid-column: span 2; }
.bp-bento-stat > .rogiq-stat-value {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 72px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
.bp-bento-kicker {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	color: var(--wp--preset--color--contrast);
}
.bp-bento-label {
	margin-top: 12px !important;
	font-size: 15px;
	line-height: 1.5;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-bento-quote-text {
	max-width: 620px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.3;
	color: var(--wp--preset--color--contrast);
}
.bp-bento-quote-text::before {
	content: "\201C";
	display: block;
	height: 40px;
	font-size: 72px;
	line-height: 0.9;
	color: var(--wp--preset--color--secondary);
}

/* ---------------------------------------------------------------------------------------
   Image-swap list (.bp-swap, pattern rogiq-base/image-swap): list 5 shares (heading, then
   topics) | photo 7 shares, 112px apart. Topics: hairline above each, 28px padding; number
   12px muted, title Fraunces 28 (muted until active), text 17px shown for the active topic
   only. Active topic: Primary bar on its left edge. The photo column is sticky (48px from
   the top), 4:5, images stacked and cross-fading (0.6s); the first is active until the
   script runs. ≤900: photo above (4:3), topics below; tap to switch.
   ------------------------------------------------------------------------------------ */
.bp-swap {
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	gap: 112px;
	align-items: start;
	margin-top: 56px;
}
.bp-swap > * { margin: 0 !important; }
.bp-swap-list > * { margin-block: 0; }
.bp-swap-list > .bp-h2 { margin-bottom: 56px !important; }
.bp-swap-item {
	position: relative;
	padding: 28px 0 28px 28px !important;
	border-top: 1px solid var(--wp--preset--color--border);
	cursor: pointer;
}
.bp-swap-item:last-child { border-bottom: 1px solid var(--wp--preset--color--border); }
.bp-swap-item::before {
	content: "";
	position: absolute;
	left: 0;
	top: 28px;
	bottom: 28px;
	width: 2px;
	background: var(--wp--preset--color--primary);
	transform: scaleY(0);
	transform-origin: top;
	transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-swap-item > * { margin-block: 0; }
.bp-swap-num {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-swap-title {
	margin-top: 10px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 28px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	color: var(--wp--preset--color--contrast-alt);
	transition: color 0.3s ease;
}
.bp-swap-text {
	display: grid;
	max-width: 440px;
	font-size: 17px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-swap.is-ready .bp-swap-item:not(.is-active) .bp-swap-text { display: none; }
.bp-swap-item.is-active .bp-swap-text { margin-top: 12px !important; animation: bp-faq-in 0.4s ease both; }
.bp-swap-item.is-active::before { transform: scaleY(1); }
.bp-swap-item.is-active .bp-swap-title,
.bp-swap-item:hover .bp-swap-title { color: var(--wp--preset--color--contrast); }
.bp-swap-media {
	position: sticky;
	top: 48px;
	aspect-ratio: 4 / 5;
	max-height: calc(100vh - 96px);
	width: 100%;
	overflow: hidden;
	background: var(--wp--preset--color--border);
}
.bp-swap-media > figure {
	position: absolute;
	inset: 0;
	margin: 0 !important;
	opacity: 0;
	transition: opacity 0.6s ease;
}
.bp-swap-media > figure:first-child,
.bp-swap.is-ready .bp-swap-media > figure.is-active { opacity: 1; }
.bp-swap.is-ready .bp-swap-media > figure:first-child:not(.is-active) { opacity: 0; }
.bp-swap-media img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* ---------------------------------------------------------------------------------------
   Editorial numbered list (.bp-numlist, pattern rogiq-base/numbered-list): full-width rows,
   hairline between (and below the last), 40px padding; columns 160px number (Fraunces 56,
   muted) | 5 shares title (Fraunces 32) | 6 shares text (17px) | 40px arrow. Hover: the row
   tints (alternate background) and slides in 16px, the arrow appears. A linked title makes
   the whole row clickable. ≤900: number | title + text; ≤600 number above.
   ------------------------------------------------------------------------------------ */
.bp-numlist { margin-top: 80px; border-bottom: 1px solid var(--wp--preset--color--border); }
.bp-numrow {
	position: relative;
	display: grid;
	grid-template-columns: 160px minmax(0, 5fr) minmax(0, 6fr) 40px;
	gap: 32px;
	align-items: baseline;
	margin: 0 !important;
	padding: 40px 0 !important;
	border-top: 1px solid var(--wp--preset--color--border);
	transition: background-color 0.4s ease, padding 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-numrow > * { margin: 0 !important; }
.bp-numrow::after {
	content: "\2192";
	align-self: center;
	justify-self: end;
	font-size: 20px;
	color: var(--wp--preset--color--primary);
	opacity: 0;
	transform: translateX(-8px);
	transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.2, 0.7, 0.2, 1);
}
.bp-numrow:hover { background: var(--wp--preset--color--base-alt); padding-left: 16px !important; padding-right: 16px !important; }
.bp-numrow:hover::after { opacity: 1; transform: none; }
.bp-numrow-num {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 56px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-numrow-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 32px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	letter-spacing: -0.01em;
	color: var(--wp--preset--color--contrast);
}
.bp-numrow-title a { color: inherit; text-decoration: none; }
.bp-numrow-title a::after { content: ""; position: absolute; inset: 0; }
.bp-numrow-text { max-width: 560px; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--body-text); }

/* ---------------------------------------------------------------------------------------
   Zig-zag image rows (.bp-zig, pattern rogiq-base/zigzag): rows of photo | text (equal
   columns, 112px apart, vertically centred), 128px between rows, 80px under the heading;
   every second row puts the photo on the right. Photo 4:3, covers, settles in (bp-settle).
   Text: 12px label, title Fraunces 40, paragraph 18/1.7 at 520px, Text link 32px below.
   ≤900 stacked (photo first); ≤600 title 30px.
   ------------------------------------------------------------------------------------ */
.bp-zig { display: grid; gap: 128px; margin-top: 80px; }
.bp-zig-row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
	gap: 112px;
	align-items: center;
	margin: 0 !important;
}
.bp-zig-row > * { margin: 0 !important; }
.bp-zig-row:nth-child(even) > .bp-zig-photo { order: 2; }
.bp-zig-photo { aspect-ratio: 4 / 3; }
.bp-zig-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.bp-zig-text > * { margin-block: 0; }
.bp-zig-label { font-size: 12px; line-height: 16px; letter-spacing: 0.2em; color: var(--wp--preset--color--contrast-alt); }
.bp-zig-title {
	margin-top: 20px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.15;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}
.bp-zig-body { max-width: 520px; margin-top: 20px !important; font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-zig-text > .wp-block-buttons { margin-top: 32px !important; }

/* Hero / sub-header buttons: Candidates-style header with two buttons uses the same left
   alignment as Thank You (rule above). Editor: show every image-swap photo in a strip. */
.editor-styles-wrapper .bp-swap-media { position: static; aspect-ratio: auto; max-height: none; display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; background: none; }
.editor-styles-wrapper .bp-swap-media > figure { position: static; opacity: 1; aspect-ratio: 4 / 5; }
.editor-styles-wrapper .bp-swap-text { display: grid !important; }

@media (max-width: 1180px) {
	.bp-bento-section, .bp-swap-section, .bp-numlist-section, .bp-zig-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-bento-section > .bp-h2, .bp-numlist-section > .bp-h2, .bp-zig-section > .bp-h2, .bp-swap { margin-top: 0; }
	.bp-bento, .bp-numlist, .bp-zig { margin-top: 56px; }
	.bp-swap, .bp-zig-row { gap: 56px; }
	.bp-zig { gap: 96px; }
	.bp-numrow { grid-template-columns: 112px minmax(0, 5fr) minmax(0, 6fr) 32px; gap: 24px; }
	.bp-numrow-num { font-size: 44px; }
	.bp-numrow-title { font-size: 26px; }
}
@media (max-width: 1100px) {
	.bp-bento { grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: auto; }
	.bp-bento-photo { grid-column: span 2; grid-row: auto; height: 360px; }
	.bp-bento-tile { min-height: 240px; }
}
@media (max-width: 900px) {
	.bp-swap { grid-template-columns: minmax(0, 1fr); }
	.bp-swap-media { position: relative; top: 0; order: -1; aspect-ratio: 4 / 3; max-height: none; }
	.bp-numrow { grid-template-columns: 88px minmax(0, 1fr); row-gap: 12px; }
	.bp-numrow::after { display: none; }
	.bp-numrow-text { grid-column: 2; }
	.bp-zig-row { grid-template-columns: minmax(0, 1fr); }
	.bp-zig-row:nth-child(even) > .bp-zig-photo { order: 0; }
}
@media (max-width: 600px) {
	.bp-bento-section, .bp-swap-section, .bp-numlist-section, .bp-zig-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-bento { grid-template-columns: minmax(0, 1fr); }
	.bp-bento-photo, .bp-bento-quote { grid-column: auto; }
	.bp-bento-photo { height: 280px; }
	.bp-bento-tile { min-height: 0; padding: 28px !important; }
	.bp-bento-stat > .rogiq-stat-value { font-size: 56px; }
	.bp-bento-quote-text { font-size: 24px; }
	.bp-swap-title { font-size: 24px; }
	.bp-numrow { grid-template-columns: minmax(0, 1fr); padding: 28px 0 !important; }
	.bp-numrow-text { grid-column: auto; }
	.bp-numrow-num { font-size: 36px; }
	.bp-numrow:hover { padding-left: 0 !important; padding-right: 0 !important; background: none; }
	.bp-zig { gap: 64px; }
	.bp-zig-title { font-size: 30px; }
	.bp-zig-body { font-size: 17px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-swap-media > figure, .bp-swap-item::before, .bp-numrow, .bp-numrow::after { transition: none; }
	.bp-swap-item.is-active .bp-swap-text { animation: none; }
}

/* ---------------------------------------------------------------------------------------
   Roles we place (.bp-roles, pattern rogiq-base/expertise-roles; Expertise pages): rail
   label, heading 56px under it, intro 18/1.7 at 640px 32px below, then a List block in two
   columns (820px each at 1920, 112px apart) 80px below. Items fill column 1 top to bottom,
   then column 2 (--bp-rows from the plugin; the editor shows them left to right). Each item:
   hairline, 24px padding, automatic number (12px, 0.14em, muted) in a 56px column, role
   Fraunces 26px. ≤1180: 96px padding, 56px gaps, 22px roles; ≤900 one column; ≤600 72px
   padding, 20px roles.
   ------------------------------------------------------------------------------------ */
.bp-roles-section {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-roles-section > .bp-h2 { margin-top: 56px; }
.bp-roles-intro {
	max-width: 640px;
	margin-top: 32px !important;
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--body-text);
}
.bp-roles {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	grid-template-rows: repeat(var(--bp-rows, 1), auto);
	grid-auto-flow: column;
	column-gap: 112px;
	margin: 80px 0 0 !important;
	padding: 0 !important;
	list-style: none;
	counter-reset: bp-role;
}
.bp-roles > li {
	display: grid;
	grid-template-columns: 56px minmax(0, 1fr);
	align-items: baseline;
	margin: 0 !important;
	padding: 24px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
	counter-increment: bp-role;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.bp-roles > li::before {
	content: counter(bp-role, decimal-leading-zero);
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: 0.14em;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-roles > li:first-child,
.bp-roles > li.bp-col-top { border-top: 1px solid var(--wp--preset--color--border); }
.editor-styles-wrapper .bp-roles { grid-auto-flow: row; grid-template-rows: none; }
.editor-styles-wrapper .bp-roles > li:nth-child(2) { border-top: 1px solid var(--wp--preset--color--border); }
@media (max-width: 1180px) {
	.bp-roles-section { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-roles-section > .bp-h2 { margin-top: 0; }
	.bp-roles { margin-top: 56px !important; column-gap: 56px; }
	.bp-roles > li { font-size: 22px; }
}
@media (max-width: 900px) {
	.bp-roles { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-auto-flow: row; }
	.bp-roles > li.bp-col-top { border-top: 0; }
}
@media (max-width: 600px) {
	.bp-roles-section { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-roles-intro { font-size: 17px; }
	.bp-roles > li { grid-template-columns: 44px minmax(0, 1fr); padding: 18px 0; font-size: 20px; }
}

/* ---------------------------------------------------------------------------------------
   Contact section (.bp-contact, pattern rogiq-base/contact-form): the application-form
   layout (.bp-apply) with the firm's details under the intro: 48px below the text, rows on
   hairlines (20px padding), 96px label column (12px uppercase 0.14em, muted) | value 18px
   (links in the text colour, secondary underline on hover). Social icons = the footer's
   40px outlined squares. A row whose value is empty (field not set in Site Settings) hides.
   ------------------------------------------------------------------------------------ */
.bp-contact-details { margin-top: 48px !important; border-bottom: 1px solid var(--wp--preset--color--border); }
.bp-contact-item {
	display: grid;
	grid-template-columns: 96px minmax(0, 1fr);
	gap: 24px;
	align-items: baseline;
	margin: 0 !important;
	padding: 20px 0;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-contact-item > * { margin: 0 !important; }
.bp-contact-item:has(> .bp-contact-value:empty) { display: none; }
.bp-contact-label {
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-contact-value { font-size: 18px; line-height: 1.6; color: var(--wp--preset--color--contrast); }
.bp-contact-value a { color: inherit; text-decoration: none; transition: box-shadow 0.3s ease; }
.bp-contact-value a:not(.rogiq-social-icon):hover,
.bp-contact-value a:not(.rogiq-social-icon):focus-visible { box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary); }
.bp-contact-item:has(.rogiq-social-icons) { align-items: center; }
.bp-contact .rogiq-social-icons { gap: 8px; }
.bp-contact .rogiq-social-icon {
	width: 40px;
	height: 40px;
	border-radius: var(--wp--custom--radius--sm);
	background: transparent;
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--border);
}
.bp-contact .rogiq-social-icon::before { width: 18px; height: 18px; background-color: var(--wp--preset--color--contrast); }
.bp-contact .rogiq-social-icon:hover,
.bp-contact .rogiq-social-icon:focus-visible { background: var(--wp--preset--color--primary); box-shadow: none; }
.bp-contact .rogiq-social-icon:hover::before,
.bp-contact .rogiq-social-icon:focus-visible::before { background-color: var(--wp--preset--color--primary-contrast); }
@media (max-width: 600px) {
	.bp-contact-details { margin-top: 40px !important; }
	.bp-contact-item { grid-template-columns: 80px minmax(0, 1fr); gap: 16px; padding: 16px 0; }
	.bp-contact-value { font-size: 17px; }
}

/* ---------------------------------------------------------------------------------------
   Insights listing (templates/home.html + category.html, section .bp-insights): 128px
   padding; topic filter 56px under the rail label (44px outlined buttons, the current one
   filled), featured newest article 56px below (photo | text, equal halves, 112px apart,
   centred: topic, title Fraunces 48, excerpt 18/1.7, "By Name · date", Read Article), then
   the other articles 3 across (.bp-post-grid cards) 112px below, numbered pages. ≤1180:
   96px padding; ≤1100 featured stacks (title 36); ≤600 72px padding, title 28.
   ------------------------------------------------------------------------------------ */
.bp-insights {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-insights-filter { margin-top: 56px !important; }
.bp-insights-filter:empty { display: none; }
.bp-insights-filter .rogiq-blog-filter { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; }
.bp-insights-filter .rogiq-blog-filter-sep { display: none; }
.bp-insights-filter .rogiq-blog-filter a {
	display: inline-flex;
	align-items: center;
	height: 44px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: var(--wp--custom--radius--sm, 0);
	font-family: var(--wp--preset--font-family--body);
	font-size: 13px;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.bp-insights-filter .rogiq-blog-filter a:hover { border-color: var(--wp--preset--color--contrast); color: var(--wp--preset--color--contrast); }
.bp-insights-filter .rogiq-blog-filter a[aria-current="page"] {
	border-color: var(--wp--preset--color--contrast);
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bp-feature { margin-top: 56px; }
.bp-insights > .bp-feature:first-child,
.bp-insights > .bp-rail-label + .bp-feature { margin-top: 56px; }
.bp-feature-list { margin: 0; padding: 0; list-style: none; }
.bp-feature-list > li {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 112px;
	align-items: center;
	margin: 0;
}
.bp-feature-list > li > * { margin: 0 !important; }
.bp-feature-photo { aspect-ratio: 16 / 10; overflow: hidden; background: var(--wp--preset--color--border); }
.bp-feature-photo a { display: block; height: 100%; }
.bp-feature-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bp-feature-list > li:hover .bp-feature-photo img { transform: scale(1.04); }
.bp-feature-body > * { margin-block: 0; }
.bp-feature-body > .bp-post-cat { margin-top: 0 !important; }
.bp-feature-title {
	margin-top: 20px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 48px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.12;
	letter-spacing: -0.02em;
}
.bp-feature-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-feature-title a:hover { color: var(--wp--preset--color--primary); }
.bp-feature-excerpt { margin-top: 24px !important; max-width: 560px; font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-feature-excerpt p { margin: 0; }
.bp-post-meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; margin-top: 24px !important; font-size: 14px; color: var(--wp--preset--color--contrast-alt); }
.bp-post-meta > * { margin: 0 !important; }
.bp-post-meta > .bp-post-date { margin: 0 !important; }
.bp-post-meta:has(.bp-post-author) > .bp-post-date::before { content: "\00B7"; margin-right: 10px; }
.bp-post-author a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-post-author a:hover { box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary); }
.bp-feature-more {
	display: inline-block;
	margin-top: 32px !important;
	padding-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary);
}
.bp-feature-more::after { content: " \2192"; }
.bp-insights .bp-posts { margin-top: 112px; }
.bp-insights .wp-block-query-no-results { margin: 0; }

/* ---------------------------------------------------------------------------------------
   Article (templates/single.html): photo header = the featured image (plugin), topic as the
   eyebrow, title Fraunces fluid 40 → 64 (max 1100), "By Name · date" 16px. Body: a 720px
   reading column centred in the content area, 128px padding: paragraphs 19/1.75, H2
   Fraunces 36 (64 above, 20 below), H3 26, quotes Fraunces 28 with a 2px secondary rule,
   images the column width with 14px captions. Author card 80px below on a hairline. Related
   articles (alt) = the article cards; closing band from Post Settings > Posts.
   ------------------------------------------------------------------------------------ */
.bp-article-hero .rogiq-hero-content > h1 { max-width: 1100px; font-size: clamp(40px, 1.6vw + 33px, 64px); line-height: 1.1; }
.bp-article-cat a { color: inherit; text-decoration: none; }
.bp-article-meta { display: flex; flex-wrap: wrap; gap: 0 10px; margin-top: 28px !important; font-size: 16px; }
.bp-article-meta > * { margin: 0 !important; }
.bp-article-meta:has(.bp-post-author) > .wp-block-post-date::before { content: "\00B7"; margin-right: 10px; }
/* Inside a photo header the palette is inverted (contrast = the light text colour), as for
   the header's intro line. */
.bp-hero .bp-article-meta,
.bp-hero .bp-article-meta a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-article {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-article-body,
.bp-article-author { max-width: 720px; margin-inline: auto !important; }
.bp-article-body > * { margin-block: 0; }
.bp-article-body > * + * { margin-top: 28px; }
.bp-article-body p,
.bp-article-body li { font-size: 19px; line-height: 1.75; color: var(--wp--preset--color--body-text); }
.bp-article-body > p:first-child { font-size: 22px; line-height: 1.65; color: var(--wp--preset--color--contrast); }
.bp-article-body h2 {
	margin-top: 64px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 36px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--contrast);
}
.bp-article-body h3 {
	margin-top: 48px;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.25;
	color: var(--wp--preset--color--contrast);
}
.bp-article-body h2 + *,
.bp-article-body h3 + * { margin-top: 20px; }
.bp-article-body a { color: var(--wp--preset--color--contrast); text-decoration: none; box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary); }
.bp-article-body ul,
.bp-article-body ol { padding-left: 1.2em; }
.bp-article-body li + li { margin-top: 8px; }
.bp-article-body blockquote {
	margin: 48px 0 0;
	padding: 0 0 0 32px;
	border-left: 2px solid var(--wp--preset--color--secondary);
}
.bp-article-body blockquote p { font-family: var(--wp--preset--font-family--heading); font-size: 28px; line-height: 1.35; color: var(--wp--preset--color--contrast); }
.bp-article-body blockquote cite { display: block; margin-top: 16px; font-size: 14px; font-style: normal; color: var(--wp--preset--color--contrast-alt); }
.bp-article-body figure { margin-top: 48px; }
.bp-article-body figure img { display: block; width: 100%; height: auto; }
.bp-article-body figcaption { margin-top: 12px; font-size: 14px; color: var(--wp--preset--color--contrast-alt); }
.bp-article-author { margin-top: 80px !important; }
.bp-article-author:empty { display: none; }
.bp-article-author .rogiq-author-card {
	margin: 0;
	padding: 40px 0 0;
	border: 0;
	border-top: 1px solid var(--wp--preset--color--border);
	border-radius: 0;
	background: none;
	box-shadow: none;
}
.bp-article-author .rogiq-author-card__head { display: flex; align-items: center; gap: 24px; }
.bp-article-author .rogiq-author-card__photo { flex: none; width: 88px; height: 88px; overflow: hidden; border-radius: 0; }
.bp-article-author .rogiq-author-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.bp-article-author .rogiq-author-card__name { margin: 0; font-family: var(--wp--preset--font-family--heading); font-size: 24px; font-weight: var(--wp--custom--font-weight--default); line-height: 1.25; }
.bp-article-author .rogiq-author-card__name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-article-author .rogiq-author-card__role {
	margin: 4px 0 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	font-weight: var(--wp--custom--font-weight--regular, 400);
	letter-spacing: normal;
	text-transform: none;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-article-author .rogiq-author-card__bio { margin: 24px 0 0; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-article-author .rogiq-author-card__foot { margin: 20px 0 0; }
.bp-article-author .rogiq-author-card__foot a {
	display: inline-block;
	padding-bottom: 6px;
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
	box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary);
}
@media (max-width: 1180px) {
	.bp-insights, .bp-article { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-insights-filter { margin-top: 0 !important; }
	.bp-feature { margin-top: 48px; }
	.bp-feature-list > li { gap: 56px; }
	.bp-feature-title { font-size: 40px; }
	.bp-insights .bp-posts { margin-top: 80px; }
}
@media (max-width: 1100px) {
	.bp-feature-list > li { grid-template-columns: minmax(0, 1fr); gap: 40px; }
	.bp-feature-title { font-size: 36px; }
}
@media (max-width: 600px) {
	.bp-insights, .bp-article { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-feature { margin-top: 40px; }
	.bp-feature-list > li { gap: 28px; }
	.bp-feature-title { font-size: 28px; }
	.bp-feature-excerpt { font-size: 17px; }
	.bp-insights .bp-posts { margin-top: 64px; }
	.bp-article-meta { font-size: 15px; margin-top: 20px !important; }
	.bp-article-body p, .bp-article-body li { font-size: 17px; }
	.bp-article-body > p:first-child { font-size: 19px; }
	.bp-article-body h2 { margin-top: 48px; font-size: 28px; }
	.bp-article-body h3 { font-size: 22px; }
	.bp-article-body blockquote { padding-left: 20px; }
	.bp-article-body blockquote p { font-size: 22px; }
	.bp-article-author { margin-top: 56px !important; }
	.bp-article-author .rogiq-author-card__head { gap: 16px; }
	.bp-article-author .rogiq-author-card__photo { width: 72px; height: 72px; }
}

/* ---------------------------------------------------------------------------------------
   Article extras: "All Insights" back link above the topic in the header (the profile back
   link style, light on a photo); table of contents ([rogiq_toc], 2+ headings). Desktop
   (>1180): three columns (1fr | 720 | 1fr, 64px gaps); the contents sit in the left column,
   56px under the rail label, sticky 48px from the top: "In this article" eyebrow, then links
   15px on a 1px left rule, the current section in Primary (blueprint.js). ≤1180: above the
   article text in the 720 column, hairlines above and below, not sticky.
   ------------------------------------------------------------------------------------ */
.bp-article-back { margin: 0 0 24px !important; }
.bp-hero .bp-article-back a { color: var(--wp--preset--color--contrast); opacity: 0.8; }
.bp-hero .bp-article-back a:hover { opacity: 1; color: var(--wp--preset--color--contrast); }
.bp-article-grid > * { margin: 0 !important; }
.bp-article-toc:empty { display: none; }
/* The foundation's TOC is a grey panel, hidden below 1100px: here it is a plain list. */
.bp-article-toc .rogiq-toc { display: block !important; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; }
.bp-article-toc .rogiq-eyebrow { margin: 0 0 20px; }
.bp-article-toc ol { margin: 0; padding: 0; list-style: none; }
.bp-article-toc li { margin: 0; }
.bp-article-toc a {
	display: block;
	padding: 10px 0 10px 18px;
	border-left: 1px solid var(--wp--preset--color--border);
	font-size: 15px;
	line-height: 1.45;
	text-decoration: none;
	color: var(--wp--preset--color--contrast-alt);
	transition: color 0.2s ease, border-color 0.2s ease;
}
.bp-article-toc li.is-h3 a { padding-left: 34px; font-size: 14px; }
.bp-article-toc a:hover { color: var(--wp--preset--color--contrast); }
.bp-article-toc a.is-current { border-left: 2px solid var(--wp--preset--color--primary); padding-left: 17px; color: var(--wp--preset--color--contrast); }
.bp-article-toc li.is-h3 a.is-current { padding-left: 33px; }
.bp-article-body h2,
.bp-article-body h3 { scroll-margin-top: 48px; }
@media (min-width: 1181px) {
	.bp-article-grid {
		display: grid;
		grid-template-columns: minmax(0, 1fr) 720px minmax(0, 1fr);
		column-gap: 64px;
		align-items: start;
	}
	.bp-article-toc { grid-column: 1; margin-top: 56px !important; position: sticky; top: 48px; max-width: 360px; }
	.bp-article-main { grid-column: 2; grid-row: 1; }
	.bp-article-main .bp-article-body,
	.bp-article-main .bp-article-author { max-width: none; }
}
@media (max-width: 1180px) {
	.bp-article-toc { max-width: 720px; margin: 0 auto 56px !important; padding: 28px 0; border-top: 1px solid var(--wp--preset--color--border); border-bottom: 1px solid var(--wp--preset--color--border); }
}
@media (max-width: 600px) {
	.bp-article-toc { margin-bottom: 40px !important; padding: 24px 0; }
}


/* ---------------------------------------------------------------------------------------
   Plain pages: content with no header section and no Blueprint sections (e.g. the Sitemap,
   [custom_sitemap] on the default page template) starts below the floating menu, like the
   team profiles: 200px top / 128px bottom; ≤1180 168 / 96; ≤600 120 / 72. Content stays in
   the theme's constrained column (centred).
   ------------------------------------------------------------------------------------ */
.wp-site-blocks > main:not(:has(.rogiq-page-banner, .bp-hero, .bp-section)) {
	padding: 200px 40px 128px; /* side margins as elsewhere: 40px, 16px on phones */
}
/* The page content's own global padding would add ~20–25px on top of these margins. */
.wp-site-blocks > main:not(:has(.rogiq-page-banner, .bp-hero, .bp-section)) > .wp-block-post-content.has-global-padding { padding-left: 0; padding-right: 0; }
@media (max-width: 1180px) {
	.wp-site-blocks > main:not(:has(.rogiq-page-banner, .bp-hero, .bp-section)) { padding-top: 168px; padding-bottom: 96px; }
}
@media (max-width: 600px) {
	.wp-site-blocks > main:not(:has(.rogiq-page-banner, .bp-hero, .bp-section)) { padding: 120px 16px 72px; }
}

/* ---------------------------------------------------------------------------------------
   Expertise listing (templates/archive-industry.html, .bp-xp-archive): photo header (Post
   Settings > Expertise), then 128px padding, heading 56px under the rail label, intro 18/1.7
   at 640px 32px below, every area 80px below as cards 3 across (the article cards: 16:10
   photo zooming on hover, name Fraunces 26 24px below, the tile text 17/1.7 12px below,
   Explore link 20px below); 2 across ≤900, 1 on phones. Closing band from Post Settings.
   ------------------------------------------------------------------------------------ */
.bp-xp-archive {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-xp-archive > .bp-h2 { margin-top: 56px; }
.bp-xp-archive-intro { max-width: 640px; margin-top: 32px !important; font-size: 18px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-xp-cards .bp-post-title { margin-top: 24px !important; }
.bp-xp-card-text { margin-top: 12px !important; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-xp-card-text p { margin: 0; }
.bp-xp-cards .bp-xp-card-more { margin-top: 20px !important; }
@media (max-width: 1180px) {
	.bp-xp-archive { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-xp-archive > .bp-h2 { margin-top: 0; }
}
@media (max-width: 600px) {
	.bp-xp-archive { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-xp-archive-intro, .bp-xp-card-text { font-size: 17px; }
}

/* ---------------------------------------------------------------------------------------
   Case Studies listing (templates/archive-case_study.html, .bp-cs-archive): photo header
   (Post Settings > Case Studies), 128px padding, Expertise filter 56px under the rail label
   (the Insights filter buttons), then featured cards TWO across (820px each at 1920, 112px
   apart, 112px between rows): 3:2 photo zooming on hover; Expertise area 12px uppercase
   32px below; title Fraunces 36 16px below; client 15px muted 12px below; summary 17/1.7 20px
   below; two outcome stats on a hairline 32px below (value Fraunces 40 Primary, label 14px
   muted); "Read the Case Study" 32px below. ≤1180: 56px gaps, title 30, values 34; ≤900 one
   column; ≤600 72px padding, title 26, values 30. Related case studies use the same cards.
   ------------------------------------------------------------------------------------ */
.bp-cs-archive,
.bp-cs-related {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-cs-archive > .bp-insights-filter { margin-top: 56px !important; }
.bp-cs-archive > .bp-cs-list { margin-top: 56px; }
.bp-cs-archive > .bp-insights-filter:empty + .bp-cs-list { margin-top: 56px; }
.bp-cs-related > .bp-h2 { margin-top: 56px; }
.bp-cs-related > .bp-cs-list { margin-top: 80px; }
.bp-cs-grid {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 112px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.bp-cs-grid > li { display: flex; flex-direction: column; margin: 0; }
.bp-cs-grid > li > * { margin-block: 0; }
.bp-cs-photo { aspect-ratio: 3 / 2; overflow: hidden; background: var(--wp--preset--color--border); }
.bp-cs-photo a { display: block; height: 100%; }
.bp-cs-photo img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s cubic-bezier(0.2, 0.7, 0.2, 1); }
.bp-cs-grid > li:hover .bp-cs-photo img { transform: scale(1.04); }
.bp-cs-area {
	margin-top: 32px !important;
	font-size: 12px;
	line-height: 16px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-cs-area:empty { display: none; }
.bp-cs-area a { color: inherit; text-decoration: none; }
.bp-cs-area a:hover { color: var(--wp--preset--color--primary); }
.bp-cs-title {
	margin-top: 16px !important;
	font-family: var(--wp--preset--font-family--heading);
	font-size: 36px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.18;
	letter-spacing: -0.015em;
}
.bp-cs-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-cs-title a:hover { color: var(--wp--preset--color--primary); }
.bp-cs-client { margin-top: 12px !important; font-size: 15px; line-height: 1.5; color: var(--wp--preset--color--contrast-alt); }
.bp-cs-client:empty { display: none; }
.bp-cs-excerpt { margin-top: 20px !important; max-width: 640px; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-cs-excerpt p { margin: 0; }
.bp-cs-stats {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 32px;
	margin: 32px 0 0;
	padding-top: 24px;
	border-top: 1px solid var(--wp--preset--color--border);
}
.bp-cs-stat { margin: 0; }
.bp-cs-stat dt {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 40px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.05;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary);
}
.bp-cs-stat dd { margin: 8px 0 0; font-size: 14px; line-height: 1.45; color: var(--wp--preset--color--contrast-alt); }
.bp-cs-grid .bp-cs-more { align-self: flex-start; margin-top: 32px !important; }
.bp-cs-grid .bp-cs-stats { margin-top: 32px; } /* beats the card's "no margins" reset */
.bp-cs-empty { margin: 0; font-size: 17px; color: var(--wp--preset--color--contrast-alt); }

/* Case study page (templates/single-case_study.html): photo header = featured image (back
   link, Expertise area, title, client as the lead line). "At a glance" (alt): the outcome
   stats large (Fraunces 64 Primary, 3 across on a hairline), then the facts 5 across (label
   12px uppercase muted, value 17px) 64px below. Then the story in the article layout
   (contents list + 720px column) and related case studies (alt). */
.bp-cs-glance {
	padding-top: 128px !important;
	padding-bottom: 128px !important;
	--bp-label-top: 128px;
}
.bp-cs-glance > .bp-cs-glance-stats { margin-top: 56px !important; }
.bp-cs-glance-stats:empty, .bp-cs-glance-facts:empty { display: none; }
.bp-cs-glance-stats .bp-cs-stats { margin: 0; gap: 64px; padding-top: 32px; }
.bp-cs-glance-stats .bp-cs-stat dt { font-size: 64px; }
.bp-cs-glance-stats .bp-cs-stat dd { margin-top: 12px; font-size: 15px; }
.bp-cs-glance > .bp-cs-glance-facts { margin-top: 64px !important; }
.bp-cs-glance > .bp-cs-glance-stats:empty + .bp-cs-glance-facts { margin-top: 56px !important; }
.bp-cs-facts {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(0, 1fr);
	gap: 0 32px;
	margin: 0;
}
.bp-cs-fact { margin: 0; padding-top: 20px; border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 14%, transparent); }
.bp-cs-fact dt { font-size: 12px; line-height: 16px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--contrast-alt); }
.bp-cs-fact dd { margin: 8px 0 0; font-size: 17px; line-height: 1.5; color: var(--wp--preset--color--contrast); }
.bp-cs-fact dd a { color: inherit; text-decoration: none; box-shadow: inset 0 -1px 0 var(--wp--preset--color--secondary); }
.bp-cs-lead:empty, .bp-cs-hero .bp-article-cat:empty { display: none; }
.bp-cs-hero .bp-article-cat a { color: inherit; text-decoration: none; }
.bp-cs-hero .rogiq-hero-content > h1 { max-width: 1100px; font-size: clamp(40px, 1.6vw + 33px, 64px); line-height: 1.1; }
@media (max-width: 1180px) {
	.bp-cs-archive, .bp-cs-related, .bp-cs-glance { padding-top: 96px !important; padding-bottom: 96px !important; }
	.bp-cs-archive > .bp-insights-filter, .bp-cs-glance > .bp-cs-glance-stats { margin-top: 0 !important; }
	.bp-cs-related > .bp-h2 { margin-top: 0; }
	.bp-cs-archive > .bp-cs-list { margin-top: 48px; }
	.bp-cs-related > .bp-cs-list { margin-top: 56px; }
	.bp-cs-grid { gap: 72px 56px; }
	.bp-cs-title { font-size: 30px; }
	.bp-cs-stat dt { font-size: 34px; }
	.bp-cs-glance-stats .bp-cs-stats { gap: 40px; }
	.bp-cs-glance-stats .bp-cs-stat dt { font-size: 48px; }
	.bp-cs-facts { grid-auto-flow: row; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px 32px; }
}
@media (max-width: 900px) {
	.bp-cs-grid { grid-template-columns: minmax(0, 1fr); gap: 72px; }
}
@media (max-width: 600px) {
	.bp-cs-archive, .bp-cs-related, .bp-cs-glance { padding-top: 72px !important; padding-bottom: 72px !important; }
	.bp-cs-archive > .bp-cs-list { margin-top: 40px; }
	.bp-cs-grid { gap: 56px; }
	.bp-cs-area { margin-top: 24px !important; }
	.bp-cs-title { font-size: 26px; }
	.bp-cs-excerpt { font-size: 17px; }
	.bp-cs-stat dt { font-size: 30px; }
	.bp-cs-glance-stats .bp-cs-stats { grid-auto-flow: row; grid-template-columns: minmax(0, 1fr); gap: 28px; }
	.bp-cs-glance-stats .bp-cs-stat dt { font-size: 44px; }
	.bp-cs-glance > .bp-cs-glance-facts { margin-top: 48px !important; }
	.bp-cs-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px 24px; }
}

/* ---------------------------------------------------------------------------------------
   Header load-in (replaces the foundation's frosted glass + light sweep, 2026-10-19). Photo
   headers: the header's ::after becomes a copy of its photo under the dark overlay
   (::before) and settles from 108% to 100% over 2.8s, the same ease as the photo settle
   elsewhere. Text: eyebrow fades up (0.1s), the heading reveals from behind a mask (main
   line 0.3s, italic line 0.5s, 0.9s each), then the intro (0.75s) and buttons (0.9s). The
   glow header keeps its drifting glow. Off in the editor and for reduced motion.
   ------------------------------------------------------------------------------------ */
.rogiq-page-banner.bp-hero:not(.is-hero-glow) { isolation: isolate; }
.rogiq-page-banner.bp-hero:not(.is-hero-glow)::after {
	z-index: -1;
	opacity: 1;
	background-color: transparent;
	background-image: inherit;
	background-size: cover;
	background-position: inherit;
	background-repeat: no-repeat;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	animation: bp-hero-settle 2.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) both;
}
@keyframes bp-hero-settle {
	from { transform: scale(1.08); }
	to { transform: none; }
}
.bp-hero .rogiq-hero-content > h1 { animation: bp-line-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.3s both; }
.bp-hero .rogiq-hero-content > h1 em { animation: bp-line-in 0.9s cubic-bezier(0.2, 0.7, 0.2, 1) 0.5s both; }
.bp-hero .rogiq-hero-content > .rogiq-hero-lead { animation-delay: 0.75s; }
.bp-hero .rogiq-hero-content > .rogiq-hero-buttons { animation-delay: 0.9s; }
/* The line rises into place while its visible area stays where the line will rest (a mask). */
@keyframes bp-line-in {
	from { transform: translateY(100%); clip-path: inset(-100% -5% 100% -5%); }
	to { transform: none; clip-path: inset(-15% -5% -30% -5%); }
}
.rogiq-page-banner.bp-hero.block-editor-block-list__block::after,
.editor-styles-wrapper .bp-hero .rogiq-hero-content > h1,
.editor-styles-wrapper .bp-hero .rogiq-hero-content > h1 em { animation: none !important; transform: none; clip-path: none; }
@media (prefers-reduced-motion: reduce) {
	.rogiq-page-banner.bp-hero:not(.is-hero-glow)::after,
	.bp-hero .rogiq-hero-content > h1,
	.bp-hero .rogiq-hero-content > h1 em { animation: none; transform: none; clip-path: none; }
}

/* ---------------------------------------------------------------------------------------
   Phone / tablet menu (≤1180px, the navigation overlay), 2026-10-19 redesign: a light
   editorial page on the site background (no glass). The site name top left, close top
   right. Menu items Fraunces 34px (30 on phones) on hairlines, numbered 01, 02… (12px,
   muted); items with pages open as +/− accordions (blueprint.js; without JS they show
   open); sub-items DM Sans 17px aligned with the item text. "Start a Conversation" is the
   Primary button below the list, then phone, email and social icons from Site Settings.
   Items reveal one after another (0.06s apart).
   ------------------------------------------------------------------------------------ */
/* The header swaps base / contrast / body text when it sits over a photo; the menu is a light
   page, so it restores the page's own colours (captured on body, before any swap). */
body {
	--bp-page-base: var(--wp--preset--color--base);
	--bp-page-contrast: var(--wp--preset--color--contrast);
	--bp-page-body: var(--wp--preset--color--body-text);
}
.bp-pill-nav .wp-block-navigation__responsive-container.is-menu-open {
	--wp--preset--color--base: var(--bp-page-base);
	--wp--preset--color--contrast: var(--bp-page-contrast);
	--wp--preset--color--body-text: var(--bp-page-body);
}
.bp-pill-nav.rogiq-header-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: 22px 40px 48px;
	background: var(--wp--preset--color--base);
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	color: var(--wp--preset--color--contrast);
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__responsive-container-close { top: 0; right: 0; color: var(--wp--preset--color--contrast); }
.bp-mnav-brand { display: none; }
.is-menu-open .bp-mnav-brand {
	display: block;
	position: absolute;
	top: 2px;
	left: 0;
	font-family: var(--wp--preset--font-family--body);
	font-size: 15px;
	line-height: 26px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast);
}
.is-menu-open .bp-mnav-brand a { color: inherit; text-decoration: none; }
.is-menu-open .bp-mnav-brand img { display: block; max-height: 32px; width: auto; }
.bp-pill-nav.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 88px; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container { counter-reset: bp-mnav; border-top: 1px solid var(--wp--preset--color--border); }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	position: relative;
	counter-increment: bp-mnav;
	border-bottom: 1px solid var(--wp--preset--color--border);
	animation: rogiq-menu-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(1) { animation-delay: 0.05s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: 0.11s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: 0.17s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: 0.23s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: 0.29s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: 0.35s; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: flex;
	align-items: baseline;
	gap: 20px;
	box-sizing: border-box;
	width: 100%;
	padding: 18px 56px 18px 0;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 34px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 1.15;
	letter-spacing: -0.01em;
	text-transform: none;
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content::before {
	content: counter(bp-mnav, decimal-leading-zero);
	flex: none;
	width: 28px;
	font-family: var(--wp--preset--font-family--body);
	font-size: 12px;
	letter-spacing: 0.2em;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--primary); }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation-submenu__toggle,
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__submenu-icon { display: none; }
/* Accordion toggle (+/−). */
.bp-mnav-toggle { display: none; }
.is-menu-open .bp-mnav-toggle {
	display: block;
	position: absolute;
	top: 14px;
	right: 0;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.is-menu-open .bp-mnav-toggle::before,
.is-menu-open .bp-mnav-toggle::after {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	width: 16px;
	height: 1.5px;
	margin: -0.75px 0 0 -8px;
	background: currentColor;
	transition: transform 0.3s ease;
}
.is-menu-open .bp-mnav-toggle::after { transform: rotate(90deg); }
.is-menu-open .bp-open > .bp-mnav-toggle::after { transform: rotate(0deg); }
.is-menu-open .bp-mnav-toggle:focus-visible { outline: 2px solid var(--wp--preset--color--primary); outline-offset: 2px; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content:not([href]) { cursor: pointer; }
/* Sub-items: hidden until the item is opened (only when the script is running). */
html.bp-mnav-js .bp-pill-nav .is-menu-open .wp-block-navigation__container > .has-child:not(.bp-open) > .wp-block-navigation__submenu-container { display: none; }
.bp-pill-nav.rogiq-header-nav.wp-block-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container,
.bp-pill-nav.rogiq-header-nav.wp-block-navigation.items-justified-right .is-menu-open .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
	padding: 0 0 20px 48px;
	animation: bp-faq-in 0.35s ease both;
}
.bp-pill-nav.rogiq-header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0;
	color: var(--wp--preset--color--body-text);
	font-family: var(--wp--preset--font-family--body);
	font-size: 17px;
	line-height: 1.5;
}
/* "Start a Conversation" as the Primary button, below the list. */
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .bp-nav-cta {
	counter-increment: none;
	max-width: 420px; /* full width on phones (below) */
	margin-top: 40px;
	border-bottom: 0;
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.bp-nav-cta > .wp-block-navigation-item__content {
	justify-content: center;
	padding: 18px 24px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--medium, 500);
	line-height: 20px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.bp-nav-cta > .wp-block-navigation-item__content::before { content: none; }
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item.bp-nav-cta > .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--contrast); color: var(--wp--preset--color--base); }
/* Contact details and social icons. */
/* The overlay is the desktop menu too: the extras only show in the open phone/tablet menu. */
.bp-mnav-extras { display: none; }
.is-menu-open .bp-mnav-extras { display: block; margin-top: 32px; animation: rogiq-menu-in 0.5s cubic-bezier(0.2, 0.7, 0.2, 1) 0.45s both; }
.bp-mnav-contact { margin: 0; font-size: 16px; line-height: 1.9; }
.bp-mnav-contact:empty { display: none; }
.bp-mnav-contact a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-mnav-social:empty { display: none; }
.bp-mnav-social { margin-top: 20px; }
.bp-mnav-social .rogiq-social-icons { gap: 8px; }
.bp-mnav-social .rogiq-social-icon { width: 40px; height: 40px; border-radius: var(--wp--custom--radius--sm); background: transparent; box-shadow: inset 0 0 0 1px var(--wp--preset--color--border); }
.bp-mnav-social .rogiq-social-icon::before { width: 18px; height: 18px; background-color: var(--wp--preset--color--contrast); }
.bp-mnav-social .rogiq-social-icon:hover { background: var(--wp--preset--color--primary); box-shadow: none; }
.bp-mnav-social .rogiq-social-icon:hover::before { background-color: var(--wp--preset--color--primary-contrast); }
@media (max-width: 600px) {
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open { padding: 18px 16px 40px; }
	.bp-pill-nav.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { padding-top: 76px; }
	.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .bp-nav-cta { max-width: none; }
	.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content { font-size: 30px; padding: 16px 52px 16px 0; gap: 16px; }
	.is-menu-open .bp-mnav-toggle { top: 10px; }
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container { padding-left: 44px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item,
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container,
	.bp-mnav-extras { animation: none; }
	.is-menu-open .bp-mnav-toggle::before, .is-menu-open .bp-mnav-toggle::after { transition: none; }
}

/* Bigger tap area for the +/− (2026-10-20; user: hard to hit with a finger). The button now
   covers the item's whole row height and 72px at the right end, and the item's link stops
   where the button starts, so a tap near the + always opens the group instead of following
   the link. A faint 36px ring shows it is a button. Row height = padding + one 1.15 line. */
.is-menu-open .bp-mnav-toggle {
	top: 0;
	width: 72px;
	height: calc(36px + 1.15 * 34px);
	background: radial-gradient(circle at center, transparent 17.5px, color-mix(in srgb, currentColor 28%, transparent) 18px, transparent 18.5px);
	-webkit-tap-highlight-color: transparent;
}
.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content {
	width: calc(100% - 72px);
	padding-right: 0;
}
@media (max-width: 600px) {
	.is-menu-open .bp-mnav-toggle { top: 0; height: calc(32px + 1.15 * 30px); }
	.bp-pill-nav.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .has-child > .wp-block-navigation-item__content { padding-right: 0; }
}

/* ---------------------------------------------------------------------------------------
   404 page (templates/404.html): photo header with a default photo shipped in the theme
   (assets/images/404-header.jpg; a Background image set in the Site Editor overrides it),
   "Popular pages" as the numbered rows (each row links to the page), then a closing band on
   the solid Headings colour (no photo) with one button.
   ------------------------------------------------------------------------------------ */
.bp-404-hero { background-image: url(../images/404-header.jpg); background-size: cover; background-position: center; }
.bp-404-band { background: var(--wp--custom--inverse--background); }
.bp-404-band::after { display: none; }

/* ---------------------------------------------------------------------------------------
   Site search (2026-10-20). Header: a 48px square button 16px right of "Start a
   Conversation" (left of the menu button on tablets/phones, 44px, no border). It opens a
   light panel that drops from the top (page colours, like the open phone menu): label + close
   on the header line, then a large Fraunces input with an underline and the Primary Search
   button; the rest of the page dims. Esc, the close button or a click outside closes it.
   Results page (templates/search.html): rail "Search", "Results for “term”", count, search
   again, then hairline rows: type label, title (Fraunces 30), excerpt.
   ------------------------------------------------------------------------------------ */
.bp-search-toggle {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 50px;
	height: 50px;
	margin: 0;
	padding: 0;
	/* Same line as "Start a Conversation" over a photo (1px at 70%). In the header the palette is
	   swapped over photos, so contrast = the light text colour there. */
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
	border-radius: var(--wp--custom--radius--button, 0);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
	transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
.bp-search-toggle:hover,
.bp-search-toggle:focus-visible {
	background: var(--wp--preset--color--contrast);
	border-color: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
}
.bp-header .bp-header-actions { margin-left: auto; }
/* The header row has a 32px gap; WordPress resets margins in flex rows, hence !important. */
.bp-header .bp-header-row > .bp-search-toggle { margin-left: -16px !important; }

.bp-search {
	--wp--preset--color--base: var(--bp-page-base);
	--wp--preset--color--contrast: var(--bp-page-contrast);
	--wp--preset--color--body-text: var(--bp-page-body);
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 100000;
	box-sizing: border-box;
	padding: 24px 64px 64px 104px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--body-text);
	box-shadow: 0 0 0 100vmax color-mix(in srgb, var(--wp--preset--color--contrast) 45%, transparent);
	transform: translateY(-100%);
	transition: transform 0.45s cubic-bezier(0.25, 0.46, 0.45, 0.94), box-shadow 0.45s ease;
}
.bp-search[hidden] { display: none !important; }
.bp-search:not(.is-open) { box-shadow: 0 0 0 100vmax transparent; }
.bp-search.is-open { transform: none; }
.bp-search-top {
	display: flex;
	align-items: center;
	justify-content: space-between;
	height: 48px;
}
.bp-search-label {
	margin: 0;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-search-close {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	cursor: pointer;
}
.bp-search-form {
	display: flex;
	align-items: flex-end;
	gap: 32px;
	margin: 40px 0 0;
}
.bp-search-input {
	flex: 1 1 auto;
	min-width: 0;
	box-sizing: border-box;
	height: auto;
	margin: 0;
	padding: 8px 0 16px;
	border: 0;
	border-bottom: 1px solid var(--wp--preset--color--contrast);
	border-radius: 0;
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: var(--wp--preset--font-family--heading);
	font-size: 48px;
	font-weight: var(--wp--custom--font-weight--default, 300);
	line-height: 1.2;
	letter-spacing: -0.02em;
	-webkit-appearance: none;
	appearance: none;
}
.bp-search-input::placeholder { color: var(--wp--preset--color--contrast-alt); opacity: 1; }
.bp-search-input:focus { outline: none; border-bottom-color: var(--wp--preset--color--primary); }
.bp-search-input::-webkit-search-cancel-button { -webkit-appearance: none; }
:root .bp-search-submit {
	flex: 0 0 auto;
	height: 56px;
	padding: 0 34px;
	border: 0;
	border-radius: var(--wp--custom--radius--button, 0);
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	font-family: var(--wp--preset--font-family--body);
	font-size: 14px;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	cursor: pointer;
}
:root .bp-search-submit:hover { background: var(--wp--preset--color--contrast); }

/* Results page */
.bp-section.bp-search-results {
	--bp-label-top: 200px;
	padding-top: 200px !important;
	padding-bottom: 128px !important;
}
.bp-search-results > .bp-search-title { margin-top: 56px; }
.bp-search-count { margin: 20px 0 0; font-size: 17px; color: var(--wp--preset--color--contrast-alt); }
.bp-search-form-inline { max-width: 1000px; margin-top: 48px; }
.bp-search-form-inline .bp-search-input { font-size: 32px; }
.bp-results { margin-top: 80px; }
.bp-results-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--wp--preset--color--border); }
.bp-results-list > li {
	display: grid;
	grid-template-columns: 200px minmax(0, 1fr);
	column-gap: 64px;
	margin: 0;
	padding: 40px 0;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.bp-results-list > li > * { grid-column: 2; margin: 0; }
.bp-results-list > li > .bp-result-type {
	grid-column: 1;
	grid-row: 1 / span 2;
	padding-top: 10px;
	font-size: 12px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--wp--preset--color--contrast-alt);
}
.bp-result-title {
	font-family: var(--wp--preset--font-family--heading);
	font-size: 30px;
	font-weight: var(--wp--custom--font-weight--default, 300);
	line-height: 1.2;
	letter-spacing: -0.01em;
}
.bp-result-title a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.bp-result-title a:hover { color: var(--wp--preset--color--primary); }
.bp-result-excerpt { margin-top: 12px !important; max-width: 760px; }
.bp-result-excerpt p { margin: 0; font-size: 17px; line-height: 1.7; color: var(--wp--preset--color--body-text); }
.bp-result-excerpt .wp-block-post-excerpt__more-text { display: none; }
.bp-results-empty { margin: 0 0 24px; font-size: 18px; }

@media (max-width: 1180px) {
	.bp-header .bp-brand { margin-right: auto; }
	.bp-search-toggle { order: 2; width: 44px; height: 44px; border-color: transparent; }
	.bp-header .bp-header-row > .bp-search-toggle { margin: 0 -16px 0 0 !important; }
	.bp-search-toggle svg { width: 24px; height: 24px; }
	.bp-header .bp-pill-nav { order: 3; }
	.bp-search { padding: 24px 32px 48px 40px; }
	.bp-search-input { font-size: 40px; }
	.bp-section.bp-search-results { padding-top: 168px !important; padding-bottom: 96px !important; }
	.bp-search-results > .bp-search-title { margin-top: 0; }
	.bp-results-list > li { grid-template-columns: 160px minmax(0, 1fr); column-gap: 40px; }
}
@media (max-width: 600px) {
	.bp-search { padding: 12px 8px 32px 16px; }
	.bp-search-form { flex-direction: column; align-items: stretch; gap: 20px; margin-top: 24px; }
	.bp-search .bp-search-form { margin-right: 8px; } /* panel's 8px right padding keeps the close button over the menu button */
	.bp-search-input { font-size: 28px; }
	:root .bp-search-submit { width: 100%; padding-right: 8px; }
	.bp-search-form-inline .bp-search-input { font-size: 24px; }
	.bp-section.bp-search-results { padding-top: 120px !important; padding-bottom: 72px !important; }
	.bp-results { margin-top: 56px; }
	.bp-results-list > li { display: block; padding: 28px 0; }
	.bp-results-list > li > .bp-result-type { padding: 0 0 8px; }
	.bp-result-title { font-size: 24px; }
}
@media (prefers-reduced-motion: reduce) {
	.bp-search { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   Hover for the theme's own button variants (2026-10-20). Site Settings > Buttons sets the
   hovers of the five designs, but these context rules (light button over a photo hero or a
   closing band; the header's outline button over a photo) override the colours, hover
   included. Light button → Secondary with its text colour; header outline → fills light with
   dark text (like the search button).
   ------------------------------------------------------------------------------------ */
:root body:has(.bp-hero:not(.is-hero-glow)) .bp-header .wp-block-button.rogiq-header-cta > .wp-block-button__link {
	transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}
:root body:has(.bp-hero:not(.is-hero-glow)) .bp-header .wp-block-button.rogiq-header-cta > .wp-block-button__link:is(:hover, :focus-visible) {
	background: var(--wp--custom--inverse--text);
	border-color: var(--wp--custom--inverse--text);
	color: var(--wp--custom--inverse--background);
}
@media (prefers-reduced-motion: reduce) {
	:root .bp-hero .wp-block-button__link, :root .bp-cta .wp-block-button__link, :root .bp-header .wp-block-button__link { transition: none; }
}

/* ---------------------------------------------------------------------------------------
   Navigation colours (2026-10-20): Site Settings > Site Colours > Navigation writes
   --bp-nav-text / -hover / -dd-bg / -dd-text / -dd-hover (Auto = Headings, Secondary,
   Headings, light text, Secondary). Fallbacks below match Auto.
   ------------------------------------------------------------------------------------ */
@media (min-width: 1181px) {
	/* Pill: hover and current page get a soft highlight (28% of the colour). */
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item:hover,
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item:focus-within,
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-item,
	.bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item.current-menu-ancestor {
		background: color-mix(in srgb, var(--bp-nav-hover, var(--wp--preset--color--secondary)) 28%, transparent);
	}
	/* Menu text on light headers (over photos the header's light text stays). */
	body:not(:has(.bp-hero:not(.is-hero-glow))) .bp-pill-nav .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content,
	body:not(:has(.bp-hero:not(.is-hero-glow))) .bp-pill-nav .wp-block-navigation__container > .has-child > .wp-block-navigation__submenu-icon {
		color: var(--bp-nav-text, var(--wp--preset--color--contrast));
	}
	/* Dropdown panel */
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
		background: color-mix(in srgb, var(--bp-nav-dd-bg, var(--wp--custom--inverse--background)) 88%, transparent);
		color: var(--bp-nav-dd-text, var(--wp--custom--inverse--text));
	}
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
		color: var(--bp-nav-dd-text, var(--wp--custom--inverse--text));
	}
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible,
	.bp-pill-nav.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .current-menu-item > .wp-block-navigation-item__content {
		background: color-mix(in srgb, var(--bp-nav-dd-text, var(--wp--custom--inverse--text)) 8%, transparent);
		color: var(--bp-nav-dd-hover, var(--wp--preset--color--secondary));
	}
}

/* Text buttons over photos: Site Settings > Buttons > Text button over photos (2026-11-03). */

/* ---------------------------------------------------------------------------------------
   Plain title section (2026-11-03): a single post's header banner switched off in Site
   Settings > Post Settings becomes `.bp-hero-plain` (plugin adds it with is-hero-glow, so the
   header and text use the light-page colours). No photo, no glow, natural height: back link,
   eyebrow, title and byline on the page background, a hairline underneath.
   ------------------------------------------------------------------------------------ */
body:has(.bp-hero-plain) { --bp-hero-h: auto; }
.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero.bp-hero-plain {
	min-height: 0 !important;
	height: auto;
	padding: 200px 64px 80px 104px !important;
	background: var(--wp--preset--color--base) !important;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.rogiq-page-banner.bp-hero-plain::before,
.rogiq-page-banner.bp-hero-plain::after { display: none !important; }
@media (max-width: 1180px) {
	.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero.bp-hero-plain { padding: 168px 40px 64px !important; }
}
@media (max-width: 600px) {
	.rogiq-page-banner.rogiq-hero.bp-hero.bp-subhero.bp-hero-plain { padding: 120px 16px 48px !important; }
}
/* A listing whose banner is switched off starts with its first section: give it the same
   room under the floating menu as other pages without a header (200 / 168 / 120). */
.wp-site-blocks > main > .bp-section:first-child { --bp-label-top: 200px; padding-top: 200px !important; }
@media (max-width: 1180px) {
	.wp-site-blocks > main > .bp-section:first-child { padding-top: 168px !important; }
}
@media (max-width: 600px) {
	.wp-site-blocks > main > .bp-section:first-child { padding-top: 120px !important; }
}