/* Settings → Custom Code → CSS. Edit it there — this file is rewritten on save. */
.top-bar .btn-topbar-cta {
	--cta-color:      var(--text-buttons-links-text-button-primary, #FFF);
	--cta-heart:      #F52CA8;
	--cta-heart-size: 22px;
	--cta-pad-y:      8px;
	--cta-pad-x:      18px;
	--cta-gap:        8px;
	--cta-grow:       1.25;
	--cta-speed:      .3s;

	position: relative;
	display: inline-flex;
	align-items: center;
	isolation: isolate;
	overflow: hidden;

	padding:
		var(--cta-pad-y)
		calc(var(--cta-pad-x) + var(--cta-gap) + var(--cta-heart-size))
		var(--cta-pad-y)
		var(--cta-pad-x);

	border: 1px solid var(--cta-color);
	border-radius: 999px;
	background-color: transparent;

	color: var(--cta-color);
	font-family: 'Muller', 'Montserrat', system-ui, -apple-system, 'Segoe UI', sans-serif;
	font-size: var(--font-size-16, 16px);
	font-style: normal;
	font-weight: 500;
	line-height: 18.286px;
	text-decoration: none;
	white-space: nowrap;

	transition: color var(--cta-speed) ease;
}

.top-bar .btn-topbar-cta::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	background-image: linear-gradient(90deg, #5FD7ED 0%, #CA298C 100%);
	opacity: 0;
	transition: opacity var(--cta-speed) ease;
}

.top-bar .btn-topbar-cta::after {
	content: "";
	position: absolute;
	top: 50%;
	right: var(--cta-pad-x);
	width: var(--cta-heart-size);
	height: var(--cta-heart-size);
	transform: translateY(-50%);
	background-color: var(--cta-heart);
	-webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M15.3043 2.75C13.4307 2.75 11.8128 3.84725 10.9997 5.44775C10.1866 3.84725 8.56867 2.75 6.69501 2.75C4.00917 2.75 1.83301 5.00225 1.83301 7.77425C1.83301 10.5463 3.49859 13.0873 5.65092 15.1745C7.80326 17.2618 10.9997 19.25 10.9997 19.25C10.9997 19.25 14.0925 17.2948 16.3484 15.1745C18.7547 12.914 20.1663 10.5545 20.1663 7.77425C20.1663 4.994 17.9902 2.75 15.3043 2.75Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 22 22'%3E%3Cpath d='M15.3043 2.75C13.4307 2.75 11.8128 3.84725 10.9997 5.44775C10.1866 3.84725 8.56867 2.75 6.69501 2.75C4.00917 2.75 1.83301 5.00225 1.83301 7.77425C1.83301 10.5463 3.49859 13.0873 5.65092 15.1745C7.80326 17.2618 10.9997 19.25 10.9997 19.25C10.9997 19.25 14.0925 17.2948 16.3484 15.1745C18.7547 12.914 20.1663 10.5545 20.1663 7.77425C20.1663 4.994 17.9902 2.75 15.3043 2.75Z' fill='%23000'/%3E%3C/svg%3E") no-repeat center / contain;
	transition:
		right var(--cta-speed) ease,
		transform var(--cta-speed) ease,
		background-color var(--cta-speed) ease;
}

.top-bar .btn-topbar-cta .btn__icon {
	display: none;
}

.top-bar .btn-topbar-cta:hover,
.top-bar .btn-topbar-cta:focus-visible {
	background-color: transparent;
	border-color: var(--cta-color);
	color: transparent;
}

.top-bar .btn-topbar-cta:hover::before,
.top-bar .btn-topbar-cta:focus-visible::before {
	opacity: 1;
}

.top-bar .btn-topbar-cta:hover::after,
.top-bar .btn-topbar-cta:focus-visible::after {
	right: 50%;
	transform: translate(50%, -50%) scale(var(--cta-grow));
	background-color: #FFF;
}

@media (prefers-reduced-motion: reduce) {
	.top-bar .btn-topbar-cta,
	.top-bar .btn-topbar-cta::before,
	.top-bar .btn-topbar-cta::after {
		transition-duration: 0s;
	}
}

body:not(.home) .layout--hero > .layout__bg-media::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to top,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0) 50%
	);
	pointer-events: none;
}

body.home .layout--hero.has-bg-media {
	overflow: hidden;
}

body.home .layout__hero--top-image .layout__hero-content {
	position: relative;
}

body.home .layout__hero--top-image .layout__hero-content::before {
	content: "";
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 160%;
	height: 320%;
	background: radial-gradient(
		ellipse at center,
		rgba(0, 0, 0, 0.5) 0%,
		rgba(0, 0, 0, 0.35) 40%,
		rgba(0, 0, 0, 0) 70%
	);
	pointer-events: none;
	z-index: 0;
}

body.home .layout__hero--top-image .layout__hero-media,
body.home .layout__hero--top-image .layout__hero-text {
	position: relative;
	z-index: 1;
}

body.home .layout__hero--top-image .layout__title {
 text-transform: capitalize;
	font-size: 60px;
	font-style: normal;
	font-weight: 700;
	line-height: 130%;
	margin-bottom: 0;
}

@media (max-width: 991.98px) {
	body.home .layout__hero--top-image .layout__title {
		font-size: 44px;
	}
}

@media (max-width: 575.98px) {
	body.home .layout__hero--top-image .layout__title {
		font-size: 34px;
	}

	body.home .layout__hero--top-image .layout__hero-content::before {
		width: 200%;
	}
}

/* =============================================================================
   Gradient Background Styles — bg-g--{side}{vertical}-{colour}
   =============================================================================
   Pick one as a section's Background Style, or as Background Style 2 to layer it
   over a solid. Each class needs a matching row in Theme Settings → Backgrounds
   (Class = the class below, Title = the label) with NO Bg Color set, so the
   gradient tints whatever the section already wears.

   One ::after layer per section, inset:0 — the layer IS the section box, so the
   blob's height always follows the layout height and every value below is a % of
   that box. Fluid at any width, no media queries.

   A radial-gradient never paints outside its own box, so the section edge clips
   the blob automatically. That is the "sticks out" effect; no overflow:hidden is
   needed (and it would clip full-bleed images and break sticky children).

   Figma source:
     blue    1232 x 999   opacity .36   radial 34.29% 25.28%   #4B9CD3
     yellow  1470 x 1319  opacity .2    radial 48.91% 38.96%   #CFF000
   The opacity is folded into the colour's alpha (same result, and it lets the
   two-colour variants below carry different opacities in a single layer). The
   HORIZONTAL radii are rescaled from the Figma frame width to a 1440 section
   (1232/1440, 1470/1440). The VERTICAL radii are not taken from Figma at all —
   they are driven by the section height instead, see --g-spread below.

   --g-out = how far the blob hangs off the SIDE, expressed as the inset of the
   blob's CENTRE from the edge (= rx x (1 - 2 x the fraction hanging out)):
     blue    35% of the blob outside  ->  rx x 0.3  =  8.80%
     yellow  50% of the blob outside  ->  rx x 0    =  0%

   Vertically every variant is anchored the same way — the blob's centre sits on
   an edge (top / bottom) or dead centre, and the radius is what sets its reach:
     top / bottom   centre ON the edge, so half the blob is cut and the visible
                    half is one radius tall: --g-spread, 75% of the section.
     centre         radius 50%, so the blob spans the full section height.

   Nudge --g-out, --g-spread and the horizontal radii to taste; nothing else has
   to change.

   NOTE: one layer per section, so don't put two single-colour gradient classes
   on the same section (Style 1 + Style 2) — the vars would fight. For two
   colours at once use the bg-g--cc-* variants at the bottom.
   ============================================================================= */

:root {
	--g-blue:     rgba(75, 156, 211, 0.36);
	--g-blue-0:   rgba(75, 156, 211, 0);
	--g-yellow:   rgba(207, 240, 0, 0.2);
	--g-yellow-0: rgba(207, 240, 0, 0);

	/* Top / bottom variants only: the visible reach of a corner blob, measured
	   from its edge. The other half of the blob is cut off by that edge. */
	--g-spread:   75%;
}

/* The layer. z-index 0 sits above .layout__bg-media (also 0, but earlier in the
   DOM) and below .layout__inner (z-index 1), so content stays on top and a
   background image or video still shows through the tint. */
[class*="bg-g--"] {
	position: relative;
}

[class*="bg-g--"]::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 0;
	pointer-events: none;
	background-image: radial-gradient(
		var(--g-rx) var(--g-ry) at var(--g-x) var(--g-y),
		var(--g-c) 0%,
		var(--g-c0) 100%
	);
}

/* --- Colour: tint, blob width, and how far it hangs off the side ----------- */

.bg-g--rc-blue, .bg-g--rt-blue, .bg-g--rb-blue,
.bg-g--lc-blue, .bg-g--lt-blue, .bg-g--lb-blue {
	--g-c:   var(--g-blue);
	--g-c0:  var(--g-blue-0);
	--g-rx:  29.34%;
	--g-out: 8.80%;
}

.bg-g--rc-yellow, .bg-g--rt-yellow, .bg-g--rb-yellow,
.bg-g--lc-yellow, .bg-g--lt-yellow, .bg-g--lb-yellow {
	--g-c:   var(--g-yellow);
	--g-c0:  var(--g-yellow-0);
	--g-rx:  49.93%;
	--g-out: 0%;
}

/* --- Side: r = right edge, l = left edge ----------------------------------- */

.bg-g--rc-blue, .bg-g--rt-blue, .bg-g--rb-blue,
.bg-g--rc-yellow, .bg-g--rt-yellow, .bg-g--rb-yellow {
	--g-x: calc(100% - var(--g-out));
}

.bg-g--lc-blue, .bg-g--lt-blue, .bg-g--lb-blue,
.bg-g--lc-yellow, .bg-g--lt-yellow, .bg-g--lb-yellow {
	--g-x: var(--g-out);
}

/* --- Vertical: c = centre, t = top, b = bottom -----------------------------
   Centre: radius 50% at 50%, so the blob covers the full section height.
   Top / bottom: centre pinned to the edge (0% / 100%), so the blob starts at
   full strength there, its upper (or lower) half is cut off, and the half that
   shows reaches --g-spread — 75% — down or up the section. */

.bg-g--rc-blue, .bg-g--lc-blue,
.bg-g--rc-yellow, .bg-g--lc-yellow {
	--g-ry: 50%;
	--g-y:  50%;
}

.bg-g--rt-blue, .bg-g--lt-blue,
.bg-g--rt-yellow, .bg-g--lt-yellow {
	--g-ry: var(--g-spread);
	--g-y:  0%;
}

.bg-g--rb-blue, .bg-g--lb-blue,
.bg-g--rb-yellow, .bg-g--lb-yellow {
	--g-ry: var(--g-spread);
	--g-y:  100%;
}

/* --- Two-colour centre variants -------------------------------------------
   Both blobs in the one layer, one per side, each at full section height. The
   colour order in the class name reads left to right. Values are written out
   rather than driven by the vars above, because the two halves need different
   geometry in the same rule. */

.bg-g--cc-yellow-blue::after {
	background-image:
		radial-gradient(49.93% 50% at 0% 50%,     var(--g-yellow) 0%, var(--g-yellow-0) 100%),
		radial-gradient(29.34% 50% at 91.2% 50%,  var(--g-blue)   0%, var(--g-blue-0)   100%);
}

.bg-g--cc-blue-yellow::after {
	background-image:
		radial-gradient(29.34% 50% at 8.8% 50%,   var(--g-blue)   0%, var(--g-blue-0)   100%),
		radial-gradient(49.93% 50% at 100% 50%,   var(--g-yellow) 0%, var(--g-yellow-0) 100%);
}

.layout--statistics.layout--bg-color-w-container {border-radius: 25px;}

.blog-filter--side .blog-filter__heading.blog-filter__heading {
	font-family: Muller, "Helvetica Neue", Arial, sans-serif;
	font-size: 24px;
	font-style: normal;
	font-weight: 500;
	line-height: 1.3; /* 130% = 31.2px */
	letter-spacing: 0.05em; /* 1.2px at 24px */
	text-transform: uppercase;
	color: #004263;
}