*, ::before, ::after {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x:  ;
		--tw-pan-y:  ;
		--tw-pinch-zoom:  ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position:  ;
		--tw-gradient-via-position:  ;
		--tw-gradient-to-position:  ;
		--tw-ordinal:  ;
		--tw-slashed-zero:  ;
		--tw-numeric-figure:  ;
		--tw-numeric-spacing:  ;
		--tw-numeric-fraction:  ;
		--tw-ring-inset:  ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur:  ;
		--tw-brightness:  ;
		--tw-contrast:  ;
		--tw-grayscale:  ;
		--tw-hue-rotate:  ;
		--tw-invert:  ;
		--tw-saturate:  ;
		--tw-sepia:  ;
		--tw-drop-shadow:  ;
		--tw-backdrop-blur:  ;
		--tw-backdrop-brightness:  ;
		--tw-backdrop-contrast:  ;
		--tw-backdrop-grayscale:  ;
		--tw-backdrop-hue-rotate:  ;
		--tw-backdrop-invert:  ;
		--tw-backdrop-opacity:  ;
		--tw-backdrop-saturate:  ;
		--tw-backdrop-sepia:  ;
		--tw-contain-size:  ;
		--tw-contain-layout:  ;
		--tw-contain-paint:  ;
		--tw-contain-style:  ;
}
::backdrop {
		--tw-border-spacing-x: 0;
		--tw-border-spacing-y: 0;
		--tw-translate-x: 0;
		--tw-translate-y: 0;
		--tw-rotate: 0;
		--tw-skew-x: 0;
		--tw-skew-y: 0;
		--tw-scale-x: 1;
		--tw-scale-y: 1;
		--tw-pan-x:  ;
		--tw-pan-y:  ;
		--tw-pinch-zoom:  ;
		--tw-scroll-snap-strictness: proximity;
		--tw-gradient-from-position:  ;
		--tw-gradient-via-position:  ;
		--tw-gradient-to-position:  ;
		--tw-ordinal:  ;
		--tw-slashed-zero:  ;
		--tw-numeric-figure:  ;
		--tw-numeric-spacing:  ;
		--tw-numeric-fraction:  ;
		--tw-ring-inset:  ;
		--tw-ring-offset-width: 0px;
		--tw-ring-offset-color: #fff;
		--tw-ring-color: rgb(59 130 246 / 0.5);
		--tw-ring-offset-shadow: 0 0 #0000;
		--tw-ring-shadow: 0 0 #0000;
		--tw-shadow: 0 0 #0000;
		--tw-shadow-colored: 0 0 #0000;
		--tw-blur:  ;
		--tw-brightness:  ;
		--tw-contrast:  ;
		--tw-grayscale:  ;
		--tw-hue-rotate:  ;
		--tw-invert:  ;
		--tw-saturate:  ;
		--tw-sepia:  ;
		--tw-drop-shadow:  ;
		--tw-backdrop-blur:  ;
		--tw-backdrop-brightness:  ;
		--tw-backdrop-contrast:  ;
		--tw-backdrop-grayscale:  ;
		--tw-backdrop-hue-rotate:  ;
		--tw-backdrop-invert:  ;
		--tw-backdrop-opacity:  ;
		--tw-backdrop-saturate:  ;
		--tw-backdrop-sepia:  ;
		--tw-contain-size:  ;
		--tw-contain-layout:  ;
		--tw-contain-paint:  ;
		--tw-contain-style:  ;
}
.container {
		width: 100%;
}
@media (min-width: 640px) {
		.container {
				max-width: 640px;
		}
}
@media (min-width: 768px) {
		.container {
				max-width: 768px;
		}
}
@media (min-width: 1024px) {
		.container {
				max-width: 1024px;
		}
}
@media (min-width: 1280px) {
		.container {
				max-width: 1280px;
		}
}
@media (min-width: 1536px) {
		.container {
				max-width: 1536px;
		}
}
/* Employee cards are content-dense (name, bio, contact links) so the
     previous lift + photo-zoom hover created more visual noise than signal
     and made the cursor feel "sticky" when moving between contact links.
     Keep the cards fully static — the cursor: pointer alone signals click. */
.cb-employee-card {
		overflow: hidden;
	}
.cb-employee-card .cb-employee-photo {
		overflow: hidden;
	}
/* Initials placeholder when no portrait is uploaded — matches the photo's
     3:4 ratio so cards in the grid line up and gives the empty area a distinct
     gradient so it reads as the card's media slot, not page background. */
.cb-employee-card .cb-employee-photo--initials {
		background:
 linear-gradient(135deg, var(--wp--preset--color--surface, #f4f5f7) 0%, color-mix(in srgb, var(--wp--preset--color--surface, #f4f5f7) 88%, var(--wp--preset--color--accent, #1e5bd8)) 100%);
	}
/* Card trigger button — resets native button chrome so it looks like a
     plain clickable card region. Visible focus ring per design-system
     spec (2px accent, 3px offset). Refactor note: the trigger used to
     be <article role="button" tabindex="0"> with focusable <a>
     descendants — a WCAG 2.1 4.1.2 nested-interactive violation. It's
     now a real <button> wrapping only the non-interactive card header;
     the email/phone/LinkedIn links sit outside it as siblings. */
.cb-employee-card__trigger {
		all: unset;
		box-sizing: border-box;
		display: flex;
		flex-direction: column;
		width: 100%;
		cursor: pointer;
		-webkit-tap-highlight-color: transparent;
	}
.cb-employee-card__trigger:focus-visible {
		outline: 2px solid var(--wp--preset--color--secondary, #0084af);
		outline-offset: 3px;
		border-radius: 12px;
	}
/* Two-line max on the employee name (truncates with ellipsis if longer).
     No min-height reservation — that left empty padding under single-line
     names before the role pills. Cards still align across the grid because
     the grid stretches rows to equal heights and the trigger's flex-1
     absorbs the slack at the bottom of the photo column. */
.cb-employee-card h3 {
		display: -webkit-box;
		-webkit-line-clamp: 2;
		-webkit-box-orient: vertical;
		overflow: hidden;
	}
/* Role pills — one per `employee_role` term, wrapped in a list so they
     flow onto extra rows when an employee holds several roles. */
.cb-employee-card__roles {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
		flex-wrap: wrap;
		gap: 6px;
	}
.cb-employee-card .cb-employee-card__role,
	.cb-employee-card-compact .cb-employee-card__role {
		display: inline-flex;
		align-items: center;
		padding: var(--cb-tag-pad, 4px 10px);
		border-radius: var(--cb-tag-radius, 4px);
		border-left: 2px solid var(--wp--preset--color--accent, #1e5bd8);
		background: color-mix(in srgb, var(--wp--preset--color--accent, #1e5bd8) 8%, transparent);
		color: var(--wp--preset--color--accent, #1e5bd8);
		font-size: 12px;
		font-weight: 600;
		letter-spacing: 0.04em;
		text-transform: uppercase;
		line-height: 1.2;
		white-space: nowrap;
	}
.cb-testimonial-quote {
		position: relative;
	}
.cb-dept-badge {
		display: inline-flex;
		align-items: center;
		width: -moz-fit-content;
		width: fit-content;
		padding: 4px 10px;
		border-radius: 9999px;
		font-size: 14px;
		font-weight: 600;
		letter-spacing: 0.05em;
		text-transform: uppercase;
		background: var(--wp--preset--color--accent, var(--cb-accent));
		color: var(--cb-dark-text);
		opacity: 0.9;
	}
/* The accent-gradient default only applies when the admin HASN'T
   * picked a background via the Gutenberg color panel. With
   * `:not(.has-background)` the admin's chosen palette colour always
   * wins — this is the fix for the editor/frontend mismatch reported on
   * 2026-04-24, where blocks saved with a blue bg still rendered the
   * orange gradient because this class's shorthand `background:` was
   * clobbering the preset palette's inline `background-color`.
   * Same guard on the text-colour children so admins can pair a custom
   * dark bg with the default white text without the class forcing
   * --cb-dark-text on them. */
.cb-cta-accent:not(.has-background) {
		background: linear-gradient(135deg, color-mix(in srgb, var(--cb-accent) 55%, #000) 0%, var(--cb-accent) 50%, color-mix(in srgb, var(--cb-accent) 75%, #fff) 100%);
		color: var(--cb-dark-text);
		box-shadow:
			inset 0 1px 0 rgba(255, 255, 255, 0.1),
			0 4px 32px var(--cb-accent-25);
	}
.cb-cta-accent:not(.has-background) h2,
	.cb-cta-accent:not(.has-background) p {
		color: var(--cb-dark-text);
	}
.cb-cta-section:not(.cb-cta-accent) {
		box-shadow: 0 1px 0 var(--wp--preset--color--muted, var(--cb-muted));
	}
.pointer-events-none {
		pointer-events: none;
}
.visible {
		visibility: visible;
}
.invisible {
		visibility: hidden;
}
.collapse {
		visibility: collapse;
}
.static {
		position: static;
}
.fixed {
		position: fixed;
}
.absolute {
		position: absolute;
}
.relative {
		position: relative;
}
.sticky {
		position: sticky;
}
.inset-0 {
		inset: 0px;
}
.z-0 {
		z-index: 0;
}
.z-10 {
		z-index: 10;
}
.z-20 {
		z-index: 20;
}
.m-0 {
		margin: 0px;
}
.mx-auto {
		margin-left: auto;
		margin-right: auto;
}
.mb-0 {
		margin-bottom: 0px;
}
.mb-10 {
		margin-bottom: 2.5rem;
}
.mb-12 {
		margin-bottom: 3rem;
}
.mb-14 {
		margin-bottom: 3.5rem;
}
.mb-16 {
		margin-bottom: 4rem;
}
.mb-4 {
		margin-bottom: 1rem;
}
.ml-0 {
		margin-left: 0px;
}
.ml-11 {
		margin-left: 2.75rem;
}
.ml-8 {
		margin-left: 2rem;
}
.ml-auto {
		margin-left: auto;
}
.mr-0 {
		margin-right: 0px;
}
.mr-auto {
		margin-right: auto;
}
.mt-1 {
		margin-top: 0.25rem;
}
.mt-12 {
		margin-top: 3rem;
}
.mt-2 {
		margin-top: 0.5rem;
}
.mt-3 {
		margin-top: 0.75rem;
}
.mt-4 {
		margin-top: 1rem;
}
.mt-6 {
		margin-top: 1.5rem;
}
.mt-8 {
		margin-top: 2rem;
}
.mt-auto {
		margin-top: auto;
}
.box-border {
		box-sizing: border-box;
}
.block {
		display: block;
}
.inline-block {
		display: inline-block;
}
.inline {
		display: inline;
}
.flex {
		display: flex;
}
.inline-flex {
		display: inline-flex;
}
.grid {
		display: grid;
}
.hidden {
		display: none;
}
.aspect-\[3\/4\] {
		aspect-ratio: 3/4;
}
.aspect-\[4\/3\] {
		aspect-ratio: 4/3;
}
.aspect-square {
		aspect-ratio: 1 / 1;
}
.h-10 {
		height: 2.5rem;
}
.h-12 {
		height: 3rem;
}
.h-14 {
		height: 3.5rem;
}
.h-7 {
		height: 1.75rem;
}
.h-auto {
		height: auto;
}
.h-full {
		height: 100%;
}
.max-h-\[60\%\] {
		max-height: 60%;
}
.min-h-\[70vh\] {
		min-height: 70vh;
}
.w-1\/2 {
		width: 50%;
}
.w-12 {
		width: 3rem;
}
.w-14 {
		width: 3.5rem;
}
.w-7 {
		width: 1.75rem;
}
.w-auto {
		width: auto;
}
.w-full {
		width: 100%;
}
.min-w-0 {
		min-width: 0px;
}
.max-w-3xl {
		max-width: 48rem;
}
.max-w-\[22ch\] {
		max-width: 22ch;
}
.max-w-\[60\%\] {
		max-width: 60%;
}
.max-w-\[820px\] {
		max-width: 820px;
}
.max-w-\[980px\] {
		max-width: 980px;
}
.max-w-full {
		max-width: 100%;
}
.max-w-prose {
		max-width: 720px;
}
.max-w-screen-rts {
		max-width: 64rem;
}
.max-w-site-md {
		max-width: var(--cb-content-max, 1280px);
}
.flex-1 {
		flex: 1 1 0%;
}
.shrink {
		flex-shrink: 1;
}
.shrink-0 {
		flex-shrink: 0;
}
.grow {
		flex-grow: 1;
}
.transform {
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}
.cursor-pointer {
		cursor: pointer;
}
.select-none {
		-webkit-user-select: none;
		   -moz-user-select: none;
		        user-select: none;
}
.resize {
		resize: both;
}
.list-none {
		list-style-type: none;
}
.grid-cols-1 {
		grid-template-columns: repeat(1, minmax(0, 1fr));
}
.grid-cols-2 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
}
.flex-row {
		flex-direction: row;
}
.flex-col {
		flex-direction: column;
}
.flex-wrap {
		flex-wrap: wrap;
}
.content-start {
		align-content: flex-start;
}
.items-start {
		align-items: flex-start;
}
.items-end {
		align-items: flex-end;
}
.items-center {
		align-items: center;
}
.items-stretch {
		align-items: stretch;
}
.justify-start {
		justify-content: flex-start;
}
.justify-end {
		justify-content: flex-end;
}
.justify-center {
		justify-content: center;
}
.justify-between {
		justify-content: space-between;
}
.gap-0 {
		gap: 0px;
}
.gap-0\.5 {
		gap: 0.125rem;
}
.gap-1 {
		gap: 0.25rem;
}
.gap-12 {
		gap: 3rem;
}
.gap-2 {
		gap: 0.5rem;
}
.gap-2\.5 {
		gap: 0.625rem;
}
.gap-3 {
		gap: 0.75rem;
}
.gap-4 {
		gap: 1rem;
}
.gap-5 {
		gap: 1.25rem;
}
.gap-6 {
		gap: 1.5rem;
}
.gap-8 {
		gap: 2rem;
}
.divide-y > :not([hidden]) ~ :not([hidden]) {
		--tw-divide-y-reverse: 0;
		border-top-width: calc(1px * calc(1 - var(--tw-divide-y-reverse)));
		border-bottom-width: calc(1px * var(--tw-divide-y-reverse));
}
.divide-muted > :not([hidden]) ~ :not([hidden]) {
		border-color: var(--wp--preset--color--muted,     #d6eef5);
}
.divide-neutral-200 > :not([hidden]) ~ :not([hidden]) {
		--tw-divide-opacity: 1;
		border-color: rgb(229 229 229 / var(--tw-divide-opacity, 1));
}
.self-start {
		align-self: flex-start;
}
.self-end {
		align-self: flex-end;
}
.self-center {
		align-self: center;
}
.overflow-hidden {
		overflow: hidden;
}
.truncate {
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
}
.rounded {
		border-radius: 0.25rem;
}
.rounded-2xl {
		border-radius: 1rem;
}
.rounded-full {
		border-radius: 9999px;
}
.rounded-lg {
		border-radius: 0.5rem;
}
.rounded-md {
		border-radius: 0.375rem;
}
.rounded-sm {
		border-radius: 0.125rem;
}
.rounded-xl {
		border-radius: 0.75rem;
}
.border {
		border-width: 1px;
}
.border-2 {
		border-width: 2px;
}
.border-none {
		border-style: none;
}
.border-muted {
		border-color: var(--wp--preset--color--muted,     #d6eef5);
}
.border-neutral-100 {
		--tw-border-opacity: 1;
		border-color: rgb(245 245 245 / var(--tw-border-opacity, 1));
}
.border-primary {
		border-color: var(--wp--preset--color--primary,   #00486A);
}
.bg-accent {
		background-color: var(--wp--preset--color--accent,    #F5833C);
}
.bg-black {
		--tw-bg-opacity: 1;
		background-color: rgb(0 0 0 / var(--tw-bg-opacity, 1));
}
.bg-neutral-100 {
		--tw-bg-opacity: 1;
		background-color: rgb(245 245 245 / var(--tw-bg-opacity, 1));
}
.bg-surface {
		background-color: var(--wp--preset--color--surface,   #fafaf8);
}
.bg-white {
		--tw-bg-opacity: 1;
		background-color: rgb(255 255 255 / var(--tw-bg-opacity, 1));
}
.object-contain {
		-o-object-fit: contain;
		   object-fit: contain;
}
.object-cover {
		-o-object-fit: cover;
		   object-fit: cover;
}
.object-top {
		-o-object-position: top;
		   object-position: top;
}
.p-0 {
		padding: 0px;
}
.p-6 {
		padding: 1.5rem;
}
.p-8 {
		padding: 2rem;
}
.px-13 {
		padding-left: var(--cb-rail, 3.25rem);
		padding-right: var(--cb-rail, 3.25rem);
}
.px-6 {
		padding-left: 1.5rem;
		padding-right: 1.5rem;
}
.px-7 {
		padding-left: 1.75rem;
		padding-right: 1.75rem;
}
.px-8 {
		padding-left: 2rem;
		padding-right: 2rem;
}
.py-12 {
		padding-top: 3rem;
		padding-bottom: 3rem;
}
.py-2 {
		padding-top: 0.5rem;
		padding-bottom: 0.5rem;
}
.py-3 {
		padding-top: 0.75rem;
		padding-bottom: 0.75rem;
}
.py-3\.5 {
		padding-top: 0.875rem;
		padding-bottom: 0.875rem;
}
.py-5 {
		padding-top: 1.25rem;
		padding-bottom: 1.25rem;
}
.py-section {
		padding-top: clamp(4rem, 8vw, 6rem);
		padding-bottom: clamp(4rem, 8vw, 6rem);
}
.py-section-sm {
		padding-top: clamp(2.5rem, 5vw, 4rem);
		padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pb-5 {
		padding-bottom: 1.25rem;
}
.pb-section-sm {
		padding-bottom: clamp(2.5rem, 5vw, 4rem);
}
.pt-0 {
		padding-top: 0px;
}
.pt-3 {
		padding-top: 0.75rem;
}
.pt-\[140px\] {
		padding-top: 140px;
}
.text-left {
		text-align: left;
}
.text-center {
		text-align: center;
}
.text-right {
		text-align: right;
}
.text-2xl {
		font-size: 1.5rem;
		line-height: 2rem;
}
.text-3xl {
		font-size: 1.875rem;
		line-height: 2.25rem;
}
.text-4xl {
		font-size: 2.25rem;
		line-height: 2.5rem;
}
.text-5xl {
		font-size: 3rem;
		line-height: 1;
}
.text-base {
		font-size: 1rem;
		line-height: 1.5rem;
}
.text-hero {
		font-size: clamp(1.75rem, 6.5vw, 5.5rem);
		line-height: 1.05;
		letter-spacing: -0.01em;
}
.text-hero-sub {
		font-size: clamp(1.15rem, 1vw + 1rem, 1.45rem);
		line-height: 1.625;
}
.text-lg {
		font-size: 1.125rem;
		line-height: 1.75rem;
}
.text-quote {
		font-size: clamp(1.1rem, 1.5vw + 0.5rem, 1.375rem);
		line-height: 1.625;
}
.text-section-heading {
		font-size: clamp(2rem, 3vw + 0.5rem, 3.25rem);
		line-height: 1.15;
		letter-spacing: -0.015em;
}
.text-sm {
		font-size: 0.875rem;
		line-height: 1.25rem;
}
.text-xl {
		font-size: 1.25rem;
		line-height: 1.75rem;
}
.font-bold {
		font-weight: 700;
}
.font-medium {
		font-weight: 500;
}
.font-normal {
		font-weight: 400;
}
.font-semibold {
		font-weight: 600;
}
.uppercase {
		text-transform: uppercase;
}
.lowercase {
		text-transform: lowercase;
}
.italic {
		font-style: italic;
}
.leading-none {
		line-height: 1;
}
.leading-relaxed {
		line-height: 1.625;
}
.leading-snug {
		line-height: 1.375;
}
.leading-tight {
		line-height: 1.25;
}
.text-accent {
		color: var(--wp--preset--color--accent,    #F5833C);
}
.text-primary {
		color: var(--wp--preset--color--primary,   #00486A);
}
.text-secondary {
		color: var(--wp--preset--color--secondary, #0084AF);
}
.text-white {
		--tw-text-opacity: 1;
		color: rgb(255 255 255 / var(--tw-text-opacity, 1));
}
.text-white\/85 {
		color: rgb(255 255 255 / 0.85);
}
.text-white\/90 {
		color: rgb(255 255 255 / 0.9);
}
.no-underline {
		text-decoration-line: none;
}
.opacity-70 {
		opacity: 0.7;
}
.opacity-80 {
		opacity: 0.8;
}
.opacity-85 {
		opacity: 0.85;
}
.shadow {
		--tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
		--tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.shadow-sm {
		--tw-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05);
		--tw-shadow-colored: 0 1px 2px 0 var(--tw-shadow-color);
		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
}
.outline {
		outline-style: solid;
}
.ring {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(3px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.ring-2 {
		--tw-ring-offset-shadow: var(--tw-ring-inset) 0 0 0 var(--tw-ring-offset-width) var(--tw-ring-offset-color);
		--tw-ring-shadow: var(--tw-ring-inset) 0 0 0 calc(2px + var(--tw-ring-offset-width)) var(--tw-ring-color);
		box-shadow: var(--tw-ring-offset-shadow), var(--tw-ring-shadow), var(--tw-shadow, 0 0 #0000);
}
.blur {
		--tw-blur: blur(8px);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.grayscale {
		--tw-grayscale: grayscale(100%);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.invert {
		--tw-invert: invert(100%);
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.filter {
		filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
}
.transition {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke, opacity, box-shadow, transform, filter, backdrop-filter;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-colors {
		transition-property: color, background-color, border-color, text-decoration-color, fill, stroke;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.transition-transform {
		transition-property: transform;
		transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
		transition-duration: 150ms;
}
.duration-150 {
		transition-duration: 150ms;
}
.duration-200 {
		transition-duration: 200ms;
}

/* ── Responsive section rail ─────────────────────────────────────────────────
   --cb-rail is the single horizontal gutter every block uses through the
   `px-13` utility (retargeted to var(--cb-rail) in tailwind.config.js) and the
   header (--cb-header-side-pad falls back to it). Mobile-first so the page
   never wastes more than 16px of side gutter on a phone; it steps up to the
   historical 52px on desktop, leaving large screens visually unchanged.

   Mobile  (< 640px): 1rem   = 16px   ← the hard cap for phones
   Tablet  (≥ 640px): 2rem   = 32px
   Desktop (≥ 1024px): 3.25rem = 52px (unchanged from before)
*/
:root {
	--cb-rail: 1rem;

	/* Single content max-width for the whole page frame. The header, footer,
	   contact block, page-auto-hero and every section block's rail all consume
	   this, so they line up on the same left/right edges instead of each
	   hard-coding its own cap (which had contact at 1440, footer at 1200 and
	   blocks split 1280/1440 — the "sporadic width" mismatch).

	   This is deliberately INDEPENDENT of the header's "Content width" setting
	   (--cb-header-max-width). That setting scopes to the header rail ONLY (see
	   view.tsx maxWidth + the header template-part rules in styrk-theme).
	   Sourcing the page-wide cap from it used to leak a header-only choice into
	   every section: picking header "Content width → Full width" set
	   --cb-header-max-width:none, which cascaded here and stretched the WHOLE
	   DOM edge-to-edge. Now the header widens/narrows on its own without
	   dragging the page frame with it. */
	--cb-content-max: 1280px;
}

@media ( min-width: 640px ) {

	:root {
		--cb-rail: 2rem;
	}
}

@media ( min-width: 1024px ) {

	:root {
		--cb-rail: 3.25rem;
	}
}

/* ── Box-sizing reset ────────────────────────────────────────────────────────
   Tailwind utilities (w-full, px-*, gap-*, etc.) assume border-box sizing.
   WordPress does not apply a global reset, so every custom block element
   that carries a Tailwind layout class must use border-box explicitly.
   Without this, w-full + px-6 renders as (100% width) + 48 px = overflow.
*/
.cb-hero,
            .cb-hero            *,
 .cb-hero            *::before,
 .cb-hero            *::after,
.cb-block-rich-text,
 .cb-block-rich-text *,
 .cb-block-rich-text *::before,
 .cb-block-rich-text *::after,
.cb-block-features,
  .cb-block-features  *,
 .cb-block-features  *::before,
 .cb-block-features  *::after,
.cb-block-stats,
     .cb-block-stats     *,
 .cb-block-stats     *::before,
 .cb-block-stats     *::after,
.cb-block-split,
     .cb-block-split     *,
 .cb-block-split     *::before,
 .cb-block-split     *::after,
.cb-block-testimonial,
.cb-block-testimonial *,
.cb-block-testimonial *::before,
.cb-block-testimonial *::after,
.cb-block-call-card,
 .cb-block-call-card *,
 .cb-block-call-card *::before,
 .cb-block-call-card *::after,
.cb-employee-modal,
  .cb-employee-modal  *,
 .cb-employee-modal  *::before,
 .cb-employee-modal  *::after {
	box-sizing: border-box;
}

/* ══════════════════════════════════════════════════════════════════════════════
   BRAND TOKENS — re-skin for any client by editing these + theme.json
   ══════════════════════════════════════════════════════════════════════════════

   HOW TO RE-THEME A NEW CLIENT PROJECT:
   1. Edit the six palette colours in theme.json  → settings.color.palette
   2. Update the RGB companion variables below    → --cb-accent-r/g/b and
                                                     --cb-primary-r/g/b
   3. Rebuild CSS:  ./node_modules/.bin/tailwindcss -i src/style.css ...
   That's it. Every block, button, eyebrow, card and dark section updates.
   ═══════════════════════════════════════════════════════════════════════════ */
:root {

	/* ── Palette — mirrors theme.json ──────────────────────────────────────── */

	/* KNOWN BUG, DELIBERATELY NOT FIXED DURING THE FREEZE.
	 *
	 * Four of these are SELF-REFERENTIAL: the fallback names the property
	 * being defined. That is invalid at computed-value time, so on a site
	 * whose theme.json omits the preset, the token resolves to nothing.
	 * --cb-secondary separately falls back to slate, not the brand teal.
	 *
	 * Correct values: primary #00486A, secondary #0084AF, accent #F5833C,
	 * surface #fafaf8, muted #d6eef5.
	 *
	 * NOT applied yet, because it changes what live client sites render.
	 * These client themes omit the presets, so the fallback really fires:
	 *   skotnes / anleggspartner / styrkreklame - no secondary, no muted
	 *   trondheim-maskinutleie                  - no secondary
	 * There it would shift 5 elements from slate to brand teal, and 6
	 * borders from currentColor to light teal. Correct, but visible, and
	 * this is a code freeze with no support cover. It has been latent for
	 * months; three more weeks beats an unattended regression.
	 *
	 * TO APPLY AFTER THE FREEZE: swap each fallback for the hex above, then
	 * check skotnes, anleggspartner and styrkreklame in a browser. A site
	 * that defines every preset cannot show this bug. */
	--cb-primary: var(--wp--preset--color--primary, var(--cb-primary));
	--cb-secondary: var(--wp--preset--color--secondary, #64748b);
	--cb-accent: var(--wp--preset--color--accent, var(--cb-accent));
	--cb-surface: var(--wp--preset--color--surface, var(--cb-surface));
	--cb-muted: var(--wp--preset--color--muted, var(--cb-muted));
	--cb-bg: var(--wp--preset--color--white, #fff);

	/* ── RGB channels — needed for rgba() tints. UPDATE when accent/primary changes ── */
	--cb-accent-r: 245;
	--cb-accent-g: 131;
	--cb-accent-b: 60;
	--cb-primary-r: 0;
	--cb-primary-g: 72;
	--cb-primary-b: 106;

	/* ── Pre-computed accent tints ──────────────────────────────────────────── */
	--cb-accent-10: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.1);
	--cb-accent-15: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.15);
	--cb-accent-20: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.2);
	--cb-accent-25: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.25);
	--cb-accent-28: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.28);
	--cb-accent-38: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.38);

	/* ── Dark section backgrounds (hero, footer, CTA, video block) ─────────── */
	--cb-dark-bg: var(--cb-primary);
	--cb-dark-text: #fff;
	--cb-dark-sub: rgba(255, 255, 255, 0.65);
	--cb-dark-border: rgba(255, 255, 255, 0.08);

	/* ── Text selection — always readable on every background ──────────────── */
	--cb-selection-bg: var(--cb-accent, #f5833c);
	--cb-selection-color: #fff;

	/* ── Shadows (neutral — keep as-is across all themes) ─────────────────── */
	--cb-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
	--cb-shadow-md: 0 8px 32px rgba(0, 0, 0, 0.1), 0 2px 8px rgba(0, 0, 0, 0.06);
	--cb-shadow-lg: 0 24px 64px -12px rgba(0, 0, 0, 0.22), 0 0 0 1px rgba(0, 0, 0, 0.04);
	--cb-shadow-xl: 0 32px 72px -12px rgba(0, 0, 0, 0.28), 0 0 0 1px rgba(0, 0, 0, 0.04);
	--cb-base-font-size: 18px;
}

@media (min-width: 769px) {

	:root {
		--cb-base-font-size: 19px;
	}
}

@media (min-width: 1025px) {

	:root {
		--cb-base-font-size: 20px;
	}
}

.wp-site-blocks {
	font-size: var(--cb-base-font-size);
	line-height: 1.75;
	color: var(--cb-primary);
}

/* ── Text selection — high-contrast on every background ────────────────── */
::-moz-selection {
	background: var(--cb-selection-bg, #f5833c);
	color: var(--cb-selection-color, #fff);
}
::selection {
	background: var(--cb-selection-bg, #f5833c);
	color: var(--cb-selection-color, #fff);
}

::-moz-selection {
	background: var(--cb-selection-bg, #f5833c);
	color: var(--cb-selection-color, #fff);
}

/* ── WordPress wrapper spacing reset ─────────────────────────────────────── */

/* WP injects inline padding/margin on .wp-block-group wrappers from the page
   template and theme spacing presets. Override so our blocks control spacing.
   Exclude .cb-page-main — inner pages (with the page-header block) need
   their own padding/layout so the template can breathe. */
.wp-site-blocks > main:not(.cb-page-main),
.wp-site-blocks > .wp-block-group:not(.cb-page-main) {
	margin-top: 0 !important;
	margin-bottom: 0 !important;
	padding-top: 0 !important;
	padding-bottom: 0 !important;
}

.wp-site-blocks > main:not(.cb-page-main) > .wp-block-group,
.wp-site-blocks > main:not(.cb-page-main) > * {
	padding: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

.wp-block-template-part,
.wp-site-blocks {
	--wp--style--block-gap: 0 !important;
}

/* ── React header ─────────────────────────────────────────────────────────── */

/*
 * Header is position:absolute — it overlays the top of each page and scrolls
 * away naturally. Non-home pages need their first block offset so content
 * doesn't start hidden behind the header.
 *
 * Use body:not(.home) — WordPress renders this server-side, so the rule is
 * active from first paint with NO JavaScript dependency and NO layout shift.
 * (body.home = front page, added by WP core.)
 */

/* Desktop nav: visible on wide screens */
.rh-desktop-nav {
	display: flex !important;
}

/* Mobile toggle: hidden on wide screens */
.rh-mobile-toggle {
	display: none !important;
}

/* Switch to hamburger early enough that logo + 5 nav links + search + CTA
 * pill have comfortable breathing room. At 1100px the content (logo ~190 +
 * nav ~530 + cluster ~255 + two 48px gaps) just fits inside the 1200 rail's
 * inner content area (rail caps at viewport when narrower); below this the
 * desktop nav would crowd the CTA or overflow the viewport. */
@media (max-width: 1100px) {

	.rh-desktop-nav {
		display: none !important;
	}

	.rh-mobile-toggle {
		display: flex !important;
	}

	/* Mobile/tablet header rail: the inner bar carries the desktop side-gutter
   * (--cb-header-side-pad, ~52px) and a 48px inter-item gap inline — both far
   * too large once the nav collapses, leaving the action cluster floating off
   * the right edge. Pull the bar to a full-width 16px gutter with a compact
   * gap so logo + actions sit inside a consistent edge. !important is required
   * to beat the component's inline padding/gap. */
	.site-header-react > div {
		padding-left: 16px !important;
		padding-right: 16px !important;
		gap: 16px !important;
	}

	/* The (now-hidden) desktop nav was what pushed the action cluster to the
   * right edge under end / spread-start alignment — there the search trigger
   * carries an inline margin-left:0 and leans on the nav's auto-margin to do
   * the spreading. With the nav gone, make the first visible action (search)
   * absorb the slack so search + hamburger stay pinned to the 16px right
   * gutter. !important beats the component's inline margin-left. */
	.rh-search-trigger {
		margin-left: auto !important;
	}

	/* Header CTA is desktop-only. The pill (e.g. "Ring Tor · 40 00 46 02") is a
   * fixed, non-wrapping ~207px wide and flex-shrink:0, so on a phone it shoved
   * the hamburger toggle clean off the right edge — the primary mobile nav
   * control became unreachable. Hide it once the bar collapses; the mobile menu
   * carries the action. (view.tsx already documents the CTA as "desktop only,
   * hidden on mobile via CSS" — this is the rule that was missing.) */
	.rh-cta {
		display: none !important;
	}
}

/* ── Desktop navigation mode (Settings → Header → "Desktop navigation") ───────
 * The base rules above are the 'nav' default: inline nav on desktop, the
 * hamburger/megamenu toggle only on mobile (≤1100px). These wrapper-scoped
 * overrides change that per the admin's choice:
 *   nav_toggle → ALSO show the megamenu toggle on desktop, beside the nav.
 *   toggle     → hide the inline nav at EVERY width; show only the toggle. */
.react-header-live-wrapper[data-nav-mode="nav_toggle"] .rh-mobile-toggle {
	display: flex !important;
}

.react-header-live-wrapper[data-nav-mode="toggle"] .rh-desktop-nav {
	display: none !important;
}

.react-header-live-wrapper[data-nav-mode="toggle"] .rh-mobile-toggle {
	display: flex !important;
}

/* In toggle mode the inline nav is hidden — but the right-push auto-margin
 * lived on that nav, so the action cluster (search + megamenu icon) would
 * collapse beside the logo. Push the cluster to the right edge itself: the
 * search trigger (first cluster item) takes margin-left:auto, the natural 48px
 * flex gap keeps search ↔ icon apart, and the header side gutter holds the
 * right edge. !important beats the inline margin-left the button sets. */
.react-header-live-wrapper[data-nav-mode="toggle"] .rh-search-trigger {
	margin-left: auto !important;
}

/* ── Search trigger + overlay ─────────────────────────────────────────────
 *
 * The trigger is a magnifying-glass icon button next to the hamburger
 * (sits before it in DOM order). It carries the same colour as the
 * surrounding nav (inherits via `color: navColor` inline style on the
 * button element). On hover/focus the icon brightens.
 *
 * The overlay is a fixed dialog under a translucent backdrop. The
 * search-result dropdown lives inside the panel — desktop renders it
 * as a wide centred panel near the top, mobile fills the viewport. */

/* Toggled by React on <html> when mobile menu or search is open.
 * scrollbar-gutter:stable keeps the scrollbar track reserved so no
 * layout shift occurs when the overlay appears or disappears. */
html.rh-scroll-locked {
	overflow: hidden;
	scrollbar-gutter: stable;
}

/* When the theme's CTA-inject script wraps search + CTA buttons in a
 * cluster div, give the wrapper the margin-left:auto so it stays
 * pinned to the right edge of the header flex container. */
.styrk-header-right-cluster {
	margin-left: auto;
	display: flex;
	align-items: center;
}

.rh-search-trigger {
	border-radius: 6px;
	transition: background 0.15s, color 0.15s;
}

.rh-search-trigger:hover,
.rh-search-trigger:focus-visible {
	background: rgba(255, 255, 255, 0.08);
}

/* Inside a solid-navy header, the inherited rgba hover is too subtle —
 * replace with a slight brightening of the bg.  The selector matches
 * any solid-bg-mode header (data attribute set by render.php). */
.site-header-react[style*="rgb(0, 72, 106)"] .rh-search-trigger:hover,
.site-header-react[style*="rgb(0, 72, 106)"] .rh-search-trigger:focus-visible {
	background: rgba(255, 255, 255, 0.14);
}

.rh-search-overlay {
	position: fixed;
	inset: 0;
	z-index: 10010;
	background: rgba(10, 15, 30, 0.55);
	backdrop-filter: blur(4px) saturate(140%);
	-webkit-backdrop-filter: blur(4px) saturate(140%);
	display: flex;
	align-items: flex-start;
	justify-content: center;
	padding: 116px 16px 16px;
	animation: rh-search-fade-in 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes rh-search-fade-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

@media ( prefers-reduced-motion: reduce ) {

	.rh-search-overlay {
		animation: none;
	}
}

.rh-search-panel {
	width: 100%;
	max-width: 720px;
	background: var(--wp--preset--color--surface, #fafaf8);
	border-radius: 16px;
	box-shadow: 0 24px 64px rgba(0, 0, 0, 0.32);
	overflow: hidden;
	display: flex;
	flex-direction: column;
}

/* Mobile: fill the viewport, no rounded corners — feels like the
 * standard mobile-app full-screen search pattern. */
@media (max-width: 640px) {

	.rh-search-overlay {
		padding: 0;
		align-items: stretch;
	}

	.rh-search-panel {
		max-width: 100%;
		border-radius: 0;
		height: 100%;
	}
}

.rh-search-form {
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 18px 20px;
	border-bottom:
 1px solid color-mix(in srgb, var(--cb-search-panel-text, var(--cb-primary, #1f2937)) 12%, transparent);

	/* The form's `color` is what <SearchIcon> and the close-button icon
     inherit (both render currentColor SVG strokes). */
	color: var(--cb-search-icon-color, var(--cb-primary, #6b7280));
}

.rh-search-form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	font-family: Inter, system-ui, sans-serif;
	font-size: 18px;
	font-weight: 400;
	color: var(--cb-search-panel-text, var(--cb-primary, #1f2937));
	outline: none;
	padding: 4px 0;
	min-width: 0;
}

.rh-search-form input[type="search"]::-moz-placeholder {
	color: var(--cb-search-panel-placeholder, color-mix(in srgb, var(--cb-primary, #1f2937) 50%, transparent));
}

.rh-search-form input[type="search"]::placeholder {
	color: var(--cb-search-panel-placeholder, color-mix(in srgb, var(--cb-primary, #1f2937) 50%, transparent));
}

.rh-search-form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.rh-search-close {
	background: transparent;
	border: 0;
	color: var(--cb-search-icon-color, inherit);
	cursor: pointer;
	padding: 4px;
	line-height: 0;
	border-radius: 6px;
	flex-shrink: 0;
}

.rh-search-close:hover,
.rh-search-close:focus-visible {
	background: var(--cb-search-close-hover-bg, rgba(0, 0, 0, 0.06));
}


.rh-search-results {
	max-height: 60vh;
	overflow-y: auto;
	padding: 8px;
	display: flex;
	flex-direction: column;
	gap: 4px;
}

@media (max-width: 640px) {

	.rh-search-results {
		max-height: none;
		flex: 1;
	}
}

.rh-search-result {
	display: block;
	padding: 12px 14px;
	border-radius: 8px;
	text-decoration: none;
	color: inherit;
	border: 1px solid transparent;
	transition: background 0.12s, border-color 0.12s;
}

.rh-search-result.is-active,
.rh-search-result:hover {
	background: var(--cb-search-result-hover-bg, rgba(0, 72, 106, 0.06));
	border-color:
 color-mix(in srgb, var(--cb-search-result-hover-bg, rgba(0, 72, 106, 0.06)) 60%, transparent);
}

.rh-search-result__head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
}

.rh-search-result__title {
	font-family: Fraunces, Georgia, serif;
	font-size: 17px;
	font-weight: 500;
	color: var(--cb-primary, #00486a);
	line-height: 1.3;
}

.rh-search-result__type {
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5833c);
	background: rgba(245, 131, 60, 0.1);
	padding: 3px 8px;
	border-radius: 999px;
	flex-shrink: 0;
}

.rh-search-result__excerpt {
	margin: 4px 0 0;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	line-height: 1.5;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 75%, transparent);
}

.rh-search-status {
	margin: 0;
	padding: 16px 20px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 60%, transparent);
}

.rh-search-all {
	display: block;
	text-align: center;
	padding: 14px;
	margin-top: 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 14px;
	font-weight: 500;
	color: var(--cb-search-all-results-color, var(--cb-search-panel-text, var(--cb-primary, #1f2937)));
	text-decoration: none;
	border-top:
 1px solid color-mix(in srgb, var(--cb-search-panel-text, var(--cb-primary, #1f2937)) 12%, transparent);
}

.rh-search-all:hover,
.rh-search-all:focus-visible {
	background: var(--cb-search-all-results-hover-bg, rgba(0, 72, 106, 0.06));
}

/* ── Search results page (`/?s=…`) ──────────────────────────────────────────
 *
 * Rendered by the `[styrk_search_results]` shortcode (see
 * includes/search-render.php). The page has the same vertical rhythm
 * as a regular inner page — navy hero band on top, white surface
 * with results below. Empty state is loud (clear "no hits" message
 * + call-to-action back to home) so an empty results page never
 * looks broken.
 */

main.cb-search-page {
	padding: 0 !important;            /* hero handles its own top padding */
	margin: 0 !important;
}

.cb-search-page__hero {
	background: var(--wp--preset--color--primary, var(--cb-primary, #00486a));
	color: #fff;

	/* Clear the absolute FSE template-part header — same constants as
   * page-auto-hero. Keeps top safe across breakpoints. */
	padding: clamp(108px, 14vh, 136px) 24px clamp(48px, 8vh, 72px);
}

.cb-search-page__hero-inner {
	max-width: 720px;
	margin-inline: auto;
}

.cb-search-page__eyebrow {
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c)) !important;
	margin: 0 0 12px;
}

.cb-search-page__heading {
	font-family: Fraunces, Georgia, serif;
	font-size: clamp(32px, 5vw, 56px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: #fff;
	margin: 0 0 32px;
}

.cb-search-page__form {
	display: flex;
	align-items: stretch;
	gap: 8px;
	background: rgba(255, 255, 255, 0.08);
	border: 1px solid rgba(255, 255, 255, 0.15);
	border-radius: 10px;
	padding: 6px;
	max-width: 540px;
}

.cb-search-page__form:focus-within {
	border-color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	background: rgba(255, 255, 255, 0.12);
}

.cb-search-page__form input[type="search"] {
	flex: 1;
	border: 0;
	background: transparent;
	color: #fff;
	font: inherit;
	font-size: 16px;
	padding: 10px 14px;
	outline: none;
	min-width: 0;
}

.cb-search-page__form input[type="search"]::-moz-placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.cb-search-page__form input[type="search"]::placeholder {
	color: rgba(255, 255, 255, 0.55);
}

.cb-search-page__form input[type="search"]::-webkit-search-cancel-button {
	-webkit-appearance: none;
}

.cb-search-page__form button {
	background: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	color: #00486a;
	border: 0;
	padding: 8px 22px;
	font-weight: 600;
	font-size: 15px;
	border-radius: 6px;
	cursor: pointer;
	transition: transform 0.15s, box-shadow 0.15s;
}

.cb-search-page__form button:hover,
.cb-search-page__form button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.18);
}

.cb-search-page__body {
	background: var(--wp--preset--color--surface, var(--cb-surface, #fafaf8));
	padding: clamp(48px, 8vh, 80px) 24px clamp(64px, 10vh, 120px);
}

.cb-search-page__body > * {
	max-width: 720px;
	margin-inline: auto;
}

.cb-search-page__count {
	font-family: Inter, system-ui, sans-serif;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 60%, transparent);
	margin: 0 auto 24px;
}

.cb-search-page__list {
	list-style: none;
	margin: 0 auto;
	padding: 0;
}

.cb-search-page__hit {
	margin: 0;
}

.cb-search-page__hit + .cb-search-page__hit {
	border-top: 1px solid color-mix(in srgb, var(--cb-primary, #00486a) 12%, transparent);
}

.cb-search-page__hit-link {
	display: block;
	padding: 24px 16px;
	text-decoration: none;
	color: inherit;
	border-radius: 12px;
	transition: background 0.15s;
}

.cb-search-page__hit-link:hover,
.cb-search-page__hit-link:focus-visible {
	background: color-mix(in srgb, var(--cb-primary, #00486a) 4%, transparent);
}

.cb-search-page__hit-head {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	margin-bottom: 6px;
}

.cb-search-page__hit-title {
	font-family: Fraunces, Georgia, serif;
	font-size: 22px;
	font-weight: 500;
	line-height: 1.25;
	color: var(--cb-primary, #00486a);
}

.cb-search-page__hit-link:hover .cb-search-page__hit-title {
	text-decoration: underline;
	text-underline-offset: 4px;
	text-decoration-thickness: 2px;
}

.cb-search-page__hit-type {
	font-family: Inter, system-ui, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5833c);
	background: rgba(245, 131, 60, 0.1);
	padding: 4px 10px;
	border-radius: 999px;
	flex-shrink: 0;
}

.cb-search-page__hit-excerpt {
	display: block;
	margin-top: 8px;
	font-family: Inter, system-ui, sans-serif;
	font-size: 15px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 75%, transparent);
}

.cb-search-page__empty {
	text-align: center;
	padding: 48px 16px;
	background: #fff;
	border: 1px dashed color-mix(in srgb, var(--cb-primary, #00486a) 18%, transparent);
	border-radius: 16px;
}

.cb-search-page__empty-line {
	font-family: Fraunces, Georgia, serif;
	font-size: 24px;
	font-weight: 500;
	color: var(--cb-primary, #00486a);
	margin: 0 0 12px;
}

.cb-search-page__empty-hint {
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 70%, transparent);
	margin: 0;
}

.cb-search-page__empty-hint a {
	color: var(--cb-primary, #00486a);
	font-weight: 500;
	text-decoration: underline;
	text-underline-offset: 3px;
}

.cb-search-page__hint {
	font-family: Inter, system-ui, sans-serif;
	font-size: 16px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 70%, transparent);
	text-align: center;
	padding: 32px 16px;
}

@media ( max-width: 640px ) {

	.cb-search-page__heading {
		font-size: 32px;
	}

	.cb-search-page__form {
		flex-direction: column;
		padding: 8px;
	}

	.cb-search-page__form button {
		width: 100%;
		padding: 12px;
	}

	.cb-search-page__hit-link {
		padding: 18px 12px;
	}

	.cb-search-page__hit-title {
		font-size: 19px;
	}

	.cb-search-page__hit-head {
		flex-direction: column;
		align-items: flex-start;
		gap: 8px;
	}
}

/* Nav link hover/focus — underline matches the rest of the site's link
 * hover convention (2 px thick, 4 px offset). `!important` is required
 * because the links set `text-decoration: none` as an inline style, and
 * inline styles beat pseudo-class rules without it. */
.rh-desktop-link:hover,
.rh-desktop-link:focus-visible,
.rh-mobile-link:hover,
.rh-mobile-link:focus-visible {
	text-decoration: underline !important;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.rh-desktop-link:focus-visible,
.rh-mobile-link:focus-visible {
	outline: none;
}

/* ── Megamenu (full-screen overlay, generic base) ─────────────────────────────
 * Opened by the hamburger. Left brand panel (white logo + turbine, theme-
 * styled) + right panel with grouped link columns. Responsive: stacks on
 * mobile. Theme adds the turbine image + brand colours on .rh-megamenu* . */
.rh-megamenu {

	/* BELOW the sticky header (z 10000) so the persistent site header stays on
   * top with its unchanged structure (logo left, search + close right, white
   * on navy). Content is padded down 100px (HEADER_H) so the turbine + groups
   * start beneath that header rather than behind it. */
	position: fixed;
	inset: 0;
	z-index: 9990;
	display: flex;
	padding-top: 100px;
	background: var(--wp--preset--color--primary, #00354f);
	color: #fff;
	animation: rh-mega-in 0.28s ease;
}

/* Fixed logo height so the colour logo AND the swapped white variant render at
 * the SAME size — they have different intrinsic dimensions, so without this the
 * white SVG (smaller native size) rendered shrunk vs the PNG. width:auto keeps
 * each logo's own aspect ratio. */
.rh-logo {
	height: 44px;
	width: auto;
	display: block;
}

@media (max-width: 600px) {

	.rh-logo {
		height: 36px;
	}
}

/* Site-header logo flipped white while the (navy) megamenu is open. */
.rh-logo--on-dark {
	filter: brightness(0) invert(1);
}

@keyframes rh-mega-in {

	from {
		opacity: 0;
	}

	to {
		opacity: 1;
	}
}

/* Decorative brand layer — an empty hook a theme can paint into (hywer-theme
 * puts a rotating turbine watermark on `.rh-megamenu__turbine`). Absolutely
 * positioned so it is never a flex item of `.rh-megamenu` and cannot take
 * layout space; `pointer-events:none` so it never swallows a menu click. It has
 * no background of its own, so on a theme that styles neither class nothing
 * renders at all. Restored after #264 deleted the markup together with the old
 * 38% dark brand column — the column is intentionally gone, the paintable layer
 * was collateral. */
.rh-megamenu__brand {
	position: absolute;
	inset: 0;
	overflow: hidden;
	pointer-events: none;
	z-index: 0;
}

.rh-megamenu__turbine {
	position: absolute;
	inset: 0;
}

.rh-megamenu__panel {
	position: relative;
	z-index: 1;
	flex: 1;
	display: flex;
	flex-direction: column;
	padding: clamp(24px, 4vw, 56px);
	overflow-y: auto;
}

.rh-megamenu__top {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: clamp(28px, 6vh, 56px);
}

.rh-megamenu__search,
 .rh-megamenu__close {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	background: none;
	border: none;
	color: #fff;
	cursor: pointer;
	font-family: var(--font-sans, inherit);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.07em;
	padding: 8px;
}

.rh-megamenu__groups {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
	gap: clamp(22px, 4vh, 44px) clamp(32px, 4vw, 64px);
	align-content: start;
}

.rh-megamenu__group-title {
	color: inherit;
	margin: 0 0 12px;
	font-family: var(--font-display, inherit);
	font-weight: 400;
	font-size: clamp(1.35rem, 2.2vw, 1.8rem);
	line-height: 1.1;
}

/* `inherit` so the mobile-menu text colour set in Settings → Header (applied
 * inline on .rh-megamenu) cascades to titles + links. Unset → inherits the
 * .rh-megamenu default (#fff). The 0.78 opacity keeps the title-vs-link
 * hierarchy regardless of which colour is in play. */
.rh-megamenu__group-title a {
	color: inherit;
	text-decoration: none;
}

.rh-megamenu__links {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 7px;
}

.rh-megamenu__links a {
	color: inherit;
	opacity: 0.78;
	text-decoration: none;
	font-size: 15px;
	transition: color 0.15s ease, opacity 0.15s ease;
}

.rh-megamenu__links a:hover,
 .rh-megamenu__group-title a:hover {
	color: var(--wp--preset--color--secondary, #26b1bd);
	opacity: 1;
}

@media (max-width: 860px) {

	.rh-megamenu {
		flex-direction: column;
	}

	.rh-megamenu__groups {
		grid-template-columns: 1fr;
		gap: 20px;
	}
}

/*
 * Admin-bar offset — WP adds html{margin-top:46px} on mobile (32px desktop)
 * when the admin bar is visible. The react header uses position:absolute;top:0
 * relative to the template-part wrapper (also absolute from viewport top).
 * Offset it downward so it clears the fixed admin bar for logged-in admins.
 * Regular site visitors never see the admin bar, so top:0 is correct for them.
 */
body.admin-bar .site-header-react {
	top: 46px !important;
}

@media (min-width: 782px) {

	body.admin-bar .site-header-react {
		top: 32px !important;
	}
}

/* Ensure nothing from the OLD WP core navigation blocks interferes */
.site-header .wp-block-navigation__responsive-container-close,
.site-header .wp-block-navigation__responsive-container-open,
.react-header-live-wrapper .wp-block-navigation__responsive-container-close,
.react-header-live-wrapper .wp-block-navigation__responsive-container-open {
	display: none !important;
}

/* ── Hide default post title only on the FRONT PAGE (hero has its own h1).
   Inner pages keep the post title visible unless a page-header block
   handles the title role — that's scoped inline with page-header styles. */
body.home .wp-block-post-title {
	display: none !important;
}

/* ── React header — respect prefers-reduced-motion ────────────────────────────
 * The header's nav links, dropdown arrow, dropdown items, and mobile toggle
 * carry inline `transition: …` styles from view.tsx. There's no clean way
 * to wrap inline styles in a media query from JS, so kill every transition
 * and animation inside the header's subtree when the user prefers reduced
 * motion. `!important` is necessary to defeat the inline transition decls. */
@media (prefers-reduced-motion: reduce) {

	.site-header-react,
	.site-header-react *,
	.site-header-react *::before,
	.site-header-react *::after,
	.react-header-live-wrapper,
	.react-header-live-wrapper *,
	.react-header-live-wrapper *::before,
	.react-header-live-wrapper *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Hero block ───────────────────────────────────────────────────────────── */
.cb-hero {
	background: var(--cb-hero-bg, var(--cb-primary, #00486a));

	/* PHP sets --hero-minh: 100vh (mobile default) */
	min-height: var(--hero-minh, var(--cb-hero-minh, 100vh));
	max-width: 2560px;
	margin-inline: auto;
}

/* Laptop / large screens → 80 vh */
@media (min-width: 1024px) {

	.cb-hero {
		--cb-hero-minh: 80vh;
	}
}

.cb-hero-overlay {
	opacity: var(--overlay-opacity, var(--cb-overlay-opacity, 0.4));
}

/*
 * Permanent top vignette — darkens the header zone (≈220 px) so white
 * logo + nav stay readable regardless of what the video shows at that moment.
 * Sits above the main overlay (z-10) but below text content (z-20).
 */
.cb-hero::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 220px;
	background: linear-gradient(to bottom, rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0) 100%);
	z-index: 11;
	pointer-events: none;
}

.cb-hero h1,
.cb-hero p {

	/* Stronger, softer shadow so white hero text stays legible over busy
   * photography (e.g. the hi-vis tunnel imagery on Karriere). */
	text-shadow: 0 2px 14px rgba(0, 0, 0, 0.42);
}

/* When the hero carries a bottom ingress band, lay the hero out as a column:
 * the content area (.cb-hero__main) flexes to fill the space above the band and
 * keeps its vertical alignment, then the ingress flows AFTER it. This pins the
 * ingress to the bottom while guaranteeing it can never overlap the heading —
 * no matter how many lines the heading or the ingress run to. (The old fixed
 * `padding-bottom` reserve couldn't track a 2-line heading + multi-line ingress
 * and let them collide.) Scoped to --has-lead so plain heroes are untouched. */
.cb-hero--has-lead {
	flex-direction: column;
	flex-wrap: nowrap;
}

.cb-hero--has-lead > .cb-hero__main {
	flex: 1 1 auto;
	display: flex;
	flex-direction: column;
	justify-content: center; /* default valign = centre */
}

/* Map the hero's vertical-align hooks onto the now-column content area. */
.cb-hero--has-lead.items-start > .cb-hero__main {
	justify-content: flex-start;
}

.cb-hero--has-lead.items-end > .cb-hero__main {
	justify-content: flex-end;
}

.cb-hero--has-lead > .cb-hero__lead-wrap {
	position: static; /* in normal flow at the bottom, never overlapping */
	flex: 0 0 auto;
}

/* Hero background cluster — grouped, compact controls inside the full-width
 * top band. Groups sit side by side and wrap to a second row when crowded; a
 * thin divider separates each labelled group. */
.cb-hero__bg-group {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding-right: 16px;
	border-right: 1px solid rgba(255, 255, 255, 0.16);
}

.cb-hero__bg-group--last {
	padding-right: 0;
	border-right: 0;
}

.cb-hero__bg-group-label {
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.07em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.6);
}

.cb-hero__bg-group-row {
	display: flex;
	flex-wrap: wrap;

	/* Baseline-align controls onto ONE line: short chips sit on the same bottom
   * edge as taller controls that carry their own label (Plassering / Størrelse
   * / Synlighet), so a group never reads as a jumble of mismatched heights. */
	align-items: flex-end;
	gap: 8px;
}

/* Solid-color auto-hero (no featured image) doesn't need the shadow —
 * on a flat navy surface it reads as a visible smudge below each letter,
 * worst on Fraunces's hooked glyphs (f, g, B). Only keep the shadow when
 * the hero actually has a background image/video that makes unshadowed
 * text hard to read. */
.cb-page-auto-hero:not(.cb-page-auto-hero--has-media) h1,
.cb-page-auto-hero:not(.cb-page-auto-hero--has-media) p {
	text-shadow: none;
}

.cb-hero h1 {
	word-break: keep-all;
	hyphens: none;
}

/* ── Page Auto Hero content column ─────────────────────────────────────────
 *
 * The auto-hero section is always alignfull (it's the branded surface that
 * extends edge-to-edge behind the header), but its INNER content must share
 * a column with the post-content group below. page.html sets post-content
 * to contentSize 720 / wideSize 1200, so the h1 sits inside the same
 * 720-centered-within-1200 rail. Admins editing a plain-text page see the
 * title and the first paragraph sharing the exact same left edge, which
 * reads as one continuous document column rather than a wide-title-over-
 * narrow-content mismatch.
 *
 * If `styrk-theme/templates/page.html` ever changes its contentSize or
 * wideSize, keep these values in sync so the column continues to align.
 */

/* Clear the absolute FSE header.
 * The header template-part is position:absolute;height:0 (see
 * styrk-theme/style.css) so it floats above siblings. The auto-hero,
 * being the next element in page.html, starts at viewport y=0. With
 * flex-center on the section and short h1s this was fine (content
 * naturally landed below the header). With long titles that wrap to
 * two+ lines the stack grew tall enough that flex-center pushed the
 * top of the stack (the eyebrow) behind the header. Explicit top
 * padding reserves the header's height so the flex-center happens
 * within the remaining box — eyebrow never hides. */
.cb-page-auto-hero {
	padding-top: clamp(108px, 14vh, 136px);
	padding-bottom: clamp(32px, 6vh, 56px);
}

.cb-page-auto-hero__wrap {
	width: 100%;
	max-width: var(--cb-content-max, 1280px);
	margin-inline: auto;
	padding-inline: 24px;  /* matches .wp-block-post-content side padding */
	box-sizing: border-box;
}

.cb-page-auto-hero__inner {
	width: 100%;
	max-width: 720px;
	margin-inline: auto;
}

/* Section eyebrow on the auto-hero. Overrides the global .cb-eyebrow
 * default (navy text, invisible on a navy hero bg). Accent orange sits
 * on every hero background we produce at 4.5:1+ — tested against the
 * Logofarge navy fallback AND admin-picked featured image overlays.
 * Lives above the h1 with a small bottom margin so it reads as a
 * kicker, not part of the heading.
 *
 * Selector uses the compound form so it outranks the single-class
 * `.cb-eyebrow` rule defined later in the cascade (specificity 0,2,0
 * beats 0,1,0). Without this, the global rule wins and the eyebrow
 * renders navy — invisible on the navy hero bg. */
.cb-eyebrow.cb-page-auto-hero__eyebrow {
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	margin: 0 0 16px;
}

/* ── Breadcrumbs block ───────────────────────────────────────────────────
 * Placeable block (styrk-blocks/breadcrumbs) typically sitting just
 * below the hero. Low-weight visual — the job is to orient the reader,
 * not dominate the page. Uses admin-picked color via standard block
 * color controls when set (has-background / has-text-color), otherwise
 * defaults to muted body-color on surface.
 */
.cb-breadcrumbs {
	font-size: 14px;
	line-height: 1.4;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 72%, transparent);
}

.cb-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	list-style: none;
	margin: 0;
	padding: 0;
}

.cb-breadcrumbs__item a {
	color: inherit;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.15s, border-color 0.15s;
}

.cb-breadcrumbs__item a:hover,
.cb-breadcrumbs__item a:focus-visible {
	color: var(--cb-primary, #00486a);
	border-bottom-color: currentcolor;
}

.cb-breadcrumbs__item--current span {
	color: var(--cb-primary, #00486a);
	font-weight: 500;
}

.cb-breadcrumbs__sep {
	opacity: 0.5;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

/* When a breadcrumb text colour is set (in-canvas chip), make the whole trail
 * follow it — links already inherit, but the current crumb + hover are
 * hardcoded to the primary, so opt them into the chosen colour too. */
.cb-breadcrumbs--colored .cb-breadcrumbs__item--current span,
.cb-breadcrumbs--colored .cb-breadcrumbs__item a:hover,
.cb-breadcrumbs--colored .cb-breadcrumbs__item a:focus-visible {
	color: inherit;
}

@media (max-width: 480px) {

	.cb-breadcrumbs {
		font-size: 13px;
	}
}

/* ── Media Grid ───────────────────────────────────────────────────────────── */

/* Horizontal breathing room so cells never bleed to the viewport edge */
.cb-media-grid__inner {
	padding-inline: 16px;
}

/* Tablet + mobile: cap at 2 columns regardless of the column setting */
@media (max-width: 1023px) {

	.cb-media-grid__inner {
		grid-template-columns: repeat(2, 1fr) !important;
	}
}

/* Phones: stack to a single column. The 2-column tablet layout falls
   apart at < 480px — the cells get small enough that detail is lost,
   and an odd item count (e.g. 3) leaves a half-empty trailing row that
   reads as a bug. One column per row also lets each photo command the
   viewport for a moment, which fits the editorial feel of the rest of
   the home page better. */
@media (max-width: 480px) {

	.cb-media-grid__inner {
		grid-template-columns: 1fr !important;
		padding-inline: 16px;
	}
}

/* Play overlay — shown on non-autoplay video cells. Radial darkening behind
 * the icon for contrast against bright or busy first frames. */
.cb-media-grid__play {
	position: absolute;
	inset: 0;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 0;
	padding: 0;
	margin: 0;
	background:
 radial-gradient(circle at center, rgba(0, 0, 0, 0.45) 0%, rgba(0, 0, 0, 0.2) 55%, rgba(0, 0, 0, 0.05) 100%);
	cursor: pointer;
	transition: background 0.2s ease, opacity 0.2s ease;
}

.cb-media-grid__play:hover,
.cb-media-grid__play:focus-visible {
	background:
 radial-gradient(circle at center, rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.3) 55%, rgba(0, 0, 0, 0.1) 100%);
	outline: none;
}

.cb-media-grid__play svg {
	width: clamp(48px, 12%, 80px);
	height: auto;
	filter: drop-shadow(0 2px 10px rgba(0, 0, 0, 0.45));
	transition: transform 0.18s ease;
}

.cb-media-grid__play:hover svg,
.cb-media-grid__play:focus-visible svg {
	transform: scale(1.08);
}

.cb-media-grid__play.is-hidden {
	display: none;
}

/* ── Media-grid lightbox ──────────────────────────────────────────────────── */

/* Transparent click target over each linkless image cell. */
.cb-media-grid__zoom {
	position: absolute;
	inset: 0;
	z-index: 5;
	margin: 0;
	padding: 0;
	border: 0;
	background: transparent;
	cursor: zoom-in;
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
}

.cb-media-grid__zoom:focus-visible {
	outline: 3px solid #fff;
	outline-offset: -3px;
}

.cb-lightbox {
	position: fixed;
	inset: 0;
	z-index: 2147483000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: clamp(12px, 3vw, 40px);
}

.cb-lightbox[hidden] {
	display: none;
}

.cb-lightbox__backdrop {
	position: absolute;
	inset: 0;
	background: rgba(10, 12, 18, 0.92);
	cursor: zoom-out;
	animation: cb-lightbox-fade 0.18s ease-out;
}

.cb-lightbox__dialog {
	position: relative;
	z-index: 1;
	display: flex;
	align-items: center;
	justify-content: center;
	max-width: min(1200px, 100%);
	max-height: 100%;
}

.cb-lightbox__figure {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 12px;
	max-width: 100%;
	max-height: 100%;
}

.cb-lightbox__img {
	display: block;
	max-width: 100%;
	max-height: calc(100vh - clamp(24px, 6vw, 80px) - 40px);
	width: auto;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
	border-radius: 4px;
	box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5);
	animation: cb-lightbox-zoom 0.2s ease-out;
}

.cb-lightbox__caption {
	margin: 0;
	max-width: 70ch;
	color: rgba(255, 255, 255, 0.85);
	font-size: 14px;
	line-height: 1.5;
	text-align: center;
}

.cb-lightbox__caption[hidden] {
	display: none;
}

.cb-lightbox__counter {
	position: absolute;
	top: -34px;
	left: 0;
	color: rgba(255, 255, 255, 0.7);
	font-size: 13px;
	letter-spacing: 0.04em;
	font-variant-numeric: tabular-nums;
}

/* Close + prev/next controls */
.cb-lightbox__close,
.cb-lightbox__nav {
	position: absolute;
	display: flex;
	align-items: center;
	justify-content: center;
	border: 1px solid rgba(255, 255, 255, 0.25);
	background: rgba(0, 0, 0, 0.45);
	color: #fff;
	cursor: pointer;
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	transition: background 0.15s ease, transform 0.15s ease;
}

.cb-lightbox__close:hover,
.cb-lightbox__nav:hover {
	background: rgba(0, 0, 0, 0.7);
}

.cb-lightbox__close:focus-visible,
.cb-lightbox__nav:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

.cb-lightbox__close {
	top: -8px;
	right: -8px;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	font-size: 26px;
	line-height: 1;
}

.cb-lightbox__nav {
	top: 50%;
	transform: translateY(-50%);
	width: 52px;
	height: 52px;
	border-radius: 50%;
	font-size: 30px;
	line-height: 1;
}

.cb-lightbox__nav[hidden],
.cb-lightbox__counter[hidden] {
	display: none;
}

.cb-lightbox__prev {
	left: clamp(-8px, -3vw, -64px);
}

.cb-lightbox__next {
	right: clamp(-8px, -3vw, -64px);
}

@media (max-width: 640px) {

	.cb-lightbox__prev {
		left: 4px;
	}

	.cb-lightbox__next {
		right: 4px;
	}
}

@keyframes cb-lightbox-fade {

	from {
		opacity: 0;
	}
}

@keyframes cb-lightbox-zoom {

	from {
		opacity: 0;
		transform: scale(0.97);
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-lightbox__backdrop,
	.cb-lightbox__img {
		animation: none;
	}

	.cb-lightbox__close,
	.cb-lightbox__nav {
		transition: none;
	}
}

/* ── CTA section ──────────────────────────────────────────────────────────── */
.cb-cta-section {
	border-radius: var(--cb-section-radius, 0);
}

.cb-cta-btn {
	border-radius: var(--cb-btn-radius, 8px);
	background-color: var(--cb-btn-bg);
}

/* On narrow viewports stacked CTAs should fill the column instead of
   floating mid-width. Centers the label/icon so the button still reads
   as a button, not a banner. */
@media (max-width: 640px) {

	.cb-cta-btn,
	.cb-hero .cb-cta-btn {
		width: 100%;
		max-width: 100%;
		justify-content: center;
	}
}

.cb-cta-body {
	color: var(--wp--preset--color--secondary, #64748b);
}

.cb-cta-section.cb-cta-accent .cb-cta-body {
	color: inherit;
	opacity: 0.9;
}

.cb-cta-section.has-text-color .cb-cta-body {
	color: inherit;
	opacity: 1;
}

/* ── WP block text color — let it cascade into semantic text utilities ─────
   When the editor sets a block-level text colour WP adds has-text-color and
   an inline color style on the wrapper.  Our Tailwind utilities (.text-*)
   have explicit CSS rules that would otherwise win on child elements.
   These overrides restore the expected behaviour. */
.has-text-color .text-primary,
.has-text-color .text-secondary {
	color: inherit;
}

.has-text-color h1,
.has-text-color h2,
.has-text-color h3,
.has-text-color h4,
.has-text-color p {
	color: inherit;
}

/* ── Rich text body ───────────────────────────────────────────────────────── */
.cb-rich-text-body > p {
	margin-top: 0;
	margin-bottom: 0;
}

.cb-rich-text-body > p + p {
	margin-top: 1rem;
}

.cb-rich-text-body > ul,
.cb-rich-text-body > ol {
	margin-top: 0.5rem;
	padding-left: 1.5rem;
}

.cb-rich-text-body a {
	color: var(--wp--preset--color--secondary, #0084af);
}

/* ── Logo strip ───────────────────────────────────────────────────────────── */
.cb-logo-strip {
	padding: clamp(2.5rem, 5vw, 3.5rem) 0;
	background: var(--wp--preset--color--surface, var(--cb-surface));
	border-top: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
	border-bottom: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
	overflow: hidden;
}

.cb-logo-strip__eyebrow {
	text-align: center;
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cb-secondary);
	margin: 0 0 32px;
}

@media (min-width: 769px) {

	.cb-logo-strip__eyebrow {
		font-size: 16px;
	}
}

@media (min-width: 1025px) {

	.cb-logo-strip__eyebrow {
		font-size: 18px;
	}
}

.cb-logo-strip__viewport {
	overflow: hidden;
	mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
	-webkit-mask-image: linear-gradient(to right, transparent 0%, #000 12%, #000 88%, transparent 100%);
}

.cb-logo-strip__track {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	width: -moz-max-content;
	width: max-content;

	/* The block writes `--cb-logo-strip-duration:Ns` inline from its Speed
     setting; 32s remains the legacy default for blocks that never had it set. */
	animation: cb-logo-marquee var(--cb-logo-strip-duration, 32s) linear infinite;
}

.cb-logo-strip__track:hover {
	animation-play-state: paused;
}

.cb-logo-strip__list {
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: clamp(48px, 6vw, 88px);
	list-style: none;
	margin: 0;
	padding: 0 clamp(24px, 3vw, 44px);
	flex-shrink: 0;
}

.cb-logo-strip__item {
	flex-shrink: 0;
	display: flex;
	align-items: center;
}

.cb-logo-strip__img {

	/* Box logos in a fixed range of widths and let object-fit:contain
   * scale the SVG proportionally inside. SVGs uploaded without
   * explicit width/height attributes (only viewBox) compute as
   * naturalWidth: 0 in <img> context, so width:auto collapses to
   * 0px. Bounding the width here keeps every logo visible regardless
   * of how the source SVG was authored.
   */
	width: clamp(80px, 12vw, 160px);
	height: clamp(40px, 5vw, 64px);
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: center;
	   object-position: center;
	display: block;
	flex-shrink: 0;
	transition:
		filter 0.3s ease,
		opacity 0.3s ease;
}

/* Black silhouette tint: knock the logos to pure black using
   filter:brightness(0). True black, not a grayscale fade — sharper read
   on light brand bands. Hover restores brightness. */
.cb-logo-strip__img--black {
	filter: brightness(0);
	opacity: 0.72;
}

.cb-logo-strip__img--black:hover {
	filter: none;
	opacity: 1;
}

/* White tint: knock the logos to pure white silhouettes for use on dark
   brand bands (where coloured logos can't read). Hover restores brightness. */
.cb-logo-strip__img--white {
	filter: brightness(0) invert(1);
	opacity: 0.72;
}

.cb-logo-strip__img--white:hover {
	opacity: 1;
}

/* Legacy grayscale class — kept so blocks saved before the 'black' tint
   landed continue to render. New tints use --black above. */
.cb-logo-strip__img--gs {
	filter: grayscale(1);
	opacity: 0.55;
}

.cb-logo-strip__img--gs:hover {
	filter: grayscale(0);
	opacity: 1;
}

@keyframes cb-logo-marquee {

	from {
		transform: translateX(0);
	}

	to {
		transform: translateX(-50%);
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-logo-strip__track {
		animation: none;
		flex-wrap: wrap;
		width: auto;
		justify-content: center;
		padding: 0 clamp(16px, 3vw, 40px);
	}
}

/* ── Contact page layout ─────────────────────────────────────────────────── */

/* Two-row layout:
     row 1 = header (eyebrow + heading + subheading) spans full width
     row 2 = body: form column + info column, evenly placed
   On mobile the body stacks; on ≥768px it's a 2-column grid. */
.contact-layout {

	/* Mirror the react-header rail (same max-width + side-padding vars +
   * border-box) so the contact block starts/ends on the header's lines.
   * Falls back to 1440/24. */
	max-width: var(--cb-content-max, 1280px);
	margin: 0 auto;

	/* Only horizontal padding here — the section wrapper (.block-contact)
   * already supplies vertical padding via .py-section. Stacking both
   * blew the section past one viewport height. */
	padding: 0 var(--cb-header-side-pad, var(--cb-rail, 24px));
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	gap: clamp(1.5rem, 3vw, 2.5rem);
}

.contact-layout__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	max-width: 780px;  /* Keep heading + subheading at comfortable reading width */
}

/* Optional full-width rule between the header and the two columns. Colour +
   thickness come inline from the block; unset colour = a subtle hairline in the
   section text colour. */
.contact-layout__divider {
	width: 100%;
	margin: 1.5rem 0 2rem;
	border: 0;
	border-top: 1px solid currentcolor;
	opacity: 0.18;
}

.contact-layout__cols {
	display: grid;
	grid-template-columns: 1fr;
	gap: 3rem;
}

/* Info-only mode (Show form = off): the form column isn't rendered at all, so
   the grid collapses to a single column at every breakpoint. */
.contact-layout__cols--info-only {
	grid-template-columns: 1fr !important;
}

@media (min-width: 768px) {

	.contact-layout__cols {
		grid-template-columns: 1fr 1fr;

		/* Zero gap so columns touch in the centre. With the gap collapsed,
     * a coloured info column meets a transparent / white form column at
     * a single seam — no narrow strip of page bg leaking between them.
     * Each column's own padding handles internal breathing room. */
		gap: 0;
		align-items: stretch;
	}

	.contact-form-col,
	.contact-info-col {
		display: flex;
		flex-direction: column;
	}

	.contact-form-col > .contact-form,
	.contact-info-col > .contact-info {
		flex: 1;  /* Inner content stretches to fill the equalized column. */
	}

	/* Info column content stays top-aligned so its first line sits at the
   * same Y as the form's first field — a common pattern that reads as
   * "two columns side by side", not "form on the left, floating bio on
   * the right". */
}

/* When a column has a custom `color:` inline (user picked a text color),
   force every descendant to inherit it — otherwise the explicit color rules
   on `.contact-info__label`, `.contact-info__address`, `.contact-info__list a`,
   etc. would win and the user's choice wouldn't visually apply.
   The submit button is explicitly excluded so its admin-picked text colour
   keeps showing through (it sits inside .contact-form-col but is meant to
   contrast against the column's text colour). */
.contact-form-col[style*="color:"] *:not(.contact-form__submit):not(.contact-form__submit *),
.contact-info-col[style*="color:"] * {
	color: inherit !important;
}

/* Full half-fill column backgrounds — when a column has an inline background,
   the colour fills its entire half of the section: edge-to-edge horizontally
   AND top-to-bottom vertically (including the section's vertical padding).
   The pseudo sits behind the column (z-index: -1, parent has position:
   relative without an explicit z-index, so the pseudo drops behind the
   column box) so the column's own padding/content/radius still render on
   top. Section overflow is clipped so the pseudo doesn't bleed into
   adjacent blocks or trigger a horizontal scrollbar. */
.contact-form-col[style*="background"],
.contact-info-col[style*="background"] {
	position: relative;
}

.contact-form-col[style*="background"]::before,
.contact-info-col[style*="background"]::after {
	content: "";
	position: absolute;
	top: -100vh;
	bottom: -100vh;
	background-color: inherit;
	pointer-events: none;
	z-index: -1;
}

/* Form col on the left: fill from its right edge all the way to viewport-left. */
.contact-form-col[style*="background"]::before {
	right: 0;
	left: -100vw;
}

/* Info col on the right: fill from its left edge all the way to viewport-right. */
.contact-info-col[style*="background"]::after {
	left: 0;
	right: -100vw;
}

.block-contact:has(.contact-form-col[style*="background"], .contact-info-col[style*="background"]) {
	overflow: hidden;
}

.contact-info {
	display: flex;
	flex-direction: column;
	gap: 1.5rem;
}

/* People list — one stacked card per person. Without this the name, role,
   phone and email spans render inline and run together
   ("Ronny JulsethDaglig leder…"). Each <li> becomes a vertical stack with
   the name leading, role muted beneath, and the contact links below. */
.contact-info__people {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.contact-info__person {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.contact-info__person-name {
	font-size: 18px;
	font-weight: 700;
	line-height: 1.3;
	color: var(--wp--preset--color--primary, var(--cb-primary));
}

.contact-info__person-role {
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--wp--preset--color--secondary, #64748b);
	margin-bottom: 4px;
}

.contact-info__person-phone,
.contact-info__person-email {
	font-size: 16px;
	color: var(--wp--preset--color--secondary, #64748b);
	text-decoration: none;
	transition: color 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.contact-info__person-phone:hover,
.contact-info__person-email:hover {
	color: var(--wp--preset--color--secondary, #0084af);
	text-decoration: underline;
}

@media (prefers-reduced-motion: reduce) {

	.contact-info__person-phone,
	.contact-info__person-email {
		transition: none;
	}
}

.contact-info__label {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;

	/* Follow the info column / section text colour so labels stay readable on
     dark sections (was hardcoded --secondary → invisible on navy). Override
     per-block via the Info-farger → Text chip. */
	color: inherit;
	margin: 0;
}

.contact-info__address {
	font-style: normal;
	font-size: 18px;
	line-height: 1.8;
	color: var(--wp--preset--color--primary, var(--cb-primary));
}

/* Optional embedded map (Google / OpenStreetMap iframe). */
.contact-info__map {
	margin-top: 24px;
	border-radius: 12px;
	overflow: hidden;
}

.contact-info__map iframe {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	border: 0;
}

/* Soft note/description box under the contact card (e.g. "Vi holder til på
   Sorgenfri…"). Tinted panel that reads as a friendly aside, not another field. */
.contact-info__note {
	margin: 20px 0 0;
	padding: 16px 18px;
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--secondary, #0084af) 8%, transparent);
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--secondary, #0084af) 18%, transparent);
	font-size: 15px;
	line-height: 1.6;
	color: var(--wp--preset--color--primary, #00486a);
}

/* "Få veibeskrivelse" directions CTA under the map. */

/* `--directions-bg` / `--directions-text` come from the block's "Veibeskrivelse"
   colour controls (inline style on the <a>). Unset = the historical primary bg +
   white label.

   `color` carries !important because a theme's generic link rule
   (`.wp-site-blocks a`, two classes) outranks this single-class selector and
   repaints the label to the primary navy — the exact colour of this button's own
   background, making the text invisible. That is the bug this rule exists to
   prevent; it must hold in the resting state too, not only on hover. */
.contact-map__directions {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: 16px;
	padding: 12px 20px;
	border-radius: var(--directions-radius, 10px);
	background: var(--directions-bg, var(--wp--preset--color--primary, #00486a));
	color: var(--directions-text, #fff) !important;
	font-weight: 600;
	font-size: 15px;
	text-decoration: none;
	transition: filter 0.18s, transform 0.18s;
}

.contact-map__directions:hover,
.contact-map__directions:focus,
.contact-map__directions:focus-visible,
.contact-map__directions:active {
	color: var(--directions-text, #fff) !important;
	text-decoration: none;
}

/* The icon is an inline SVG using stroke="currentColor", so it follows the
   label automatically — but only if nothing repaints the span. */
.contact-map__directions-icon,
.contact-map__directions-icon svg {
	color: inherit;
}

.contact-map__directions:hover {
	filter: brightness(1.08);
	transform: translateY(-1px);
}

.contact-map__directions-icon {
	display: inline-flex;
}

.contact-map__directions-icon svg {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {

	.contact-map__directions {
		transition: none;
	}

	.contact-map__directions:hover {
		transform: none;
	}
}

/* Details + map are two content-heavy columns; the generic 768px two-up split is
   far too tight for them (map, CTA and address all get squeezed). Keep the pair
   stacked through tablet and only go side-by-side from 1024px up. */
@media (max-width: 1023.98px) {

	.contact-layout__cols:has(.contact-info-col--map) {
		grid-template-columns: 1fr !important;
		gap: 2rem;
	}
}

/* Map promoted to its own column (info-only mode with a map): drop the stacking
   top-margin and let it fill the column so it sits level with the details
   column instead of being a giant full-width row. Column flow keeps the
   "Få veibeskrivelse" CTA under the map rather than beside it. */
.contact-info-col--map {
	display: flex;
	flex-direction: column;
}

.contact-info-col--map .contact-info__map {
	margin-top: 0;
	flex: 1;
	min-height: 320px;
}

.contact-info-col--map .contact-info__map iframe {
	height: 100%;
	aspect-ratio: auto;
}

.contact-info__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
}

.contact-info__list a {
	color: var(--wp--preset--color--secondary, #64748b);
	text-decoration: none;
	font-size: 18px;
	transition: color 0.15s;
}

.contact-info__list a:hover {
	color: var(--wp--preset--color--secondary, #0084af);
	text-decoration: underline;
}

.contact-info__hours {
	font-size: 18px;
	line-height: 1.7;
	color: var(--wp--preset--color--secondary, #64748b);
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
}

/* Small label above an info group (e.g. "Åpningstider" over the hours). Carries
   the divider so the group below it doesn't double up its own border. */
.contact-info__group-heading {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #00486a);
	margin: 0;
	padding-top: 16px;
	border-top: 1px solid var(--wp--preset--color--muted, var(--cb-muted));
}

.contact-info__group-heading + .contact-info__hours {
	padding-top: 4px;
	border-top: 0;
}

/* Contact form */
.contact-form {
	display: flex;
	flex-direction: column;
	gap: 2rem;
}

.contact-form__header {
	display: flex;
	flex-direction: column;
	gap: 0.5rem;
	margin: 0 0 0.5rem;
}

.contact-form__eyebrow {
	display: inline-block;
	align-self: flex-start;
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5833c);
	background: rgba(245, 131, 60, 0.1);
	padding: 4px 10px;
	border-radius: 999px;
	margin: 0 0 4px;
}

.contact-form__heading {
	font-size: clamp(1.75rem, 2.5vw, 2.25rem);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.015em;
	color: var(--wp--preset--color--primary, var(--cb-primary));
	margin: 0;
}

.contact-form__subheading {
	font-size: 1.125rem;
	line-height: 1.6;
	color: var(--wp--preset--color--secondary, #64748b);
	margin: 0;
}

.contact-form__row {
	display: flex;
	flex-direction: column;
	gap: 0.375rem;
}

.contact-form__label {
	font-size: 14px;
	font-weight: 700;

	/* Inherit the form column / section text colour (readable on dark sections);
     override via the Skjema-farger → Text chip. Was hardcoded --secondary. */
	color: inherit;
	letter-spacing: 0.08em;
	text-transform: uppercase;
}

.contact-form__input {
	width: 100%;
	padding: 14px 0;
	border: none;
	border-bottom: 2px solid var(--wp--preset--color--muted, var(--cb-muted));
	border-radius: 0;
	font-size: 18px;
	font-family: inherit;
	color: var(--wp--preset--color--primary, var(--cb-primary));
	background: transparent;
	transition: border-bottom-color 0.2s;
	outline: none;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
}

.contact-form__input::-moz-placeholder {

	/* Follow the form column's text colour so an admin-picked dark text on
   * a light bg gets a faded-dark placeholder, not a fixed pale teal that
   * looks broken on light columns. */
	color: currentcolor;
	opacity: 0.45;
	font-weight: 400;
}

.contact-form__input::placeholder {

	/* Follow the form column's text colour so an admin-picked dark text on
   * a light bg gets a faded-dark placeholder, not a fixed pale teal that
   * looks broken on light columns. */
	color: currentcolor;
	opacity: 0.45;
	font-weight: 400;
}

.contact-form__input:focus {
	border-bottom-color: var(--wp--preset--color--secondary, #0084af);
}

.contact-form__textarea {
	resize: vertical;
	min-height: 96px;
}

/* `--submit-bg` / `--submit-text` are inline-style overrides set from the
   editor; they fall through to the theme defaults when not provided.
   Using CSS vars rather than plain `background:`/`color:` means the :hover
   state can lean on the same variables (via filter brightness) instead of
   fighting the user's inline color. */
.contact-form__submit {
	align-self: flex-start;
	padding: 16px 40px;
	background: var(--submit-bg, var(--wp--preset--color--primary, var(--cb-primary)));
	color: var(--submit-text, #fff);
	font-size: 18px;
	font-weight: 600;
	font-family: inherit;
	border: none;
	border-radius: 4px;
	cursor: pointer;
	letter-spacing: 0.03em;
	margin-top: 0.5rem;
	transition:
		filter 0.2s,
		transform 0.15s;
}

.contact-form__submit:hover {
	filter: brightness(0.92);
	transform: translateY(-2px);
}

.contact-form__submit:active {
	filter: brightness(0.85);
	transform: translateY(0);
}

/* Embedded-form submit buttons — when the form column holds a pasted shortcode
   form (Forminator, Contact Form 7, WPForms, Gravity Forms, or any plain
   submit) instead of our native form, that form's button isn't
   `.contact-form__submit`, so the editor's Button BG / Button text controls
   wouldn't reach it. The colours are exposed as `--submit-bg` / `--submit-text`
   on `.contact-form-col`; mirror the native button's look onto the embedded
   submit button here. `!important` is required to beat the form plugins' own
   button stylesheets. Scoped to actual submit controls so it never touches a
   form's secondary buttons (e.g. a file-upload "Choose files"). */

/* Forminator renders its label inside a <span> — `<button><span>Send inn</span>`
   — and its own stylesheet colours that span:

     .forminator-ui.forminator-custom-form .forminator-button.forminator-button-submit span
                    ^ 4 classes + element = (0,4,1), and it carries !important

   Setting `color` on the button never reaches the text: the button repaints, the
   label does not, and a matching bg/label pair renders as a blank coloured bar.

   Forcing the span to inherit is right, but `!important` alone does not win —
   when two declarations are both `!important`, specificity decides. The
   selector below therefore repeats `.contact-form-col` four times, giving
   (0,5,1), one class above Forminator's rule. Repeating a class is the standard
   way to raise specificity without an id or an inline style, and it keeps the
   rule readable: nothing about *what* it matches changes, only how loudly. */
.contact-form-col.contact-form-col.contact-form-col.contact-form-col :is(
.forminator-button-submit,
.wpcf7-submit,
.wpforms-submit,
.gform_button,
button[type="submit"],
input[type="submit"]
) span {
	color: inherit !important;
}

/* Same specificity story as the span rule above: Forminator's own button rule is
   (0,4,0) with !important, so a (0,2,0) selector loses even carrying !important
   itself. Repeat the column class to reach (0,5,0). */
.contact-form-col.contact-form-col.contact-form-col.contact-form-col :is(
.forminator-button-submit,
.wpcf7-submit,
.wpforms-submit,
.gform_button,
button[type="submit"],
input[type="submit"]
) {
	background: var(--submit-bg, var(--wp--preset--color--primary, var(--cb-primary))) !important;
	color: var(--submit-text, #fff) !important;
	padding: 16px 40px;
	font-size: 18px;
	font-weight: 600;
	font-family: inherit;
	border: none !important;
	border-radius: 4px !important;
	cursor: pointer;
	letter-spacing: 0.03em;
	transition:
		filter 0.2s,
		transform 0.15s;
}

.contact-form-col :is(
.forminator-button-submit,
.wpcf7-submit,
.wpforms-submit,
.gform_button,
button[type="submit"],
input[type="submit"]
):hover {
	filter: brightness(0.92);
	transform: translateY(-2px);
}

/* ── Footer ───────────────────────────────────────────────────────────────────
 * Global footer: full-width navy anchor at every page bottom. Refactored
 * against the design system — palette via tokens (not raw teal, which was
 * failing WCAG AA at 1.9:1 on navy), Inter type scale, section-rhythm
 * padding, Feather focus rings, prefers-reduced-motion killswitch.
 * ------------------------------------------------------------------------- */
.site-footer {

	/* Settings → Footer → Appearance feeds --cb-footer-bg / --cb-footer-text
   * (a chosen theme-palette colour). Unset falls back to the historical navy
   * bar + white-at-85 body text. */
	background: var(--cb-footer-bg, var(--wp--preset--color--primary, var(--cb-primary, #00486a)));

	/* Text colour defaults to white-at-85 for body copy; headings + links
   * opt into full white, muted bottom-bar opts to white-at-70. All three
   * levels verified ≥ 4.5:1 against the navy primary. */
	color: var(--cb-footer-text, rgba(255, 255, 255, 0.85));

	/* `position: relative` + `overflow: hidden` set up the flare below.
   * Children get z-index:1 so they sit above the gradient. */
	position: relative;
	overflow: hidden;
}

/* Subtle accent-coloured radial flare in the top-right — mirrors the
 * effect on .wp-block-styrk-blocks-split-section.has-primary-background-color.
 * Soft, blurred, low-alpha so it reads as ambient lighting, not as a shape. */
.site-footer::before {
	content: "";
	position: absolute;
	top: -30%;
	right: -15%;
	width: 60vw;
	height: 60vw;
	max-width: 800px;
	max-height: 800px;
	background:
 radial-gradient(circle, var(--wp--preset--color--accent, var(--cb-accent, #1e5bd8)), transparent 65%);
	opacity: 0.18;
	filter: blur(40px);
	pointer-events: none;
	z-index: 0;
}

.site-footer > * {
	position: relative;
	z-index: 1;
}

/* Inner content cap + horizontal padding match the react-header so the
 * two anchor bands' content edges land at the same x-coordinates across
 * the viewport — visually the page reads as one coherent frame, not a
 * "wide page, narrow footer" mismatch. Header uses 1440 + 24px padding;
 * we follow. (Per the design system, 1440 is the "wide" cap — correct
 * for full-viewport anchor bands like header/footer, distinct from the
 * 1200 reading-width cap used by prose-type content.) */
.site-footer__inner {
	max-width: var(--cb-content-max, 1280px);
	margin-inline: auto;

	/* border-box so max-width covers the 24px padding — matches react-header
   * + page-header rails for left/right alignment. */
	box-sizing: border-box;
	padding:
		clamp(4rem, 8vw, 6rem)               
    24px                      		       
    clamp(2rem, 4vw, 3rem)		;              /* bottom — slightly tighter before bar */
	display: flex;
	flex-direction: column;
	gap: clamp(2.5rem, 5vw, 4rem);
}

/* Desktop: logo column left, 3 content columns to its right */
@media (min-width: 768px) {

	.site-footer__inner {
		flex-direction: row;
		align-items: flex-start;
		gap: clamp(2.5rem, 5vw, 4rem);
	}

	/* Logo lives inside a WP shortcode wrapper — pin width at both levels so
   * column widths stay predictable regardless of whether the shortcode
   * resolver left the wrapper or inlined the anchor. */
	.site-footer__inner > .wp-block-shortcode,
	.site-footer__inner > .site-footer__logo {
		flex: 0 0 200px;
		min-width: 0;
	}
}

/* Logo treatment — white variant, or CSS-inverted colour logo as fallback. */

/* Wrapper <div> the shortcode now emits — prevents WP's wpautop from
 * auto-wrapping the inline <a> in a <p> (which was collapsing to height:0
 * when the SVG inside had no intrinsic dimensions). */
.site-footer__logo {
	flex: 0 0 auto;
	line-height: 0;            /* kill inline-element gap around the <a> */
}

.site-footer__logo-link {
	display: inline-block;

	/* Enlarged tap target with no visual change. */
	padding: 4px;
	margin: -4px;
	border-radius: 4px;

	/* Belt-and-braces: make sure the link itself reserves the logo's
   * footprint even if the inner <img> fails to report dimensions. */
	width: 208px;              /* 200 logo + 2×4 hit-target padding */
	min-height: 72px;          /* 64 logo + 2×4 hit-target padding */
}

.site-footer__logo-img {

	/* EXPLICIT size — SVGs without intrinsic width/height or viewBox
   * would render at 0×0 with the previous `width: auto; height: auto`
   * rule. Setting concrete dimensions + object-fit: contain guarantees
   * the logo always has a footprint, regardless of the uploaded asset
   * type or whether the SVG was exported with dimensions. */
	display: block;
	width: 200px;
	height: 64px;
	max-width: 100%;
	-o-object-fit: contain;
	   object-fit: contain;
	-o-object-position: left center;
	   object-position: left center;
}

.site-footer__logo-img--invert {
	filter: brightness(0) invert(1);
	opacity: 0.95;
}

/* Certification badges — the [footer_certs] shortcode.
 *
 * The shortcode shipped its markup with no stylesheet at all, which is the
 * same SVG trap documented on .site-footer__logo-img above: a badge exported
 * without intrinsic width/height has no natural size, so it stretches to fill
 * its container. In practice the "ansvarsrett" SVG rendered ~1000px tall and
 * tore the footer grid apart, squeezing the neighbouring column to a single
 * character per line. The badges must therefore carry an explicit box. */
.site-footer__certs {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 20px;
	margin-top: 8px;
}

.site-footer__cert {
	display: flex;
	line-height: 0;
}

.site-footer__cert-img {
	display: block;
	height: 56px;

	/* Cap the width too: a wide/landscape badge would otherwise be free to grow
	* without bound once the height is satisfied. */
	max-width: 150px;
	-o-object-fit: contain;
	   object-fit: contain;
}

/* Columns wrapper (3 content columns beside the logo). */
.site-footer__cols.wp-block-columns {
	flex: 1 1 0%;
	display: flex;
	flex-direction: column;
	gap: clamp(2rem, 4vw, 3.5rem);
	margin: 0;
	align-items: flex-start;
}

@media (min-width: 768px) {

	.site-footer__cols.wp-block-columns {
		flex-direction: row;
		gap: clamp(2rem, 4vw, 3.5rem);
	}
}

/* Force equal-width flex columns — neutralises any WP inline flex-basis. */
.site-footer__cols .wp-block-column {
	flex: 1 1 0%;
	min-width: 0;
}

/* ── Column headings (Kontakt / Følg oss / site name) ────────────────────
 * Design-system eyebrow spec: 14px Inter 600, UPPERCASE, 0.14em tracking,
 * pure white for maximum contrast (9.9:1 AAA on navy). 20px gap to the
 * first item in the column for clear hierarchy.
 *
 * Selectors include both `h2.*` and `p.*` variants: the hardcoded
 * "Kontakt" header is an <h2>, the shortcode-driven site-name + social
 * heading are also <h2> in v1.6+ but older markup that still emits <p>
 * (or WP block-editor previews) falls back gracefully. The tag chain
 * also raises specificity so WP's :where(.is-layout-flow) > * margin
 * reset can't swallow the bottom margin. */
.site-footer h2.site-footer__col-heading,
.site-footer p.site-footer__col-heading {
	font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 14px;
	font-weight: 600;
	line-height: 1;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--cb-footer-text, #fff);
	margin: 0 0 20px;
}

/* ── Body copy in columns ──────────────────────────────────────────────── */
.site-footer .wp-block-column p,
.site-footer .wp-block-column address {
	font-family: Inter, -apple-system, BlinkMacSystemFont, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 1.65;
	font-style: normal;
	color: var(--cb-footer-text, rgba(255, 255, 255, 0.85));   /* 6.7:1 on navy — AA */
	margin: 0;
}

.site-footer__address,
.site-footer__contact-info {
	margin-bottom: 8px;
}

.site-footer__contact-info + .site-footer__contact-info {
	margin-top: 0;
}

/* Org number sits at the bottom of the Kontakt column, visually muted —
 * regulatory context, not a contact action. The span holding the number
 * itself stays full-opacity so the digits are easy to copy.
 *
 * Specificity note: needs to outrank `.site-footer .wp-block-column p`
 * (0,3,1) above — hence the scope + element selector, otherwise that
 * rule's 16px / 0.85 opacity wins and the muted-regulatory vibe is lost.
 */
.site-footer .wp-block-column p.site-footer__org-number {
	margin: 12px 0 0;
	font-size: 13px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.6);  /* 4.6:1 on navy — AA */
	letter-spacing: 0.01em;
}

.site-footer .wp-block-column p.site-footer__org-number span {
	color: rgba(255, 255, 255, 0.85); /* same as other footer body — AA */
	font-variant-numeric: tabular-nums;
}

/* ── Links ─────────────────────────────────────────────────────────────── */
.site-footer a {
	color: inherit;                     /* inherits the surrounding opacity */
	text-decoration: none;
	border-radius: 2px;
	transition: color 0.15s, background-color 0.15s;
}

.site-footer a:hover,
.site-footer a:focus-visible {
	color: #fff;                     /* bump to full white on interaction */
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: 4px;
}

.site-footer a:focus-visible {
	outline: 2px solid var(--wp--preset--color--secondary, #0084af);
	outline-offset: 3px;
}

/* ── Bottom bar: copyright + legal nav + credits ──────────────────────── */
.site-footer__bar {
	border-top: 1px solid rgba(255, 255, 255, 0.12);
}

.site-footer__bar > .wp-block-group {

	/* Same content max + side-padding as .site-footer__inner so the
   * copyright/legal/credits row sits flush under the main footer
   * columns — no offset at the hairline divider. */
	max-width: var(--cb-content-max, 1280px);
	box-sizing: border-box;
	margin-inline: auto;
	padding: 1.25rem 24px;
	display: flex;
	flex-direction: column;
	gap: 0.75rem;
	align-items: flex-start;
	justify-content: space-between;
}

@media (min-width: 768px) {

	.site-footer__bar > .wp-block-group {
		flex-direction: row;
		align-items: center;
		gap: 1.5rem;
	}
}

.site-footer__bar p,
.site-footer__bar nav {
	font-size: 14px;
	line-height: 1.5;
	color: rgba(255, 255, 255, 0.7);   /* 5.8:1 on navy — AA */
	margin: 0;
}

/* Empty paragraph blocks left over at the end of saved page content
 * (a common Gutenberg artifact when an editor hits Enter on the last
 * block) used to add ~30px of accidental margin between the last real
 * block and the footer. They have nothing to render; collapse them. */
.wp-block-post-content > p:empty {
	display: none;
}

/* ── Long-form prose rhythm (pages / posts) ────────────────────────────────
 * The theme sets --wp--style--block-gap:0 so full-width block SECTIONS abut
 * with no gap (each section owns its padding). But that same 0 gap flattens
 * ordinary prose — a privacy page, an article — so paragraphs, headings and
 * lists ran together with no vertical spacing (the frontend looked nothing
 * like the spaced-out editor). Restore rhythm ONLY for the direct prose
 * children of the content container: block sections are <section>/<div>
 * wrappers and are deliberately excluded, so their edge-to-edge stacking is
 * unaffected. */
.entry-content > :is(p, ul, ol, dl, pre, blockquote, table, figure) {
	margin-block: 0 1.15em;
}

.entry-content > :is(h2, h3, h4, h5, h6) {
	margin-block: 1.8em 0.5em;
	line-height: 1.2;
}

.entry-content > :is(ul, ol) {
	padding-inline-start: 1.5em;
}

.entry-content > ul {
	list-style: disc;
}

.entry-content > ol {
	list-style: decimal;
}

.entry-content > :is(ul, ol) li + li {
	margin-block-start: 0.35em;
}

.entry-content > :first-child {
	margin-block-start: 0;
}

.entry-content > :last-child {
	margin-block-end: 0;
}

/* Styrk Reklame mark inline before the credits text. We use a CSS mask so
 * the source asset (black on white) inherits the footer's currentColor —
 * no need to ship a separate white variant or fight a filter chain. */
.site-footer__credits-mark-group {
	white-space: nowrap;
}

/* Start / end placement: keep the mark and the text on the same baseline
   and give the mark a little breathing room on the side it touches. The
   inline variant doesn't need either rule because the mark is already
   nested inside the .site-footer__credits-mark-group nowrap span. */
.site-footer__credits--logo-start .site-footer__credits-logo {
	margin-right: 0.5em;
	margin-left: 0;
}

.site-footer__credits--logo-end .site-footer__credits-logo {
	margin-right: 0;
	margin-left: 0.5em;
}

.site-footer__credits-logo {
	display: inline-block;
	width: 4.5em;
	height: 2.8em;
	margin-right: 0.6em;
	vertical-align: middle;
	background-color: currentcolor;
	-webkit-mask: var(--styrk-mark-img) center / contain no-repeat;
	mask: var(--styrk-mark-img) center / contain no-repeat;
}

/* Legal-nav inline list with · separators. */
.site-footer__legal {
	display: flex;
	flex-wrap: wrap;
	gap: 0 1.25rem;
}

.site-footer__legal a {
	position: relative;
	padding: 0.25rem 0;               /* bigger hit area */
}

.site-footer__legal a + a::before {
	content: "·";
	position: absolute;
	left: -0.75rem;
	top: 50%;
	transform: translateY(-50%);
	color: rgba(255, 255, 255, 0.4);
	pointer-events: none;
}

/* Reduced-motion: disable every transition inside the footer. Same pattern
 * used for the react-header killswitch. */
@media (prefers-reduced-motion: reduce) {

	.site-footer,
	.site-footer *,
	.site-footer *::before,
	.site-footer *::after {
		transition: none !important;
		animation: none !important;
	}
}

/* ── Post Excerpt block — full-width outer, 1024px inner ────────────────────
   WP's layout system generates:
     .is-layout-constrained > :where(:not(.alignfull)) { max-width: 1200px; }
   That caps the excerpt block to content-width.  We override max-width here
   so the outer wrapper fills the viewport (background bleeds edge-to-edge)
   while the inner paragraph text is centred at max 1024px.                */
.wp-block-post-excerpt {
	max-width: 100% !important; /* bust out of the 1200px content-width cap  */
	width: 100%;
	box-sizing: border-box;

	/* Remove inline horizontal padding — the inner elements carry their own  */
	padding-left: 0 !important;
	padding-right: 0 !important;
}

.wp-block-post-excerpt__excerpt,
.wp-block-post-excerpt__more-text {
	max-width: 64rem; /* 1024px */
	margin-left: auto;
	margin-right: auto;
	width: 100%;
	box-sizing: border-box;
	padding-left: clamp(1rem, 4vw, 2rem);
	padding-right: clamp(1rem, 4vw, 2rem);
}

.wp-block-post-excerpt__more-text {
	margin-top: 2rem;
}

/* ── Excerpt block: read-more CTA button ─────────────────────────────────── */

/* Matches .cb-cta-btn exactly: same size, weight, radius, shadow, hover.   */
.wp-block-post-excerpt__more-link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	padding: 0.875rem 2rem;
	border-radius: 8px;
	background: var(--wp--preset--color--accent, var(--cb-accent));
	color: var(--cb-dark-text) !important;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none !important;
	letter-spacing: 0.01em;
	line-height: 1.75; /* matches site base — gives same height as .cb-cta-btn */
	box-shadow: 0 2px 12px var(--cb-accent-28);
	transition:
		background 0.15s ease,
		box-shadow 0.15s ease,
		transform 0.15s ease;
}

.wp-block-post-excerpt__more-link:hover {
	background: var(--cb-accent);
	box-shadow: 0 4px 20px var(--cb-accent-38);
	transform: translateY(-1px);
}

/* ═══════════════════════════════════════════════════════════════════════════
   DESIGN UPLIFT — Air, Rhythm, Dividers, Polish
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Smooth scroll & selection colour ────────────────────────────────────── */
html {
	scroll-behavior: smooth;
}

::-moz-selection {
	background: var(--cb-selection-bg, #f5833c);
	color: var(--cb-selection-color, #fff);
}

::selection {
	background: var(--cb-selection-bg, #f5833c);
	color: var(--cb-selection-color, #fff);
}

/* ── Global section spacing — more generous ───────────────────────────────── */
:root {
	--cb-section-gap: clamp(5rem, 9vw, 7rem);
	--cb-section-gap-sm: clamp(3rem, 6vw, 5rem);
}

/* ── Eyebrow pill badge ───────────────────────────────────────────────────── */
.cb-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 6px;

	/* Defaults below — NO !important so the per-block eyebrow color
     attributes (eyebrowBgColor / eyebrowTextColor / eyebrowRadius)
     wired through SectionHeader's inline `style` prop can override
     them. The earlier `!important` triplet silently nuked every
     user-picked colour and pill background.
     `--cb-eyebrow-default-fg` is overridden on dark sections by the
     :where() rule below so an un-styled eyebrow reads on either bg. */
	padding: 0;
	background: none;
	color: var(--cb-eyebrow-default-fg, var(--wp--preset--color--primary, #00486a));
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	border-radius: 0;
	border: none;
	line-height: 1;

	/* Never stretch to fill parent flex container — always fit content width */
	align-self: flex-start;
	width: -moz-fit-content;
	width: fit-content;
}

/* On dark sections, an un-styled eyebrow (no explicit eyebrowTextColor)
   defaults to the accent/amber tone so it's readable on the dark band.
   Light sections keep the existing primary-color default. */
:where(.has-primary-background-color, .styrk-dark) {
	--cb-eyebrow-default-fg: var(--wp--preset--color--accent, #f0a83c);
}

/* Restore centering when inside a centered (items-center) flex column */
.items-center > .cb-eyebrow,
.items-center .cb-eyebrow {
	align-self: center;
}

/* Mobile/tablet: always center eyebrow + headings inside section headers */
@media (max-width: 1023px) {

	.cb-section-header .cb-eyebrow {
		align-self: center !important;
	}

	.cb-section-header h2,
	.cb-section-header p {
		text-align: center !important;
	}
}

@media (min-width: 769px) {

	.cb-eyebrow {
		font-size: 16px;
	}
}

@media (min-width: 1025px) {

	.cb-eyebrow {
		font-size: 18px;
	}
}

/* ── Section separators ───────────────────────────────────────────────────── */

/* Hairline rule between sections, excluding hero/logo-strip boundaries */
.cb-block-features,
.cb-block-stats,
.cb-block-rich-text,
.cb-block-split,
.cb-block-testimonial {
	position: relative;
}

.cb-block-features::before,
.cb-block-stats::before,
.cb-block-rich-text::before,
.cb-block-split::before,
.cb-block-testimonial::before {
	content: "";
	display: block;
	position: absolute;
	top: 0;
	left: clamp(1rem, 5vw, 4rem);
	right: clamp(1rem, 5vw, 4rem);
	height: 1px;
	background: linear-gradient(to right, transparent, rgba(226, 232, 240, 0.8) 20%, rgba(226, 232, 240, 0.8) 80%, transparent);
	pointer-events: none;
}

/* ── Section header — tighter leading, larger heading gap ─────────────────── */
.cb-section-header {
	margin-bottom: clamp(3rem, 5vw, 4.5rem);
}

.cb-section-header h2 {
	max-width: 24ch;
}

/* ── Feature cards ─────────────────────────────────────────────────────────── */
.cb-block-features {
	background: var(--cb-bg);
}

.cb-feature-card {
	position: relative;
	border: 1px solid rgba(226, 232, 240, 0.8);
	box-shadow: var(--cb-shadow-sm);
	transition:
		box-shadow 0.25s ease,
		transform 0.25s ease,
		border-color 0.25s ease;
	background: var(--cb-bg);
	isolation: isolate;
}

/* Gradient top accent line on each card */
.cb-feature-card::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	padding: 2px;
	background: linear-gradient(135deg, rgba(var(--cb-primary-r), var(--cb-primary-g), var(--cb-primary-b), 0), rgba(0, 132, 175, 0));
	-webkit-mask:
		linear-gradient(#fff 0 0) content-box,
		linear-gradient(#fff 0 0);
	-webkit-mask-composite: xor;
	mask-composite: exclude;
	pointer-events: none;
	transition: background 0.3s ease;
}

.cb-feature-card::after {
	content: "";
	position: absolute;
	top: 0;
	left: 1rem;
	right: 1rem;
	height: 2px;
	border-radius: 0 0 4px 4px;
	background: linear-gradient(90deg, var(--wp--preset--color--primary, #00486a), var(--wp--preset--color--muted, #5db6cf));
	opacity: 0;
	transition: opacity 0.3s ease;
}

.cb-feature-card:hover {
	box-shadow: var(--cb-shadow-md);
	transform: translateY(-3px);
	border-color: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.2);
}

.cb-feature-card:hover::after {
	opacity: 1;
}

/* Card link affordance — a visible "Les mer →" / external cue pinned to the
   bottom of a linked card so the viewer knows the card goes somewhere (and,
   for external links, that it leaves the site). The whole card is the click
   target via .cb-stretched-link, so this is a non-interactive span styled to
   read as a link. Inherits the card's text colour but tints to the brand
   accent; the card-hover state nudges it for feedback. */
.cb-feature-card__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin-top: auto;            /* push to the card's bottom edge */
	padding-top: 4px;
	font-weight: 600;
	font-size: 1rem;
	line-height: 1.3;
	color: var(--wp--preset--color--secondary, #0084af);
}

.cb-feature-card__link-icon {
	display: inline-flex;
	flex-shrink: 0;
}

.cb-feature-card__link-icon svg {
	width: 18px;
	height: 18px;
	display: block;
	transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Internal links: arrow slides right on card hover. External links: the
   external-link glyph lifts slightly — a different motion so the two read
   distinctly even before you parse the icon. */
.cb-feature-card:hover .cb-feature-card__link:not(.is-external) .cb-feature-card__link-icon svg {
	transform: translateX(3px);
}

.cb-feature-card:hover .cb-feature-card__link.is-external .cb-feature-card__link-icon svg {
	transform: translate(1px, -1px);
}

@media ( prefers-reduced-motion: reduce ) {

	.cb-feature-card__link-icon svg {
		transition: none;
	}

	.cb-feature-card:hover .cb-feature-card__link .cb-feature-card__link-icon svg {
		transform: none;
	}
}

/* ── Editor-only inline controls for feature-cards + service-list ─────────
   These class names are only emitted by edit.tsx (block editor canvas), not
   by template.php (front end), so the rules below are inert on the public
   site. Goal: per-card editing (icon, link, colours, remove) lives ON the
   card, not in the sidebar — admin doesn't have to hunt the right panel. */
.cb-feature-card__icon-slot {
	margin-bottom: 6px;
}

/* Inline controls — URL on its own row at the top, colour swatches + trash
   grouped on a second row below. The buttons share a baseline and read as
   one cluster instead of wrapping unpredictably with the URL field. */
.cb-feature-card__actions {
	margin-top: 14px;
	padding-top: 12px;
	border-top: 1px dashed rgba(0, 0, 0, 0.18);
	display: flex;
	flex-direction: column;
	gap: 8px;
	position: relative;
}

.cb-feature-card__actions-row {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
}

.cb-feature-card__url {
	width: 100%;
	min-width: 0;
	padding: 6px 10px;
	font-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	color: #1e1e1e;
}

.cb-feature-card__url:focus {
	outline: 2px solid var(--wp-admin-theme-color, #007cba);
	outline-offset: 1px;
}

/* URL + info-icon row: keeps URLInput at its natural width and floats the
   (i) tooltip trigger to the right. ItemActions stops pointer bubbling so
   the icon click doesn't engage drag-sort on the parent card. */
.cb-feature-card__url-row {
	display: flex;
	align-items: stretch;
	gap: 6px;
	width: 100%;
}

.cb-feature-card__url-row .components-base-control,
.cb-feature-card__url-row .components-base-control__field,
.cb-feature-card__url-row .block-editor-url-input {
	flex: 1 1 auto;
	margin: 0;
	min-width: 0;
}

.cb-feature-card__url-row .block-editor-url-input input[type="text"] {
	width: 100%;
	padding: 6px 10px;
	font-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	color: #1e1e1e;
}

.cb-feature-card__url-info {
	flex: 0 0 auto;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 26px;
	height: 26px;
	padding: 0;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	color: rgba(0, 0, 0, 0.55);
	cursor: help;
	transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}

.cb-feature-card__url-info:hover {
	color: var(--wp-admin-theme-color, #007cba);
	border-color: var(--wp-admin-theme-color, #007cba);
	background: rgba(0, 124, 186, 0.06);
}

.cb-feature-card__swatch,
.cb-feature-card__remove,
.cb-service-row__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 6px;

	/* Fixed height so EVERY band chip (colour swatch, radius, column-gap, remove)
     is EXACTLY the same height regardless of whether it has a dot/label — no
     more short radius/gap pills next to taller colour chips. */
	height: 32px;
	min-height: 32px;
	box-sizing: border-box;
	padding: 0 10px;
	font-size: 11px;
	font-weight: 500;
	text-transform: uppercase;
	letter-spacing: 0.04em;
	border: 1px solid rgba(0, 0, 0, 0.18);

	/* Near-opaque frosted pill + drop shadow so the chip + its label stay clearly
     visible on ANY section background (incl. dark / photo) — not a faint light
     tint that vanishes on dark sections. Shared by every colour chip. */
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
	border-radius: 4px;
	cursor: pointer;
	color: #1e1e1e;
}

/* Hover state — uses a coloured border + slightly boosted (still light)
   background, NOT a dark tint. The previous rgba(0,0,0,0.04) hover bg
   was invisible against dark sections (.has-primary-background-color
   / .styrk-dark) — the chips appeared to "disappear" on hover. The
   chip itself stays on a near-white surface regardless of section so
   the dot + label remain legible. */
.cb-feature-card__swatch:hover,
.cb-feature-card__remove:hover,
.cb-service-row__remove:hover {
	background: rgba(255, 255, 255, 1);
	border-color: var(--wp-admin-theme-color, #007cba);
	box-shadow: 0 0 0 1px var(--wp-admin-theme-color, #007cba);
}

.cb-feature-card__swatch-dot {
	display: inline-block;
	width: 14px;
	height: 14px;
	border-radius: 50%;
	border: 1px solid rgba(0, 0, 0, 0.25);
	background: transparent;
}

/* RadiusChip glyph — a small rounded-corner mark so the radius pill reads as a
   sibling of the colour swatch-dot chips (same box, same baseline). */
.cb-radius-chip__glyph {
	display: inline-block;
	width: 12px;
	height: 12px;
	border: 2px solid currentcolor;
	border-radius: 5px 0 0 0;
	border-right: 0;
	border-bottom: 0;
	opacity: 0.7;
}

.cb-feature-card__remove,
.cb-service-row__remove {
	border-color: rgba(190, 0, 0, 0.25);
	color: rgba(150, 0, 0, 0.85);
}

.cb-feature-card__remove:hover,
.cb-service-row__remove:hover {
	background: rgba(190, 0, 0, 0.06);
}

/* Service-list editor row: a 2-row grid so the inline-controls row sits
   directly under the service-name row without breaking the visual layout. */
.cb-service-row--edit {
	grid-template-columns: auto 1fr auto;
	grid-template-rows: auto auto;
}

.cb-service-row--edit .cb-service-row__lead {
	grid-row: 1;
	grid-column: 1;
}

.cb-service-row--edit .cb-service-row__name {
	grid-row: 1;
	grid-column: 2;
}

.cb-service-row--edit .cb-service-row__arr {
	grid-row: 1;
	grid-column: 3;
}

.cb-service-row__actions {
	grid-row: 2;
	grid-column: 1 / -1;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 10px 0 4px;
	border-top: 1px dashed rgba(0, 0, 0, 0.12);
	margin-top: 8px;
	position: relative;
}

.cb-service-row__url {
	flex: 1 1 200px;
	min-width: 0;
	padding: 6px 10px;
	font-size: 12px;
	border: 1px solid rgba(0, 0, 0, 0.18);
	border-radius: 4px;
	background: rgba(255, 255, 255, 0.85);
	color: #1e1e1e;
}

.cb-service-row__url:focus {
	outline: 2px solid var(--wp-admin-theme-color, #007cba);
	outline-offset: 1px;
}

/* Front-end service-row lead: number always shown; if an icon is set, it
   sits to the right of the number, separated by a thin same-colour pipe so
   they read as a paired marker. Companion themes refine the colours. */
.cb-service-row__lead {
	display: inline-flex;
	align-items: center;
	gap: 14px;
}

.cb-service-row__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
}

/* The "|" separator inherits the lead's colour — same muted tone as the
   number — so it always sits at the same visual weight. */
.cb-service-row__icon::before {
	content: "|";
	font-family: inherit;
	font-weight: 300;
	font-size: 18px;
	opacity: 0.4;
}

.cb-service-row__icon svg {
	width: 22px;
	height: 22px;
	fill: none;
}

/* Force fill:none on IconPicker preview SVGs — Gutenberg's editor-iframe
   reset and some block-editor button styles set `fill: currentColor` on
   svg children, which paints our outlined icons as solid silhouettes. */
.cb-icon-picker svg,
.cb-icon-picker svg *,
.cb-feature-card__icon-slot svg,
.cb-feature-card__icon-slot svg *,
.cb-service-row__lead svg,
.cb-service-row__lead svg * {
	fill: none !important;
}

/* …but solid (Phosphor) icons are flagged with .cb-svg-icon--fill and must
   paint with fill, not stroke. This opts them back out of the resets above
   (matched specificity, declared later → wins). Applies in editor + front. */
svg.cb-svg-icon--fill,
svg.cb-svg-icon--fill * {
	fill: currentcolor !important;
	stroke: none !important;
}

/* ── Inline "Add card / row" placeholder — dashed outline matching each
   card's shape, sits in the grid right after the last card so it's
   discoverable and shows admins exactly where the new card lands. */
.cb-feature-add {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 12px;
	width: 100%;
	font-size: 14px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.06em;

	/* Own frosted-glass panel + fixed dark text so it stays readable on ANY
     section background — including a custom dark colour set via inline style
     (which carries no .has-primary-background-color class, so the class-based
     dark-section override below never caught it = dark-on-dark). */
	color: rgba(0, 0, 0, 0.6);
	background: rgba(255, 255, 255, 0.82);
	backdrop-filter: blur(4px);
	-webkit-backdrop-filter: blur(4px);
	border: 2px dashed rgba(0, 0, 0, 0.28);
	cursor: pointer;
	transition: color 0.18s ease, border-color 0.18s ease, background 0.18s ease;
}

.cb-feature-add:hover {
	color: var(--wp-admin-theme-color, #007cba);
	border-color: var(--wp-admin-theme-color, #007cba);
	background: rgba(0, 124, 186, 0.04);
}

/* Auto-contrast for placeholders on dark sections — applies whenever the
   parent block carries a dark-surface marker (theme.json primary bg,
   the custom .styrk-dark wrapper, or any block with has-primary-background-color).
   Keeps "Legg til kort" + dashed border readable instead of dark-on-dark. */
:where(.has-primary-background-color, .styrk-dark, [class*="has-background"][class*="primary"]) {
	--cb-placeholder-fg: rgba(255, 255, 255, 0.72);
	--cb-placeholder-border: rgba(255, 255, 255, 0.35);
}

.cb-feature-add__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	border: 2px solid currentcolor;
	font-size: 18px;
	line-height: 1;
	font-weight: 500;
}

/* Card-mode: same rounded-2xl + min-height as the cards so it visually
   reserves the next slot in the grid. */
.cb-feature-add--card {
	min-height: 220px;
	border-radius: 16px;
	flex-direction: column;
	padding: 32px;
}

/* List-mode: a row-shaped placeholder, padding matches the service rows. */
.cb-feature-add--list {
	padding: 18px 4px;
	border-radius: 6px;
	margin-top: 8px;
}

/* Feature icon — brand-accent-tinted chip holding the SVG icon.
 * Colour follows the theme accent token (e.g. Hegra red), tinted via
 * color-mix so the chip stays on-brand on every site; the blue fallback
 * preserves the historic look where no accent token is defined. */
.cb-feature-icon {
	--cb-feature-icon-color: var(--wp--preset--color--accent, #0084af);
	background: color-mix(in srgb, var(--cb-feature-icon-color) 10%, transparent);
	border: 1px solid color-mix(in srgb, var(--cb-feature-icon-color) 22%, transparent);
	border-radius: 12px;
	color: var(--cb-feature-icon-color);
}

/* Paint is driven by each icon's own attributes: line icons carry
 * stroke="currentColor" fill="none"; Phosphor fill icons carry
 * fill="currentColor". So we only size the glyph here. */
.cb-feature-icon svg {
	width: 28px;
	height: 28px;
}

/* ── Call Card phone hover ──────────────────────────────────────────────────── */
.call-card:hover .call-card__phone[data-hover-bg] {
	background: var(--call-card-hover-bg);
}

/* ── Stats section ──────────────────────────────────────────────────────────── */
.cb-block-stats {
	background: var(--wp--preset--color--surface, var(--cb-surface));
}

.cb-stats-grid {
	border: 1px solid rgba(226, 232, 240, 0.9);
	border-radius: var(--cb-stats-radius, 1.5rem);
	overflow: hidden;
	background: var(--cb-bg);
}

.cb-stat {
	position: relative;
	padding: clamp(2rem, 4vw, 3.5rem) clamp(1.5rem, 3vw, 2.5rem);
}

/* Vertical dividers between stat cells */
.cb-stat + .cb-stat {
	border-top: 1px solid rgba(226, 232, 240, 0.8);
}

@media (min-width: 640px) {

	.cb-stats-grid.grid-cols-2 .cb-stat + .cb-stat,
	.cb-stats-grid.grid-cols-3 .cb-stat + .cb-stat,
	.cb-stats-grid.grid-cols-4 .cb-stat + .cb-stat {
		border-top: none;
		border-left: 1px solid rgba(226, 232, 240, 0.8);
	}
}

.cb-stat-value {
	color: var(--wp--preset--color--primary, #00486a);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.03em;
}

/* Author-selectable number size (S/M/L/XL). Sized with clamp() so each tier
 * scales smoothly AND stays inside a multi-column card — the old fixed ramp
 * (up to 132px) overflowed 4-up grids and wrapped longer values like
 * "Dale i Sunnfjord" / "650 mill.kr". S stays small enough for text values;
 * XL is the impact size. Tiers stay visibly distinct. */
.cb-stat-value[data-size="s"] {
	font-size: clamp(1.5rem, 1.4vw + 0.95rem, 2rem);
}     /* 24 → 32px */
.cb-stat-value[data-size="m"] {
	font-size: clamp(1.875rem, 1.8vw + 1.1rem, 2.625rem);
} /* 30 → 42px */
.cb-stat-value[data-size="l"] {
	font-size: clamp(2.25rem, 2.4vw + 1.2rem, 3.25rem);
}   /* 36 → 52px */
.cb-stat-value[data-size="xl"] {
	font-size: clamp(2.75rem, 3.2vw + 1.3rem, 4.25rem);
}   /* 44 → 68px */

.cb-stat-label {
	color: var(--wp--preset--color--primary, #00486a);
	font-size: 16px;
	letter-spacing: 0.01em;
}

/* ── Prev/next post navigation (single-project & any CPT single) ───────────────
 * Gives CPT singles the same adjacent-post affordance ordinary posts get.
 * Token-based so it picks up each site's brand colours; the :empty rules hide
 * the link at the first/last item where there is no adjacent project. */
.cb-post-nav {
	margin-top: clamp(2.5rem, 5vw, 4rem);
	gap: 1rem;
}

/* Style the anchor itself (not the block wrapper) so the whole button is
 * clickable. The post-navigation-link block renders <div…><a>…</a></div>. */
.cb-post-nav a {
	display: inline-flex;
	align-items: center;
	gap: 0.6em;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.13em;
	text-transform: uppercase;
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 2px;
	background: var(--wp--preset--color--secondary, #5ab4ba);
	color: var(--wp--preset--color--primary, #12364e);
	transition: filter 0.15s;
}

.cb-post-nav a:hover {
	filter: brightness(0.95);
}

/* No adjacent post → the block renders empty; don't show a bare wrapper. */
.cb-post-nav__link:empty,
.cb-post-nav .wp-block-post-navigation-link:empty {
	display: none;
}

/* ── Rich text section ──────────────────────────────────────────────────────── */
.cb-block-rich-text {
	background: var(--cb-bg);
}

/* ── Lead / ingress (className "is-lead") ─────────────────────────────────────
 * Per the Hywer design, the leading paragraph is a TRANSPARENT ingress pulled
 * up to overlap the hero ("gjennomsiktig ingress over hero-vannet") — NOT a
 * solid band below it. Mirrors `.lead` in the design mockup (hywer.css) and the
 * rule in hywer-nytt-nettside-design/BLOCKS.md. Applied wherever a
 * rich-text-section carries the `is-lead` class (front page + all subpages
 * except Kontakt). */
.cb-block-rich-text.is-lead {
	background: transparent;
	position: relative;
	z-index: 5;
	margin-top: clamp(-150px, -10vw, -90px);
	padding-top: 0;
}

/* No top hairline divider on the lead — it sits over the hero, not between
   two flat sections. */
.cb-block-rich-text.is-lead::before {
	display: none;
}

/* Bold ingress typography from the mockup's `.lead p`. */
.cb-block-rich-text.is-lead .cb-rich-text-body {
	font-weight: 700;
	color: var(--wp--preset--color--primary, #00486a);
	font-size: clamp(1.1rem, 1.7vw, 1.5rem);
	line-height: 1.5;
	max-width: 64ch;
	text-wrap: pretty;
}

.cb-rich-text-link {
	position: relative;
	padding-bottom: 2px;
	transition: gap 0.15s ease;
}

.cb-rich-text-link::after {
	content: "";
	position: absolute;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 1px;
	background: currentcolor;
	opacity: 0.3;
	transition: opacity 0.15s ease;
}

.cb-rich-text-link:hover::after {
	opacity: 1;
}

/* ── Split section ──────────────────────────────────────────────────────────── */
.cb-block-split {
	background: var(--wp--preset--color--surface, var(--cb-surface));
}

/* Reversed column order — flips the two columns visually WITHOUT swapping
   data/types. Only applies on desktop (≥1024px) where the columns are
   side-by-side (lg:flex-row); on mobile the columns stack in natural order. */
@media (min-width: 1024px) {

	.cb-split-cols.cb-split--reversed {
		flex-direction: row-reverse;
	}
}

/* Editor-only: drag-to-reorder handle on each split column. The class only
 * exists in the block editor (added in edit.tsx), so this never affects the
 * front end. Drag one column's handle onto the other column to swap them. */
.cb-split-col--draggable {
	position: relative;
}

.cb-split-col-drag {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 30;
	width: 30px;
	height: 30px;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 6px;
	border: 1px solid rgba(0, 0, 0, 0.15);
	background: rgba(255, 255, 255, 0.92);
	color: var(--cb-primary, #00486a);
	font-size: 17px;
	line-height: 1;
	cursor: grab;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.cb-split-col-drag:active {
	cursor: grabbing;
}

.cb-split-col--droptarget {
	outline: 2px dashed var(--cb-secondary, #0084af);
	outline-offset: 6px;
	border-radius: 4px;
}

.cb-split-image {
	box-shadow: var(--cb-shadow-lg);

	/* Smoother, softer hover: a gentle ease-out curve over a longer duration so
   * the lift feels calm rather than snappy. The image is a lightbox trigger
   * (see .cb-split-zoom), so the subtle scale is now an honest affordance. */
	transition:
		box-shadow 0.5s cubic-bezier(0.22, 1, 0.36, 1),
		transform 0.5s cubic-bezier(0.22, 1, 0.36, 1);
}

.cb-split-image-wrap:hover .cb-split-image {
	box-shadow: var(--cb-shadow-xl);
	transform: scale(1.02);
}

/* Zoom trigger button wrapping the split image — a transparent, full-bleed
 * button so the image opens the shared lightbox on click/Enter while keeping
 * its exact layout. zoom-in cursor signals it's clickable. */
.cb-split-zoom {
	display: block;
	width: 100%;
	padding: 0;
	border: 0;
	background: none;
	cursor: zoom-in;
}

.cb-split-zoom:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f5833c);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.cb-split-image {
		transition: none;
	}

	.cb-split-image-wrap:hover .cb-split-image {
		transform: none;
	}
}

/* ── Split section videos ───────────────────────────────────────────────────── */
.cb-split-video {
	display: block;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	border-radius: 1rem;

	/* A GPU-composited <video> with object-fit:cover does NOT clip its
   * cover-cropped frame to border-radius on its own — corners render square.
   * overflow:hidden forces the painted video to be clipped to the rounded
   * box. Kept transform-free on purpose: the reduced-motion rule below sets
   * `transform: none !important`, so a translateZ()/transform clip hack would
   * silently break for those users. */
	overflow: hidden;
	isolation: isolate;
	box-shadow: var(--cb-shadow-lg);
	transition:
		box-shadow 0.3s ease,
		transform 0.4s ease;
}

.cb-split-image-wrap:hover .cb-split-video {
	box-shadow: var(--cb-shadow-xl);
	transform: scale(1.01);
}

/* Portrait video: always visible, constrained so it never blows out the viewport */
.cb-split-video--portrait {
	aspect-ratio: 9 / 16;
	height: auto; /* override height:100% from .cb-split-video base */
	width: auto; /* override width:100%  from .cb-split-video base */
	max-width: min(340px, 90%);
	max-height: 72vh;
	margin: 0 auto;
	display: block;
}

/* On desktop the portrait video sits in a 50% column — let it breathe a bit more */
@media (min-width: 640px) {

	.cb-split-video--portrait {
		max-width: min(420px, 100%);
		max-height: 80vh;
	}
}

/* Landscape video */
.cb-split-video--landscape {
	aspect-ratio: 4 / 3;
	display: block;
	width: 100%;
}

/*
 * When BOTH portrait and landscape videos are uploaded (.cb-has-both-videos):
 * show portrait on mobile, swap to landscape on ≥640 px.
 */
.cb-has-both-videos .cb-split-video--portrait {
	display: block;
}

.cb-has-both-videos .cb-split-video--landscape {
	display: none;
}

@media (min-width: 640px) {

	.cb-has-both-videos .cb-split-video--portrait {
		display: none;
	}

	.cb-has-both-videos .cb-split-video--landscape {
		display: block;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-split-video {
		transition: none;
		transform: none !important;
	}

	.cb-split-image-wrap:hover .cb-split-video {
		transform: none;
	}
}

/* ── Split Section: body paragraph rhythm ─────────────────────────────────
 * The body wrapper is a div (not a p) so authors can include their own
 * `<p>` tags. Tighten the inter-paragraph gap so 2-3 paragraphs read as
 * one continuous text block, not as floating disconnected statements. */
.cb-split-body p {
	margin: 0 0 0.75em;
}

.cb-split-body p:last-child {
	margin-bottom: 0;
}

/* Author-controlled spacing between list items in a body list, driven by the
 * --cb-split-list-gap custom property the block sets from the "Listeavstand"
 * control. Default 0 leaves existing lists unchanged. Editor + front end. */
.cb-split-body :where(ul, ol) > li + li {
	margin-top: var(--cb-split-list-gap, 0);
}

/* The body is now InnerBlocks (core paragraph/heading/list). Make un-coloured
 * inner blocks INHERIT the wrapper colour so the body-colour chip (and the
 * section text colour) actually shows through — e.g. light text on a dark
 * section. Blocks the editor gave an explicit colour (.has-text-color) keep it.
 * Applies in the editor too (the wrapper carries the inline colour there). */
.cb-split-body p:not(.has-text-color),
.cb-split-body li:not(.has-text-color),
.cb-split-body h2:not(.has-text-color),
.cb-split-body h3:not(.has-text-color),
.cb-split-body h4:not(.has-text-color),
.cb-split-body h5:not(.has-text-color),
.cb-split-body h6:not(.has-text-color) {

	/* !important so the editor's per-block default colour can't leave one
   * paragraph dark on a dark section; per-block colours (.has-text-color) are
   * excluded above, so an explicit choice still wins. */
	color: inherit !important;
}

/* ── Split Section: employee card variant ─────────────────────────────────
 * When mediaSource = 'employee', the media side renders a card pulled
 * from the Employees CPT (photo + name + role). Looks the same as a
 * single tile from the Employee Grid block. */
.cb-split-employee-card {
	background: #fff;
	border-radius: 16px;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	border: 1px solid var(--wp--preset--color--muted, #e2e8f0);
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.06);
	width: 100%;
}

.cb-split-employee-card__photo {
	aspect-ratio: 4 / 3;
	position: relative;
	overflow: hidden;
}

.cb-split-employee-card__photo img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: top;
	   object-position: top;
}

.cb-split-employee-card__body {
	padding: 24px;
	display: flex;
	flex-direction: column;
	gap: 6px;
}

.cb-split-employee-card__name {
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 1.5rem;
	font-weight: 600;
	margin: 0;
	color: var(--wp--preset--color--primary, #0f1b2d);
	line-height: 1.2;
}

.cb-split-employee-card__role {
	font-size: 1rem;
	color: rgba(15, 27, 45, 0.72);
	margin: 0;
	line-height: 1.45;
}

/* ── Split Section: floating stat badge ───────────────────────────────────
 * Optional dark card pinned bottom-left of the media side. Used for
 * "20+ år", "100+ prosjekter", etc. */
.cb-split-image-wrap {
	position: relative;
}

.cb-split-stat-badge {
	position: absolute;
	left: 24px;
	bottom: 24px;
	background: var(--wp--preset--color--primary, #0f1b2d);
	color: #fff;
	padding: 20px 24px;
	border-radius: 8px;
	min-width: 180px;

	/* Never wider than the media it sits on (24px gutter each side) so the
     card + its text stay inside the image instead of breaking beyond it. */
	max-width: min(240px, calc(100% - 48px));
	box-sizing: border-box;
	overflow-wrap: anywhere;
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.18);
	z-index: 2;
	pointer-events: none;
}

.cb-split-stat-badge__number {
	overflow-wrap: anywhere;
	font-family: var(--wp--preset--font-family--display, inherit);
	font-size: 2.25rem;
	font-weight: 700;
	line-height: 1;
}

.cb-split-stat-badge__label {
	font-size: 0.8125rem;
	opacity: 0.85;
	margin-top: 6px;
	line-height: 1.35;
}

@media (max-width: 640px) {

	.cb-split-stat-badge {
		left: 12px;
		bottom: 12px;
		padding: 14px 18px;
		min-width: 140px;
	}

	.cb-split-stat-badge__number {
		font-size: 1.75rem;
	}
}

/* ── React Header — sticky + hide-on-scroll variants ──────────────────────
 * Settings → Header lets admins choose:
 *   - Position: relative (default) | sticky
 *   - Hide on scroll down (only effective with sticky)
 * The wrapper carries `data-position` and `data-hide-on-scroll` set in
 * view.tsx; CSS below promotes the parent template-part header to sticky
 * (wp-block-template-part wraps the React mount with position:absolute
 * height:0 by default — that traps a sticky child to a 0px range, so we
 * lift sticky to the outermost wp-block-template-part).
 *
 * Hide-on-scroll: when the inner wrapper gets `.is-hidden`, translate
 * the OUTER template-part header (which carries the bg + sticky) so the
 * whole strip slides off-screen. Translating only the inner wrapper
 * leaves the outer's dark bg painted as a hairline strip at the top. */
header.wp-block-template-part:has(> .react-header-live-wrapper--sticky) {
	position: sticky !important;
	top: 0 !important;
	height: auto !important;
	z-index: 10000;
	transition: transform 0.32s cubic-bezier(0.32, 0.72, 0, 1) !important;

	/* IMPORTANT: do NOT add `will-change: transform` here. It creates a
   * new containing block which traps the `position: fixed` mobile menu
   * (rendered inside this header tree) to the header's 100px box. */
}

/* `!important` outranks the parent theme's blanket
 * `header { transform: none !important }` breakout-safety rule. */
header.wp-block-template-part:has(> .react-header-live-wrapper--sticky.is-hidden) {
	transform: translateY(-100%) !important;
}

/* Hide-on-scroll for a SOLIDIFY-ON-SCROLL header.
 *
 * Those headers never get `--sticky` (the wrapper stays in flow); it's the inner
 * `.site-header-react` that is `position: fixed`, so that's the element which has
 * to slide. Scoped with `:not(--sticky)` so it can never double-apply alongside
 * the outer template-part transform above. The transition lives inline on the
 * element (view.tsx) because an inline `transition` outranks any stylesheet. */
.react-header-live-wrapper[data-position="sticky"]:not(
.react-header-live-wrapper--sticky
).is-hidden > .site-header-react {
	transform: translateY(-100%);
}

/* ── Testimonial ────────────────────────────────────────────────────────────── */
.cb-block-testimonial {

	/* Background is author-controlled via SECTION BACKGROUND (emitted inline by
   * template.php). No hardcoded surface default — clearing the control now
   * actually clears the background (transparent) instead of falling back to a
   * beige the author can't remove. Set a colour explicitly for the
   * white ↔ surface ↔ primary rhythm. */
	background: transparent;
	position: relative;
	overflow: hidden;

	/* Horizontal breathing room so the centred 820px quote figure can't run into
   * (and get clipped by overflow:hidden on) the edges when the block is in a
   * narrow column, e.g. a post's article width. */
	padding-inline: clamp(1.25rem, 5vw, 3rem);
}

/* The decorative droplet behind the quote is no longer hardcoded — authors
 * pick an optional background shape (image + placement) via the block's
 * SectionBgShape control, rendered by cb_render_bg_shape() in template.php. */

.cb-testimonial-figure {
	position: relative;
	z-index: 1;
}

.cb-testimonial-quote p {
	font-size: 20px;
	line-height: 1.6;
	font-weight: 400;
	color: var(--cb-primary);
	font-style: italic;
	letter-spacing: -0.01em;
}

@media (min-width: 769px) {

	.cb-testimonial-quote p {
		font-size: 22px;
	}
}

@media (min-width: 1025px) {

	.cb-testimonial-quote p {
		font-size: 26px;
	}
}

/* ── CTA Band — compact dark band: cross-sell text · image · contact CTA ──── */
.cb-cta-band {
	position: relative;
	background: var(--wp--preset--color--primary, #00486a);
	color: var(--cb-cta-text, #fff);
	overflow: hidden;
}

.cb-cta-band__inner {
	position: relative;
	z-index: 1;
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	display: grid;
	grid-template-columns: 1fr clamp(220px, 22vw, 340px) 1fr;
	align-items: stretch;
}

.cb-cta-band__col {
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 12px;
	padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.5rem, 3vw, 3rem);
}

.cb-cta-band__heading {
	font-family: var(--wp--preset--font-family--display, "Josefin Sans", sans-serif);
	font-weight: 700;
	font-size: clamp(1.4rem, 2.2vw, 2rem);
	line-height: 1.1;
	margin: 0;
	color: var(--cb-cta-text, #fff);
}

.cb-cta-band__body {
	margin: 0;
	font-size: clamp(0.95rem, 0.6vw + 0.8rem, 1.05rem);
	line-height: 1.55;
	color: var(--cb-cta-text, rgba(255, 255, 255, 0.82));
	max-width: 42ch;
}

.cb-cta-band__body a {
	color: var(--cb-cta-text, #fff);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 2px;
}

.cb-cta-band__media {
	position: relative;
	min-height: clamp(150px, 18vw, 230px);
	background: #0b2a3c;
}

.cb-cta-band__media img {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

/* Editor: the in-canvas image picker fills the media zone. */
.cb-cta-band__media-btn,
.cb-cta-band__media-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	padding: 0;
	cursor: pointer;
}

.cb-cta-band__media-btn {
	background: transparent;
}

.cb-cta-band__media-btn img {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

.cb-cta-band__media-placeholder {
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(255, 255, 255, 0.08);
	border: 2px dashed rgba(255, 255, 255, 0.3);
	color: rgba(255, 255, 255, 0.85);
	font-weight: 600;
	text-align: center;
}

@media (max-width: 860px) {

	.cb-cta-band__inner {
		grid-template-columns: 1fr;
	}

	.cb-cta-band__media {
		order: -1;
		min-height: 200px;
	}
}

/* Star rating decoration */
.cb-testimonial-figure::before {
	content: "★★★★★";
	display: block;
	color: #f59e0b;
	font-size: 18px;
	letter-spacing: 0.15em;
	margin-bottom: 8px;
}

/* ── Hero panel (glass card on right side) ──────────────────────────────────── */
.cb-hero-panel {
	background: rgba(255, 255, 255, 0.07);
	border: 1px solid rgba(255, 255, 255, 0.15);
	backdrop-filter: blur(12px);
	-webkit-backdrop-filter: blur(12px);
	box-shadow:
		0 24px 64px rgba(0, 0, 0, 0.3),
		inset 0 1px 0 rgba(255, 255, 255, 0.15);
}

.cb-hero-panel-inner {
	position: relative;
}

.cb-hero-bar {
	background: rgba(255, 255, 255, 0.15);
}

/* Animated shimmer on hero bars */
@keyframes cb-shimmer {

	0% {
		opacity: 0.3;
	}

	50% {
		opacity: 0.6;
	}

	100% {
		opacity: 0.3;
	}
}

.cb-hero-panel .cb-hero-bar:nth-child(1) {
	animation: cb-shimmer 3s ease-in-out infinite;
}

.cb-hero-panel .cb-hero-bar:nth-child(2) {
	animation: cb-shimmer 3s ease-in-out 0.5s infinite;
}

.cb-hero-panel .cb-hero-bar:nth-child(3) {
	animation: cb-shimmer 3s ease-in-out 1s infinite;
}

/* backdrop-filter is now handled inline by the React component on all pages */

/* ── Hero glass text panel + jubileum stat aside (Hegra) ────────────────────
 * Opt-in via the hero block's panelStyle="glass" / asideType="stat" attributes.
 * `.cb-hero-split` turns the content area into a two-column row on desktop
 * (text panel + aside) and stacks on mobile. `.cb-hero-panel--text` adds the
 * padding/radius the shared `.cb-hero-panel` glass surface lacks. Heroes
 * without these attributes never get `.cb-hero-split`, so they render exactly
 * as before. */
.cb-hero-split {
	display: flex;
	flex-direction: column;
	gap: 32px;
	width: 100%;
}

@media ( min-width: 1024px ) {

	.cb-hero-split {
		flex-direction: row;
		align-items: stretch;
		gap: clamp(32px, 5vw, 72px);
	}
}

.cb-hero-content {
	min-width: 0; /* let the text column shrink beside the aside */
}

/* ── Hero detail items — optional icon+text row under the CTAs (address,
 * delivery, opening hours …). A flex row that wraps on narrow screens so it
 * never forces horizontal scroll. Text inherits the hero text colour; the icon
 * carries a subtle brand-teal accent. */
.cb-hero__details {
	list-style: none;
	margin: 0.75rem 0 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px 28px;
}

.cb-hero__detail {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--wp--preset--font-family--base, Inter, system-ui, sans-serif);
	font-size: 15px;
	font-weight: 500;
	line-height: 1.3;
	color: inherit;
}

.cb-hero__detail-icon {
	display: inline-flex;
	flex-shrink: 0;

	/* The "Ikon" colour control sets --cb-detail-icon on the list; the teal
	 * preset is the default when the admin hasn't picked one. */
	color: var(--cb-detail-icon, var(--wp--preset--color--secondary, #5db6cf));
}

.cb-hero__detail-icon svg {
	display: block;
	width: 18px;
	height: 18px;
}

/* Editor-only chrome. The details editor sits on the dark hero canvas where the
 * IconPicker (built for the light sidebar) and the detail text were unreadable.
 * Wrap it in a light frosted panel so every control reads clearly. Frontend
 * never renders .cb-hero__details--edit. */
.cb-hero__details--edit {
	background: rgba(255, 255, 255, 0.97);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 14px;
	padding: 12px 14px;
	gap: 10px 16px;
	max-width: -moz-max-content;
	max-width: max-content;
	box-shadow: 0 6px 20px -8px rgba(0, 0, 0, 0.35);
	color: #1e1e1e;
}

/* Colour-controls row: the two theme-palette chips (Tekst + Ikon), own line. */
.cb-hero__details--edit .cb-hero__details-controls {
	display: flex;
	align-items: center;
	gap: 8px;
	flex-basis: 100%;
	padding-bottom: 8px;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}

.cb-hero__details--edit .cb-hero__details-controls-label {
	font-size: 11px;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	color: #50575e;
}

/* Each detail = icon picker + text + trash, on a readable light surface. */
.cb-hero__details--edit .cb-hero__detail {
	color: #1e1e1e;
}

.cb-hero__details--edit .cb-hero__detail-text {
	min-width: 60px;
	outline: none;
	color: #1e1e1e;
	font-size: 15px;
}

.cb-hero__details--edit .cb-hero__detail-text:empty::before {
	content: attr(data-rich-text-placeholder);
	opacity: 0.5;
}

/* "Uten ikon" clear button — small, quiet. */
.cb-hero__details--edit .cb-hero__detail-iconclear {
	background: none;
	border: none;
	padding: 0 4px;
	font-size: 11px;
	color: #757575;
	cursor: pointer;
	text-decoration: underline;
}

.cb-hero__details--edit .cb-hero__detail-iconclear:hover {
	color: #1e1e1e;
}

.cb-hero__detail-remove {
	background: none;
	border: none;
	color: inherit;
	opacity: 0.55;
	cursor: pointer;
	padding: 2px;
	line-height: 0;
	transition: opacity 0.15s ease;
}

.cb-hero__detail-remove:hover,
.cb-hero__detail-remove:focus-visible {
	opacity: 1;
}

@media ( prefers-reduced-motion: reduce ) {

	.cb-hero__detail-remove {
		transition: none;
	}
}

.cb-hero-panel--text {
	padding: clamp(1.75rem, 4vw, 3rem);
	border-radius: 28px;
}

/* In the two-column hero the text shares the row with the aside, so the full
 * `text-hero` size wraps the heading into a cramped stack. Cap it to a tighter
 * display size that reads as an intentional 2–3 lines beside the stat card. */
.cb-hero-split .text-hero {
	font-size: clamp(2rem, 3.2vw, 3.25rem);
	line-height: 1.1;
}

/* Stat / badge aside — a column INSIDE the shared hero panel (no card of its
 * own; the glass belongs to the single `.cb-hero-panel--text` wrapper). A thin
 * rule separates it from the text on desktop, matching the design reference. */
.cb-hero-aside {
	flex: 0 0 auto;
	width: 100%;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 20px;
	text-align: center;
}

@media ( min-width: 1024px ) {

	.cb-hero-aside {
		width: clamp(240px, 24vw, 320px);
		align-self: stretch;
		padding-left: clamp(24px, 4vw, 56px);
		border-left: 1px solid rgba(255, 255, 255, 0.18);
	}
}

.cb-hero-stat {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 10px;
}

.cb-hero-stat__number {
	display: inline-flex;
	align-items: flex-start;
	gap: 6px;
	font-family: var(--font-display, "Montserrat", system-ui, sans-serif);
	font-weight: 700;
	font-size: clamp(4rem, 9vw, 6.5rem);
	line-height: 0.9;
	color: #fff;
}

.cb-hero-stat__suffix {
	font-size: 0.3em;
	font-weight: 700;
	letter-spacing: 0.06em;
	margin-top: 0.35em;
	color: var(--wp--preset--color--accent, #e51919);
}

.cb-hero-stat__label {
	font-size: 0.9rem;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.82);
}

.cb-hero-aside__img {
	display: block;
	width: 100%;
	max-width: 190px;
	height: auto;
}

/* Eyebrow leading dash marker (eyebrowMarker="dash"). Uses the brand accent so
 * the rule reads as a deliberate flourish, matching the design reference. */
.cb-hero-eyebrow--dash::before {
	content: "";
	display: inline-block;
	width: 28px;
	height: 2px;
	margin-right: 12px;
	vertical-align: middle;
	background: var(--wp--preset--color--accent, #e51919);
}

/* ── Process block — editor-only ───────────────────────────────────────────
 * The block's render template emits `<span class="cb-eyebrow">…</span>`
 * for the frontend (which is `display: inline-flex; width: fit-content;`
 * for layout reasons). That class shape was breaking the RichText
 * click-target inside the Gutenberg editor — admins couldn't click the
 * eyebrow to edit it. The editor uses a custom class
 * `.cb-process__eyebrow-edit` that mimics the visual look (uppercase,
 * accent colour, letter-spacing) but as a plain block element so
 * RichText's click area is the full text width. */
.cb-process__eyebrow-edit {
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 14px;
	font-weight: 600;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	margin: 0 0 12px;
	cursor: text;
}

@media (min-width: 769px) {

	.cb-process__eyebrow-edit {
		font-size: 16px;
	}
}

@media (min-width: 1025px) {

	.cb-process__eyebrow-edit {
		font-size: 18px;
	}
}

/* Inline per-step controls (move up / move down / remove) sit at the
 * right edge of each step row in the editor only. Hidden when the step
 * is not the actively-selected one to keep the canvas tidy. */
.cb-process__step-controls {
	display: flex;
	flex-direction: column;
	gap: 4px;
	align-items: center;
	margin-left: 12px;
	opacity: 0.5;
	transition: opacity 0.15s;
}

.cb-process__step:hover .cb-process__step-controls,
.cb-process__step:focus-within .cb-process__step-controls {
	opacity: 1;
}

/* Two-column tasks editor row — RichText per item + remove button. */
.cb-process__step-col-item {
	display: flex;
	align-items: flex-start;
	gap: 6px;
	list-style: none;
	margin: 0 0 4px;
	padding: 0;
}

.cb-process__step-col-item .cb-process__step-col-text {
	flex: 1;
	min-width: 0;
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.55;
}

.cb-process__step-col-item .cb-process__step-col-text::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	font-weight: 600;
}

/* Add-step button + Add-task button — secondary visuals, sit below
 * the list on the canvas side. */
.cb-process__add {
	margin-top: 16px;
}

/* CTA preview — explicit dimensions so admins see what the rendered
 * button will look like, not a raw underline-link. */
.cb-process__cta-preview {
	pointer-events: none; /* click-through to the wrapping block selection */
}

/* Width-hint Notice in the inspector. Subtle, helps admins find the
 * align toolbar (which lives above the canvas, not in this panel). */
.cb-process__width-hint {
	margin-bottom: 12px !important;
	font-size: 12px !important;
}

/* ── Process block ──────────────────────────────────────────────────────────────
 *
 * "Slik jobber vi" — vertical numbered cards. Pattern researched 2026-04-27
 * across the Norwegian regnskap vertical (Sanna, Amesto, Regnskap og
 * Rådgivning); they all converge on big-numeral + title + body, no
 * connectors, no animations, vertical stack on every breakpoint.
 *
 * Responsive strategy:
 *   - Desktop (1024+): step number sits to the LEFT of the body in a
 *     wide row; two-column tasks render side-by-side.
 *   - Tablet (640–1023): number still left of body but tighter; two-column
 *     tasks still side-by-side (just enough room).
 *   - Mobile (≤640): number stacks ABOVE body; two-column tasks collapse
 *     to a single stacked column with the col-heading acting as a
 *     section label.
 */
.cb-process {
	background: var(--wp--preset--color--surface, var(--cb-surface, #fafaf8));
	padding-block: clamp(64px, 10vh, 120px);
}

.cb-process__inner {
	width: 100%;
	max-width: 1100px;

	/* Anchor the narrow process column to the same vertical axis as
   * full-width blocks. The template wraps this in an outer
   * `max-w-site mx-auto px-6` rail (see process/template.php) so on
   * wide viewports the column starts at the rail's left edge instead
   * of drifting all the way to viewport-left. (Centred process
   * layouts override this via .cb-process--align-center below.) */
	margin-inline-start: 0;
	margin-inline-end: auto;
	box-sizing: border-box;
}

.cb-process--align-center .cb-process__inner {

	/* When the block's heading is centre-aligned the entire column
   * centres on the viewport instead of left-anchoring. */
	margin-inline-start: auto;
}

.cb-process__header {
	margin-bottom: clamp(40px, 6vh, 72px);
}

.cb-process--align-center .cb-process__header {
	text-align: center;
}

.cb-process__heading {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-size: clamp(36px, 5vw, 56px);
	font-weight: 400;
	line-height: 1.1;
	letter-spacing: -0.02em;
	color: var(--wp--preset--color--primary, var(--cb-primary, #00486a));
	margin: 12px 0 0;
}

.cb-process__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: clamp(24px, 4vh, 48px);
}

.cb-process__step {
	display: grid;
	grid-template-columns: 96px 1fr;
	gap: clamp(20px, 3vw, 40px);
	align-items: start;
	padding: clamp(20px, 3vh, 32px) 0;
	border-top: 1px solid color-mix(in srgb, var(--cb-primary, #00486a) 12%, transparent);
}

.cb-process__step:first-child {
	border-top: 0;
	padding-top: 0;
}

.cb-process__step-marker {
	display: flex;
	align-items: flex-start;
	justify-content: flex-start;
}

.cb-process__step-number {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-size: clamp(48px, 6vw, 80px);
	font-weight: 400;
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	font-variant-numeric: tabular-nums;
}

.cb-process__step-body {
	min-width: 0; /* allow text to wrap inside grid cell */
}

.cb-process__step-title {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-size: clamp(22px, 2.5vw, 28px);
	font-weight: 400;
	line-height: 1.2;
	color: var(--wp--preset--color--primary, var(--cb-primary, #00486a));
	margin: 0 0 8px;
}

.cb-process__step-text {
	font-size: 17px;
	line-height: 1.6;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 80%, transparent);
	margin: 0;
	max-width: 56ch;
}

/* Two-column tasks ("Hva du må gjøre / Hva vi gjør") */
.cb-process__step-cols {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: clamp(24px, 3vw, 40px);
	margin-top: 16px;
}

.cb-process__step-col-heading {
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	margin: 0 0 12px;
}

.cb-process__step-col-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 8px;
}

.cb-process__step-col-list li {
	position: relative;
	padding-left: 22px;
	font-size: 16px;
	line-height: 1.55;
	color: color-mix(in srgb, var(--cb-primary, #00486a) 85%, transparent);
}

.cb-process__step-col-list li::before {
	content: "✓";
	position: absolute;
	left: 0;
	top: 0;
	color: var(--wp--preset--color--accent, var(--cb-accent, #f5833c));
	font-weight: 600;
}

/* Optional connector line between step markers (off by default; admin opt-in). */
.cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker {
	position: relative;
}

.cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker::after {
	content: "";
	position: absolute;
	top: clamp(60px, 7vw, 92px);
	left: clamp(20px, 2.5vw, 38px);
	width: 1px;
	height: 100%;
	background: color-mix(in srgb, var(--cb-accent, #f5833c) 35%, transparent);
}

/* CTA below the list */
.cb-process__cta {
	margin-top: clamp(32px, 5vh, 56px);
	display: flex;
	justify-content: flex-start;
}

.cb-process--align-center .cb-process__cta {
	justify-content: center;
}

.cb-process__cta a {
	background-color: var(--wp--preset--color--primary, var(--cb-primary, #00486a));
	color: #fff;
	transition: transform 0.15s, box-shadow 0.15s;
}

.cb-process__cta a:hover {
	transform: translateY(-1px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

/* ── Tablet (≤1023px) ──────────────────────────────────────────────────────── */
@media (max-width: 1023px) {

	.cb-process__step {
		grid-template-columns: 72px 1fr;
		gap: 24px;
	}

	.cb-process__step-number {
		font-size: 56px;
	}

	/* Two-col tasks still side-by-side at tablet */
}

/* ── Mobile (≤640px) ───────────────────────────────────────────────────────── */
@media (max-width: 640px) {

	.cb-process {
		padding-inline: 20px;
	}

	/* Number stacks ABOVE body — vertical card pattern that the vertical's
   * mobile views all collapse to. */
	.cb-process__step {
		grid-template-columns: 1fr;
		gap: 8px;
		padding: 24px 0;
	}

	.cb-process__step-marker {
		margin-bottom: -4px;
	}

	.cb-process__step-number {
		font-size: 48px;
	}

	.cb-process__step-title {
		font-size: 22px;
	}

	/* Two-col tasks collapse to single column on mobile */
	.cb-process__step-cols {
		grid-template-columns: 1fr;
		gap: 20px;
	}

	/* Connector line on mobile would be ugly diagonal — disable. */
	.cb-process--connector .cb-process__step:not(:last-child) .cb-process__step-marker::after {
		display: none;
	}
}

/* ── CTA section uplift ─────────────────────────────────────────────────────── */

/* Same admin-wins guard as the .cb-cta-accent rule above: when the admin
 * has picked a bg via the Gutenberg color panel, `.has-background` is set
 * and we step out of the way. */
.cb-cta-section:not(.cb-cta-accent):not(.has-background) {
	background: var(--wp--preset--color--surface, var(--cb-surface));
}

/* ── Logo strip uplift ──────────────────────────────────────────────────────── */
.cb-logo-strip {
	background: var(--cb-bg);
}

/* ── Footer — upgraded ──────────────────────────────────────────────────────── */
.site-footer {

	/* Settings → Footer → Appearance (--cb-footer-bg); falls back to the navy
   * primary. NOTE: this rule comes AFTER the earlier .site-footer block, so the
   * var must live here too or it silently wins with plain navy. */
	background: var(--cb-footer-bg, var(--cb-primary));
	border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Global link hover in blocks ────────────────────────────────────────────── */
.cb-rich-text-body a {
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	transition: color 0.15s ease;
}

/* ── Refined heading styles ─────────────────────────────────────────────────── */
.text-section-heading,
h2.text-4xl {
	letter-spacing: -0.025em;
}

/* Split-section heading sits BETWEEN h2 and h3 — the shared section-heading
 * token (up to 3.25rem) reads as an h1 in this two-column context, which is
 * too dominant beside the body copy. Scoped to the split block only (front end
 * `.cb-block-split` + editor `.wp-block-styrk-blocks-split-section`) so other
 * blocks' section headings are unchanged. */
.cb-block-split .text-section-heading,
.wp-block-styrk-blocks-split-section .text-section-heading,
.wp-block-styrk-blocks-split-section h2.text-4xl {
	font-size: clamp(1.5rem, 1.1vw + 1.05rem, 2rem) !important;
	line-height: 1.2;
}

/* ── Reduce motion ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {

	.cb-feature-card,
	.cb-split-image,
	.cb-split-image-wrap:hover .cb-split-image {
		transition: none;
		transform: none;
	}

	.cb-feature-card:hover {
		transform: none;
	}

	.cb-hero-panel .cb-hero-bar {
		animation: none;
	}
}

/* ═══════════════════════════════════════════════════════════════════════════
   STORE TRYKKFLATER — Block-level hit areas
   ═══════════════════════════════════════════════════════════════════════════

   Pattern: cb-has-link = the containing block
            cb-stretched-link = an <a> stretched via ::after to cover the parent
            cb-link-above = explicit child links/buttons that sit above the stretch

   The ::after of cb-stretched-link fills the nearest position:relative ancestor.
   Everything else gets z-index:1 so it stays clickable and selectable.
   ─────────────────────────────────────────────────────────────────────────── */

/* Parent must be positioned */
.cb-has-link {
	position: relative;
	isolation: isolate;
}

/* The invisible stretched anchor — sits ABOVE content so any click on the
   card is routed to the link. Text selection on cards is a deliberate
   tradeoff (Bootstrap stretched-link convention). Explicit inner controls
   opt back on top via .cb-link-above. */
.cb-stretched-link {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: block;
	font-size: 0;
	color: transparent;
	text-decoration: none;
	outline: none !important;
	border: none !important;
	background: transparent;
	-webkit-appearance: none;
	-moz-appearance: none;
	     appearance: none;
}

.cb-stretched-link:focus {
	outline: none !important;
	box-shadow: none !important;
}

/* Visible cursor affordance */
.cb-has-link {
	cursor: pointer;
}

/* Non-link content stays in normal flow beneath the stretched link.
   IMPORTANT: position:relative ONLY, never a z-index — otherwise the
   wrapper forms its own stacking context and any nested .cb-link-above
   button (e.g. the call-card's "Ring" + "Send e-post" CTAs three levels
   deep) gets trapped below the stretched-link's z:2 even with its own
   z:3. With no z-index here, the inner buttons resolve their z:3
   against the .cb-has-link stacking context where they win. */
.cb-has-link > *:not(.cb-stretched-link):not(.cb-link-above) {
	position: relative;
}

/* Explicit child links/buttons float above the stretched link */
.cb-link-above {
	position: relative;
	z-index: 3;
}

/* ── Feature card hover highlight ────────────────────────────────────────── */
.cb-feature-card.cb-has-link:hover,
.cb-feature-card:has(.cb-stretched-link:hover) {
	box-shadow:
		0 12px 40px rgba(0, 0, 0, 0.12),
		0 2px 8px rgba(0, 0, 0, 0.06) !important;
	transform: translateY(-4px);
	border-color: rgba(var(--cb-accent-r), var(--cb-accent-g), var(--cb-accent-b), 0.3) !important;
}

.cb-feature-card.cb-has-link:hover::after,
.cb-feature-card:has(.cb-stretched-link:hover)::after {
	opacity: 1;
}

/* ── Split section hover highlight ──────────────────────────────────────── */
.cb-block-split .cb-has-link {
	transition: background 0.3s ease;
	border-radius: 1.5rem;
	padding: 2rem;
}

.cb-block-split .cb-has-link:hover,
.cb-block-split .max-w-site:has(.cb-stretched-link:hover) {
	background: color-mix(in srgb, var(--wp--preset--color--primary, #00486a) 4%, transparent);
}

.cb-block-split .cb-has-link:hover .cb-split-image {
	box-shadow:
		0 32px 72px -12px rgba(0, 0, 0, 0.3),
		0 0 0 1px color-mix(in srgb, var(--wp--preset--color--secondary, #0084af) 20%, transparent);
	transform: scale(1.015);
}

/* Text and button colors are theme-set — do not override on hover */

/* ── CTA button color protection ────────────────────────────────────────────
   WordPress global styles set:
     a:where(:not(.wp-element-button)) { color: var(--wp--preset--color--primary) }
   This overrides Tailwind's .text-white on <a> tags. We counter with explicit
   high-specificity selectors for every CTA button class. */

/* Default CTA button colors — only apply when the admin hasn't picked
 * an explicit colour via the block's color palette.
 *
 * The block's render template emits an inline `style="background-color:X;
 * color:Y;"` when the admin picked a palette value (and always emits a
 * contrast-safe text colour via cb_best_contrast_text on the server).
 * These class-based defaults used to force accent/white with !important,
 * which clobbered the admin's pick — flagged 2026-04-24 on the frontpage
 * hero where the admin picked navy + white and got rendered orange +
 * white. `:not([style*="background-color"])` / `:not([style*="color"])`
 * lets inline styles win. */
a.cb-link-above.bg-primary:not([style*="color"]),
a.cb-cta-btn.bg-accent:not([style*="color"]),
a.cb-cta-btn.bg-white:not([style*="color"]),
.cb-hero a[class*="bg-accent"]:not([style*="color"]) {
	color: #fff !important;
}

a.cb-link-above.bg-primary:not([style*="background-color"]) {
	background-color: var(--wp--preset--color--primary, #00486a) !important;
}

a.cb-cta-btn.bg-accent:not([style*="background-color"]) {
	background-color: var(--wp--preset--color--accent, #f5833c) !important;
}

a.cb-cta-btn.bg-white:not([style*="background-color"]) {
	background-color: #fff !important;
}

a.cb-cta-btn.bg-white:not([style*="color"]) {
	color: var(--wp--preset--color--primary, #00486a) !important;
}

/* Removed 2026-04-24: the A11Y "safety net" that forced every inline-
 * styled CTA button to navy + white regardless of the admin's pick.
 * The server-side cb_best_contrast_text helper already guarantees a
 * WCAG-AA text colour on whatever bg the admin chose — keeping the
 * admin's pick instead of silently replacing it with navy. */

/* Outlined CTA buttons: primary text, transparent bg */
a.cb-link-above.border-primary,
a.cb-cta-btn-secondary.border-primary {
	color: var(--wp--preset--color--primary, #00486a) !important;
	background: transparent !important;
}

a.cb-link-above.border-primary:hover,
a.cb-cta-btn-secondary.border-primary:hover {
	background-color: var(--wp--preset--color--primary, #00486a) !important;
	color: #fff !important;
}

/* Accent-bg CTA: white outline + text */
a.cb-cta-btn-secondary.border-white\/40,
.cb-cta-accent a.cb-cta-btn-secondary {
	color: #fff !important;
	background: transparent !important;
}

/* Employee grid: breathing room between the intro/header and the card grid —
   the header had no bottom margin so the cards sat right under the intro text.
   Responsive so it scales from mobile to wide. */
.cb-employee-grid__header--spaced {
	margin-bottom: clamp(2.5rem, 5vw, 4rem);
}

/* Honour the header alignment on the FRONTEND. The template emits data-align
 * on the eyebrow/heading/intro, but there was no CSS for it, so they only ever
 * rendered left on the front end (they align in the editor via SectionHeader's
 * inline flex). Left is the default; centre/right mirror the editor. */
.cb-employee-grid__heading[data-align="center"] {
	text-align: center;
}

.cb-employee-grid__heading[data-align="right"] {
	text-align: right;
}

.cb-employee-grid__intro[data-align="center"] {
	text-align: center;
}

.cb-employee-grid__intro[data-align="right"] {
	text-align: right;
}

/* The eyebrow is an inline-flex pill, so text-align on itself can't move it —
 * centre/right it as a fit-content block with auto margins. */
.cb-employee-grid__eyebrow[data-align="center"] {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	margin-inline: auto;
}

.cb-employee-grid__eyebrow[data-align="right"] {
	display: flex;
	width: -moz-fit-content;
	width: fit-content;
	margin-inline-start: auto;
}

/* Employee contact links — prevent WP global link color override.
   A11Y: teal on #f0f8ff = 3.97:1 FAIL. Navy = 8.4:1 PASS. */
.cb-employee-card a.cb-employee-link {
	color: var(--wp--preset--color--primary, #00486a) !important;
	background: none !important;
	border: none !important;
	border-radius: 0 !important;
	padding: 0 !important;
}

.cb-employee-card a.cb-employee-link:hover {
	color: var(--wp--preset--color--accent, #f5833c) !important;
}

/* Contact-row icons — sized to read as tap targets next to the label
 * without overpowering the row text. The SVGs ship at 24 in markup;
 * this normalises all three (mail, phone, LinkedIn) to the same size. */
.cb-employee-card .cb-employee-link svg {
	width: 28px;
	height: 28px;
	flex: none;
}

/* Long emails/phones would push the row wider than the card and clip the
 * trailing chars. min-width:0 lets the flex item shrink below content
 * width; overflow-wrap:anywhere breaks the email at any char if no space. */
.cb-employee-card a.cb-employee-link {
	min-width: 0;
	word-break: break-word;
	overflow-wrap: anywhere;
}

/* 2-line teaser of the employee's background. Full bio lives in the modal,
 * which the parent button trigger opens. `text-overflow: ellipsis` shows
 * a "…" at the cut-off point instead of a clean break, signalling that
 * there's more to read in the modal. */
.cb-employee-card__bio {
	margin: 0;
	font-size: 0.95rem;
	line-height: 1.5;
	color: var(--wp--preset--color--secondary, #475569);

	/* 2-line teaser. CSS only caps the height; the actual "…" character
   * is appended in-line by view.ts which truncates the live text to
   * the longest substring that fits 2 lines and writes a real "…" to
   * the DOM. Pure-CSS approaches (-webkit-line-clamp's ellipsis path)
   * proved unreliable in modern Chromium — silent no-op even when the
   * height clamp worked. JS truncation always renders the indicator
   * exactly at the visible cut, no floating pseudo, no missing glyph. */
	max-height: calc(2 * 1.5em);
	overflow: hidden;
}

/* Push the contact box (the last child of the card) to the bottom so every
 * card lines its contact strip up regardless of bio length. */
.cb-employee-card--full > .p-6:last-child {
	margin-top: auto;
}

/* Focus-visible ring on the parent container (keyboard nav) */
.cb-has-link:has(.cb-stretched-link:focus-visible) {
	outline: 2px solid var(--wp--preset--color--secondary, #0084af) !important;
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.cb-feature-card.cb-has-link:hover,
	.cb-feature-card:has(.cb-stretched-link:hover) {
		transform: none;
	}

	.cb-block-split .cb-has-link:hover .cb-split-image {
		transform: none;
	}
}

/* ── Employee modal ─────────────────────────────────────────────────────── */
.cb-employee-modal {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	pointer-events: none;
	opacity: 0;
	transition: opacity 0.2s ease;
}

.cb-employee-modal.is-open {
	pointer-events: auto;
	opacity: 1;
}

.cb-employee-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.78);
	backdrop-filter: blur(12px) saturate(120%);
	-webkit-backdrop-filter: blur(12px) saturate(120%);
}

.cb-employee-modal__panel {
	position: relative;

	/* `--cb-modal-bg` / `--cb-modal-text` are emitted by template.php on the
   * modal shell when the editor sets a colour. Authors can recolour the
   * popup without overriding the block-level light defaults that every
   * other employee-grid instance relies on. */
	background: var(--cb-modal-bg, #fff);
	color: var(--cb-modal-text, inherit);
	border-radius: 1.5rem;
	box-shadow: 0 32px 80px -12px rgba(0, 0, 0, 0.35);
	max-width: 720px;
	width: 100%;
	max-height: calc(100vh - 48px);
	overflow-y: auto;
	transform: translateY(16px) scale(0.97);
	transition: transform 0.25s ease;
}

/* When a modal text colour is set, propagate it onto the headings/body
 * that otherwise hard-code their own colour against the light theme. */
.cb-employee-modal__panel[style*="--cb-modal-text"] .cb-employee-modal__name,
.cb-employee-modal__panel[style*="--cb-modal-text"] .cb-employee-modal__occupation,
.cb-employee-modal__panel[style*="--cb-modal-text"] .cb-employee-modal__bio,
.cb-employee-modal[style*="--cb-modal-text"] .cb-employee-modal__name,
.cb-employee-modal[style*="--cb-modal-text"] .cb-employee-modal__occupation,
.cb-employee-modal[style*="--cb-modal-text"] .cb-employee-modal__bio {
	color: var(--cb-modal-text, inherit);
}

.cb-employee-modal.is-open .cb-employee-modal__panel {
	transform: translateY(0) scale(1);
}

.cb-employee-modal__close {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.08);
	border-radius: 50%;
	width: 40px;
	height: 40px;
	display: flex;
	align-items: center;
	justify-content: center;
	cursor: pointer;
	color: var(--wp--preset--color--primary, #00486a);
	transition: background 0.15s ease;
}

.cb-employee-modal__close:hover {
	background: #fff;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
}

.cb-employee-modal__body {
	padding: 0;
}

.cb-employee-modal__header {
	display: flex;
	flex-direction: row;
	align-items: center;
	gap: 16px;
	padding: 24px 32px;
}

.cb-employee-modal__photo {
	width: 150px;
	height: 150px;
	border-radius: 12px;
	-o-object-fit: cover;
	   object-fit: cover;
	-o-object-position: top;
	   object-position: top;
	display: block;
	flex-shrink: 0;
}

.cb-employee-modal__initials {
	width: 150px;
	height: 150px;
	border-radius: 12px;
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 2.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--accent, #f5833c);
	background: var(--wp--preset--color--surface, #f8fafc);
	flex-shrink: 0;
}

/* No photo, but the theme supplies a brand symbol via the
 * `styrk_blocks_employee_photo_fallback` filter — the same fallback the card
 * uses. The base .cb-employee-modal__photo rule is written for an <img>
 * (object-fit: cover), so this variant turns that box into a centring
 * container for the mark inside it. */
.cb-employee-modal__photo--symbol {
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--surface, #f8fafc);
	-o-object-fit: unset;
	   object-fit: unset;
}

.cb-employee-modal__info {
	display: flex;
	flex-direction: column;
	gap: 4px;
	padding: 0;
	min-width: 0;
	flex: 1;
}

.cb-employee-modal__name {
	font-size: 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--primary, #00486a);
	margin: 0;
	line-height: 1.25;
}

.cb-employee-modal__occupation {
	font-size: 1rem;
	color: var(--wp--preset--color--secondary, #0084af);
	margin: 0;
}

/* Department pill inside the employee modal: author-controlled corner radius
   via `--cb-modal-tag-radius` (emitted on the modal shell by template.php).
   Falls back to a full pill so existing modals look unchanged. */
.cb-employee-modal .cb-dept-badge {
	border-radius: var(--cb-modal-tag-radius, 9999px);
}

.cb-employee-modal__bio {
	padding: 24px 32px 0;
}

.cb-employee-modal__bio p {
	font-size: 1.125rem;
	line-height: 1.65;
	color: #334155;
	margin: 0;
}

.cb-employee-modal__contacts {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 24px 32px 32px;
	border-top: 1px solid var(--wp--preset--color--muted, #e2e8f0);
	margin-top: 24px;
}

.cb-employee-modal__contact-link {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: 1.125rem;
	font-weight: 500;
	color: var(--wp--preset--color--primary, #00486a);
	text-decoration: none;
	transition: color 0.15s ease;
}

.cb-employee-modal__contact-link:hover {
	color: var(--wp--preset--color--accent, #f5833c);
}

.cb-employee-modal__contact-link svg {
	flex-shrink: 0;
	opacity: 0.6;
}

/* Mobile: tighten padding + shrink stamp + reserve space for the close
 * button so the heading doesn't run under it. */
@media (max-width: 480px) {

	.cb-employee-modal__header {
		padding: 20px 20px 20px 20px;

		/* Reserve a column on the right for the absolute-positioned close
     * button (40px wide + 16px gutter = 56px). */
		padding-right: 64px;
		gap: 16px;
	}

	.cb-employee-modal__photo,
	.cb-employee-modal__initials {
		width: 110px;
		height: 110px;
	}

	.cb-employee-modal__initials {
		font-size: 2rem;
	}

	.cb-employee-modal__bio,
	.cb-employee-modal__contacts {
		padding-left: 20px;
		padding-right: 20px;
	}

	/* Pin the close button into its reserved column. */
	.cb-employee-modal__close {
		top: 12px;
		right: 12px;
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-employee-modal,
	.cb-employee-modal__panel {
		transition: none;
	}
}

/* ── Testimonial quote typography ────────────────────────────────────────── */

/* Remove any stray quotes the editor might have saved previously */
.cb-quote-text {
	font-style: italic;
	font-weight: 400;
}

/* Opening guillemet — decorative, added automatically (editors never type it) */
.cb-quote-text::before,
.cb-testimonial-card__quote::before {
	content: "\00AB"; /* « */
	font-style: normal;
	font-weight: 700;
	margin-right: 0.08em;
}

/* Closing guillemet — after the text, inline */
.cb-quote-text::after,
.cb-testimonial-card__quote::after {
	content: "\00BB"; /* » */
	font-style: normal;
	font-weight: 700;
	margin-left: 0.08em;
}

/* Hide any trailing <br> that lands just before ::after
   (a <br> as the last child of <p> creates an empty line before the closing quote) */
.cb-quote-text br:last-child {
	display: none;
}

/* ── CTA button hover — subtle fade, no underline, no colour blend ───────────
   Background + text colour stay exactly as configured; the only hover
   affordance is a gentle opacity fade. The old underline affordance was
   removed (looked off against the button shapes). Colours are pinned to
   `inherit` so Tailwind hover:* utilities can't recolour the button. */
.cb-cta-btn,
.cb-cta-btn-secondary,
.cb-block-split .cb-has-link a.cb-link-above {
	text-decoration: none;
	transition: text-decoration-color 0.15s ease;
}

/* Hover affordance = UNDERLINE the label, never a background/colour swap.
 * Removing the button's background on hover (the old `background: inherit`)
 * dropped solid CTAs onto the section colour and broke text contrast. So the
 * button keeps its resting background AND text colour on hover — only the
 * label gains an underline. Contrast therefore can never regress.
 *
 * Bordered secondary buttons (.cb-cta-btn-secondary.border-primary) keep
 * their own deliberate fill-on-hover, which sets BOTH background:primary and
 * color:#fff (contrast-safe) via a more specific !important rule below — they
 * are the sanctioned "background changes on hover, so text colour is adjusted
 * too" case. */
.cb-cta-btn:hover,
.cb-cta-btn-secondary:hover,
.cb-block-split .cb-has-link a.cb-link-above:hover {
	filter: none;
	opacity: 1;

	/* !important: the `no-underline` Tailwind class on the anchor otherwise
   * wins the cascade and suppresses the underline. */
	text-decoration: underline !important;
	text-underline-offset: 0.2em;
}

/* ── Standalone Video Section ───────────────────────────────────────────────── */
.cb-block-video {
	background: var(--wp--preset--color--primary, var(--cb-primary));
	color: #fff; /* legible default for the section header on the dark shell */
	position: relative;
}

.cb-block-video::before {
	content: "";
	display: block;
	height: 1px;
	background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.08) 70%, transparent);
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
}

/* Portrait / tall video — centred, never taller than the viewport */
.cb-video-portrait-wrap {
	display: flex;
	justify-content: center;
	width: 100%;
}

.cb-video-portrait {
	display: block;
	aspect-ratio: 9 / 16;
	width: auto;
	max-width: min(400px, 100%);
	max-height: 85vh;
	border-radius: 1.25rem;
	box-shadow:
		0 32px 80px -12px rgba(0, 0, 0, 0.5),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	background: #000;
}

/* Landscape video — full-width capped at 960 px */
.cb-video-landscape-wrap {
	width: 100%;
	display: flex;
	justify-content: center;
}

.cb-video-landscape {
	display: block;
	width: 100%;
	max-width: 960px;
	aspect-ratio: 16 / 9;
	border-radius: 1rem;
	box-shadow:
		0 24px 64px -12px rgba(0, 0, 0, 0.4),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	background: #000;
}

.cb-video-caption {
	text-align: center;
	color: rgba(255, 255, 255, 0.55);
	font-size: 16px;
	max-width: 40ch;
}

.cb-video-placeholder {
	width: 100%;
	max-width: 400px;
	aspect-ratio: 9 / 16;
	border: 2px dashed rgba(255, 255, 255, 0.15);
	border-radius: 1.25rem;
	display: flex;
	align-items: center;
	justify-content: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 16px;
}

/* ── WordPress core video block overrides ───────────────────────────────────── */

/*
 * The default wp-block-video renders at the video's intrinsic size and can
 * easily be enormous. Constrain it to a sensible size on all devices.
 */

/* WordPress core video block with premium styling */
.wp-block-video {
	max-width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: clamp(1.5rem, 4vw, 3rem);
	background: var(--cb-dark-bg);
	border-radius: 0.75rem;
}

.wp-block-video video {
	display: block;
	width: 100%;
	max-height: 70vh;
	border-radius: 0.75rem;
	overflow: hidden;
	box-shadow:
		0 32px 72px -12px rgba(0, 0, 0, 0.35),
		0 0 0 1px rgba(255, 255, 255, 0.06);
	background: #000;
	position: relative;
}

/* Optional: thin accent-coloured top border (camera shutter chrome strip) */
.wp-block-video video::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 3px;
	background: var(--wp--preset--color--accent, var(--cb-accent));
	border-radius: 0.75rem 0.75rem 0 0;
	z-index: 2;
}

/* Caption styling */
.wp-block-video figcaption {
	color: var(--wp--preset--color--secondary, #64748b);
	font-size: 14px;
	text-align: center;
	font-style: italic;
	margin-top: 1rem;
	padding: 0 1rem;
}

/* Portrait / tall videos placed via the core video block */
@media (max-width: 639px) {

	.wp-block-video {
		padding: clamp(1rem, 3vw, 1.5rem);
	}

	.wp-block-video video {
		max-height: 65vh;
	}
}

/* When the core video block is set to align:center, give it a sensible max-width */
.wp-block-video.aligncenter video,
.wp-block-video.alignnone video {
	max-width: 960px;
}

/* ══════════════════════════════════════════════════════════════════════════════
   EDITOR OVERRIDES — ensure RichText is always interactive in Gutenberg
   ══════════════════════════════════════════════════════════════════════════════ */

/*
 * .editor-styles-wrapper is the Gutenberg editor canvas (including iframed).
 * These rules guarantee that inline-editable fields receive focus on click.
 */

/* RichText contentEditable divs must always capture pointer events */
.editor-styles-wrapper [contenteditable="true"] {
	pointer-events: auto !important;
	cursor: text;
}

/* Decorative overlays must never block editing in the editor */
.editor-styles-wrapper [aria-hidden="true"]:not([contenteditable]) {
	pointer-events: none;
}

/* CTA button wrappers — let clicks through to the RichText inside */
.editor-styles-wrapper .cta-button-text {
	pointer-events: auto;
	cursor: text;
	min-width: 2em;
	min-height: 1em;
}

/* Hero background img + overlay must never steal focus from text */
.editor-styles-wrapper .wp-block-styrk-blocks-hero img {
	pointer-events: none !important;
	-webkit-user-select: none !important;
	   -moz-user-select: none !important;
	        user-select: none !important;
}

.editor-styles-wrapper .wp-block-styrk-blocks-hero [aria-hidden="true"] {
	pointer-events: none !important;
}

/* Editor: draggable item hover highlight — gives the user a clear target
 * indicator when hovering over an individual card/item inside a parent
 * block. Inline drag-state outlines set by useDragSort take precedence via
 * the cascade (inline style beats stylesheet). */
.editor-styles-wrapper [data-drag-index]:hover {
	outline: 2px solid var(--wp--preset--color--primary, #00486a);
	outline-offset: 3px;
	border-radius: inherit;
}

.editor-styles-wrapper [data-drag-handle]:hover {
	background: #fff !important;
	color: var(--wp--preset--color--primary, #00486a) !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18) !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   Page Header — "Atelier" direction.
   Editorial inversion of the homepage hero: light surface ground, Fraunces
   serif title at display scale, teal hairline, orange breadcrumb glyphs,
   generous whitespace. Signals "you entered the reading room" when scrolled
   in from the frontpage's dark marketing hero.
   Red thread with homepage: same palette tokens, same Inter for body copy,
   navy remains the body text colour.
   ══════════════════════════════════════════════════════════════════════════ */

/* Fraunces variable (display serif) — loaded server-side via wp_enqueue_style
   so the font is only fetched on pages that actually render this block. */

.cb-page-header {
	position: relative;
	width: 100%;
	box-sizing: border-box;
	background: var(--cb-surface, #fafaf8);
	color: var(--cb-primary, #00486a);
	padding: calc(100px + 112px) 64px 160px;
	margin: 0;
	overflow: hidden;
}

/* Soft decorative hairline at the very top, flush under the site nav.
   Teal, full-bleed, 1px — reads as editorial pagination. */
.cb-page-header::before {
	content: "";
	position: absolute;
	top: 100px; /* aligns with site-header bottom edge */
	left: 0;
	right: 0;
	height: 1px;
	background: rgba(0, 132, 175, 0.25); /* teal @ 25% */
}

.cb-page-header__inner {
	max-width: 1200px;
	margin: 0 auto;

	/* border-box + 24px gutter so the breadcrumb + title share the same left
   * edge as the react-header above and the content blocks below. */
	box-sizing: border-box;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
	gap: 0;
}

/* Breadcrumb — true orange glyphs, Inter small caps feel via tracking. */
.cb-page-header__breadcrumb {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 12px;
	font-family: var(--wp--preset--font-family--base, "Inter", system-ui, sans-serif);
	font-size: 14px;
	font-weight: 500;
	letter-spacing: 0.02em;
	line-height: 1.4;
	color: rgba(0, 72, 106, 0.6); /* navy @ 60 */
	margin: 0 0 64px;
}

.cb-page-header__crumb-link {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}

.cb-page-header__crumb-link:hover,
.cb-page-header__crumb-link:focus-visible {
	color: var(--cb-primary, #00486a);
	text-decoration: underline;
	text-decoration-color: var(--wp--preset--color--secondary, #0084af);
	text-decoration-thickness: 1px;
	text-underline-offset: 4px;
}

.cb-page-header__crumb-sep {
	color: var(--cb-accent, #f5833c);
	font-size: 14px;
	line-height: 1;
	-webkit-user-select: none;
	   -moz-user-select: none;
	        user-select: none;
}

.cb-page-header__crumb-current {
	color: var(--cb-primary, #00486a);
	font-weight: 600;
}

/* Optional eyebrow — small, uppercase, teal (not orange). Sits above title. */
.cb-page-header__eyebrow {
	display: inline-block;
	font-family: var(--wp--preset--font-family--base, "Inter", system-ui, sans-serif);
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: var(--cb-secondary, #0084af);
	margin: 0 0 24px;
}

/* Title — Fraunces display serif at editorial scale. The signature move. */
.cb-page-header__title {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	font-size: 104px;
	font-weight: 400; /* serifs carry weight via contrast, not heaviness */
	font-variation-settings: "opsz" 144, "SOFT" 30; /* display optical size, softened terminals */
	line-height: 1.02;
	letter-spacing: -0.02em;
	color: var(--cb-primary, #00486a);
	margin: 0;
	max-width: 14ch;
}

/* Teal hairline — swaps in for the former orange accent bar. Thinner + wider
   + a different hue so it reads as a deliberate editorial rule, not a badge. */
.cb-page-header__rule {
	display: block;
	width: 96px;
	height: 2px;
	background: var(--cb-secondary, #0084af);
	border: 0;
	margin: 40px 0 0;
}

/* Subtitle — Inter, navy-80, narrow measure. */
.cb-page-header__subtitle {
	font-family: var(--wp--preset--font-family--base, "Inter", system-ui, sans-serif);
	font-size: 20px;
	font-weight: 400;
	line-height: 1.55;
	color: rgba(0, 72, 106, 0.82);
	margin: 32px 0 0;
	max-width: 52ch;
}

/* ── Header contrast override — REMOVED 2026-04-24 ──────────────────────────
   This rule used to force navy text + a navy-filtered logo inside the
   site header whenever a page-header block was present, based on the
   older assumption that the header was transparent-over-light-band in
   that mode. Since PR #32 the react-header renders solid Logofarge navy
   on every non-frontpage surface with cb_best_contrast_text choosing
   contrast-safe text server-side — forcing navy ON TOP of navy produced
   an invisible logo + invisible nav on every /tjenester/… sub-page that
   carries a page-header block (flagged on /bokforing/, 2026-04-24).
   The header now picks its own colour correctly; no override needed.
   `body.has-page-header` is still set by view.ts so future styling has
   a hook, but no styles currently target it. */

/* Responsive — tablet (≤1024px). */
@media (max-width: 1024px) {

	.cb-page-header {
		padding: calc(100px + 80px) 40px 112px;
	}

	.cb-page-header__title {
		font-size: 72px;
		max-width: 13ch;
	}

	.cb-page-header__breadcrumb {
		margin-bottom: 48px;
	}

	.cb-page-header__rule {
		margin-top: 32px;
	}

	.cb-page-header__subtitle {
		font-size: 18px;
		margin-top: 24px;
	}
}

/* Responsive — mobile (≤640px). */
@media (max-width: 640px) {

	.cb-page-header {
		padding: calc(100px + 48px) 24px 72px;
	}

	.cb-page-header::before {
		top: 100px;
	}

	.cb-page-header__breadcrumb {
		font-size: 13px;
		gap: 8px;
		margin-bottom: 36px;
	}

	.cb-page-header__eyebrow {
		font-size: 12px;
		margin-bottom: 16px;
	}

	.cb-page-header__title {
		font-size: 44px;
		max-width: none;
	}

	.cb-page-header__rule {
		width: 72px;
		margin-top: 24px;
	}

	.cb-page-header__subtitle {
		font-size: 16px;
		margin-top: 20px;
	}
}

/* Editor preview — match frontend. The band renders inside the Gutenberg
   iframe and must look identical to the live render, including the serif. */
.editor-styles-wrapper .cb-page-header {
	background: var(--cb-surface, #fafaf8);
	color: var(--cb-primary, #00486a);
}

.editor-styles-wrapper .cb-page-header__title {
	font-family: Fraunces, Georgia, "Times New Roman", serif;
	color: var(--cb-primary, #00486a);
}

.editor-styles-wrapper .cb-page-header__title [data-rich-text-placeholder],
.editor-styles-wrapper .cb-page-header__subtitle [data-rich-text-placeholder],
.editor-styles-wrapper .cb-page-header__eyebrow [data-rich-text-placeholder] {
	color: rgba(0, 72, 106, 0.4) !important;
	opacity: 1 !important;
}

/* ── Single-project hero (rendered by [project_hero] shortcode) ───────── */
.cb-project-hero {
	position: relative;
	width: 100%;
	min-height: clamp(420px, 65vh, 680px);
	background-size: cover;
	background-position: center;
	background-color: var(--wp--preset--color--primary, #0f1b2d);
	display: flex;
	align-items: flex-end;
	overflow: hidden;
}

.cb-project-hero__overlay {
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(15, 27, 45, 0) 30%, rgba(15, 27, 45, 0.65) 75%, rgba(15, 27, 45, 0.85) 100%);
}

.cb-project-hero__inner {
	position: relative;
	width: 100%;

	/* Align the title to the SAME content rail as the rest of the page so it
   * doesn't sit further left than the body. Uses the theme's unified rail vars
   * (--cb-content-rail / --cb-content-gutter, 1280px + responsive gutter) with
   * a fallback for non-Hywer themes. box-sizing: border-box so the max-width
   * includes the gutter. */
	box-sizing: border-box;
	max-width: var(--cb-content-rail, 1280px);
	margin-inline: auto;
	padding-left: var(--cb-content-gutter, 3.25rem);
	padding-right: var(--cb-content-gutter, 3.25rem);
	padding-top: clamp(64px, 10vw, 140px);
	padding-bottom: clamp(56px, 8vw, 100px);
	color: #fff;
}

.cb-project-hero__title {
	max-width: 22ch;
}

.cb-project-hero__eyebrow {
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.18em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.85);
	margin: 0 0 16px;
}

.cb-project-hero__title {
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: clamp(32px, 5vw, 60px);
	line-height: 1.05;
	letter-spacing: -0.02em;
	font-weight: 600;
	margin: 0;
	color: #fff;
	max-width: 18ch;
}

/* ── Single-project meta bar (rendered by [project_meta] shortcode) ──────
 * Clean horizontal data strip — one bottom hairline only (no top border,
 * no per-cell vertical dividers) so it reads as a refined caption row
 * rather than a boxed table. Generous cell padding-bottom + tighter
 * label/value rhythm. */
.cb-project-meta {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
	gap: clamp(24px, 3vw, 48px);
	padding: 0 0 24px;
	margin: 0;
	background: transparent;
	border: 0;
	border-bottom: 1px solid rgba(15, 27, 45, 0.1);
}

.cb-project-meta__row {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 0;
	border-right: 0;
}

.cb-project-meta__row:last-child {
	padding-right: 0;
}

.cb-project-meta dt {
	font-size: 11px;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--wp--preset--color--secondary, #1e5bd8);
	margin: 0;
}

.cb-project-meta dd {
	font-size: 18px;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #0f1b2d);
	margin: 0;
	letter-spacing: -0.005em;
}

@media (max-width: 720px) {

	.cb-project-meta {
		grid-template-columns: repeat(2, 1fr);
	}

	.cb-project-meta__row {
		padding: 16px 16px 16px 0;
	}

	.cb-project-meta__row:nth-child(2n) {
		border-right: 0;
		padding-right: 0;
	}
}

/* Single-project body wrapper — horizontal gutter is fixed at 24px to
 * line up with the header logo on every viewport (the logo always sits
 * at x=24 regardless of width). Generous vertical block padding plus an
 * explicit flex gap between children gives meta / description / any
 * following block its own breathing room — without the gap, the meta
 * row touched the description and the description touched the next
 * section's heading. */

/* (Legacy `.cb-project-meta-band` styles removed — the single-project
 * template now drops breadcrumbs and the project-meta block straight into
 * the white body section, with no dark wrapper between hero and body.) */

/* Body section sits below the hero with a moderate top breathing zone for
 * the breadcrumb trail, then generous bottom padding so the section
 * closes cleanly before the footer. Specificity has to beat the global
 * `.wp-site-blocks > main:not(.cb-page-main) > *` zero-padding reset. */
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-body {
	padding-top: clamp(28px, 3vw, 48px) !important;
	padding-bottom: clamp(96px, 12vw, 160px) !important;
}

.cb-project-body__inner {

	/* border-box so the 1440px max INCLUDES the 24px gutter, matching
   * `.cb-project-hero__inner`'s computation. Without it, body content
   * lands 24px to the LEFT of the hero h1 (the inner ends up 1488px wide
   * and centres differently from the hero's 1440px-wide inner). */
	box-sizing: border-box;
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 24px;
	display: flex;
	flex-direction: column;
}

/* Per-child rhythm: breadcrumbs sit at the top of the body, project-meta
 * tucks tightly under them, then the post content gets a clear visual
 * break before the gallery / paragraph. Using adjacent-sibling margins
 * (instead of a flex gap) lets each transition have its own size. */
.cb-project-body__inner > .cb-breadcrumbs {
	margin: 0;
}

.cb-project-body__inner > .cb-project-meta {
	margin-top: clamp(16px, 1.5vw, 24px);
}

.cb-project-body__inner > .wp-block-post-content {
	margin-top: clamp(40px, 5vw, 64px);
}

/* Override the global `.wp-site-blocks .wp-block-post-content > p` rule
 * which centres post copy at a 720px reading column. Inside the project
 * body we want the description to align UNDER the meta row at the same
 * left edge — keep the 720px reading max for legibility but left-align
 * and drop the inherited 24px horizontal padding (the wrapper already
 * supplies the page gutter via .cb-project-body__inner). */

/* Specificity prefix `.wp-site-blocks` is required to beat the parent
 * styrk-theme's `.wp-site-blocks .wp-block-post-content > p` rule, which
 * loads later in the cascade and centres post copy at 720px. */
.wp-site-blocks .cb-project-body .wp-block-post-content > p,
.wp-site-blocks .cb-project-body .wp-block-post-content > h1,
.wp-site-blocks .cb-project-body .wp-block-post-content > h2,
.wp-site-blocks .cb-project-body .wp-block-post-content > h3,
.wp-site-blocks .cb-project-body .wp-block-post-content > h4,
.wp-site-blocks .cb-project-body .wp-block-post-content > h5,
.wp-site-blocks .cb-project-body .wp-block-post-content > h6,
.wp-site-blocks .cb-project-body .wp-block-post-content > ul,
.wp-site-blocks .cb-project-body .wp-block-post-content > ol {
	margin-left: 0;
	margin-right: 0;
	padding-left: 0;
	padding-right: 0;
}

/* ── Single-project post body typography ───────────────────────────────── */
.cb-project-body .wp-block-post-content {
	font-size: 17px;
	line-height: 1.7;
	color: rgba(15, 27, 45, 0.82);
}

.cb-project-body .wp-block-post-content > * + * {
	margin-top: 1.2em;
}

.cb-project-body .wp-block-post-content > p:first-child {
	font-size: 20px;
	line-height: 1.55;
	color: var(--wp--preset--color--primary, #0f1b2d);
	font-weight: 500;
	margin-bottom: 1.4em;
}

.cb-project-body .wp-block-post-content h2,
.cb-project-body .wp-block-post-content h3 {
	font-family: var(--wp--preset--font-family--display, serif);
	color: var(--wp--preset--color--primary, #0f1b2d);
	letter-spacing: -0.01em;
	margin-top: 1.6em;
	margin-bottom: 0.5em;
}

.cb-project-body .wp-block-post-content h2 {
	font-size: 28px;
	line-height: 1.2;
}

.cb-project-body .wp-block-post-content h3 {
	font-size: 22px;
	line-height: 1.3;
}

.cb-project-body .wp-block-post-content img,
.cb-project-body .wp-block-post-content .wp-block-image {
	border-radius: 12px;
	overflow: hidden;
}

.cb-project-body .wp-block-post-content figure {
	margin: 2em 0;
}

.cb-project-body .wp-block-post-content blockquote {
	border-left: 3px solid var(--wp--preset--color--accent, #f5833c);
	padding: 8px 0 8px 24px;
	margin: 1.6em 0;
	font-family: var(--wp--preset--font-family--display, serif);
	font-size: 22px;
	line-height: 1.4;
	color: var(--wp--preset--color--primary, #0f1b2d);
}

/* ── Back-to-archive section ──────────────────────────────────────────────
 * Full-width band sitting after the testimonials. The inner container
 * matches the body / hero gutter so the button anchors at the same left
 * edge as everything above it instead of floating in a narrow centred
 * column. Button itself is a filled primary CTA — readable as a real
 * action, not a tertiary text link. */
.cb-project-back-wrap {
	background: var(--wp--preset--color--surface, #f4f5f7);
}

/* Same specificity-prefix dance as .cb-project-body above — needed so the
 * back-button section's vertical padding survives the global wrapper-spacing
 * reset that zero-pads every direct child of <main>. */
.wp-site-blocks > main:not(.cb-page-main) > .cb-project-back-wrap {
	padding-block: clamp(80px, 10vw, 128px) !important;
}

.cb-project-back-wrap__inner {
	max-width: 1440px;
	margin-inline: auto;
	padding-inline: 24px;
}

.cb-project-back {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	padding: 14px 22px;
	background: var(--wp--preset--color--primary, #0f1b2d);
	color: #fff;
	border: 1.5px solid var(--wp--preset--color--primary, #0f1b2d);
	border-radius: 999px;
	font-family: var(--wp--preset--font-family--base, sans-serif);
	font-size: 14.5px;
	font-weight: 600;
	letter-spacing: 0.01em;
	text-decoration: none;
	transition: background-color 0.2s ease, color 0.2s ease, gap 0.2s ease, transform 0.2s ease;
}

.cb-project-back:hover,
.cb-project-back:focus-visible {
	background: var(--wp--preset--color--primary, #0f1b2d);
	color: #fff;
	gap: 14px;
	transform: translateX(-2px);
}

.cb-project-back svg {
	transition: transform 0.2s ease;
	flex: 0 0 auto;
}

.cb-project-back:hover svg {
	transform: translateX(-2px);
}

/* ── Featured-projects card ────────────────────────────────────────────── */
.cb-project-card {
	transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.cb-project-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

/* Editor-only override: the frontend hover lift (translateY + box-shadow)
   reads as a "bright white flash surrounding the card" inside the
   Gutenberg editor because the 2px lift briefly exposes the parent
   surface between repaints. Editor-rendered cards always carry
   data-drag-index (set by useDragSort) — frontend cards don't — so this
   selector cleanly disables the lift only where it's distracting. */
.cb-project-card[data-drag-index]:hover {
	transform: none;
	box-shadow: none;
}

.cb-project-card__badge {
	position: absolute;
	top: 12px;
	left: 12px;
	background: var(--wp--preset--color--accent, #1e5bd8);
	color: #fff;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	padding: 4px 10px;
	border-radius: 999px;
	z-index: 1;
}

.cb-project-card__meta {
	color: var(--wp--preset--color--secondary, #475569);
}

/* ── Testimonials card ─────────────────────────────────────────────────── */
.cb-testimonial-card {
	position: relative;
	background: #fff;
	border-radius: 16px;

	/* Right padding bumped so the long-form quote text never runs under the
   * decorative ::before quote glyph in the top-right corner. The glyph
   * occupies ~64px of horizontal space — 96px keeps a comfortable gap. */
	padding: 32px 96px 28px 32px;
	border: 1px solid rgba(15, 27, 45, 0.1);
	box-shadow: 0 1px 2px rgba(15, 27, 45, 0.04);
	display: flex;
	flex-direction: column;
	gap: 20px;
	transition: transform 0.25s ease, box-shadow 0.25s ease, border-color 0.25s ease;
}

.cb-testimonial-card:hover {
	transform: translateY(-2px);
	box-shadow: 0 12px 28px rgba(15, 27, 45, 0.1);
	border-color: rgba(15, 27, 45, 0.16);
}

.cb-testimonial-card::before {
	content: "\201C";
	position: absolute;
	top: 12px;
	right: 28px;
	font-family: Georgia, serif;
	font-size: 96px;
	line-height: 1;
	color: var(--wp--preset--color--accent, #f5833c);
	opacity: 0.18;
	pointer-events: none;
}

.cb-testimonial-card__rating {
	font-size: 16px;
	letter-spacing: 3px;
	color: var(--wp--preset--color--accent, #f5833c);
	margin: 0;
}

.cb-testimonial-card blockquote {
	font-family: var(--wp--preset--font-family--display, serif);
	font-style: normal;
	font-weight: 500;
	font-size: 19px;
	line-height: 1.55;
	color: var(--wp--preset--color--primary, #0f1b2d);
	margin: 0;
	padding: 0;
	border: 0;
	position: relative;
}

.cb-testimonial-card__attr {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-top: auto;
	padding-top: 20px;
	border-top: 1px solid rgba(15, 27, 45, 0.08);
}

.cb-testimonial-card__avatar {
	flex: none;
	width: 44px;
	height: 44px;
	border-radius: 50%;
	-o-object-fit: cover;
	   object-fit: cover;
	box-shadow: 0 0 0 1px rgba(15, 27, 45, 0.08);
}

.cb-testimonial-card__attr-text {
	display: flex;
	flex-direction: column;
	gap: 2px;
	min-width: 0;
}

.cb-testimonial-card__name {
	font-size: 15px;
	font-weight: 600;
	color: var(--wp--preset--color--primary, #0f1b2d);
	line-height: 1.3;
}

.cb-testimonial-card__role {
	font-size: 13px;
	color: rgba(15, 27, 45, 0.6);
	line-height: 1.3;
}

/* ── Featured-projects + testimonials shared section header ─────────────
   `text-align` USED to be hardcoded to center, but the FP block now lets
   editors pick left / centre / right via the headingAlign attr. The block
   template emits `text-left|text-center|text-right` on this element —
   AND we use the same class to align the 720px-capped box itself within
   the section so a "left" choice pushes the header to the section's left
   edge (matching the project cards below it), not just left-aligns the
   text inside a centred box. */
.cb-featured-projects__header,
.cb-testimonials__header {
	max-width: 720px;
	margin-bottom: clamp(24px, 4vw, 48px);
}

.cb-featured-projects__header.text-left {
	margin-left: 0;
	margin-right: auto;
}

.cb-featured-projects__header.text-center {
	margin-left: auto;
	margin-right: auto;
}

.cb-featured-projects__header.text-right {
	margin-left: auto;
	margin-right: 0;
}

.cb-testimonials__header {
	text-align: center;
	margin-left: auto;
	margin-right: auto;
}

.cb-featured-projects__heading,
.cb-testimonials__heading {
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary, #00486a);
}

.cb-featured-projects__intro,
.cb-testimonials__intro {
	margin: 0;
	color: var(--wp--preset--color--secondary, #475569);
	font-size: 18px;
	line-height: 1.6;
}

/* ── Aktuelt / News block ───────────────────────────────────────────────
   News cards reuse the `.cb-project-card` chrome (hover lift, border,
   surface) so the two query-grid blocks read consistently. Only the
   section header + the date-meta colour are scoped to `cb-aktuelt`. The
   header rules mirror `.cb-featured-projects__header` exactly so the
   eyebrow/heading/intro align identically across the two blocks. */
.cb-aktuelt__header {
	max-width: 720px;
	margin-bottom: clamp(24px, 4vw, 48px);
}

.cb-aktuelt__header.text-left {
	margin-left: 0;
	margin-right: auto;
}

.cb-aktuelt__header.text-center {
	margin-left: auto;
	margin-right: auto;
}

.cb-aktuelt__header.text-right {
	margin-left: auto;
	margin-right: 0;
}

.cb-aktuelt__heading {
	margin: 0 0 12px;
	color: var(--wp--preset--color--primary, #00486a);
}

.cb-aktuelt__intro {
	margin: 0;
	color: var(--wp--preset--color--secondary, #475569);
	font-size: 18px;
	line-height: 1.6;
}

/* Card title: clamp to 2 lines AND always reserve 2 lines of height, so the
 * date/meta below sits at the same spot on every card regardless of title
 * length. leading-tight = line-height 1.25, so 2 lines = 2.5em. */
.cb-aktuelt-card__title {
	display: -webkit-box;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	overflow: hidden;
	min-height: 2.5em;
}

.cb-aktuelt-card__meta {
	color: var(--wp--preset--color--secondary, #475569);
}

/* Tag pills on the card — small, muted, non-interactive (the whole card is a
 * link, so these are plain spans). */
.cb-aktuelt-card__tags {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
}

.cb-aktuelt-card__tag {
	display: inline-block;
	padding: 2px 10px;
	font-size: 12px;
	font-weight: 600;
	line-height: 1.5;
	letter-spacing: 0.02em;
	border-radius: 999px;
	background: var(--wp--preset--color--surface, #f4f5f7);
	color: var(--wp--preset--color--primary, #00486a);
}

/* Archive pagination — centred row of page links. */
.cb-aktuelt__pagination {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	gap: 8px;
	margin-top: clamp(2rem, 4vw, 3.5rem);
}

.cb-aktuelt__pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 44px;
	height: 44px;
	padding: 0 12px;
	border-radius: 10px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary, #00486a);
	background: var(--wp--preset--color--surface, #f4f5f7);
}

.cb-aktuelt__pagination .page-numbers.current {
	background: var(--wp--preset--color--primary, #00486a);
	color: #fff;
}

.cb-aktuelt__pagination .page-numbers.dots {
	background: transparent;
}

/* ── Hero block — accent line (frontend) + in-canvas toggle (editor) ───────
 * Frontend: `.cb-hero__accent-rule` is the 64×3px amber bar rendered by
 * template.php when the admin enables `showAccentLine`. Skin tokens (exact
 * colour, brand weight) live in the companion theme — the plugin ships
 * sensible default proportions only.
 *
 * Editor: `.cb-hero__accent-toggle` is the click-target rendered by
 * edit.tsx in place of the rule. Off-state shows a dashed amber ghost with a
 * "+ accent line" label; on-state shows the solid bar that still flips off
 * on click. Matches the page-builder feel — affordances live on the block,
 * not in the right pane.
 *
 * Heads-up: width/height stay in sync between the two states (and with
 * `.cb-page-header__rule` in companion themes) so the editor preview matches
 * the rendered frontend without per-skin overrides. */

/* Plugin default mirrors `.cb-page-header__rule` (cross-client neutral —
 * teal/blue secondary, 96×2px). Companion themes tune dimensions + colour
 * (Styrk overrides to 64×3px amber to match its page-header treatment). */
.cb-hero__accent-rule {
	display: block;
	width: 96px;
	height: 2px;
	background: var(--cb-secondary, #0084af);
	border: 0;
	margin: 24px 0 0;
}

/* ── Optional hero lead / ingress ─────────────────────────────────────────
 * Transparent paragraph pinned to the bottom of the hero, over the imagery
 * ("gjennomsiktig ingress over hero-vannet"). Bold navy ingress type from the
 * design mockup's `.lead`. Aligns with the hero heading via the shared rail. */
.cb-hero__lead {
	margin: 0;
	max-width: 64ch;

	/* Brand display face (Josefin Sans) for the hero ingress — matches the
     design profile / the live hywer.no hero intro. The theme registers it
     under the `display` slug; `--body` was never defined, so the old rule
     silently fell back to Lato. Regular weight keeps the paragraph from
     reading "too fat". */
	font-family: var(--wp--preset--font-family--display, "Josefin Sans", system-ui, -apple-system, sans-serif);
	font-weight: 400;
	font-size: clamp(1.1rem, 1.7vw, 1.5rem);
	line-height: 1.5;
	color: var(--wp--preset--color--primary, #00486a);
	text-wrap: pretty;
}

/* The ingress sits on its own (light) band, not over the photo, so the
   hero-wide text-shadow on `.cb-hero p` (added for white text over imagery)
   only blurs the dark ingress type. Drop it here — `.cb-hero p.cb-hero__lead`
   outspecifies `.cb-hero p`, so this actually wins. */
.cb-hero p.cb-hero__lead {
	text-shadow: none;
}

/* The `margin:0` above would defeat the alignment utilities (mx-auto / mr-auto /
 * ml-auto have equal specificity but lose on source order), so the capped-width
 * ingress block never actually moved. Restore the self-margins at higher
 * specificity so block placement works: left = mr-auto, centre = mx-auto (block
 * centred, text stays left), right = ml-auto. */
.cb-hero__lead.mx-auto {
	margin-inline: auto;
}

.cb-hero__lead.mr-auto {
	margin-right: auto;
}

.cb-hero__lead.ml-auto {
	margin-left: auto;
}

/* Generous symmetric padding so the ingress panel reads full — matching the
   design file (the text sits with ample air above and below, not jammed to
   the top edge of the band). */
.cb-hero__lead-inner {
	padding-block: clamp(2.75rem, 5vw, 4.5rem);
}

/* Editor: the lead RichText + its remove trash sit inline; no absolute
   positioning in the canvas so it stays easy to select and edit. */
.cb-hero__lead-edit {
	display: flex;
	align-items: flex-start;
	gap: 10px;

	/* Bleed over BOTH the AlignZone's own padding (36px top, 4px sides/bottom)
     AND the hero section's px-6 (24px) horizontal padding, so the background
     fills the ENTIRE section edge-to-edge — matching the frontend's
     `inset-x-0` band — not just a box around the text or the content column.
     Side bleed = 4px (AlignZone) + 24px (section px-6) = 28px. The section's
     overflow-hidden clips the band exactly at its edges. The generous inner
     padding gives the text its air and keeps it clear of the chip bar. */
	width: 100%;
	margin: -36px -28px -4px;
	padding: clamp(2.75rem, 5vw, 4.5rem) clamp(1.5rem, 3vw, 3rem);
	box-sizing: border-box;
}

.cb-hero__lead-edit .cb-hero__lead {
	flex: 1 1 auto;
}

/* In-canvas vertical-placement control (editor only). A small box with a bar
   pinned top / centre / bottom indicates where the hero content sits. */
.cb-hero__valign {

	/* In-flow at the start of the hero content stack (was absolutely pinned to
     the section's top-left, which overlapped the top SectionControls band).
     Self-aligns left and only takes its own width so it never sits under the
     band or stretches across the content. */
	position: relative;
	z-index: 30;
	align-self: flex-start;
	display: inline-flex;
	flex-direction: column;
	gap: 4px;
	padding: 4px;
	background: rgba(0, 0, 0, 0.4);
	backdrop-filter: blur(6px);
	border-radius: 8px;
}

.cb-hero__valign-btn {
	width: 28px;
	height: 28px;
	display: grid;
	place-items: center;
	border: 0;
	border-radius: 6px;
	background: transparent;
	cursor: pointer;
	transition: background 0.15s ease;
}

.cb-hero__valign-btn:hover {
	background: rgba(255, 255, 255, 0.12);
}

.cb-hero__valign-btn.is-active {
	background: var(--wp--preset--color--accent, #f5833c);
}

.cb-hero__valign-glyph {
	position: relative;
	width: 16px;
	height: 16px;
	border: 1.5px solid rgba(255, 255, 255, 0.7);
	border-radius: 3px;
}

.cb-hero__valign-btn.is-active .cb-hero__valign-glyph {
	border-color: var(--rl-ink, #15212b);
}

.cb-hero__valign-glyph::after {
	content: "";
	position: absolute;
	left: 2px;
	right: 2px;
	height: 3px;
	background: rgba(255, 255, 255, 0.85);
}

.cb-hero__valign-btn.is-active .cb-hero__valign-glyph::after {
	background: var(--rl-ink, #15212b);
}

.cb-hero__valign-glyph--top::after {
	top: 1.5px;
}

.cb-hero__valign-glyph--center::after {
	top: 50%;
	transform: translateY(-50%);
}

.cb-hero__valign-glyph--bottom::after {
	bottom: 1.5px;
}

/* Editor-only "add" affordances (+ ingress, + eyebrow, + CTA, …). Rendered as
   an always-visible labelled pill so authors can find and re-add a removed
   element — the old hover-only dashed line was invisible over hero imagery,
   so a removed ingress looked permanently gone. */
.cb-hero__accent-toggle {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	display: inline-flex;
	align-items: center;
	align-self: flex-start;   /* hug the label instead of stretching full-width */
	gap: 6px;
	width: auto;
	min-height: 28px;
	padding: 5px 14px;
	margin: 12px 0 4px;
	background: rgba(255, 255, 255, 0.94);
	border: 1px dashed var(--wp--preset--color--accent, #f0a83c);
	border-radius: 999px;
	cursor: pointer;
	position: relative;
	color: var(--wp--preset--color--primary, #00486a);
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
	transition:
		background 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cb-hero__accent-toggle:hover,
.cb-hero__accent-toggle:focus-visible {
	background: #fff;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}

.cb-hero__accent-toggle-label {
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: inherit;
	white-space: nowrap;
}

.cb-hero__accent-toggle:focus-visible {
	outline: 2px solid var(--wp-admin-theme-color, #007cba);
	outline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {

	.cb-hero__accent-toggle {
		transition: none;
	}
}

/* ══════════════════════════════════════════════════════════════════════════
   VIDEO REELS — frontend layout
   Styles template.php output: dark ink band, featured player + tile grid.
   view.js wires play / swap / drag. Colors pull from theme tokens so each
   client's palette auto-applies; only the fallback hex values reference the
   Styrk brand defaults.
   ══════════════════════════════════════════════════════════════════════════ */
.styrk-reels {
	--rl-ink: var(--wp--preset--color--primary, #00486a);
	--rl-paper: var(--wp--preset--color--surface, #fafaf8);
	--rl-accent: var(--wp--preset--color--accent, #f5833c);
	--rl-muted: rgba(255, 255, 255, 0.55);
	--rl-hair: rgba(255, 255, 255, 0.12);
	--rl-mono: ui-monospace, sfmono-regular, "JetBrains Mono", monospace;
	position: relative;
	padding: 0;
	background: var(--rl-ink);
	color: var(--rl-paper);
	overflow: hidden;
}

.styrk-reels::before {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
	background-image: radial-gradient(circle at 1px 1px, rgba(255, 255, 255, 0.025) 1px, transparent 0);
	background-size: 3px 3px;
}

.styrk-reels .reels-inner {
	max-width: var(--wp--style--global--wide-size, 1440px);
	margin: 0 auto;
	position: relative;
	padding: clamp(64px, 8vw, 130px) clamp(16px, 4vw, 56px);
}

.styrk-reels.alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* head */
.styrk-reels .reels-head {
	display: grid;
	grid-template-columns: 1fr auto;
	gap: 32px;
	align-items: end;
	padding-bottom: 28px;
	border-bottom: 1px solid var(--rl-hair);
	margin-bottom: 44px;
}

.styrk-reels .rl-label {
	font-family: var(--rl-mono);
	font-size: 12px;
	color: var(--rl-accent);
	letter-spacing: 0.06em;
	margin: 0 0 14px;
	display: inline-flex;
	align-items: center;
	gap: 10px;
	text-transform: uppercase;
}

.styrk-reels .rl-label .rec {
	width: 8px;
	height: 8px;
	background: var(--rl-accent);
	border-radius: 50%;
	animation: styrk-rec 2.2s ease infinite;
	transform: translateY(-1px);
}

@keyframes styrk-rec {

	0% {
		box-shadow: 0 0 0 0 rgba(245, 131, 60, 0.5);
	}

	70% {
		box-shadow: 0 0 0 10px rgba(245, 131, 60, 0);
	}

	100% {
		box-shadow: 0 0 0 0 rgba(245, 131, 60, 0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.styrk-reels .rl-label .rec {
		animation: none;
	}
}

/* Eyebrow marker shape variants (none|dot|dash|line). `dot` is the round
 * pulsing default above; dash + line are static bars. Applied on both the front
 * end (.styrk-reels) and the editor preview (.styrk-reels--edit). */
.styrk-reels .rl-label .rec.rec--dash,
.styrk-reels--edit .rl-label .rec.rec--dash {
	width: 16px;
	height: 3px;
	border-radius: 1px;
	animation: none;
}

.styrk-reels .rl-label .rec.rec--line,
.styrk-reels--edit .rl-label .rec.rec--line {
	width: 3px;
	height: 14px;
	border-radius: 1px;
	animation: none;
}

/* Eyebrow marker glyph picker (editor chrome). Segmented control sitting on the
 * dark/plum eyebrow control bar — high contrast so the glyphs read clearly
 * (none ∅ / dot ● / dash — / line │); the active glyph is a light pill. */
.cb-marker-picker {
	display: inline-flex;
	align-items: center;
	gap: 2px;
	background: rgba(0, 0, 0, 0.22);
	border-radius: 7px;
	padding: 2px;
}

.cb-marker-picker__btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 26px;
	height: 24px;
	padding: 0 5px;
	border: 0;
	cursor: pointer;
	background: transparent;
	color: #fff;
	opacity: 0.72;
	font-size: 13px;
	line-height: 1;
	border-radius: 5px;
	transition: background 0.12s ease, opacity 0.12s ease, color 0.12s ease;
}

.cb-marker-picker__btn:hover {
	opacity: 1;
	background: rgba(255, 255, 255, 0.16);
}

.cb-marker-picker__btn:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 1px;
}

.cb-marker-picker__btn.is-active {
	opacity: 1;
	background: #fff;
	color: #12233a;
	font-weight: 700;
}

.styrk-reels .reels-head h2 {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	font-size: clamp(34px, 5vw, 68px);
	line-height: 0.95;
	letter-spacing: -0.01em;
	margin: 0;
}

.styrk-reels .reels-head h2 em {
	font-style: normal;
	color: var(--rl-accent);
}

.styrk-reels .meta-right {
	text-align: right;
	font-family: var(--rl-mono);
	font-size: 14px;
	color: var(--rl-muted);
	letter-spacing: 0.02em;
	line-height: 1.7;
}

.styrk-reels .meta-right b {
	color: var(--rl-paper);
	font-weight: 600;
}

.styrk-reels .reels-intro {
	margin: 16px 0 0;
	max-width: 56ch;
	font-size: 16px;
	line-height: 1.55;
	color: var(--rl-muted);
}

/* featured stage: fixed-width left column + tile grid right */
.styrk-reels .reels-stage {
	display: grid;
	grid-template-columns: clamp(420px, 44vw, 620px) minmax(0, 1fr);
	gap: 40px;
	align-items: start;
}

/* Single-clip reel: no support strip, so collapse to one column sized to the
   featured player — otherwise the empty strip column would leave dead space. */
.styrk-reels .reels-stage.is-solo {
	grid-template-columns: minmax(0, clamp(420px, 44vw, 620px));
}

.styrk-reels .reels-featured-col {
	display: flex;
	flex-direction: column;
	gap: 18px;
	min-width: 0;
}

.styrk-reels .stage-text {
	padding-top: 0;
}

/* Tile grid — columns come from --rl-grid (set inline by template.php from the
   `stripColumns` attribute, capped at clip count). Falls back to 4 columns for
   any pre-existing markup that doesn't ship the property. */
.styrk-reels .reels-slider {
	display: grid;
	grid-template-columns: var(--rl-grid, repeat(4, minmax(0, 1fr)));
	gap: 16px;
	padding-bottom: 4px;
}

.styrk-reels .reels-slider::-webkit-scrollbar {
	display: none;
}

.styrk-reels .reels-slider.dragging {
	cursor: grabbing;
	scroll-snap-type: none;
}

.styrk-reels .reels-slider .reel-tile {
	scroll-snap-align: start;
}

.styrk-reels .stage-text .client {
	font-family: var(--rl-mono);
	font-size: 12px;
	color: var(--rl-accent);
	letter-spacing: 0.1em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

.styrk-reels .stage-text h3 {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	font-size: clamp(26px, 3vw, 44px);
	line-height: 1;
	letter-spacing: -0.01em;
	margin: 0 0 16px;
}

.styrk-reels .stage-text p {
	font-size: 16px;
	color: var(--rl-muted);
	line-height: 1.55;
	max-width: 48ch;
	margin: 0;
}

/* shared player chrome */
.styrk-reels .player {
	position: relative;
	background: #000;
	border-radius: 14px;
	overflow: hidden;
	cursor: pointer;
	width: 100%;
}

.styrk-reels .player.vertical {
	aspect-ratio: 9 / 16;
	max-height: 80vh;
}

.styrk-reels .player.landscape {
	aspect-ratio: 16 / 9;
	min-height: 360px;
}

.styrk-reels .player video,
.styrk-reels .reel-tile video {
	position: absolute !important;
	inset: 0 !important;
	width: 100% !important;
	height: 100% !important;
	-o-object-fit: cover !important;
	   object-fit: cover !important;
	background: #000;
}

.styrk-reels .scrim {
	position: absolute;
	inset: 0;
	pointer-events: none;
	background: linear-gradient(180deg, rgba(0, 0, 0, 0.35) 0%, transparent 28%, transparent 58%, rgba(0, 0, 0, 0.85) 100%);
	transition: opacity 0.3s ease;
}

.styrk-reels .topbar {
	position: absolute;
	top: 14px;
	left: 14px;
	right: 14px;
	display: flex;
	justify-content: space-between;
	z-index: 4;
	transition: opacity 0.3s ease;
}

.styrk-reels .tag,
 .styrk-reels .duration {
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--rl-mono);
	font-size: 13px;
	letter-spacing: 0.06em;
	padding: 7px 11px;
	border-radius: 4px;
}

/* The duration badges are populated by view.js from each video's metadata.
   Until that fires (or if metadata never loads) the element is empty — never
   render an empty styled pill. */
.styrk-reels .duration:empty,
 .styrk-reels .duration-mini:empty {
	display: none;
}

.styrk-reels .tag.live {
	background: var(--rl-accent);
	color: var(--rl-ink);
	font-weight: 700;
}

.styrk-reels .play-big {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 84px;
	height: 84px;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.96);
	color: var(--rl-ink);
	display: grid;
	place-items: center;
	z-index: 4;
	border: 0;
	cursor: pointer;
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
	transition: transform 0.15s ease, background 0.15s ease, opacity 0.2s ease;
}

.styrk-reels .player:hover .play-big {
	transform: translate(-50%, -50%) scale(1.06);
	background: var(--rl-accent);
}

.styrk-reels .play-big::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 18px solid currentcolor;
	border-top: 12px solid transparent;
	border-bottom: 12px solid transparent;
	margin-left: 5px;
}

.styrk-reels .caption {
	position: absolute;
	left: 18px;
	right: 18px;
	bottom: 18px;
	z-index: 3;
	transition: opacity 0.3s ease;
}

.styrk-reels .caption .pcompany {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	font-size: 22px;
	line-height: 1.05;
	color: #fff;
}

.styrk-reels .caption .pperson {
	font-family: var(--rl-mono);
	font-size: 12px;
	color: var(--rl-accent);
	letter-spacing: 0.08em;
	text-transform: uppercase;
	margin-top: 5px;
}

/* Playing state: show native controls, fade all chrome */
.styrk-reels .playing video {
	z-index: 5;
	-o-object-fit: contain !important;
	   object-fit: contain !important;
	background: #000;
}

.styrk-reels .playing .play-big {
	opacity: 0;
	pointer-events: none;
}

.styrk-reels .playing .scrim,
.styrk-reels .playing .topbar,
.styrk-reels .playing .caption,
.styrk-reels .playing .play-mini,
.styrk-reels .playing .info,
.styrk-reels .playing .duration-mini {
	opacity: 0;
	pointer-events: none;
}

/* strip */
.styrk-reels .reels-strip-head {
	display: flex;
	justify-content: space-between;
	align-items: end;
	margin: 8px 0 18px;
	padding-bottom: 14px;
	border-bottom: 1px solid var(--rl-hair);
}

.styrk-reels .reels-strip-head h3 {
	font-family: var(--rl-mono);
	font-weight: 500;
	font-size: 12px;
	letter-spacing: 0.04em;
	margin: 0;
	color: var(--rl-muted);
	text-transform: uppercase;
}

.styrk-reels .nav-arrows {
	display: flex;
	gap: 8px;
}

.styrk-reels .nav-arrows button {
	width: 38px;
	height: 38px;
	border-radius: 50%;
	border: 1px solid var(--rl-hair);
	color: #fff;
	background: transparent;
	cursor: pointer;
	display: grid;
	place-items: center;
	transition: all 0.15s ease;
	font-size: 15px;
}

.styrk-reels .nav-arrows button:hover {
	background: var(--rl-accent);
	border-color: var(--rl-accent);
	color: var(--rl-ink);
}

.styrk-reels .reels-strip {
	display: grid;
	grid-auto-flow: column;
	grid-auto-columns: minmax(248px, 1fr);
	gap: 18px;
	overflow-x: auto;
	padding-bottom: 12px;
	scroll-snap-type: x mandatory;
}

.styrk-reels.is-equal .reels-strip {
	grid-auto-flow: row;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-columns: auto;
	overflow: visible;
}

@media (max-width: 900px) {

	.styrk-reels.is-equal .reels-strip {
		grid-template-columns: repeat(2, 1fr);
	}
}

@media (max-width: 560px) {

	.styrk-reels.is-equal .reels-strip {
		grid-template-columns: 1fr;
	}
}

/* tiles */
.styrk-reels .reel-tile {
	aspect-ratio: 9 / 16;
	position: relative;
	border-radius: 10px;
	overflow: hidden;
	background: #000;
	cursor: pointer;
	scroll-snap-align: start;
}

.styrk-reels .reel-tile.is-landscape {
	aspect-ratio: 16 / 9;
}

/* Grid orientation lock: every tile takes the featured clip's aspect. */
.styrk-reels .reels-slider.is-featured-portrait  .reel-tile {
	aspect-ratio: 9 / 16;
}

.styrk-reels .reels-slider.is-featured-landscape .reel-tile {
	aspect-ratio: 16 / 9;
}

.styrk-reels .reel-tile .play-mini {
	position: absolute;
	top: 10px;
	right: 10px;
	width: 30px;
	height: 30px;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	display: grid;
	place-items: center;
	z-index: 2;
	transition: background 0.15s ease, opacity 0.3s ease;
}

.styrk-reels .reel-tile:hover .play-mini {
	background: var(--rl-accent);
}

.styrk-reels .reel-tile .play-mini::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 8px solid #fff;
	border-top: 5px solid transparent;
	border-bottom: 5px solid transparent;
	margin-left: 2px;
	transition: border-color 0.15s ease;
}

.styrk-reels .reel-tile:hover .play-mini::before {
	border-left-color: var(--rl-ink);
}

.styrk-reels .reel-tile .duration-mini {
	position: absolute;
	top: 12px;
	left: 12px;
	background: rgba(0, 0, 0, 0.6);
	backdrop-filter: blur(8px);
	color: #fff;
	font-family: var(--rl-mono);
	font-size: 12px;
	letter-spacing: 0.04em;
	padding: 5px 9px;
	border-radius: 4px;
	z-index: 2;
	transition: opacity 0.3s ease;
}

.styrk-reels .reel-tile .info {
	position: absolute;
	left: 16px;
	right: 16px;
	bottom: 16px;
	z-index: 2;
	transition: opacity 0.3s ease;
}

.styrk-reels .reel-tile .info .client {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	font-size: 20px;
	line-height: 1.05;
	color: #fff;
}

.styrk-reels .reel-tile .info .person {
	font-family: var(--rl-mono);
	font-size: 13px;
	color: var(--rl-accent);
	letter-spacing: 0.05em;
	text-transform: uppercase;
	margin-top: 5px;
}

.styrk-reels :where(.player, .reel-tile):focus-visible {
	outline: 2px solid var(--rl-accent);
	outline-offset: 3px;
}

/* Active tile: accent outline + glow so the current clip reads at a glance. */
.styrk-reels .reel-tile.is-current {
	outline: 2px solid var(--rl-accent);
	outline-offset: 3px;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--rl-accent) 22%, transparent);
}

.styrk-reels .reel-tile.is-current .play-mini {
	opacity: 0.5;
}

.styrk-reels .reel-tile:not(.is-current):hover {
	outline: 1.5px solid rgba(255, 255, 255, 0.55);
	outline-offset: 3px;
}

/* Persistent star badge on the OG-featured tile. */
.styrk-reels .reel-tile__star {
	position: absolute;
	top: 10px;
	left: 10px;
	z-index: 3;
	width: 26px;
	height: 26px;
	display: grid;
	place-items: center;
	border-radius: 50%;
	background: rgba(0, 0, 0, 0.55);
	backdrop-filter: blur(8px);
	color: var(--rl-accent);
	font-size: 15px;
	line-height: 1;
	pointer-events: none;
}

/* tablet: stack featured + slider vertically */
@media (max-width: 980px) {

	.styrk-reels .reels-stage {
		grid-template-columns: 1fr;
		gap: 32px;
	}

	.styrk-reels .player.vertical {
		height: auto;
		width: 100%;
		max-width: 460px;
		margin-inline: auto;
	}

	.styrk-reels .player.landscape {
		height: auto;
		width: 100%;
		max-width: 100%;
	}

	.styrk-reels .reels-head {
		grid-template-columns: 1fr;
	}

	.styrk-reels .meta-right {
		text-align: left;
	}
}

@media (max-width: 560px) {

	.styrk-reels .player.vertical {
		max-width: 100%;
	}

	/* Phones: cap at 2 across regardless of the desktop stripColumns setting.
     Overrides the inline --rl-grid because this is a later stylesheet rule
     (the inline style only sets the custom property, not the property here). */
	.styrk-reels .reels-slider {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

/* ── Video Reels — editor-only in-canvas meta editing ─────────────────────
 * The `.meta-right` block on the frontend shows the count + label + subtext
 * the admin sets. In the editor we want admins to edit those strings
 * directly on the block (no right-pane round-trip), per the page-builder
 * preference. When `hideMeta` is true, a "+ meta" pill takes its place so
 * admins can bring the block back without touching the right pane. */
.styrk-reels-edit__meta {
	position: relative;
	padding-right: 28px; /* space for the × close-button */
}

.styrk-reels-edit__meta-count-row {
	display: flex;
	align-items: baseline;
	gap: 6px;
	flex-wrap: wrap;
	justify-content: flex-end;
}

.styrk-reels-edit__meta-label {
	display: inline-block;
	min-width: 6ch;
}

.styrk-reels-edit__meta-label[data-rich-text-placeholder]:empty::before,
.styrk-reels-edit__meta-label[data-rich-text-placeholder]:not(:focus):empty::before {
	opacity: 0.55;
	font-style: italic;
}

.styrk-reels-edit__meta-subtext {
	margin-top: 4px;
}

.styrk-reels-edit__meta-hide {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	position: absolute;
	top: -2px;
	right: 0;
	width: 18px;
	height: 18px;
	border: 0;
	background: transparent;
	color: currentcolor;
	opacity: 0.45;
	cursor: pointer;
	font-size: 16px;
	line-height: 1;
	padding: 0;
	border-radius: 3px;
	transition: opacity 0.15s ease, background 0.15s ease;
}

.styrk-reels-edit__meta-hide:hover,
.styrk-reels-edit__meta-hide:focus-visible {
	opacity: 1;
	background: rgba(0, 0, 0, 0.06);
}

.styrk-reels-edit__meta-toggle {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	align-self: end;
	padding: 6px 12px;
	border: 1px dashed currentcolor;
	background: transparent;
	color: var(--wp--preset--color--accent, #f0a83c);
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	border-radius: 999px;
	cursor: pointer;
	opacity: 0.7;
	transition: opacity 0.15s ease;
}

.styrk-reels-edit__meta-toggle:hover,
.styrk-reels-edit__meta-toggle:focus-visible {
	opacity: 1;
}

/* Block-level BG / Tekst colour chips — editor-only. Sits as an
 * absolutely-positioned cluster at the top-right corner of the block so
 * admins can change colours without leaving the canvas. Mirrors the
 * per-card BG/Tekst chips on feature-cards. The Popover that opens from
 * here is portalled into the editor root and styled by core. */
.styrk-reels--edit {
	position: relative; /* anchor for the BG/Tekst colour-chip cluster */
	background: var(--wp--preset--color--primary, #00486a);
	color: #fff;
	padding: clamp(28px, 4vw, 56px);
	border-radius: 4px;
}

.styrk-reels--edit .reels-inner {
	max-width: 1440px;
	margin: 0 auto;
}

.styrk-reels--edit .reels-head {
	display: flex;
	justify-content: space-between;
	align-items: flex-end;
	gap: 24px;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	padding-bottom: 18px;
	margin-bottom: 26px;
}

.styrk-reels--edit .rl-label {
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5833c);
	display: inline-flex;
	align-items: center;
	gap: 8px;
	margin: 0 0 8px;
}

.styrk-reels--edit .rl-label .rec {
	width: 8px;
	height: 8px;
	border-radius: 50%;
	background: var(--wp--preset--color--accent, #f5833c);
}

.styrk-reels--edit h2 {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	letter-spacing: -0.01em;
	font-size: clamp(26px, 3.5vw, 52px);
	line-height: 1;
	margin: 0;
	color: #fff;
}

.styrk-reels--edit h2 em {
	color: var(--wp--preset--color--accent, #f5833c);
	font-style: normal;
}

.styrk-reels--edit .meta-right {
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 12px;
	color: rgba(255, 255, 255, 0.55);
	text-align: right;
	line-height: 1.6;
}

.styrk-reels-edit__color-chips {
	position: absolute;
	top: 14px;
	right: 14px;
	z-index: 5;
	display: inline-flex;
	gap: 8px;
	padding: 4px;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.35);
	backdrop-filter: blur(8px);
}

.styrk-reels-edit__chip {
	-webkit-appearance: none;
	   -moz-appearance: none;
	        appearance: none;
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 5px 12px 5px 6px;
	border: 0;
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.08);
	color: #fff;
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	cursor: pointer;
	transition: background 0.15s ease, transform 0.1s ease;
}

.styrk-reels-edit__chip:hover,
.styrk-reels-edit__chip:focus-visible {
	background: rgba(255, 255, 255, 0.18);
}

.styrk-reels-edit__chip-dot {
	display: inline-block;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 2px solid transparent;
	background-clip: padding-box;
	flex-shrink: 0;
}

/* ── Video Reels — editor card grid + per-card chrome ─────────────────────
 * 4-column drag-sortable grid mirrors the frontend featured+strip layout.
 * The --edit modifier is only added by edit.tsx so all rules below are
 * inert on the frontend. */
.styrk-reels-edit__grid {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	grid-template-columns: repeat(4, 1fr);
	grid-auto-flow: dense;
	gap: 18px;
}

.styrk-reels-edit__card.is-featured {
	grid-column: span 2;
	grid-row: span 2;
}

@media (max-width: 900px) {

	.styrk-reels-edit__grid {
		grid-template-columns: repeat(2, 1fr);
	}

	.styrk-reels-edit__card.is-featured {
		grid-column: span 2;
		grid-row: auto;
	}
}

/* Always-on transparent outline so toggling is-featured only transitions
 * outline-color, avoiding the white-flash from animating the full shorthand. */
.styrk-reels-edit__card {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 10px;
	background: rgba(255, 255, 255, 0.04);
	border-radius: 12px;
	outline: 2px solid transparent;
	outline-offset: -2px;
	transition: outline-color 0.12s ease, background 0.12s ease;
}

.styrk-reels-edit__card.is-featured {
	outline-color: var(--wp--preset--color--accent, #f5833c);
}

.styrk-reels-edit__card:hover {
	background: rgba(255, 255, 255, 0.07);
}

.styrk-reels-edit__card:not(.is-featured):hover {
	outline-color: color-mix(in srgb, var(--wp--preset--color--accent, #f5833c) 55%, transparent);
}

.styrk-reels-edit__card.is-featured:hover {
	outline-color: var(--wp--preset--color--accent, #f5833c);
}

.styrk-reels-edit__handle:focus,
.styrk-reels-edit__handle:focus-visible {
	outline: 2px solid var(--wp--preset--color--accent, #f5833c);
	outline-offset: 2px;
}

.styrk-reels-edit__media {
	position: relative;
	aspect-ratio: 9 / 16;
	border-radius: 8px;
	overflow: hidden;
	background: #000;
}

.styrk-reels-edit__card.is-landscape .styrk-reels-edit__media {
	aspect-ratio: 16 / 9;
}

/* Grid-level orientation lock — all tiles take the featured clip's aspect
 * so mixed-orientation reels read as one consistent set. */
.styrk-reels-edit__grid.is-featured-portrait  .styrk-reels-edit__media {
	aspect-ratio: 9 / 16;
}

.styrk-reels-edit__grid.is-featured-landscape .styrk-reels-edit__media {
	aspect-ratio: 16 / 9;
}

.styrk-reels-edit__media video {
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	display: block;
}

/* ── Editor usability: cap reel-tile height so the whole block fits on screen ──
 * The portrait 9:16 aspect-ratio made a featured tile render 2–3 screen-heights
 * tall — unusable for editing. In the EDITOR ONLY, drop the aspect-ratio and
 * give tiles a compact fixed height, and stop the featured tile spanning two
 * rows (it stays two columns wide for emphasis). The FRONT END keeps its true
 * 9:16 aspect (those rules live under .styrk-reels, untouched). */
.styrk-reels-edit__media,
.styrk-reels-edit__card.is-landscape .styrk-reels-edit__media,
.styrk-reels-edit__grid.is-featured-portrait .styrk-reels-edit__media,
.styrk-reels-edit__grid.is-featured-landscape .styrk-reels-edit__media {
	aspect-ratio: auto;
	height: 190px;
}

.styrk-reels-edit__card.is-featured {
	grid-row: auto;
}

.styrk-reels-edit__card.is-featured .styrk-reels-edit__media {
	height: 264px;
}

.styrk-reels-edit__placeholder {
	position: absolute;
	inset: 0;
	display: grid;
	place-items: center;
	color: rgba(255, 255, 255, 0.4);
	font-size: 12px;
}

.styrk-reels-edit__handle {
	position: absolute;
	top: 8px;
	left: 8px;
	z-index: 2;
	width: 26px;
	height: 26px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border-radius: 6px;
	color: #fff;
}

.styrk-reels-edit__star {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	width: 30px;
	height: 30px;
	padding: 0;
	display: flex;
	align-items: center;
	justify-content: center;
	background: rgba(0, 0, 0, 0.55);
	border: 0;
	border-radius: 50%;
	cursor: pointer;
}

.styrk-reels-edit__company {
	font-family: var(--wp--preset--font-family--display, "Fraunces", Georgia, serif);
	font-weight: 700;
	font-size: 16px;
	line-height: 1.1;
	color: #fff;
}

.styrk-reels-edit__person {
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 11px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: var(--wp--preset--color--accent, #f5833c);
}

.styrk-reels-edit__row {
	display: flex;
	align-items: center;
	gap: 6px;
	flex-wrap: wrap;
	margin-top: 4px;
}

.styrk-reels-edit__row .components-base-control {
	margin-bottom: 0;
}

.styrk-reels-edit__row .components-button {
	height: 30px;
	min-height: 30px;
	font-size: 12px;
	border-radius: 6px;
}

.styrk-reels-edit__row .components-button.is-secondary {
	background: transparent;
	color: #fff;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.3);
}

.styrk-reels-edit__row .components-button.is-secondary:hover:not(:disabled) {
	color: var(--wp--preset--color--accent, #f5833c);
	box-shadow: inset 0 0 0 1px var(--wp--preset--color--accent, #f5833c);
	background: transparent;
}

.styrk-reels-edit__row .components-button.is-destructive {
	color: rgba(255, 255, 255, 0.55);
	background: transparent;
	padding: 0 6px;
}

.styrk-reels-edit__row .components-button.is-destructive:hover:not(:disabled) {
	color: #ff7a7a;
	background: transparent;
}

.styrk-reels-edit__row .components-select-control__input,
.styrk-reels-edit__row select {
	background: rgba(255, 255, 255, 0.06) !important;
	color: #fff !important;
	border: 0 !important;
	box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.22) !important;
	min-height: 30px !important;
	border-radius: 6px !important;
}

.styrk-reels-edit__row .components-input-control__backdrop {
	border: 0 !important;
	box-shadow: none !important;
}

.styrk-reels-edit__row .components-input-control__container svg {
	fill: rgba(255, 255, 255, 0.6);
}

/* Per-clip delete — trash glyph in this block's dark editor chrome, matching
   the shared ItemActions trash button used by every other block. */
.styrk-reels-edit__remove {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.06);
	color: rgba(255, 255, 255, 0.72);
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}

.styrk-reels-edit__remove:hover,
.styrk-reels-edit__remove:focus-visible {
	background: #fff;
	border-color: rgba(0, 0, 0, 0.12);
	outline: none;
}

/* In-canvas "clips per row" segmented control — same chip aesthetic as the
   rest of the block's controls (no right-pane panel). */
.styrk-reels-edit__stripcols {
	display: flex;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	margin: 4px 0 20px;
}

.styrk-reels-edit__stripcols-label {
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 12px;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, 0.72);
}

.styrk-reels-edit__seg {
	display: inline-flex;
	gap: 4px;
	padding: 4px;
	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(255, 255, 255, 0.14);
	border-radius: 10px;
}

.styrk-reels-edit__seg-btn {
	width: 32px;
	height: 32px;
	border: 0;
	border-radius: 7px;
	background: transparent;
	color: rgba(255, 255, 255, 0.7);
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 13px;
	cursor: pointer;
	transition: background 0.15s ease, color 0.15s ease;
}

.styrk-reels-edit__seg-btn:hover {
	color: #fff;
	background: rgba(255, 255, 255, 0.08);
}

.styrk-reels-edit__seg-btn.is-active {
	background: var(--wp--preset--color--accent, #f5833c);
	color: var(--rl-ink, #15212b);
	font-weight: 700;
}

.styrk-reels-edit__stripcols-help {
	font-family: var(--rl-mono, ui-monospace, monospace);
	font-size: 11px;
	color: rgba(255, 255, 255, 0.42);
}

/* Employee-grid editor-only card-styling chip strip — a small inline row
   shown above the grid that exposes the four block-level card colours
   (bg / name / role / role-bg) as InlineColorChip pills. Frontend never
   emits this markup; it's purely editor chrome. */

/* Single pill that holds both the card-styling and modal-styling columns so
   they read as one consistent row sharing one background. */
.cb-employee-grid__chrome-row {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 8px 0 16px;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.85);
}

/* Each labelled column (Kort-styling / Modal-styling) inside the shared pill —
   no own border/background; the row provides the chrome. */
.cb-employee-grid__card-chrome {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 8px;
	padding: 6px 10px;
}

/* Vertical hairline separating the two columns. */
.cb-employee-grid__card-chrome-divider {
	width: 1px;
	align-self: stretch;
	margin: 6px 0;
	background: rgba(0, 0, 0, 0.14);
}

.cb-employee-grid__card-chrome-label {
	font-size: 11px;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	font-weight: 600;
	color: rgba(0, 0, 0, 0.55);
	margin-right: 4px;
}

:where(.has-primary-background-color, .styrk-dark) .cb-employee-grid__chrome-row {
	background: rgba(255, 255, 255, 0.06);
	border-color: rgba(255, 255, 255, 0.18);
}

:where(.has-primary-background-color, .styrk-dark) .cb-employee-grid__card-chrome-divider {
	background: rgba(255, 255, 255, 0.18);
}

:where(.has-primary-background-color, .styrk-dark) .cb-employee-grid__card-chrome-label {
	color: rgba(255, 255, 255, 0.7);
}

/* ── AlignPicker (the 3-button alignment chip rendered in every block's
       eyebrow / heading / subtext hover-reveal zone) ─────────────────────
   Colours pull from CSS custom properties. Defaults below = light section;
   the :where(.has-primary-background-color, .styrk-dark) selector at the
   end of this file flips the same tokens to a white-tinted palette for
   dark sections, so the same React element auto-adapts to its surrounding
   without any per-block variant prop. */
.cb-alignpicker {
	display: inline-flex;
	gap: 2px;
	background: var(--cb-alignpicker-wrap-bg, rgba(0, 0, 0, 0.06));
	border-radius: 6px;
	padding: 2px;
}

.cb-alignpicker__btn {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 24px;
	background: transparent;
	color: var(--cb-alignpicker-inactive, rgba(0, 0, 0, 0.55));
	border: none;
	border-radius: 4px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.cb-alignpicker__btn:hover {
	color: var(--cb-alignpicker-hover, rgba(0, 0, 0, 0.85));
}

.cb-alignpicker__btn.is-active {
	background: var(--cb-alignpicker-active-bg, var(--wp--preset--color--primary, #00486a));
	color: var(--cb-alignpicker-active-fg, #fff);
}

/* Dark section override. Applies to the wrapping section AND inside the
   Gutenberg editor canvas iframe — same selector covers both. */
:where(.has-primary-background-color, .styrk-dark, [class*="styrk-dark"]) {
	--cb-alignpicker-wrap-bg: rgba(255, 255, 255, 0.12);
	--cb-alignpicker-inactive: rgba(255, 255, 255, 0.78);
	--cb-alignpicker-hover: #fff;
	--cb-alignpicker-active-bg: rgba(255, 255, 255, 0.95);
	--cb-alignpicker-active-fg: var(--wp--preset--color--primary, #0a2020);
}

/* Hero stat-label control bar — a compact, IN-FLOW, wrapping branded bar that
   sits above the label inside the narrow aside column. In-flow (not an absolute
   hover bar) so it wraps within the column and never clips off the right canvas
   edge. Editor-only: these classes only appear in edit.tsx's stat aside. */
.cb-hero-stat__labelbar {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	gap: 6px;
	max-width: 100%;
	margin: 0 auto 10px;
	padding: 6px 8px;
	border-radius: 8px;
	background: color-mix(in srgb, var(--wp--preset--color--accent, #aa6486) 92%, transparent);
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.22);

	/* AlignPicker reads its colours from these vars — force the dark-bar palette
     so the icons stay legible on the accent background regardless of section. */
	--cb-alignpicker-wrap-bg: rgba(255, 255, 255, 0.16);
	--cb-alignpicker-inactive: rgba(255, 255, 255, 0.82);
	--cb-alignpicker-hover: #fff;
	--cb-alignpicker-active-bg: rgba(255, 255, 255, 0.95);
	--cb-alignpicker-active-fg: var(--wp--preset--color--primary, #00486a);
}

.cb-hero-stat__labelbar-title {
	font-size: 10px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.06em;
	color: #fff;
	white-space: nowrap;
}

/* Layout-transparent wrapper: keeps the label span a DIRECT flex child of
   .cb-hero-stat (so its align-self / width behave exactly like the front end),
   while giving edit.tsx a single element to toggle classes on. */
.cb-hero-stat__label-wrap {
	display: contents;
}

/* Inline controls (size select + width toggle) live on the accent bar, so they
   use a white-tinted pill language to read on it. */
.cb-hero-stat__size-select {
	-moz-appearance: none;
	     appearance: none;
	-webkit-appearance: none;
	background: rgba(255, 255, 255, 0.92);
	color: #1e1e1e;
	border: 1px solid rgba(255, 255, 255, 0.35);
	border-radius: 6px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	padding: 3px 8px;
	cursor: pointer;
}

.cb-hero-stat__width-toggle {
	display: inline-flex;
	gap: 2px;
	background: rgba(255, 255, 255, 0.12);
	border-radius: 6px;
	padding: 2px;
}

.cb-hero-stat__width-btn {
	background: transparent;
	color: rgba(255, 255, 255, 0.85);
	border: none;
	border-radius: 4px;
	font: inherit;
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	padding: 3px 9px;
	cursor: pointer;
	transition: background 0.12s, color 0.12s;
}

.cb-hero-stat__width-btn:hover {
	color: #fff;
}

.cb-hero-stat__width-btn.is-active {
	background: rgba(255, 255, 255, 0.95);
	color: var(--wp--preset--color--primary, #00486a);
}

/* ── In-editor control kit ────────────────────────────────────────────────
   Shared, BRANDED chrome for every block's in-editor controls. Uses theme
   tokens so it auto-adapts per site (Hywer navy/plomme) and never inherits
   the WP-admin blue. Editor-only — these classes only appear in edit.tsx.
   Canonical reference: design-system/editor-controls.md. */

/* Stippled control container (EditorPanel). */
.cb-ed-panel {
	display: flex;
	flex-wrap: wrap;
	align-items: flex-start;
	gap: 16px;
	padding: 12px 16px;
	margin-bottom: 20px;
	border: 1px dashed rgba(0, 0, 0, 0.18);
	border-radius: 10px;
	background: rgba(0, 0, 0, 0.02);
}

.cb-ed-panel--stack {
	flex-direction: column;
	align-items: stretch;
	gap: 12px;
}

.cb-ed-label {
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--wp--preset--color--primary, #00486a);
	margin: 0;
}

/* "Add/set content" affordance (ActionButton): dashed stipple + circled +. */
.cb-ed-action {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 8px 14px;
	background: transparent;
	border: 1.5px dashed var(--wp--preset--color--primary, #00486a);
	border-radius: 8px;
	color: var(--wp--preset--color--primary, #00486a);
	font-family: Inter, system-ui, -apple-system, sans-serif;
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	transition:
		border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
 background 0.15s ease;
}

.cb-ed-action:hover,
.cb-ed-action:focus-visible {
	border-color: var(--wp--preset--color--accent, #f5833c);
	color: var(--wp--preset--color--accent, #f5833c);
	background: rgba(0, 0, 0, 0.02);
	outline: none;
}

.cb-ed-action:disabled {
	opacity: 0.5;
	cursor: default;
}

.cb-ed-action__icon {
	display: grid;
	place-items: center;
	width: 18px;
	height: 18px;
	border-radius: 50%;
	border: 1.5px solid currentcolor;
	font-size: 13px;
	line-height: 1;
	font-weight: 700;
}

.cb-ed-icon-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 6px;
	border: 0;
	background: transparent;
	cursor: pointer;
	color: var(--wp--preset--color--primary, #00486a);
}

.cb-ed-icon-btn:hover {
	color: var(--wp--preset--color--accent, #f5833c);
}

/* The purple (accent) hover controller (AlignZone) sits on a dark surface,
   so its inner alignpicker always uses the white-tinted palette for contrast. */
.cb-ed-controller .cb-alignpicker {

	/* The controller chip is plum (accent). A light track + light icons gave the
   * inactive icons ~2.7:1 (below the 3:1 UI minimum). Use a DARK track so the
   * white icons read crisply (≈5:1) — same high-contrast feel as the
   * video-reels pill controls. Active = solid white pill + navy icon. */
	--cb-alignpicker-wrap-bg: rgba(0, 0, 0, 0.28);
	--cb-alignpicker-inactive: rgba(255, 255, 255, 0.95);
	--cb-alignpicker-hover: #fff;
	--cb-alignpicker-active-bg: #fff;
	--cb-alignpicker-active-fg: var(--wp--preset--color--primary, #00354f);
}

@media (prefers-reduced-motion: reduce) {

	.cb-ed-action {
		transition: none;
	}
}

/* ── Hero slider (only when 2+ slides) ───────────────────────────────────── */
.cb-hero__slides {
	position: absolute;
	inset: 0;
	overflow: hidden;
}

.cb-hero__slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	-o-object-fit: cover;
	   object-fit: cover;
	opacity: 0;
	transition: opacity 0.9s ease;
	pointer-events: none;
}

.cb-hero__slide.is-active {
	opacity: 1;
}

@media (prefers-reduced-motion: reduce) {

	.cb-hero__slide {
		transition: none;
	}
}

.cb-hero__dots {
	position: absolute;
	left: 50%;
	bottom: clamp(20px, 4vh, 40px);
	transform: translateX(-50%);
	display: flex;
	gap: 10px;
}

.cb-hero__dot {
	width: 10px;
	height: 10px;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.45);
	cursor: pointer;
	transition: background 0.2s ease, width 0.2s ease, border-radius 0.2s ease;
}

.cb-hero__dot:hover {
	background: rgba(255, 255, 255, 0.75);
}

.cb-hero__dot.is-active {
	background: #fff;
	width: 26px;
	border-radius: 6px;
}

/* ── Services Selector ─────────────────────────────────────────────────────
   Chips switch the active product/service panel. Active chip = plomme. */
.cb-services-selector__inner {
	width: 100%;
}

.cb-services-selector__heading {
	font-family: var(--font-display, "Josefin Sans", sans-serif);
	font-weight: 400;
	line-height: 1.08;
	letter-spacing: 0;
	font-size: clamp(2rem, 4.5vw, 3.4rem);
	color: var(--primary, #00354f);
	margin: 0 0 2.2rem;
	max-width: 16ch;
}

.cb-services-selector__chips {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	max-width: 880px;
	margin-bottom: 2.6rem;
}

.cb-services-selector__chip {
	font-family: var(--font-sans, "Lato", sans-serif);
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	color: var(--primary, #00354f);
	background: var(--secondary, #26b1bd);
	border: none;
	border-radius: 2px;
	padding: 11px 18px;
	cursor: pointer;
	transition: background 0.18s ease;
	white-space: nowrap;
}

.cb-services-selector__chip:hover {
	background: var(--primary, #00354f);
	color: #fff;
}

.cb-services-selector__chip.is-active {
	background: var(--accent, #aa6486);
	color: #fff;
}

.cb-services-selector__panel {
	max-width: 760px;
}

.cb-services-selector__panel.is-active {
	animation: cb-ss-fade 0.35s ease;
}

@keyframes cb-ss-fade {

	from {
		opacity: 0;
		transform: translateY(6px);
	}

	to {
		opacity: 1;
		transform: translateY(0);
	}
}

@media (prefers-reduced-motion: reduce) {

	.cb-services-selector__panel.is-active {
		animation: none;
	}
}

.cb-services-selector__panel-heading {
	font-family: var(--font-display, "Josefin Sans", sans-serif);
	font-weight: 400;
	font-size: clamp(1.5rem, 3vw, 2.1rem);
	color: var(--primary, #00354f);
	margin: 0 0 1.2rem;
}

.cb-services-selector__panel-body {
	color: #3a3a36;
	font-size: 1.05rem;
	line-height: 1.7;
	margin-bottom: 2rem;
}

.cb-services-selector__panel-body p {
	margin: 0 0 1rem;
}

.cb-services-selector__links {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cb-services-selector__link {
	display: inline-flex;
	align-items: center;
	gap: 14px;
	text-decoration: none;
	font-family: var(--font-sans, "Lato", sans-serif);
	font-size: 13px;
	font-weight: 700;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--primary, #00354f);
	width: -moz-fit-content;
	width: fit-content;
}

.cb-services-selector__arrow {
	flex: none;
	width: 34px;
	height: 34px;
	border-radius: 50%;
	background: var(--accent, #aa6486);
	color: #fff;
	display: grid;
	place-items: center;
	transition: background 0.18s ease, transform 0.18s ease;
}

.cb-services-selector__arrow svg {
	width: 16px;
	height: 16px;
}

.cb-services-selector__link:hover .cb-services-selector__arrow {
	background: var(--primary, #00354f);
	transform: translateX(3px);
}

/* Directory layout — landing-page teaser of the mega menu. Each category is a
   plain heading; every sub-page is a rectangular CTA-style button (theme teal,
   navy label, arrow) — one click straight to the page. No tabs. */
.cb-services-selector__directory {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
	gap: 2.6rem 2.4rem;
	width: 100%;
}

.cb-services-selector__col {
	display: flex;
	flex-direction: column;
	gap: 1rem;
}

.cb-services-selector__col-head {
	display: block;
	text-decoration: none;
	margin: 0 0 0.4rem;
	font-family: var(--font-display, "Josefin Sans", sans-serif);
	font-weight: 400;
	font-size: clamp(1.3rem, 2.4vw, 1.85rem);
	line-height: 1.1;
	color: var(--primary, #00354f);
	width: -moz-fit-content;
	width: fit-content;
	transition: color 0.18s ease;
}

a.cb-services-selector__col-head:hover {
	color: var(--accent, #aa6486);
}

.cb-services-selector__col-links {
	display: flex;
	flex-direction: column;
	gap: 0.6rem;
}

/* Rectangular CTA-style fast-link button (mirrors .cb-cta-btn look). */
.cb-services-selector__col-link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	text-decoration: none;
	width: 100%;
	padding: 12px 16px;
	border-radius: var(--cb-btn-radius, 2px);
	background-color: var(--wp--preset--color--secondary, #26b1bd);
	color: var(--wp--preset--color--primary, #00354f);
	font-family: var(--font-sans, "Lato", sans-serif);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	line-height: 1.2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
	transition:
		transform 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cb-services-selector__col-link:hover {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
	color: var(--wp--preset--color--primary, #00354f);
}

.cb-services-selector__col-link:focus-visible {
	outline: 2px solid var(--wp--preset--color--primary, #00354f);
	outline-offset: 2px;
}

.cb-services-selector__btn-arrow {
	flex: none;
	display: grid;
	place-items: center;
}

.cb-services-selector__btn-arrow svg {
	width: 18px;
	height: 18px;
}

@media (prefers-reduced-motion: reduce) {

	.cb-services-selector__col-link {
		transition: box-shadow 0.15s ease;
	}

	.cb-services-selector__col-link:hover {
		transform: none;
	}
}

/* ── Hero slider thumbnail — branded hover/focus affordance, consistent with
   the block's other in-canvas controls (was a static, no-feedback thumbnail). */
.cb-hero__slide-thumb {
	border-radius: 6px;
	transition: box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cb-hero__slide-thumb-frame {
	transition:
		border-color 0.15s cubic-bezier(0.4, 0, 0.2, 1),
		box-shadow 0.15s cubic-bezier(0.4, 0, 0.2, 1);
}

.cb-hero__slide-thumb:hover .cb-hero__slide-thumb-frame,
.cb-hero__slide-thumb:focus-visible .cb-hero__slide-thumb-frame {
	border-color: var(--wp--preset--color--accent, #f0a83c);
	box-shadow: 0 0 0 2px var(--wp--preset--color--accent, #f0a83c);
}

.cb-hero__slide-thumb:focus-visible {
	outline: 2px solid var(--wp-admin-theme-color, #007cba);
	outline-offset: 3px;
}

/* ── Video-reels: editor dot mirrors the frontend pulse + honors an inline
   colour from template.php (the editor dot previously had no animation). */
.styrk-reels--edit .rl-label .rec {
	animation: styrk-rec 2.2s ease infinite;
}

@media (prefers-reduced-motion: reduce) {

	.cb-hero__slide-thumb,
	.cb-hero__slide-thumb-frame {
		transition: none;
	}

	.styrk-reels--edit .rl-label .rec {
		animation: none;
	}
}

/* ── Employee no-photo fallback symbol ───────────────────────────────────────
 * When an employee has no photo the card shows a brand symbol (theme-supplied
 * via the `styrk_blocks_employee_photo_fallback` filter) instead of initials.
 * Centred + contained so it reads as a mark, not a stretched photo. */
.cb-employee-photo--symbol {

	/* The symbol fallback sits directly on the card — no filled panel behind it. */
	background: transparent;
}

.cb-employee-photo__symbol-img {
	width: 46%;
	max-width: 132px;
	height: auto;
	-o-object-fit: contain;
	   object-fit: contain;
}

/* Only reveal the options cluster when the block (or an inner block) is
 * selected — so it only reserves its top-of-section space while you're editing
 * that block, and the canvas reads clean otherwise. (Inline display:flex needs
 * !important to override here.) */
.cb-section-controls {
	display: none !important;
}

.wp-block.is-selected .cb-section-controls,
.wp-block.has-child-selected .cb-section-controls {
	display: flex !important;
}

/* Fit every option to the panel width: consistent, left-aligned full-width
 * rows instead of ragged right-aligned auto-width pills. Applies to all section
 * blocks' option clusters. */
.cb-section-controls__modal > *,
.cb-hero__bg-cluster > * {
	width: 100%;
}

.cb-section-controls .cb-feature-card__swatch {
	width: 100%;
	justify-content: flex-start;
	padding: 8px 12px;
	border-radius: 8px;
}

/* Pinned full-width top band uses a compact, grouped HORIZONTAL layout, so
 * undo the stacked column's full-width children + chips. The cluster keeps its
 * inline width:100% (fills the band); only the groups and chips go compact. */
.cb-section-controls--pin-top .cb-hero__bg-cluster > *,
.cb-section-controls--pin-top .cb-section-controls__modal > * {
	width: auto;
}

.cb-section-controls--pin-top .cb-feature-card__swatch {
	width: auto;
	justify-content: center;
	padding: 5px 10px;
}

/* ── ONE consistent control chrome across the whole pinned band ─────────────
 * Every control — colour/media chip, segmented toggle, action button — shares
 * the SAME height + radius so the band reads as a single control panel, not a
 * pile of mismatched widgets at different heights. */
.cb-section-controls--pin-top .cb-feature-card__swatch,
.cb-section-controls--pin-top .components-button,
.cb-section-controls--pin-top .components-toggle-group-control {
	height: 34px;
	min-height: 34px;
	box-sizing: border-box;
	border-radius: 8px;
	margin: 0;
}

/* Segmented toggles (Bilde/Video/…, S/M/L/XL, 9:16/16:9) — match chip height
 * and sit on the same light surface as the chips, no separate dark box. */
.cb-section-controls--pin-top .components-toggle-group-control {
	background: rgba(255, 255, 255, 0.9);
	border: 1px solid rgba(0, 0, 0, 0.18);
	padding: 0 2px;
}

.cb-section-controls--pin-top .components-toggle-group-control__backdrop {
	border-radius: 6px;
}

/* Action button ("Sett bakgrunnsform" etc.) — same height, snug padding. */
.cb-section-controls--pin-top .components-button {
	padding-top: 0;
	padding-bottom: 0;
}

/* ── Section options cluster (SectionControls) — normalize every control's
 * chrome on the dark modal so nothing is low-contrast or visually deviant
 * (the WP secondary button rendered blue-on-dark = unreadable; labels were
 * dark on dark). One consistent look for all section options. */
.cb-section-controls .components-button {
	white-space: nowrap;
}

/* Primary action ("Sett/Bytt bakgrunnsform") = SOLID brand-teal button with
 * dark text. Opaque (no translucency stacking over the semi-transparent modal,
 * which previously rendered as a pale near-white block with faint text). */
.cb-section-controls .components-button.is-secondary,
.cb-section-controls .components-button.is-primary {
	background: #26b1bd !important;
	color: #062a30 !important;
	font-weight: 600;
	box-shadow: none !important;
}

.cb-section-controls .components-button.is-secondary:hover,
.cb-section-controls .components-button.is-primary:hover {
	background: #1f97a1 !important;
	color: #062a30 !important;
}

/* Other cluster buttons (link/tertiary, e.g. "Fjern") — readable on dark. */
.cb-section-controls .components-button.is-link,
.cb-section-controls .components-button.is-tertiary {
	color: #fff !important;
}

.cb-section-controls .components-button.is-destructive {
	color: #ff9b9b !important;
}

.cb-section-controls label,
.cb-section-controls legend,
.cb-section-controls .components-base-control__label,
.cb-section-controls .cb-ed-label {
	color: rgba(255, 255, 255, 0.88) !important;
}

.cb-section-controls .components-base-control__help {
	color: rgba(255, 255, 255, 0.6);
}

/* white form fields (selects / number inputs) keep their dark text — they have
 * a light background — so leave those alone. */

/* Segmented (toggle-group) controls must FIT their labels — "Bildekarusell"
 * was clipping in an equal-width group (each option forced to the widest
 * common cell, then truncated). Let the control size to content and each
 * option base + label grow to its own text width. The high-specificity
 * selectors + flex overrides beat the emotion-hashed widths WP ships. */
.cb-section-controls .components-toggle-group-control {
	width: auto !important;
	max-width: 100%;
}

/* Every element inside the segmented control — including WP's emotion-hashed
 * option wrappers (which carry no semantic class) — must size to its own label
 * and never clip. Targeting all descendants is the only reliable way to beat
 * the equal-width flex cells emotion injects. */
.cb-section-controls .components-toggle-group-control * {
	flex: 0 0 auto !important;
	width: auto !important;
	min-width: -moz-max-content !important;
	min-width: max-content !important;
	max-width: none !important;
	white-space: nowrap !important;
	overflow: visible !important;
	text-overflow: clip !important;
}

/* Featured-image caption (posts) — printed under the article featured image by
 * the [featured_caption] shortcode. Subtle, left-aligned, tucked under image. */
.cb-featured-caption {
	display: block;
	margin: 10px 0 28px;
	color: var(--wp--preset--color--secondary, #5b6470);
	font-size: 14px;
	font-style: italic;
	line-height: 1.55;
	text-align: left;
}

/* ── Services (editorial): responsive grid (1–4 columns) + editorial item. ── */
.skotnes-services-editorial {
	display: grid;
	grid-template-columns: 1fr;
	gap: clamp(2rem, 4vw, 3rem) clamp(1.5rem, 3vw, 2.75rem);
}

@media (min-width: 640px) {

	.skotnes-services-editorial--cols-2,
	.skotnes-services-editorial--cols-3,
	.skotnes-services-editorial--cols-4 {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (min-width: 1024px) {

	.skotnes-services-editorial--cols-3 {
		grid-template-columns: repeat(3, minmax(0, 1fr));
	}

	.skotnes-services-editorial--cols-4 {
		grid-template-columns: repeat(4, minmax(0, 1fr));
	}
}

.skotnes-services-editorial__item {
	display: block;
	text-decoration: none;
	color: inherit;
}

.skotnes-services-editorial__num {
	display: inline-block;
	font-family: var(--wp--preset--font-family--display), Oswald, sans-serif;
	font-weight: 600;
	font-size: 14px;
	letter-spacing: 0.16em;
	color: var(--wp--preset--color--secondary, #0084af);
}

/* Accent "effect line" under the number — 34×3px, matches the design prototype.
   Opt-in via the "Linje" toggle (adds the --rule modifier). */
.skotnes-services-editorial--rule .skotnes-services-editorial__num::after {
	content: "";
	display: block;
	width: 34px;
	height: 3px;
	border-radius: 2px;
	background: var(--sse-rule-color, var(--wp--preset--color--accent, #f5833c));
	margin: 14px 0;
}

.skotnes-services-editorial__icon {
	display: block;
	margin: 12px 0;
	color: var(--sse-icon-color, var(--wp--preset--color--secondary, #0084af));
}

.skotnes-services-editorial__icon svg {
	width: 34px;
	height: 34px;
}

.skotnes-services-editorial__title {
	margin: 4px 0 8px;
	font-size: 20px;
}

.skotnes-services-editorial__body {
	margin: 0;
	color: #5a6b76;
	font-size: 15px;
	line-height: 1.6;
}

.skotnes-services-editorial__cta {
	display: inline-block;
	margin-top: 12px;
	font-weight: 600;
	font-size: 14px;
	color: var(--wp--preset--color--secondary, #0084af);
}

/* ── Collection (CPT) block ───────────────────────────────────────────────────
   Grid of taxonomy terms or posts. Card imagery fills the full card width so
   catalogue thumbnails don't float in a letterboxed well. */
.cb-collection__inner {
	max-width: var(--cb-content-max, 1200px);
	margin-inline: auto;
	padding-inline: var(--cb-rail, 24px);

	/* border-box so the 24px rail sits INSIDE the content cap, exactly like
     .cb-page-header__inner. Without it the section measures 1200 + 2×24 = 1248px
     and its content hangs 24px to the left of every page header on the page. */
	box-sizing: border-box;
}

.cb-collection__header {
	margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}

.cb-collection__heading {
	margin: 0.25rem 0 0;
}

.cb-collection__intro {
	margin: 0.75rem 0 0;
	max-width: 60ch;
}

.cb-collection__header.text-center .cb-collection__intro {
	margin-inline: auto;
}

.cb-collection__header.text-right  .cb-collection__intro {
	margin-left: auto;
}

.cb-collection__grid {
	display: grid;
	gap: 24px;
}

.cb-collection-card {
	display: flex;
	flex-direction: column;
	background: #fff;
	border: 1px solid var(--wp--preset--color--muted, #e2ecf0);
	overflow: hidden;
	text-decoration: none;
	color: inherit;
	box-shadow: 0 2px 6px rgba(0, 72, 106, 0.05);
	transition: transform 0.25s, box-shadow 0.25s, border-color 0.25s;
}

a.cb-collection-card:hover {
	transform: translateY(-4px);
	box-shadow: 0 22px 44px -20px rgba(0, 72, 106, 0.3);
	border-color: rgba(85, 142, 213, 0.45);
}

.cb-collection-card__media {
	display: block;
	width: 100%;
	background: #fff;
}

.cb-collection-card__media img {
	display: block;
	width: 100%;
	aspect-ratio: 1 / 1;
	-o-object-fit: contain;
	   object-fit: contain;
	mix-blend-mode: multiply;
}

.cb-collection-card__body {
	display: flex;
	align-items: baseline;
	gap: 6px;
	padding: 16px 20px 20px;
}

.cb-collection-card__title {
	font-family: Oswald, "Arial Narrow", system-ui, sans-serif;
	font-weight: 600;
	font-size: 18px;
	line-height: 1.2;
	color: var(--wp--preset--color--primary, #00486a);
}

.cb-collection-card__count {
	font-size: 15px;
	opacity: 0.65;
}

.cb-collection__cta {
	margin-top: clamp(1.75rem, 3vw, 2.75rem);
}

.cb-collection__cta-link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--primary, #00486a);
}

.cb-collection__cta-link:hover {
	text-decoration: underline;
}

/* Editor-only affordances: the preview cards aren't links, and empty/loading
   states need to read as real feedback rather than a blank section. */
.cb-collection--editor .cb-collection-card {
	cursor: default;
}

.cb-collection__loading,
.cb-collection__empty {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 24px;
	border: 1px dashed var(--wp--preset--color--muted, #e2ecf0);
	border-radius: 12px;
	color: var(--wp--preset--color--primary, #00486a);
}

.hover\:text-accent:hover {
		color: var(--wp--preset--color--accent,    #F5833C);
}

.focus-visible\:outline:focus-visible {
		outline-style: solid;
}

.focus-visible\:outline-2:focus-visible {
		outline-width: 2px;
}

.focus-visible\:outline-offset-2:focus-visible {
		outline-offset: 2px;
}

.focus-visible\:outline-offset-4:focus-visible {
		outline-offset: 4px;
}

.focus-visible\:outline-secondary:focus-visible {
		outline-color: var(--wp--preset--color--secondary, #0084AF);
}

.focus-visible\:outline-white:focus-visible {
		outline-color: #fff;
}

.group[open] .group-open\:rotate-45 {
		--tw-rotate: 45deg;
		transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
}

@media (prefers-reduced-motion: reduce) {
		.motion-reduce\:transition-none {
				transition-property: none;
		}
}

@media (min-width: 640px) {
		.sm\:aspect-auto {
				aspect-ratio: auto;
		}
		.sm\:w-40 {
				width: 10rem;
		}
		.sm\:grid-cols-2 {
				grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.sm\:grid-cols-3 {
				grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.sm\:flex-row {
				flex-direction: row;
		}
		.sm\:items-stretch {
				align-items: stretch;
		}
		.sm\:gap-8 {
				gap: 2rem;
		}
		.sm\:p-8 {
				padding: 2rem;
		}
}

@media (min-width: 768px) {
		.md\:grid-cols-2 {
				grid-template-columns: repeat(2, minmax(0, 1fr));
		}
		.md\:grid-cols-4 {
				grid-template-columns: repeat(4, minmax(0, 1fr));
		}
}

@media (min-width: 1024px) {
		.lg\:w-1\/2 {
				width: 50%;
		}
		.lg\:grid-cols-3 {
				grid-template-columns: repeat(3, minmax(0, 1fr));
		}
		.lg\:grid-cols-4 {
				grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.lg\:flex-row {
				flex-direction: row;
		}
		.lg\:gap-16 {
				gap: 4rem;
		}
		.lg\:gap-8 {
				gap: 2rem;
		}
		.lg\:text-left {
				text-align: left;
		}
}

@media (min-width: 1280px) {
		.xl\:grid-cols-4 {
				grid-template-columns: repeat(4, minmax(0, 1fr));
		}
		.xl\:grid-cols-5 {
				grid-template-columns: repeat(5, minmax(0, 1fr));
		}
		.xl\:grid-cols-6 {
				grid-template-columns: repeat(6, minmax(0, 1fr));
		}
}