/*
Theme Name: Material AI Pro
Author: Nayra Themes
Description: Material AI Pro is a cutting-edge Full Site Editing (FSE) block theme for AI startups, corporate businesses and creative agencies. It is built with theme.json, block templates, template parts and block patterns (hero banner, services, pricing, call-to-action, text ticker and latest posts), plus blog index, archive, search, single post and 404 templates. Everything can be edited in the Site Editor.
Version: 1.4
Tested up to: 7.1
Requires PHP: 5.8
License: GPLv3 or later
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Text Domain: material-ai-pro
Slug: material-ai-pro
Tags: blog, portfolio, entertainment, grid-layout, one-column, two-columns, three-columns, four-columns, block-patterns, block-styles, custom-logo, custom-menu, editor-style, featured-images, full-site-editing, full-width-template, style-variations, template-editing, theme-options, translation-ready, wide-blocks

This theme, like WordPress, is licensed under the GPL.
Use it to make something cool, have fun, and share what you've learned with others.

*/

:root {
	/*var(--wp--preset--color--primary): --wp--preset--color--primary;
	var(--wp--preset--color--secondary): --wp--preset--color--secondary;*/
	--dark: #000000;
	--white: #ffffff;
}
.materialai-services-section .materialai-service-columns,
.ma-ai-section .ma-ai-features,
.faq-split .faq-split__row,
.contact-section__content,
.why-choose-us .why-choose-us__row,
.main-container{
	width: 100%;
	margin-right: auto;
	margin-left: auto;
}
.materialai-navbar{
	z-index:10;
}
.materialai-navbar::before{
	content: "";
	position: absolute;
	inset: 9px;
	border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 65%, #ffffff) 60%, transparent);
	border-radius: 14px 14px 0 0;
	pointer-events: none;
	border-bottom: none;
}
.materialai-navbar::after{
	content: "";
	position: absolute;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 14px 14px 0 0;
	pointer-events: none;
	border-bottom: none;
	background: transparent;
	box-shadow: none;
	top: 5px;
	left: 5px;
	right: 5px;
	bottom: 13px;
}
.materialai-nav-wrap{
	position:relative;
	width:100%;
	height:90px;
	display:flex;
	justify-content:center;
	align-items:flex-end;
	overflow:visible;
}
.materialai-nav-wrap::after{
	content:"";
	position:absolute;
	left:0;
	bottom:0;
	width:100%;
	height:20px;
	background:var(--wp--preset--color--primary);
	z-index:1;
}
.materialai-navbar{
	position:relative;
	width:min(1170px);
	height:90px;
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	padding:0 28px;
	background:var(--wp--preset--color--primary);
	border-radius:20px 20px 0 0;
}
.materialai-navbar > nav{
	flex: 1;
}
.block-editor-warning__message:has(+.block-editor-warning__actions) {
	display: none;
}
.materialai-right-border:after{
	content: '';
	position: absolute;
	background: rgb(255 255 255 / 18%);
	bottom: 12px;
	height: 1px;
	z-index: 10;
}
.materialai-right-border:before{
	content: '';
	position: absolute;
	background: rgb(255 255 255 / 18%);
	bottom: 8px;
	height: 1px;
	z-index: 10;
}
.materialai-left-border:after{
	content: '';
	position: absolute;
	background: rgb(255 255 255 / 18%);
	bottom: 12px;
	height: 1px;
	z-index: 10;
}
.materialai-left-border:before{
	content: '';
	position: absolute;
	background: rgb(255 255 255 / 18%);
	bottom: 8px;
	height: 1px;
	z-index: 10;
}
.materialai-navbar .search-btn .wp-block-search__button{
	width:50px;
	height:50px;
	border-radius:50%;
	border:0;
	background:var(--wp--preset--color--secondary);
	color:var(--white);
	display:flex;
	align-items:center;
	justify-content:center;
	padding:0;
	min-width:50px;
	transform: rotate(-90deg);
	transition: all 0.3s;
}
.materialai-actions .search-btn .wp-block-search__button svg{
	transition: all 0.3s;
}
.materialai-actions .search-btn .wp-block-search__button:hover,
.materialai-actions .search-btn .wp-block-search__button:focus{
	background-color: #fff;
}
.materialai-actions .search-btn .wp-block-search__button:hover svg,
.materialai-actions .search-btn .wp-block-search__button:focus svg{
	fill: var(--wp--preset--color--secondary);
}
.materialai-button-right .wp-block-button__link{
	position: relative;
	padding: 10px 60px 10px 25px;
	overflow: hidden;
}
.slider-1 .wp-block-buttons-is-layout-flex{
	margin-top: 40px;
	margin-bottom: 30px;
	gap: 50px;
}
.slider-1 .materialai-btn-right-only-icon{
	position: relative;
}
.slider-1 .wp-block-buttons>.materialai-btn-right-only-icon,
.slider-1 .wp-block-buttons>.materialai-button-right{
	margin-bottom: 30px;
}
.slider-1 .materialai-button-right .wp-block-button__link{
	overflow: visible;
}
.slider-1 .materialai-btn-right-only-icon .wp-block-button__link,
.slider-1 .materialai-button-right .wp-block-button__link{
	/* box-shadow: 0 0 0 3px color-mix(in srgb, var(--wp--preset--color--secondary) 88%, #ffffff), 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--secondary) 75%, #ffffff), 0 0 0 7px color-mix(in srgb, var(--wp--preset--color--secondary) 88%, #ffffff), 0 0 0 8px color-mix(in srgb, var(--wp--preset--color--secondary) 75%, #ffffff), 0 0 0 11px color-mix(in srgb, var(--wp--preset--color--secondary) 88%, #ffffff), 0 0 0 12px color-mix(in srgb, var(--wp--preset--color--secondary) 75%, #ffffff); */
}

.has-ripples {
	position: relative;
}
.materialai-btn-right-only-icon .wp-block-button__link::before {
	content: "";
	background: var(--wp--preset--color--primary);
	display: block;
	width: 0;
	height: 0;
	right:0;
	line-height: 45px;
	color: #000;
	position: absolute;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%) scale(1);
	transition: all .4s ease-in-out;
	z-index: 0;
	
}
.materialai-btn-right-only-icon:hover .wp-block-button__link::before{
	width: 50px;
	height: 50px;
}

.materialai-footer .materialai-button-right .wp-block-button__link{
	border: 2px solid var(--white);
}
.materialai-button-circle-white {
	--circle-bg: var(--white);
	--circle-color:var(--wp--preset--color--primary);
}

.materialai-button-circle-primary {
	--circle-bg:var(--wp--preset--color--primary);
	--circle-color: var(--white);
}
.materialai-button-circle-secondary {
	--circle-bg:var(--wp--preset--color--secondary);
	--circle-color: var(--white);
}
.materialai-nav-wrap .materialai-actions .materialai-button-right{
	display: flex;
}
.materialai-button-right .wp-block-button__link::after{
	content: "";
	background: var(--circle-bg);
	display: block;
	width: 0;
	height: 0;
	right:0;
	line-height: 45px;
	color: #000;
	position: absolute;
	border-radius: 50%;
	top: 50%;
	transform: translateY(-50%) scale(1);
	transition: all .4s ease-in-out;
	z-index: 0;
}
.materialai-button-right:hover .wp-block-button__link::after{
	width: 50px;
	height: 50px;
}
.materialai-button-right .wp-block-button__link::before{
	content: "➜";
	display: block;
	width: 45px;
	height: 45px;
	right:-19px;
	line-height: 45px;
	color: #fff;
	position: absolute;
	border-radius: 50%;
	top:50%;
	transform: translate(-50%, -50%) scale(1);
	transition: all .4s ease-in-out;
	z-index:1;
}
.materialai-header .materialai-button-right:hover .wp-block-button__link::before{
	color: var(--wp--preset--color--secondary);
}
.materialai-button-right:hover .wp-block-button__link:after,
.materialai-button-right:focus .wp-block-button__link:after{
	/* transform: translate(-50%, -50%) scale(10); */
	/* z-index: -1; */
}
.materialai-header .materialai-button-right:hover .wp-block-button__link{
	/* color: var(--wp--preset--color--secondary); */
}
.slider-1 .materialai-button-right .wp-block-button__link::after{
	content: "";
	width: 50px;
	height: 50px;
	right: -1px;
	line-height: 50px;
	transform: unset !important;
	top:-1px;
}
.slider-1 .materialai-button-right .wp-block-button__link::before{
	content: "➜";
	width: 50px;
	height: 50px;
	right:-1px;
	line-height: 50px;
	color: #fff;
	transform: unset !important;
	top:-1px;
}
.materialai-btn-right-only-icon .wp-block-button__link{
	position: relative;
	padding: 10px 60px 10px 25px;
	font-size: 16px;
	font-weight: 400;
}
.materialai-button-right .wp-block-button__link {
	position: relative;
	padding: 10px 60px 10px 25px;
	font-size: 16px;
	font-weight: 400;
}
.materialai-btn-right-only-icon .wp-block-button__link::after{
	content: "➜";
	position: absolute;
	right: 20px;
	top: 50%;
	transform: translateY(-50%);
	border-radius: 50%;
	color: var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
}
.materialai-button-left .wp-block-button__link{
	position: relative;
	padding: 16px 30px 16px 70px;
}
.materialai-button-left .wp-block-button__link::before{
	content: "➜";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	background: var(--circle-bg);
	color: var(--circle-color);
	display: flex;
	align-items: center;
	justify-content: center;
}
.materialai-button-call .wp-block-button__link{
	position: relative;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 5px;
	padding: 8px 15px 8px 55px;
	background: var(--wp--preset--color--primary);
	color: var(--white);
	border: 2px solid var(--white);
	border-radius: 999px;
	font-size: 18px;
	font-weight: 600;
	text-decoration: none;
	transition: .3s ease;
	box-shadow:
	0 0 0 2px var(--wp--preset--color--secondary),
	0 0 0 2px var(--wp--preset--color--secondary);
}
.materialai-button-call .wp-block-button__link::before{
	content: "";
	position: absolute;
	left: 2px;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 50%;
	color: var(--circle-color);
	font-size: 25px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--secondary)
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 16.92v3a2 2 0 0 1-2.18 2 19.79 19.79 0 0 1-8.63-3.07 19.5 19.5 0 0 1-6-6A19.79 19.79 0 0 1 2.08 4.18 2 2 0 0 1 4.06 2h3a2 2 0 0 1 2 1.72c.12.89.33 1.76.63 2.6a2 2 0 0 1-.45 2.11L8.09 9.91a16 16 0 0 0 6 6l1.48-1.15a2 2 0 0 1 2.11-.45c.84.3 1.71.51 2.6.63A2 2 0 0 1 22 16.92z'/%3E%3C/svg%3E")
	no-repeat center;
	background-size: 16px;
}
.materialai-btn-right-only-icon .wp-block-button__link::after{
	content: "➜";
	width: 50px;
	height: 50px;
	right:-1px;
	line-height: 50px;
	color: #fff;
	transform: unset !important;
	top:-1px;
}
.wp-block-separator {
	border-top: 1px solid;
}
.gt_float_switcher img {
	
	border-radius: 50% !important;
}
.gt_float_switcher .gt-selected .gt-current-lang span.gt-lang-code{
	display: none;
}

.gt_float_switcher {
	box-shadow: none !important;
}
.gt_float_switcher img{
	height: 50px !important;
	width: 50px !important;
	object-fit: cover;
}
.materialai-footer-links{
	list-style:none;
	margin:0;
	padding:0;
}
.materialai-footer-links li{
	position:relative;
	padding:14px 0 14px 18px;
	border-bottom:1px solid rgba(255,255,255,.08);
}
.materialai-footer-links li:last-child{
	border-bottom:none;
}
.materialai-footer-links li::before{
	content:"";
	position:absolute;
	left:0;
	top:50%;
	width:5px;
	height:5px;
	border-radius:50%;
	background:var(--wp--preset--color--primary);
	transform:translateY(-50%);
}
.materialai-footer-links a{
	color:var(--white);
	text-decoration:none;
	font-size:16px;
	font-weight:500;
	transition:.3s;
}
.materialai-footer-links a:hover{
	color:var(--wp--preset--color--primary);
	padding-left:6px;
}
.materialai-footer-title{
	position:relative;
	display:inline-block;
	margin-bottom:35px !important;
}
.materialai-footer-title::after{
	content:"•••";
	position:absolute;
	left:0;
	bottom:-18px;
	color:var(--wp--preset--color--primary);
	font-size:10px;
	letter-spacing:2px;
	line-height:1;
}
.materialai-footer-title::before{
	content:"";
	position:absolute;
	left:22px;
	bottom:-14px;
	width:30px;
	height:2px;
	background:var(--wp--preset--color--primary);
	border-radius:20px;
	box-shadow:0 0 8px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 85%, #ffffff) 80%, transparent);
}
.subscribe-button-wrap{
	position:relative;
	display:block !important;
}
.subscribe-button{
	width:100%;
	height:45px;
	padding:0 60px 0 24px;
	border:2px solid var(--white);
	border-radius:999px;
	background:var(--wp--preset--color--primary);
	color:var(--white);
	font-size:16px;
	font-weight:700;
	text-align:left;
	cursor:pointer;
	transition:.3s;
}
.subscribe-button-wrap::after{
	content:"➜";
	position:absolute;
	top:22px;
	right:0px;
	transform:translateY(-50%);
	width:40px;
	height:40px!important;
	border-radius:50%;
	border:2px solid var(--white);
	background: var(--wp--preset--color--secondary);
	color: var(--white);
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:20px;
	font-weight:700;
}
.subscribe-email{
	width:100%;
	height:45px;
	padding:0 22px;
	border:1px solid var(--wp--preset--color--primary);
	border-radius:999px;
	background:transparent;
	color:var(--white);
	font-size:16px;
	font-weight:400;
	margin-bottom: 15px;
	line-height:1.5;
	outline:none;
	box-sizing:border-box;
	transition:all .3s ease;
	appearance:none;
	-webkit-appearance:none;
}
.newsletter-card{
	border:1px dashed var(--wp--preset--color--primary);
	border-radius:10px;
}
.materialai-badge p:first-child,
.materialai-badge > .wp-block-icon:first-child{
	width:34px;
	height:34px;
	display:flex;
	align-items:center;
	justify-content:center;
	border-radius:50%;
	background:var(--wp--preset--color--primary);
	color:var(--white);
	margin:0;
	font-weight:700;
}
/* A badge can lead with an Icon block instead of a letter; the icon fills the
   same disc, inset so the glyph keeps some air around it. */
.materialai-badge > .wp-block-icon:first-child{
	flex: 0 0 auto;
	box-sizing: border-box;
	padding: 7px;
	line-height: 0;
}
.materialai-badge > .wp-block-icon:first-child svg{
	display: block;
	width: 100%;
	height: 100%;
	fill: currentColor;
}
.materialai-badge{
	position: relative;
	display: inline-flex;
	align-items:left;
	gap: 7px;
	padding: 7px 14px 7px 7px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: 999px;
	width: fit-content;
	z-index: 1;
}
.materialai-badge::before{
	content: "";
	position: absolute;
	inset: 4px;
	border: 1px solid var(--wp--preset--color--primary);
	border-radius: inherit;
	pointer-events: none;
}
.materialai-slider-image-wrap{
	position: relative;
}
.materialai-stats-slider{
	position:relative;
	height:220px;
}
.materialai-box-slider{
	border:1px solid color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff);
	border-bottom:none;
	border-radius:18px 18px 0 0;
	position:relative;
	
	background:
	linear-gradient(
	90deg,
	transparent,
	var(--wp--preset--color--primary) 50%,
	transparent
	),
	linear-gradient(
	90deg,
	transparent,
	var(--wp--preset--color--primary) 50%,
	transparent
	);
	
	background-repeat:no-repeat;
	background-size:
	30px 2px,
	30px 2px;
	
	background-position:
	calc(50% - 220px) top,
	calc(50% + 220px) top;
	
	animation: topDashMove 4s ease-in-out infinite;
}

@keyframes topDashMove{
	0%,100%{
		background-position:
		calc(50% - 220px) top,
		calc(50% + 220px) top;
		
		background-size:
		16px 2px,
		16px 2px;
	}
	
	50%{
		background-position:
		calc(50% - 200px) top,
		calc(50% + 200px) top;
		
		background-size:
		24px 2px,
		24px 2px;
	}
}
.materialai-box-slider::before{
	content:"";
	position:absolute;
	top:100%;
	right:100%;
	width:80%;
	height:1px;
	overflow:hidden;
	background:
	linear-gradient(
	90deg,
	color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff) 0%,
	color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff) 42%,
	color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 30%, transparent) 47%,
	color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 50%,
	color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 30%, transparent) 53%,
	color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff) 58%,
	color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff) 100%
	);
	background-size:200% 100%;
	animation:leftLine 4s ease-in-out infinite;
}
@keyframes leftLine{
	0%,100%{
		background-position:45% 0;
	}
	50%{
		background-position:55% 0;
	}
}
.materialai-box-slider::after{
	content:"";
	position:absolute;
	top:100%;
	left:100%;
	width:80%;
	height:1px;
	background:color-mix(in srgb, var(--wp--preset--color--secondary) 81%, #ffffff);
	overflow:hidden;
	background-image:
	linear-gradient(
	90deg,
	transparent 0,
	transparent 47%,
	color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 50%,
	transparent 53%,
	transparent 100%
	);
	
	background-size:180% 100%;
	animation:rightDash 4s ease-in-out infinite;
}

@keyframes rightDash{
	0%,100%{
		background-position:60% 0;
	}
	50%{
		background-position:40% 0;
	}
}
.stats-card{
	display:flex;
}
.stats-card .stat{
	margin-top: 0px;
}
.stat{
	display:flex;
	align-items:center;
	gap:18px;
}
.progress{
	width:72px;
	height:72px;
	border-radius:50%;
	display:grid;
	place-items:center;
	position:relative;
}

.progress::before{
	content:'';
	position:absolute;
	width:55px;
	height:55px;
	background:var(--wp--preset--color--secondary);
	border-radius:50%;
}

.progress p{
	position:relative;
}
.progress{
	background:
	conic-gradient(
	var(--wp--preset--color--primary) var(--progress),
	var(--wp--preset--color--secondary) 0
	);
}
.owl-dots button span{
	width:30px;
	min-height:30px;
	line-height: 30px;
	padding:0;
	border-radius:50%;
	display:flex;
	align-items:center;
	justify-content:center;
	font-size:13px;
	background:var(--wp--preset--color--secondary);
}
.owl-dots button.active span{
	width:30px;
	height:30px;
	min-height:30px;
	padding:0;
	border-radius:50%;
	display:flex;
	font-size:13px;
	background:var(--white);
	color:var(--wp--preset--color--secondary);
}
.slider-1 .owl-dots{
	position: absolute;
	left: 50%;
	bottom: -268px;
	transform: translateX(-50%);
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 8px 8px;
	background: var(--wp--preset--color--primary);
	border-radius: 20px 20px 0 0;
}
.slider-1 .owl-nav{
	display: none !important;
}
.materialai-heading-default{
	position: relative;
	display: inline-block;
	padding-bottom: 60px;
}

.materialai-heading-default::before{
	content:"";
	position:absolute;
	left:50%;
	bottom:-35px;
	transform:translateX(-50%);
	width:118px;
	height:18px;
	background:
	radial-gradient(circle at center,var(--wp--preset--color--primary) 0 9px,transparent 9px) left center/18px 18px no-repeat,
	radial-gradient(circle at center,var(--wp--preset--color--primary) 0 9px,transparent 9px) right center/18px 18px no-repeat,
	linear-gradient(var(--wp--preset--color--secondary),var(--wp--preset--color--secondary)) center 10px/84px 2px no-repeat,
	linear-gradient(var(--wp--preset--color--primary),var(--wp--preset--color--primary)) center 8px/84px 6px no-repeat;
}

.materialai-heading-default::after{
	content:"";
	position:absolute;
	bottom:-31px;
	left:calc(50% - 42px);
	width:6px;
	height:6px;
	background:var(--white);
	border-radius:50%;
	animation:maRunner 1.2s linear infinite alternate;
}
@keyframes maRunner{ from{ left:calc(50% - 42px); } to{ left:calc(50% + 36px); } }

.materialai-cta-banner-btn .wp-block-button__link{
	display:inline-flex;
	align-items:center;
	justify-content:flex-start;
	gap:18px;
	padding:10px 70px 10px 20px;
	font-size: 18px;
	font-weight: 500;
	border:3px solid var(--white);
	background:var(--wp--preset--color--secondary);
	position:relative;
	transition:.35s;
	width: 100%;
	margin-bottom: 30px;
}
.materialai-cta-banner-btn .wp-block-button__link::after{
	content: "➜";
	width: 50px;
	height: 50px;
	border-radius: 50%;
	background: var(--wp--preset--color--primary);
	border: 3px solid var(--white);
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: auto;
	font-size: 22px;
	position: absolute;
	transform: none;
	right: -2px;
}
.materialai-cta-banner-btn .wp-block-button__link:hover{
	background:transparent;
	padding-left:24px;
}

.wp-block-template-part .gtranslate_wrapper .gt_float_switcher{
	overflow: visible;
	position: relative;
	z-index: 999;
}
.wp-block-template-part .gtranslate_wrapper .gt_float_switcher .gt_options{
	position: absolute;
	right: 0;
	top: 100%;
	width: 140px;
	background-color: #fff;
	box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.10);
	padding: 15px 15px;
	visibility: hidden;
	opacity: 0;
	z-index: 9;
	border-radius: 5px;
	box-shadow: 0 0 0 1px rgba(68, 68, 68, 0.11);
	text-align: left;
	transition: visibility 0s .2s, opacity .2s, -webkit-transform .2s
	ease-out;
	transition: visibility 0s .2s, opacity .2s, transform .2s
	ease-out;
	transition: visibility 0s .2s, opacity .2s, transform .2s
	ease-out, -webkit-transform .2s
	ease-out;
}
.wp-block-template-part .gtranslate_wrapper .gt_float_switcher .gt_options.gt-open{
	visibility: visible;
	opacity: 1;
	-webkit-transform: translateY(4px);
	-ms-transform: translateY(4px);
	transform: translateY(4px);
	transition: opacity .2s, -webkit-transform .2s
	ease-out;
	transition: opacity .2s, transform .2s
	ease-out;
	transition: opacity .2s, transform .2s
	ease-out, -webkit-transform .2s
	ease-out;
}
.wp-block-template-part .gtranslate_wrapper .gt_float_switcher .gt-selected .gt-current-lang{
	padding: 0px;
	color: #fff;
	font-size: 14px;
	font-weight: 400;
}
.wp-block-template-part .gtranslate_wrapper .gt_float_switcher .gt_options a{
	padding: 4px 0px 4px 33px;
	font-size: 14px;
	font-weight: 400;
	position: relative;
	background-color: #fff;
	transition: all 0.3s;
}
.wp-block-template-part .gtranslate_wrapper .gt_float_switcher .gt_options a img{
	height: 20px !important;
	width: 20px !important;
	margin-right: 0px;
	position: absolute;
	top: 4px;
	left: 0;
	border-radius: 50%;
}
.wp-block-template-part .gt_float_switcher .gt_options a:hover{
	background: var(--wp--preset--color--primary);
	color: #fff;
	
}
.editor-styles-wrapper .ai-team-list{
	height:auto !important;
	justify-content:flex-start !important;
	gap:16px !important;
}
.editor-styles-wrapper .ai-team-item{
	margin-bottom:4px !important;
}

/**
	* MaterialAi Pro — Scrolling Text Ticker
	* Pure CSS. The track holds the phrases twice and slides -50%, so the loop
	* has no seam.
*/
.mai-ticker {
	--mai-ticker-duration: 30s;
	--mai-ticker-space: 46px;
	position: relative;
	overflow: hidden;
}

.mai-ticker .mai-ticker__track {
	width: max-content;
	max-width: none;
	margin-inline: 0;
	align-items: center;
	gap: 0;
	animation: mai-ticker-run var(--mai-ticker-duration) linear infinite;
}

@keyframes mai-ticker-run {
	to {
		transform: translate3d(-50%, 0, 0);
	}
}

.mai-ticker:hover .mai-ticker__track {
	animation-play-state: paused;
}

.mai-ticker .mai-ticker__item {
	flex: 0 0 auto;
	margin: 0 var(--mai-ticker-space) 0 0;
	white-space: nowrap;
	font-size: 16px;
	font-style: italic;
	font-weight: 700;
	line-height: 1.5;
}

/* The * separator, so the editor only holds the phrase itself. */
.mai-ticker .mai-ticker__item::before {
	content: "*";
	margin-right: 9px;
	font-style: normal;
}

@media (max-width: 781px) {
	.mai-ticker {
		--mai-ticker-duration: 20s;
		--mai-ticker-space: 30px;
	}
	
	.mai-ticker .mai-ticker__item {
		font-size: 14px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mai-ticker .mai-ticker__track {
		animation: none;
	}
}

/* Hold still while editing. */
.editor-styles-wrapper .mai-ticker {
	overflow-x: auto;
}

.editor-styles-wrapper .mai-ticker .mai-ticker__track {
	animation: none;
}
/* Breadcrumb */
.mai-breadcrumb {
	--mai-violet: var(--wp--preset--color--primary);
	--mai-violet-light: color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff);
	--mai-violet-x-light: color-mix(in srgb, var(--wp--preset--color--primary) 35%, #ffffff);
	--mai-hair: rgba(176, 182, 255, .16);
	--mai-line: rgba(205, 210, 255, .24);
	--mai-crumb-line: #fff;
	--mai-bg-position: center center;
	--mai-bg-tint: .0;
	--mai-crumb-fill: var(--wp--preset--color--secondary);
	--mai-accent-h: clamp(1px, .12vw, 2px);
	--mai-bar-h: clamp(13px, 1.802vw, 30px);
	--mai-frame-l: 12.372%;
	--mai-frame-r: 12.613%;
	--mai-frame-t: 48.756%;
	--mai-frame-b: 10.448%;
	--mai-frame-rad: clamp(6px, .841vw, 14px);
	--mai-rail-b: 89.552%;
	--mai-track-h: clamp(34px, 4.204vw, 70px);
	--mai-plate-px: calc(var(--mai-track-h) * .5);
	--mai-plate-pt: calc(var(--mai-track-h) * .214);
	--mai-plate-pb: calc(var(--mai-track-h) * .214);
	--mai-plate-r: calc(var(--mai-track-h) * .229);
	--mai-line-w: max(1px, calc(var(--mai-track-h) * .0143));
	--mai-ring-gap: calc(var(--mai-track-h) * .0714);
	--mai-ring-tip: calc(var(--mai-track-h) * .109);
	--mai-body-h: calc(var(--mai-track-h) - 2 * var(--mai-ring-gap));
	--mai-arrow-out: calc(var(--mai-body-h) * .433);
	--mai-arrow-in: calc(var(--mai-body-h) * .433);
	--mai-seg-r: calc(var(--mai-track-h) * .5);
	--mai-body-r: calc(var(--mai-body-h) * .5);
	--mai-circle: calc(var(--mai-track-h) * .714);
	--mai-icon: calc(var(--mai-track-h) * .286);
	--mai-fs: calc(var(--mai-track-h) * .357);
	--mai-gap-ic: calc(var(--mai-track-h) * .229);
	--mai-gap-seg: calc(var(--mai-track-h) * .114);
	--mai-font: var(--wp--preset--font-family--jost, "Jost", "Segoe UI", system-ui, -apple-system, Roboto, Arial, sans-serif);
	/* A mask: the colour comes from --mai-home-ink below, so it follows the palette. */
	--mai-home-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23000'%3E%3Cpath d='M12.72 2.28a1.06 1.06 0 0 0-1.44 0L2.4 10.3a1.05 1.05 0 0 0 .72 1.83h1.2v8.3c0 .87.7 1.57 1.57 1.57h3.4v-5.28c0-.87.7-1.57 1.56-1.57h2.3c.87 0 1.57.7 1.57 1.57V22h3.4c.86 0 1.56-.7 1.56-1.57v-8.3h1.2a1.05 1.05 0 0 0 .72-1.83l-8.88-8.02Z'/%3E%3C/svg%3E");
	
	position: relative;
	width: 100%;
	aspect-ratio: 1665/402;
	min-height: 200px;
	overflow: hidden;
	isolation: isolate;
	margin: 0;
	padding: 0;
}
.mai-breadcrumb > * {
	margin: 0;
}
.mai-breadcrumb__fx {
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
}
.mai-breadcrumb__accent {
	position: absolute;
	inset: 0 0 auto;
	height: var(--mai-accent-h);
	z-index: 5;
	background: var(--mai-violet);
	transform-origin: 50% 0;
	animation: mai-draw-x .8s cubic-bezier(.22, .61, .36, 1) both;
}
.mai-breadcrumb__field {
	position: absolute;
	inset: var(--mai-accent-h) 0 var(--mai-bar-h);
	z-index: 0;
	overflow: hidden;
	transform-origin: 58% 46%;
	animation: mai-fade-in 1.1s ease-out both, mai-sway 30s ease-in-out 1.1s infinite alternate;
}
.mai-breadcrumb__field::after {
	content: "";
	position: absolute;
	inset: 0;
	opacity: var(--mai-bg-tint);
	background:
	radial-gradient(38% 62% at 79% 6%, rgba(150, 46, 168, .38) 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 75%, #ffffff) 16%, transparent) 45%, transparent 78%),
	radial-gradient(30% 70% at 51% 34%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 72%, #000000) 30%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 77%, #ffffff) 12%, transparent) 48%, transparent 80%),
	radial-gradient(46% 90% at 30% 74%, rgba(30, 34, 96, .34) 0%, rgba(24, 26, 78, .14) 50%, rgba(20, 22, 66, 0) 82%),
	linear-gradient(90deg, #040519 0%, color-mix(in srgb, var(--wp--preset--color--secondary) 47%, #000000) 6%, color-mix(in srgb, var(--wp--preset--color--secondary) 56%, #000000) 12%, color-mix(in srgb, var(--wp--preset--color--secondary) 68%, #000000) 20%, var(--wp--preset--color--secondary) 28%, var(--wp--preset--color--secondary) 36%, var(--wp--preset--color--secondary) 46%, color-mix(in srgb, var(--wp--preset--color--secondary) 94%, #ffffff) 56%, color-mix(in srgb, var(--wp--preset--color--secondary) 90%, #ffffff) 66%, color-mix(in srgb, var(--wp--preset--color--secondary) 86%, #ffffff) 76%, color-mix(in srgb, var(--wp--preset--color--secondary) 87%, #ffffff) 84%, color-mix(in srgb, var(--wp--preset--color--secondary) 93%, #ffffff) 93%, var(--wp--preset--color--secondary) 100%);
}
.mai-breadcrumb__glows {
	position: absolute;
	inset: var(--mai-accent-h) 0 var(--mai-bar-h);
	z-index: 1;
	overflow: hidden;
	pointer-events: none;
	mix-blend-mode: screen;
	animation: mai-fade-in 1.4s ease-out both;
}
.mai-breadcrumb__glow {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
}
.mai-breadcrumb__glow--a {
	background-image:
	radial-gradient(closest-side, rgba(26, 86, 190, .11) 0%, rgba(20, 60, 150, .055) 42%, rgba(16, 48, 124, 0) 82%),
	radial-gradient(closest-side, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 75%, #ffffff) 6%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--secondary) 82%, #ffffff) 3%, transparent) 44%, transparent 84%);
	background-position: -9% 30%, 38% 4%;
	background-size: 34% 124%, 26% 96%;
	animation: mai-pulse-a 13s ease-in-out infinite;
}
.mai-breadcrumb__glow--b {
	background-image:
	radial-gradient(closest-side, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 93%, #000000) 4%, transparent) 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 85%, #000000) 2%, transparent) 44%, transparent 84%),
	radial-gradient(closest-side, rgba(255, 46, 154, .045) 0%, rgba(255, 46, 154, .022) 42%, rgba(255, 46, 154, 0) 82%);
	background-position: 74% -30%, 59% -46%;
	background-size: 40% 150%, 33% 118%;
	animation: mai-pulse-b 11s ease-in-out infinite;
}
.mai-breadcrumb__flare {
	position: absolute;
	left: 59.7%;
	top: 4.73%;
	width: 28%;
	height: 1.25%;
	z-index: 1;
	border-radius: 50%;
	filter: blur(2px);
	pointer-events: none;
	background: linear-gradient(90deg, rgba(255, 46, 154, 0) 0%, rgba(255, 86, 178, .42) 13%, rgba(255, 186, 228, .95) 22%, rgba(255, 96, 186, .58) 40%, rgba(255, 46, 154, .22) 72%, rgba(255, 46, 154, 0) 100%);
	transform-origin: 22% 50%;
	animation: mai-flare 7s ease-in-out infinite;
}
.mai-breadcrumb__flare::after {
	content: "";
	position: absolute;
	left: 20.7%;
	top: -115%;
	width: 3.6%;
	aspect-ratio: 1;
	border-radius: 50%;
	filter: blur(1.5px);
	background: radial-gradient(closest-side, rgba(255, 222, 242, .95) 0%, #ff5cb8 45%, rgba(255, 46, 154, 0) 76%);
	animation: mai-core-pulse 5s ease-in-out infinite;
}
.mai-breadcrumb__sparks {
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	animation: mai-fade-in 1.6s ease-out .3s both;
}
.mai-breadcrumb__sparks-layer {
	position: absolute;
	inset: 0;
	background-repeat: no-repeat;
	will-change: opacity, transform;
}
.mai-breadcrumb__sparks-layer--a {
	animation: mai-twinkle 3.6s ease-in-out infinite;
}
.mai-breadcrumb__sparks-layer--b {
	animation: mai-twinkle 4.4s ease-in-out 1.1s infinite;
}
.mai-breadcrumb__sparks-layer--c {
	animation: mai-twinkle 5.2s ease-in-out 2.3s infinite;
}
.mai-breadcrumb__sparks-layer--a {
	background-image:
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%);
	background-position:
	53.724% 0.995%,
	42.703% 2.239%,
	65.225% 3.980%,
	28.078% 5.721%,
	39.520% 6.468%,
	42.793% 7.960%,
	41.381% 9.453%,
	27.147% 11.194%,
	29.850% 14.303%,
	34.625% 14.428%,
	35.856% 16.915%,
	36.787% 17.910%,
	46.336% 19.030%,
	38.018% 20.522%,
	34.925% 24.005%,
	70.901% 26.741%,
	71.892% 28.731%,
	31.171% 30.348%,
	69.760% 34.453%,
	27.958% 37.687%,
	29.489% 39.801%,
	30.180% 53.980%,
	30.811% 65.299%,
	30.390% 74.129%,
	62.583% 75.498%,
	36.547% 78.109%,
	63.333% 78.607%,
	40.721% 80.224%,
	27.628% 83.209%,
	32.973% 87.811%,
	31.652% 90.423%;
	background-size:
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	15px 15px,
	15px 15px,
	10px 10px,
	10px 10px,
	15px 15px,
	15px 15px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px;
}
.mai-breadcrumb__sparks-layer--b {
	background-image:
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%);
	background-position:
	55.616% 1.368%,
	29.700% 3.234%,
	54.204% 4.602%,
	68.709% 5.970%,
	48.829% 6.716%,
	69.670% 8.085%,
	44.505% 10.448%,
	30.150% 13.060%,
	39.580% 14.677%,
	32.492% 15.920%,
	37.748% 17.040%,
	40.330% 18.284%,
	35.946% 19.279%,
	70.691% 22.512%,
	67.658% 24.627%,
	29.580% 27.861%,
	70.931% 29.104%,
	99.459% 31.592%,
	28.078% 36.318%,
	29.670% 38.308%,
	30.210% 42.537%,
	31.652% 62.935%,
	29.670% 65.672%,
	37.447% 75.249%,
	62.703% 75.746%,
	63.273% 78.109%,
	36.426% 79.726%,
	59.099% 80.224%,
	60.450% 85.821%,
	39.369% 89.303%;
	background-size:
	15px 15px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	15px 15px,
	10px 10px,
	15px 15px,
	15px 15px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px;
}
.mai-breadcrumb__sparks-layer--c {
	background-image:
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 43%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%),
	radial-gradient(circle closest-side, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 0%, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 16%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 40%, #ffffff) 38%, transparent) 32%, transparent 72%);
	background-position:
	29.910% 2.114%,
	43.904% 3.731%,
	39.790% 5.224%,
	36.577% 6.592%,
	53.483% 7.214%,
	37.778% 8.458%,
	70.991% 10.821%,
	39.580% 13.184%,
	99.339% 14.428%,
	42.853% 16.667%,
	31.411% 17.164%,
	67.417% 18.159%,
	70.811% 20.025%,
	32.613% 23.134%,
	36.517% 25.373%,
	31.111% 27.985%,
	40.661% 29.353%,
	30.330% 32.338%,
	99.429% 37.189%,
	71.231% 38.557%,
	30.060% 50.000%,
	33.093% 65.174%,
	29.189% 71.891%,
	62.342% 75.249%,
	28.559% 77.736%,
	36.486% 78.731%,
	63.393% 79.602%,
	33.814% 81.219%,
	51.261% 87.562%,
	29.189% 90.547%;
	background-size:
	15px 15px,
	10px 10px,
	15px 15px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px,
	15px 15px,
	15px 15px,
	15px 15px,
	10px 10px,
	10px 10px,
	10px 10px,
	10px 10px;
}

/* ---------- structure: vertical rails ---------- */
.mai-breadcrumb__struct {
	position: absolute;
	inset: var(--mai-accent-h) 0 0;
	z-index: 2;
	pointer-events: none;
	background-repeat: no-repeat;
	background-size: 1px 48.756%;
	background-position: 13.934% 0, 31.892% 0, 49.910% 0, 67.868% 0, 85.886% 0;
	background-image:
	linear-gradient(180deg, rgba(176, 182, 255, .10) 0%, var(--mai-hair) 55%, rgba(190, 196, 255, .24) 100%),
	linear-gradient(180deg, rgba(176, 182, 255, .10) 0%, var(--mai-hair) 55%, rgba(190, 196, 255, .24) 100%),
	linear-gradient(180deg, rgba(176, 182, 255, .10) 0%, var(--mai-hair) 55%, rgba(190, 196, 255, .24) 100%),
	linear-gradient(180deg, rgba(176, 182, 255, .10) 0%, var(--mai-hair) 55%, rgba(190, 196, 255, .24) 100%),
	linear-gradient(180deg, rgba(176, 182, 255, .10) 0%, var(--mai-hair) 55%, rgba(190, 196, 255, .24) 100%);
	animation: mai-draw-y .9s cubic-bezier(.22, .61, .36, 1) both;
	transform-origin: 50% 0;
}

/* ---------- structure: enclosure frame ---------- */
.mai-breadcrumb__frame {
	position: absolute;
	left: var(--mai-frame-l);
	right: var(--mai-frame-r);
	top: var(--mai-frame-t);
	bottom: var(--mai-frame-b);
	z-index: 2;
	pointer-events: none;
	border: 1px solid var(--mai-line);
	border-bottom: 0;
	border-radius: var(--mai-frame-rad) var(--mai-frame-rad) 0 0;
	animation: mai-frame-in 1s cubic-bezier(.22, .61, .36, 1) .5s both;
}

/* the frame's bottom edge, visible only outside the enclosure */
.mai-breadcrumb__frame::before,
.mai-breadcrumb__frame::after {
	content: "";
	position: absolute;
	bottom: 0;
	height: 1px;
	background: var(--mai-line);
	animation: mai-draw-x .7s cubic-bezier(.22, .61, .36, 1) 1.05s both;
}
.mai-breadcrumb__field .mai-breadcrumb__frame{
	width: 1100px;
	margin: 0 auto !important;
}
.mai-breadcrumb__frame::before {
	right: 100%;
	width: 60.5%;
	transform-origin: 100% 50%;
}

.mai-breadcrumb__frame::after {
	left: 100%;
	width: 60.9%;
	transform-origin: 0 50%;
}

/* ---------- structure: violet ticks and rail accents ---------- */
.mai-breadcrumb__ticks {
	position: absolute;
	inset: 0;
	z-index: 2;
	pointer-events: none;
	background-repeat: no-repeat;
	background-image:
	linear-gradient(180deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 45%, var(--mai-violet-light) 84%, var(--mai-violet-x-light) 100%),
	linear-gradient(180deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 45%, var(--mai-violet-light) 84%, var(--mai-violet-x-light) 100%),
	linear-gradient(180deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 45%, var(--mai-violet-light) 84%, var(--mai-violet-x-light) 100%),
	linear-gradient(180deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 45%, var(--mai-violet-light) 84%, var(--mai-violet-x-light) 100%),
	linear-gradient(180deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 45%, var(--mai-violet-light) 84%, var(--mai-violet-x-light) 100%),
	linear-gradient(90deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 42%, var(--mai-violet-light) 80%, var(--mai-violet-x-light) 97%, transparent 100%),
	linear-gradient(90deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 42%, var(--mai-violet-light) 80%, var(--mai-violet-x-light) 97%, transparent 100%),
	linear-gradient(90deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 42%, var(--mai-violet-light) 80%, var(--mai-violet-x-light) 97%, transparent 100%),
	linear-gradient(90deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 28%, transparent) 42%, var(--mai-violet-light) 80%, var(--mai-violet-x-light) 97%, transparent 100%);
	background-size:
	2px 12.935%, 2px 13.682%, 2px 12.189%, 2px 12.687%, 2px 15.672%,
	2.943% 3px, 2.282% 3px, 2.820% 3px, 2.820% 3px;
	background-position:
	13.934% 13.143%, 31.892% 27.666%, 49.910% 13.597%, 67.868% 28.491%, 85.886% 13.570%,
	26.918% calc(var(--mai-frame-t) - 1px), 71.604% calc(var(--mai-frame-t) - 1px),
	0.988% calc(var(--mai-rail-b) - 1px), 98.950% calc(var(--mai-rail-b) - 1px);
	filter: drop-shadow(0 0 6px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 78%, #ffffff) 70%, transparent));
	animation: mai-tick 4.5s ease-in-out infinite;
}

/* travelling highlights along the frame rails */
.mai-breadcrumb__ticks::before,
.mai-breadcrumb__ticks::after {
	content: "";
	position: absolute;
	left: 0;
	width: 8%;
	height: 3px;
	border-radius: 4px;
	background: linear-gradient(90deg, transparent 0%, color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 12%, #ffffff) 90%, transparent) 50%, transparent 100%);
	will-change: transform, opacity;
}

.mai-breadcrumb__ticks::before {
	top: calc(var(--mai-frame-t) - 1px);
	animation: mai-sweep-x 6.4s linear infinite;
}

.mai-breadcrumb__ticks::after {
	top: calc(var(--mai-rail-b) - 1px);
	animation: mai-sweep-x 8.2s linear 1.6s infinite;
}

/* ---------- bottom bar ---------- */
.mai-breadcrumb__bar {
	position: absolute;
	inset: auto 0 0;
	height: var(--mai-bar-h);
	z-index: 3;
	overflow: hidden;
	background: var(--mai-violet);
	transform-origin: 50% 100%;
	animation: mai-draw-x .8s cubic-bezier(.22, .61, .36, 1) .15s both;
}

.mai-breadcrumb__bar::after {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: -30%;
	width: 26%;
	pointer-events: none;
	background: linear-gradient(100deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, .16) 48%, rgba(255, 255, 255, 0) 100%);
	will-change: transform;
	animation: mai-sheen 9s ease-in-out 2s infinite;
}

/* ---------- breadcrumb trail ---------- */
.mai-breadcrumb__trail {
	position: absolute;
	left: 50%;
	bottom: 0;
	max-width: 96%;
	transform: translateX(-50%);
	z-index: 4;
	animation: mai-nav-in .85s cubic-bezier(.22, 1.2, .4, 1) .55s both;
}

.mai-breadcrumb__plate {
	position: relative;
	padding: var(--mai-plate-pt) var(--mai-plate-px) var(--mai-plate-pb);
	border-radius: var(--mai-plate-r) var(--mai-plate-r) 0 0;
	background: var(--mai-violet);
}

.mai-breadcrumb__plate::before {
	content: "";
	position: absolute;
	left: -14%;
	right: -14%;
	bottom: 0;
	top: -30%;
	z-index: -1;
	background: radial-gradient(60% 90% at 50% 100%, color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent) 0%, transparent 72%);
	filter: blur(16px);
}

.mai-breadcrumb__track {
	position: relative;
	display: flex;
	flex-wrap: nowrap;
	align-items: stretch;
	gap: 0;
	height: var(--mai-track-h);
	padding: 0;
	margin: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.mai-breadcrumb__crumb {
	position: relative;
	display: flex;
	flex: 0 0 auto;
	min-width: 0;
	background: var(--mai-crumb-line);
	transition: filter .35s cubic-bezier(.22, .61, .36, 1), transform .3s ease;
}

.mai-breadcrumb__crumb::before {
	content: "";
	position: absolute;
	inset: var(--mai-line-w);
	z-index: 0;
	background: var(--mai-violet);
}

.mai-breadcrumb__crumb-body {
	position: relative;
	z-index: 1;
	display: flex;
	flex-wrap: nowrap;
	align-items: center;
	gap: var(--mai-gap-ic);
	min-width: 0;
	background: var(--mai-crumb-line);
}

.mai-breadcrumb__crumb-body::before {
	content: "";
	position: absolute;
	inset: var(--mai-line-w);
	z-index: 0;
	background: var(--mai-crumb-fill);
	transition: background .35s ease;
}

.mai-breadcrumb__crumb-body > * {
	position: relative;
	z-index: 1;
}

/* first button: rounded left, pointed right */
.mai-breadcrumb__crumb--first {
	padding: var(--mai-ring-gap) var(--mai-ring-tip) var(--mai-ring-gap) var(--mai-ring-gap);
}

.mai-breadcrumb__crumb--first,
.mai-breadcrumb__crumb--first::before {
	border-radius: var(--mai-seg-r) 0 0 var(--mai-seg-r);
	clip-path: polygon(0 0, calc(100% - var(--mai-arrow-out)) 0, 100% 50%, calc(100% - var(--mai-arrow-out)) 100%, 0 100%);
}

.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body {
	padding: 0 calc(var(--mai-arrow-in) + var(--mai-track-h) * .057) 0 calc(var(--mai-track-h) * .057 + var(--mai-circle) + var(--mai-gap-ic));
}

.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body,
.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body::before {
	border-radius: var(--mai-body-r) 0 0 var(--mai-body-r);
	clip-path: polygon(0 0, calc(100% - var(--mai-arrow-in)) 0, 100% 50%, calc(100% - var(--mai-arrow-in)) 100%, 0 100%);
}

/* last button: notched left, rounded right. It slides back so its notch
nests around the point of the previous button. */
.mai-breadcrumb__crumb--last {
	padding: var(--mai-ring-gap) var(--mai-ring-gap) var(--mai-ring-gap) var(--mai-ring-tip);
	margin-left: calc(var(--mai-gap-seg) - var(--mai-arrow-out)) !important;
}

/* WP's generated flex-layout styles (.wp-container-* > * { margin: 0 }) load
   after this sheet and can null the nesting pull above on some templates —
   the !important keeps the chevron notch wrapped around the previous tip.
   Labels themselves never carry margins, and label blocks that render empty
   (query-title outside its context) must not occupy a flex-gap slot. */
.mai-breadcrumb__crumb-body .mai-breadcrumb__label {
	margin: 0 !important;
}

.mai-breadcrumb__crumb-body .mai-breadcrumb__label:empty {
	display: none;
}

.mai-breadcrumb__crumb--last,
.mai-breadcrumb__crumb--last::before {
	border-radius: 0 var(--mai-seg-r) var(--mai-seg-r) 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--mai-arrow-out) 50%);
}

.mai-breadcrumb__crumb--last .mai-breadcrumb__crumb-body {
	padding: 0 calc(var(--mai-track-h) * .3) 0 calc(var(--mai-arrow-in) + var(--mai-track-h) * .214);
}

.mai-breadcrumb__crumb--last .mai-breadcrumb__crumb-body,
.mai-breadcrumb__crumb--last .mai-breadcrumb__crumb-body::before {
	border-radius: 0 var(--mai-body-r) var(--mai-body-r) 0;
	clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--mai-arrow-in) 50%);
}

/* the icon is drawn as a pseudo element below; an old markup copy may still
carry an empty icon div, which would only add a gap */
.mai-breadcrumb__icon {
	display: none;
}

/* home icon: a pseudo element, so the markup has no empty div for it */
.mai-breadcrumb__crumb--first .mai-breadcrumb__crumb-body::after {
	content: "";
	position: absolute;
	z-index: 1;
	left: calc(var(--mai-track-h) * .057);
	top: 50%;
	width: var(--mai-circle);
	height: var(--mai-circle);
	border-radius: 50%;
	background: var(--mai-home-disc, #fff);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .28), 0 0 12px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 65%, #ffffff) 35%, transparent);
	transform: translateY(-50%);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
}

/* The house glyph is a second layer over the disc, on the crumb itself (the
   label clips its overflow), painted in a palette colour through a mask: a
   data-URI picture cannot take a CSS colour. It sits where the disc does —
   the crumb's ring gap plus the disc's own inset. */
.mai-breadcrumb__crumb--first::after{
	content: "";
	position: absolute;
	z-index: 2;
	top: 50%;
	left: calc(var(--mai-ring-gap) + var(--mai-track-h) * .057);
	width: var(--mai-circle);
	height: var(--mai-circle);
	background-color: var(--mai-home-ink, var(--wp--preset--color--primary));
	-webkit-mask: var(--mai-home-icon) center / var(--mai-icon) var(--mai-icon) no-repeat;
	mask: var(--mai-home-icon) center / var(--mai-icon) var(--mai-icon) no-repeat;
	transform: translateY(-50%);
	transition: transform .4s cubic-bezier(.34, 1.56, .64, 1);
	pointer-events: none;
}

/* On archive/search views the crumb label comes from query-title; hide the
   post-title fallback there (it would print the first post in the loop). */
.archive .mai-breadcrumb__label.wp-block-post-title,
.search .mai-breadcrumb__label.wp-block-post-title {
	display: none;
}

.mai-breadcrumb__label {
	margin: 0;
	font-family: var(--mai-font);
	font-size: var(--mai-fs);
	font-weight: 600;
	font-style: normal;
	line-height: 1;
	letter-spacing: .01em;
	color: #fff;
	text-decoration: none;
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	max-width: 22ch;
	text-shadow: 0 1px 2px rgba(0, 0, 0, .45);
	transition: letter-spacing .3s ease, text-shadow .3s ease;
}

.mai-breadcrumb__label a {
	color: inherit;
	text-decoration: none;
	box-shadow: none;
}

.mai-breadcrumb__crumb:hover,
.mai-breadcrumb__crumb:focus-within {
	filter: drop-shadow(0 0 10px color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 72%, #ffffff) 80%, transparent)) drop-shadow(0 0 20px color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent));
}

.mai-breadcrumb__crumb:hover .mai-breadcrumb__crumb-body::before,
.mai-breadcrumb__crumb:focus-within .mai-breadcrumb__crumb-body::before {
	background: linear-gradient(180deg, color-mix(in srgb, var(--wp--preset--color--primary) 82%, #ffffff) 0%, var(--mai-violet) 52%, color-mix(in srgb, var(--wp--preset--color--primary) 77%, #000000) 100%);
}

.mai-breadcrumb__crumb:hover .mai-breadcrumb__crumb-body::after,
.mai-breadcrumb__crumb:focus-within .mai-breadcrumb__crumb-body::after,
.mai-breadcrumb__crumb--first:hover::after,
.mai-breadcrumb__crumb--first:focus-within::after {
	transform: translateY(-50%) scale(1.07) rotate(-6deg);
}

.mai-breadcrumb__crumb:hover .mai-breadcrumb__label,
.mai-breadcrumb__crumb:focus-within .mai-breadcrumb__label {
	letter-spacing: .4px;
	text-shadow: 0 0 10px rgba(255, 255, 255, .5);
}

.mai-breadcrumb__label a:focus-visible {
	outline: 2px solid var(--mai-violet-x-light);
	outline-offset: 4px;
	border-radius: 4px;
}

/* ---------- keyframes ---------- */
@keyframes mai-twinkle {
	0%, 100% { opacity: .18; transform: translate3d(0, 0, 0) scale(.94); }
	50% { opacity: 1; transform: translate3d(1px, -4px, 0) scale(1); }
}

@keyframes mai-tick {
	0%, 100% { opacity: .38; }
	50% { opacity: 1; }
}

@keyframes mai-sweep-x {
	0% { transform: translateX(0); opacity: 0; }
	18% { opacity: 1; }
	82% { opacity: 1; }
	100% { transform: translateX(1150%); opacity: 0; }
}

@keyframes mai-flare {
	0%, 100% { opacity: .5; transform: scaleX(.94); }
	50% { opacity: 1; transform: scaleX(1.04); }
}

@keyframes mai-core-pulse {
	0%, 100% { opacity: .45; transform: scale(.82); }
	50% { opacity: 1; transform: scale(1.12); }
}

@keyframes mai-pulse-a {
	0%, 100% { opacity: .45; }
	50% { opacity: 1; }
}

@keyframes mai-pulse-b {
	0%, 100% { opacity: 1; }
	50% { opacity: .45; }
}

@keyframes mai-sway {
	0% { transform: scale(1) translate3d(0, 0, 0); }
	100% { transform: scale(1.02) translate3d(-.5%, -.4%, 0); }
}

@keyframes mai-sheen {
	0% { transform: translateX(0) skewX(-17deg); }
	55%, 100% { transform: translateX(520%) skewX(-17deg); }
}

@keyframes mai-fade-in {
	from { opacity: 0; }
	to { opacity: 1; }
}

@keyframes mai-draw-y {
	from { transform: scaleY(0); opacity: 0; }
	to { transform: scaleY(1); opacity: 1; }
}

@keyframes mai-draw-x {
	from { transform: scaleX(0); }
	to { transform: scaleX(1); }
}

@keyframes mai-frame-in {
	from { opacity: 0; transform: translateY(10px); }
	to { opacity: 1; transform: translateY(0); }
}

@keyframes mai-nav-in {
	from { opacity: 0; transform: translateX(-50%) translateY(46%); }
	to { opacity: 1; transform: translateX(-50%) translateY(0); }
}

/* ---------- responsive ---------- */
@media (max-width: 900px) {
	.mai-breadcrumb {
		aspect-ratio: 1665/470;
	}
	
	.mai-breadcrumb__label {
		max-width: 16ch;
	}
}

@media (max-width: 620px) {
	.mai-breadcrumb {
		aspect-ratio: 1665/620;
		min-height: 250px;
		--mai-frame-l: 7%;
		--mai-frame-r: 6%;
		--mai-frame-rad: 12px;
	}
	
	.mai-breadcrumb__label {
		max-width: 12ch;
	}
}

@media (max-width: 430px) {
	.mai-breadcrumb {
		--mai-track-h: 34px;
	}
	
	.mai-breadcrumb__label {
		max-width: 9ch;
	}
}

@media (prefers-reduced-motion: reduce) {
	.mai-breadcrumb *,
	.mai-breadcrumb *::before,
	.mai-breadcrumb *::after,
	.mai-breadcrumb {
		animation: none !important;
		transition-duration: .01ms !important;
	}
}

/* Editor-only overrides live in mai-breadcrumb-editor.css, loaded through
	add_editor_style(). They cannot live here: WordPress prefixes editor
	stylesheets with .editor-styles-wrapper, so a selector that already carries
that class would need two nested wrappers and would never match. */

/* =========================================================================
	EDITOR SAFETY
	Everything below is written so it is a no-op on the front end and only
	changes anything inside the block editor. That is why this file can be
	loaded in both places, and why the two renders match.
========================================================================= */

/* Gutenberg puts position: relative on every block wrapper
	(.block-editor-block-list__block). That class sits on the same element as
	ours, same specificity, and its stylesheet loads later, so it wins and every
	layer drops back into normal flow. These repeat the values already declared
above, so the front end is unchanged. */
.mai-breadcrumb__fx,
.mai-breadcrumb__accent,
.mai-breadcrumb__field,
.mai-breadcrumb__glows,
.mai-breadcrumb__glow,
.mai-breadcrumb__flare,
.mai-breadcrumb__sparks,
.mai-breadcrumb__sparks-layer,
.mai-breadcrumb__struct,
.mai-breadcrumb__frame,
.mai-breadcrumb__ticks,
.mai-breadcrumb__bar,
.mai-breadcrumb__trail {
	position: absolute !important;
}
.mai-breadcrumb__trail {
	left: 50% !important;
	right: auto !important;
	top: auto !important;
	bottom: 0 !important;
	width: auto !important;
	transform: translateX(-50%) !important;
	z-index: 4 !important;
}
.mai-breadcrumb__plate {
	position: relative !important;
	width: auto !important;
}
.mai-breadcrumb__fx {
	z-index: 0 !important;
}
/* the layout classes the editor adds to every group */
.mai-breadcrumb .is-layout-flow > *,
.mai-breadcrumb .is-layout-constrained > * {
	max-width: none;
	margin-left: 0;
	margin-right: 0;
}
.mai-breadcrumb .is-layout-flow > * + *,
.mai-breadcrumb .is-layout-constrained > * + * {
	margin-block-start: 0;
}
.mai-breadcrumb :where(.wp-block-group),
.mai-breadcrumb :where(p) {
	margin: 0;
}
/* the negative offset that nests the notch must survive the reset above */
.mai-breadcrumb__crumb--last {
	margin-left: calc(var(--mai-gap-seg) - var(--mai-arrow-out));
}
/* editor chrome drawn inside the empty decorative layers: the
"Group blocks together. Select a layout" picker, appenders, inserters */
.mai-breadcrumb .block-editor-block-variation-picker,
.mai-breadcrumb .block-library-group__placeholder,
.mai-breadcrumb .components-placeholder,
.mai-breadcrumb .block-list-appender,
.mai-breadcrumb .block-editor-button-block-appender,
.mai-breadcrumb .block-editor-block-list__empty-block-inserter {
	display: none !important;
}
.mai-breadcrumb .wp-block-group:empty,
.mai-breadcrumb .block-editor-block-list__block:empty {
	min-height: 0;
	padding: 0;
}
.mai-breadcrumb .wp-block-post-title {
	margin: 0;
	padding: 0;
}

/*Preloader*/

:root {
	--bg: var(--wp--preset--color--secondary, hsl(258, 64%, 15%));
	--fg: var(--wp--preset--color--light-color, hsl(0, 0%, 100%));
	--primary: var(--wp--preset--color--primary, hsl(258, 100%, 59%));
	--trans-dur: 0.3s;
	font-size: calc(20px + (40 - 20) * (100vw - 320px) / (2560 - 320));
}
.Preloader {
	position: fixed;
	inset: 0;
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: center;
	background-color: var(--bg);
	z-index: 999999;
	opacity: 1;
	visibility: visible;
	transition: opacity 0.8s ease, visibility 0.8s ease;
	background-color: var(--bg);
	color: var(--fg);
	display: flex;
	font: 1.5em/2.5 sans-serif;
	height: 100vh;
	transition:all var(--trans-dur);
}
.Preloader.hide{
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
}

.pl {
	--dur: 3s;
	margin: auto;
	position: relative;
	width: 11em;
	height: 11em;
}
.pl__nucleus,
.pl__nucleus-particle {
	position: absolute;
}
.pl__nucleus {
	top: 50%;
	left: 50%;
	transform-style: preserve-3d;
}
.pl__nucleus-particle,
.pl__ring,
.pl__orbit,
.pl__electron {
	animation: particleTop var(--dur) linear infinite;
}
.pl__nucleus-particle {
	background-color: var(--primary);
	background-image: radial-gradient(37.5% 37.5% at 37.5% 37.5%,color-mix(in srgb, var(--fg) 25%, transparent) 48%,transparent 50%);
	border-radius: 50%;
	box-shadow: -0.125em -0.125em 0 color-mix(in srgb, var(--wp--preset--color--black-color, #101010) 25%, transparent) inset;
	top: calc(50% - 0.5em);
	left: calc(50% - 0.5em);
	width: 1.2em;
	height: 1.2em;
	transition: background-color var(--trans-dur);
}
.pl__nucleus-particle:nth-child(2n) {
	background-color: color-mix(in srgb, var(--primary) 60%, var(--fg));
}
.pl__nucleus-particle:nth-child(n + 4):nth-child(-n + 9) {
	animation-name: particleMiddle;
}
.pl__nucleus-particle:nth-child(n + 10):nth-child(-n + 12) {
	animation-name: particleBottom;
}
.pl__nucleus-particle:nth-child(2) { animation-delay: calc(var(--dur) * -0.33); }
.pl__nucleus-particle:nth-child(3) { animation-delay: calc(var(--dur) * -0.67); }
.pl__nucleus-particle:nth-child(5) { animation-delay: calc(var(--dur) * -0.17); }
.pl__nucleus-particle:nth-child(6) { animation-delay: calc(var(--dur) * -0.33); }
.pl__nucleus-particle:nth-child(7) { animation-delay: calc(var(--dur) * -0.5); }
.pl__nucleus-particle:nth-child(8) { animation-delay: calc(var(--dur) * -0.67); }
.pl__nucleus-particle:nth-child(9) { animation-delay: calc(var(--dur) * -0.83); }
.pl__nucleus-particle:nth-child(11) { animation-delay: calc(var(--dur) * -0.33); }
.pl__nucleus-particle:nth-child(12) { animation-delay: calc(var(--dur) * -0.67); }
.pl__nucleus-particle:last-child { animation: none; }

.pl__rings {
	display: block;
	width: 100%;
	height: auto;
}
.pl__ring {
	animation-name: ring;
	transform-origin: 64px 64px;
}
.pl__ring:nth-child(n + 5):nth-child(-n + 7) {
	animation-delay: calc(var(--dur) * -0.25);
}
.pl__orbit,
.pl__electron {
	animation-name: orbit;
	transition: stroke var(--trans-dur);
}
.pl__orbit:first-child {
	stroke: transparent;
}
.pl__orbit:nth-child(2) {
	stroke: color-mix(in srgb, var(--primary) 50%, transparent);
}
.pl__orbit:nth-child(3) {
	stroke: color-mix(in srgb, var(--primary) 70%, transparent);
}

.pl__electron {
	stroke: var(--fg);
}
.pl__ring:first-child .pl__orbit:first-child { stroke: color-mix(in srgb, var(--primary) 30%, transparent); }
.pl__ring:nth-child(2) .pl__orbit { animation-delay: calc(var(--dur) * -0.125); }
.pl__ring:nth-child(3) .pl__orbit { animation-delay: calc(var(--dur) * -0.25); }
.pl__ring:nth-child(4) .pl__orbit { animation-delay: calc(var(--dur) * -0.375); }
.pl__ring:nth-child(5) .pl__orbit:first-child { stroke: color-mix(in srgb, var(--primary) 30%, transparent); }
.pl__ring:nth-child(6) .pl__orbit { animation-delay: calc(var(--dur) * -0.25); }
.pl__ring:nth-child(7) .pl__electron:nth-child(2) { animation-delay: calc(var(--dur) * -0.25); }
.pl__ring:nth-child(8) .pl__electron:nth-child(2) { animation-delay: calc(var(--dur) * -0.125); }
.pl__ring:nth-child(8) .pl__electron:nth-child(3) { animation-delay: calc(var(--dur) * -0.25); }
.pl__ring:nth-child(8) .pl__electron:nth-child(4) { animation-delay: calc(var(--dur) * -0.375); }

/* Animations */
@keyframes orbit {
	from { stroke-dashoffset: 0; }
	to { stroke-dashoffset: 580; }
}
@keyframes ring {
	from { transform: rotate(0); }
	to { transform: rotate(1turn); }
}
@keyframes particleTop {
	from { transform: rotateY(0) rotateZ(-35deg) translateY(-100%) rotateZ(35deg) rotateY(0); }
	to { transform: rotateY(-1turn) rotateZ(-35deg) translateY(-100%) rotateZ(35deg) rotateY(1turn); }
}
@keyframes particleMiddle {
	from { transform: rotateY(0) rotateZ(90deg) translateY(-100%) rotateZ(-90deg) rotateY(0); }
	to { transform: rotateY(-1turn) rotateZ(90deg) translateY(-100%) rotateZ(-90deg) rotateY(1turn); }
}
@keyframes particleBottom {
	from { transform: rotateY(0) rotateZ(-145deg) translateY(-100%) rotateZ(145deg) rotateY(0); }
	to { transform: rotateY(-1turn) rotateZ(-145deg) translateY(-100%) rotateZ(145deg) rotateY(1turn); }
}

/** =========================================================
	MATERIALAI PRO
	AI BACK TO TOP
========================================================= */

.materialai-back-to-top {
	position: relative;
	z-index: 99999;
}

/* =========================================================
	BUTTON
========================================================= */

.materialai-back-to-top__button {
	position: fixed;
	right: 28px;
	bottom: 28px;
	width: 78px;
	height: 78px;
	display: none;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background:
	radial-gradient(
	circle at center,
	color-mix(in srgb, var(--wp--preset--color--primary), #ffffff 12%) 0%,
	var(--wp--preset--color--primary) 42%,
	color-mix(in srgb, var(--wp--preset--color--primary) 45%, var(--wp--preset--color--secondary)) 72%,
	var(--wp--preset--color--secondary) 100%
	);
	
	color: #ffffff;
	text-decoration: none;
	cursor: pointer;
	z-index: 999999;
	overflow: visible;
	box-shadow:
	0 0 0 1px color-mix(in srgb, var(--wp--preset--color--primary) 85%, transparent),
	0 0 14px color-mix(in srgb, var(--wp--preset--color--primary) 65%, transparent),
	0 0 32px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
	transition:
	transform 0.35s ease,
	box-shadow 0.35s ease;
}

/* =========================================================
	OUTER GLOW
========================================================= */

.materialai-back-to-top__button::before {
	content: "";
	position: absolute;
	inset: -4px;
	border-radius: 50%;
	border: 1px solid color-mix(in srgb, color-mix(in srgb, var(--wp--preset--color--primary) 66%, #ffffff) 80%, transparent);
	pointer-events: none;
}

/* =========================================================
	DASHED RING
========================================================= */

.materialai-back-to-top__button::after {
	content: "";
	position: absolute;
	inset: -8px;
	border-radius: 50%;
	border: 1px dashed rgba(255, 255, 255, 0.48);
	pointer-events: none;
	animation:
	materialai-back-to-top-ring
	12s linear infinite;
}

/* =========================================================
	CIRCULAR TEXT
========================================================= */

.materialai-back-to-top__text {
	position: absolute;
	top: 50%;
	left: 50%;
	width: 118px;
	height: 118px;
	margin: 0;
	padding: 0;
	overflow: visible;
	pointer-events: none;
	z-index: 2;
	transform:
	translate(-50%, -50%);
	animation:
	materialai-back-to-top-text
	18s linear infinite;
}

.materialai-back-to-top__text text {
	fill: color-mix(in srgb, var(--wp--preset--color--primary) 66%, #ffffff);
	font-family: var(--wp--preset--font-family--jost, "Jost"), Arial, sans-serif;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 1px;
	word-spacing: 3px;
	text-transform: uppercase;
}

/* =========================================================
	INNER RING
========================================================= */

.materialai-back-to-top__outer-ring {
	position: absolute;
	width: 58px;
	height: 58px;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	border: 1px solid rgba(255, 255, 255, 0.18);
	box-shadow:
	inset 0 0 12px rgba(255, 255, 255, 0.08),
	0 0 12px color-mix(in srgb, var(--wp--preset--color--primary) 40%, transparent);
	pointer-events: none;
	z-index: 3;
}

/* =========================================================
	CENTER CORE
========================================================= */

.materialai-back-to-top__core {
	position: relative;
	width: 43px;
	height: 43px;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0;
	border-radius: 50%;
	background: #ffffff;
	z-index: 5;
	box-shadow:
	0 0 10px rgba(255, 255, 255, 0.6),
	0 0 20px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
	transition:
	transform 0.35s ease,
	background-color 0.35s ease;
}

/* =========================================================
	ARROW
========================================================= */

.materialai-back-to-top__arrow {
	width: 19px;
	height: 19px;
	display: block;
	margin: 0;
	padding: 0;
	fill: none;
	stroke: var(--wp--preset--color--primary);
	stroke-width: 2.5;
	stroke-linecap: round;
	stroke-linejoin: round;
	transition:
	transform 0.3s ease,
	stroke 0.3s ease;
}

/* =========================================================
	HOVER
========================================================= */

.materialai-back-to-top__button:hover {
	transform:
	translateY(-6px)
	scale(1.04);
	box-shadow:
	0 0 0 1px var(--wp--preset--color--primary),
	0 0 20px color-mix(in srgb, var(--wp--preset--color--primary) 80%, transparent),
	0 0 45px color-mix(in srgb, var(--wp--preset--color--primary) 50%, transparent);
}

.materialai-back-to-top__button:hover
.materialai-back-to-top__core {
	background-color: var(--wp--preset--color--primary);
	transform: scale(1.08);
}

.materialai-back-to-top__button:hover
.materialai-back-to-top__arrow {
	stroke: #ffffff;
	transform: translateY(-2px);
}

/* =========================================================
	KEYBOARD FOCUS
========================================================= */

.materialai-back-to-top__button:focus-visible {
	outline: 3px solid #ffffff;
	outline-offset: 5px;
}

/* =========================================================
	ANIMATIONS
========================================================= */

@keyframes materialai-back-to-top-text {
	
	from {
		transform:
		translate(-50%, -50%)
		rotate(0deg);
	}
	to {
		transform:
		translate(-50%, -50%)
		rotate(-360deg);
	}
}

@keyframes materialai-back-to-top-ring {
	
	from {
		transform: rotate(0deg);
	}
	to {
		transform: rotate(360deg);
	}
}

/* =========================================================
	REDUCED MOTION
========================================================= */

@media (prefers-reduced-motion: reduce) {
	
	.materialai-back-to-top__text,
	.materialai-back-to-top__button::after {
		animation: none;
	}
	
	.materialai-back-to-top__button,
	.materialai-back-to-top__core,
	.materialai-back-to-top__arrow {
		transition: none;
	}
}

/* =========================================================
	TABLET / MOBILE
========================================================= */

@media (max-width: 767px) {
	
	.materialai-back-to-top__button {
		right: 18px;
		bottom: 18px;
		
		width: 64px;
		height: 64px;
	}
	.materialai-back-to-top__text {
		width: 98px;
		height: 98px;
	}
	.materialai-back-to-top__text text {
		font-size: 7px;
		letter-spacing: 1.5px;
	}
	.materialai-back-to-top__outer-ring {
		width: 48px;
		height: 48px;
	}
	.materialai-back-to-top__core {
		width: 36px;
		height: 36px;
	}
	.materialai-back-to-top__arrow {
		width: 16px;
		height: 16px;
	}
}

/* =========================================================
	SMALL MOBILE
========================================================= */

@media (max-width: 480px) {
	
	.materialai-back-to-top__button {
		right: 14px;
		bottom: 14px;
		
		width: 58px;
		height: 58px;
	}
	.materialai-back-to-top__text {
		width: 88px;
		height: 88px;
	}
	.materialai-back-to-top__text text {
		font-size: 6px;
		letter-spacing: 1.2px;
	}
	.materialai-back-to-top__outer-ring {
		width: 44px;
		height: 44px;
	}
	.materialai-back-to-top__core {
		width: 33px;
		height: 33px;
	}
	.materialai-back-to-top__arrow {
		width: 15px;
		height: 15px;
	}
}
.site-branding-fallback {
	display: block;
}
.site-branding:has(.wp-block-site-logo img) .site-branding-fallback {
	display: none;
}
.site-branding:not(:has(.wp-block-site-logo img)) .site-branding-fallback {
	display: block;
}
.site-branding-fallback {
	display: flex;
	flex-direction: column;
	gap: 8px;
}
.site-branding-fallback .wp-block-site-title {
	margin: 0;
}
.site-branding-fallback .wp-block-site-title a {
	position: relative;
	text-decoration: none;
}
.site-branding-fallback .wp-block-site-title a::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: -4px;
	width: 100%;
	height: 2px;
	background: currentColor;
	transform: scaleX(0);
	transform-origin: left;
	transition: transform 0.3s ease;
}
.site-branding-fallback .wp-block-site-title a:hover::after {
	transform: scaleX(1);
}
.site-branding-fallback .wp-block-site-tagline {
	margin: 0;
}

.country {
	display: none;
}

.country.is-active {
	display: block;
}
/* Skip to content (WP.org accessibility requirement): visually hidden until
   focused with the keyboard, then shown as a fixed pill top-left. */
.skip-link {
	position: absolute !important;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	border: 0;
	white-space: nowrap;
}

.skip-link:focus {
	position: fixed !important;
	top: 14px;
	left: 14px;
	z-index: 100001;
	width: auto;
	height: auto;
	margin: 0;
	clip: auto;
	clip-path: none;
	white-space: normal;
	background: var(--wp--preset--color--primary, #632CFF);
	color: var(--wp--preset--color--light-color, #FFFFFE);
	font-family: var(--wp--preset--font-family--jost, sans-serif);
	font-size: 16px;
	font-weight: 600;
	line-height: 1;
	text-decoration: none;
	padding: 14px 26px;
	border-radius: 8px;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .25);
	outline: 2px solid var(--wp--preset--color--light-color, #FFFFFE);
	outline-offset: 2px;
}

#materialai-content:focus {
	outline: none;
}

/* ==========================================================================
   Design variant 02 — Header 02 + Hero Slider 02

   Geometry is taken from the approved comp (measured at a 1920px viewport):
     page gutter 40  ·  container 1170  ·  hero 1840x1050, radius 40
     navbar 1170x91, flush with the top edge of the hero
     badge 390x70   ·  h1 72/1.4  ·  buttons 200x55, gap 42
     arrow tabs 78x136  ·  stats bar 1227x170, pills 380x130, rings 88
   Colours come from the theme palette only (primary / secondary / light-color),
   so every style variation in /styles/ recolours this variant automatically.
   ========================================================================== */

:root{
	--mai-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 12h14'/%3E%3Cpath d='m12 5 7 7-7 7'/%3E%3C/svg%3E");
	--mai-gutter: 40px;
	--mai-shell: 1170px;
	--mai-navbar-pad: 20px;
	--mai-navbar-h: 91px;
	--mai-shoulder: 30px;
	--mai-hero-plinth: 5px;
	--mai-plinth-fillet: 21px;
}

/* --------------------------------------------------------------- top bar */

.materialai-header-02{
	position: relative;
	z-index: 30;
}

/* Same page gutter as the navbar wrapper below, from the same token, so the two
   stay in step at every breakpoint. */
.materialai-topbar-02__gutter{
	padding-inline: var(--mai-gutter);
}

/* The top bar's dark strip runs the full width of the page gutter, but its
   contents sit on the same rail as the floating navbar below it, so the "NEW"
   badge lines up with the navbar's left edge and the currency switcher with its
   right edge. Both use --mai-shell, so the two stay locked together. */
.materialai-topbar-02 .materialai-topbar-02__row{
	width: min(var(--mai-shell), 100%);
	margin-inline: auto;
	/* The navbar insets its own contents by --mai-navbar-pad. Matching it here
	   is what actually puts the "NEW" badge under the logo rather than under
	   the white bar's outer corner. */
	padding-inline: var(--mai-navbar-pad);
	gap: 14px 24px;
	min-height: 32px;
}

.materialai-topbar-02__promo{
	gap: 6px 12px;
}

.materialai-topbar-02__promo p,
.materialai-topbar-02__meta p{
	margin: 0;
}

.materialai-topbar-02__tag{
	line-height: 1.75;
}

.materialai-topbar-02__more a,
.materialai-topbar-02__meta a{
	color: inherit;
	text-decoration: none;
	transition: color .3s ease;
}

.materialai-topbar-02__meta{
	gap: 10px 18px;
}

/* Each top-bar entry is an editable Icon block + a paragraph. The icons come
   from the theme's own "Material AI" icon library, so they can be swapped,
   resized and recoloured from the block sidebar like any other icon. */
.materialai-topbar-02__item{
	display: inline-flex;
	align-items: center;
}

.materialai-topbar-02 .materialai-topbar-02__item .wp-block-icon{
	display: inline-flex;
	align-items: center;
	flex: 0 0 auto;
	line-height: 0;
}

.materialai-topbar-02 .materialai-topbar-02__item .wp-block-icon svg{
	display: block;
	width: 100%;
	height: auto;
}

.materialai-topbar-02__item.is-divided{
	padding-left: 20px;
	border-left: 1px solid color-mix(in srgb, var(--wp--preset--color--light-color) 24%, transparent);
}

.materialai-topbar-02__item:hover a{
	color: var(--wp--preset--color--primary);
}

.materialai-topbar-02__more .wp-block-icon{
	transition: transform .3s ease;
}

.materialai-topbar-02__more:hover .wp-block-icon{
	transform: translateX(3px);
}

/* -------------------------------------------------------- floating navbar */

/* No top padding: the navbar's top edge sits exactly on the hero's top edge. */
.materialai-nav-wrap-02{
	display: flex;
	justify-content: center;
	padding: 0 var(--mai-gutter);
}

.materialai-navbar-02{
	position: relative;
	width: min(var(--mai-shell), 100%);
	min-height: var(--mai-navbar-h);
	gap: 24px;
	padding: 18px var(--mai-navbar-pad);
	border-radius: 0 0 10px 10px;
	background: var(--white);
	/* The negative spread keeps the blur from reaching back up past the bar's
	   top edge. Without it the tail washes a grey smudge across the white
	   strip between the top bar and the navbar; the drop below the bar, over
	   the hero, is if anything a touch stronger than before. */
	box-shadow: 0 22px 38px -22px rgba(0, 0, 0, .26);
}

/* Where the navbar meets the top edge of the hero the edge curves away in an
   inverted (concave) corner, so the bar reads as cut out of the hero rather
   than laid on top of it. border-radius only does convex corners, so each
   shoulder is a square masked by a radial-gradient. */
.materialai-navbar-02::before,
.materialai-navbar-02::after{
	content: "";
	position: absolute;
	top: 0;
	width: var(--mai-shoulder);
	height: var(--mai-shoulder);
	pointer-events: none;
}

.materialai-navbar-02::before{
	left: calc(-1 * var(--mai-shoulder));
	background: radial-gradient(
		circle at 0 100%,
		transparent var(--mai-shoulder),
		var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)
	);
}

.materialai-navbar-02::after{
	right: calc(-1 * var(--mai-shoulder));
	background: radial-gradient(
		circle at 100% 100%,
		transparent var(--mai-shoulder),
		var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)
	);
}

.materialai-branding-02{
	flex: 0 0 auto;
}

.materialai-branding-02 .wp-block-site-logo img{
	height: auto;
	max-height: 48px;
	width: auto;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-title{
	margin: 0;
	line-height: 1.1;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-title a{
	color: var(--wp--preset--color--secondary);
	text-decoration: none;
}

.materialai-branding-02 .site-branding-fallback .wp-block-site-tagline{
	margin: 0;
	font-size: 13px;
	color: var(--wp--preset--color--foreground);
}

.materialai-navbar-02 .wp-block-site-logo:not(:empty) + .site-branding-fallback{
	display: none;
}

.materialai-nav-02{
	flex: 1 1 auto;
}

.materialai-navbar-02 .wp-block-navigation{
	gap: 8px 34px;
}

.materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content{
	color: var(--wp--preset--color--secondary);
	font-weight: 700;
	font-size: 17px;
	text-decoration: none;
	transition: color .3s ease;
}

.materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content:hover,
.materialai-navbar-02 .wp-block-navigation .current-menu-item > .wp-block-navigation-item__content{
	color: var(--wp--preset--color--primary);
}

.materialai-navbar-02 .wp-block-navigation__submenu-container{
	border: 0;
	border-radius: 12px;
	padding: 8px 0;
	background: var(--white);
	box-shadow: 0 16px 36px rgba(0, 0, 0, .14);
}

.materialai-navbar-02 .wp-block-navigation__responsive-container-open,
.materialai-navbar-02 .wp-block-navigation__responsive-container-close{
	color: var(--wp--preset--color--secondary);
}

.materialai-actions-02{
	flex: 0 0 auto;
	gap: 16px;
}

/* On the narrowest phones the promo sentence runs to a third line and the top
   bar grows to ~91px. The size is set inline on the paragraph by the block
   editor, so !important is the only way CSS can reach it; the override is
   scoped to this one bar and this one width. */
@media (max-width: 389px){

	.materialai-topbar-02__copy p,
	.materialai-topbar-02__more p{
		font-size: clamp(11px, 3.3vw, 14px) !important;
	}

	.materialai-topbar-02__copy{
		gap: 8px;
	}
}

/* Between the overlay and a comfortable desktop there is a band where the
   menu fits only if something gives. The call to action is the widest thing
   in the bar that is repeated elsewhere on the page, so it stands down and
   the menu keeps its single line. */
@media (min-width: 1025px) and (max-width: 1279px){

	.materialai-header-02 .materialai-navbar-02 .wp-block-buttons{
		display: none;
	}

	.materialai-header-02 .materialai-navbar-02 .wp-block-navigation{
		gap: 8px 16px;
	}
}

/* The site title inherits a fluid size, so on a wide screen the branding grew
   and quietly took the room the menu needed. Pinning it keeps the bar's
   proportions the same at every width. */
.materialai-navbar-02 .site-branding-fallback .wp-block-site-title{
	font-size: 24px;
}

/* =========================================================== sticky header */

/* Switched on from Appearance -> Site Style, which puts .materialai-sticky-header
   on the body. Both headers share the .materialai-header root, so one set of
   rules covers the original design and Header 02 alike.

   The header stays in normal flow — `sticky`, not `fixed` — because Header 02's
   hero is pulled up underneath it by a negative margin, and taking the header
   out of flow would collapse that overlap. Once stuck, the top bar is slid out
   of view with a transform rather than by collapsing its height: changing the
   height would shorten the header's box in flow and jerk the rest of the page
   up by that amount. */
/* `overflow-x: hidden` on html/body makes them scroll containers, and a sticky
   element inside a scroll container that is not the one actually scrolling
   never sticks. `clip` clips exactly the same way without creating that
   container. Both declarations need !important to reach past the base rule in
   responsive.css; where `clip` is not understood the declaration is dropped,
   `hidden` stays, and only the stickiness is lost. */
html:has(body.materialai-sticky-header),
body.materialai-sticky-header{
	overflow-x: clip !important;
}

/* A template part renders inside its own wrapper element, and that wrapper is
   exactly as tall as the header — so a sticky header inside it would have no
   room to travel. The wrapper carries the stickiness; the header itself is
   listed too, for the templates that place the pattern without a wrapper. */
.materialai-sticky-header .wp-block-template-part:has(> .materialai-header),
.materialai-sticky-header .materialai-header{
	position: sticky;
	top: 0;
	z-index: 999;
	transition: transform .3s ease;
}

/* --mai-topbar-h is measured and written by the script, because the top bar is
   a different height at each breakpoint. The fallback keeps the header usable
   if the script never runs. */
.materialai-sticky-header .materialai-header.is-stuck{
	transform: translateY(calc(-1 * var(--mai-topbar-h, 0px)));
}

/* The bar reads as sitting on top of the page once it is pinned, rather than
   floating over the hero as it does at rest. */
.materialai-sticky-header .materialai-header.is-stuck .materialai-navbar-02{
	border-radius: 0 0 10px 10px;
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4);
}

/* The top bar is only moved out of sight, so stop it catching clicks and keep
   it away from screen readers and the tab order while it is hidden. */
.materialai-sticky-header .materialai-header.is-stuck .materialai-topbar-02,
.materialai-sticky-header .materialai-header.is-stuck .materialai-topbar > :not(.materialai-nav-wrap){
	visibility: hidden;
	pointer-events: none;
}

/* The original header's menu bar reads as lifted off the page once pinned. */
.materialai-sticky-header .materialai-header.is-stuck .materialai-nav-wrap{
	box-shadow: 0 14px 30px -18px rgba(0, 0, 0, .4);
}

/* Clear the admin bar, which is itself fixed to the top of the window. */
.admin-bar.materialai-sticky-header .wp-block-template-part:has(> .materialai-header),
.admin-bar.materialai-sticky-header .materialai-header{
	top: 32px;
}

@media screen and (max-width: 782px){

	.admin-bar.materialai-sticky-header .wp-block-template-part:has(> .materialai-header),
	.admin-bar.materialai-sticky-header .materialai-header{
		top: 46px;
	}
}

/* The mobile menu overlay is position:fixed inside the header. A transform on
   an ancestor makes that ancestor the containing block for fixed children, so
   the panel would hang off the shifted header instead of the window. While the
   menu is open the transform stands down; the panel covers the page anyway. */
.materialai-sticky-header .materialai-header.is-stuck:has(.is-menu-open){
	transform: none;
}

.materialai-sticky-header .materialai-header.is-stuck:has(.is-menu-open) .materialai-topbar-02,
.materialai-sticky-header .materialai-header.is-stuck:has(.is-menu-open) .materialai-topbar > :not(.materialai-nav-wrap){
	visibility: visible;
	pointer-events: auto;
}

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

	.materialai-sticky-header .materialai-header{
		transition: none;
	}
}

/* ---------------------------------------------- header 02 — mobile menu */

/* The navigation block's "mobile" overlay gives up at 600px. Below roughly
   1025px there is not enough room in the bar for a logo, a menu, the search,
   the cart and the button at once, and the menu wrapped onto three or four
   lines on inner pages that have more than a couple of items. The overlay is
   held open across the whole tablet range instead, which also matches the
   width at which the top bar stacks. */
@media (min-width: 601px) and (max-width: 1024px){

	.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open:not(.always-shown){
		display: flex;
	}

	.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open){
		display: none;
	}

	.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close{
		display: block;
	}
}


/* The toggle is a filled tile with three rules across it, the middle one
   short. They are painted as background layers so the button needs no extra
   markup; core's own icon steps aside. */
.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open{
	position: relative;
	width: 50px;
	height: 50px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background-color: var(--wp--preset--color--primary);
	background-image:
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor),
		linear-gradient(currentColor, currentColor);
	background-size: 25px 2px, 18px 2px, 25px 2px;
	background-position: 12px 16px, 12px 24px, 12px 32px;
	background-repeat: no-repeat;
	color: var(--wp--preset--color--light-color);
	transition: background-color .3s ease;
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open:hover{
	background-color: var(--wp--preset--color--secondary);
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-open svg{
	display: none;
}

/* The page behind is dimmed and blurred, and the menu itself rides in as a
   panel down the right-hand edge. */
.materialai-header-02 .wp-block-navigation__responsive-container.is-menu-open{
	position: fixed;
	inset: 0;
	display: flex;
	/* Core lays the overlay out as a column; the panel needs to sit on the
	   right, so the axis is turned back. */
	flex-direction: row;
	align-items: stretch;
	justify-content: flex-end;
	padding: 0;
	overflow: visible;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__responsive-close{
	position: relative;
	width: min(320px, 80vw);
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: hidden;
	border-right: 4px solid var(--wp--preset--color--primary);
	background:
		radial-gradient(110% 70% at 85% 12%, color-mix(in srgb, var(--wp--preset--color--primary) 38%, transparent), transparent 68%),
		linear-gradient(200deg, color-mix(in srgb, var(--wp--preset--color--primary) 16%, var(--wp--preset--color--secondary)) 0%, var(--wp--preset--color--secondary) 62%);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__responsive-dialog{
	display: flex;
	flex-direction: column;
	width: 100%;
	max-width: none;
	height: 100%;
	margin: 0;
	padding: 0;
	overflow: visible;
}

/* Logo on the left of the panel head, close button on the right. The logo is
   copied in from the navbar by script.js, since core's overlay has no slot
   for one. */
/* The panel head and the sub-menu carets belong to the open overlay. Above
   the overlay's breakpoint that same container IS the inline navbar, so
   anything left in it renders beside the real logo — which is how a second
   site title appeared in the header. Everything here is display:none until
   the panel is actually open. */
.materialai-header-02 .mai-menu-head,
.materialai-header-02 .mai-submenu-toggle{
	display: none;
}

.materialai-header-02 .is-menu-open .mai-menu-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 16px;
	flex: 0 0 auto;
	padding: 22px 20px 20px;
	color: var(--wp--preset--color--light-color);
}

.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-logo img,
.materialai-header-02 .is-menu-open .mai-menu-head img{
	max-width: 180px;
	height: auto;
}

/* The panel is dark, so the logo's light version stands in for it. The
   light version only exists for the theme's bundled logos; an uploaded logo
   is turned white instead, so it never disappears into the panel. */
.materialai-logo-light,
.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-logo:has(.materialai-logo-light) .custom-logo{
	display: none;
}

.materialai-header-02 .is-menu-open .mai-menu-head .materialai-logo-light{
	display: block;
}

.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-logo:not(:has(.materialai-logo-light)) img{
	filter: brightness(0) invert(1);
}

.materialai-header-02 .is-menu-open .mai-menu-head .wp-block-site-title a{
	color: var(--wp--preset--color--light-color);
	font-size: 22px;
	font-weight: 700;
	text-decoration: none;
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-close{
	position: static;
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	transform: none;
	background: transparent;
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--light-color);
}

.materialai-header-02 .materialai-nav-02 .wp-block-navigation__responsive-container-close svg{
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__responsive-container-content{
	display: block;
	flex: 1 1 auto;
	width: 100%;
	max-width: none;
	margin: 0;
	/* Core pads the top of the overlay content; the panel's head does that job
	   here, so it is cleared. */
	padding: 0 0 28px;
	overflow-y: auto;
	overscroll-behavior: contain;
}

/* Entries run down the panel, parted by hairlines. */
.materialai-header-02 .is-menu-open .wp-block-navigation__container{
	display: block;
	gap: 0;
	padding: 0;
}

.materialai-header-02 .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item{
	display: flex;
	flex-direction: row;
	flex-wrap: wrap;
	align-items: center;
	justify-content: space-between;
	width: calc(100% - 40px);
	margin: 0 20px;
	border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--light-color) 16%, transparent);
}

.materialai-header-02 .is-menu-open .wp-block-navigation__container > .wp-block-navigation-item:last-child{
	border-bottom: 0;
}

/* Core zeroes item padding inside an open overlay with a four-class rule, so
   the panel's own spacing has to reach past it. */
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content{
	flex: 1 1 auto;
	display: flex;
	align-items: center;
	gap: 10px;
	padding: 11px 0;
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 16px;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .current-menu-item > .wp-block-navigation-item__content,
.materialai-header-02 .materialai-nav-02 .is-menu-open .current_page_item > .wp-block-navigation-item__content,
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:hover,
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation-item__content:focus{
	color: var(--wp--preset--color--primary);
}

/* Core's decorative chevron gives way to a real button, so the sub-menu can
   be opened from the keyboard as well as by tapping. */
.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-icon{
	display: none;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle{
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	align-self: stretch;
	padding: 0;
	border: 0;
	background: transparent;
	color: var(--wp--preset--color--light-color);
	cursor: pointer;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle::before{
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid transparent;
	border-right: 5px solid transparent;
	border-top: 6px solid currentColor;
	transition: transform .25s ease;
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle[aria-expanded="true"]::before{
	transform: rotate(180deg);
}

.materialai-header-02 .is-menu-open .mai-submenu-toggle:hover,
.materialai-header-02 .is-menu-open .mai-submenu-toggle:focus-visible{
	color: var(--wp--preset--color--primary);
}

/* Sub-entries are folded away until their entry is opened. */
.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{
	position: static;
	flex: 0 0 100%;
	width: 100%;
	min-width: 0;
	/* The first header forces a 15px inset on submenus with !important; the
	   step-in here is carried by the links, so that has to be answered. */
	padding-inline: 0 !important;
	margin: 0;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: transparent !important;
	opacity: 1;
	visibility: visible;
	/* Folded by height rather than display: the theme and core each have a
	   say over display here, and height keeps the open/close movement. */
	max-height: 0;
	padding-block: 0;
	overflow: hidden;
	transition: max-height .3s ease;
}

.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item.mai-open > .wp-block-navigation__submenu-container{
	max-height: 70vh;
	padding-block: 0 10px;
}

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

	.materialai-header-02 .materialai-nav-02.wp-block-navigation .is-menu-open .wp-block-navigation-item .wp-block-navigation__submenu-container{
		transition: none;
	}
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__submenu-container > .wp-block-navigation-item{
	padding: 0;
	margin: 0;
	border: 0;
}

.materialai-header-02 .materialai-nav-02 .is-menu-open .wp-block-navigation__submenu-container .wp-block-navigation-item__content{
	padding: 8px 0 8px 16px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.5;
	color: color-mix(in srgb, var(--wp--preset--color--light-color) 82%, transparent);
}

/* ------------------------------------------------ header 02 — mini cart */

/* The cart is dressed as the same disc as the search button beside it, with
   the item count riding on its top-right edge. WooCommerce ships the block
   hidden until its own script runs, hence the visibility override. */
.materialai-minicart-02{
	display: flex;
	align-items: center;
	visibility: visible !important;
}

.materialai-minicart-02 .wc-block-mini-cart__button{
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 55px;
	height: 55px;
	min-width: 55px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--wp--preset--color--secondary);
	color: var(--white);
	cursor: pointer;
	opacity: 1;
	transition: background-color .3s ease;
}

.materialai-minicart-02 .wc-block-mini-cart__button:hover,
.materialai-minicart-02 .wc-block-mini-cart__button:focus{
	background: var(--wp--preset--color--primary);
	color: var(--white);
	opacity: 1;
	transform: none;
}

.materialai-minicart-02 .wc-block-mini-cart__quantity-badge{
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
}

.materialai-minicart-02 .wc-block-mini-cart__icon{
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* The running total lives in the drawer, not next to the icon. */
.materialai-minicart-02 .wc-block-mini-cart__amount{
	display: none;
}

.materialai-minicart-02 .wc-block-mini-cart__badge{
	position: absolute;
	top: -2px;
	right: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	margin: 0;
	padding: 0 5px;
	border: 0;
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--light-color);
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 11px;
	font-weight: 700;
	line-height: 1;
}

/* A header saved in the Site Editor before this version has WooCommerce's
   hooked account icon baked into it, where the server-side filter can no
   longer reach it. */
.materialai-navbar-02 .wp-block-woocommerce-customer-account{
	display: none;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__inside-wrapper{
	border: 0;
	padding: 0;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button{
	width: 55px;
	height: 55px;
	min-width: 55px;
	padding: 0;
	border: 0;
	border-radius: 50%;
	display: flex;
	align-items: center;
	justify-content: center;
	background: var(--wp--preset--color--primary);
	color: var(--white);
	transition: background-color .3s ease;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button svg{
	width: 22px;
	height: 22px;
	fill: var(--white);
	transition: fill .3s ease;
}

.materialai-actions-02 .search-btn-02 .wp-block-search__button:hover,
.materialai-actions-02 .search-btn-02 .wp-block-search__button:focus{
	background: var(--wp--preset--color--secondary);
}

.materialai-btn-started-02 .wp-block-button__link{
	white-space: nowrap;
}

/* ------------------------------------------------- pill buttons + arrows */

/* Base: a pill with a bare arrow at the right (hero button one, top bar). */
.materialai-btn-arrow .wp-block-button__link{
	position: relative;
	display: inline-flex;
	align-items: center;
	min-height: 55px;
	padding: 0 48px 0 28px;
	border-radius: 999px;
	font-size: 18px;
	font-weight: 700;
	line-height: 1.2;
	transition: all .3s ease;
}

.materialai-btn-arrow .wp-block-button__link::after{
	content: "";
	position: absolute;
	top: 50%;
	right: 22px;
	width: 18px;
	height: 18px;
	transform: translateY(-50%);
	background-color: var(--arrow-color, var(--white));
	-webkit-mask: var(--mai-arrow) center / contain no-repeat;
	mask: var(--mai-arrow) center / contain no-repeat;
	transition: transform .3s ease;
}

.materialai-btn-arrow .wp-block-button__link:hover::after,
.materialai-btn-arrow .wp-block-button__link:focus::after{
	transform: translateY(-50%) translateX(4px);
}

/* Modifier: the arrow sits in a filled disc flush with the pill's right end. */
.materialai-btn-disc .wp-block-button__link{
	padding-right: 70px;
}

.materialai-btn-disc .wp-block-button__link::before{
	content: "";
	position: absolute;
	top: 50%;
	right: 2px;
	width: 51px;
	height: 51px;
	transform: translateY(-50%);
	border-radius: 50%;
	background: var(--circle-bg, var(--wp--preset--color--primary));
	transition: all .3s ease;
}

.materialai-btn-disc .wp-block-button__link::after{
	right: 18px;
	background-color: var(--circle-color, var(--white));
}

/* Double ring used by the hero buttons. */
.materialai-btn-ring-02 .wp-block-button__link{
	border: 1px solid var(--wp--preset--color--primary);
	outline: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 45%, transparent);
	outline-offset: 5px;
}

/* -------------------------------------------------------------- hero 02 */

/* Slider and stats bar share one grid cell, so the bar sits over the bottom
   of the slide exactly as it did when the hero was a single Cover — but the
   picture now belongs to each slide instead of the hero. */
.materialai-hero2{
	position: relative;
	z-index: 1;
	display: grid;
	grid-template-columns: 1fr;
	padding: 0;
	border-radius: 30px;
	overflow: hidden;
}

.materialai-hero2 > *{
	grid-area: 1 / 1;
	min-width: 0;
}

/* Belt and braces for the same junction: whatever ends up deciding the hero
   row's height, the carousel and the slide inside it fill that height, so the
   artwork always reaches the plinth and no gap can open underneath it. */
.materialai-hero2 > .slider-2,
.materialai-hero2 .slider-2 .owl-stage-outer,
.materialai-hero2 .slider-2 .owl-stage,
.materialai-hero2 .slider-2 .owl-item,
.materialai-hero2 .slider-2 .materialai-hero2-slide{
	height: 100%;
}

/* Owl's own stylesheet is not loaded in the editor, so the positioning context
   the arrows resolve against is set here rather than inherited from it. */
.materialai-hero2 .slider-2{
	position: relative;
}

.materialai-hero2.alignfull{
	width: auto;
	max-width: none;
	margin-left: var(--mai-gutter);
	margin-right: var(--mai-gutter);
}

/* The hero photograph is cropped from its centre-left, which keeps the
   subjects clear of the copy at every width. */
.materialai-hero2-slide .wp-block-cover__image-background{
	object-fit: cover;
	object-position: 62% center;
}

/* Scrim: keeps the photograph readable on the right and darkens the left,
   where the copy sits. Each slide carries its own, since each has its own
   picture. */
.materialai-hero2-slide::before{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--secondary) 22%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--secondary) 8%, transparent) 35%,
		transparent 55%
	);
}

.materialai-hero2-slide > .wp-block-cover__inner-container{
	position: relative;
	z-index: 2;
	width: 100%;
	max-width: none;
	padding: 0;
}

/* The navbar overlaps the hero, but only when Header 02 is the one in use. */
body:has(.materialai-header-02) .materialai-hero2{
	margin-top: calc(-1 * var(--mai-navbar-h));
}

.materialai-hero2 .slider-2{
	position: static;
	width: 100%;
	max-width: none;
	margin: 0;
}

.materialai-hero2 .slider-2 .owl-stage-outer{
	width: 100%;
}

/* Each slide is a Cover: it owns its picture, overlay and dim, and its
   min-height plus the stats bar make up the hero. Top padding clears the
   floating navbar so the copy centres below it. */
.materialai-hero2-slide{
	width: 100%;
	min-height: clamp(640px, 54.7vw, 1050px);
	padding: calc(var(--mai-navbar-h) + 78px) 0 170px;
}

/* Holds the hero copy on the same 1170 grid as the rest of the site. */
.materialai-hero2-inner{
	width: min(var(--mai-shell), 100%);
	max-width: none;
	margin-left: auto;
	margin-right: auto;
	padding-left: 0;
	padding-right: 0;
}

.materialai-hero2-content{
	max-width: 900px;
	margin-left: 0;
	margin-right: auto;
}

.materialai-hero2-content > *{
	margin-left: 0;
	margin-right: auto;
}

/* Badge — 390x70 in the comp: 44px disc, 19px label. */
.materialai-hero2 .materialai-badge{
	/* The badge hugs its label rather than filling the column: at desktop the
	   label is wide enough that this changes nothing, but on a phone a
	   full-width pill reads as a bar rather than a badge. */
	width: -moz-fit-content;
	width: fit-content;
	max-width: 100%;
	gap: 12px;
	padding: 13px 26px 13px 13px;
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 78%, transparent);
	backdrop-filter: blur(2px);
}

.materialai-hero2 .materialai-badge::before{
	inset: 5px;
}

.materialai-hero2 .materialai-badge p{
	margin: 0;
}

.materialai-hero2 .materialai-badge p:first-child,
.materialai-hero2 .materialai-badge > .wp-block-icon:first-child{
	width: 44px;
	height: 44px;
	font-size: 18px;
}

/* Hero typography lives here rather than in the block markup: a fluid
   clamp() is awkward to keep in sync with a block's style attribute, and
   editors can still override any of it from the sidebar. */
.materialai-hero2 .materialai-hero2-eyebrow{
	font-size: clamp(15px, 1.3vw, 21px);
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

.materialai-hero2 .materialai-hero2-title{
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
	font-size: clamp(34px, 3.75vw, 72px);
	font-weight: 800;
	line-height: 1.4;
}

.materialai-hero2-title mark{
	padding: 4px 14px;
	border-radius: 6px;
	white-space: nowrap;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.materialai-hero2 .materialai-hero2-text{
	max-width: 620px;
	margin-left: 0;
	margin-right: auto;
	margin-bottom: 0;
	font-size: clamp(16px, 1.15vw, 19px);
	line-height: 1.8;
	opacity: .92;
}

.materialai-hero2-buttons{
	gap: 42px;
}

/* -------------------------------------------- hero 02 — slide entrance */

/* The slide copy comes in with the theme's usual WOW + animate.css pairing:
   the blocks carry "wow fadeInUp" in their Additional CSS classes, so the
   animation can be swapped for any other animate.css name from the block
   sidebar. The stagger lives here rather than in data-wow-delay attributes —
   an attribute that core does not know about would make the saved block
   markup invalid in the editor. */
.materialai-hero2-slide .wow.animated{
	animation-duration: .9s;
}

.materialai-hero2-slide .materialai-badge.animated{
	animation-delay: .1s;
}

.materialai-hero2-slide .materialai-hero2-title.animated{
	animation-delay: .25s;
}

.materialai-hero2-slide .materialai-hero2-text.animated{
	animation-delay: .4s;
}

.materialai-hero2-slide .materialai-hero2-buttons.animated{
	animation-delay: .55s;
}

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

	.materialai-hero2-slide .wow,
	.materialai-hero2-slide .wow.animated{
		animation: none !important;
		visibility: visible !important;
	}
}

/* ----------------------------------------------------- hero 02 — arrows */

/* The arrows are absolutely positioned tabs, so their container is taken out of
   the flow too. Left in the flow it can pick up a stray line box below the
   stage; the hero's grid row then grows taller than the slide and a strip of
   page background shows between the artwork and the stats-bar plinth. */
.materialai-hero2 .slider-2 .owl-nav{
	display: block !important;
	position: absolute;
	inset: 0;
	margin: 0;
	pointer-events: none;
}

.materialai-hero2 .slider-2 .owl-nav button{
	pointer-events: auto;
}

.materialai-hero2 .slider-2 .owl-nav button.owl-prev,
.materialai-hero2 .slider-2 .owl-nav button.owl-next{
	position: absolute;
	top: 50%;
	z-index: 6;
	display: flex !important;
	align-items: center;
	justify-content: center;
	width: 79px;
	height: 101px;
	margin: 0;
	padding: 0;
	border: 0;
	font-size: 0;
	transform: translateY(-50%);
	background: var(--white) !important;
	transition: background-color .3s ease;
}

.materialai-hero2 .slider-2 .owl-nav button.owl-prev{
	left: 0;
	border-radius: 0 16px 16px 0;
	--arrow-color: var(--wp--preset--color--secondary);
}

.materialai-hero2 .slider-2 .owl-nav button.owl-next{
	right: 0;
	border-radius: 16px 0 0 16px;
	--arrow-color: var(--wp--preset--color--secondary);
}

.materialai-hero2 .slider-2 .owl-nav button.owl-prev::before,
.materialai-hero2 .slider-2 .owl-nav button.owl-next::before{
	content: "";
	width: 26px;
	height: 26px;
	background-color: var(--arrow-color);
	-webkit-mask: var(--mai-arrow) center / contain no-repeat;
	mask: var(--mai-arrow) center / contain no-repeat;
	/* The colour is part of the hover response, so it has to ease like the
	   nudge does — without this it snapped. */
	transition: transform .3s ease, background-color .3s ease;
}

.materialai-hero2 .slider-2 .owl-nav button.owl-prev::before{
	transform: scaleX(-1);
}

/* Both arrows rest in the secondary colour and lift to primary on hover, so
   the colour reads as a response to the pointer rather than as decoration.
   The tab itself is left alone, keeping it part of the hero's edge. */
.materialai-hero2 .slider-2 .owl-nav button.owl-prev:hover,
.materialai-hero2 .slider-2 .owl-nav button.owl-next:hover,
.materialai-hero2 .slider-2 .owl-nav button.owl-prev:focus,
.materialai-hero2 .slider-2 .owl-nav button.owl-next:focus{
	--arrow-color: var(--wp--preset--color--primary);
}

/* The tab no longer changes colour on focus, so keyboard users get a ring
   instead — colour alone is not a sufficient focus indicator. */
.materialai-hero2 .slider-2 .owl-nav button:focus-visible{
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: -5px;
}
/* The tabs meet the side edge of the hero with the same inverted corner as
   the navbar. One pseudo-element carries both shoulders as two gradient
   layers, so the arrow glyph keeps ::before to itself. */
.materialai-hero2 .slider-2 .owl-nav button::after{
	content: "";
	position: absolute;
	top: calc(-1 * var(--mai-shoulder));
	bottom: calc(-1 * var(--mai-shoulder));
	width: var(--mai-shoulder);
	pointer-events: none;
}
.materialai-hero2 .slider-2 .owl-nav button.owl-prev::after{
	left: 0;
	background:
		radial-gradient(circle at 100% 0, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) left top / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat,
		radial-gradient(circle at 100% 100%, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) left bottom / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat;
}
.materialai-hero2 .slider-2 .owl-nav button.owl-next::after{
	right: 0;
	background:
		radial-gradient(circle at 0 0, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) right top / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat,
		radial-gradient(circle at 0 100%, transparent var(--mai-shoulder), var(--wp--preset--color--background) calc(var(--mai-shoulder) + 0.5px)) right bottom / var(--mai-shoulder) calc(var(--mai-shoulder) + 1px) no-repeat;
}
.materialai-hero2 .slider-2 .owl-dots{
	display: none !important;
}

/* -------------------------------------------------- hero 02 — stats bar */

/* The 8px primary strip runs the full width of the hero; the stats bar sits
   on top of it, flush with the bottom edge. */
.materialai-hero2-statsbar{
	position: relative;
	z-index: 4;
	align-self: end;
	width: 100%;
	max-width: none;
	margin: 0;
	display: flex;
	justify-content: center;
	padding: 0 var(--mai-gutter);
	background: linear-gradient(
		to top,
		var(--wp--preset--color--primary) var(--mai-hero-plinth),
		transparent var(--mai-hero-plinth)
	);
}

.materialai-hero2-stats{
	position: relative;
	width: min(1230px, 100%);
	gap: 20px;
	padding: 20px;
	border-radius: 12px 12px 0 0;
}

/* Where the ends of the stats bar meet the plinth the corner is concave, so
   the bar reads as rising out of it — same inverted-corner trick, filled with
   the primary colour instead of the page background. */
.materialai-hero2-stats::before,
.materialai-hero2-stats::after{
	content: "";
	position: absolute;
	bottom: var(--mai-hero-plinth);
	width: var(--mai-plinth-fillet);
	height: var(--mai-plinth-fillet);
	pointer-events: none;
}

.materialai-hero2-stats::before{
	left: calc(-1 * var(--mai-plinth-fillet));
	background: radial-gradient(
		circle at 0 0,
		transparent var(--mai-plinth-fillet),
		var(--wp--preset--color--primary) calc(var(--mai-plinth-fillet) + 0.5px)
	);
}

.materialai-hero2-stats::after{
	right: calc(-1 * var(--mai-plinth-fillet));
	background: radial-gradient(
		circle at 100% 0,
		transparent var(--mai-plinth-fillet),
		var(--wp--preset--color--primary) calc(var(--mai-plinth-fillet) + 0.5px)
	);
}

.materialai-hero2-stat{
	flex: 1 1 260px;
	min-height: 130px;
	gap: 20px;
	padding: 12px 30px 12px 20px;
	border-radius: 999px;
	background: var(--wp--preset--color--secondary);
}

.materialai-hero2-stat .progress{
	flex: 0 0 auto;
	width: 88px;
	height: 88px;
	background: conic-gradient(
		var(--white) var(--progress, 0deg),
		color-mix(in srgb, var(--wp--preset--color--secondary) 68%, var(--white)) 0
	);
}

.materialai-hero2-stat .progress::before{
	width: 68px;
	height: 68px;
	background: var(--wp--preset--color--secondary);
}

.materialai-hero2-stat .progress p{
	margin: 0;
}

.materialai-hero2-stat__content{
	flex: 1 1 auto;
}

.materialai-hero2-stat__content > *{
	margin: 0;
	text-align: left;
}

.materialai-hero2 .materialai-hero2-stat__title{
	font-size: clamp(18px, 1.45vw, 28px);
	font-weight: 700;
	line-height: 1.2;
}

/* ------------------------------------------------------- editor canvas */

/* Editor canvas.

   With editor-preview.js running, the slider marks itself .mat-ed-ready and
   the canvas behaves like the front end: one slide at a time, switched with
   the same edge tabs — which are the theme's own .owl-nav buttons, so they
   need no styling of their own.

   Without it (some editors don't iframe the canvas), every slide stays
   stacked and visible, so the pattern is editable either way. */
.editor-styles-wrapper .materialai-hero2{
	display: block;
}

.editor-styles-wrapper .materialai-hero2:has(.slider-2.mat-ed-ready){
	display: grid;
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide{
	min-height: 0;
	padding-top: 78px;
	padding-bottom: 60px;
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide:first-child{
	padding-top: calc(var(--mai-navbar-h) + 78px);
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide + .materialai-hero2-slide{
	border-top: 1px dashed color-mix(in srgb, var(--wp--preset--color--light-color) 40%, transparent);
}

/* In the fallback each slide is numbered, so it is obvious how many there
   are and which one is being edited. A bare number needs no translation. */
.editor-styles-wrapper .slider-2:not(.mat-ed-ready){
	counter-reset: mai-slide;
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide{
	counter-increment: mai-slide;
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide::after{
	content: counter(mai-slide);
	position: absolute;
	top: 16px;
	left: 50%;
	z-index: 7;
	display: flex;
	align-items: center;
	justify-content: center;
	min-width: 30px;
	height: 30px;
	padding: 0 9px;
	transform: translateX(-50%);
	border-radius: 999px;
	background: var(--wp--preset--color--primary);
	color: var(--white);
	font-size: 14px;
	font-weight: 700;
	line-height: 1;
	pointer-events: none;
}

.editor-styles-wrapper .slider-2:not(.mat-ed-ready) > .materialai-hero2-slide:first-child::after{
	top: calc(var(--mai-navbar-h) + 18px);
}

.editor-styles-wrapper .slider-2.mat-ed-ready > .materialai-hero2-slide{
	display: none;
}

.editor-styles-wrapper .slider-2.mat-ed-ready > .materialai-hero2-slide.mat-ed-active{
	display: flex;
}

.editor-styles-wrapper .mat-ed-nav-02 button{
	cursor: pointer;
}

/* The editor canvas renders the header part without a <body> wrapper. */
.editor-styles-wrapper .materialai-hero2{
	margin-top: 0;
}

/* ----------------------------------------------------------- responsive */

@media (max-width: 1280px){

	:root{
		--mai-navbar-pad: 18px;
	}

	.materialai-navbar-02{
		gap: 16px;
	}

	.materialai-navbar-02 .wp-block-navigation{
		gap: 8px 22px;
	}

	.materialai-hero2-inner{
		padding-left: 20px;
		padding-right: 20px;
	}

	.materialai-hero2-buttons{
		gap: 24px;
	}
}

@media (max-width: 1024px){

	:root{
		--mai-gutter: 20px;
		--mai-navbar-h: 84px;
		--mai-shoulder: 18px;
		--mai-hero-plinth: 5px;
		--mai-plinth-fillet: 12px;
	}

	.materialai-topbar-02__row{
		justify-content: center;
		text-align: center;
	}

	/* The two halves stack at this width. Each has to claim the whole row for
	   its own centring to mean anything — left to shrink-wrap they bunch up
	   against the left edge instead. */
	.materialai-topbar-02__promo,
	.materialai-topbar-02__meta{
		flex: 1 1 100%;
		justify-content: center;
	}

	:root{
		--mai-navbar-pad: 16px;
	}

	.materialai-navbar-02{
		border-radius: 0 0 10px 10px;
		padding-top: 14px;
		padding-bottom: 14px;
	}

	.materialai-hero2{
		border-radius: 24px;
	}

	/* The copy runs full width here, so the scrim flattens out instead of
	   fading to the right, and the crop pushes the subjects clear of it. */
	.materialai-hero2-slide .wp-block-cover__image-background{
		object-position: 74% center;
	}

	.materialai-hero2-slide::before{
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 58%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 48%, transparent) 60%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent) 100%
		);
	}

	.materialai-hero2-slide{
		min-height: 0;
		padding: calc(var(--mai-navbar-h) + 50px) 0 50px;
	}

	/* Stacked pills make the bar tall here, so it flows after the slide
	   instead of sitting over it. */
	.materialai-hero2{
		display: block;
	}

	.materialai-hero2-inner{
		padding-left: 84px;
		padding-right: 84px;
	}

	.materialai-hero2-content,
	.materialai-hero2 .materialai-hero2-text{
		max-width: 100%;
	}
	.materialai-hero2 .slider-2 .owl-nav button.owl-prev,
	.materialai-hero2 .slider-2 .owl-nav button.owl-next{
		width: 56px;
		height: 74px;
	}
	/* The hero stacks at this width, so nothing hands the carousel a definite
	   height and each slide ends up only as tall as its own copy. Stretching
	   the track keeps every slide the height of the tallest, which in turn
	   keeps the arrows — anchored to the bottom of the track — inside the
	   artwork whichever slide is showing. */
	.materialai-hero2 .slider-2 .owl-stage{
		display: flex;
		align-items: stretch;
	}

	/* height:100% from the desktop rule would opt these out of the stretch
	   above, so the track's own sizing is handed back here. flex:0 0 auto
	   keeps the widths Owl sets inline. */
	.materialai-hero2 .slider-2 .owl-item{
		display: flex;
		flex: 0 0 auto;
		height: auto;
	}

	.materialai-hero2 .slider-2 .materialai-hero2-slide{
		flex: 1 1 auto;
		height: auto;
	}

	.materialai-hero2-stats{
		border-radius: 12px 12px 0 0;
	}

	.materialai-hero2-stat{
		flex: 1 1 100%;
		min-height: 108px;
	}
}

@media (max-width: 767px){

	:root{
		--mai-gutter: 12px;
		--mai-navbar-h: 72px;
		--mai-shoulder: 12px;
		--mai-hero-plinth: 4px;
		--mai-plinth-fillet: 9px;
	}

	/* On a phone the bar carries the promo on its own, as the comp has it —
	   the phone, chat, account and currency links return from 768px up. */
	.materialai-topbar-02 .materialai-topbar-02__meta{
		display: none;
	}

	.materialai-topbar-02__item.is-divided{
		padding-left: 0;
		border-left: 0;
	}

	.materialai-topbar-02__row{
		justify-content: flex-start;
		text-align: left;
	}

	.materialai-topbar-02 .materialai-topbar-02__promo{
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 10px;
	}

	.materialai-topbar-02 .materialai-topbar-02__tag{
		flex: 0 0 auto;
	}

	/* The copy and its "Learn More" link share one inline flow here, so the
	   link rides at the end of the sentence instead of dropping to a line of
	   its own, and the wrapped line stays indented past the badge. */
	.materialai-topbar-02 .materialai-topbar-02__copy{
		display: block;
	}

	.materialai-topbar-02 .materialai-topbar-02__copy > p{
		display: inline;
	}

	.materialai-topbar-02__copy .materialai-topbar-02__more{
		display: inline-flex;
		vertical-align: -4px;
	}

	.materialai-navbar-02{
		padding: 10px 12px;
		gap: 12px;
	}

	/* Logo, then the cart and the menu toggle together on the right. Search
	   and Get Started belong to the menu overlay at this width. The block's
	   own layout class also sets justify-content, so these reach past it. */
	.materialai-header-02 .materialai-navbar-02{
		justify-content: flex-start;
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-actions-02{
		order: 2;
		margin-left: auto;
		gap: 10px;
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-nav-02{
		order: 3;
		/* Stop the navigation growing into the gap, so the toggle stays beside
		   the cart rather than being pushed off on its own. */
		flex: 0 0 auto;
		margin-left: 0;
	}

	.materialai-header-02 .materialai-navbar-02 .materialai-branding-02{
		flex: 0 1 auto;
		min-width: 0;
	}

	.materialai-actions-02 .search-btn-02,
	.materialai-actions-02 .wp-block-buttons{
		display: none;
	}

	.materialai-minicart-02 .wc-block-mini-cart__button{
		width: 46px;
		height: 46px;
		min-width: 46px;
	}

	.materialai-minicart-02 .wc-block-mini-cart__icon{
		width: 20px;
		height: 20px;
	}

	.materialai-btn-arrow .wp-block-button__link{
		min-height: 48px;
		padding: 0 42px 0 22px;
		font-size: 16px;
	}

	.materialai-btn-disc .wp-block-button__link{
		padding-right: 60px;
	}

	.materialai-btn-disc .wp-block-button__link::before{
		width: 44px;
		height: 44px;
	}

	.materialai-btn-disc .wp-block-button__link::after{
		right: 15px;
	}

	.materialai-hero2{
		border-radius: 18px;
	}

	.materialai-hero2-slide{
		padding: calc(var(--mai-navbar-h) + 26px) 0 62px;
	}

	/* Tighter rhythm between the badge, heading, copy and buttons than the
	   desktop 28px, so the hero does not run away down a phone screen. */
	.materialai-hero2 .materialai-hero2-content{
		--wp--style--block-gap: 18px;
		gap: 18px;
	}

	.materialai-hero2-inner{
		padding-left: 22px;
		padding-right: 22px;
	}

	.materialai-hero2 .materialai-badge{
		gap: 10px;
		padding: 6px 18px 6px 6px;
	}

	.materialai-hero2 .materialai-badge p:first-child,
	.materialai-hero2 .materialai-badge > .wp-block-icon:first-child{
		width: 36px;
		height: 36px;
		font-size: 15px;
	}

	/* Both calls to action stay on one line, as the comp has them, so the
	   padding and label size come down to make room. */
	/* Sized to sit side by side as the comp has them; on a narrow phone the
	   second one drops to its own line rather than being squeezed. */
	.materialai-hero2 .materialai-hero2-buttons{
		gap: 10px;
	}

	.materialai-hero2 .materialai-hero2-buttons .wp-block-button{
		flex: 0 0 auto;
	}

	.materialai-hero2-buttons .wp-block-button__link{
		min-height: 44px;
		padding: 0 38px 0 14px;
		font-size: 14px;
		white-space: nowrap;
	}

	/* The plain arrow sits closer to the edge here so the label clears it. */
	.materialai-hero2-buttons .materialai-btn-arrow:not(.materialai-btn-disc) .wp-block-button__link::after{
		right: 14px;
		width: 16px;
		height: 16px;
	}

	.materialai-hero2-buttons .materialai-btn-disc .wp-block-button__link{
		padding-right: 48px;
	}

	.materialai-hero2-buttons .materialai-btn-disc .wp-block-button__link::before{
		width: 34px;
		height: 34px;
	}

	.materialai-hero2-buttons .materialai-btn-disc .wp-block-button__link::after{
		right: 12px;
	}

	/* Side tabs would sit on top of the copy at this width, so the arrows
	   drop to the bottom-right corner of the slide as a pair — anchored to
	   the slide area, not the hero, so they clear the stats bar. */
	.materialai-hero2 .slider-2{
		position: relative;
	}
	.materialai-hero2 .slider-2 .owl-nav button.owl-prev,
	.materialai-hero2 .slider-2 .owl-nav button.owl-next{
		top: auto;
		bottom: 18px;
		width: 46px;
		height: 46px;
		border-radius: 50%;
		transform: none;
		box-shadow: 0 6px 18px rgba(0, 0, 0, .18);
	}
	.materialai-hero2 .slider-2 .owl-nav button.owl-prev{
		left: auto;
		right: 74px;
	}
	.materialai-hero2 .slider-2 .owl-nav button.owl-next{
		right: 18px;
	}
	.materialai-hero2 .slider-2 .owl-nav button.owl-prev::before,
	.materialai-hero2 .slider-2 .owl-nav button.owl-next::before{
		width: 18px;
		height: 18px;
	}
	.materialai-hero2 .slider-2 .owl-nav button::after{
		display: none;
	}
	.materialai-hero2-stats{
		gap: 12px;
		padding: 14px;
		border-radius: 12px 12px 0 0;
	}

	.materialai-hero2-stat{
		min-height: 92px;
		padding: 10px 20px 10px 12px;
		gap: 14px;
	}

	.materialai-hero2-stat .progress{
		width: 68px;
		height: 68px;
	}

	.materialai-hero2-stat .progress::before{
		width: 52px;
		height: 52px;
	}
}

/* ==========================================================================
   Design variant 03 — Material Spa

   Not a third copy of the header and hero. The header is Header 02's markup,
   to which Appearance -> Site Style adds .materialai-header-spa, and the hero
   (patterns/slider-03.php) is built from Slider 02's classes. Everything in
   variant 02 above therefore still applies; this section only states what
   the Spa comp changes, and only at the widths where it differs. Header,
   hero copy and highlights all sit on the site container (--mai-shell),
   the same width as the sections below:
     - the top bar in the primary colour, on the container like the navbar
     - the navbar as a free-floating rounded pill, not a tab cut into the hero
     - a light, full-bleed hero that runs up behind the whole header
     - round arrows, and a strip of wellness highlights instead of the stats
   Colours stay palette-driven; the Spa palette is styles/material-spa.json.
   ========================================================================== */

/* The comp sits closer to the window edge than Header 02 does: 16px at a
   1200px window, growing to Header 02's 40px on wide screens. Below 768px
   Header 02's own phone gutter applies. */
@media (min-width: 768px){

	.materialai-header-spa,
	.materialai-hero-spa{
		--mai-gutter: clamp(16px, 1.35vw, 40px);
	}
}

/* The comp's glyphs are heavier than Header 02's: a bold, round-capped arrow
   (every arrow in the Spa header and hero draws from --mai-arrow), a solid
   cart, a bold magnifier, an outlined chat bubble and a thin chevron. They
   are masks, so each takes its colour from the palette like the rest. */
.materialai-header-spa,
.materialai-hero-spa{
	--mai-arrow: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='4.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4.5 12h14'/%3E%3Cpath d='m12.8 5.6 6.4 6.4-6.4 6.4'/%3E%3C/svg%3E");
	--mai-spa-chevron: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 9 7 7 7-7'/%3E%3C/svg%3E");
	--mai-spa-chat: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linejoin='round'%3E%3Cpath d='M5 3.5h14a2 2 0 0 1 2 2v9.5a2 2 0 0 1-2 2H10l-4.5 3.8V17H5a2 2 0 0 1-2-2V5.5a2 2 0 0 1 2-2z'/%3E%3C/svg%3E");
	--mai-spa-search: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-linecap='round'%3E%3Ccircle cx='10.5' cy='10.5' r='6.6' stroke-width='3.2'/%3E%3Cpath d='m15.6 15.6 5 5' stroke-width='3.6'/%3E%3C/svg%3E");
	--mai-spa-cart: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1.8 3.4h2.6l2.9 11.2' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3Cpath d='M5.6 6h16.2l-2.1 8a1.3 1.3 0 0 1-1.3 1H7.9z'/%3E%3Cpath d='M7.4 17.6h11.4' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='9' cy='20.6' r='1.9'/%3E%3Ccircle cx='17.6' cy='20.6' r='1.9'/%3E%3C/svg%3E");
}

/* ------------------------------------------------------- spa — top bar */

/* The pink bar is a touch wider than the navbar below it (40px past the
   container each side, the navbar 15px), 60px tall, with deep rounded bottom
   corners. Its contents sit on the container itself, so the "NEW" badge
   lines up with the hero copy. The padding and radius are set inline on the
   block, hence !important. */
.materialai-header-spa .materialai-topbar-02__gutter > .wp-block-group{
	max-width: calc(var(--mai-shell) + 80px);
	margin-inline: auto;
	padding-block: 0 !important;
	border-bottom-left-radius: 45px !important;
	border-bottom-right-radius: 45px !important;
}

.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__row{
	width: min(var(--mai-shell), 100% - 40px);
	min-height: 60px;
	padding-inline: 0;
}

.materialai-header-spa .materialai-topbar-02__promo{
	gap: 6px 10px;
}

.materialai-header-spa .materialai-topbar-02__copy,
.materialai-header-spa .materialai-topbar-02__more{
	gap: 6px;
}

/* The comp's top bar type is larger than Header 02's; the sizes are set
   inline on each paragraph, hence !important. The phone number leads. */
.materialai-header-spa .materialai-topbar-02 p{
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.5;
}

.materialai-header-spa .materialai-topbar-02__meta > :first-child p{
	font-size: 18px !important;
	font-weight: 400 !important;
}

.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__tag{
	padding: 0 8px !important;
	font-size: 16px !important;
	line-height: 25px;
	letter-spacing: 0.2px !important;
}

/* Header 02 paints its strip, badge and icons from the blocks' own colour
   settings. Spa repaints only those default values, so a colour picked in the
   editor still wins. Core's preset classes are !important, and the Icon block
   sets its colour inline on the <svg>, hence these. */
.materialai-header-spa .materialai-topbar-02__gutter > .has-secondary-background-color{
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 82%, var(--white)) !important;
}

/* Every entry on the right is parted by a hairline, 20px either side. The
   one after the phone number runs the full height of the bar, as in the
   comp; the rest are short rules centred on the text. */
.materialai-header-spa .materialai-topbar-02__meta{
	gap: 0;
	align-self: stretch;
}

.materialai-header-spa .materialai-topbar-02__meta > .materialai-topbar-02__item + .materialai-topbar-02__item{
	position: relative;
	margin-left: 20px;
	padding-left: 20px;
	border-left: 0;
}

.materialai-header-spa .materialai-topbar-02__meta > .materialai-topbar-02__item + .materialai-topbar-02__item::before{
	content: "";
	position: absolute;
	top: 50%;
	left: 0;
	width: 1px;
	height: 30px;
	translate: 0 -50%;
	background: color-mix(in srgb, var(--wp--preset--color--light-color) 40%, transparent);
}

@media (min-width: 1025px){

	.materialai-header-spa .materialai-topbar-02__meta > .is-divided{
		align-self: stretch;
	}

	.materialai-header-spa .materialai-topbar-02__meta > .is-divided::before{
		top: 0;
		height: 100%;
		translate: none;
	}
}

.materialai-header-spa .materialai-topbar-02 .wp-block-icon svg.has-primary-color{
	color: var(--wp--preset--color--light-color) !important;
}

.materialai-header-spa .materialai-topbar-02__meta .materialai-topbar-02__item{
	gap: 6px;
}

.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--user svg{
	width: 21px !important;
}

/* Phone: a white tile with the handset cut in the primary colour. */
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--phone{
	justify-content: center;
	width: 18px;
	height: 18px;
	border-radius: 4px;
	background: var(--wp--preset--color--light-color);
}

.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--phone svg.has-primary-color{
	width: 13px !important;
	color: var(--wp--preset--color--primary) !important;
}

/* Arrow, chat bubble and currency chevron are drawn from the Spa glyphs. */
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--arrow svg,
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--chat svg,
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--caret svg{
	display: none;
}

.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--arrow::before,
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--chat::before,
.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__icon--caret::before{
	content: "";
	display: block;
	width: var(--mai-spa-glyph-w, 16px);
	height: var(--mai-spa-glyph-w, 16px);
	background-color: var(--wp--preset--color--light-color);
	-webkit-mask: var(--mai-spa-glyph) center / contain no-repeat;
	mask: var(--mai-spa-glyph) center / contain no-repeat;
	transition: background-color .3s ease;
}

.materialai-header-spa .materialai-topbar-02__icon--arrow{
	--mai-spa-glyph: var(--mai-arrow);
}

.materialai-header-spa .materialai-topbar-02__icon--chat{
	--mai-spa-glyph: var(--mai-spa-chat);
	--mai-spa-glyph-w: 19px;
}

.materialai-header-spa .materialai-topbar-02__icon--caret{
	--mai-spa-glyph: var(--mai-spa-chevron);
	--mai-spa-glyph-w: 12px;
	margin-left: 2px;
}

.materialai-header-spa .materialai-topbar-02__item:hover a{
	color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------------- spa — navbar */

/* The header group's block gap would add 24px here; the comp wants less.
   The same space below keeps the pill off the breadcrumb on inner pages. */
.materialai-header-spa .materialai-nav-wrap-02{
	margin-block-start: var(--mai-spa-nav-gap, 20px);
	padding-bottom: var(--mai-spa-nav-gap, 20px);
}

/* The pill reaches 15px past the container each side: 1200 x 110 on the
   comp, the logo inset 25px and Get Started 15px from its ends. */
.materialai-header-spa .materialai-navbar-02,
.materialai-sticky-header .materialai-header-spa.is-stuck .materialai-navbar-02{
	width: min(calc(var(--mai-shell) + 30px), 100%);
	min-height: 110px;
	gap: 20px;
	padding: 12px 15px 12px 25px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 22%, transparent);
	border-radius: 999px;
	box-shadow: 0 20px 44px -24px color-mix(in srgb, var(--wp--preset--color--primary) 55%, transparent);
}

/* The Spa logo (bundled, or the site's own) is set a little larger. */
.materialai-header-spa .materialai-branding-02 .wp-block-site-logo img{
	max-height: 60px;
}

/* A floating pill has no edge to cut into, so the inverted corners go. */
.materialai-header-spa .materialai-navbar-02::before,
.materialai-header-spa .materialai-navbar-02::after{
	display: none;
}

/* Menu: one line, set to the right of the free space so it ends 20px
   short of the search disc, with small, thin chevrons. */
.materialai-header-spa .materialai-nav-02.wp-block-navigation{
	justify-content: flex-end;
}

.materialai-header-spa .materialai-navbar-02 .wp-block-navigation .wp-block-navigation__container{
	flex-wrap: nowrap;
	gap: 8px 31px;
}

.materialai-header-spa .materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content{
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 18px;
	font-weight: 600;
	white-space: nowrap;
}

.materialai-header-spa .materialai-navbar-02 .wp-block-navigation__submenu-icon{
	width: 11px;
	height: 11px;
	margin-left: 4px;
}

.materialai-header-spa .materialai-navbar-02 .wp-block-navigation__submenu-icon svg{
	display: none;
}

.materialai-header-spa .materialai-navbar-02 .wp-block-navigation__submenu-icon::before{
	content: "";
	display: block;
	width: 100%;
	height: 100%;
	background-color: currentColor;
	-webkit-mask: var(--mai-spa-chevron) center / contain no-repeat;
	mask: var(--mai-spa-chevron) center / contain no-repeat;
}

.materialai-header-spa .materialai-actions-02{
	gap: 10px;
}

/* Search and cart carry the comp's bold glyphs in place of core's icons. */
.materialai-header-spa .search-btn-02 .wp-block-search__button svg,
.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__icon{
	display: none;
}

.materialai-header-spa .search-btn-02 .wp-block-search__button::before,
.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__button::before{
	content: "";
	width: 21px;
	height: 21px;
	background-color: var(--wp--preset--color--light-color);
	-webkit-mask: var(--mai-spa-search) center / contain no-repeat;
	mask: var(--mai-spa-search) center / contain no-repeat;
}

.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__button::before{
	width: 23px;
	height: 23px;
	-webkit-mask-image: var(--mai-spa-cart);
	mask-image: var(--mai-spa-cart);
}

/* WooCommerce anchors the count to the icon's wrapper. With core's icon
   hidden that wrapper collapses to a point in the middle of the disc, which
   pushed the count out over Get Started, so the disc itself is made the
   anchor instead. */
.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__quantity-badge{
	position: static;
}

/* The count rides on the cart's top edge: a primary disc, ringed in white,
   always two digits ("01"; script.js pads it). */
.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__badge{
	top: -12px;
	right: 0;
	/* WooCommerce places the count with left/margin/transform of its own,
	   which would add to these offsets. */
	left: auto;
	margin: 0;
	transform: none;
	min-width: 25px;
	height: 25px;
	padding: 0 4px;
	border: 2px solid var(--white);
	/* WooCommerce writes its own badge colours inline from the block's
	   settings, so the comp's colours need !important to show. */
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--light-color) !important;
	font-size: 11px;
	letter-spacing: 0.3px;
}

/* Get Started: 200 x 55, Poppins, a white disc with a dark arrow. */
.materialai-header-spa .materialai-btn-started-02{
	--circle-bg: var(--white);
	--circle-color: var(--wp--preset--color--secondary);
}

.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link{
	padding: 0 58px 0 20px;
	border: 2px solid color-mix(in srgb, var(--wp--preset--color--primary) 88%, var(--wp--preset--color--secondary));
	font-family: var(--wp--preset--font-family--poppins);
	font-size: 20px !important;
	font-weight: 700;
}

.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link::before{
	right: 2px;
	width: 47px;
	height: 47px;
}

.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link::after{
	right: 16px;
}

/* ---------------------------------------------------------- spa — hero */

/* Full bleed: no page gutter, no rounded frame. */
.materialai-hero-spa.alignfull{
	margin-left: 0;
	margin-right: 0;
}

.materialai-hero-spa{
	border-radius: 0;
}

/* The hero runs up behind the whole header — top bar and navbar — so it is
   pulled up by the header's real height, which the script measures into
   --mai-header-h (the fallback covers a desktop header if it never runs).
   The copy then clears the header by the same amount. */
body:has(.materialai-header-spa) .materialai-hero-spa{
	margin-top: calc(-1 * var(--mai-header-h, 175px));
}

body:has(.materialai-header-spa) .materialai-hero-spa .materialai-hero2-slide{
	padding-top: calc(var(--mai-header-h, 175px) + var(--mai-spa-hero-gap, 2px));
}

/* Up to 1280px the strip spans nearly the whole window, as in the comp, and
   the photograph stops 40px short behind it. Wider, the strip is narrower
   than the window, so the photograph runs to the bottom. */
@media (min-width: 1025px) and (max-width: 1280px){

	:root{
		--mai-spa-photo-trim: 40px;
	}
}

/* The copy sits on the site container, like the sections below it. Where
   the window is barely wider than the container, the round arrows at the
   window's edges would reach the copy, so it is held 120px in from the
   window edge until the container itself clears them. Below 1025px Slider
   02's own padding already fits. */
@media (min-width: 1025px){

	.materialai-hero-spa .materialai-hero2-inner{
		padding-left: max(0px, calc(120px - (100vw - var(--mai-shell)) / 2));
		padding-right: max(0px, calc(120px - (100vw - var(--mai-shell)) / 2));
	}

	/* Rhythm measured from the comp: the copy sits closer under the
	   headline, and the buttons stand further apart. */
	.materialai-hero-spa .materialai-hero2-content > .materialai-hero2-text{
		margin-top: 16px;
	}

	.materialai-hero-spa .materialai-hero2-buttons{
		gap: 40px;
	}

	.materialai-hero-spa .materialai-hero2-content > .materialai-hero2-buttons{
		margin-top: 38px;
		/* Layout pins the left margin, so the comp's inset is padding. */
		padding-left: 16px;
	}

	.materialai-hero-spa .materialai-hero2-buttons .wp-block-button__link{
		padding-left: 22px;
	}

	/* The comp's hero is 950px tall on a 1920px screen, with the highlights
	   strip starting 95px below the buttons (Slider 02 leaves 170px). */
	body:has(.materialai-header-spa) .materialai-hero-spa .materialai-hero2-slide{
		min-height: clamp(640px, 54.7vw, 950px);
		padding-bottom: 126px;
	}
}

/* Crop matched to the comp: the photograph hangs from the top of the hero,
   57% across, and stops --mai-spa-photo-trim short of the bottom — that strip
   sits behind the highlights, on a pale fill of the primary colour. */
.materialai-hero-spa .materialai-hero2-slide{
	background-color: color-mix(in srgb, var(--wp--preset--color--primary) 8%, var(--white));
}

.materialai-hero-spa .materialai-hero2-slide .wp-block-cover__image-background{
	height: calc(100% - var(--mai-spa-photo-trim, 0px));
	object-position: 57% top;
}

/* The photograph is already pale on the left, so the wash is only a touch. */
.materialai-hero-spa .materialai-hero2-slide::before{
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--light-color) 35%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--light-color) 15%, transparent) 38%,
		transparent 55%
	);
}

.materialai-hero-spa .materialai-hero2-eyebrow{
	font-size: clamp(15px, 1.6vw, 22px);
	letter-spacing: 0;
}

.materialai-hero-spa .materialai-badge{
	gap: 12px;
	padding: 6px 24px 6px 6px;
	border: 3px solid var(--wp--preset--color--primary);
	background: var(--wp--preset--color--secondary);
	backdrop-filter: none;
	box-shadow: 0 0 0 4px color-mix(in srgb, var(--wp--preset--color--primary) 28%, transparent);
}

/* A solid rim replaces Slider 02's double hairline. */
.materialai-hero-spa .materialai-badge::before{
	display: none;
}

/* The comp's badge is 400 x 70 around a 52px lotus disc. */
@media (min-width: 1025px){

	.materialai-hero-spa .materialai-badge > .wp-block-icon:first-child{
		width: 52px;
		height: 52px;
	}
}

.materialai-hero-spa .materialai-hero2-title{
	font-size: clamp(38px, 5.4vw, 73px);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.5px;
}

/* The highlighted word is coloured, not boxed. */
.materialai-hero-spa .materialai-hero2-title mark{
	padding: 0;
	border-radius: 0;
	background: none;
}

.materialai-hero-spa .materialai-hero2-text{
	max-width: 720px;
	font-size: clamp(16px, 1.5vw, 20px);
	line-height: 1.7;
	opacity: 1;
}

/* The comp's hero buttons: Poppins, a 3px primary rim and two soft halos
   of the primary colour fading out around it; 200 x 55 on desktop, where
   the arrows are also a size up. Smaller screens keep Slider 02's sizes. */
.materialai-hero-spa .materialai-hero2-buttons .wp-block-button__link{
	font-family: var(--wp--preset--font-family--poppins);
	font-weight: 700;
}

.materialai-hero-spa .materialai-btn-ring-02 .wp-block-button__link{
	border: 3px solid var(--wp--preset--color--primary);
	outline: 0;
	box-shadow:
		0 0 0 6px color-mix(in srgb, var(--wp--preset--color--primary) 20%, transparent),
		0 0 0 12px color-mix(in srgb, var(--wp--preset--color--primary) 9%, transparent);
}

@media (min-width: 1025px){

	.materialai-hero-spa .materialai-hero2-buttons .wp-block-button__link{
		font-size: 20px;
	}

	.materialai-hero-spa .materialai-btn-ring-02 .wp-block-button__link{
		min-height: 55px;
		padding-right: 50px;
	}

	.materialai-hero-spa .materialai-btn-ring-02.materialai-btn-disc .wp-block-button__link{
		padding-right: 58px;
	}

	.materialai-hero-spa .materialai-btn-ring-02.materialai-btn-disc .wp-block-button__link::before{
		right: 1px;
		width: 47px;
		height: 47px;
	}

	.materialai-header-spa .materialai-btn-arrow .wp-block-button__link::after,
	.materialai-hero-spa .materialai-btn-arrow .wp-block-button__link::after{
		width: 20px;
		height: 20px;
	}

	.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link::after,
	.materialai-hero-spa .materialai-btn-ring-02.materialai-btn-disc .wp-block-button__link::after{
		right: 14px;
	}

	.materialai-hero-spa .materialai-btn-ring-02:not(.materialai-btn-disc) .wp-block-button__link::after{
		right: 20px;
	}
}

/* Learn More: white disc, dark arrow. */
.materialai-hero-spa .materialai-button-circle-white{
	--circle-color: var(--wp--preset--color--secondary);
}

/* --------------------------------------------------- spa — highlights */

/* Same slot as Slider 02's stats bar, so it overlaps the foot of the slide
   the same way; only the plinth strip is dropped. */
.materialai-hero-spa .materialai-hero2-statsbar{
	background: none;
}

.materialai-spa-features{
	display: grid;
	grid-template-columns: repeat(4, auto);
	justify-content: space-between;
	gap: 12px 16px;
	width: min(calc(var(--mai-shell) + 30px), 100%);
	padding: 16px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
	border-bottom: 0;
	border-radius: 24px 24px 0 0;
	background: color-mix(in srgb, var(--wp--preset--color--light-color) 88%, transparent);
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
}

.materialai-spa-features > *{
	margin: 0;
}

.materialai-spa-feature{
	gap: 11px;
	min-width: 0;
}

/* Dashed ring, a white gap, then a filled disc holding the illustration. The
   gap is the figure's padding; the disc is the image's own background, with
   the picture inset by the image's padding. The ring is drawn by ::before
   rather than the figure's own border, so it can turn without the picture
   turning with it. */
.materialai-spa-feature .materialai-spa-feature__icon{
	position: relative;
	flex: 0 0 auto;
	box-sizing: border-box;
	width: var(--mai-spa-icon, 88px);
	height: var(--mai-spa-icon, 88px);
	margin: 0;
	padding: 8px;
	border-radius: 50%;
}

.materialai-spa-feature .materialai-spa-feature__icon::before{
	content: "";
	position: absolute;
	inset: 0;
	border: 2px dashed var(--wp--preset--color--primary);
	border-radius: 50%;
	animation: mai-spa-ring 18s linear infinite;
	pointer-events: none;
}

.materialai-spa-feature .materialai-spa-feature__icon img{
	position: relative;
	box-sizing: border-box;
	display: block;
	width: 100%;
	height: 100%;
	padding: 14%;
	object-fit: contain;
	border-radius: 50%;
	background: color-mix(in srgb, var(--wp--preset--color--primary) 20%, var(--white));
	animation: mai-spa-float 4s ease-in-out infinite;
	transition: box-shadow .35s ease, transform .35s ease;
}

/* The four icons float out of step, so the strip breathes rather than bobs. */
.materialai-spa-feature:nth-child(2) .materialai-spa-feature__icon img{ animation-delay: -1s; }
.materialai-spa-feature:nth-child(3) .materialai-spa-feature__icon img{ animation-delay: -2s; }
.materialai-spa-feature:nth-child(4) .materialai-spa-feature__icon img{ animation-delay: -3s; }

/* Entrance: WOW reveals each item in turn, as the hero copy does. */
.materialai-spa-feature.animated{ animation-duration: .8s; }
.materialai-spa-feature:nth-child(2).animated{ animation-delay: .12s; }
.materialai-spa-feature:nth-child(3).animated{ animation-delay: .24s; }
.materialai-spa-feature:nth-child(4).animated{ animation-delay: .36s; }

/* Hover: the ring tightens to solid, the disc lifts and glows, and the
   title steps forward. */
.materialai-spa-feature:hover .materialai-spa-feature__icon::before{
	border-style: solid;
	transform: scale(1.06);
}

.materialai-spa-feature:hover .materialai-spa-feature__icon img{
	animation-play-state: paused;
	transform: translateY(-4px) scale(1.06);
	box-shadow: 0 10px 22px -8px color-mix(in srgb, var(--wp--preset--color--primary) 60%, transparent);
}

.materialai-spa-feature .materialai-spa-feature__title{
	transition: transform .35s ease;
}

.materialai-spa-feature:hover .materialai-spa-feature__title{
	transform: translateX(4px);
}

@keyframes mai-spa-ring{
	to{ rotate: 360deg; }
}

@keyframes mai-spa-float{
	0%, 100%{ translate: 0 0; }
	50%{ translate: 0 -5px; }
}

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

	.materialai-spa-feature .materialai-spa-feature__icon::before,
	.materialai-spa-feature .materialai-spa-feature__icon img{
		animation: none;
	}

	.materialai-spa-feature .materialai-spa-feature__icon img,
	.materialai-spa-feature .materialai-spa-feature__title{
		transition: none;
	}

	.materialai-spa-feature.wow,
	.materialai-spa-feature.wow.animated{
		animation: none !important;
		visibility: visible !important;
	}
}

.materialai-spa-feature__content > *{
	margin: 0;
}

.materialai-spa-feature .materialai-spa-feature__title{
	font-size: clamp(17px, 1.6vw, 19px);
	font-weight: 700;
	line-height: 1.25;
}

.materialai-spa-feature .materialai-spa-feature__text{
	font-size: clamp(15px, 1.33vw, 16px);
	line-height: 1.5;
}

/* ------------------------------------------------------- spa — arrows */

/* Round discs inside the hero on wider screens. Below 768px Slider 02's own
   phone arrows (a pair in the bottom corner) already match the comp. */
@media (min-width: 768px){

	.materialai-hero-spa .slider-2 .owl-nav button.owl-prev,
	.materialai-hero-spa .slider-2 .owl-nav button.owl-next{
		width: 60px;
		height: 60px;
		border-radius: 50%;
		box-shadow: 0 10px 24px -10px color-mix(in srgb, var(--wp--preset--color--secondary) 45%, transparent);
	}

	/* Centred on the part of the photo actually in view: below the header,
	   above the highlights strip, as in the comp. */
	.materialai-hero-spa .slider-2 .owl-nav button.owl-prev,
	.materialai-hero-spa .slider-2 .owl-nav button.owl-next{
		top: calc(50% + var(--mai-header-h, 175px) / 2 - 55px);
	}

	/* 230px outside the container on a wide screen, as in the comp, and
	   never closer than 20px to the window edge. */
	.materialai-hero-spa .slider-2 .owl-nav button.owl-prev{
		left: max(20px, 50% - var(--mai-shell) / 2 - 231px);
	}

	.materialai-hero-spa .slider-2 .owl-nav button.owl-next{
		right: max(20px, 50% - var(--mai-shell) / 2 - 229px);
	}

	.materialai-hero-spa .slider-2 .owl-nav button.owl-prev::before,
	.materialai-hero-spa .slider-2 .owl-nav button.owl-next::before{
		width: 24px;
		height: 24px;
	}

	.materialai-hero-spa .slider-2 .owl-nav button::after{
		display: none;
	}
}

/* The comp's 80px discs, where the copy has room for them. */
@media (min-width: 1025px){

	.materialai-hero-spa .slider-2 .owl-nav button.owl-prev,
	.materialai-hero-spa .slider-2 .owl-nav button.owl-next{
		width: 80px;
		height: 80px;
	}
}

/* Both arrows rest alike — white disc, dark arrow — and fill with the
   primary colour, the arrow turning white, on hover or keyboard focus. */
.materialai-hero-spa .slider-2 .owl-nav button.owl-prev,
.materialai-hero-spa .slider-2 .owl-nav button.owl-next{
	transition: background-color .3s ease, transform .3s ease;
}

.materialai-hero-spa .slider-2 .owl-nav button.owl-prev:hover,
.materialai-hero-spa .slider-2 .owl-nav button.owl-next:hover,
.materialai-hero-spa .slider-2 .owl-nav button.owl-prev:focus-visible,
.materialai-hero-spa .slider-2 .owl-nav button.owl-next:focus-visible{
	--arrow-color: var(--white);
	background: var(--wp--preset--color--primary) !important;
}

/* --------------------------------------------------- spa — responsive */

/* Header 02 stands its call to action down in this band to keep the menu on
   one line. The Spa comp keeps Get Started here, so it stays and the menu
   tightens instead. */
@media (min-width: 1025px) and (max-width: 1279px){

	.materialai-header-spa .materialai-navbar-02 .wp-block-buttons{
		display: flex;
	}

	.materialai-header-spa .materialai-navbar-02 .wp-block-navigation{
		gap: 8px 20px;
	}

	.materialai-header-spa .materialai-actions-02{
		gap: 8px;
	}

	/* Logo, menu and all three actions share one line here, so each gives
	   a little: the menu's type and spacing, the logo, the discs and the
	   call to action. */
	.materialai-header-spa .materialai-navbar-02,
	.materialai-sticky-header .materialai-header-spa.is-stuck .materialai-navbar-02{
		gap: 14px;
		padding-left: 18px;
		padding-right: 10px;
	}

	.materialai-header-spa .materialai-branding-02 .wp-block-site-logo img{
		max-height: 46px;
	}

	.materialai-header-spa .materialai-navbar-02 .wp-block-navigation .wp-block-navigation__container{
		gap: 8px 16px;
	}

	.materialai-header-spa .materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content{
		font-size: 15px;
	}

	.materialai-header-spa .search-btn-02 .wp-block-search__button,
	.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__button{
		width: 46px;
		height: 46px;
		min-width: 46px;
	}

	.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link{
		min-height: 46px;
		padding: 0 50px 0 16px;
		font-size: 16px !important;
	}

	.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link::before{
		width: 38px;
		height: 38px;
	}

	.materialai-header-spa .materialai-btn-started-02 .wp-block-button__link::after{
		right: 12px;
		width: 16px;
		height: 16px;
	}
}

/* Each highlight keeps to one line on desktop, as in the comp. */
@media (min-width: 1025px){

	.materialai-spa-feature__content > *{
		white-space: nowrap;
	}
}

@media (max-width: 1024px){

	:root{
		--mai-spa-hero-gap: 40px;
	}

	/* The copy runs full width here, so the wash covers the whole slide. */
	.materialai-hero-spa .materialai-hero2-slide::before{
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--light-color) 80%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--light-color) 62%, transparent) 100%
		);
	}

	/* The strip flows below the slide at this width (as Slider 02's does), so
	   it becomes a free-standing card in two columns. */
	.materialai-hero-spa .materialai-hero2-statsbar{
		margin-top: 20px;
	}

	.materialai-spa-features{
		grid-template-columns: repeat(2, minmax(0, 1fr));
		gap: 18px;
		border-bottom: 1px solid color-mix(in srgb, var(--wp--preset--color--primary) 35%, transparent);
		border-radius: 24px;
	}
}

@media (max-width: 767px){

	:root{
		--mai-spa-hero-gap: 26px;
		--mai-spa-nav-gap: 12px;
	}
}

@media (max-width: 600px){

	.materialai-spa-features{
		grid-template-columns: 1fr;
		padding: 16px 18px;
	}

	:root{
		--mai-spa-icon: 68px;
	}
}

/* ------------------------------------------- spa — tablet & phone sizes */

/* Between the overlay menu and desktop the menu toggle sits at the end of
   the bar, after search, cart and Get Started, as it does on phones. The
   round arrows ride at the window edges here, so the copy is held clear of
   them. */
@media (min-width: 768px) and (max-width: 1024px){

	.materialai-header-spa .materialai-nav-02{
		order: 3;
		flex: 0 0 auto;
	}

	.materialai-header-spa .materialai-actions-02{
		margin-left: auto;
	}

	.materialai-hero-spa .materialai-hero2-inner{
		padding-inline: 90px;
	}
}

@media (max-width: 767px){

	/* Top bar: smaller type and corners, so the promo fits in two lines. */
	.materialai-header-spa .materialai-topbar-02__gutter > .wp-block-group{
		padding-block: 8px !important;
		border-bottom-left-radius: 24px !important;
		border-bottom-right-radius: 24px !important;
	}

	.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__row{
		width: calc(100% - 24px);
		min-height: 0;
	}

	.materialai-header-spa .materialai-topbar-02 p{
		font-size: 13px !important;
		line-height: 1.45;
	}

	.materialai-header-spa .materialai-topbar-02 .materialai-topbar-02__tag{
		padding: 0 7px !important;
		font-size: 11px !important;
		line-height: 20px;
	}

	.materialai-header-spa .materialai-topbar-02__promo{
		flex-wrap: nowrap;
		align-items: flex-start;
		gap: 8px;
	}

	.materialai-header-spa .materialai-topbar-02__copy{
		flex-wrap: wrap;
		gap: 0 6px;
	}

	.materialai-header-spa .materialai-topbar-02__icon--arrow{
		--mai-spa-glyph-w: 13px;
	}

	/* Navbar: a slimmer pill whose logo keeps its size. */
	.materialai-header-spa .materialai-navbar-02,
	.materialai-sticky-header .materialai-header-spa.is-stuck .materialai-navbar-02{
		min-height: 72px;
		gap: 10px;
		padding: 8px 10px 8px 18px;
	}

	.materialai-header-spa .materialai-branding-02{
		flex: 1 1 auto;
		min-width: 0;
	}

	.materialai-header-spa .materialai-branding-02 .wp-block-site-logo img{
		width: auto;
		max-width: 100%;
		max-height: 44px;
	}

	.materialai-header-spa .materialai-actions-02{
		gap: 8px;
	}

	.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__button{
		width: 46px;
		height: 46px;
		min-width: 46px;
	}

	.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__button::before{
		width: 20px;
		height: 20px;
	}

	.materialai-header-spa .materialai-minicart-02 .wc-block-mini-cart__badge{
		top: -8px;
		right: -4px;
		min-width: 22px;
		height: 22px;
		font-size: 10px;
	}

	.materialai-header-spa .materialai-nav-02 .wp-block-navigation__responsive-container-open{
		width: 46px;
		height: 46px;
		background-size: 22px 2px, 16px 2px, 22px 2px;
		background-position: 12px 15px, 12px 22px, 12px 29px;
	}

	/* Hero badge: one line on a phone. */
	.materialai-hero-spa .materialai-badge{
		gap: 10px;
		padding: 5px 16px 5px 5px;
	}

	.materialai-hero-spa .materialai-badge > .wp-block-icon:first-child{
		width: 36px;
		height: 36px;
	}

	.materialai-hero-spa .materialai-hero2-eyebrow{
		font-size: clamp(12px, 3.6vw, 15px);
		white-space: nowrap;
	}
}

/* Narrow phones: the headline steps down so "Refresh Your Mind" keeps to
   one line at 320px. */
@media (max-width: 480px){

	.materialai-hero-spa .materialai-hero2-title{
		font-size: clamp(28px, 9vw, 38px);
	}

	.materialai-hero-spa .materialai-hero2-text{
		font-size: 15px;
	}
}

/* ==========================================================================
   Design variant 04 — Material Energy

   Not a fourth copy of the header and hero. Energy is the Spa layout above —
   floating pill navbar, hero running up behind the header, round arrows,
   highlights strip — so its header carries .materialai-header-spa as well as
   .materialai-header-energy (added by Appearance -> Site Style), and its hero
   (patterns/slider-04.php, markup shared with Slider 03 through
   inc/hero-float.php) carries .materialai-hero-spa as well as
   .materialai-hero-energy. Everything in variants 02 and 03 still applies;
   this section only states what the Energy comp changes:
     - a see-through top bar over the photo, parted from the navbar by a rule
     - a glass navbar ringed in the primary colour, its logo on a dark panel
       that ends in a lightning bolt
     - a dark photograph with light copy, and a primary call to action
     - a glass highlights strip with white discs
   Colours stay palette-driven; the Energy palette is styles/material-energy.json.
   ========================================================================== */

.materialai-header-energy,
.materialai-hero-energy{
	/* The lightning bolt that ends the logo panel, measured from the comp
	   (59 x 108 inside a 110px pill). It is a mask, so it takes the primary
	   colour; the dark panel is clipped to the bolt's left edge. */
	--mai-energy-bolt: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 59 108' preserveAspectRatio='none'%3E%3Cpath d='M12 0h28l-10 27 29 1-40 80 9-53H0z'/%3E%3C/svg%3E");
	--mai-energy-nav-h: 110px;
	--mai-energy-bolt-w: calc((var(--mai-energy-nav-h) - 4px) * 59 / 108);
	/* See-through surfaces over the photograph. */
	--mai-energy-glass: color-mix(in srgb, var(--wp--preset--color--light-color) 20%, transparent);
	--mai-energy-rule: color-mix(in srgb, var(--wp--preset--color--light-color) 22%, transparent);
	--mai-spa-nav-gap: 30px;
}

/* On pages without the Energy hero there is no photograph behind the header,
   so the header brings its own dark ground for its light type. */
body:not(:has(.materialai-hero-energy)) .materialai-header-energy{
	background: var(--wp--preset--color--secondary);
}

/* ---------------------------------------------------- energy — top bar */

/* No coloured strip: the bar is the photograph itself, 70px tall, with a
   hairline across the whole window underneath it. */
.materialai-header-energy .materialai-topbar-02{
	border-bottom: 1px solid var(--mai-energy-rule);
}

.materialai-header-energy .materialai-topbar-02__gutter > .wp-block-group{
	max-width: none;
	border-radius: 0 !important;
}

.materialai-header-energy .materialai-topbar-02__gutter > .has-secondary-background-color{
	background-color: transparent !important;
}

.materialai-header-energy .materialai-topbar-02 .materialai-topbar-02__row{
	min-height: 70px;
}

/* The comp keeps the offer to one line and leads the right-hand side with
   Live Chat: Header 02's "Learn More" link and phone number stand down. */
.materialai-header-energy .materialai-topbar-02__more,
.materialai-header-energy .materialai-topbar-02__meta > .materialai-topbar-02__item:first-child{
	display: none;
}

.materialai-header-energy .materialai-topbar-02__meta > .materialai-topbar-02__item:nth-child(2){
	margin-left: 0;
	padding-left: 0;
}

.materialai-header-energy .materialai-topbar-02__meta > .materialai-topbar-02__item:nth-child(2)::before{
	display: none;
}

/* "NEW": a primary pill with dark type. Core's preset classes are
   !important, so the repaint is too; a colour picked in the editor for the
   paragraph still wins, as it changes the class. */
.materialai-header-energy .materialai-topbar-02 .materialai-topbar-02__tag.has-light-color-color{
	color: var(--wp--preset--color--secondary) !important;
	font-weight: 700;
}

.materialai-header-energy .materialai-topbar-02__item:hover a{
	color: var(--wp--preset--color--primary);
}

/* ----------------------------------------------------- energy — navbar */

/* Glass pill ringed in the primary colour. The logo panel reaches its left
   end, so the pill keeps its padding on the right only. */
.materialai-header-energy .materialai-navbar-02,
.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-navbar-02{
	min-height: var(--mai-energy-nav-h);
	gap: 4px;
	padding: 0 15px 0 0;
	border: 2px solid var(--wp--preset--color--primary);
	background: transparent;
	box-shadow: 0 20px 44px -26px color-mix(in srgb, var(--wp--preset--color--secondary) 80%, transparent);
	isolation: isolate;
}

/* The glass is a layer behind the bar, not the bar itself: a backdrop-filter
   on the bar would make it the containing block of the phone menu, which is
   position:fixed inside it, and the menu would open inside the pill. Spa
   hides this pseudo-element (it carries Header 02's inverted corners), so it
   is reset in full here. */
.materialai-header-energy .materialai-navbar-02::before{
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	z-index: -1;
	width: auto;
	height: auto;
	border-radius: inherit;
	background: var(--mai-energy-glass);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
}

/* Once pinned over the page the glass would lose its photograph, so it is
   filled in. The dark discs and call to action would then vanish into the
   fill, so while pinned they change: search and cart become light-tinted
   discs, and Get a Free Quote a white pill with a primary disc. Hover still
   fills each with the primary colour. */
.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-navbar-02::before{
	background: color-mix(in srgb, var(--wp--preset--color--secondary) 94%, transparent);
}

.materialai-sticky-header .materialai-header-energy.is-stuck .search-btn-02 .wp-block-search__button:not(:hover):not(:focus),
.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-minicart-02 .wc-block-mini-cart__button:not(:hover):not(:focus){
	background: color-mix(in srgb, var(--wp--preset--color--light-color) 16%, var(--wp--preset--color--secondary));
}

.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-minicart-02 .wc-block-mini-cart__badge{
	box-shadow: 0 0 0 2px var(--wp--preset--color--secondary);
}

.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-btn-started-02 .wp-block-button__link:not(:hover):not(:focus-visible){
	--circle-bg: var(--wp--preset--color--primary);
	--circle-color: var(--wp--preset--color--secondary);
	background-color: var(--wp--preset--color--light-color) !important;
	color: var(--wp--preset--color--secondary) !important;
	border-color: var(--wp--preset--color--light-color);
}

/* The logo panel: dark, the pill's full height, ending in the bolt. */
.materialai-header-energy .materialai-branding-02{
	position: relative;
	z-index: 1;
	align-self: stretch;
	display: flex;
	align-items: center;
	/* The logo keeps 10px clear of the bolt's widest point. */
	padding: 0 calc(var(--mai-energy-bolt-w) + 10px) 0 15px;
}

.materialai-header-energy .materialai-branding-02::before,
.materialai-header-energy .materialai-branding-02::after{
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	z-index: -1;
	pointer-events: none;
}

/* The panel is clipped along the bolt's left edge, from its top-left corner
   down to the notch and on to the tip. */
.materialai-header-energy .materialai-branding-02::before{
	left: 0;
	right: 0;
	border-radius: 999px 0 0 999px;
	background: var(--wp--preset--color--secondary);
	clip-path: polygon(
		0 0,
		calc(100% - var(--mai-energy-bolt-w) * 47 / 59) 0,
		calc(100% - var(--mai-energy-bolt-w)) 50.9%,
		calc(100% - var(--mai-energy-bolt-w) * 31 / 59) 50.9%,
		calc(100% - var(--mai-energy-bolt-w) * 40 / 59) 100%,
		0 100%
	);
}

.materialai-header-energy .materialai-branding-02::after{
	right: 0;
	width: var(--mai-energy-bolt-w);
	background: var(--wp--preset--color--primary);
	-webkit-mask: var(--mai-energy-bolt) center / 100% 100% no-repeat;
	mask: var(--mai-energy-bolt) center / 100% 100% no-repeat;
}

/* The bundled logo is shown at its own size (244 x 53 on the comp). */
.materialai-header-energy .materialai-branding-02 .wp-block-site-logo img{
	max-height: 53px;
}

/* A site title standing in for a logo sits on the dark panel. */
.materialai-header-energy .materialai-branding-02 .site-branding-fallback .wp-block-site-title a{
	color: var(--wp--preset--color--light-color);
}

.materialai-header-energy .materialai-branding-02 .site-branding-fallback .wp-block-site-tagline{
	color: color-mix(in srgb, var(--wp--preset--color--light-color) 75%, transparent);
}

/* Menu: light type straight after the bolt. Only the top level is
   repainted; drop-down panels keep Header 02's white card. */
.materialai-header-energy .materialai-nav-02.wp-block-navigation{
	justify-content: flex-start;
}

.materialai-header-energy .materialai-navbar-02 .wp-block-navigation .wp-block-navigation__container{
	gap: 5px 25px;
}

/* "Top level" is any item that is not inside a drop-down: a menu built in
   the editor puts its items straight in the container, but the automatic
   page list WordPress shows until a menu is made nests them in a list of
   its own, which a child selector would miss. */
.materialai-header-energy .materialai-navbar-02 .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *),
.materialai-header-energy .materialai-navbar-02 .wp-block-navigation__submenu-icon:not(.wp-block-navigation__submenu-container *){
	color: var(--wp--preset--color--light-color);
}

/* Page titles run longer than a built menu's labels, so the page list is
   set a little smaller and closer. Each title keeps to one line; if a site
   has more pages than the bar can hold, the list wraps inside the bar
   rather than pushing the buttons out of it. */
.materialai-header-energy .materialai-navbar-02 .wp-block-navigation .wp-block-page-list{
	gap: 0 14px;
}

.materialai-header-energy .materialai-navbar-02 .wp-block-navigation .wp-block-page-list .wp-block-pages-list__item__link{
	font-size: 14.5px;
	white-space: nowrap;
}

.materialai-header-energy .materialai-nav-02{
	min-width: 0;
}

.materialai-header-energy .materialai-navbar-02 .wp-block-navigation .wp-block-navigation-item__content{
	font-size: 16px;
}

.materialai-header-energy .materialai-navbar-02 .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *):hover,
.materialai-header-energy .materialai-navbar-02 .current-menu-item > .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *),
.materialai-header-energy .materialai-navbar-02 .current_page_item > .wp-block-navigation-item__content:not(.wp-block-navigation__submenu-container *){
	color: var(--wp--preset--color--primary);
}

/* The search and cart glyphs sit dead centre in their discs at the comp's
   size, whatever else WooCommerce puts inside the cart button. */
.materialai-header-energy .search-btn-02 .wp-block-search__button,
.materialai-header-energy .materialai-minicart-02 .wc-block-mini-cart__button{
	position: relative;
}

.materialai-header-energy .search-btn-02 .wp-block-search__button::before,
.materialai-header-energy .materialai-minicart-02 .wc-block-mini-cart__button::before{
	position: absolute;
	top: 50%;
	left: 50%;
	width: 20px;
	height: 20px;
	translate: -50% -50%;
}

/* Search and cart: dark discs with light glyphs that fill with the primary
   colour, the glyph turning dark, on hover or focus. */
.materialai-header-energy .search-btn-02 .wp-block-search__button{
	background: var(--wp--preset--color--secondary);
}

.materialai-header-energy .search-btn-02 .wp-block-search__button:hover,
.materialai-header-energy .search-btn-02 .wp-block-search__button:focus{
	background: var(--wp--preset--color--primary);
}

.materialai-header-energy .search-btn-02 .wp-block-search__button:hover::before,
.materialai-header-energy .search-btn-02 .wp-block-search__button:focus::before,
.materialai-header-energy .materialai-minicart-02 .wc-block-mini-cart__button:hover::before,
.materialai-header-energy .materialai-minicart-02 .wc-block-mini-cart__button:focus::before{
	background-color: var(--wp--preset--color--secondary);
}

/* The count: a small plain primary disc with dark type on the cart's
   top-right edge. */
.materialai-header-energy .materialai-minicart-02 .wc-block-mini-cart__badge{
	top: -6px;
	right: -4px;
	min-width: 20px;
	height: 20px;
	padding: 0 3px;
	border: 0;
	box-shadow: none;
	color: var(--wp--preset--color--secondary) !important;
	font-size: 10px;
}

/* Get a Free Quote: a dark pill with a white disc. On hover or focus it
   fills with the primary colour, the disc melts into it and the type and
   arrow turn dark — the same response as the hero buttons. */
.materialai-header-energy .materialai-btn-started-02 .wp-block-button__link.has-primary-background-color{
	background-color: var(--wp--preset--color--secondary) !important;
}

.materialai-header-energy .materialai-btn-started-02 .wp-block-button__link{
	border-color: var(--wp--preset--color--secondary);
}

.materialai-header-energy .materialai-btn-started-02 .wp-block-button__link:hover,
.materialai-header-energy .materialai-btn-started-02 .wp-block-button__link:focus-visible{
	--circle-bg: var(--wp--preset--color--primary);
	--circle-color: var(--wp--preset--color--secondary);
	/* Core's preset colour classes are !important. */
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--secondary) !important;
	border-color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------ energy — breadcrumb */

/* Lime on white would barely read, so the home disc is the primary colour
   with a dark house, like the header's discs; a crumb filled with the
   primary colour on hover takes dark type. */
body:has(.materialai-header-energy) .mai-breadcrumb{
	--mai-home-disc: var(--wp--preset--color--primary);
	--mai-home-ink: var(--wp--preset--color--secondary);
}

body:has(.materialai-header-energy) .mai-breadcrumb__crumb:hover .mai-breadcrumb__label,
body:has(.materialai-header-energy) .mai-breadcrumb__crumb:focus-within .mai-breadcrumb__label,
body:has(.materialai-header-energy) .mai-breadcrumb__crumb:hover .mai-breadcrumb__label a,
body:has(.materialai-header-energy) .mai-breadcrumb__crumb:focus-within .mai-breadcrumb__label a{
	color: var(--wp--preset--color--secondary);
	text-shadow: none;
}

/* ------------------------------------------------------- energy — hero */

/* The whole photograph, 1100px tall on a 1920px screen; no pale fill. */
.materialai-hero-energy .materialai-hero2-slide{
	background-color: var(--wp--preset--color--secondary);
}

.materialai-hero-energy .materialai-hero2-slide .wp-block-cover__image-background{
	height: 100%;
	object-position: center 40%;
}

/* A dark wash on the left keeps the light copy readable on any photograph. */
.materialai-hero-energy .materialai-hero2-slide::before{
	background: linear-gradient(
		90deg,
		color-mix(in srgb, var(--wp--preset--color--secondary) 42%, transparent) 0%,
		color-mix(in srgb, var(--wp--preset--color--secondary) 22%, transparent) 40%,
		transparent 62%
	);
}

@media (min-width: 1025px){

	body:has(.materialai-header-spa) .materialai-hero-energy .materialai-hero2-slide{
		/* Cover adds 24px under its min-height; 1100px in all on the comp. */
		min-height: clamp(676px, calc(57.3vw - 24px), 1076px);
		padding-bottom: 220px;
	}
}

/* Badge: a dark pill with a primary hairline, the bolt bare beside the
   label (no disc). */
.materialai-hero-energy .materialai-badge{
	gap: 10px;
	padding: 9px 18px 9px 22px;
	border-width: 1px;
	box-shadow: none;
}

.materialai-hero-energy .materialai-badge > .wp-block-icon:first-child,
.materialai-hero-energy .materialai-badge > .wp-block-icon:first-child:first-child{
	width: 22px;
	height: 26px;
	padding: 0;
	border-radius: 0;
	background: none;
}

.materialai-hero-energy .materialai-hero2-eyebrow{
	font-size: clamp(14px, 1.05vw, 20px);
	font-weight: 600;
}

.materialai-hero-energy .materialai-hero2-title{
	font-weight: 700;
	line-height: 1.22;
}

.materialai-hero-energy .materialai-hero2-text{
	max-width: 580px;
	font-size: clamp(16px, 1.15vw, 22px);
	line-height: 1.55;
}

/* Buttons: a dark 3px rim and no halo ring. Both rest as a
   dark pill with a primary disc; on hover or focus the pill fills with the
   primary colour, the disc melts into it and the arrow stays dark. */
.materialai-hero-energy .materialai-btn-ring-02 .wp-block-button__link{
	border-color: var(--wp--preset--color--secondary);
	/* No static halo: only the ripple below surrounds the pill. */
	box-shadow: none;
	outline: 0;
}

.materialai-hero-energy .materialai-hero2-buttons .wp-block-button__link{
	--arrow-color: var(--wp--preset--color--secondary);
	--circle-color: var(--wp--preset--color--secondary);
}

.materialai-hero-energy .materialai-hero2-buttons .wp-block-button__link:hover,
.materialai-hero-energy .materialai-hero2-buttons .wp-block-button__link:focus-visible{
	/* Core's preset colour classes are !important. */
	background-color: var(--wp--preset--color--primary) !important;
	color: var(--wp--preset--color--secondary) !important;
	border-color: var(--wp--preset--color--secondary);
}

/* Ripple: two rings keep washing out from the halo, half a beat apart, so
   the calls to action breathe. They are the button wrapper's own pseudo
   elements — the link's are the disc and the arrow — drawn as a hairline
   pill that grows outward by its inset, which keeps the pill's round ends
   where a scale would squash them. On hover or focus they speed up and take
   the primary colour. */
.materialai-hero-energy .materialai-hero2-buttons .wp-block-button{
	position: relative;
	--mai-ripple: color-mix(in srgb, var(--wp--preset--color--light-color) 70%, transparent);
	--mai-ripple-speed: 2.4s;
}

.materialai-hero-energy .materialai-hero2-buttons .wp-block-button::before,
.materialai-hero-energy .materialai-hero2-buttons .wp-block-button::after{
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	border: 2px solid var(--mai-ripple);
	border-radius: 999px;
	pointer-events: none;
	animation: mai-energy-ripple var(--mai-ripple-speed) cubic-bezier(.25, .6, .35, 1) infinite;
}

.materialai-hero-energy .materialai-hero2-buttons .wp-block-button::after{
	animation-delay: calc(var(--mai-ripple-speed) / -2);
}

/* The pill itself stays above its rings. */
.materialai-hero-energy .materialai-hero2-buttons .wp-block-button__link{
	position: relative;
	z-index: 1;
}

.materialai-hero-energy .materialai-hero2-buttons .wp-block-button:hover,
.materialai-hero-energy .materialai-hero2-buttons .wp-block-button:focus-within{
	--mai-ripple: var(--wp--preset--color--primary);
	--mai-ripple-speed: 1.6s;
}

@keyframes mai-energy-ripple{
	0%{
		inset: 0;
		opacity: 1;
	}
	100%{
		inset: -22px;
		opacity: 0;
	}
}

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

	.materialai-hero-energy .materialai-hero2-buttons .wp-block-button::before,
	.materialai-hero-energy .materialai-hero2-buttons .wp-block-button::after{
		animation: none;
		display: none;
	}
}

/* ----------------------------------------------------- energy — arrows */

/* Both rest white with a dark arrow and fill with the primary colour on
   hover or focus, the arrow staying dark. Centred on the photograph between
   the navbar and the strip. */
@media (min-width: 768px){

	.materialai-hero-energy .slider-2 .owl-nav button.owl-prev,
	.materialai-hero-energy .slider-2 .owl-nav button.owl-next{
		top: calc(50% + var(--mai-header-h, 175px) / 2 - 101px);
	}
}

.materialai-hero-energy .slider-2 .owl-nav button.owl-prev:hover,
.materialai-hero-energy .slider-2 .owl-nav button.owl-next:hover,
.materialai-hero-energy .slider-2 .owl-nav button.owl-prev:focus-visible,
.materialai-hero-energy .slider-2 .owl-nav button.owl-next:focus-visible{
	--arrow-color: var(--wp--preset--color--secondary);
}

/* ------------------------------------------------- energy — highlights */

/* A glass panel 30px above the foot of the hero, rounded all round, with
   hairlines between the four items. */
.materialai-hero-energy .materialai-hero2-statsbar{
	padding-bottom: 30px;
}

.materialai-hero-energy .materialai-spa-features{
	column-gap: 60px;
	padding: 20px 15px;
	border: 1px solid var(--mai-energy-rule);
	border-radius: 12px;
	background: color-mix(in srgb, var(--wp--preset--color--light-color) 14%, transparent);
	-webkit-backdrop-filter: blur(14px);
	backdrop-filter: blur(14px);
}

.materialai-hero-energy .materialai-spa-feature{
	position: relative;
	gap: 10px;
}

.materialai-hero-energy .materialai-spa-feature + .materialai-spa-feature::before{
	content: "";
	position: absolute;
	top: 50%;
	left: -30px;
	width: 1px;
	height: 50px;
	translate: 0 -50%;
	background: color-mix(in srgb, var(--wp--preset--color--light-color) 70%, transparent);
}

/* White discs, no dashed ring. */
.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon{
	--mai-spa-icon: 100px;
	padding: 0;
}

.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon::before{
	display: none;
}

.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon img{
	padding: 22%;
	background: var(--white);
}

.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__title{
	font-size: clamp(17px, 1.15vw, 22px);
}

.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__text{
	font-size: clamp(14px, 0.85vw, 16px);
}

/* ------------------------------------------------- energy — responsive */

/* Logo, menu, search, cart and the call to action share one line: each
   gives a little until the overlay menu takes over at 1024px. */
@media (min-width: 1025px) and (max-width: 1279px){

	.materialai-header-energy,
	.materialai-hero-energy{
		--mai-energy-nav-h: 96px;
	}

	.materialai-header-energy .materialai-navbar-02,
	.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-navbar-02{
		padding: 0 10px 0 0;
	}

	.materialai-header-energy .materialai-branding-02{
		padding-left: 12px;
	}

	.materialai-header-energy .materialai-branding-02 .wp-block-site-logo img{
		max-height: 38px;
	}

	.materialai-header-energy .materialai-navbar-02 .wp-block-navigation .wp-block-navigation__container{
		gap: 8px 14px;
	}
}

@media (min-width: 1025px) and (max-width: 1440px){

	.materialai-hero-energy .materialai-spa-features{
		column-gap: 32px;
	}

	.materialai-hero-energy .materialai-spa-feature + .materialai-spa-feature::before{
		left: -16px;
	}

	.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon{
		--mai-spa-icon: 80px;
	}
}

@media (max-width: 1024px){

	/* The copy runs full width, so the wash covers the whole slide. */
	.materialai-hero-energy .materialai-hero2-slide::before{
		background: linear-gradient(
			90deg,
			color-mix(in srgb, var(--wp--preset--color--secondary) 62%, transparent) 0%,
			color-mix(in srgb, var(--wp--preset--color--secondary) 40%, transparent) 100%
		);
	}

	/* The strip leaves the photograph here and stands on the page as a card,
	   so it takes the dark panel colour instead of glass. */
	.materialai-hero-energy .materialai-hero2-statsbar{
		padding-bottom: 0;
	}

	.materialai-hero-energy .materialai-spa-features{
		border-color: transparent;
		background: var(--wp--preset--color--secondary);
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}

	.materialai-hero-energy .materialai-spa-feature + .materialai-spa-feature::before{
		display: none;
	}

	.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon{
		--mai-spa-icon: 76px;
	}
}

/* The menu toggle is a primary tile, so its rules are drawn dark. */
.materialai-header-energy .materialai-nav-02 .wp-block-navigation__responsive-container-open{
	color: var(--wp--preset--color--secondary);
}

.materialai-header-energy .materialai-nav-02 .wp-block-navigation__responsive-container-open:hover{
	color: var(--wp--preset--color--primary);
}

/* Tablet: the toggle joins logo, search, cart and the call to action on one
   line, so the logo steps down; on a narrow tablet the call to action — which
   the hero repeats — stands down so nothing is pushed out of the pill. */
@media (max-width: 1024px){

	.materialai-header-energy .materialai-branding-02 .wp-block-site-logo img{
		max-height: 44px;
	}
}

@media (max-width: 860px){

	.materialai-header-energy .materialai-navbar-02 .wp-block-buttons{
		display: none;
	}
}

@media (max-width: 767px){

	.materialai-header-energy,
	.materialai-hero-energy{
		--mai-energy-nav-h: 72px;
		--mai-spa-nav-gap: 14px;
	}

	.materialai-header-energy .materialai-topbar-02 .materialai-topbar-02__row{
		min-height: 0;
	}

	.materialai-header-energy .materialai-navbar-02,
	.materialai-sticky-header .materialai-header-energy.is-stuck .materialai-navbar-02{
		gap: 8px;
		padding: 0 8px 0 0;
	}

	.materialai-header-energy .materialai-branding-02{
		padding-left: 12px;
	}

	.materialai-header-energy .materialai-branding-02 .wp-block-site-logo img{
		max-height: 34px;
	}

	.materialai-hero-energy .materialai-badge{
		padding: 7px 14px 7px 14px;
	}

	.materialai-hero-energy .materialai-badge > .wp-block-icon:first-child,
	.materialai-hero-energy .materialai-badge > .wp-block-icon:first-child:first-child{
		width: 16px;
		height: 20px;
	}
}

@media (max-width: 600px){

	.materialai-hero-energy .materialai-spa-feature .materialai-spa-feature__icon{
		--mai-spa-icon: 64px;
	}
}

/* Narrow phones: the badge's label is long and set in capitals, so it may
   take two lines rather than run out of the window. */
@media (max-width: 480px){

	.materialai-hero-energy .materialai-hero2-eyebrow{
		white-space: normal;
		line-height: 1.35;
	}

	.materialai-hero-energy .materialai-badge{
		border-radius: 24px;
	}
}