/*
 * APS Theme: the only front-end stylesheet.
 *
 * The look is carried over from the current site and measured on it: the promo bar, the floating pill header
 * (82px tall, 55px radius, 1140px wide), the mobile drawer and the footer. Heights matter: most Elementor pages
 * pull their hero section up by -98px (-140px on tablets) to slide under the header, so the header block must
 * keep the same height as before.
 *
 * Tokens come from theme.json (--wp--preset--*). No !important and no inline styles.
 */

/* ======================================================================
   Base: carried over from Hello Elementor (GPL), the theme the current Elementor pages were built on.
   Heading and paragraph margins, form and table defaults. Without it the existing pages shift by a few pixels.
   ====================================================================== */

html{line-height:1.15;-webkit-text-size-adjust:100%}
*,:after,:before{box-sizing:border-box}
body{background-color:#fff;color:#333;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;font-size:1rem;font-weight:400;line-height:1.5;margin:0;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
h1,h2,h3,h4,h5,h6{color:inherit;font-family:inherit;font-weight:500;line-height:1.2;margin-block-end:1rem;margin-block-start:.5rem}
h1{font-size:2.5rem}
h2{font-size:2rem}
h3{font-size:1.75rem}
h4{font-size:1.5rem}
h5{font-size:1.25rem}
h6{font-size:1rem}
p{margin-block-end:.9rem;margin-block-start:0}
hr{box-sizing:content-box;height:0;overflow:visible}
pre{font-family:monospace,monospace;font-size:1em;white-space:pre-wrap}
a{background-color:transparent;color:#c36;text-decoration:none}
a:active,a:hover{color:#336}
a:not([href]):not([tabindex]),a:not([href]):not([tabindex]):focus,a:not([href]):not([tabindex]):hover{color:inherit;text-decoration:none}
a:not([href]):not([tabindex]):focus{outline:0}
abbr[title]{border-block-end:none;-webkit-text-decoration:underline dotted;text-decoration:underline dotted}
b,strong{font-weight:bolder}
code,kbd,samp{font-family:monospace,monospace;font-size:1em}
small{font-size:80%}
sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}
sub{bottom:-.25em}
sup{top:-.5em}
img{border-style:none;height:auto;max-width:100%}
details{display:block}
summary{display:list-item}
figcaption{color:#333;font-size:16px;font-style:italic;font-weight:400;line-height:1.4}
[hidden],template{display:none}
label{display:inline-block;line-height:1;vertical-align:middle}
button,input,optgroup,select,textarea{font-family:inherit;font-size:1rem;line-height:1.5;margin:0}
input[type=date],input[type=email],input[type=number],input[type=password],input[type=search],input[type=tel],input[type=text],input[type=url],select,textarea{border:1px solid #666;border-radius:3px;padding:.5rem 1rem;transition:all .3s;width:100%}
input[type=date]:focus,input[type=email]:focus,input[type=number]:focus,input[type=password]:focus,input[type=search]:focus,input[type=tel]:focus,input[type=text]:focus,input[type=url]:focus,select:focus,textarea:focus{border-color:#333}
button,input{overflow:visible}
button,select{text-transform:none}
[type=button],[type=reset],[type=submit],button{-webkit-appearance:button;width:auto}
[type=button],[type=submit],button{background-color:transparent;border:1px solid #c36;border-radius:3px;color:#c36;display:inline-block;font-size:1rem;font-weight:400;padding:.5rem 1rem;text-align:center;transition:all .3s;-webkit-user-select:none;-moz-user-select:none;user-select:none;white-space:nowrap}
[type=button]:focus:not(:focus-visible),[type=submit]:focus:not(:focus-visible),button:focus:not(:focus-visible){outline:none}
[type=button]:focus,[type=button]:hover,[type=submit]:focus,[type=submit]:hover,button:focus,button:hover{background-color:#c36;color:#fff;text-decoration:none}
[type=button]:not(:disabled),[type=submit]:not(:disabled),button:not(:disabled){cursor:pointer}
fieldset{padding:.35em .75em .625em}
legend{box-sizing:border-box;color:inherit;display:table;max-width:100%;padding:0;white-space:normal}
progress{vertical-align:baseline}
textarea{overflow:auto;resize:vertical}
[type=checkbox],[type=radio]{box-sizing:border-box;padding:0}
[type=number]::-webkit-inner-spin-button,[type=number]::-webkit-outer-spin-button{height:auto}
[type=search]{-webkit-appearance:textfield;outline-offset:-2px}
[type=search]::-webkit-search-decoration{-webkit-appearance:none}
::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}
select{display:block}
table{background-color:transparent;border-collapse:collapse;border-spacing:0;font-size:.9em;margin-block-end:15px;width:100%}
table td,table th{border:1px solid hsla(0,0%,50%,.502);line-height:1.5;padding:15px;vertical-align:top}
table th{font-weight:700}
table tfoot th,table thead th{font-size:1em}
table caption+thead tr:first-child td,table caption+thead tr:first-child th,table colgroup+thead tr:first-child td,table colgroup+thead tr:first-child th,table thead:first-child tr:first-child td,table thead:first-child tr:first-child th{border-block-start:1px solid hsla(0,0%,50%,.502)}
table tbody>tr:nth-child(odd)>td,table tbody>tr:nth-child(odd)>th{background-color:hsla(0,0%,50%,.071)}
table tbody tr:hover>td,table tbody tr:hover>th{background-color:hsla(0,0%,50%,.102)}
table tbody+tbody{border-block-start:2px solid hsla(0,0%,50%,.502)}
@media(max-width:767px){table table{font-size:.8em}
table table td,table table th{line-height:1.3;padding:7px}
table table th{font-weight:400}
}
dd,dl,dt,li,ol,ul{background:transparent;border:0;font-size:100%;margin-block-end:0;margin-block-start:0;outline:0;vertical-align:baseline}


:root {
	--c-ink: #1c2d38;
	--c-text: #4a5160;
	--c-primary: var(--wp--preset--color--primary, #126cac);
	--c-sky: var(--wp--preset--color--sky, #56ccf2);
	--c-mist: var(--wp--preset--color--mist, #eef3f9);
	--c-line: #e9eef1;
	--c-muted: #939caf;
	--accent: #0c83c8;
	--deep: #07558d;
	--grad-cta: linear-gradient(110deg, #27aae3, var(--accent), var(--deep));
	/* The kit's buttons, steps, stats and bands carry small white text: a deeper start keeps it at 4.5:1 or more. */
	--grad-strong: linear-gradient(110deg, #0e7ab9, #0a6aa6 55%, var(--deep));
	--shadow-bar: 0 6px 18px rgba(16, 47, 65, 0.067);
	--ease: cubic-bezier(0.2, 0.7, 0.2, 1);
	--container: 1140px;
	--gutter: 20px;
}

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }
body { margin: 0; }

img,
svg,
video { max-width: 100%; }
img { height: auto; }

.container {
	width: 100%;
	max-width: calc(var(--container) + var(--gutter) * 2);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

.icon { flex: none; vertical-align: middle; }
.icon-user-solid,
.icon-flask-solid { fill: currentColor; stroke: none; }

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}
.skip-link:focus {
	position: fixed;
	top: 8px;
	left: 8px;
	z-index: 2147483000;
	width: auto;
	height: auto;
	margin: 0;
	padding: 12px 18px;
	clip: auto;
	background: #fff;
	color: var(--c-ink);
	border-radius: 8px;
	box-shadow: var(--shadow-bar);
}

:focus-visible { outline: 3px solid var(--c-sky); outline-offset: 2px; }

/* ======================================================================
   Promo bar: same content as before, calmer look (no flashing, no pulsing).
   Keeps the 47px desktop height, because the header block height decides where Elementor heroes start.
   ====================================================================== */

.aps-top-promo-bar {
	position: relative;
	z-index: 99999;
	display: flex;
	align-items: center;
	width: 100%;
	min-height: 47px;
	padding: 8px 20px;
	background:
		radial-gradient(60% 160% at 10% 0%, rgba(0, 136, 255, 0.26), transparent 62%),
		radial-gradient(50% 160% at 92% 100%, rgba(55, 185, 255, 0.16), transparent 62%),
		linear-gradient(90deg, #020b18 0%, #001533 50%, #020b18 100%);
	border-bottom: 1px solid rgba(255, 255, 255, 0.08);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
.aps-top-bar-container {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 15px;
	width: 100%;
	max-width: 1200px;
	margin: 0 auto;
}
.aps-top-bar-text {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 10px;
	color: #fff;
	font-size: 13px;
}
.aps-top-tag-mini {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 1px 10px 1px 8px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(0, 136, 255, 0.45);
	background: rgba(0, 136, 255, 0.16);
	color: #8ed0ff;
	font-size: 10px;
	font-weight: 700;
	letter-spacing: 0.08em;
	white-space: nowrap;
}
.aps-top-tag-mini::before {
	content: "";
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #37b9ff;
	box-shadow: 0 0 0 3px rgba(55, 185, 255, 0.25);
}
.aps-top-bar-text strong { font-weight: 600; }
.aps-top-bar-text .highlight-blue-mini { color: #4cc3ff; font-weight: 700; }
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	.aps-top-bar-text .highlight-blue-mini {
		background: linear-gradient(90deg, #56ccf2, #0a8cff);
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;
	}
}
.aps-top-subtext-mini { color: #9db0c4; font-size: 12px; }
.aps-top-bar-actions { display: flex; flex-shrink: 0; align-items: center; gap: 14px; }
.aps-top-bonus-wrapper { display: flex; align-items: center; gap: 8px; }
.aps-top-bonus-label { color: #9db0c4; font-size: 10.5px; font-weight: 700; letter-spacing: 0.08em; white-space: nowrap; }
.aps-top-bonus-box {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 4px 12px;
	border-radius: 999px;
	box-shadow: inset 0 0 0 1px rgba(86, 204, 242, 0.38);
	background: rgba(255, 255, 255, 0.06);
	white-space: nowrap;
	transition: background 0.2s ease, box-shadow 0.2s ease;
}
.aps-top-bonus-box:hover { background: rgba(255, 255, 255, 0.1); box-shadow: inset 0 0 0 1px rgba(86, 204, 242, 0.6); }
.aps-top-bonus-icon { display: inline-flex; color: #56ccf2; font-size: 12px; line-height: 1; }
.aps-top-bonus-value { color: #fff; font-size: 12px; font-weight: 700; letter-spacing: 0.06em; }
.aps-top-promo-bar .aps-top-primary-btn {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	padding: 5px 16px;
	border-radius: 999px;
	background: linear-gradient(110deg, #0088ff, #2fb6f5);
	box-shadow: 0 4px 14px rgba(0, 136, 255, 0.35);
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	text-decoration: none;
	white-space: nowrap;
	transition: transform 0.18s var(--ease), box-shadow 0.18s var(--ease), filter 0.18s var(--ease);
}
.aps-top-promo-bar .aps-top-primary-btn:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0, 136, 255, 0.45); filter: brightness(1.05); }
.aps-top-primary-btn svg { width: 12px; height: 12px; transition: transform 0.18s var(--ease); }
.aps-top-promo-bar .aps-top-primary-btn:hover svg { transform: translateX(3px); }

@media (max-width: 768px) {
	.aps-top-promo-bar { min-height: 0; padding: 6px 10px; }
	.aps-top-bar-container { flex-direction: column; gap: 6px; text-align: center; }
	.aps-top-bar-text { justify-content: center; gap: 6px; font-size: 11px; }
	.aps-top-tag-mini { padding: 1px 8px 1px 6px; font-size: 8px; }
	.aps-top-subtext-mini { display: none; }
	.aps-top-bar-actions { justify-content: center; gap: 10px; width: 100%; }
	.aps-top-bonus-label { font-size: 9px; }
	.aps-top-bonus-box { gap: 5px; padding: 3px 10px; }
	.aps-top-bonus-value { font-size: 10px; }
	.aps-top-bonus-icon { font-size: 11px; }
	.aps-top-promo-bar .aps-top-primary-btn { padding: 4px 12px; font-size: 11px; }
}
@media (max-width: 420px) {
	.aps-top-bar-text strong { font-size: 10px; line-height: 1.25; }
	.aps-top-bonus-label { display: none; }
	.aps-top-bar-actions { gap: 8px; }
	.aps-top-bonus-box { padding: 4px 10px; }
}

/* ======================================================================
   Header: floating glass pill. The block is promo bar + 10px + 82px row + 10px.
   The row has a fixed height, so the pill can shrink on scroll without moving the page.
   ====================================================================== */

.site-header {
	position: sticky;
	top: 0;
	z-index: 9999;
	padding: 10px 0;
	pointer-events: none;
}
.admin-bar .site-header { top: 32px; }
@media (max-width: 782px) { .admin-bar .site-header { top: 46px; } }
/* Under 601px WordPress prints the admin bar in the page flow (it scrolls away), so the sticky header must not keep its 46px offset: it left a big gap above the header while scrolling on phones for signed in admins. */
@media (max-width: 600px) { .admin-bar .site-header { top: 0; } }

.header-inner { height: 82px; max-width: var(--container); margin-inline: auto; }

.header-bar {
	display: grid;
	grid-template-columns: auto minmax(0, 1fr) auto;
	align-items: center;
	column-gap: clamp(20px, 2.4vw, 40px);
	width: calc(100% - 28px);
	min-height: 82px;
	margin-inline: auto;
	padding-inline: 25px;
	border: 1px solid rgba(255, 255, 255, 0.7);
	border-radius: 55px;
	background: rgba(255, 255, 255, 0.8);
	box-shadow: 0 0 0 1px rgba(16, 47, 65, 0.06), 0 10px 30px rgba(16, 47, 65, 0.1);
	pointer-events: auto;
	-webkit-backdrop-filter: saturate(1.6) blur(18px);
	backdrop-filter: saturate(1.6) blur(18px);
	transition: min-height 0.28s var(--ease), background 0.28s var(--ease), box-shadow 0.28s var(--ease);
}
.site-header.is-scrolled .header-bar {
	min-height: 64px;
	background: rgba(255, 255, 255, 0.92);
	box-shadow: 0 0 0 1px rgba(16, 47, 65, 0.07), 0 14px 36px rgba(16, 47, 65, 0.16);
}

.brand { display: flex; align-items: center; min-width: 1px; text-decoration: none; }
.site-header .brand-logo {
	display: block;
	width: 175px;
	height: 65px;
	object-fit: contain;
	object-position: left center;
	transform-origin: left center;
	transition: transform 0.28s var(--ease);
}
.site-header.is-scrolled .brand-logo { transform: scale(0.84); }

.desktop-nav { display: flex; align-items: center; min-width: 0; }
.desktop-menu { display: flex; align-items: center; gap: 2px; margin: 0; padding: 0; list-style: none; }
.top-item { position: relative; }
.site-header .top-item > a {
	display: flex;
	align-items: center;
	gap: 8px;
	padding: 10px 14px;
	border-radius: 999px;
	color: var(--c-ink);
	font-size: 15px;
	font-weight: 600;
	line-height: 1;
	white-space: nowrap;
	text-decoration: none;
	transition: background 0.18s var(--ease), color 0.18s var(--ease);
}
.site-header .top-item:hover > a,
.site-header .top-item:focus-within > a { background: rgba(12, 131, 200, 0.09); color: var(--accent); }
.site-header .top-item.is-current > a { background: rgba(12, 131, 200, 0.12); color: var(--deep); }

.chevron {
	width: 6px;
	height: 6px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
	transition: transform 0.18s var(--ease);
}
.has-children:hover .chevron,
.has-children:focus-within .chevron { transform: translateY(1px) rotate(225deg); }

.mega {
	position: absolute;
	top: calc(100% + 14px);
	left: 50%;
	z-index: 100;
	width: 540px;
	padding: 16px;
	border: 1px solid rgba(16, 47, 65, 0.07);
	border-radius: 22px;
	background: rgba(255, 255, 255, 0.98);
	box-shadow: 0 2px 4px rgba(16, 47, 65, 0.05), 0 18px 44px rgba(16, 47, 65, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translate(-50%, 8px);
	transition: opacity 0.2s var(--ease), transform 0.2s var(--ease), visibility 0.2s;
}
.mega::before { content: ""; position: absolute; top: -15px; left: 0; width: 100%; height: 15px; }
.has-children:hover > .mega,
.has-children:focus-within > .mega { opacity: 1; visibility: visible; transform: translate(-50%, 0); }
.mega-header { display: flex; align-items: center; gap: 13px; margin-bottom: 10px; padding: 2px 6px 12px; border-bottom: 1px solid var(--c-line); }
.mega-header > span:first-child { flex: none; color: #647681; font-size: 10px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; }
.mega-line { flex: 1; height: 1px; background: #eef2f4; }
.mega-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 4px; }
.site-header .mega-link {
	display: flex;
	align-items: center;
	gap: 14px;
	min-width: 0;
	min-height: 56px;
	padding: 10px 12px;
	border-radius: 14px;
	color: var(--c-ink);
	text-decoration: none;
	transition: background 0.16s var(--ease), color 0.16s var(--ease);
}
.site-header .mega-link:hover { background: #f1f7fb; color: var(--accent); }
.mega-copy { display: grid; flex: 1; gap: 3px; min-width: 0; }
.mega-copy strong { overflow: hidden; font-size: 13.5px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.mega-copy small { color: #87959e; font-size: 10px; font-weight: 500; }
.arrow { color: #9ba9b1; font-size: 14px; transition: transform 0.16s var(--ease), color 0.16s var(--ease); }
.mega-link:hover .arrow { color: var(--accent); transform: translateX(3px); }

.header-actions { display: flex; align-items: center; justify-content: flex-end; gap: 12px; min-width: max-content; }

.utility {
	display: flex;
	align-items: center;
	gap: 8px;
	min-height: 48px;
	padding: 4px 10px 4px 5px;
	border-radius: 999px;
	background: rgba(16, 47, 65, 0.045);
}
.site-header .account {
	display: grid;
	flex: 0 0 38px;
	place-items: center;
	width: 38px;
	height: 38px;
	border: 1px solid rgba(12, 131, 200, 0.14);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.08);
	color: var(--accent);
	transition: background 0.18s var(--ease), color 0.18s var(--ease), transform 0.18s var(--ease);
}
.site-header .account:hover { background: var(--accent); color: #fff; transform: translateY(-1px); }

/* The cart comes from the side-cart plugin shortcode: keep it inline inside the pill. */
.cart { position: relative; display: flex; align-items: center; justify-content: center; min-width: 44px; min-height: 40px; }
.cart .xoo-wsc-sc-cont,
.cart .xoo-wsc-cart-trigger,
.cart .xoo-wsc-sc-bki,
.cart .xoo-wsc-basket {
	position: relative;
	top: auto;
	right: auto;
	bottom: auto;
	left: auto;
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	transform: none;
	visibility: visible;
	opacity: 1;
}
.cart img,
.cart svg { max-width: 27px; max-height: 27px; }

.site-header .cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-width: 178px;
	min-height: 48px;
	padding: 10px 22px;
	border-radius: 999px;
	background: var(--grad-cta);
	box-shadow: 0 8px 20px rgba(8, 113, 179, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	color: #fff;
	font-size: 14px;
	font-weight: 700;
	text-decoration: none;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.site-header .cta:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(8, 113, 179, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28); filter: brightness(1.03); }
.cta-icon { display: grid; place-items: center; }
.cta-arrow { width: 0; overflow: hidden; opacity: 0; transform: translateX(-6px); transition: width 0.2s var(--ease), opacity 0.2s var(--ease), transform 0.2s var(--ease); }
.site-header .cta:hover .cta-arrow { width: 14px; opacity: 1; transform: none; }

.site-header .nav-toggle {
	display: none;
	position: relative;
	flex: none;
	width: 42px;
	height: 42px;
	padding: 0;
	min-width: 0;
	border: 1px solid rgba(16, 47, 65, 0.1);
	border-radius: 50%;
	background: #fff;
	background-image: none;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.08);
	cursor: pointer;
}
.nav-toggle span { position: absolute; left: 12px; width: 17px; height: 2px; border-radius: 20px; background: #18313f; }
.nav-toggle span:first-child { top: 15px; }
.nav-toggle span:last-child { top: 23px; width: 13px; }

/* Between 1025px and 1200px the row is tight: smaller logo, buttons and padding. */
@media (max-width: 1200px) {
	.site-header .brand-logo { width: 150px; }
	.site-header .top-item > a { padding: 10px 10px; font-size: 14px; }
	.site-header .cta { min-width: 0; padding: 10px 18px; }
	.header-bar { padding-inline: 20px; }
}

@media (max-width: 1024px) {
	.header-inner { height: 76px; padding-inline: 10px; }
	.header-bar { grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; width: calc(100% - 18px); min-height: 76px; }
	.site-header.is-scrolled .header-bar { min-height: 60px; }
	.header-actions { grid-column: 2; }
	.site-header .brand-logo { width: 140px; height: 58px; }
	.site-header .desktop-nav,
	.site-header .cta { display: none; }
	.utility { min-height: 40px; padding: 0 6px 0 4px; }
	.site-header .nav-toggle { display: block; }
	.mobile-drawer { display: block; }
}
@media (max-width: 767px) {
	.header-inner { height: 68px; }
	.header-bar { width: calc(100% - 12px); min-height: 68px; padding-inline: 25px; }
	.site-header.is-scrolled .header-bar { min-height: 56px; }
	.site-header .brand-logo { width: 105px; height: 47px; }
}

@media (prefers-reduced-motion: reduce) {
	.header-bar,
	.site-header .brand-logo,
	.cta-arrow { transition: none; }
}

/* ======================================================================
   Mobile drawer (opens from the toggle, tablet width and below)
   ====================================================================== */

.mobile-drawer {
	position: fixed;
	inset: 0;
	z-index: 2147482000;
	display: none;
	overflow: hidden;
	padding: max(12px, env(safe-area-inset-top)) 10px max(12px, env(safe-area-inset-bottom));
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity 0.2s ease, visibility 0.2s ease;
}
.drawer-bg { position: absolute; inset: 0; background: rgba(8, 23, 32, 0.95); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.drawer-shell {
	position: relative;
	z-index: 2;
	display: flex;
	flex-direction: column;
	width: min(100%, 450px);
	height: calc(100dvh - 24px);
	margin-inline: auto;
	transform: translateY(8px);
	transition: transform 0.22s ease;
}
/* While open, the header (and the drawer inside it) must sit above the promo bar, which has its own high z-index. */
.site-header.mobile-open { z-index: 2147483000; }
.mobile-open .mobile-drawer { opacity: 1; visibility: visible; pointer-events: auto; }
.mobile-open .drawer-shell { transform: translateY(0); }
html.drawer-lock { overflow: hidden; }

.drawer-top { display: flex; flex: none; align-items: center; justify-content: space-between; min-height: 54px; margin-bottom: 8px; padding-inline: 5px; }
.drawer-logo { display: flex; align-items: center; }
.drawer-logo img { display: block; width: 132px; max-height: 48px; height: auto; object-fit: contain; filter: brightness(0) invert(1); }
.site-header .drawer-close { background-image: none; box-shadow: none; min-width: 0; position: relative; width: 39px; height: 39px; padding: 0; border: 1px solid rgba(255, 255, 255, 0.18); border-radius: 50%; background: rgba(255, 255, 255, 0.07); cursor: pointer; }
.drawer-close span { position: absolute; top: 18px; left: 11px; width: 16px; height: 1.5px; background: #fff; }
.drawer-close span:first-child { transform: rotate(45deg); }
.drawer-close span:last-child { transform: rotate(-45deg); }

.drawer-card { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 0; overflow: hidden; border-radius: 20px; background: #fff; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.16); }
.drawer-head { display: flex; flex: none; align-items: center; justify-content: space-between; gap: 16px; padding: 15px 17px; border-bottom: 1px solid var(--c-line); }
.drawer-head > div { display: grid; gap: 3px; }
.drawer-head div > span { color: #8d9ba3; font-size: 8px; font-weight: 800; letter-spacing: 0.14em; text-transform: uppercase; }
.drawer-head strong { color: #253b49; font-size: 13px; font-weight: 700; }
.drawer-head > i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 5px #edf8fd; }

.drawer-nav { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 5px 16px; overscroll-behavior: contain; }
.m-list { margin: 0; padding: 0; list-style: none; }
.m-item { border-bottom: 1px solid #edf1f3; }
.m-item:last-child { border-bottom: 0; }
.m-row { display: flex; align-items: center; gap: 10px; min-height: 56px; }
.site-header .m-link { display: flex; flex: 1 1 auto; align-items: center; min-width: 0; color: #263b48; text-decoration: none; }
.m-title { overflow: hidden; font-size: 14px; font-weight: 700; text-overflow: ellipsis; white-space: nowrap; }
.site-header .m-expand { background-image: none; box-shadow: none; min-width: 0; position: relative; width: 32px; height: 32px; padding: 0; border: 1px solid #e4edf1; border-radius: 50%; background: #f7fafb; cursor: pointer; }
.m-expand span::before,
.m-expand span::after { content: ""; position: absolute; top: 15px; left: 10px; width: 11px; height: 1.5px; background: var(--accent); transition: transform 0.18s ease; }
.m-expand span::after { transform: rotate(90deg); }
.mobile-expanded .m-expand span::after { transform: rotate(0); }
.m-arrow { display: grid; place-items: center; width: 32px; height: 32px; color: var(--accent); font-size: 14px; }
.m-sub { display: grid; grid-template-rows: 0fr; opacity: 0; transition: grid-template-rows 0.22s ease, opacity 0.16s ease; }
.m-sub-inner { min-height: 0; overflow: hidden; padding: 0 0 8px 12px; }
.mobile-expanded > .m-sub { grid-template-rows: 1fr; opacity: 1; }
.site-header .m-sub a { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 42px; padding: 7px 10px; border-radius: 9px; color: #536773; font-size: 12px; font-weight: 600; text-decoration: none; }
.site-header .m-sub a:hover { background: #f4f9fb; color: var(--accent); }

.drawer-bottom { flex: none; border-top: 1px solid var(--c-line); background: #fff; }
.site-header .drawer-cta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 10px 14px 8px; padding: 11px 13px 11px 15px; border-radius: 13px; background: var(--grad-cta); color: #fff; text-decoration: none; }
.drawer-cta > span:first-child { display: grid; gap: 2px; }
.drawer-cta small { color: rgba(255, 255, 255, 0.74); font-size: 7.5px; font-weight: 800; letter-spacing: 0.1em; text-transform: uppercase; }
.drawer-cta strong { font-size: 13px; font-weight: 700; }
.drawer-cta-arrow { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: rgba(255, 255, 255, 0.14); }
.drawer-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 7px; padding: 0 14px 10px; }
.site-header .drawer-links a { display: flex; align-items: center; justify-content: center; min-height: 39px; padding: 8px; border: 1px solid #e5ecef; border-radius: 9px; background: #fafcfd; color: #5c6f7a; font-size: 10px; font-weight: 650; text-decoration: none; }
.drawer-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 14px 11px; border-top: 1px solid var(--c-line); color: #919ea5; font-size: 7px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; }

@media (max-width: 1024px) {
	.header-inner { padding-inline: 10px; }
	.header-bar { grid-template-columns: auto minmax(0, 1fr); column-gap: 13px; width: calc(100% - 18px); min-height: 76px; }
	.header-actions { grid-column: 2; }
	.site-header .brand-logo { width: 140px; height: 58px; }
	.site-header .desktop-nav,
	.site-header .cta { display: none; }
	.utility { min-height: 40px; padding: 0 6px; }
	.site-header .nav-toggle { display: block; }
	.mobile-drawer { display: block; }
}
@media (max-width: 767px) {
	.header-bar { width: calc(100% - 12px); min-height: 68px; padding-inline: 25px; }
	.site-header .brand-logo { width: 105px; height: 47px; }
}
/* Very narrow phones (320 to 360px): the row used to run 22px past the screen and cut the menu button, so the pill gets tighter. Heights stay as they are. */
@media (max-width: 360px) {
	.header-bar { column-gap: 8px; padding-inline: 14px; }
	.site-header .brand-logo { width: 90px; height: 40px; }
	.header-actions { gap: 6px; }
	.utility { gap: 4px; padding: 0 6px 0 3px; }
	.site-header .account { flex-basis: 34px; width: 34px; height: 34px; }
	.site-header .nav-toggle { width: 38px; height: 38px; }
	.nav-toggle span { left: 10px; }
	.nav-toggle span:first-child { top: 13px; }
	.nav-toggle span:last-child { top: 21px; }
}

/* ======================================================================
   Footer: About card, four link columns, newsletter card, bottom bar
   ====================================================================== */

.site-footer { background: linear-gradient(180deg, #f4f8fc 0%, #e9f0f7 100%); color: var(--c-muted); }
.footer-top { padding: 96px 0 48px; }
.footer-layout { display: grid; grid-template-columns: 325px minmax(0, 1fr); gap: 72px; align-items: start; max-width: calc(1130px + var(--gutter) * 2); }

.footer-about {
	position: relative;
	overflow: hidden;
	padding: 32px;
	border-radius: 28px;
	background: linear-gradient(300deg, #126cac, #56ccf2);
	box-shadow: 0 18px 40px rgba(18, 108, 172, 0.28);
	color: #fff;
}
.footer-about::before {
	content: "";
	position: absolute;
	top: -70px;
	right: -70px;
	width: 220px;
	height: 220px;
	border-radius: 50%;
	background: radial-gradient(circle, rgba(255, 255, 255, 0.3), transparent 66%);
	pointer-events: none;
}
.footer-about > * { position: relative; }
.footer-about h2 { margin: 0 0 12px; color: #fff; font-size: 22px; font-weight: 700; line-height: 1.25; }
.footer-about p { margin: 0 0 16px; color: rgba(255, 255, 255, 0.92); font-size: 15px; line-height: 1.6; }
.footer-about hr { margin: 18px 0 22px; border: 0; border-top: 1px solid rgba(255, 255, 255, 0.28); }
.site-footer .social-link {
	display: inline-grid;
	place-items: center;
	width: 42px;
	height: 42px;
	border: 1px solid rgba(255, 255, 255, 0.42);
	border-radius: 50%;
	background: rgba(255, 255, 255, 0.18);
	color: #fff;
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer .social-link:hover { background: #fff; color: #126cac; transform: translateY(-2px); }

/* ----------------------------------------------------------------------
   PepFinder badge: aps_theme_pepfinder_badge() and the block aps/pepfinder (inc/features/pepfinder.php).
   The image is a live SVG from PepFinder, 220 x 64, white with its own thin border; it draws the rating itself, so no number
   is written in the markup or here. Variants: chip (footer, the original look), strip (slim glass card, centred), card (a card
   with the badge), compact (phone menu drawer). The width and height attributes reserve the box, so nothing shifts on load.
   ---------------------------------------------------------------------- */
/* Three classes on the image: the page kit crops every image inside a split column (.aps-page .aps-split-side img: aspect ratio, cover). */
.aps-pepfinder-badge { --pf-w: 220px; }
.aps-pepfinder-badge .aps-pepfinder-badge__link { display: inline-block; max-width: 100%; border-radius: 14px; text-decoration: none; }
.aps-pepfinder-badge .aps-pepfinder-badge__link:focus-visible { outline: 3px solid var(--c-sky); outline-offset: 3px; }
/* The ratio 220 / 64 is the width and height of the markup: it keeps the box the right size before the image arrives, then the file's own ratio
   takes over. The font, colour and max-height only matter if PepFinder is down: the alt text then shows small, inside a box of the same size. */
.aps-pepfinder-badge .aps-pepfinder-badge__link .aps-pepfinder-badge__img {
	display: block;
	width: var(--pf-w);
	max-width: 100%;
	height: auto;
	max-height: calc(var(--pf-w) * 64 / 220);
	aspect-ratio: auto 220 / 64;
	overflow: hidden;
	border-radius: 8px;
	box-shadow: none;
	object-fit: fill;
	color: var(--c-text);
	font-size: max(9px, calc(var(--pf-w) / 20));
	line-height: 1.3;
	text-align: center;
}

.aps-pepfinder-badge--chip { margin-top: 22px; }
.aps-pepfinder-badge--chip .aps-pepfinder-badge__link { padding: 6px; background: #fff; box-shadow: 0 6px 18px rgba(8, 50, 90, 0.18); }

.aps-pepfinder-badge--strip {
	position: relative;
	z-index: 1;
	display: flex;
	justify-content: center;
	width: fit-content;
	max-width: calc(100% - 24px);
	margin: 48px auto 8px;
	padding: 10px;
	border: 1px solid rgba(16, 47, 65, 0.08);
	border-radius: 24px;
	background: rgba(255, 255, 255, 0.72);
	-webkit-backdrop-filter: blur(10px);
	backdrop-filter: blur(10px);
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 14px 34px rgba(16, 47, 65, 0.08);
}
/* First thing on a page: it rises into the hero's bottom space, like the first card and the first section do. */
.aps-page .page-content > .aps-pepfinder-badge--strip:first-child { margin-top: -44px; }
.aps-page .page-content > .aps-pepfinder-badge--strip:last-child { margin-bottom: 0; }

/* Card: fills the width of what holds it (About us: the 1140px container under the lab testing row; Contact us restyles it inside
   the details card, see pages/contact-us.css). Same pale gradient as the JANOSHIK card, the badge as a white chip in the middle. */
.aps-pepfinder-badge--card {
	display: flex;
	justify-content: center;
	width: 100%;
	margin: 44px 0 0;
	padding: 20px;
	border: 1px solid rgba(16, 47, 65, 0.06);
	border-radius: 22px;
	background: linear-gradient(160deg, #f6faff 0%, #e6f1f9 100%);
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 14px 34px rgba(16, 47, 65, 0.07);
}
.aps-pepfinder-badge--card .aps-pepfinder-badge__link { padding: 6px; background: #fff; box-shadow: 0 6px 16px rgba(16, 47, 65, 0.1); }

.aps-pepfinder-badge--strip .aps-pepfinder-badge__link,
.aps-pepfinder-badge--card .aps-pepfinder-badge__link { transition: transform 0.2s var(--ease); }
.aps-pepfinder-badge--strip .aps-pepfinder-badge__link:hover,
.aps-pepfinder-badge--card .aps-pepfinder-badge__link:hover { transform: translateY(-2px); }

/* Compact: inside the phone menu drawer, under the My Account and Contact buttons. The drawer is always in the page (closed it is only
   see-through), so the badge has no box until the drawer opens: its lazy image is then not requested for visitors who never open the menu. */
.aps-pepfinder-badge--compact { --pf-w: 150px; display: flex; justify-content: center; padding: 0 14px 12px; }
.aps-pepfinder-badge--compact .aps-pepfinder-badge__link { border-radius: 10px; box-shadow: 0 2px 8px rgba(16, 47, 65, 0.14); }
.mobile-drawer .aps-pepfinder-badge { display: none; }
.mobile-open .mobile-drawer .aps-pepfinder-badge { display: flex; }
/* A short screen (a phone on its side, or a small 640px phone) has no room for it: the menu list keeps the space. */
@media (max-height: 660px) {
	.mobile-open .mobile-drawer .aps-pepfinder-badge { display: none; }
}

/* The third column holds the longest title ("Popular Research Peptides:"), so it gets a little more room and stays on one line on desktop. */
.footer-columns { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1.2fr) minmax(0, 1.1fr); gap: 0 24px; }
/* Titles start at the same level and every list starts at the same level. Each column joins the grid rows of the row it sits in
   (subgrid: one row for the titles, one for the lists), so the title row is as tall as the tallest title and no more: one line
   when nothing wraps, two lines when "Popular Research Peptides:" does. The underline follows the last line of its own title. */
.footer-col h2 { margin: 0 0 22px; color: var(--c-ink); font-size: 17px; font-weight: 700; line-height: 1.3; }
@supports (grid-template-rows: subgrid) {
	.footer-col { display: grid; grid-row: span 2; grid-template-rows: subgrid; row-gap: 0; }
}
/* Browsers without subgrid: reserve two lines for the title so the lists still line up. */
@supports not (grid-template-rows: subgrid) {
	@media (min-width: 768px) {
		.footer-col h2 { min-height: calc(2 * 1.3em + 12px); }
	}
}
.footer-col h2::after { content: ""; display: block; width: 28px; height: 3px; margin-top: 9px; border-radius: 99px; background: linear-gradient(90deg, #126cac, #56ccf2); }
.footer-col ul { margin: 0; padding: 0; list-style: none; }
.footer-col li { margin: 0 0 10px; font-size: 15px; line-height: 1.55; }
.site-footer .footer-col a { display: inline-block; color: #5d6f7f; text-decoration: none; transition: color 0.18s var(--ease), transform 0.18s var(--ease); }
.site-footer .footer-col a:hover { color: var(--c-primary); text-decoration: none; transform: translateX(3px); }

/*
 * Newsletter. The form is still the Elementor template 7427 (it keeps working as before) and is restyled here as
 * one rounded input with a send button. Elementor's own rules are very specific, hence the !important. This block
 * goes away when the form is replaced by the native MailPoet form.
 */
.footer-newsletter {
	margin-top: 44px;
	padding: 28px 30px;
	border: 1px solid rgba(16, 47, 65, 0.06);
	border-radius: 24px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 12px 30px rgba(16, 47, 65, 0.07);
}
.site-footer .footer-newsletter .elementor-inner-section { padding: 0 !important; border: 0 !important; }
.site-footer .footer-newsletter .elementor-inner-section .elementor-container { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 340px); gap: 24px; align-items: center; }
.site-footer .footer-newsletter .elementor-column,
.site-footer .footer-newsletter .elementor-widget { margin: 0 !important; }
.site-footer .footer-newsletter .elementor-column { width: auto !important; }
.site-footer .footer-newsletter .elementor-widget-wrap { padding: 0 !important; }
.site-footer .footer-newsletter .elementor-heading-title { margin: 0 0 6px; color: var(--c-ink); font-size: 20px; font-weight: 700; line-height: 1.25; }
.site-footer .footer-newsletter .elementor-widget-text-editor { margin: 0; color: #6b7c8c; font-size: 14px; line-height: 1.55; }
.site-footer .footer-newsletter .elementor-form-fields-wrapper { display: flex !important; flex-wrap: nowrap !important; align-items: center; gap: 6px; margin: 0 !important; padding: 6px; border: 1px solid #d9e5ee; border-radius: 999px; background: #fff; box-shadow: inset 0 1px 2px rgba(16, 47, 65, 0.04); }
.site-footer .footer-newsletter .elementor-field-group { width: auto !important; margin: 0 !important; padding: 0 !important; }
.site-footer .footer-newsletter .elementor-field-type-email { flex: 1 1 auto; min-width: 0; }
.site-footer .footer-newsletter .elementor-field-textual { height: 44px !important; min-height: 0 !important; padding: 0 18px !important; border: 0 !important; background: transparent !important; box-shadow: none !important; }
.site-footer .footer-newsletter .e-form__buttons { flex: none; }
.site-footer .footer-newsletter .e-form__buttons .elementor-button { display: inline-flex; align-items: center; justify-content: center; height: 44px; min-width: 56px; padding: 0 20px !important; border: 0 !important; border-radius: 999px !important; background: var(--grad-cta) !important; color: #fff !important; box-shadow: 0 6px 16px rgba(8, 113, 179, 0.3); }

.footer-bottom { border-top: 1px solid rgba(16, 47, 65, 0.08); }
.footer-bottom-inner { display: flex; align-items: center; gap: 40px; min-height: 64px; padding-block: 10px; }
.footer-bottom .brand-logo { width: 100px; height: 40px; }
.footer-name { margin-left: 85px; color: var(--c-ink); font-size: 14px; }
.footer-copy { margin-left: auto; color: var(--c-muted); font-size: 14px; }
.site-footer .to-top {
	display: grid;
	place-items: center;
	flex: none;
	width: 40px;
	height: 40px;
	border: 1px solid rgba(16, 47, 65, 0.1);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.08);
	color: var(--c-ink);
	transition: background 0.2s var(--ease), color 0.2s var(--ease), transform 0.2s var(--ease);
}
.site-footer .to-top:hover { background: var(--c-primary); color: #fff; transform: translateY(-2px); }

@media (max-width: 1024px) {
	.footer-top { padding: 64px 0 32px; }
	.footer-layout { grid-template-columns: 1fr; gap: 40px; }
	.footer-columns { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 32px 20px; }
}
@media (max-width: 767px) {
	.footer-top { padding: 56px 0 24px; }
	.footer-layout { padding-inline: 15px; }
	.footer-about { padding: 26px; border-radius: 24px; }
	.footer-about p { font-size: 14px; }
	.footer-columns { grid-template-columns: 1fr; gap: 26px; }
	.footer-col h2 { margin-bottom: 16px; font-size: 17px; }
	.footer-col li { margin-bottom: 8px; font-size: 14px; }
	.footer-newsletter { margin-top: 30px; padding: 22px 20px; border-radius: 20px; }
	.site-footer .footer-newsletter .elementor-inner-section .elementor-container { grid-template-columns: 1fr; gap: 16px; }
	.footer-bottom-inner { flex-wrap: wrap; gap: 12px 16px; }
	.footer-name { margin-left: 0; }
	.footer-copy { order: 3; flex-basis: 100%; margin-left: 0; }
	.site-footer .to-top { margin-left: auto; }
}

/* ======================================================================
   Content: pages and posts that the theme itself prints
   ====================================================================== */

.page-header .entry-title,
body:not([class*="elementor-page-"]) .site-main { margin-inline: auto; width: 100%; }
@media (max-width: 575px) {
	.page-header .entry-title,
	body:not([class*="elementor-page-"]) .site-main { padding-inline: 10px; }
}
@media (min-width: 576px) {
	.page-header .entry-title,
	body:not([class*="elementor-page-"]) .site-main { max-width: 500px; }
}
@media (min-width: 768px) {
	.page-header .entry-title,
	body:not([class*="elementor-page-"]) .site-main { max-width: 600px; }
}
@media (min-width: 992px) {
	.page-header .entry-title,
	body:not([class*="elementor-page-"]) .site-main { max-width: 800px; }
}
@media (min-width: 1200px) {
	.page-header .entry-title,
	body:not([class*="elementor-page-"]) .site-main { max-width: 1140px; }
}
.page-content a { text-decoration: underline; }
.alignright { float: right; margin-left: 1rem; }
.alignleft { float: left; margin-right: 1rem; }
.aligncenter { clear: both; display: block; margin-inline: auto; }
.wp-caption { margin-block-end: 1.25rem; max-width: 100%; }
.post-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 22px; padding-block: 32px; }
.card { overflow: hidden; background: #fff; border: 1px solid #dfe4ea; border-radius: 16px; box-shadow: 0 3px 20px rgba(45, 127, 218, 0.1); }
.card-media { display: block; }
.card-media img { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; }
.card-body { padding: 18px 20px 22px; }
.card-title { margin: 0 0 8px; font-size: 1.125rem; }
.card-title a { color: var(--c-ink); text-decoration: none; }
.button { display: inline-flex; align-items: center; justify-content: center; padding: 12px 32px; border-radius: 50px; background: var(--grad-cta); color: #fff; font-weight: 600; text-decoration: none; }
.button:hover { color: #fff; }
@media (max-width: 1024px) { .post-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 767px) { .post-grid { grid-template-columns: 1fr; } }

/* ======================================================================
   Inner pages (templates/aps-page.php): a hero with breadcrumb and title, then the content in a card.
   The hero is pulled up under the glass header, as the Elementor heroes are, so --header-block must equal the
   header block height (10px + header row + 10px) at each breakpoint. Selectors start with .aps-page so they beat
   the Elementor kit rules for a, h1 to h6 and p while Elementor is still active.
   ====================================================================== */

:root { --header-block: 102px; }
@media (max-width: 1024px) { :root { --header-block: 96px; } }
@media (max-width: 767px) { :root { --header-block: 88px; } }

/* Cairo for everything inside the page (list items, the breadcrumb and bold text inherit the body font otherwise). */
body .site-main.aps-page { display: flow-root; width: 100%; max-width: none; margin: 0; padding: 0; font-family: Cairo, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; }

.aps-page .aps-hero {
	position: relative;
	overflow: hidden;
	margin-top: calc(-1 * var(--header-block));
	padding: calc(var(--header-block) + 44px) 0 104px;
	background:
		radial-gradient(60% 90% at 88% 0%, rgba(86, 204, 242, 0.32), transparent 70%),
		radial-gradient(50% 70% at 0% 45%, rgba(18, 108, 172, 0.1), transparent 70%),
		linear-gradient(180deg, #e3f0fa 0%, #f1f7fc 62%, #fff 100%);
	text-align: center;
}
.aps-page .aps-hero .container { position: relative; }

.aps-page .breadcrumb { display: flex; justify-content: center; margin: 0 0 18px; }
.aps-page .breadcrumb ol {
	display: inline-flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 6px 16px;
	list-style: none;
	border: 1px solid rgba(16, 47, 65, 0.08);
	border-radius: 999px;
	background: rgba(255, 255, 255, 0.72);
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	font-size: 13px;
	font-weight: 600;
	line-height: 1.5;
}
.aps-page .breadcrumb li { display: inline-flex; align-items: center; margin: 0; }
.aps-page .breadcrumb li + li::before {
	content: "";
	width: 5px;
	height: 5px;
	margin: 0 11px 0 9px;
	border-top: 1.5px solid #9ba9b1;
	border-right: 1.5px solid #9ba9b1;
	transform: rotate(45deg);
}
.aps-page .breadcrumb a { color: var(--c-primary); text-decoration: none; transition: color 0.18s var(--ease); }
.aps-page .breadcrumb a:hover { color: var(--deep); text-decoration: underline; text-underline-offset: 3px; }
.aps-page .breadcrumb [aria-current] { color: var(--c-ink); }

.aps-page .aps-hero h1 {
	max-width: 880px;
	margin: 0 auto;
	color: var(--c-ink);
	font-size: clamp(2.1rem, 1.3rem + 3.4vw, 3.6rem);
	font-weight: 800;
	line-height: 1.12;
	letter-spacing: -0.02em;
	text-wrap: balance;
}
.aps-page .aps-hero h1::after {
	content: "";
	display: block;
	width: 56px;
	height: 4px;
	margin: 22px auto 0;
	border-radius: 99px;
	background: linear-gradient(90deg, #126cac, #56ccf2);
}

.aps-page .page-content { padding-bottom: 72px; }
/* A page that ends with a full-width section has no gap before the footer. */
.aps-page .page-content:has(> .aps-section:last-child),
.aps-page .page-content:has(> .aps-cta:last-child) { padding-bottom: 0; }

/* The card: only the first one on a page overlaps the hero. */
.aps-page .aps-card {
	position: relative;
	z-index: 1;
	width: calc(100% - 24px);
	max-width: 860px;
	margin: 0 auto;
	padding: clamp(28px, 5vw, 60px);
	border: 1px solid rgba(16, 47, 65, 0.06);
	border-radius: 28px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 24px 60px rgba(16, 47, 65, 0.1);
}

.aps-page .page-content > .aps-card:first-child { margin-top: -64px; }

.aps-page .aps-prose { color: var(--c-text); font-size: 17px; line-height: 1.75; }
.aps-page .aps-prose > :first-child { margin-top: 0; }
.aps-page .aps-prose > :last-child { margin-bottom: 0; }
.aps-page .aps-prose h2,
.aps-page .aps-prose h3 {
	margin: 40px 0 12px;
	padding-top: 36px;
	border-top: 1px solid var(--c-line);
	color: var(--c-ink);
	font-size: 1.375rem;
	font-weight: 700;
	line-height: 1.3;
}
.aps-page .aps-prose > h2:first-child,
.aps-page .aps-prose > h3:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
.aps-page .aps-prose p { margin: 0 0 16px; color: var(--c-text); }
.aps-page .aps-prose ul,
.aps-page .aps-prose ol { margin: 0 0 20px; padding-left: 22px; }
.aps-page .aps-prose li { margin: 0 0 8px; padding-left: 4px; }
.aps-page .aps-prose li::marker { color: var(--accent); }
.aps-page .aps-prose strong { color: var(--c-ink); font-weight: 700; }
.aps-page .aps-prose a { color: var(--accent); text-decoration: underline; text-underline-offset: 3px; }
.aps-page .aps-prose a:hover { color: var(--deep); }

/* Hero lead line: a paragraph with the class aps-lead right after the h1 (the template lifts it into the hero). */
.aps-page .aps-hero .aps-lead { max-width: 640px; margin: 22px auto 0; color: var(--c-text); font-size: 1.125rem; line-height: 1.7; }

/* A wider card, and two columns inside it: the main column and a picture beside it. */
.aps-page .aps-card-wide { max-width: 1040px; }
.aps-page .aps-split { display: flex; align-items: flex-start; gap: 48px; margin: 0; }
/* The doubled class names beat WordPress core's ".wp-block-columns:not(.is-not-stacked-on-mobile) > .wp-block-column" (equal columns). */
.aps-page .aps-split.wp-block-columns > .aps-split-main.wp-block-column { flex: 1.5 1 0; min-width: 0; }
.aps-page .aps-split.wp-block-columns > .aps-split-side.wp-block-column { flex: 1 1 0; min-width: 0; }
.aps-page .aps-split-side .wp-block-image { margin: 0; }
.aps-page .aps-split-side img {
	display: block;
	width: 100%;
	height: auto;
	aspect-ratio: 5 / 6;
	object-fit: cover;
	border-radius: 22px;
	box-shadow: 0 18px 44px rgba(16, 47, 65, 0.16);
}

/* FAQ: native details blocks as soft cards, one open at a time (they share a name). */
.aps-page .aps-faq { display: grid; gap: 12px; }
.aps-page .aps-faq .wp-block-details {
	border: 1px solid var(--c-line);
	border-radius: 18px;
	background: #f6f9fc;
	transition: background 0.2s var(--ease), border-color 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.aps-page .aps-faq .wp-block-details:hover { border-color: #cddbea; }
.aps-page .aps-faq .wp-block-details[open] {
	border-color: rgba(12, 131, 200, 0.35);
	background: #fff;
	box-shadow: 0 12px 30px rgba(16, 47, 65, 0.08);
}
.aps-page .aps-faq .wp-block-details > summary {
	position: relative;
	display: block;
	padding: 18px 56px 18px 22px;
	border-radius: 18px;
	color: var(--c-ink);
	font-size: 1.0625rem;
	font-weight: 700;
	line-height: 1.45;
	cursor: pointer;
	list-style: none;
}
.aps-page .aps-faq .wp-block-details > summary::-webkit-details-marker { display: none; }
.aps-page .aps-faq .wp-block-details > summary:focus-visible { outline-offset: -3px; }
.aps-page .aps-faq .wp-block-details > summary::after {
	content: "";
	position: absolute;
	top: 50%;
	right: 24px;
	width: 9px;
	height: 9px;
	border-right: 2px solid var(--accent);
	border-bottom: 2px solid var(--accent);
	transform: translateY(-70%) rotate(45deg);
	transition: transform 0.2s var(--ease);
}
.aps-page .aps-faq .wp-block-details[open] > summary::after { transform: translateY(-30%) rotate(225deg); }
.aps-page .aps-faq .wp-block-details > :not(summary) { margin: 0; padding: 0 22px; color: var(--c-text); font-size: 1rem; line-height: 1.75; }
.aps-page .aps-faq .wp-block-details > :not(summary):last-child { padding-bottom: 20px; }
@keyframes aps-faq-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.aps-page .aps-faq .wp-block-details[open] > :not(summary) { animation: aps-faq-in 0.22s var(--ease); }
@media (prefers-reduced-motion: reduce) {
	.aps-page .aps-faq .wp-block-details[open] > :not(summary) { animation: none; }
}

@media (max-width: 781px) {
	.aps-page .aps-split { display: block; }
	.aps-page .aps-split-side { margin-top: 28px; }
	.aps-page .aps-split-side img { aspect-ratio: 4 / 3; }
}

@media (max-width: 767px) {
	.aps-page .aps-hero .aps-lead { margin-top: 18px; font-size: 1rem; }
	.aps-page .aps-faq .wp-block-details > summary { padding: 16px 48px 16px 18px; font-size: 1rem; }
	.aps-page .aps-faq .wp-block-details > summary::after { right: 20px; }
	.aps-page .aps-faq .wp-block-details > :not(summary) { padding-inline: 18px; }
}

@media (max-width: 767px) {
	.aps-page .aps-hero { padding-bottom: 88px; }
	.aps-page .aps-hero h1::after { margin-top: 18px; }
	.aps-page .aps-card { width: calc(100% - 20px); border-radius: 22px; }
	.aps-page .page-content > .aps-card:first-child { margin-top: -56px; }
	.aps-page .aps-prose { font-size: 16px; }
	.aps-page .aps-prose h2,
	.aps-page .aps-prose h3 { margin-top: 32px; padding-top: 28px; font-size: 1.25rem; }
	.aps-page .page-content { padding-bottom: 56px; }
}

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { transition: none; }
}

/* The reset gives every button a pink hover; the header buttons keep their own colours. */
.site-header .nav-toggle:hover,
.site-header .nav-toggle:focus { background: #f7fafb; color: inherit; }
.site-header .drawer-close:hover,
.site-header .drawer-close:focus { background: rgba(255, 255, 255, 0.07); color: inherit; }
.site-header .m-expand:hover,
.site-header .m-expand:focus { background: #f7fafb; color: inherit; }
.site-header .promo-code:hover { background: transparent; }

/* ======================================================================
   Page kit: the building blocks of rebuilt pages. Use these classes as the "Additional CSS class(es)" of core blocks
   (Group, Columns, Buttons, Image, Heading, Paragraph). A page adds rules of its own only for what is unique to it,
   in assets/css/pages/<page slug>.css (loaded for that page only).
   ====================================================================== */

/* Section: a full-width band. Its first child is a group with the class aps-section__inner (the 1140px container). */
.aps-page .aps-section { padding-block: 72px; color: var(--c-text); font-size: 17px; line-height: 1.75; }
.aps-page .aps-section--tint { background: linear-gradient(180deg, #f4f8fc 0%, #e9f1f8 100%); }
.aps-page .aps-section--flush-top { padding-top: 0; }
/* The first section of a page rises into the hero's bottom padding (a tinted first section stays where it is). */
.aps-page .page-content > .aps-section:first-child:not(.aps-section--tint) { margin-top: -72px; }
.aps-page .aps-section__inner { width: 100%; max-width: calc(var(--container) + var(--gutter) * 2); margin-inline: auto; padding-inline: var(--gutter); }
.aps-page .aps-section p { margin: 0 0 16px; color: var(--c-text); }
.aps-page .aps-section a { color: var(--accent); }

/* Section heading: the title with a short accent bar. Put aps-title on a Heading block (h2) and aps-section__head on the Group around it. */
.aps-page .aps-section__head { max-width: 720px; margin: 0 auto 40px; text-align: center; }
.aps-page .aps-title {
	margin: 0;
	color: var(--c-ink);
	font-size: clamp(1.6rem, 1.15rem + 1.8vw, 2.5rem);
	font-weight: 800;
	line-height: 1.2;
	letter-spacing: -0.015em;
	text-wrap: balance;
}
.aps-page .aps-title::after { content: ""; display: block; width: 48px; height: 4px; margin: 16px 0 0; border-radius: 99px; background: linear-gradient(90deg, #126cac, #56ccf2); }
.aps-page .aps-section__head .aps-title::after,
.aps-page .aps-title.has-text-align-center::after { margin-inline: auto; }
.aps-page .aps-section__head p { margin: 16px 0 0; }
.aps-page .aps-badge {
	display: inline-block;
	margin: 0 0 12px;
	padding: 4px 12px;
	border-radius: 999px;
	background: rgba(12, 131, 200, 0.1);
	color: var(--deep);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

/* Buttons: put aps-btn on each Button block (add aps-btn--ghost or aps-btn--white for the other looks). */
.aps-page .wp-block-buttons { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }
.aps-page .wp-block-buttons.is-content-justification-center { justify-content: center; }
.aps-page .aps-btn { margin: 0; }
.aps-page .aps-btn .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 9px;
	min-height: 48px;
	padding: 10px 28px;
	border: 0;
	border-radius: 999px;
	background: var(--grad-strong);
	box-shadow: 0 8px 20px rgba(8, 113, 179, 0.28), inset 0 1px 0 rgba(255, 255, 255, 0.28);
	color: #fff;
	font-size: 15px;
	font-weight: 700;
	line-height: 1.2;
	text-decoration: none;
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease), filter 0.2s var(--ease);
}
.aps-page .aps-btn .wp-block-button__link:hover { color: #fff; transform: translateY(-1px); box-shadow: 0 12px 26px rgba(8, 113, 179, 0.36), inset 0 1px 0 rgba(255, 255, 255, 0.28); filter: brightness(1.03); }
.aps-page .aps-btn--ghost .wp-block-button__link { background: #fff; box-shadow: inset 0 0 0 1.5px rgba(12, 131, 200, 0.35); color: var(--deep); }
.aps-page .aps-btn--ghost .wp-block-button__link:hover { background: #f4f9fd; box-shadow: inset 0 0 0 1.5px rgba(12, 131, 200, 0.6); color: var(--accent); filter: none; }
.aps-page .aps-btn--white .wp-block-button__link { background: #fff; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.18); color: var(--deep); }
.aps-page .aps-btn--white .wp-block-button__link:hover { background: #fff; color: var(--accent); }

/* Grid: a Group with aps-grid and a column modifier. Its children are the cells (aps-iconbox, aps-stat, aps-step, a Group, an Image). */
.aps-page .aps-grid { display: grid; gap: 24px; margin: 0; }
.aps-page .aps-grid > * { margin: 0; min-width: 0; }
.aps-page .aps-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.aps-page .aps-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.aps-page .aps-grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
@media (max-width: 1024px) {
	.aps-page .aps-grid--3,
	.aps-page .aps-grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.aps-page .aps-grid--2,
	.aps-page .aps-grid--3,
	.aps-page .aps-grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* Icon box: aps-iconbox on a Group that holds an HTML block <div class="aps-iconbox__icon"><svg>..</svg></div>, a Heading (h3) and a Paragraph. */
.aps-page .aps-iconbox {
	padding: 26px;
	border: 1px solid rgba(16, 47, 65, 0.06);
	border-radius: 22px;
	background: #fff;
	box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 14px 34px rgba(16, 47, 65, 0.07);
	transition: transform 0.2s var(--ease), box-shadow 0.2s var(--ease);
}
.aps-page .aps-iconbox:hover { transform: translateY(-3px); box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 20px 44px rgba(16, 47, 65, 0.11); }
.aps-page .aps-iconbox__icon { display: grid; place-items: center; width: 56px; height: 56px; margin: 0 0 16px; border-radius: 16px; background: linear-gradient(135deg, #e6f3fb, #d4ebf8); color: var(--accent); }
.aps-page .aps-iconbox__icon svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.aps-page .aps-iconbox h3 { margin: 0 0 8px; color: var(--c-ink); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.aps-page .aps-iconbox p { margin: 0; font-size: 15px; line-height: 1.65; }

/* Stat: aps-stat on a Group with a label Paragraph (aps-stat__label) and a value Paragraph (aps-stat__value). aps-stat--light for the white version. */
.aps-page .aps-stat { padding: 26px 28px; border-radius: 22px; background: linear-gradient(300deg, #07558d, #1479b4); box-shadow: 0 18px 40px rgba(18, 108, 172, 0.28); color: #fff; }
.aps-page .aps-stat .aps-stat__label { margin: 0; color: rgba(255, 255, 255, 0.92); font-size: 15px; font-weight: 600; }
.aps-page .aps-stat .aps-stat__value { margin: 6px 0 0; color: #fff; font-size: clamp(2rem, 1.4rem + 2vw, 2.8rem); font-weight: 800; line-height: 1.1; }
.aps-page .aps-stat--light { border: 1px solid rgba(16, 47, 65, 0.06); background: #fff; box-shadow: 0 1px 2px rgba(16, 47, 65, 0.05), 0 14px 34px rgba(16, 47, 65, 0.07); color: var(--c-ink); }
.aps-page .aps-stat--light .aps-stat__label { color: var(--c-text); }
.aps-page .aps-stat--light .aps-stat__value { color: var(--c-ink); }

/* Step: aps-step on a Group with a number Paragraph (aps-step__no), an optional icon, a Heading (h3) and a Paragraph. */
.aps-page .aps-step { text-align: center; }
.aps-page .aps-step .aps-step__no { display: inline-block; margin: 0 0 16px; padding: 4px 14px; border-radius: 999px; background: var(--grad-strong); color: #fff; font-size: 13px; font-weight: 700; letter-spacing: 0.06em; }
.aps-page .aps-step .aps-iconbox__icon { margin-inline: auto; }
.aps-page .aps-step h3 { margin: 0 0 8px; color: var(--c-ink); font-size: 1.15rem; font-weight: 700; line-height: 1.3; }
.aps-page .aps-step p { margin: 0; font-size: 15px; line-height: 1.65; }

/* Media: aps-media on an Image block. */
.aps-page .aps-media { margin: 0; }
.aps-page .aps-media img { display: block; width: 100%; height: auto; border-radius: 22px; box-shadow: 0 18px 44px rgba(16, 47, 65, 0.16); }

/* Call to action band: aps-cta on a full-width Group (instead of aps-section), a Heading with aps-title, a Paragraph and Buttons with aps-btn--white. */
.aps-page .aps-cta { padding: 72px 0; background: linear-gradient(300deg, #07558d, #1479b4); color: #fff; text-align: center; }
.aps-page .aps-cta .aps-title { color: #fff; }
.aps-page .aps-cta .aps-title::after { margin-inline: auto; background: rgba(255, 255, 255, 0.7); }
.aps-page .aps-cta p { margin: 16px 0 24px; color: rgba(255, 255, 255, 0.94); font-size: 17px; }
.aps-page .aps-cta .wp-block-buttons { justify-content: center; }

@media (max-width: 767px) {
	.aps-page .aps-section { padding-block: 52px; font-size: 16px; }
	.aps-page .page-content > .aps-section:first-child:not(.aps-section--tint) { margin-top: -52px; }
	.aps-page .aps-section__head { margin-bottom: 28px; }
	.aps-page .aps-iconbox { padding: 22px; }
	.aps-page .aps-cta { padding: 56px 0; }
}