/**
 * Design 2026 — Bootstrap 5.3 + component styles
 * Loaded on all pages using 2026 header/footer (see si_uses_design_2026()).
 *
 * Tokens: css/design-2026/variables-2026.css
 * Fonts:  css/design-2026/fonts-2026.css
 * WPB:    css/design-2026/wpb-2026.css
 */

/* -------------------------------------------------------------------------
   Layout — full 2026 landing template only (Bootstrap 5 page shell)
   ------------------------------------------------------------------------- */

body.page-template-page-2026 {
	margin: 0;
	font-family: var(--font-family-plain);
	font-weight: var(--font-weight-thin);
	font-synthesis: none;
}

html:has(body.page-template-page-2026) {
	overflow-x: clip;
}

body.page-template-page-2026 #page {
	position: relative;
	width: 100%;
	max-width: 100%;
	overflow-x: clip;
}

body.page-template-page-2026 #content {
	width: 100%;
	max-width: 100%;
	padding-top: 0;
	overflow-x: clip;
}

body.page-template-page-2026 .container,
body.page-template-page-2026 .container-2026 {
	padding-left: var(--layout-gutter-x);
	padding-right: var(--layout-gutter-x);
}

@media (min-width: 992px) {

	body.page-template-page-2026 .container,
	body.page-template-page-2026 .container-2026 {
		max-width: var(--layout-max-width);
	}
}

/* 2026 header/footer containers on hybrid + landing templates */
body.design-2026 .header-2026 .container,
body.design-2026 .header-2026 .container-2026,
body.design-2026 .footer-2026 .container,
body.design-2026 .footer-2026 .container-2026 {
	padding-left: var(--layout-gutter-x);
	padding-right: var(--layout-gutter-x);
}

@media (min-width: 992px) {

	body.design-2026 .header-2026 .container,
	body.design-2026 .header-2026 .container-2026,
	body.design-2026 .footer-2026 .container,
	body.design-2026 .footer-2026 .container-2026 {
		max-width: var(--layout-max-width);
	}
}

/* Text colour utilities */
.text-blue-lightest {
	color: var(--color-blue-lightest);
}

.text-blue-lighter {
	color: var(--color-blue-lighter);
}

.text-blue-light {
	color: var(--color-blue-light);
}

.text-blue,
.text-blue-regular {
	color: var(--color-blue);
}

.text-blue-dark {
	color: var(--color-blue-dark);
}

.text-blue-darker {
	color: var(--color-blue-darker);
}

.text-blue-darkest {
	color: var(--color-blue-darkest);
}

.text-navy-lightest {
	color: var(--color-navy-lightest);
}

.text-navy-lighter {
	color: var(--color-navy-lighter);
}

.text-navy-light {
	color: var(--color-navy-light);
}

.text-navy,
.text-navy-regular {
	color: var(--color-navy);
}

.text-navy-dark {
	color: var(--color-navy-dark);
}

.text-navy-darker {
	color: var(--color-navy-darker);
}

.text-navy-darkest {
	color: var(--color-navy-darkest);
}

.text-berry-lightest {
	color: var(--color-berry-lightest);
}

.text-berry-lighter {
	color: var(--color-berry-lighter);
}

.text-berry-light {
	color: var(--color-berry-light);
}

.text-berry,
.text-berry-regular {
	color: var(--color-berry);
}

.text-berry-dark {
	color: var(--color-berry-dark);
}

.text-berry-darker {
	color: var(--color-berry-darker);
}

.text-berry-darkest {
	color: var(--color-berry-darkest);
}

.text-orange-lightest {
	color: var(--color-orange-lightest);
}

.text-orange-lighter {
	color: var(--color-orange-lighter);
}

.text-orange-light {
	color: var(--color-orange-light);
}

.text-orange,
.text-orange-regular {
	color: var(--color-orange);
}

.text-orange-dark {
	color: var(--color-orange-dark);
}

.text-orange-darker {
	color: var(--color-orange-darker);
}

.text-orange-darkest {
	color: var(--color-orange-darkest);
}

.text-green-lightest {
	color: var(--color-green-lightest);
}

.text-green-lighter {
	color: var(--color-green-lighter);
}

.text-green-light {
	color: var(--color-green-light);
}

.text-green,
.text-green-regular {
	color: var(--color-green);
}

.text-green-dark {
	color: var(--color-green-dark);
}

.text-green-darker {
	color: var(--color-green-darker);
}

.text-green-darkest {
	color: var(--color-green-darkest);
}

.text-cloud-white {
	color: var(--color-cloud-white);
}

.text-grey-200 {
	color: var(--color-grey-200);
}

.text-grey-400 {
	color: var(--color-grey-400);
}

.text-grey-600 {
	color: var(--color-grey-600);
}

.text-grey-800 {
	color: var(--color-grey-800);
}

.text-grey-1000 {
	color: var(--color-grey-1000);
}

.text-white {
	color: var(--color-white);
}

.text-black {
	color: var(--color-black);
}

.text-charcoal {
	color: var(--color-charcoal);
}

.text-white-graditent {
	--text-white-gradient: radial-gradient(200.96% 108.1% at 55.9% 23.83%, #fff 0%, #b5deff 100%);
	background: var(--text-white-gradient);
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* animate-heading: chars/words are direct descendants of the gradient element */
.text-white-graditent .animate-heading__word,
.text-white-graditent .animate-heading__char {
	background: inherit;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* animate-text: gradient on line-inner; JS sets size/position for a continuous multi-line fill */
.text-white-graditent .animate-text__line-inner {
	background-image: var(--text-white-gradient);
	background-repeat: no-repeat;
	background-clip: text;
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	color: transparent;
}

/* Background utilities */
.bg-blue-lightest {
	background-color: var(--color-blue-lightest);
}

.bg-blue-lighter {
	background-color: var(--color-blue-lighter);
}

.bg-blue-light {
	background-color: var(--color-blue-light);
}

.bg-blue,
.bg-blue-regular {
	background-color: var(--color-blue);
}

.bg-blue-dark {
	background-color: var(--color-blue-dark);
}

.bg-blue-darker {
	background-color: var(--color-blue-darker);
}

.bg-blue-darkest {
	background-color: var(--color-blue-darkest);
}

.bg-navy-lightest {
	background-color: var(--color-navy-lightest);
}

.bg-navy-lighter {
	background-color: var(--color-navy-lighter);
}

.bg-navy-light {
	background-color: var(--color-navy-light);
}

.bg-navy,
.bg-navy-regular {
	background-color: var(--color-navy);
}

.bg-navy-dark {
	background-color: var(--color-navy-dark);
}

.bg-navy-darker {
	background-color: var(--color-navy-darker);
}

.bg-navy-darkest {
	background-color: var(--color-navy-darkest);
}

.bg-berry-lightest {
	background-color: var(--color-berry-lightest);
}

.bg-berry-lighter {
	background-color: var(--color-berry-lighter);
}

.bg-berry-light {
	background-color: var(--color-berry-light);
}

.bg-berry,
.bg-berry-regular {
	background-color: var(--color-berry);
}

.bg-berry-dark {
	background-color: var(--color-berry-dark);
}

.bg-berry-darker {
	background-color: var(--color-berry-darker);
}

.bg-berry-darkest {
	background-color: var(--color-berry-darkest);
}

.bg-orange-lightest {
	background-color: var(--color-orange-lightest);
}

.bg-orange-lighter {
	background-color: var(--color-orange-lighter);
}

.bg-orange-light {
	background-color: var(--color-orange-light);
}

.bg-orange,
.bg-orange-regular {
	background-color: var(--color-orange);
}

.bg-orange-dark {
	background-color: var(--color-orange-dark);
}

.bg-orange-darker {
	background-color: var(--color-orange-darker);
}

.bg-orange-darkest {
	background-color: var(--color-orange-darkest);
}

.bg-green-lightest {
	background-color: var(--color-green-lightest);
}

.bg-green-lighter {
	background-color: var(--color-green-lighter);
}

.bg-green-light {
	background-color: var(--color-green-light);
}

.bg-green,
.bg-green-regular {
	background-color: var(--color-green);
}

.bg-green-dark {
	background-color: var(--color-green-dark);
}

.bg-green-darker {
	background-color: var(--color-green-darker);
}

.bg-green-darkest {
	background-color: var(--color-green-darkest);
}

.bg-cloud-white {
	background-color: var(--color-cloud-white);
}

.bg-grey-200 {
	background-color: var(--color-grey-200);
}

.bg-grey-400 {
	background-color: var(--color-grey-400);
}

.bg-grey-600 {
	background-color: var(--color-grey-600);
}

.bg-grey-800 {
	background-color: var(--color-grey-800);
}

.bg-grey-1000 {
	background-color: var(--color-grey-1000);
}

.bg-white {
	background-color: var(--color-white);
}

.bg-black {
	background-color: var(--color-black);
}

.bg-charcoal {
	background-color: var(--color-charcoal);
}

/* Border utilities */
.border-blue {
	border-color: var(--color-blue);
}

.border-navy {
	border-color: var(--color-navy);
}

.border-berry {
	border-color: var(--color-berry);
}

.border-orange {
	border-color: var(--color-orange);
}

.border-green {
	border-color: var(--color-green);
}

.border-white {
	border-color: var(--color-white);
}

.border-charcoal {
	border-color: var(--color-charcoal);
}

/* -------------------------------------------------------------------------
   Typography
   ------------------------------------------------------------------------- */

.site-main.landing {
	padding-top: 0;
	margin-top: 0;
	font-family: var(--font-family-2026);
	font-size: var(--body-3-size);
	font-weight: var(--font-weight-thin);
	font-synthesis: none;
	line-height: var(--body-3-line);
	letter-spacing: var(--body-3-tracking);
	color: inherit;
}

/* -------------------------------------------------------------------------
   Headings
   ------------------------------------------------------------------------- */

.site-main.landing h1,
.site-main.landing .h1 {
	font-size: var(--h1-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h1-line);
	letter-spacing: var(--h1-tracking);
}

/* -------------------------------------------------------------------------
   Heading reveal — add class "animate-heading" on the h1–h6 element itself
   ------------------------------------------------------------------------- */

/* If JS is enabled, hide until split/reveal to avoid any flash-of-unstyled-content. */
html.js .site-main.landing :is(h1, h2, h3, h4, h5, h6).animate-heading:not(.animate-heading--split):not(.is-revealed) {
	visibility: hidden;
}

/* Char animation uses negative translateX; clip so it cannot widen the document. */
.site-main.landing :is(h1, h2, h3, h4, h5, h6).animate-heading {
	overflow-x: clip;
}

.site-main.landing :is(h1, h2, h3, h4, h5, h6).animate-heading .animate-heading__char {
	display: inline-block;
	opacity: 0;
	transform: translateX(-0.55em);
	filter: blur(4px);
	transition:
		transform 520ms cubic-bezier(0.2, 0.9, 0.2, 1),
		opacity 520ms ease,
		filter 520ms ease;
	transition-delay: var(--d, 0ms);
	will-change: transform, opacity, filter;
}

.site-main.landing :is(h1, h2, h3, h4, h5, h6).animate-heading.is-revealed .animate-heading__char {
	opacity: 1;
	transform: translateX(0);
	filter: blur(0);
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing :is(h1, h2, h3, h4, h5, h6).animate-heading .animate-heading__char {
		opacity: 1;
		transform: none;
		filter: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Body copy reveal — add class "animate-text" on the paragraph or text block
   (line-by-line slide up on scroll, similar to on.energy copy-reveal)
   ------------------------------------------------------------------------- */

/* Opacity (not visibility) so line measurement still works while hidden */
html.js .site-main.landing .animate-text:not(.animate-text--split):not(.is-revealed) {
	opacity: 0;
}

.site-main.landing .animate-text.animate-text--split {
	opacity: 1;
}

.site-main.landing .animate-text {
	overflow-x: clip;
}

.site-main.landing .animate-text__line {
	display: block;
	overflow: hidden;
}

.site-main.landing .animate-text__word {
	display: inline-block;
}

.site-main.landing .animate-text__line-inner {
	display: block;
	opacity: 0;
	transform: translateY(110%);
	transition:
		transform 720ms cubic-bezier(0.2, 0.9, 0.2, 1),
		opacity 720ms ease;
	transition-delay: calc(var(--line-i, 0) * 120ms);
	will-change: transform, opacity;
}

.site-main.landing .animate-text.is-revealed .animate-text__line-inner {
	opacity: 1;
	transform: translateY(0);
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing .animate-text__line-inner {
		opacity: 1;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Slide-up reveal — add class "slide-up-reveal" (on.energy SlideUpReveal)
   Optional: "cards" or "slide-up-reveal--children" to stagger direct children
   ------------------------------------------------------------------------- */

html.js .site-main.landing .slide-up-reveal:not(.is-revealed) {
	opacity: 0;
	visibility: hidden;
}

.site-main.landing .slide-up-reveal.is-revealed {
	opacity: 1;
	visibility: visible;
}

.site-main.landing .slide-up-reveal.slide-up-reveal--mode-self:not(.is-revealed) {
	transform: translateY(6.25rem);
}

.site-main.landing .slide-up-reveal.slide-up-reveal--mode-self.is-revealed {
	transform: translateY(0);
	transition:
		transform 1500ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 1500ms ease,
		visibility 1500ms ease;
	will-change: transform, opacity;
}

.site-main.landing .slide-up-reveal.slide-up-reveal--mode-children > * {
	will-change: transform, opacity;
}

.site-main.landing .slide-up-reveal.slide-up-reveal--mode-children:not(.is-revealed) > * {
	opacity: 0;
	transform: translateY(6.25rem);
}

.site-main.landing .slide-up-reveal.slide-up-reveal--mode-children.is-revealed > * {
	opacity: 1;
	transform: translateY(0);
	transition:
		transform 1500ms cubic-bezier(0.215, 0.61, 0.355, 1),
		opacity 1500ms ease;
	transition-delay: calc(var(--slide-up-i, 0) * 150ms);
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing .slide-up-reveal,
	.site-main.landing .slide-up-reveal > * {
		opacity: 1;
		visibility: visible;
		transform: none;
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Hover lift — add class "hover-lift" for button-style elevation on hover
   (move up only; no background, color, or shadow changes)
   ------------------------------------------------------------------------- */

.site-main.landing .hover-lift,
.footer-2026 .hover-lift {
	transform: translateY(0);
	transition: transform 180ms ease;
	will-change: transform;
}

.site-main.landing .hover-lift:hover,
.site-main.landing .hover-lift:focus-visible,
.footer-2026 .hover-lift:hover,
.footer-2026 .hover-lift:focus-visible {
	transform: translateY(-6px);
	outline: none;
}

@media (prefers-reduced-motion: reduce) {
	.site-main.landing .hover-lift:hover,
	.site-main.landing .hover-lift:focus-visible,
	.footer-2026 .hover-lift:hover,
	.footer-2026 .hover-lift:focus-visible {
		transform: none;
	}
}

.site-main.landing h2,
.site-main.landing .h2 {
	font-size: var(--h2-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h2-line);
	letter-spacing: var(--h2-tracking);
}

.site-main.landing h3,
.site-main.landing .h3 {
	font-size: var(--h3-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h3-line);
	letter-spacing: var(--h3-tracking);
}

.site-main.landing h4,
.site-main.landing .h4 {
	font-size: var(--h4-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h4-line);
	letter-spacing: var(--h4-tracking);
}

.site-main.landing h5,
.site-main.landing .h5 {
	font-size: var(--h5-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h5-line);
	letter-spacing: var(--h5-tracking);
}

.site-main.landing h6,
.site-main.landing .h6 {
	font-size: var(--h6-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--h6-line);
	letter-spacing: var(--h6-tracking);
}

/* Quotes */
.site-main.landing blockquote,
.site-main.landing .quote-1 {
	font-size: var(--quote-1-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--quote-1-line);
	letter-spacing: var(--quote-1-tracking);
}

/* WPBakery text columns inherit body-3 unless a typography utility class is set */
.site-main.landing .wpb_text_column:not(.eyebrow):not(.body-1):not(.text-body-1):not(.body-2):not(.text-body-2):not(.body-3):not(.text-body-3) :is(p, ul, ol, li) {
	font-size: inherit;
	font-weight: inherit;
	line-height: inherit;
	letter-spacing: inherit;
}

/* Applies on the element itself or via a parent wrapper, e.g. <div class="eyebrow"><p>…</p></div> */
.site-main.landing .eyebrow,
.site-main.landing .eyebrow :is(p, ul, ol, li, span),
.site-main.landing .wpb_text_column.eyebrow :is(p, ul, ol, li, span) {
	font-size: var(--eyebrow-size);
	font-weight: var(--font-weight-regular);
	line-height: var(--eyebrow-line);
	letter-spacing: var(--eyebrow-tracking);
	text-transform: uppercase;
}

/* Body copy scale — same: works on the element or from a parent wrapper */
.site-main.landing :is(.body-1, .text-body-1),
.site-main.landing :is(.body-1, .text-body-1) :is(p, ul, ol, li, span),
.site-main.landing .wpb_text_column:is(.body-1, .text-body-1) :is(p, ul, ol, li, span),
.footer-2026 :is(.body-1, .text-body-1),
.footer-2026 :is(.body-1, .text-body-1) :is(p, ul, ol, li, span) {
	font-size: var(--body-1-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--body-1-line);
	letter-spacing: var(--body-1-tracking);
}

.site-main.landing :is(.body-2, .text-body-2),
.site-main.landing :is(.body-2, .text-body-2) :is(p, ul, ol, li, span),
.site-main.landing .wpb_text_column:is(.body-2, .text-body-2) :is(p, ul, ol, li, span),
.footer-2026 :is(.body-2, .text-body-2),
.footer-2026 :is(.body-2, .text-body-2) :is(p, ul, ol, li, span) {
	font-size: var(--body-2-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--body-2-line);
	letter-spacing: var(--body-2-tracking);
}

.site-main.landing :is(.body-3, .text-body-3),
.site-main.landing :is(.body-3, .text-body-3) :is(p, ul, ol, li, span),
.site-main.landing .wpb_text_column:is(.body-3, .text-body-3) :is(p, ul, ol, li, span),
.footer-2026 :is(.body-3, .text-body-3),
.footer-2026 :is(.body-3, .text-body-3) :is(p, ul, ol, li, span) {
	font-size: var(--body-3-size);
	font-weight: var(--font-weight-thin);
	line-height: var(--body-3-line);
	letter-spacing: var(--body-3-tracking);
}

/* Button wrapper has the extra class */
.vc_btn3-container.btn-explore .vc_btn3 {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0.5rem 0.45rem 1.4rem;
	border-radius: 9999px;
	font-family: var(--font-family-plain, system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.0175rem;
	color: #000 !important;
	text-decoration: none;
	border: 0 !important;
	background-color: #fff !important;
	background-image: none !important;
	filter: drop-shadow(0 4px 14px rgba(0, 0, 0, 0.15));
	transform: translateY(0);
	transition: transform 180ms ease, box-shadow 180ms ease;
	will-change: transform;
	isolation: isolate;
}

/* Gradient on a layer — avoids flash when hover swaps to solid white */
.vc_btn3-container.btn-explore .vc_btn3::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: var(--text-radial);
	z-index: -1;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.vc_btn3-container.btn-explore .vc_btn3:hover,
.vc_btn3-container.btn-explore .vc_btn3:focus-visible {
	transform: translateY(-6px);
	background-color: #fff !important;
	background-image: none !important;
	filter: none;
	box-shadow:
		0 0 0 1px rgba(255, 255, 255, 0.35),
		0 12px 40px rgba(255, 255, 255, 0.35),
		0 18px 48px rgba(0, 0, 0, 0.12);
	outline: none;
}

.vc_btn3-container.btn-explore .vc_btn3:hover::before,
.vc_btn3-container.btn-explore .vc_btn3:focus-visible::before {
	opacity: 0;
}

/* Right-side blue circle + arrow */
.vc_btn3-container.btn-explore .vc_btn3::after {
	content: "→";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.25rem;
	border-radius: 9999px;
	background: var(--color-blue, #0892ff);
	color: #fff;
	font-size: 1.05rem;
	line-height: 1;
}

/* Reversed explore button — dark gradient + white text (for light sections) */
.vc_btn3-container.btn-explore-reverse .vc_btn3 {
	position: relative;
	z-index: 0;
	display: inline-flex;
	align-items: center;
	gap: 0.75rem;
	padding: 0.45rem 0.5rem 0.45rem 1.4rem;
	border-radius: 9999px;
	font-family: var(--font-family-plain, system-ui, sans-serif);
	font-size: 0.875rem;
	font-weight: 400;
	letter-spacing: 0.0175rem;
	color: var(--color-white) !important;
	text-decoration: none;
	border: 0 !important;
	background-color: var(--color-blue) !important;
	background-image: none !important;
	box-shadow: 0 4px 14px rgba(8, 146, 255, 0.35);
	transform: translateY(0);
	top: 0;
	isolation: isolate;
	transition: transform 180ms ease, box-shadow 180ms ease;
	will-change: transform;
}

/* Gradient on a layer — never animate background (causes flash between gradient and solid) */
.vc_btn3-container.btn-explore-reverse .vc_btn3::before {
	content: '';
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: linear-gradient(90deg, var(--color-navy-darker) 0%, var(--color-blue) 52%, var(--color-navy-darker) 100%);
	z-index: -1;
	pointer-events: none;
	transition: opacity 180ms ease;
}

.vc_btn3-container.btn-explore-reverse .vc_btn3:hover,
.vc_btn3-container.btn-explore-reverse .vc_btn3:focus-visible {
	transform: translateY(-6px);
	color: var(--color-white) !important;
	background-color: var(--color-blue) !important;
	background-image: none !important;
	box-shadow:
		0 0 0 1px rgba(8, 146, 255, 0.35),
		0 12px 40px rgba(8, 146, 255, 0.3),
		0 18px 48px rgba(0, 0, 0, 0.12);
	outline: none;
}

.vc_btn3-container.btn-explore-reverse .vc_btn3:hover::before,
.vc_btn3-container.btn-explore-reverse .vc_btn3:focus-visible::before {
	opacity: 0;
}

/* Right-side white circle + blue arrow */
.vc_btn3-container.btn-explore-reverse .vc_btn3::after {
	content: "→";
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.25rem;
	height: 2.25rem;
	margin-left: 0.25rem;
	border-radius: 9999px;
	background: var(--color-white);
	color: var(--color-blue);
	font-size: 1.05rem;
	line-height: 1;
}

.site-main.landing .bg-soft-light {
	background-blend-mode: soft-light;
}

/* Legacy templates: offset fixed overlay header when page content is not full-bleed */
body.design-2026 #content.site-content:not(:has(.site-main.landing)) {
	padding-top: 5.5rem;
}