/* Logo marquee: pure CSS infinite scroll. Expects two identical query loops back to back. */
.rogiq-logo-marquee {
	overflow: hidden;
	-webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
	mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent);
}
.rogiq-logo-marquee-track {
	display: flex;
	width: max-content;
	animation: rogiq-marquee 30s linear infinite;
}
.rogiq-logo-marquee-track:hover {
	animation-play-state: paused;
}
.rogiq-logo-marquee-track .wp-block-query {
	display: flex;
}
.rogiq-logo-marquee ul.wp-block-post-template {
	display: flex;
	align-items: center;
	gap: var(--wp--preset--spacing--60);
	list-style: none;
	margin: 0;
	padding: 0 var(--wp--preset--spacing--30);
}
.rogiq-logo-marquee li {
	flex: 0 0 auto;
}
.rogiq-logo-marquee img {
	max-height: 32px;
	width: auto;
	filter: grayscale(1) brightness(1.8);
	opacity: 0.8;
}
@keyframes rogiq-marquee {
	from { transform: translateX(0); }
	to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
	.rogiq-logo-marquee-track {
		animation: none;
	}
}

/* Testimonial carousel: one slide visible, auto-advance + swipe, via JS toggling [data-active]. */
.rogiq-testimonial-carousel {
	position: relative;
}
.rogiq-testimonial-carousel .wp-block-post-template {
	display: grid;
	grid-template-columns: 1fr;
	grid-template-rows: 1fr;
	list-style: none;
	margin: 0;
	padding: 0;
}
.rogiq-testimonial-carousel li.wp-block-post {
	grid-area: 1 / 1;
	opacity: 0;
	visibility: hidden;
	transition: opacity 0.5s ease;
	pointer-events: none;
}
.rogiq-testimonial-carousel .wp-block-post-template:not(:has([data-active])) > li.wp-block-post:first-child,
.rogiq-testimonial-carousel li.wp-block-post[data-active="true"] {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}
.rogiq-testimonial-dots {
	display: flex;
	justify-content: center;
	gap: var(--wp--preset--spacing--20);
	margin-top: var(--wp--preset--spacing--40);
}
.rogiq-testimonial-dots button {
	width: 10px;
	height: 10px;
	border-radius: var(--wp--custom--radius--lg);
	border: none;
	background: var(--wp--preset--color--border);
	cursor: pointer;
	padding: 0;
}
.rogiq-testimonial-dots button[aria-current="true"] {
	background: var(--wp--preset--color--primary);
}

/* Full-bleed "header image" placeholder: swap the pattern for a real background-image
   later and keep this same dark gradient overlay for text legibility. */
.rogiq-header-image {
	background:
		linear-gradient(180deg, rgba(38,50,68,0.25) 0%, rgba(38,50,68,0.9) 100%),
		url("https://placehold.co/1920x1080/263244/1b2531?text=+");
	background-size: cover;
	background-position: center;
	min-height: 100vh;
	display: flex;
	align-items: center;
}

/* Industry cards: image-placeholder background + top-right cutout badge that morphs + -> arrow on hover */
.rogiq-industry-card {
	position: relative;
	overflow: visible;
	min-height: 280px;
	display: flex;
	flex-direction: column;
	justify-content: flex-end;
	background: url("https://placehold.co/600x400/2F3B4D/39485c?text=+");
	background-size: cover;
	background-position: center;
	clip-path: polygon(0 0, calc(100% - 56px) 0, calc(100% - 56px) 56px, 100% 56px, 100% 100%, 0 100%);
	border-radius: var(--wp--custom--radius--md);
}
.rogiq-industry-card .rogiq-card-badge {
	position: absolute;
	top: 0;
	right: 0;
	width: 56px;
	height: 56px;
	background: var(--wp--preset--color--base-alt);
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 1.4rem;
	color: var(--wp--preset--color--contrast);
	transition: background 0.3s ease, color 0.3s ease;
}
.rogiq-industry-card:hover .rogiq-card-badge {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
}
.rogiq-card-badge .rogiq-icon-plus,
.rogiq-card-badge .rogiq-icon-arrow {
	position: absolute;
	transition: opacity 0.25s ease, transform 0.25s ease;
}
.rogiq-card-badge .rogiq-icon-arrow {
	opacity: 0;
	transform: rotate(-45deg) scale(0.7);
}
.rogiq-industry-card:hover .rogiq-icon-plus {
	opacity: 0;
	transform: rotate(45deg) scale(0.7);
}
.rogiq-industry-card:hover .rogiq-icon-arrow {
	opacity: 1;
	transform: rotate(0deg) scale(1);
}
.rogiq-industry-card-body {
	position: relative;
	padding: var(--wp--preset--spacing--40);
	background: linear-gradient(180deg, rgba(38,50,68,0) 0%, rgba(38,50,68,0.75) 60%, rgba(38,50,68,0.92) 100%);
}
.rogiq-industry-card-body a {
	text-decoration: none;
}

/* Glass-effect stat badge, offset over the top-right corner of its image */
.rogiq-glass-badge {
	position: absolute;
	top: -20px;
	right: -20px;
	background: rgba(245,246,247,0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	border: 1px solid rgba(245,246,247,0.3);
	color: var(--wp--preset--color--contrast);
	padding: 14px 18px;
	border-radius: var(--wp--custom--radius--md);
	font-weight: 700;
}

/* Eyebrow label (Sketch): Roboto Mono 14/19, Medium, uppercase, white at 70%, with a
   9x9 primary dot whose left edge sits 26px before the text (17px gap). Site Settings >
   Buttons & Eyebrow Text sets the --rogiq-eyebrow-* variables; the fallbacks are the
   design's values. */
.rogiq-eyebrow {
	display: flex;
	align-items: center;
	gap: 17px;
	font-family: var(--rogiq-eyebrow-font, var(--wp--preset--font-family--mono));
	font-size: var(--rogiq-eyebrow-size, 14px);
	font-weight: var(--rogiq-eyebrow-weight, 500);
	line-height: var(--rogiq-eyebrow-lh, 19px);
	letter-spacing: var(--rogiq-eyebrow-spacing, normal);
	text-transform: var(--rogiq-eyebrow-transform, uppercase);
	color: var(--rogiq-eyebrow-color, color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent));
	margin: 0;
}
.rogiq-eyebrow.is-centered {
	justify-content: center;
}
.rogiq-eyebrow::before {
	content: "";
	display: var(--rogiq-eyebrow-dot, inline-block);
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--rogiq-eyebrow-dot-color, var(--wp--preset--color--primary));
	flex: 0 0 auto;
}

/* Plus -> arrow icon swap, as real SVGs via CSS mask (raw <svg> tags get stripped from
   post content on save, so these live here instead of inline in the page). */
.rogiq-card-badge .rogiq-icon-plus,
.rogiq-card-badge .rogiq-icon-arrow {
	position: absolute;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	font-size: 0;
}
.rogiq-card-badge .rogiq-icon-plus {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'><path d='M12 5v14M5 12h14'/></svg>");
}
.rogiq-card-badge .rogiq-icon-arrow {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'><path d='M7 17L17 7M9 7h8v8'/></svg>");
}

/* Page banner (Sketch "Subpage Header"): 591px tall, H1 top at 242px (clears the overlay
   header). The photo is the Group block's own Background image (editable in the editor);
   the gradient overlay lives here so swapping the photo can never remove it. Overlay =
   the Sketch gradient on the base colour: 55.2% at top, 50.2% at 435px (73.6%), 73.9% at
   the bottom edge. H1: 86/100, Regular, text box at x364 and 868px wide. */
.rogiq-page-banner {
	position: relative;
	background-position: center center;
	min-height: 591px;
	padding-top: 242px;
	box-sizing: border-box;
}
/* Overlay colours, direction and strength come from the banner's Overlay panel in the
   editor (rogiq-overlay-* classes). Default: the Sketch curve in the dark-zone colour
   (base in Dark, contrast/black in Light), top to bottom, full strength. */
/* Site-wide defaults come from Site Settings > Header Banners (custom.banner.* tokens);
   without them it is the Sketch dark fade. A banner's own Overlay classes override these. */
.rogiq-page-banner {
	--rogiq-overlay-from: var(--wp--custom--banner--from, var(--wp--custom--inverse--background));
	--rogiq-overlay-to: var(--wp--custom--banner--to, var(--wp--custom--inverse--background));
	--rogiq-overlay-angle: var(--wp--custom--banner--angle, 180deg);
	--rogiq-overlay-strength: var(--wp--custom--banner--strength, 1);
	--rogiq-overlay-blend: var(--wp--custom--banner--blend, normal);
	--rogiq-overlay-display: var(--wp--custom--banner--display, block);
}
/* The full-height hero keeps its own default unless "Also use on the hero" is ticked
   (custom.hero.*). :where() keeps a banner's own Overlay classes stronger. */
.rogiq-page-banner:where(.rogiq-hero) {
	--rogiq-overlay-from: var(--wp--custom--hero--from, var(--wp--custom--inverse--background));
	--rogiq-overlay-to: var(--wp--custom--hero--to, var(--wp--custom--inverse--background));
	--rogiq-overlay-angle: var(--wp--custom--hero--angle, 180deg);
	--rogiq-overlay-strength: var(--wp--custom--hero--strength, 1);
	--rogiq-overlay-blend: var(--wp--custom--hero--blend, normal);
	--rogiq-overlay-display: var(--wp--custom--hero--display, block);
}
.rogiq-page-banner::before { display: var(--rogiq-overlay-display); }
/* A banner given its own colours shows its overlay even when the site-wide one is None. */
.rogiq-page-banner:is([class*="rogiq-overlay-from-"], [class*="rogiq-overlay-hexfrom-"]) { --rogiq-overlay-display: block; }
.rogiq-page-banner::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(var(--rogiq-overlay-angle),
		color-mix(in srgb, var(--rogiq-overlay-from) calc(55.2% * var(--rogiq-overlay-strength)), transparent) 0%,
		color-mix(in srgb, color-mix(in srgb, var(--rogiq-overlay-to) 73.6%, var(--rogiq-overlay-from)) calc(50.2% * var(--rogiq-overlay-strength)), transparent) 73.6%,
		color-mix(in srgb, var(--rogiq-overlay-to) calc(73.9% * var(--rogiq-overlay-strength)), transparent) 100%);
}
.rogiq-page-banner.rogiq-overlay-from-primary { --rogiq-overlay-from: var(--wp--preset--color--primary); }
.rogiq-page-banner.rogiq-overlay-from-primary-contrast { --rogiq-overlay-from: var(--wp--preset--color--primary-contrast); }
.rogiq-page-banner.rogiq-overlay-from-secondary { --rogiq-overlay-from: var(--wp--preset--color--secondary); }
.rogiq-page-banner.rogiq-overlay-from-secondary-contrast { --rogiq-overlay-from: var(--wp--preset--color--secondary-contrast); }
.rogiq-page-banner.rogiq-overlay-from-accent { --rogiq-overlay-from: var(--wp--preset--color--accent); }
.rogiq-page-banner.rogiq-overlay-from-base { --rogiq-overlay-from: var(--wp--preset--color--base); }
.rogiq-page-banner.rogiq-overlay-from-base-alt { --rogiq-overlay-from: var(--wp--preset--color--base-alt); }
.rogiq-page-banner.rogiq-overlay-from-contrast { --rogiq-overlay-from: var(--wp--preset--color--contrast); }
.rogiq-page-banner.rogiq-overlay-from-body-text { --rogiq-overlay-from: var(--wp--preset--color--body-text); }
.rogiq-page-banner.rogiq-overlay-from-contrast-alt { --rogiq-overlay-from: var(--wp--preset--color--contrast-alt); }
.rogiq-page-banner.rogiq-overlay-from-border { --rogiq-overlay-from: var(--wp--preset--color--border); }
.rogiq-page-banner.rogiq-overlay-to-primary { --rogiq-overlay-to: var(--wp--preset--color--primary); }
.rogiq-page-banner.rogiq-overlay-to-primary-contrast { --rogiq-overlay-to: var(--wp--preset--color--primary-contrast); }
.rogiq-page-banner.rogiq-overlay-to-secondary { --rogiq-overlay-to: var(--wp--preset--color--secondary); }
.rogiq-page-banner.rogiq-overlay-to-secondary-contrast { --rogiq-overlay-to: var(--wp--preset--color--secondary-contrast); }
.rogiq-page-banner.rogiq-overlay-to-accent { --rogiq-overlay-to: var(--wp--preset--color--accent); }
.rogiq-page-banner.rogiq-overlay-to-base { --rogiq-overlay-to: var(--wp--preset--color--base); }
.rogiq-page-banner.rogiq-overlay-to-base-alt { --rogiq-overlay-to: var(--wp--preset--color--base-alt); }
.rogiq-page-banner.rogiq-overlay-to-contrast { --rogiq-overlay-to: var(--wp--preset--color--contrast); }
.rogiq-page-banner.rogiq-overlay-to-body-text { --rogiq-overlay-to: var(--wp--preset--color--body-text); }
.rogiq-page-banner.rogiq-overlay-to-contrast-alt { --rogiq-overlay-to: var(--wp--preset--color--contrast-alt); }
.rogiq-page-banner.rogiq-overlay-to-border { --rogiq-overlay-to: var(--wp--preset--color--border); }
.rogiq-page-banner::before { mix-blend-mode: var(--rogiq-overlay-blend, normal); }
.rogiq-page-banner.rogiq-overlay-none::before { display: none; }
.rogiq-page-banner.rogiq-overlay-blend-multiply { --rogiq-overlay-blend: multiply; }
.rogiq-page-banner.rogiq-overlay-blend-screen { --rogiq-overlay-blend: screen; }
.rogiq-page-banner.rogiq-overlay-blend-overlay { --rogiq-overlay-blend: overlay; }
.rogiq-page-banner.rogiq-overlay-blend-darken { --rogiq-overlay-blend: darken; }
.rogiq-page-banner.rogiq-overlay-blend-lighten { --rogiq-overlay-blend: lighten; }
.rogiq-page-banner.rogiq-overlay-blend-color-dodge { --rogiq-overlay-blend: color-dodge; }
.rogiq-page-banner.rogiq-overlay-blend-color-burn { --rogiq-overlay-blend: color-burn; }
.rogiq-page-banner.rogiq-overlay-blend-hard-light { --rogiq-overlay-blend: hard-light; }
.rogiq-page-banner.rogiq-overlay-blend-soft-light { --rogiq-overlay-blend: soft-light; }
.rogiq-page-banner.rogiq-overlay-blend-difference { --rogiq-overlay-blend: difference; }
.rogiq-page-banner.rogiq-overlay-blend-exclusion { --rogiq-overlay-blend: exclusion; }
.rogiq-page-banner.rogiq-overlay-blend-hue { --rogiq-overlay-blend: hue; }
.rogiq-page-banner.rogiq-overlay-blend-saturation { --rogiq-overlay-blend: saturation; }
.rogiq-page-banner.rogiq-overlay-blend-color { --rogiq-overlay-blend: color; }
.rogiq-page-banner.rogiq-overlay-blend-luminosity { --rogiq-overlay-blend: luminosity; }
.rogiq-page-banner.rogiq-overlay-dir-up { --rogiq-overlay-angle: 0deg; }
.rogiq-page-banner.rogiq-overlay-dir-right { --rogiq-overlay-angle: 90deg; }
.rogiq-page-banner.rogiq-overlay-dir-left { --rogiq-overlay-angle: 270deg; }
.rogiq-page-banner.rogiq-overlay-dir-diagonal { --rogiq-overlay-angle: 135deg; }
.rogiq-page-banner.rogiq-overlay-strength-0 { --rogiq-overlay-strength: 0; }
.rogiq-page-banner.rogiq-overlay-strength-10 { --rogiq-overlay-strength: 0.1; }
.rogiq-page-banner.rogiq-overlay-strength-20 { --rogiq-overlay-strength: 0.2; }
.rogiq-page-banner.rogiq-overlay-strength-30 { --rogiq-overlay-strength: 0.3; }
.rogiq-page-banner.rogiq-overlay-strength-40 { --rogiq-overlay-strength: 0.4; }
.rogiq-page-banner.rogiq-overlay-strength-50 { --rogiq-overlay-strength: 0.5; }
.rogiq-page-banner.rogiq-overlay-strength-60 { --rogiq-overlay-strength: 0.6; }
.rogiq-page-banner.rogiq-overlay-strength-70 { --rogiq-overlay-strength: 0.7; }
.rogiq-page-banner.rogiq-overlay-strength-80 { --rogiq-overlay-strength: 0.8; }
.rogiq-page-banner.rogiq-overlay-strength-90 { --rogiq-overlay-strength: 0.9; }
.rogiq-page-banner.rogiq-overlay-strength-100 { --rogiq-overlay-strength: 1; }

/* Universal starting point: the first section under a page banner always begins one
   standard section gap below it (desktop; phones use the mobile rhythm), so content on
   every interior page starts at the same height whatever padding the section has. */
@media (min-width: 1101px) {
	.entry-content > .rogiq-page-banner:not(.rogiq-hero) + .alignfull,
	main > .rogiq-page-banner:not(.rogiq-hero) + .alignfull,
	.entry-content > .rogiq-page-banner:not(.rogiq-hero) + .rogiq-section-wrap > .alignfull:first-child {
		padding-top: var(--wp--custom--section--gap) !important;
	}
}

/* Dark zones: the banner content, the header when it sits on a banner, the footer, and
   any block with the class rogiq-scheme-inverse stay dark in Light mode. They swap the
   base/contrast/body-text presets for the inverse tokens (identical in Dark mode). The
   banner swaps on its children so its own overlay classes still mean the real palette. */
.rogiq-page-banner > *,
body:has(.rogiq-page-banner) .rogiq-header-overlay,
.rogiq-footer,
.rogiq-scheme-inverse {
	--wp--preset--color--base: var(--wp--custom--inverse--background);
	--wp--preset--color--contrast: var(--wp--custom--inverse--text);
	--wp--preset--color--body-text: var(--wp--custom--inverse--body);
	color: var(--wp--preset--color--body-text);
}
.rogiq-page-banner > * {
	position: relative;
	z-index: 1;
}
.rogiq-page-banner > .rogiq-banner-title {
	font-size: var(--rogiq-h1-size, var(--wp--preset--font-size--h-1));
	color: var(--wp--preset--color--contrast);
}
.rogiq-page-banner > h1,
.rogiq-page-banner > .rogiq-banner-title {
	font-size: var(--rogiq-h1-size, var(--wp--preset--font-size--h-1));
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h1-lh, 1.1628);
	margin: 0;
	padding-left: 4px;
	padding-right: max(0px, calc(min(100%, 1200px) - 872px));
	box-sizing: border-box;
}
@media (max-width: 782px) {
	.rogiq-page-banner {
		min-height: 375px;
		padding-top: 140px;
	}
	.rogiq-page-banner > h1,
	.rogiq-page-banner > .rogiq-banner-title {
		padding-left: 0;
	}
}

/* Footer link lists (Sketch Footer symbol): 18px Regular on 40px lines, no gaps */
.rogiq-footer-list,
.wp-block-post-template.rogiq-footer-list {
	list-style: none;
	margin: 0;
	padding: 0;
}
.rogiq-footer-list li {
	margin: 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 40px;
}
.rogiq-footer-list .wp-block-post-title {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.rogiq-footer-list a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
.rogiq-footer-list a:hover {
	color: var(--wp--preset--color--accent);
}

/* Dynamic social icons: [rogiq_social_links] shortcode output. Real brand SVGs via
   CSS mask (raw <svg> tags get stripped from post content on save), 33x33 squares
   matching the Footer symbol reference. */
.rogiq-social-icons {
	display: flex;
	gap: 10px;
	flex-wrap: wrap;
}
.rogiq-social-icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	border-radius: var(--wp--custom--radius--sm);
	background: #ffffff;
	flex: 0 0 auto;
	transition: background 0.2s ease;
}
.rogiq-social-icon:hover {
	background: var(--wp--preset--color--primary);
}
.rogiq-social-icon::before {
	content: "";
	display: block;
	width: 20px;
	height: 20px;
	background-color: var(--wp--preset--color--base);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Footer industry links: the query loop's <li> wrappers get no extra spacing */
.rogiq-footer-list.wp-block-post-template > li.wp-block-post {
	margin: 0;
}
.rogiq-social-facebook::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M22 12a10 10 0 1 0-11.6 9.9v-7H7.9V12h2.5V9.8c0-2.5 1.5-3.9 3.8-3.9 1.1 0 2.2.2 2.2.2v2.5h-1.3c-1.2 0-1.6.8-1.6 1.6V12h2.8l-.4 2.9h-2.4v7A10 10 0 0 0 22 12Z'/></svg>");
}
.rogiq-social-linkedin::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002ZM7 8.48H3V21h4V8.48Zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.68-2.91V8.48Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M6.94 5a2 2 0 1 1-4-.002 2 2 0 0 1 4 .002ZM7 8.48H3V21h4V8.48Zm6.32 0H9.34V21h3.94v-6.57c0-3.66 4.77-4 4.77 0V21H22v-7.93c0-6.17-7.06-5.94-8.68-2.91V8.48Z'/></svg>");
}
.rogiq-social-instagram::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 2 .25 2.4.42.6.24 1 .53 1.5 1a4 4 0 0 1 1 1.5c.17.4.36 1.2.42 2.4.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.06 1.2-.25 2-.42 2.4a4 4 0 0 1-1 1.5 4 4 0 0 1-1.5 1c-.4.17-1.2.36-2.4.42-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.06-2-.25-2.4-.42a4 4 0 0 1-1.5-1 4 4 0 0 1-1-1.5c-.17-.4-.36-1.2-.42-2.4C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.06-1.2.25-2 .42-2.4a4 4 0 0 1 1-1.5 4 4 0 0 1 1.5-1c.4-.17 1.2-.36 2.4-.42C8.4 2.2 8.8 2.2 12 2.2Zm0 1.8c-3.14 0-3.5 0-4.75.07-1.02.05-1.57.22-1.94.36-.49.19-.83.42-1.2.78-.36.37-.59.71-.78 1.2-.14.37-.3.92-.36 1.94C2.9 9.5 2.9 9.86 2.9 13s0 3.5.07 4.75c.05 1.02.22 1.57.36 1.94.19.49.42.83.78 1.2.37.36.71.59 1.2.78.37.14.92.3 1.94.36 1.25.07 1.61.07 4.75.07s3.5 0 4.75-.07c1.02-.05 1.57-.22 1.94-.36.49-.19.83-.42 1.2-.78.36-.37.59-.71.78-1.2.14-.37.3-.92.36-1.94.07-1.25.07-1.61.07-4.75s0-3.5-.07-4.75c-.05-1.02-.22-1.57-.36-1.94a3.2 3.2 0 0 0-.78-1.2 3.2 3.2 0 0 0-1.2-.78c-.37-.14-.92-.3-1.94-.36C15.5 4 15.14 4 12 4Zm0 3.4a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8Zm0 1.8a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Zm5.1-2a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M12 2.2c3.2 0 3.6 0 4.9.07 1.2.06 2 .25 2.4.42.6.24 1 .53 1.5 1a4 4 0 0 1 1 1.5c.17.4.36 1.2.42 2.4.06 1.3.07 1.7.07 4.9s0 3.6-.07 4.9c-.06 1.2-.25 2-.42 2.4a4 4 0 0 1-1 1.5 4 4 0 0 1-1.5 1c-.4.17-1.2.36-2.4.42-1.3.06-1.7.07-4.9.07s-3.6 0-4.9-.07c-1.2-.06-2-.25-2.4-.42a4 4 0 0 1-1.5-1 4 4 0 0 1-1-1.5c-.17-.4-.36-1.2-.42-2.4C2.2 15.6 2.2 15.2 2.2 12s0-3.6.07-4.9c.06-1.2.25-2 .42-2.4a4 4 0 0 1 1-1.5 4 4 0 0 1 1.5-1c.4-.17 1.2-.36 2.4-.42C8.4 2.2 8.8 2.2 12 2.2Zm0 1.8c-3.14 0-3.5 0-4.75.07-1.02.05-1.57.22-1.94.36-.49.19-.83.42-1.2.78-.36.37-.59.71-.78 1.2-.14.37-.3.92-.36 1.94C2.9 9.5 2.9 9.86 2.9 13s0 3.5.07 4.75c.05 1.02.22 1.57.36 1.94.19.49.42.83.78 1.2.37.36.71.59 1.2.78.37.14.92.3 1.94.36 1.25.07 1.61.07 4.75.07s3.5 0 4.75-.07c1.02-.05 1.57-.22 1.94-.36.49-.19.83-.42 1.2-.78.36-.37.59-.71.78-1.2.14-.37.3-.92.36-1.94.07-1.25.07-1.61.07-4.75s0-3.5-.07-4.75c-.05-1.02-.22-1.57-.36-1.94a3.2 3.2 0 0 0-.78-1.2 3.2 3.2 0 0 0-1.2-.78c-.37-.14-.92-.3-1.94-.36C15.5 4 15.14 4 12 4Zm0 3.4a4.9 4.9 0 1 1 0 9.8 4.9 4.9 0 0 1 0-9.8Zm0 1.8a3.1 3.1 0 1 0 0 6.2 3.1 3.1 0 0 0 0-6.2Zm5.1-2a1.15 1.15 0 1 1-2.3 0 1.15 1.15 0 0 1 2.3 0Z'/></svg>");
}
.rogiq-social-x::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.9 2.4h3.1l-6.8 7.7 8 10.5h-6.3l-4.9-6.4-5.6 6.4H3.3l7.2-8.3L2.9 2.4h6.4l4.5 5.9 5.1-5.9Zm-1.1 16.3h1.7L7.2 4.2H5.3l12.5 14.5Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M18.9 2.4h3.1l-6.8 7.7 8 10.5h-6.3l-4.9-6.4-5.6 6.4H3.3l7.2-8.3L2.9 2.4h6.4l4.5 5.9 5.1-5.9Zm-1.1 16.3h1.7L7.2 4.2H5.3l12.5 14.5Z'/></svg>");
}
.rogiq-social-youtube::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23.5 7.2s-.23-1.64-.94-2.36c-.9-.95-1.9-.95-2.36-1C17 3.5 12 3.5 12 3.5h-.01s-5 0-8.2.34c-.46.05-1.46.05-2.36 1C.73 5.56.5 7.2.5 7.2S.26 9.12.5 11.05v1.8c-.24 1.93 0 3.85 0 3.85s.23 1.64.93 2.36c.9.95 2.08.92 2.6 1.02 1.9.19 8 .25 8 .25s5 0 8.2-.34c.47-.06 1.46-.06 2.36-1 .7-.72.94-2.36.94-2.36s.24-1.92.24-3.85v-1.8c0-1.93-.24-3.85-.24-3.85ZM9.7 15.14V8.4l6.46 3.38-6.46 3.37Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M23.5 7.2s-.23-1.64-.94-2.36c-.9-.95-1.9-.95-2.36-1C17 3.5 12 3.5 12 3.5h-.01s-5 0-8.2.34c-.46.05-1.46.05-2.36 1C.73 5.56.5 7.2.5 7.2S.26 9.12.5 11.05v1.8c-.24 1.93 0 3.85 0 3.85s.23 1.64.93 2.36c.9.95 2.08.92 2.6 1.02 1.9.19 8 .25 8 .25s5 0 8.2-.34c.47-.06 1.46-.06 2.36-1 .7-.72.94-2.36.94-2.36s.24-1.92.24-3.85v-1.8c0-1.93-.24-3.85-.24-3.85ZM9.7 15.14V8.4l6.46 3.38-6.46 3.37Z'/></svg>");
}
.rogiq-social-email::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5v-13Zm2.2.5 7.8 6.2L19.8 6H4.2ZM20 8.1l-7.4 5.9a1 1 0 0 1-1.2 0L4 8.1V18h16V8.1Z'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'><path d='M2 5.5A1.5 1.5 0 0 1 3.5 4h17A1.5 1.5 0 0 1 22 5.5v13a1.5 1.5 0 0 1-1.5 1.5h-17A1.5 1.5 0 0 1 2 18.5v-13Zm2.2.5 7.8 6.2L19.8 6H4.2ZM20 8.1l-7.4 5.9a1 1 0 0 1-1.2 0L4 8.1V18h16V8.1Z'/></svg>");
}

/* Footer (Sketch Footer symbol, converted to a 1920 artboard): full-width 1px top border
   in white at 50%; 69px top padding + 1px border (logo 70px below the border) / 75px bottom; 1180px content row. Columns start at
   0 / 480 / 696 / 1024px. Logo 210 wide at the top; text columns start 7px lower (77 vs
   70); social icons 36px under the logo. Divider 452px below the footer top edge, 1177
   wide at +2px; copyright row 23px under it, 16/21 Regular, white at 70%. */
.rogiq-footer {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
	box-sizing: border-box;
	min-height: 572px;
}
.rogiq-footer :where(.is-layout-flow) > *,
.rogiq-footer p,
.rogiq-footer h4 {
	margin-block-start: 0;
	margin-block-end: 0;
}
.rogiq-footer-grid {
	display: grid;
	grid-template-columns: 480px 216px 328px 1fr;
	align-items: start;
	max-width: 1180px;
	margin: 0 auto;
	min-height: 382px;
}
.rogiq-footer-grid > *:not(.rogiq-footer-brand) {
	margin-top: 7px;
}
.rogiq-footer .rogiq-footer-social {
	margin-top: 36px;
}
.rogiq-footer-contact p {
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-footer-contact a {
	color: inherit;
	text-decoration: none;
}
.rogiq-footer-contact a:hover {
	color: var(--wp--preset--color--accent);
}
.rogiq-footer h4.rogiq-footer-heading {
	font-size: var(--rogiq-h5-size, 20px);
	font-weight: 600;
	line-height: var(--rogiq-h5-lh, 26px);
	margin-block-end: 5px;
}
.rogiq-footer h4.rogiq-footer-heading-spaced {
	margin-block-start: 12px;
}
/* When the Address block is hidden (no address in Site Info), Contact moves to the top */
.rogiq-footer .rogiq-footer-contact > h4.rogiq-footer-heading:first-child {
	margin-block-start: 0;
}
.wp-block-separator.rogiq-footer-divider {
	border: 0;
	height: 1px;
	width: 1177px;
	max-width: 100%;
	margin: 0 auto;
	padding: 0;
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
	position: relative;
	left: 1.5px;
}
.rogiq-footer .rogiq-footer-bottom {
	max-width: 1180px;
	margin: 23px auto 0;
	padding-right: 21px;
	box-sizing: border-box;
}
.rogiq-footer-bottom p {
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 21px;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
.rogiq-footer-bottom a {
	color: inherit;
	text-decoration: none;
}
.rogiq-footer-bottom a:hover {
	color: var(--wp--preset--color--accent);
}
@media (max-width: 1100px) {
	.rogiq-footer { min-height: 0; }
	.rogiq-footer-grid { grid-template-columns: 1fr 1fr; gap: 40px; height: auto; margin-bottom: 60px; }
	.rogiq-footer-grid > *:not(.rogiq-footer-brand) { margin-top: 0; }
	.wp-block-separator.rogiq-footer-divider { left: 0; }
	.rogiq-footer .rogiq-footer-bottom { padding-right: 0; }
}
@media (max-width: 600px) {
	.rogiq-footer-grid { grid-template-columns: 1fr; }
}
/* Foundation footer (Sketch "Foundation Footer"): no link columns; Address/Contact stay in
   the fourth column's position (x1024 on the 1180 row). Phones stack as usual. */
@media (min-width: 1101px) {
	.rogiq-footer-grid.rogiq-footer-grid--foundation { grid-template-columns: 1024px 1fr; }
}

/* Header as a transparent overlay on top of the hero/banner, not a solid bar that
   pushes content down — matches the Sketch design, where the nav sits directly on
   the hero photo. */
.rogiq-header-overlay {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 20;
	background: transparent;
	margin-block-start: 0;
}

/* Header nav (Sketch "Header"): 18/24 Regular, 48px between items */
.rogiq-header-nav .wp-block-navigation-item__content {
	padding: 0;
	color: var(--wp--preset--color--contrast);
}
.rogiq-header-nav .wp-block-navigation-item__content:hover {
	color: var(--wp--preset--color--accent);
}

/* Header on phones/tablets (no Sketch mobile design): smaller logo, tighter gaps,
   compact CTA so logo, menu toggle and button fit on one row at 375px. */
@media (max-width: 782px) {
	.rogiq-header-overlay {
		padding: 20px !important;
	}
	.rogiq-header-overlay .wp-block-site-logo img {
		width: 140px;
		height: auto;
	}
	.rogiq-header-overlay .alignwide > .wp-block-group {
		gap: 16px !important;
	}
	.rogiq-header-cta .wp-block-button__link {
		padding: 10px 18px !important;
		font-size: 16px;
		white-space: nowrap;
	}
}

/* Main content: with the header now absolutely positioned out of flow, main is
   effectively the first flow child of .wp-site-blocks and shouldn't inherit the
   default top margin meant for stacked siblings. */
.wp-site-blocks > main {
	margin-block-start: 0;
}

/* The actual direct child of .wp-site-blocks is WordPress's own template-part
   wrapper <header>, not our .rogiq-header-overlay div nested inside it. */
.wp-site-blocks > header.wp-block-template-part {
	margin-block-start: 0;
}

/* Accordion (Sketch "Clients"): core/details blocks. 56px gradient icon, 26px gap,
   26/34 Regular title, 26px plus/minus with 3px gradient bars sitting 47px in from the
   column's right edge and 4px above the title's centre line. Per Sketch: 47px from a
   divider to the next icon (46px for the 2nd item), 40px from a closed item's icon to
   its divider, 38px from an open item's body to its divider; 562px dividers; body 21px
   under the icon. */
.rogiq-accordion {
	width: 582px;
	max-width: 100%;
}
/* Each item is a Group holding an Icon block (rogiq/icon, replaceable in the editor)
   and a core/details block. The icon is positioned over the summary's left 56px so
   the body can still run full width under it. --rogiq-accordion-pt is the item's top
   padding, so the icon lines up with the summary. */
.rogiq-accordion > .rogiq-accordion-item {
	--rogiq-accordion-pt: 47px;
	position: relative;
	padding: var(--rogiq-accordion-pt) 0 41px;
	margin: 0;
}
.rogiq-accordion > .rogiq-accordion-item:nth-child(2) {
	--rogiq-accordion-pt: 46px;
}
.rogiq-accordion > .rogiq-accordion-item:first-child {
	--rogiq-accordion-pt: 0px;
}
.rogiq-accordion > .rogiq-accordion-item:last-child {
	padding-bottom: 0;
}
.rogiq-accordion > .rogiq-accordion-item:not(:last-child)::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 562px;
	max-width: 100%;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
}
.rogiq-accordion-item > .rogiq-accordion-icon {
	position: absolute;
	top: var(--rogiq-accordion-pt);
	left: 0;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 56px;
	height: 56px;
	margin: 0;
	cursor: pointer;
}
.wp-block-details.rogiq-accordion-details {
	margin: 0;
}
.rogiq-accordion-details > summary {
	display: flex;
	align-items: center;
	min-height: 56px;
	padding-left: 82px;
	padding-right: 47px;
	cursor: pointer;
	list-style: none;
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-accordion-details > summary::-webkit-details-marker {
	display: none;
}
.rogiq-accordion-details > summary::after {
	content: "";
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	margin-left: auto;
	transform: translateY(-4px);
	background: linear-gradient(125deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>") center / 26px 26px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>") center / 26px 26px no-repeat;
}
.rogiq-accordion-details[open]:not(.is-closing) > summary::after {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11' width='26' height='3'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11' width='26' height='3'/></svg>");
}
.rogiq-accordion-details > .rogiq-accordion-body {
	margin: 21px 0 -2px;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}

/* Image with a glass stat badge overlapping its bottom-right corner (Sketch "Clients"):
   badge 177x171, radius 10, 55px past the right edge and 58px below the bottom. The
   Sketch layer (white gradient fill + gradient 1px border) sits at 22.9% opacity. */
.rogiq-stat-media {
	position: relative;
	flex: 0 0 auto;
}
.rogiq-stat-media .wp-block-image,
.rogiq-stat-media .wp-block-image img {
	margin: 0;
	display: block;
	border-radius: 0;
}
.rogiq-glass-badge-br {
	position: absolute;
	right: -55px;
	bottom: -58px;
	width: 177px;
	height: 171px;
	box-sizing: border-box;
	padding: 23px 0 0;
	color: var(--wp--preset--color--contrast);
}
.rogiq-glass-badge-br::before,
.rogiq-glass-badge-br::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 10px;
	opacity: var(--rogiq-glass-opacity);
	pointer-events: none;
}
.rogiq-glass-badge-br::before {
	background: linear-gradient(135deg, color-mix(in srgb, var(--rogiq-glass-tint) 50%, transparent) 0%, var(--rogiq-glass-tint) 100%);
}
.rogiq-glass-badge-br::after {
	padding: 1px;
	background: linear-gradient(134deg, color-mix(in srgb, var(--rogiq-glass-tint) 50%, transparent) 0%, var(--rogiq-glass-tint) 34%, transparent 64%, var(--rogiq-glass-tint) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
}
.rogiq-glass-badge-br > * {
	position: relative;
	z-index: 1;
	margin: 0;
}
.rogiq-glass-badge-br .rogiq-stat-number {
	margin-left: 19px;
	font-size: 50px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 65px;
	color: var(--wp--preset--color--primary);
}
.rogiq-glass-badge-br .rogiq-stat-label {
	margin: 4px 0 0 23px;
	max-width: 137px;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 21px;
}

/* Highlight text (editor format "Text colour / gradient"): a solid palette colour or a
   two-stop palette gradient, chosen per highlight in the editor. The from/to classes
   set the stops; a solid colour is simply from = to. Defaults to primary -> secondary.
   .rogiq-gradient-text is the older fixed-gradient format, kept for old content. */
.rogiq-text-fill,
.rogiq-gradient-text {
	--rogiq-fill-from: var(--wp--preset--color--primary);
	--rogiq-fill-to: var(--wp--preset--color--secondary);
	background: linear-gradient(99deg, var(--rogiq-fill-from) 0%, var(--rogiq-fill-to) 100%);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}
.rogiq-fill-from-primary { --rogiq-fill-from: var(--wp--preset--color--primary); }
.rogiq-fill-from-primary-contrast { --rogiq-fill-from: var(--wp--preset--color--primary-contrast); }
.rogiq-fill-from-secondary { --rogiq-fill-from: var(--wp--preset--color--secondary); }
.rogiq-fill-from-secondary-contrast { --rogiq-fill-from: var(--wp--preset--color--secondary-contrast); }
.rogiq-fill-from-accent { --rogiq-fill-from: var(--wp--preset--color--accent); }
.rogiq-fill-from-base { --rogiq-fill-from: var(--wp--preset--color--base); }
.rogiq-fill-from-base-alt { --rogiq-fill-from: var(--wp--preset--color--base-alt); }
.rogiq-fill-from-contrast { --rogiq-fill-from: var(--wp--preset--color--contrast); }
.rogiq-fill-from-contrast-alt { --rogiq-fill-from: var(--wp--preset--color--contrast-alt); }
.rogiq-fill-from-border { --rogiq-fill-from: var(--wp--preset--color--border); }
.rogiq-fill-to-primary { --rogiq-fill-to: var(--wp--preset--color--primary); }
.rogiq-fill-to-primary-contrast { --rogiq-fill-to: var(--wp--preset--color--primary-contrast); }
.rogiq-fill-to-secondary { --rogiq-fill-to: var(--wp--preset--color--secondary); }
.rogiq-fill-to-secondary-contrast { --rogiq-fill-to: var(--wp--preset--color--secondary-contrast); }
.rogiq-fill-to-accent { --rogiq-fill-to: var(--wp--preset--color--accent); }
.rogiq-fill-to-base { --rogiq-fill-to: var(--wp--preset--color--base); }
.rogiq-fill-to-base-alt { --rogiq-fill-to: var(--wp--preset--color--base-alt); }
.rogiq-fill-to-contrast { --rogiq-fill-to: var(--wp--preset--color--contrast); }
.rogiq-fill-to-contrast-alt { --rogiq-fill-to: var(--wp--preset--color--contrast-alt); }
.rogiq-fill-to-border { --rogiq-fill-to: var(--wp--preset--color--border); }

/* Section divider (Sketch): 1px white at 50%, 1177px wide, centred on the grid */
.wp-block-separator.rogiq-divider {
	border: 0;
	height: 1px;
	width: 1177px;
	max-width: calc(100% - 2 * var(--wp--preset--spacing--40));
	margin: 0 auto;
	opacity: 1;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
}
/* Directly inside the padded page content the side padding is already applied, so
   don't subtract it again (keeps the divider flush with the text on narrow screens). */
.has-global-padding > .wp-block-separator.rogiq-divider {
	max-width: 100%;
}

/* Content rows: the Sketch content spans 1180px (x370-1550 on a 1920 artboard), inside
   the 1200px grid. Columns are fixed widths from Sketch; they stack on small screens. */
.rogiq-row {
	display: flex;
	align-items: flex-start;
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.rogiq-row-split-media { gap: 210px; }
.rogiq-row-split-media > .rogiq-split-text { flex: 0 0 470px; margin-top: 69px; }
.rogiq-row-accordion { gap: 120px; }
.rogiq-row-accordion > .rogiq-accordion-intro { flex: 0 0 480px; }
.rogiq-row-accordion > .rogiq-accordion { flex: 0 0 582px; margin-top: 19px; }
.rogiq-heading-40 {
	font-size: var(--rogiq-h2-size, 40px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h2-lh, 52px);
	margin: 0;
}
.rogiq-body-16 {
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
	margin: 0;
}
/* Testimonial section (Sketch "Candidates", y2114-2596): 500x424 image with the glass
   badge (quote mark + "Hear what others are saying") on its bottom-right corner, quote
   column at x970 (normalized from Sketch x971 to the accordion column), 575px wide.
   Quote 30/39 Light, 35px below the image top; name 20/26 Semibold 25px below; role,
   company 16/21 Regular in primary directly under. The Query Loop rotates slides
   (carousel dots added by carousels.js; not in Sketch, needed for more than one quote). */
.rogiq-row-testimonial { gap: 100px; }
.rogiq-row-testimonial > .rogiq-testimonial-quotes { flex: 0 0 575px; margin-top: 35px; }
.rogiq-glass-badge-br > .rogiq-badge-icon {
	margin: 12px 0 0 22px;
}
.rogiq-glass-badge-br > .rogiq-badge-icon + .rogiq-stat-label {
	margin-top: 15px;
}
.rogiq-testimonial-quotes .rogiq-testimonial-quote,
.rogiq-testimonial-quotes .rogiq-testimonial-quote > p {
	margin: 0;
	font-size: var(--rogiq-h3-size, 30px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h3-lh, 39px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-testimonial-quotes .rogiq-testimonial-quote > p + p {
	margin-top: 16px;
}
.rogiq-testimonial-quotes .rogiq-testimonial-quote > p:first-of-type::before { content: "\201C"; }
.rogiq-testimonial-quotes .rogiq-testimonial-quote > p:last-of-type::after { content: "\201D"; }
.rogiq-testimonial-quotes .rogiq-testimonial-name {
	margin: 25px 0 0;
	font-size: var(--rogiq-h5-size, 20px);
	font-weight: 600;
	line-height: var(--rogiq-h5-lh, 26px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-testimonial-quotes .rogiq-testimonial-byline {
	display: flex;
	flex-wrap: wrap;
	margin: 0;
}
.rogiq-testimonial-quotes .rogiq-testimonial-byline > p {
	margin: 0;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 21px;
	color: var(--wp--preset--color--primary);
}
.rogiq-testimonial-quotes .rogiq-testimonial-byline > p:empty { display: none; }
.rogiq-testimonial-quotes .rogiq-testimonial-role:not(:empty) + .rogiq-testimonial-company:not(:empty)::before { content: ", "; }
.rogiq-testimonial-quotes .rogiq-testimonial-dots {
	justify-content: flex-start;
	margin-top: 32px;
}

/* CTA split (Sketch "CTA Split Image" / "Candidates" y2729-3082): text panel + photo,
   353px tall, 24px apart. Sketch spans 1184px (x368-1552); normalized to the 1180 grid
   with two 578px panels. Panel = base-alt (Sketch: #505A68 at 22.9% over base), text
   30/39 Light 425px wide, button 43px below, content centred (73px top/bottom). */
.rogiq-row-cta { gap: 24px; align-items: stretch; }
.rogiq-row-cta > * { flex: 0 0 578px; margin: 0; }
.rogiq-cta-panel {
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 353px;
	padding: 73px 55px;
}
.rogiq-cta-panel .rogiq-cta-text {
	max-width: 425px;
	margin: 0;
	font-size: var(--rogiq-h3-size, 30px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h3-lh, 39px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-row-cta .wp-block-image,
.rogiq-row-cta .wp-block-image img {
	display: block;
	width: 100%;
	height: 100%;
	margin: 0;
	object-fit: cover;
}

/* Button style "Solid" (Sketch CTA "Contact Us"): flat primary fill, primary-contrast
   text, 153x47 for "Contact Us". */
.wp-block-button.is-style-solid .wp-block-button__link {
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--primary-contrast);
	padding: 11.5px 29.5px;
}
.wp-block-button.is-style-solid .wp-block-button__link:hover {
	background: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--secondary-contrast);
}

/* Expertise (Sketch "Expertise" artboard) ------------------------------------------ */
/* Intro row: eyebrow + heading (480px) | body + button at x970 (normalized from Sketch
   x973, 577px wide, to the 970-1550 column). Body starts 41px below the row top. */
.rogiq-row-intro { gap: 120px; }
.rogiq-row-intro > :first-child { flex: 0 0 480px; }
.rogiq-row-intro > :last-child { flex: 0 0 580px; margin-top: 41px; }
/* Wide variant (Sketch "Home"): right column on the stats band's grid line, x876 and
   669 wide (480 + 26 gap). Add rogiq-row-intro--wide to the intro row. */
.rogiq-row-intro.rogiq-row-intro--wide { gap: 26px; }
.rogiq-row-intro.rogiq-row-intro--wide > :last-child { flex-basis: 669px; }

/* Plain image in a split row (no badge): 500x424 like the badge rows. */
.rogiq-split-image,
.rogiq-split-image img {
	display: block;
	width: 500px;
	height: 424px;
	margin: 0;
	object-fit: cover;
}
.rogiq-row-split-media > .rogiq-split-image { flex: 0 0 500px; }

/* Dot list (Expertise accordion bodies): 16/28 Light, 9px primary dots, 9px to the
   text, two 252px columns filled top to bottom, 40px row pitch. */
.rogiq-dot-list {
	columns: 2 252px;
	column-gap: 0;
	max-width: 504px;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-dot-list > li {
	position: relative;
	padding-left: 18px;
	margin: 0 0 12px;
	break-inside: avoid;
}
.rogiq-dot-list > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 10px;
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
}
/* In an accordion: Sketch has 50px from the last row to the item divider (12px row
   margin + 41px item padding - 3px). */
.rogiq-accordion-details > .rogiq-dot-list {
	margin: 21px 0 -3px;
}

/* Accordion variant with a divider under the last item too (Sketch Expertise): closed
   last item sits 46px above it. Add the class rogiq-accordion--end-rule. */
.rogiq-accordion.rogiq-accordion--end-rule > .rogiq-accordion-item:last-child {
	padding-bottom: 46px;
}
.rogiq-accordion.rogiq-accordion--end-rule > .rogiq-accordion-item:last-child::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	width: 562px;
	max-width: 100%;
	height: 1px;
	background: color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
}

/* Strengths band: intro (400px, 16px below the grid top) | 2x2 grid of 296px cards,
   84px apart, rows 54px apart. Card: 70px icon, title 26/34 Regular 30px below, body
   16/28 Light 15px below. Icons aligned to the card text (Sketch has two at x865/857). */
.rogiq-row-strengths { gap: 104px; }
.rogiq-row-strengths > :first-child { flex: 0 0 400px; margin-top: 16px; }
.rogiq-strength-grid {
	display: grid;
	grid-template-columns: repeat(2, 296px);
	column-gap: 84px;
	row-gap: 54px;
	flex: 0 0 676px;
}
.rogiq-strength-grid > * { margin: 0; }
.rogiq-strength > .rogiq-strength-title {
	margin: 30px 0 0;
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-strength > .rogiq-strength-text {
	margin: 15px 0 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}

/* Team loop (Sketch "About" > "Your Partners in Recruitment"): Query Loop of Team Members.
   Heading 40/52 12px under the eyebrow; photos 280x323 49px below; four per row 20px
   apart (normalized from Sketch's 21/21/18px gaps to fill the 1180 grid). A 65px base-
   colour square with a 26px primary plus sits flush in each photo's top-right corner
   (the photo links to the member). Name 20/26 Light 18px under the photo; role 16/21
   mono uppercase at 70% 3px below. Further rows 60px apart (Sketch shows one row). */
.rogiq-container {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.rogiq-container > .rogiq-team-loop { margin-top: 49px; }
/* Leadership bio: the Team profile block 49px under the heading, like the team grid. */
.rogiq-container > .wp-block-rogiq-team-profile { margin-top: 49px; }
.rogiq-team-loop .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(4, 280px);
	column-gap: 20px;
	row-gap: 60px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rogiq-team-loop .wp-block-post-template > li { margin: 0; }
.rogiq-team-card .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	width: 280px;
	aspect-ratio: 280 / 323;
	background: var(--wp--preset--color--base-alt);
}
.rogiq-team-card .wp-block-post-featured-image a,
.rogiq-team-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* Corner button: the square is the figure's ::after; the plus is the link's ::before and
   the up-right arrow its ::after (each a vector mask filled with the icon colour).
   Hovering/focusing the photo or the name fills the square with primary, turns the icon
   to the base colour, and swaps the icons with transform/opacity only (smooth): the
   plus turns a quarter, shrinks and fades; the arrow glides in from the lower left.
   --rogiq-plus-k scales it (smaller on phones). */
:is(.rogiq-team-card, .rogiq-expertise-card) {
	--rogiq-plus-k: 1;
	--rogiq-plus-bg: var(--wp--preset--color--base);
	--rogiq-plus-ink: var(--wp--preset--color--primary);
	--rogiq-plus-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:hover),
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:focus-visible) {
	--rogiq-plus-bg: var(--wp--preset--color--primary);
	--rogiq-plus-ink: var(--wp--preset--color--base);
}
:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image::after {
	content: "";
	position: absolute;
	z-index: 1;
	top: 0;
	right: 0;
	width: calc(65px * var(--rogiq-plus-k));
	height: calc(65px * var(--rogiq-plus-k));
	background: var(--rogiq-plus-bg);
	pointer-events: none;
	transition: background-color 0.35s ease;
}
:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::before,
:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::after {
	content: "";
	position: absolute;
	z-index: 2;
	top: calc(19.5px * var(--rogiq-plus-k));
	right: calc(19.5px * var(--rogiq-plus-k));
	width: calc(26px * var(--rogiq-plus-k));
	height: calc(26px * var(--rogiq-plus-k));
	background-color: var(--rogiq-plus-ink);
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	pointer-events: none;
	transition: transform 0.45s var(--rogiq-plus-ease), opacity 0.3s ease, background-color 0.35s ease;
}
/* Plus (26px, 3px bars) */
:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::before {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>");
}
/* Up-right arrow (same 3px stroke), hidden below-left until hover */
:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::after {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='black' stroke-width='3' stroke-linejoin='miter'><path d='M5 21 L19.5 6.5'/><path d='M8.5 6.5 H19.5 V17.5'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26' fill='none' stroke='black' stroke-width='3' stroke-linejoin='miter'><path d='M5 21 L19.5 6.5'/><path d='M8.5 6.5 H19.5 V17.5'/></svg>");
	opacity: 0;
	transform: translate(calc(-12px * var(--rogiq-plus-k)), calc(12px * var(--rogiq-plus-k)));
}
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:hover) .wp-block-post-featured-image a::before,
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:focus-visible) .wp-block-post-featured-image a::before {
	opacity: 0;
	transform: rotate(90deg) scale(0.4);
}
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:hover) .wp-block-post-featured-image a::after,
:is(.rogiq-team-card, .rogiq-expertise-card):has(a:focus-visible) .wp-block-post-featured-image a::after {
	opacity: 1;
	transform: none;
	transition-delay: 0.06s;
}
@media (prefers-reduced-motion: reduce) {
	:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::before,
	:is(.rogiq-team-card, .rogiq-expertise-card) .wp-block-post-featured-image a::after,
	:is(.rogiq-team-card, .rogiq-expertise-card):has(a:hover) .wp-block-post-featured-image a::before,
	:is(.rogiq-team-card, .rogiq-expertise-card):has(a:focus-visible) .wp-block-post-featured-image a::before {
		transform: none;
		transition: opacity 0.2s ease, background-color 0.2s ease;
	}
}
.rogiq-team-card .rogiq-team-name {
	margin: 18px 0 0;
	font-size: var(--rogiq-h5-size, 20px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h5-lh, 26px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-team-card .rogiq-team-name a {
	color: inherit;
	text-decoration: none;
}
.rogiq-team-card .rogiq-team-name a:hover { color: var(--wp--preset--color--accent); }
.rogiq-team-card .rogiq-team-role {
	margin: 3px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
.rogiq-team-card .rogiq-team-role:empty { display: none; }

/* About (Sketch "About" artboard) ---------------------------------------------------- */
/* Three icon columns (Mission / Vision / Values): 296px columns at x370/811/1252
   (145px apart). 56px icon, title 26/34 Regular 28px below, text 16/28 Light 15px below.
   Cards reuse the strength card classes with the 28px title gap. */
.rogiq-icon-cols {
	display: grid;
	grid-template-columns: repeat(3, 296px);
	column-gap: 145px;
	row-gap: 54px;
}
.rogiq-icon-cols > * { margin: 0; }
.rogiq-strength.rogiq-icon-col > .rogiq-strength-title { margin-top: 28px; }

/* Two image cards: 569x308 photos 42px apart (normalized from Sketch x372/977 to the
   1180 grid), 83px below the intro. Title 30/39 Light 28px below the photo, text 16/28
   Light 22px below (558px max), link 16/21 Medium primary with a chevron 26px below. */
.rogiq-container > .rogiq-image-cards,
.rogiq-image-cards {
	display: grid;
	grid-template-columns: repeat(2, 569px);
	column-gap: 42px;
	row-gap: 60px;
	margin-top: 83px;
}
.rogiq-image-cards > * { margin: 0; }
.rogiq-image-card .wp-block-image,
.rogiq-image-card .wp-block-image img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 569 / 308;
	margin: 0;
	object-fit: cover;
}
.rogiq-image-card > .rogiq-card-title {
	margin: 28px 0 0;
	font-size: var(--rogiq-h3-size, 30px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h3-lh, 39px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-image-card > .rogiq-card-text {
	max-width: 558px;
	margin: 22px 0 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-image-card > .rogiq-link-arrow { margin: 26px 0 0; }
.rogiq-link-arrow {
	font-size: 16px;
	font-weight: 500;
	line-height: 21px;
}
.rogiq-link-arrow a {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	color: var(--wp--preset--color--primary);
	text-decoration: none;
}
.rogiq-link-arrow a::after {
	content: "";
	width: 10px;
	height: 16px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/></svg>") center / contain no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 320 512'><path d='M311.1 233.4c12.5 12.5 12.5 32.8 0 45.3l-192 192c-12.5 12.5-32.8 12.5-45.3 0s-12.5-32.8 0-45.3L243.2 256 73.9 86.6c-12.5-12.5-12.5-32.8 0-45.3s32.8-12.5 45.3 0l192 192z'/></svg>") center / contain no-repeat;
	transition: transform 0.25s ease;
}
.rogiq-link-arrow a:hover::after { transform: translateX(4px); }

/* Expertise cards: Query Loop of Expertise pages, three 380x381 cards 20px apart
   (normalized from Sketch's 20/16px), 28px below the heading. The photo (Featured image)
   gets the Sketch 34% dark tint; the title sits over it, 30/34 Light, 28px from the left
   and 32px from the bottom. Same corner button + hover arrow as the team cards. */
.rogiq-container > .rogiq-expertise-loop { margin-top: 28px; }
.rogiq-expertise-loop .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 380px);
	column-gap: 20px;
	row-gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rogiq-expertise-loop .wp-block-post-template > li { margin: 0; }
.rogiq-expertise-card { position: relative; }
.rogiq-expertise-card .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	aspect-ratio: 380 / 381;
	background: var(--wp--preset--color--base-alt);
}
.rogiq-expertise-card .wp-block-post-featured-image a,
.rogiq-expertise-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
/* (Card tint = the Featured image's overlay setting: dark-auto at 34% by default.) */
.rogiq-expertise-card > .rogiq-expertise-title {
	position: absolute;
	z-index: 3;
	left: 28px;
	right: 29px;
	bottom: 32px;
	margin: 0;
	font-size: var(--rogiq-h3-size, 30px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 34px;
	color: var(--wp--custom--inverse--text);
}
.rogiq-expertise-card > .rogiq-expertise-title a {
	color: inherit;
	text-decoration: none;
}

/* Image overlay (editor "Overlay" panel on Image and Featured image blocks). Classes:
   rogiq-ov (on), rogiq-ov-c-<palette slug | dark-auto>, rogiq-ov-hex-<rrggbb>,
   rogiq-ov-o-<0-100>, rogiq-ov-blend-<mode>. The rogiq-site-content plugin turns them
   into the variables below on render (and the editor does the same in the canvas).
   Default = the Sketch photo overlay: dark (base in Dark, black in Light) at 34%. */
.rogiq-ov { position: relative; }
.rogiq-ov::before {
	content: "";
	position: absolute;
	z-index: 0;
	inset: 0;
	background: var(--rogiq-ov-color, var(--wp--custom--inverse--background));
	opacity: var(--rogiq-ov-o, 0.34);
	mix-blend-mode: var(--rogiq-ov-blend, normal);
	pointer-events: none;
}

/* Single team member (Sketch "Single Team"): photo 280x323 (1px border) with a full-width
   "Back to Team" outline button 28px below | 61px gap | 839px column: name 40 Light,
   role 18 mono uppercase 70% 10px below, contact squares top-right (33px, 10px apart,
   light square + navy icon), bio 16/28 22px under the role, stats 41px under the bio. */
.rogiq-row-member { gap: 61px; }
.rogiq-row-member > .rogiq-member-media { flex: 0 0 280px; }
.rogiq-row-member > .rogiq-member-body { flex: 0 0 839px; min-width: 0; }
.rogiq-member-media .wp-block-post-featured-image {
	position: relative;
	margin: 0;
	width: 280px;
	aspect-ratio: 280 / 323;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
	box-sizing: border-box;
	background: var(--wp--preset--color--base-alt);
}
.rogiq-member-media .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rogiq-member-media > .wp-block-buttons { margin-top: 28px; }
.rogiq-member-media .wp-block-button,
.rogiq-member-media .wp-block-button__link { width: 100%; box-sizing: border-box; text-align: center; }
.rogiq-member-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 24px;
}
.rogiq-member-head .rogiq-member-name {
	margin: 0;
	font-size: var(--rogiq-h2-size, 40px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h2-lh, 52px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-member-head .rogiq-member-role {
	margin: 10px 0 0;
	font-family: var(--wp--preset--font-family--mono);
	font-size: 18px;
	font-weight: 500;
	line-height: 24px;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
.rogiq-member-head .rogiq-member-role:empty { display: none; }
.rogiq-member-contact {
	display: flex;
	gap: 10px;
	margin: 0;
	flex: 0 0 auto;
}
.rogiq-member-contact a {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 33px;
	height: 33px;
	background: var(--wp--preset--color--contrast);
	color: var(--wp--preset--color--base);
	transition: background-color 0.2s ease;
}
.rogiq-member-contact a:hover,
.rogiq-member-contact a:focus-visible { background: var(--wp--preset--color--primary); }
.rogiq-member-contact svg { width: 16px; height: 16px; fill: currentColor; }
.rogiq-member-body > .rogiq-member-bio {
	margin-top: 22px;
}
.rogiq-member-bio > p {
	margin: 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-member-bio > p + p { margin-top: 28px; }

/* Stats row (team member pages; editors add or remove Stat groups freely): 38px icon,
   value 20/26 Regular (counts up from 0), label 14 mono uppercase 70% directly below;
   stats sit 94px apart and wrap if there are many. */
.rogiq-member-bio > .rogiq-stats-row,
.rogiq-stats-row {
	display: flex;
	flex-wrap: wrap;
	column-gap: 94px;
	row-gap: 32px;
	margin-top: 41px;
}
.rogiq-stats-row > .rogiq-stat {
	display: flex;
	align-items: flex-start;
	gap: 26px;
	margin: 0;
}
.rogiq-stat > .wp-block-rogiq-icon { margin-top: 3px; flex: 0 0 auto; }
.rogiq-stat-text > * { margin: 0; }
.rogiq-stat-text > .rogiq-stat-value {
	font-size: var(--rogiq-h5-size, 20px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h5-lh, 26px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-stat-text > .rogiq-stat-caption {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--rogiq-subtitle-size, 14px);
	font-weight: 500;
	line-height: var(--rogiq-subtitle-lh, 19px);
	text-transform: var(--rogiq-subtitle-transform, uppercase);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
/* Count-up numbers keep a steady width while they animate. */
.rogiq-stat-value,
.rogiq-stat-number { font-variant-numeric: tabular-nums; }

/* Blog (Sketch "Blog" + "Single Blog") ----------------------------------------------- */
/* Listing intro: eyebrow, heading 40/52 Light 672px (Sketch 40/50 Regular, normalized to
   the site's heading style), category filter 18/24 33px below; grid 73px below that. */
.rogiq-blog-intro > .rogiq-heading-40 { max-width: 672px; }
.rogiq-blog-filter,
.rogiq-blog-intro .rogiq-blog-filter {
	margin: 33px 0 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 24px;
	color: var(--wp--preset--color--contrast);
}
.rogiq-blog-filter a {
	color: inherit;
	text-decoration: none;
	transition: color 0.2s ease;
}
.rogiq-blog-filter a:hover,
.rogiq-blog-filter a[aria-current="page"] { color: var(--wp--preset--color--primary); }
.rogiq-blog-filter .rogiq-blog-filter-sep { margin: 0 6px; opacity: 0.6; }

/* Post cards: 3 x 380px, 20px apart, rows 46px apart; photo 380x214; category eyebrow
   37px below; title 26/34 Regular 10px below; "Read More" 16/21 Light primary underlined
   22px below. Grid starts 73px under the filter. */
.rogiq-container > .rogiq-post-loop { margin-top: 73px; }
.rogiq-post-loop .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 380px);
	column-gap: 20px;
	row-gap: 46px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rogiq-post-loop .wp-block-post-template > li { margin: 0; }
.rogiq-post-card > * { margin: 0; }
.rogiq-post-card .wp-block-post-featured-image {
	aspect-ratio: 380 / 214;
	background: var(--wp--preset--color--base-alt);
}
.rogiq-post-card .wp-block-post-featured-image a,
.rogiq-post-card .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rogiq-post-card > .rogiq-post-cat { margin-top: 37px; }
.rogiq-post-cat a { color: inherit; text-decoration: none; }
.rogiq-post-cat .wp-block-post-terms__separator { margin-right: 6px; }
.rogiq-post-card > .rogiq-post-title,
.rogiq-related-card > .rogiq-post-title {
	margin-top: 10px;
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-post-title a { color: inherit; text-decoration: none; }
.rogiq-post-title a:hover { color: var(--wp--preset--color--primary); }
.rogiq-post-card > .rogiq-read-more { margin-top: 22px; }
.rogiq-read-more,
a.rogiq-read-more {
	display: inline-block;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 21px;
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Pagination (not in Sketch): numbers 18/24, current in primary, 46px under the grid. */
.rogiq-post-loop .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	align-items: center;
	gap: 18px;
	margin-top: 46px;
	font-size: 18px;
	line-height: 24px;
}
.rogiq-post-loop .wp-block-query-pagination a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.rogiq-post-loop .wp-block-query-pagination a:hover,
.rogiq-post-loop .wp-block-query-pagination .current { color: var(--wp--preset--color--primary); }
.rogiq-post-loop .wp-block-query-pagination-numbers { display: flex; gap: 18px; }

/* Single post: main column 743px (eyebrow "Date | Category", title 40/52 Light 12px below,
   photo 743x322 21px below, body 16/28 32px below, "Back to Blog" 33px below) | 57px |
   sidebar 380px: "Related Posts" 26/50, cards 21px below, 380x242 on the sunken surface
   (Sketch #19222F), 20px apart, padding 42/31; eyebrow, title 10px below, Read More 40px. */
.rogiq-row-article { gap: 57px; }
.rogiq-row-article > .rogiq-article { flex: 0 0 743px; min-width: 0; }
.rogiq-row-article > .rogiq-related { flex: 0 0 380px; }
.rogiq-article > * { margin: 0; }
.rogiq-article-meta {
	display: flex;
	align-items: center;
	gap: 17px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--rogiq-subtitle-size, 14px);
	font-weight: 500;
	line-height: var(--rogiq-subtitle-lh, 19px);
	text-transform: var(--rogiq-subtitle-transform, uppercase);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
.rogiq-article-meta::before {
	content: "";
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	flex: 0 0 auto;
}
.rogiq-article-meta > * { margin: 0; }
.rogiq-article-meta a { color: inherit; text-decoration: none; }
.rogiq-article-meta .wp-block-post-date + .wp-block-post-terms::before { content: "|"; margin-right: 8px; }
/* Article header (date | category + title) above the two columns, so the photo and the
   sidebar start on the same line whatever the title length. On the 1180 grid, 743 wide. */
.rogiq-article-head {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.rogiq-article-head > * { margin: 0; max-width: 743px; }
.rogiq-article-head > .rogiq-article-title {
	margin-top: 12px;
	font-size: var(--rogiq-h2-size, 40px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-h2-lh, 52px);
	color: var(--wp--preset--color--contrast);
}
.rogiq-article-head + .rogiq-row-article { margin-top: 21px; }
.rogiq-article > .wp-block-post-featured-image {
	margin-top: 0;
	aspect-ratio: 743 / 322;
}
.rogiq-article > .wp-block-post-featured-image img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
}
.rogiq-article > .rogiq-article-body { margin-top: 32px; }
.rogiq-article > .rogiq-article-body > * { margin: 0; }
.rogiq-article > .rogiq-article-body > * + * { margin-top: 28px; }
.rogiq-article-body p,
.rogiq-article-body li {
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-article-body h2 { font-size: var(--rogiq-h3-size, 30px); line-height: var(--rogiq-h3-lh, 39px); font-weight: var(--wp--custom--font-weight--default); }
.rogiq-article-body h3 { font-size: var(--rogiq-h4-size, 26px); line-height: var(--rogiq-h4-lh, 34px); font-weight: var(--wp--custom--font-weight--regular); }
.rogiq-article-body a { color: var(--wp--preset--color--primary); }
/* "Back to Blog" sits below both columns, so the sticky sidebar stops at the end of the
   article column (the author card). 33px under it, on the 1180 grid. */
.rogiq-row-article + .rogiq-article-back { margin-top: 33px; }
.rogiq-related > .rogiq-related-heading {
	margin: 0;
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 50px;
	color: var(--wp--preset--color--contrast);
}
.rogiq-related > .rogiq-related-loop { margin-top: 21px; }
.rogiq-related-loop .wp-block-post-template {
	display: grid;
	row-gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rogiq-related-loop .wp-block-post-template > li { margin: 0; }
.rogiq-related-card {
	box-sizing: border-box;
	min-height: 242px;
	padding: 42px 31px;
	background: var(--wp--custom--surface--sunken);
}
.rogiq-related-card > * { margin: 0; }
.rogiq-related-card > .rogiq-read-more { margin-top: 40px; }

/* Article table of contents (top of the article, built from its H2/H3s by the plugin):
   dark sunken panel (same surface as the Related Posts cards), square corners, 32/31px padding, eyebrow title, links 16/28; H3s indented 18px. Sits 32px
   under the photo; the body follows 32px below. Hidden when an article has < 2 headings. */
.rogiq-article > .rogiq-toc { margin-top: 32px; }
.rogiq-toc {
	box-sizing: border-box;
	padding: 32px 31px;
	border-radius: 0;
	background: var(--wp--custom--surface--sunken);
}
.rogiq-toc .rogiq-eyebrow { margin: 0 0 14px; }
.rogiq-toc ol {
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: rogiq-toc;
}
.rogiq-toc li {
	margin: 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-toc li + li { margin-top: 6px; }
.rogiq-toc li.is-h3 { padding-left: 18px; }
.rogiq-toc a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	transition: color 0.2s ease;
}
.rogiq-toc a:hover { color: var(--wp--preset--color--primary); }
.rogiq-article-body :is(h2, h3)[id] { scroll-margin-top: 32px; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* Sidebar contents box (desktop): above Related Posts, current section highlighted; the
   sidebar sticks while the article scrolls and stops at the article's end (carousels.js
   sets --rogiq-sticky-top so a sidebar taller than the screen scrolls to its bottom
   first). Phones/tablets show the inline copy at the top of the article instead. */
.rogiq-related > .rogiq-toc + .rogiq-related-heading { margin-top: 40px; }
.rogiq-toc a[aria-current="true"] { color: var(--wp--preset--color--primary); }
@media (min-width: 1101px) {
	.rogiq-toc--inline { display: none; }
	.rogiq-row-article > .rogiq-related {
		position: sticky;
		top: var(--rogiq-sticky-top, 32px);
		align-self: flex-start;
	}
}
@media (max-width: 1100px) {
	.rogiq-toc--sidebar { display: none; }
}

/* Muted sidebar (so the article stays the brightest thing on the page): contents links at
   ~65% of the text colour (current section stays primary, full on hover) and the Related
   Posts heading at ~75%. Related post titles stay full white. */
.rogiq-related .rogiq-toc a {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 65%, transparent);
}
.rogiq-related .rogiq-toc a:hover { color: var(--wp--preset--color--contrast); }
.rogiq-related .rogiq-toc a[aria-current="true"] { color: var(--wp--preset--color--primary); }
.rogiq-related > .rogiq-related-heading {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 75%, transparent);
}

/* FAQ in an article: a divider line 48px under the article text, FAQ 48px below it. */
.rogiq-article > .rogiq-article-body > .rogiq-faq {
	margin-top: 48px;
	padding-top: 48px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 50%, transparent);
}

/* Article FAQ (pattern "Article FAQ"): a group .rogiq-faq of core/details items using the
   accordion's animation and gradient +/- (class rogiq-accordion-details), without icons.
   Question 18/26 Regular, 20px vertical padding, hairline dividers; answers 16/28. */
.rogiq-faq > * { margin: 0; }
.rogiq-faq > .rogiq-faq-heading + * { margin-top: 16px; }
.rogiq-faq > .rogiq-accordion-details {
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}
.rogiq-faq > .rogiq-accordion-details:last-child {
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
}
.rogiq-faq .rogiq-accordion-details > summary {
	min-height: 0;
	padding: 20px 46px 20px 0;
	font-size: var(--rogiq-h6-size, 18px);
	line-height: var(--rogiq-h6-lh, 26px);
	position: relative;
}
.rogiq-faq .rogiq-accordion-details > summary::after {
	position: absolute;
	right: 0;
	top: 50%;
	flex: none;
	width: 20px;
	height: 20px;
	margin: 0;
	transform: translateY(-50%);
	-webkit-mask-size: 20px 20px;
	mask-size: 20px 20px;
}
.rogiq-faq .rogiq-accordion-details > :not(summary) {
	margin: 0 46px 20px 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-faq .rogiq-accordion-details > :not(summary) + :not(summary) { margin-top: -6px; }

/* Author card (end of the article), 48px under the body: sunken panel; head row = 64x74 photo (team photo ratio) + name 26/34 and role 14
   mono uppercase; ~18-word bio snippet 16/28; footer row with a hairline divider and the
   "View Profile" arrow link. */
.rogiq-article > .rogiq-author-card { margin-top: 48px; }
.rogiq-author-card {
	position: relative;
	box-sizing: border-box;
	padding: 32px 31px 26px;
	background: var(--wp--custom--surface--sunken);
}
.rogiq-author-card p { margin: 0; }
.rogiq-author-card__head {
	display: flex;
	align-items: center;
	gap: 20px;
}
.rogiq-author-card__photo {
	flex: 0 0 64px;
	height: 74px;
	overflow: hidden;
	background: var(--wp--preset--color--base-alt);
}
.rogiq-author-card__photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.rogiq-author-card__name {
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
}
.rogiq-author-card__name a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.rogiq-author-card__name a:hover { color: var(--wp--preset--color--primary); }
.rogiq-author-card .rogiq-author-card__role {
	margin-top: 2px;
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--rogiq-subtitle-size, 14px);
	font-weight: 500;
	line-height: var(--rogiq-subtitle-lh, 19px);
	text-transform: var(--rogiq-subtitle-transform, uppercase);
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 70%, transparent);
}
.rogiq-author-card .rogiq-author-card__bio {
	margin-top: 20px;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-author-card .rogiq-author-card__foot {
	margin-top: 20px;
	padding-top: 18px;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 20%, transparent);
}

/* "Articles by <name>" on the team profile: the blog card grid, 49px under the heading. */
.rogiq-container > .rogiq-member-posts { margin-top: 49px; }
.rogiq-member-posts .wp-block-post-template {
	display: grid;
	grid-template-columns: repeat(3, 380px);
	column-gap: 20px;
	row-gap: 46px;
	margin: 0;
	padding: 0;
	list-style: none;
}
.rogiq-member-posts .wp-block-post-template > li { margin: 0; }
.rogiq-member-posts .wp-block-query-pagination {
	display: flex;
	justify-content: center;
	gap: 18px;
	margin-top: 46px;
	font-size: 18px;
}
.rogiq-member-posts .wp-block-query-pagination a { color: var(--wp--preset--color--contrast); text-decoration: none; }
.rogiq-member-posts .wp-block-query-pagination .current { color: var(--wp--preset--color--primary); }

@media (max-width: 1100px) {
	.rogiq-row { flex-direction: column; gap: 60px; }
	.rogiq-row > * { flex-basis: auto !important; width: 100%; margin-top: 0 !important; }
	.rogiq-stat-media { max-width: calc(100% - 55px); }
	/* The image block stores width/height inline (500x424); keep Sketch's proportion instead. */
	.rogiq-stat-media img { width: 100% !important; height: auto !important; aspect-ratio: 500 / 424; object-fit: cover; }
	/* Stacked: the badge hangs 58px below the image, so the gap to the text is that
	   overhang plus a normal gap. No padding needed under the text. */
	.rogiq-row-split-media { padding-bottom: 0; gap: calc(58px + var(--wp--preset--spacing--60)); }
	.rogiq-row-testimonial { gap: calc(58px + var(--wp--preset--spacing--60)); }
	.rogiq-split-image, .rogiq-split-image img { width: 100% !important; height: auto !important; aspect-ratio: 500 / 424; }
	.rogiq-row-split-media > .rogiq-split-image { flex-basis: auto; }
	.rogiq-strength-grid { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--wp--preset--spacing--50); row-gap: var(--wp--preset--spacing--60); flex-basis: auto; }
	.rogiq-dot-list { columns: 2 140px; }
	.rogiq-team-loop .wp-block-post-template { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--wp--preset--spacing--40); row-gap: var(--wp--preset--spacing--60); }
	.rogiq-team-card .wp-block-post-featured-image { width: 100%; }
	.rogiq-team-card { --rogiq-plus-k: 0.68; }
	.rogiq-icon-cols { grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); column-gap: var(--wp--preset--spacing--50); row-gap: var(--wp--preset--spacing--60); }
	.rogiq-image-cards, .rogiq-container > .rogiq-image-cards { grid-template-columns: 1fr; margin-top: var(--wp--preset--spacing--60); }
	/* Tablets: the desktop three-across, just narrower (never a lone card on a row). */
	.rogiq-expertise-loop .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 1fr)); }
	.rogiq-expertise-card { --rogiq-plus-k: 0.68; }
	.rogiq-row-member > .rogiq-member-media, .rogiq-row-member > .rogiq-member-body { flex-basis: auto; }
	.rogiq-member-media { max-width: 280px; }
	.rogiq-member-head { flex-wrap: wrap; }
	.rogiq-stats-row { column-gap: var(--wp--preset--spacing--60); }
	.rogiq-post-loop .wp-block-post-template { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.rogiq-container > .rogiq-post-loop { margin-top: var(--wp--preset--spacing--60); }
	.rogiq-row-article > .rogiq-article, .rogiq-row-article > .rogiq-related { flex-basis: auto; width: 100%; }
	.rogiq-article-head > .rogiq-article-title { font-size: 32px; line-height: 40px; }
	.rogiq-member-posts .wp-block-post-template { grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); }
	.rogiq-row-cta > * { flex-basis: auto; }
	/* Stacked: drop the CTA photo, keep the panel. A tighter text-to-button gap and a
	   little more top/bottom padding than the other stacked panels. */
	.rogiq-row-cta .wp-block-image { display: none; }
	.rogiq-cta-panel { padding: var(--wp--preset--spacing--70) var(--wp--preset--spacing--50); min-height: 0; }
	.rogiq-cta-panel .wp-block-buttons { margin-top: var(--wp--preset--spacing--40) !important; }
	.rogiq-testimonial-quotes .rogiq-testimonial-quote,
	.rogiq-testimonial-quotes .rogiq-testimonial-quote > p { font-size: 24px; line-height: 32px; }
	/* Stacked: the Sketch section paddings (105-140px) are desktop values. Use one even
	   rhythm for top-level full-width sections instead (the banner keeps its own). */
	.entry-content > .alignfull:not(.rogiq-page-banner):not(.rogiq-section-wrap),
	.entry-content > .rogiq-section-wrap > .alignfull,
	main > .alignfull:not(.rogiq-page-banner):not(.rogiq-section-wrap),
	main > .rogiq-section-wrap > .alignfull {
		padding-top: var(--wp--preset--spacing--80) !important;
		padding-bottom: var(--wp--preset--spacing--80) !important;
	}
}

/* Sitewide: disable WordPress's automatic inter-block top margin. All vertical
   spacing is set explicitly from Sketch measurements instead. */
:root :where(.wp-site-blocks) > *,
:root :where(.is-layout-flow) > *,
:root :where(.is-layout-constrained) > * {
	margin-block-start: 0;
}

/* Last accordion item: no divider below, so the open body needs no pull-up either */
.rogiq-accordion > .rogiq-accordion-item:last-child .rogiq-accordion-body {
	margin-bottom: 0;
}

/* Form section (Sketch "Clients", y2006-2842): full-width glass panel (white gradient
   fill + 1px #979797 border, whole layer at 22.9% opacity), 120px top / 108px bottom.
   Left column 401px (text 347px max, body 284px); form 742px (two 361px columns, 20px
   gap). Normalized from Sketch's minor inconsistencies: label->field 17px everywhere,
   field->next label 26px, message box aligned with the other fields, all fields share
   one fill and a 5px radius, eyebrow dot flush with the column edge. */
/* Glass: Group block styles "Glass" (follows Light/Dark), "Glass (light)" and "Glass
   (dark)". Tint, border and opacity come from settings.custom.glass in theme.json and
   the style variations. Full-width panels get top/bottom borders only. */
:root {
	--rogiq-glass-tint: var(--wp--custom--glass--tint);
	--rogiq-glass-border: var(--wp--custom--glass--border);
	--rogiq-glass-opacity: var(--wp--custom--glass--opacity);
}
.is-style-glass-light {
	--rogiq-glass-tint: var(--wp--custom--glass--light--tint);
	--rogiq-glass-border: var(--wp--custom--glass--light--border);
	--rogiq-glass-opacity: var(--wp--custom--glass--light--opacity);
}
.is-style-glass-dark {
	--rogiq-glass-tint: var(--wp--custom--glass--dark--tint);
	--rogiq-glass-border: var(--wp--custom--glass--dark--border);
	--rogiq-glass-opacity: var(--wp--custom--glass--dark--opacity);
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br) {
	position: relative;
	border-radius: var(--wp--custom--radius--lg);
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br)::before,
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br)::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	opacity: var(--rogiq-glass-opacity);
	pointer-events: none;
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br)::before {
	background: linear-gradient(112deg, color-mix(in srgb, var(--rogiq-glass-tint) 50%, transparent) 0%, var(--rogiq-glass-tint) 100%);
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br)::after {
	border: 1px solid var(--rogiq-glass-border);
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark).alignfull {
	border-radius: 0;
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark).alignfull::after {
	border-left: 0;
	border-right: 0;
}
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark):not(.rogiq-glass-badge-br) > * {
	position: relative;
	z-index: 1;
}
.rogiq-row-form {
	display: grid;
	grid-template-columns: 401px 742px;
}
.rogiq-row-form > .rogiq-form-intro {
	margin-top: 5px;
}
.rogiq-heading-26 {
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
	margin: 0;
}
.rogiq-form-intro .rogiq-body-16 {
	max-width: 284px;
}
.rogiq-contact-line {
	display: flex;
	align-items: center;
	gap: 17px;
	min-height: 40px;
	margin: 11px 0 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 24px;
}
.rogiq-form-intro .rogiq-heading-26 + .rogiq-contact-line {
	margin-top: 17px;
}
/* The icon is an Icon block (rogiq/icon, replaceable in the editor) centred in a 40px
   slot; the phone glyph is set to 31px per Sketch. The text is the paragraph beside it. */
.rogiq-contact-line > .rogiq-contact-icon {
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 40px;
	width: 40px;
	height: 40px;
	margin: 0;
}
.rogiq-contact-line > p {
	margin: 0;
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
}
.rogiq-contact-line a {
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rogiq-contact-line a:hover {
	color: var(--wp--preset--color--accent);
}

/* Gravity Forms ("gravity-theme" framework) restyled to the Sketch fields */
.rogiq-form-section .gform_wrapper.gravity-theme {
	margin: 0;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gform_fields {
	grid-column-gap: 20px;
	grid-row-gap: 26px;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gfield_label {
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 26px;
	margin: 0 0 17px;
	padding: 0;
	color: var(--wp--preset--color--contrast);
}
.rogiq-form-section .gform_wrapper.gravity-theme .gfield_required {
	color: var(--wp--preset--color--primary);
	font-size: inherit;
	line-height: inherit;
}
/* "* indicates required fields" legend: not in Sketch, kept for screen readers only */
.rogiq-form-section .gform_wrapper.gravity-theme .gform_heading {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container input,
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container textarea {
	box-sizing: border-box;
	width: 100%;
	height: 49px;
	margin: 0;
	padding: 0 16px;
	border: 1px solid color-mix(in srgb, var(--wp--custom--glass--border) 22.9%, transparent);
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--custom--glass--tint) calc(var(--wp--custom--glass--opacity) * 100%), transparent);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 24px;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container textarea,
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container textarea.large {
	display: block;
	height: 132px;
	min-height: 132px;
	padding: 12px 16px;
	resize: vertical;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container input:focus,
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container textarea:focus,
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container select:focus {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
/* Dropdown (Sketch Contact "Reason for Inquiry"): same 49px box as the inputs; text 24px
   in; 16px chevron 27px from the right edge; placeholder in contrast at 80% (#ccc on white). */
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_select {
	position: relative;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container select {
	-webkit-appearance: none;
	appearance: none;
	box-sizing: border-box;
	width: 100%;
	height: 49px;
	margin: 0;
	padding: 0 67px 0 24px;
	border: 1px solid color-mix(in srgb, var(--wp--custom--glass--border) 22.9%, transparent);
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--custom--glass--tint) calc(var(--wp--custom--glass--opacity) * 100%), transparent);
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 24px;
	cursor: pointer;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container select:has(option[value=""]:checked) {
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container select option {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_select::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 27px;
	width: 16px;
	height: 16px;
	margin-top: -8px;
	background-color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 448 512'%3E%3Cpath d='M201.4 374.6c12.5 12.5 32.8 12.5 45.3 0l160-160c12.5-12.5 12.5-32.8 0-45.3s-32.8-12.5-45.3 0L224 306.7 86.6 169.4c-12.5-12.5-32.8-12.5-45.3 0s-12.5 32.8 0 45.3l160 160z'/%3E%3C/svg%3E") center / contain no-repeat;
	pointer-events: none;
}
/* File upload (Contact "Submit Resume"): the input box matches the fields; the browse
   button is a small outline pill like the Submit button. */
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_fileupload input[type="file"] {
	display: flex;
	align-items: center;
	padding: 0 16px 0 8px;
	cursor: pointer;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_fileupload input[type="file"]::file-selector-button {
	height: 33px;
	margin: 0 16px 0 0;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--regular);
	cursor: pointer;
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_fileupload input[type="file"]:hover::file-selector-button {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_fileupload input[type="file"]:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
/* Enhanced (carousels.js): the native input is invisible on top of a box styled like the
   other fields; text 16px in like the inputs, Browse pill 8px from the right edge. */
.rogiq-form-section .gform_wrapper.gravity-theme .ginput_container_fileupload.rogiq-file-enhanced {
	position: relative;
}
.rogiq-form-section .gform_wrapper.gravity-theme .rogiq-file-enhanced input[type="file"] {
	position: absolute;
	inset: 0;
	z-index: 1;
	width: 100%;
	height: 49px;
	padding: 0;
	opacity: 0;
	cursor: pointer;
}
.rogiq-form-section .rogiq-file-box {
	box-sizing: border-box;
	display: flex;
	align-items: center;
	gap: 16px;
	height: 49px;
	padding: 0 8px 0 16px;
	border: 1px solid color-mix(in srgb, var(--wp--custom--glass--border) 22.9%, transparent);
	border-radius: 5px;
	background: color-mix(in srgb, var(--wp--custom--glass--tint) calc(var(--wp--custom--glass--opacity) * 100%), transparent);
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 24px;
}
.rogiq-form-section .rogiq-file-name {
	flex: 1 1 auto;
	min-width: 0;
	overflow: hidden;
	color: color-mix(in srgb, var(--wp--preset--color--contrast) 80%, transparent);
	text-overflow: ellipsis;
	white-space: nowrap;
}
.rogiq-form-section .rogiq-file-box.has-file .rogiq-file-name {
	color: var(--wp--preset--color--contrast);
}
.rogiq-form-section .rogiq-file-btn {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	height: 33px;
	padding: 0 18px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	color: var(--wp--preset--color--contrast);
	font-size: 14px;
	font-weight: var(--wp--custom--font-weight--regular);
}
.rogiq-form-section .rogiq-file-enhanced:hover .rogiq-file-btn {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.rogiq-form-section .rogiq-file-enhanced:has(input[type="file"]:focus-visible) .rogiq-file-box {
	outline: 2px solid var(--wp--preset--color--accent);
	outline-offset: 1px;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gfield_description,
.rogiq-form-section .gform_wrapper.gravity-theme .gform_fileupload_rules {
	margin: 8px 0 0;
	padding: 0;
	color: var(--wp--preset--color--contrast-alt);
	font-size: 14px;
	line-height: 20px;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gform_footer {
	margin: 32px 0 0;
	padding: 0;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gform_footer .gform_button {
	box-sizing: border-box;
	height: 47px;
	margin: 0;
	padding: 0 29px;
	border: 1px solid var(--wp--preset--color--contrast);
	border-radius: var(--wp--custom--radius--pill);
	background: transparent;
	color: var(--wp--preset--color--contrast);
	font-family: inherit;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 24px;
	cursor: pointer;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gform_footer .gform_button:hover {
	border-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--accent);
}
.rogiq-form-section .gform_wrapper.gravity-theme .gfield_validation_message,
.rogiq-form-section .gform_wrapper.gravity-theme .validation_message {
	margin-top: 8px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--wp--custom--feedback--error);
	font-size: 14px;
}
.rogiq-form-section .gform_wrapper.gravity-theme .gform_validation_errors {
	margin: 0 0 26px;
	border-radius: 5px;
}
.rogiq-form-section .gform_confirmation_message {
	font-size: 18px;
	line-height: 28px;
	color: var(--wp--preset--color--contrast);
}
@media (max-width: 1100px) {
	.rogiq-row-form { grid-template-columns: 1fr; gap: 60px; }
	.rogiq-row-form > .rogiq-form-intro { margin-top: 0; }
}

/* Glass tilt (see carousels.js): the panel turns toward the cursor; a soft sheen sits
   on the glass under the text. Inactive (flat, no sheen) on touch / reduced motion. */
.is-tilting {
	transform-origin: 50% 50%;
	will-change: transform;
}
.rogiq-glass-badge-br > .rogiq-glass-sheen,
.rogiq-glass-sheen {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: var(--rogiq-sheen-o, 0);
	background: radial-gradient(circle at var(--rogiq-sheen-x, 50%) var(--rogiq-sheen-y, 50%), rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.06) 35%, rgba(255,255,255,0) 65%);
	transition: opacity 0.3s ease;
}
.rogiq-glass-badge-br {
	border-radius: 10px;
	/* Frosted glass: blur what's behind and add a light dark-zone tint under the glass
	   layers, so the stat and label stay readable over busy photos. */
	-webkit-backdrop-filter: blur(14px) saturate(120%);
	backdrop-filter: blur(14px) saturate(120%);
	background: color-mix(in srgb, var(--wp--custom--inverse--background) var(--wp--custom--badge--shade, 35%), transparent);
}
/* The badge sits over a photo, so it is a dark zone in both modes (like the banner and
   footer): text uses the inverse colours (white in Light mode too) and the glass uses the
   light-glass tint, so it looks the same in Light and Dark. */
.rogiq-glass-badge-br {
	--wp--preset--color--base: var(--wp--custom--inverse--background);
	--wp--preset--color--contrast: var(--wp--custom--inverse--text);
	--wp--preset--color--body-text: var(--wp--custom--inverse--body);
	--rogiq-glass-tint: var(--wp--custom--glass--light--tint);
	--rogiq-glass-border: var(--wp--custom--glass--light--border);
	--rogiq-glass-opacity: var(--wp--custom--glass--light--opacity);
	color: var(--wp--preset--color--contrast);
}

/* Glass sheen that follows the cursor (see carousels.js) on Group blocks with a Glass
   style: a fixed-size soft light, so it reads the same on a badge-sized panel and a
   full-width section. Fades in on hover, out on leave. */
:where(.is-style-glass, .is-style-glass-light, .is-style-glass-dark) > .rogiq-glass-sheen--follow {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	pointer-events: none;
	opacity: var(--rogiq-sheen-o, 0);
	background: radial-gradient(circle 460px at var(--rogiq-sheen-x, 50%) var(--rogiq-sheen-y, 50%), rgba(255,255,255,0.11) 0%, rgba(255,255,255,0.04) 40%, rgba(255,255,255,0) 100%);
	transition: opacity 0.4s ease;
}

/* Visually hidden, still read by screen readers (count-up final values). */
.rogiq-sr-only {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* WordPress screen-reader text (e.g. inside Read More links). */
.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

/* Home (Sketch "Home") ------------------------------------------------------------------ */
/* Hero: the page banner at full height (906px). Same overlay controls as the banner; the
   default curve is measured from the Sketch render (photo vs. composite): 37% at the top,
   75% at 22%, 67% at 66%, 92% from 88% down. H1 96/100 Regular at x370, y339 (672 wide);
   lead 18/28 34px below (639 wide); buttons 51px below that. */
.rogiq-page-banner.rogiq-hero {
	min-height: 906px;
	padding-top: 339px;
}
.rogiq-page-banner.rogiq-hero::before {
	background: linear-gradient(var(--rogiq-overlay-angle),
		color-mix(in srgb, var(--rogiq-overlay-from) calc(37% * var(--rogiq-overlay-strength)), transparent) 0%,
		color-mix(in srgb, color-mix(in srgb, var(--rogiq-overlay-to) 22%, var(--rogiq-overlay-from)) calc(75% * var(--rogiq-overlay-strength)), transparent) 22%,
		color-mix(in srgb, color-mix(in srgb, var(--rogiq-overlay-to) 66%, var(--rogiq-overlay-from)) calc(67% * var(--rogiq-overlay-strength)), transparent) 66%,
		color-mix(in srgb, var(--rogiq-overlay-to) calc(92% * var(--rogiq-overlay-strength)), transparent) 88%,
		color-mix(in srgb, var(--rogiq-overlay-to) calc(92% * var(--rogiq-overlay-strength)), transparent) 100%);
}
.rogiq-hero > .rogiq-hero-content {
	max-width: 1180px;
	margin-left: auto;
	margin-right: auto;
}
.rogiq-hero-content > h1 {
	max-width: 672px;
	margin: 0;
	color: var(--wp--preset--color--contrast);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-hero-lh, 1.0417);
}
/* Site Settings > Brand > Heading 1 scales the hero too (1.12 x); the block's preset
   size class is !important, so this one has to be as well. */
.rogiq-hero-content > h1.has-display-font-size {
	font-size: var(--rogiq-hero-size, var(--wp--preset--font-size--display)) !important;
}
.rogiq-hero-content > .rogiq-hero-lead {
	max-width: 639px;
	margin: 34px 0 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 28px;
}
.rogiq-hero-content > .rogiq-hero-buttons {
	margin-top: 51px;
	gap: 16px;
}

/* Button style "Text link": the same box as the other buttons (so text lines up with
   theirs) but no fill or border. */
.wp-block-button.is-style-text > .wp-block-button__link {
	background: transparent;
	border-color: transparent;
	color: var(--wp--preset--color--contrast);
}
.wp-block-button.is-style-text > .wp-block-button__link:hover,
.wp-block-button.is-style-text > .wp-block-button__link:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--accent);
}

/* Scroll Down (Sketch): "Scroll Down" 18/24 Light set vertically, a 62px circle with a 1px
   border 23.5px below it, and a thin down arrow inside. Bottom-right of the content row,
   the circle's bottom 166px above the hero's bottom. carousels.js scrolls past the hero. */
.rogiq-hero > .rogiq-scroll-down {
	position: absolute;
	right: max(var(--wp--preset--spacing--40), calc((100% - 1180px) / 2));
	bottom: 166px;
	display: flex;
	justify-content: center;
	width: 62px;
	margin: 0;
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--default);
	line-height: 24px;
}
.rogiq-scroll-down a {
	position: relative;
	display: block;
	padding-bottom: 85.5px;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	writing-mode: vertical-rl;
	white-space: nowrap;
}
.rogiq-scroll-down a::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 50%;
	width: 62px;
	height: 62px;
	margin-left: -31px;
	box-sizing: border-box;
	border: 1px solid currentColor;
	border-radius: 50%;
}
.rogiq-scroll-down a::before {
	content: "";
	position: absolute;
	bottom: 21px;
	left: 50%;
	width: 9px;
	height: 20px;
	margin-left: -4.5px;
	background-color: currentColor;
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M4.5 0v19M.6 15l3.9 4 3.9-4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
	mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 9 20'%3E%3Cpath d='M4.5 0v19M.6 15l3.9 4 3.9-4' fill='none' stroke='black' stroke-width='1.2'/%3E%3C/svg%3E") center / contain no-repeat;
}
.rogiq-scroll-down a:hover,
.rogiq-scroll-down a:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Client logos (Sketch "Home": six logos across the 1180 row, ~35-43px tall, centred in a
   238px band). A Query Loop of the Logos post type (featured images). With the class
   rogiq-logos-mono (default) each logo is drawn in the text colour, so any uploaded logo
   matches the palette in Light and Dark; remove the class to show original colours. */
.rogiq-logo-row .wp-block-post-template {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	gap: 32px 40px;
	max-width: 1180px;
	margin: 0 auto;
	padding: 0;
	list-style: none;
}
.rogiq-logo-row .wp-block-post-template > li {
	margin: 0;
}
.rogiq-logo-row .rogiq-logo-mark {
	display: block;
	margin: 0;
}
/* A fixed height (not max-height) so lazy-loaded logos keep their size before they load. */
.rogiq-logo-row .rogiq-logo-mark img {
	display: block;
	width: auto;
	max-width: 156px;
	height: 43px;
	object-fit: contain !important;
}
.rogiq-logos-mono .rogiq-logo-mark[style*="--rogiq-logo"] {
	background-color: var(--wp--preset--color--contrast);
	-webkit-mask: var(--rogiq-logo) center / contain no-repeat;
	mask: var(--rogiq-logo) center / contain no-repeat;
}
.rogiq-logos-mono .rogiq-logo-mark[style*="--rogiq-logo"] img {
	opacity: 0;
}

/* Logo slider (.rogiq-logos-slider, see carousels.js): one strip that scrolls by exactly
   one set of logos per loop, inside the 1180 row with soft faded edges. 64px between logos
   while sliding (Sketch's six logos average ~66 apart). Until it starts, without JS or with
   reduced motion it stays the evenly spaced still row (six fit on one line). */
.rogiq-logos-slider .rogiq-logo-row {
	max-width: 1180px;
	margin: 0 auto;
	overflow: hidden;
}
.rogiq-logos-slider .rogiq-logo-row:has(.is-sliding) {
	-webkit-mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
	mask-image: linear-gradient(90deg, transparent 0, #000 64px, #000 calc(100% - 64px), transparent 100%);
}
.rogiq-logos-slider .rogiq-logo-row .wp-block-post-template.is-sliding {
	flex-wrap: nowrap;
	justify-content: flex-start;
	gap: 64px;
	width: max-content;
	max-width: none;
	margin: 0;
	animation: rogiq-logo-slide var(--rogiq-slider-duration, 30s) linear infinite;
}
.rogiq-logos-slider .rogiq-logo-row:hover .wp-block-post-template.is-sliding {
	animation-play-state: paused;
}
@keyframes rogiq-logo-slide {
	to { transform: translateX(calc(-1 * var(--rogiq-slider-distance, 0px))); }
}
@media (prefers-reduced-motion: reduce) {
	.rogiq-logos-slider .rogiq-logo-row .wp-block-post-template.is-sliding { animation: none; }
}

/* Centred intro (Sketch "Home"): centred eyebrow, heading 40/52 Light 480 wide, 12px
   below the eyebrow (the site's eyebrow-to-heading spacing). */
.rogiq-intro-center > .rogiq-heading-40 {
	max-width: 480px;
	margin: 12px auto 0;
}

/* Stats band (Sketch "Home"): intro left (eyebrow, heading 12px below, button 44px
   below); right column at x876, paragraph 16/28 669 wide, then stats 41px below in
   201px columns: number 50/65 Regular primary (counts up), label 16/21 Regular 137 wide,
   4px below. */
.rogiq-row-stats > .rogiq-stats-intro { flex: 0 0 506px; }
.rogiq-row-stats > .rogiq-stats-body { flex: 1 1 auto; min-width: 0; }
.rogiq-stats-intro > .rogiq-heading-40 { margin-top: 12px; }
.rogiq-stats-intro > .wp-block-buttons { margin-top: 44px; }
.rogiq-stats-body > .rogiq-body-16 { max-width: 669px; }
.rogiq-stats-band {
	display: grid;
	grid-template-columns: repeat(auto-fill, 201px);
	row-gap: 32px;
	margin-top: 41px;
}
.rogiq-stats-band > .rogiq-stats-item { margin: 0; }
.rogiq-stats-item > * { margin: 0; }
.rogiq-stats-item > .rogiq-stat-number {
	font-size: 50px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 65px;
	color: var(--wp--preset--color--primary);
}
.rogiq-stats-item > .rogiq-stat-label {
	max-width: 137px;
	margin-top: 4px;
	font-size: 16px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 21px;
	color: var(--wp--preset--color--contrast);
}

@media (max-width: 1100px) {
	.rogiq-hero > .rogiq-scroll-down { display: none; }
	.rogiq-row-stats > .rogiq-stats-intro,
	.rogiq-row-stats > .rogiq-stats-body { flex-basis: auto; }
	.rogiq-stats-band { grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); row-gap: var(--wp--preset--spacing--50); column-gap: var(--wp--preset--spacing--40); }
	.rogiq-logo-row .wp-block-post-template { justify-content: center; }
}
@media (max-width: 782px) {
	/* Phones: full height too (user, Oct 12). The content is centred in the space under
	   the header (100px) since its height varies with the heading's wrapping; if it is
	   taller than the screen the hero simply grows. */
	.rogiq-page-banner.rogiq-hero {
		display: grid;
		align-content: center;
		min-height: 100vh;
		min-height: 100svh;
		padding-top: 100px;
		padding-bottom: var(--wp--preset--spacing--70) !important;
	}
	.rogiq-hero > .rogiq-hero-content { width: 100%; }
	.rogiq-hero-content > .rogiq-hero-lead { margin-top: var(--wp--preset--spacing--40); }
	.rogiq-hero-content > .rogiq-hero-buttons { margin-top: var(--wp--preset--spacing--50); }
	.rogiq-logo-row .rogiq-logo-mark img { max-width: 120px; height: 34px; }
}

/* Expertise cards on phones: one per row, photos cropped 4:3 (not square) so three cards
   don't take three screens. The Featured image block stores its 380/381 ratio inline,
   hence !important. */
@media (max-width: 782px) {
	.rogiq-expertise-loop .wp-block-post-template { grid-template-columns: 1fr; }
	.rogiq-expertise-card .wp-block-post-featured-image,
	.rogiq-expertise-card .wp-block-post-featured-image img { aspect-ratio: 4 / 3 !important; }
}

/* Phones: sections that sit directly against the one above (no divider; desktop top
   padding 0, e.g. the synced CTA) keep that 0, so the gap is one rhythm step (64px), not
   two. Covers page content and the blog/team templates. */
@media (max-width: 1100px) {
	.entry-content > .alignfull[style*="padding-top:0"]:not(.rogiq-page-banner),
	main > .alignfull[style*="padding-top:0"]:not(.rogiq-page-banner) {
		padding-top: 0 !important;
	}
	/* Stats band stacked: heading, paragraph, stats, then the button (not the button
	   between the heading and the paragraph). */
	.rogiq-row-stats { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
	.rogiq-row-stats > .rogiq-stats-intro,
	.rogiq-row-stats > .rogiq-stats-body { display: contents; }
	.rogiq-stats-intro > .rogiq-eyebrow { order: 1; }
	.rogiq-stats-intro > .rogiq-heading-40 { order: 2; }
	.rogiq-stats-body > .rogiq-body-16 { order: 3; margin-top: 12px; }
	.rogiq-stats-body > .rogiq-stats-band { order: 4; margin-top: var(--wp--preset--spacing--50); }
	.rogiq-stats-intro > .wp-block-buttons { order: 5; margin-top: var(--wp--preset--spacing--60); }
}

/* Banner + hero load-in: a frosted glass pane over the photo clears (blur and tint fade
   out) while a soft light sweeps across it; then the content rises in (hero: headline,
   lead, buttons and Scroll Down staggered; page banners: the heading). CSS only, runs once
   on load; off for reduced motion. */
.rogiq-page-banner > * { z-index: 2; }
.rogiq-page-banner::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	opacity: 0;
	background-image: linear-gradient(110deg, transparent 35%, rgba(255,255,255,0.14) 48%, rgba(255,255,255,0.04) 54%, transparent 65%);
	background-repeat: no-repeat;
	background-size: 250% 100%;
	animation: rogiq-hero-glass 1.1s cubic-bezier(0.4, 0, 0.2, 1) both;
}
@keyframes rogiq-hero-glass {
	0% {
		opacity: 1;
		background-color: color-mix(in srgb, var(--wp--custom--inverse--background) 30%, transparent);
		background-position: 110% 0;
		-webkit-backdrop-filter: blur(22px) saturate(140%);
		backdrop-filter: blur(22px) saturate(140%);
	}
	65% { opacity: 1; }
	100% {
		opacity: 0;
		background-color: transparent;
		background-position: -40% 0;
		-webkit-backdrop-filter: blur(0) saturate(100%);
		backdrop-filter: blur(0) saturate(100%);
	}
}
.rogiq-hero-content > h1,
.rogiq-hero-content > .rogiq-hero-lead,
.rogiq-hero-content > .rogiq-hero-buttons,
.rogiq-page-banner.rogiq-hero > .rogiq-scroll-down,
.rogiq-page-banner:not(.rogiq-hero) > * {
	animation: rogiq-hero-rise 0.8s cubic-bezier(0.2, 0.7, 0.2, 1) both;
}
.rogiq-page-banner:not(.rogiq-hero) > * { animation-delay: 0.2s; }
.rogiq-hero-content > h1 { animation-delay: 0.2s; }
.rogiq-hero-content > .rogiq-hero-lead { animation-delay: 0.35s; }
.rogiq-hero-content > .rogiq-hero-buttons { animation-delay: 0.5s; }
.rogiq-page-banner.rogiq-hero > .rogiq-scroll-down { animation-delay: 0.7s; }
@keyframes rogiq-hero-rise {
	from { opacity: 0; transform: translateY(18px); }
	to { opacity: 1; transform: none; }
}
/* Not in the block editor (the banner's blocks re-mount while editing, which would
   replay it): blocks there carry .block-editor-block-list__block, the live site never does. */
.rogiq-page-banner.block-editor-block-list__block::after,
.rogiq-page-banner.block-editor-block-list__block * {
	animation: none !important;
}
@media (prefers-reduced-motion: reduce) {
	.rogiq-page-banner::after { animation: none; }
	.rogiq-hero-content > h1,
	.rogiq-hero-content > .rogiq-hero-lead,
	.rogiq-hero-content > .rogiq-hero-buttons,
	.rogiq-page-banner.rogiq-hero > .rogiq-scroll-down,
	.rogiq-page-banner:not(.rogiq-hero) > * { animation: none; }
}

/* Site Settings > Brand: title transform / letter spacing for every heading, body copy
   size and line height. :where() keeps each component's own rules in charge. */
:where(h1, h2, h3, h4, h5, h6, .rogiq-card-title, .rogiq-expertise-title, .rogiq-strength-title, .rogiq-team-name, .rogiq-member-name, .rogiq-cta-text, .rogiq-accordion-details > summary) {
	text-transform: var(--rogiq-title-transform, none);
	letter-spacing: var(--rogiq-title-spacing, normal);
}
:where(.rogiq-eyebrow, .rogiq-stat-caption, .rogiq-article-meta, .rogiq-author-card__role) {
	letter-spacing: var(--rogiq-subtitle-spacing, normal);
}
body {
	font-size: var(--rogiq-body-size, var(--wp--preset--font-size--medium));
	line-height: var(--rogiq-body-lh, 1.6);
}

/* Footer colours from Site Settings > Site Mode > Footer (custom.footer.*); without them the
   footer is a dark zone like the banners. The social squares follow the footer text colour. */
.rogiq-footer {
	--wp--preset--color--base: var(--wp--custom--footer--background, var(--wp--custom--inverse--background));
	--wp--preset--color--contrast: var(--wp--custom--footer--text, var(--wp--custom--inverse--text));
	--wp--preset--color--body-text: var(--wp--custom--footer--body, var(--wp--custom--inverse--body));
}
.rogiq-footer .rogiq-social-icon { background: var(--wp--custom--footer--icon-bg, var(--wp--custom--footer--text, #ffffff)); }
.rogiq-footer .rogiq-social-icon:hover,
.rogiq-footer .rogiq-social-icon:focus-visible { background: var(--wp--custom--footer--icon-hover, var(--wp--preset--color--primary)); }
.rogiq-footer .rogiq-social-icon::before { background-color: var(--wp--custom--footer--icon-glyph, var(--wp--preset--color--base)); }

/* Sitemap ([custom_sitemap] from the wp-rogiq-integration plugin, page /sitemap/): restyled
   like the article FAQ so it matches the site in both modes: hairline dividers, a 26/34
   Regular post-type title with the gradient +/-, then the links in columns. */
.sitemap-accordion { margin: 0; }
.sitemap-accordion .card {
	margin: 0;
	border: 0;
	border-top: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent);
	border-radius: 0;
	background: none;
	overflow: visible;
}
.sitemap-accordion .card:last-child { border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--contrast) 30%, transparent); }
.sitemap-accordion .sitemap-card-header-link,
.sitemap-accordion .sitemap-card-header-link[aria-expanded="true"] {
	padding: 28px 0;
	background: none;
	color: var(--wp--preset--color--contrast);
}
.sitemap-accordion .sitemap-card-header-link:hover,
.sitemap-accordion .sitemap-card-header-link:focus { filter: none; }
.sitemap-accordion .sitemap-card-header-link:focus-visible { outline: 2px solid var(--wp--preset--color--accent); outline-offset: 4px; }
.sitemap-accordion .csa-heading-text {
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
}
.sitemap-accordion .accordion-icon {
	flex: 0 0 26px;
	width: 26px;
	height: 26px;
	background: linear-gradient(125deg, var(--wp--preset--color--primary) 0%, var(--wp--preset--color--secondary) 100%);
	-webkit-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>") center / 26px 26px no-repeat;
	mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/><rect x='11.5' y='0' width='3' height='26'/></svg>") center / 26px 26px no-repeat;
}
.sitemap-accordion .accordion-icon::before,
.sitemap-accordion .accordion-icon::after { display: none; }
.sitemap-accordion .sitemap-card-header-link[aria-expanded="true"] .accordion-icon {
	-webkit-mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/></svg>");
	mask-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 26 26'><rect x='0' y='11.5' width='26' height='3'/></svg>");
}
.sitemap-accordion .collapse { background: none; color: var(--wp--preset--color--body-text); }
.sitemap-accordion .card-body { padding: 0 0 32px; }
.sitemap-accordion .sitemap-post-type-list {
	columns: 3 240px;
	column-gap: var(--wp--preset--spacing--60);
	margin: 0;
	padding: 0;
	list-style: none;
}
.sitemap-accordion .sitemap-post-type-list li {
	break-inside: avoid;
	margin: 0 0 12px;
	color: inherit;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.sitemap-accordion .sitemap-post-type-list a {
	color: var(--wp--preset--color--body-text);
	text-decoration: none;
	transition: color .15s ease;
}
.sitemap-accordion .sitemap-post-type-list a:hover,
.sitemap-accordion .sitemap-post-type-list a:focus-visible {
	color: var(--wp--preset--color--primary);
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Legal text (Privacy Policy, class rogiq-legal on the 1180 container): eyebrow, then
   section headings 26/34 Regular 56px apart and 16/28 body copy, at a reading width of
   780px on the grid's left edge. */
.rogiq-legal > * { max-width: 780px; margin: 0; }
.rogiq-legal > .rogiq-legal-heading {
	margin-top: 56px;
	font-size: var(--rogiq-h4-size, 26px);
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: var(--rogiq-h4-lh, 34px);
}
.rogiq-legal > .rogiq-eyebrow + .rogiq-legal-heading { margin-top: 12px; }
.rogiq-legal > p:not(.rogiq-eyebrow) {
	margin-top: 16px;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}

/* 404 (templates/404.html): banner, then the centred intro with a line of text and two
   buttons (home, sitemap). Text 24px under the heading, buttons 43px under the text
   (the CTA's button spacing). */
.rogiq-404 > .rogiq-404-text {
	max-width: 580px;
	margin: 24px auto 0;
	font-size: var(--rogiq-body-size, 16px);
	font-weight: var(--wp--custom--font-weight--default);
	line-height: var(--rogiq-body-lh, 28px);
}
.rogiq-404 > .wp-block-buttons { margin-top: 43px; gap: 20px; }

/* Highlight text flows on hover: the gradient is drawn twice as wide (from, to, from), so at
   rest it looks exactly as before and, when its heading or paragraph is hovered, it slides
   into the reverse. Off for reduced motion. */
.rogiq-text-fill,
.rogiq-gradient-text {
	background: linear-gradient(99deg, var(--rogiq-fill-from) 0%, var(--rogiq-fill-to) 50%, var(--rogiq-fill-from) 100%) 0% 50% / 200% 100%;
	-webkit-background-clip: text;
	background-clip: text;
	transition: background-position .9s cubic-bezier(.4,0,.2,1);
}
:is(h1, h2, h3, h4, h5, h6, p, a, li):hover > :is(.rogiq-text-fill, .rogiq-gradient-text) {
	background-position: 100% 50%;
}
@media (prefers-reduced-motion: reduce) {
	.rogiq-text-fill,
	.rogiq-gradient-text { transition: none; }
}

/* Header dropdown (Expertise, a navigation-submenu with no link of its own): a dark glass
   panel 14px under the label (an invisible bridge keeps it open while the pointer
   crosses), 16/24 Regular items. It fades and rises 6px in. */
.rogiq-header-nav .wp-block-navigation-submenu__toggle { color: inherit; }
.rogiq-header-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container {
	top: calc(100% + 14px);
	padding: 10px;
	border: 1px solid color-mix(in srgb, #ffffff 14%, transparent);
	border-radius: var(--wp--custom--radius--md);
	background: color-mix(in srgb, var(--wp--custom--inverse--background) 84%, transparent);
	-webkit-backdrop-filter: blur(18px) saturate(140%);
	backdrop-filter: blur(18px) saturate(140%);
	box-shadow: 0 18px 40px -18px rgba(0, 0, 0, .6);
	color: var(--wp--custom--inverse--text);
	transform: translateY(6px);
	transition: opacity .2s ease, transform .2s ease;
}
/* Item text lines up with the label: 1px border + 10px panel + 14px item padding, plus 2px
   for the glyphs' side bearing (measured at 1920: both start at x995). (Beats
   core's right-justified rule, which pins submenus to the right edge.) */
.rogiq-header-nav.wp-block-navigation.items-justified-right .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
	left: -27px;
	right: auto;
}
.rogiq-header-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: -15px;
	height: 15px;
}
.rogiq-header-nav.wp-block-navigation .has-child:hover > .wp-block-navigation__submenu-container,
.rogiq-header-nav.wp-block-navigation .has-child:focus-within > .wp-block-navigation__submenu-container,
.rogiq-header-nav.wp-block-navigation .wp-block-navigation-submenu__toggle[aria-expanded="true"] ~ .wp-block-navigation__submenu-container {
	transform: none;
}
/* Core gives each item the panel's background (inherit); with a translucent panel that
   doubled the tint over the items and left a lighter ring in the padding (it looked like a
   border). The panel alone carries the background. */
.rogiq-header-nav.wp-block-navigation .has-child .wp-block-navigation__submenu-container > .wp-block-navigation-item {
	background: transparent;
}
.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	display: block;
	padding: 10px 14px;
	border-radius: var(--wp--custom--radius--sm);
	color: var(--wp--custom--inverse--text);
	font-size: 16px;
	line-height: 24px;
	white-space: nowrap;
	transition: background-color .15s ease, color .15s ease;
}
.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover,
.rogiq-header-nav.wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:focus-visible {
	background: color-mix(in srgb, #ffffff 9%, transparent);
	color: var(--wp--preset--color--primary);
}
.rogiq-header-nav .wp-block-navigation-submenu > .wp-block-navigation-item__content:not([href]) { cursor: default; }

/* Mobile menu (the navigation overlay, below 600px): full-screen dark glass. A strong tint
   (inverse background at 86%) under a 24px blur keeps the white text readable over any
   photo; a faint brand glow sits in the top corner. Left-aligned 26/34 Regular links
   with hairline dividers, Expertise's pages indented beneath it, items rising in. */
.rogiq-header-nav.wp-block-navigation:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open {
	padding: 20px 20px 40px;
	background:
		radial-gradient(120% 55% at 0% 0%, color-mix(in srgb, var(--wp--preset--color--primary) 16%, transparent), transparent 62%),
		color-mix(in srgb, var(--wp--custom--inverse--background) 86%, transparent);
	-webkit-backdrop-filter: blur(24px) saturate(140%);
	backdrop-filter: blur(24px) saturate(140%);
	color: var(--wp--custom--inverse--text);
}
.rogiq-header-nav .is-menu-open .wp-block-navigation__responsive-container-close {
	color: var(--wp--custom--inverse--text);
}
.rogiq-header-nav .is-menu-open .wp-block-navigation__responsive-container-close svg {
	width: 30px;
	height: 30px;
}
.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
	padding-top: 64px;
	align-items: stretch;
}
/* Left-align everything in the overlay (the header nav itself is right-justified). */
.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open {
	--navigation-layout-justification-setting: flex-start;
	--navigation-layout-justify: flex-start;
	--navigation-layout-align: flex-start;
}
.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
	align-items: stretch;
	gap: 0;
	width: 100%;
}
.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation-item.has-child {
	align-items: flex-start;
}
.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__submenu-container {
	align-items: flex-start;
	gap: 0;
}
.rogiq-header-nav .is-menu-open .wp-block-navigation-item__content:focus { outline: none; }
.rogiq-header-nav .is-menu-open .wp-block-navigation-item__content:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 4px;
	border-radius: var(--wp--custom--radius--sm);
}
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item {
	width: 100%;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--custom--inverse--text) 16%, transparent);
	animation: rogiq-menu-in .45s cubic-bezier(.2, .7, .2, 1) both;
}
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(2) { animation-delay: .04s; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(3) { animation-delay: .08s; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(4) { animation-delay: .12s; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(5) { animation-delay: .16s; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:nth-child(n+6) { animation-delay: .2s; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item > .wp-block-navigation-item__content {
	display: block;
	width: 100%;
	padding: 16px 0;
	color: var(--wp--custom--inverse--text);
	font-size: 26px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 34px;
	text-align: left;
}
.rogiq-header-nav .is-menu-open .wp-block-navigation-item__content:hover,
.rogiq-header-nav .is-menu-open .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--primary);
}
.rogiq-header-nav .is-menu-open .wp-block-navigation-submenu > .wp-block-navigation-item__content { padding-bottom: 6px; }
.rogiq-header-nav.wp-block-navigation .is-menu-open .has-child > .wp-block-navigation__submenu-container,
.rogiq-header-nav.wp-block-navigation.items-justified-right .is-menu-open .wp-block-navigation__container .has-child > .wp-block-navigation__submenu-container {
	position: static;
	top: auto;
	left: auto;
	gap: 0;
	padding: 0 0 12px 18px;
	border: 0;
	border-radius: 0;
	background: none;
	-webkit-backdrop-filter: none;
	backdrop-filter: none;
	box-shadow: none;
	transform: none;
}
.rogiq-header-nav.wp-block-navigation .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: 8px 0;
	border-radius: 0;
	background: none;
	color: color-mix(in srgb, var(--wp--custom--inverse--text) 82%, transparent);
	font-size: 18px;
	line-height: 26px;
}
@keyframes rogiq-menu-in {
	from { opacity: 0; transform: translateY(12px); }
	to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
	.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item { animation: none; }
	.rogiq-header-nav.wp-block-navigation .has-child > .wp-block-navigation__submenu-container { transition: none; transform: none; }
}

/* Hamburger up to 1180px (WordPress only switches below 600px; below ~1380 the six header
   links wrapped onto two rows over the banner). 1181-1440 tightens the header instead
   (28px link gaps, 180px logo) so it fits on one row; 1441+ is the Sketch layout. */
@media (min-width: 1181px) and (max-width: 1440px) {
	.rogiq-header-nav.wp-block-navigation,
	.rogiq-header-nav .wp-block-navigation__container { gap: 28px; }
	.rogiq-header-overlay .alignwide > .wp-block-group { gap: 32px !important; }
	.rogiq-header-overlay .wp-block-site-logo img { width: 180px; height: auto; }
}
@media (min-width: 600px) and (max-width: 1180px) {
	.rogiq-header-nav .wp-block-navigation__responsive-container-open:not(.always-shown) {
		display: flex;
	}
	.rogiq-header-nav .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) {
		display: none;
	}
	.rogiq-header-nav .wp-block-navigation__responsive-container-close:not(.always-shown) {
		display: flex;
	}
	.rogiq-header-nav .wp-block-navigation__responsive-container.is-menu-open {
		padding: 35px 24px 48px;
	}
}

/* Menu (hamburger) button: three 2px lines, 20px wide, in a 47px glass circle (the header
   CTA's height). White glass on the dark header in both modes; brighter on hover. */
.rogiq-header-nav .wp-block-navigation__responsive-container-open {
	align-items: center;
	justify-content: center;
	width: 47px;
	height: 47px;
	padding: 0;
	border: 1px solid color-mix(in srgb, #ffffff 28%, transparent);
	border-radius: 50%;
	background: color-mix(in srgb, #ffffff 12%, transparent);
	-webkit-backdrop-filter: blur(14px) saturate(140%);
	backdrop-filter: blur(14px) saturate(140%);
	color: var(--wp--preset--color--contrast);
	transition: background-color .2s ease, border-color .2s ease;
}
.rogiq-header-nav .wp-block-navigation__responsive-container-open svg { display: none; }
.rogiq-header-nav .wp-block-navigation__responsive-container-open::before {
	content: "";
	width: 20px;
	height: 14px;
	background:
		linear-gradient(currentColor 0 0) top / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) center / 100% 2px no-repeat,
		linear-gradient(currentColor 0 0) bottom / 100% 2px no-repeat;
}
.rogiq-header-nav .wp-block-navigation__responsive-container-open:hover {
	background: color-mix(in srgb, #ffffff 22%, transparent);
	border-color: color-mix(in srgb, #ffffff 45%, transparent);
}
.rogiq-header-nav .wp-block-navigation__responsive-container-open:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 3px;
}
@media (max-width: 782px) {
	/* Phones: the header CTA is 44px tall here, so the menu circle matches it. */
	.rogiq-header-nav .wp-block-navigation__responsive-container-open { width: 44px; height: 44px; }
}
@media (max-width: 1180px) {
	/* The CTA's wrapper had a 7px inline gap under the button (54px for a 47px button), so
	   the button sat above the row's centre and out of line with the menu circle. Desktop
	   keeps the Sketch-measured layout. */
	.wp-block-buttons > .wp-block-button.rogiq-header-cta { display: flex; }
}

/* 1101-1279px: the desktop rows are 1180px of fixed Sketch columns, but between the
   stacking breakpoint (1100) and ~1243px the space inside the root padding is narrower
   than 1180, so they ran past the right edge (up to 30px of sideways scroll). Here the
   columns and gaps shrink in proportion instead. Every rule resolves to the Sketch
   pixel values whenever the container is 1180px, so this changes nothing once there is
   room (≥ ~1244px), and 1441+ is outside the query altogether. */
@media (min-width: 1101px) and (max-width: 1279px) {
	/* Flex rows: columns shrink by their Sketch width, gaps by the same ratio. */
	.rogiq-row > * { flex-shrink: 1 !important; min-width: 0; }
	.rogiq-row > .rogiq-stat-media { flex-basis: 500px; }
	.rogiq-row-split-media { gap: min(210px, 17.7966%); }
	.rogiq-row-accordion,
	.rogiq-row-intro { gap: min(120px, 10.1695%); }
	.rogiq-row-intro.rogiq-row-intro--wide { gap: min(26px, 2.2034%); }
	.rogiq-row-testimonial { gap: min(100px, 8.4746%); }
	.rogiq-row-cta { gap: min(24px, 2.0339%); }
	/* Two equal halves (flex-shrink would shrink the padded panel less), and the photo
	   stretches to the panel's 353px instead of following its own 1160:706 ratio. */
	.rogiq-row-cta > * { flex: 0 0 calc((100% - min(24px, 2.0339%)) / 2); }
	.rogiq-row-cta > .wp-block-image { height: auto; }
	.rogiq-row-strengths { gap: min(104px, 8.8136%); }
	.rogiq-row-member { gap: min(61px, 5.1695%); }
	.rogiq-row-article { gap: min(57px, 4.8305%); }
	/* Images that carry a fixed 500x424 (inline or in CSS) keep that proportion. */
	.rogiq-stat-media img,
	.rogiq-split-image,
	.rogiq-split-image img { width: 100% !important; height: auto !important; aspect-ratio: 500 / 424; object-fit: cover; }
	/* Grids: tracks shrink from their Sketch widths, gaps in proportion. */
	.rogiq-strength-grid { grid-template-columns: repeat(2, minmax(0, 296px)); column-gap: min(84px, 12.426%); }
	.rogiq-team-loop .wp-block-post-template { grid-template-columns: repeat(4, minmax(0, 280px)); column-gap: min(20px, 1.6949%); }
	.rogiq-team-card .wp-block-post-featured-image,
	.rogiq-member-media .wp-block-post-featured-image { width: 100%; }
	.rogiq-icon-cols { grid-template-columns: repeat(3, minmax(0, 296px)); column-gap: min(145px, 12.2881%); }
	.rogiq-container > .rogiq-image-cards,
	.rogiq-image-cards { grid-template-columns: repeat(2, minmax(0, 569px)); column-gap: min(42px, 3.5593%); }
	.rogiq-expertise-loop .wp-block-post-template,
	.rogiq-post-loop .wp-block-post-template,
	.rogiq-member-posts .wp-block-post-template { grid-template-columns: repeat(3, minmax(0, 380px)); column-gap: min(20px, 1.6949%); }
	.rogiq-row-form { grid-template-columns: minmax(0, 401px) minmax(0, 742px); }
	/* Footer columns 480 / 216 / 328 / rest, as shares of the 1180 row. */
	.rogiq-footer-grid { grid-template-columns: 480fr 216fr 328fr 156fr; }
	.rogiq-footer-grid.rogiq-footer-grid--foundation { grid-template-columns: 1024fr 156fr; }
}

/* "Contact Us" lives in the menu (item class rogiq-menu-cta): hidden in the desktop menu,
   the last item of the hamburger menu. Where the hamburger shows (<=1180px) the header's
   own Contact Us button is hidden. */
.rogiq-header-nav .wp-block-navigation__container > .rogiq-menu-cta { display: none; }
.rogiq-header-nav .is-menu-open .wp-block-navigation__container > .rogiq-menu-cta { display: flex; }
@media (max-width: 1180px) {
	.rogiq-header-overlay .wp-block-buttons:has(> .rogiq-header-cta) { display: none; }
}

/* Stacked rows (<=1100px): the title block and its content were a blanket 60px apart.
   Heading + paragraph intros read as one block (spacing|40, 20px on phones); a title
   block above a component (accordion, strengths, form) gets spacing|60 (36px on phones);
   a team profile's photo to its name spacing|50 (28px). Rows with the badge overhang and
   the article/sidebar keep their own gaps. */
@media (max-width: 1100px) {
	.rogiq-row.rogiq-row-intro { gap: var(--wp--preset--spacing--40); }
	.rogiq-row.rogiq-row-accordion,
	.rogiq-row.rogiq-row-strengths,
	.rogiq-row.rogiq-row-form { gap: var(--wp--preset--spacing--60); }
	.rogiq-row.rogiq-row-member { gap: var(--wp--preset--spacing--50); }
}
/* Team grid: one card per row on phones (it was two 158px cards). */
@media (max-width: 600px) {
	.rogiq-team-loop .wp-block-post-template { grid-template-columns: 1fr; }
}


/* Full height above phones (user, Oct 12): the hero fills the window (at least 700px so the
   text and Scroll Down never collide). The content and Scroll Down keep Sketch's
   proportions (339/906 from the top, 166/906 from the bottom), so a 906px-tall window
   matches Sketch exactly. svh = the visible height on mobile browsers' collapsing bars. */
@media (min-width: 783px) {
	.rogiq-page-banner.rogiq-hero {
		--rogiq-hero-h: max(100vh, 700px);
		min-height: var(--rogiq-hero-h);
		padding-top: calc(var(--rogiq-hero-h) * 339 / 906);
	}
	@supports (height: 100svh) {
		.rogiq-page-banner.rogiq-hero { --rogiq-hero-h: max(100svh, 700px); }
	}
	.rogiq-hero > .rogiq-scroll-down { bottom: calc(var(--rogiq-hero-h) * 166 / 906); }
}

/* Footer menus (Appearance > Editor > Navigation: "Footer – Quick Links" and "Footer –
   Expertise"): Navigation blocks styled exactly like the old link lists, 18px Regular on
   40px lines, no gaps, left-aligned. */
.rogiq-footer .rogiq-footer-menu.wp-block-navigation,
.rogiq-footer .rogiq-footer-menu .wp-block-navigation__container {
	gap: 0;
	align-items: flex-start;
}
.rogiq-footer .rogiq-footer-menu.wp-block-navigation {
	font-size: 18px;
	font-weight: var(--wp--custom--font-weight--regular);
	line-height: 40px;
}
.rogiq-footer .rogiq-footer-menu .wp-block-navigation-item {
	margin: 0;
}
.rogiq-footer .rogiq-footer-menu .wp-block-navigation-item__content {
	padding: 0;
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
}
.rogiq-footer .rogiq-footer-menu .wp-block-navigation-item__content:hover,
.rogiq-footer .rogiq-footer-menu .wp-block-navigation-item__content:focus-visible {
	color: var(--wp--preset--color--accent);
}

/* Phones: line breaks in headings (set for the desktop layout) are hidden so headings wrap
   to the screen. The plugin adds a space before each break so words never join. A heading
   with the class rogiq-keep-br keeps its breaks. */
@media (max-width: 782px) {
	:is(h1, h2, h3, h4, h5, h6):not(.rogiq-keep-br) br { display: none; }
}