/*
Theme Name: Onepoint Horizon
Author: Onepoint
Version: 0.1.13
*/

/* ===== Onepoint brand tokens =================================================
   Override the plugin's neutral --op-* defaults with Onepoint's brand values.
   Every Onepoint block reads from these variables, so changing them here
   reskins all blocks at once. See blocks/shared/styles/tokens.css for the full token list.
   ============================================================================= */
:root {
	/* Typography */
	--op-font-body:             'Manrope', sans-serif;
	--op-font-heading:          'Oxanium', sans-serif;
	--op-fw-normal:             400;
	--op-fw-medium:             500;
	--op-fw-semibold:           600;
	--op-fw-bold:               700;
	--op-leading-none:          1;
	--op-leading-tight:         1.1;
	--op-leading-snug:          1.2;
	--op-leading-normal:        1.5;
	--op-leading-relaxed:       1.6;
	--op-leading-loose:         1.75;
	--op-text-xs:               0.7rem;
	--op-text-sm:               0.8rem;
	--op-text-base:             1rem;
	--op-text-md:               1.1rem;
	--op-text-lg:               1.2rem;  
	--op-text-xl:               1.25rem;
	--op-text-2xl:              1.5rem;
	--op-text-3xl:              1.75rem;
	--op-text-4xl:              2rem;
	--op-text-5xl:              2.25rem;
	--op-text-6xl:              2.5rem;
	--op-text-7xl:              3rem;
	--op-text-8xl:              3.75rem;
	--op-text-9xl:              4.5rem;
	--op-text-10xl:             5rem;

	/* Inputs */
	--op-input-height:          3rem;
	--op-radius-input:          1rem;

	/* Card */
	--op-card-padding:          1.5rem;
	--op-card-radius:           1rem;

	/* Form */
	--op-form-padding:          3rem 4rem;

	/* Section label backdrop */
	--op-section-backdrop-blur: 40px;

	/* Shared spacing + radius */
	--op-space-1:               0.25rem;
	--op-space-2:               0.5rem;
	--op-space-3:               0.75rem;
	--op-space-4:               1rem;
	--op-space-5:               1.25rem;
	--op-space-6:               1.5rem;
	--op-space-8:               2rem;
	--op-space-10:              2.5rem;
	--op-space-12:              3rem;
	--op-space-16:              4rem;
	--op-space-20:              5rem;
	--op-space-24:              6rem;
	--op-space-28:              7rem;
	--op-space-32:              8rem;
	/* Layout group gaps (row / stack / grid) */
	--op-layout-gap-row:        var(--op-space-32);
	--op-layout-gap-stack:      var(--op-space-20);
	--op-layout-gap-grid:       var(--op-space-10);
	--op-layout-gap-row-sm:     var(--op-space-16);
	--op-layout-gap-stack-sm:   var(--op-space-16);
	--op-layout-gap-grid-sm:    var(--op-space-16);
	--op-radius-sm:             0.5rem;
	--op-radius-md:             0.75rem;
	--op-radius-lg:             1rem;

	/* Motion – shared easing (e.g. onepoint-link chevron / underline) */
	--op-ease-smooth:           cubic-bezier(0.22, 1, 0.36, 1);

	/* Outline button – default fill source (55% applied in component rule) */
	--op-outline-bg:            var(--color-charcoal);

}

/* Layout blocks: palette ramp shade overrides preset !important classes. */
.wp-block-group.has-onepoint-ramp-bg,
.wp-block-columns.has-onepoint-ramp-bg,
.wp-block-grid.has-onepoint-ramp-bg,
.wp-block-stack.has-onepoint-ramp-bg {
	background-color: var(--onepoint-layout-ramp-bg) !important;
}

/* ===== Base ===== */
/*
 * Clip horizontal bleed on html, not body. `overflow-x: hidden` on body forces
 * `overflow-y: auto` (CSS spec), which makes body the scroll container and breaks
 * `position: sticky` on the header — white gap at the top until you scroll.
 */
html {
	overflow-x: clip;
	overflow-x: hidden; /* fallback when clip is unsupported */
}

.site-content {
	box-sizing: border-box;
	max-width: 100%;
	overflow-x: clip;
}

body {
	margin: 0;
	font-family: var(--op-font-body);
	font-size: var(--op-text-base);
	line-height: var(--op-leading-normal);
	color: var(--color-charcoal);
	background: var(--color-vanilla);
}

/* Mobile drawer: full body lock while the slide-out menu is open. */
body.onepoint-mega-menu-open--drawer {
	overflow: hidden;
	position: fixed;
	width: 100%;
	left: 0;
	right: 0;
}

/* Shared typography: let native form elements and pseudo-elements inherit the theme font. */
button,
input,
label,
optgroup,
select,
textarea {
	font-family: inherit;
}

button:not(:disabled),
input[type='button']:not(:disabled),
input[type='submit']:not(:disabled),
input[type='reset']:not(:disabled),
.wp-block-button .wp-block-button__link {
	cursor: pointer;
}

*::before,
*::after {
	font-family: inherit;
}

h1 {
	font-size: var(--op-text-10xl);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	margin: 0;
}

h2 {
	font-family: var(--op-font-heading);
	font-size: var(--op-text-8xl);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	color: var(--charcoal-200);
	margin: 0;
	width: 75%;
}

h3 {
	font-size: var(--op-text-6xl);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-snug);
	margin: 0;
}

h4 {
	font-size: var(--op-text-4xl);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-snug);
	margin: 0;
	color: var(--charcoal-400);
}

h5 {
	font-size: var(--op-text-sm);
	width: fit-content;
	position: relative;
	padding: var(--op-space-3) var(--op-space-8);
	margin: 0;
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	z-index: 1;
}

h6 {
	font-size: var(--op-text-sm);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	margin: 0;
}

/*
 * WordPress core: `.is-layout-constrained > :where(:not(.alignleft):not(.alignright)…)`
 * sets `margin-inline: auto` on children to centre the content lane. That predates
 * block typography classes: it does not exclude `has-text-align-left`, so a Heading
 * set to “left” in the editor still gets centred as a box. Reset margins for headings
 * that are not explicitly centre-aligned; keep centre as-is.
 */
.is-layout-constrained
	> :is(h1, h2, h3, h4, h5, h6).wp-block-heading.has-text-align-left,
.is-layout-constrained
	> :is(h1, h2, h3, h4, h5, h6).wp-block-heading:not([class*='has-text-align-']) {
	margin-inline: 0 !important;
}

.is-layout-constrained
	> :is(h1, h2, h3, h4, h5, h6).wp-block-heading.has-text-align-right {
	margin-inline: 0 !important;
	margin-inline-start: auto !important;
}

p {
	font-size: var(--op-text-lg);
	line-height: var(--op-leading-relaxed);
	font-weight: var(--op-fw-normal);
	margin: 0;
	padding-bottom: var(--op-space-4);
}

p:last-child {
	padding-bottom: 0;
}

@media (max-width: 1024px) {
	h1 {
		font-size: var(--op-text-9xl);
	}

	h2 {
		font-size: var(--op-text-7xl);
	}

	h3 {
		font-size: var(--op-text-5xl);
	}

	h4 {
		font-size: var(--op-text-3xl);
	}
}

@media (max-width: 768px) {
	h1 {
		font-size: var(--op-text-8xl);
	}

	h2 {
		font-size: var(--op-text-6xl);
	}

	h3 {
		font-size: var(--op-text-4xl);
	}

	a,
	p,
	span {
		font-size: var(--op-text-lg);
		line-height: var(--op-leading-relaxed);
	}
}

@media (max-width: 480px) {
	h5,
	h6 {
		font-size: var(--op-text-xs);
	}

	a,
	p,
	span {
		font-size: var(--op-text-base);
		line-height: var(--op-leading-normal);
	}
}

h5.has-text-align-center {
	width: fit-content !important;
	margin-left: auto !important;
	margin-right: auto !important;
	text-align: center;
	display: block;
}

h5.has-text-align-left,
h5:not([class*='has-text-align-center']):not([class*='has-text-align-right']) {
	padding-left: 0;
}

h5::before {
	content: '';
	position: absolute;
	inset: 0;
	background: var(--h5-bg, var(--op-section-backdrop));
	filter: blur(20px);
	z-index: -1;
}

/* ── Typography scroll reveal (theme-owned; see assets/js/type-reveal.js) ── */

@keyframes op-type-enter {
	from {
		opacity: 0;
		transform: translate3d(0, var(--op-type-enter-shift, 0.75rem), 0);
	}

	to {
		opacity: 1;
		transform: translate3d(0, 0, 0);
	}
}

html.op-type-reveal-enabled
	.site-content
	:is(h1, h2, h3, h4, h5, h6, p).op-type-reveal-pending:not(.is-op-type-revealed):not(
		.is-op-type-revealed--instant
	) {
	opacity: 0;
	transform: translate3d(0, var(--op-type-enter-shift, 0.75rem), 0);
}

html.op-type-reveal-enabled
	.site-content
	:is(h1, h2).op-type-reveal-pending:not(.is-op-type-revealed):not(
		.is-op-type-revealed--instant
	) {
	--op-type-enter-shift: 1rem;
}

html.op-type-reveal-enabled
	.site-content
	:is(h3, h4).op-type-reveal-pending:not(.is-op-type-revealed):not(
		.is-op-type-revealed--instant
	) {
	--op-type-enter-shift: 0.75rem;
}

html.op-type-reveal-enabled
	.site-content
	:is(h5, h6).op-type-reveal-pending:not(.is-op-type-revealed):not(
		.is-op-type-revealed--instant
	) {
	--op-type-enter-shift: 0.5rem;
}

html.op-type-reveal-enabled
	.site-content
	p.op-type-reveal-pending:not(.is-op-type-revealed):not(.is-op-type-revealed--instant) {
	--op-type-enter-shift: 0.625rem;
}

html.op-type-reveal-enabled
	.site-content
	:is(h1, h2).op-type-reveal-pending.is-op-type-revealed:not(.is-op-type-revealed--instant) {
	animation: op-type-enter 0.56s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: var(--op-type-stagger, 0ms);
}

html.op-type-reveal-enabled
	.site-content
	:is(h3, h4).op-type-reveal-pending.is-op-type-revealed:not(.is-op-type-revealed--instant) {
	animation: op-type-enter 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
	animation-delay: var(--op-type-stagger, 0ms);
}

html.op-type-reveal-enabled
	.site-content
	:is(h5, h6).op-type-reveal-pending.is-op-type-revealed:not(.is-op-type-revealed--instant) {
	animation: op-type-enter 0.42s var(--op-ease-smooth) both;
	animation-delay: var(--op-type-stagger, 0ms);
}

html.op-type-reveal-enabled
	.site-content
	p.op-type-reveal-pending.is-op-type-revealed:not(.is-op-type-revealed--instant) {
	animation: op-type-enter 0.48s var(--op-ease-smooth) both;
	animation-delay: var(--op-type-stagger, 0ms);
}

html.op-type-reveal-enabled
	.site-content
	:is(h1, h2, h3, h4, h5, h6, p).op-type-reveal-pending.is-op-type-revealed--instant {
	opacity: 1;
	transform: none;
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	html.op-type-reveal-enabled
		.site-content
		:is(h1, h2, h3, h4, h5, h6, p).op-type-reveal-pending {
		opacity: 1;
		transform: none;
		animation: none !important;
	}
}

/* ── H1/H2 cursor-proximity letters (see assets/js/text-cursor-proximity.js) ── */

html.op-text-cursor-proximity-enabled
	:is(.site-content, .editor-styles-wrapper)
	:is(h1, h2).op-text-cursor-proximity
	:is(
		.op-text-cursor-proximity__word,
		.op-text-cursor-proximity__letter,
		.op-text-cursor-proximity__space
	) {
	display: inline-block;
	font-family: inherit;
	font-size: inherit;
	font-weight: inherit;
	letter-spacing: inherit;
	line-height: inherit;
	text-transform: inherit;
}

html.op-text-cursor-proximity-enabled
	:is(.site-content, .editor-styles-wrapper)
	.op-text-cursor-proximity__word {
	white-space: nowrap;
}

html.op-text-cursor-proximity-enabled
	:is(.site-content, .editor-styles-wrapper)
	.op-text-cursor-proximity__letter {
	transform-origin: center center;
	will-change: transform, color;
}

@media (max-width: 767px) {
	/*
	 * nowrap keeps whole words on one line (desktop). On narrow viewports long
	 * words overflow and get clipped by overflow-x on html — allow wrapping.
	 */
	html.op-text-cursor-proximity-enabled
		:is(.site-content, .editor-styles-wrapper)
		:is(h1, h2).op-text-cursor-proximity {
		max-width: 100%;
		overflow-wrap: anywhere;
	}

	html.op-text-cursor-proximity-enabled
		:is(.site-content, .editor-styles-wrapper)
		.op-text-cursor-proximity__word {
		display: inline;
		white-space: normal;
	}
}

@media (prefers-reduced-motion: reduce) {
	html.op-text-cursor-proximity-enabled
		:is(.site-content, .editor-styles-wrapper)
		.op-text-cursor-proximity__letter {
		transform: none !important;
		will-change: auto;
	}
}

/*
 * Layout breakpoints (theme):
 *   991px — row/grid/columns stack, section padding, header drawer
 *   768px — typography and list density (narrow phones)
 */

/* Let top-level blocks span the content column (needed for carousel full-bleed math). */
.site-content > *,
.site-content > .wp-block-cover .wp-block-cover__inner-container,
.editor-styles-wrapper .is-root-container > *,
.editor-styles-wrapper .is-root-container > .wp-block-cover .wp-block-cover__inner-container {
	max-width: min(1440px, 100%);
	width: 100%;
	min-width: 0;
	margin: 0 auto;
	padding: var(--op-space-16) var(--op-space-20) var(--op-space-32);
	box-sizing: border-box;
	display: flex;
	gap: var(--op-space-20);
}

/* Stack section siblings; row/grid/columns keep their own flex direction. */
.site-content > *:not(:is(.is-layout-flex, .is-layout-grid, .wp-block-columns)),
.site-content > .wp-block-cover .wp-block-cover__inner-container,
.editor-styles-wrapper .is-root-container > *:not(:is(.is-layout-flex, .is-layout-grid, .wp-block-columns)),
.editor-styles-wrapper .is-root-container > .wp-block-cover .wp-block-cover__inner-container {
	flex-direction: column;
}

/*
 * Horizontal Group / Row (`.is-layout-flex` without `.is-vertical`): theme default
 * gap and alignment (core default gap is 0.5rem).
 */
.site-content .is-layout-flex:not(.is-vertical),
.editor-styles-wrapper .is-layout-flex:not(.is-vertical) {
	--wp--style--block-gap: var(--op-layout-gap-row);
	gap: var(--op-layout-gap-row);
	align-items: stretch;
	flex-direction: row;
	/* flex-wrap: defer to core inline style (Allow to wrap toggle). */
}

.site-content .is-layout-flex:not(.is-vertical) > * {
	min-width: 0;
	align-self: stretch;
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
}

/* Rows: text grows; buttons keep natural width and do not stretch. */
.site-content .is-layout-flex:not(.is-vertical) > :is(
	.wp-block-buttons,
	.wp-block-button
) {
	flex: 0 0 auto;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
}

/*
 * Sibling headings beside sticky blocks (cascade / stack / menu-scroll): block
 * view.js adds .op-layout-sticky-offset on the parent Row, Columns, or Grid.
 * flex rule above sets align-self: stretch on every child — on a horizontal Row
 * that makes the heading as tall as the sticky block, which prevents
 * position: sticky from engaging. Restore start alignment and natural flex-basis.
 */
@media (min-width: 782px) {
	.site-content .op-layout-sticky-offset.is-layout-flex:not(.is-vertical) > :is(
		.wp-block-heading,
		h1, h2, h3, h4
	) {
		align-self: flex-start;
		flex: 0 1 auto;
		width: auto;
		max-width: min(700px, 100%);
	}

	.editor-styles-wrapper
		.op-layout-sticky-offset.is-layout-flex:not(.is-vertical)
		.block-editor-block-list__block:has(
			> :is(.wp-block-heading, h1, h2, h3, h4)
		) {
		align-self: flex-start;
		flex: 0 1 auto;
		width: auto;
		max-width: min(700px, 100%);
	}

	/*
	 * Columns: heading column must match the sticky block column height so the
	 * heading has scroll room; block CSS sets align-items: start on the wrapper.
	 */
	.site-content .wp-block-columns.op-layout-sticky-offset,
	.editor-styles-wrapper .wp-block-columns.op-layout-sticky-offset {
		align-items: stretch;
	}

	.site-content .wp-block-columns.op-layout-sticky-offset
		> .wp-block-column:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)),
	.editor-styles-wrapper .wp-block-columns.op-layout-sticky-offset
		> .wp-block-column:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)) {
		align-self: stretch;
	}

	/*
	 * Grid: row height follows the sticky cards lane; text cell must not use
	 * theme height:100% or stretch-only flex rules that block position:sticky.
	 */
	.site-content .is-layout-grid.op-layout-sticky-offset,
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset {
		align-items: stretch;
		overflow: visible;
	}

	.site-content .is-layout-grid.op-layout-sticky-offset > *,
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset > * {
		height: auto;
	}

	.site-content .is-layout-grid.op-layout-sticky-offset > *:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)):not(.wp-block-onepoint-op-cascade-cards):not(.wp-block-onepoint-op-stack-cards):not(.op-cascade-cards):not(.op-stack-cards),
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset > *:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)):not(.wp-block-onepoint-op-cascade-cards):not(.wp-block-onepoint-op-stack-cards):not(.op-cascade-cards):not(.op-stack-cards),
	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)) {
		align-self: start;
		height: auto;
		min-height: 0;
	}

	.site-content .is-layout-grid.op-layout-sticky-offset > :is(
			.wp-block-heading,
			h1, h2, h3, h4
		),
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset > :is(
			.wp-block-heading,
			h1, h2, h3, h4
		) {
		align-self: start;
		width: auto;
		max-width: min(700px, 100%);
	}

	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block:not(:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		)):has(> :is(.wp-block-heading, h1, h2, h3, h4)) {
		width: auto;
		max-width: min(700px, 100%);
	}

	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block:has(
			.op-cascade-cards,
			.op-stack-cards,
			.op-menu-scroll
		),
	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block[data-type='onepoint/op-stack-cards'],
	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block[data-type='onepoint/op-cascade-cards'],
	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset
		.block-editor-block-list__block[data-type='onepoint/op-menu-scroll'] {
		width: 100%;
		max-width: 100%;
	}

	.site-content .is-layout-grid.op-layout-sticky-offset > :is(
			.wp-block-onepoint-op-stack-cards,
			.wp-block-onepoint-op-cascade-cards,
			.op-stack-cards,
			.op-cascade-cards
		),
	.site-content .is-layout-grid.op-layout-sticky-offset > *:has(
			.op-stack-cards,
			.op-cascade-cards
		) {
		width: 100%;
		max-width: 100%;
	}
}

/*
 * OP Menu Scroll in a row: fixed sidebar track (block CSS mirrors columns; theme
 * reinforces so row flex children do not shrink the nav).
 */
@media (min-width: 992px) {
	.site-content .is-layout-flex:not(.is-vertical):has(.op-menu-scroll) {
		flex-wrap: nowrap;
	}

	.site-content .is-layout-flex:not(.is-vertical) > :is(
		.wp-block-onepoint-op-menu-scroll,
		:has(> .op-menu-scroll)
	) {
		flex: 0 0 var(--op-sidebar-nav-width, 15.75rem);
		min-width: var(--op-sidebar-nav-width, 15.75rem);
		max-width: var(--op-sidebar-nav-width, 15.75rem);
		width: auto;
		align-self: flex-start;
	}

	.site-content .is-layout-flex:not(.is-vertical):has(.op-menu-scroll--hub) > :is(
		.wp-block-onepoint-op-menu-scroll,
		:has(> .op-menu-scroll)
	) {
		flex: 0 0 18rem;
		min-width: 18rem;
		max-width: 18rem;
	}

	.site-content .is-layout-flex:not(.is-vertical):has(.op-menu-scroll) > :not(:is(
		.wp-block-onepoint-op-menu-scroll,
		:has(> .op-menu-scroll)
	)) {
		flex: 1 1 0;
		min-width: 0;
	}

	.editor-styles-wrapper .is-layout-flex:not(.is-vertical) .block-editor-block-list__block:has(.op-menu-scroll) {
		flex: 0 0 var(--op-sidebar-nav-width, 15.75rem);
		min-width: var(--op-sidebar-nav-width, 15.75rem);
		max-width: var(--op-sidebar-nav-width, 15.75rem);
		width: auto;
		align-self: flex-start;
	}

	.editor-styles-wrapper .is-layout-flex:not(.is-vertical):has(.op-menu-scroll--hub) .block-editor-block-list__block:has(.op-menu-scroll) {
		flex: 0 0 18rem;
		min-width: 18rem;
		max-width: 18rem;
	}

	/*
	 * OP Contact Profile + Contact Section (Row or Columns): profile keeps natural
	 * card width; the wizard form grows to fill remaining horizontal space.
	 */
	.site-content .is-layout-flex:not(.is-vertical):has(.op-contact-profile),
	.site-content .wp-block-columns:has(.op-contact-profile),
	.editor-styles-wrapper .is-layout-flex:not(.is-vertical):has(.op-contact-profile),
	.editor-styles-wrapper .wp-block-columns:has(.op-contact-profile) {
		flex-wrap: nowrap;
		width: 100%;
		max-width: none !important;
		margin-inline: 0 !important;
	}

	.site-content .is-layout-flex:not(.is-vertical):has(.op-contact-profile) > :is(
		.wp-block-onepoint-op-contact-profile,
		:has(> .op-contact-profile)
	),
	.site-content .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-profile) {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 100%;
		margin-inline: 0 !important;
		align-self: flex-start;
	}

	.site-content .is-layout-flex:not(.is-vertical):has(.op-contact-profile)
		> .wp-block-onepoint-op-contact-section,
	.site-content .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-section) {
		flex: 1 1 0 !important;
		min-width: 0;
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
		align-self: stretch;
	}

	.editor-styles-wrapper .is-layout-flex:not(.is-vertical) .block-editor-block-list__block:has(.op-contact-profile),
	.editor-styles-wrapper .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-profile) {
		flex: 0 0 auto !important;
		width: auto !important;
		max-width: 100%;
		margin-inline: 0 !important;
		align-self: flex-start;
	}

	.editor-styles-wrapper .is-layout-flex:not(.is-vertical):has(.op-contact-profile)
		.block-editor-block-list__block:has(.op-contact-section),
	.editor-styles-wrapper .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-section) {
		flex: 1 1 0 !important;
		min-width: 0;
		width: auto !important;
		max-width: none !important;
		margin-inline: 0 !important;
		align-self: stretch;
	}

	.site-content .is-layout-flex:not(.is-vertical):has(.op-contact-profile)
		> .wp-block-onepoint-op-contact-section,
	.site-content .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-section),
	.editor-styles-wrapper .is-layout-flex:not(.is-vertical):has(.op-contact-profile)
		.block-editor-block-list__block:has(.op-contact-section),
	.editor-styles-wrapper .wp-block-columns:has(.op-contact-profile)
		> .wp-block-column:has(.op-contact-section) {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}
}

/*
 * OP Contact layout – WP constrained / vertical stacks centre child rows/columns
 * with margin-inline: auto and a content max-width. Reset at all breakpoints.
 */
.site-content :is(.is-layout-constrained, .is-layout-flex.is-vertical) > :is(
	.is-layout-flex:not(.is-vertical),
	.wp-block-columns
):has(.op-contact-profile),
.editor-styles-wrapper :is(.is-layout-constrained, .is-layout-flex.is-vertical) > :is(
	.is-layout-flex:not(.is-vertical),
	.wp-block-columns
):has(.op-contact-profile) {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.site-content .wp-block-columns:has(.op-contact-profile) .wp-block-onepoint-op-contact-section,
.site-content .wp-block-columns:has(.op-contact-profile) .op-contact-section,
.editor-styles-wrapper .wp-block-columns:has(.op-contact-profile) .op-contact-section {
	width: 100%;
	max-width: none !important;
	margin-inline: 0 !important;
}

.editor-styles-wrapper .is-layout-flex:not(.is-vertical) > .block-editor-inner-blocks {
	min-width: 0;
	align-self: stretch;
	flex: 1 1 auto;
	width: 100%;
	max-width: 100%;
}

/*
 * Vertical Group / Stack (`.is-layout-flex.is-vertical`): theme default gap
 * (matches top-level section rhythm; core default is 0.5rem).
 */
.site-content .is-layout-flex.is-vertical,
.editor-styles-wrapper .is-layout-flex.is-vertical {
	--wp--style--block-gap: var(--op-layout-gap-stack);
	gap: var(--op-layout-gap-stack);
	align-items: stretch;
	flex-direction: column;
}

.site-content .is-layout-flex.is-vertical > *,
.editor-styles-wrapper .is-layout-flex.is-vertical > * {
	min-width: 0;
	align-self: stretch;
}

.site-content .wp-block-columns,
.editor-styles-wrapper .wp-block-columns {
	flex-direction: row;
	align-items: stretch;
}

.site-content .wp-block-column,
.editor-styles-wrapper .wp-block-column {
	min-width: 0;
}

/*
 * Grid Group / Grid layout (`.is-layout-grid`): theme default gap
 * (core default is 0.5rem; grid block gap is not exposed in the editor UI).
 * Top-level grid blocks must stay `display: grid` — the root content rule above
 * sets direct children to flex column.
 *
 * Same-row cells share the tallest row height (native CSS Grid). Multi-row
 * equal heights for OP Section Hover card grids are handled in that block’s script.
 */
.site-content .is-layout-grid,
.editor-styles-wrapper .is-layout-grid {
	display: grid;
	gap: var(--op-layout-gap-grid);
	/* Each row is as tall as the tallest cell in that row; stretch fills the row track. */
	align-items: stretch;
}

.site-content .is-layout-grid > *,
.editor-styles-wrapper .is-layout-grid > * {
	min-width: 0;
	align-self: stretch;
	height: 100%;
}

/*
 * OP Hover Rise Card: in-flow content is only an aspect-ratio spacer; theme
 * height:100% + min-width:0 lets the grid shrink-wrap to 0×0. Span the grid
 * lane and derive card height from width instead of a zero row track.
 */
.site-content .is-layout-constrained .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card),
.editor-styles-wrapper .is-layout-constrained .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card),
.site-content .is-layout-flex.is-vertical .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card),
.editor-styles-wrapper .is-layout-flex.is-vertical .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card),
.site-content .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card),
.editor-styles-wrapper .is-layout-grid:has(.wp-block-onepoint-op-hover-rise-card) {
	width: 100%;
	min-width: 0;
}

.site-content .wp-block-group:has(.wp-block-onepoint-op-hover-rise-card),
.editor-styles-wrapper .wp-block-group:has(.wp-block-onepoint-op-hover-rise-card),
.site-content .wp-block-group__inner-container:has(.wp-block-onepoint-op-hover-rise-card),
.editor-styles-wrapper .wp-block-group__inner-container:has(.wp-block-onepoint-op-hover-rise-card) {
	width: 100%;
	min-width: 0;
}

.site-content .is-layout-grid > .wp-block-onepoint-op-hover-rise-card,
.editor-styles-wrapper .is-layout-grid > .wp-block-onepoint-op-hover-rise-card,
.site-content .is-layout-grid > article.wp-block-onepoint-op-hover-rise-card,
.editor-styles-wrapper .is-layout-grid > article.wp-block-onepoint-op-hover-rise-card {
	width: 100%;
	height: auto !important;
	align-self: start !important;
	justify-self: stretch;
}

/* Editor canvas: grid cells are block-list wrappers inside the group. */
.editor-styles-wrapper .is-layout-grid .block-editor-inner-blocks > .block-editor-block-list__layout {
	align-items: stretch;
	min-height: 100%;
}

.editor-styles-wrapper .is-layout-grid .block-editor-block-list__block {
	align-self: stretch;
	min-height: 100%;
}

.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset .block-editor-inner-blocks > .block-editor-block-list__layout {
	align-items: stretch;
	min-height: 0;
}

.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset .block-editor-block-list__block {
	align-self: stretch;
	min-height: 0;
	height: auto;
}

.editor-styles-wrapper
	.is-layout-grid
	.block-editor-block-list__block[data-type='onepoint/op-hover-rise-card'] {
	width: 100%;
	height: auto;
	min-height: 0;
	align-self: start;
}

/* Editor canvas: inner block list carries row/stack direction (not the group shell). */
.editor-styles-wrapper .is-layout-flex:not(.is-vertical) .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-direction: row;
	align-items: stretch;
	gap: var(--op-layout-gap-row);
	min-width: 0;
}

.editor-styles-wrapper .is-layout-flex.is-vertical .block-editor-inner-blocks > .block-editor-block-list__layout {
	display: flex;
	flex-direction: column;
	align-items: stretch;
	gap: var(--op-layout-gap-stack);
	min-width: 0;
}

.editor-styles-wrapper .is-layout-flex:not(.is-vertical) .block-editor-block-list__block {
	align-self: stretch;
	min-width: 0;
	flex: 1 1 auto;
	width: auto;
	max-width: 100%;
}

.editor-styles-wrapper
	.is-layout-flex:not(.is-vertical)
	.block-editor-block-list__block:has(
		:is( .wp-block-buttons, .wp-block-button )
	) {
	flex: 0 0 auto;
	align-self: flex-start;
	width: auto;
	max-width: 100%;
}

.editor-styles-wrapper .is-layout-flex.is-vertical .block-editor-block-list__block {
	align-self: stretch;
	min-width: 0;
	width: 100%;
}

/*
 * Constrained groups: theme stack gap (core default gap is 0.5rem).
 */
.site-content .is-layout-constrained,
.editor-styles-wrapper .is-layout-constrained {
	--wp--style--block-gap: var(--op-layout-gap-stack);
	gap: var(--op-layout-gap-stack);
}

.site-content .is-layout-constrained > *,
.editor-styles-wrapper .is-layout-constrained > * {
	min-width: 0;
}

/*
 * Generic full-bleed panel backgrounds:
 * any top-level block with editor background (`.has-background`) breaks out to
 * viewport width, while its immediate inner wrapper stays in the 1440px content lane.
 *
 * Core Cover uses `.wp-block-cover__background` for the dim layer (not `.has-background`
 * on the block), so top-level `.wp-block-cover` gets the same viewport breakout.
 */
.site-content > *.has-background,
.site-content > .wp-block-cover,
.editor-styles-wrapper .is-root-container > *.has-background,
.editor-styles-wrapper .is-root-container > .wp-block-cover {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	box-sizing: border-box;
	padding-left: 0;
	padding-right: 0;
	padding-top: var(--op-space-16);
	padding-bottom: var(--op-space-32);
}

/* Cover wrapper only: flush vertical padding; content lane uses shared `> *` rules above. */
.site-content > .wp-block-cover,
.editor-styles-wrapper .is-root-container > .wp-block-cover {
	--cover-image-width: 18.75rem;
	padding-top: 0;
	padding-bottom: 0;
}

/*
 * Cover inner images: fixed display width, auto height (keeps aspect ratio).
 * Overrides core size-* classes and editor resolution choice so all images
 * render at the same width. Change --cover-image-width on the cover block to adjust.
 */
.site-content > .wp-block-cover .wp-block-cover__inner-container img,
.editor-styles-wrapper .is-root-container > .wp-block-cover .wp-block-cover__inner-container img {
	width: var(--cover-image-width, 18.75rem) !important;
	height: auto !important;
	max-width: 100% !important;
	max-height: none !important;
}

.site-content > *.has-background > *,
.editor-styles-wrapper .is-root-container > *.has-background > * {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--op-space-20);
	padding-right: var(--op-space-20);
	box-sizing: border-box;
}

/*
 * Sub-header: full-bleed shell (border/background edge-to-edge) with inner
 * content in the standard 1440px lane — same split as `.has-background` blocks.
 */
.site-content > .wp-block-onepoint-op-sub-header,
.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header {
	display: block;
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
	padding-top: 0;
	padding-bottom: 0;
	padding-left: 0;
	padding-right: 0;
	gap: 0;
	box-sizing: border-box;
}

.site-content > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
.editor-styles-wrapper .op-sub-header > .op-sub-header__inner {
	max-width: 1440px;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--op-space-20);
	padding-right: var(--op-space-20);
	box-sizing: border-box;
}

@media (max-width: 991px) {
	.site-content > *,
	.site-content > .wp-block-cover .wp-block-cover__inner-container,
	.editor-styles-wrapper .is-root-container > *,
	.editor-styles-wrapper .is-root-container > .wp-block-cover .wp-block-cover__inner-container,
	.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
	.editor-styles-wrapper .op-sub-header > .op-sub-header__inner {
		padding: var(--op-space-16) var(--op-space-10) var(--op-space-32);
		gap: var(--op-space-16);
	}

	/*
	 * `100vw` + breakout margins overflow by ~scrollbar width on mobile Chrome.
	 * Content is already full-width here; drop viewport breakout.
	 */
	.site-content > *.has-background,
	.site-content > .wp-block-cover,
	.editor-styles-wrapper .is-root-container > *.has-background,
	.editor-styles-wrapper .is-root-container > .wp-block-cover,
	.site-content > .wp-block-onepoint-op-sub-header,
	.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header {
		width: 100%;
		max-width: 100%;
		margin-left: 0;
		margin-right: 0;
	}

	.site-content > *.has-background,
	.editor-styles-wrapper .is-root-container > *.has-background {
		padding-top: var(--op-space-16);
		padding-bottom: var(--op-space-32);
	}

	.site-content > *.has-background > *,
	.editor-styles-wrapper .is-root-container > *.has-background > * {
		padding-left: var(--op-space-10);
		padding-right: var(--op-space-10);
	}

	/*
	 * Stack horizontal Group / Row blocks on small screens. Desktop theme rules
	 * force top-level `.is-layout-flex:not(.is-vertical)` to row; WP cannot set
	 * per-breakpoint orientation without custom CSS.
	 */
	.site-content .is-layout-flex:not(.is-vertical),
	.site-content > .is-layout-flex:not(.is-vertical) {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
		gap: var(--op-layout-gap-row-sm);
		--wp--style--block-gap: var(--op-layout-gap-row-sm);
	}

	.site-content .wp-block-columns,
	.site-content > .wp-block-columns {
		flex-direction: column;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	/* Editor keeps row layout for editing; front end stacks above. */
	.editor-styles-wrapper .is-layout-flex:not(.is-vertical) .block-editor-inner-blocks > .block-editor-block-list__layout {
		flex-direction: row;
		gap: var(--op-layout-gap-row-sm);
	}

	.site-content .is-layout-flex.is-vertical,
	.editor-styles-wrapper .is-layout-flex.is-vertical {
		gap: var(--op-layout-gap-stack-sm);
		--wp--style--block-gap: var(--op-layout-gap-stack-sm);
	}

	.site-content .is-layout-constrained,
	.editor-styles-wrapper .is-layout-constrained {
		gap: var(--op-layout-gap-stack-sm);
		--wp--style--block-gap: var(--op-layout-gap-stack-sm);
	}

	/*
	 * Stack Grid layout blocks on small screens. Core sets column counts via inline
	 * `grid-template-columns`; override to a single column at this breakpoint.
	 * Sticky heading + stack/cascade cards: flex column so the heading wrapper can
	 * stick while scrolling the cards lane (grid rows alone are too short for sticky).
	 */
	.site-content .is-layout-grid,
	.editor-styles-wrapper .is-layout-grid {
		grid-template-columns: minmax(0, 1fr) !important;
		gap: var(--op-layout-gap-grid-sm);
		--wp--style--block-gap: var(--op-layout-gap-grid-sm);
	}

	.site-content .is-layout-grid.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		),
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		),
	.site-content .wp-block-columns.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		),
	.editor-styles-wrapper .wp-block-columns.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		) {
		display: flex !important;
		flex-direction: column;
		overflow: visible;
	}

	.site-content .is-layout-grid.op-layout-sticky-offset > :is(
			.wp-block-heading,
			h1, h2, h3, h4
		),
	.editor-styles-wrapper .is-layout-grid.op-layout-sticky-offset > :is(
			.wp-block-heading,
			h1, h2, h3, h4
		) {
		width: 100%;
		max-width: 100%;
	}

	.site-content > .wp-block-cover,
	.editor-styles-wrapper .is-root-container > .wp-block-cover {
		padding: 0;
	}

	.site-content > .wp-block-onepoint-op-sub-header,
	.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header {
		padding-top: 0;
		padding-bottom: 0;
		padding-left: 0;
		padding-right: 0;
	}

	.site-content > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
	.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
	.editor-styles-wrapper .op-sub-header > .op-sub-header__inner {
		padding-left: var(--op-space-6);
		padding-right: var(--op-space-6);
	}
}

@media (max-width: 991px) and (prefers-reduced-motion: no-preference) {
	.site-content .is-layout-grid.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		)
		> *:not(:has(.op-stack-cards, .op-cascade-cards)):not(
			.wp-block-onepoint-op-stack-cards
		):not(.wp-block-onepoint-op-cascade-cards),
	.editor-styles-wrapper
		.is-layout-grid.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		)
		> .block-editor-block-list__block:not(:has(
				.op-stack-cards,
				.op-cascade-cards
			)):not([data-type='onepoint/op-stack-cards']):not(
				[data-type='onepoint/op-cascade-cards']
			),
	.site-content .wp-block-columns.op-layout-sticky-offset:has(
			.op-stack-cards,
			.op-cascade-cards
		)
		> .wp-block-column:not(:has(.op-stack-cards, .op-cascade-cards)) {
		position: sticky;
		top: var(
			--op-stack-cards-sticky-top,
			var(--op-cascade-sticky-top, 6.75rem)
		);
		z-index: 10;
		align-self: start;
		width: 100%;
		max-width: 100%;
		margin-block: 0;
		padding-bottom: var(--op-space-4);
		background: var(--op-color-light);
		box-sizing: border-box;
	}
}

@media (max-width: 768px) {
	.site-content > *,
	.site-content > .wp-block-cover .wp-block-cover__inner-container,
	.editor-styles-wrapper .is-root-container > *,
	.editor-styles-wrapper .is-root-container > .wp-block-cover .wp-block-cover__inner-container,
	.editor-styles-wrapper .is-root-container > .wp-block-onepoint-op-sub-header > .op-sub-header__inner,
	.editor-styles-wrapper .op-sub-header > .op-sub-header__inner {
		padding: var(--op-space-8) var(--op-space-6) var(--op-space-16);
	}
}

/*
 * Core List block only (ul/ol.wp-block-list). Avoids styling li in nav, cards, etc.
 */
.site-content :is(ul.wp-block-list, ol.wp-block-list),
.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) {
	list-style-position: outside;
	margin: 0;
	padding: 0;
	padding-inline-start: var(--op-space-6);
}

.site-content ul.wp-block-list,
.editor-styles-wrapper ul.wp-block-list {
	list-style-type: disc;
}

.site-content ul.wp-block-list li,
.editor-styles-wrapper ul.wp-block-list li {
	display: list-item;
	list-style-type: disc;
	list-style-position: outside;
}

.site-content ol.wp-block-list,
.editor-styles-wrapper ol.wp-block-list {
	list-style-type: decimal;
}

.site-content :is(ul.wp-block-list, ol.wp-block-list) li,
.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li {
	font-size: var(--op-text-lg);
	line-height: var(--op-leading-relaxed);
	font-weight: var(--op-fw-normal);
	color: var(--color-charcoal);
	margin: 0;
	padding-bottom: var(--op-space-4);
}

.site-content :is(ul.wp-block-list, ol.wp-block-list) li::marker,
.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li::marker {
	color: var(--charcoal-400);
}

.site-content :is(ul.wp-block-list, ol.wp-block-list) li :is(ul, ol),
.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li :is(ul, ol) {
	list-style-type: disc;
	list-style-position: outside;
	margin: var(--op-space-4) 0 0;
	padding: 0;
	padding-inline-start: var(--op-space-6);
}

.site-content :is(ul.wp-block-list, ol.wp-block-list) li:last-child,
.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li:last-child {
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.site-content :is(ul.wp-block-list, ol.wp-block-list) li,
	.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li {
		font-size: var(--op-text-md);
		line-height: var(--op-leading-relaxed);
	}
}

@media (max-width: 480px) {
	.site-content :is(ul.wp-block-list, ol.wp-block-list) li,
	.editor-styles-wrapper :is(ul.wp-block-list, ol.wp-block-list) li {
		font-size: var(--op-text-base);
		line-height: var(--op-leading-normal);
	}
}

/*
 * Policies hub: Additional CSS class on the group wrapping all policy sections.
 */
.policy-list {
	display: flex;
	flex-direction: column;
	gap: var(--op-space-20);
}

.policy-list > * {
	display: flex;
	flex-direction: column;
	gap: var(--op-space-6);
}

@media (max-width: 1024px) {
	.policy-list > * {
		gap: var(--op-space-4);
		padding: 0;
	}
}

.policy-list h3 {
	color: var(--charcoal-400);
}

/*
 * Top-level numbered section items: title + <br> + body (footer script).
 * Bullet lists (ul) and nested li use body typography below — not section title scale.
 */
.policy-list ol > li:not( .policy-list li li ) {
	--policy-list-title-size: var(--op-text-3xl);
	--policy-list-title-leading: var(--op-leading-snug);
	--policy-list-title-color: var(--charcoal-400);
	font-size: var(--op-text-lg);
	line-height: var(--op-leading-relaxed);
	font-weight: var(--op-fw-normal);
	margin: 0;
	padding-bottom: var(--op-space-4);
}

.policy-list ol > li:not( .policy-list li li )::marker {
	font-size: var(--policy-list-title-size);
	line-height: var(--policy-list-title-leading);
	font-weight: var(--op-fw-normal);
	color: var(--policy-list-title-color);
}

/* Fallback before footer script wraps title/body (top-level numbered items only). */
.policy-list ol > li:not( .policy-list li li ):not( [data-policy-list-structured] )::first-line {
	font-size: var(--policy-list-title-size);
	line-height: var(--policy-list-title-leading);
	font-weight: var(--op-fw-normal);
	color: var(--policy-list-title-color);
}

/* Bullet lists + nested sub-lists: same body typography as .policy-list p. */
.policy-list :is( ul > li, li li ) {
	font-size: var(--op-text-lg);
	line-height: var(--op-leading-relaxed);
	font-weight: var(--op-fw-normal);
	color: var(--color-charcoal);
	margin: 0;
	padding-bottom: var(--op-space-4);
}

.policy-list :is( ul > li, li li )::marker {
	font-size: inherit;
	line-height: inherit;
	font-weight: var(--op-fw-normal);
	color: var(--charcoal-400);
}

.policy-list :is( ul > li, li li ):last-child {
	padding-bottom: 0;
}

/* Nested sub-list: reset title-like first line. */
.policy-list li li::first-line {
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
}

.policy-list li li .policy-list__section-title {
	display: inline;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	color: inherit;
	padding-bottom: 0;
}

.policy-list__section-title {
	display: block;
	font-size: var(--policy-list-title-size);
	line-height: var(--policy-list-title-leading);
	font-weight: var(--op-fw-normal);
	color: var(--policy-list-title-color);
	margin: 0;
	padding-bottom: var(--op-space-4);
}

.policy-list__section-body {
	display: block;
	font-size: inherit;
	line-height: inherit;
	font-weight: inherit;
	margin: 0;
}

.policy-list ol > li:not( .policy-list li li ):last-child {
	padding-bottom: 0;
}

/* Real <p> blocks (including after Shift+Enter → <br> is split in footer script). */
.policy-list p {
	font-size: var(--op-text-lg);
	line-height: var(--op-leading-relaxed);
	font-weight: var(--op-fw-normal);
	margin: 0;
	padding-bottom: 0;
}

.policy-list__section-body > p:last-child,
.policy-list > p:last-child,
.policy-list li > p:last-child {
	padding-bottom: 0;
}

@media (max-width: 768px) {
	.policy-list p {
		font-size: var(--op-text-md);
		line-height: var(--op-leading-relaxed);
	}
}

@media (max-width: 480px) {
	.policy-list p {
		font-size: var(--op-text-base);
		line-height: var(--op-leading-normal);
	}
}

@media (max-width: 1024px) {
	.policy-list ol > li:not( .policy-list li li ) {
		--policy-list-title-size: var(--op-text-2xl);
	}
}

@media (max-width: 768px) {
	.policy-list ol > li:not( .policy-list li li ) {
		--policy-list-title-size: var(--op-text-xl);
		font-size: var(--op-text-md);
		line-height: var(--op-leading-relaxed);
	}

	.policy-list :is( ul > li, li li ) {
		font-size: var(--op-text-md);
		line-height: var(--op-leading-relaxed);
	}
}

@media (max-width: 480px) {
	.policy-list ol > li:not( .policy-list li li ) {
		--policy-list-title-size: var(--op-text-md);
		font-size: var(--op-text-base);
		line-height: var(--op-leading-normal);
	}

	.policy-list :is( ul > li, li li ) {
		font-size: var(--op-text-base);
		line-height: var(--op-leading-normal);
	}
}

/*
 * Core Vimeo embed – full-width in parent; card radius; h6 caption on front end
 * (onepoint_render_vimeo_embed_block). Wrapper aspect-ratio set inline from oEmbed when available.
 */
:is( .site-content, .editor-styles-wrapper ) .wp-block-embed.is-provider-vimeo {
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	min-width: 0;
	margin-inline: 0 !important;
	align-self: stretch;
	box-sizing: border-box;
}

:is( .site-content, .editor-styles-wrapper ) .wp-block-embed.is-provider-vimeo .wp-block-embed__wrapper {
	position: relative;
	display: block;
	width: 100% !important;
	max-width: 100% !important;
	aspect-ratio: 16 / 9;
	border-radius: var(--op-card-radius);
	overflow: hidden;
}

:is( .site-content, .editor-styles-wrapper ) .wp-block-embed.is-provider-vimeo iframe {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	border: 0;
}

:is( .site-content, .editor-styles-wrapper ) .wp-block-embed.is-provider-vimeo :is( figcaption, h6.wp-block-embed__caption ) {
	font-size: var(--op-text-sm);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	margin: var(--op-space-4) 0 0;
	padding: 0;
	color: inherit;
}

:is( .site-content, .editor-styles-wrapper ) .wp-block-embed.is-provider-vimeo :is( figcaption, h6.wp-block-embed__caption ):empty {
	display: none;
}

/* Core Button Fill & Outline – shared layout + typography.
   `.onepoint-primary-button` matches Fill for custom markup (e.g. contact form). */
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline button.wp-block-button__link,
.wp-block-file * + .wp-block-file__button,
.onepoint-primary-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: var(--op-space-4) var(--op-space-6);
	font-family: var(--op-font-body);
	font-size: var(--op-text-base);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-snug);
	color: var(--color-charcoal);
	text-decoration: none;
	cursor: pointer;
	box-sizing: border-box;
	border-radius: 6.25rem;
}

/*
 * Outline – animated gradient border ring.
 * Text: core block colour panel. Background: --op-outline-bg on wrapper → 55% fill on ::after (inset 1px).
 * Border gradient: --op-outline-border-start / --op-outline-border-end on .wp-block-button
 * (editor: onepoint-outline-button-editor.js + render_block).
 */
.wp-block-button.is-style-outline .wp-block-button__link,
.wp-block-button.is-style-outline button.wp-block-button__link {
	position: relative;
	z-index: 0;
	overflow: hidden;
	isolation: isolate;
	background: transparent !important;
	border: 1px solid transparent;
	color: var(--color-charcoal, var(--op-color-text));
	transition:
		color 0.35s ease,
		border-radius 0.35s ease;
	-webkit-appearance: none;
	appearance: none;
}

/* Fill sits 1px inside the ring so it does not bleed under the masked border. */
.wp-block-button.is-style-outline .wp-block-button__link::after,
.wp-block-button.is-style-outline button.wp-block-button__link::after {
	content: '';
	position: absolute;
	inset: 1px;
	z-index: -2;
	border-radius: inherit;
	background: color-mix(in srgb, var(--op-outline-bg, var(--op-color-light)) 55%, transparent);
	pointer-events: none;
	transition:
		border-radius 0.35s ease,
		background-color 0.35s ease;
}

.wp-block-button.is-style-outline .wp-block-button__link::before,
.wp-block-button.is-style-outline button.wp-block-button__link::before {
	content: '';
	position: absolute;
	inset: 0;
	padding: 1px;
	z-index: -1;
	border-radius: inherit;
	--op-outline-angle: 0deg;
	/* Conic at rest (paused) and on hover (running). Symmetric start → end → start so the seam is smooth on every side. */
	background: conic-gradient(
		from var(--op-outline-angle),
		var(--op-outline-border-start, var(--color-mint)),
		var(--op-outline-border-end, var(--color-black-currant)),
		var(--op-outline-border-start, var(--color-mint))
	);
	-webkit-mask: linear-gradient(var(--color-bubblegum) 0 0) content-box, linear-gradient(var(--color-bubblegum) 0 0);
	-webkit-mask-composite: xor;
	mask: linear-gradient(var(--color-bubblegum) 0 0) content-box, linear-gradient(var(--color-bubblegum) 0 0);
	mask-composite: exclude;
	animation: onepoint-outline-spin 3s linear infinite;
	animation-play-state: paused;
	pointer-events: none;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
.wp-block-button.is-style-outline button.wp-block-button__link:hover,
.wp-block-button.is-style-outline button.wp-block-button__link:focus-visible {
	color: var(--op-color-dark);
	border-radius: var(--op-radius-md);
}

.wp-block-button.is-style-outline .wp-block-button__link:hover::before,
.wp-block-button.is-style-outline .wp-block-button__link:focus-visible::before,
.wp-block-button.is-style-outline button.wp-block-button__link:hover::before,
.wp-block-button.is-style-outline button.wp-block-button__link:focus-visible::before {
	animation-play-state: running;
}

@property --op-outline-angle {
	syntax: '<angle>';
	inherits: false;
	initial-value: 0deg;
}

@keyframes onepoint-outline-spin {
	to {
		--op-outline-angle: 360deg;
	}
}

/*
 * Fill + reusable primary – pill border + hover bloom.
 * Text: core block colour panel. Border + hover bloom: --op-fill-accent on .wp-block-button
 * (editor: onepoint-fill-button-editor.js + render_block).
 */
.onepoint-primary-button,
.wp-block-button.is-style-fill .wp-block-button__link,
.wp-block-file * + .wp-block-file__button {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-align: center;
	white-space: normal;
	word-break: break-word;
	background: transparent;
	border: 1px solid var(--op-fill-accent, var(--op-color-text));
	transition: border-color 0.6s cubic-bezier(0.23, 1, 0.32, 1), color 0.6s cubic-bezier(0.23, 1, 0.32, 1), border-radius 0.6s cubic-bezier(0.23, 1, 0.32, 1), opacity 0.2s;
}

.onepoint-primary-button::before,
.wp-block-button.is-style-fill .wp-block-button__link::before,
.wp-block-file * + .wp-block-file__button::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	width: max(13.75rem, 105%);
	height: max(13.75rem, 105%);
	z-index: -1;
	border-radius: 50%;
	background: var(--op-fill-accent, var(--op-color-dark));
	opacity: 0;
	transform: translate(-50%, -50%) scale(0.05);
	transform-origin: center;
	will-change: transform, opacity;
	transition:
		transform 0.8s cubic-bezier(0.19, 1, 0.22, 1),
		opacity 0.8s cubic-bezier(0.19, 1, 0.22, 1);
}

.onepoint-primary-button:hover,
.onepoint-primary-button:focus-visible,
.wp-block-button.is-style-fill .wp-block-button__link:hover,
.wp-block-button.is-style-fill .wp-block-button__link:focus-visible,
.wp-block-file * + .wp-block-file__button:hover,
.wp-block-file * + .wp-block-file__button:focus-visible {
	color: var(--op-btn-text-on-dark) !important;
	border-color: transparent;
	border-radius: var(--op-radius-md);
}

.onepoint-primary-button:hover::before,
.onepoint-primary-button:focus-visible::before,
.wp-block-button.is-style-fill .wp-block-button__link:hover::before,
.wp-block-button.is-style-fill .wp-block-button__link:focus-visible::before,
.wp-block-file * + .wp-block-file__button:hover::before,
.wp-block-file * + .wp-block-file__button:focus-visible::before {
	opacity: 1;
	transform: translate(-50%, -50%) scale(1);
}

/* Core File block — filename link uses h6; download button uses Fill. */
.wp-block-file * + .wp-block-file__button {
	padding: var(--op-space-3) var(--op-space-6);
	margin-left: var(--op-space-8);
}

.wp-block-file > a:not(.wp-block-file__button),
.editor-styles-wrapper .wp-block-file > a:not(.wp-block-file__button) {
	font-size: var(--op-text-sm);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-tight);
	margin: 0;
	text-decoration: none;
	color: inherit;
}

/*
 * Onepoint Links style (core/button is-style-onepoint-link).
 * Text: core block “Text” colour (style.color.text). Chevron matches via currentColor.
 * Squircle + hover: --op-link-squircle / --op-link-text-hover on .wp-block-button wrapper
 * (set in the editor via theme onepoint-link-button-editor.js + render_block).
 */
.wp-block-button__link .op-link-context {
	font-size: 0.875em;
	font-weight: var(--op-fw-normal);
	opacity: 0.75;
}

.wp-block-button.is-style-onepoint-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0;
	min-height: auto;
	padding: 0 calc(1.5rem + var(--op-space-3)) var(--op-space-1) 0;
	position: relative;
	overflow: visible;
	font-family: var(--op-font-body);
	font-size: var(--op-text-base);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-normal);
	color: var(--op-link-text, var(--color-charcoal, var(--op-color-text)));
	text-decoration: none;
	background: none;
	border: none;
	border-radius: 0;
	box-shadow: none;
	background-size: calc(100% - (1.625rem + var(--op-space-3))) 1px;
	background-position: left calc(100% - 0.2em);
	background-repeat: no-repeat;
	background-image: linear-gradient(currentColor, currentColor);
	transition:
		color 0.28s var(--op-ease-smooth),
		opacity 0.28s var(--op-ease-smooth);
}

/* Beat core preset / inline text colour on hover (chevron already uses ::before). */
.wp-block-button.is-style-onepoint-link .wp-block-button__link:hover,
.wp-block-button.is-style-onepoint-link .wp-block-button__link:focus-visible,
.wp-block-button.is-style-onepoint-link .wp-block-button__link.has-text-color:hover,
.wp-block-button.is-style-onepoint-link .wp-block-button__link.has-text-color:focus-visible,
.wp-block-button.is-style-onepoint-link .wp-block-button__link[class*='has-'][class*='-color']:hover,
.wp-block-button.is-style-onepoint-link .wp-block-button__link[class*='has-'][class*='-color']:focus-visible {
	color: var(--op-link-text-hover, var(--color-black-currant)) !important;
}

.wp-block-button.is-style-onepoint-link .wp-block-button__link::after {
	content: '';
	display: inline-flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	right: 0;
	top: 50%;
	inline-size: 1.625rem;
	block-size: 1.625rem;
	background-color: var(--op-link-squircle, var(--color-charcoal, var(--op-color-dark)));
	background-image: none;
	-webkit-mask-image: url('./assets/squircle.svg');
	mask-image: url('./assets/squircle.svg');
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
	transform: translateY(-50%) translateX(0);
	transition:
		transform 0.28s var(--op-ease-smooth),
		background-color 0.28s var(--op-ease-smooth);
}

.wp-block-button.is-style-onepoint-link .wp-block-button__link::before {
	content: '\203A';
	position: absolute;
	right: 0;
	top: 50%;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	inline-size: 1.625rem;
	block-size: 1.625rem;
	color: currentColor;
	font-size: var(--op-text-xl);
	line-height: var(--op-leading-none);
	transform: translateY(-50%) translateX(0);
	opacity: 1;
	/* After the hover `animation` ends, `forwards` holds the last keyframe; when hover
	 * ends, these transitions run from that state back to the defaults above. */
	transition:
		transform 0.35s var(--op-ease-smooth),
		opacity 0.35s var(--op-ease-smooth),
		color 0.28s var(--op-ease-smooth);
	z-index: 1;
}

.wp-block-button.is-style-onepoint-link .wp-block-button__link:hover,
.wp-block-button.is-style-onepoint-link .wp-block-button__link:focus-visible {
	opacity: 1;
}

.wp-block-button.is-style-onepoint-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-onepoint-link .wp-block-button__link:focus-visible::after {
	transform: translateY(-50%) translateX(0.25rem) rotate(45deg);
}

/* Hover in: chevron exits right, re-enters from left; ends aligned with shifted squircle. */
.wp-block-button.is-style-onepoint-link .wp-block-button__link:hover::before,
.wp-block-button.is-style-onepoint-link .wp-block-button__link:focus-visible::before {
	color: var(--op-link-text-hover, var(--color-black-currant));
	animation: onepoint-link-arrow-enter 0.35s var(--op-ease-smooth) forwards;
	transition: color 0.28s var(--op-ease-smooth);
}

@keyframes onepoint-link-arrow-enter {
	0% {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
	40% {
		opacity: 0;
		transform: translateY(-50%) translateX(calc(0.25rem + 0.55rem));
	}
	41% {
		opacity: 0;
		transform: translateY(-50%) translateX(-1rem);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) translateX(0.25rem);
	}
}

/* Pointer leave: chevron exits left, re-enters from right (class from wp_footer script). */
.wp-block-button.is-style-onepoint-link .wp-block-button__link.onepoint-link--arrow-exit::before {
	animation: onepoint-link-arrow-leave 0.35s var(--op-ease-smooth) forwards;
	transition: color 0.28s var(--op-ease-smooth);
}

@keyframes onepoint-link-arrow-leave {
	0% {
		opacity: 1;
		transform: translateY(-50%) translateX(0.25rem);
	}
	40% {
		opacity: 0;
		transform: translateY(-50%) translateX(calc(0.25rem - 0.55rem));
	}
	41% {
		opacity: 0;
		transform: translateY(-50%) translateX(1.25rem);
	}
	100% {
		opacity: 1;
		transform: translateY(-50%) translateX(0);
	}
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-onepoint-link .wp-block-button__link:hover::before,
	.wp-block-button.is-style-onepoint-link .wp-block-button__link:focus-visible::before {
		animation: none;
		transform: translateY(-50%) translateX(0.25rem);
	}

	.wp-block-button.is-style-onepoint-link .wp-block-button__link.onepoint-link--arrow-exit::before {
		animation: none;
		transform: translateY(-50%) translateX(0);
	}
}

/* Shared centered section header – used by non-block page sections */
.onepoint-section-header {
	text-align: center;
	max-width: min(698px, 100%);
	width: 100%;
	margin: 0;
	padding: 0 var(--op-space-4);
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--op-space-8);
	overflow: visible;
}

/* Section label backdrop – uses --op-* so brand gradient applies automatically */
.onepoint-section-label-wrap {
	position: relative;
	min-height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--op-space-2) 0;
	overflow: visible;
}

.onepoint-section-label-wrap::before {
	content: '';
	position: absolute;
	inset: -20px;
	z-index: 0;
	background: var(--op-section-backdrop);
	filter: blur(var(--op-section-backdrop-blur));
	pointer-events: none;
}

.onepoint-section-label {
	position: relative;
	z-index: 1;
	font-size: var(--op-text-base);
	font-weight: var(--op-fw-normal);
	line-height: var(--op-leading-relaxed);
	color: var(--op-section-label-color);
	margin: 0;
	text-align: center;
}

/* Shared description text under section headings */
.onepoint-section-description {
	font-size: var(--op-text-xl);
	line-height: var(--op-leading-relaxed);
	color: var(--op-color-text-light);
	margin: 0;
	text-align: center;
}

/* Soft gradient card – reusable surface for non-block page sections */
.onepoint-card--soft-gradient {
	background: var(--op-card-bg);
	border: 1px solid var(--op-card-border);
	border-radius: var(--op-card-radius);
	padding: var(--op-card-padding);
	width: 100%;
	margin: 0;
	position: relative;
	box-sizing: border-box;
}

/* Reusable inline alert styles – available to any page element */
.onepoint-alert {
	padding: var(--op-space-4);
	border-radius: var(--op-radius-lg);
	margin-bottom: var(--op-space-4);
	font-size: var(--op-text-base);
	position: relative;
	display: flex;
	align-items: flex-start;
	gap: var(--op-space-3);
}

.onepoint-alert--success {
	background: color-mix(in srgb, var(--op-color-success) 10%, transparent);
	color: var(--op-color-success);
	border: 1px solid color-mix(in srgb, var(--op-color-success) 30%, transparent);
}

.onepoint-alert--error {
	background: color-mix(in srgb, var(--op-color-error) 10%, transparent);
	color: var(--op-color-error);
	border: 1px solid color-mix(in srgb, var(--op-color-error) 30%, transparent);
}

.onepoint-alert__close {
	margin-left: auto;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
	font-size: var(--op-text-sm);
	line-height: var(--op-leading-none);
	padding: 0;
}

.onepoint-text-small-muted {
	margin-top: var(--op-space-4);
	font-size: var(--op-text-sm);
	line-height: var(--op-leading-normal);
	color: var(--op-color-text-muted);
}

.onepoint-text-small-success {
	margin-top: var(--op-space-4);
	font-size: var(--op-text-base);
	line-height: var(--op-leading-normal);
	color: var(--op-color-success);
}

/* ===== Shared carousel play/pause (image-carousel, vertical-image-carousel) =====
   Common CSS for pause/play button, icon, and reduced motion.
   Blocks add .op-carousel-controls, .op-carousel-play-pause, .op-carousel-play-pause-icon, .op-carousel-track.
   Block-specific overrides (position offset, border opacity) stay in each block's style.css. */

.op-carousel-controls {
	position: absolute;
	bottom: var(--op-space-3);
	right: var(--op-space-3);
	z-index: 2;
}

.op-carousel-play-pause {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: 1px solid color-mix(in srgb, var(--op-color-dark) 20%, transparent);
	border-radius: var(--op-radius-md);
	background: color-mix(in srgb, var(--op-color-light) 95%, transparent);
	color: var(--op-color-dark);
	cursor: pointer;
	opacity: 0.25;
	transition: opacity 0.2s ease, background 0.2s ease;
}

.op-carousel-controls:hover .op-carousel-play-pause,
.op-carousel-play-pause:is(:hover, :focus, :focus-visible) {
	opacity: 1;
}

.op-carousel-play-pause:is(:hover, :focus, :focus-visible) {
	background: var(--op-color-light);
	outline: 2px solid currentColor;
	outline-offset: 2px;
}

.op-carousel-play-pause-icon {
	display: block;
	width: 1.25rem;
	height: 1.25rem;
	background: currentColor;
	clip-path: polygon(15% 20%, 15% 80%, 40% 80%, 40% 20%, 60% 20%, 60% 80%, 85% 80%, 85% 20%);
}

.is-paused .op-carousel-play-pause-icon {
	clip-path: polygon(0 0, 0 100%, 100% 50%);
}

.is-paused .op-carousel-track {
	animation-play-state: paused;
}

@media (prefers-reduced-motion: reduce) {
	.op-carousel-track {
		animation: none !important;
		transform: none !important;
	}
}

@media (max-width: 782px) {
	:root {
		--onepoint-sticky-offset: 80px;
	}
}

/*
 * Logged-in: WP adds html { margin-top: 32px } via inline CSS in wp_head (after the theme
 * stylesheet). Do not also pad body — that doubles the gap above the header. Only offset
 * the sticky header so it stays below the admin bar when scrolling.
 */
body.admin-bar {
	--onepoint-sticky-offset: calc(
		88px + var(--wp-admin--admin-bar--height, 32px)
	);
}

body.admin-bar #masthead.site-header,
body.admin-bar .onepoint-site-header {
	margin-top: 0;
	top: var(--wp-admin--admin-bar--height, 32px);
}

@media screen and (max-width: 782px) {
	body.admin-bar {
		--onepoint-sticky-offset: calc(
			80px + var(--wp-admin--admin-bar--height, 46px)
		);
	}

	body.admin-bar #masthead.site-header,
	body.admin-bar .onepoint-site-header {
		top: var(--wp-admin--admin-bar--height, 46px);
	}
}

/* Core Quote — Testimonial style (quote text + decorative SVG only). */
.op-featured-quote {
	box-sizing: border-box;
	width: 100%;
	max-width: 80rem;
	margin: 0 auto;
	padding-inline: var(--op-space-6);
	color: var(--op-color-text);
	border: none;
}

.has-charcoal-background-color .op-featured-quote,
.editor-styles-wrapper .has-charcoal-background-color .op-featured-quote {
	color: var(--vanilla-500, var(--wp--preset--color--vanilla, #fafffe));
}

.op-featured-quote__inner {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: var(--op-space-20);
	width: 100%;
	min-width: 0;
}

.op-featured-quote__visual {
	position: relative;
	flex-shrink: 0;
	width: 11.25rem;
	min-height: 8.5rem;
	margin-inline: auto;
}

.op-featured-quote__quote-mark {
	position: absolute;
	top: 0;
	left: 0;
	width: 8.5rem;
	height: 8.5rem;
	color: var(--op-color-accent);
	pointer-events: none;
}

.op-featured-quote__quote-mark svg {
	display: block;
	width: 100%;
	height: 100%;
}

.op-featured-quote__content {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	width: 100%;
	min-width: 0;
}

.op-featured-quote__quote {
	margin: 0;
	padding: 0;
	border: none;
}

.op-featured-quote__quote p {
	margin: 0;
}

.op-featured-quote__quote p + p {
	margin-top: var(--op-space-4);
}

@media (min-width: 768px) {
	.op-featured-quote {
		padding-inline: var(--op-space-12);
	}

	.op-featured-quote__inner {
		flex-direction: row;
		align-items: center;
		justify-content: space-between;
	}

	.op-featured-quote__visual {
		width: 10.869375rem;
		min-height: 10.8358125rem;
		margin-inline: 0;
	}

	.op-featured-quote__quote-mark {
		width: 10.869375rem;
		height: 10.8358125rem;
	}
}

/*
 * If OP sub-header exists on the page, let it take sticky responsibility.
 * Main header stays in document flow (no sticky peek behind fixed sub-header).
 */
body.has-op-sub-header .site-header.onepoint-site-header,
body.has-op-sub-header .onepoint-site-header {
	position: relative !important;
	top: auto !important;
	z-index: 90;
}

/* Mega-menu must sit above the pinned sub-header when open. */
body.has-op-sub-header .onepoint-site-header.is-mega-open {
	z-index: 120;
}

body.admin-bar.has-op-sub-header #masthead.site-header,
body.admin-bar.has-op-sub-header .onepoint-site-header {
	top: auto !important;
}

/* ===== Site header & mega-menu ===== */
/* Onepoint Header – logo, header links, mega-menu dropdowns, search */

.skip-link.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link.screen-reader-text:focus {
	position: fixed;
	top: var(--op-space-2);
	left: var(--op-space-2);
	z-index: 100001;
	width: auto;
	height: auto;
	margin: 0;
	padding: var(--op-space-3) var(--op-space-5);
	overflow: visible;
	clip: auto;
	white-space: normal;
	background: var(--op-color-light);
	color: var(--op-color-dark);
	border: 1px solid color-mix(in srgb, var(--op-color-dark) 15%, transparent);
	border-radius: var(--op-radius-md);
	box-shadow: 0 4px 12px color-mix(in srgb, var(--op-color-dark) 12%, transparent);
	text-decoration: none;
	font-size: var(--op-text-sm);
	line-height: 1.4;
}

.site-header.onepoint-site-header,
.onepoint-site-header {
	--onepoint-header-bar-height: 3.25rem;
	--onepoint-mega-max-height: calc(
		100dvh - var(--onepoint-header-bar-height, 3.25rem) - var(--op-space-8)
	);
	--onepoint-mega-ease: cubic-bezier(0.33, 1, 0.68, 1);
	--onepoint-mega-duration: 0.32s;
	background: var(--op-color-light);
	border-bottom: 1px solid color-mix(in srgb, var(--op-color-dark) 8%, transparent);
	position: sticky;
	top: 0;
	z-index: 100;
	overflow: visible;
	margin-top: 0;
	margin-bottom: 0;
}

/* Bar sits above mega-menu layer so dropdown slides out from behind */
.onepoint-site-header__bar {
	position: relative;
	z-index: 3;
	background: var(--op-color-light);
	isolation: isolate;
}

.onepoint-site-header__inner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 1.25rem;
	max-width: 1440px;
	margin: 0 auto;
	padding: 0.5rem var(--op-space-20);
	min-height: var(--onepoint-header-bar-height);
	box-sizing: border-box;
}

.onepoint-site-header__brand {
	flex-shrink: 0;
	position: relative;
	z-index: 4;
}

.onepoint-site-header__brand .custom-logo-link {
	display: block;
	text-decoration: none;
}

.onepoint-site-header__brand .custom-logo-link:hover {
	opacity: 0.9;
}

.onepoint-site-header__brand .custom-logo,
.onepoint-site-header__logo img {
	display: block;
	height: 32px;
	width: auto;
	max-width: 180px;
	object-fit: contain;
}

.onepoint-site-header__logo {
	display: block;
	text-decoration: none;
	font-weight: 700;
	font-size: 1.25rem;
	letter-spacing: 0.02em;
}

.onepoint-site-header__logo:hover {
	opacity: 0.9;
}

.onepoint-site-header__name {
	color: var(--color-mint, var(--op-color-accent));
	text-transform: uppercase;
}

/* Desktop: nav, search, and mega share one flex row inside the menu wrapper */
.onepoint-site-header__menu {
	display: flex;
	flex: 1;
	align-items: center;
	justify-content: center;
	gap: 1.25rem;
	min-width: 0;
	position: static;
}

.onepoint-site-header__nav {
	flex: 1;
	display: flex;
	justify-content: center;
	min-width: 0;
	position: relative;
	z-index: 2;
}

/* Header link triggers */
.onepoint-site-header__links {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem 2.5rem;
}

.onepoint-site-header__link-item {
	margin: 0;
}

.onepoint-site-header__link-wrap {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
}

.onepoint-site-header__link {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	padding: 0.35rem 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	color: var(--op-color-text, var(--op-color-dark));
	text-decoration: none;
	white-space: nowrap;
	transition: color 0.2s ease, transform 0.2s ease;
	appearance: none;
	-webkit-appearance: none;
}

.onepoint-site-header__link:hover,
.onepoint-site-header__link:focus-visible {
	color: inherit;
	text-decoration: none;
}

.onepoint-site-header__link:focus-visible {
	outline: 0.125rem solid var(--op-color-accent);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

.onepoint-site-header__link-item:hover .onepoint-site-header__link,
.onepoint-site-header__link-item.is-open .onepoint-site-header__link,
.onepoint-site-header__link-item.is-active .onepoint-site-header__link,
.onepoint-site-header__link-item:hover .onepoint-site-header__link-chevron,
.onepoint-site-header__link-item.is-open .onepoint-site-header__link-chevron,
.onepoint-site-header__link-item.is-active .onepoint-site-header__link-chevron {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-site-header__link-chevron {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 0.875rem;
	height: 0.875rem;
	padding: 0;
	margin: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.onepoint-site-header__link-chevron:focus-visible {
	outline: 0.125rem solid var(--op-color-accent);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

.onepoint-site-header__link-chevron::after {
	content: "";
	display: block;
	width: 0.45rem;
	height: 0.45rem;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: rotate(45deg);
	transform-origin: 50% 55%;
	transition: transform 0.28s var(--onepoint-mega-ease, ease);
}

.onepoint-site-header__link-item.is-open .onepoint-site-header__link-chevron::after,
.onepoint-site-header__link-item:hover .onepoint-site-header__link-chevron::after {
	transform: rotate(225deg);
}

/* Mega-menu layer sits below the bar; panel slides down from behind it */
.onepoint-site-header__mega-layer {
	position: absolute;
	left: 0;
	right: 0;
	top: 100%;
	z-index: 1;
	max-width: 1440px;
	margin-left: auto;
	margin-right: auto;
	margin-top: 0;
	padding: var(--op-space-2) var(--op-space-20) var(--op-space-10);
	box-sizing: border-box;
	overflow: visible;
	pointer-events: none;
}

/* Layer stays pass-through; only the bridge + shell capture clicks (keeps logo clickable). */
.onepoint-site-header.is-mega-open .onepoint-site-header__mega-layer {
	pointer-events: none;
}

/* Invisible bridge so moving from the bar into the dropdown does not leave the hover zone */
.onepoint-site-header.is-mega-open .onepoint-site-header__mega-layer::before {
	content: "";
	position: absolute;
	left: 0;
	right: 0;
	top: calc(-1 * var(--op-space-10));
	height: var(--op-space-10);
	pointer-events: auto;
}

.onepoint-site-header.is-mega-open .onepoint-site-header__mega-shell.is-shell-open {
	pointer-events: auto;
}

/* Fixed dropdown shell — only inner track moves on Accelerated ↔ Woven */
.onepoint-site-header__mega-shell {
	width: 100%;
	margin: 0;
	background: var(--op-color-light);
	border-radius: var(--op-radius-lg);
	box-shadow:
		0 4px 6px color-mix(in srgb, var(--op-color-dark) 4%, transparent),
		0 16px 40px color-mix(in srgb, var(--op-color-dark) 10%, transparent);
	overflow: hidden;
	transform: translateY(-100%);
	opacity: 0;
	transition:
		transform var(--onepoint-mega-duration) var(--onepoint-mega-ease),
		opacity var(--onepoint-mega-duration) var(--onepoint-mega-ease),
		min-height var(--onepoint-mega-duration) var(--onepoint-mega-ease);
	will-change: transform, opacity;
}

.onepoint-site-header.is-mega-open .onepoint-site-header__mega-shell.is-shell-open {
	transform: translateY(0);
	opacity: 1;
	overflow: hidden;
}

/* Clips horizontal panel slide so content enters from inside the dropdown, not outside */
.onepoint-site-header__mega-viewport {
	width: 100%;
	overflow: hidden;
	border-radius: inherit;
}

@media (min-width: 992px) {
	.onepoint-site-header.is-mega-open .onepoint-site-header__mega-viewport {
		max-height: var(--onepoint-mega-max-height);
		overflow-x: hidden;
		overflow-y: auto;
		overscroll-behavior: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
		-webkit-overflow-scrolling: touch;
	}

	.onepoint-site-header.is-mega-open .onepoint-site-header__mega-viewport::-webkit-scrollbar {
		display: none;
	}
}

.onepoint-site-header__mega-track {
	display: flex;
	flex-direction: row;
	flex-wrap: nowrap;
	width: calc(100% * var(--mega-count, 1));
	--mega-index: 0;
	--mega-count: 1;
	transform: translateX(calc(-100% * var(--mega-index) / var(--mega-count, 1)));
}

.onepoint-site-header__mega-track.is-animating {
	transition: transform var(--onepoint-mega-duration) var(--onepoint-mega-ease);
}

.onepoint-site-header__mega {
	flex: 0 0 calc(100% / var(--mega-count, 1));
	min-width: calc(100% / var(--mega-count, 1));
	width: calc(100% / var(--mega-count, 1));
	padding: 0;
	pointer-events: none;
	visibility: hidden;
}

.onepoint-site-header__mega[aria-hidden="false"] {
	visibility: visible;
	pointer-events: auto;
}

.onepoint-site-header__mega[aria-hidden="true"] {
	visibility: hidden;
	pointer-events: none;
	user-select: none;
}

.onepoint-site-header__mega[hidden] {
	display: none;
}

.onepoint-site-header__mega-panel {
	padding: var(--op-space-6) var(--op-space-10);
	box-sizing: border-box;
}

.onepoint-mega__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
	gap: 1.5rem 2.5rem;
}

.onepoint-mega__column {
	--onepoint-mega-icon-slot: 2.75rem;
	--onepoint-mega-icon-gap: 1.25rem;
	min-width: 0;
}

.onepoint-mega__list {
	list-style: none;
	margin: 0;
	padding: 0;
}

/* Column section title (Platforms, Toolkits, …) — underline only, no sub-list */
.onepoint-mega__column-heading {
	margin: 0;
	list-style: none;
	border-bottom: 1px solid color-mix(in srgb, var(--op-color-dark) 12%, transparent);
}

.onepoint-mega__column-heading-link {
	display: grid;
	grid-template-columns: var(--onepoint-mega-icon-slot) 1fr;
	align-items: start;
	gap: 1rem var(--onepoint-mega-icon-gap);
	width: 100%;
	box-sizing: border-box;
	padding-bottom: var(--op-space-4);
	text-decoration: none;
	color: inherit;
}

.onepoint-mega__column-heading-link--no-icon {
	grid-template-columns: 1fr;
}

.onepoint-mega__column-heading.is-active .onepoint-mega__column-heading-link,
.onepoint-mega__column-heading.is-active .onepoint-mega__title {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-mega__subgroup.is-active .onepoint-mega__subgroup-link,
.onepoint-mega__subitem.is-active > .onepoint-mega__subitem-link {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-mega__subgroup.is-active .onepoint-mega__subgroup-link .onepoint-mega__subitem-title,
.onepoint-mega__subitem.is-active > .onepoint-mega__subitem-link .onepoint-mega__subitem-title {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-mega__nestitem.is-active > .onepoint-mega__nestitem-link,
.onepoint-mega__nestitem.is-active > .onepoint-mega__nestitem-link .onepoint-mega__nestitem-title {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-mega__icon {
	flex-shrink: 0;
	align-self: start;
	width: var(--onepoint-mega-icon-slot, 2.75rem);
	min-width: var(--onepoint-mega-icon-slot, 2.75rem);
	height: var(--onepoint-mega-icon-slot, 2.75rem);
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
	color: var(--op-color-dark);
}

.onepoint-mega__icon-img {
	width: 2.25rem;
	height: 2.25rem;
	object-fit: contain;
	display: block;
}

/* Smaller glyph only — slot width matches column headings so rows stay aligned. */
.onepoint-mega__icon--sm {
	height: auto;
	min-height: 0;
}

.onepoint-mega__icon--sm .onepoint-mega__icon-img {
	width: 1.5rem;
	height: 1.5rem;
}

.onepoint-mega__text {
	display: flex;
	flex-direction: column;
	gap: 0.35rem;
	min-width: 0;
}

.onepoint-mega__title {
	font-size: 1rem;
	line-height: 1.25;
	color: var(--op-color-dark);
}

.onepoint-mega__description {
	font-size: 0.875rem;
	font-weight: 400;
	line-height: 1.45;
	color: var(--charcoal-300);
}

.onepoint-mega__item-chevron {
	flex-shrink: 0;
	align-self: start;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 0.875rem;
	height: 0.875rem;
	margin-top: 0.2rem;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	font: inherit;
	line-height: inherit;
	color: inherit;
	appearance: none;
	-webkit-appearance: none;
	pointer-events: none;
}

.onepoint-mega__item-chevron:focus-visible {
	outline: 0.125rem solid var(--op-color-accent);
	outline-offset: 0.125rem;
	border-radius: 0.125rem;
}

.onepoint-mega__item-chevron::after {
	content: "";
	display: block;
	width: 0.5rem;
	height: 0.5rem;
	border-right: 1.5px solid var(--op-color-dark);
	border-bottom: 1.5px solid var(--op-color-dark);
	transform: rotate(45deg);
	transform-origin: 50% 55%;
	transition: transform 0.2s ease;
}

.onepoint-mega__subgroup--has-children.is-nest-active .onepoint-mega__item-chevron::after,
.onepoint-mega__subgroup--has-children:hover .onepoint-mega__item-chevron::after,
.onepoint-mega__subgroup--has-children:focus-within .onepoint-mega__item-chevron::after {
	transform: rotate(225deg);
}

/* Level 1 sublist: always visible under column heading (Platforms, etc.) */
.onepoint-mega__sublist {
	list-style: none;
	margin: 0;
	padding: 0 0 var(--op-space-4) 0;
}

.onepoint-mega__sublist--open {
	display: block;
}

/* Level 2 subgroup: collapsible nested list on hover */
.onepoint-mega__subgroup {
	margin: 0;
	list-style: none;	
	padding: var(--op-space-4) 0;
}

.onepoint-mega__subgroup-row {
	display: grid;
	grid-template-columns: var(--onepoint-mega-icon-slot) 1fr auto;
	align-items: start;
	column-gap: var(--onepoint-mega-icon-gap);
	row-gap: 0.75rem;
}

.onepoint-mega__subgroup-row--no-icon {
	grid-template-columns: 1fr auto;
}

.onepoint-mega__subgroup-link {
	grid-column: 1 / 3;
	display: grid;
	grid-template-columns: var(--onepoint-mega-icon-slot) 1fr;
	align-items: start;
	column-gap: var(--onepoint-mega-icon-gap);
	row-gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s;
}

.onepoint-mega__subgroup-link--no-icon {
	grid-column: 1 / 3;
	grid-template-columns: 1fr;
}

.onepoint-mega__subgroup-row .onepoint-mega__item-chevron {
	grid-column: 3;
	grid-row: 1;
}

.onepoint-mega__subgroup-row--no-icon .onepoint-mega__item-chevron {
	grid-column: 2;
}

.onepoint-mega__subgroup-text {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.onepoint-mega__subgroup-link:hover {
	opacity: 0.75;
}

.onepoint-mega__subgroup-link.onepoint-mega__row--label:hover,
.onepoint-mega__subitem-link.onepoint-mega__row--label:hover,
.onepoint-mega__nestitem-link.onepoint-mega__row--label:hover {
	opacity: 1;
}

.onepoint-mega__nestlist {
	list-style: none;
	margin: 0;
	padding: var(--op-space-4) 0;
	display: none;
}

.onepoint-mega__subgroup--has-children.is-nest-active .onepoint-mega__nestlist,
.onepoint-mega__subgroup--has-children.is-active .onepoint-mega__nestlist,
.onepoint-mega__subgroup--has-children:hover .onepoint-mega__nestlist,
.onepoint-mega__subgroup--has-children:focus-within .onepoint-mega__nestlist {
	display: block;
}

.onepoint-mega__subgroup--has-children.is-active .onepoint-mega__subgroup-link .onepoint-mega__subitem-title,
.onepoint-mega__subgroup--has-children.is-nest-active .onepoint-mega__subgroup-link .onepoint-mega__subitem-title {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-mega__nestitem {
	margin: 0;
	padding: 0 0 var(--op-space-4) 0;
}

.onepoint-mega__nestitem-link {
	display: grid;
	grid-template-columns: var(--onepoint-mega-icon-slot) 1fr;
	align-items: start;
	column-gap: var(--onepoint-mega-icon-gap);
	row-gap: 0.65rem;
	padding: 0.35rem 0;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s;
}

.onepoint-mega__nestitem-link--no-icon {
	grid-template-columns: 1fr;
}

.onepoint-mega__nestitem-body {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	min-width: 0;
}

.onepoint-mega__nestitem-link:hover {
	opacity: 0.75;
}

.onepoint-mega__nestitem-title {
	display: block;
	font-size: 0.875rem;
	line-height: 1.35;
	color: var(--op-color-dark);
}

.onepoint-mega__nestitem-description {
	display: block;
	margin-top: 0.1rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--charcoal-300);
}

.onepoint-mega__subitem {
	margin: 0;	
	padding: var(--op-space-4) 0;
}

.onepoint-mega__subitem-link {
	display: grid;
	grid-template-columns: var(--onepoint-mega-icon-slot) 1fr;
	align-items: start;
	column-gap: var(--onepoint-mega-icon-gap);
	row-gap: 0.75rem;
	text-decoration: none;
	color: inherit;
	transition: opacity 0.15s;
}

.onepoint-mega__subitem-link--no-icon {
	grid-template-columns: 1fr;
}

.onepoint-mega__subitem-body {
	display: flex;
	flex-direction: column;
	gap: 0.15rem;
	min-width: 0;
}

.onepoint-mega__subitem-link:hover {
	opacity: 0.75;
}

.onepoint-mega__subitem-title {
	display: block;
	font-size: 0.9375rem;
	line-height: 1.35;
	color: var(--op-color-dark);
}

.onepoint-mega__subitem-description {
	display: block;
	margin-top: 0.15rem;
	font-size: 0.8125rem;
	line-height: 1.4;
	color: var(--charcoal-300);
}

.onepoint-mega__empty {
	margin: 0;
	padding: 1rem 0;
	font-size: 0.875rem;
	color: color-mix(in srgb, var(--op-color-dark) 55%, transparent);
}

.onepoint-mega__row--label {
	cursor: default;
}

.onepoint-mega__row--label:hover,
.onepoint-mega__row--label:focus {
	opacity: 1;
}

.onepoint-mega__row--category {
	font-weight: 500;
}

.onepoint-mega__hub {
	margin: var(--op-space-4) 0 0;
	padding-top: var(--op-space-4);
	border-top: 1px solid color-mix(in srgb, var(--op-color-dark) 10%, transparent);
}

.onepoint-mega__hub-link {
	display: inline-flex;
	align-items: center;
	font-size: var(--op-text-sm);
	font-weight: 500;
	color: var(--color-black-currant, var(--op-color-accent));
	text-decoration: none;
}

.onepoint-mega__hub-link:hover,
.onepoint-mega__hub-link:focus-visible {
	color: var(--color-mint, var(--op-color-accent));
	text-decoration: underline;
	text-underline-offset: 2px;
}

/* Header search */
.onepoint-site-header__search {
	flex-shrink: 0;
	min-width: 0;
	margin: 0;
	margin-block: 0;
}

.onepoint-site-header__search-form {
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	margin-top: 0;
	margin-bottom: 0;
	margin-block: 0;
	border: 1px solid var(--op-card-border);
	border-radius: 999px;
	background: var(--color-vanilla, var(--wp--preset--color--vanilla));
	overflow: hidden;
	max-width: min(280px, 100%);
}

.onepoint-site-header__search-input {
	flex: 1;
	min-width: 0;
	width: 100%;
	margin: 0;
	border: none;
	background: transparent;
	padding: 0.5rem 0.75rem 0.5rem 1rem;
	font-size: 0.875rem;
	line-height: 1.4;
	color: var(--op-color-text, var(--op-color-dark));
}

.onepoint-site-header__search-input::placeholder {
	color: color-mix(in srgb, var(--op-color-dark) 45%, transparent);
}

.onepoint-site-header__search-input:focus {
	outline: none;
}

.onepoint-site-header__search-form:focus-within {
	border-color: var(--color-mint, var(--op-color-accent));
}

.onepoint-site-header__search-form:focus-within .onepoint-site-header__search-submit {
	color: var(--color-mint, var(--op-color-accent));
}

.onepoint-site-header__search-submit {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 36px;
	height: 36px;
	margin: 0;
	padding: 0;
	border: none;
	background: transparent;
	color: var(--op-color-dark);
	cursor: pointer;
	transition: color 0.2s, background 0.2s;
}

.onepoint-site-header__search-submit:hover {
	color: var(--color-mint, var(--op-color-accent));
	background: color-mix(in srgb, var(--op-color-dark) 4%, transparent);
}

.onepoint-site-header__search-icon {
	width: 18px;
	height: 18px;
	display: block;
}

/* Mobile */
.onepoint-site-header__toggle {
	display: none;
	align-items: center;
	justify-content: center;
	width: 48px;
	height: 48px;
	padding: 0;
	border: none;
	background: transparent;
	cursor: pointer;
	border-radius: 4px;
	overflow: visible;
	transition: background 0.2s;
}

.onepoint-site-header__toggle:hover {
	background: color-mix(in srgb, var(--op-color-dark) 5%, transparent);
}

.onepoint-site-header__hamburger {
	position: relative;
	display: block;
	flex-shrink: 0;
	width: 24px;
	height: 24px;
	overflow: visible;
	background: linear-gradient(var(--op-color-dark), var(--op-color-dark)) center / 22px 2px no-repeat;
	transition: background 0.2s ease;
}

.onepoint-site-header__hamburger::before,
.onepoint-site-header__hamburger::after {
	content: "";
	position: absolute;
	left: 1px;
	width: 22px;
	height: 2px;
	background: var(--op-color-dark);
	border-radius: 1px;
	transform-origin: 11px 1px;
	transition: transform 0.2s ease, top 0.2s ease;
}

.onepoint-site-header__hamburger::before {
	top: 4px;
}

.onepoint-site-header__hamburger::after {
	top: 18px;
}

.onepoint-site-header__toggle[aria-expanded="true"] .onepoint-site-header__hamburger {
	background: none;
}

.onepoint-site-header__toggle[aria-expanded="true"] .onepoint-site-header__hamburger::before {
	top: 11px;
	transform: rotate(45deg);
}

.onepoint-site-header__toggle[aria-expanded="true"] .onepoint-site-header__hamburger::after {
	top: 11px;
	transform: rotate(-45deg);
}

@media (max-width: 991px) {
	.onepoint-site-header__bar,
	.onepoint-site-header__inner {
		overflow: visible;
	}

	.onepoint-site-header__inner {
		position: relative;
		flex-wrap: nowrap;
		padding-left: var(--op-space-6);
		padding-right: var(--op-space-6);
	}

	.onepoint-site-header__toggle {
		display: flex;
		flex-shrink: 0;
		margin-left: auto;
		position: relative;
		z-index: 2;
	}

	.onepoint-site-header__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 5;
		flex: none;
		flex-direction: column;
		align-items: stretch;
		justify-content: flex-start;
		gap: 0;
		max-height: calc(100dvh - var(--onepoint-header-bar-height, 3.25rem));
		overflow-x: hidden;
		overflow-y: auto;
		background: var(--op-color-light);
		box-shadow: 0 4px 12px color-mix(in srgb, var(--op-color-dark) 10%, transparent);
		-webkit-overflow-scrolling: touch;
	}

	.onepoint-site-header__menu.is-open {
		display: flex;
		overscroll-behavior: contain;
		scrollbar-width: none;
		-ms-overflow-style: none;
	}

	.onepoint-site-header__menu.is-open::-webkit-scrollbar {
		display: none;
	}

	.onepoint-site-header__nav {
		position: static;
		display: flex;
		flex: none;
		flex-direction: column;
		width: 100%;
		padding: 0;
	}

	.onepoint-site-header__links {
		flex-direction: column;
		width: 100%;
		align-items: stretch;
		gap: 0;
	}

	.onepoint-site-header__link-item {
		display: flex;
		flex-direction: column;
		overflow: visible;
		border-bottom: 1px solid color-mix(in srgb, var(--op-color-dark) 6%, transparent);
	}

	.onepoint-site-header__link-wrap {
		display: flex;
		align-items: center;
		width: 100%;
		box-sizing: border-box;
	}

	.onepoint-site-header__link {
		flex: 1;
		min-width: 0;
		width: auto;
		box-sizing: border-box;
		justify-content: flex-start;
		padding: 0.75rem var(--op-space-6);
		overflow: visible;
	}

	.onepoint-site-header__link-chevron {
		width: 1rem;
		height: 1rem;
		flex-shrink: 0;
		align-self: stretch;
		padding: 0.75rem var(--op-space-6);
		box-sizing: content-box;
		pointer-events: auto;
		cursor: pointer;
	}

	.onepoint-site-header__link-mega-slot:not([hidden]) {
		display: block;
		width: 100%;
		border-top: 1px solid color-mix(in srgb, var(--op-color-dark) 6%, transparent);
		background: color-mix(in srgb, var(--op-color-dark) 2%, var(--op-color-light));
	}

	.onepoint-site-header__link-mega-slot .onepoint-site-header__mega {
		width: 100%;
	}

	.onepoint-site-header__link-mega-slot .onepoint-site-header__mega-panel {
		padding: var(--op-space-6);
	}

	.onepoint-mega__subgroup-row .onepoint-mega__item-chevron {
		align-self: stretch;
		width: 1rem;
		height: auto;
		min-height: 1rem;
		margin-top: 0;
		padding: 0.5rem;
		box-sizing: content-box;
		pointer-events: auto;
		cursor: pointer;
	}

	.onepoint-site-header__mega-layer {
		display: none !important;
	}

	.onepoint-site-header__search {
		flex: none;
		width: 100%;
		max-width: none;
		margin: 0;
		padding: var(--op-space-4) var(--op-space-6);
		box-sizing: border-box;
		border-top: 1px solid color-mix(in srgb, var(--op-color-dark) 6%, transparent);
	}

	.onepoint-site-header__search-form {
		max-width: none;
	}

	.onepoint-mega__grid {
		grid-template-columns: 1fr;
		gap: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.onepoint-site-header__mega-shell,
	.onepoint-site-header__mega-track {
		transition: none;
	}

	.onepoint-site-header__mega-shell {
		transform: none;
		opacity: 1;
	}

	.onepoint-site-header.is-mega-open .onepoint-site-header__mega-shell:not(.is-shell-open) {
		opacity: 0;
	}
}