/*
 * SBA theme styles, design direction "Het Signaal": the brand colours come from
 * the conductors inside a UTP cable, so black is the ground and blue, orange and
 * green are the signal. Brand tokens from the SBA brandboek; all component
 * styles build on these variables. Bootstrap stays untouched in vendor/.
 */

:root {
	--sbaBlack: #000000;
	--sbaWhite: #ffffff;
	--sbaBlue: #005FD7;
	--sbaOrange: #FF6D02;
	--sbaSignalDeep: #C45300;
	--sbaGreen: #037A28;
	--sbaDarkBlue: #062A5B;
	--sbaInk: #1A1A2E;
	--sbaInkGround: #0A0A0B;
	--sbaInkSoft: #14151a;
	--sbaPaper: #ffffff;
	--sbaChalk: #f4f6f8;
	--sbaSlate: #5A6675;
	--sbaMist: #9AA6B5;
	--sbaBody: #b8c1d0;
	--sbaLinkOnDark: #6EA8FF;
	--sbaHairline: rgba(255, 255, 255, 0.09);
	--sbaHairlineSoft: rgba(255, 255, 255, 0.07);
	--sbaLift: #10131a;
	--sbaTintBlue: #F2F6FD;
	--sbaTintGreen: #E4F3E9;
	--sbaTintOrange: #FFF3E9;
	--sbaTintGrey: #F4F6F8;
	--sbaFontBody: "SBA", "Calibri", "Helvetica Neue", Arial, sans-serif;
	--sbaFontDisplay: "SBA", "Cambria", Georgia, serif;
	--sbaAccent: var(--sbaBlue);
	--sbaAccentTint: var(--sbaTintBlue);
	--sbaCardWire: var(--sbaAccent);
	--sbathemeStickyBarHeight: 0px;
}

body {
	font-family: var(--sbaFontBody);
	color: var(--sbaWhite);
	background: var(--sbaInkGround);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3, .sbathemeHeroTitle, .sbathemeSectionTitle {
	font-family: var(--sbaFontDisplay);
	color: var(--sbaWhite);
	letter-spacing: -0.018em;
	text-wrap: balance;
}

/* Header and navigation: dark bar, the underline grows from the left on hover */

.sbathemeNavbar {
	background: var(--sbaInkGround);
	border-bottom: 1px solid var(--sbaHairlineSoft);
	transition: box-shadow 0.2s ease;
}

.sbathemeNavbar.sbathemeNavScrolled {
	box-shadow: 0 2px 18px rgba(0, 0, 0, 0.55);
}

.sbathemeBrand .custom-logo {
	max-height: 48px;
	width: auto;
}

.sbathemeBrandText {
	font-family: var(--sbaFontDisplay);
	font-size: 1.5rem;
	color: var(--sbaWhite);
	text-decoration: none;
}

.sbathemeNavbar .nav-link,
.sbathemeNavbar a {
	color: var(--sbaWhite);
	text-decoration: none;
	font-weight: 600;
}

.sbathemeNavbar .navbar-nav {
	gap: 1.6rem;
	font-size: 0.88rem;
}

.sbathemeNavbar .navbar-nav > li {
	position: relative;
	padding-bottom: 0.2rem;
}

.sbathemeNavbar .navbar-nav > li::after {
	content: "";
	position: absolute;
	left: 0;
	right: 100%;
	bottom: 0;
	height: 2px;
	background: var(--sbaBlue);
	transition: right 0.25s ease;
}

.sbathemeNavbar .navbar-nav > li:hover::after,
.sbathemeNavbar .navbar-nav > li:focus-within::after {
	right: 0;
}

.sbathemeNavbar .navbar-toggler {
	border-color: var(--sbaHairline);
}

.sbathemeNavbar .navbar-toggler-icon {
	filter: invert(1);
}

.sbathemeNavbar .sbaAdaptiveVisited > a {
	color: var(--sbaMist);
}

.sbathemeNavbar .sbaAdaptiveRecommended > a::after {
	content: "\2022";
	color: var(--sbaOrange);
	margin-left: 0.3em;
}

/* Hero: a layered film of brand light over black, serif display type on top */

.sbathemeHero {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	background: var(--sbaInkGround);
	color: var(--sbaWhite);
	padding: 6.4rem 0 6rem;
}

.sbathemeHeroPhoto {
	position: absolute;
	inset: 0;
	z-index: 1;
	background-size: cover;
	background-position: center;
	opacity: 0.62;
}

.sbathemeHeroWithPhoto .sbathemeHeroArt svg {
	opacity: 0.5;
}

.sbathemeHero::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	background-color: var(--sbaInkGround);
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.035) 0 1px, transparent 1px 4px),
		radial-gradient(78% 62% at 76% 30%, rgba(0, 95, 215, 0.55) 0%, transparent 64%),
		radial-gradient(46% 44% at 10% 82%, rgba(3, 122, 40, 0.26) 0%, transparent 70%),
		radial-gradient(40% 40% at 96% 88%, rgba(196, 83, 0, 0.22) 0%, transparent 72%),
		linear-gradient(160deg, #10141d 0%, #0A0A0B 68%);
}

.sbathemeHero > .container {
	position: relative;
	z-index: 4;
}

.sbathemeHeroGrid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 2.5rem;
	align-items: center;
}

.sbathemeHeroGridSplit {
	grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
}

.sbathemeHeroMain,
.sbathemeHeroAside {
	min-width: 0;
}

.sbathemeHero .sbathemeHeroTitle {
	color: var(--sbaWhite);
	font-size: clamp(2.4rem, 5.6vw, 4.15rem);
	line-height: 1.02;
	letter-spacing: -0.028em;
	margin: 0 0 1.1rem;
}

.sbathemeHeroIntro {
	color: var(--sbaBody);
	max-width: 44ch;
	font-size: 1.06rem;
	margin-bottom: 0;
}

.sbathemeKicker {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	color: var(--sbaMist);
	text-transform: uppercase;
	letter-spacing: 0.22em;
	font-size: 0.68rem;
	font-weight: 700;
	margin-bottom: 1.1rem;
}

.sbathemeKicker::before {
	content: "";
	width: 1.9rem;
	height: 2px;
	background: var(--sbaOrange);
	display: block;
	flex: none;
}

.sbathemeHeroCircle {
	position: absolute;
	right: -8rem;
	top: 50%;
	z-index: 1;
	transform: translateY(-50%);
	width: 28rem;
	height: 28rem;
	border: 3rem solid rgba(255, 255, 255, 0.035);
	border-radius: 50%;
	pointer-events: none;
}

.sbathemeHeroCircle::before,
.sbathemeHeroCircle::after {
	content: "";
	position: absolute;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 50%;
	opacity: 0.3;
}

.sbathemeHeroCircle::before {
	background: var(--sbaOrange);
	top: 1rem;
	left: 2rem;
}

.sbathemeHeroCircle::after {
	background: var(--sbaGreen);
	bottom: 3rem;
	left: -1rem;
}

/*
 * Generated hero art. Every page draws its own signal composition; it sits under
 * a scrim so the title keeps its contrast, and it stops moving completely for
 * visitors who ask for reduced motion.
 */

.sbathemeHeroArt {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	overflow: hidden;
}

.sbathemeHeroArt svg {
	width: 100%;
	height: 100%;
	display: block;
}

.sbathemeHeroArt .sbathemeArtFlow {
	filter: drop-shadow(0 0 7px currentColor);
}

.sbathemeHero::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 3;
	background:
		linear-gradient(93deg, rgba(10, 10, 11, 0.95) 0%, rgba(10, 10, 11, 0.82) 32%, rgba(10, 10, 11, 0.34) 66%, rgba(10, 10, 11, 0.05) 100%),
		linear-gradient(0deg, rgba(10, 10, 11, 0.55) 0%, rgba(10, 10, 11, 0) 45%);
	pointer-events: none;
}

.sbathemeHero > .container {
	z-index: 5;
}

.sbathemeArtFlow {
	stroke-dashoffset: 1800;
	animation-name: sbathemeArtFlowMove;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

.sbathemeArtPulse {
	animation-name: sbathemeArtPulseFade;
	animation-timing-function: ease-in-out;
	animation-iteration-count: infinite;
}

.sbathemeArtSpin {
	animation-name: sbathemeArtSpinTurn;
	animation-timing-function: linear;
	animation-iteration-count: infinite;
}

@keyframes sbathemeArtFlowMove {
	from {
		stroke-dashoffset: 1800;
	}
	to {
		stroke-dashoffset: 0;
	}
}

@keyframes sbathemeArtPulseFade {
	0%, 100% {
		opacity: 0.25;
	}
	50% {
		opacity: 0.95;
	}
}

@keyframes sbathemeArtSpinTurn {
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sbathemeArtFlow,
	.sbathemeArtPulse,
	.sbathemeArtSpin {
		animation: none;
	}
	.sbathemeArtFlow {
		stroke-dashoffset: 0;
		stroke-opacity: 0.6;
	}
}

/* Live servicedesk status: proof in the hero instead of decoration */

.sbathemeStatusPanel {
	background: rgba(255, 255, 255, 0.045);
	border: 1px solid rgba(255, 255, 255, 0.1);
	border-radius: 0.9rem;
	padding: 1.4rem 1.5rem;
	backdrop-filter: blur(6px);
}

.sbathemeStatusHead {
	display: flex;
	align-items: center;
	gap: 0.55rem;
	font-size: 0.72rem;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sbaMist);
	margin: 0 0 1.1rem;
}

.sbathemeStatusPulse {
	width: 0.55rem;
	height: 0.55rem;
	border-radius: 50%;
	background: var(--sbaGreen);
	box-shadow: 0 0 0 0 rgba(3, 122, 40, 0.7);
	animation: sbathemePulse 2.4s infinite;
	flex: none;
}

.sbathemeStatusClosed .sbathemeStatusPulse {
	background: var(--sbaOrange);
	box-shadow: 0 0 0 0 rgba(255, 109, 2, 0.7);
}

@keyframes sbathemePulse {
	70% {
		box-shadow: 0 0 0 0.7rem rgba(3, 122, 40, 0);
	}
	100% {
		box-shadow: 0 0 0 0 rgba(3, 122, 40, 0);
	}
}

.sbathemeStatusRow {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	align-items: baseline;
	gap: 0.5rem 1rem;
	padding: 0.5rem 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 0.82rem;
	color: var(--sbaMist);
}

.sbathemeStatusRow:last-of-type {
	border-bottom: none;
}

.sbathemeStatusValue {
	font-family: var(--sbaFontDisplay);
	font-size: 1.35rem;
	line-height: 1.1;
	color: var(--sbaWhite);
	font-variant-numeric: tabular-nums;
	letter-spacing: -0.01em;
	white-space: nowrap;
	text-align: right;
}

.sbathemeStatusNote,
.sbathemeStatusEmergency {
	margin: 0;
	font-size: 0.76rem;
	color: #7d8798;
}

.sbathemeStatusNote {
	margin-top: 0.9rem;
}

/* The conductor: one line that runs down the page and splits into three wires */

.sbathemeCable {
	position: relative;
	height: 116px;
	background: var(--sbaInkGround);
}

.sbathemeCable svg {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* Section video: a normal player the visitor can start, with sound */

.sbathemeSectionVideo {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	margin-bottom: 1.5rem;
	border-radius: 0.75rem;
	overflow: hidden;
	background: var(--sbaInkSoft);
}

.sbathemeSectionVideo iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
}

/* Daypart variants set by sba-adaptive body classes */

body.sbaAdaptiveDaypartEvening .sbathemeHero::before,
body.sbaAdaptiveDaypartNight .sbathemeHero::before {
	background-image:
		repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.03) 0 1px, transparent 1px 4px),
		radial-gradient(80% 60% at 78% 32%, rgba(0, 95, 215, 0.24) 0%, transparent 62%),
		linear-gradient(160deg, #08090d 0%, #000000 65%);
}

/* Sections: alternation is explicit through the modifier classes below, never
   through the document order, so a new section can never flip the whole page. */

.sbathemeSection {
	padding: 5rem 0 5.2rem;
	background: var(--sbaPaper);
	color: var(--sbaInkSoft);
	border-top: 1px solid rgba(10, 10, 11, 0.08);
}

.sbathemeSectionDark {
	background: var(--sbaInkGround);
	color: var(--sbaWhite);
}

.sbathemeSectionPaper {
	background: var(--sbaPaper);
	color: var(--sbaInkSoft);
	border-top: 1px solid rgba(10, 10, 11, 0.08);
}

.sbathemeSectionPaper h1,
.sbathemeSectionPaper h2,
.sbathemeSectionPaper h3,
.sbathemeSectionPaper h4,
.sbathemeSectionPaper .sbathemeSectionTitle {
	color: var(--sbaInkSoft);
}

.sbathemeSectionPaper .sbathemeSectionBody {
	color: var(--sbaSlate);
}

.sbathemeSectionPaper .sbathemeSectionBody a {
	color: var(--sbaAccent);
}

.sbathemeSection.sbathemeSectionSoft {
	background: var(--sbaChalk);
}

.sbathemeSection.sbathemeSectionCta {
	background: var(--sbaChalk);
	color: var(--sbaInkSoft);
}

.sbathemeAccentBlue {
	--sbaAccent: var(--sbaBlue);
	--sbaAccentTint: var(--sbaTintBlue);
}

.sbathemeAccentOrange {
	--sbaAccent: var(--sbaOrange);
	--sbaAccentTint: var(--sbaTintOrange);
}

.sbathemeAccentGreen {
	--sbaAccent: var(--sbaGreen);
	--sbaAccentTint: var(--sbaTintGreen);
}

.sbathemeAccentBlack {
	--sbaAccent: var(--sbaWhite);
	--sbaAccentTint: var(--sbaTintGrey);
}

.sbathemeSectionTitle {
	border-left: 0.35rem solid var(--sbaAccent);
	padding-left: 0.75rem;
	margin-bottom: 1.5rem;
	font-size: clamp(1.6rem, 3.2vw, 2.3rem);
}

.sbathemeSectionBody {
	color: var(--sbaBody);
	max-width: 46rem;
}

.sbathemeSectionBody a {
	color: var(--sbaLinkOnDark);
}

/* Service tiles: every card carries the wire colour of its brand pillar and a
   generated pattern of what the service actually is, instead of a stock photo. */

.sbathemeCards {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	margin-top: 1.8rem;
	background: var(--sbaInkGround);
	border-top: 1px solid var(--sbaHairline);
	border-left: 1px solid var(--sbaHairline);
}

.sbathemeCard {
	background: var(--sbaInkGround);
	color: var(--sbaWhite);
	border-right: 1px solid var(--sbaHairline);
	border-bottom: 1px solid var(--sbaHairline);
	padding: 1.3rem 1.3rem 1.4rem;
	position: relative;
	overflow: hidden;
	display: flex;
	flex-direction: column;
	min-height: 12.5rem;
	transition: background 0.25s ease;
}

.sbathemeCard:hover {
	background: var(--sbaLift);
}

.sbathemeCardWireBlue {
	--sbaCardWire: var(--sbaBlue);
}

.sbathemeCardWireOrange {
	--sbaCardWire: var(--sbaOrange);
}

.sbathemeCardWireGreen {
	--sbaCardWire: var(--sbaGreen);
}

.sbathemeTileArt {
	position: absolute;
	inset: auto -12% -16% auto;
	width: 58%;
	aspect-ratio: 1;
	color: var(--sbaCardWire);
	opacity: 0.42;
	transition: transform 0.4s ease, opacity 0.3s ease;
	pointer-events: none;
}

.sbathemeCard:hover .sbathemeTileArt {
	transform: translate3d(-4%, -6%, 0) scale(1.06);
	opacity: 0.7;
}

.sbathemeCardBody {
	position: relative;
	z-index: 1;
}

.sbathemeCardWire {
	width: 1.6rem;
	height: 3px;
	display: block;
	margin-bottom: 0.9rem;
	background: var(--sbaCardWire);
}

.sbathemeCardTitle {
	margin: 0 0 0.35rem;
	font-family: var(--sbaFontBody);
	font-size: 1.02rem;
	font-weight: 700;
	color: var(--sbaWhite);
}

.sbathemeCardText,
.sbathemeCardText p {
	margin: 0;
	font-size: 0.85rem;
	color: var(--sbaMist);
}

.sbathemeCardText a {
	color: var(--sbaCardWire);
	text-decoration: none;
	font-weight: 700;
}

.sbathemeCardThumb {
	display: block;
	width: 100%;
	height: 10rem;
	object-fit: cover;
	border-radius: 0.5rem;
	margin-bottom: 1rem;
	position: relative;
	z-index: 1;
}

.sbathemeCardFoot {
	position: relative;
	z-index: 1;
	margin-top: auto;
	padding-top: 1rem;
	display: flex;
	align-items: center;
	gap: 0.45rem;
	font-size: 0.74rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sbaCardWire);
	text-decoration: none;
}

.sbathemeCardLink {
	color: var(--sbaCardWire);
	font-weight: 700;
	text-decoration: none;
}

/* The lead tile is the one the interest model puts first */

.sbathemeCardLead {
	grid-column: span 2;
	min-height: 15rem;
}

.sbathemeCardLead .sbathemeTileArt {
	width: 38%;
	inset: auto 2% -10% auto;
	opacity: 0.55;
}

.sbathemeCards .sbathemeCardLead .sbathemeCardTitle {
	font-family: var(--sbaFontDisplay);
	font-size: 1.75rem;
	letter-spacing: -0.018em;
	margin-bottom: 0.5rem;
}

.sbathemeCards .sbathemeCardLead .sbathemeCardText {
	font-size: 0.95rem;
	max-width: 42ch;
}

.sbathemeCardInterest {
	display: inline-flex;
	align-items: center;
	gap: 0.3rem;
}

.sbathemeCardInterestBar {
	display: inline-flex;
	gap: 2px;
	align-items: flex-end;
	height: 0.7rem;
}

.sbathemeCardInterestBar i {
	width: 3px;
	background: currentColor;
	display: block;
	opacity: 1;
}

.sbathemeCardInterestBar i:nth-child(1) {
	height: 40%;
}

.sbathemeCardInterestBar i:nth-child(2) {
	height: 68%;
}

.sbathemeCardInterestBar i:nth-child(3) {
	height: 100%;
}

.sbathemeSectionPaper .sbathemeCards {
	background: var(--sbaPaper);
	border-top-color: rgba(10, 10, 11, 0.14);
	border-left-color: rgba(10, 10, 11, 0.14);
}

.sbathemeSectionPaper .sbathemeCard {
	background: var(--sbaPaper);
	color: var(--sbaInkSoft);
	border-right-color: rgba(10, 10, 11, 0.14);
	border-bottom-color: rgba(10, 10, 11, 0.14);
}

.sbathemeSectionPaper .sbathemeCard:hover {
	background: var(--sbaChalk);
}

.sbathemeSectionPaper .sbathemeCardTitle {
	color: var(--sbaInkSoft);
}

.sbathemeSectionPaper .sbathemeCardText,
.sbathemeSectionPaper .sbathemeCardText p {
	color: var(--sbaSlate);
}

/* Certification band on paper, closed off by the green rule */

.sbathemeCerts {
	background: var(--sbaPaper);
	color: var(--sbaInkSoft);
	border-top: 3px solid var(--sbaGreen);
	padding: 1.6rem 0;
}

.sbathemeCertsInner {
	display: flex;
	align-items: center;
	gap: 2rem;
	flex-wrap: wrap;
}

.sbathemeCertsLabel {
	margin: 0;
	font-size: 0.68rem;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sbaGreen);
}

.sbathemeCertsList {
	display: flex;
	align-items: center;
	gap: 1.6rem;
	flex-wrap: wrap;
	margin: 0;
	padding: 0;
	list-style: none;
	font-size: 0.9rem;
	font-weight: 600;
	color: var(--sbaSlate);
}

.sbathemeCertsItem {
	display: flex;
	align-items: center;
	min-height: 64px;
}

/*
 * Certification marks are never recoloured or desaturated: DNV, 3CX and
 * Microsoft all require their marks to be shown as supplied. Only a small
 * lift on hover, which changes nothing about the artwork itself.
 */

.sbathemeCertsLogo {
	display: block;
	max-height: 64px;
	width: auto;
	transition: transform 0.25s ease;
}

.sbathemeCertsItem:hover .sbathemeCertsLogo {
	transform: translateY(-2px);
}

.sbathemeCertsText b {
	color: var(--sbaInkSoft);
	margin-right: 0.35rem;
}

/* Buttons */

.sbathemeButton {
	background: var(--sbaAccent, var(--sbaBlue));
	color: var(--sbaWhite);
	border-radius: 999px;
	padding: 0.82rem 1.8rem;
	font-weight: 700;
	text-decoration: none;
	box-shadow: 0 10px 24px -14px rgba(0, 95, 215, 0.9);
	transition: transform 0.18s ease, box-shadow 0.18s ease, background 0.18s ease;
}

.sbathemeButton:hover,
.sbathemeButton:focus-visible {
	transform: translateY(-1px);
}

.sbathemeButtonGhost {
	background: transparent;
	color: var(--sbaWhite);
	border-radius: 999px;
	padding: 0.82rem 1.8rem;
	border: 1px solid rgba(255, 255, 255, 0.34);
	border-radius: 0.45rem;
	padding: 0.65rem 1.4rem;
	font-weight: 700;
}

.sbathemeButtonGhost:hover,
.sbathemeButtonGhost:focus-visible {
	background: rgba(255, 255, 255, 0.08);
	color: var(--sbaWhite);
	border-color: rgba(255, 255, 255, 0.6);
}

.sbathemeSectionPaper .sbathemeButtonGhost,
.sbathemeCerts .sbathemeButtonGhost {
	color: var(--sbaInkSoft);
	border-color: rgba(10, 10, 11, 0.28);
}

.sbathemeButton:hover {
	background: var(--sbaWhite);
	color: var(--sbaInkGround);
}

.sbathemeSectionCta .sbathemeButton:hover {
	background: var(--sbaInkGround);
	color: var(--sbaWhite);
}

/* Adaptive slots */

.sbathemeSlotTitle {
	font-size: 1.4rem;
}

.sbathemeSlotLabel {
	color: var(--sbaMist);
	font-style: italic;
	font-size: 0.9rem;
}

.sbaAdaptiveMenu {
	list-style: none;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	gap: 0.75rem;
}

.sbaAdaptiveMenu a {
	display: inline-block;
	background: rgba(0, 95, 215, 0.16);
	border: 1px solid var(--sbaBlue);
	color: var(--sbaWhite);
	border-radius: 2rem;
	padding: 0.45rem 1.1rem;
	text-decoration: none;
	font-weight: 600;
}

.sbaAdaptiveMenu a:hover {
	background: var(--sbaBlue);
	color: var(--sbaWhite);
}

.sbathemeSectionPaper .sbaAdaptiveMenu a {
	background: var(--sbaTintBlue);
	color: var(--sbaBlue);
}

.sbathemeCaseList,
.sbathemeVacatureList,
.sbathemePostList {
	list-style: none;
	padding: 0;
}

.sbathemeCaseList li,
.sbathemeVacatureList li,
.sbathemePostList li {
	border-bottom: 1px solid var(--sbaHairline);
	padding: 0.6rem 0;
}

.sbathemeCaseList a,
.sbathemeVacatureList a,
.sbathemePostList a {
	color: var(--sbaWhite);
	text-decoration: none;
}

.sbathemePostDate {
	color: var(--sbaMist);
	font-size: 0.85rem;
	margin-left: 0.5rem;
}

/* Footer */

.sbathemeFooter {
	background: var(--sbaInkSoft);
	color: var(--sbaMist);
	padding: 3rem 0 2rem;
	margin-top: 0;
	border-top: 1px solid var(--sbaHairlineSoft);
}

.sbathemeFooter a {
	color: var(--sbaWhite);
	text-decoration: none;
}

.sbathemeFooterName {
	color: var(--sbaWhite);
	font-family: var(--sbaFontDisplay);
	font-size: 1.25rem;
}

.sbathemeFooterMenu {
	list-style: none;
	padding: 0;
}

.sbathemePayOff {
	margin-top: 2rem;
	color: var(--sbaMist);
}

/* Transparency panel */

.sbathemeTransparencyToggle {
	background: transparent;
	border: 1px solid var(--sbaBlue);
	color: var(--sbaWhite);
	border-radius: 2rem;
	padding: 0.4rem 1rem;
	font-size: 0.85rem;
}

.sbathemeTransparencyPanel {
	background: rgba(255, 255, 255, 0.05);
	border: 1px solid var(--sbaHairline);
	border-radius: 0.75rem;
	padding: 1rem;
	margin-top: 0.75rem;
	font-size: 0.9rem;
}

.sbathemeTransparencySmall {
	color: var(--sbaMist);
	font-size: 0.75rem;
	margin-bottom: 0;
}

/* Terms page */

.sbathemeTermsToc ol {
	columns: 2;
	column-gap: 2rem;
	font-size: 0.9rem;
}

.sbathemeTerms h3 {
	scroll-margin-top: 6rem;
	margin-top: 2rem;
	font-size: 1.1rem;
}

.sbathemeTermsNote {
	color: var(--sbaMist);
	font-style: italic;
}

/* Article pages */

.sbathemeArticle {
	padding: 3rem 0;
	max-width: 46rem;
}

/* Always visible contact actions: navbar pair and the sticky bar on phones */

.sbathemeHeaderContact {
	display: flex;
	align-items: center;
	gap: 0.75rem;
	margin-left: auto;
	margin-right: 0.75rem;
}

.sbathemeHeaderPhone {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	color: var(--sbaWhite);
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	padding: 0.4rem 0.25rem;
	min-height: 44px;
}

.sbathemeHeaderPhone:hover,
.sbathemeHeaderPhone:focus {
	color: var(--sbaOrange);
}

.sbathemeContactIcon {
	flex: 0 0 auto;
}

.sbathemeHeaderSupport {
	background: var(--sbaOrange);
	color: var(--sbaInkGround);
	white-space: nowrap;
	padding: 0.5rem 1rem;
}

.sbathemeHeaderSupport:hover,
.sbathemeHeaderSupport:focus {
	background: var(--sbaWhite);
	color: var(--sbaInkGround);
}

.sbathemeHeaderContact a:focus-visible {
	outline: 3px solid var(--sbaOrange);
	outline-offset: 2px;
}

@media (min-width: 992px) {
	.sbathemeNavbar .navbar-collapse {
		order: 2;
	}
	.sbathemeHeaderContact {
		order: 3;
		margin-left: 1rem;
		margin-right: 0;
	}
}

@media (max-width: 575.98px) {
	.sbathemeHeaderContact {
		gap: 0.4rem;
		margin-right: 0.4rem;
	}
	.sbathemeHeaderPhoneNumber {
		display: none;
	}
	.sbathemeHeaderSupport {
		padding: 0.4rem 0.7rem;
		font-size: 0.9rem;
	}
}

/* Footer contact block */

.sbathemeFooterActions {
	display: flex;
	flex-wrap: wrap;
	gap: 0.5rem;
	margin-bottom: 0.75rem;
}

.sbathemeFooterPhone {
	background: var(--sbaBlue);
	color: var(--sbaWhite);
}

.sbathemeFooterSupport {
	background: var(--sbaOrange);
	color: var(--sbaInkGround);
}

.sbathemeFooterPhone:hover,
.sbathemeFooterPhone:focus,
.sbathemeFooterSupport:hover,
.sbathemeFooterSupport:focus {
	background: var(--sbaWhite);
	color: var(--sbaInkGround);
}

.sbathemeFooterActions a:focus-visible {
	outline: 3px solid var(--sbaWhite);
	outline-offset: 2px;
}

/* Sticky contact bar: fixed on phones, never on desktop or in print */

@media (max-width: 768px) {
	:root {
		--sbathemeStickyBarHeight: 56px;
	}
}

body {
	padding-bottom: var(--sbathemeStickyBarHeight);
}

.sbathemeStickyBar {
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1035;
	background: var(--sbaInkSoft);
	box-shadow: 0 -2px 14px rgba(0, 0, 0, 0.55);
	padding-bottom: env(safe-area-inset-bottom);
}

.sbathemeStickyBarNote {
	margin: 0;
	padding: 0.5rem 0.9rem;
	background: var(--sbaTintOrange);
	color: var(--sbaInkSoft);
	font-size: 0.8rem;
	line-height: 1.35;
}

.sbathemeStickyBarActions {
	display: flex;
}

.sbathemeStickyBarAction {
	flex: 1 1 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	min-height: 56px;
	padding: 0.6rem 0.5rem;
	font-weight: 700;
	text-decoration: none;
	text-align: center;
	transition: background 0.15s ease;
}

.sbathemeStickyBarPhone {
	background: var(--sbaBlue);
	color: var(--sbaWhite);
}

.sbathemeStickyBarSupport {
	background: var(--sbaOrange);
	color: var(--sbaInkGround);
}

.sbathemeStickyBarPhone:hover,
.sbathemeStickyBarPhone:focus {
	background: var(--sbaWhite);
	color: var(--sbaInkGround);
}

.sbathemeStickyBarSupport:hover,
.sbathemeStickyBarSupport:focus {
	background: var(--sbaWhite);
	color: var(--sbaInkGround);
}

.sbathemeStickyBarAction:focus-visible {
	outline: 3px solid var(--sbaWhite);
	outline-offset: -3px;
}

@media (min-width: 769px) {
	.sbathemeStickyBar {
		display: none;
	}
}

@media print {
	.sbathemeStickyBar {
		display: none;
	}
}

/* Keep the Converse chat widget clear of the sticky bar on small screens */

@media (max-width: 768px) {
	body .sbaConverse {
		bottom: calc(20px + var(--sbathemeStickyBarHeight));
	}
}

@media (max-width: 480px) {
	body .sbaConversePanel {
		bottom: var(--sbathemeStickyBarHeight);
	}
	body .sbaConverseInvite {
		bottom: calc(84px + var(--sbathemeStickyBarHeight));
	}
}

/* Layout only breakpoints for the ported direction */

@media (max-width: 1100px) {
	.sbathemeHeroGridSplit {
		grid-template-columns: minmax(0, 1fr);
		gap: 2rem;
	}
}

@media (max-width: 780px) {
	.sbathemeCards {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
	.sbathemeCardLead {
		grid-column: span 2;
	}
}

@media (max-width: 700px) {
	.sbathemeCable {
		display: none;
	}
}

@media (max-width: 520px) {
	.sbathemeCards {
		grid-template-columns: minmax(0, 1fr);
	}
	.sbathemeCardLead {
		grid-column: span 1;
	}
}

/* Reduced motion */

@media (prefers-reduced-motion: reduce) {
	.sbathemeNavbar,
	.sbathemeStickyBarAction,
	.sbathemeCard,
	.sbathemeTileArt,
	.sbathemeCertsLogo,
	.sbathemeNavbar .navbar-nav > li::after {
		transition: none;
	}
	.sbathemeCard:hover .sbathemeTileArt {
		transform: none;
	}
	.sbathemeStatusPulse {
		animation: none;
	}
	html {
		scroll-behavior: auto;
	}
}

html {
	scroll-behavior: smooth;
	scroll-padding-top: 5rem;
}

/* Utility bar above the menu. White type needs a deeper orange than the brand
   accent to stay readable: white on #FF6D02 reaches 2.8:1, white on the deep
   signal orange reaches 4.6:1. The brand orange returns as the hairline under
   the bar, so the band still reads as orange. The support button inverts to
   white with deep orange type; the selector carries the class twice so it
   outranks the generic bar link. */

.sbathemeTopBar {
	background: var(--sbaSignalDeep);
	border-bottom: 2px solid var(--sbaOrange);
	color: var(--sbaWhite);
	font-size: 0.79rem;
	font-weight: 600;
}

.sbathemeTopBarInner {
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 1.1rem;
	padding-top: 0.5rem;
	padding-bottom: 0.5rem;
}

.sbathemeTopBar a {
	color: var(--sbaWhite);
	text-decoration: none;
	font-weight: 600;
}

.sbathemeTopMail {
	margin-right: auto;
	opacity: 0.82;
}

.sbathemeTopPhone {
	display: inline-flex;
	align-items: center;
	gap: 0.35rem;
	white-space: nowrap;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
}

.sbathemeTopBar a.sbathemeTopSupport {
	background: var(--sbaWhite);
	color: var(--sbaSignalDeep);
	border-radius: 0.35rem;
	padding: 0.25rem 0.85rem;
	font-weight: 700;
	white-space: nowrap;
}

.sbathemeTopBar a.sbathemeTopSupport:hover,
.sbathemeTopBar a.sbathemeTopSupport:focus {
	background: var(--sbaInkGround);
	color: var(--sbaWhite);
}

.sbathemeTopBar a:focus-visible {
	outline: 2px solid var(--sbaWhite);
	outline-offset: 2px;
}

/* Brand logo from the brand book */

.sbathemeBrandLink {
	display: inline-block;
	line-height: 0;
}

.sbathemeBrandLogo {
	height: 42px;
	width: auto;
	display: block;
}

.sbathemeFooterLogo {
	height: 46px;
	width: auto;
	display: block;
	margin-bottom: 0.6rem;
}

@media (max-width: 575px) {
	.sbathemeTopMail {
		display: none;
	}
	.sbathemeTopBarInner {
		justify-content: space-between;
		gap: 0.6rem;
	}
	.sbathemeBrandLogo {
		height: 34px;
	}
}

/* Video band under the hero: full width, sixteen by nine, on its own black
   ground. The visitor starts it, with sound, and can take it to full screen. */

.sbathemeVideoBand {
	background: var(--sbaInkGround);
	padding: 0;
	border-top: 1px solid var(--sbaHairlineSoft);
}

.sbathemeVideoFrame {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
	max-height: 82vh;
	margin: 0 auto;
}

.sbathemeVideoFrame iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border: 0;
	display: block;
}

.sbathemeKickerDark {
	color: var(--sbaSlate);
}

.sbathemeKickerDark::before {
	background: var(--sbaSignalDeep);
}

/* Page detail blocks: facts, figures, steps and a quote. One family, drawn with
   the hairline and the accent wire of the brand book, so a page of plain data
   reads as designed instead of as a bullet list. */

.sbathemeDetails {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
	gap: 1px;
	background: var(--sbaPaper);
	border: 1px solid rgba(10, 10, 11, 0.1);
	border-radius: 1rem;
	overflow: hidden;
	margin: 1.8rem 0 0;
}

.sbathemeDetail {
	display: flex;
	align-items: flex-start;
	gap: 0.9rem;
	background: var(--sbaPaper);
	padding: 1.35rem 1.4rem;
	box-shadow: 0 0 0 1px rgba(10, 10, 11, 0.09);
}

.sbathemeDetailMark {
	flex: none;
	width: 2.4rem;
	height: 2.4rem;
	border-radius: 0.7rem;
	background: var(--sbaAccentTint);
	color: var(--sbaAccent);
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.sbathemeDetailIcon {
	width: 1.3rem;
	height: 1.3rem;
}

.sbathemeDetailText {
	min-width: 0;
}

.sbathemeDetailLabel {
	font-size: 0.72rem;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	font-weight: 700;
	color: var(--sbaSlate);
	margin: 0 0 0.25rem;
}

.sbathemeDetailValue {
	margin: 0;
	font-size: 1.02rem;
	font-weight: 600;
	color: var(--sbaInkSoft);
	overflow-wrap: anywhere;
}

.sbathemeDetailValue a {
	color: var(--sbaAccent);
	text-decoration: none;
}

.sbathemeDetailValue a:hover,
.sbathemeDetailValue a:focus-visible {
	text-decoration: underline;
}

.sbathemeSectionDark .sbathemeDetails {
	background: var(--sbaLift);
	border-color: var(--sbaHairline);
}

.sbathemeSectionDark .sbathemeDetail {
	background: var(--sbaLift);
	box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.08);
}

.sbathemeSectionDark .sbathemeDetailMark {
	background: rgba(255, 255, 255, 0.07);
}

.sbathemeSectionDark .sbathemeDetailValue {
	color: var(--sbaWhite);
}

.sbathemeSectionDark .sbathemeDetailLabel {
	color: var(--sbaMist);
}

.sbathemeSectionNote {
	margin: 1.1rem 0 0;
	color: var(--sbaSlate);
	font-size: 0.95rem;
}

.sbathemeSectionDark .sbathemeSectionNote {
	color: var(--sbaMist);
}

.sbathemeStats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
	gap: 1.6rem;
	margin-top: 1.9rem;
}

.sbathemeStat {
	position: relative;
	padding-left: 1.1rem;
	border-left: 3px solid var(--sbaAccent);
}

.sbathemeStatValue {
	display: block;
	font-family: var(--sbaFontDisplay);
	font-size: clamp(2.1rem, 4.4vw, 3rem);
	line-height: 1;
	letter-spacing: -0.03em;
	color: var(--sbaInkSoft);
}

.sbathemeSectionDark .sbathemeStatValue {
	color: var(--sbaWhite);
}

.sbathemeStatLabel {
	display: block;
	margin-top: 0.45rem;
	color: var(--sbaSlate);
	font-size: 0.95rem;
}

.sbathemeSectionDark .sbathemeStatLabel {
	color: var(--sbaBody);
}

.sbathemeSteps {
	list-style: none;
	padding: 0;
	margin: 1.9rem 0 0;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
	gap: 1.4rem;
}

.sbathemeStep {
	position: relative;
	background: var(--sbaPaper);
	border: 1px solid rgba(10, 10, 11, 0.1);
	border-radius: 1rem;
	padding: 1.5rem 1.4rem 1.6rem;
}

.sbathemeStep::after {
	content: "";
	position: absolute;
	left: 1.4rem;
	right: 1.4rem;
	top: 0;
	height: 3px;
	background: var(--sbaAccent);
	border-radius: 0 0 3px 3px;
}

.sbathemeStepNumber {
	display: block;
	font-family: var(--sbaFontDisplay);
	font-size: 1.1rem;
	color: var(--sbaAccent);
	margin-bottom: 0.5rem;
	font-variant-numeric: tabular-nums;
}

.sbathemeStepTitle {
	font-size: 1.12rem;
	margin: 0 0 0.45rem;
	color: var(--sbaInkSoft);
}

.sbathemeStepBody {
	margin: 0;
	color: var(--sbaSlate);
}

.sbathemeSectionDark .sbathemeStep {
	background: var(--sbaLift);
	border-color: var(--sbaHairline);
}

.sbathemeSectionDark .sbathemeStepTitle {
	color: var(--sbaWhite);
}

.sbathemeSectionDark .sbathemeStepBody {
	color: var(--sbaBody);
}

.sbathemeQuote {
	margin: 1.9rem 0 0;
	padding: 1.9rem 2rem;
	background: var(--sbaAccentTint);
	border-radius: 1.1rem;
	border-left: 4px solid var(--sbaAccent);
	max-width: 52rem;
}

.sbathemeQuoteText {
	margin: 0;
	font-family: var(--sbaFontDisplay);
	font-size: clamp(1.25rem, 2.6vw, 1.7rem);
	line-height: 1.32;
	color: var(--sbaInkSoft);
	text-wrap: balance;
}

.sbathemeQuoteBy {
	display: block;
	margin-top: 1rem;
	font-weight: 700;
	color: var(--sbaInkSoft);
}

.sbathemeQuoteRole {
	display: block;
	font-weight: 400;
	color: var(--sbaSlate);
}

.sbathemeSectionDark .sbathemeQuote {
	background: var(--sbaLift);
}

.sbathemeSectionDark .sbathemeQuoteText,
.sbathemeSectionDark .sbathemeQuoteBy {
	color: var(--sbaWhite);
}

/* Language switcher in the utility bar: two codes, not a flag dropdown */

.sbathemeLanguages {
	display: inline-flex;
	align-items: center;
	gap: 0.15rem;
	padding: 0.1rem;
	border-radius: 999px;
	background: rgba(0, 0, 0, 0.16);
}

.sbathemeTopBar .sbathemeLanguages a.sbathemeLanguage {
	display: inline-block;
	padding: 0.2rem 0.62rem;
	border-radius: 999px;
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.08em;
	color: rgba(255, 255, 255, 0.82);
	text-decoration: none;
}

.sbathemeTopBar .sbathemeLanguages a.sbathemeLanguageActive {
	background: var(--sbaWhite);
	color: var(--sbaSignalDeep);
}

.sbathemeTopBar .sbathemeLanguages a.sbathemeLanguage:hover,
.sbathemeTopBar .sbathemeLanguages a.sbathemeLanguage:focus-visible {
	color: var(--sbaWhite);
	background: rgba(255, 255, 255, 0.18);
}

.sbathemeTopBar .sbathemeLanguages a.sbathemeLanguageActive:hover {
	background: var(--sbaWhite);
	color: var(--sbaSignalDeep);
}